@flikk/ui 1.0.0-beta.25 → 1.0.0-beta.26

package/dist/components/core/Sidebar/index.d.ts

@@ -4,10 +4,9 @@ export { SidebarContent } from "./SidebarContent";
 export { SidebarFooter } from "./SidebarFooter";
 export { SidebarNav } from "./SidebarNav";
 export { SidebarNavGroup } from "./SidebarNavGroup";
-export { SidebarSubmenu } from "./SidebarSubmenu";
 export { SidebarToggle } from "./SidebarToggle";
 export { SidebarMobileTrigger } from "./SidebarMobileTrigger";
 export { SidebarUserProfile } from "./SidebarUserProfile";
 export { SidebarLogo } from "./SidebarLogo";
-export { useSidebarContext } from "./SidebarContext";
-export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarNavProps, SidebarNavGroupProps, SidebarToggleProps, SidebarMobileTriggerProps, SidebarUserProfileProps, SidebarUserStatus, SidebarSide, SidebarVariant, SidebarContextValue, SidebarTheme, SidebarThemeOverrides, SidebarLogoProps, } from "./Sidebar.types";
+export { SidebarProvider, useSidebarContext } from "./SidebarContext";
+export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarNavProps, SidebarNavGroupProps, SidebarToggleProps, SidebarMobileTriggerProps, SidebarUserProfileProps, SidebarUserStatus, SidebarSide, SidebarVariant, SidebarDensity, SidebarContextValue, SidebarProviderProps, SidebarTheme, SidebarThemeOverrides, SidebarLogoProps, } from "./Sidebar.types";

package/dist/components/core/Skeleton/Skeleton.theme.js

@@ -4,7 +4,7 @@
  */
 const skeletonTheme = {
     // Base styles with background color and animation
-    baseStyle: "bg-[var(--color-background-tertiary)] overflow-hidden",
+    baseStyle: "bg-[var(--color-surface-sunken)] overflow-hidden",
     // Shape variants
     variants: {
         text: "h-4 rounded",

package/dist/components/core/Spinner/Spinner.theme.js

@@ -15,7 +15,7 @@ const spinnerTheme = {
     // Color variants
     colors: {
         ...semanticSpinnerColors,
-        dark: "border-[var(--color-background-quinary)] border-t-transparent",
+        dark: "border-[var(--color-surface-sunken)] border-t-transparent",
     },
     // Animation class with drop shadow
     animation: "animate-[spin_1s_linear_infinite] rounded-full",

package/dist/components/core/Tabs/Tabs.js

@@ -14,6 +14,9 @@ import { TabsBody } from './TabsBody.js';
  */
 const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueChange, orientation = "horizontal", size = "md", disabled = false, children, className, darkMode = false, ...props }, ref) => {
     const [currentValue, setCurrentValue] = useState(value || defaultValue || "");
+    // Track whether the user has switched tabs yet, so content only animates
+    // on an actual tab change and not on mount / page load.
+    const [hasSwitched, setHasSwitched] = useState(false);
     // Unique instance prefix to scope all DOM IDs to this Tabs instance
     const instanceId = useId();
     // Track trigger elements for underline positioning
@@ -42,6 +45,7 @@ const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueC
     // Safe value change handler with error handling
     const handleValueChange = useCallback((newValue) => {
         try {
+            setHasSwitched(true);
             if (!isControlled) {
                 setCurrentValue(newValue);
             }
@@ -71,7 +75,8 @@ const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueC
         registerTrigger,
         unregisterTrigger,
         instanceId,
-    }), [activeValue, handleValueChange, orientation, size, disabled, registerTrigger, unregisterTrigger, instanceId]);
+        hasSwitched,
+    }), [activeValue, handleValueChange, orientation, size, disabled, registerTrigger, unregisterTrigger, instanceId, hasSwitched]);
     // Memoize theme classes for performance
     const themeClasses = useMemo(() => ({
         baseStyle: tabsTheme.baseStyle,

package/dist/components/core/Tabs/Tabs.types.d.ts

@@ -141,4 +141,6 @@ export interface TabsContextValue {
     unregisterTrigger: (value: string) => void;
     /** Unique prefix scoping DOM IDs to this Tabs instance */
     instanceId: string;
+    /** Whether the user has switched tabs yet (false until the first change). Used to suppress content animation on mount. */
+    hasSwitched: boolean;
 }

package/dist/components/core/Tabs/TabsBody.js

@@ -10,7 +10,7 @@ import { getTabsBodyVariants } from './Tabs.animations.js';
  * TabsBody component displays content panels for tabs with directional fade animations
  */
 const TabsBody = React__default.forwardRef(({ value, forceMount = false, children, className, ...props }, ref) => {
-    const { value: selectedValue, orientation, instanceId } = useTabsContext();
+    const { value: selectedValue, orientation, instanceId, hasSwitched } = useTabsContext();
     const shouldReduceMotion = useReducedMotion();
     // Check if we're in Storybook and should disable animations
     const isInStorybook = typeof window !== 'undefined' && window.__STORYBOOK_DISABLE_ANIMATIONS__;
@@ -32,9 +32,11 @@ const TabsBody = React__default.forwardRef(({ value, forceMount = false, childre
     if (!shouldRender) {
         return null;
     }
-    // Determine animation props (user props will override due to spread order)
+    // Determine animation props (user props will override due to spread order).
+    // Until the user switches tabs, the panel snaps in (initial=false) so it does
+    // not animate on mount / page load — only actual tab changes animate.
     const animationProps = shouldDisableAnimations ? {} : {
-        initial: "initial",
+        initial: hasSwitched ? "initial" : false,
         animate: "animate",
         exit: "exit",
         variants: contentVariants,

package/dist/components/core/Tag/Tag.theme.js

@@ -16,7 +16,7 @@ const tagTheme = {
     },
     disabledStyle: "opacity-50 cursor-not-allowed",
     removeButtonStyle: "inline-flex items-center justify-center rounded-full p-1 " +
-        "hover:bg-[var(--color-background-quaternary)] " +
+        "hover:bg-[var(--color-surface-hover)] " +
         "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] " +
         "transition-all duration-300 cursor-pointer focus:outline-none " +
         "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",

package/dist/components/core/index.d.ts

@@ -47,3 +47,4 @@ export * from "./OfflineIndicator";
 export * from "./ContextMenu";
 export * from "./Pill";
 export * from "./Icon";
+export * from "./ImagePlaceholder";

package/dist/components/core/index.js

@@ -96,12 +96,11 @@ export { SidebarContent } from './Sidebar/SidebarContent.js';
 export { SidebarFooter } from './Sidebar/SidebarFooter.js';
 export { SidebarNav } from './Sidebar/SidebarNav.js';
 export { SidebarNavGroup } from './Sidebar/SidebarNavGroup.js';
-export { SidebarSubmenu } from './Sidebar/SidebarSubmenu.js';
 export { SidebarToggle } from './Sidebar/SidebarToggle.js';
 export { SidebarMobileTrigger } from './Sidebar/SidebarMobileTrigger.js';
 export { SidebarUserProfile } from './Sidebar/SidebarUserProfile.js';
 export { SidebarLogo } from './Sidebar/SidebarLogo.js';
-export { useSidebarContext } from './Sidebar/SidebarContext.js';
+export { SidebarProvider, useSidebarContext } from './Sidebar/SidebarContext.js';
 export { OfflineIndicator } from './OfflineIndicator/OfflineIndicator.js';
 export { offlineIndicatorTheme } from './OfflineIndicator/OfflineIndicator.theme.js';
 export { ContextMenu } from './ContextMenu/ContextMenu.js';
@@ -110,6 +109,7 @@ export { Pill } from './Pill/Pill.js';
 export { pillTheme } from './Pill/Pill.theme.js';
 export { Icon } from './Icon/Icon.js';
 export { fileTypes } from './Icon/data/fileTypes.js';
+export { ImagePlaceholder } from './ImagePlaceholder/ImagePlaceholder.js';
 export { AnimatePresence } from 'motion/react';
 export { CardBody } from './Card/CardBody.js';
 export { CardFooter } from './Card/CardFooter.js';

package/dist/components/data-display/GanttChart/GanttTableGroupRow.js

@@ -14,7 +14,7 @@ const GanttTableGroupRow = React__default.memo(({ row, }) => {
                 e.preventDefault();
                 toggleGroup(row.group.id);
             }
-        }, role: "button", tabIndex: 0, "aria-expanded": !isCollapsed, "aria-label": `${row.group.title} — ${row.completedCount} of ${row.taskCount} completed`, children: [jsxs("div", { className: "flex items-center gap-2 px-3 flex-1 min-w-0", children: [jsx(motion.div, { variants: chevronVariants, animate: isCollapsed ? "collapsed" : "open", children: jsx(ChevronRightIcon, { className: "size-4 text-[var(--color-text-muted)]" }) }), jsx("div", { className: "size-2.5 rounded-full shrink-0", style: { backgroundColor: row.group.color } }), jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: row.group.title }), jsxs("span", { className: "text-sm text-[var(--color-text-muted)] shrink-0", children: [row.completedCount, "/", row.taskCount] })] }), onTaskAdd && !readonly && (jsx("button", { className: "p-1 mr-2 rounded hover:bg-[var(--color-background-tertiary)] text-[var(--color-text-muted)] opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity", "aria-label": `Add task to ${row.group.title}`, onClick: (e) => {
+        }, role: "button", tabIndex: 0, "aria-expanded": !isCollapsed, "aria-label": `${row.group.title} — ${row.completedCount} of ${row.taskCount} completed`, children: [jsxs("div", { className: "flex items-center gap-2 px-3 flex-1 min-w-0", children: [jsx(motion.div, { variants: chevronVariants, animate: isCollapsed ? "collapsed" : "open", children: jsx(ChevronRightIcon, { className: "size-4 text-[var(--color-text-muted)]" }) }), jsx("div", { className: "size-2.5 rounded-full shrink-0", style: { backgroundColor: row.group.color } }), jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: row.group.title }), jsxs("span", { className: "text-sm text-[var(--color-text-muted)] shrink-0", children: [row.completedCount, "/", row.taskCount] })] }), onTaskAdd && !readonly && (jsx("button", { className: "p-1 mr-2 rounded hover:bg-[var(--color-surface-hover)] text-[var(--color-text-muted)] opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity", "aria-label": `Add task to ${row.group.title}`, onClick: (e) => {
                     e.stopPropagation();
                     onTaskAdd(row.group.id);
                 }, children: jsx(PlusIcon, { className: "size-4" }) }))] }));

package/dist/components/data-display/KPI/KPI.js

@@ -24,7 +24,13 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
         const sign = trend > 0 ? "+" : "";
         return `${sign}${trend}%`;
     }, [trend, trendLabel]);
-    const trendDirection = trend === undefined ? null : trend > 0 ? "up" : trend < 0 ? "down" : "neutral";
+    const trendDirection = trend === undefined
+        ? null
+        : trend > 0
+            ? "up"
+            : trend < 0
+                ? "down"
+                : "neutral";
     // Calculate filled bar count from progress
     const filledBars = useMemo(() => {
         if (progress === undefined)
@@ -32,7 +38,10 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
         return Math.round((Math.min(Math.max(progress, 0), 100) / 100) * barCount);
     }, [progress, barCount]);
     const barSize = kpiTheme.barSizes[size];
-    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: [jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { className: "flex items-baseline gap-2", children: [jsx("span", { className: cn(theme.valueSizes[size]), children: value }), label && (typeof label === 'string' ? (jsxs("span", { className: cn(theme.labelStyle, theme.labelSizes[size]), children: [icon && (jsx("span", { className: "inline-flex items-center mr-1", children: icon })), label] })) : label)] }), formattedTrend && trendDirection && (typeof formattedTrend === 'string' ? (jsxs("span", { className: cn("inline-flex items-center gap-0.5 font-medium", theme.trendSizes[size], trendDirection === "up" && theme.trendPositive, trendDirection === "down" && theme.trendNegative, trendDirection === "neutral" && theme.trendNeutral), children: [formattedTrend, trendDirection === "up" && jsx(ArrowUpRightIcon, { className: "size-4" }), trendDirection === "down" && jsx(ArrowDownRightIcon, { className: "size-4" })] })) : formattedTrend)] }), progress !== undefined && (jsx("div", { className: cn("flex items-end", barSize.gap), role: "img", "aria-label": `Progress: ${progress}%`, children: Array.from({ length: barCount }, (_, i) => {
+    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: [jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { className: "flex items-baseline gap-2", children: [jsx("span", { className: cn(theme.valueSizes[size]), children: value }), label &&
+                                (typeof label === "string" ? (jsxs("span", { className: cn(theme.labelStyle, theme.labelSizes[size]), children: [icon && (jsx("span", { className: "inline-flex items-center mr-1", children: icon })), label] })) : (label))] }), formattedTrend &&
+                        trendDirection &&
+                        (typeof formattedTrend === "string" ? (jsxs("span", { className: cn("inline-flex items-center gap-0.5 font-medium", theme.trendSizes[size], trendDirection === "up" && theme.trendPositive, trendDirection === "down" && theme.trendNegative, trendDirection === "neutral" && theme.trendNeutral), children: [formattedTrend, trendDirection === "up" && (jsx(ArrowUpRightIcon, { className: "size-4" })), trendDirection === "down" && (jsx(ArrowDownRightIcon, { className: "size-4" }))] })) : (formattedTrend))] }), progress !== undefined && (jsx("div", { className: cn("flex items-end", barSize.gap), role: "img", "aria-label": `Progress: ${progress}%`, children: Array.from({ length: barCount }, (_, i) => {
                     const isFilled = i < filledBars;
                     const fadeDistance = filledBars - i;
                     const fillOpacity = isFilled && fadeDistance <= 3
@@ -43,7 +52,8 @@ const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progre
                                 ease: "easeOut",
                                 delay: i * 0.03,
                             } })) }, i));
-                }) })), subtitle && (typeof subtitle === 'string' ? (jsx("span", { className: cn(theme.subtitleStyle, size === "sm" ? "text-sm" : "text-base"), children: subtitle })) : subtitle)] }));
+                }) })), subtitle &&
+                (typeof subtitle === "string" ? (jsx("span", { className: cn(theme.subtitleStyle), children: subtitle })) : (subtitle))] }));
 });
 KPI.displayName = "KPI";
 

package/dist/components/data-display/KPI/KPI.theme.js

@@ -7,7 +7,7 @@ const kpiTheme = {
         md: "text-2xl font-bold text-[var(--color-text-primary)]",
         lg: "text-3xl font-bold text-[var(--color-text-primary)]",
     },
-    labelStyle: "text-[var(--color-text-muted)]",
+    labelStyle: "text-[var(--color-text-primary)] font-medium",
     labelSizes: {
         sm: "text-xs",
         md: "text-sm",
@@ -25,13 +25,13 @@ const kpiTheme = {
         ...semanticBgColors,
         neutral: "bg-[var(--color-text-secondary)]",
     },
-    barEmptyColor: "bg-[var(--color-background-tertiary)]",
+    barEmptyColor: "bg-[var(--color-surface-sunken)]",
     barSizes: {
         sm: { height: "h-4", width: "w-[3px]", gap: "gap-[2px]" },
         md: { height: "h-6", width: "w-[3px]", gap: "gap-[3px]" },
         lg: { height: "h-8", width: "w-1", gap: "gap-1" },
     },
-    subtitleStyle: "text-[var(--color-text-muted)]",
+    subtitleStyle: "text-[var(--color-text-secondary)] text-sm",
 };
 
 export { kpiTheme };

package/dist/components/data-display/Metric/Metric.theme.js

@@ -60,7 +60,7 @@ const metricTheme = {
             contentPadding: "p-4",
             iconContainer: "size-14",
             label: "text-sm",
-            value: "text-xl",
+            value: "text-2xl",
             subtitle: "text-xs mt-0.5",
         },
         lg: {
@@ -68,12 +68,12 @@ const metricTheme = {
             contentPadding: "p-5",
             iconContainer: "size-16",
             label: "text-base",
-            value: "text-2xl",
+            value: "text-3xl",
             subtitle: "text-sm mt-1",
         },
     },
     // Common element styles
-    labelStyle: "font-semibold text-[var(--color-text-secondary)] mb-1",
+    labelStyle: "font-semibold text-[var(--color-text-primary)] mb-1",
     valueStyle: "font-bold text-[var(--color-text-primary)] tracking-tight",
     subtitleStyle: "text-[var(--color-text-secondary)]/80",
     iconContainerStyle: "rounded-full flex items-center justify-center flex-shrink-0 p-3.5",

package/dist/components/data-display/Table/Table.js

@@ -37,8 +37,8 @@ const TableContext = createContext({
  * - Theme customization with className overrides
  */
 function TableComponent(props) {
-    var _a;
-    const { data, columns, rowKey, variant = "default", theme: themeOverrides, className = "", freezeHeader = false, freezeFirstColumn = false, freezeLastColumn = false, sortable = false, sortConfig = [], onSortChange, filterable = false, filterConfig = [], onFilterChange, filterLogic: controlledFilterLogic, enableBuiltInFilter = false, expandable = false, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable = false, selectionType = "checkbox", selectedRows = [], onSelectionChange, bulkActions = [], showColumnManager = false, visibleColumns: initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, pagination, children, caption, } = props;
+    var _a, _b;
+    const { data, columns, rowKey, variant = "default", padding = "default", theme: themeOverrides, className = "", freezeHeader = false, freezeFirstColumn = false, freezeLastColumn = false, sortable = false, sortConfig = [], onSortChange, filterable = false, filterConfig = [], onFilterChange, filterLogic: controlledFilterLogic, enableBuiltInFilter = false, expandable = false, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable = false, selectionType = "checkbox", selectedRows = [], onSelectionChange, bulkActions = [], showColumnManager = false, visibleColumns: initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, pagination, children, caption, } = props;
     // Column management hook
     const { visibleColumns, columnOrder, visibleColumnsList, handleToggleColumn, handleColumnReorder, handleResetToDefault, } = useTableColumns({
         columns,
@@ -104,6 +104,7 @@ function TableComponent(props) {
     // Get base classes from theme
     const baseClasses = theme.baseStyle || "";
     const variantClasses = ((_a = theme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "";
+    const paddingClasses = ((_b = theme.paddingStyles) === null || _b === void 0 ? void 0 : _b[padding]) || "";
     // Memoize context value to prevent unnecessary re-renders in consumers
     const contextValue = useMemo(() => ({
         theme,
@@ -148,7 +149,7 @@ function TableComponent(props) {
         selectedRows,
         onSelectionChange,
     ]);
-    return (jsx(TableContext.Provider, { value: contextValue, children: jsxs("div", { className: "relative", children: [!isDeclarativeAPI && columns && ((filterable && onFilterChange) || showColumnManager) && (jsxs("div", { className: theme.columnManagerContainer, children: [filterable && onFilterChange && (jsx(TableFilter, { columns: columns, filterConfig: filterConfig, onFilterChange: onFilterChange, filterLogic: filterLogic, onFilterLogicChange: handleFilterLogicChange, data: data })), showColumnManager && (jsx(TableColumnManager, { columns: columns, visibleColumns: visibleColumns, columnOrder: columnOrder, onToggleColumn: handleToggleColumn, onResetToDefault: handleResetToDefault, onColumnReorder: onColumnReorder ? handleColumnReorder : undefined }))] })), !isDeclarativeAPI && selectable && selectedRows.length > 0 && (jsx(TableSelectionHeader, { selectedCount: selectedRows.length, totalCount: paginatedData.length, selectedRows: selectedRows, bulkActions: bulkActions, onClearSelection: handleClearSelection })), jsx("div", { className: "overflow-x-auto", ref: scrollContainerRef, children: jsxs("table", { className: cn(baseClasses, variantClasses, className), role: "table", "aria-label": isDeclarativeAPI ? "Data table" : `Data table with ${paginatedData.length} rows`, "aria-rowcount": pagination ? pagination.totalItems : data === null || data === void 0 ? void 0 : data.length, "aria-colcount": visibleColumnsList.length, children: [caption && (jsx("caption", { className: "sr-only", children: caption })), isDeclarativeAPI ? (children) : (jsxs(Fragment, { children: [jsx(TableHeader, { columns: visibleColumnsList, sortConfig: sortConfig, onSortChange: onSortChange, filterConfig: filterConfig, onFilterChange: onFilterChange, freezeHeader: freezeHeader, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, expandable: expandable, expandedRowRender: expandedRowRender, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, totalRowCount: paginatedData.length, theme: theme, data: paginatedData, rowKey: rowKey }), jsx(TableBody, { data: paginatedData, columns: visibleColumnsList, rowKey: rowKey, expandedRowRender: expandedRowRender, expandedRows: expandedRows, onExpandedRowsChange: onExpandedRowsChange, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, theme: theme })] }))] }) })] }) }));
+    return (jsx(TableContext.Provider, { value: contextValue, children: jsxs("div", { className: "relative", children: [!isDeclarativeAPI && columns && ((filterable && onFilterChange) || showColumnManager) && (jsxs("div", { className: theme.columnManagerContainer, children: [filterable && onFilterChange && (jsx(TableFilter, { columns: columns, filterConfig: filterConfig, onFilterChange: onFilterChange, filterLogic: filterLogic, onFilterLogicChange: handleFilterLogicChange, data: data })), showColumnManager && (jsx(TableColumnManager, { columns: columns, visibleColumns: visibleColumns, columnOrder: columnOrder, onToggleColumn: handleToggleColumn, onResetToDefault: handleResetToDefault, onColumnReorder: onColumnReorder ? handleColumnReorder : undefined }))] })), !isDeclarativeAPI && selectable && selectedRows.length > 0 && (jsx(TableSelectionHeader, { selectedCount: selectedRows.length, totalCount: paginatedData.length, selectedRows: selectedRows, bulkActions: bulkActions, onClearSelection: handleClearSelection })), jsx("div", { className: "overflow-x-auto", ref: scrollContainerRef, children: jsxs("table", { className: cn(baseClasses, variantClasses, paddingClasses, className), role: "table", "aria-label": isDeclarativeAPI ? "Data table" : `Data table with ${paginatedData.length} rows`, "aria-rowcount": pagination ? pagination.totalItems : data === null || data === void 0 ? void 0 : data.length, "aria-colcount": visibleColumnsList.length, children: [caption && (jsx("caption", { className: "sr-only", children: caption })), isDeclarativeAPI ? (children) : (jsxs(Fragment, { children: [jsx(TableHeader, { columns: visibleColumnsList, sortConfig: sortConfig, onSortChange: onSortChange, filterConfig: filterConfig, onFilterChange: onFilterChange, freezeHeader: freezeHeader, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, expandable: expandable, expandedRowRender: expandedRowRender, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, totalRowCount: paginatedData.length, theme: theme, data: paginatedData, rowKey: rowKey }), jsx(TableBody, { data: paginatedData, columns: visibleColumnsList, rowKey: rowKey, expandedRowRender: expandedRowRender, expandedRows: expandedRows, onExpandedRowsChange: onExpandedRowsChange, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, theme: theme })] }))] }) })] }) }));
 }
 TableComponent.displayName = "Table";
 const Table = TableComponent;

package/dist/components/data-display/Table/Table.theme.js

@@ -20,6 +20,16 @@ const tableTheme = {
         compact: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
             "[&_td]:px-3 [&_td]:py-1 [&_th]:px-3 [&_th]:py-1",
     },
+    // Edge-padding modes — applied at the table root via descendant selectors so they
+    // work for both the data-driven and declarative APIs. `flush` zeroes the
+    // first/last cell side padding (overrides the default `first:pl-4 last:pr-4`).
+    // Descendant selectors (.table th:first-child) outrank per-cell first:pl-4 by
+    // one specificity point so this wins without !important.
+    paddingStyles: {
+        default: "",
+        flush: "[&_th:first-child]:pl-0 [&_th:last-child]:pr-0 " +
+            "[&_td:first-child]:pl-0 [&_td:last-child]:pr-0",
+    },
     // Header styles
     // Light: primary text, light border | Dark: neutral-200 text, neutral-700 border
     headerStyle: "text-left font-semibold sticky top-0 border-b first:pl-4 last:pr-4 " +
@@ -32,7 +42,7 @@ const tableTheme = {
     // Light: neutral-50 hover | Dark: neutral-800 hover
     rowStyle: "group transition-all duration-300 relative " +
         "hover:bg-[var(--color-neutral-50)] " +
-        "dark:hover:bg-[var(--color-background-tertiary)]",
+        "dark:hover:bg-[var(--color-surface-hover)]",
     // Selected row styles — background is applied per-cell (in TableCell) so that
     // sticky/frozen columns repaint correctly. The row only carries the left indicator.
     selectedRowStyle: "shadow-[inset_3px_0_0_0_var(--color-primary)]",

package/dist/components/data-display/Table/Table.types.d.ts

@@ -18,6 +18,13 @@ export interface BulkAction {
 }
 /** Table visual variants for different styling approaches */
 export type TableVariant = 'default' | 'striped' | 'bordered' | 'compact';
+/**
+ * Edge padding behavior for table cells.
+ * - `default`: First/last cells receive extra side padding (matches inner cells).
+ * - `flush`: First/last cells have zero side padding so values align flush with the table's container edges.
+ *   Useful for invoice-style layouts where the table sits inside a padded card.
+ */
+export type TablePadding = 'default' | 'flush';
 /** Text alignment options for table cells and headers */
 export type TableAlignment = 'left' | 'center' | 'right';
 /** Selection control types for row selection */
@@ -95,6 +102,8 @@ export interface FilterConfig {
 export interface TableThemeOverrides {
     baseStyle?: string;
     variants?: Partial<Record<TableVariant, string>>;
+    /** Edge-padding mode classes applied at the table root via descendant selectors */
+    paddingStyles?: Partial<Record<TablePadding, string>>;
     headerStyle?: string;
     cellStyle?: string;
     rowStyle?: string;
@@ -148,6 +157,12 @@ export interface TableProps<T = unknown> {
     rowKey?: keyof T | ((row: T, index: number) => string | number);
     /** Visual variant for different table styles */
     variant?: TableVariant;
+    /**
+     * Edge padding behavior. `flush` removes left padding from the first cell and right padding
+     * from the last cell so column values align flush with the table's container edges.
+     * @default "default"
+     */
+    padding?: TablePadding;
     /** Theme overrides for custom styling */
     theme?: TableThemeOverrides;
     /** Additional CSS classes for customization */

package/dist/components/data-display/Table/TableColumnManager.js

@@ -18,7 +18,7 @@ function TableColumnManagerComponent({ columns, visibleColumns, columnOrder, onT
         const displayName = typeof column.header === 'string' ? column.header : column.id;
         return (jsx(Checkbox, { id: `column-checkbox-${column.id}`, name: `column-${column.id}`, value: column.id, checked: isVisible, onChange: () => onToggleColumn(column.id), "aria-label": `Toggle visibility for ${displayName} column`, label: displayName, state: isLocked ? 'disabled' : 'default' }));
     };
-    return (jsxs(Popover, { placement: "bottom-end", offset: 8, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "filled", "aria-label": "Manage column visibility", children: [jsx(Cog6ToothIcon, { className: "size-5", "aria-hidden": "true" }), "Manage Columns"] }) }), jsx(Popover.Body, { className: "p-0", children: jsxs("div", { className: "w-64 p-3 overflow-hidden", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true", children: [jsx("div", { id: "column-manager-title", className: "text-sm uppercase font-bold mb-3 text-[var(--color-text-placeholder)]", children: "Manage Columns" }), jsx("div", { id: "column-manager-description", className: "sr-only", children: "Use checkboxes to control which columns are visible in the table. Locked columns cannot be hidden." }), jsx("div", { className: "space-y-0.5", role: "group", "aria-label": "Column visibility options", children: onColumnReorder ? (jsx(Sortable, { onReorder: onColumnReorder, showDragHandle: true, className: "space-y-0.5", children: orderedColumns.map((column) => (jsx(SortableItem, { id: column.id, disabled: column.locked === true, className: `hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id))) })) : (orderedColumns.map((column) => (jsx("div", { className: `hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id)))) }), jsx("div", { className: "mt-3 flex justify-end", children: jsx(Button, { color: "neutral", variant: "filled", className: "w-full", onClick: onResetToDefault, children: "Reset to Default" }) })] }) })] }));
+    return (jsxs(Popover, { placement: "bottom-end", offset: 8, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "filled", "aria-label": "Manage column visibility", children: [jsx(Cog6ToothIcon, { className: "size-5", "aria-hidden": "true" }), "Manage Columns"] }) }), jsx(Popover.Body, { className: "p-0", children: jsxs("div", { className: "w-64 p-3 overflow-hidden", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true", children: [jsx("div", { id: "column-manager-title", className: "text-sm uppercase font-bold mb-3 text-[var(--color-text-placeholder)]", children: "Manage Columns" }), jsx("div", { id: "column-manager-description", className: "sr-only", children: "Use checkboxes to control which columns are visible in the table. Locked columns cannot be hidden." }), jsx("div", { className: "space-y-0.5", role: "group", "aria-label": "Column visibility options", children: onColumnReorder ? (jsx(Sortable, { onReorder: onColumnReorder, showDragHandle: true, className: "space-y-0.5", children: orderedColumns.map((column) => (jsx(SortableItem, { id: column.id, disabled: column.locked === true, className: `hover:bg-[var(--color-surface-hover)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id))) })) : (orderedColumns.map((column) => (jsx("div", { className: `hover:bg-[var(--color-surface-hover)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id)))) }), jsx("div", { className: "mt-3 flex justify-end", children: jsx(Button, { color: "neutral", variant: "filled", className: "w-full", onClick: onResetToDefault, children: "Reset to Default" }) })] }) })] }));
 }
 const TableColumnManager = TableColumnManagerComponent;
 

package/dist/components/data-display/Table/index.d.ts

@@ -1,4 +1,4 @@
-import { TableProps, Column, SortConfig, FilterConfig, FilterOperator, FilterType, FilterLogic, FilterOption, TableThemeOverrides, TableVariant, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction, ActionItem, ActionVariant, ActionPriority, TableActionsProps, TableActionsMenuProps, TablePaginationProps, TableSelectionHeaderProps, TableColumnManagerProps, TableFilterProps } from './Table.types';
+import { TableProps, Column, SortConfig, FilterConfig, FilterOperator, FilterType, FilterLogic, FilterOption, TableThemeOverrides, TableVariant, TablePadding, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction, ActionItem, ActionVariant, ActionPriority, TableActionsProps, TableActionsMenuProps, TablePaginationProps, TableSelectionHeaderProps, TableColumnManagerProps, TableFilterProps } from './Table.types';
 import { TableActions } from './TableActions';
 import { TableActionsMenu } from './TableActionsMenu';
 import { TablePagination } from './TablePagination';
@@ -16,7 +16,7 @@ interface TableCompound {
 }
 declare const Table: TableCompound;
 export { Table };
-export type { TableProps, Column, SortConfig, FilterConfig, FilterOperator, FilterType, FilterLogic, FilterOption, TableThemeOverrides, TableVariant, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction, ActionItem, ActionVariant, ActionPriority, TableActionsProps, TableActionsMenuProps, TablePaginationProps, TableSelectionHeaderProps, TableColumnManagerProps, TableFilterProps, };
+export type { TableProps, Column, SortConfig, FilterConfig, FilterOperator, FilterType, FilterLogic, FilterOption, TableThemeOverrides, TableVariant, TablePadding, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction, ActionItem, ActionVariant, ActionPriority, TableActionsProps, TableActionsMenuProps, TablePaginationProps, TableSelectionHeaderProps, TableColumnManagerProps, TableFilterProps, };
 export { TableActions, TableActionsMenu, TablePagination, TableFilter };
 export { inferFilterType, getOperatorsForFilterType, getDefaultOperator, isUnaryOperator, isBetweenOperator, filterData, operatorLabels, } from './Table.filterUtils';
 export { useTableColumns, useTableSelection, useTableExpansion, useTablePagination, useTableFilter, } from './hooks';

package/dist/components/effects/Aurora/Aurora.js

@@ -1,8 +1,13 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 
 const DEFAULT_COLORS = ['#3b82f6', '#8b5cf6', '#ec4899', '#06b6d4'];
+const clamp = (value, min, max) => {
+    if (Number.isNaN(value))
+        return min;
+    return Math.min(Math.max(value, min), max);
+};
 /**
  * Each blob follows a unique organic path using keyframed x/y translations
  * and scale changes. The durations are intentionally varied so the blobs
@@ -37,16 +42,32 @@ const blobAnimations = [
         scale: [1, 0.95, 1.1, 0.9, 1],
         baseDuration: 31,
     },
+    {
+        // Blob 4 -- slow vertical ribbon sweep
+        x: ['0%', '12%', '-18%', '20%', '0%'],
+        y: ['0%', '-35%', '-5%', '24%', '0%'],
+        scale: [1, 1.25, 0.95, 1.1, 1],
+        baseDuration: 29,
+    },
+    {
+        // Blob 5 -- small counter drift to keep dense palettes from syncing
+        x: ['0%', '-18%', '10%', '28%', '0%'],
+        y: ['0%', '12%', '-22%', '-8%', '0%'],
+        scale: [1, 0.88, 1.18, 0.98, 1],
+        baseDuration: 34,
+    },
 ];
 /**
  * Positions each blob at a different quadrant of the container so they
  * begin spread out. Additional blobs beyond 4 cycle through positions.
  */
 const blobPositions = [
-    { top: '10%', left: '15%' },
-    { top: '5%', right: '10%' },
-    { bottom: '10%', left: '20%' },
-    { bottom: '5%', right: '15%' },
+    { top: '8%', left: '12%' },
+    { top: '0%', right: '8%' },
+    { bottom: '8%', left: '18%' },
+    { bottom: '0%', right: '12%' },
+    { top: '34%', left: '36%' },
+    { bottom: '28%', right: '34%' },
 ];
 /**
  * Aurora creates an animated multi-color gradient background effect.
@@ -71,49 +92,67 @@ const blobPositions = [
  */
 const Aurora = ({ colors = DEFAULT_COLORS, blur = 80, speed = 1, opacity = 0.3, size = 1, className, style, ...props }) => {
     const shouldReduceMotion = useReducedMotion();
+    const safeColors = colors.length > 0 ? colors : DEFAULT_COLORS;
+    const safeBlur = Math.max(0, blur);
+    const safeSpeed = Math.max(0.1, speed);
+    const safeOpacity = clamp(opacity, 0, 1);
+    const safeSize = Math.max(0.1, size);
     // Compute base blob dimension from the size multiplier.
     // Using percentage-based sizing so it scales with the container.
-    const blobDimension = `${40 * size}%`;
-    return (jsx("div", { className: cn('absolute inset-0 overflow-hidden pointer-events-none', className), style: {
-            opacity,
-            filter: `blur(${blur}px)`,
+    const blobDimension = `${40 * safeSize}%`;
+    const bleed = safeBlur * 1.5;
+    const wash = safeColors
+        .slice(0, 4)
+        .map((color, index) => {
+        const stops = [
+            '20% 30%',
+            '80% 20%',
+            '30% 80%',
+            '75% 75%',
+        ];
+        return `radial-gradient(circle at ${stops[index]}, ${color}55, transparent 42%)`;
+    })
+        .join(', ');
+    return (jsxs("div", { className: cn('absolute inset-0 overflow-hidden pointer-events-none', className), style: {
             ...style,
-        }, "aria-hidden": "true", ...props, children: colors.map((color, index) => {
-            const anim = blobAnimations[index % blobAnimations.length];
-            const position = blobPositions[index % blobPositions.length];
-            const duration = anim.baseDuration / speed;
-            // When reduced motion is preferred, render static blobs with no animation.
-            if (shouldReduceMotion) {
-                return (jsx("div", { style: {
-                        position: 'absolute',
-                        ...position,
-                        width: blobDimension,
-                        height: blobDimension,
-                        borderRadius: '50%',
-                        background: `radial-gradient(circle at center, ${color}, transparent 70%)`,
-                        mixBlendMode: 'screen',
-                    } }, index));
-            }
-            return (jsx(motion.div, { animate: {
-                    x: anim.x,
-                    y: anim.y,
-                    scale: anim.scale,
-                }, transition: {
-                    duration,
-                    repeat: Infinity,
-                    repeatType: 'loop',
-                    ease: 'easeInOut',
-                }, style: {
+        }, "aria-hidden": "true", ...props, children: [jsx("div", { className: "absolute inset-0", style: {
+                    background: wash,
+                    opacity: safeOpacity * 0.65,
+                    mixBlendMode: 'screen',
+                } }), safeColors.map((color, index) => {
+                const anim = blobAnimations[index % blobAnimations.length];
+                const position = blobPositions[index % blobPositions.length];
+                const duration = anim.baseDuration / safeSpeed;
+                const blobStyle = {
                     position: 'absolute',
                     ...position,
                     width: blobDimension,
                     height: blobDimension,
-                    borderRadius: '50%',
-                    background: `radial-gradient(circle at center, ${color}, transparent 70%)`,
+                    borderRadius: '9999px',
+                    background: `radial-gradient(circle at center, ${color}, transparent 68%)`,
+                    filter: `blur(${safeBlur}px)`,
                     mixBlendMode: 'screen',
-                    willChange: 'transform',
-                } }, index));
-        }) }));
+                    opacity: safeOpacity,
+                    margin: -bleed,
+                };
+                // When reduced motion is preferred, render static blobs with no animation.
+                if (shouldReduceMotion) {
+                    return (jsx("div", { style: blobStyle }, index));
+                }
+                return (jsx(motion.div, { animate: {
+                        x: anim.x,
+                        y: anim.y,
+                        scale: anim.scale,
+                    }, transition: {
+                        duration,
+                        repeat: Infinity,
+                        repeatType: 'loop',
+                        ease: 'easeInOut',
+                    }, style: {
+                        ...blobStyle,
+                        willChange: 'transform',
+                    } }, index));
+            })] }));
 };
 
 export { Aurora };

package/dist/components/effects/InteractiveCharacters/InteractiveCharacters.js

@@ -15,7 +15,7 @@ const sizeMap = {
     md: 'w-[320px]',
     lg: 'w-[400px]',
 };
-/** Click reaction states per character */
+/** Click reaction states per abstract character */
 const CLICK_REACTIONS = {
     blob: 'surprised',
     tall: 'love',
@@ -47,7 +47,7 @@ const InteractiveCharacters = ({ state = 'idle', trackMouse = true, size = 'md',
     const smallState = clickedChar === 'small' ? CLICK_REACTIONS.small : state;
     const isTrackingEnabled = trackMouse && state !== 'password' && !shouldReduceMotion;
     const isIdleAnimated = !shouldReduceMotion;
-    // Mouse tracking — different spring configs per character
+    // Mouse tracking: each abstract form gets a slightly different response.
     const blobEye = useMouseTracking({
         containerRef: svgRef,
         enabled: isTrackingEnabled,
@@ -63,7 +63,7 @@ const InteractiveCharacters = ({ state = 'idle', trackMouse = true, size = 'md',
         enabled: isTrackingEnabled,
         ...springConfigs.small,
     });
-    // Idle sway/breathing/head — each character at different rates & phase offsets
+    // Idle sway/breathing/head movement runs at different rates and phase offsets.
     const blobIdle = useIdleAnimation({
         enabled: isIdleAnimated,
         swayAmount: 1.5,

package/dist/components/effects/InteractiveCharacters/characters/BlobCharacter.js

@@ -1,11 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
 import { useTransform, motion } from 'motion/react';
 import { eyelidVariants, clickTransition, bodyTransition, blobBodyVariants, blobMouthPaths } from '../InteractiveCharacters.animations.js';
 
-const LEFT_EYE = { cx: 32, cy: -50 };
-const RIGHT_EYE = { cx: 68, cy: -50 };
+const LEFT_EYE = { cx: 32, cy: -58 };
+const RIGHT_EYE = { cx: 62, cy: -58 };
 const CLICK_STATES = new Set(['surprised', 'love', 'excited']);
 const BlobCharacter = ({ state, eyeOffset, idle, blinkAmount, onClick, }) => {
+    const id = useId().replace(/:/g, '');
+    const leftClipId = `${id}-aura-eye-l`;
+    const rightClipId = `${id}-aura-eye-r`;
+    const bodyGradientId = `${id}-aura-body`;
     const leftPupilX = useTransform(eyeOffset.x, (v) => LEFT_EYE.cx + v);
     const leftPupilY = useTransform(eyeOffset.y, (v) => LEFT_EYE.cy + v);
     const rightPupilX = useTransform(eyeOffset.x, (v) => RIGHT_EYE.cx + v);
@@ -24,13 +29,17 @@ const BlobCharacter = ({ state, eyeOffset, idle, blinkAmount, onClick, }) => {
             x: idle.sway,
             y: idle.bob,
             scale: idle.breath,
-        }, onClick: onClick, children: [jsx("path", { d: "M 0 0 Q 0 -95 65 -95 Q 100 -95 100 -50 Q 100 0 100 0 Z", fill: "#F97316" }), jsxs(motion.g, { style: {
+        }, onClick: onClick, children: [jsx("defs", { children: jsxs("linearGradient", { id: bodyGradientId, x1: "15", y1: "-105", x2: "92", y2: "-5", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "#16B8A6" }), jsx("stop", { offset: "1", stopColor: "#0F766E" })] }) }), jsx(motion.path, { d: "M 19 -99 C 40 -113 78 -101 92 -75 C 108 -45 91 -10 58 -1 C 26 8 -2 -13 -5 -47 C -8 -72 3 -89 19 -99 Z", fill: `url(#${bodyGradientId})`, animate: {
+                    d: state === 'surprised'
+                        ? 'M 19 -105 C 42 -121 82 -106 97 -78 C 115 -43 94 -6 57 1 C 21 8 -9 -17 -10 -52 C -11 -79 2 -96 19 -105 Z'
+                        : 'M 19 -99 C 40 -113 78 -101 92 -75 C 108 -45 91 -10 58 -1 C 26 8 -2 -13 -5 -47 C -8 -72 3 -89 19 -99 Z',
+                }, transition: transition }), jsx("path", { d: "M 72 -91 C 91 -78 98 -52 88 -30", fill: "none", stroke: "#7DD3C7", strokeWidth: 5, strokeLinecap: "round", opacity: 0.38 }), jsx("ellipse", { cx: 11, cy: -31, rx: 8, ry: 12, fill: "#5EEAD4", opacity: 0.34, transform: "rotate(-24 11 -31)" }), jsxs(motion.g, { style: {
                     originX: '50px',
                     originY: '-50px',
                     rotate: combinedHeadRotate,
                     x: combinedHeadX,
                     y: combinedHeadY,
-                }, children: [jsxs("g", { children: [jsx("clipPath", { id: "blob-eye-l", children: jsx("ellipse", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, rx: 14, ry: 16 }) }), jsx("ellipse", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, rx: 14, ry: 16, fill: "white" }), jsx(motion.circle, { cx: leftPupilX, cy: leftPupilY, r: 8.5, fill: "#1E293B", clipPath: "url(#blob-eye-l)" }), jsx("circle", { cx: LEFT_EYE.cx + 4, cy: LEFT_EYE.cy - 5.5, r: 3, fill: "white", opacity: 0.95 }), jsx("circle", { cx: LEFT_EYE.cx - 3, cy: LEFT_EYE.cy + 4, r: 1.5, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: LEFT_EYE.cx - 14, y: LEFT_EYE.cy - 16, width: 28, height: 32, fill: "#F97316", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsxs("g", { children: [jsx("clipPath", { id: "blob-eye-r", children: jsx("ellipse", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, rx: 14, ry: 16 }) }), jsx("ellipse", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, rx: 14, ry: 16, fill: "white" }), jsx(motion.circle, { cx: rightPupilX, cy: rightPupilY, r: 8.5, fill: "#1E293B", clipPath: "url(#blob-eye-r)" }), jsx("circle", { cx: RIGHT_EYE.cx + 4, cy: RIGHT_EYE.cy - 5.5, r: 3, fill: "white", opacity: 0.95 }), jsx("circle", { cx: RIGHT_EYE.cx - 3, cy: RIGHT_EYE.cy + 4, r: 1.5, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: RIGHT_EYE.cx - 14, y: RIGHT_EYE.cy - 16, width: 28, height: 32, fill: "#F97316", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsx("ellipse", { cx: 18, cy: -28, rx: 8, ry: 5.5, fill: "#FB923C", opacity: state === 'surprised' ? 0.7 : 0.5 }), jsx("ellipse", { cx: 82, cy: -28, rx: 8, ry: 5.5, fill: "#FB923C", opacity: state === 'surprised' ? 0.7 : 0.5 }), jsx(motion.path, { d: blobMouthPaths[state], fill: "none", stroke: "#1E293B", strokeWidth: 2.5, strokeLinecap: "round", animate: { d: blobMouthPaths[state] }, transition: transition, transform: "translate(50, -24)" })] })] }));
+                }, children: [jsxs("g", { children: [jsx("clipPath", { id: leftClipId, children: jsx("ellipse", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, rx: 14, ry: 16 }) }), jsx("ellipse", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, rx: 12, ry: 14, fill: "#F8FAFC" }), jsx(motion.circle, { cx: leftPupilX, cy: leftPupilY, r: 7, fill: "#122A33", clipPath: `url(#${leftClipId})` }), jsx("circle", { cx: LEFT_EYE.cx + 4, cy: LEFT_EYE.cy - 5.5, r: 3, fill: "white", opacity: 0.95 }), jsx("circle", { cx: LEFT_EYE.cx - 3, cy: LEFT_EYE.cy + 4, r: 1.5, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: LEFT_EYE.cx - 12, y: LEFT_EYE.cy - 14, width: 24, height: 28, fill: "#16B8A6", rx: 3, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsxs("g", { children: [jsx("clipPath", { id: rightClipId, children: jsx("ellipse", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, rx: 14, ry: 16 }) }), jsx("ellipse", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, rx: 12, ry: 14, fill: "#F8FAFC" }), jsx(motion.circle, { cx: rightPupilX, cy: rightPupilY, r: 7, fill: "#122A33", clipPath: `url(#${rightClipId})` }), jsx("circle", { cx: RIGHT_EYE.cx + 4, cy: RIGHT_EYE.cy - 5.5, r: 3, fill: "white", opacity: 0.95 }), jsx("circle", { cx: RIGHT_EYE.cx - 3, cy: RIGHT_EYE.cy + 4, r: 1.5, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: RIGHT_EYE.cx - 12, y: RIGHT_EYE.cy - 14, width: 24, height: 28, fill: "#16B8A6", rx: 3, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsx("ellipse", { cx: 20, cy: -37, rx: 6, ry: 3.5, fill: "#99F6E4", opacity: state === 'surprised' ? 0.72 : 0.45 }), jsx("ellipse", { cx: 76, cy: -36, rx: 6, ry: 3.5, fill: "#99F6E4", opacity: state === 'surprised' ? 0.72 : 0.45 }), jsx(motion.path, { d: blobMouthPaths[state], fill: "none", stroke: "#122A33", strokeWidth: 2.4, strokeLinecap: "round", animate: { d: blobMouthPaths[state] }, transition: transition, transform: "translate(47, -30)" })] })] }));
 };
 
 export { BlobCharacter };