@urbicon-ui/table 6.1.4

package/dist/variants/table-states.variants.js

@@ -0,0 +1,394 @@
+/**
+ * TABLE STATE VARIANTS
+ * Variants for different table states.
+ */
+import { tv } from '@urbicon-ui/blocks';
+import { TABLE_ANIMATIONS, TABLE_DIMENSIONS } from './table.system';
+/**
+ * EMPTY STATE VARIANTS
+ */
+export const emptyStateVariants = tv({
+    slots: {
+        container: ['flex flex-col items-center justify-center', 'text-center'],
+        icon: [
+            'text-text-tertiary opacity-50',
+            'transition-opacity duration-[var(--blocks-duration-fast)]'
+        ],
+        iconSvg: ['stroke-[1.5]'],
+        content: ['flex flex-col items-center gap-3'],
+        title: ['font-semibold text-text-primary', 'leading-tight'],
+        description: ['text-text-secondary', 'leading-relaxed max-w-md'],
+        action: [
+            'inline-flex items-center gap-2',
+            'px-4 py-2.5',
+            'bg-primary text-white',
+            'rounded-commit font-medium',
+            'transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-[var(--blocks-duration-fast)]',
+            'hover:bg-primary-hover hover:-translate-y-0.5',
+            'active:translate-y-0',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2'
+        ]
+    },
+    variants: {
+        size: {
+            sm: {
+                container: 'py-8 gap-4',
+                iconSvg: 'w-10 h-10',
+                title: 'text-base',
+                description: 'text-xs'
+            },
+            md: {
+                container: 'py-12 gap-6',
+                iconSvg: 'w-12 h-12',
+                title: 'text-lg',
+                description: 'text-sm'
+            },
+            lg: {
+                container: 'py-16 gap-8',
+                iconSvg: 'w-16 h-16',
+                title: 'text-xl',
+                description: 'text-base'
+            }
+        },
+        variant: {
+            default: {
+                icon: 'text-text-tertiary'
+            },
+            search: {
+                icon: 'text-primary'
+            },
+            filter: {
+                icon: 'text-filter'
+            },
+            error: {
+                icon: 'text-danger'
+            }
+        },
+        bordered: {
+            true: {
+                container: ['border-2 border-dashed border-border-subtle', 'rounded-contain']
+            },
+            false: {}
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'default',
+        bordered: false
+    }
+});
+/**
+ * LOADING STATE VARIANTS
+ */
+export const loadingStateVariants = tv({
+    slots: {
+        container: ['flex flex-col items-center justify-center', 'text-center'],
+        spinner: ['text-primary'],
+        spinnerSvg: [TABLE_ANIMATIONS.loading.spin],
+        content: ['flex flex-col items-center gap-2'],
+        text: ['font-medium text-text-primary', 'leading-tight'],
+        description: ['text-text-secondary', 'leading-relaxed'],
+        skeleton: [TABLE_ANIMATIONS.loading.skeleton, 'rounded-modify']
+    },
+    variants: {
+        size: {
+            sm: {
+                container: 'py-8 gap-3',
+                spinnerSvg: 'w-8 h-8',
+                text: 'text-sm',
+                description: 'text-xs'
+            },
+            md: {
+                container: 'py-12 gap-4',
+                spinnerSvg: 'w-10 h-10',
+                text: 'text-base',
+                description: 'text-sm'
+            },
+            lg: {
+                container: 'py-16 gap-6',
+                spinnerSvg: 'w-12 h-12',
+                text: 'text-lg',
+                description: 'text-base'
+            }
+        },
+        variant: {
+            spinner: {},
+            skeleton: {},
+            dots: {},
+            progress: {}
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'spinner'
+    }
+});
+/**
+ * ERROR STATE VARIANTS
+ * Error states during data loading.
+ */
+export const errorStateVariants = tv({
+    slots: {
+        container: ['flex flex-col items-center justify-center', 'text-center'],
+        icon: ['text-danger'],
+        iconSvg: ['stroke-[1.5]'],
+        content: ['flex flex-col items-center gap-4 w-full'],
+        title: ['font-semibold text-text-primary', 'leading-tight'],
+        message: ['text-text-secondary', 'leading-relaxed max-w-md'],
+        details: ['w-full max-w-md'],
+        detailsToggle: [
+            'inline-flex items-center gap-1',
+            'px-2 py-1',
+            'text-xs font-medium text-text-secondary',
+            'rounded-modify border border-border-subtle',
+            'cursor-pointer transition-[color,background-color,border-color,box-shadow,opacity] duration-[var(--blocks-duration-fast)]',
+            'hover:bg-surface-subtle hover:text-text-primary',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2'
+        ],
+        detailsIcon: ['transition-transform duration-[var(--blocks-duration-fast)]'],
+        detailsContent: [
+            'mt-3 p-3',
+            'bg-surface-subtle',
+            'border border-border-subtle',
+            'rounded-contain text-left'
+        ],
+        detailsText: ['text-xs text-text-secondary font-mono', 'whitespace-pre-wrap break-words'],
+        retryButton: [
+            'inline-flex items-center gap-2',
+            'px-4 py-2.5',
+            'bg-primary text-white',
+            'rounded-commit font-medium',
+            'transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-[var(--blocks-duration-fast)]',
+            'hover:bg-primary-hover hover:-translate-y-0.5',
+            'active:translate-y-0',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2'
+        ],
+        retryIcon: ['w-4 h-4', 'stroke-current']
+    },
+    variants: {
+        size: {
+            sm: {
+                container: 'py-8 gap-4',
+                iconSvg: 'w-10 h-10',
+                title: 'text-base',
+                message: 'text-xs'
+            },
+            md: {
+                container: 'py-12 gap-6',
+                iconSvg: 'w-12 h-12',
+                title: 'text-lg',
+                message: 'text-sm'
+            },
+            lg: {
+                container: 'py-16 gap-8',
+                iconSvg: 'w-16 h-16',
+                title: 'text-xl',
+                message: 'text-base'
+            }
+        },
+        severity: {
+            error: {
+                icon: 'text-danger',
+                retryButton: 'bg-danger hover:bg-danger-hover'
+            },
+            warning: {
+                icon: 'text-warning-emphasis',
+                retryButton: 'bg-warning hover:bg-warning-hover'
+            },
+            info: {
+                icon: 'text-primary',
+                retryButton: 'bg-primary hover:bg-primary-hover'
+            }
+        },
+        detailsExpanded: {
+            true: {
+                detailsIcon: 'rotate-180'
+            },
+            false: {}
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        severity: 'error',
+        detailsExpanded: false
+    }
+});
+/**
+ * SKELETON LOADER VARIANTS
+ * Skeleton loading for table rows.
+ */
+export const skeletonRowVariants = tv({
+    slots: {
+        row: ['animate-pulse'],
+        cell: [],
+        skeleton: ['h-4 bg-surface-subtle rounded-modify', TABLE_ANIMATIONS.loading.skeleton]
+    },
+    variants: {
+        size: {
+            sm: {
+                cell: TABLE_DIMENSIONS.padding.cell.sm,
+                skeleton: 'h-3'
+            },
+            md: {
+                cell: TABLE_DIMENSIONS.padding.cell.md,
+                skeleton: 'h-4'
+            },
+            lg: {
+                cell: TABLE_DIMENSIONS.padding.cell.lg,
+                skeleton: 'h-5'
+            }
+        },
+        width: {
+            full: {
+                skeleton: 'w-full'
+            },
+            '3/4': {
+                skeleton: 'w-3/4'
+            },
+            '1/2': {
+                skeleton: 'w-1/2'
+            },
+            '1/3': {
+                skeleton: 'w-1/3'
+            },
+            '1/4': {
+                skeleton: 'w-1/4'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        width: '3/4'
+    }
+});
+/**
+ * MOBILE CARD VARIANTS
+ * Mobile-optimized card display.
+ */
+export const mobileCardVariants = tv({
+    slots: {
+        card: [
+            'bg-surface-base',
+            'border border-border-subtle',
+            'rounded-contain overflow-hidden',
+            'mb-3',
+            'transition-[color,background-color,border-color,box-shadow,opacity] duration-[var(--blocks-duration-fast)]',
+            'hover:border-border-default hover:shadow-[var(--blocks-shadow-sm)]'
+        ],
+        header: ['p-4 pb-0'],
+        content: ['p-4 pt-3'],
+        field: ['flex flex-col gap-1 mb-3'],
+        label: ['text-xs font-medium text-text-tertiary', 'uppercase tracking-wide'],
+        value: ['text-sm text-text-primary truncate'],
+        actions: ['flex items-center justify-end gap-2', 'p-3 pt-0'],
+        expandButton: [
+            'ml-auto p-1 rounded-modify',
+            'hover:bg-surface-hover',
+            'transition-colors duration-[var(--blocks-duration-fast)]'
+        ],
+        expandIcon: ['transition-transform duration-[var(--blocks-duration-fast)]'],
+        expandedContent: ['px-4 pb-4', 'border-t border-border-subtle pt-4']
+    },
+    variants: {
+        size: {
+            sm: {
+                header: 'p-3 pb-0',
+                content: 'p-3 pt-2',
+                field: 'mb-2'
+            },
+            md: {
+                header: 'p-4 pb-0',
+                content: 'p-4 pt-3',
+                field: 'mb-3'
+            },
+            lg: {
+                header: 'p-5 pb-0',
+                content: 'p-5 pt-4',
+                field: 'mb-4'
+            }
+        },
+        selected: {
+            true: {
+                card: 'border-primary bg-primary-subtle'
+            },
+            false: {}
+        },
+        interactive: {
+            true: {
+                card: 'cursor-pointer active:scale-[0.995]'
+            },
+            false: {}
+        },
+        expanded: {
+            true: {
+                expandIcon: 'rotate-180',
+                card: 'shadow-[var(--blocks-shadow-md)]'
+            },
+            false: {}
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        selected: false,
+        interactive: false,
+        expanded: false
+    }
+});
+/**
+ * INLINE EDIT VARIANTS
+ * Inline cell editing.
+ */
+export const inlineEditVariants = tv({
+    slots: {
+        container: ['relative w-full h-full'],
+        display: [
+            'flex items-center h-full',
+            'cursor-text',
+            'transition-colors duration-[var(--blocks-duration-fast)]'
+        ],
+        input: [
+            'absolute inset-0',
+            'w-full h-full',
+            'px-3 py-2',
+            'bg-surface-base',
+            'border-2 border-primary',
+            'rounded-modify',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2'
+        ],
+        actions: [
+            'absolute right-0 top-full mt-1',
+            'flex items-center gap-1',
+            'p-1',
+            'bg-surface-elevated',
+            'border border-border-default',
+            'rounded-modify shadow-[var(--blocks-shadow-lg)]',
+            'z-10'
+        ],
+        button: [
+            'p-1 rounded-modify',
+            'hover:bg-surface-hover',
+            'transition-colors duration-[var(--blocks-duration-fast)]'
+        ]
+    },
+    variants: {
+        editing: {
+            true: {
+                display: 'opacity-0 pointer-events-none'
+            },
+            false: {
+                input: 'hidden',
+                actions: 'hidden'
+            }
+        },
+        invalid: {
+            true: {
+                input: 'border-danger focus-visible:ring-danger'
+            },
+            false: {}
+        }
+    },
+    defaultVariants: {
+        editing: false,
+        invalid: false
+    }
+});

package/dist/variants/table.system.d.ts

@@ -0,0 +1,301 @@
+/**
+ * ⚡ TABLE PRIMITIVES
+ * Basic table-specific patterns and tokens.
+ * Extends blocks/primitives with table-specific functionality.
+ */
+/**
+ * TABLE-SPECIFIC INTENTS
+ * Extended semantic colors for table features.
+ */
+export declare const TABLE_INTENTS: {
+    readonly primary: "primary";
+    readonly neutral: "neutral";
+    readonly success: "success";
+    readonly danger: "danger";
+    readonly warning: "warning";
+    readonly filter: "filter";
+    readonly group: "group";
+    readonly summary: "summary";
+};
+/**
+ * TABLE DIMENSIONS
+ */
+export declare const TABLE_DIMENSIONS: {
+    readonly height: {
+        readonly header: {
+            readonly sm: "h-8";
+            readonly md: "h-10";
+            readonly lg: "h-12";
+        };
+        readonly row: {
+            readonly sm: "h-8";
+            readonly md: "h-10";
+            readonly lg: "h-12";
+        };
+        readonly mobileCard: {
+            readonly sm: "min-h-16";
+            readonly md: "min-h-24";
+            readonly lg: "min-h-32";
+        };
+    };
+    readonly padding: {
+        readonly cell: {
+            readonly sm: "px-0.5 py-0.5";
+            readonly md: "px-1 py-1";
+            readonly lg: "px-2 py-1.5";
+        };
+        readonly headerCell: {
+            readonly sm: "px-0.5 py-0.5";
+            readonly md: "px-1 py-1";
+            readonly lg: "px-2 py-2";
+        };
+        readonly mobileCard: {
+            readonly sm: "p-2";
+            readonly md: "p-3";
+            readonly lg: "p-4";
+        };
+    };
+    readonly width: {
+        readonly minTable: "min-w-[600px]";
+        readonly maxTable: "max-w-full";
+        readonly columnMin: "min-w-[100px]";
+        readonly columnMax: "max-w-[500px]";
+    };
+};
+/**
+ * TABLE SURFACES
+ * Table-specific surface definitions.
+ */
+export declare const TABLE_SURFACES: {
+    readonly base: {
+        readonly header: "bg-surface-elevated";
+        readonly row: "bg-surface-base";
+        readonly rowHover: "hover:bg-surface-hover";
+        readonly rowSelected: "bg-surface-selected";
+        readonly rowGrouped: "bg-surface-elevated";
+    };
+    readonly intent: {
+        readonly filter: {
+            readonly subtle: "bg-filter-subtle";
+            readonly emphasis: "bg-filter-emphasis";
+            readonly hover: "hover:bg-filter-hover";
+        };
+        readonly group: {
+            readonly subtle: "bg-group-subtle";
+            readonly emphasis: "bg-group-emphasis";
+            readonly hover: "hover:bg-group-hover";
+        };
+        readonly summary: {
+            readonly subtle: "bg-summary-subtle";
+            readonly emphasis: "bg-summary-emphasis";
+            readonly hover: "hover:bg-summary-hover";
+        };
+    };
+};
+/**
+ * TABLE BORDERS
+ */
+export declare const TABLE_BORDERS: {
+    readonly width: {
+        readonly none: "border-0";
+        readonly thin: "border";
+        readonly thick: "border-2";
+    };
+    readonly position: {
+        readonly all: "border";
+        readonly top: "border-t";
+        readonly right: "border-r";
+        readonly bottom: "border-b";
+        readonly left: "border-l";
+        readonly horizontal: "border-t border-b";
+        readonly vertical: "border-l border-r";
+    };
+    readonly color: {
+        readonly hairline: "border-border-hairline";
+        readonly subtle: "border-border-subtle";
+        readonly default: "border-border-default";
+        readonly emphasis: "border-border-emphasis";
+        readonly filter: "border-filter";
+        readonly group: "border-group";
+        readonly summary: "border-summary";
+    };
+};
+/**
+ * TABLE INDICATORS
+ * Visual indicators for table features.
+ */
+export declare const TABLE_INDICATORS: {
+    readonly dot: {
+        readonly base: "rounded-full";
+        readonly size: {
+            readonly xs: "w-1 h-1";
+            readonly sm: "w-1.5 h-1.5";
+            readonly md: "w-2 h-2";
+            readonly lg: "w-2.5 h-2.5";
+        };
+        readonly intent: {
+            readonly filter: "bg-filter";
+            readonly group: "bg-group";
+            readonly summary: "bg-summary";
+            readonly primary: "bg-primary";
+            readonly success: "bg-success";
+            readonly warning: "bg-warning";
+            readonly danger: "bg-danger";
+        };
+    };
+    readonly bar: {
+        readonly base: "transition-[background-color,width] duration-[var(--blocks-duration-normal)]";
+        readonly size: {
+            readonly xs: "h-0.5";
+            readonly sm: "h-1";
+            readonly md: "h-1.5";
+            readonly lg: "h-2";
+        };
+        readonly position: {
+            readonly bottom: "absolute bottom-0 left-0 right-0";
+            readonly top: "absolute top-0 left-0 right-0";
+            readonly left: "absolute top-0 left-0 bottom-0 w-1";
+            readonly right: "absolute top-0 right-0 bottom-0 w-1";
+        };
+    };
+    readonly badge: {
+        readonly base: "inline-flex items-center justify-center font-semibold rounded-full";
+        readonly size: {
+            readonly xs: "min-w-4 h-4 px-1 text-[10px]";
+            readonly sm: "min-w-5 h-5 px-1.5 text-xs";
+            readonly md: "min-w-6 h-6 px-2 text-sm";
+            readonly lg: "min-w-7 h-7 px-2.5 text-base";
+        };
+    };
+};
+/**
+ * TABLE STATES
+ * Table element states.
+ */
+export declare const TABLE_STATES: {
+    readonly row: {
+        readonly default: "";
+        readonly hover: "hover:bg-surface-hover";
+        readonly selected: "bg-primary-subtle border-primary";
+        readonly expanded: "bg-surface-hover";
+        readonly grouped: "bg-surface-elevated font-semibold";
+        readonly disabled: "opacity-50 pointer-events-none";
+    };
+    readonly cell: {
+        readonly default: "";
+        readonly sortable: "cursor-pointer hover:bg-surface-hover";
+        readonly sorted: "bg-primary-subtle text-primary-emphasis font-semibold";
+        readonly editable: "cursor-text hover:ring-2 hover:ring-primary";
+        readonly readonly: "cursor-not-allowed opacity-75";
+    };
+    readonly feature: {
+        readonly active: "ring-2 ring-primary";
+        readonly inactive: "opacity-60";
+        readonly loading: "animate-pulse";
+        readonly error: "ring-2 ring-danger";
+    };
+};
+/**
+ * TABLE ANIMATIONS
+ * Animation patterns for table interactions.
+ */
+export declare const TABLE_ANIMATIONS: {
+    readonly expand: {
+        readonly trigger: "transition-transform duration-[var(--blocks-duration-normal)]";
+        readonly expanded: "rotate-0";
+        readonly collapsed: "-rotate-90";
+    };
+    readonly sort: {
+        readonly base: "transition-transform duration-[var(--blocks-duration-fast)]";
+        readonly asc: "rotate-0";
+        readonly desc: "rotate-180";
+        readonly none: "opacity-0";
+    };
+    readonly loading: {
+        readonly pulse: "animate-pulse";
+        readonly spin: "animate-spin";
+        readonly skeleton: "animate-pulse bg-gradient-to-r from-surface-2 via-surface-3 to-surface-2";
+    };
+    readonly row: {
+        readonly enter: "animate-in fade-in duration-[var(--blocks-duration-normal)]";
+        readonly exit: "animate-out fade-out duration-[var(--blocks-duration-fast)]";
+        readonly reorder: "transition-[transform,opacity] duration-[var(--blocks-duration-slow)]";
+    };
+};
+/**
+ * TABLE RESPONSIVE
+ * Responsive breakpoints and utilities
+ */
+export declare const TABLE_RESPONSIVE: {
+    readonly visibility: {
+        readonly desktop: "hidden md:table-cell";
+        readonly tablet: "hidden sm:table-cell";
+        readonly mobile: "table-cell md:hidden";
+        readonly always: "table-cell";
+    };
+    readonly priority: {
+        readonly 1: "table-cell";
+        readonly 2: "hidden sm:table-cell";
+        readonly 3: "hidden md:table-cell";
+        readonly 4: "hidden lg:table-cell";
+        readonly 5: "hidden xl:table-cell";
+    };
+    readonly container: {
+        readonly sm: "@container-sm";
+        readonly md: "@container-md";
+        readonly lg: "@container-lg";
+    };
+};
+/**
+ * TABLE LAYOUTS
+ */
+export declare const TABLE_LAYOUTS: {
+    readonly variant: {
+        readonly default: "table-auto";
+        readonly fixed: "table-fixed";
+        readonly compact: "table-fixed text-sm";
+        readonly comfortable: "table-auto text-base";
+        readonly data: "table-fixed font-mono text-sm";
+    };
+    readonly density: {
+        readonly compact: {
+            readonly header: "h-8";
+            readonly row: "h-8";
+            readonly padding: "px-0.5 py-0.5";
+        };
+        readonly default: {
+            readonly header: "h-10";
+            readonly row: "h-10";
+            readonly padding: "px-1 py-1";
+        };
+        readonly comfortable: {
+            readonly header: "h-12";
+            readonly row: "h-12";
+            readonly padding: "px-2 py-1.5";
+        };
+    };
+};
+export type TableIntent = keyof typeof TABLE_INTENTS;
+export type TableSize = 'sm' | 'md' | 'lg';
+export type TableDensity = keyof typeof TABLE_LAYOUTS.density;
+export type TablePriority = 1 | 2 | 3 | 4 | 5;
+export type TableRowState = keyof typeof TABLE_STATES.row;
+export type TableCellState = keyof typeof TABLE_STATES.cell;
+/**
+ * UTILITY FUNCTIONS
+ */
+export declare const combineTableClasses: (tableClasses: string, blockPrimitives?: string) => string;
+export declare const getResponsiveColumnClass: (priority: TablePriority) => string;
+export declare const getDensityClasses: (density: TableDensity) => {
+    readonly header: "h-8";
+    readonly row: "h-8";
+    readonly padding: "px-0.5 py-0.5";
+} | {
+    readonly header: "h-10";
+    readonly row: "h-10";
+    readonly padding: "px-1 py-1";
+} | {
+    readonly header: "h-12";
+    readonly row: "h-12";
+    readonly padding: "px-2 py-1.5";
+};