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

package/dist/components/core/Badge/Badge.js

@@ -1,12 +1,11 @@
-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, { useState, useMemo, useEffect, useCallback } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
 import { Avatar } from '../Avatar/Avatar.js';
 import { animationTiming, dismissVariants, badgeVariants, dismissButtonVariants, dotVariants } from './Badge.animations.js';
 import { badgeTheme } from './Badge.theme.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/XMarkIcon.js';
-import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
 
 // Helper to determine whether we should animate (Storybook can disable animations globally)
 var getShouldAnimate = function () {
@@ -33,11 +32,11 @@ var getShouldAnimate = function () {
  * ```
  */
 var Badge = React__default.memo(React__default.forwardRef(function (_a, ref) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var children = _a.children, _m = _a.variant, variant = _m === void 0 ? "filled" : _m, _o = _a.color, color = _o === void 0 ? "primary" : _o, _p = _a.size, size = _p === void 0 ? "md" : _p, _q = _a.pill, pill = _q === void 0 ? false : _q, _r = _a.withDot, withDot = _r === void 0 ? false : _r, iconStart = _a.iconStart, avatar = _a.avatar, _s = _a.dismissible, dismissible = _s === void 0 ? false : _s, onDismiss = _a.onDismiss, _t = _a.selectable, selectable = _t === void 0 ? false : _t, _u = _a.selected, selected = _u === void 0 ? false : _u, onSelect = _a.onSelect, _v = _a.disabled, disabled = _v === void 0 ? false : _v, maxWidth = _a.maxWidth, className = _a.className, _w = _a.theme, customTheme = _w === void 0 ? {} : _w, onClick = _a.onClick, props = __rest(_a, ["children", "variant", "color", "size", "pill", "withDot", "iconStart", "avatar", "dismissible", "onDismiss", "selectable", "selected", "onSelect", "disabled", "maxWidth", "className", "theme", "onClick"]);
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    var children = _a.children, _w = _a.variant, variant = _w === void 0 ? "filled" : _w, _x = _a.color, color = _x === void 0 ? "primary" : _x, _y = _a.size, size = _y === void 0 ? "md" : _y, _z = _a.pill, pill = _z === void 0 ? false : _z, _0 = _a.withDot, withDot = _0 === void 0 ? false : _0, iconStart = _a.iconStart, avatar = _a.avatar, _1 = _a.dismissible, dismissible = _1 === void 0 ? false : _1, onDismiss = _a.onDismiss, _2 = _a.selectable, selectable = _2 === void 0 ? false : _2, _3 = _a.selected, selected = _3 === void 0 ? false : _3, onSelect = _a.onSelect, _4 = _a.disabled, disabled = _4 === void 0 ? false : _4, maxWidth = _a.maxWidth, className = _a.className, _5 = _a.theme, customTheme = _5 === void 0 ? {} : _5, onClick = _a.onClick, props = __rest(_a, ["children", "variant", "color", "size", "pill", "withDot", "iconStart", "avatar", "dismissible", "onDismiss", "selectable", "selected", "onSelect", "disabled", "maxWidth", "className", "theme", "onClick"]);
     // State management
-    var _x = useState(true), isVisible = _x[0], setIsVisible = _x[1];
-    var _y = useState(selected), isSelected = _y[0], setIsSelected = _y[1];
+    var _6 = useState(true), isVisible = _6[0], setIsVisible = _6[1];
+    var _7 = useState(selected), isSelected = _7[0], setIsSelected = _7[1];
     var shouldAnimate = useMemo(getShouldAnimate, []);
     // Sync internal state with controlled prop
     useEffect(function () {
@@ -76,18 +75,23 @@ var Badge = React__default.memo(React__default.forwardRef(function (_a, ref) {
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     }, [selectable, isSelected, onSelect, onClick, disabled]);
     // Merge default theme with custom theme overrides
-    var theme = __assign(__assign(__assign({}, badgeTheme), customTheme), { variants: __assign(__assign({}, badgeTheme.variants), customTheme.variants), colors: __assign(__assign({}, badgeTheme.colors), customTheme.colors), sizes: __assign(__assign({}, badgeTheme.sizes), customTheme.sizes), pillSizes: __assign(__assign({}, badgeTheme.pillSizes), customTheme.pillSizes), iconSizes: __assign(__assign({}, badgeTheme.iconSizes), customTheme.iconSizes), avatarSizes: __assign(__assign({}, badgeTheme.avatarSizes), customTheme.avatarSizes), dismissButtonSizes: __assign(__assign({}, badgeTheme.dismissButtonSizes), customTheme.dismissButtonSizes), dismissIconSizes: __assign(__assign({}, badgeTheme.dismissIconSizes), customTheme.dismissIconSizes), dotColors: __assign(__assign({}, badgeTheme.dotColors), customTheme.dotColors), states: __assign(__assign({}, badgeTheme.states), customTheme.states) });
+    var theme = __assign(__assign(__assign({}, badgeTheme), customTheme), { variants: __assign(__assign({}, badgeTheme.variants), customTheme.variants), variantColors: {
+            filled: __assign(__assign({}, (_b = badgeTheme.variantColors) === null || _b === void 0 ? void 0 : _b.filled), (_c = customTheme.variantColors) === null || _c === void 0 ? void 0 : _c.filled),
+            outline: __assign(__assign({}, (_d = badgeTheme.variantColors) === null || _d === void 0 ? void 0 : _d.outline), (_e = customTheme.variantColors) === null || _e === void 0 ? void 0 : _e.outline),
+            ghost: __assign(__assign({}, (_f = badgeTheme.variantColors) === null || _f === void 0 ? void 0 : _f.ghost), (_g = customTheme.variantColors) === null || _g === void 0 ? void 0 : _g.ghost),
+            glass: __assign(__assign({}, (_h = badgeTheme.variantColors) === null || _h === void 0 ? void 0 : _h.glass), (_j = customTheme.variantColors) === null || _j === void 0 ? void 0 : _j.glass),
+        }, sizes: __assign(__assign({}, badgeTheme.sizes), customTheme.sizes), pillSizes: __assign(__assign({}, badgeTheme.pillSizes), customTheme.pillSizes), iconSizes: __assign(__assign({}, badgeTheme.iconSizes), customTheme.iconSizes), avatarSizes: __assign(__assign({}, badgeTheme.avatarSizes), customTheme.avatarSizes), dismissButtonSizes: __assign(__assign({}, badgeTheme.dismissButtonSizes), customTheme.dismissButtonSizes), dismissIconSizes: __assign(__assign({}, badgeTheme.dismissIconSizes), customTheme.dismissIconSizes), dotColors: __assign(__assign({}, badgeTheme.dotColors), customTheme.dotColors), states: __assign(__assign({}, badgeTheme.states), customTheme.states) });
     // Get styles from theme
-    var variantStyles = ((_b = theme.variants) === null || _b === void 0 ? void 0 : _b[variant]) || "";
-    var colorStyles = ((_c = theme.colors) === null || _c === void 0 ? void 0 : _c[color]) || "";
-    var sizeStyle = ((_d = theme.sizes) === null || _d === void 0 ? void 0 : _d[size]) || "";
+    var variantStyles = ((_k = theme.variants) === null || _k === void 0 ? void 0 : _k[variant]) || "";
+    var colorStyles = ((_m = (_l = theme.variantColors) === null || _l === void 0 ? void 0 : _l[variant]) === null || _m === void 0 ? void 0 : _m[color]) || "";
+    var sizeStyle = ((_o = theme.sizes) === null || _o === void 0 ? void 0 : _o[size]) || "";
     var shapeStyle = pill
         ? "rounded-full"
         : "rounded-[var(--badge-rounded)]";
-    var dotColorStyle = ((_e = theme.dotColors) === null || _e === void 0 ? void 0 : _e[color]) || "";
+    var dotColorStyle = ((_p = theme.dotColors) === null || _p === void 0 ? void 0 : _p[color]) || "";
     // Build base styles with all states
     var isInteractive = selectable || dismissible;
-    var baseStyles = cn(theme.baseStyle, shapeStyle, variantStyles, colorStyles, sizeStyle, pill && ((_f = theme.pillSizes) === null || _f === void 0 ? void 0 : _f[size]), isInteractive && 'cursor-pointer', disabled && ((_g = theme.states) === null || _g === void 0 ? void 0 : _g.disabled), className);
+    var baseStyles = cn(theme.baseStyle, shapeStyle, variantStyles, colorStyles, sizeStyle, pill && ((_q = theme.pillSizes) === null || _q === void 0 ? void 0 : _q[size]), isInteractive && "cursor-pointer", disabled && ((_r = theme.states) === null || _r === void 0 ? void 0 : _r.disabled), className);
     // Create data attributes for styling hooks
     var dataAttributes = {
         "data-variant": variant,
@@ -133,7 +137,7 @@ var Badge = React__default.memo(React__default.forwardRef(function (_a, ref) {
     };
     if (!shouldAnimate) {
         // Strip motion-only props to satisfy HTMLAttributes typings
-        var _z = props; _z.initial; _z.animate; _z.exit; _z.variants; _z.whileHover; _z.whileTap; _z.layout; _z.transition; _z.style; _z.onUpdate; var restHtmlProps = __rest(_z, ["initial", "animate", "exit", "variants", "whileHover", "whileTap", "layout", "transition", "style", "onUpdate"]);
+        var _8 = props; _8.initial; _8.animate; _8.exit; _8.variants; _8.whileHover; _8.whileTap; _8.layout; _8.transition; _8.style; _8.onUpdate; var restHtmlProps = __rest(_8, ["initial", "animate", "exit", "variants", "whileHover", "whileTap", "layout", "transition", "style", "onUpdate"]);
         // Non-animated render for Storybook or reduced-motion environments
         return isVisible ? (React__default.createElement("span", __assign({ ref: ref, className: baseStyles, onClick: handleClick, role: selectable ? "button" : undefined, tabIndex: selectable && !disabled ? 0 : undefined, "aria-pressed": selectable ? isSelected : undefined, "aria-disabled": disabled || undefined }, dataAttributes, restHtmlProps),
             renderLeftContent(),
@@ -144,8 +148,8 @@ var Badge = React__default.memo(React__default.forwardRef(function (_a, ref) {
                             : maxWidth,
                     }
                     : undefined }, children),
-            dismissible && (React__default.createElement("button", { type: "button", onClick: handleDismiss, className: cn("badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", (_h = theme.dismissButtonSizes) === null || _h === void 0 ? void 0 : _h[size]), "aria-label": "Dismiss", disabled: disabled },
-                React__default.createElement(ForwardRef, { className: cn("badge-dismiss-icon", (_j = theme.dismissIconSizes) === null || _j === void 0 ? void 0 : _j[size]), "aria-hidden": "true" }))))) : null;
+            dismissible && (React__default.createElement("button", { type: "button", onClick: handleDismiss, className: cn("badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", (_s = theme.dismissButtonSizes) === null || _s === void 0 ? void 0 : _s[size]), "aria-label": "Dismiss", disabled: disabled },
+                React__default.createElement(XMarkIcon, { className: cn("badge-dismiss-icon", (_t = theme.dismissIconSizes) === null || _t === void 0 ? void 0 : _t[size]), "aria-hidden": "true" }))))) : null;
     }
     return (React__default.createElement(AnimatePresence, { mode: "wait" }, isVisible && (React__default.createElement(motion.span, __assign({ ref: ref, className: baseStyles, onClick: handleClick, role: selectable ? "button" : undefined, tabIndex: selectable && !disabled ? 0 : undefined, "aria-pressed": selectable ? isSelected : undefined, "aria-disabled": disabled || undefined, variants: dismissible ? dismissVariants : badgeVariants, initial: "initial", animate: "animate", exit: "exit", whileTap: selectable && !disabled ? { scale: 0.98 } : undefined }, dataAttributes, props),
         renderLeftContent(),
@@ -156,8 +160,8 @@ var Badge = React__default.memo(React__default.forwardRef(function (_a, ref) {
                         : maxWidth,
                 }
                 : undefined }, children),
-        dismissible && (React__default.createElement(motion.button, { type: "button", onClick: handleDismiss, className: cn("badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", (_k = theme.dismissButtonSizes) === null || _k === void 0 ? void 0 : _k[size]), "aria-label": "Dismiss", disabled: disabled, variants: dismissButtonVariants, initial: "initial", whileHover: "hover", whileTap: "tap" },
-            React__default.createElement(ForwardRef, { className: cn("badge-dismiss-icon", (_l = theme.dismissIconSizes) === null || _l === void 0 ? void 0 : _l[size]), "aria-hidden": "true" })))))));
+        dismissible && (React__default.createElement(motion.button, { type: "button", onClick: handleDismiss, className: cn("badge-dismiss-btn -ml-1 -mr-1 rounded-full p-0.5 cursor-pointer", (_u = theme.dismissButtonSizes) === null || _u === void 0 ? void 0 : _u[size]), "aria-label": "Dismiss", disabled: disabled, variants: dismissButtonVariants, initial: "initial", whileHover: "hover", whileTap: "tap" },
+            React__default.createElement(XMarkIcon, { className: cn("badge-dismiss-icon", (_v = theme.dismissIconSizes) === null || _v === void 0 ? void 0 : _v[size]), "aria-hidden": "true" })))))));
 }));
 Badge.displayName = "Badge";
 

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

@@ -1,6 +1,6 @@
-import { BadgeTheme } from './Badge.types';
+import { BadgeTheme } from "./Badge.types";
 /**
  * Default theme configuration for Badge component
- * Separates visual variants from semantic colors following new convention
+ * Uses variant-first color organization for reliable dark mode and className overrides
  */
 export declare const badgeTheme: BadgeTheme;

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

@@ -1,92 +1,121 @@
 /**
  * Default theme configuration for Badge component
- * Separates visual variants from semantic colors following new convention
+ * Uses variant-first color organization for reliable dark mode and className overrides
  */
 var badgeTheme = {
     // Base styles applied to all badges
-    baseStyle: 'inline-flex items-center font-medium select-none whitespace-nowrap transition-all duration-300 h-fit glass-effect',
-    // Visual style variants (appearance treatment)
+    baseStyle: "inline-flex items-center font-medium select-none whitespace-nowrap transition-all duration-300 h-fit",
+    // Visual style variants (structure only, no colors)
     variants: {
-        filled: 'ring-1 data-[selected=true]:text-white data-[selected=true]:ring-offset-1',
-        outline: '!bg-transparent border-1 data-[selected=true]:text-white',
-        ghost: 'ring-transparent data-[selected=true]:text-white',
+        filled: "ring-1",
+        outline: "bg-transparent border",
+        ghost: "ring-transparent border-0",
+        glass: "glass-effect !ring-1",
     },
-    // Semantic colors (intent-based styling with variant support)
-    colors: {
-        // Neutral - dark filled, gray outline/ghost
-        neutral: 'data-[variant=filled]:!from-[var(--color-neutral-900)] data-[variant=filled]:!via-[var(--color-neutral-700)] data-[variant=filled]:!to-[var(--color-neutral-700)] data-[variant=filled]:text-white data-[variant=filled]:ring-[var(--color-border)] ' +
-            'data-[variant=outline]:text-[var(--color-text-primary)] data-[variant=outline]:border-[var(--color-border)] ' +
-            'data-[variant=ghost]:bg-[var(--color-neutral-100)] data-[variant=ghost]:text-[var(--color-text-primary)] data-[variant=ghost]:ring-transparent ' +
-            'data-[interactive=true]:hover:opacity-80 data-[selected=true]:bg-[var(--color-text-primary)] data-[selected=true]:ring-[var(--color-border)]/40',
-        // Primary - solid primary filled
-        primary: 'data-[variant=filled]:!from-[var(--color-primary)] data-[variant=filled]:!via-[var(--color-primary-600)] data-[variant=filled]:!to-[var(--color-primary-500)] data-[variant=filled]:text-white data-[variant=filled]:ring-[var(--color-primary)] ' +
-            'data-[variant=outline]:text-[var(--color-primary)] data-[variant=outline]:border-[var(--color-primary)] ' +
-            'data-[variant=ghost]:bg-[var(--color-primary-50)] data-[variant=ghost]:text-[var(--color-primary-700)] data-[variant=ghost]:ring-transparent ' +
-            'data-[interactive=true]:hover:opacity-80 data-[selected=true]:bg-[var(--color-primary)] data-[selected=true]:ring-[var(--color-primary)]/40',
-        // Success - solid success filled
-        success: 'data-[variant=filled]:!from-[var(--color-success)] data-[variant=filled]:!via-[var(--color-success-600)] data-[variant=filled]:!to-[var(--color-success-500)] data-[variant=filled]:text-white data-[variant=filled]:ring-[var(--color-success)] ' +
-            'data-[variant=outline]:text-[var(--color-success)] data-[variant=outline]:border-[var(--color-success)] ' +
-            'data-[variant=ghost]:bg-[var(--color-success-50)] data-[variant=ghost]:text-[var(--color-success-700)] data-[variant=ghost]:ring-transparent ' +
-            'data-[interactive=true]:hover:opacity-80 data-[selected=true]:bg-[var(--color-success)] data-[selected=true]:ring-[var(--color-success)]/40',
-        // Warning - solid warning filled
-        warning: 'data-[variant=filled]:!from-[var(--color-warning)] data-[variant=filled]:!via-[var(--color-warning-600)] data-[variant=filled]:!to-[var(--color-warning-500)] data-[variant=filled]:text-white data-[variant=filled]:ring-[var(--color-warning)] ' +
-            'data-[variant=outline]:text-[var(--color-warning)] data-[variant=outline]:border-[var(--color-warning)] ' +
-            'data-[variant=ghost]:bg-[var(--color-warning-50)] data-[variant=ghost]:text-[var(--color-warning-700)] data-[variant=ghost]:ring-transparent ' +
-            'data-[interactive=true]:hover:opacity-80 data-[selected=true]:bg-[var(--color-warning)] data-[selected=true]:ring-[var(--color-warning)]/40',
-        // Danger - solid danger filled
-        danger: 'data-[variant=filled]:!from-[var(--color-danger)] data-[variant=filled]:!via-[var(--color-danger-600)] data-[variant=filled]:!to-[var(--color-danger-500)] data-[variant=filled]:text-white data-[variant=filled]:ring-[var(--color-danger)] ' +
-            'data-[variant=outline]:text-[var(--color-danger)] data-[variant=outline]:border-[var(--color-danger)] ' +
-            'data-[variant=ghost]:bg-[var(--color-danger-50)] data-[variant=ghost]:text-[var(--color-danger-600)] data-[variant=ghost]:ring-transparent ' +
-            'data-[interactive=true]:hover:opacity-80 data-[selected=true]:bg-[var(--color-danger)] data-[selected=true]:ring-[var(--color-danger)]/40',
+    // Color styles organized PER VARIANT
+    // This structure enables reliable dark: variants and className overrides
+    variantColors: {
+        // Filled variant - solid backgrounds with ring glow
+        filled: {
+            neutral: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] ring-[var(--color-border)] " +
+                "dark:bg-[var(--color-neutral-700)] dark:ring-[var(--color-neutral-600)]",
+            primary: "bg-[var(--color-primary)] text-white ring-[var(--color-primary-400)] " +
+                "dark:bg-[var(--color-primary-600)] dark:ring-[var(--color-primary-500)]",
+            success: "bg-[var(--color-success-600)] text-white ring-[var(--color-success-300)] " +
+                "dark:bg-[var(--color-success-600)] dark:ring-[var(--color-success-400)]",
+            warning: "bg-[var(--color-warning)] text-white ring-[var(--color-warning-300)] " +
+                "dark:bg-[var(--color-warning-600)] dark:ring-[var(--color-warning-400)]",
+            danger: "bg-[var(--color-danger)] text-white ring-[var(--color-danger-400)] " +
+                "dark:bg-[var(--color-danger-600)] dark:ring-[var(--color-danger-400)]",
+        },
+        // Outline variant - transparent bg with colored border
+        outline: {
+            neutral: "text-[var(--color-text-primary)] border-[var(--color-border)] " +
+                "dark:border-[var(--color-neutral-600)]",
+            primary: "text-[var(--color-primary)] border-[var(--color-primary)] " +
+                "dark:text-[var(--color-primary-300)] dark:border-[var(--color-primary-300)]",
+            success: "text-[var(--color-success)] border-[var(--color-success)] " +
+                "dark:text-[var(--color-success-300)] dark:border-[var(--color-success-300)]",
+            warning: "text-[var(--color-warning)] border-[var(--color-warning)] " +
+                "dark:text-[var(--color-warning-400)] dark:border-[var(--color-warning-400)]",
+            danger: "text-[var(--color-danger)] border-[var(--color-danger)] " +
+                "dark:text-[var(--color-danger-400)] dark:border-[var(--color-danger-400)]",
+        },
+        // Ghost variant - subtle background tints
+        ghost: {
+            neutral: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] " +
+                "dark:bg-[var(--color-neutral-900)] dark:text-[var(--color-text-primary)]",
+            primary: "bg-[var(--color-primary-50)] text-[var(--color-primary-700)] " +
+                "dark:bg-[var(--color-primary-900)]/30 dark:text-[var(--color-primary-300)]",
+            success: "bg-[var(--color-success-50)] text-[var(--color-success-600)] " +
+                "dark:bg-[var(--color-success-900)]/30 dark:text-[var(--color-success-400)]",
+            warning: "bg-[var(--color-warning-50)] text-[var(--color-warning-600)] " +
+                "dark:bg-[var(--color-warning-900)]/30 dark:text-[var(--color-warning-400)]",
+            danger: "bg-[var(--color-danger-50)] text-[var(--color-danger-600)] " +
+                "dark:bg-[var(--color-danger-900)]/30 dark:text-[var(--color-danger-400)]",
+        },
+        // Glass variant - glass effect with subtle styling
+        glass: {
+            neutral: "text-[var(--color-text-primary)] !ring-[var(--color-border)] bg-[var(--color-neutral-100)] " +
+                "dark:!text-[var(--color-text-primary)] ",
+            primary: "text-[var(--color-primary)] !ring-[var(--color-border)] bg-[var(--color-primary-500)] " +
+                "dark:text-[var(--color-primary-300)] ",
+            success: "text-[var(--color-success)] !ring-[var(--color-border)] " +
+                "dark:text-[var(--color-success-300)] ",
+            warning: "text-[var(--color-warning)] !ring-[var(--color-border)] " +
+                "dark:text-[var(--color-warning-200)] ",
+            danger: "text-[var(--color-danger)] !ring-[var(--color-border)] " +
+                "dark:text-[var(--color-danger-400)] ",
+        },
     },
     // Flat size structure (no nested objects)
     sizes: {
-        sm: 'text-xs px-2 py-0.5 gap-1',
-        md: 'text-sm px-2 py-0.5 gap-1',
-        lg: 'text-sm px-2.5 py-1 gap-1',
+        sm: "text-xs px-2 py-0.5 gap-1",
+        md: "text-sm px-2 py-0.5 gap-1",
+        lg: "text-sm px-2.5 py-1 gap-1",
     },
     // Additional padding for pill shape
     pillSizes: {
-        sm: 'px-2',
-        md: 'px-2.5',
-        lg: 'px-3',
+        sm: "px-2",
+        md: "px-2.5",
+        lg: "px-3",
     },
     // Icon sizes
     iconSizes: {
-        sm: 'size-3',
-        md: 'size-3.5',
-        lg: 'size-4',
+        sm: "size-3",
+        md: "size-3.5",
+        lg: "size-4",
     },
     // Avatar sizes (base sizes without negative margin)
     avatarSizes: {
-        sm: 'size-4',
-        md: 'size-4',
-        lg: 'size-5',
+        sm: "size-4",
+        md: "size-4",
+        lg: "size-5",
     },
     // Dismiss button container sizes
     dismissButtonSizes: {
-        sm: 'size-3.5',
-        md: 'size-4',
-        lg: 'size-4.5',
+        sm: "size-3.5",
+        md: "size-4",
+        lg: "size-4.5",
     },
     // Dismiss icon sizes (inside button)
     dismissIconSizes: {
-        sm: 'size-2.5',
-        md: 'size-3',
-        lg: 'size-3.5',
+        sm: "size-2.5",
+        md: "size-3",
+        lg: "size-3.5",
     },
-    // Dot indicator colors
+    // Dot indicator colors (simple, no dark mode needed - inherits from parent)
     dotColors: {
-        neutral: 'bg-[var(--color-text-primary)]',
-        primary: 'bg-[var(--color-primary-700)]',
-        success: 'bg-[var(--color-success-700)]',
-        warning: 'bg-[var(--color-warning-700)]',
-        danger: 'bg-[var(--color-danger-600)]',
+        neutral: "bg-[var(--color-text-primary)] dark:bg-[var(--color-text-inverse)]",
+        primary: "bg-[var(--color-primary-700)] dark:bg-[var(--color-primary-300)]",
+        success: "bg-[var(--color-success-700)] dark:bg-[var(--color-success-300)]",
+        warning: "bg-[var(--color-warning-700)] dark:bg-[var(--color-warning-300)]",
+        danger: "bg-[var(--color-danger-600)] dark:bg-[var(--color-danger-300)]",
     },
     // State styles
     states: {
-        disabled: 'opacity-50 cursor-not-allowed pointer-events-none',
-        hover: 'data-[selectable=true]:cursor-pointer',
+        disabled: "opacity-50 cursor-not-allowed pointer-events-none",
+        hover: "cursor-pointer",
     },
 };
 

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

@@ -1,8 +1,8 @@
-import { ReactNode, MouseEvent } from 'react';
-import { HTMLMotionProps } from 'motion/react';
-export type BadgeVariant = 'filled' | 'outline' | 'ghost';
-export type BadgeColor = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
-export type BadgeSize = 'sm' | 'md' | 'lg';
+import { ReactNode, MouseEvent } from "react";
+import { HTMLMotionProps } from "motion/react";
+export type BadgeVariant = "filled" | "outline" | "ghost" | "glass";
+export type BadgeColor = "neutral" | "primary" | "success" | "warning" | "danger";
+export type BadgeSize = "sm" | "md" | "lg";
 /**
  * Theme configuration for Badge component
  */
@@ -16,9 +16,10 @@ export interface BadgeTheme {
      */
     variants: Record<BadgeVariant, string>;
     /**
-     * Styles for each badge color (semantic intent)
+     * Styles for each badge variant-color combination
+     * Organized as variantColors[variant][color] for reliable dark mode and className overrides
      */
-    colors: Record<BadgeColor, string>;
+    variantColors: Record<BadgeVariant, Record<BadgeColor, string>>;
     /**
      * Styles for each badge size (flat structure)
      */
@@ -61,7 +62,7 @@ export interface BadgeTheme {
 export interface BadgeThemeOverrides {
     baseStyle?: string;
     variants?: Partial<Record<BadgeVariant, string>>;
-    colors?: Partial<Record<BadgeColor, string>>;
+    variantColors?: Partial<Record<BadgeVariant, Partial<Record<BadgeColor, string>>>>;
     sizes?: Partial<Record<BadgeSize, string>>;
     pillSizes?: Partial<Record<BadgeSize, string>>;
     iconSizes?: Partial<Record<BadgeSize, string>>;
@@ -74,7 +75,7 @@ export interface BadgeThemeOverrides {
         hover: string;
     }>;
 }
-export interface BadgeProps extends Omit<HTMLMotionProps<"span">, 'onSelect' | 'inputMode' | 'autoCapitalize' | 'autoCorrect' | 'autoComplete'> {
+export interface BadgeProps extends Omit<HTMLMotionProps<"span">, "onSelect" | "inputMode" | "autoCapitalize" | "autoCorrect" | "autoComplete"> {
     /**
      * The content to be displayed inside the badge
      */

package/dist/components/core/Breadcrumbs/Breadcrumbs.js

@@ -1,4 +1,4 @@
-import { __rest, __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign, __spreadArray } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useState } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { breadcrumbsTheme, breadcrumbsVariants, defaultSeparator } from './Breadcrumbs.theme.js';

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

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import ForwardRef from '../../../node_modules/@heroicons/react/20/solid/esm/ChevronRightIcon.js';
+import { ChevronRightIcon } from '@heroicons/react/20/solid';
 
 /**
  * Default theme configuration for Breadcrumbs component
@@ -27,6 +27,6 @@ var breadcrumbsVariants = {
 /**
  * Default chevron separator element
  */
-var defaultSeparator = React__default.createElement(ForwardRef, { className: "size-4" });
+var defaultSeparator = React__default.createElement(ChevronRightIcon, { className: "size-4" });
 
 export { breadcrumbsTheme, breadcrumbsVariants, defaultSeparator };

package/dist/components/core/Button/Button.js

@@ -1,30 +1,34 @@
-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, { useCallback } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
 import { buttonTheme } from './Button.theme.js';
 import { cn } from '../../../utils/cn.js';
 import { Spinner } from '../Spinner/Spinner.js';
 import { useRipple, getRippleAnimation, getRippleColorClass } from './Button.ripple.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';
 
 // Button animation variants (module-level constant)
 var BUTTON_TAP_ANIMATION = {
     tap: {
         scale: 0.95,
-        transition: { duration: 0.1, type: "spring", stiffness: 400, damping: 10 }
-    }
+        transition: {
+            duration: 0.1,
+            type: "spring",
+            stiffness: 400,
+            damping: 10,
+        },
+    },
 };
 var Button = React__default.forwardRef(function (_a, ref) {
     var _b, _c, _d, _e, _f, _g, _h;
-    var children = _a.children, _j = _a.className, className = _j === void 0 ? "" : _j, _k = _a.iconOnly, iconOnly = _k === void 0 ? false : _k, _l = _a.state, state = _l === void 0 ? "default" : _l, _m = _a.size, size = _m === void 0 ? "md" : _m, color = _a.color, variant = _a.variant, _o = _a.block, block = _o === void 0 ? false : _o, onClick = _a.onClick, _p = _a.enableRipple, enableRipple = _p === void 0 ? true : _p, _q = _a.rippleEffect, rippleEffect = _q === void 0 ? 'default' : _q, rippleClassName = _a.rippleClassName, _r = _a.rippleScale, rippleScale = _r === void 0 ? 10 : _r, props = __rest(_a, ["children", "className", "iconOnly", "state", "size", "color", "variant", "block", "onClick", "enableRipple", "rippleEffect", "rippleClassName", "rippleScale"]);
+    var children = _a.children, _j = _a.className, className = _j === void 0 ? "" : _j, _k = _a.iconOnly, iconOnly = _k === void 0 ? false : _k, _l = _a.state, state = _l === void 0 ? "default" : _l, _m = _a.size, size = _m === void 0 ? "md" : _m, color = _a.color, variant = _a.variant, _o = _a.block, block = _o === void 0 ? false : _o, onClick = _a.onClick, _p = _a.enableRipple, enableRipple = _p === void 0 ? true : _p, _q = _a.rippleEffect, rippleEffect = _q === void 0 ? "default" : _q, rippleClassName = _a.rippleClassName, _r = _a.rippleScale, rippleScale = _r === void 0 ? 10 : _r, _s = _a.showReflection, showReflection = _s === void 0 ? true : _s, props = __rest(_a, ["children", "className", "iconOnly", "state", "size", "color", "variant", "block", "onClick", "enableRipple", "rippleEffect", "rippleClassName", "rippleScale", "showReflection"]);
     var shouldReduceMotion = useReducedMotion();
     var shouldDisableAnimations = !!shouldReduceMotion;
     // Initialize ripple hook
-    var _s = useRipple({
+    var _t = useRipple({
         scale: rippleScale,
         duration: 600,
         effect: rippleEffect,
-    }), ripples = _s.ripples, createRipple = _s.createRipple, buttonRef = _s.buttonRef, effect = _s.effect;
+    }), ripples = _t.ripples, createRipple = _t.createRipple, buttonRef = _t.buttonRef, effect = _t.effect;
     // Resolve color and variant with defaults
     var resolvedColor = color || "primary";
     var resolvedVariant = variant || "filled";
@@ -33,7 +37,7 @@ var Button = React__default.forwardRef(function (_a, ref) {
     var isDisabled = state === "disabled" || state === "loading";
     var isError = state === "error";
     // Dev-time a11y warning for iconOnly buttons without aria-label
-    if (process.env.NODE_ENV !== 'production') {
+    if (process.env.NODE_ENV !== "production") {
         if (iconOnly && !props["aria-label"]) {
             // eslint-disable-next-line no-console
             console.warn("Button(iconOnly) requires 'aria-label' for accessibility.");
@@ -51,31 +55,45 @@ var Button = React__default.forwardRef(function (_a, ref) {
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
         }
         catch (error) {
-            if (process.env.NODE_ENV !== 'production') {
+            if (process.env.NODE_ENV !== "production") {
                 // eslint-disable-next-line no-console
                 console.error("Error in button click handler:", error);
             }
         }
-    }, [onClick, isDisabled, props.disabled, enableRipple, shouldReduceMotion, createRipple]);
+    }, [
+        onClick,
+        isDisabled,
+        props.disabled,
+        enableRipple,
+        shouldReduceMotion,
+        createRipple,
+    ]);
     // Compute theme classes (direct computation - faster than useMemo)
-    var sizeClasses = ((_c = (_b = buttonTheme.sizes) === null || _b === void 0 ? void 0 : _b[size]) === null || _c === void 0 ? void 0 : _c[iconOnly ? "iconOnly" :
-        resolvedVariant === "link" ? "link" :
-            "default"]) || "";
-    var colorClasses = ((_d = buttonTheme.colorStyles) === null || _d === void 0 ? void 0 : _d[resolvedColor]) || "";
+    var sizeClasses = ((_c = (_b = buttonTheme.sizes) === null || _b === void 0 ? void 0 : _b[size]) === null || _c === void 0 ? void 0 : _c[iconOnly ? "iconOnly" : resolvedVariant === "link" ? "link" : "default"]) || "";
+    // Link variant uses a single style string, others use color-keyed objects
+    var colorClasses = resolvedVariant === "link"
+        ? buttonTheme.variantColors.link
+        : ((_d = buttonTheme.variantColors[resolvedVariant]) === null || _d === void 0 ? void 0 : _d[resolvedColor]) || "";
     var variantClasses = ((_e = buttonTheme.variantStyles) === null || _e === void 0 ? void 0 : _e[resolvedVariant]) || "";
-    var stateClasses = (state === 'disabled' || props.disabled) ? (((_f = buttonTheme.states) === null || _f === void 0 ? void 0 : _f.disabled) || "") :
-        isError ? (((_g = buttonTheme.states) === null || _g === void 0 ? void 0 : _g.error) || "") :
-            isLoading ? (((_h = buttonTheme.states) === null || _h === void 0 ? void 0 : _h.loading) || "") : "";
+    var stateClasses = state === "disabled" || props.disabled
+        ? ((_f = buttonTheme.states) === null || _f === void 0 ? void 0 : _f.disabled) || ""
+        : isError
+            ? ((_g = buttonTheme.states) === null || _g === void 0 ? void 0 : _g.error) || ""
+            : isLoading
+                ? ((_h = buttonTheme.states) === null || _h === void 0 ? void 0 : _h.loading) || ""
+                : "";
     var blockStyle = block ? buttonTheme.blockStyle : "";
     // Generate default aria-label for icon-only buttons if not provided (fallback only)
     var ariaLabel = iconOnly && !props["aria-label"] ? "Button" : props["aria-label"];
     // Determine animation props (user props will override due to spread order)
-    var animationProps = shouldDisableAnimations ? {} : {
-        whileTap: !isDisabled ? "tap" : undefined,
-        variants: BUTTON_TAP_ANIMATION,
-    };
+    var animationProps = shouldDisableAnimations
+        ? {}
+        : {
+            whileTap: !isDisabled ? "tap" : undefined,
+            variants: BUTTON_TAP_ANIMATION,
+        };
     // Spinner color - ensure contrast on filled buttons
-    var spinnerClassName = (resolvedVariant === 'filled' && color !== 'neutral')
+    var spinnerClassName = resolvedVariant === "filled" && color !== "neutral"
         ? "border-t-white border-l-white"
         : "";
     // Merge refs - use ripple's buttonRef if ripple is enabled, otherwise use forwarded ref
@@ -85,26 +103,30 @@ var Button = React__default.forwardRef(function (_a, ref) {
             buttonRef.current = node;
         }
         // Set forwarded ref
-        if (typeof ref === 'function') {
+        if (typeof ref === "function") {
             ref(node);
         }
         else if (ref) {
-            ref.current = node;
+            ref.current =
+                node;
         }
     }, [ref, buttonRef]);
-    return (React__default.createElement(motion.button, __assign({ ref: mergedRef, type: "button", className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, className // User overrides take precedence
-        ), disabled: isDisabled, "data-state": state, "data-color": resolvedColor, "data-variant": resolvedVariant, "data-size": size, "data-icon-only": iconOnly ? "true" : "false", "data-block": block ? "true" : "false", "aria-disabled": isDisabled || undefined, "aria-invalid": isError || undefined, "aria-label": ariaLabel, "aria-describedby": undefined, onClick: handleClick }, animationProps, props),
-        React__default.createElement("div", { className: "absolute top-0.25 right-0.25 left-0.25 h-3 bg-gradient-to-b  border-t-[0.5px] border-white/40 rounded-t-[calc(var(--button-rounded)-1.25px)] opacity-60" }),
+    return (React__default.createElement(motion.button, __assign({ ref: mergedRef, type: "button", className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, className), disabled: isDisabled, "data-state": state, "data-color": resolvedColor, "data-variant": resolvedVariant, "data-size": size, "data-icon-only": iconOnly ? "true" : "false", "data-block": block ? "true" : "false", "aria-disabled": isDisabled || undefined, "aria-invalid": isError || undefined, "aria-label": ariaLabel, "aria-describedby": undefined, onClick: handleClick }, animationProps, props),
+        showReflection &&
+            resolvedVariant !== "link" &&
+            resolvedVariant !== "outline" && (React__default.createElement("div", { className: "absolute top-0.25 right-0.25 left-0.25 h-3 bg-gradient-to-b  border-t-[0.5px] border-white/40 rounded-t-[calc(var(--button-rounded)-1.25px)] opacity-60" })),
         isLoading && (React__default.createElement("div", { className: "absolute inset-0 flex items-center justify-center" },
             React__default.createElement(Spinner, { size: "sm", color: color, className: spinnerClassName }))),
         React__default.createElement("span", { className: cn("inline-flex items-center gap-2 whitespace-nowrap", isLoading && "opacity-0") }, children),
-        enableRipple && ripples.map(function (ripple) {
-            var animation = getRippleAnimation(effect, ripple.layer || 1, rippleScale);
-            return (React__default.createElement(motion.span, { key: ripple.id, initial: animation.initial, animate: animation.animate, transition: animation.transition, className: cn("absolute rounded-full size-5 pointer-events-none ", animation.className, rippleClassName || getRippleColorClass(resolvedVariant, resolvedColor)), style: {
-                    top: ripple.y - 10,
-                    left: ripple.x - 10,
-                } }));
-        })));
+        enableRipple &&
+            ripples.map(function (ripple) {
+                var animation = getRippleAnimation(effect, ripple.layer || 1, rippleScale);
+                return (React__default.createElement(motion.span, { key: ripple.id, initial: animation.initial, animate: animation.animate, transition: animation.transition, className: cn("absolute rounded-full size-5 pointer-events-none ", animation.className, rippleClassName ||
+                        getRippleColorClass(resolvedVariant, resolvedColor)), style: {
+                        top: ripple.y - 10,
+                        left: ripple.x - 10,
+                    } }));
+            })));
 });
 // Set display name for dev tools and Storybook
 Button.displayName = "Button";

package/dist/components/core/Button/Button.ripple.js

@@ -1,4 +1,4 @@
-import { __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+import { __spreadArray } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import { useState, useRef, useCallback } from 'react';
 
 /**

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

@@ -1,11 +1,17 @@
 import { ButtonColor, ButtonVariant, ButtonSize, ButtonState } from "./Button.types";
 /**
- * Simplified theme structure for the Button component following optimal patterns
+ * Theme structure for the Button component using variant-first organization
+ * This structure enables reliable dark: variants and className overrides
  */
 interface ButtonTheme {
     baseStyle: string;
-    colorStyles: Record<ButtonColor, string>;
     variantStyles: Record<ButtonVariant, string>;
+    variantColors: {
+        filled: Record<ButtonColor, string>;
+        outline: Record<ButtonColor, string>;
+        ghost: Record<ButtonColor, string>;
+        link: string;
+    };
     sizes: Record<ButtonSize, {
         default: string;
         iconOnly: string;