dash-ui-kit 1.0.93 → 2.0.0-dev

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

@@ -0,0 +1,154 @@
+"use client";
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import * as RadixTabs from '@radix-ui/react-tabs';
+import { cva } from 'class-variance-authority';
+import { useTheme } from '../../contexts/ThemeContext.esm.js';
+
+const tabsRootStyles = cva('flex flex-col w-full', {
+  variants: {
+    theme: {
+      light: '',
+      dark: ''
+    }
+  },
+  defaultVariants: {
+    theme: 'light'
+  }
+});
+const tabsListStyles = cva('flex relative overflow-x-auto scrollbar-hide after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:transition-colors', {
+  variants: {
+    theme: {
+      light: 'after:bg-[rgba(12,28,51,0.15)]',
+      dark: 'after:bg-gray-600/50'
+    }
+  },
+  defaultVariants: {
+    theme: 'light'
+  }
+});
+const tabsTriggerStyles = cva(['flex items-center justify-center relative', 'font-dash-main font-light', 'transition-all duration-200 ease-in-out cursor-pointer', 'hover:opacity-80', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500', 'disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:opacity-50', 'whitespace-nowrap flex-shrink-0', 'after:absolute after:bottom-0 after:left-[-0.25rem] after:w-full after:h-[1px] after:bg-transparent after:transition-colors after:duration-200 after:z-10'], {
+  variants: {
+    theme: {
+      light: '',
+      dark: ''
+    },
+    active: {
+      true: '',
+      false: ''
+    },
+    size: {
+      sm: 'text-sm leading-[1.25] tracking-[-0.02em] px-0 pr-3 pb-2 after:right-3',
+      lg: 'text-xl leading-[1.3] tracking-[-0.025em] px-0 pr-4 pb-3 after:right-4',
+      xl: 'text-2xl leading-[1.366] tracking-[-0.03em] px-0 pr-[0.875rem] pb-[10px] after:right-[0.875rem]'
+    }
+  },
+  compoundVariants: [{
+    theme: 'light',
+    active: true,
+    class: 'text-dash-primary-dark-blue [text-shadow:0.2px_0_0_currentColor,_-0.2px_0_0_currentColor] after:!bg-[#4C7EFF]'
+  }, {
+    theme: 'light',
+    active: false,
+    class: 'text-[rgba(12,28,51,0.35)]'
+  }, {
+    theme: 'dark',
+    active: true,
+    class: 'text-white [text-shadow:0.2px_0_0_currentColor,_-0.2px_0_0_currentColor] after:!bg-[#4C7EFF]'
+  }, {
+    theme: 'dark',
+    active: false,
+    class: 'text-gray-400'
+  }],
+  defaultVariants: {
+    theme: 'light',
+    active: false,
+    size: 'xl'
+  }
+});
+const tabsContentStyles = cva('focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500', {
+  variants: {
+    theme: {
+      light: '',
+      dark: ''
+    },
+    size: {
+      sm: 'mt-2',
+      lg: 'mt-3',
+      xl: 'mt-4'
+    }
+  },
+  defaultVariants: {
+    theme: 'light',
+    size: 'xl'
+  }
+});
+/**
+ * Tabs component with sleek underline style matching Figma design.
+ * Built on radix-ui with light/dark theme support and keyboard navigation.
+ */
+const Tabs = ({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  size = 'xl',
+  className = '',
+  listClassName = '',
+  triggerClassName = '',
+  contentClassName = ''
+}) => {
+  var _a;
+  const {
+    theme
+  } = useTheme();
+  const [internalValue, setInternalValue] = React.useState(defaultValue || ((_a = items[0]) === null || _a === void 0 ? void 0 : _a.value) || '');
+  // Use controlled value if provided, otherwise use internal state
+  const currentValue = value !== undefined ? value : internalValue;
+  const handleValueChange = newValue => {
+    if (value === undefined) {
+      setInternalValue(newValue);
+    }
+    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
+  };
+  const rootClasses = tabsRootStyles({
+    theme
+  }) + (className ? ` ${className}` : '');
+  const listClasses = tabsListStyles({
+    theme
+  }) + (listClassName ? ` ${listClassName}` : '');
+  const contentClasses = tabsContentStyles({
+    theme,
+    size
+  }) + (contentClassName ? ` ${contentClassName}` : '');
+  return jsxs(RadixTabs.Root, {
+    className: rootClasses,
+    value: currentValue,
+    onValueChange: handleValueChange,
+    children: [jsx(RadixTabs.List, {
+      className: listClasses,
+      children: items.map(item => {
+        const isActive = currentValue === item.value;
+        const triggerClasses = tabsTriggerStyles({
+          theme,
+          active: isActive,
+          size
+        }) + (triggerClassName ? ` ${triggerClassName}` : '');
+        return jsx(RadixTabs.Trigger, {
+          value: item.value,
+          disabled: item.disabled,
+          className: triggerClasses,
+          children: item.label
+        }, item.value);
+      })
+    }), items.map(item => jsx(RadixTabs.Content, {
+      value: item.value,
+      className: contentClasses,
+      children: item.content
+    }, item.value))]
+  });
+};
+
+export { Tabs, Tabs as default };
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/tabs/index.tsx"],"sourcesContent":["import React from 'react'\nimport * as RadixTabs from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\n\nconst tabsRootStyles = cva(\n  'flex flex-col w-full',\n  {\n    variants: {\n      theme: {\n        light: '',\n        dark: ''\n      }\n    },\n    defaultVariants: {\n      theme: 'light'\n    }\n  }\n)\n\nconst tabsListStyles = cva(\n  'flex relative overflow-x-auto scrollbar-hide after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[1px] after:transition-colors',\n  {\n    variants: {\n      theme: {\n        light: 'after:bg-[rgba(12,28,51,0.15)]',\n        dark: 'after:bg-gray-600/50'\n      }\n    },\n    defaultVariants: {\n      theme: 'light'\n    }\n  }\n)\n\nconst tabsTriggerStyles = cva(\n  [\n    'flex items-center justify-center relative',\n    'font-dash-main font-light',\n    'transition-all duration-200 ease-in-out cursor-pointer',\n    'hover:opacity-80',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500',\n    'disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:opacity-50',\n    'whitespace-nowrap flex-shrink-0',\n    'after:absolute after:bottom-0 after:left-[-0.25rem] after:w-full after:h-[1px] after:bg-transparent after:transition-colors after:duration-200 after:z-10'\n  ],\n  {\n    variants: {\n      theme: {\n        light: '',\n        dark: ''\n      },\n      active: {\n        true: '',\n        false: ''\n      },\n      size: {\n        sm: 'text-sm leading-[1.25] tracking-[-0.02em] px-0 pr-3 pb-2 after:right-3',\n        lg: 'text-xl leading-[1.3] tracking-[-0.025em] px-0 pr-4 pb-3 after:right-4',\n        xl: 'text-2xl leading-[1.366] tracking-[-0.03em] px-0 pr-[0.875rem] pb-[10px] after:right-[0.875rem]'\n      }\n    },\n    compoundVariants: [\n      {\n        theme: 'light',\n        active: true,\n        class: 'text-dash-primary-dark-blue [text-shadow:0.2px_0_0_currentColor,_-0.2px_0_0_currentColor] after:!bg-[#4C7EFF]'\n      },\n      {\n        theme: 'light',\n        active: false,\n        class: 'text-[rgba(12,28,51,0.35)]'\n      },\n      {\n        theme: 'dark',\n        active: true,\n        class: 'text-white [text-shadow:0.2px_0_0_currentColor,_-0.2px_0_0_currentColor] after:!bg-[#4C7EFF]'\n      },\n      {\n        theme: 'dark',\n        active: false,\n        class: 'text-gray-400'\n      }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      active: false,\n      size: 'xl'\n    }\n  }\n)\n\nconst tabsContentStyles = cva(\n  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500',\n  {\n    variants: {\n      theme: {\n        light: '',\n        dark: ''\n      },\n      size: {\n        sm: 'mt-2',\n        lg: 'mt-3',\n        xl: 'mt-4'\n      }\n    },\n    defaultVariants: {\n      theme: 'light',\n      size: 'xl'\n    }\n  }\n)\n\nexport interface TabItem {\n  /** Unique identifier for the tab */\n  value: string\n  /** Label text to display */\n  label: string\n  /** Content to render when tab is active */\n  content: React.ReactNode\n  /** Whether this tab is disabled */\n  disabled?: boolean\n}\n\nexport interface TabsProps {\n  /** Array of tab items */\n  items: TabItem[]\n  /** Currently active tab value (controlled) */\n  value?: string\n  /** Default active tab value (uncontrolled) */\n  defaultValue?: string\n  /** Callback when active tab changes */\n  onValueChange?: (value: string) => void\n  /** Size variant */\n  size?: 'sm' | 'lg' | 'xl'\n  /** Additional CSS classes */\n  className?: string\n  /** Additional CSS classes for the tabs list */\n  listClassName?: string\n  /** Additional CSS classes for tab triggers */\n  triggerClassName?: string\n  /** Additional CSS classes for tab content */\n  contentClassName?: string\n}\n\n/**\n * Tabs component with sleek underline style matching Figma design.\n * Built on radix-ui with light/dark theme support and keyboard navigation.\n */\nexport const Tabs: React.FC<TabsProps> = ({\n  items,\n  value,\n  defaultValue,\n  onValueChange,\n  size = 'xl',\n  className = '',\n  listClassName = '',\n  triggerClassName = '',\n  contentClassName = '',\n}) => {\n  const { theme } = useTheme()\n  const [internalValue, setInternalValue] = React.useState(defaultValue || items[0]?.value || '')\n  \n  // Use controlled value if provided, otherwise use internal state\n  const currentValue = value !== undefined ? value : internalValue\n  \n  const handleValueChange = (newValue: string) => {\n    if (value === undefined) {\n      setInternalValue(newValue)\n    }\n    onValueChange?.(newValue)\n  }\n  \n  const rootClasses = tabsRootStyles({ theme }) + (className ? ` ${className}` : '')\n  const listClasses = tabsListStyles({ theme }) + (listClassName ? ` ${listClassName}` : '')\n  const contentClasses = tabsContentStyles({ theme, size }) + (contentClassName ? ` ${contentClassName}` : '')\n\n  return (\n    <RadixTabs.Root\n      className={rootClasses}\n      value={currentValue}\n      onValueChange={handleValueChange}\n    >\n      <RadixTabs.List className={listClasses}>\n        {items.map((item) => {\n          const isActive = currentValue === item.value\n          const triggerClasses = tabsTriggerStyles({ \n            theme, \n            active: isActive,\n            size\n          }) + (triggerClassName ? ` ${triggerClassName}` : '')\n          \n          return (\n            <RadixTabs.Trigger\n              key={item.value}\n              value={item.value}\n              disabled={item.disabled}\n              className={triggerClasses}\n            >\n              {item.label}\n            </RadixTabs.Trigger>\n          )\n        })}\n      </RadixTabs.List>\n\n      {items.map((item) => (\n        <RadixTabs.Content\n          key={item.value}\n          value={item.value}\n          className={contentClasses}\n        >\n          {item.content}\n        </RadixTabs.Content>\n      ))}\n    </RadixTabs.Root>\n  )\n}\n\nexport default Tabs\n\n\n"],"names":["tabsRootStyles","cva","variants","theme","light","dark","defaultVariants","tabsListStyles","tabsTriggerStyles","active","true","false","size","sm","lg","xl","compoundVariants","class","tabsContentStyles","Tabs","items","value","defaultValue","onValueChange","className","listClassName","triggerClassName","contentClassName","useTheme","internalValue","setInternalValue","React","useState","_a","currentValue","undefined","handleValueChange","newValue","rootClasses","listClasses","contentClasses","_jsxs","RadixTabs","Root","children","_jsx","List","map","item","isActive","triggerClasses","Trigger","disabled","label","Content","content"],"mappings":"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"}

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

@@ -0,0 +1,120 @@
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
+var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
+
+const textStyles = classVarianceAuthority.cva('', {
+  variants: {
+    reset: {
+      false: 'inline whitespace-normal',
+      true: ''
+    },
+    theme: {
+      light: 'text-gray-900',
+      dark: 'text-gray-100'
+    },
+    color: {
+      default: '',
+      blue: '!text-dash-brand',
+      'blue-dark': '!text-dash-brand-dark dark:text-dash-brand-dim',
+      red: 'text-red-700'
+    },
+    size: {
+      xs: 'text-[0.625rem]',
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+      xl: 'text-xl'
+    },
+    weight: {
+      normal: 'font-normal',
+      medium: 'font-medium',
+      bold: 'font-bold'
+    },
+    italic: {
+      false: '',
+      true: 'italic'
+    },
+    underline: {
+      false: '',
+      true: 'underline'
+    },
+    lineThrough: {
+      false: '',
+      true: 'line-through'
+    },
+    transform: {
+      none: '',
+      uppercase: 'uppercase',
+      capitalize: 'capitalize'
+    },
+    opacity: {
+      0: 'opacity-0',
+      10: 'opacity-10',
+      20: 'opacity-20',
+      30: 'opacity-30',
+      40: 'opacity-40',
+      50: 'opacity-50',
+      60: 'opacity-60',
+      70: 'opacity-70',
+      80: 'opacity-80',
+      90: 'opacity-90',
+      100: 'opacity-100'
+    },
+    monospace: {
+      false: '',
+      true: 'font-grotesque'
+    },
+    dim: {
+      false: '',
+      true: '!opacity-60'
+    }
+  },
+  defaultVariants: {
+    reset: false,
+    theme: 'light',
+    color: 'default',
+    size: 'md',
+    weight: 'normal',
+    italic: false,
+    underline: false,
+    lineThrough: false,
+    transform: 'none',
+    opacity: 100,
+    monospace: false,
+    dim: false
+  }
+});
+/**
+ * A versatile text component with size, color, weight, decoration,
+ * transform, opacity, monospace, dimming, and theme-aware defaults.
+ */
+const Text = _a => {
+  var {
+      as,
+      className = '',
+      children
+    } = _a,
+    variantProps = tslib.__rest(_a, ["as", "className", "children"]);
+  const {
+    theme
+  } = ThemeContext.useTheme();
+  const classes = textStyles(Object.assign(Object.assign({}, variantProps), {
+    theme
+  })) + (className !== '' ? ` ${className}` : '');
+  const Component = as !== null && as !== void 0 ? as : 'span';
+  return jsxRuntime.jsx(Component, {
+    className: classes,
+    children: children
+  });
+};
+
+exports.Text = Text;
+exports.default = Text;
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,115 @@
+"use client";
+
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { useTheme } from '../../contexts/ThemeContext.esm.js';
+
+const textStyles = cva('', {
+  variants: {
+    reset: {
+      false: 'inline whitespace-normal',
+      true: ''
+    },
+    theme: {
+      light: 'text-gray-900',
+      dark: 'text-gray-100'
+    },
+    color: {
+      default: '',
+      blue: '!text-dash-brand',
+      'blue-dark': '!text-dash-brand-dark dark:text-dash-brand-dim',
+      red: 'text-red-700'
+    },
+    size: {
+      xs: 'text-[0.625rem]',
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+      xl: 'text-xl'
+    },
+    weight: {
+      normal: 'font-normal',
+      medium: 'font-medium',
+      bold: 'font-bold'
+    },
+    italic: {
+      false: '',
+      true: 'italic'
+    },
+    underline: {
+      false: '',
+      true: 'underline'
+    },
+    lineThrough: {
+      false: '',
+      true: 'line-through'
+    },
+    transform: {
+      none: '',
+      uppercase: 'uppercase',
+      capitalize: 'capitalize'
+    },
+    opacity: {
+      0: 'opacity-0',
+      10: 'opacity-10',
+      20: 'opacity-20',
+      30: 'opacity-30',
+      40: 'opacity-40',
+      50: 'opacity-50',
+      60: 'opacity-60',
+      70: 'opacity-70',
+      80: 'opacity-80',
+      90: 'opacity-90',
+      100: 'opacity-100'
+    },
+    monospace: {
+      false: '',
+      true: 'font-grotesque'
+    },
+    dim: {
+      false: '',
+      true: '!opacity-60'
+    }
+  },
+  defaultVariants: {
+    reset: false,
+    theme: 'light',
+    color: 'default',
+    size: 'md',
+    weight: 'normal',
+    italic: false,
+    underline: false,
+    lineThrough: false,
+    transform: 'none',
+    opacity: 100,
+    monospace: false,
+    dim: false
+  }
+});
+/**
+ * A versatile text component with size, color, weight, decoration,
+ * transform, opacity, monospace, dimming, and theme-aware defaults.
+ */
+const Text = _a => {
+  var {
+      as,
+      className = '',
+      children
+    } = _a,
+    variantProps = __rest(_a, ["as", "className", "children"]);
+  const {
+    theme
+  } = useTheme();
+  const classes = textStyles(Object.assign(Object.assign({}, variantProps), {
+    theme
+  })) + (className !== '' ? ` ${className}` : '');
+  const Component = as !== null && as !== void 0 ? as : 'span';
+  return jsx(Component, {
+    className: classes,
+    children: children
+  });
+};
+
+export { Text, Text as default };
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +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":";;;;;;;AAIA,MAAMA,UAAU,GAAGC,GAAG,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;AAaD;;;AAGG;AACUE,MAAAA,IAAI,GAAyBC,EAAiD,IAAI;EAArD,IAAA;MAAEC,EAAE;AAAEC,MAAAA,SAAS,GAAG,EAAE;AAAEC,MAAAA;AAAQ,KAAA,GAAAH,EAAmB;AAAdI,IAAAA,YAAY,GAA/CC,MAAA,CAAAL,EAAA,EAAA,CAAA,IAAA,EAAA,WAAA,EAAA,UAAA,CAAiD,CAAF;EACvF,MAAM;AAAE7B,IAAAA;GAAO,GAAGmC,QAAQ,EAAE;AAE5B,EAAA,MAAMC,OAAO,GAAG1C,UAAU,CACrB2C,MAAA,CAAAC,MAAA,CAAAD,MAAA,CAAAC,MAAA,CAAA,EAAA,EAAAL,YAAY;AACfjC,IAAAA;AAAK,GAAA,CAAA,CACL,IAAI+B,SAAS,KAAK,EAAE,GAAG,CAAA,CAAA,EAAIA,SAAS,CAAA,CAAE,GAAG,EAAE,CAAC;AAE9C,EAAA,MAAMQ,SAAS,GAAGT,EAAE,KAAA,IAAA,IAAFA,EAAE,KAAF,MAAA,GAAAA,EAAE,GAAI,MAAM;EAC9B,OAAOU,GAAA,CAACD,SAAS,EAAC;AAAAR,IAAAA,SAAS,EAAEK,OAAO;AAAAJ,IAAAA,QAAA,EAAGA;AAAQ,GAAA,CAAa;AAC9D;;;;"}