dash-ui-kit 1.0.93 → 2.0.0-dev

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

@@ -0,0 +1,184 @@
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
+var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
+
+const switchContainer = classVarianceAuthority.cva('flex transition-all duration-200 font-inter gap-2', {
+  variants: {
+    theme: {
+      light: 'bg-white border border-gray-100',
+      dark: 'bg-dash-primary-dark-blue/10 outline outline-1 outline-white/15 outline-offset-[-1px]'
+    },
+    size: {
+      sm: 'p-1 rounded-xl',
+      md: 'p-2 rounded-2xl',
+      xl: 'p-3 rounded-3xl'
+    },
+    disabled: {
+      false: '',
+      true: 'opacity-60 cursor-not-allowed'
+    }
+  },
+  compoundVariants: [
+  // Light theme shadows
+  {
+    theme: 'light',
+    size: 'sm',
+    class: 'shadow-sm'
+  }, {
+    theme: 'light',
+    size: 'md',
+    class: 'shadow-lg'
+  }, {
+    theme: 'light',
+    size: 'xl',
+    class: 'shadow-xl'
+  },
+  // Dark theme shadows with brand color
+  {
+    theme: 'dark',
+    size: 'sm',
+    class: 'shadow-sm shadow-dash-brand/10'
+  }, {
+    theme: 'dark',
+    size: 'md',
+    class: 'shadow-lg shadow-dash-brand/10'
+  }, {
+    theme: 'dark',
+    size: 'xl',
+    class: 'shadow-xl shadow-dash-brand/10'
+  }],
+  defaultVariants: {
+    theme: 'light',
+    size: 'md',
+    disabled: false
+  }
+});
+const switchButton = classVarianceAuthority.cva('flex-1 text-center transition-all duration-200 font-medium whitespace-nowrap cursor-pointer font-dash-main', {
+  variants: {
+    theme: {
+      light: '',
+      dark: ''
+    },
+    size: {
+      sm: 'py-1 px-2 rounded-lg text-sm',
+      md: 'py-2 px-3 rounded-[0.625rem] text-[1rem]',
+      xl: 'py-3 px-6 rounded-2xl text-lg font-semibold'
+    },
+    selected: {
+      true: '',
+      false: ''
+    },
+    disabled: {
+      false: '',
+      true: 'cursor-not-allowed opacity-50'
+    }
+  },
+  compoundVariants: [
+  // Selected state - light theme
+  {
+    theme: 'light',
+    selected: true,
+    class: 'bg-dash-brand text-white'
+  },
+  // Selected state - dark theme
+  {
+    theme: 'dark',
+    selected: true,
+    class: 'bg-dash-brand text-white'
+  },
+  // Unselected state - light theme
+  {
+    theme: 'light',
+    selected: false,
+    disabled: false,
+    class: 'text-dash-brand hover:bg-dash-brand/10 active:bg-dash-brand/20'
+  },
+  // Unselected state - dark theme
+  {
+    theme: 'dark',
+    selected: false,
+    disabled: false,
+    class: 'text-dash-brand hover:bg-dash-brand/10 active:bg-dash-brand/20'
+  },
+  // Disabled state - light theme
+  {
+    theme: 'light',
+    selected: false,
+    disabled: true,
+    class: 'text-gray-400'
+  },
+  // Disabled state - dark theme
+  {
+    theme: 'dark',
+    selected: false,
+    disabled: true,
+    class: 'text-gray-500'
+  }],
+  defaultVariants: {
+    theme: 'light',
+    size: 'md',
+    selected: false,
+    disabled: false
+  }
+});
+/**
+ * A switch component for selecting between multiple options.
+ * Supports individual option disabling, hover states, and responsive sizing.
+ * Uses dash design system sizing and theming with automatic light/dark mode.
+ * @example
+ * // With disabled options
+ * <Switch
+ *   options={[
+ *     { label: 'Basic', value: 'basic' },
+ *     { label: 'Pro', value: 'pro', disabled: true },
+ *     { label: 'Free', value: 'free' }
+ *   ]}
+ *   value="basic"
+ *   onChange={(value) => console.log(value)}
+ * />
+ */
+function Switch({
+  options,
+  value,
+  onChange,
+  size = 'md',
+  className = '',
+  disabled = false
+}) {
+  const {
+    theme
+  } = ThemeContext.useTheme();
+  const containerClasses = switchContainer({
+    theme,
+    size,
+    disabled
+  }) + ' ' + className;
+  return jsxRuntime.jsx("div", {
+    className: containerClasses,
+    children: options.map((option, index) => {
+      const isSelected = option.value === value;
+      const isOptionDisabled = disabled || option.disabled;
+      return jsxRuntime.jsx("button", {
+        onClick: () => !isOptionDisabled && onChange(option.value),
+        disabled: isOptionDisabled,
+        className: switchButton({
+          theme,
+          size,
+          selected: isSelected,
+          disabled: isOptionDisabled
+        }),
+        children: option.label
+      }, index);
+    })
+  });
+}
+
+exports.Switch = Switch;
+exports.default = Switch;
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/react/components/switch/index.tsx"],"sourcesContent":["import React from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\n\nconst switchContainer = cva(\n  'flex transition-all duration-200 font-inter gap-2',\n  {\n    variants: {\n      theme: {\n        light: 'bg-white border border-gray-100',\n        dark: 'bg-dash-primary-dark-blue/10 outline outline-1 outline-white/15 outline-offset-[-1px]'\n      },\n      size: {\n        sm: 'p-1 rounded-xl',\n        md: 'p-2 rounded-2xl',\n        xl: 'p-3 rounded-3xl'\n      },\n      disabled: {\n        false: '',\n        true: 'opacity-60 cursor-not-allowed'\n      }\n    },\n    compoundVariants: [\n      // Light theme shadows\n      {\n        theme: 'light',\n        size: 'sm',\n        class: 'shadow-sm'\n      },\n      {\n        theme: 'light',\n        size: 'md',\n        class: 'shadow-lg'\n      },\n      {\n        theme: 'light',\n        size: 'xl',\n        class: 'shadow-xl'\n      },\n      // Dark theme shadows with brand color\n      {\n        theme: 'dark',\n        size: 'sm',\n        class: 'shadow-sm shadow-dash-brand/10'\n      },\n      {\n        theme: 'dark',\n        size: 'md',\n        class: 'shadow-lg shadow-dash-brand/10'\n      },\n      {\n        theme: 'dark',\n        size: 'xl',\n        class: 'shadow-xl shadow-dash-brand/10'\n      }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      size: 'md',\n      disabled: false\n    }\n  }\n)\n\nconst switchButton = cva(\n  'flex-1 text-center transition-all duration-200 font-medium whitespace-nowrap cursor-pointer font-dash-main',\n  {\n    variants: {\n      theme: {\n        light: '',\n        dark: ''\n      },\n      size: {\n        sm: 'py-1 px-2 rounded-lg text-sm',\n        md: 'py-2 px-3 rounded-[0.625rem] text-[1rem]',\n        xl: 'py-3 px-6 rounded-2xl text-lg font-semibold'\n      },\n      selected: {\n        true: '',\n        false: ''\n      },\n      disabled: {\n        false: '',\n        true: 'cursor-not-allowed opacity-50'\n      }\n    },\n    compoundVariants: [\n      // Selected state - light theme\n      {\n        theme: 'light',\n        selected: true,\n        class: 'bg-dash-brand text-white'\n      },\n      // Selected state - dark theme\n      {\n        theme: 'dark',\n        selected: true,\n        class: 'bg-dash-brand text-white'\n      },\n      // Unselected state - light theme\n      {\n        theme: 'light',\n        selected: false,\n        disabled: false,\n        class: 'text-dash-brand hover:bg-dash-brand/10 active:bg-dash-brand/20'\n      },\n      // Unselected state - dark theme\n      {\n        theme: 'dark',\n        selected: false,\n        disabled: false,\n        class: 'text-dash-brand hover:bg-dash-brand/10 active:bg-dash-brand/20'\n      },\n      // Disabled state - light theme\n      {\n        theme: 'light',\n        selected: false,\n        disabled: true,\n        class: 'text-gray-400'\n      },\n      // Disabled state - dark theme\n      {\n        theme: 'dark',\n        selected: false,\n        disabled: true,\n        class: 'text-gray-500'\n      }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      size: 'md',\n      selected: false,\n      disabled: false\n    }\n  }\n)\n\ntype SwitchVariants = VariantProps<typeof switchContainer>\n\n/**\n * Configuration object for a single switch option.\n * \n * @template T - The type of the value (string or number)\n */\nexport interface SwitchOption<T = string | number> {\n  /** Display text for the option */\n  label: string\n  /** Unique value for the option */\n  value: T\n  /** Whether this specific option is disabled */\n  disabled?: boolean\n}\n\n/**\n * Props for the Switch component.\n * \n * @template T - The type of the option values (string or number)\n */\nexport interface SwitchProps<T = string | number> extends Omit<SwitchVariants, 'theme' | 'disabled'> {\n  /** Array of options to display */\n  options: SwitchOption<T>[]\n  /** Currently selected value */\n  value: T\n  /** Callback when selection changes */\n  onChange: (value: T) => void\n  /** Additional CSS classes */\n  className?: string\n  /** Whether the entire switch is disabled */\n  disabled?: boolean\n}\n\n/**\n * A switch component for selecting between multiple options.\n * Supports individual option disabling, hover states, and responsive sizing.\n * Uses dash design system sizing and theming with automatic light/dark mode.\n * @example\n * // With disabled options\n * <Switch\n *   options={[\n *     { label: 'Basic', value: 'basic' },\n *     { label: 'Pro', value: 'pro', disabled: true },\n *     { label: 'Free', value: 'free' }\n *   ]}\n *   value=\"basic\"\n *   onChange={(value) => console.log(value)}\n * />\n */\nexport function Switch<T = string | number>({\n  options,\n  value,\n  onChange,\n  size = 'md',\n  className = '',\n  disabled = false\n}: SwitchProps<T>): React.JSX.Element {\n  const { theme } = useTheme()\n\n  const containerClasses = switchContainer({\n    theme,\n    size,\n    disabled\n  }) + ' ' + className\n\n  return (\n    <div className={containerClasses}>\n      {options.map((option, index) => {\n        const isSelected = option.value === value\n        const isOptionDisabled = disabled || option.disabled\n\n        return (\n          <button\n            key={index}\n            onClick={() => !isOptionDisabled && onChange(option.value)}\n            disabled={isOptionDisabled}\n            className={switchButton({\n              theme,\n              size,\n              selected: isSelected,\n              disabled: isOptionDisabled\n            })}\n          >\n            {option.label}\n          </button>\n        )\n      })}\n    </div>\n  )\n}\n\nexport default Switch "],"names":["switchContainer","cva","variants","theme","light","dark","size","sm","md","xl","disabled","false","true","compoundVariants","class","defaultVariants","switchButton","selected","Switch","options","value","onChange","className","useTheme","containerClasses","_jsx","children","map","option","index","isSelected","isOptionDisabled","onClick","label"],"mappings":"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"}

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

@@ -0,0 +1,179 @@
+"use client";
+
+import { jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { useTheme } from '../../contexts/ThemeContext.esm.js';
+
+const switchContainer = cva('flex transition-all duration-200 font-inter gap-2', {
+  variants: {
+    theme: {
+      light: 'bg-white border border-gray-100',
+      dark: 'bg-dash-primary-dark-blue/10 outline outline-1 outline-white/15 outline-offset-[-1px]'
+    },
+    size: {
+      sm: 'p-1 rounded-xl',
+      md: 'p-2 rounded-2xl',
+      xl: 'p-3 rounded-3xl'
+    },
+    disabled: {
+      false: '',
+      true: 'opacity-60 cursor-not-allowed'
+    }
+  },
+  compoundVariants: [
+  // Light theme shadows
+  {
+    theme: 'light',
+    size: 'sm',
+    class: 'shadow-sm'
+  }, {
+    theme: 'light',
+    size: 'md',
+    class: 'shadow-lg'
+  }, {
+    theme: 'light',
+    size: 'xl',
+    class: 'shadow-xl'
+  },
+  // Dark theme shadows with brand color
+  {
+    theme: 'dark',
+    size: 'sm',
+    class: 'shadow-sm shadow-dash-brand/10'
+  }, {
+    theme: 'dark',
+    size: 'md',
+    class: 'shadow-lg shadow-dash-brand/10'
+  }, {
+    theme: 'dark',
+    size: 'xl',
+    class: 'shadow-xl shadow-dash-brand/10'
+  }],
+  defaultVariants: {
+    theme: 'light',
+    size: 'md',
+    disabled: false
+  }
+});
+const switchButton = cva('flex-1 text-center transition-all duration-200 font-medium whitespace-nowrap cursor-pointer font-dash-main', {
+  variants: {
+    theme: {
+      light: '',
+      dark: ''
+    },
+    size: {
+      sm: 'py-1 px-2 rounded-lg text-sm',
+      md: 'py-2 px-3 rounded-[0.625rem] text-[1rem]',
+      xl: 'py-3 px-6 rounded-2xl text-lg font-semibold'
+    },
+    selected: {
+      true: '',
+      false: ''
+    },
+    disabled: {
+      false: '',
+      true: 'cursor-not-allowed opacity-50'
+    }
+  },
+  compoundVariants: [
+  // Selected state - light theme
+  {
+    theme: 'light',
+    selected: true,
+    class: 'bg-dash-brand text-white'
+  },
+  // Selected state - dark theme
+  {
+    theme: 'dark',
+    selected: true,
+    class: 'bg-dash-brand text-white'
+  },
+  // Unselected state - light theme
+  {
+    theme: 'light',
+    selected: false,
+    disabled: false,
+    class: 'text-dash-brand hover:bg-dash-brand/10 active:bg-dash-brand/20'
+  },
+  // Unselected state - dark theme
+  {
+    theme: 'dark',
+    selected: false,
+    disabled: false,
+    class: 'text-dash-brand hover:bg-dash-brand/10 active:bg-dash-brand/20'
+  },
+  // Disabled state - light theme
+  {
+    theme: 'light',
+    selected: false,
+    disabled: true,
+    class: 'text-gray-400'
+  },
+  // Disabled state - dark theme
+  {
+    theme: 'dark',
+    selected: false,
+    disabled: true,
+    class: 'text-gray-500'
+  }],
+  defaultVariants: {
+    theme: 'light',
+    size: 'md',
+    selected: false,
+    disabled: false
+  }
+});
+/**
+ * A switch component for selecting between multiple options.
+ * Supports individual option disabling, hover states, and responsive sizing.
+ * Uses dash design system sizing and theming with automatic light/dark mode.
+ * @example
+ * // With disabled options
+ * <Switch
+ *   options={[
+ *     { label: 'Basic', value: 'basic' },
+ *     { label: 'Pro', value: 'pro', disabled: true },
+ *     { label: 'Free', value: 'free' }
+ *   ]}
+ *   value="basic"
+ *   onChange={(value) => console.log(value)}
+ * />
+ */
+function Switch({
+  options,
+  value,
+  onChange,
+  size = 'md',
+  className = '',
+  disabled = false
+}) {
+  const {
+    theme
+  } = useTheme();
+  const containerClasses = switchContainer({
+    theme,
+    size,
+    disabled
+  }) + ' ' + className;
+  return jsx("div", {
+    className: containerClasses,
+    children: options.map((option, index) => {
+      const isSelected = option.value === value;
+      const isOptionDisabled = disabled || option.disabled;
+      return jsx("button", {
+        onClick: () => !isOptionDisabled && onChange(option.value),
+        disabled: isOptionDisabled,
+        className: switchButton({
+          theme,
+          size,
+          selected: isSelected,
+          disabled: isOptionDisabled
+        }),
+        children: option.label
+      }, index);
+    })
+  });
+}
+
+export { Switch, Switch as default };
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/switch/index.tsx"],"sourcesContent":["import React from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\n\nconst switchContainer = cva(\n  'flex transition-all duration-200 font-inter gap-2',\n  {\n    variants: {\n      theme: {\n        light: 'bg-white border border-gray-100',\n        dark: 'bg-dash-primary-dark-blue/10 outline outline-1 outline-white/15 outline-offset-[-1px]'\n      },\n      size: {\n        sm: 'p-1 rounded-xl',\n        md: 'p-2 rounded-2xl',\n        xl: 'p-3 rounded-3xl'\n      },\n      disabled: {\n        false: '',\n        true: 'opacity-60 cursor-not-allowed'\n      }\n    },\n    compoundVariants: [\n      // Light theme shadows\n      {\n        theme: 'light',\n        size: 'sm',\n        class: 'shadow-sm'\n      },\n      {\n        theme: 'light',\n        size: 'md',\n        class: 'shadow-lg'\n      },\n      {\n        theme: 'light',\n        size: 'xl',\n        class: 'shadow-xl'\n      },\n      // Dark theme shadows with brand color\n      {\n        theme: 'dark',\n        size: 'sm',\n        class: 'shadow-sm shadow-dash-brand/10'\n      },\n      {\n        theme: 'dark',\n        size: 'md',\n        class: 'shadow-lg shadow-dash-brand/10'\n      },\n      {\n        theme: 'dark',\n        size: 'xl',\n        class: 'shadow-xl shadow-dash-brand/10'\n      }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      size: 'md',\n      disabled: false\n    }\n  }\n)\n\nconst switchButton = cva(\n  'flex-1 text-center transition-all duration-200 font-medium whitespace-nowrap cursor-pointer font-dash-main',\n  {\n    variants: {\n      theme: {\n        light: '',\n        dark: ''\n      },\n      size: {\n        sm: 'py-1 px-2 rounded-lg text-sm',\n        md: 'py-2 px-3 rounded-[0.625rem] text-[1rem]',\n        xl: 'py-3 px-6 rounded-2xl text-lg font-semibold'\n      },\n      selected: {\n        true: '',\n        false: ''\n      },\n      disabled: {\n        false: '',\n        true: 'cursor-not-allowed opacity-50'\n      }\n    },\n    compoundVariants: [\n      // Selected state - light theme\n      {\n        theme: 'light',\n        selected: true,\n        class: 'bg-dash-brand text-white'\n      },\n      // Selected state - dark theme\n      {\n        theme: 'dark',\n        selected: true,\n        class: 'bg-dash-brand text-white'\n      },\n      // Unselected state - light theme\n      {\n        theme: 'light',\n        selected: false,\n        disabled: false,\n        class: 'text-dash-brand hover:bg-dash-brand/10 active:bg-dash-brand/20'\n      },\n      // Unselected state - dark theme\n      {\n        theme: 'dark',\n        selected: false,\n        disabled: false,\n        class: 'text-dash-brand hover:bg-dash-brand/10 active:bg-dash-brand/20'\n      },\n      // Disabled state - light theme\n      {\n        theme: 'light',\n        selected: false,\n        disabled: true,\n        class: 'text-gray-400'\n      },\n      // Disabled state - dark theme\n      {\n        theme: 'dark',\n        selected: false,\n        disabled: true,\n        class: 'text-gray-500'\n      }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      size: 'md',\n      selected: false,\n      disabled: false\n    }\n  }\n)\n\ntype SwitchVariants = VariantProps<typeof switchContainer>\n\n/**\n * Configuration object for a single switch option.\n * \n * @template T - The type of the value (string or number)\n */\nexport interface SwitchOption<T = string | number> {\n  /** Display text for the option */\n  label: string\n  /** Unique value for the option */\n  value: T\n  /** Whether this specific option is disabled */\n  disabled?: boolean\n}\n\n/**\n * Props for the Switch component.\n * \n * @template T - The type of the option values (string or number)\n */\nexport interface SwitchProps<T = string | number> extends Omit<SwitchVariants, 'theme' | 'disabled'> {\n  /** Array of options to display */\n  options: SwitchOption<T>[]\n  /** Currently selected value */\n  value: T\n  /** Callback when selection changes */\n  onChange: (value: T) => void\n  /** Additional CSS classes */\n  className?: string\n  /** Whether the entire switch is disabled */\n  disabled?: boolean\n}\n\n/**\n * A switch component for selecting between multiple options.\n * Supports individual option disabling, hover states, and responsive sizing.\n * Uses dash design system sizing and theming with automatic light/dark mode.\n * @example\n * // With disabled options\n * <Switch\n *   options={[\n *     { label: 'Basic', value: 'basic' },\n *     { label: 'Pro', value: 'pro', disabled: true },\n *     { label: 'Free', value: 'free' }\n *   ]}\n *   value=\"basic\"\n *   onChange={(value) => console.log(value)}\n * />\n */\nexport function Switch<T = string | number>({\n  options,\n  value,\n  onChange,\n  size = 'md',\n  className = '',\n  disabled = false\n}: SwitchProps<T>): React.JSX.Element {\n  const { theme } = useTheme()\n\n  const containerClasses = switchContainer({\n    theme,\n    size,\n    disabled\n  }) + ' ' + className\n\n  return (\n    <div className={containerClasses}>\n      {options.map((option, index) => {\n        const isSelected = option.value === value\n        const isOptionDisabled = disabled || option.disabled\n\n        return (\n          <button\n            key={index}\n            onClick={() => !isOptionDisabled && onChange(option.value)}\n            disabled={isOptionDisabled}\n            className={switchButton({\n              theme,\n              size,\n              selected: isSelected,\n              disabled: isOptionDisabled\n            })}\n          >\n            {option.label}\n          </button>\n        )\n      })}\n    </div>\n  )\n}\n\nexport default Switch "],"names":["switchContainer","cva","variants","theme","light","dark","size","sm","md","xl","disabled","false","true","compoundVariants","class","defaultVariants","switchButton","selected","Switch","options","value","onChange","className","useTheme","containerClasses","_jsx","children","map","option","index","isSelected","isOptionDisabled","onClick","label"],"mappings":"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"}

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

@@ -0,0 +1,178 @@
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var RadixTabs = require('@radix-ui/react-tabs');
+var classVarianceAuthority = require('class-variance-authority');
+var ThemeContext = require('../../contexts/ThemeContext.cjs.js');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var RadixTabs__namespace = /*#__PURE__*/_interopNamespaceDefault(RadixTabs);
+
+const tabsRootStyles = classVarianceAuthority.cva('flex flex-col w-full', {
+  variants: {
+    theme: {
+      light: '',
+      dark: ''
+    }
+  },
+  defaultVariants: {
+    theme: 'light'
+  }
+});
+const tabsListStyles = classVarianceAuthority.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 = classVarianceAuthority.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 = classVarianceAuthority.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
+  } = ThemeContext.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 jsxRuntime.jsxs(RadixTabs__namespace.Root, {
+    className: rootClasses,
+    value: currentValue,
+    onValueChange: handleValueChange,
+    children: [jsxRuntime.jsx(RadixTabs__namespace.List, {
+      className: listClasses,
+      children: items.map(item => {
+        const isActive = currentValue === item.value;
+        const triggerClasses = tabsTriggerStyles({
+          theme,
+          active: isActive,
+          size
+        }) + (triggerClassName ? ` ${triggerClassName}` : '');
+        return jsxRuntime.jsx(RadixTabs__namespace.Trigger, {
+          value: item.value,
+          disabled: item.disabled,
+          className: triggerClasses,
+          children: item.label
+        }, item.value);
+      })
+    }), items.map(item => jsxRuntime.jsx(RadixTabs__namespace.Content, {
+      value: item.value,
+      className: contentClasses,
+      children: item.content
+    }, item.value))]
+  });
+};
+
+exports.Tabs = Tabs;
+exports.default = Tabs;
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.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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"}