dash-ui-kit 2.0.0-dev → 2.1.0-dev

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":";;;;;;;;;;;;AAKA,MAAMA,UAAU,GAAGC,0BAAG,CACpB,EAAE,EAAE;AACFC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,0BAA0B;AACjCC,MAAAA,IAAI,EAAE;KACP;AACDC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,eAAe;AACtBC,MAAAA,IAAI,EAAE;KACP;AACDC,IAAAA,KAAK,EAAE;AACLC,MAAAA,OAAO,EAAE,EAAE;AACXC,MAAAA,IAAI,EAAE,kBAAkB;AACxB,MAAA,WAAW,EAAE,gDAAgD;AAC7DC,MAAAA,GAAG,EAAE;KACN;AACDC,IAAAA,IAAI,EAAE;AACJC,MAAAA,EAAE,EAAE,iBAAiB;AACrBC,MAAAA,EAAE,EAAE,SAAS;AACbC,MAAAA,EAAE,EAAE,WAAW;AACfC,MAAAA,EAAE,EAAE,SAAS;AACbC,MAAAA,EAAE,EAAE;KACL;AACDC,IAAAA,MAAM,EAAE;AACNC,MAAAA,MAAM,EAAE,aAAa;AACrBC,MAAAA,MAAM,EAAE,aAAa;AACrBC,MAAAA,IAAI,EAAE;KACP;AACDC,IAAAA,MAAM,EAAE;AACNnB,MAAAA,KAAK,EAAE,EAAE;AACTC,MAAAA,IAAI,EAAE;KACP;AACDmB,IAAAA,SAAS,EAAE;AACTpB,MAAAA,KAAK,EAAE,EAAE;AACTC,MAAAA,IAAI,EAAE;KACP;AACDoB,IAAAA,WAAW,EAAE;AACXrB,MAAAA,KAAK,EAAE,EAAE;AACTC,MAAAA,IAAI,EAAE;KACP;AACDqB,IAAAA,SAAS,EAAE;AACTC,MAAAA,IAAI,EAAE,EAAE;AACRC,MAAAA,SAAS,EAAE,WAAW;AACtBC,MAAAA,UAAU,EAAE;KACb;AACDC,IAAAA,OAAO,EAAE;AACP,MAAA,CAAC,EAAE,WAAW;AACd,MAAA,EAAE,EAAE,YAAY;AAChB,MAAA,EAAE,EAAE,YAAY;AAChB,MAAA,EAAE,EAAE,YAAY;AAChB,MAAA,EAAE,EAAE,YAAY;AAChB,MAAA,EAAE,EAAE,YAAY;AAChB,MAAA,EAAE,EAAE,YAAY;AAChB,MAAA,EAAE,EAAE,YAAY;AAChB,MAAA,EAAE,EAAE,YAAY;AAChB,MAAA,EAAE,EAAE,YAAY;AAChB,MAAA,GAAG,EAAE;KACN;AACDC,IAAAA,SAAS,EAAE;AACT3B,MAAAA,KAAK,EAAE,EAAE;AACTC,MAAAA,IAAI,EAAE;KACP;AACD2B,IAAAA,GAAG,EAAE;AACH5B,MAAAA,KAAK,EAAE,EAAE;AACTC,MAAAA,IAAI,EAAE;AACP;GACF;AACD4B,EAAAA,eAAe,EAAE;AACf9B,IAAAA,KAAK,EAAE,KAAK;AACZG,IAAAA,KAAK,EAAE,OAAO;AACdG,IAAAA,KAAK,EAAE,SAAS;AAChBI,IAAAA,IAAI,EAAE,IAAI;AACVM,IAAAA,MAAM,EAAE,QAAQ;AAChBI,IAAAA,MAAM,EAAE,KAAK;AACbC,IAAAA,SAAS,EAAE,KAAK;AAChBC,IAAAA,WAAW,EAAE,KAAK;AAClBC,IAAAA,SAAS,EAAE,MAAM;AACjBI,IAAAA,OAAO,EAAE,GAAG;AACZC,IAAAA,SAAS,EAAE,KAAK;AAChBC,IAAAA,GAAG,EAAE;AACN;AACF,CAAA,CACF;AAmBD;;;AAGG;AACUE,MAAAA,IAAI,GAAyBC,EAA+E,IAAI;EAAnF,IAAA;MAAEC,EAAE;AAAEC,MAAAA,SAAS,GAAG,EAAE;MAAEC,QAAQ;MAAE7B,KAAK;MAAE8B,UAAU;AAAEC,MAAAA;AAAS,KAAA,GAAAL,EAAmB;AAAdM,IAAAA,YAAY,GAAAC,YAAA,CAAAP,EAAA,EAA7E,mEAA+E,CAAF;EACrH,MAAM;AAAE7B,IAAAA;GAAO,GAAGqC,qBAAQ,EAAE;EAC5B,MAAMC,cAAc,GAAGC,6BAAc,CAACpC,KAAK,EAAE8B,UAAU,EAAEC,SAAS,CAAC;AAEnE,EAAA,MAAMM,OAAO,GAAG9C,UAAU,CAAA+C,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAC,MAAA,CAAA,EAAA,EACrBP,YAAY,CAAA,EAAA;AACfhC,IAAAA,KAAK,EAAEmC,cAAc;AACrBtC,IAAAA;AAAK,GAAA,CAAA,CACL,IAAI+B,SAAS,KAAK,EAAE,GAAG,CAAA,CAAA,EAAIA,SAAS,CAAA,CAAE,GAAG,EAAE,CAAC;AAE9C,EAAA,MAAMY,SAAS,GAAGb,EAAE,KAAA,IAAA,IAAFA,EAAE,KAAF,MAAA,GAAAA,EAAE,GAAI,MAAM;EAC9B,OAAOc,cAAA,CAACD,SAAS,EAAC;AAAAZ,IAAAA,SAAS,EAAES,OAAO;AAAAR,IAAAA,QAAA,EAAGA;AAAQ,GAAA,CAAa;AAC9D;;;;;"}

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';

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.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.esm.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/textarea/index.cjs.js

@@ -10,6 +10,7 @@ var React = require('react');
 var index = require('../button/index.cjs.js');
 var classVarianceAuthority = require('class-variance-authority');
 var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
+var useColorScheme = require('../../hooks/useColorScheme.cjs.js');
 
 const textareaContainer = classVarianceAuthority.cva('relative flex items-baseline transition-all w-full', {
   variants: {
@@ -147,7 +148,7 @@ const textarea = classVarianceAuthority.cva('w-full bg-transparent outline-none
  * />
  */
 const Textarea = _a => {
-  var _b, _c;
+  var _b, _c, _d;
   var {
       className = '',
       onChange,
@@ -156,18 +157,21 @@ const Textarea = _a => {
       rows = 3,
       size = 'xl',
       variant = 'outlined',
-      colorScheme = 'default',
+      colorScheme,
+      colorSchemeLight,
+      colorSchemeDark,
       font = 'main',
       weight = 'light',
       error = false,
       success = false,
       disabled = false
     } = _a,
-    props = tslib.__rest(_a, ["className", "onChange", "showPasteButton", "validator", "rows", "size", "variant", "colorScheme", "font", "weight", "error", "success", "disabled"]);
+    props = tslib.__rest(_a, ["className", "onChange", "showPasteButton", "validator", "rows", "size", "variant", "colorScheme", "colorSchemeLight", "colorSchemeDark", "font", "weight", "error", "success", "disabled"]);
   const {
     theme
   } = ThemeContext.useTheme();
-  const [value, setValue] = React.useState((_c = (_b = props.value) !== null && _b !== void 0 ? _b : props.defaultValue) !== null && _c !== void 0 ? _c : '');
+  const effectiveColorScheme = (_b = useColorScheme.useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark)) !== null && _b !== void 0 ? _b : 'default';
+  const [value, setValue] = React.useState((_d = (_c = props.value) !== null && _c !== void 0 ? _c : props.defaultValue) !== null && _d !== void 0 ? _d : '');
   const [isValid, setIsValid] = React.useState(null);
   const textareaRef = React.useRef(null);
   const handleChange = e => {
@@ -207,7 +211,7 @@ const Textarea = _a => {
   };
   const hasValue = value !== '';
   // Determine color scheme based on state
-  let finalColorScheme = colorScheme;
+  let finalColorScheme = effectiveColorScheme;
   let finalIsValid = isValid;
   if (error) {
     finalColorScheme = 'error';

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/textarea/index.tsx"],"sourcesContent":["import React, { useState, useRef, TextareaHTMLAttributes } from 'react'\nimport { Button } from '../button'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\n\nconst textareaContainer = cva(\n  'relative flex items-baseline transition-all w-full',\n  {\n    variants: {\n      theme: {\n        light: 'bg-white',\n        dark: 'bg-gray-800'\n      },\n      hasValue: {\n        true: '',\n        false: ''\n      },\n      colorScheme: {\n        default: 'focus-within:ring-blue-500/20',\n        brand: 'focus-within:ring-dash-brand/20',\n        error: 'focus-within:ring-red-500/20',\n        success: 'focus-within:ring-green-500/20'\n      },\n      size: {\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      },\n      variant: {\n        outlined: 'outline outline-1 outline-offset-[-1px]'\n      },\n      isValid: {\n        true: '',\n        false: '',\n        null: ''\n      },\n      disabled: {\n        false: '',\n        true: 'opacity-60 cursor-not-allowed'\n      }\n    },\n    compoundVariants: [\n      // Outlined variant colors\n      {\n        variant: 'outlined',\n        colorScheme: 'default',\n        class: 'outline-[rgba(17,17,17,0.32)] focus-within:outline-[rgba(17,17,17,0.6)]'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'brand',\n        class: 'outline-dash-brand/30 focus-within:outline-dash-brand'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'error',\n        isValid: false,\n        class: 'outline-red-500 focus-within:outline-red-500'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'success',\n        isValid: true,\n        class: 'outline-green-500 focus-within:outline-green-500'\n      },\n      // Outlined variant with focus ring\n      {\n        variant: 'outlined',\n        class: 'focus-within:ring-2'\n      },\n      // Add extra padding for PASTE button when no value\n      { hasValue: false, size: 'sm', class: 'pr-[70px]' },\n      { hasValue: false, size: 'md', class: 'pr-[70px]' },\n      { hasValue: false, size: 'xl', class: 'pr-[70px]' }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      hasValue: false,\n      colorScheme: 'default',\n      size: 'xl',\n      variant: 'outlined',\n      isValid: null,\n      disabled: false\n    }\n  }\n)\n\nconst textarea = cva(\n  'w-full bg-transparent outline-none resize-none transition-all text-[0.875rem] leading-[1.0625rem] placeholder:text-opacity-60',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#111111] placeholder:text-[rgba(17,17,17,0.6)]',\n        dark: 'text-white placeholder:text-gray-400'\n      },\n      font: {\n        main: 'font-dash-main',\n        grotesque: 'font-dash-grotesque'\n      },\n      weight: {\n        light: 'font-light',\n        normal: 'font-normal',\n        medium: 'font-medium',\n        semibold: 'font-semibold',\n        bold: 'font-bold'\n      },\n      size: {\n        sm: '',\n        md: '',\n        xl: ''\n      },\n      disabled: {\n        false: '',\n        true: 'cursor-not-allowed'\n      }\n    },\n    defaultVariants: {\n      theme: 'light',\n      font: 'main',\n      weight: 'light',\n      size: 'xl',\n      disabled: false\n    }\n  }\n)\n\ntype TextareaVariants = VariantProps<typeof textareaContainer>\n\nexport interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'size'>, Omit<TextareaVariants, 'theme' | 'hasValue' | 'isValid' | 'disabled'> {\n  className?: string\n  onChange?: (value: string) => void\n  showPasteButton?: boolean\n  validator?: ((value: string) => boolean) | boolean\n  rows?: number\n  font?: 'main' | 'grotesque'\n  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold'\n  error?: boolean\n  success?: boolean\n}\n\n/**\n * A versatile textarea component that adapts to light/dark theme,\n * supports various color schemes, sizes, variants, and states.\n * Includes optional paste functionality and validation.\n *\n * @example\n * <Textarea\n *   placeholder='Enter your message'\n *   colorScheme='brand'\n *   size='xl'\n *   font='grotesque'\n *   weight='medium'\n *   rows={4}\n *   showPasteButton={true}\n * />\n */\nexport const Textarea: React.FC<TextareaProps> = ({\n  className = '',\n  onChange,\n  showPasteButton = true,\n  validator = null,\n  rows = 3,\n  size = 'xl',\n  variant = 'outlined',\n  colorScheme = 'default',\n  font = 'main',\n  weight = 'light',\n  error = false,\n  success = false,\n  disabled = false,\n  ...props\n}) => {\n  const { theme } = useTheme()\n  const [value, setValue] = useState<string>((props.value as string) ?? (props.defaultValue as string) ?? '')\n  const [isValid, setIsValid] = useState<boolean | null>(null)\n  const textareaRef = useRef<HTMLTextAreaElement>(null)\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    const newValue = e.target.value\n    setValue(newValue)\n\n    if (typeof onChange === 'function') {\n      onChange(newValue)\n    }\n\n    validateInput(newValue)\n  }\n\n  const validateInput = (input: string): void => {\n    if (validator === null) {\n      setIsValid(null)\n      return\n    }\n\n    if (typeof validator === 'function') {\n      setIsValid(validator(input))\n    } else {\n      setIsValid(Boolean(validator))\n    }\n  }\n\n  const handlePaste = (): void => {\n    navigator.clipboard.readText()\n      .then((text) => {\n        if (text !== '') {\n          setValue(text)\n          if (textareaRef.current != null) {\n            textareaRef.current.value = text\n          }\n          if (onChange != null) {\n            onChange(text)\n          }\n          validateInput(text)\n        }\n      })\n      .catch((err) => {\n        console.error('Failed to read clipboard contents: ', err)\n      })\n  }\n\n  const hasValue = value !== ''\n\n  // Determine color scheme based on state\n  let finalColorScheme = colorScheme\n  let finalIsValid: boolean | null = isValid\n  \n  if (error) {\n    finalColorScheme = 'error'\n    finalIsValid = false\n  } else if (success) {\n    finalColorScheme = 'success'\n    finalIsValid = true\n  }\n\n  const containerClasses = textareaContainer({\n    theme,\n    hasValue,\n    colorScheme: finalColorScheme,\n    size,\n    variant,\n    isValid: finalIsValid,\n    disabled\n  })\n\n  const textareaClasses = textarea({\n    theme,\n    font,\n    weight,\n    size,\n    disabled\n  }) + ' ' + className\n\n  return (\n    <div className={containerClasses}>\n      <textarea\n        ref={textareaRef}\n        value={value}\n        onChange={handleChange}\n        rows={rows}\n        className={textareaClasses}\n        disabled={disabled}\n        {...props}\n      />\n\n      {showPasteButton && !hasValue && !disabled && (\n        <Button \n          colorScheme='brand' \n          size='sm' \n          onClick={handlePaste}\n          className={`absolute top-1/2 !-translate-y-1/2 ${\n            size === 'sm' ? 'right-3' : \n            size === 'md' ? 'right-[1.125rem]' : \n            'right-[1.5625rem]'\n          }`}\n        >\n          PASTE\n        </Button>\n      )}\n    </div>\n  )\n}\n\nexport default Textarea "],"names":["textareaContainer","cva","variants","theme","light","dark","hasValue","true","false","colorScheme","default","brand","error","success","size","sm","md","xl","variant","outlined","isValid","null","disabled","compoundVariants","class","defaultVariants","textarea","font","main","grotesque","weight","normal","medium","semibold","bold","Textarea","_a","className","onChange","showPasteButton","validator","rows","props","__rest","useTheme","value","setValue","useState","_c","_b","defaultValue","setIsValid","textareaRef","useRef","handleChange","e","newValue","target","validateInput","input","Boolean","handlePaste","navigator","clipboard","readText","then","text","current","catch","err","console","finalColorScheme","finalIsValid","containerClasses","textareaClasses","_jsxs","children","_jsx","Object","assign","ref","Button","onClick"],"mappings":";;;;;;;;;;;;;AAKA,MAAMA,iBAAiB,GAAGC,0BAAG,CAC3B,oDAAoD,EACpD;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,UAAU;AACjBC,MAAAA,IAAI,EAAE;KACP;AACDC,IAAAA,QAAQ,EAAE;AACRC,MAAAA,IAAI,EAAE,EAAE;AACRC,MAAAA,KAAK,EAAE;KACR;AACDC,IAAAA,WAAW,EAAE;AACXC,MAAAA,OAAO,EAAE,+BAA+B;AACxCC,MAAAA,KAAK,EAAE,iCAAiC;AACxCC,MAAAA,KAAK,EAAE,8BAA8B;AACrCC,MAAAA,OAAO,EAAE;KACV;AACDC,IAAAA,IAAI,EAAE;AACJC,MAAAA,EAAE,EAAE,eAAe;AACnBC,MAAAA,EAAE,EAAE,eAAe;AACnBC,MAAAA,EAAE,EAAE;KACL;AACDC,IAAAA,OAAO,EAAE;AACPC,MAAAA,QAAQ,EAAE;KACX;AACDC,IAAAA,OAAO,EAAE;AACPb,MAAAA,IAAI,EAAE,EAAE;AACRC,MAAAA,KAAK,EAAE,EAAE;AACTa,MAAAA,IAAI,EAAE;KACP;AACDC,IAAAA,QAAQ,EAAE;AACRd,MAAAA,KAAK,EAAE,EAAE;AACTD,MAAAA,IAAI,EAAE;AACP;GACF;AACDgB,EAAAA,gBAAgB,EAAE;AAChB;AACA,EAAA;AACEL,IAAAA,OAAO,EAAE,UAAU;AACnBT,IAAAA,WAAW,EAAE,SAAS;AACtBe,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEN,IAAAA,OAAO,EAAE,UAAU;AACnBT,IAAAA,WAAW,EAAE,OAAO;AACpBe,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEN,IAAAA,OAAO,EAAE,UAAU;AACnBT,IAAAA,WAAW,EAAE,OAAO;AACpBW,IAAAA,OAAO,EAAE,KAAK;AACdI,IAAAA,KAAK,EAAE;AACR,GAAA,EACD;AACEN,IAAAA,OAAO,EAAE,UAAU;AACnBT,IAAAA,WAAW,EAAE,SAAS;AACtBW,IAAAA,OAAO,EAAE,IAAI;AACbI,IAAAA,KAAK,EAAE;GACR;AACD;AACA,EAAA;AACEN,IAAAA,OAAO,EAAE,UAAU;AACnBM,IAAAA,KAAK,EAAE;GACR;AACD;AACA,EAAA;AAAElB,IAAAA,QAAQ,EAAE,KAAK;AAAEQ,IAAAA,IAAI,EAAE,IAAI;AAAEU,IAAAA,KAAK,EAAE;AAAa,GAAA,EACnD;AAAElB,IAAAA,QAAQ,EAAE,KAAK;AAAEQ,IAAAA,IAAI,EAAE,IAAI;AAAEU,IAAAA,KAAK,EAAE;AAAa,GAAA,EACnD;AAAElB,IAAAA,QAAQ,EAAE,KAAK;AAAEQ,IAAAA,IAAI,EAAE,IAAI;AAAEU,IAAAA,KAAK,EAAE;AAAa,GAAA,CACpD;AACDC,EAAAA,eAAe,EAAE;AACftB,IAAAA,KAAK,EAAE,OAAO;AACdG,IAAAA,QAAQ,EAAE,KAAK;AACfG,IAAAA,WAAW,EAAE,SAAS;AACtBK,IAAAA,IAAI,EAAE,IAAI;AACVI,IAAAA,OAAO,EAAE,UAAU;AACnBE,IAAAA,OAAO,EAAE,IAAI;AACbE,IAAAA,QAAQ,EAAE;AACX;AACF,CAAA,CACF;AAED,MAAMI,QAAQ,GAAGzB,0BAAG,CAClB,+HAA+H,EAC/H;AACEC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAE,sDAAsD;AAC7DC,MAAAA,IAAI,EAAE;KACP;AACDsB,IAAAA,IAAI,EAAE;AACJC,MAAAA,IAAI,EAAE,gBAAgB;AACtBC,MAAAA,SAAS,EAAE;KACZ;AACDC,IAAAA,MAAM,EAAE;AACN1B,MAAAA,KAAK,EAAE,YAAY;AACnB2B,MAAAA,MAAM,EAAE,aAAa;AACrBC,MAAAA,MAAM,EAAE,aAAa;AACrBC,MAAAA,QAAQ,EAAE,eAAe;AACzBC,MAAAA,IAAI,EAAE;KACP;AACDpB,IAAAA,IAAI,EAAE;AACJC,MAAAA,EAAE,EAAE,EAAE;AACNC,MAAAA,EAAE,EAAE,EAAE;AACNC,MAAAA,EAAE,EAAE;KACL;AACDK,IAAAA,QAAQ,EAAE;AACRd,MAAAA,KAAK,EAAE,EAAE;AACTD,MAAAA,IAAI,EAAE;AACP;GACF;AACDkB,EAAAA,eAAe,EAAE;AACftB,IAAAA,KAAK,EAAE,OAAO;AACdwB,IAAAA,IAAI,EAAE,MAAM;AACZG,IAAAA,MAAM,EAAE,OAAO;AACfhB,IAAAA,IAAI,EAAE,IAAI;AACVQ,IAAAA,QAAQ,EAAE;AACX;AACF,CAAA,CACF;AAgBD;;;;;;;;;;;;;;;AAeG;AACUa,MAAAA,QAAQ,GAA6BC,EAejD,IAAI;;MAf6C;AAChDC,MAAAA,SAAS,GAAG,EAAE;MACdC,QAAQ;AACRC,MAAAA,eAAe,GAAG,IAAI;AACtBC,MAAAA,SAAS,GAAG,IAAI;AAChBC,MAAAA,IAAI,GAAG,CAAC;AACR3B,MAAAA,IAAI,GAAG,IAAI;AACXI,MAAAA,OAAO,GAAG,UAAU;AACpBT,MAAAA,WAAW,GAAG,SAAS;AACvBkB,MAAAA,IAAI,GAAG,MAAM;AACbG,MAAAA,MAAM,GAAG,OAAO;AAChBlB,MAAAA,KAAK,GAAG,KAAK;AACbC,MAAAA,OAAO,GAAG,KAAK;AACfS,MAAAA,QAAQ,GAAG;AAAK,KAAA,GAAAc,EAEjB;AADIM,IAAAA,KAAK,GAdwCC,YAAA,CAAAP,EAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,MAAA,EAAA,MAAA,EAAA,SAAA,EAAA,aAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,CAejD,CADS;EAER,MAAM;AAAEjC,IAAAA;GAAO,GAAGyC,qBAAQ,EAAE;AAC5B,EAAA,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,cAAQ,CAAS,CAAAC,EAAA,GAAA,CAAAC,EAAA,GAACP,KAAK,CAACG,KAAgB,mCAAKH,KAAK,CAACQ,YAAuB,MAAI,IAAA,IAAAF,EAAA,KAAA,MAAA,GAAAA,EAAA,GAAA,EAAE,CAAC;EAC3G,MAAM,CAAC5B,OAAO,EAAE+B,UAAU,CAAC,GAAGJ,cAAQ,CAAiB,IAAI,CAAC;AAC5D,EAAA,MAAMK,WAAW,GAAGC,YAAM,CAAsB,IAAI,CAAC;EAErD,MAAMC,YAAY,GAAIC,CAAyC,IAAU;AACvE,IAAA,MAAMC,QAAQ,GAAGD,CAAC,CAACE,MAAM,CAACZ,KAAK;IAC/BC,QAAQ,CAACU,QAAQ,CAAC;AAElB,IAAA,IAAI,OAAOlB,QAAQ,KAAK,UAAU,EAAE;MAClCA,QAAQ,CAACkB,QAAQ,CAAC;AACpB;IAEAE,aAAa,CAACF,QAAQ,CAAC;GACxB;EAED,MAAME,aAAa,GAAIC,KAAa,IAAU;IAC5C,IAAInB,SAAS,KAAK,IAAI,EAAE;MACtBW,UAAU,CAAC,IAAI,CAAC;AAChB,MAAA;AACF;AAEA,IAAA,IAAI,OAAOX,SAAS,KAAK,UAAU,EAAE;AACnCW,MAAAA,UAAU,CAACX,SAAS,CAACmB,KAAK,CAAC,CAAC;AAC9B,KAAC,MAAM;AACLR,MAAAA,UAAU,CAACS,OAAO,CAACpB,SAAS,CAAC,CAAC;AAChC;GACD;EAED,MAAMqB,WAAW,GAAGA,MAAW;IAC7BC,SAAS,CAACC,SAAS,CAACC,QAAQ,EAAE,CAC3BC,IAAI,CAAEC,IAAI,IAAI;MACb,IAAIA,IAAI,KAAK,EAAE,EAAE;QACfpB,QAAQ,CAACoB,IAAI,CAAC;AACd,QAAA,IAAId,WAAW,CAACe,OAAO,IAAI,IAAI,EAAE;AAC/Bf,UAAAA,WAAW,CAACe,OAAO,CAACtB,KAAK,GAAGqB,IAAI;AAClC;QACA,IAAI5B,QAAQ,IAAI,IAAI,EAAE;UACpBA,QAAQ,CAAC4B,IAAI,CAAC;AAChB;QACAR,aAAa,CAACQ,IAAI,CAAC;AACrB;AACF,KAAC,CAAC,CACDE,KAAK,CAAEC,GAAG,IAAI;AACbC,MAAAA,OAAO,CAAC1D,KAAK,CAAC,qCAAqC,EAAEyD,GAAG,CAAC;AAC3D,KAAC,CAAC;GACL;AAED,EAAA,MAAM/D,QAAQ,GAAGuC,KAAK,KAAK,EAAE;AAE7B;EACA,IAAI0B,gBAAgB,GAAG9D,WAAW;EAClC,IAAI+D,YAAY,GAAmBpD,OAAO;AAE1C,EAAA,IAAIR,KAAK,EAAE;AACT2D,IAAAA,gBAAgB,GAAG,OAAO;AAC1BC,IAAAA,YAAY,GAAG,KAAK;GACrB,MAAM,IAAI3D,OAAO,EAAE;AAClB0D,IAAAA,gBAAgB,GAAG,SAAS;AAC5BC,IAAAA,YAAY,GAAG,IAAI;AACrB;EAEA,MAAMC,gBAAgB,GAAGzE,iBAAiB,CAAC;IACzCG,KAAK;IACLG,QAAQ;AACRG,IAAAA,WAAW,EAAE8D,gBAAgB;IAC7BzD,IAAI;IACJI,OAAO;AACPE,IAAAA,OAAO,EAAEoD,YAAY;AACrBlD,IAAAA;AACD,GAAA,CAAC;EAEF,MAAMoD,eAAe,GAAGhD,QAAQ,CAAC;IAC/BvB,KAAK;IACLwB,IAAI;IACJG,MAAM;IACNhB,IAAI;AACJQ,IAAAA;AACD,GAAA,CAAC,GAAG,GAAG,GAAGe,SAAS;EAEpB,OACEsC,eAAA,CAAA,KAAA,EAAA;AAAKtC,IAAAA,SAAS,EAAEoC,gBAAgB;IAC9BG,QAAA,EAAA,CAAAC,cAAA,CAAA,UAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACEC,MAAAA,GAAG,EAAE5B,WAAW;AAChBP,MAAAA,KAAK,EAAEA,KAAK;AACZP,MAAAA,QAAQ,EAAEgB,YAAY;AACtBb,MAAAA,IAAI,EAAEA,IAAI;AACVJ,MAAAA,SAAS,EAAEqC,eAAe;AAC1BpD,MAAAA,QAAQ,EAAEA;AAAQ,KAAA,EACdoB,KAAK,CACT,CAAA,EAEDH,eAAe,IAAI,CAACjC,QAAQ,IAAI,CAACgB,QAAQ,IACxCuD,cAAC,CAAAI,YAAM,EACL;AAAAxE,MAAAA,WAAW,EAAC,OAAO;AACnBK,MAAAA,IAAI,EAAC,IAAI;AACToE,MAAAA,OAAO,EAAErB,WAAW;AACpBxB,MAAAA,SAAS,EAAE,CAAA,mCAAA,EACTvB,IAAI,KAAK,IAAI,GAAG,SAAS,GACzBA,IAAI,KAAK,IAAI,GAAG,kBAAkB,GAClC,mBACF,CAAE,CAAA;AAAA8D,MAAAA,QAAA,EAAA;AAAA,KAAA,CAIL;AAAA,GAAA,CACG;AAEV;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/textarea/index.tsx"],"sourcesContent":["import React, { useState, useRef, TextareaHTMLAttributes } from 'react'\nimport { Button } from '../button'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { useColorScheme } from '../../hooks/useColorScheme'\n\nconst textareaContainer = cva(\n  'relative flex items-baseline transition-all w-full',\n  {\n    variants: {\n      theme: {\n        light: 'bg-white',\n        dark: 'bg-gray-800'\n      },\n      hasValue: {\n        true: '',\n        false: ''\n      },\n      colorScheme: {\n        default: 'focus-within:ring-blue-500/20',\n        brand: 'focus-within:ring-dash-brand/20',\n        error: 'focus-within:ring-red-500/20',\n        success: 'focus-within:ring-green-500/20'\n      },\n      size: {\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      },\n      variant: {\n        outlined: 'outline outline-1 outline-offset-[-1px]'\n      },\n      isValid: {\n        true: '',\n        false: '',\n        null: ''\n      },\n      disabled: {\n        false: '',\n        true: 'opacity-60 cursor-not-allowed'\n      }\n    },\n    compoundVariants: [\n      // Outlined variant colors\n      {\n        variant: 'outlined',\n        colorScheme: 'default',\n        class: 'outline-[rgba(17,17,17,0.32)] focus-within:outline-[rgba(17,17,17,0.6)]'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'brand',\n        class: 'outline-dash-brand/30 focus-within:outline-dash-brand'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'error',\n        isValid: false,\n        class: 'outline-red-500 focus-within:outline-red-500'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'success',\n        isValid: true,\n        class: 'outline-green-500 focus-within:outline-green-500'\n      },\n      // Outlined variant with focus ring\n      {\n        variant: 'outlined',\n        class: 'focus-within:ring-2'\n      },\n      // Add extra padding for PASTE button when no value\n      { hasValue: false, size: 'sm', class: 'pr-[70px]' },\n      { hasValue: false, size: 'md', class: 'pr-[70px]' },\n      { hasValue: false, size: 'xl', class: 'pr-[70px]' }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      hasValue: false,\n      colorScheme: 'default',\n      size: 'xl',\n      variant: 'outlined',\n      isValid: null,\n      disabled: false\n    }\n  }\n)\n\nconst textarea = cva(\n  'w-full bg-transparent outline-none resize-none transition-all text-[0.875rem] leading-[1.0625rem] placeholder:text-opacity-60',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#111111] placeholder:text-[rgba(17,17,17,0.6)]',\n        dark: 'text-white placeholder:text-gray-400'\n      },\n      font: {\n        main: 'font-dash-main',\n        grotesque: 'font-dash-grotesque'\n      },\n      weight: {\n        light: 'font-light',\n        normal: 'font-normal',\n        medium: 'font-medium',\n        semibold: 'font-semibold',\n        bold: 'font-bold'\n      },\n      size: {\n        sm: '',\n        md: '',\n        xl: ''\n      },\n      disabled: {\n        false: '',\n        true: 'cursor-not-allowed'\n      }\n    },\n    defaultVariants: {\n      theme: 'light',\n      font: 'main',\n      weight: 'light',\n      size: 'xl',\n      disabled: false\n    }\n  }\n)\n\ntype TextareaVariants = VariantProps<typeof textareaContainer>\n\nexport interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'size'>, Omit<TextareaVariants, 'theme' | 'hasValue' | 'isValid' | 'disabled'> {\n  className?: string\n  onChange?: (value: string) => void\n  showPasteButton?: boolean\n  validator?: ((value: string) => boolean) | boolean\n  rows?: number\n  font?: 'main' | 'grotesque'\n  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold'\n  error?: boolean\n  success?: boolean\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/**\n * A versatile textarea component that adapts to light/dark theme,\n * supports various color schemes, sizes, variants, and states.\n * Includes optional paste functionality and validation.\n *\n * @example\n * <Textarea\n *   placeholder='Enter your message'\n *   colorScheme='brand'\n *   size='xl'\n *   font='grotesque'\n *   weight='medium'\n *   rows={4}\n *   showPasteButton={true}\n * />\n */\nexport const Textarea: React.FC<TextareaProps> = ({\n  className = '',\n  onChange,\n  showPasteButton = true,\n  validator = null,\n  rows = 3,\n  size = 'xl',\n  variant = 'outlined',\n  colorScheme,\n  colorSchemeLight,\n  colorSchemeDark,\n  font = 'main',\n  weight = 'light',\n  error = false,\n  success = false,\n  disabled = false,\n  ...props\n}) => {\n  const { theme } = useTheme()\n  const effectiveColorScheme = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark) ?? 'default'\n  const [value, setValue] = useState<string>((props.value as string) ?? (props.defaultValue as string) ?? '')\n  const [isValid, setIsValid] = useState<boolean | null>(null)\n  const textareaRef = useRef<HTMLTextAreaElement>(null)\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    const newValue = e.target.value\n    setValue(newValue)\n\n    if (typeof onChange === 'function') {\n      onChange(newValue)\n    }\n\n    validateInput(newValue)\n  }\n\n  const validateInput = (input: string): void => {\n    if (validator === null) {\n      setIsValid(null)\n      return\n    }\n\n    if (typeof validator === 'function') {\n      setIsValid(validator(input))\n    } else {\n      setIsValid(Boolean(validator))\n    }\n  }\n\n  const handlePaste = (): void => {\n    navigator.clipboard.readText()\n      .then((text) => {\n        if (text !== '') {\n          setValue(text)\n          if (textareaRef.current != null) {\n            textareaRef.current.value = text\n          }\n          if (onChange != null) {\n            onChange(text)\n          }\n          validateInput(text)\n        }\n      })\n      .catch((err) => {\n        console.error('Failed to read clipboard contents: ', err)\n      })\n  }\n\n  const hasValue = value !== ''\n\n  // Determine color scheme based on state\n  let finalColorScheme = effectiveColorScheme\n  let finalIsValid: boolean | null = isValid\n  \n  if (error) {\n    finalColorScheme = 'error'\n    finalIsValid = false\n  } else if (success) {\n    finalColorScheme = 'success'\n    finalIsValid = true\n  }\n\n  const containerClasses = textareaContainer({\n    theme,\n    hasValue,\n    colorScheme: finalColorScheme,\n    size,\n    variant,\n    isValid: finalIsValid,\n    disabled\n  })\n\n  const textareaClasses = textarea({\n    theme,\n    font,\n    weight,\n    size,\n    disabled\n  }) + ' ' + className\n\n  return (\n    <div className={containerClasses}>\n      <textarea\n        ref={textareaRef}\n        value={value}\n        onChange={handleChange}\n        rows={rows}\n        className={textareaClasses}\n        disabled={disabled}\n        {...props}\n      />\n\n      {showPasteButton && !hasValue && !disabled && (\n        <Button \n          colorScheme='brand' \n          size='sm' \n          onClick={handlePaste}\n          className={`absolute top-1/2 !-translate-y-1/2 ${\n            size === 'sm' ? 'right-3' : \n            size === 'md' ? 'right-[1.125rem]' : \n            'right-[1.5625rem]'\n          }`}\n        >\n          PASTE\n        </Button>\n      )}\n    </div>\n  )\n}\n\nexport default Textarea "],"names":["textareaContainer","cva","variants","theme","light","dark","hasValue","true","false","colorScheme","default","brand","error","success","size","sm","md","xl","variant","outlined","isValid","null","disabled","compoundVariants","class","defaultVariants","textarea","font","main","grotesque","weight","normal","medium","semibold","bold","Textarea","_a","className","onChange","showPasteButton","validator","rows","colorSchemeLight","colorSchemeDark","props","__rest","useTheme","effectiveColorScheme","_b","useColorScheme","value","setValue","useState","_d","_c","defaultValue","setIsValid","textareaRef","useRef","handleChange","e","newValue","target","validateInput","input","Boolean","handlePaste","navigator","clipboard","readText","then","text","current","catch","err","console","finalColorScheme","finalIsValid","containerClasses","textareaClasses","_jsxs","children","_jsx","Object","assign","ref","Button","onClick"],"mappings":"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"}

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

@@ -20,6 +20,10 @@ export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaE
     weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
     error?: boolean;
     success?: boolean;
+    /** Color scheme override for light theme */
+    colorSchemeLight?: 'default' | 'brand' | 'error' | 'success';
+    /** Color scheme override for dark theme */
+    colorSchemeDark?: 'default' | 'brand' | 'error' | 'success';
 }
 /**
  * A versatile textarea component that adapts to light/dark theme,

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

@@ -6,6 +6,7 @@ import { useState, useRef } from 'react';
 import { Button } from '../button/index.esm.js';
 import { cva } from 'class-variance-authority';
 import { useTheme } from '../../contexts/ThemeContext.esm.js';
+import { useColorScheme } from '../../hooks/useColorScheme.esm.js';
 
 const textareaContainer = cva('relative flex items-baseline transition-all w-full', {
   variants: {
@@ -143,7 +144,7 @@ const textarea = cva('w-full bg-transparent outline-none resize-none transition-
  * />
  */
 const Textarea = _a => {
-  var _b, _c;
+  var _b, _c, _d;
   var {
       className = '',
       onChange,
@@ -152,18 +153,21 @@ const Textarea = _a => {
       rows = 3,
       size = 'xl',
       variant = 'outlined',
-      colorScheme = 'default',
+      colorScheme,
+      colorSchemeLight,
+      colorSchemeDark,
       font = 'main',
       weight = 'light',
       error = false,
       success = false,
       disabled = false
     } = _a,
-    props = __rest(_a, ["className", "onChange", "showPasteButton", "validator", "rows", "size", "variant", "colorScheme", "font", "weight", "error", "success", "disabled"]);
+    props = __rest(_a, ["className", "onChange", "showPasteButton", "validator", "rows", "size", "variant", "colorScheme", "colorSchemeLight", "colorSchemeDark", "font", "weight", "error", "success", "disabled"]);
   const {
     theme
   } = useTheme();
-  const [value, setValue] = useState((_c = (_b = props.value) !== null && _b !== void 0 ? _b : props.defaultValue) !== null && _c !== void 0 ? _c : '');
+  const effectiveColorScheme = (_b = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark)) !== null && _b !== void 0 ? _b : 'default';
+  const [value, setValue] = useState((_d = (_c = props.value) !== null && _c !== void 0 ? _c : props.defaultValue) !== null && _d !== void 0 ? _d : '');
   const [isValid, setIsValid] = useState(null);
   const textareaRef = useRef(null);
   const handleChange = e => {
@@ -203,7 +207,7 @@ const Textarea = _a => {
   };
   const hasValue = value !== '';
   // Determine color scheme based on state
-  let finalColorScheme = colorScheme;
+  let finalColorScheme = effectiveColorScheme;
   let finalIsValid = isValid;
   if (error) {
     finalColorScheme = 'error';

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/textarea/index.tsx"],"sourcesContent":["import React, { useState, useRef, TextareaHTMLAttributes } from 'react'\nimport { Button } from '../button'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\n\nconst textareaContainer = cva(\n  'relative flex items-baseline transition-all w-full',\n  {\n    variants: {\n      theme: {\n        light: 'bg-white',\n        dark: 'bg-gray-800'\n      },\n      hasValue: {\n        true: '',\n        false: ''\n      },\n      colorScheme: {\n        default: 'focus-within:ring-blue-500/20',\n        brand: 'focus-within:ring-dash-brand/20',\n        error: 'focus-within:ring-red-500/20',\n        success: 'focus-within:ring-green-500/20'\n      },\n      size: {\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      },\n      variant: {\n        outlined: 'outline outline-1 outline-offset-[-1px]'\n      },\n      isValid: {\n        true: '',\n        false: '',\n        null: ''\n      },\n      disabled: {\n        false: '',\n        true: 'opacity-60 cursor-not-allowed'\n      }\n    },\n    compoundVariants: [\n      // Outlined variant colors\n      {\n        variant: 'outlined',\n        colorScheme: 'default',\n        class: 'outline-[rgba(17,17,17,0.32)] focus-within:outline-[rgba(17,17,17,0.6)]'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'brand',\n        class: 'outline-dash-brand/30 focus-within:outline-dash-brand'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'error',\n        isValid: false,\n        class: 'outline-red-500 focus-within:outline-red-500'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'success',\n        isValid: true,\n        class: 'outline-green-500 focus-within:outline-green-500'\n      },\n      // Outlined variant with focus ring\n      {\n        variant: 'outlined',\n        class: 'focus-within:ring-2'\n      },\n      // Add extra padding for PASTE button when no value\n      { hasValue: false, size: 'sm', class: 'pr-[70px]' },\n      { hasValue: false, size: 'md', class: 'pr-[70px]' },\n      { hasValue: false, size: 'xl', class: 'pr-[70px]' }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      hasValue: false,\n      colorScheme: 'default',\n      size: 'xl',\n      variant: 'outlined',\n      isValid: null,\n      disabled: false\n    }\n  }\n)\n\nconst textarea = cva(\n  'w-full bg-transparent outline-none resize-none transition-all text-[0.875rem] leading-[1.0625rem] placeholder:text-opacity-60',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#111111] placeholder:text-[rgba(17,17,17,0.6)]',\n        dark: 'text-white placeholder:text-gray-400'\n      },\n      font: {\n        main: 'font-dash-main',\n        grotesque: 'font-dash-grotesque'\n      },\n      weight: {\n        light: 'font-light',\n        normal: 'font-normal',\n        medium: 'font-medium',\n        semibold: 'font-semibold',\n        bold: 'font-bold'\n      },\n      size: {\n        sm: '',\n        md: '',\n        xl: ''\n      },\n      disabled: {\n        false: '',\n        true: 'cursor-not-allowed'\n      }\n    },\n    defaultVariants: {\n      theme: 'light',\n      font: 'main',\n      weight: 'light',\n      size: 'xl',\n      disabled: false\n    }\n  }\n)\n\ntype TextareaVariants = VariantProps<typeof textareaContainer>\n\nexport interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'size'>, Omit<TextareaVariants, 'theme' | 'hasValue' | 'isValid' | 'disabled'> {\n  className?: string\n  onChange?: (value: string) => void\n  showPasteButton?: boolean\n  validator?: ((value: string) => boolean) | boolean\n  rows?: number\n  font?: 'main' | 'grotesque'\n  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold'\n  error?: boolean\n  success?: boolean\n}\n\n/**\n * A versatile textarea component that adapts to light/dark theme,\n * supports various color schemes, sizes, variants, and states.\n * Includes optional paste functionality and validation.\n *\n * @example\n * <Textarea\n *   placeholder='Enter your message'\n *   colorScheme='brand'\n *   size='xl'\n *   font='grotesque'\n *   weight='medium'\n *   rows={4}\n *   showPasteButton={true}\n * />\n */\nexport const Textarea: React.FC<TextareaProps> = ({\n  className = '',\n  onChange,\n  showPasteButton = true,\n  validator = null,\n  rows = 3,\n  size = 'xl',\n  variant = 'outlined',\n  colorScheme = 'default',\n  font = 'main',\n  weight = 'light',\n  error = false,\n  success = false,\n  disabled = false,\n  ...props\n}) => {\n  const { theme } = useTheme()\n  const [value, setValue] = useState<string>((props.value as string) ?? (props.defaultValue as string) ?? '')\n  const [isValid, setIsValid] = useState<boolean | null>(null)\n  const textareaRef = useRef<HTMLTextAreaElement>(null)\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    const newValue = e.target.value\n    setValue(newValue)\n\n    if (typeof onChange === 'function') {\n      onChange(newValue)\n    }\n\n    validateInput(newValue)\n  }\n\n  const validateInput = (input: string): void => {\n    if (validator === null) {\n      setIsValid(null)\n      return\n    }\n\n    if (typeof validator === 'function') {\n      setIsValid(validator(input))\n    } else {\n      setIsValid(Boolean(validator))\n    }\n  }\n\n  const handlePaste = (): void => {\n    navigator.clipboard.readText()\n      .then((text) => {\n        if (text !== '') {\n          setValue(text)\n          if (textareaRef.current != null) {\n            textareaRef.current.value = text\n          }\n          if (onChange != null) {\n            onChange(text)\n          }\n          validateInput(text)\n        }\n      })\n      .catch((err) => {\n        console.error('Failed to read clipboard contents: ', err)\n      })\n  }\n\n  const hasValue = value !== ''\n\n  // Determine color scheme based on state\n  let finalColorScheme = colorScheme\n  let finalIsValid: boolean | null = isValid\n  \n  if (error) {\n    finalColorScheme = 'error'\n    finalIsValid = false\n  } else if (success) {\n    finalColorScheme = 'success'\n    finalIsValid = true\n  }\n\n  const containerClasses = textareaContainer({\n    theme,\n    hasValue,\n    colorScheme: finalColorScheme,\n    size,\n    variant,\n    isValid: finalIsValid,\n    disabled\n  })\n\n  const textareaClasses = textarea({\n    theme,\n    font,\n    weight,\n    size,\n    disabled\n  }) + ' ' + className\n\n  return (\n    <div className={containerClasses}>\n      <textarea\n        ref={textareaRef}\n        value={value}\n        onChange={handleChange}\n        rows={rows}\n        className={textareaClasses}\n        disabled={disabled}\n        {...props}\n      />\n\n      {showPasteButton && !hasValue && !disabled && (\n        <Button \n          colorScheme='brand' \n          size='sm' \n          onClick={handlePaste}\n          className={`absolute top-1/2 !-translate-y-1/2 ${\n            size === 'sm' ? 'right-3' : \n            size === 'md' ? 'right-[1.125rem]' : \n            'right-[1.5625rem]'\n          }`}\n        >\n          PASTE\n        </Button>\n      )}\n    </div>\n  )\n}\n\nexport default Textarea "],"names":["textareaContainer","cva","variants","theme","light","dark","hasValue","true","false","colorScheme","default","brand","error","success","size","sm","md","xl","variant","outlined","isValid","null","disabled","compoundVariants","class","defaultVariants","textarea","font","main","grotesque","weight","normal","medium","semibold","bold","Textarea","_a","className","onChange","showPasteButton","validator","rows","props","__rest","useTheme","value","setValue","useState","_c","_b","defaultValue","setIsValid","textareaRef","useRef","handleChange","e","newValue","target","validateInput","input","Boolean","handlePaste","navigator","clipboard","readText","then","text","current","catch","err","console","finalColorScheme","finalIsValid","containerClasses","textareaClasses","_jsxs","children","_jsx","Object","assign","ref","Button","onClick"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/textarea/index.tsx"],"sourcesContent":["import React, { useState, useRef, TextareaHTMLAttributes } from 'react'\nimport { Button } from '../button'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { useColorScheme } from '../../hooks/useColorScheme'\n\nconst textareaContainer = cva(\n  'relative flex items-baseline transition-all w-full',\n  {\n    variants: {\n      theme: {\n        light: 'bg-white',\n        dark: 'bg-gray-800'\n      },\n      hasValue: {\n        true: '',\n        false: ''\n      },\n      colorScheme: {\n        default: 'focus-within:ring-blue-500/20',\n        brand: 'focus-within:ring-dash-brand/20',\n        error: 'focus-within:ring-red-500/20',\n        success: 'focus-within:ring-green-500/20'\n      },\n      size: {\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      },\n      variant: {\n        outlined: 'outline outline-1 outline-offset-[-1px]'\n      },\n      isValid: {\n        true: '',\n        false: '',\n        null: ''\n      },\n      disabled: {\n        false: '',\n        true: 'opacity-60 cursor-not-allowed'\n      }\n    },\n    compoundVariants: [\n      // Outlined variant colors\n      {\n        variant: 'outlined',\n        colorScheme: 'default',\n        class: 'outline-[rgba(17,17,17,0.32)] focus-within:outline-[rgba(17,17,17,0.6)]'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'brand',\n        class: 'outline-dash-brand/30 focus-within:outline-dash-brand'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'error',\n        isValid: false,\n        class: 'outline-red-500 focus-within:outline-red-500'\n      },\n      {\n        variant: 'outlined',\n        colorScheme: 'success',\n        isValid: true,\n        class: 'outline-green-500 focus-within:outline-green-500'\n      },\n      // Outlined variant with focus ring\n      {\n        variant: 'outlined',\n        class: 'focus-within:ring-2'\n      },\n      // Add extra padding for PASTE button when no value\n      { hasValue: false, size: 'sm', class: 'pr-[70px]' },\n      { hasValue: false, size: 'md', class: 'pr-[70px]' },\n      { hasValue: false, size: 'xl', class: 'pr-[70px]' }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      hasValue: false,\n      colorScheme: 'default',\n      size: 'xl',\n      variant: 'outlined',\n      isValid: null,\n      disabled: false\n    }\n  }\n)\n\nconst textarea = cva(\n  'w-full bg-transparent outline-none resize-none transition-all text-[0.875rem] leading-[1.0625rem] placeholder:text-opacity-60',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#111111] placeholder:text-[rgba(17,17,17,0.6)]',\n        dark: 'text-white placeholder:text-gray-400'\n      },\n      font: {\n        main: 'font-dash-main',\n        grotesque: 'font-dash-grotesque'\n      },\n      weight: {\n        light: 'font-light',\n        normal: 'font-normal',\n        medium: 'font-medium',\n        semibold: 'font-semibold',\n        bold: 'font-bold'\n      },\n      size: {\n        sm: '',\n        md: '',\n        xl: ''\n      },\n      disabled: {\n        false: '',\n        true: 'cursor-not-allowed'\n      }\n    },\n    defaultVariants: {\n      theme: 'light',\n      font: 'main',\n      weight: 'light',\n      size: 'xl',\n      disabled: false\n    }\n  }\n)\n\ntype TextareaVariants = VariantProps<typeof textareaContainer>\n\nexport interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'size'>, Omit<TextareaVariants, 'theme' | 'hasValue' | 'isValid' | 'disabled'> {\n  className?: string\n  onChange?: (value: string) => void\n  showPasteButton?: boolean\n  validator?: ((value: string) => boolean) | boolean\n  rows?: number\n  font?: 'main' | 'grotesque'\n  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold'\n  error?: boolean\n  success?: boolean\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/**\n * A versatile textarea component that adapts to light/dark theme,\n * supports various color schemes, sizes, variants, and states.\n * Includes optional paste functionality and validation.\n *\n * @example\n * <Textarea\n *   placeholder='Enter your message'\n *   colorScheme='brand'\n *   size='xl'\n *   font='grotesque'\n *   weight='medium'\n *   rows={4}\n *   showPasteButton={true}\n * />\n */\nexport const Textarea: React.FC<TextareaProps> = ({\n  className = '',\n  onChange,\n  showPasteButton = true,\n  validator = null,\n  rows = 3,\n  size = 'xl',\n  variant = 'outlined',\n  colorScheme,\n  colorSchemeLight,\n  colorSchemeDark,\n  font = 'main',\n  weight = 'light',\n  error = false,\n  success = false,\n  disabled = false,\n  ...props\n}) => {\n  const { theme } = useTheme()\n  const effectiveColorScheme = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark) ?? 'default'\n  const [value, setValue] = useState<string>((props.value as string) ?? (props.defaultValue as string) ?? '')\n  const [isValid, setIsValid] = useState<boolean | null>(null)\n  const textareaRef = useRef<HTMLTextAreaElement>(null)\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    const newValue = e.target.value\n    setValue(newValue)\n\n    if (typeof onChange === 'function') {\n      onChange(newValue)\n    }\n\n    validateInput(newValue)\n  }\n\n  const validateInput = (input: string): void => {\n    if (validator === null) {\n      setIsValid(null)\n      return\n    }\n\n    if (typeof validator === 'function') {\n      setIsValid(validator(input))\n    } else {\n      setIsValid(Boolean(validator))\n    }\n  }\n\n  const handlePaste = (): void => {\n    navigator.clipboard.readText()\n      .then((text) => {\n        if (text !== '') {\n          setValue(text)\n          if (textareaRef.current != null) {\n            textareaRef.current.value = text\n          }\n          if (onChange != null) {\n            onChange(text)\n          }\n          validateInput(text)\n        }\n      })\n      .catch((err) => {\n        console.error('Failed to read clipboard contents: ', err)\n      })\n  }\n\n  const hasValue = value !== ''\n\n  // Determine color scheme based on state\n  let finalColorScheme = effectiveColorScheme\n  let finalIsValid: boolean | null = isValid\n  \n  if (error) {\n    finalColorScheme = 'error'\n    finalIsValid = false\n  } else if (success) {\n    finalColorScheme = 'success'\n    finalIsValid = true\n  }\n\n  const containerClasses = textareaContainer({\n    theme,\n    hasValue,\n    colorScheme: finalColorScheme,\n    size,\n    variant,\n    isValid: finalIsValid,\n    disabled\n  })\n\n  const textareaClasses = textarea({\n    theme,\n    font,\n    weight,\n    size,\n    disabled\n  }) + ' ' + className\n\n  return (\n    <div className={containerClasses}>\n      <textarea\n        ref={textareaRef}\n        value={value}\n        onChange={handleChange}\n        rows={rows}\n        className={textareaClasses}\n        disabled={disabled}\n        {...props}\n      />\n\n      {showPasteButton && !hasValue && !disabled && (\n        <Button \n          colorScheme='brand' \n          size='sm' \n          onClick={handlePaste}\n          className={`absolute top-1/2 !-translate-y-1/2 ${\n            size === 'sm' ? 'right-3' : \n            size === 'md' ? 'right-[1.125rem]' : \n            'right-[1.5625rem]'\n          }`}\n        >\n          PASTE\n        </Button>\n      )}\n    </div>\n  )\n}\n\nexport default Textarea "],"names":["textareaContainer","cva","variants","theme","light","dark","hasValue","true","false","colorScheme","default","brand","error","success","size","sm","md","xl","variant","outlined","isValid","null","disabled","compoundVariants","class","defaultVariants","textarea","font","main","grotesque","weight","normal","medium","semibold","bold","Textarea","_a","className","onChange","showPasteButton","validator","rows","colorSchemeLight","colorSchemeDark","props","__rest","useTheme","effectiveColorScheme","_b","useColorScheme","value","setValue","useState","_d","_c","defaultValue","setIsValid","textareaRef","useRef","handleChange","e","newValue","target","validateInput","input","Boolean","handlePaste","navigator","clipboard","readText","then","text","current","catch","err","console","finalColorScheme","finalIsValid","containerClasses","textareaClasses","_jsxs","children","_jsx","Object","assign","ref","Button","onClick"],"mappings":"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"}

package/dist/react/components/valueCard/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 valueCard = classVarianceAuthority.cva('flex items-center transition-all outline outline-1 outline-offset-[-1px]', {
   variants: {
@@ -136,10 +137,13 @@ const valueCard = classVarianceAuthority.cva('flex items-center transition-all o
  * </ValueCard>
  */
 const ValueCard = _a => {
+  var _b;
   var {
       as,
       link = '',
       colorScheme,
+      colorSchemeLight,
+      colorSchemeDark,
       size,
       clickable = false,
       loading,
@@ -147,14 +151,15 @@ const ValueCard = _a => {
       className = '',
       children
     } = _a,
-    props = tslib.__rest(_a, ["as", "link", "colorScheme", "size", "clickable", "loading", "border", "className", "children"]);
+    props = tslib.__rest(_a, ["as", "link", "colorScheme", "colorSchemeLight", "colorSchemeDark", "size", "clickable", "loading", "border", "className", "children"]);
   const {
     theme
   } = ThemeContext.useTheme();
+  const effectiveColorScheme = (_b = useColorScheme.useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark)) !== null && _b !== void 0 ? _b : 'default';
   const isClickable = Boolean(link !== '' || clickable);
   const classes = valueCard({
     theme,
-    colorScheme,
+    colorScheme: effectiveColorScheme,
     size,
     clickable: isClickable,
     loading,

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/valueCard/index.tsx"],"sourcesContent":["import React from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\n\nconst valueCard = cva(\n  'flex items-center transition-all outline outline-1 outline-offset-[-1px]',\n  {\n    variants: {\n      theme: {\n        light: 'outline-gray-200',\n        dark: 'bg-gray-800/50 outline-gray-400'\n      },\n      colorScheme: {\n        default: '',\n        transparent: 'bg-transparent',\n        green: 'text-green-500 bg-green-200 outline-green-400',\n        lightBlue: 'bg-dash-brand-dim/10 !outline-dash-brand/20',\n        white: 'bg-white',\n        lightGray: 'bg-dash-primary-die-subdued',\n        yellow: 'bg-dash-yellow-light !outline-dash-yellow'\n      },\n      size: {\n        xs: 'px-[0.5rem] py-[0.25rem] rounded-[0.25rem]',\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      },\n      clickable: {\n        false: '',\n        true: 'cursor-pointer transition-colors active:translate-y-px active:opacity-90'\n      },\n      loading: {\n        false: '',\n        true: 'animate-pulse'\n      },\n      border: {\n        false: '!outline-none',\n        true: ''\n      }\n    },\n    compoundVariants: [\n      // default scheme hover\n      { theme: 'light', colorScheme: 'default', clickable: true, class: 'hover:bg-gray-200/50' },\n      { theme: 'dark', colorScheme: 'default', clickable: true, class: 'hover:bg-gray-700/50' },\n      // transparent scheme hover\n      { theme: 'light', colorScheme: 'transparent', clickable: true, class: 'hover:bg-gray-100' },\n      { theme: 'dark', colorScheme: 'transparent', clickable: true, class: 'hover:bg-gray-900' },\n      // green scheme hover\n      { theme: 'light', colorScheme: 'green', clickable: true, class: 'hover:bg-green-300' },\n      { theme: 'dark', colorScheme: 'green', clickable: true, class: 'hover:bg-green-400' },\n      // green lightBlue\n      { colorScheme: 'lightBlue', clickable: true, class: 'hover:bg-dash-brand/15' },\n      // white\n      { theme: 'light', colorScheme: 'white', clickable: true, class: 'hover:bg-gray-100' },\n      { theme: 'dark', colorScheme: 'white', clickable: true, class: 'hover:bg-gray-100' },\n      // lightGray scheme hover\n      { theme: 'light', colorScheme: 'lightGray', clickable: true, class: 'hover:bg-dash-primary-die' },\n      { theme: 'dark', colorScheme: 'lightGray', clickable: true, class: 'hover:bg-gray-600' },\n      // yellow scheme hover\n      { colorScheme: 'yellow', clickable: true, class: 'hover:bg-dash-yellow' }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      colorScheme: 'default',\n      size: 'md',\n      clickable: false,\n      loading: false,\n      border: true\n    }\n  }\n)\n\ntype ValueCardVariants = VariantProps<typeof valueCard>\n\nexport interface ValueCardProps extends Omit<ValueCardVariants, 'theme'> {\n  /** If you pass an `as` component, it'll receive `href` when `link` is set */\n  as?: React.ElementType\n  /** Only applies `href` if `as` is `'a'` or a component that accepts `href` */\n  link?: string\n  className?: string\n  children: React.ReactNode\n  /** Additional props to pass to the underlying element */\n  [key: string]: any\n}\n\n/**\n * A card container that adapts to light/dark theme,\n * supports various color schemes, sizes, clickability,\n * loading state, and optional border styling.\n *\n * @example\n * <ValueCard colorScheme=\"green\" border as={Link} link=\"/foo\">\n *   Go\n * </ValueCard>\n */\nexport const ValueCard: React.FC<ValueCardProps> = ({\n  as,\n  link = '',\n  colorScheme,\n  size,\n  clickable = false,\n  loading,\n  border,\n  className = '',\n  children,\n  ...props\n}) => {\n  const { theme } = useTheme()\n  const isClickable = Boolean(link !== '' || clickable)\n\n  const classes = valueCard({\n    theme,\n    colorScheme,\n    size,\n    clickable: isClickable,\n    loading,\n    border\n  }) + ' ' + (String(className))\n\n  // choose element: custom `as`, or <a> if link, else <div>\n  const Component = as ?? (link !== '' ? 'a' : 'div')\n\n  const mergedProps: any = { ...props, className: classes }\n  if (link !== '') mergedProps.href = link\n\n  return <Component {...mergedProps}>{children}</Component>\n}\n\nexport default ValueCard "],"names":["valueCard","cva","variants","theme","light","dark","colorScheme","default","transparent","green","lightBlue","white","lightGray","yellow","size","xs","sm","md","xl","clickable","false","true","loading","border","compoundVariants","class","defaultVariants","ValueCard","_a","as","link","className","children","props","__rest","useTheme","isClickable","Boolean","classes","String","Component","mergedProps","href","_jsx","Object","assign"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/valueCard/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 valueCard = cva(\n  'flex items-center transition-all outline outline-1 outline-offset-[-1px]',\n  {\n    variants: {\n      theme: {\n        light: 'outline-gray-200',\n        dark: 'bg-gray-800/50 outline-gray-400'\n      },\n      colorScheme: {\n        default: '',\n        transparent: 'bg-transparent',\n        green: 'text-green-500 bg-green-200 outline-green-400',\n        lightBlue: 'bg-dash-brand-dim/10 !outline-dash-brand/20',\n        white: 'bg-white',\n        lightGray: 'bg-dash-primary-die-subdued',\n        yellow: 'bg-dash-yellow-light !outline-dash-yellow'\n      },\n      size: {\n        xs: 'px-[0.5rem] py-[0.25rem] rounded-[0.25rem]',\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      },\n      clickable: {\n        false: '',\n        true: 'cursor-pointer transition-colors active:translate-y-px active:opacity-90'\n      },\n      loading: {\n        false: '',\n        true: 'animate-pulse'\n      },\n      border: {\n        false: '!outline-none',\n        true: ''\n      }\n    },\n    compoundVariants: [\n      // default scheme hover\n      { theme: 'light', colorScheme: 'default', clickable: true, class: 'hover:bg-gray-200/50' },\n      { theme: 'dark', colorScheme: 'default', clickable: true, class: 'hover:bg-gray-700/50' },\n      // transparent scheme hover\n      { theme: 'light', colorScheme: 'transparent', clickable: true, class: 'hover:bg-gray-100' },\n      { theme: 'dark', colorScheme: 'transparent', clickable: true, class: 'hover:bg-gray-900' },\n      // green scheme hover\n      { theme: 'light', colorScheme: 'green', clickable: true, class: 'hover:bg-green-300' },\n      { theme: 'dark', colorScheme: 'green', clickable: true, class: 'hover:bg-green-400' },\n      // green lightBlue\n      { colorScheme: 'lightBlue', clickable: true, class: 'hover:bg-dash-brand/15' },\n      // white\n      { theme: 'light', colorScheme: 'white', clickable: true, class: 'hover:bg-gray-100' },\n      { theme: 'dark', colorScheme: 'white', clickable: true, class: 'hover:bg-gray-100' },\n      // lightGray scheme hover\n      { theme: 'light', colorScheme: 'lightGray', clickable: true, class: 'hover:bg-dash-primary-die' },\n      { theme: 'dark', colorScheme: 'lightGray', clickable: true, class: 'hover:bg-gray-600' },\n      // yellow scheme hover\n      { colorScheme: 'yellow', clickable: true, class: 'hover:bg-dash-yellow' }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      colorScheme: 'default',\n      size: 'md',\n      clickable: false,\n      loading: false,\n      border: true\n    }\n  }\n)\n\ntype ValueCardVariants = VariantProps<typeof valueCard>\n\nexport interface ValueCardProps extends Omit<ValueCardVariants, 'theme'> {\n  /** If you pass an `as` component, it'll receive `href` when `link` is set */\n  as?: React.ElementType\n  /** Only applies `href` if `as` is `'a'` or a component that accepts `href` */\n  link?: string\n  className?: string\n  children: React.ReactNode\n  /** Color scheme override for light theme */\n  colorSchemeLight?: 'default' | 'transparent' | 'green' | 'lightBlue' | 'white' | 'lightGray' | 'yellow'\n  /** Color scheme override for dark theme */\n  colorSchemeDark?: 'default' | 'transparent' | 'green' | 'lightBlue' | 'white' | 'lightGray' | 'yellow'\n  /** Additional props to pass to the underlying element */\n  [key: string]: any\n}\n\n/**\n * A card container that adapts to light/dark theme,\n * supports various color schemes, sizes, clickability,\n * loading state, and optional border styling.\n *\n * @example\n * <ValueCard colorScheme=\"green\" border as={Link} link=\"/foo\">\n *   Go\n * </ValueCard>\n */\nexport const ValueCard: React.FC<ValueCardProps> = ({\n  as,\n  link = '',\n  colorScheme,\n  colorSchemeLight,\n  colorSchemeDark,\n  size,\n  clickable = false,\n  loading,\n  border,\n  className = '',\n  children,\n  ...props\n}) => {\n  const { theme } = useTheme()\n  const effectiveColorScheme = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark) ?? 'default'\n  const isClickable = Boolean(link !== '' || clickable)\n\n  const classes = valueCard({\n    theme,\n    colorScheme: effectiveColorScheme,\n    size,\n    clickable: isClickable,\n    loading,\n    border\n  }) + ' ' + (String(className))\n\n  // choose element: custom `as`, or <a> if link, else <div>\n  const Component = as ?? (link !== '' ? 'a' : 'div')\n\n  const mergedProps: any = { ...props, className: classes }\n  if (link !== '') mergedProps.href = link\n\n  return <Component {...mergedProps}>{children}</Component>\n}\n\nexport default ValueCard "],"names":["valueCard","cva","variants","theme","light","dark","colorScheme","default","transparent","green","lightBlue","white","lightGray","yellow","size","xs","sm","md","xl","clickable","false","true","loading","border","compoundVariants","class","defaultVariants","ValueCard","_a","as","link","colorSchemeLight","colorSchemeDark","className","children","props","__rest","useTheme","effectiveColorScheme","_b","useColorScheme","isClickable","Boolean","classes","String","Component","mergedProps","href","_jsx","Object","assign"],"mappings":"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"}

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

@@ -16,6 +16,10 @@ export interface ValueCardProps extends Omit<ValueCardVariants, 'theme'> {
     link?: string;
     className?: string;
     children: React.ReactNode;
+    /** Color scheme override for light theme */
+    colorSchemeLight?: 'default' | 'transparent' | 'green' | 'lightBlue' | 'white' | 'lightGray' | 'yellow';
+    /** Color scheme override for dark theme */
+    colorSchemeDark?: 'default' | 'transparent' | 'green' | 'lightBlue' | 'white' | 'lightGray' | 'yellow';
     /** Additional props to pass to the underlying element */
     [key: string]: any;
 }