dash-ui-kit 2.0.0-dev → 2.1.1

package/dist/react/components/popover/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/popover/index.tsx"],"sourcesContent":["import React from 'react'\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\nimport { cva } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { CrossIcon } from '../icons'\n\nconst popoverContent = cva(\n  [\n    'z-50 rounded-md p-4 shadow-lg outline-none',\n    'w-64',\n    'animate-in fade-in-0 zoom-in-95',\n    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',\n    'data-[side=bottom]:slide-in-from-top-2',\n    'data-[side=left]:slide-in-from-right-2',\n    'data-[side=right]:slide-in-from-left-2',\n    'data-[side=top]:slide-in-from-bottom-2',\n  ].join(' '),\n  {\n    variants: {\n      theme: {\n        light: 'bg-white border border-gray-200 text-gray-900',\n        dark: 'bg-gray-950 border border-gray-800 text-gray-50',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n    },\n  }\n)\n\nconst popoverArrow = cva('', {\n  variants: {\n    theme: {\n      light: 'fill-white stroke-gray-200',\n      dark: 'fill-gray-950 stroke-gray-800',\n    },\n  },\n  defaultVariants: {\n    theme: 'light',\n  },\n})\n\nconst closeButton = cva(\n  [\n    'absolute top-2 right-2 rounded-sm opacity-70 transition-opacity',\n    'hover:opacity-100 focus:outline-none disabled:pointer-events-none cursor-pointer',\n  ].join(' '),\n  {\n    variants: {\n      theme: {\n        light: 'text-gray-600 hover:text-gray-900',\n        dark: 'text-gray-400 hover:text-gray-100',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n    },\n  }\n)\n\nexport interface PopoverProps {\n  /** Popover body content */\n  content: React.ReactNode\n  /** Element that triggers the popover on click */\n  children: React.ReactNode\n  /** Which side the popover appears on */\n  side?: 'top' | 'bottom' | 'left' | 'right'\n  /** Offset from the trigger in pixels */\n  sideOffset?: number\n  /** Whether to show a close button inside the popover */\n  showCloseButton?: boolean\n  /** Controlled open state */\n  open?: boolean\n  /** Called when open state changes */\n  onOpenChange?: (open: boolean) => void\n  /** Default open (uncontrolled) */\n  defaultOpen?: boolean\n  /** Additional className for the content container */\n  className?: string\n}\n\nexport const Popover: React.FC<PopoverProps> = ({\n  content,\n  children,\n  side = 'bottom',\n  sideOffset = 8,\n  showCloseButton = false,\n  open,\n  onOpenChange,\n  defaultOpen,\n  className,\n}) => {\n  const { theme } = useTheme()\n\n  return (\n    <PopoverPrimitive.Root\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n    >\n      <PopoverPrimitive.Trigger asChild>\n        {React.isValidElement(children) ? children : <span>{children}</span>}\n      </PopoverPrimitive.Trigger>\n      <PopoverPrimitive.Portal>\n        <PopoverPrimitive.Content\n          side={side}\n          sideOffset={sideOffset}\n          className={`${popoverContent({ theme })} ${className ?? ''}`}\n        >\n          {showCloseButton && (\n            <PopoverPrimitive.Close className={closeButton({ theme })} aria-label='Close'>\n              <CrossIcon size={14} />\n            </PopoverPrimitive.Close>\n          )}\n          {content}\n          <PopoverPrimitive.Arrow className={popoverArrow({ theme })} />\n        </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n    </PopoverPrimitive.Root>\n  )\n}\n\nexport default Popover\n"],"names":["popoverContent","cva","join","variants","theme","light","dark","defaultVariants","popoverArrow","closeButton","Popover","content","children","side","sideOffset","showCloseButton","open","onOpenChange","defaultOpen","className","useTheme","_jsxs","PopoverPrimitive","Root","_jsx","Trigger","asChild","React","isValidElement","Portal","Content","Close","CrossIcon","size","Arrow"],"mappings":"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"}

package/dist/react/components/popover/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface PopoverProps {
+    /** Popover body content */
+    content: React.ReactNode;
+    /** Element that triggers the popover on click */
+    children: React.ReactNode;
+    /** Which side the popover appears on */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /** Offset from the trigger in pixels */
+    sideOffset?: number;
+    /** Whether to show a close button inside the popover */
+    showCloseButton?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Called when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Default open (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Additional className for the content container */
+    className?: string;
+}
+export declare const Popover: React.FC<PopoverProps>;
+export default Popover;

package/dist/react/components/popover/index.esm.js

@@ -0,0 +1,92 @@
+"use client";
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cva } from 'class-variance-authority';
+import { useTheme } from '../../contexts/ThemeContext.esm.js';
+import { CrossIcon } from '../icons/index.esm.js';
+
+const popoverContent = cva(['z-50 rounded-md p-4 shadow-lg outline-none', 'w-64', 'animate-in fade-in-0 zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', 'data-[side=bottom]:slide-in-from-top-2', 'data-[side=left]:slide-in-from-right-2', 'data-[side=right]:slide-in-from-left-2', 'data-[side=top]:slide-in-from-bottom-2'].join(' '), {
+  variants: {
+    theme: {
+      light: 'bg-white border border-gray-200 text-gray-900',
+      dark: 'bg-gray-950 border border-gray-800 text-gray-50'
+    }
+  },
+  defaultVariants: {
+    theme: 'light'
+  }
+});
+const popoverArrow = cva('', {
+  variants: {
+    theme: {
+      light: 'fill-white stroke-gray-200',
+      dark: 'fill-gray-950 stroke-gray-800'
+    }
+  },
+  defaultVariants: {
+    theme: 'light'
+  }
+});
+const closeButton = cva(['absolute top-2 right-2 rounded-sm opacity-70 transition-opacity', 'hover:opacity-100 focus:outline-none disabled:pointer-events-none cursor-pointer'].join(' '), {
+  variants: {
+    theme: {
+      light: 'text-gray-600 hover:text-gray-900',
+      dark: 'text-gray-400 hover:text-gray-100'
+    }
+  },
+  defaultVariants: {
+    theme: 'light'
+  }
+});
+const Popover = ({
+  content,
+  children,
+  side = 'bottom',
+  sideOffset = 8,
+  showCloseButton = false,
+  open,
+  onOpenChange,
+  defaultOpen,
+  className
+}) => {
+  const {
+    theme
+  } = useTheme();
+  return jsxs(PopoverPrimitive.Root, {
+    open: open,
+    defaultOpen: defaultOpen,
+    onOpenChange: onOpenChange,
+    children: [jsx(PopoverPrimitive.Trigger, {
+      asChild: true,
+      children: /*#__PURE__*/React.isValidElement(children) ? children : jsx("span", {
+        children: children
+      })
+    }), jsx(PopoverPrimitive.Portal, {
+      children: jsxs(PopoverPrimitive.Content, {
+        side: side,
+        sideOffset: sideOffset,
+        className: `${popoverContent({
+          theme
+        })} ${className !== null && className !== void 0 ? className : ''}`,
+        children: [showCloseButton && jsx(PopoverPrimitive.Close, {
+          className: closeButton({
+            theme
+          }),
+          "aria-label": 'Close',
+          children: jsx(CrossIcon, {
+            size: 14
+          })
+        }), content, jsx(PopoverPrimitive.Arrow, {
+          className: popoverArrow({
+            theme
+          })
+        })]
+      })
+    })]
+  });
+};
+
+export { Popover, Popover as default };
+//# sourceMappingURL=index.esm.js.map

package/dist/react/components/popover/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/popover/index.tsx"],"sourcesContent":["import React from 'react'\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\nimport { cva } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { CrossIcon } from '../icons'\n\nconst popoverContent = cva(\n  [\n    'z-50 rounded-md p-4 shadow-lg outline-none',\n    'w-64',\n    'animate-in fade-in-0 zoom-in-95',\n    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',\n    'data-[side=bottom]:slide-in-from-top-2',\n    'data-[side=left]:slide-in-from-right-2',\n    'data-[side=right]:slide-in-from-left-2',\n    'data-[side=top]:slide-in-from-bottom-2',\n  ].join(' '),\n  {\n    variants: {\n      theme: {\n        light: 'bg-white border border-gray-200 text-gray-900',\n        dark: 'bg-gray-950 border border-gray-800 text-gray-50',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n    },\n  }\n)\n\nconst popoverArrow = cva('', {\n  variants: {\n    theme: {\n      light: 'fill-white stroke-gray-200',\n      dark: 'fill-gray-950 stroke-gray-800',\n    },\n  },\n  defaultVariants: {\n    theme: 'light',\n  },\n})\n\nconst closeButton = cva(\n  [\n    'absolute top-2 right-2 rounded-sm opacity-70 transition-opacity',\n    'hover:opacity-100 focus:outline-none disabled:pointer-events-none cursor-pointer',\n  ].join(' '),\n  {\n    variants: {\n      theme: {\n        light: 'text-gray-600 hover:text-gray-900',\n        dark: 'text-gray-400 hover:text-gray-100',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n    },\n  }\n)\n\nexport interface PopoverProps {\n  /** Popover body content */\n  content: React.ReactNode\n  /** Element that triggers the popover on click */\n  children: React.ReactNode\n  /** Which side the popover appears on */\n  side?: 'top' | 'bottom' | 'left' | 'right'\n  /** Offset from the trigger in pixels */\n  sideOffset?: number\n  /** Whether to show a close button inside the popover */\n  showCloseButton?: boolean\n  /** Controlled open state */\n  open?: boolean\n  /** Called when open state changes */\n  onOpenChange?: (open: boolean) => void\n  /** Default open (uncontrolled) */\n  defaultOpen?: boolean\n  /** Additional className for the content container */\n  className?: string\n}\n\nexport const Popover: React.FC<PopoverProps> = ({\n  content,\n  children,\n  side = 'bottom',\n  sideOffset = 8,\n  showCloseButton = false,\n  open,\n  onOpenChange,\n  defaultOpen,\n  className,\n}) => {\n  const { theme } = useTheme()\n\n  return (\n    <PopoverPrimitive.Root\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n    >\n      <PopoverPrimitive.Trigger asChild>\n        {React.isValidElement(children) ? children : <span>{children}</span>}\n      </PopoverPrimitive.Trigger>\n      <PopoverPrimitive.Portal>\n        <PopoverPrimitive.Content\n          side={side}\n          sideOffset={sideOffset}\n          className={`${popoverContent({ theme })} ${className ?? ''}`}\n        >\n          {showCloseButton && (\n            <PopoverPrimitive.Close className={closeButton({ theme })} aria-label='Close'>\n              <CrossIcon size={14} />\n            </PopoverPrimitive.Close>\n          )}\n          {content}\n          <PopoverPrimitive.Arrow className={popoverArrow({ theme })} />\n        </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n    </PopoverPrimitive.Root>\n  )\n}\n\nexport default Popover\n"],"names":["popoverContent","cva","join","variants","theme","light","dark","defaultVariants","popoverArrow","closeButton","Popover","content","children","side","sideOffset","showCloseButton","open","onOpenChange","defaultOpen","className","useTheme","_jsxs","PopoverPrimitive","Root","_jsx","Trigger","asChild","React","isValidElement","Portal","Content","Close","CrossIcon","size","Arrow"],"mappings":"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"}

package/dist/react/components/progressStepBar/index.cjs.js

@@ -4,6 +4,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
+var useColorScheme = require('../../hooks/useColorScheme.cjs.js');
 
 const colorConfig = {
   blue: {
@@ -29,12 +30,16 @@ function ProgressStepBar({
   currentStep,
   totalSteps,
   className = '',
-  color = 'blue'
+  color,
+  colorLight,
+  colorDark
 }) {
+  var _a;
   const {
     theme
   } = ThemeContext.useTheme();
-  const colors = colorConfig[color];
+  const effectiveColor = (_a = useColorScheme.useColorScheme(color, colorLight, colorDark)) !== null && _a !== void 0 ? _a : 'blue';
+  const colors = colorConfig[effectiveColor];
   return jsxRuntime.jsx("div", {
     className: `flex gap-2 w-full ${className}`,
     children: Array.from({

package/dist/react/components/progressStepBar/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/progressStepBar/index.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '../../contexts/ThemeContext'\n\ninterface ProgressStepBarProps {\n  currentStep: number\n  totalSteps: number\n  className?: string\n  color?: 'blue' | 'red' | 'orange'\n}\n\nconst colorConfig = {\n  blue: {\n    active: 'bg-[var(--color-dash-brand)]',\n    activeDark: 'bg-[var(--color-dash-brand-dim)]',\n    inactive: 'bg-[rgba(76,126,255,0.16)]',\n    inactiveDark: 'bg-gray-700',\n  },\n  red: {\n    active: 'bg-[var(--color-dash-red)]',\n    activeDark: 'bg-[var(--color-dash-red-75)]',\n    inactive: 'bg-[var(--color-dash-red-15)]',\n    inactiveDark: 'bg-gray-700',\n  },\n  orange: {\n    active: 'bg-[var(--color-dash-orange)]',\n    activeDark: 'bg-[var(--color-dash-orange-75)]',\n    inactive: 'bg-[var(--color-dash-orange-15)]',\n    inactiveDark: 'bg-gray-700',\n  },\n}\n\nexport function ProgressStepBar({ \n  currentStep, \n  totalSteps, \n  className = '',\n  color = 'blue'\n}: ProgressStepBarProps): React.JSX.Element {\n  const { theme } = useTheme()\n  const colors = colorConfig[color]\n  \n  return (\n    <div className={`flex gap-2 w-full ${className}`}>\n      {Array.from({ length: totalSteps }, (_, index) => (\n        <div\n          key={index}\n          className={`h-1.5 rounded-2xl flex-1 transition-colors ${\n            index < currentStep \n              ? theme === 'dark' \n                ? colors.activeDark \n                : colors.active\n              : theme === 'dark' \n                ? colors.inactiveDark \n                : colors.inactive\n          }`}\n        />\n      ))}\n    </div>\n  )\n}\n\nexport type { ProgressStepBarProps } "],"names":["colorConfig","blue","active","activeDark","inactive","inactiveDark","red","orange","ProgressStepBar","currentStep","totalSteps","className","color","theme","useTheme","colors","_jsx","children","Array","from","length","_","index"],"mappings":";;;;;;;AAUA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,MAAM,EAAE,8BAA8B;AACtCC,IAAAA,UAAU,EAAE,kCAAkC;AAC9CC,IAAAA,QAAQ,EAAE,4BAA4B;AACtCC,IAAAA,YAAY,EAAE;GACf;AACDC,EAAAA,GAAG,EAAE;AACHJ,IAAAA,MAAM,EAAE,4BAA4B;AACpCC,IAAAA,UAAU,EAAE,+BAA+B;AAC3CC,IAAAA,QAAQ,EAAE,+BAA+B;AACzCC,IAAAA,YAAY,EAAE;GACf;AACDE,EAAAA,MAAM,EAAE;AACNL,IAAAA,MAAM,EAAE,+BAA+B;AACvCC,IAAAA,UAAU,EAAE,kCAAkC;AAC9CC,IAAAA,QAAQ,EAAE,kCAAkC;AAC5CC,IAAAA,YAAY,EAAE;AACf;CACF;AAEe,SAAAG,eAAeA,CAAC;EAC9BC,WAAW;EACXC,UAAU;AACVC,EAAAA,SAAS,GAAG,EAAE;AACdC,EAAAA,KAAK,GAAG;AACa,CAAA,EAAA;EACrB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,qBAAQ,EAAE;AAC5B,EAAA,MAAMC,MAAM,GAAGf,WAAW,CAACY,KAAK,CAAC;EAEjC,OACEI,cAAA,CAAA,KAAA,EAAA;IAAKL,SAAS,EAAE,CAAqBA,kBAAAA,EAAAA,SAAS,CAAE,CAAA;AAC7CM,IAAAA,QAAA,EAAAC,KAAK,CAACC,IAAI,CAAC;AAAEC,MAAAA,MAAM,EAAEV;KAAY,EAAE,CAACW,CAAC,EAAEC,KAAK,KAC3CN,cAAA,CAAA,KAAA,EAAA;AAEEL,MAAAA,SAAS,EAAE,CAAA,2CAAA,EACTW,KAAK,GAAGb,WAAW,GACfI,KAAK,KAAK,MAAM,GACdE,MAAM,CAACZ,UAAU,GACjBY,MAAM,CAACb,MAAM,GACfW,KAAK,KAAK,MAAM,GACdE,MAAM,CAACV,YAAY,GACnBU,MAAM,CAACX,QACf,CAAA;KAAE,EATGkB,KAAK,CAWb;AACG,GAAA,CAAA;AAEV;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/progressStepBar/index.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { useColorScheme } from '../../hooks/useColorScheme'\n\ntype ProgressColor = 'blue' | 'red' | 'orange'\n\ninterface ProgressStepBarProps {\n  currentStep: number\n  totalSteps: number\n  className?: string\n  color?: ProgressColor\n  colorLight?: ProgressColor\n  colorDark?: ProgressColor\n}\n\nconst colorConfig = {\n  blue: {\n    active: 'bg-[var(--color-dash-brand)]',\n    activeDark: 'bg-[var(--color-dash-brand-dim)]',\n    inactive: 'bg-[rgba(76,126,255,0.16)]',\n    inactiveDark: 'bg-gray-700',\n  },\n  red: {\n    active: 'bg-[var(--color-dash-red)]',\n    activeDark: 'bg-[var(--color-dash-red-75)]',\n    inactive: 'bg-[var(--color-dash-red-15)]',\n    inactiveDark: 'bg-gray-700',\n  },\n  orange: {\n    active: 'bg-[var(--color-dash-orange)]',\n    activeDark: 'bg-[var(--color-dash-orange-75)]',\n    inactive: 'bg-[var(--color-dash-orange-15)]',\n    inactiveDark: 'bg-gray-700',\n  },\n}\n\nexport function ProgressStepBar({ \n  currentStep, \n  totalSteps, \n  className = '',\n  color,\n  colorLight,\n  colorDark\n}: ProgressStepBarProps): React.JSX.Element {\n  const { theme } = useTheme()\n  const effectiveColor = useColorScheme(color, colorLight, colorDark) ?? 'blue'\n  const colors = colorConfig[effectiveColor]\n  \n  return (\n    <div className={`flex gap-2 w-full ${className}`}>\n      {Array.from({ length: totalSteps }, (_, index) => (\n        <div\n          key={index}\n          className={`h-1.5 rounded-2xl flex-1 transition-colors ${\n            index < currentStep \n              ? theme === 'dark' \n                ? colors.activeDark \n                : colors.active\n              : theme === 'dark' \n                ? colors.inactiveDark \n                : colors.inactive\n          }`}\n        />\n      ))}\n    </div>\n  )\n}\n\nexport type { ProgressStepBarProps } "],"names":["colorConfig","blue","active","activeDark","inactive","inactiveDark","red","orange","ProgressStepBar","currentStep","totalSteps","className","color","colorLight","colorDark","theme","useTheme","effectiveColor","_a","useColorScheme","colors","_jsx","children","Array","from","length","_","index"],"mappings":";;;;;;;;AAeA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,MAAM,EAAE,8BAA8B;AACtCC,IAAAA,UAAU,EAAE,kCAAkC;AAC9CC,IAAAA,QAAQ,EAAE,4BAA4B;AACtCC,IAAAA,YAAY,EAAE;GACf;AACDC,EAAAA,GAAG,EAAE;AACHJ,IAAAA,MAAM,EAAE,4BAA4B;AACpCC,IAAAA,UAAU,EAAE,+BAA+B;AAC3CC,IAAAA,QAAQ,EAAE,+BAA+B;AACzCC,IAAAA,YAAY,EAAE;GACf;AACDE,EAAAA,MAAM,EAAE;AACNL,IAAAA,MAAM,EAAE,+BAA+B;AACvCC,IAAAA,UAAU,EAAE,kCAAkC;AAC9CC,IAAAA,QAAQ,EAAE,kCAAkC;AAC5CC,IAAAA,YAAY,EAAE;AACf;CACF;SAEeG,eAAeA,CAAC;EAC9BC,WAAW;EACXC,UAAU;AACVC,EAAAA,SAAS,GAAG,EAAE;EACdC,KAAK;EACLC,UAAU;AACVC,EAAAA;AACqB,CAAA,EAAA;;EACrB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,qBAAQ,EAAE;EAC5B,MAAMC,cAAc,GAAG,CAAAC,EAAA,GAAAC,6BAAc,CAACP,KAAK,EAAEC,UAAU,EAAEC,SAAS,CAAC,MAAA,IAAA,IAAAI,EAAA,KAAA,MAAA,GAAAA,EAAA,GAAI,MAAM;AAC7E,EAAA,MAAME,MAAM,GAAGpB,WAAW,CAACiB,cAAc,CAAC;EAE1C,OACEI,cAAA,CAAA,KAAA,EAAA;IAAKV,SAAS,EAAE,CAAqBA,kBAAAA,EAAAA,SAAS,CAAE,CAAA;AAC7CW,IAAAA,QAAA,EAAAC,KAAK,CAACC,IAAI,CAAC;AAAEC,MAAAA,MAAM,EAAEf;KAAY,EAAE,CAACgB,CAAC,EAAEC,KAAK,KAC3CN,cAAA,CAAA,KAAA,EAAA;AAEEV,MAAAA,SAAS,EAAE,CAAA,2CAAA,EACTgB,KAAK,GAAGlB,WAAW,GACfM,KAAK,KAAK,MAAM,GACdK,MAAM,CAACjB,UAAU,GACjBiB,MAAM,CAAClB,MAAM,GACfa,KAAK,KAAK,MAAM,GACdK,MAAM,CAACf,YAAY,GACnBe,MAAM,CAAChB,QACf,CAAA;KAAE,EATGuB,KAAK,CAWb;AACG,GAAA,CAAA;AAEV;;;;"}

package/dist/react/components/progressStepBar/index.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
+type ProgressColor = 'blue' | 'red' | 'orange';
 interface ProgressStepBarProps {
     currentStep: number;
     totalSteps: number;
     className?: string;
-    color?: 'blue' | 'red' | 'orange';
+    color?: ProgressColor;
+    colorLight?: ProgressColor;
+    colorDark?: ProgressColor;
 }
-export declare function ProgressStepBar({ currentStep, totalSteps, className, color }: ProgressStepBarProps): React.JSX.Element;
+export declare function ProgressStepBar({ currentStep, totalSteps, className, color, colorLight, colorDark }: ProgressStepBarProps): React.JSX.Element;
 export type { ProgressStepBarProps };

package/dist/react/components/progressStepBar/index.esm.js

@@ -2,6 +2,7 @@
 
 import { jsx } from 'react/jsx-runtime';
 import { useTheme } from '../../contexts/ThemeContext.esm.js';
+import { useColorScheme } from '../../hooks/useColorScheme.esm.js';
 
 const colorConfig = {
   blue: {
@@ -27,12 +28,16 @@ function ProgressStepBar({
   currentStep,
   totalSteps,
   className = '',
-  color = 'blue'
+  color,
+  colorLight,
+  colorDark
 }) {
+  var _a;
   const {
     theme
   } = useTheme();
-  const colors = colorConfig[color];
+  const effectiveColor = (_a = useColorScheme(color, colorLight, colorDark)) !== null && _a !== void 0 ? _a : 'blue';
+  const colors = colorConfig[effectiveColor];
   return jsx("div", {
     className: `flex gap-2 w-full ${className}`,
     children: Array.from({

package/dist/react/components/progressStepBar/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/progressStepBar/index.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '../../contexts/ThemeContext'\n\ninterface ProgressStepBarProps {\n  currentStep: number\n  totalSteps: number\n  className?: string\n  color?: 'blue' | 'red' | 'orange'\n}\n\nconst colorConfig = {\n  blue: {\n    active: 'bg-[var(--color-dash-brand)]',\n    activeDark: 'bg-[var(--color-dash-brand-dim)]',\n    inactive: 'bg-[rgba(76,126,255,0.16)]',\n    inactiveDark: 'bg-gray-700',\n  },\n  red: {\n    active: 'bg-[var(--color-dash-red)]',\n    activeDark: 'bg-[var(--color-dash-red-75)]',\n    inactive: 'bg-[var(--color-dash-red-15)]',\n    inactiveDark: 'bg-gray-700',\n  },\n  orange: {\n    active: 'bg-[var(--color-dash-orange)]',\n    activeDark: 'bg-[var(--color-dash-orange-75)]',\n    inactive: 'bg-[var(--color-dash-orange-15)]',\n    inactiveDark: 'bg-gray-700',\n  },\n}\n\nexport function ProgressStepBar({ \n  currentStep, \n  totalSteps, \n  className = '',\n  color = 'blue'\n}: ProgressStepBarProps): React.JSX.Element {\n  const { theme } = useTheme()\n  const colors = colorConfig[color]\n  \n  return (\n    <div className={`flex gap-2 w-full ${className}`}>\n      {Array.from({ length: totalSteps }, (_, index) => (\n        <div\n          key={index}\n          className={`h-1.5 rounded-2xl flex-1 transition-colors ${\n            index < currentStep \n              ? theme === 'dark' \n                ? colors.activeDark \n                : colors.active\n              : theme === 'dark' \n                ? colors.inactiveDark \n                : colors.inactive\n          }`}\n        />\n      ))}\n    </div>\n  )\n}\n\nexport type { ProgressStepBarProps } "],"names":["colorConfig","blue","active","activeDark","inactive","inactiveDark","red","orange","ProgressStepBar","currentStep","totalSteps","className","color","theme","useTheme","colors","_jsx","children","Array","from","length","_","index"],"mappings":";;;;;AAUA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,MAAM,EAAE,8BAA8B;AACtCC,IAAAA,UAAU,EAAE,kCAAkC;AAC9CC,IAAAA,QAAQ,EAAE,4BAA4B;AACtCC,IAAAA,YAAY,EAAE;GACf;AACDC,EAAAA,GAAG,EAAE;AACHJ,IAAAA,MAAM,EAAE,4BAA4B;AACpCC,IAAAA,UAAU,EAAE,+BAA+B;AAC3CC,IAAAA,QAAQ,EAAE,+BAA+B;AACzCC,IAAAA,YAAY,EAAE;GACf;AACDE,EAAAA,MAAM,EAAE;AACNL,IAAAA,MAAM,EAAE,+BAA+B;AACvCC,IAAAA,UAAU,EAAE,kCAAkC;AAC9CC,IAAAA,QAAQ,EAAE,kCAAkC;AAC5CC,IAAAA,YAAY,EAAE;AACf;CACF;AAEe,SAAAG,eAAeA,CAAC;EAC9BC,WAAW;EACXC,UAAU;AACVC,EAAAA,SAAS,GAAG,EAAE;AACdC,EAAAA,KAAK,GAAG;AACa,CAAA,EAAA;EACrB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,QAAQ,EAAE;AAC5B,EAAA,MAAMC,MAAM,GAAGf,WAAW,CAACY,KAAK,CAAC;EAEjC,OACEI,GAAA,CAAA,KAAA,EAAA;IAAKL,SAAS,EAAE,CAAqBA,kBAAAA,EAAAA,SAAS,CAAE,CAAA;AAC7CM,IAAAA,QAAA,EAAAC,KAAK,CAACC,IAAI,CAAC;AAAEC,MAAAA,MAAM,EAAEV;KAAY,EAAE,CAACW,CAAC,EAAEC,KAAK,KAC3CN,GAAA,CAAA,KAAA,EAAA;AAEEL,MAAAA,SAAS,EAAE,CAAA,2CAAA,EACTW,KAAK,GAAGb,WAAW,GACfI,KAAK,KAAK,MAAM,GACdE,MAAM,CAACZ,UAAU,GACjBY,MAAM,CAACb,MAAM,GACfW,KAAK,KAAK,MAAM,GACdE,MAAM,CAACV,YAAY,GACnBU,MAAM,CAACX,QACf,CAAA;KAAE,EATGkB,KAAK,CAWb;AACG,GAAA,CAAA;AAEV;;;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/progressStepBar/index.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { useColorScheme } from '../../hooks/useColorScheme'\n\ntype ProgressColor = 'blue' | 'red' | 'orange'\n\ninterface ProgressStepBarProps {\n  currentStep: number\n  totalSteps: number\n  className?: string\n  color?: ProgressColor\n  colorLight?: ProgressColor\n  colorDark?: ProgressColor\n}\n\nconst colorConfig = {\n  blue: {\n    active: 'bg-[var(--color-dash-brand)]',\n    activeDark: 'bg-[var(--color-dash-brand-dim)]',\n    inactive: 'bg-[rgba(76,126,255,0.16)]',\n    inactiveDark: 'bg-gray-700',\n  },\n  red: {\n    active: 'bg-[var(--color-dash-red)]',\n    activeDark: 'bg-[var(--color-dash-red-75)]',\n    inactive: 'bg-[var(--color-dash-red-15)]',\n    inactiveDark: 'bg-gray-700',\n  },\n  orange: {\n    active: 'bg-[var(--color-dash-orange)]',\n    activeDark: 'bg-[var(--color-dash-orange-75)]',\n    inactive: 'bg-[var(--color-dash-orange-15)]',\n    inactiveDark: 'bg-gray-700',\n  },\n}\n\nexport function ProgressStepBar({ \n  currentStep, \n  totalSteps, \n  className = '',\n  color,\n  colorLight,\n  colorDark\n}: ProgressStepBarProps): React.JSX.Element {\n  const { theme } = useTheme()\n  const effectiveColor = useColorScheme(color, colorLight, colorDark) ?? 'blue'\n  const colors = colorConfig[effectiveColor]\n  \n  return (\n    <div className={`flex gap-2 w-full ${className}`}>\n      {Array.from({ length: totalSteps }, (_, index) => (\n        <div\n          key={index}\n          className={`h-1.5 rounded-2xl flex-1 transition-colors ${\n            index < currentStep \n              ? theme === 'dark' \n                ? colors.activeDark \n                : colors.active\n              : theme === 'dark' \n                ? colors.inactiveDark \n                : colors.inactive\n          }`}\n        />\n      ))}\n    </div>\n  )\n}\n\nexport type { ProgressStepBarProps } "],"names":["colorConfig","blue","active","activeDark","inactive","inactiveDark","red","orange","ProgressStepBar","currentStep","totalSteps","className","color","colorLight","colorDark","theme","useTheme","effectiveColor","_a","useColorScheme","colors","_jsx","children","Array","from","length","_","index"],"mappings":";;;;;;AAeA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,MAAM,EAAE,8BAA8B;AACtCC,IAAAA,UAAU,EAAE,kCAAkC;AAC9CC,IAAAA,QAAQ,EAAE,4BAA4B;AACtCC,IAAAA,YAAY,EAAE;GACf;AACDC,EAAAA,GAAG,EAAE;AACHJ,IAAAA,MAAM,EAAE,4BAA4B;AACpCC,IAAAA,UAAU,EAAE,+BAA+B;AAC3CC,IAAAA,QAAQ,EAAE,+BAA+B;AACzCC,IAAAA,YAAY,EAAE;GACf;AACDE,EAAAA,MAAM,EAAE;AACNL,IAAAA,MAAM,EAAE,+BAA+B;AACvCC,IAAAA,UAAU,EAAE,kCAAkC;AAC9CC,IAAAA,QAAQ,EAAE,kCAAkC;AAC5CC,IAAAA,YAAY,EAAE;AACf;CACF;SAEeG,eAAeA,CAAC;EAC9BC,WAAW;EACXC,UAAU;AACVC,EAAAA,SAAS,GAAG,EAAE;EACdC,KAAK;EACLC,UAAU;AACVC,EAAAA;AACqB,CAAA,EAAA;;EACrB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,QAAQ,EAAE;EAC5B,MAAMC,cAAc,GAAG,CAAAC,EAAA,GAAAC,cAAc,CAACP,KAAK,EAAEC,UAAU,EAAEC,SAAS,CAAC,MAAA,IAAA,IAAAI,EAAA,KAAA,MAAA,GAAAA,EAAA,GAAI,MAAM;AAC7E,EAAA,MAAME,MAAM,GAAGpB,WAAW,CAACiB,cAAc,CAAC;EAE1C,OACEI,GAAA,CAAA,KAAA,EAAA;IAAKV,SAAS,EAAE,CAAqBA,kBAAAA,EAAAA,SAAS,CAAE,CAAA;AAC7CW,IAAAA,QAAA,EAAAC,KAAK,CAACC,IAAI,CAAC;AAAEC,MAAAA,MAAM,EAAEf;KAAY,EAAE,CAACgB,CAAC,EAAEC,KAAK,KAC3CN,GAAA,CAAA,KAAA,EAAA;AAEEV,MAAAA,SAAS,EAAE,CAAA,2CAAA,EACTgB,KAAK,GAAGlB,WAAW,GACfM,KAAK,KAAK,MAAM,GACdK,MAAM,CAACjB,UAAU,GACjBiB,MAAM,CAAClB,MAAM,GACfa,KAAK,KAAK,MAAM,GACdK,MAAM,CAACf,YAAY,GACnBe,MAAM,CAAChB,QACf,CAAA;KAAE,EATGuB,KAAK,CAWb;AACG,GAAA,CAAA;AAEV;;;;"}

package/dist/react/components/select/index.cjs.js

@@ -9,6 +9,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
 var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
 var RadixSelect = require('@radix-ui/react-select');
+var useColorScheme = require('../../hooks/useColorScheme.cjs.js');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -146,9 +147,12 @@ const ChevronDownIcon = ({
  * />
  */
 const Select = _a => {
+  var _b;
   var {
       className = '',
       colorScheme,
+      colorSchemeLight,
+      colorSchemeDark,
       size,
       error = false,
       success = false,
@@ -162,12 +166,13 @@ const Select = _a => {
       placeholder = 'Select an option...',
       name
     } = _a;
-    tslib.__rest(_a, ["className", "colorScheme", "size", "error", "success", "border", "disabled", "options", "showArrow", "value", "defaultValue", "onChange", "placeholder", "name"]);
+    tslib.__rest(_a, ["className", "colorScheme", "colorSchemeLight", "colorSchemeDark", "size", "error", "success", "border", "disabled", "options", "showArrow", "value", "defaultValue", "onChange", "placeholder", "name"]);
   const {
     theme
   } = ThemeContext.useTheme();
+  const effectiveColorScheme = (_b = useColorScheme.useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark)) !== null && _b !== void 0 ? _b : 'default';
   // Determine color scheme based on state
-  let finalColorScheme = colorScheme;
+  let finalColorScheme = effectiveColorScheme;
   if (error) finalColorScheme = 'error';else if (success) finalColorScheme = 'success';
   const triggerClasses = selectTrigger({
     theme,

package/dist/react/components/select/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/select/index.tsx"],"sourcesContent":["import React from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport * as RadixSelect from '@radix-ui/react-select'\n\nconst selectTrigger = cva(\n  'w-full transition-all font-inter appearance-none cursor-pointer relative text-[0.875rem] leading-[1.0625rem] focus:ring-2 inline-flex items-center justify-between',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#0C1C33] bg-white',\n        dark: 'text-white bg-gray-800'\n      },\n      colorScheme: {\n        default: 'focus:ring-blue-500/20',\n        brand: 'focus:ring-dash-brand/20',\n        error: 'focus:ring-red-500/20',\n        success: 'focus:ring-green-500/20'\n      },\n      size: {\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      },\n      border: {\n        true: 'outline outline-1 outline-offset-[-1px]',\n        false: ''\n      },\n      disabled: {\n        false: '',\n        true: 'opacity-60 cursor-not-allowed'\n      }\n    },\n    compoundVariants: [\n      // Outline colors by colorScheme - only when border is true\n      {\n        colorScheme: 'default',\n        border: true,\n        class: 'outline-[rgba(12,28,51,0.35)] focus:outline-[rgba(12,28,51,0.6)]'\n      },\n      {\n        colorScheme: 'brand',\n        border: true,\n        class: 'outline-dash-brand/30 focus:outline-dash-brand'\n      },\n      {\n        colorScheme: 'error',\n        border: true,\n        class: 'outline-red-500 focus:outline-red-500'\n      },\n      {\n        colorScheme: 'success',\n        border: true,\n        class: 'outline-green-500 focus:outline-green-500'\n      }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      colorScheme: 'default',\n      size: 'xl',\n      border: true,\n      disabled: false\n    }\n  }\n)\n\nconst selectContent = cva(\n  'overflow-hidden z-50 rounded-md shadow-lg min-w-[var(--radix-select-trigger-width)] w-full max-h-[var(--radix-select-content-available-height)]',\n  {\n    variants: {\n      theme: {\n        light: 'bg-white border border-gray-200',\n        dark: 'bg-gray-800 border border-gray-700'\n      }\n    }\n  }\n)\n\nconst selectViewport = cva(\n  'overflow-y-auto max-h-[inherit]'\n)\n\nconst selectItem = cva(\n  'relative flex cursor-pointer select-none items-center outline-none focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n  {\n    variants: {\n      theme: {\n        light: 'text-gray-900 focus:bg-gray-100',\n        dark: 'text-gray-100 focus:bg-gray-700'\n      },\n      size: {\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      }\n    }\n  }\n)\n\nconst selectIcon = cva(\n  'pointer-events-none flex items-center justify-center transition-transform',\n  {\n    variants: {\n      size: {\n        sm: 'w-3 h-3',\n        md: 'w-4 h-4',\n        xl: 'w-4 h-4'\n      }\n    }\n  }\n)\n\ntype SelectVariants = VariantProps<typeof selectTrigger>\n\nexport interface SelectOption {\n  value: string\n  label: string\n  disabled?: boolean\n  content?: React.ReactNode\n}\n\nexport interface SelectProps extends Omit<SelectVariants, 'theme' | 'disabled'> {\n  className?: string\n  error?: boolean\n  success?: boolean\n  border?: boolean\n  options?: SelectOption[]\n  showArrow?: boolean\n  value?: string\n  defaultValue?: string\n  onChange?: (value: string) => void\n  placeholder?: string\n  disabled?: boolean\n  name?: string\n}\n\n  // Arrow icon\nconst ChevronDownIcon: React.FC<{ className?: string }> = ({ className }) => (\n  <svg\n    width=\"15\"\n    height=\"15\"\n    viewBox=\"0 0 15 15\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className={className}\n  >\n    <path\n      d=\"m4.93179 5.43179c0.20081-0.20081 0.52632-0.20081 0.72713 0l2.34108 2.34108 2.34108-2.34108c0.20081-0.20081 0.52632-0.20081 0.72713 0s0.20081 0.52632 0 0.72713l-2.70455 2.70455c-0.20081 0.20081-0.52632 0.20081-0.72713 0l-2.70455-2.70455c-0.20081-0.20081-0.20081-0.52632 0-0.72713z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n)\n\n/**\n * A versatile select component built on Radix UI that adapts to light/dark theme,\n * supports various color schemes, sizes, variants, states, and HTML content in options.\n *\n * @example\n * <Select\n *   options={[\n *     {value: 'id1', label: 'Option 1'}, \n *     {value: 'id2', label: 'Option 2', content: <div><strong>Option 2</strong><br/>Description</div>}\n *   ]}\n *   colorScheme=\"default\"\n *   size=\"xl\"\n *   border={true}\n * />\n */\nexport const Select: React.FC<SelectProps> = ({\n  className = '',\n  colorScheme,\n  size,\n  error = false,\n  success = false,\n  border = true,\n  disabled = false,\n  options = [],\n  showArrow = true,\n  value,\n  defaultValue,\n  onChange,\n  placeholder = 'Select an option...',\n  name,\n  ...props\n}) => {\n  const { theme } = useTheme()\n\n  // Determine color scheme based on state\n  let finalColorScheme = colorScheme\n  if (error) finalColorScheme = 'error'\n  else if (success) finalColorScheme = 'success'\n\n  const triggerClasses = selectTrigger({\n    theme,\n    colorScheme: finalColorScheme,\n    size,\n    border,\n    disabled\n  }) + ' ' + className\n\n  const contentClasses = selectContent({ theme })\n  const viewportClasses = selectViewport({})\n  const itemClasses = selectItem({ theme, size })\n  const iconClasses = selectIcon({ size })\n\n  return (\n    <RadixSelect.Root\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={onChange}\n      disabled={disabled}\n      name={name}\n    >\n      <RadixSelect.Trigger className={triggerClasses}>\n        <div className='w-full flex-1 text-left'>\n          <RadixSelect.Value placeholder={placeholder} />\n        </div>\n        {showArrow && (\n          <RadixSelect.Icon asChild>\n            <ChevronDownIcon className={iconClasses} />\n          </RadixSelect.Icon>\n        )}\n      </RadixSelect.Trigger>\n\n      <RadixSelect.Portal>\n        <RadixSelect.Content className={contentClasses} position='popper' sideOffset={5}>\n          <RadixSelect.Viewport className={viewportClasses}>\n            {options.map((option) => (\n              <RadixSelect.Item\n                key={option.value}\n                value={option.value}\n                className={itemClasses}\n                disabled={option.disabled}\n              >\n                <div className='w-full flex-1 text-left'>\n                  <RadixSelect.ItemText className='w-full'>\n                    {option.content || option.label}\n                  </RadixSelect.ItemText>\n                </div>\n              </RadixSelect.Item>\n              ))}\n          </RadixSelect.Viewport>\n        </RadixSelect.Content>\n      </RadixSelect.Portal>\n    </RadixSelect.Root>\n  )\n}\n\nexport default Select\n"],"names":["selectTrigger","cva","variants","theme","light","dark","colorScheme","default","brand","error","success","size","sm","md","xl","border","true","false","disabled","compoundVariants","class","defaultVariants","selectContent","selectViewport","selectItem","selectIcon","ChevronDownIcon","className","_jsx","width","height","viewBox","fill","xmlns","d","fillRule","clipRule","Select","_a","options","showArrow","value","defaultValue","onChange","placeholder","name","props","__rest","useTheme","finalColorScheme","triggerClasses","contentClasses","viewportClasses","itemClasses","iconClasses","_jsxs","RadixSelect","Root","onValueChange","children","Trigger","Value","Icon","asChild","Portal","Content","position","sideOffset","Viewport","map","option","Item","ItemText","content","label"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/select/index.tsx"],"sourcesContent":["import React from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport * as RadixSelect from '@radix-ui/react-select'\nimport { useColorScheme } from '../../hooks/useColorScheme'\n\nconst selectTrigger = cva(\n  'w-full transition-all font-inter appearance-none cursor-pointer relative text-[0.875rem] leading-[1.0625rem] focus:ring-2 inline-flex items-center justify-between',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#0C1C33] bg-white',\n        dark: 'text-white bg-gray-800'\n      },\n      colorScheme: {\n        default: 'focus:ring-blue-500/20',\n        brand: 'focus:ring-dash-brand/20',\n        error: 'focus:ring-red-500/20',\n        success: 'focus:ring-green-500/20'\n      },\n      size: {\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      },\n      border: {\n        true: 'outline outline-1 outline-offset-[-1px]',\n        false: ''\n      },\n      disabled: {\n        false: '',\n        true: 'opacity-60 cursor-not-allowed'\n      }\n    },\n    compoundVariants: [\n      // Outline colors by colorScheme - only when border is true\n      {\n        colorScheme: 'default',\n        border: true,\n        class: 'outline-[rgba(12,28,51,0.35)] focus:outline-[rgba(12,28,51,0.6)]'\n      },\n      {\n        colorScheme: 'brand',\n        border: true,\n        class: 'outline-dash-brand/30 focus:outline-dash-brand'\n      },\n      {\n        colorScheme: 'error',\n        border: true,\n        class: 'outline-red-500 focus:outline-red-500'\n      },\n      {\n        colorScheme: 'success',\n        border: true,\n        class: 'outline-green-500 focus:outline-green-500'\n      }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      colorScheme: 'default',\n      size: 'xl',\n      border: true,\n      disabled: false\n    }\n  }\n)\n\nconst selectContent = cva(\n  'overflow-hidden z-50 rounded-md shadow-lg min-w-[var(--radix-select-trigger-width)] w-full max-h-[var(--radix-select-content-available-height)]',\n  {\n    variants: {\n      theme: {\n        light: 'bg-white border border-gray-200',\n        dark: 'bg-gray-800 border border-gray-700'\n      }\n    }\n  }\n)\n\nconst selectViewport = cva(\n  'overflow-y-auto max-h-[inherit]'\n)\n\nconst selectItem = cva(\n  'relative flex cursor-pointer select-none items-center outline-none focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n  {\n    variants: {\n      theme: {\n        light: 'text-gray-900 focus:bg-gray-100',\n        dark: 'text-gray-100 focus:bg-gray-700'\n      },\n      size: {\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      }\n    }\n  }\n)\n\nconst selectIcon = cva(\n  'pointer-events-none flex items-center justify-center transition-transform',\n  {\n    variants: {\n      size: {\n        sm: 'w-3 h-3',\n        md: 'w-4 h-4',\n        xl: 'w-4 h-4'\n      }\n    }\n  }\n)\n\ntype SelectVariants = VariantProps<typeof selectTrigger>\n\nexport interface SelectOption {\n  value: string\n  label: string\n  disabled?: boolean\n  content?: React.ReactNode\n}\n\nexport interface SelectProps extends Omit<SelectVariants, 'theme' | 'disabled'> {\n  className?: string\n  error?: boolean\n  success?: boolean\n  border?: boolean\n  options?: SelectOption[]\n  showArrow?: boolean\n  value?: string\n  defaultValue?: string\n  onChange?: (value: string) => void\n  placeholder?: string\n  disabled?: boolean\n  name?: string\n  /** Color scheme override for light theme */\n  colorSchemeLight?: 'default' | 'brand' | 'error' | 'success'\n  /** Color scheme override for dark theme */\n  colorSchemeDark?: 'default' | 'brand' | 'error' | 'success'\n}\n\n  // Arrow icon\nconst ChevronDownIcon: React.FC<{ className?: string }> = ({ className }) => (\n  <svg\n    width=\"15\"\n    height=\"15\"\n    viewBox=\"0 0 15 15\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className={className}\n  >\n    <path\n      d=\"m4.93179 5.43179c0.20081-0.20081 0.52632-0.20081 0.72713 0l2.34108 2.34108 2.34108-2.34108c0.20081-0.20081 0.52632-0.20081 0.72713 0s0.20081 0.52632 0 0.72713l-2.70455 2.70455c-0.20081 0.20081-0.52632 0.20081-0.72713 0l-2.70455-2.70455c-0.20081-0.20081-0.20081-0.52632 0-0.72713z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n)\n\n/**\n * A versatile select component built on Radix UI that adapts to light/dark theme,\n * supports various color schemes, sizes, variants, states, and HTML content in options.\n *\n * @example\n * <Select\n *   options={[\n *     {value: 'id1', label: 'Option 1'}, \n *     {value: 'id2', label: 'Option 2', content: <div><strong>Option 2</strong><br/>Description</div>}\n *   ]}\n *   colorScheme=\"default\"\n *   size=\"xl\"\n *   border={true}\n * />\n */\nexport const Select: React.FC<SelectProps> = ({\n  className = '',\n  colorScheme,\n  colorSchemeLight,\n  colorSchemeDark,\n  size,\n  error = false,\n  success = false,\n  border = true,\n  disabled = false,\n  options = [],\n  showArrow = true,\n  value,\n  defaultValue,\n  onChange,\n  placeholder = 'Select an option...',\n  name,\n  ...props\n}) => {\n  const { theme } = useTheme()\n\n  const effectiveColorScheme = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark) ?? 'default'\n\n  // Determine color scheme based on state\n  let finalColorScheme: typeof effectiveColorScheme = effectiveColorScheme\n  if (error) finalColorScheme = 'error'\n  else if (success) finalColorScheme = 'success'\n\n  const triggerClasses = selectTrigger({\n    theme,\n    colorScheme: finalColorScheme,\n    size,\n    border,\n    disabled\n  }) + ' ' + className\n\n  const contentClasses = selectContent({ theme })\n  const viewportClasses = selectViewport({})\n  const itemClasses = selectItem({ theme, size })\n  const iconClasses = selectIcon({ size })\n\n  return (\n    <RadixSelect.Root\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={onChange}\n      disabled={disabled}\n      name={name}\n    >\n      <RadixSelect.Trigger className={triggerClasses}>\n        <div className='w-full flex-1 text-left'>\n          <RadixSelect.Value placeholder={placeholder} />\n        </div>\n        {showArrow && (\n          <RadixSelect.Icon asChild>\n            <ChevronDownIcon className={iconClasses} />\n          </RadixSelect.Icon>\n        )}\n      </RadixSelect.Trigger>\n\n      <RadixSelect.Portal>\n        <RadixSelect.Content className={contentClasses} position='popper' sideOffset={5}>\n          <RadixSelect.Viewport className={viewportClasses}>\n            {options.map((option) => (\n              <RadixSelect.Item\n                key={option.value}\n                value={option.value}\n                className={itemClasses}\n                disabled={option.disabled}\n              >\n                <div className='w-full flex-1 text-left'>\n                  <RadixSelect.ItemText className='w-full'>\n                    {option.content || option.label}\n                  </RadixSelect.ItemText>\n                </div>\n              </RadixSelect.Item>\n              ))}\n          </RadixSelect.Viewport>\n        </RadixSelect.Content>\n      </RadixSelect.Portal>\n    </RadixSelect.Root>\n  )\n}\n\nexport default Select\n"],"names":["selectTrigger","cva","variants","theme","light","dark","colorScheme","default","brand","error","success","size","sm","md","xl","border","true","false","disabled","compoundVariants","class","defaultVariants","selectContent","selectViewport","selectItem","selectIcon","ChevronDownIcon","className","_jsx","width","height","viewBox","fill","xmlns","d","fillRule","clipRule","Select","_a","colorSchemeLight","colorSchemeDark","options","showArrow","value","defaultValue","onChange","placeholder","name","props","__rest","useTheme","effectiveColorScheme","_b","useColorScheme","finalColorScheme","triggerClasses","contentClasses","viewportClasses","itemClasses","iconClasses","_jsxs","RadixSelect","Root","onValueChange","children","Trigger","Value","Icon","asChild","Portal","Content","position","sideOffset","Viewport","map","option","Item","ItemText","content","label"],"mappings":"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"}

package/dist/react/components/select/index.d.ts

@@ -27,6 +27,10 @@ export interface SelectProps extends Omit<SelectVariants, 'theme' | 'disabled'>
     placeholder?: string;
     disabled?: boolean;
     name?: string;
+    /** Color scheme override for light theme */
+    colorSchemeLight?: 'default' | 'brand' | 'error' | 'success';
+    /** Color scheme override for dark theme */
+    colorSchemeDark?: 'default' | 'brand' | 'error' | 'success';
 }
 /**
  * A versatile select component built on Radix UI that adapts to light/dark theme,

package/dist/react/components/select/index.esm.js

@@ -5,6 +5,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import { useTheme } from '../../contexts/ThemeContext.esm.js';
 import * as RadixSelect from '@radix-ui/react-select';
+import { useColorScheme } from '../../hooks/useColorScheme.esm.js';
 
 const selectTrigger = cva('w-full transition-all font-inter appearance-none cursor-pointer relative text-[0.875rem] leading-[1.0625rem] focus:ring-2 inline-flex items-center justify-between', {
   variants: {
@@ -123,9 +124,12 @@ const ChevronDownIcon = ({
  * />
  */
 const Select = _a => {
+  var _b;
   var {
       className = '',
       colorScheme,
+      colorSchemeLight,
+      colorSchemeDark,
       size,
       error = false,
       success = false,
@@ -139,12 +143,13 @@ const Select = _a => {
       placeholder = 'Select an option...',
       name
     } = _a;
-    __rest(_a, ["className", "colorScheme", "size", "error", "success", "border", "disabled", "options", "showArrow", "value", "defaultValue", "onChange", "placeholder", "name"]);
+    __rest(_a, ["className", "colorScheme", "colorSchemeLight", "colorSchemeDark", "size", "error", "success", "border", "disabled", "options", "showArrow", "value", "defaultValue", "onChange", "placeholder", "name"]);
   const {
     theme
   } = useTheme();
+  const effectiveColorScheme = (_b = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark)) !== null && _b !== void 0 ? _b : 'default';
   // Determine color scheme based on state
-  let finalColorScheme = colorScheme;
+  let finalColorScheme = effectiveColorScheme;
   if (error) finalColorScheme = 'error';else if (success) finalColorScheme = 'success';
   const triggerClasses = selectTrigger({
     theme,

package/dist/react/components/select/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/select/index.tsx"],"sourcesContent":["import React from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport * as RadixSelect from '@radix-ui/react-select'\n\nconst selectTrigger = cva(\n  'w-full transition-all font-inter appearance-none cursor-pointer relative text-[0.875rem] leading-[1.0625rem] focus:ring-2 inline-flex items-center justify-between',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#0C1C33] bg-white',\n        dark: 'text-white bg-gray-800'\n      },\n      colorScheme: {\n        default: 'focus:ring-blue-500/20',\n        brand: 'focus:ring-dash-brand/20',\n        error: 'focus:ring-red-500/20',\n        success: 'focus:ring-green-500/20'\n      },\n      size: {\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      },\n      border: {\n        true: 'outline outline-1 outline-offset-[-1px]',\n        false: ''\n      },\n      disabled: {\n        false: '',\n        true: 'opacity-60 cursor-not-allowed'\n      }\n    },\n    compoundVariants: [\n      // Outline colors by colorScheme - only when border is true\n      {\n        colorScheme: 'default',\n        border: true,\n        class: 'outline-[rgba(12,28,51,0.35)] focus:outline-[rgba(12,28,51,0.6)]'\n      },\n      {\n        colorScheme: 'brand',\n        border: true,\n        class: 'outline-dash-brand/30 focus:outline-dash-brand'\n      },\n      {\n        colorScheme: 'error',\n        border: true,\n        class: 'outline-red-500 focus:outline-red-500'\n      },\n      {\n        colorScheme: 'success',\n        border: true,\n        class: 'outline-green-500 focus:outline-green-500'\n      }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      colorScheme: 'default',\n      size: 'xl',\n      border: true,\n      disabled: false\n    }\n  }\n)\n\nconst selectContent = cva(\n  'overflow-hidden z-50 rounded-md shadow-lg min-w-[var(--radix-select-trigger-width)] w-full max-h-[var(--radix-select-content-available-height)]',\n  {\n    variants: {\n      theme: {\n        light: 'bg-white border border-gray-200',\n        dark: 'bg-gray-800 border border-gray-700'\n      }\n    }\n  }\n)\n\nconst selectViewport = cva(\n  'overflow-y-auto max-h-[inherit]'\n)\n\nconst selectItem = cva(\n  'relative flex cursor-pointer select-none items-center outline-none focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n  {\n    variants: {\n      theme: {\n        light: 'text-gray-900 focus:bg-gray-100',\n        dark: 'text-gray-100 focus:bg-gray-700'\n      },\n      size: {\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      }\n    }\n  }\n)\n\nconst selectIcon = cva(\n  'pointer-events-none flex items-center justify-center transition-transform',\n  {\n    variants: {\n      size: {\n        sm: 'w-3 h-3',\n        md: 'w-4 h-4',\n        xl: 'w-4 h-4'\n      }\n    }\n  }\n)\n\ntype SelectVariants = VariantProps<typeof selectTrigger>\n\nexport interface SelectOption {\n  value: string\n  label: string\n  disabled?: boolean\n  content?: React.ReactNode\n}\n\nexport interface SelectProps extends Omit<SelectVariants, 'theme' | 'disabled'> {\n  className?: string\n  error?: boolean\n  success?: boolean\n  border?: boolean\n  options?: SelectOption[]\n  showArrow?: boolean\n  value?: string\n  defaultValue?: string\n  onChange?: (value: string) => void\n  placeholder?: string\n  disabled?: boolean\n  name?: string\n}\n\n  // Arrow icon\nconst ChevronDownIcon: React.FC<{ className?: string }> = ({ className }) => (\n  <svg\n    width=\"15\"\n    height=\"15\"\n    viewBox=\"0 0 15 15\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className={className}\n  >\n    <path\n      d=\"m4.93179 5.43179c0.20081-0.20081 0.52632-0.20081 0.72713 0l2.34108 2.34108 2.34108-2.34108c0.20081-0.20081 0.52632-0.20081 0.72713 0s0.20081 0.52632 0 0.72713l-2.70455 2.70455c-0.20081 0.20081-0.52632 0.20081-0.72713 0l-2.70455-2.70455c-0.20081-0.20081-0.20081-0.52632 0-0.72713z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n)\n\n/**\n * A versatile select component built on Radix UI that adapts to light/dark theme,\n * supports various color schemes, sizes, variants, states, and HTML content in options.\n *\n * @example\n * <Select\n *   options={[\n *     {value: 'id1', label: 'Option 1'}, \n *     {value: 'id2', label: 'Option 2', content: <div><strong>Option 2</strong><br/>Description</div>}\n *   ]}\n *   colorScheme=\"default\"\n *   size=\"xl\"\n *   border={true}\n * />\n */\nexport const Select: React.FC<SelectProps> = ({\n  className = '',\n  colorScheme,\n  size,\n  error = false,\n  success = false,\n  border = true,\n  disabled = false,\n  options = [],\n  showArrow = true,\n  value,\n  defaultValue,\n  onChange,\n  placeholder = 'Select an option...',\n  name,\n  ...props\n}) => {\n  const { theme } = useTheme()\n\n  // Determine color scheme based on state\n  let finalColorScheme = colorScheme\n  if (error) finalColorScheme = 'error'\n  else if (success) finalColorScheme = 'success'\n\n  const triggerClasses = selectTrigger({\n    theme,\n    colorScheme: finalColorScheme,\n    size,\n    border,\n    disabled\n  }) + ' ' + className\n\n  const contentClasses = selectContent({ theme })\n  const viewportClasses = selectViewport({})\n  const itemClasses = selectItem({ theme, size })\n  const iconClasses = selectIcon({ size })\n\n  return (\n    <RadixSelect.Root\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={onChange}\n      disabled={disabled}\n      name={name}\n    >\n      <RadixSelect.Trigger className={triggerClasses}>\n        <div className='w-full flex-1 text-left'>\n          <RadixSelect.Value placeholder={placeholder} />\n        </div>\n        {showArrow && (\n          <RadixSelect.Icon asChild>\n            <ChevronDownIcon className={iconClasses} />\n          </RadixSelect.Icon>\n        )}\n      </RadixSelect.Trigger>\n\n      <RadixSelect.Portal>\n        <RadixSelect.Content className={contentClasses} position='popper' sideOffset={5}>\n          <RadixSelect.Viewport className={viewportClasses}>\n            {options.map((option) => (\n              <RadixSelect.Item\n                key={option.value}\n                value={option.value}\n                className={itemClasses}\n                disabled={option.disabled}\n              >\n                <div className='w-full flex-1 text-left'>\n                  <RadixSelect.ItemText className='w-full'>\n                    {option.content || option.label}\n                  </RadixSelect.ItemText>\n                </div>\n              </RadixSelect.Item>\n              ))}\n          </RadixSelect.Viewport>\n        </RadixSelect.Content>\n      </RadixSelect.Portal>\n    </RadixSelect.Root>\n  )\n}\n\nexport default Select\n"],"names":["selectTrigger","cva","variants","theme","light","dark","colorScheme","default","brand","error","success","size","sm","md","xl","border","true","false","disabled","compoundVariants","class","defaultVariants","selectContent","selectViewport","selectItem","selectIcon","ChevronDownIcon","className","_jsx","width","height","viewBox","fill","xmlns","d","fillRule","clipRule","Select","_a","options","showArrow","value","defaultValue","onChange","placeholder","name","props","__rest","useTheme","finalColorScheme","triggerClasses","contentClasses","viewportClasses","itemClasses","iconClasses","_jsxs","RadixSelect","Root","onValueChange","children","Trigger","Value","Icon","asChild","Portal","Content","position","sideOffset","Viewport","map","option","Item","ItemText","content","label"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/select/index.tsx"],"sourcesContent":["import React from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport * as RadixSelect from '@radix-ui/react-select'\nimport { useColorScheme } from '../../hooks/useColorScheme'\n\nconst selectTrigger = cva(\n  'w-full transition-all font-inter appearance-none cursor-pointer relative text-[0.875rem] leading-[1.0625rem] focus:ring-2 inline-flex items-center justify-between',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#0C1C33] bg-white',\n        dark: 'text-white bg-gray-800'\n      },\n      colorScheme: {\n        default: 'focus:ring-blue-500/20',\n        brand: 'focus:ring-dash-brand/20',\n        error: 'focus:ring-red-500/20',\n        success: 'focus:ring-green-500/20'\n      },\n      size: {\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      },\n      border: {\n        true: 'outline outline-1 outline-offset-[-1px]',\n        false: ''\n      },\n      disabled: {\n        false: '',\n        true: 'opacity-60 cursor-not-allowed'\n      }\n    },\n    compoundVariants: [\n      // Outline colors by colorScheme - only when border is true\n      {\n        colorScheme: 'default',\n        border: true,\n        class: 'outline-[rgba(12,28,51,0.35)] focus:outline-[rgba(12,28,51,0.6)]'\n      },\n      {\n        colorScheme: 'brand',\n        border: true,\n        class: 'outline-dash-brand/30 focus:outline-dash-brand'\n      },\n      {\n        colorScheme: 'error',\n        border: true,\n        class: 'outline-red-500 focus:outline-red-500'\n      },\n      {\n        colorScheme: 'success',\n        border: true,\n        class: 'outline-green-500 focus:outline-green-500'\n      }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      colorScheme: 'default',\n      size: 'xl',\n      border: true,\n      disabled: false\n    }\n  }\n)\n\nconst selectContent = cva(\n  'overflow-hidden z-50 rounded-md shadow-lg min-w-[var(--radix-select-trigger-width)] w-full max-h-[var(--radix-select-content-available-height)]',\n  {\n    variants: {\n      theme: {\n        light: 'bg-white border border-gray-200',\n        dark: 'bg-gray-800 border border-gray-700'\n      }\n    }\n  }\n)\n\nconst selectViewport = cva(\n  'overflow-y-auto max-h-[inherit]'\n)\n\nconst selectItem = cva(\n  'relative flex cursor-pointer select-none items-center outline-none focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n  {\n    variants: {\n      theme: {\n        light: 'text-gray-900 focus:bg-gray-100',\n        dark: 'text-gray-100 focus:bg-gray-700'\n      },\n      size: {\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      }\n    }\n  }\n)\n\nconst selectIcon = cva(\n  'pointer-events-none flex items-center justify-center transition-transform',\n  {\n    variants: {\n      size: {\n        sm: 'w-3 h-3',\n        md: 'w-4 h-4',\n        xl: 'w-4 h-4'\n      }\n    }\n  }\n)\n\ntype SelectVariants = VariantProps<typeof selectTrigger>\n\nexport interface SelectOption {\n  value: string\n  label: string\n  disabled?: boolean\n  content?: React.ReactNode\n}\n\nexport interface SelectProps extends Omit<SelectVariants, 'theme' | 'disabled'> {\n  className?: string\n  error?: boolean\n  success?: boolean\n  border?: boolean\n  options?: SelectOption[]\n  showArrow?: boolean\n  value?: string\n  defaultValue?: string\n  onChange?: (value: string) => void\n  placeholder?: string\n  disabled?: boolean\n  name?: string\n  /** Color scheme override for light theme */\n  colorSchemeLight?: 'default' | 'brand' | 'error' | 'success'\n  /** Color scheme override for dark theme */\n  colorSchemeDark?: 'default' | 'brand' | 'error' | 'success'\n}\n\n  // Arrow icon\nconst ChevronDownIcon: React.FC<{ className?: string }> = ({ className }) => (\n  <svg\n    width=\"15\"\n    height=\"15\"\n    viewBox=\"0 0 15 15\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className={className}\n  >\n    <path\n      d=\"m4.93179 5.43179c0.20081-0.20081 0.52632-0.20081 0.72713 0l2.34108 2.34108 2.34108-2.34108c0.20081-0.20081 0.52632-0.20081 0.72713 0s0.20081 0.52632 0 0.72713l-2.70455 2.70455c-0.20081 0.20081-0.52632 0.20081-0.72713 0l-2.70455-2.70455c-0.20081-0.20081-0.20081-0.52632 0-0.72713z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n)\n\n/**\n * A versatile select component built on Radix UI that adapts to light/dark theme,\n * supports various color schemes, sizes, variants, states, and HTML content in options.\n *\n * @example\n * <Select\n *   options={[\n *     {value: 'id1', label: 'Option 1'}, \n *     {value: 'id2', label: 'Option 2', content: <div><strong>Option 2</strong><br/>Description</div>}\n *   ]}\n *   colorScheme=\"default\"\n *   size=\"xl\"\n *   border={true}\n * />\n */\nexport const Select: React.FC<SelectProps> = ({\n  className = '',\n  colorScheme,\n  colorSchemeLight,\n  colorSchemeDark,\n  size,\n  error = false,\n  success = false,\n  border = true,\n  disabled = false,\n  options = [],\n  showArrow = true,\n  value,\n  defaultValue,\n  onChange,\n  placeholder = 'Select an option...',\n  name,\n  ...props\n}) => {\n  const { theme } = useTheme()\n\n  const effectiveColorScheme = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark) ?? 'default'\n\n  // Determine color scheme based on state\n  let finalColorScheme: typeof effectiveColorScheme = effectiveColorScheme\n  if (error) finalColorScheme = 'error'\n  else if (success) finalColorScheme = 'success'\n\n  const triggerClasses = selectTrigger({\n    theme,\n    colorScheme: finalColorScheme,\n    size,\n    border,\n    disabled\n  }) + ' ' + className\n\n  const contentClasses = selectContent({ theme })\n  const viewportClasses = selectViewport({})\n  const itemClasses = selectItem({ theme, size })\n  const iconClasses = selectIcon({ size })\n\n  return (\n    <RadixSelect.Root\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={onChange}\n      disabled={disabled}\n      name={name}\n    >\n      <RadixSelect.Trigger className={triggerClasses}>\n        <div className='w-full flex-1 text-left'>\n          <RadixSelect.Value placeholder={placeholder} />\n        </div>\n        {showArrow && (\n          <RadixSelect.Icon asChild>\n            <ChevronDownIcon className={iconClasses} />\n          </RadixSelect.Icon>\n        )}\n      </RadixSelect.Trigger>\n\n      <RadixSelect.Portal>\n        <RadixSelect.Content className={contentClasses} position='popper' sideOffset={5}>\n          <RadixSelect.Viewport className={viewportClasses}>\n            {options.map((option) => (\n              <RadixSelect.Item\n                key={option.value}\n                value={option.value}\n                className={itemClasses}\n                disabled={option.disabled}\n              >\n                <div className='w-full flex-1 text-left'>\n                  <RadixSelect.ItemText className='w-full'>\n                    {option.content || option.label}\n                  </RadixSelect.ItemText>\n                </div>\n              </RadixSelect.Item>\n              ))}\n          </RadixSelect.Viewport>\n        </RadixSelect.Content>\n      </RadixSelect.Portal>\n    </RadixSelect.Root>\n  )\n}\n\nexport default Select\n"],"names":["selectTrigger","cva","variants","theme","light","dark","colorScheme","default","brand","error","success","size","sm","md","xl","border","true","false","disabled","compoundVariants","class","defaultVariants","selectContent","selectViewport","selectItem","selectIcon","ChevronDownIcon","className","_jsx","width","height","viewBox","fill","xmlns","d","fillRule","clipRule","Select","_a","colorSchemeLight","colorSchemeDark","options","showArrow","value","defaultValue","onChange","placeholder","name","props","__rest","useTheme","effectiveColorScheme","_b","useColorScheme","finalColorScheme","triggerClasses","contentClasses","viewportClasses","itemClasses","iconClasses","_jsxs","RadixSelect","Root","onValueChange","children","Trigger","Value","Icon","asChild","Portal","Content","position","sideOffset","Viewport","map","option","Item","ItemText","content","label"],"mappings":"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"}

package/dist/react/components/text/index.cjs.js

@@ -8,6 +8,7 @@ var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
 var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
+var useColorScheme = require('../../hooks/useColorScheme.cjs.js');
 
 const textStyles = classVarianceAuthority.cva('', {
   variants: {
@@ -99,13 +100,18 @@ const Text = _a => {
   var {
       as,
       className = '',
-      children
+      children,
+      color,
+      colorLight,
+      colorDark
     } = _a,
-    variantProps = tslib.__rest(_a, ["as", "className", "children"]);
+    variantProps = tslib.__rest(_a, ["as", "className", "children", "color", "colorLight", "colorDark"]);
   const {
     theme
   } = ThemeContext.useTheme();
+  const effectiveColor = useColorScheme.useColorScheme(color, colorLight, colorDark);
   const classes = textStyles(Object.assign(Object.assign({}, variantProps), {
+    color: effectiveColor,
     theme
   })) + (className !== '' ? ` ${className}` : '');
   const Component = as !== null && as !== void 0 ? as : 'span';

package/dist/react/components/text/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/text/index.tsx"],"sourcesContent":["import React from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\n\nconst textStyles = cva(\n  '', {\n    variants: {\n      reset: {\n        false: 'inline whitespace-normal',\n        true: ''\n      },\n      theme: {\n        light: 'text-gray-900',\n        dark: 'text-gray-100'\n      },\n      color: {\n        default: '',\n        blue: '!text-dash-brand',\n        'blue-dark': '!text-dash-brand-dark dark:text-dash-brand-dim',\n        red: 'text-red-700'\n      },\n      size: {\n        xs: 'text-[0.625rem]',\n        sm: 'text-sm',\n        md: 'text-base',\n        lg: 'text-lg',\n        xl: 'text-xl'\n      },\n      weight: {\n        normal: 'font-normal',\n        medium: 'font-medium',\n        bold: 'font-bold'\n      },\n      italic: {\n        false: '',\n        true: 'italic'\n      },\n      underline: {\n        false: '',\n        true: 'underline'\n      },\n      lineThrough: {\n        false: '',\n        true: 'line-through'\n      },\n      transform: {\n        none: '',\n        uppercase: 'uppercase',\n        capitalize: 'capitalize'\n      },\n      opacity: {\n        0: 'opacity-0',\n        10: 'opacity-10',\n        20: 'opacity-20',\n        30: 'opacity-30',\n        40: 'opacity-40',\n        50: 'opacity-50',\n        60: 'opacity-60',\n        70: 'opacity-70',\n        80: 'opacity-80',\n        90: 'opacity-90',\n        100: 'opacity-100'\n      },\n      monospace: {\n        false: '',\n        true: 'font-grotesque'\n      },\n      dim: {\n        false: '',\n        true: '!opacity-60'\n      }\n    },\n    defaultVariants: {\n      reset: false,\n      theme: 'light',\n      color: 'default',\n      size: 'md',\n      weight: 'normal',\n      italic: false,\n      underline: false,\n      lineThrough: false,\n      transform: 'none',\n      opacity: 100,\n      monospace: false,\n      dim: false\n    }\n  }\n)\n\ntype TextVariants = Omit<VariantProps<typeof textStyles>, 'theme'>\n\nexport interface TextProps extends TextVariants {\n  /** Render as this element or component (e.g. 'h1' or Link). */\n  as?: React.ElementType\n  /** Additional CSS classes. */\n  className?: string\n  /** Text children. */\n  children?: React.ReactNode\n}\n\n/**\n * A versatile text component with size, color, weight, decoration,\n * transform, opacity, monospace, dimming, and theme-aware defaults.\n */\nexport const Text: React.FC<TextProps> = ({ as, className = '', children, ...variantProps }) => {\n  const { theme } = useTheme()\n\n  const classes = textStyles({\n    ...variantProps,\n    theme\n  }) + (className !== '' ? ` ${className}` : '')\n\n  const Component = as ?? 'span'\n  return <Component className={classes}>{children}</Component>\n}\n\nexport default Text\n"],"names":["textStyles","cva","variants","reset","false","true","theme","light","dark","color","default","blue","red","size","xs","sm","md","lg","xl","weight","normal","medium","bold","italic","underline","lineThrough","transform","none","uppercase","capitalize","opacity","monospace","dim","defaultVariants","Text","_a","as","className","children","variantProps","__rest","useTheme","classes","Object","assign","Component","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/text/index.tsx"],"sourcesContent":["import React from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { useColorScheme } from '../../hooks/useColorScheme'\n\nconst textStyles = cva(\n  '', {\n    variants: {\n      reset: {\n        false: 'inline whitespace-normal',\n        true: ''\n      },\n      theme: {\n        light: 'text-gray-900',\n        dark: 'text-gray-100'\n      },\n      color: {\n        default: '',\n        blue: '!text-dash-brand',\n        'blue-dark': '!text-dash-brand-dark dark:text-dash-brand-dim',\n        red: 'text-red-700'\n      },\n      size: {\n        xs: 'text-[0.625rem]',\n        sm: 'text-sm',\n        md: 'text-base',\n        lg: 'text-lg',\n        xl: 'text-xl'\n      },\n      weight: {\n        normal: 'font-normal',\n        medium: 'font-medium',\n        bold: 'font-bold'\n      },\n      italic: {\n        false: '',\n        true: 'italic'\n      },\n      underline: {\n        false: '',\n        true: 'underline'\n      },\n      lineThrough: {\n        false: '',\n        true: 'line-through'\n      },\n      transform: {\n        none: '',\n        uppercase: 'uppercase',\n        capitalize: 'capitalize'\n      },\n      opacity: {\n        0: 'opacity-0',\n        10: 'opacity-10',\n        20: 'opacity-20',\n        30: 'opacity-30',\n        40: 'opacity-40',\n        50: 'opacity-50',\n        60: 'opacity-60',\n        70: 'opacity-70',\n        80: 'opacity-80',\n        90: 'opacity-90',\n        100: 'opacity-100'\n      },\n      monospace: {\n        false: '',\n        true: 'font-grotesque'\n      },\n      dim: {\n        false: '',\n        true: '!opacity-60'\n      }\n    },\n    defaultVariants: {\n      reset: false,\n      theme: 'light',\n      color: 'default',\n      size: 'md',\n      weight: 'normal',\n      italic: false,\n      underline: false,\n      lineThrough: false,\n      transform: 'none',\n      opacity: 100,\n      monospace: false,\n      dim: false\n    }\n  }\n)\n\ntype TextVariants = Omit<VariantProps<typeof textStyles>, 'theme'>\n\ntype TextColor = 'default' | 'blue' | 'blue-dark' | 'red'\n\nexport interface TextProps extends TextVariants {\n  /** Render as this element or component (e.g. 'h1' or Link). */\n  as?: React.ElementType\n  /** Additional CSS classes. */\n  className?: string\n  /** Text children. */\n  children?: React.ReactNode\n  /** Color override for light theme. */\n  colorLight?: TextColor\n  /** Color override for dark theme. */\n  colorDark?: TextColor\n}\n\n/**\n * A versatile text component with size, color, weight, decoration,\n * transform, opacity, monospace, dimming, and theme-aware defaults.\n */\nexport const Text: React.FC<TextProps> = ({ as, className = '', children, color, colorLight, colorDark, ...variantProps }) => {\n  const { theme } = useTheme()\n  const effectiveColor = useColorScheme(color, colorLight, colorDark)\n\n  const classes = textStyles({\n    ...variantProps,\n    color: effectiveColor,\n    theme\n  }) + (className !== '' ? ` ${className}` : '')\n\n  const Component = as ?? 'span'\n  return <Component className={classes}>{children}</Component>\n}\n\nexport default Text\n"],"names":["textStyles","cva","variants","reset","false","true","theme","light","dark","color","default","blue","red","size","xs","sm","md","lg","xl","weight","normal","medium","bold","italic","underline","lineThrough","transform","none","uppercase","capitalize","opacity","monospace","dim","defaultVariants","Text","_a","as","className","children","colorLight","colorDark","variantProps","__rest","useTheme","effectiveColor","useColorScheme","classes","Object","assign","Component","_jsx"],"mappings":"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"}

package/dist/react/components/text/index.d.ts

@@ -15,6 +15,7 @@ declare const textStyles: (props?: ({
     dim?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type TextVariants = Omit<VariantProps<typeof textStyles>, 'theme'>;
+type TextColor = 'default' | 'blue' | 'blue-dark' | 'red';
 export interface TextProps extends TextVariants {
     /** Render as this element or component (e.g. 'h1' or Link). */
     as?: React.ElementType;
@@ -22,6 +23,10 @@ export interface TextProps extends TextVariants {
     className?: string;
     /** Text children. */
     children?: React.ReactNode;
+    /** Color override for light theme. */
+    colorLight?: TextColor;
+    /** Color override for dark theme. */
+    colorDark?: TextColor;
 }
 /**
  * A versatile text component with size, color, weight, decoration,

package/dist/react/components/text/index.esm.js

@@ -4,6 +4,7 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import { useTheme } from '../../contexts/ThemeContext.esm.js';
+import { useColorScheme } from '../../hooks/useColorScheme.esm.js';
 
 const textStyles = cva('', {
   variants: {
@@ -95,13 +96,18 @@ const Text = _a => {
   var {
       as,
       className = '',
-      children
+      children,
+      color,
+      colorLight,
+      colorDark
     } = _a,
-    variantProps = __rest(_a, ["as", "className", "children"]);
+    variantProps = __rest(_a, ["as", "className", "children", "color", "colorLight", "colorDark"]);
   const {
     theme
   } = useTheme();
+  const effectiveColor = useColorScheme(color, colorLight, colorDark);
   const classes = textStyles(Object.assign(Object.assign({}, variantProps), {
+    color: effectiveColor,
     theme
   })) + (className !== '' ? ` ${className}` : '');
   const Component = as !== null && as !== void 0 ? as : 'span';