@epilot/volt-ui 0.1.2 → 1.0.0-alpha.1

package/CHANGELOG.md

@@ -0,0 +1,379 @@
+## [1.0.0-alpha.1] - 2025-10-29
+
+### Breaking Changes
+
+- **Removed InputField component** - The `InputField` abstraction has been removed. `TextInput`, `TextArea`, and `Select` are now fully self-contained components with their own styling and context logic. This improves maintainability and makes each component easier to understand and modify independently. If you were directly using `InputField`, migrate to the specific form component you need.
+- **Removed Icons component** - Icons are now provided by the separate `@epilot360/icons` package. This reduces bundle size and allows independent icon updates. See the new Icons reference page in Storybook for migration instructions.
+- **Replaced SelectInput with Select component** - New composable Select component with consistent API. The old `SelectInput` export has been removed. See migration guide below.
+- **CheckboxField, RadioField, and SwitchField now use composable API** - These components have been refactored to follow the same composable pattern as TextInput and TextArea. The single-component props-based API has been replaced with composable sub-components for better flexibility and consistency. See migration guide below.
+- **Tooltip now uses fully composable API** - The monolithic Tooltip component with `content` prop has been replaced with a composable API following the same pattern as Dialog and DropdownMenu. The `TooltipProvider` is now accessible as `Tooltip.Provider` and is required for all tooltips. See migration guide below.
+
+### Features
+
+- Added comprehensive Icons reference page in Storybook with installation, usage, and integration examples
+- **New Select component** - Composable Select component built with Radix UI, following the same pattern as TextInput and TextArea
+  - Context-based architecture for better component composition
+  - Support for prefix, suffix, and actions
+  - Consistent API with other form components
+  - Full TypeScript support with proper type inference
+  - Comprehensive test coverage
+- **New Form component** - React Hook Form integration for type-safe form validation
+  - Minimal integration layer that preserves existing component styling
+  - `Form.Root` - FormProvider wrapper with onSubmit handling
+  - `Form.Field` - Controller that exposes field and fieldState via render prop
+  - Full Zod schema validation support via `@hookform/resolvers`
+  - Seamless integration with all existing form components (TextInput, TextArea, Select, etc.)
+  - Three comprehensive examples in Storybook demonstrating different patterns
+
+### Improvements
+
+- **Simplified value management** in TextInput and TextArea components
+  - Removed redundant internal state management
+  - More predictable controlled/uncontrolled behavior
+  - Reduced code complexity and improved maintainability
+- **Fixed test assertions** for Button and IconButton components to match actual class names
+- **Type standardization in Radio components** - Converted `interface` to `type` declarations in Radio, RadioGroup, and RadioField for consistency with codebase standards
+
+### Dependencies
+
+- Added `react-hook-form@7.65.0` - Performant form state management
+- Added `zod@4.1.12` - TypeScript-first schema validation
+- Added `@hookform/resolvers@5.2.2` - Integration between react-hook-form and Zod
+
+### Migration
+
+**Icons:**
+If you were using icons from `@epilot/volt-ui`, install `@epilot360/icons` and update imports:
+
+```tsx
+// Before
+import { HomeIcon } from "@epilot/volt-ui/icons/home"
+
+// After
+import { HomeIcon } from "@epilot360/icons"
+```
+
+**Form Integration (New):**
+To use forms with validation, wrap your form components with the new Form components:
+
+```tsx
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import { Form, zodResolver } from "@epilot/volt-ui"
+import { TextInput, Button } from "@epilot/volt-ui"
+
+const schema = z.object({
+  email: z.string().email("Invalid email"),
+})
+
+function MyForm() {
+  const form = useForm({
+    resolver: zodResolver(schema),
+  })
+
+  return (
+    <Form.Root form={form} onSubmit={(data) => console.log(data)}>
+      <Form.Field control={form.control} name="email">
+        {({ field, fieldState }) => (
+          <TextInput.Root 
+            id="email"
+            state={fieldState.error ? "error" : "default"}
+          >
+            <TextInput.Label>Email</TextInput.Label>
+            <TextInput.Control>
+              <TextInput.Input {...field} />
+            </TextInput.Control>
+            {fieldState.error && (
+              <TextInput.HelperText>
+                {fieldState.error.message}
+              </TextInput.HelperText>
+            )}
+          </TextInput.Root>
+        )}
+      </Form.Field>
+      <Button type="submit">Submit</Button>
+    </Form.Root>
+  )
+}
+```
+
+See `Form.stories.tsx` for more comprehensive examples including Select, TextArea, and Checkbox integration.
+
+**InputField, TextInput, and TextArea Structure Update:**
+All input components now require a `Container` component to wrap the label, control, and helper text. The `Description` component must be placed outside the `Container` to achieve the correct visual layout:
+
+```tsx
+// Before
+<TextInput.Root id="email">
+  <TextInput.Label>Email</TextInput.Label>
+  <TextInput.Control>
+    <TextInput.Input placeholder="Enter email..." />
+  </TextInput.Control>
+  <TextInput.Description>
+    We'll never share your email.
+  </TextInput.Description>
+  <TextInput.HelperText>Required field</TextInput.HelperText>
+</TextInput.Root>
+
+// After
+<TextInput.Root id="email">
+  <TextInput.Container>
+    <TextInput.Label>Email</TextInput.Label>
+    <TextInput.Control>
+      <TextInput.Input placeholder="Enter email..." />
+    </TextInput.Control>
+    <TextInput.HelperText>Required field</TextInput.HelperText>
+  </TextInput.Container>
+  <TextInput.Description>
+    We'll never share your email.
+  </TextInput.Description>
+</TextInput.Root>
+```
+
+This applies to `TextInput`, `TextArea`, and `InputField` components. The `Container` wraps elements that should appear inside the gray background box (Label, Control, HelperText), while `Description` appears outside for better visual hierarchy.
+
+**CheckboxField, RadioField, and SwitchField Composable API:**
+These components now use a composable API similar to TextInput and TextArea. The props-based API has been replaced with composable sub-components:
+
+```tsx
+// Before (CheckboxField)
+<CheckboxField
+  id="terms"
+  label="I agree to terms"
+  description="You must accept to continue"
+  helperText="Required field"
+  helperTextTone="error"
+  tone="accent"
+/>
+
+// After (CheckboxField)
+<CheckboxField.Root id="terms" state="error" tone="accent">
+  <CheckboxField.Checkbox />
+  <div className="flex flex-col gap-1">
+    <CheckboxField.Label>I agree to terms</CheckboxField.Label>
+    <CheckboxField.Description>
+      You must accept to continue
+    </CheckboxField.Description>
+    <CheckboxField.HelperText tone="error">
+      Required field
+    </CheckboxField.HelperText>
+  </div>
+</CheckboxField.Root>
+```
+
+```tsx
+// Before (RadioField - within RadioGroup)
+<RadioGroup defaultValue="option1">
+  <RadioField
+    value="option1"
+    label="Option 1"
+    description="Description text"
+    helperText="Helper text"
+    tone="accent"
+  />
+</RadioGroup>
+
+// After (RadioField)
+<RadioGroup defaultValue="option1">
+  <RadioField.Root id="radio-1" tone="accent">
+    <RadioField.Radio value="option1" />
+    <div className="flex flex-col gap-1">
+      <RadioField.Label>Option 1</RadioField.Label>
+      <RadioField.Description>Description text</RadioField.Description>
+      <RadioField.HelperText>Helper text</RadioField.HelperText>
+    </div>
+  </RadioField.Root>
+</RadioGroup>
+```
+
+```tsx
+// Before (SwitchField)
+<SwitchField
+  id="notifications"
+  label="Enable notifications"
+  description="Receive email updates"
+  helperText="You can change this later"
+  tone="accent"
+/>
+
+// After (SwitchField)
+<SwitchField.Root id="notifications" tone="accent">
+  <SwitchField.Switch />
+  <div className="flex flex-col gap-1">
+    <SwitchField.Label>Enable notifications</SwitchField.Label>
+    <SwitchField.Description>Receive email updates</SwitchField.Description>
+    <SwitchField.HelperText>You can change this later</SwitchField.HelperText>
+  </div>
+</SwitchField.Root>
+```
+
+**Key changes:**
+- `CheckboxField`, `RadioField`, and `SwitchField` are now namespaced objects with sub-components
+- `Root` component now renders as a `<label>` element and provides context (id, state, disabled, tone)
+- Separate components for `Checkbox`/`Radio`/`Switch`, `Label`, `Description`, and `HelperText`
+- The `helperTextTone` prop is now just `tone` on the `HelperText` component
+
+**Tooltip Composable API:**
+The Tooltip component now uses a fully composable API with separate sub-components. The monolithic component with `content` prop has been replaced with `Tooltip.Root`, `Tooltip.Trigger`, `Tooltip.Content`, and `Tooltip.Arrow`. Additionally, `Tooltip.Provider` is now required for all tooltips.
+
+```tsx
+// Before
+import { Tooltip, TooltipProvider } from "@epilot/volt-ui"
+
+<Tooltip content="This is a tooltip" side="top">
+  <Button>Hover me</Button>
+</Tooltip>
+
+// After
+import { Tooltip } from "@epilot/volt-ui"
+
+<Tooltip.Provider>
+  <Tooltip.Root>
+    <Tooltip.Trigger asChild>
+      <Button>Hover me</Button>
+    </Tooltip.Trigger>
+    <Tooltip.Content side="top">
+      This is a tooltip
+    </Tooltip.Content>
+  </Tooltip.Root>
+</Tooltip.Provider>
+```
+
+**With arrow:**
+```tsx
+// Before
+<Tooltip content="Tooltip with arrow">
+  <Button>Hover me</Button>
+</Tooltip>
+
+// After
+<Tooltip.Provider>
+  <Tooltip.Root>
+    <Tooltip.Trigger asChild>
+      <Button>Hover me</Button>
+    </Tooltip.Trigger>
+    <Tooltip.Content>
+      Tooltip with arrow
+      <Tooltip.Arrow />
+    </Tooltip.Content>
+  </Tooltip.Root>
+</Tooltip.Provider>
+```
+
+**Key changes:**
+- `Tooltip` is now a namespaced object with sub-components: `Provider`, `Root`, `Trigger`, `Content`, `Arrow`
+- `TooltipProvider` import removed - use `Tooltip.Provider` instead
+- `Tooltip.Provider` is required and must wrap all tooltip instances
+- `content` prop replaced with `Tooltip.Content` component for better flexibility
+- Use `asChild` prop on `Tooltip.Trigger` to compose with other components
+- Optional `Tooltip.Arrow` component available for visual arrow pointer
+- All Radix UI Tooltip props (side, align, sideOffset, etc.) are now properly exposed through sub-components
+
+**SelectInput → Select:**
+The `SelectInput` component has been replaced with the new composable `Select` component:
+
+```tsx
+// Before
+import { SelectInput } from "@epilot/volt-ui"
+
+<SelectInput
+  id="select"
+  label="Choose option"
+  placeholder="Select..."
+  options={[
+    { value: "1", label: "Option 1" },
+    { value: "2", label: "Option 2" }
+  ]}
+/>
+
+// After
+import { Select } from "@epilot/volt-ui"
+import * as RadixSelect from "@radix-ui/react-select"
+
+<RadixSelect.Root>
+  <Select.Root id="select">
+    <Select.Label>Choose option</Select.Label>
+    <Select.Trigger>
+      <Select.Value placeholder="Select..." />
+    </Select.Trigger>
+    <Select.Content>
+      <Select.Item value="1">Option 1</Select.Item>
+      <Select.Item value="2">Option 2</Select.Item>
+    </Select.Content>
+  </Select.Root>
+</RadixSelect.Root>
+```
+
+---
+
+## 0.1.0 (2025-10-20)
+
+Initial release of `@epilot/volt-ui` - a clean, lightweight, and tree-shakeable design system library for React applications.
+
+This project is forked from `@epilot/core-ui` and has been renamed to Volt UI. All references, package names, and CSS files have been updated accordingly.
+
+### Features
+
+- 🌳 Tree-shakeable component imports
+- 🎨 Tailwind CSS v4 with multiple build variants
+- 🚀 Zero runtime CSS injection
+- 📦 Modular architecture for optimal bundle size
+- 🎯 Full TypeScript support
+- 🌙 Light and dark mode ready
+- 🎭 Portal support for scoped CSS (Dialog, Popover, DropdownMenu, Tooltip, SelectInput)
+
+### CSS Builds
+
+- `volt-ui.css` - Tailwind 4 precompiled component styles
+- `volt-ui.scoped.css` - Scoped CSS using `[data-volt]` and `[data-volt-portal]` selectors
+- `volt-ui.flat.css` - Flattened CSS for Tailwind 3 / no Tailwind
+- `volt-ui.theme.css` - Tailwind 4 input for consumer build
+- `reset.css`, `reset.flat.css`, `reset.scoped.css` - Optional reset variants
+
+### Components
+
+- Accordion
+- Badge
+- Button & IconButton
+- Checkbox & CheckboxField
+- Dialog
+- DropdownMenu
+- Heading
+- InputField
+- Link
+- Popover
+- Radio, RadioField & RadioGroup
+- SelectInput
+- Separator
+- Switch & SwitchField
+- Tabs
+- Text
+- TextArea
+- TextInput
+- Tooltip
+- Validation
+
+---
+
+## Previous History (as @epilot/core-ui)
+
+For historical reference, this project was previously published as `@epilot/core-ui` with the following notable releases:
+
+### 0.2.0-alpha.18 (2025-10-09)
+- build: add reset.flat.css and reset.scoped.css outputs
+- docs: README usage for reset.flat.css and reset.scoped.css
+
+### 0.2.0-alpha.17 (2025-10-09)
+- feat: add scoped CSS build (scoped under `:where([data-cui])`)
+- build: add PostCSS selector prefixing and Rollup target for scoped build
+- docs: document scoped usage and `[data-cui]` wrapper in README
+- docs: document that `reset.css` is now opt-in
+- perf/chore: export scoped CSS and mark as sideEffect in package
+- breaking: remove implicit `reset.css` from main CSS; consumers must import reset explicitly if needed
+
+### 0.2.0-alpha.16 (2025-10-08)
+- docs: Scoped CSS for MFEs, Shadow DOM example
+
+### 0.2.0-alpha.15
+- chore: add reset.css to dist and export map
+- fix: default border color transparent via reset layer

package/README.md

@@ -12,6 +12,20 @@ A clean, lightweight, and tree-shakeable design system library for React applica
 - 📦 **Modular**: Individual component imports for optimal bundle size
 - 🎯 **TypeScript**: Full type safety and IntelliSense support
 - 🌙 **Theme support**: Light and dark mode ready
+- 🧩 **Composable**: Self-contained components with intuitive composition patterns
+
+## Architecture
+
+Form components (TextInput, TextArea, Select) are fully self-contained with their own:
+- Context management for state and accessibility
+- Container styling with state-based backgrounds
+- Composable sub-components (Root, Container, Label, Control, etc.)
+- Independent type definitions and validation
+
+This architecture makes each component:
+- ✅ Easy to understand and maintain
+- ✅ Independent from shared abstractions
+- ✅ Consistent API patterns across all form components
 
 ## Installation
 
@@ -33,11 +47,34 @@ function App() {
 }
 ```
 
+### Composable Form Components
+
+```tsx
+import { TextInput } from "@epilot/volt-ui";
+
+function LoginForm() {
+  return (
+    <TextInput.Root id="email">
+      <TextInput.Container>
+        <TextInput.Label>Email</TextInput.Label>
+        <TextInput.Control>
+          <TextInput.Input type="email" placeholder="Enter your email" />
+        </TextInput.Control>
+        <TextInput.HelperText>We'll never share your email</TextInput.HelperText>
+      </TextInput.Container>
+    </TextInput.Root>
+  );
+}
+```
+
+All form components (TextInput, TextArea, Select) follow this composable pattern for maximum flexibility.
+
 ### For Tree Shaking (Recommended)
 
 ```tsx
 // Import only what you need
 import { Button } from "@epilot/volt-ui/components/Button";
+import { TextInput } from "@epilot/volt-ui/components/TextInput";
 ```
 
 ### CSS Artifacts and Which One To Use  
@@ -83,7 +120,7 @@ export function ScopedArea() {
 }
 ```
 
-**Note:** Components that use portals (Dialog, Popover, DropdownMenu, Tooltip, SelectInput) automatically add a `data-volt-portal` attribute to their portaled content, ensuring scoped styles work correctly even when content is rendered outside the main `data-volt` container.
+**Note:** Components that use portals (Dialog, Popover, DropdownMenu, Tooltip, Select) automatically add a `data-volt-portal` attribute to their portaled content, ensuring scoped styles work correctly even when content is rendered outside the main `data-volt` container.
 
 #### Reset is now opt-in
 

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

@@ -1,23 +1,104 @@
-import React from "react";
-export type RadixPropsVariant = "classic" | "solid" | "soft" | "surface" | "outline" | "ghost";
-export type NewVariant = "primary" | "secondary" | "tertiary";
-export declare const VARIANT_MAP: Record<RadixPropsVariant | NewVariant, NewVariant>;
-export declare const getSizeClass: (size: ButtonSize | ButtonSizeLegacy | string | number) => ButtonSize;
-export declare const getBaseButtonClasses: () => string[];
-export declare const getVariantClasses: (variant: NewVariant, warning: boolean) => string[];
-export declare const getSizeClasses: (size: ButtonSize) => string[];
-export declare const getIconButtonSizeClasses: (size: ButtonSize) => string[];
+import type { ComponentPropsWithoutRef } from "react";
+export type ButtonVariant = "primary" | "secondary" | "tertiary";
 export type ButtonSize = "sm" | "base" | "lg";
-export type ButtonSizeLegacy = 1 | 2 | 3 | "1" | "2" | "3";
-export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    variant?: RadixPropsVariant | NewVariant;
-    size?: ButtonSize | ButtonSizeLegacy;
+export type ButtonProps = ComponentPropsWithoutRef<"button"> & {
+    /**
+     * Visual style variant of the button.
+     * - primary: Solid accent background (most prominent)
+     * - secondary: Accent surface with border (moderate emphasis)
+     * - tertiary: Transparent background (least emphasis)
+     * @default "primary"
+     */
+    variant?: ButtonVariant;
+    /**
+     * Size of the button.
+     * - sm: Small (24px height)
+     * - base: Default (32px height)
+     * - lg: Large (40px height)
+     * @default "base"
+     */
+    size?: ButtonSize;
+    /**
+     * Applies error/warning styling to the button.
+     * Useful for destructive actions like delete or cancel.
+     * @default false
+     */
     warning?: boolean;
-    children: React.ReactNode;
+    /**
+     * If true, button takes full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Renders the button as a child element while preserving button behavior.
+     * Useful for rendering as a Link component or custom element.
+     * @default false
+     */
+    asChild?: boolean;
 };
-export declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    variant?: RadixPropsVariant | NewVariant;
-    size?: ButtonSize | ButtonSizeLegacy;
+/**
+ * Button component for user actions.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Button variant="primary" onClick={handleClick}>
+ *   Click me
+ * </Button>
+ * ```
+ *
+ * @example Warning/destructive action
+ * ```tsx
+ * <Button variant="primary" warning onClick={handleDelete}>
+ *   Delete Account
+ * </Button>
+ * ```
+ *
+ * @example As a Link (with asChild)
+ * ```tsx
+ * <Button asChild>
+ *   <Link href="/dashboard">Go to Dashboard</Link>
+ * </Button>
+ * ```
+ *
+ * @example Full width
+ * ```tsx
+ * <Button variant="secondary" fullWidth>
+ *   Submit Form
+ * </Button>
+ * ```
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    /**
+     * Visual style variant of the button.
+     * - primary: Solid accent background (most prominent)
+     * - secondary: Accent surface with border (moderate emphasis)
+     * - tertiary: Transparent background (least emphasis)
+     * @default "primary"
+     */
+    variant?: ButtonVariant;
+    /**
+     * Size of the button.
+     * - sm: Small (24px height)
+     * - base: Default (32px height)
+     * - lg: Large (40px height)
+     * @default "base"
+     */
+    size?: ButtonSize;
+    /**
+     * Applies error/warning styling to the button.
+     * Useful for destructive actions like delete or cancel.
+     * @default false
+     */
     warning?: boolean;
-    children: React.ReactNode;
-} & React.RefAttributes<HTMLButtonElement>>;
+    /**
+     * If true, button takes full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Renders the button as a child element while preserving button behavior.
+     * Useful for rendering as a Link component or custom element.
+     * @default false
+     */
+    asChild?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import r from"classnames";import t from"react";const a={classic:"primary",solid:"primary",soft:"tertiary",surface:"tertiary",outline:"tertiary",ghost:"tertiary",primary:"primary",secondary:"secondary",tertiary:"tertiary"},s=e=>{switch(String(e)){case"1":case"sm":return"sm";case"2":case"base":default:return"base";case"3":case"lg":return"lg"}},n=()=>["inline-flex","items-center","justify-center","border","rounded","cursor-pointer","transition-all","duration-100","ease-in-out","relative","font-bold","text-base","focus-visible:outline-accent","disabled:cursor-not-allowed","disabled:pointer-events-none","active:translate-y-0.5"],o=(e,r)=>{if(r)switch(e){case"primary":return["bg-error-solid","text-error-contrast","border-transparent","hover:bg-error-solid-hover","focus-visible:outline-error","disabled:bg-error-a3","disabled:text-error-a8"];case"secondary":return["bg-error-surface","text-error-default","border-error-ui","hover:bg-error-surface-hover","hover:border-error-ui-hover","focus-visible:outline-error","disabled:bg-error-surface","disabled:text-error-a8","disabled:border-transparent"];case"tertiary":return["bg-transparent","text-red-light","border-transparent","hover:bg-red-soft","focus-visible:outline-error","disabled:bg-transparent","disabled:text-error-disabled"]}switch(e){case"primary":return["bg-accent-solid","text-accent-contrast","border-transparent","hover:bg-accent-solid-hover","disabled:bg-gray-a3","disabled:text-gray-a8"];case"secondary":return["bg-accent-surface","text-accent-default","border-accent-ui","hover:style-accent-surface-hover","disabled:bg-gray-surface","disabled:text-gray-disabled","disabled:border-transparent"];case"tertiary":return["bg-transparent","text-accent-light","border-transparent","hover:bg-accent-soft","hover:text-accent-default","disabled:bg-transparent","disabled:text-gray-disabled"]}},i=e=>{switch(e){case"sm":return["px-2","min-h-6","rounded-sm","text-sm"];case"base":return["px-3","min-h-8","rounded","text-base"];case"lg":return["px-4","min-h-10","rounded-md","text-base"]}},d=e=>{switch(e){case"sm":return["w-6","h-6","p-0","rounded-sm","text-sm"];case"base":return["w-8","h-8","p-0","rounded"];case"lg":return["w-10","h-10","p-0","rounded-md"]}},c=t.forwardRef(({variant:t="primary",size:n="base",warning:d=!1,className:c,children:l,...b},u)=>{const m=s(n),f=r("inline-flex","items-center","justify-center","border","rounded","cursor-pointer","transition-all","duration-100","ease-in-out","relative","font-bold","text-base","focus-visible:outline-accent","disabled:cursor-not-allowed","disabled:pointer-events-none","active:translate-y-0.5",...o(a[t],d),...i(m),c);return e("button",{className:f,ref:u,...b,children:l})});c.displayName="Button";export{c as Button,a as VARIANT_MAP,n as getBaseButtonClasses,d as getIconButtonSizeClasses,s as getSizeClass,i as getSizeClasses,o as getVariantClasses};
+import{jsx as e}from"react/jsx-runtime";import{Slot as r}from"@radix-ui/react-slot";import t from"classnames";import{forwardRef as o}from"react";const i=["inline-flex","items-center","justify-center","gap-2","font-medium","transition-colors","duration-150","cursor-pointer","focus-visible:outline-accent","focus-visible:outline-2","focus-visible:outline-offset-2","disabled:cursor-not-allowed","disabled:pointer-events-none","disabled:opacity-50"],s={primary:["bg-accent-solid","text-accent-contrast","hover:bg-accent-solid-hover","active:bg-accent-solid-hover"],secondary:["bg-accent-soft","text-accent-light","hover:bg-accent-soft-hover"],tertiary:["bg-transparent","text-accent-light","hover:bg-accent-soft"]},n={primary:["bg-error-solid","text-error-contrast","hover:bg-error-solid-hover","focus-visible:outline-error"],secondary:["bg-error-soft","text-error-default","hover:bg-error-soft-hover","focus-visible:outline-error"],tertiary:["bg-transparent","text-error-light","hover:bg-error-soft","hover:text-error-default","focus-visible:outline-error"]},a={sm:["px-3","py-1","min-h-6","text-sm","rounded-full"],base:["px-4","py-2","min-h-8","text-base","rounded-full"],lg:["px-5","py-2.5","min-h-10","text-base","rounded-full"]},l=o(({variant:o="primary",size:l="base",warning:c=!1,fullWidth:u=!1,asChild:d=!1,className:f,type:b="button",children:m,...p},h)=>{const v=d?r:"button",g=t(i,c?n[o]:s[o],a[l],u&&"w-full",f);return e(v,{className:g,ref:h,type:d?void 0:b,...p,children:m})});l.displayName="Button";export{l as Button};
 //# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React from \"react\";\n\nexport type RadixPropsVariant =\n  | \"classic\"\n  | \"solid\"\n  | \"soft\"\n  | \"surface\"\n  | \"outline\"\n  | \"ghost\";\nexport type NewVariant = \"primary\" | \"secondary\" | \"tertiary\";\n\n// Temporary mapping to ensure backwards compatibility with Radix variants\nexport const VARIANT_MAP: Record<RadixPropsVariant | NewVariant, NewVariant> = {\n  classic: \"primary\",\n  solid: \"primary\",\n  soft: \"tertiary\",\n  surface: \"tertiary\",\n  outline: \"tertiary\",\n  ghost: \"tertiary\",\n  primary: \"primary\",\n  secondary: \"secondary\",\n  tertiary: \"tertiary\",\n};\n\n// Size mapping function to support both legacy numeric values and new semantic values\nexport const getSizeClass = (\n  size: ButtonSize | ButtonSizeLegacy | string | number\n): ButtonSize => {\n  const sizeStr = String(size);\n\n  switch (sizeStr) {\n    case \"1\":\n    case \"sm\":\n      return \"sm\";\n    case \"2\":\n    case \"base\":\n      return \"base\";\n    case \"3\":\n    case \"lg\":\n      return \"lg\";\n    default:\n      return \"base\"; // Default fallback\n  }\n};\n\n// Generate base button classes using Tailwind\nexport const getBaseButtonClasses = () => {\n  return [\n    \"inline-flex\",\n    \"items-center\",\n    \"justify-center\",\n    \"border\",\n    \"rounded\",\n    \"cursor-pointer\",\n    \"transition-all\",\n    \"duration-100\",\n    \"ease-in-out\",\n    \"relative\",\n    \"font-bold\",\n    \"text-base\",\n    \"focus-visible:outline-accent\",\n    \"disabled:cursor-not-allowed\",\n    \"disabled:pointer-events-none\",\n    \"active:translate-y-0.5\",\n  ];\n};\n\n// Generate variant-specific classes\nexport const getVariantClasses = (variant: NewVariant, warning: boolean) => {\n  if (warning) {\n    switch (variant) {\n      case \"primary\":\n        return [\n          \"bg-error-solid\",\n          \"text-error-contrast\",\n          \"border-transparent\",\n          \"hover:bg-error-solid-hover\",\n          \"focus-visible:outline-error\",\n          \"disabled:bg-error-a3\",\n          \"disabled:text-error-a8\",\n        ];\n      case \"secondary\":\n        return [\n          \"bg-error-surface\",\n          \"text-error-default\",\n          \"border-error-ui\",\n          \"hover:bg-error-surface-hover\",\n          \"hover:border-error-ui-hover\",\n          \"focus-visible:outline-error\",\n          \"disabled:bg-error-surface\",\n          \"disabled:text-error-a8\",\n          \"disabled:border-transparent\",\n        ];\n      case \"tertiary\":\n        return [\n          \"bg-transparent\",\n          \"text-red-light\",\n          \"border-transparent\",\n          \"hover:bg-red-soft\",\n          \"focus-visible:outline-error\",\n          \"disabled:bg-transparent\",\n          \"disabled:text-error-disabled\",\n        ];\n    }\n  }\n\n  switch (variant) {\n    case \"primary\":\n      return [\n        \"bg-accent-solid\",\n        \"text-accent-contrast\",\n        \"border-transparent\",\n        \"hover:bg-accent-solid-hover\",\n        \"disabled:bg-gray-a3\",\n        \"disabled:text-gray-a8\",\n      ];\n    case \"secondary\":\n      return [\n        \"bg-accent-surface\",\n        \"text-accent-default\",\n        \"border-accent-ui\",\n        \"hover:style-accent-surface-hover\",\n        \"disabled:bg-gray-surface\",\n        \"disabled:text-gray-disabled\",\n        \"disabled:border-transparent\",\n      ];\n    case \"tertiary\":\n      return [\n        \"bg-transparent\",\n        \"text-accent-light\",\n        \"border-transparent\",\n        \"hover:bg-accent-soft\",\n        \"hover:text-accent-default\",\n        \"disabled:bg-transparent\",\n        \"disabled:text-gray-disabled\",\n      ];\n  }\n};\n\n// Generate size-specific classes\nexport const getSizeClasses = (size: ButtonSize) => {\n  switch (size) {\n    case \"sm\":\n      return [\"px-2\", \"min-h-6\", \"rounded-sm\", \"text-sm\"];\n    case \"base\":\n      return [\"px-3\", \"min-h-8\", \"rounded\", \"text-base\"];\n    case \"lg\":\n      return [\"px-4\", \"min-h-10\", \"rounded-md\", \"text-base\"];\n  }\n};\n\n// Generate size-specific classes for IconButton (square aspect ratio)\nexport const getIconButtonSizeClasses = (size: ButtonSize) => {\n  switch (size) {\n    case \"sm\":\n      return [\"w-6\", \"h-6\", \"p-0\", \"rounded-sm\", \"text-sm\"];\n    case \"base\":\n      return [\"w-8\", \"h-8\", \"p-0\", \"rounded\"];\n    case \"lg\":\n      return [\"w-10\", \"h-10\", \"p-0\", \"rounded-md\"];\n  }\n};\n\nexport type ButtonSize = \"sm\" | \"base\" | \"lg\";\nexport type ButtonSizeLegacy = 1 | 2 | 3 | \"1\" | \"2\" | \"3\";\n\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  variant?: RadixPropsVariant | NewVariant;\n  size?: ButtonSize | ButtonSizeLegacy;\n  warning?: boolean;\n  children: React.ReactNode;\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = \"primary\",\n      size = \"base\",\n      warning = false,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const sizeClass = getSizeClass(size);\n    const mappedVariant = VARIANT_MAP[variant];\n\n    const buttonClasses = cx(\n      ...getBaseButtonClasses(),\n      ...getVariantClasses(mappedVariant, warning),\n      ...getSizeClasses(sizeClass),\n      className\n    );\n\n    return (\n      <button className={buttonClasses} ref={ref} {...props}>\n        {children}\n      </button>\n    );\n  }\n);\n\nButton.displayName = \"Button\";\n"],"names":["VARIANT_MAP","classic","solid","soft","surface","outline","ghost","primary","secondary","tertiary","getSizeClass","size","String","getBaseButtonClasses","getVariantClasses","variant","warning","getSizeClasses","getIconButtonSizeClasses","Button","React","forwardRef","className","children","props","ref","sizeClass","buttonClasses","cx","_jsx","displayName"],"mappings":"uFAaO,MAAMA,EAAkE,CAC7EC,QAAS,UACTC,MAAO,UACPC,KAAM,WACNC,QAAS,WACTC,QAAS,WACTC,MAAO,WACPC,QAAS,UACTC,UAAW,YACXC,SAAU,YAICC,EACXC,IAIA,OAFgBC,OAAOD,IAGrB,IAAK,IACL,IAAK,KACH,MAAO,KACT,IAAK,IACL,IAAK,OAKL,QACE,MAAO,OAJT,IAAK,IACL,IAAK,KACH,MAAO,OAOAE,EAAuB,IAC3B,CACL,cACA,eACA,iBACA,SACA,UACA,iBACA,iBACA,eACA,cACA,WACA,YACA,YACA,+BACA,8BACA,+BACA,0BAKSC,EAAoB,CAACC,EAAqBC,KACrD,GAAIA,EACF,OAAQD,GACN,IAAK,UACH,MAAO,CACL,iBACA,sBACA,qBACA,6BACA,8BACA,uBACA,0BAEJ,IAAK,YACH,MAAO,CACL,mBACA,qBACA,kBACA,+BACA,8BACA,8BACA,4BACA,yBACA,+BAEJ,IAAK,WACH,MAAO,CACL,iBACA,iBACA,qBACA,oBACA,8BACA,0BACA,gCAKR,OAAQA,GACN,IAAK,UACH,MAAO,CACL,kBACA,uBACA,qBACA,8BACA,sBACA,yBAEJ,IAAK,YACH,MAAO,CACL,oBACA,sBACA,mBACA,mCACA,2BACA,8BACA,+BAEJ,IAAK,WACH,MAAO,CACL,iBACA,oBACA,qBACA,uBACA,4BACA,0BACA,iCAMKE,EAAkBN,IAC7B,OAAQA,GACN,IAAK,KACH,MAAO,CAAC,OAAQ,UAAW,aAAc,WAC3C,IAAK,OACH,MAAO,CAAC,OAAQ,UAAW,UAAW,aACxC,IAAK,KACH,MAAO,CAAC,OAAQ,WAAY,aAAc,eAKnCO,EAA4BP,IACvC,OAAQA,GACN,IAAK,KACH,MAAO,CAAC,MAAO,MAAO,MAAO,aAAc,WAC7C,IAAK,OACH,MAAO,CAAC,MAAO,MAAO,MAAO,WAC/B,IAAK,KACH,MAAO,CAAC,OAAQ,OAAQ,MAAO,gBAcxBQ,EAASC,EAAMC,WAC1B,EAEIN,UAAU,UACVJ,OAAO,OACPK,WAAU,EACVM,YACAC,cACGC,GAELC,KAEA,MAAMC,EAAYhB,EAAaC,GAGzBgB,EAAgBC,EA5ItB,cACA,eACA,iBACA,SACA,UACA,iBACA,iBACA,eACA,cACA,WACA,YACA,YACA,+BACA,8BACA,+BACA,4BA+HKd,EAJiBd,EAAYe,GAIIC,MACjCC,EAAeS,GAClBJ,GAGF,OACEO,EAAA,SAAA,CAAQP,UAAWK,EAAeF,IAAKA,KAASD,EAAKD,SAClDA,MAMTJ,EAAOW,YAAc"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport cx from \"classnames\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { forwardRef } from \"react\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"tertiary\";\nexport type ButtonSize = \"sm\" | \"base\" | \"lg\";\n\nexport type ButtonProps = ComponentPropsWithoutRef<\"button\"> & {\n  /**\n   * Visual style variant of the button.\n   * - primary: Solid accent background (most prominent)\n   * - secondary: Accent surface with border (moderate emphasis)\n   * - tertiary: Transparent background (least emphasis)\n   * @default \"primary\"\n   */\n  variant?: ButtonVariant;\n\n  /**\n   * Size of the button.\n   * - sm: Small (24px height)\n   * - base: Default (32px height)\n   * - lg: Large (40px height)\n   * @default \"base\"\n   */\n  size?: ButtonSize;\n\n  /**\n   * Applies error/warning styling to the button.\n   * Useful for destructive actions like delete or cancel.\n   * @default false\n   */\n  warning?: boolean;\n\n  /**\n   * If true, button takes full width of its container.\n   * @default false\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Renders the button as a child element while preserving button behavior.\n   * Useful for rendering as a Link component or custom element.\n   * @default false\n   */\n  asChild?: boolean;\n};\n\nconst baseClasses = [\n  \"inline-flex\",\n  \"items-center\",\n  \"justify-center\",\n  \"gap-2\",\n  \"font-medium\",\n  \"transition-colors\",\n  \"duration-150\",\n  \"cursor-pointer\",\n  \"focus-visible:outline-accent\",\n  \"focus-visible:outline-2\",\n  \"focus-visible:outline-offset-2\",\n  \"disabled:cursor-not-allowed\",\n  \"disabled:pointer-events-none\",\n  \"disabled:opacity-50\",\n];\n\nconst variantClasses: Record<ButtonVariant, string[]> = {\n  primary: [\n    \"bg-accent-solid\",\n    \"text-accent-contrast\",\n    \"hover:bg-accent-solid-hover\",\n    \"active:bg-accent-solid-hover\",\n  ],\n  secondary: [\n    \"bg-accent-soft\",\n    \"text-accent-light\",\n    \"hover:bg-accent-soft-hover\"\n  ],\n  tertiary: [\n    \"bg-transparent\",\n    \"text-accent-light\",\n    \"hover:bg-accent-soft\",\n  ],\n};\n\nconst warningVariantClasses: Record<ButtonVariant, string[]> = {\n  primary: [\n    \"bg-error-solid\",\n    \"text-error-contrast\",\n    \"hover:bg-error-solid-hover\",\n    \"focus-visible:outline-error\",\n  ],\n  secondary: [\n    \"bg-error-soft\",\n    \"text-error-default\",\n    \"hover:bg-error-soft-hover\",\n    \"focus-visible:outline-error\",\n  ],\n  tertiary: [\n    \"bg-transparent\",\n    \"text-error-light\",\n    \"hover:bg-error-soft\",\n    \"hover:text-error-default\",\n    \"focus-visible:outline-error\",\n  ],\n};\n\nconst sizeClasses: Record<ButtonSize, string[]> = {\n  sm: [\"px-3\", \"py-1\", \"min-h-6\", \"text-sm\", \"rounded-full\"],\n  base: [\"px-4\", \"py-2\", \"min-h-8\", \"text-base\", \"rounded-full\"],\n  lg: [\"px-5\", \"py-2.5\", \"min-h-10\", \"text-base\", \"rounded-full\"],\n};\n\n/**\n * Button component for user actions.\n *\n * @example Basic usage\n * ```tsx\n * <Button variant=\"primary\" onClick={handleClick}>\n *   Click me\n * </Button>\n * ```\n *\n * @example Warning/destructive action\n * ```tsx\n * <Button variant=\"primary\" warning onClick={handleDelete}>\n *   Delete Account\n * </Button>\n * ```\n *\n * @example As a Link (with asChild)\n * ```tsx\n * <Button asChild>\n *   <Link href=\"/dashboard\">Go to Dashboard</Link>\n * </Button>\n * ```\n *\n * @example Full width\n * ```tsx\n * <Button variant=\"secondary\" fullWidth>\n *   Submit Form\n * </Button>\n * ```\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = \"primary\",\n      size = \"base\",\n      warning = false,\n      fullWidth = false,\n      asChild = false,\n      className,\n      type = \"button\",\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n\n    const classes = cx(\n      baseClasses,\n      warning ? warningVariantClasses[variant] : variantClasses[variant],\n      sizeClasses[size],\n      fullWidth && \"w-full\",\n      className\n    );\n\n    return (\n      <Comp\n        className={classes}\n        ref={ref}\n        type={asChild ? undefined : type}\n        {...props}\n      >\n        {children}\n      </Comp>\n    );\n  }\n);\n\nButton.displayName = \"Button\";\n"],"names":["baseClasses","variantClasses","primary","secondary","tertiary","warningVariantClasses","sizeClasses","sm","base","lg","Button","forwardRef","variant","size","warning","fullWidth","asChild","className","type","children","props","ref","Comp","Slot","classes","cx","_jsx","undefined","displayName"],"mappings":"iJAgDA,MAAMA,EAAc,CAClB,cACA,eACA,iBACA,QACA,cACA,oBACA,eACA,iBACA,+BACA,0BACA,iCACA,8BACA,+BACA,uBAGIC,EAAkD,CACtDC,QAAS,CACP,kBACA,uBACA,8BACA,gCAEFC,UAAW,CACT,iBACA,oBACA,8BAEFC,SAAU,CACR,iBACA,oBACA,yBAIEC,EAAyD,CAC7DH,QAAS,CACP,iBACA,sBACA,6BACA,+BAEFC,UAAW,CACT,gBACA,qBACA,4BACA,+BAEFC,SAAU,CACR,iBACA,mBACA,sBACA,2BACA,gCAIEE,EAA4C,CAChDC,GAAI,CAAC,OAAQ,OAAQ,UAAW,UAAW,gBAC3CC,KAAM,CAAC,OAAQ,OAAQ,UAAW,YAAa,gBAC/CC,GAAI,CAAC,OAAQ,SAAU,WAAY,YAAa,iBAkCrCC,EAASC,EACpB,EAEIC,UAAU,UACVC,OAAO,OACPC,WAAU,EACVC,aAAY,EACZC,WAAU,EACVC,YACAC,OAAO,SACPC,cACGC,GAELC,KAEA,MAAMC,EAAON,EAAUO,EAAO,SAExBC,EAAUC,EACdzB,EACAc,EAAUT,EAAsBO,GAAWX,EAAeW,GAC1DN,EAAYO,GACZE,GAAa,SACbE,GAGF,OACES,EAACJ,EAAI,CACHL,UAAWO,EACXH,IAAKA,EACLH,KAAMF,OAAUW,EAAYT,KACxBE,EAAKD,SAERA,MAMTT,EAAOkB,YAAc"}