@7onic-ui/react 0.3.9 → 0.3.10

package/dist/chunk-WWSN5YME.mjs

@@ -0,0 +1,222 @@
+"use client";
+import {
+  useFieldContext
+} from "./chunk-Z6JWWCNL.mjs";
+import {
+  cn
+} from "./chunk-53MIUPSY.mjs";
+
+// src/components/ui/input.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+var inputVariants = cva(
+  [
+    "flex w-full bg-background text-foreground placeholder:text-foreground/30",
+    "border transition-colors duration-micro outline-transparent",
+    "focus:[outline:2px_solid_transparent]",
+    "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-background-muted",
+    "file:border-0 file:bg-transparent file:text-sm file:font-semibold"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: "border-border hover:border-border-strong",
+        filled: "border-transparent bg-background-muted"
+      },
+      focusRing: {
+        true: "",
+        false: ""
+      },
+      size: {
+        xs: "h-9 px-3 text-sm",
+        // 36px / 12px padding / 13px font (3.0:1)
+        sm: "h-10 px-3 text-md",
+        // 40px / 12px padding / 14px font (3.3:1)
+        default: "h-11 px-4 text-base",
+        // 44px / 16px padding / 16px font (2.75:1)
+        lg: "h-12 px-4 text-base",
+        // 48px / 16px padding / 16px font (3.0:1)
+        xl: "h-14 px-4 text-base"
+        // 56px / 16px padding / 16px font (3.5:1)
+      },
+      radius: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        base: "rounded",
+        default: "rounded-md",
+        lg: "rounded-lg",
+        xl: "rounded-xl",
+        "2xl": "rounded-2xl",
+        "3xl": "rounded-3xl",
+        full: "rounded-full"
+      },
+      state: {
+        default: "",
+        error: "border-error hover:border-error focus:border-error shadow-[0_0_0_2px_var(--color-focus-ring-error)]"
+      }
+    },
+    compoundVariants: [
+      // focusRing: true → show custom focus ring
+      { focusRing: true, className: "focus-visible:shadow-[0_0_0_2px_var(--color-focus-ring)]" },
+      // focusRing: false → keep same state as hover
+      { variant: "default", focusRing: false, className: "focus:border-border-strong" },
+      // filled + error
+      {
+        variant: "filled",
+        state: "error",
+        className: "border-transparent hover:border-transparent focus:border-transparent bg-[var(--color-error-bg)] hover:bg-[var(--color-error-bg)] focus:bg-[var(--color-error-bg)] shadow-none"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "default",
+      state: "default",
+      focusRing: false
+    }
+  }
+);
+var iconSizeClasses = {
+  xs: "icon-xs",
+  // 14px
+  sm: "icon-xs",
+  // 14px
+  default: "icon-sm",
+  // 16px
+  lg: "icon-sm",
+  // 16px
+  xl: "icon-sm"
+  // 16px
+};
+var iconPaddingClasses = {
+  xs: { left: "pl-8", right: "pr-8" },
+  // 12px + 14px icon + 6px gap = 32px
+  sm: { left: "pl-9", right: "pr-9" },
+  // 12px + 14px icon + 8px gap = 34px → 36px
+  default: { left: "pl-10", right: "pr-10" },
+  // 16px + 16px icon + 8px gap = 40px
+  lg: { left: "pl-10", right: "pr-10" },
+  // 16px + 16px icon + 8px gap = 40px
+  xl: { left: "pl-10", right: "pr-10" }
+  // 16px + 16px icon + 8px gap = 40px
+};
+var iconPositionClasses = {
+  xs: { left: "left-3", right: "right-3" },
+  // 12px
+  sm: { left: "left-3", right: "right-3" },
+  // 12px
+  default: { left: "left-4", right: "right-4" },
+  // 16px
+  lg: { left: "left-4", right: "right-4" },
+  // 16px
+  xl: { left: "left-4", right: "right-4" }
+  // 16px
+};
+var Input = React.forwardRef(
+  ({ className, variant, size, radius, state, type, leftIcon, rightIcon, error, focusRing, id, onPointerDown, onFocus, onBlur, ...props }, ref) => {
+    const fieldContext = useFieldContext();
+    const resolvedSize = size || "default";
+    const resolvedError = error ?? fieldContext?.error;
+    const resolvedState = resolvedError ? "error" : state;
+    const inputId = id ?? fieldContext?.id;
+    const isDisabled = props.disabled ?? fieldContext?.disabled;
+    const pointerRef = React.useRef(false);
+    const windowBlurredRef = React.useRef(false);
+    const [keyboardFocus, setKeyboardFocus] = React.useState(false);
+    React.useEffect(() => {
+      const onBlur2 = () => {
+        windowBlurredRef.current = true;
+      };
+      const onFocus2 = () => {
+        requestAnimationFrame(() => {
+          windowBlurredRef.current = false;
+        });
+      };
+      window.addEventListener("blur", onBlur2);
+      window.addEventListener("focus", onFocus2);
+      return () => {
+        window.removeEventListener("blur", onBlur2);
+        window.removeEventListener("focus", onFocus2);
+      };
+    }, []);
+    const handlePointerDown = React.useCallback((e) => {
+      pointerRef.current = true;
+      onPointerDown?.(e);
+    }, [onPointerDown]);
+    const handleFocus = React.useCallback((e) => {
+      if (!pointerRef.current && !focusRing && !windowBlurredRef.current) {
+        setKeyboardFocus(true);
+      }
+      pointerRef.current = false;
+      onFocus?.(e);
+    }, [focusRing, onFocus]);
+    const handleBlur = React.useCallback((e) => {
+      setKeyboardFocus(false);
+      pointerRef.current = false;
+      onBlur?.(e);
+    }, [onBlur]);
+    const ariaDescribedBy = fieldContext ? [
+      resolvedError ? `${fieldContext.id}-error` : null
+    ].filter(Boolean).join(" ") || void 0 : void 0;
+    const focusHandlers = {
+      onPointerDown: handlePointerDown,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    };
+    if (leftIcon || rightIcon) {
+      return /* @__PURE__ */ React.createElement("div", { className: "relative w-full" }, leftIcon && /* @__PURE__ */ React.createElement("div", { className: cn(
+        "absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10",
+        iconPositionClasses[resolvedSize].left,
+        `[&>svg]:${iconSizeClasses[resolvedSize]}`
+      ) }, leftIcon), /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          type,
+          id: inputId,
+          className: cn(
+            inputVariants({ variant, size, radius, state: resolvedState, focusRing }),
+            keyboardFocus && "shadow-[0_0_0_2px_var(--color-focus-ring)]",
+            leftIcon && iconPaddingClasses[resolvedSize].left,
+            rightIcon && iconPaddingClasses[resolvedSize].right,
+            className
+          ),
+          "aria-invalid": resolvedError || void 0,
+          "aria-describedby": ariaDescribedBy,
+          disabled: isDisabled,
+          ref,
+          ...focusHandlers,
+          ...props
+        }
+      ), rightIcon && /* @__PURE__ */ React.createElement("div", { className: cn(
+        "absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10",
+        iconPositionClasses[resolvedSize].right,
+        `[&>svg]:${iconSizeClasses[resolvedSize]}`
+      ) }, rightIcon));
+    }
+    return /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type,
+        id: inputId,
+        className: cn(
+          inputVariants({ variant, size, radius, state: resolvedState, focusRing }),
+          keyboardFocus && "shadow-[0_0_0_2px_var(--color-focus-ring)]",
+          className
+        ),
+        "aria-invalid": resolvedError || void 0,
+        "aria-describedby": ariaDescribedBy,
+        disabled: isDisabled,
+        ref,
+        ...focusHandlers,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+export {
+  inputVariants,
+  Input
+};
+//# sourceMappingURL=chunk-WWSN5YME.mjs.map

package/dist/chunk-WWSN5YME.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/input.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { useFieldContext } from './field'\n\nconst inputVariants = cva(\n  [\n    'flex w-full bg-background text-foreground placeholder:text-foreground/30',\n    'border transition-colors duration-micro outline-transparent',\n    'focus:[outline:2px_solid_transparent]',\n    'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-background-muted',\n    'file:border-0 file:bg-transparent file:text-sm file:font-semibold',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: 'border-border hover:border-border-strong',\n        filled: 'border-transparent bg-background-muted',\n      },\n      focusRing: {\n        true: '',\n        false: '',\n      },\n      size: {\n        xs: 'h-9 px-3 text-sm',          // 36px / 12px padding / 13px font (3.0:1)\n        sm: 'h-10 px-3 text-md',         // 40px / 12px padding / 14px font (3.3:1)\n        default: 'h-11 px-4 text-base',  // 44px / 16px padding / 16px font (2.75:1)\n        lg: 'h-12 px-4 text-base',       // 48px / 16px padding / 16px font (3.0:1)\n        xl: 'h-14 px-4 text-base',        // 56px / 16px padding / 16px font (3.5:1)\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        default: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      state: {\n        default: '',\n        error: 'border-error hover:border-error focus:border-error shadow-[0_0_0_2px_var(--color-focus-ring-error)]',\n      },\n    },\n    compoundVariants: [\n      // focusRing: true → show custom focus ring\n      { focusRing: true, className: 'focus-visible:shadow-[0_0_0_2px_var(--color-focus-ring)]' },\n      // focusRing: false → keep same state as hover\n      { variant: 'default', focusRing: false, className: 'focus:border-border-strong' },\n      // filled + error\n      {\n        variant: 'filled',\n        state: 'error',\n        className: 'border-transparent hover:border-transparent focus:border-transparent bg-[var(--color-error-bg)] hover:bg-[var(--color-error-bg)] focus:bg-[var(--color-error-bg)] shadow-none',\n      },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      state: 'default',\n      focusRing: false,\n    },\n  }\n)\n\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    VariantProps<typeof inputVariants> {\n  leftIcon?: React.ReactNode\n  rightIcon?: React.ReactNode\n  error?: boolean\n  focusRing?: boolean\n}\n\n// Icon size for input (2-step scale)\n// xs~sm: 14px, default~xl: 16px\nconst iconSizeClasses = {\n  xs: 'icon-xs',      // 14px\n  sm: 'icon-xs',      // 14px\n  default: 'icon-sm', // 16px\n  lg: 'icon-sm',      // 16px\n  xl: 'icon-sm',      // 16px\n}\n\n// Icon padding (padding + icon + gap)\nconst iconPaddingClasses = {\n  xs: { left: 'pl-8', right: 'pr-8' },       // 12px + 14px icon + 6px gap = 32px\n  sm: { left: 'pl-9', right: 'pr-9' },       // 12px + 14px icon + 8px gap = 34px → 36px\n  default: { left: 'pl-10', right: 'pr-10' }, // 16px + 16px icon + 8px gap = 40px\n  lg: { left: 'pl-10', right: 'pr-10' },     // 16px + 16px icon + 8px gap = 40px\n  xl: { left: 'pl-10', right: 'pr-10' },     // 16px + 16px icon + 8px gap = 40px\n}\n\n// Icon position (matches horizontal padding)\nconst iconPositionClasses = {\n  xs: { left: 'left-3', right: 'right-3' },      // 12px\n  sm: { left: 'left-3', right: 'right-3' },      // 12px\n  default: { left: 'left-4', right: 'right-4' }, // 16px\n  lg: { left: 'left-4', right: 'right-4' },      // 16px\n  xl: { left: 'left-4', right: 'right-4' },      // 16px\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, variant, size, radius, state, type, leftIcon, rightIcon, error, focusRing, id, onPointerDown, onFocus, onBlur, ...props }, ref) => {\n    const fieldContext = useFieldContext()\n    const resolvedSize = size || 'default'\n    const resolvedError = error ?? fieldContext?.error\n    const resolvedState = resolvedError ? 'error' : state\n    const inputId = id ?? fieldContext?.id\n    const isDisabled = props.disabled ?? fieldContext?.disabled\n\n    // Keyboard focus detection (when focusRing: false, auto-show ring on Tab navigation)\n    const pointerRef = React.useRef(false)\n    const windowBlurredRef = React.useRef(false)\n    const [keyboardFocus, setKeyboardFocus] = React.useState(false)\n\n    // Track window blur/focus to distinguish Tab navigation from window re-activation\n    React.useEffect(() => {\n      const onBlur = () => { windowBlurredRef.current = true }\n      const onFocus = () => { requestAnimationFrame(() => { windowBlurredRef.current = false }) }\n      window.addEventListener('blur', onBlur)\n      window.addEventListener('focus', onFocus)\n      return () => { window.removeEventListener('blur', onBlur); window.removeEventListener('focus', onFocus) }\n    }, [])\n\n    const handlePointerDown = React.useCallback((e: React.PointerEvent<HTMLInputElement>) => {\n      pointerRef.current = true\n      onPointerDown?.(e)\n    }, [onPointerDown])\n\n    const handleFocus = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      if (!pointerRef.current && !focusRing && !windowBlurredRef.current) {\n        setKeyboardFocus(true)\n      }\n      pointerRef.current = false\n      onFocus?.(e)\n    }, [focusRing, onFocus])\n\n    const handleBlur = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      setKeyboardFocus(false)\n      pointerRef.current = false\n      onBlur?.(e)\n    }, [onBlur])\n\n    // Build aria-describedby from context\n    const ariaDescribedBy = fieldContext\n      ? [\n          resolvedError ? `${fieldContext.id}-error` : null,\n        ]\n          .filter(Boolean)\n          .join(' ') || undefined\n      : undefined\n\n    const focusHandlers = {\n      onPointerDown: handlePointerDown,\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n    }\n\n    // If icons are present, wrap input in a container\n    if (leftIcon || rightIcon) {\n      return (\n        <div className=\"relative w-full\">\n          {leftIcon && (\n            <div className={cn(\n              'absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10',\n              iconPositionClasses[resolvedSize].left,\n              `[&>svg]:${iconSizeClasses[resolvedSize]}`\n            )}>\n              {leftIcon}\n            </div>\n          )}\n          <input\n            type={type}\n            id={inputId}\n            className={cn(\n              inputVariants({ variant, size, radius, state: resolvedState, focusRing }),\n              keyboardFocus && 'shadow-[0_0_0_2px_var(--color-focus-ring)]',\n              leftIcon && iconPaddingClasses[resolvedSize].left,\n              rightIcon && iconPaddingClasses[resolvedSize].right,\n              className\n            )}\n            aria-invalid={resolvedError || undefined}\n            aria-describedby={ariaDescribedBy}\n            disabled={isDisabled}\n            ref={ref}\n            {...focusHandlers}\n            {...props}\n          />\n          {rightIcon && (\n            <div className={cn(\n              'absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10',\n              iconPositionClasses[resolvedSize].right,\n              `[&>svg]:${iconSizeClasses[resolvedSize]}`\n            )}>\n              {rightIcon}\n            </div>\n          )}\n        </div>\n      )\n    }\n\n    return (\n      <input\n        type={type}\n        id={inputId}\n        className={cn(\n          inputVariants({ variant, size, radius, state: resolvedState, focusRing }),\n          keyboardFocus && 'shadow-[0_0_0_2px_var(--color-focus-ring)]',\n          className\n        )}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={ariaDescribedBy}\n        disabled={isDisabled}\n        ref={ref}\n        {...focusHandlers}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = 'Input'\n\nexport { Input, inputVariants }\n"],"mappings":"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","names":["onBlur","onFocus"]}

package/dist/chunk-XK52LYR4.mjs

@@ -0,0 +1,182 @@
+"use client";
+import {
+  cn
+} from "./chunk-53MIUPSY.mjs";
+
+// src/components/ui/accordion.tsx
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { cva } from "class-variance-authority";
+var DefaultChevronIcon = ({ className }) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    "aria-hidden": "true"
+  },
+  /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+);
+var AccordionStyleContext = React.createContext({});
+var useAccordionStyleContext = () => React.useContext(AccordionStyleContext);
+var accordionVariants = cva("w-full", {
+  variants: {
+    variant: {
+      default: "divide-y divide-border",
+      bordered: "divide-y divide-border border border-border rounded-xl",
+      splitted: "flex flex-col gap-3"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var Accordion = React.forwardRef(
+  ({ className, variant = "default", size = "default", iconPosition = "right", type = "single", collapsible = true, defaultValue, value, onValueChange, disabled, ...props }, ref) => {
+    const restProps = props;
+    const sharedClassName = cn(accordionVariants({ variant }), className);
+    const radixProps = type === "multiple" ? {
+      type: "multiple",
+      defaultValue,
+      value,
+      onValueChange,
+      disabled
+    } : {
+      type: "single",
+      collapsible,
+      defaultValue,
+      value,
+      onValueChange,
+      disabled
+    };
+    return /* @__PURE__ */ React.createElement(AccordionStyleContext.Provider, { value: { variant, size, iconPosition } }, /* @__PURE__ */ React.createElement(
+      AccordionPrimitive.Root,
+      {
+        ref,
+        className: sharedClassName,
+        ...radixProps,
+        ...restProps
+      }
+    ));
+  }
+);
+Accordion.displayName = "Accordion";
+var accordionItemVariants = cva("", {
+  variants: {
+    variant: {
+      default: "",
+      bordered: "",
+      splitted: "border border-border rounded-xl"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var AccordionItem = React.forwardRef(({ className, ...props }, ref) => {
+  const { variant } = useAccordionStyleContext();
+  return /* @__PURE__ */ React.createElement(
+    AccordionPrimitive.Item,
+    {
+      ref,
+      className: cn(accordionItemVariants({ variant }), className),
+      ...props
+    }
+  );
+});
+AccordionItem.displayName = "AccordionItem";
+var accordionTriggerVariants = cva(
+  [
+    "flex flex-1 items-center gap-3 font-semibold text-foreground",
+    "transition-all duration-micro ease-out cursor-pointer",
+    "hover:bg-background-muted/50",
+    "focus-visible:focus-ring focus-visible:rounded-md",
+    "disabled:pointer-events-none disabled:text-text-subtle disabled:opacity-50",
+    "[&[data-state=open]>svg.accordion-chevron]:rotate-180"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "py-3 px-4 text-sm",
+        // 13px
+        default: "py-4 px-4 text-md",
+        // 14px
+        lg: "py-5 px-6 text-base"
+        // 16px
+      },
+      iconPosition: {
+        left: "flex-row",
+        right: "flex-row-reverse justify-between"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      iconPosition: "right"
+    }
+  }
+);
+var triggerIconSizeClasses = {
+  sm: "icon-xs",
+  // 14px
+  default: "icon-sm",
+  // 16px
+  lg: "icon-sm"
+  // 16px
+};
+var AccordionTrigger = React.forwardRef(({ className, children, icon, ...props }, ref) => {
+  const { size, iconPosition } = useAccordionStyleContext();
+  const resolvedSize = size || "default";
+  return /* @__PURE__ */ React.createElement(AccordionPrimitive.Header, { className: "flex" }, /* @__PURE__ */ React.createElement(
+    AccordionPrimitive.Trigger,
+    {
+      ref,
+      className: cn(
+        "group",
+        accordionTriggerVariants({ size: resolvedSize, iconPosition }),
+        className
+      ),
+      ...props
+    },
+    icon || /* @__PURE__ */ React.createElement(DefaultChevronIcon, { className: cn(
+      "accordion-chevron shrink-0 text-text-muted transition-transform duration-normal",
+      triggerIconSizeClasses[resolvedSize]
+    ) }),
+    /* @__PURE__ */ React.createElement("span", { className: "text-left" }, children)
+  ));
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+var accordionContentSizeClasses = {
+  sm: "px-4 pb-3 text-sm",
+  default: "px-4 pb-4 text-md",
+  lg: "px-6 pb-5 text-base"
+};
+var AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => {
+  const { size } = useAccordionStyleContext();
+  const resolvedSize = size || "default";
+  return /* @__PURE__ */ React.createElement(
+    AccordionPrimitive.Content,
+    {
+      ref,
+      className: "overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("div", { className: cn(
+      "text-text-muted",
+      accordionContentSizeClasses[resolvedSize],
+      className
+    ) }, children)
+  );
+});
+AccordionContent.displayName = "AccordionContent";
+
+export {
+  accordionVariants,
+  Accordion,
+  AccordionItem,
+  accordionTriggerVariants,
+  AccordionTrigger,
+  AccordionContent
+};
+//# sourceMappingURL=chunk-XK52LYR4.mjs.map

package/dist/chunk-XK52LYR4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/accordion.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// Default chevron icon (built-in, no external dependency)\nconst DefaultChevronIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n  </svg>\n)\n\n// Context to pass style props from Accordion root to children\ntype AccordionStyleContextValue = {\n  variant?: 'default' | 'bordered' | 'splitted'\n  size?: 'sm' | 'default' | 'lg'\n  iconPosition?: 'left' | 'right'\n}\nconst AccordionStyleContext = React.createContext<AccordionStyleContextValue>({})\nconst useAccordionStyleContext = () => React.useContext(AccordionStyleContext)\n\n// ─── Accordion (Root) ────────────────────────────────────────\n\nconst accordionVariants = cva('w-full', {\n  variants: {\n    variant: {\n      default: 'divide-y divide-border',\n      bordered: 'divide-y divide-border border border-border rounded-xl',\n      splitted: 'flex flex-col gap-3',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n})\n\nexport interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  type?: 'single' | 'multiple'\n  variant?: 'default' | 'bordered' | 'splitted'\n  size?: 'sm' | 'default' | 'lg'\n  iconPosition?: 'left' | 'right'\n  collapsible?: boolean\n  defaultValue?: string | string[]\n  value?: string | string[]\n  onValueChange?: ((value: string) => void) | ((value: string[]) => void)\n  disabled?: boolean\n}\n\nconst Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(\n  ({ className, variant = 'default', size = 'default', iconPosition = 'right', type = 'single', collapsible = true, defaultValue, value, onValueChange, disabled, ...props }, ref) => {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Radix single/multiple union type conflict\n    const restProps = props as any\n    const sharedClassName = cn(accordionVariants({ variant }), className)\n\n    const radixProps = type === 'multiple'\n      ? {\n          type: 'multiple' as const,\n          defaultValue: defaultValue as string[] | undefined,\n          value: value as string[] | undefined,\n          onValueChange: onValueChange as ((value: string[]) => void) | undefined,\n          disabled,\n        }\n      : {\n          type: 'single' as const,\n          collapsible,\n          defaultValue: defaultValue as string | undefined,\n          value: value as string | undefined,\n          onValueChange: onValueChange as ((value: string) => void) | undefined,\n          disabled,\n        }\n\n    return (\n      <AccordionStyleContext.Provider value={{ variant, size, iconPosition }}>\n          <AccordionPrimitive.Root\n          ref={ref}\n          className={sharedClassName}\n          {...radixProps}\n          {...restProps}\n        />\n      </AccordionStyleContext.Provider>\n    )\n  }\n)\nAccordion.displayName = 'Accordion'\n\n// ─── AccordionItem ───────────────────────────────────────────\n\nconst accordionItemVariants = cva('', {\n  variants: {\n    variant: {\n      default: '',\n      bordered: '',\n      splitted: 'border border-border rounded-xl',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n})\n\nexport interface AccordionItemProps\n  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>,\n    Omit<VariantProps<typeof accordionItemVariants>, 'variant'> {}\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  AccordionItemProps\n>(({ className, ...props }, ref) => {\n  const { variant } = useAccordionStyleContext()\n  return (\n    <AccordionPrimitive.Item\n      ref={ref}\n      className={cn(accordionItemVariants({ variant }), className)}\n      {...props}\n    />\n  )\n})\nAccordionItem.displayName = 'AccordionItem'\n\n// ─── AccordionTrigger ────────────────────────────────────────\n\nconst accordionTriggerVariants = cva(\n  [\n    'flex flex-1 items-center gap-3 font-semibold text-foreground',\n    'transition-all duration-micro ease-out cursor-pointer',\n    'hover:bg-background-muted/50',\n    'focus-visible:focus-ring focus-visible:rounded-md',\n    'disabled:pointer-events-none disabled:text-text-subtle disabled:opacity-50',\n    '[&[data-state=open]>svg.accordion-chevron]:rotate-180',\n  ].join(' '),\n  {\n    variants: {\n      size: {\n        sm: 'py-3 px-4 text-sm',     // 13px\n        default: 'py-4 px-4 text-md', // 14px\n        lg: 'py-5 px-6 text-base',    // 16px\n      },\n      iconPosition: {\n        left: 'flex-row',\n        right: 'flex-row-reverse justify-between',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      iconPosition: 'right',\n    },\n  }\n)\n\n// Icon size per trigger size\nconst triggerIconSizeClasses = {\n  sm: 'icon-xs',      // 14px\n  default: 'icon-sm', // 16px\n  lg: 'icon-sm',      // 16px\n} as const\n\nexport interface AccordionTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {\n  /** Custom indicator icon (replaces default chevron) */\n  icon?: React.ReactNode\n}\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  AccordionTriggerProps\n>(({ className, children, icon, ...props }, ref) => {\n  const { size, iconPosition } = useAccordionStyleContext()\n  const resolvedSize = size || 'default'\n\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        className={cn(\n          'group',\n          accordionTriggerVariants({ size: resolvedSize, iconPosition }),\n          className\n        )}\n        {...props}\n      >\n        {icon || (\n          <DefaultChevronIcon className={cn(\n            'accordion-chevron shrink-0 text-text-muted transition-transform duration-normal',\n            triggerIconSizeClasses[resolvedSize]\n          )} />\n        )}\n        <span className=\"text-left\">{children}</span>\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n})\nAccordionTrigger.displayName = 'AccordionTrigger'\n\n// ─── AccordionContent ────────────────────────────────────────\n\nconst accordionContentSizeClasses = {\n  sm: 'px-4 pb-3 text-sm',\n  default: 'px-4 pb-4 text-md',\n  lg: 'px-6 pb-5 text-base',\n} as const\n\nexport interface AccordionContentProps\n  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {}\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  AccordionContentProps\n>(({ className, children, ...props }, ref) => {\n  const { size } = useAccordionStyleContext()\n  const resolvedSize = size || 'default'\n\n  return (\n    <AccordionPrimitive.Content\n      ref={ref}\n      className=\"overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n      {...props}\n    >\n      <div className={cn(\n        'text-text-muted',\n        accordionContentSizeClasses[resolvedSize],\n        className\n      )}>\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n})\nAccordionContent.displayName = 'AccordionContent'\n\n// ─── Exports ─────────────────────────────────────────────────\nexport {\n  Accordion,\n  AccordionItem,\n  AccordionTrigger,\n  AccordionContent,\n  accordionVariants,\n  accordionTriggerVariants,\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-YIAH6KHV.mjs

@@ -0,0 +1,164 @@
+"use client";
+import {
+  cn
+} from "./chunk-53MIUPSY.mjs";
+
+// src/components/ui/toggle.tsx
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva } from "class-variance-authority";
+var toggleBaseStyles = "inline-flex items-center justify-center text-text-muted transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50";
+var toggleVariants = cva(
+  toggleBaseStyles,
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent hover:bg-background-muted hover:text-foreground data-[state=on]:bg-background-muted data-[state=on]:text-foreground",
+        outline: "border border-border bg-transparent hover:bg-background-muted hover:text-foreground data-[state=on]:bg-background-muted data-[state=on]:text-foreground",
+        ghost: "bg-transparent hover:text-foreground data-[state=on]:bg-transparent data-[state=on]:text-foreground",
+        "outline-ghost": "border border-border bg-transparent hover:text-foreground data-[state=on]:bg-transparent data-[state=on]:text-foreground data-[state=on]:border-border"
+      },
+      fontWeight: {
+        normal: "font-normal",
+        semibold: "font-semibold"
+      },
+      size: {
+        xs: "h-7 px-2.5 text-xs gap-1",
+        // 28px height, 10px paddingX, 12px font
+        sm: "h-8 px-3 text-sm gap-2",
+        // 32px height, 12px paddingX, 13px font
+        md: "h-9 px-3.5 text-md gap-2",
+        // 36px height, 14px paddingX, 14px font
+        default: "h-10 px-4 text-md gap-2",
+        // 40px height, 16px paddingX, 14px font
+        lg: "h-12 px-6 text-base gap-2"
+        // 48px height, 24px paddingX, 16px font
+      },
+      radius: {
+        none: "rounded-none",
+        // 0px - primitive.borderRadius.none
+        sm: "rounded-sm",
+        // 2px - primitive.borderRadius.sm
+        base: "rounded",
+        // 4px - primitive.borderRadius.base
+        default: "rounded-md",
+        // 6px - primitive.borderRadius.md
+        lg: "rounded-lg",
+        // 8px - primitive.borderRadius.lg
+        xl: "rounded-xl",
+        // 12px - primitive.borderRadius.xl
+        "2xl": "rounded-2xl",
+        // 16px - primitive.borderRadius.2xl
+        "3xl": "rounded-3xl",
+        // 24px - primitive.borderRadius.3xl
+        full: "rounded-full"
+        // 9999px - primitive.borderRadius.full
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "default",
+      // 6px - primitive.borderRadius.md (Figma button default)
+      fontWeight: "normal"
+    }
+  }
+);
+var iconOnlySizes = {
+  xs: "h-7 w-7",
+  // 28px × 28px - spacing.7
+  sm: "h-8 w-8",
+  // 32px × 32px - spacing.8
+  md: "h-9 w-9",
+  // 36px × 36px - spacing.9
+  default: "h-10 w-10",
+  // 40px × 40px - spacing.10
+  lg: "h-12 w-12"
+  // 48px × 48px - spacing.12
+};
+var radiusClasses = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  base: "rounded",
+  default: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl",
+  "3xl": "rounded-3xl",
+  full: "rounded-full"
+};
+var variantClasses = {
+  default: "bg-transparent hover:bg-background-muted hover:text-foreground data-[state=on]:bg-background-muted data-[state=on]:text-foreground",
+  outline: "border border-border bg-transparent hover:bg-background-muted hover:text-foreground data-[state=on]:bg-background-muted data-[state=on]:text-foreground",
+  ghost: "bg-transparent hover:text-foreground data-[state=on]:bg-transparent data-[state=on]:text-foreground",
+  "outline-ghost": "border border-border bg-transparent hover:text-foreground data-[state=on]:bg-transparent data-[state=on]:text-foreground data-[state=on]:border-border"
+};
+var iconSizeClasses = {
+  xs: "[&>svg]:icon-xs",
+  // 14px
+  sm: "[&>svg]:icon-xs",
+  // 14px
+  md: "[&>svg]:icon-sm",
+  // 16px
+  default: "[&>svg]:icon-sm",
+  // 16px
+  lg: "[&>svg]:icon-sm"
+  // 16px
+};
+var Toggle = React.forwardRef(({ className, variant, size, radius, fontWeight, iconOnly, pressEffect, ...props }, ref) => {
+  const sizeKey = size || "default";
+  const radiusKey = radius || "default";
+  const variantKey = variant || "default";
+  const fontWeightClass = fontWeight === "normal" ? "font-normal" : fontWeight === "semibold" ? "font-semibold" : "font-normal";
+  if (iconOnly) {
+    const iconOnlyIconSize = {
+      xs: "[&>svg]:icon-xs",
+      // 14px
+      sm: "[&>svg]:icon-sm",
+      // 16px
+      md: "[&>svg]:icon-sm",
+      // 16px
+      default: "[&>svg]:icon-md",
+      // 20px
+      lg: "[&>svg]:icon-lg"
+      // 24px
+    }[sizeKey];
+    return /* @__PURE__ */ React.createElement(
+      TogglePrimitive.Root,
+      {
+        ref,
+        className: cn(
+          toggleBaseStyles,
+          pressEffect !== false && "active:scale-pressed",
+          fontWeightClass,
+          variantClasses[variantKey],
+          iconOnlySizes[sizeKey],
+          radiusClasses[radiusKey],
+          iconOnlyIconSize,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    TogglePrimitive.Root,
+    {
+      ref,
+      className: cn(
+        toggleVariants({ variant, size, radius, fontWeight }),
+        pressEffect !== false && "active:scale-pressed",
+        iconSizeClasses[sizeKey],
+        className
+      ),
+      ...props
+    }
+  );
+});
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export {
+  toggleVariants,
+  Toggle
+};
+//# sourceMappingURL=chunk-YIAH6KHV.mjs.map

package/dist/chunk-YIAH6KHV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/toggle.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as TogglePrimitive from '@radix-ui/react-toggle'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// Base styles without size (for iconOnly mode)\nconst toggleBaseStyles = 'inline-flex items-center justify-center text-text-muted transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50'\n\nconst toggleVariants = cva(\n  toggleBaseStyles,\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent hover:bg-background-muted hover:text-foreground data-[state=on]:bg-background-muted data-[state=on]:text-foreground',\n        outline: 'border border-border bg-transparent hover:bg-background-muted hover:text-foreground data-[state=on]:bg-background-muted data-[state=on]:text-foreground',\n        ghost: 'bg-transparent hover:text-foreground data-[state=on]:bg-transparent data-[state=on]:text-foreground',\n        'outline-ghost': 'border border-border bg-transparent hover:text-foreground data-[state=on]:bg-transparent data-[state=on]:text-foreground data-[state=on]:border-border',\n      },\n      fontWeight: {\n        normal: 'font-normal',\n        semibold: 'font-semibold',\n      },\n      size: {\n        xs: 'h-7 px-2.5 text-xs gap-1',     // 28px height, 10px paddingX, 12px font\n        sm: 'h-8 px-3 text-sm gap-2',       // 32px height, 12px paddingX, 13px font\n        md: 'h-9 px-3.5 text-md gap-2',     // 36px height, 14px paddingX, 14px font\n        default: 'h-10 px-4 text-md gap-2', // 40px height, 16px paddingX, 14px font\n        lg: 'h-12 px-6 text-base gap-2',    // 48px height, 24px paddingX, 16px font\n      },\n      radius: {\n        none: 'rounded-none',      // 0px - primitive.borderRadius.none\n        sm: 'rounded-sm',          // 2px - primitive.borderRadius.sm\n        base: 'rounded',           // 4px - primitive.borderRadius.base\n        default: 'rounded-md',     // 6px - primitive.borderRadius.md\n        lg: 'rounded-lg',          // 8px - primitive.borderRadius.lg\n        xl: 'rounded-xl',          // 12px - primitive.borderRadius.xl\n        '2xl': 'rounded-2xl',      // 16px - primitive.borderRadius.2xl\n        '3xl': 'rounded-3xl',      // 24px - primitive.borderRadius.3xl\n        full: 'rounded-full',      // 9999px - primitive.borderRadius.full\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',  // 6px - primitive.borderRadius.md (Figma button default)\n      fontWeight: 'normal',\n    },\n  }\n)\n\n// iconOnly sizes - square like IconButton (same width and height, no padding)\nconst iconOnlySizes = {\n  xs: 'h-7 w-7',      // 28px × 28px - spacing.7\n  sm: 'h-8 w-8',      // 32px × 32px - spacing.8\n  md: 'h-9 w-9',      // 36px × 36px - spacing.9\n  default: 'h-10 w-10', // 40px × 40px - spacing.10\n  lg: 'h-12 w-12',    // 48px × 48px - spacing.12\n}\n\n// Radius classes for iconOnly mode\nconst radiusClasses = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  base: 'rounded',\n  default: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n  '3xl': 'rounded-3xl',\n  full: 'rounded-full',\n}\n\n// Variant classes for iconOnly mode\nconst variantClasses = {\n  default: 'bg-transparent hover:bg-background-muted hover:text-foreground data-[state=on]:bg-background-muted data-[state=on]:text-foreground',\n  outline: 'border border-border bg-transparent hover:bg-background-muted hover:text-foreground data-[state=on]:bg-background-muted data-[state=on]:text-foreground',\n  ghost: 'bg-transparent hover:text-foreground data-[state=on]:bg-transparent data-[state=on]:text-foreground',\n  'outline-ghost': 'border border-border bg-transparent hover:text-foreground data-[state=on]:bg-transparent data-[state=on]:text-foreground data-[state=on]:border-border',\n}\n\nexport interface ToggleProps\n  extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>,\n    Omit<VariantProps<typeof toggleVariants>, 'fontWeight'> {\n  iconOnly?: boolean\n  fontWeight?: 'normal' | 'semibold'\n  pressEffect?: boolean\n}\n\n// Icon size for text+icon mode (5-step scale)\n// xs~sm: 14px, md~default~lg: 16px\nconst iconSizeClasses = {\n  xs: '[&>svg]:icon-xs',      // 14px\n  sm: '[&>svg]:icon-xs',      // 14px\n  md: '[&>svg]:icon-sm',      // 16px\n  default: '[&>svg]:icon-sm', // 16px\n  lg: '[&>svg]:icon-sm',      // 16px\n}\n\nconst Toggle = React.forwardRef<\n  React.ElementRef<typeof TogglePrimitive.Root>,\n  ToggleProps\n>(({ className, variant, size, radius, fontWeight, iconOnly, pressEffect, ...props }, ref) => {\n  const sizeKey = size || 'default'\n  const radiusKey = radius || 'default'\n  const variantKey = variant || 'default'\n  const fontWeightClass = fontWeight === 'normal' ? 'font-normal' : fontWeight === 'semibold' ? 'font-semibold' : 'font-normal'\n\n  // When iconOnly, build classes manually without padding\n  if (iconOnly) {\n    // Icon only uses larger icon sizes (like IconButton, 5-step scale)\n    // XS: 14px, SM~MD: 16px, Default: 20px, LG: 24px\n    const iconOnlyIconSize = {\n      xs: '[&>svg]:icon-xs',      // 14px\n      sm: '[&>svg]:icon-sm',      // 16px\n      md: '[&>svg]:icon-sm',      // 16px\n      default: '[&>svg]:icon-md', // 20px\n      lg: '[&>svg]:icon-lg',      // 24px\n    }[sizeKey]\n\n    return (\n      <TogglePrimitive.Root\n        ref={ref}\n        className={cn(\n          toggleBaseStyles,\n          pressEffect !== false && 'active:scale-pressed',\n          fontWeightClass,\n          variantClasses[variantKey],\n          iconOnlySizes[sizeKey],\n          radiusClasses[radiusKey],\n          iconOnlyIconSize,\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n\n  // Normal mode with padding\n  return (\n    <TogglePrimitive.Root\n      ref={ref}\n      className={cn(\n        toggleVariants({ variant, size, radius, fontWeight }),\n        pressEffect !== false && 'active:scale-pressed',\n        iconSizeClasses[sizeKey],\n        className\n      )}\n      {...props}\n    />\n  )\n})\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n"],"mappings":"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","names":[]}