zeed-dynamic-table
Version:
A flexible and dynamic table component for React and Next.js applications without Tailwind dependencies
181 lines (180 loc) • 4 kB
TypeScript
import { type ClassValue } from "clsx";
export declare function cn(...inputs: ClassValue[]): string;
/**
* A simple utility to combine class names without external dependencies
* Replaces the Tailwind-dependent cn utility
*/
export declare function classNames(...classes: (string | boolean | undefined | null)[]): string;
/**
* Default color palette to replace Tailwind colors
* These can be used directly in style objects
*/
export declare const colors: {
white: string;
black: string;
primary: string;
primaryHover: string;
primaryLight: string;
primaryDark: string;
gray50: string;
gray100: string;
gray200: string;
gray300: string;
gray400: string;
gray500: string;
gray600: string;
gray700: string;
gray800: string;
gray900: string;
success: string;
successLight: string;
successDark: string;
danger: string;
dangerLight: string;
dangerDark: string;
warning: string;
warningLight: string;
warningDark: string;
info: string;
infoLight: string;
infoDark: string;
};
/**
* Common CSS styles that can be used directly in style objects
* These replace Tailwind utility classes with direct styles
*/
export declare const styles: {
flexRow: {
display: string;
flexDirection: "row";
};
flexCol: {
display: string;
flexDirection: "column";
};
flexCenter: {
display: string;
justifyContent: string;
alignItems: string;
};
flexBetween: {
display: string;
justifyContent: string;
alignItems: string;
};
p1: {
padding: string;
};
p2: {
padding: string;
};
p3: {
padding: string;
};
p4: {
padding: string;
};
p5: {
padding: string;
};
m1: {
margin: string;
};
m2: {
margin: string;
};
m3: {
margin: string;
};
m4: {
margin: string;
};
m5: {
margin: string;
};
textSm: {
fontSize: string;
lineHeight: string;
};
textBase: {
fontSize: string;
lineHeight: string;
};
textLg: {
fontSize: string;
lineHeight: string;
};
textXl: {
fontSize: string;
lineHeight: string;
};
fontNormal: {
fontWeight: number;
};
fontMedium: {
fontWeight: number;
};
fontSemibold: {
fontWeight: number;
};
fontBold: {
fontWeight: number;
};
borderBase: {
border: string;
};
borderLight: {
border: string;
};
borderDark: {
border: string;
};
rounded: {
borderRadius: string;
};
roundedMd: {
borderRadius: string;
};
roundedLg: {
borderRadius: string;
};
roundedFull: {
borderRadius: string;
};
shadowSm: {
boxShadow: string;
};
shadowMd: {
boxShadow: string;
};
shadowLg: {
boxShadow: string;
};
lightMode: {
bg: string;
text: string;
border: string;
};
darkMode: {
bg: string;
text: string;
border: string;
};
};
/**
* Generate size values in pixels
* Replaces Tailwind size classes
*/
export declare function sizeValue(size: "xs" | "sm" | "md" | "lg" | "xl" | number): string;
/**
* Helper to apply a style only if the condition is true
*/
export declare function applyIf(condition: boolean, styles: Record<string, any>): Record<string, any>;
/**
* Generate a CSS-in-JS style object from customizable props
*/
export declare function generateStyles(baseStyles: Record<string, any>, additionalStyles?: Record<string, any>, conditionalStyles?: Array<[boolean, Record<string, any>]>): Record<string, any>;
/**
* Deep merge utility for merging objects
*/
export declare function deepMerge<T extends Record<string, any>>(target: T, source: Partial<T>): T;