flikkui 0.1.0-beta.11 → 0.1.0-beta.12

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

@@ -0,0 +1,61 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { skeletonTheme } from './Skeleton.theme.js';
+import { cn } from '../../../utils/cn.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
+
+/**
+ * Skeleton component - Loading placeholder that mimics content shape
+ *
+ * Features:
+ * - Multiple variants: text, circular, rectangle
+ * - Customizable dimensions
+ * - Pulse animation
+ * - Multi-line support for text variant
+ * - Full theme customization
+ *
+ * @example
+ * // Text lines
+ * <Skeleton variant="text" lines={3} />
+ *
+ * // Avatar placeholder
+ * <Skeleton variant="circular" width={40} height={40} />
+ *
+ * // Card placeholder
+ * <Skeleton variant="rectangle" width="100%" height={200} />
+ */
+var Skeleton = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? 'rectangle' : _b, width = _a.width, height = _a.height, _c = _a.lines, lines = _c === void 0 ? 1 : _c, _d = _a.animate, animate = _d === void 0 ? true : _d, className = _a.className, customTheme = _a.theme, style = _a.style, props = __rest(_a, ["variant", "width", "height", "lines", "animate", "className", "theme", "style"]);
+    // Merge custom theme with default theme
+    var theme = customTheme ? __assign(__assign({}, skeletonTheme), customTheme) : skeletonTheme;
+    // Convert dimensions to CSS values
+    var getSize = function (value) {
+        if (value === undefined)
+            return undefined;
+        if (typeof value === 'number')
+            return "".concat(value, "px");
+        return value;
+    };
+    var computedWidth = getSize(width);
+    var computedHeight = getSize(height);
+    // Compute styles
+    var computedStyle = __assign(__assign({}, style), { width: computedWidth, height: computedHeight });
+    // Base classes
+    var baseClasses = cn(theme.baseStyle, theme.variants[variant], animate && theme.animation, className);
+    // For text variant with multiple lines, render multiple skeletons
+    if (variant === 'text' && lines > 1) {
+        return (React__default.createElement("div", __assign({ className: "space-y-2" }, props), Array.from({ length: lines }).map(function (_, index) {
+            // Make last line 75% width for more natural look
+            var isLastLine = index === lines - 1;
+            var lineWidth = isLastLine && !width ? '75%' : computedWidth;
+            return (React__default.createElement("div", { key: index, className: baseClasses, style: __assign(__assign({}, computedStyle), { width: lineWidth }) }));
+        })));
+    }
+    // Single skeleton
+    return (React__default.createElement("div", __assign({ className: baseClasses, style: computedStyle, "aria-busy": "true", "aria-live": "polite" }, props)));
+};
+Skeleton.displayName = 'Skeleton';
+
+export { Skeleton };

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

@@ -0,0 +1,18 @@
+/**
+ * Default theme for the Skeleton component
+ * Uses production-ready CSS variables from global.scss
+ */
+var skeletonTheme = {
+    // Base styles with background color and animation
+    baseStyle: "bg-[var(--color-background-tertiary)] overflow-hidden",
+    // Shape variants
+    variants: {
+        text: "h-4 rounded",
+        circular: "rounded-full",
+        rectangle: "rounded-md",
+    },
+    // Pulse animation
+    animation: "animate-pulse",
+};
+
+export { skeletonTheme };

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { SlidingNumberProps } from './SlidingNumber.types';
+import React from "react";
+import { SlidingNumberProps } from "./SlidingNumber.types";
 /**
  * SlidingNumber component with odometer-style digit animation
  *

package/dist/components/core/SlidingNumber/SlidingNumber.js

@@ -1,9 +1,25 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useMemo } from 'react';
+import { motion, useReducedMotion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
-import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
 
+/**
+ * Individual digit component that handles the sliding animation
+ */
+var SlidingDigit = React__default.memo(function (_a) {
+    var value = _a.value, transition = _a.transition, className = _a.className, disableAnimations = _a.disableAnimations;
+    return (React__default.createElement("div", { className: cn("relative inline-block overflow-hidden", className), style: { height: "1em", width: "0.6em", lineHeight: "1em" }, "aria-hidden": "true" },
+        React__default.createElement(motion.div, { className: "absolute inset-0", animate: disableAnimations ? { y: 0 } : { y: "".concat(-value * 100, "%") }, transition: disableAnimations ? undefined : transition }, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(function (num) { return (React__default.createElement("div", { key: num, className: "flex items-center justify-center", style: { height: "1em", lineHeight: "1em" } }, num)); }))));
+});
+SlidingDigit.displayName = "SlidingDigit";
+/**
+ * Static character component for non-numeric symbols
+ */
+var StaticChar = React__default.memo(function (_a) {
+    var char = _a.char, className = _a.className;
+    return (React__default.createElement("div", { className: cn("inline-flex items-center justify-center", className), style: { width: "0.6em" }, "aria-hidden": "true" }, char));
+});
+StaticChar.displayName = "StaticChar";
 /**
  * SlidingNumber component with odometer-style digit animation
  *
@@ -18,46 +34,38 @@ import { motion } from '../../../node_modules/framer-motion/dist/es/render/compo
  * ```
  */
 var SlidingNumber = React__default.forwardRef(function (_a, ref) {
-    var value = _a.value, _b = _a.decimalPlaces, decimalPlaces = _b === void 0 ? 0 : _b, _c = _a.padStart, padStart = _c === void 0 ? false : _c, padWidth = _a.padWidth, _d = _a.transition, transition = _d === void 0 ? { type: 'spring', stiffness: 300, damping: 30, bounce: 0 } : _d, className = _a.className, digitClassName = _a.digitClassName, props = __rest(_a, ["value", "decimalPlaces", "padStart", "padWidth", "transition", "className", "digitClassName"]);
+    var value = _a.value, _b = _a.decimalPlaces, decimalPlaces = _b === void 0 ? 0 : _b, _c = _a.padStart, padStart = _c === void 0 ? false : _c, padWidth = _a.padWidth, _d = _a.transition, transition = _d === void 0 ? { type: "spring", stiffness: 300, damping: 30, bounce: 0 } : _d, className = _a.className, digitClassName = _a.digitClassName, props = __rest(_a, ["value", "decimalPlaces", "padStart", "padWidth", "transition", "className", "digitClassName"]);
     var shouldReduceMotion = useReducedMotion();
     var shouldDisableAnimations = !!shouldReduceMotion;
-    // Format the number with decimal places
+    // Format the number with decimal places and padding
     var formattedNumber = useMemo(function () {
-        var num;
-        // Only apply toFixed if decimalPlaces > 0
-        if (decimalPlaces > 0) {
-            num = Number(value).toFixed(decimalPlaces);
-        }
-        else {
-            num = String(Math.round(value));
-        }
+        // 1. Convert to fixed decimal string or rounded integer string
+        var numStr = decimalPlaces > 0
+            ? Number(value).toFixed(decimalPlaces)
+            : String(Math.round(value));
+        // 2. Handle Padding
         if (padStart && padWidth) {
-            var _a = num.split('.'), intPart = _a[0], decPart = _a[1];
-            var paddedInt = intPart.padStart(padWidth, '0');
-            return decPart ? "".concat(paddedInt, ".").concat(decPart) : paddedInt;
+            var isNegative = numStr.startsWith("-");
+            var stringToPad = isNegative ? numStr.substring(1) : numStr;
+            var _a = stringToPad.split("."), intPart = _a[0], decPart = _a[1];
+            var paddedInt = intPart.padStart(padWidth, "0");
+            stringToPad = decPart ? "".concat(paddedInt, ".").concat(decPart) : paddedInt;
+            return isNegative ? "-".concat(stringToPad) : stringToPad;
         }
-        return num;
+        return numStr;
     }, [value, decimalPlaces, padStart, padWidth]);
-    // Split formatted number into individual characters (digits, decimal point, minus sign)
+    // Split formatted number into individual characters
     var characters = useMemo(function () {
-        return formattedNumber.split('');
+        return formattedNumber.split("");
     }, [formattedNumber]);
-    // Render a single digit with vertical sliding animation
-    var renderDigit = function (char, index) {
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn("inline-flex items-center justify-center tabular-nums", className), style: { lineHeight: "1" }, "aria-label": formattedNumber }, props), characters.map(function (char, index) {
         var isNumber = /\d/.test(char);
-        // For non-numeric characters (., -, etc), render without animation
         if (!isNumber) {
-            return (React__default.createElement("div", { key: "".concat(char, "-").concat(index), className: cn('inline-flex items-center justify-center', digitClassName), style: { width: '0.6em' } }, char));
+            return (React__default.createElement(StaticChar, { key: "".concat(char, "-").concat(index), char: char, className: digitClassName }));
         }
-        // For numeric digits, create vertical scrolling animation
-        var digitValue = parseInt(char, 10);
-        return (React__default.createElement("div", { key: "digit-".concat(index), className: cn('relative inline-block overflow-hidden', digitClassName), style: { height: '1em', width: '0.6em', lineHeight: '1em' } },
-            React__default.createElement(motion.div, { className: "absolute inset-0", animate: shouldDisableAnimations
-                    ? { y: 0 }
-                    : { y: "".concat(-digitValue * 100, "%") }, transition: shouldDisableAnimations ? undefined : transition }, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(function (num) { return (React__default.createElement("div", { key: num, className: "flex items-center justify-center", style: { height: '1em', lineHeight: '1em' } }, num)); }))));
-    };
-    return (React__default.createElement("div", __assign({ ref: ref, className: cn('inline-flex items-center justify-center tabular-nums', className), style: { lineHeight: '1' } }, props), characters.map(function (char, index) { return renderDigit(char, index); })));
+        return (React__default.createElement(SlidingDigit, { key: "digit-".concat(index), value: parseInt(char, 10), className: digitClassName, transition: transition, disableAnimations: shouldDisableAnimations }));
+    })));
 });
-SlidingNumber.displayName = 'SlidingNumber';
+SlidingNumber.displayName = "SlidingNumber";
 
 export { SlidingNumber };

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

@@ -1,6 +1,6 @@
-import { Transition } from 'motion/react';
-import { HTMLAttributes } from 'react';
-export interface SlidingNumberProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+import { Transition } from "motion/react";
+import { HTMLAttributes } from "react";
+export interface SlidingNumberProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /**
      * The number value to display with sliding animation
      */

package/dist/components/core/Sortable/Sortable.animations.d.ts

@@ -0,0 +1,48 @@
+import { Transition, Variants } from 'motion/react';
+export declare const dragAnimations: {
+    initial: {
+        opacity: number;
+        scale: number;
+        zIndex: number;
+        rotate: number;
+    };
+    dragging: {
+        opacity: number;
+        scale: number;
+        zIndex: number;
+        rotate: number;
+        transition: Transition;
+    };
+    idle: {
+        opacity: number;
+        scale: number;
+        zIndex: number;
+        rotate: number;
+        transition: Transition;
+    };
+};
+export declare const layoutAnimations: {
+    layout: Transition;
+    layoutId: (id: string) => string;
+};
+export declare const dragHandleAnimations: {
+    hover: {
+        scale: number;
+        transition: Transition;
+    };
+    tap: {
+        scale: number;
+        transition: Transition;
+    };
+};
+export declare const containerAnimations: {
+    layout: Transition;
+};
+export declare const itemVariants: Variants;
+export declare const sortableAnimations: {
+    drag: typeof dragAnimations;
+    layout: typeof layoutAnimations;
+    dragHandle: typeof dragHandleAnimations;
+    container: typeof containerAnimations;
+    variants: Variants;
+};

package/dist/components/core/Sortable/Sortable.animations.js

@@ -1,4 +1,4 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 
 // Spring configuration for smooth, natural animations
 var springConfig = {

package/dist/components/core/Sortable/Sortable.js

@@ -1,14 +1,10 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { createContext, useState, useRef, useEffect, useCallback, useContext } from 'react';
+import { Reorder, useDragControls, motion } from 'motion/react';
+import { LockClosedIcon, Bars3Icon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
 import { sortableTheme } from './Sortable.theme.js';
 import { sortableAnimations } from './Sortable.animations.js';
-import { useDragControls } from '../../../node_modules/framer-motion/dist/es/gestures/drag/use-drag-controls.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/LockClosedIcon.js';
-import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/outline/esm/Bars3Icon.js';
-import { ReorderGroup } from '../../../node_modules/framer-motion/dist/es/components/Reorder/Group.js';
-import { ReorderItem } from '../../../node_modules/framer-motion/dist/es/components/Reorder/Item.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
 
 var SortableContext = createContext(null);
 var useSortableContext = function () {
@@ -73,7 +69,7 @@ var Sortable = React__default.forwardRef(function (_a, ref) {
         setDraggedItemContent: setDraggedItemContent,
     };
     return (React__default.createElement(SortableContext.Provider, { value: contextValue },
-        React__default.createElement(ReorderGroup, { ref: ref, axis: direction === 'horizontal' ? 'x' : 'y', values: internalValues, onReorder: handleReorder, className: cn(theme.containerStyle, direction === 'horizontal' ? 'flex flex-row' : 'flex flex-col', className), as: "div" }, children)));
+        React__default.createElement(Reorder.Group, { ref: ref, axis: direction === 'horizontal' ? 'x' : 'y', values: internalValues, onReorder: handleReorder, className: cn(theme.containerStyle, direction === 'horizontal' ? 'flex flex-row' : 'flex flex-col', className), as: "div" }, children)));
 });
 Sortable.displayName = 'Sortable';
 var SortableItem = React__default.forwardRef(function (_a, forwardedRef) {
@@ -201,7 +197,7 @@ var SortableItem = React__default.forwardRef(function (_a, forwardedRef) {
         dragControls.start(event);
     }, [disabled, dragControls]);
     var isBeingDragged = context.draggedItem === id;
-    return (React__default.createElement(ReorderItem, { ref: function (node) {
+    return (React__default.createElement(Reorder.Item, { ref: function (node) {
             itemRef.current = node;
             if (typeof forwardedRef === 'function') {
                 forwardedRef(node);
@@ -212,7 +208,7 @@ var SortableItem = React__default.forwardRef(function (_a, forwardedRef) {
         }, value: value || id, id: id, dragListener: !context.showDragHandle && !disabled, dragControls: context.showDragHandle ? dragControls : undefined, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onPointerDown: handlePointerDown, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, onFocus: function () { return setIsFocused(true); }, onBlur: function () { return setIsFocused(false); }, className: cn(theme.itemStyle, context.showDragHandle && 'flex items-center gap-2', disabled && 'opacity-50 cursor-not-allowed', !disabled && !context.showDragHandle && 'cursor-grab active:cursor-grabbing', isBeingDragged && 'shadow-lg z-50', isFocused && !disabled && 'ring-2 ring-blue-500 ring-offset-2', className), style: {
             position: 'relative',
         }, variants: sortableAnimations.variants, animate: isBeingDragged ? 'dragging' : 'idle', transition: sortableAnimations.layout.layout },
-        context.showDragHandle && (React__default.createElement(motion.div, { onPointerDown: handleDragHandlePointerDown, className: cn(theme.dragHandleStyle, disabled && 'cursor-not-allowed opacity-60', !disabled && 'cursor-grab active:cursor-grabbing'), whileHover: !disabled ? sortableAnimations.dragHandle.hover : undefined, whileTap: !disabled ? sortableAnimations.dragHandle.tap : undefined }, disabled ? (React__default.createElement(ForwardRef, { className: "w-4 h-4 text-gray-500" })) : (React__default.createElement(ForwardRef$1, { className: "w-4 h-4" })))),
+        context.showDragHandle && (React__default.createElement(motion.div, { onPointerDown: handleDragHandlePointerDown, className: cn(theme.dragHandleStyle, disabled && 'cursor-not-allowed opacity-60', !disabled && 'cursor-grab active:cursor-grabbing'), whileHover: !disabled ? sortableAnimations.dragHandle.hover : undefined, whileTap: !disabled ? sortableAnimations.dragHandle.tap : undefined }, disabled ? (React__default.createElement(LockClosedIcon, { className: "w-4 h-4 text-gray-500" })) : (React__default.createElement(Bars3Icon, { className: "w-4 h-4" })))),
         React__default.createElement("div", { className: "flex-1" }, children)));
 });
 SortableItem.displayName = 'SortableItem';

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

@@ -1,7 +1,10 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { spinnerTheme } from './Spinner.theme.js';
 import { cn } from '../../../utils/cn.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
 
 var Spinner = function (_a) {
     var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.color, color = _c === void 0 ? 'primary' : _c, className = _a.className, theme = _a.theme, props = __rest(_a, ["size", "color", "className", "theme"]);

package/dist/components/core/Stepper/Stepper.js

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { stepperTheme } from './Stepper.theme.js';

package/dist/components/core/Stepper/Stepper.theme.d.ts

@@ -4,16 +4,38 @@
 interface StepperTheme {
     baseStyle: string;
     itemStyle: string;
-    iconStyle: string;
+    statusStyles: {
+        complete: string;
+        current: string;
+        upcoming: string;
+        activeComplete: string;
+    };
+    connectorStatusStyles: {
+        complete: string;
+        current: string;
+        upcoming: string;
+        activeComplete: string;
+        gradient: string;
+    };
+    labelStatusStyles: {
+        complete: string;
+        current: string;
+        upcoming: string;
+        activeComplete: string;
+    };
+    iconBaseStyle: string;
     iconNumberStyle: string;
-    connectorStyle: string;
+    connectorBaseStyle: string;
     contentStyle: string;
-    labelStyle: string;
+    labelBaseStyle: string;
     descriptionStyle: string;
 }
 /**
  * Default theme for the Stepper component
- * Using data-attribute selectors for status-based styling (optimal shadcn approach)
+ * Using status-first organization for reliable dark mode support
+ *
+ * @note Following dark-theme-migration-guide.md - separating base styles from
+ * status-specific styles to ensure dark: variants work correctly
  */
 export declare const stepperTheme: StepperTheme;
 export {};

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

@@ -1,24 +1,57 @@
 /**
  * Default theme for the Stepper component
- * Using data-attribute selectors for status-based styling (optimal shadcn approach)
+ * Using status-first organization for reliable dark mode support
+ *
+ * @note Following dark-theme-migration-guide.md - separating base styles from
+ * status-specific styles to ensure dark: variants work correctly
  */
 var stepperTheme = {
     // Base stepper container styles
     baseStyle: "",
     // Individual step item styles
     itemStyle: "relative",
-    // Icon circle styles with data-attribute status selectors
-    iconStyle: "relative z-10 flex size-8 items-center justify-center rounded-full transition-all duration-300 data-[status=complete]:bg-[var(--color-success)] data-[status=complete]:ring-2 data-[status=complete]:ring-white data-[status=current]:border data-[status=current]:border-[var(--color-primary)] data-[status=current]:bg-white data-[status=current]:shadow-xl data-[status=current]:shadow-[var(--color-primary)]/20 data-[status=current]:ring-4 data-[status=current]:ring-[var(--color-primary)]/20 data-[status=upcoming]:border data-[status=upcoming]:border-[var(--color-border)] data-[status=upcoming]:bg-white data-[status=upcoming]:text-[var(--color-text-secondary)]/70 data-[status=active-complete]:bg-[var(--color-success)] data-[status=active-complete]:ring-2 data-[status=active-complete]:ring-white data-[status=active-complete]:shadow-xl data-[status=active-complete]:shadow-[var(--color-success)]/20 data-[status=active-complete]:ring-4 data-[status=active-complete]:ring-[var(--color-success)]/20",
+    // Icon base styles (shared across all statuses)
+    iconBaseStyle: "relative z-10 flex size-8 items-center justify-center rounded-full transition-all duration-300",
+    // Status-specific icon styles (variant-first organization for dark mode)
+    statusStyles: {
+        complete: "bg-[var(--color-success)] ring-2 ring-white " +
+            "dark:bg-[var(--color-success-600)] dark:ring-[var(--color-neutral-800)]",
+        current: "border border-[var(--color-primary)] bg-white shadow-xl shadow-[var(--color-primary)]/20 ring-4 ring-[var(--color-primary)]/20 " +
+            "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-primary-400)] dark:shadow-[var(--color-primary-400)]/30 dark:ring-[var(--color-primary-400)]/30",
+        upcoming: "border border-[var(--color-border)] bg-white text-[var(--color-text-secondary)]/70 " +
+            "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-600)] dark:text-[var(--color-text-secondary)]",
+        activeComplete: "bg-[var(--color-success)] ring-2 ring-white shadow-xl shadow-[var(--color-success)]/20 ring-4 ring-[var(--color-success)]/20 " +
+            "dark:bg-[var(--color-success-600)] dark:ring-[var(--color-neutral-800)] dark:shadow-[var(--color-success-400)]/30 dark:ring-[var(--color-success-400)]/30",
+    },
     // Icon number text styles
-    iconNumberStyle: "font-bold text-sm data-[status=current]:text-[var(--color-text-primary)]",
-    // Connector line styles with status-based styling
-    connectorStyle: "absolute top-4 left-4 -ml-px mt-0.5 h-full w-0.5 data-[status=complete]:bg-[var(--color-success)] data-[status=active-complete]:bg-[var(--color-success)] data-[status=current]:border-l-2 data-[status=current]:border-dashed data-[status=current]:border-[var(--color-border)] data-[status=current]:w-auto data-[status=upcoming]:border-l-2 data-[status=upcoming]:border-dashed data-[status=upcoming]:border-[var(--color-border)] data-[status=upcoming]:w-auto data-[connector=gradient]:bg-gradient-to-b data-[connector=gradient]:from-[var(--color-success)] data-[connector=gradient]:to-[var(--color-primary)]",
+    iconNumberStyle: "font-bold text-sm text-[var(--color-text-primary)] " +
+        "dark:text-[var(--color-text-primary)]",
+    // Connector base styles (shared across all statuses)
+    connectorBaseStyle: "absolute top-4 left-4 -ml-px mt-0.5 h-full w-0.5",
+    // Status-specific connector styles
+    connectorStatusStyles: {
+        complete: "bg-[var(--color-success)] " + "dark:bg-[var(--color-success-600)]",
+        current: "border-l-2 border-dashed border-[var(--color-border)] w-auto " +
+            "dark:border-[var(--color-neutral-600)]",
+        upcoming: "border-l-2 border-dashed border-[var(--color-border)] w-auto " +
+            "dark:border-[var(--color-neutral-600)]",
+        activeComplete: "bg-[var(--color-success)] " + "dark:bg-[var(--color-success-600)]",
+        gradient: "bg-gradient-to-b from-[var(--color-success)] to-[var(--color-primary)] " +
+            "dark:from-[var(--color-success-600)] dark:to-[var(--color-primary-400)]",
+    },
     // Step content container styles
     contentStyle: "ml-4 flex min-w-0 flex-col justify-center",
-    // Label text styles with status-based colors
-    labelStyle: "text-base font-medium data-[status=complete]:text-[var(--color-text-primary)] data-[status=current]:text-[var(--color-primary)] data-[status=active-complete]:text-[var(--color-text-primary)] data-[status=upcoming]:text-[var(--color-text-secondary)]",
+    // Label base styles (shared across all statuses)
+    labelBaseStyle: "text-base font-medium",
+    // Status-specific label styles
+    labelStatusStyles: {
+        complete: "text-[var(--color-text-primary)] " + " ",
+        current: "text-[var(--color-primary)] " + " ",
+        upcoming: "text-[var(--color-text-secondary)] " + " ",
+        activeComplete: "text-[var(--color-text-primary)] " + "",
+    },
     // Description text styles
-    descriptionStyle: "text-sm text-[var(--color-text-secondary)]",
+    descriptionStyle: "text-sm text-[var(--color-text-secondary)]/80 " + "",
 };
 
 export { stepperTheme };

package/dist/components/core/Stepper/StepperItem.js

@@ -1,16 +1,22 @@
 import React__default, { useState, useEffect } from 'react';
+import { motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
-import '../../../node_modules/tslib/tslib.es6.js';
+import '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import '../../../icons/core/PlusIcon.js';
 import '../../../icons/core/MinusIcon.js';
 import '../../../icons/core/SearchIcon.js';
 import '../../../icons/core/LockIcon.js';
 import '../../../icons/core/DollarIcon.js';
 import { TickIcon } from '../../../icons/core/TickIcon.js';
+import { LockClosedIcon } from '@heroicons/react/16/solid';
 import { stepperTheme } from './Stepper.theme.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/16/solid/esm/LockClosedIcon.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
 
+/** Convert status to theme key (handles hyphenated values) */
+var getStatusKey = function (status) {
+    if (status === "active-complete")
+        return "activeComplete";
+    return status;
+};
 /**
  * StepperItem component for rendering an individual step with consolidated rendering logic
  */
@@ -47,40 +53,58 @@ var StepperItem = function (_a) {
         }
     }, [status]);
     // Helper function to render icon circle (consolidated from IconCircle.tsx)
-    var renderIcon = function () { return (React__default.createElement("div", { className: cn(stepperTheme.iconStyle), "data-status": visualIconStatus }, visualIconStatus === "complete" || visualIconStatus === "active-complete" ? (React__default.createElement(TickIcon, { size: "sm", className: "text-white", "aria-hidden": "true", strokeWidth: 3 })) : (React__default.createElement("div", { className: stepperTheme.iconNumberStyle, "data-status": visualIconStatus }, stepNumber)))); };
+    var renderIcon = function () {
+        var statusKey = getStatusKey(visualIconStatus);
+        return (React__default.createElement("div", { className: cn(stepperTheme.iconBaseStyle, stepperTheme.statusStyles[statusKey]) }, visualIconStatus === "complete" ||
+            visualIconStatus === "active-complete" ? (React__default.createElement(TickIcon, { size: "sm", className: "text-white", "aria-hidden": "true", strokeWidth: 3 })) : (React__default.createElement("div", { className: stepperTheme.iconNumberStyle }, stepNumber))));
+    };
     // Helper function to render content (consolidated from StepContent.tsx)
-    var renderContent = function () { return (React__default.createElement("div", { className: stepperTheme.contentStyle },
-        React__default.createElement("div", { className: stepperTheme.labelStyle, "data-status": visualContentStatus }, step.label),
-        step.description && (React__default.createElement("div", { className: stepperTheme.descriptionStyle }, step.description)))); };
+    var renderContent = function () {
+        var statusKey = getStatusKey(visualContentStatus);
+        return (React__default.createElement("div", { className: stepperTheme.contentStyle },
+            React__default.createElement("div", { className: cn(stepperTheme.labelBaseStyle, stepperTheme.labelStatusStyles[statusKey]) }, step.label),
+            step.description && (React__default.createElement("div", { className: stepperTheme.descriptionStyle }, step.description))));
+    };
     // Helper function to render connector line (consolidated from ConnectorLine.tsx)
     var renderConnector = function () {
         // If this is the last item, don't render a connector
         if (isLast)
             return null;
         // Determine if gradient should be used (connecting completed step to current step)
-        var isGradient = (status === "complete" || status === "active-complete") && nextStepStatus === "current";
+        var isGradient = (status === "complete" || status === "active-complete") &&
+            nextStepStatus === "current";
+        // Get the appropriate connector styles
+        var getConnectorStyles = function (forStatus, useGradient) {
+            var key = getStatusKey(forStatus);
+            if (useGradient) {
+                return cn(stepperTheme.connectorBaseStyle, stepperTheme.connectorStatusStyles.gradient);
+            }
+            return cn(stepperTheme.connectorBaseStyle, stepperTheme.connectorStatusStyles[key]);
+        };
         // Only animate the connector line when it's a completed step connecting to the current step
-        var shouldAnimate = (status === "complete" && nextStepStatus === "current");
+        var shouldAnimate = status === "complete" && nextStepStatus === "current";
         if (shouldAnimate) {
             return (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("div", { "aria-hidden": "true", className: stepperTheme.connectorStyle, "data-status": "upcoming" }),
-                React__default.createElement(motion.div, { "aria-hidden": "true", className: cn(stepperTheme.connectorStyle, "origin-top"), "data-status": status, "data-connector": isGradient ? "gradient" : "solid", initial: { scaleY: 0, opacity: 0 }, animate: { scaleY: 1, opacity: 1 }, transition: { duration: 0.8 } })));
+                React__default.createElement("div", { "aria-hidden": "true", className: getConnectorStyles("upcoming", false) }),
+                React__default.createElement(motion.div, { "aria-hidden": "true", className: cn(getConnectorStyles(status, isGradient), "origin-top"), initial: { scaleY: 0, opacity: 0 }, animate: { scaleY: 1, opacity: 1 }, transition: { duration: 0.8 } })));
         }
         // Non-animated connector - immediately show at full height
-        return (React__default.createElement("div", { "aria-hidden": "true", className: stepperTheme.connectorStyle, "data-status": status, "data-connector": isGradient ? "gradient" : "solid" }));
+        return (React__default.createElement("div", { "aria-hidden": "true", className: getConnectorStyles(status, isGradient) }));
     };
     // Content that goes inside either the <a> or <div> wrapper
     var innerContent = (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", { className: "flex h-9 items-center", "aria-hidden": "true" },
             React__default.createElement("div", { className: "relative" },
                 renderIcon(),
-                lockCompletedSteps && (visualIconStatus === "complete" || visualIconStatus === "active-complete") && (React__default.createElement(motion.div, { className: "absolute -right-1 -bottom-1 bg-white/70 backdrop-blur-sm rounded-full p-0.5 z-10", initial: { opacity: 0, translateY: 4 }, animate: { opacity: 1, translateY: 0 }, transition: {
+                lockCompletedSteps &&
+                    (visualIconStatus === "complete" ||
+                        visualIconStatus === "active-complete") && (React__default.createElement(motion.div, { className: "absolute -right-1 -bottom-1 bg-[var(--color-background)]/70 backdrop-blur-sm rounded-full p-0.5 z-10", initial: { opacity: 0, translateY: 4 }, animate: { opacity: 1, translateY: 0 }, transition: {
                         type: "spring",
                         stiffness: 400,
                         damping: 17,
-                        duration: 0.5
+                        duration: 0.5,
                     } },
-                    React__default.createElement(ForwardRef, { className: "size-3 text-[var(--color-text-secondary)] shadow-sm", "aria-hidden": "true" }))))),
+                    React__default.createElement(LockClosedIcon, { className: "size-3 text-[var(--color-text-secondary)] shadow-sm", "aria-hidden": "true" }))))),
         renderContent()));
     return (React__default.createElement(React__default.Fragment, null,
         renderConnector(),

package/dist/components/core/Table/Table.js

@@ -1,16 +1,19 @@
-import { __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+import { __assign, __spreadArray } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { createContext, useState, useEffect } from 'react';
 import { tableTheme } from './Table.theme.js';
 import { cn } from '../../../utils/cn.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
 import { TableHeader } from './components/core/TableHeader.js';
 import { TableBody } from './components/core/TableBody.js';
 import { TableSelectionHeader } from './components/TableSelectionHeader/TableSelectionHeader.js';
 import { Popover } from '../Popover/Popover.js';
 import '../Popover/PopoverContext.js';
+import { Cog6ToothIcon } from '@heroicons/react/24/outline';
 import { Button } from '../Button/Button.js';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 import { Sortable, SortableItem } from '../Sortable/Sortable.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/Cog6ToothIcon.js';
 
 /**
  * Context for sharing table state across all table components
@@ -184,7 +187,7 @@ function TableComponent(props) {
                 React__default.createElement(Popover, { placement: "bottom-end", offset: 8 },
                     React__default.createElement(Popover.Trigger, null,
                         React__default.createElement(Button, { color: "neutral", variant: "filled", "aria-label": "Manage column visibility" },
-                            React__default.createElement(ForwardRef, { className: "size-5", "aria-hidden": "true" }),
+                            React__default.createElement(Cog6ToothIcon, { className: "size-5", "aria-hidden": "true" }),
                             "Manage Columns")),
                     React__default.createElement(Popover.Content, { className: "p-0" },
                         React__default.createElement("div", { className: "w-64 p-3 overflow-hidden bg-white", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true" },