@karakuri-ui/react 0.2.2 → 0.2.4

package/dist/components/ui/toggle-group.js

@@ -0,0 +1,186 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var toggle_group_exports = {};
+__export(toggle_group_exports, {
+  ToggleGroup: () => ToggleGroup,
+  ToggleGroupItem: () => ToggleGroupItem,
+  toggleGroupItemVariants: () => toggleGroupItemVariants,
+  toggleGroupVariants: () => toggleGroupVariants
+});
+module.exports = __toCommonJS(toggle_group_exports);
+var React = __toESM(require("react"));
+var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"));
+var import_class_variance_authority = require("class-variance-authority");
+var import_utils = require("../../lib/utils");
+const toggleGroupVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center",
+  {
+    variants: {
+      orientation: {
+        horizontal: "flex-row",
+        vertical: "flex-col"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+);
+const toggleGroupItemVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center text-sm text-text-muted transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    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-form bg-transparent hover:bg-background-muted hover:text-foreground data-[state=on]:bg-background-muted data-[state=on]:text-foreground"
+      },
+      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",
+        sm: "rounded-sm",
+        base: "rounded",
+        default: "rounded-md",
+        lg: "rounded-lg",
+        xl: "rounded-xl",
+        "2xl": "rounded-2xl",
+        "3xl": "rounded-3xl",
+        full: "rounded-full"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "default",
+      fontWeight: "normal"
+    }
+  }
+);
+const ToggleGroupContext = React.createContext({
+  variant: "default",
+  size: "default",
+  radius: "default",
+  fontWeight: "normal"
+});
+const ToggleGroupRoot = React.forwardRef(({ className, orientation, variant, size, radius, fontWeight, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  ToggleGroupPrimitive.Root,
+  {
+    ref,
+    className: (0, import_utils.cn)(
+      toggleGroupVariants({ orientation }),
+      // Attached style for horizontal
+      orientation !== "vertical" && [
+        "[&>*:not(:first-child)]:rounded-l-none",
+        "[&>*:not(:last-child)]:rounded-r-none",
+        "[&>*:not(:first-child)]:-ml-px",
+        "[&>*]:relative",
+        "[&>*:hover]:z-10",
+        "[&>*:focus-visible]:z-10",
+        "[&>*:active]:scale-none"
+      ],
+      // Attached style for vertical
+      orientation === "vertical" && [
+        "[&>*:not(:first-child)]:rounded-t-none",
+        "[&>*:not(:last-child)]:rounded-b-none",
+        "[&>*:not(:first-child)]:-mt-px",
+        "[&>*]:relative",
+        "[&>*]:w-full",
+        "[&>*:hover]:z-10",
+        "[&>*:focus-visible]:z-10",
+        "[&>*:active]:scale-none"
+      ],
+      className
+    ),
+    orientation,
+    ...props
+  },
+  /* @__PURE__ */ React.createElement(ToggleGroupContext.Provider, { value: { variant, size, radius, fontWeight } }, children)
+));
+ToggleGroupRoot.displayName = ToggleGroupPrimitive.Root.displayName;
+const 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
+};
+const ToggleGroupItem = React.forwardRef(({ className, variant, size, radius, fontWeight, children, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+  const resolvedSize = size || context.size || "default";
+  return /* @__PURE__ */ React.createElement(
+    ToggleGroupPrimitive.Item,
+    {
+      ref,
+      className: (0, import_utils.cn)(
+        toggleGroupItemVariants({
+          variant: variant || context.variant,
+          size: resolvedSize,
+          radius: radius || context.radius,
+          fontWeight: fontWeight || context.fontWeight
+        }),
+        iconSizeClasses[resolvedSize],
+        className
+      ),
+      ...props
+    },
+    children
+  );
+});
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+const ToggleGroup = Object.assign(ToggleGroupRoot, {
+  Item: ToggleGroupItem
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ToggleGroup,
+  ToggleGroupItem,
+  toggleGroupItemVariants,
+  toggleGroupVariants
+});
+//# sourceMappingURL=toggle-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/toggle-group.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\nconst toggleGroupVariants = cva(\n  'inline-flex items-center justify-center',\n  {\n    variants: {\n      orientation: {\n        horizontal: 'flex-row',\n        vertical: 'flex-col',\n      },\n    },\n    defaultVariants: {\n      orientation: 'horizontal',\n    },\n  }\n)\n\nconst toggleGroupItemVariants = cva(\n  'inline-flex items-center justify-center text-sm text-text-muted transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50',\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      },\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',\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    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      fontWeight: 'normal',\n    },\n  }\n)\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleGroupItemVariants>\n>({\n  variant: 'default',\n  size: 'default',\n  radius: 'default',\n  fontWeight: 'normal',\n})\n\ntype ToggleGroupSingleProps = {\n  type: 'single'\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}\n\ntype ToggleGroupMultipleProps = {\n  type: 'multiple'\n  value?: string[]\n  defaultValue?: string[]\n  onValueChange?: (value: string[]) => void\n}\n\ntype ToggleGroupBaseProps = Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'defaultValue' | 'dir'\n> & {\n  disabled?: boolean\n  rovingFocus?: boolean\n  orientation?: 'horizontal' | 'vertical'\n  dir?: 'ltr' | 'rtl'\n  loop?: boolean\n  children?: React.ReactNode\n}\n\nexport type ToggleGroupProps = ToggleGroupBaseProps &\n  VariantProps<typeof toggleGroupVariants> &\n  VariantProps<typeof toggleGroupItemVariants> &\n  (ToggleGroupSingleProps | ToggleGroupMultipleProps)\n\nconst ToggleGroupRoot = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n  ToggleGroupProps\n>(({ className, orientation, variant, size, radius, fontWeight, children, ...props }, ref) => (\n  <ToggleGroupPrimitive.Root\n    ref={ref}\n    className={cn(\n      toggleGroupVariants({ orientation }),\n      // Attached style for horizontal\n      orientation !== 'vertical' && [\n        '[&>*:not(:first-child)]:rounded-l-none',\n        '[&>*:not(:last-child)]:rounded-r-none',\n        '[&>*:not(:first-child)]:-ml-px',\n        '[&>*]:relative',\n        '[&>*:hover]:z-10',\n        '[&>*:focus-visible]:z-10',\n        '[&>*:active]:scale-none',\n      ],\n      // Attached style for vertical\n      orientation === 'vertical' && [\n        '[&>*:not(:first-child)]:rounded-t-none',\n        '[&>*:not(:last-child)]:rounded-b-none',\n        '[&>*:not(:first-child)]:-mt-px',\n        '[&>*]:relative',\n        '[&>*]:w-full',\n        '[&>*:hover]:z-10',\n        '[&>*:focus-visible]:z-10',\n        '[&>*:active]:scale-none',\n      ],\n      className\n    )}\n    orientation={orientation}\n    {...(props as React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>)}\n  >\n    <ToggleGroupContext.Provider value={{ variant, size, radius, fontWeight }}>\n      {children}\n    </ToggleGroupContext.Provider>\n  </ToggleGroupPrimitive.Root>\n))\nToggleGroupRoot.displayName = ToggleGroupPrimitive.Root.displayName\n\nexport interface ToggleGroupItemProps\n  extends React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>,\n    Omit<VariantProps<typeof toggleGroupItemVariants>, 'fontWeight'> {\n  fontWeight?: 'normal' | 'semibold'\n}\n\n// Icon size for toggle group (5-step scale, Icon+Text mode)\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 ToggleGroupItem = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n  ToggleGroupItemProps\n>(({ className, variant, size, radius, fontWeight, children, ...props }, ref) => {\n  const context = React.useContext(ToggleGroupContext)\n  const resolvedSize = size || context.size || 'default'\n\n  return (\n    <ToggleGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        toggleGroupItemVariants({\n          variant: variant || context.variant,\n          size: resolvedSize,\n          radius: radius || context.radius,\n          fontWeight: fontWeight || context.fontWeight,\n        }),\n        iconSizeClasses[resolvedSize],\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n})\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName\n\n// ─── Namespace ──────────────────────────────────────────\nconst ToggleGroup = Object.assign(ToggleGroupRoot, {\n  Item: ToggleGroupItem,\n})\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace ToggleGroup {\n  export type ItemProps = ToggleGroupItemProps\n}\n\nexport { ToggleGroup, ToggleGroupItem, toggleGroupVariants, toggleGroupItemVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,2BAAsC;AACtC,sCAAuC;AACvC,mBAAmB;AAEnB,MAAM,0BAAsB;AAAA,EAC1B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,aAAa;AAAA,IACf;AAAA,EACF;AACF;AAEA,MAAM,8BAA0B;AAAA,EAC9B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,MACX;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,QACN,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,YAAY;AAAA,IACd;AAAA,EACF;AACF;AAEA,MAAM,qBAAqB,MAAM,cAE/B;AAAA,EACA,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AACd,CAAC;AAiCD,MAAM,kBAAkB,MAAM,WAG5B,CAAC,EAAE,WAAW,aAAa,SAAS,MAAM,QAAQ,YAAY,UAAU,GAAG,MAAM,GAAG,QACpF;AAAA,EAAC,qBAAqB;AAAA,EAArB;AAAA,IACC;AAAA,IACA,eAAW;AAAA,MACT,oBAAoB,EAAE,YAAY,CAAC;AAAA;AAAA,MAEnC,gBAAgB,cAAc;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA;AAAA,MAEA,gBAAgB,cAAc;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAI;AAAA;AAAA,EAEL,oCAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,SAAS,MAAM,QAAQ,WAAW,KACrE,QACH;AACF,CACD;AACD,gBAAgB,cAAc,qBAAqB,KAAK;AAUxD,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,kBAAkB,MAAM,WAG5B,CAAC,EAAE,WAAW,SAAS,MAAM,QAAQ,YAAY,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC/E,QAAM,UAAU,MAAM,WAAW,kBAAkB;AACnD,QAAM,eAAe,QAAQ,QAAQ,QAAQ;AAE7C,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,eAAW;AAAA,QACT,wBAAwB;AAAA,UACtB,SAAS,WAAW,QAAQ;AAAA,UAC5B,MAAM;AAAA,UACN,QAAQ,UAAU,QAAQ;AAAA,UAC1B,YAAY,cAAc,QAAQ;AAAA,QACpC,CAAC;AAAA,QACD,gBAAgB,YAAY;AAAA,QAC5B;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,IAEH;AAAA,EACH;AAEJ,CAAC;AACD,gBAAgB,cAAc,qBAAqB,KAAK;AAGxD,MAAM,cAAc,OAAO,OAAO,iBAAiB;AAAA,EACjD,MAAM;AACR,CAAC;","names":[]}

package/dist/components/ui/toggle-group.mjs

@@ -0,0 +1,149 @@
+"use client";
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const toggleGroupVariants = cva(
+  "inline-flex items-center justify-center",
+  {
+    variants: {
+      orientation: {
+        horizontal: "flex-row",
+        vertical: "flex-col"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+);
+const toggleGroupItemVariants = cva(
+  "inline-flex items-center justify-center text-sm text-text-muted transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    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-form bg-transparent hover:bg-background-muted hover:text-foreground data-[state=on]:bg-background-muted data-[state=on]:text-foreground"
+      },
+      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",
+        sm: "rounded-sm",
+        base: "rounded",
+        default: "rounded-md",
+        lg: "rounded-lg",
+        xl: "rounded-xl",
+        "2xl": "rounded-2xl",
+        "3xl": "rounded-3xl",
+        full: "rounded-full"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "default",
+      fontWeight: "normal"
+    }
+  }
+);
+const ToggleGroupContext = React.createContext({
+  variant: "default",
+  size: "default",
+  radius: "default",
+  fontWeight: "normal"
+});
+const ToggleGroupRoot = React.forwardRef(({ className, orientation, variant, size, radius, fontWeight, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  ToggleGroupPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      toggleGroupVariants({ orientation }),
+      // Attached style for horizontal
+      orientation !== "vertical" && [
+        "[&>*:not(:first-child)]:rounded-l-none",
+        "[&>*:not(:last-child)]:rounded-r-none",
+        "[&>*:not(:first-child)]:-ml-px",
+        "[&>*]:relative",
+        "[&>*:hover]:z-10",
+        "[&>*:focus-visible]:z-10",
+        "[&>*:active]:scale-none"
+      ],
+      // Attached style for vertical
+      orientation === "vertical" && [
+        "[&>*:not(:first-child)]:rounded-t-none",
+        "[&>*:not(:last-child)]:rounded-b-none",
+        "[&>*:not(:first-child)]:-mt-px",
+        "[&>*]:relative",
+        "[&>*]:w-full",
+        "[&>*:hover]:z-10",
+        "[&>*:focus-visible]:z-10",
+        "[&>*:active]:scale-none"
+      ],
+      className
+    ),
+    orientation,
+    ...props
+  },
+  /* @__PURE__ */ React.createElement(ToggleGroupContext.Provider, { value: { variant, size, radius, fontWeight } }, children)
+));
+ToggleGroupRoot.displayName = ToggleGroupPrimitive.Root.displayName;
+const 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
+};
+const ToggleGroupItem = React.forwardRef(({ className, variant, size, radius, fontWeight, children, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+  const resolvedSize = size || context.size || "default";
+  return /* @__PURE__ */ React.createElement(
+    ToggleGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        toggleGroupItemVariants({
+          variant: variant || context.variant,
+          size: resolvedSize,
+          radius: radius || context.radius,
+          fontWeight: fontWeight || context.fontWeight
+        }),
+        iconSizeClasses[resolvedSize],
+        className
+      ),
+      ...props
+    },
+    children
+  );
+});
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+const ToggleGroup = Object.assign(ToggleGroupRoot, {
+  Item: ToggleGroupItem
+});
+export {
+  ToggleGroup,
+  ToggleGroupItem,
+  toggleGroupItemVariants,
+  toggleGroupVariants
+};
+//# sourceMappingURL=toggle-group.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/toggle-group.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\nconst toggleGroupVariants = cva(\n  'inline-flex items-center justify-center',\n  {\n    variants: {\n      orientation: {\n        horizontal: 'flex-row',\n        vertical: 'flex-col',\n      },\n    },\n    defaultVariants: {\n      orientation: 'horizontal',\n    },\n  }\n)\n\nconst toggleGroupItemVariants = cva(\n  'inline-flex items-center justify-center text-sm text-text-muted transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50',\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      },\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',\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    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      fontWeight: 'normal',\n    },\n  }\n)\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleGroupItemVariants>\n>({\n  variant: 'default',\n  size: 'default',\n  radius: 'default',\n  fontWeight: 'normal',\n})\n\ntype ToggleGroupSingleProps = {\n  type: 'single'\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}\n\ntype ToggleGroupMultipleProps = {\n  type: 'multiple'\n  value?: string[]\n  defaultValue?: string[]\n  onValueChange?: (value: string[]) => void\n}\n\ntype ToggleGroupBaseProps = Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'defaultValue' | 'dir'\n> & {\n  disabled?: boolean\n  rovingFocus?: boolean\n  orientation?: 'horizontal' | 'vertical'\n  dir?: 'ltr' | 'rtl'\n  loop?: boolean\n  children?: React.ReactNode\n}\n\nexport type ToggleGroupProps = ToggleGroupBaseProps &\n  VariantProps<typeof toggleGroupVariants> &\n  VariantProps<typeof toggleGroupItemVariants> &\n  (ToggleGroupSingleProps | ToggleGroupMultipleProps)\n\nconst ToggleGroupRoot = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n  ToggleGroupProps\n>(({ className, orientation, variant, size, radius, fontWeight, children, ...props }, ref) => (\n  <ToggleGroupPrimitive.Root\n    ref={ref}\n    className={cn(\n      toggleGroupVariants({ orientation }),\n      // Attached style for horizontal\n      orientation !== 'vertical' && [\n        '[&>*:not(:first-child)]:rounded-l-none',\n        '[&>*:not(:last-child)]:rounded-r-none',\n        '[&>*:not(:first-child)]:-ml-px',\n        '[&>*]:relative',\n        '[&>*:hover]:z-10',\n        '[&>*:focus-visible]:z-10',\n        '[&>*:active]:scale-none',\n      ],\n      // Attached style for vertical\n      orientation === 'vertical' && [\n        '[&>*:not(:first-child)]:rounded-t-none',\n        '[&>*:not(:last-child)]:rounded-b-none',\n        '[&>*:not(:first-child)]:-mt-px',\n        '[&>*]:relative',\n        '[&>*]:w-full',\n        '[&>*:hover]:z-10',\n        '[&>*:focus-visible]:z-10',\n        '[&>*:active]:scale-none',\n      ],\n      className\n    )}\n    orientation={orientation}\n    {...(props as React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>)}\n  >\n    <ToggleGroupContext.Provider value={{ variant, size, radius, fontWeight }}>\n      {children}\n    </ToggleGroupContext.Provider>\n  </ToggleGroupPrimitive.Root>\n))\nToggleGroupRoot.displayName = ToggleGroupPrimitive.Root.displayName\n\nexport interface ToggleGroupItemProps\n  extends React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>,\n    Omit<VariantProps<typeof toggleGroupItemVariants>, 'fontWeight'> {\n  fontWeight?: 'normal' | 'semibold'\n}\n\n// Icon size for toggle group (5-step scale, Icon+Text mode)\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 ToggleGroupItem = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n  ToggleGroupItemProps\n>(({ className, variant, size, radius, fontWeight, children, ...props }, ref) => {\n  const context = React.useContext(ToggleGroupContext)\n  const resolvedSize = size || context.size || 'default'\n\n  return (\n    <ToggleGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        toggleGroupItemVariants({\n          variant: variant || context.variant,\n          size: resolvedSize,\n          radius: radius || context.radius,\n          fontWeight: fontWeight || context.fontWeight,\n        }),\n        iconSizeClasses[resolvedSize],\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n})\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName\n\n// ─── Namespace ──────────────────────────────────────────\nconst ToggleGroup = Object.assign(ToggleGroupRoot, {\n  Item: ToggleGroupItem,\n})\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace ToggleGroup {\n  export type ItemProps = ToggleGroupItemProps\n}\n\nexport { ToggleGroup, ToggleGroupItem, toggleGroupVariants, toggleGroupItemVariants }\n"],"mappings":"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","names":[]}

package/dist/components/ui/toggle.d.mts

@@ -0,0 +1,19 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { VariantProps } from 'class-variance-authority';
+
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | "ghost" | "outline-ghost" | null | undefined;
+    fontWeight?: "normal" | "semibold" | null | undefined;
+    size?: "default" | "sm" | "lg" | "md" | "xs" | null | undefined;
+    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ToggleProps extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, Omit<VariantProps<typeof toggleVariants>, 'fontWeight'> {
+    iconOnly?: boolean;
+    fontWeight?: 'normal' | 'semibold';
+    pressEffect?: boolean;
+}
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Toggle, type ToggleProps, toggleVariants };

package/dist/components/ui/toggle.d.ts

@@ -0,0 +1,19 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { VariantProps } from 'class-variance-authority';
+
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | "ghost" | "outline-ghost" | null | undefined;
+    fontWeight?: "normal" | "semibold" | null | undefined;
+    size?: "default" | "sm" | "lg" | "md" | "xs" | null | undefined;
+    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ToggleProps extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, Omit<VariantProps<typeof toggleVariants>, 'fontWeight'> {
+    iconOnly?: boolean;
+    fontWeight?: 'normal' | 'semibold';
+    pressEffect?: boolean;
+}
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Toggle, type ToggleProps, toggleVariants };

package/dist/components/ui/toggle.js

@@ -0,0 +1,194 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var toggle_exports = {};
+__export(toggle_exports, {
+  Toggle: () => Toggle,
+  toggleVariants: () => toggleVariants
+});
+module.exports = __toCommonJS(toggle_exports);
+var React = __toESM(require("react"));
+var TogglePrimitive = __toESM(require("@radix-ui/react-toggle"));
+var import_class_variance_authority = require("class-variance-authority");
+var import_utils = require("../../lib/utils");
+const 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";
+const toggleVariants = (0, import_class_variance_authority.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-form 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-form bg-transparent hover:text-foreground data-[state=on]:bg-transparent data-[state=on]:text-foreground data-[state=on]:border-border-form"
+      },
+      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"
+    }
+  }
+);
+const 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
+};
+const 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"
+};
+const 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-form 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-form bg-transparent hover:text-foreground data-[state=on]:bg-transparent data-[state=on]:text-foreground data-[state=on]:border-border-form"
+};
+const 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
+};
+const 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: (0, import_utils.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: (0, import_utils.cn)(
+        toggleVariants({ variant, size, radius, fontWeight }),
+        pressEffect !== false && "active:scale-pressed",
+        iconSizeClasses[sizeKey],
+        className
+      ),
+      ...props
+    }
+  );
+});
+Toggle.displayName = TogglePrimitive.Root.displayName;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Toggle,
+  toggleVariants
+});
+//# sourceMappingURL=toggle.js.map

package/dist/components/ui/toggle.js.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-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":[]}