flikkui 0.2.0-beta.2 → 0.2.0-beta.5

package/dist/components/charts/DonutChart/DonutChart.js

@@ -3,7 +3,7 @@ import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { donutChartTheme } from './DonutChart.theme.js';
 import { getSpringAnimation, CIRCULAR_CHART_ANIMATIONS, getStaggerDelay } from '../utils/animation-utils.js';
-import { describeRingSegmentPath, interpolateHexColor, clamp } from './donut-utils.js';
+import { resolveCssVariable, describeRingSegmentPath, interpolateHexColor, clamp } from './donut-utils.js';
 
 /**
  * DonutChart component for displaying a percentage value with a circular progress indicator
@@ -36,28 +36,31 @@ const DonutChart = ({ variant = "solid", percentage, label, subtitle, size = 200
     // Generate stable gradient ID based on component instance
     const gradientId = useMemo(() => `donut-gradient-${Math.random().toString(36).substr(2, 9)}`, []);
     // Determine colors based on props or theme - simplified logic
+    // Resolves CSS variables to computed values for SVG attribute compatibility
     const getColors = useMemo(() => {
         var _a, _b;
         // If colors prop has both from and to, use gradient
         if ((colors === null || colors === void 0 ? void 0 : colors.from) && (colors === null || colors === void 0 ? void 0 : colors.to)) {
             return {
                 type: "gradient",
-                from: colors.from,
-                to: colors.to,
+                from: resolveCssVariable(colors.from),
+                to: resolveCssVariable(colors.to),
             };
         }
         // If colors prop has primary, use solid color
         if (colors === null || colors === void 0 ? void 0 : colors.primary) {
             return {
                 type: "solid",
-                color: colors.primary,
+                color: resolveCssVariable(colors.primary),
             };
         }
-        // Use theme defaults (gradient)
+        // Use theme defaults (gradient) - resolve CSS variables
+        const primaryColor = resolveCssVariable(((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary) || "", "#3b82f6");
+        const secondaryColor = resolveCssVariable(((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.secondary) || "", "#10b981");
         return {
             type: "gradient",
-            from: ((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary) || "#3b82f6",
-            to: ((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.secondary) || "#10b981",
+            from: primaryColor,
+            to: secondaryColor,
         };
     }, [colors, theme.colors]);
     const segmentDefinitions = useMemo(() => {
@@ -148,7 +151,7 @@ const DonutChart = ({ variant = "solid", percentage, label, subtitle, size = 200
             isSegmentedVariant ? (React__default.createElement("g", null,
                 segmentDefinitions.map((segment, index) => {
                     var _a;
-                    return (React__default.createElement("path", { key: `donut-track-${index}`, d: segment.trackPath, fill: ((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.track) || "#e5e7eb", opacity: 0.25 }));
+                    return (React__default.createElement("path", { key: `donut-track-${index}`, d: segment.trackPath, fill: resolveCssVariable(((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.track) || "", "#e5e7eb"), opacity: 0.25 }));
                 }),
                 segmentDefinitions.map((segment, index) => segment.activePath ? (React__default.createElement(motion.path, { key: `donut-active-${index}`, d: segment.activePath, fill: resolveSegmentFill(segment.colorFactor), initial: { opacity: 0, scale: 0.95 }, animate: hasAnimated ? { opacity: 1, scale: 1 } : {}, transition: showAnimation && !shouldReduceMotion
                         ? {

package/dist/components/charts/DonutChart/DonutChart.theme.d.ts

@@ -5,6 +5,9 @@ import { DonutChartThemeOverrides } from "./DonutChart.types";
 export declare const donutChartTheme: DonutChartThemeOverrides;
 /**
  * Pre-defined color schemes for quick customization
+ * Note: These use hex values as they're required for gradient interpolation
+ * via the interpolateHexColor function. Users can also pass CSS variables
+ * which will be resolved at runtime.
  */
 export declare const donutChartColorSchemes: {
     readonly default: {

package/dist/components/charts/DonutChart/DonutChart.theme.js

@@ -13,11 +13,12 @@ const donutChartTheme = {
         label: "text-2xl font-bold text-[var(--color-text-primary)] transition-colors duration-300 tracking-tight",
         subtitle: "text-sm text-[var(--color-text-secondary)] mt-1 transition-colors duration-300",
     },
-    // Default color palette
+    // Default color palette (CSS variables for dark mode support)
+    // Note: These are resolved at runtime via getComputedStyle
     colors: {
-        primary: "#3b82f6", // blue-500
-        secondary: "#10b981", // emerald-500
-        track: "#e5e7eb", // neutral-200
+        primary: "var(--color-primary)",
+        secondary: "var(--color-success)",
+        track: "var(--color-border)",
     },
 };
 

package/dist/components/charts/DonutChart/donut-utils.d.ts

@@ -1,6 +1,11 @@
 /**
  * Shared utility functions for DonutChart components
  */
+/**
+ * Resolves a CSS variable to its computed value
+ * Falls back to the provided value if not a CSS variable or resolution fails
+ */
+export declare const resolveCssVariable: (value: string, fallback?: string) => string;
 /**
  * Clamps a value between a minimum and maximum
  */

package/dist/components/charts/DonutChart/donut-utils.js

@@ -1,6 +1,31 @@
 /**
  * Shared utility functions for DonutChart components
  */
+/**
+ * Resolves a CSS variable to its computed value
+ * Falls back to the provided value if not a CSS variable or resolution fails
+ */
+const resolveCssVariable = (value, fallback) => {
+    var _a;
+    // If not a CSS variable, return as-is
+    if (!value.startsWith("var(")) {
+        return value;
+    }
+    // Check if we're in a browser environment
+    if (typeof window === "undefined" || typeof document === "undefined") {
+        return fallback || value;
+    }
+    // Extract variable name from var(--name) or var(--name, fallback)
+    const match = value.match(/var\(([^,)]+)(?:,\s*([^)]+))?\)/);
+    if (!match) {
+        return fallback || value;
+    }
+    const varName = match[1].trim();
+    const cssDefault = (_a = match[2]) === null || _a === void 0 ? void 0 : _a.trim();
+    // Get computed value from document root
+    const computed = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+    return computed || cssDefault || fallback || value;
+};
 /**
  * Clamps a value between a minimum and maximum
  */
@@ -112,4 +137,4 @@ const interpolateHexColor = (from, to, factor) => {
     return `rgb(${r}, ${g}, ${b})`;
 };
 
-export { clamp, describeArcPathClockwise, describeRingSegmentPath, hexToRgb, interpolateHexColor, polarToCartesian };
+export { clamp, describeArcPathClockwise, describeRingSegmentPath, hexToRgb, interpolateHexColor, polarToCartesian, resolveCssVariable };

package/dist/components/charts/Heatmap/Heatmap.theme.js

@@ -9,8 +9,8 @@ const heatmapTheme = {
     gridStyle: "absolute inset-0",
     // Base cell styles (individual cells add opacity via inline styles)
     cellBaseStyle: "relative w-full h-full cursor-pointer border border-transparent transition-all duration-500 animate-[flicker_0.6s_ease-out_forwards]",
-    // Axis labels using standard Tailwind classes (acceptable for labels)
-    axisLabelStyle: "text-xs text-gray-600 dark:text-gray-400 font-medium select-none",
+    // Axis labels using CSS variables for dark mode support
+    axisLabelStyle: "text-xs text-[var(--color-text-secondary)] font-medium select-none",
     // Legend using correct CSS variables
     legendStyle: "w-full space-y-1.5 mt-3",
 };

package/dist/components/charts/shared/ChartAxis/XAxis.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { XAxisProps } from './ChartAxis.types';
+import React from "react";
+import type { XAxisProps } from "./ChartAxis.types";
 /**
  * XAxis component for charts
  * Renders horizontal axis with labels and optional tick marks

package/dist/components/charts/shared/ChartAxis/XAxis.js

@@ -6,7 +6,7 @@ import { ChartText } from '../ChartText/ChartText.js';
  * XAxis component for charts
  * Renders horizontal axis with labels and optional tick marks
  */
-const XAxis = ({ data, x, y, width, categoryWidth, categoryGap = 0, show = true, className, color = 'currentColor', showTicks = true, tickLength = 6, tickPadding = 12, textAnchor = 'middle', labelRotation = 0, labelFormatter, maxLabelWidth = 100, alignWithEdge = false, }) => {
+const XAxis = ({ data, x, y, width, categoryWidth, categoryGap = 0, show = true, className, color = "currentColor", showTicks = true, tickLength = 6, tickPadding = 12, textAnchor = "middle", labelRotation = 0, labelFormatter, maxLabelWidth = 100, alignWithEdge = false, }) => {
     if (!show)
         return null;
     const formatLabel = (item, index) => {
@@ -25,13 +25,13 @@ const XAxis = ({ data, x, y, width, categoryWidth, categoryGap = 0, show = true,
         }
         return x + index * (categoryWidth + categoryGap) + categoryWidth / 2;
     };
-    return (React__default.createElement("g", { className: cn('chart-x-axis', className) },
-        React__default.createElement("line", { x1: x, y1: y, x2: x + width, y2: y, stroke: color, className: "opacity-20", strokeWidth: 1 }),
+    return (React__default.createElement("g", { className: cn("chart-x-axis", className) },
+        React__default.createElement("line", { x1: x, y1: y, x2: x + width, y2: y, className: "stroke-[var(--color-border)]", strokeWidth: 1 }),
         data.map((item, index) => {
             const tickX = getTickX(index);
             const label = formatLabel(item, index);
             return (React__default.createElement("g", { key: index },
-                showTicks && (React__default.createElement("line", { x1: tickX, y1: y, x2: tickX, y2: y + tickLength, stroke: color, className: "opacity-40", strokeWidth: 1 })),
+                showTicks && (React__default.createElement("line", { x1: tickX, y1: y, x2: tickX, y2: y + tickLength, className: "stroke-[var(--color-border)]", strokeWidth: 1 })),
                 React__default.createElement(ChartText, { x: tickX, y: y + tickLength + tickPadding, textAnchor: textAnchor, maxWidth: maxLabelWidth, truncate: !!maxLabelWidth, rotation: labelRotation }, label)));
         })));
 };

package/dist/components/charts/shared/ChartAxis/YAxis.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { YAxisProps } from './ChartAxis.types';
+import React from "react";
+import type { YAxisProps } from "./ChartAxis.types";
 /**
  * YAxis component for charts
  * Renders vertical axis with labels, optional tick marks, and grid lines

package/dist/components/charts/shared/ChartAxis/YAxis.js

@@ -6,7 +6,7 @@ import { ChartText } from '../ChartText/ChartText.js';
  * YAxis component for charts
  * Renders vertical axis with labels, optional tick marks, and grid lines
  */
-const YAxis = ({ min, max, tickCount = 5, x, y, height, show = true, className, color = 'currentColor', showTicks = true, tickLength = 6, tickPadding = 8, textAnchor = 'end', tickFormatter, showGrid = false, gridWidth = 0, ticks: customTicks, }) => {
+const YAxis = ({ min, max, tickCount = 5, x, y, height, show = true, className, color = "currentColor", showTicks = true, tickLength = 6, tickPadding = 8, textAnchor = "end", tickFormatter, showGrid = false, gridWidth = 0, ticks: customTicks, }) => {
     if (!show)
         return null;
     // Generate tick values
@@ -68,7 +68,8 @@ const YAxis = ({ min, max, tickCount = 5, x, y, height, show = true, className,
         else if (Math.abs(value) >= 1000) {
             return `${Math.round(value / 1000)}K`;
         }
-        else if (Number.isInteger(value) || Math.abs(value - Math.round(value)) < 0.01) {
+        else if (Number.isInteger(value) ||
+            Math.abs(value - Math.round(value)) < 0.01) {
             return Math.round(value).toString();
         }
         else {
@@ -80,15 +81,15 @@ const YAxis = ({ min, max, tickCount = 5, x, y, height, show = true, className,
             return y + height / 2; // Center position when no range
         }
         const ratio = (value - min) / (max - min);
-        return y + height - (ratio * height);
+        return y + height - ratio * height;
     };
-    return (React__default.createElement("g", { className: cn('chart-y-axis', className) },
-        React__default.createElement("line", { x1: x, y1: y, x2: x, y2: y + height, stroke: color, className: "opacity-10", strokeWidth: 1 }),
+    return (React__default.createElement("g", { className: cn("chart-y-axis", className) },
+        React__default.createElement("line", { x1: x, y1: y, x2: x, y2: y + height, className: "stroke-[var(--color-border)]", strokeWidth: 1 }),
         ticks.map((tick, index) => {
             const tickY = getTickY(tick);
             return (React__default.createElement("g", { key: index },
-                showGrid && gridWidth > 0 && (React__default.createElement("line", { x1: x, y1: tickY, x2: x + gridWidth, y2: tickY, stroke: color, className: "opacity-10", strokeWidth: 1 })),
-                showTicks && (React__default.createElement("line", { x1: x - tickLength, y1: tickY, x2: x, y2: tickY, stroke: color, className: "opacity-40", strokeWidth: 1 })),
+                showGrid && gridWidth > 0 && (React__default.createElement("line", { x1: x, y1: tickY, x2: x + gridWidth, y2: tickY, className: "opacity-80 stroke-[var(--color-border)]", strokeWidth: 1 })),
+                showTicks && (React__default.createElement("line", { x1: x - tickLength, y1: tickY, x2: x, y2: tickY, className: "stroke-[var(--color-border)]", strokeWidth: 1 })),
                 React__default.createElement(ChartText, { x: x - tickLength - tickPadding, y: tickY, textAnchor: textAnchor, dominantBaseline: "middle" }, formatTick(tick))));
         })));
 };

package/dist/components/charts/shared/ChartGrid/HorizontalGrid.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 export interface HorizontalGridProps {
     /** X position to start the grid */
     x: number;

package/dist/components/charts/shared/ChartGrid/HorizontalGrid.js

@@ -5,7 +5,7 @@ import { cn } from '../../../../utils/cn.js';
  * HorizontalGrid component for charts
  * Renders horizontal grid lines at specified intervals
  */
-const HorizontalGrid = ({ x, y, width, height, lineCount = 5, show = true, color = 'currentColor', className, tickPositions, }) => {
+const HorizontalGrid = ({ x, y, width, height, lineCount = 5, show = true, color = "currentColor", className, tickPositions, }) => {
     if (!show)
         return null;
     // Generate grid line positions
@@ -15,7 +15,7 @@ const HorizontalGrid = ({ x, y, width, height, lineCount = 5, show = true, color
                 return y;
             return y + (i * height) / (lineCount - 1);
         });
-    return (React__default.createElement("g", { className: cn('chart-horizontal-grid', className) }, positions.map((lineY, index) => (React__default.createElement("line", { key: index, x1: x, y1: lineY, x2: x + width, y2: lineY, stroke: color, className: "opacity-10", strokeWidth: 1 })))));
+    return (React__default.createElement("g", { className: cn("chart-horizontal-grid", className) }, positions.map((lineY, index) => (React__default.createElement("line", { key: index, x1: x, y1: lineY, x2: x + width, y2: lineY, className: "opacity-80 stroke-[var(--color-border)]", strokeWidth: 1 })))));
 };
 
 export { HorizontalGrid };

package/dist/components/charts/theme/chart.theme.d.ts

@@ -1,4 +1,4 @@
-import { ChartThemeConfig } from '../types/chart.types';
+import { ChartThemeConfig } from "../types/chart.types";
 /**
  * Default theme for Chart components
  * Uses Tailwind classes with CSS variables for consistency with the design system

package/dist/components/charts/theme/chart.theme.js

@@ -7,64 +7,64 @@ const chartTheme = {
         colors: {
             // Default series colors using your design system colors
             series: [
-                'fill-[var(--color-primary)] stroke-[var(--color-primary)]', // Primary
-                'fill-[var(--color-warning)] stroke-[var(--color-warning)]', // Warning/Orange
-                'fill-[var(--color-success)] stroke-[var(--color-success)]', // Success/Green
-                'fill-[var(--color-danger)] stroke-[var(--color-danger)]', // Danger/Red
-                'fill-[var(--color-primary-400)] stroke-[var(--color-primary-400)]', // Primary lighter
-                'fill-[var(--color-warning-400)] stroke-[var(--color-warning-400)]', // Warning lighter
-                'fill-[var(--color-success-400)] stroke-[var(--color-success-400)]', // Success lighter
-                'fill-[var(--color-danger-400)] stroke-[var(--color-danger-400)]', // Danger lighter
+                "fill-[var(--color-primary)] stroke-[var(--color-primary)]", // Primary
+                "fill-[var(--color-warning)] stroke-[var(--color-warning)]", // Warning/Orange
+                "fill-[var(--color-success)] stroke-[var(--color-success)]", // Success/Green
+                "fill-[var(--color-danger)] stroke-[var(--color-danger)]", // Danger/Red
+                "fill-[var(--color-primary-400)] stroke-[var(--color-primary-400)]", // Primary lighter
+                "fill-[var(--color-warning-400)] stroke-[var(--color-warning-400)]", // Warning lighter
+                "fill-[var(--color-success-400)] stroke-[var(--color-success-400)]", // Success lighter
+                "fill-[var(--color-danger-400)] stroke-[var(--color-danger-400)]", // Danger lighter
             ],
             // Chart infrastructure colors
-            grid: 'stroke-neutral-200',
-            axis: 'stroke-neutral-300',
-            text: 'fill-[var(--color-text-secondary)]',
-            background: 'fill-white',
-            hover: 'fill-neutral-100',
-            disabled: 'fill-neutral-200',
+            grid: "stroke-[var(--color-border)]",
+            axis: "stroke-[var(--color-border)]",
+            text: "fill-[var(--color-text-secondary)]",
+            background: "fill-[var(--color-background)]",
+            hover: "fill-[var(--color-background-secondary)]",
+            disabled: "fill-[var(--color-background-disabled)]",
         },
         opacity: {
-            default: 'opacity-100',
-            hover: 'opacity-80',
-            disabled: 'opacity-50',
+            default: "opacity-100",
+            hover: "opacity-80",
+            disabled: "opacity-50",
         },
         transitions: {
-            default: 'transition-all duration-200',
-            hover: 'transition-all duration-150',
+            default: "transition-all duration-200",
+            hover: "transition-all duration-150",
         },
     },
     variants: {
         default: {
             colors: [
-                'fill-[var(--color-primary)] stroke-[var(--color-primary)]',
-                'fill-[var(--color-warning)] stroke-[var(--color-warning)]',
-                'fill-[var(--color-success)] stroke-[var(--color-success)]',
-                'fill-[var(--color-danger)] stroke-[var(--color-danger)]',
-                'fill-[var(--color-primary-400)] stroke-[var(--color-primary-400)]',
-                'fill-[var(--color-warning-400)] stroke-[var(--color-warning-400)]',
-                'fill-[var(--color-success-400)] stroke-[var(--color-success-400)]',
-                'fill-[var(--color-danger-400)] stroke-[var(--color-danger-400)]',
+                "fill-[var(--color-primary)] stroke-[var(--color-primary)]",
+                "fill-[var(--color-warning)] stroke-[var(--color-warning)]",
+                "fill-[var(--color-success)] stroke-[var(--color-success)]",
+                "fill-[var(--color-danger)] stroke-[var(--color-danger)]",
+                "fill-[var(--color-primary-400)] stroke-[var(--color-primary-400)]",
+                "fill-[var(--color-warning-400)] stroke-[var(--color-warning-400)]",
+                "fill-[var(--color-success-400)] stroke-[var(--color-success-400)]",
+                "fill-[var(--color-danger-400)] stroke-[var(--color-danger-400)]",
             ],
         },
         minimal: {
             colors: [
-                'fill-neutral-600 stroke-neutral-600',
-                'fill-neutral-500 stroke-neutral-500',
-                'fill-neutral-400 stroke-neutral-400',
-                'fill-neutral-300 stroke-neutral-300',
-                'fill-neutral-700 stroke-neutral-700',
-                'fill-neutral-800 stroke-neutral-800',
+                "fill-[var(--color-neutral-600)] stroke-[var(--color-neutral-600)]",
+                "fill-[var(--color-neutral-500)] stroke-[var(--color-neutral-500)]",
+                "fill-[var(--color-neutral-400)] stroke-[var(--color-neutral-400)]",
+                "fill-[var(--color-neutral-300)] stroke-[var(--color-neutral-300)]",
+                "fill-[var(--color-neutral-700)] stroke-[var(--color-neutral-700)]",
+                "fill-[var(--color-neutral-800)] stroke-[var(--color-neutral-800)]",
             ],
         },
         gradient: {
             colors: [
-                'fill-[var(--color-primary)] stroke-[var(--color-primary)]',
-                'fill-[var(--color-primary-400)] stroke-[var(--color-primary-400)]',
-                'fill-[var(--color-primary-500)] stroke-[var(--color-primary-500)]',
-                'fill-[var(--color-primary-600)] stroke-[var(--color-primary-600)]',
-                'fill-[var(--color-primary-700)] stroke-[var(--color-primary-700)]',
-                'fill-[var(--color-primary-800)] stroke-[var(--color-primary-800)]',
+                "fill-[var(--color-primary)] stroke-[var(--color-primary)]",
+                "fill-[var(--color-primary-400)] stroke-[var(--color-primary-400)]",
+                "fill-[var(--color-primary-500)] stroke-[var(--color-primary-500)]",
+                "fill-[var(--color-primary-600)] stroke-[var(--color-primary-600)]",
+                "fill-[var(--color-primary-700)] stroke-[var(--color-primary-700)]",
+                "fill-[var(--color-primary-800)] stroke-[var(--color-primary-800)]",
             ],
         },
     },

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

@@ -2,7 +2,7 @@ import React from "react";
 import { AccordionProps, AccordionContextValue } from "./Accordion.types";
 export declare const useAccordionContext: () => AccordionContextValue;
 export declare const Accordion: {
-    ({ children, className, type, variant, collapsible, defaultValue, value, onValueChange, theme: themeOverrides, ...props }: AccordionProps): React.JSX.Element;
+    ({ children, className, type, variant, collapsible, defaultValue, value, onValueChange, theme: themeOverrides, darkMode, ...props }: AccordionProps): React.JSX.Element;
     displayName: string;
 } & {
     Item: React.ForwardRefExoticComponent<import("./Accordion.types").AccordionItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Accordion/Accordion.js

@@ -13,7 +13,7 @@ const useAccordionContext = () => {
         throw new Error("Accordion compound components must be used within <Accordion>");
     return ctx;
 };
-const AccordionRoot = ({ children, className, type = "single", variant = "separated", collapsible = false, defaultValue, value, onValueChange, theme: themeOverrides, ...props }) => {
+const AccordionRoot = ({ children, className, type = "single", variant = "separated", collapsible = false, defaultValue, value, onValueChange, theme: themeOverrides, darkMode = false, ...props }) => {
     // State for uncontrolled component
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue || (type === "single" ? "" : []));
     // Determine if component is controlled
@@ -43,7 +43,7 @@ const AccordionRoot = ({ children, className, type = "single", variant = "separa
     // Select base style based on variant
     const baseStyleClass = variant === "stacked" ? theme.baseStyleStacked : theme.baseStyle;
     return (React__default.createElement(AccordionContext.Provider, { value: contextValue },
-        React__default.createElement("div", { className: cn(baseStyleClass, className), "data-variant": variant, ...props }, children)));
+        React__default.createElement("div", { className: cn(baseStyleClass, darkMode && "dark", className), "data-variant": variant, ...props }, children)));
 };
 AccordionRoot.displayName = "Accordion";
 // Attach compound subcomponents

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

@@ -32,6 +32,14 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     theme?: AccordionThemeOverrides;
     children: React.ReactNode;
+    /**
+     * Force dark mode styling for the component. Use when placing the component
+     * on a dark background while the page is in light mode. This applies the
+     * 'dark' class to the container, making text, borders, and other elements
+     * use light colors for visibility.
+     * @default false
+     */
+    darkMode?: boolean;
 }
 /**
  * Accordion context value

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

@@ -30,8 +30,8 @@ const getShouldAnimate = () => {
  * <Badge dismissible onDismiss={handleDismiss}>Removable</Badge>
  * ```
  */
-const Badge = React__default.memo(React__default.forwardRef(({ children, variant = "filled", color = "primary", size = "md", pill = false, withDot = false, iconStart, avatar, dismissible = false, onDismiss, selectable = false, selected = false, onSelect, disabled = false, maxWidth, className, theme: customTheme = {}, onClick, ...props }, ref) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+const Badge = React__default.memo(React__default.forwardRef(({ children, variant = "filled", color = "primary", size = "md", pill = false, withDot = false, iconStart, avatar, dismissible = false, onDismiss, selectable = false, selected = false, onSelect, disabled = false, maxWidth, className, theme: customTheme = {}, onClick, darkMode = false, ...props }, ref) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
     // State management
     const [isVisible, setIsVisible] = useState(true);
     const [isSelected, setIsSelected] = useState(selected);
@@ -93,10 +93,6 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
                 ...(_e = badgeTheme.variantColors) === null || _e === void 0 ? void 0 : _e.ghost,
                 ...(_f = customTheme.variantColors) === null || _f === void 0 ? void 0 : _f.ghost,
             },
-            glass: {
-                ...(_g = badgeTheme.variantColors) === null || _g === void 0 ? void 0 : _g.glass,
-                ...(_h = customTheme.variantColors) === null || _h === void 0 ? void 0 : _h.glass,
-            },
         },
         sizes: {
             ...badgeTheme.sizes,
@@ -132,16 +128,16 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
         },
     };
     // Get styles from theme
-    const variantStyles = ((_j = theme.variants) === null || _j === void 0 ? void 0 : _j[variant]) || "";
-    const colorStyles = ((_l = (_k = theme.variantColors) === null || _k === void 0 ? void 0 : _k[variant]) === null || _l === void 0 ? void 0 : _l[color]) || "";
-    const sizeStyle = ((_m = theme.sizes) === null || _m === void 0 ? void 0 : _m[size]) || "";
+    const variantStyles = ((_g = theme.variants) === null || _g === void 0 ? void 0 : _g[variant]) || "";
+    const colorStyles = ((_j = (_h = theme.variantColors) === null || _h === void 0 ? void 0 : _h[variant]) === null || _j === void 0 ? void 0 : _j[color]) || "";
+    const sizeStyle = ((_k = theme.sizes) === null || _k === void 0 ? void 0 : _k[size]) || "";
     const shapeStyle = pill
         ? "rounded-full"
         : "rounded-[var(--badge-rounded)]";
-    const dotColorStyle = ((_o = theme.dotColors) === null || _o === void 0 ? void 0 : _o[color]) || "";
+    const dotColorStyle = ((_l = theme.dotColors) === null || _l === void 0 ? void 0 : _l[color]) || "";
     // Build base styles with all states
     const isInteractive = selectable || dismissible;
-    const baseStyles = cn(theme.baseStyle, shapeStyle, variantStyles, colorStyles, sizeStyle, pill && ((_p = theme.pillSizes) === null || _p === void 0 ? void 0 : _p[size]), isInteractive && "cursor-pointer", disabled && ((_q = theme.states) === null || _q === void 0 ? void 0 : _q.disabled), className);
+    const baseStyles = cn(theme.baseStyle, shapeStyle, variantStyles, colorStyles, sizeStyle, pill && ((_m = theme.pillSizes) === null || _m === void 0 ? void 0 : _m[size]), isInteractive && "cursor-pointer", disabled && ((_o = theme.states) === null || _o === void 0 ? void 0 : _o.disabled), darkMode && "dark", className);
     // Create data attributes for styling hooks
     const dataAttributes = {
         "data-variant": variant,
@@ -198,8 +194,8 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
                             : 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", (_r = theme.dismissButtonSizes) === null || _r === void 0 ? void 0 : _r[size]), "aria-label": "Dismiss", disabled: disabled },
-                React__default.createElement(XMarkIcon, { className: cn("badge-dismiss-icon", (_s = theme.dismissIconSizes) === null || _s === void 0 ? void 0 : _s[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", (_p = theme.dismissButtonSizes) === null || _p === void 0 ? void 0 : _p[size]), "aria-label": "Dismiss", disabled: disabled },
+                React__default.createElement(XMarkIcon, { className: cn("badge-dismiss-icon", (_q = theme.dismissIconSizes) === null || _q === void 0 ? void 0 : _q[size]), "aria-hidden": "true" }))))) : null;
     }
     return (React__default.createElement(AnimatePresence, { mode: "wait" }, isVisible && (React__default.createElement(motion.span, { 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(),
@@ -210,8 +206,8 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
                         : 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", (_t = theme.dismissButtonSizes) === null || _t === void 0 ? void 0 : _t[size]), "aria-label": "Dismiss", disabled: disabled, variants: dismissButtonVariants, initial: "initial", whileHover: "hover", whileTap: "tap" },
-            React__default.createElement(XMarkIcon, { className: cn("badge-dismiss-icon", (_u = theme.dismissIconSizes) === null || _u === void 0 ? void 0 : _u[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", (_r = theme.dismissButtonSizes) === null || _r === void 0 ? void 0 : _r[size]), "aria-label": "Dismiss", disabled: disabled, variants: dismissButtonVariants, initial: "initial", whileHover: "hover", whileTap: "tap" },
+            React__default.createElement(XMarkIcon, { className: cn("badge-dismiss-icon", (_s = theme.dismissIconSizes) === null || _s === void 0 ? void 0 : _s[size]), "aria-hidden": "true" })))))));
 }));
 Badge.displayName = "Badge";
 

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

@@ -7,10 +7,9 @@ const badgeTheme = {
     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",
+        filled: "",
         outline: "bg-transparent border",
         ghost: "ring-transparent border-0",
-        glass: "glass-effect !ring-1",
     },
     // Color styles organized PER VARIANT
     // This structure enables reliable dark: variants and className overrides
@@ -54,23 +53,10 @@ const badgeTheme = {
             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",
+        sm: "text-xs px-1.5 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",
     },
@@ -106,11 +92,11 @@ const badgeTheme = {
     },
     // Dot indicator colors (simple, no dark mode needed - inherits from parent)
     dotColors: {
-        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)]",
+        neutral: "bg-[var(--color-text-primary-50)] dark:bg-[var(--color-text-inverse)]",
+        primary: "bg-[var(--color-primary-50)] dark:bg-[var(--color-primary-300)]",
+        success: "bg-[var(--color-success-50)] dark:bg-[var(--color-success-300)]",
+        warning: "bg-[var(--color-warning-50)] dark:bg-[var(--color-warning-300)]",
+        danger: "bg-[var(--color-danger-50)] dark:bg-[var(--color-danger-300)]",
     },
     // State styles
     states: {

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

@@ -1,6 +1,6 @@
 import { ReactNode, MouseEvent } from "react";
 import { HTMLMotionProps } from "motion/react";
-export type BadgeVariant = "filled" | "outline" | "ghost" | "glass";
+export type BadgeVariant = "filled" | "outline" | "ghost";
 export type BadgeColor = "neutral" | "primary" | "success" | "warning" | "danger";
 export type BadgeSize = "sm" | "md" | "lg";
 /**
@@ -163,4 +163,12 @@ export interface BadgeProps extends Omit<HTMLMotionProps<"span">, "onSelect" | "
      * Component-level theme overrides
      */
     theme?: BadgeThemeOverrides;
+    /**
+     * Force dark mode styling for the component. Use when placing the component
+     * on a dark background while the page is in light mode. This applies the
+     * 'dark' class to the container, making text, borders, and other elements
+     * use light colors for visibility.
+     * @default false
+     */
+    darkMode?: boolean;
 }

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

@@ -17,7 +17,7 @@ const BUTTON_TAP_ANIMATION = {
         },
     },
 };
-const Button = React__default.forwardRef(({ children, className = "", iconOnly = false, state = "default", size = "md", color, variant, block = false, onClick, enableRipple = true, rippleEffect = "default", rippleClassName, rippleScale = 10, showReflection = true, ...props }, ref) => {
+const Button = React__default.forwardRef(({ children, className = "", iconOnly = false, state = "default", size = "md", color, variant, block = false, onClick, enableRipple = true, rippleEffect = "default", rippleClassName, rippleScale = 10, showReflection = true, darkMode = false, ...props }, ref) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const shouldReduceMotion = useReducedMotion();
     const shouldDisableAnimations = !!shouldReduceMotion;
@@ -109,7 +109,7 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
                 node;
         }
     }, [ref, buttonRef]);
-    return (React__default.createElement(motion.button, { 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 },
+    return (React__default.createElement(motion.button, { ref: mergedRef, type: "button", className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, darkMode && "dark", 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" })),

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

@@ -137,7 +137,7 @@ const buttonTheme = {
     },
     // State styles
     states: {
-        disabled: "opacity-50 cursor-not-allowed pointer-events-none text-opacity-50",
+        disabled: "opacity-50 cursor-not-allowed pointer-events-none saturate-0",
         error: "ring-2 ring-[var(--color-danger-500)]",
         loading: "cursor-not-allowed",
         // default state has no additional classes

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

@@ -41,6 +41,14 @@ export interface ButtonProps extends HTMLMotionProps<"button"> {
     rippleScale?: number;
     /** Whether to show the glass reflection effect (default: true) */
     showReflection?: boolean;
+    /**
+     * Force dark mode styling for the component. Use when placing the component
+     * on a dark background while the page is in light mode. This applies the
+     * 'dark' class to the container, making text, borders, and other elements
+     * use light colors for visibility.
+     * @default false
+     */
+    darkMode?: boolean;
 }
 export type ButtonColor = "neutral" | "dark" | "primary" | "success" | "warning" | "danger";
 export type ButtonVariant = "filled" | "outline" | "ghost" | "link";