@karakuri-ui/react 0.3.2 → 0.3.4

package/dist/components/ui/toggle.js

@@ -33,6 +33,7 @@ __export(toggle_exports, {
   toggleVariants: () => toggleVariants
 });
 module.exports = __toCommonJS(toggle_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var TogglePrimitive = __toESM(require("@radix-ui/react-toggle"));
 var import_class_variance_authority = require("class-variance-authority");
@@ -153,7 +154,7 @@ const Toggle = React.forwardRef(({ className, variant, size, radius, fontWeight,
       lg: "[&>svg]:icon-lg"
       // 24px
     }[sizeKey];
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       TogglePrimitive.Root,
       {
         ref,
@@ -171,7 +172,7 @@ const Toggle = React.forwardRef(({ className, variant, size, radius, fontWeight,
       }
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     TogglePrimitive.Root,
     {
       ref,

package/dist/components/ui/toggle.js.map

@@ -1 +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-form 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-form bg-transparent hover:text-foreground data-[state=on]:bg-transparent data-[state=on]:text-foreground data-[state=on]:border-border-form',\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-form 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-form bg-transparent hover:text-foreground data-[state=on]:bg-transparent data-[state=on]:text-foreground data-[state=on]:border-border-form',\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":[]}
+{"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-form 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-form bg-transparent hover:text-foreground data-[state=on]:bg-transparent data-[state=on]:text-foreground data-[state=on]:border-border-form',\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-form 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-form bg-transparent hover:text-foreground data-[state=on]:bg-transparent data-[state=on]:text-foreground data-[state=on]:border-border-form',\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":[]}

package/dist/components/ui/toggle.mjs

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva } from "class-variance-authority";
@@ -119,7 +120,7 @@ const Toggle = React.forwardRef(({ className, variant, size, radius, fontWeight,
       lg: "[&>svg]:icon-lg"
       // 24px
     }[sizeKey];
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       TogglePrimitive.Root,
       {
         ref,
@@ -137,7 +138,7 @@ const Toggle = React.forwardRef(({ className, variant, size, radius, fontWeight,
       }
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     TogglePrimitive.Root,
     {
       ref,

package/dist/components/ui/toggle.mjs.map

@@ -1 +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-form 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-form bg-transparent hover:text-foreground data-[state=on]:bg-transparent data-[state=on]:text-foreground data-[state=on]:border-border-form',\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-form 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-form bg-transparent hover:text-foreground data-[state=on]:bg-transparent data-[state=on]:text-foreground data-[state=on]:border-border-form',\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":";AAEA,YAAY,WAAW;AACvB,YAAY,qBAAqB;AACjC,SAAS,WAA8B;AACvC,SAAS,UAAU;AAGnB,MAAM,mBAAmB;AAEzB,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,OAAO;AAAA,QACP,iBAAiB;AAAA,MACnB;AAAA,MACA,YAAY;AAAA,QACV,QAAQ;AAAA,QACR,UAAU;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,SAAS;AAAA;AAAA,QACT,IAAI;AAAA;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA;AAAA,QACN,IAAI;AAAA;AAAA,QACJ,MAAM;AAAA;AAAA,QACN,SAAS;AAAA;AAAA,QACT,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,OAAO;AAAA;AAAA,QACP,OAAO;AAAA;AAAA,QACP,MAAM;AAAA;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA;AAAA,MACR,YAAY;AAAA,IACd;AAAA,EACF;AACF;AAGA,MAAM,gBAAgB;AAAA,EACpB,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,SAAS;AAAA;AAAA,EACT,IAAI;AAAA;AACN;AAGA,MAAM,gBAAgB;AAAA,EACpB,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AACR;AAGA,MAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,iBAAiB;AACnB;AAYA,MAAM,kBAAkB;AAAA,EACtB,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,SAAS;AAAA;AAAA,EACT,IAAI;AAAA;AACN;AAEA,MAAM,SAAS,MAAM,WAGnB,CAAC,EAAE,WAAW,SAAS,MAAM,QAAQ,YAAY,UAAU,aAAa,GAAG,MAAM,GAAG,QAAQ;AAC5F,QAAM,UAAU,QAAQ;AACxB,QAAM,YAAY,UAAU;AAC5B,QAAM,aAAa,WAAW;AAC9B,QAAM,kBAAkB,eAAe,WAAW,gBAAgB,eAAe,aAAa,kBAAkB;AAGhH,MAAI,UAAU;AAGZ,UAAM,mBAAmB;AAAA,MACvB,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,SAAS;AAAA;AAAA,MACT,IAAI;AAAA;AAAA,IACN,EAAE,OAAO;AAET,WACE;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,gBAAgB,SAAS;AAAA,UACzB;AAAA,UACA,eAAe,UAAU;AAAA,UACzB,cAAc,OAAO;AAAA,UACrB,cAAc,SAAS;AAAA,UACvB;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AAGA,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,eAAe,EAAE,SAAS,MAAM,QAAQ,WAAW,CAAC;AAAA,QACpD,gBAAgB,SAAS;AAAA,QACzB,gBAAgB,OAAO;AAAA,QACvB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,OAAO,cAAc,gBAAgB,KAAK;","names":[]}
+{"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-form 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-form bg-transparent hover:text-foreground data-[state=on]:bg-transparent data-[state=on]:text-foreground data-[state=on]:border-border-form',\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-form 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-form bg-transparent hover:text-foreground data-[state=on]:bg-transparent data-[state=on]:text-foreground data-[state=on]:border-border-form',\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":[]}

package/dist/components/ui/tooltip.js

@@ -38,6 +38,7 @@ __export(tooltip_exports, {
   tooltipContentVariants: () => tooltipContentVariants
 });
 module.exports = __toCommonJS(tooltip_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
 var import_class_variance_authority = require("class-variance-authority");
@@ -73,13 +74,13 @@ const ARROW_FILL = {
 };
 const TooltipProvider = TooltipPrimitive.Provider;
 function Tooltip({ delayDuration = 200, ...props }) {
-  return /* @__PURE__ */ React.createElement(TooltipPrimitive.Root, { delayDuration, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipPrimitive.Root, { delayDuration, ...props });
 }
 const TooltipTrigger = TooltipPrimitive.Trigger;
 const TooltipPortal = TooltipPrimitive.Portal;
 const TooltipContent = React.forwardRef(({ className, variant = "default", size, side = "top", sideOffset = 6, showArrow = true, children, ...props }, ref) => {
   const resolvedSide = side;
-  return /* @__PURE__ */ React.createElement(TooltipPrimitive.Portal, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     TooltipPrimitive.Content,
     {
       ref,
@@ -90,21 +91,23 @@ const TooltipContent = React.forwardRef(({ className, variant = "default", size,
         ANIMATION_CLASSES[resolvedSide],
         className
       ),
-      ...props
-    },
-    children,
-    showArrow && /* @__PURE__ */ React.createElement(
-      TooltipPrimitive.Arrow,
-      {
-        className: ARROW_FILL[variant || "default"],
-        width: 10,
-        height: 5
-      }
-    )
-  ));
+      ...props,
+      children: [
+        children,
+        showArrow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          TooltipPrimitive.Arrow,
+          {
+            className: ARROW_FILL[variant || "default"],
+            width: 10,
+            height: 5
+          }
+        )
+      ]
+    }
+  ) });
 });
 TooltipContent.displayName = "TooltipContent";
-const TooltipArrow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+const TooltipArrow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   TooltipPrimitive.Arrow,
   {
     ref,

package/dist/components/ui/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/tooltip.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Types ──────────────────────────────────────────────────\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left'\n\n// ─── Animation class mapping (static strings for Tailwind scanner) ──\nconst ANIMATION_CLASSES: Record<TooltipSide, string> = {\n  top:    'data-[state=delayed-open]:animate-tooltip-top-enter data-[state=instant-open]:animate-tooltip-top-enter data-[state=closed]:animate-tooltip-top-exit',\n  bottom: 'data-[state=delayed-open]:animate-tooltip-bottom-enter data-[state=instant-open]:animate-tooltip-bottom-enter data-[state=closed]:animate-tooltip-bottom-exit',\n  left:   'data-[state=delayed-open]:animate-tooltip-left-enter data-[state=instant-open]:animate-tooltip-left-enter data-[state=closed]:animate-tooltip-left-exit',\n  right:  'data-[state=delayed-open]:animate-tooltip-right-enter data-[state=instant-open]:animate-tooltip-right-enter data-[state=closed]:animate-tooltip-right-exit',\n}\n\n// ─── Content variants ────────────────────────────────────────\nconst tooltipContentVariants = cva(\n  'z-tooltip rounded-lg font-normal select-none max-w-72',\n  {\n    variants: {\n      variant: {\n        default: 'bg-foreground text-background shadow-lg',\n        inverted: 'bg-background-paper/95 text-foreground border border-border-subtle shadow-lg backdrop-blur-sm',\n      },\n      size: {\n        sm: 'text-xs px-2.5 py-1',\n        default: 'text-sm px-3 py-1.5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n)\n\n// ─── Arrow fill mapping (matches content variant background) ──\nconst ARROW_FILL: Record<string, string> = {\n  default: 'fill-foreground drop-shadow-sm',\n  inverted: 'fill-background-paper drop-shadow-sm',\n}\n\n// ═══════════════════════════════════════════════════════════════\n// Tooltip\n// ═══════════════════════════════════════════════════════════════\n\n// ─── TooltipProvider ─────────────────────────────────────────\nconst TooltipProvider = TooltipPrimitive.Provider\n\n// ─── Tooltip (Root) — wrapper to keep our own component identity separate from Radix primitive ──\nexport interface TooltipProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {\n  /** Delay in ms before tooltip appears */\n  delayDuration?: number\n}\n\nfunction Tooltip({ delayDuration = 200, ...props }: TooltipProps) {\n  return <TooltipPrimitive.Root delayDuration={delayDuration} {...props} />\n}\n\n// ─── TooltipTrigger ──────────────────────────────────────────\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\n// ─── TooltipPortal ───────────────────────────────────────────\nconst TooltipPortal = TooltipPrimitive.Portal\n\n// ─── TooltipContent ──────────────────────────────────────────\nexport interface TooltipContentProps\n  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,\n    VariantProps<typeof tooltipContentVariants> {\n  /** Show arrow pointing to trigger */\n  showArrow?: boolean\n}\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(({ className, variant = 'default', size, side = 'top', sideOffset = 6, showArrow = true, children, ...props }, ref) => {\n  const resolvedSide = side as TooltipSide\n\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        ref={ref}\n        side={side}\n        sideOffset={sideOffset}\n        className={cn(\n          tooltipContentVariants({ variant, size }),\n          ANIMATION_CLASSES[resolvedSide],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showArrow && (\n          <TooltipPrimitive.Arrow\n            className={ARROW_FILL[variant || 'default']}\n            width={10}\n            height={5}\n          />\n        )}\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n})\nTooltipContent.displayName = 'TooltipContent'\n\n// ─── TooltipArrow (standalone, for manual placement outside Content) ──\nconst TooltipArrow = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Arrow>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n  <TooltipPrimitive.Arrow\n    ref={ref}\n    className={cn('fill-foreground', className)}\n    width={8}\n    height={4}\n    {...props}\n  />\n))\nTooltipArrow.displayName = 'TooltipArrow'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipArrow,\n  TooltipPortal,\n  TooltipProvider,\n  tooltipContentVariants,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,uBAAkC;AAClC,sCAAuC;AACvC,mBAAmB;AAMnB,MAAM,oBAAiD;AAAA,EACrD,KAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAQ;AAAA,EACR,OAAQ;AACV;AAGA,MAAM,6BAAyB;AAAA,EAC7B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAGA,MAAM,aAAqC;AAAA,EACzC,SAAS;AAAA,EACT,UAAU;AACZ;AAOA,MAAM,kBAAkB,iBAAiB;AAQzC,SAAS,QAAQ,EAAE,gBAAgB,KAAK,GAAG,MAAM,GAAiB;AAChE,SAAO,oCAAC,iBAAiB,MAAjB,EAAsB,eAA+B,GAAG,OAAO;AACzE;AAGA,MAAM,iBAAiB,iBAAiB;AAGxC,MAAM,gBAAgB,iBAAiB;AAUvC,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,UAAU,WAAW,MAAM,OAAO,OAAO,aAAa,GAAG,YAAY,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ;AACvH,QAAM,eAAe;AAErB,SACE,oCAAC,iBAAiB,QAAjB,MACC;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAW;AAAA,QACT,uBAAuB,EAAE,SAAS,KAAK,CAAC;AAAA,QACxC,kBAAkB,YAAY;AAAA,QAC9B;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,IAEH;AAAA,IACA,aACC;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC,WAAW,WAAW,WAAW,SAAS;AAAA,QAC1C,OAAO;AAAA,QACP,QAAQ;AAAA;AAAA,IACV;AAAA,EAEJ,CACF;AAEJ,CAAC;AACD,eAAe,cAAc;AAG7B,MAAM,eAAe,MAAM,WAGzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,iBAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA,eAAW,iBAAG,mBAAmB,SAAS;AAAA,IAC1C,OAAO;AAAA,IACP,QAAQ;AAAA,IACP,GAAG;AAAA;AACN,CACD;AACD,aAAa,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/tooltip.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Types ──────────────────────────────────────────────────\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left'\n\n// ─── Animation class mapping (static strings for Tailwind scanner) ──\nconst ANIMATION_CLASSES: Record<TooltipSide, string> = {\n  top:    'data-[state=delayed-open]:animate-tooltip-top-enter data-[state=instant-open]:animate-tooltip-top-enter data-[state=closed]:animate-tooltip-top-exit',\n  bottom: 'data-[state=delayed-open]:animate-tooltip-bottom-enter data-[state=instant-open]:animate-tooltip-bottom-enter data-[state=closed]:animate-tooltip-bottom-exit',\n  left:   'data-[state=delayed-open]:animate-tooltip-left-enter data-[state=instant-open]:animate-tooltip-left-enter data-[state=closed]:animate-tooltip-left-exit',\n  right:  'data-[state=delayed-open]:animate-tooltip-right-enter data-[state=instant-open]:animate-tooltip-right-enter data-[state=closed]:animate-tooltip-right-exit',\n}\n\n// ─── Content variants ────────────────────────────────────────\nconst tooltipContentVariants = cva(\n  'z-tooltip rounded-lg font-normal select-none max-w-72',\n  {\n    variants: {\n      variant: {\n        default: 'bg-foreground text-background shadow-lg',\n        inverted: 'bg-background-paper/95 text-foreground border border-border-subtle shadow-lg backdrop-blur-sm',\n      },\n      size: {\n        sm: 'text-xs px-2.5 py-1',\n        default: 'text-sm px-3 py-1.5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n)\n\n// ─── Arrow fill mapping (matches content variant background) ──\nconst ARROW_FILL: Record<string, string> = {\n  default: 'fill-foreground drop-shadow-sm',\n  inverted: 'fill-background-paper drop-shadow-sm',\n}\n\n// ═══════════════════════════════════════════════════════════════\n// Tooltip\n// ═══════════════════════════════════════════════════════════════\n\n// ─── TooltipProvider ─────────────────────────────────────────\nconst TooltipProvider = TooltipPrimitive.Provider\n\n// ─── Tooltip (Root) — wrapper to keep our own component identity separate from Radix primitive ──\nexport interface TooltipProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {\n  /** Delay in ms before tooltip appears */\n  delayDuration?: number\n}\n\nfunction Tooltip({ delayDuration = 200, ...props }: TooltipProps) {\n  return <TooltipPrimitive.Root delayDuration={delayDuration} {...props} />\n}\n\n// ─── TooltipTrigger ──────────────────────────────────────────\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\n// ─── TooltipPortal ───────────────────────────────────────────\nconst TooltipPortal = TooltipPrimitive.Portal\n\n// ─── TooltipContent ──────────────────────────────────────────\nexport interface TooltipContentProps\n  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,\n    VariantProps<typeof tooltipContentVariants> {\n  /** Show arrow pointing to trigger */\n  showArrow?: boolean\n}\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(({ className, variant = 'default', size, side = 'top', sideOffset = 6, showArrow = true, children, ...props }, ref) => {\n  const resolvedSide = side as TooltipSide\n\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        ref={ref}\n        side={side}\n        sideOffset={sideOffset}\n        className={cn(\n          tooltipContentVariants({ variant, size }),\n          ANIMATION_CLASSES[resolvedSide],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showArrow && (\n          <TooltipPrimitive.Arrow\n            className={ARROW_FILL[variant || 'default']}\n            width={10}\n            height={5}\n          />\n        )}\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n})\nTooltipContent.displayName = 'TooltipContent'\n\n// ─── TooltipArrow (standalone, for manual placement outside Content) ──\nconst TooltipArrow = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Arrow>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n  <TooltipPrimitive.Arrow\n    ref={ref}\n    className={cn('fill-foreground', className)}\n    width={8}\n    height={4}\n    {...props}\n  />\n))\nTooltipArrow.displayName = 'TooltipArrow'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipArrow,\n  TooltipPortal,\n  TooltipProvider,\n  tooltipContentVariants,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2DS;AAzDT,YAAuB;AACvB,uBAAkC;AAClC,sCAAuC;AACvC,mBAAmB;AAMnB,MAAM,oBAAiD;AAAA,EACrD,KAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAQ;AAAA,EACR,OAAQ;AACV;AAGA,MAAM,6BAAyB;AAAA,EAC7B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAGA,MAAM,aAAqC;AAAA,EACzC,SAAS;AAAA,EACT,UAAU;AACZ;AAOA,MAAM,kBAAkB,iBAAiB;AAQzC,SAAS,QAAQ,EAAE,gBAAgB,KAAK,GAAG,MAAM,GAAiB;AAChE,SAAO,4CAAC,iBAAiB,MAAjB,EAAsB,eAA+B,GAAG,OAAO;AACzE;AAGA,MAAM,iBAAiB,iBAAiB;AAGxC,MAAM,gBAAgB,iBAAiB;AAUvC,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,UAAU,WAAW,MAAM,OAAO,OAAO,aAAa,GAAG,YAAY,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ;AACvH,QAAM,eAAe;AAErB,SACE,4CAAC,iBAAiB,QAAjB,EACC;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAW;AAAA,QACT,uBAAuB,EAAE,SAAS,KAAK,CAAC;AAAA,QACxC,kBAAkB,YAAY;AAAA,QAC9B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,aACC;AAAA,UAAC,iBAAiB;AAAA,UAAjB;AAAA,YACC,WAAW,WAAW,WAAW,SAAS;AAAA,YAC1C,OAAO;AAAA,YACP,QAAQ;AAAA;AAAA,QACV;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ,CAAC;AACD,eAAe,cAAc;AAG7B,MAAM,eAAe,MAAM,WAGzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,iBAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA,eAAW,iBAAG,mBAAmB,SAAS;AAAA,IAC1C,OAAO;AAAA,IACP,QAAQ;AAAA,IACP,GAAG;AAAA;AACN,CACD;AACD,aAAa,cAAc;","names":[]}

package/dist/components/ui/tooltip.mjs

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cva } from "class-variance-authority";
@@ -34,13 +35,13 @@ const ARROW_FILL = {
 };
 const TooltipProvider = TooltipPrimitive.Provider;
 function Tooltip({ delayDuration = 200, ...props }) {
-  return /* @__PURE__ */ React.createElement(TooltipPrimitive.Root, { delayDuration, ...props });
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Root, { delayDuration, ...props });
 }
 const TooltipTrigger = TooltipPrimitive.Trigger;
 const TooltipPortal = TooltipPrimitive.Portal;
 const TooltipContent = React.forwardRef(({ className, variant = "default", size, side = "top", sideOffset = 6, showArrow = true, children, ...props }, ref) => {
   const resolvedSide = side;
-  return /* @__PURE__ */ React.createElement(TooltipPrimitive.Portal, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
     TooltipPrimitive.Content,
     {
       ref,
@@ -51,21 +52,23 @@ const TooltipContent = React.forwardRef(({ className, variant = "default", size,
         ANIMATION_CLASSES[resolvedSide],
         className
       ),
-      ...props
-    },
-    children,
-    showArrow && /* @__PURE__ */ React.createElement(
-      TooltipPrimitive.Arrow,
-      {
-        className: ARROW_FILL[variant || "default"],
-        width: 10,
-        height: 5
-      }
-    )
-  ));
+      ...props,
+      children: [
+        children,
+        showArrow && /* @__PURE__ */ jsx(
+          TooltipPrimitive.Arrow,
+          {
+            className: ARROW_FILL[variant || "default"],
+            width: 10,
+            height: 5
+          }
+        )
+      ]
+    }
+  ) });
 });
 TooltipContent.displayName = "TooltipContent";
-const TooltipArrow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+const TooltipArrow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TooltipPrimitive.Arrow,
   {
     ref,

package/dist/components/ui/tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/tooltip.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Types ──────────────────────────────────────────────────\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left'\n\n// ─── Animation class mapping (static strings for Tailwind scanner) ──\nconst ANIMATION_CLASSES: Record<TooltipSide, string> = {\n  top:    'data-[state=delayed-open]:animate-tooltip-top-enter data-[state=instant-open]:animate-tooltip-top-enter data-[state=closed]:animate-tooltip-top-exit',\n  bottom: 'data-[state=delayed-open]:animate-tooltip-bottom-enter data-[state=instant-open]:animate-tooltip-bottom-enter data-[state=closed]:animate-tooltip-bottom-exit',\n  left:   'data-[state=delayed-open]:animate-tooltip-left-enter data-[state=instant-open]:animate-tooltip-left-enter data-[state=closed]:animate-tooltip-left-exit',\n  right:  'data-[state=delayed-open]:animate-tooltip-right-enter data-[state=instant-open]:animate-tooltip-right-enter data-[state=closed]:animate-tooltip-right-exit',\n}\n\n// ─── Content variants ────────────────────────────────────────\nconst tooltipContentVariants = cva(\n  'z-tooltip rounded-lg font-normal select-none max-w-72',\n  {\n    variants: {\n      variant: {\n        default: 'bg-foreground text-background shadow-lg',\n        inverted: 'bg-background-paper/95 text-foreground border border-border-subtle shadow-lg backdrop-blur-sm',\n      },\n      size: {\n        sm: 'text-xs px-2.5 py-1',\n        default: 'text-sm px-3 py-1.5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n)\n\n// ─── Arrow fill mapping (matches content variant background) ──\nconst ARROW_FILL: Record<string, string> = {\n  default: 'fill-foreground drop-shadow-sm',\n  inverted: 'fill-background-paper drop-shadow-sm',\n}\n\n// ═══════════════════════════════════════════════════════════════\n// Tooltip\n// ═══════════════════════════════════════════════════════════════\n\n// ─── TooltipProvider ─────────────────────────────────────────\nconst TooltipProvider = TooltipPrimitive.Provider\n\n// ─── Tooltip (Root) — wrapper to keep our own component identity separate from Radix primitive ──\nexport interface TooltipProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {\n  /** Delay in ms before tooltip appears */\n  delayDuration?: number\n}\n\nfunction Tooltip({ delayDuration = 200, ...props }: TooltipProps) {\n  return <TooltipPrimitive.Root delayDuration={delayDuration} {...props} />\n}\n\n// ─── TooltipTrigger ──────────────────────────────────────────\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\n// ─── TooltipPortal ───────────────────────────────────────────\nconst TooltipPortal = TooltipPrimitive.Portal\n\n// ─── TooltipContent ──────────────────────────────────────────\nexport interface TooltipContentProps\n  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,\n    VariantProps<typeof tooltipContentVariants> {\n  /** Show arrow pointing to trigger */\n  showArrow?: boolean\n}\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(({ className, variant = 'default', size, side = 'top', sideOffset = 6, showArrow = true, children, ...props }, ref) => {\n  const resolvedSide = side as TooltipSide\n\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        ref={ref}\n        side={side}\n        sideOffset={sideOffset}\n        className={cn(\n          tooltipContentVariants({ variant, size }),\n          ANIMATION_CLASSES[resolvedSide],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showArrow && (\n          <TooltipPrimitive.Arrow\n            className={ARROW_FILL[variant || 'default']}\n            width={10}\n            height={5}\n          />\n        )}\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n})\nTooltipContent.displayName = 'TooltipContent'\n\n// ─── TooltipArrow (standalone, for manual placement outside Content) ──\nconst TooltipArrow = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Arrow>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n  <TooltipPrimitive.Arrow\n    ref={ref}\n    className={cn('fill-foreground', className)}\n    width={8}\n    height={4}\n    {...props}\n  />\n))\nTooltipArrow.displayName = 'TooltipArrow'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipArrow,\n  TooltipPortal,\n  TooltipProvider,\n  tooltipContentVariants,\n}\n"],"mappings":";AAEA,YAAY,WAAW;AACvB,YAAY,sBAAsB;AAClC,SAAS,WAA8B;AACvC,SAAS,UAAU;AAMnB,MAAM,oBAAiD;AAAA,EACrD,KAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAQ;AAAA,EACR,OAAQ;AACV;AAGA,MAAM,yBAAyB;AAAA,EAC7B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAGA,MAAM,aAAqC;AAAA,EACzC,SAAS;AAAA,EACT,UAAU;AACZ;AAOA,MAAM,kBAAkB,iBAAiB;AAQzC,SAAS,QAAQ,EAAE,gBAAgB,KAAK,GAAG,MAAM,GAAiB;AAChE,SAAO,oCAAC,iBAAiB,MAAjB,EAAsB,eAA+B,GAAG,OAAO;AACzE;AAGA,MAAM,iBAAiB,iBAAiB;AAGxC,MAAM,gBAAgB,iBAAiB;AAUvC,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,UAAU,WAAW,MAAM,OAAO,OAAO,aAAa,GAAG,YAAY,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ;AACvH,QAAM,eAAe;AAErB,SACE,oCAAC,iBAAiB,QAAjB,MACC;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,uBAAuB,EAAE,SAAS,KAAK,CAAC;AAAA,QACxC,kBAAkB,YAAY;AAAA,QAC9B;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,IAEH;AAAA,IACA,aACC;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC,WAAW,WAAW,WAAW,SAAS;AAAA,QAC1C,OAAO;AAAA,QACP,QAAQ;AAAA;AAAA,IACV;AAAA,EAEJ,CACF;AAEJ,CAAC;AACD,eAAe,cAAc;AAG7B,MAAM,eAAe,MAAM,WAGzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,iBAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,mBAAmB,SAAS;AAAA,IAC1C,OAAO;AAAA,IACP,QAAQ;AAAA,IACP,GAAG;AAAA;AACN,CACD;AACD,aAAa,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/tooltip.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Types ──────────────────────────────────────────────────\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left'\n\n// ─── Animation class mapping (static strings for Tailwind scanner) ──\nconst ANIMATION_CLASSES: Record<TooltipSide, string> = {\n  top:    'data-[state=delayed-open]:animate-tooltip-top-enter data-[state=instant-open]:animate-tooltip-top-enter data-[state=closed]:animate-tooltip-top-exit',\n  bottom: 'data-[state=delayed-open]:animate-tooltip-bottom-enter data-[state=instant-open]:animate-tooltip-bottom-enter data-[state=closed]:animate-tooltip-bottom-exit',\n  left:   'data-[state=delayed-open]:animate-tooltip-left-enter data-[state=instant-open]:animate-tooltip-left-enter data-[state=closed]:animate-tooltip-left-exit',\n  right:  'data-[state=delayed-open]:animate-tooltip-right-enter data-[state=instant-open]:animate-tooltip-right-enter data-[state=closed]:animate-tooltip-right-exit',\n}\n\n// ─── Content variants ────────────────────────────────────────\nconst tooltipContentVariants = cva(\n  'z-tooltip rounded-lg font-normal select-none max-w-72',\n  {\n    variants: {\n      variant: {\n        default: 'bg-foreground text-background shadow-lg',\n        inverted: 'bg-background-paper/95 text-foreground border border-border-subtle shadow-lg backdrop-blur-sm',\n      },\n      size: {\n        sm: 'text-xs px-2.5 py-1',\n        default: 'text-sm px-3 py-1.5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n)\n\n// ─── Arrow fill mapping (matches content variant background) ──\nconst ARROW_FILL: Record<string, string> = {\n  default: 'fill-foreground drop-shadow-sm',\n  inverted: 'fill-background-paper drop-shadow-sm',\n}\n\n// ═══════════════════════════════════════════════════════════════\n// Tooltip\n// ═══════════════════════════════════════════════════════════════\n\n// ─── TooltipProvider ─────────────────────────────────────────\nconst TooltipProvider = TooltipPrimitive.Provider\n\n// ─── Tooltip (Root) — wrapper to keep our own component identity separate from Radix primitive ──\nexport interface TooltipProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {\n  /** Delay in ms before tooltip appears */\n  delayDuration?: number\n}\n\nfunction Tooltip({ delayDuration = 200, ...props }: TooltipProps) {\n  return <TooltipPrimitive.Root delayDuration={delayDuration} {...props} />\n}\n\n// ─── TooltipTrigger ──────────────────────────────────────────\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\n// ─── TooltipPortal ───────────────────────────────────────────\nconst TooltipPortal = TooltipPrimitive.Portal\n\n// ─── TooltipContent ──────────────────────────────────────────\nexport interface TooltipContentProps\n  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,\n    VariantProps<typeof tooltipContentVariants> {\n  /** Show arrow pointing to trigger */\n  showArrow?: boolean\n}\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(({ className, variant = 'default', size, side = 'top', sideOffset = 6, showArrow = true, children, ...props }, ref) => {\n  const resolvedSide = side as TooltipSide\n\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        ref={ref}\n        side={side}\n        sideOffset={sideOffset}\n        className={cn(\n          tooltipContentVariants({ variant, size }),\n          ANIMATION_CLASSES[resolvedSide],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showArrow && (\n          <TooltipPrimitive.Arrow\n            className={ARROW_FILL[variant || 'default']}\n            width={10}\n            height={5}\n          />\n        )}\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n})\nTooltipContent.displayName = 'TooltipContent'\n\n// ─── TooltipArrow (standalone, for manual placement outside Content) ──\nconst TooltipArrow = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Arrow>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n  <TooltipPrimitive.Arrow\n    ref={ref}\n    className={cn('fill-foreground', className)}\n    width={8}\n    height={4}\n    {...props}\n  />\n))\nTooltipArrow.displayName = 'TooltipArrow'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipArrow,\n  TooltipPortal,\n  TooltipProvider,\n  tooltipContentVariants,\n}\n"],"mappings":";AA2DS,cAyBH,YAzBG;AAzDT,YAAY,WAAW;AACvB,YAAY,sBAAsB;AAClC,SAAS,WAA8B;AACvC,SAAS,UAAU;AAMnB,MAAM,oBAAiD;AAAA,EACrD,KAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAQ;AAAA,EACR,OAAQ;AACV;AAGA,MAAM,yBAAyB;AAAA,EAC7B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAGA,MAAM,aAAqC;AAAA,EACzC,SAAS;AAAA,EACT,UAAU;AACZ;AAOA,MAAM,kBAAkB,iBAAiB;AAQzC,SAAS,QAAQ,EAAE,gBAAgB,KAAK,GAAG,MAAM,GAAiB;AAChE,SAAO,oBAAC,iBAAiB,MAAjB,EAAsB,eAA+B,GAAG,OAAO;AACzE;AAGA,MAAM,iBAAiB,iBAAiB;AAGxC,MAAM,gBAAgB,iBAAiB;AAUvC,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,UAAU,WAAW,MAAM,OAAO,OAAO,aAAa,GAAG,YAAY,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ;AACvH,QAAM,eAAe;AAErB,SACE,oBAAC,iBAAiB,QAAjB,EACC;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,uBAAuB,EAAE,SAAS,KAAK,CAAC;AAAA,QACxC,kBAAkB,YAAY;AAAA,QAC9B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,aACC;AAAA,UAAC,iBAAiB;AAAA,UAAjB;AAAA,YACC,WAAW,WAAW,WAAW,SAAS;AAAA,YAC1C,OAAO;AAAA,YACP,QAAQ;AAAA;AAAA,QACV;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ,CAAC;AACD,eAAe,cAAc;AAG7B,MAAM,eAAe,MAAM,WAGzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,iBAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,mBAAmB,SAAS;AAAA,IAC1C,OAAO;AAAA,IACP,QAAQ;AAAA,IACP,GAAG;AAAA;AACN,CACD;AACD,aAAa,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,10 @@
 {
   "name": "@karakuri-ui/react",
-  "version": "0.3.2",
+  "version": "0.3.4",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/karakuri-ai/design-system.git"
+  },
   "private": false,
   "sideEffects": [
     "*.css"
@@ -23,7 +27,9 @@
   },
   "typesVersions": {
     "*": {
-      "chart": ["./dist/components/ui/chart.d.ts"]
+      "chart": [
+        "./dist/components/ui/chart.d.ts"
+      ]
     }
   },
   "files": [
@@ -36,16 +42,17 @@
     "build:clean": "rm -rf .next && next build",
     "build:lib": "tsup",
     "start": "next start",
-    "lint": "eslint . --ext .ts,.tsx",
-    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
     "typecheck": "tsc --noEmit",
-    "sync-tokens": "tsx scripts/run-sync.ts",
+    "sync-tokens": "tsx scripts/run-sync.ts && node scripts/sync-ai-kit.mjs",
+    "sync:ai-kit": "node scripts/sync-ai-kit.mjs",
     "build:cli": "node scripts/build-cli.js",
     "verify:docs": "tsx scripts/verify-docs.ts",
     "verify:framework-compat": "tsx scripts/verify-framework-compat.ts",
     "verify:llms-examples": "tsx scripts/verify-llms-examples.ts",
-    "prepublishOnly": "npm run verify:framework-compat && npm run verify:llms-examples && npm run verify:docs && npm run build:lib"
+    "prepublishOnly": "npm run verify:framework-compat && npm run verify:llms-examples && npm run verify:docs && npm --prefix mcp run verify-drift && npm run build:lib"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.0",
@@ -86,25 +93,22 @@
     }
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.0",
     "@karakuri-ui/tokens": "file:./tokens",
     "@types/node": "^20.14.0",
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^7.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
     "autoprefixer": "^10.4.19",
     "cmdk": "^1.1.1",
-    "eslint": "^8.57.0",
-    "eslint-config-next": "^14.2.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "^7.34.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint": "^9.39.0",
+    "eslint-config-next": "16.4.2",
+    "eslint-config-prettier": "^10.1.8",
     "lucide-react": "^0.400.0",
-    "next": "^14.2.0",
-    "postcss": "^8.4.38",
+    "next": "16.4.2",
+    "postcss": "^8.5.18",
     "prettier": "^3.3.0",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "recharts": "^3.7.0",
     "tailwindcss": "^3.4.4",
     "tailwindcss-animate": "^1.0.7",
@@ -125,6 +129,10 @@
   ],
   "author": "Tony",
   "license": "MIT",
+  "overrides": {
+    "sharp": "^0.35.0",
+    "postcss": "^8.5.18"
+  },
   "engines": {
     "node": ">=18"
   },