@psnext/design-system 2.3.0 → 2.5.0

package/dist/primitives/InfoBanner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/InfoBanner/InfoBanner.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { CircleAlert, CircleCheck, Info, TriangleAlert, X } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// InfoBanner — a dismissible inline status banner (Figma \"Toast Messages\" on\n// the Alert page, node 3962:11659): status-bg surface, rounded-12, px-4 py-3,\n// heading-5 title in the status text color, 14/20 medium secondary description.\n// Distinct from Alert (which is not dismissible).\nconst infoBannerVariants = cva(\"flex w-full gap-4 rounded-12 px-4 py-3\", {\n  variants: {\n    variant: {\n      info: \"bg-info-bg text-info-txt\",\n      success: \"bg-success-bg text-success-txt\",\n      warning: \"bg-warning-bg text-warning-txt\",\n      error: \"bg-danger-bg text-danger-txt\",\n      neutral: \"bg-muted-bg text-primary-txt\",\n    },\n  },\n  defaultVariants: {\n    variant: \"info\",\n  },\n});\n\nconst variantIcons = {\n  info: Info,\n  success: CircleCheck,\n  warning: TriangleAlert,\n  error: CircleAlert,\n  neutral: Info,\n} as const;\n\nexport type InfoBannerProps = Omit<React.ComponentProps<\"div\">, \"title\"> &\n  VariantProps<typeof infoBannerVariants> & {\n    /** Intent that drives the banner colors and default icon. Default `info`. */\n    variant?: VariantProps<typeof infoBannerVariants>[\"variant\"];\n    /** Banner heading. */\n    title: string;\n    /** Optional supporting copy below the title. */\n    description?: React.ReactNode;\n    /** Override the default per-variant leading icon. */\n    icon?: React.ReactNode;\n    /** Show the trailing dismiss button. Default true. */\n    dismissible?: boolean;\n    /** Controlled visibility. When provided, overrides internal state. */\n    visible?: boolean;\n    /** Called when the dismiss button is pressed. */\n    onDismiss?: () => void;\n  };\n\n/** Dismissible inline status banner colored by intent (info/success/warning/error/neutral). */\nfunction InfoBanner({\n  title,\n  description,\n  variant,\n  icon,\n  dismissible = true,\n  visible,\n  onDismiss,\n  className,\n  ...props\n}: InfoBannerProps) {\n  const [internalVisible, setInternalVisible] = useState(true);\n  const isControlled = visible !== undefined;\n  const isVisible = isControlled ? visible : internalVisible;\n\n  if (!isVisible) return null;\n\n  const handleDismiss = () => {\n    if (!isControlled) setInternalVisible(false);\n    onDismiss?.();\n  };\n\n  const VariantIcon = variantIcons[variant ?? \"info\"];\n\n  return (\n    <div\n      data-slot=\"info-banner\"\n      data-variant={variant ?? \"info\"}\n      role=\"status\"\n      className={cn(\n        infoBannerVariants({ variant }),\n        // Top-aligned like Alert; the icon aligner below sits it on the first line.\n        \"items-start\",\n        className,\n      )}\n      {...props}\n    >\n      {/* Icon inherits the variant's text color via currentColor. */}\n      <span data-slot=\"info-banner-icon\" className=\"shrink-0 pt-0.5\" aria-hidden=\"true\">\n        {icon ?? <VariantIcon className=\"size-5\" />}\n      </span>\n\n      <div data-slot=\"info-banner-content\" className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <span\n          data-slot=\"info-banner-title\"\n          className=\"font-heading text-[length:var(--heading-5-font-size)] leading-[var(--heading-5-line-height)] font-medium\"\n        >\n          {title}\n        </span>\n        {description != null && (\n          <span\n            data-slot=\"info-banner-description\"\n            className=\"text-sm leading-5 font-medium text-secondary-txt\"\n          >\n            {description}\n          </span>\n        )}\n      </div>\n\n      {dismissible && (\n        <button\n          data-slot=\"info-banner-dismiss\"\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          onClick={handleDismiss}\n          className=\"-mr-2 flex size-8 shrink-0 items-center justify-center rounded-8 text-primary-txt transition-colors hover:bg-primary-txt/5\"\n        >\n          <X data-slot=\"info-banner-dismiss-icon\" className=\"size-4\" aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport { InfoBanner, infoBannerVariants };\n"],"mappings":";;;;;;AAWA,MAAM,qBAAqB,IAAI,0CAA0C;CACvE,UAAU,EACR,SAAS;EACP,MAAM;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACP,SAAS;CACX,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC;AAED,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,SAAS;AACX;;AAqBA,SAAS,WAAW,EAClB,OACA,aACA,SACA,MACA,cAAc,MACd,SACA,WACA,WACA,GAAG,SACe;CAClB,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,IAAI;CAC3D,MAAM,eAAe,YAAY,KAAA;CAGjC,IAAI,EAFc,eAAe,UAAU,kBAE3B,OAAO;CAEvB,MAAM,sBAAsB;EAC1B,IAAI,CAAC,cAAc,mBAAmB,KAAK;EAC3C,YAAY;CACd;CAEA,MAAM,cAAc,aAAa,WAAW;CAE5C,OACE,qBAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,MAAK;EACL,WAAW,GACT,mBAAmB,EAAE,QAAQ,CAAC,GAE9B,eACA,SACF;EACA,GAAI;YAVN;GAaE,oBAAC,QAAD;IAAM,aAAU;IAAmB,WAAU;IAAkB,eAAY;cACxE,QAAQ,oBAAC,aAAD,EAAa,WAAU,SAAU,CAAA;GACtC,CAAA;GAEN,qBAAC,OAAD;IAAK,aAAU;IAAsB,WAAU;cAA/C,CACE,oBAAC,QAAD;KACE,aAAU;KACV,WAAU;eAET;IACG,CAAA,GACL,eAAe,QACd,oBAAC,QAAD;KACE,aAAU;KACV,WAAU;eAET;IACG,CAAA,CAEL;;GAEJ,eACC,oBAAC,UAAD;IACE,aAAU;IACV,MAAK;IACL,cAAW;IACX,SAAS;IACT,WAAU;cAEV,oBAAC,GAAD;KAAG,aAAU;KAA2B,WAAU;KAAS,eAAY;IAAQ,CAAA;GACzE,CAAA;EAEP;;AAET"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/InfoBanner/InfoBanner.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { CircleAlert, CircleCheck, Info, TriangleAlert, X } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// InfoBanner — a dismissible inline status banner (Figma \"Toast Messages\" on\n// the Alert page, node 3962:11659): status-bg surface, rounded-12, px-4 py-3,\n// heading-5 title in the status text color, 14/20 medium secondary description.\n// Distinct from Alert (which is not dismissible).\nconst infoBannerVariants = cva(\"flex w-full gap-4 rounded-12 px-4 py-3\", {\n  variants: {\n    variant: {\n      info: \"bg-info-bg text-info-txt\",\n      success: \"bg-success-bg text-success-txt\",\n      warning: \"bg-warning-bg text-warning-txt\",\n      error: \"bg-danger-bg text-danger-txt\",\n      neutral: \"bg-muted-bg text-primary-txt\",\n    },\n  },\n  defaultVariants: {\n    variant: \"info\",\n  },\n});\n\nconst variantIcons = {\n  info: Info,\n  success: CircleCheck,\n  warning: TriangleAlert,\n  error: CircleAlert,\n  neutral: Info,\n} as const;\n\nexport type InfoBannerProps = Omit<React.ComponentProps<\"div\">, \"title\"> &\n  VariantProps<typeof infoBannerVariants> & {\n    /** Intent that drives the banner colors and default icon. Default `info`. */\n    variant?: VariantProps<typeof infoBannerVariants>[\"variant\"];\n    /** Banner heading. */\n    title: string;\n    /** Optional supporting copy below the title. */\n    description?: React.ReactNode;\n    /** Override the default per-variant leading icon. */\n    icon?: React.ReactNode;\n    /** Show the trailing dismiss button. Default true. */\n    dismissible?: boolean;\n    /** Controlled visibility. When provided, overrides internal state. */\n    visible?: boolean;\n    /** Called when the dismiss button is pressed. */\n    onDismiss?: () => void;\n  };\n\n/** Dismissible inline status banner colored by intent (info/success/warning/error/neutral). */\nfunction InfoBanner({\n  title,\n  description,\n  variant,\n  icon,\n  dismissible = true,\n  visible,\n  onDismiss,\n  className,\n  ...props\n}: InfoBannerProps) {\n  const [internalVisible, setInternalVisible] = useState(true);\n  const isControlled = visible !== undefined;\n  const isVisible = isControlled ? visible : internalVisible;\n\n  if (!isVisible) return null;\n\n  const handleDismiss = () => {\n    if (!isControlled) setInternalVisible(false);\n    onDismiss?.();\n  };\n\n  const VariantIcon = variantIcons[variant ?? \"info\"];\n\n  return (\n    <div\n      data-slot=\"info-banner\"\n      data-variant={variant ?? \"info\"}\n      role=\"status\"\n      className={cn(\n        infoBannerVariants({ variant }),\n        // Top-aligned like Alert; the icon aligner below sits it on the first line.\n        \"items-start\",\n        className,\n      )}\n      {...props}\n    >\n      {/* Icon inherits the variant's text color via currentColor. */}\n      <span data-slot=\"info-banner-icon\" className=\"shrink-0 pt-0.5\" aria-hidden=\"true\">\n        {icon ?? <VariantIcon className=\"size-5\" />}\n      </span>\n\n      <div data-slot=\"info-banner-content\" className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <span\n          data-slot=\"info-banner-title\"\n          className=\"font-heading text-[length:var(--heading-5-font-size)] leading-[var(--heading-5-line-height)] font-medium\"\n        >\n          {title}\n        </span>\n        {description != null && (\n          <span\n            data-slot=\"info-banner-description\"\n            className=\"text-sm leading-5 font-medium text-secondary-txt\"\n          >\n            {description}\n          </span>\n        )}\n      </div>\n\n      {dismissible && (\n        <button\n          data-slot=\"info-banner-dismiss\"\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          onClick={handleDismiss}\n          className=\"-mr-2 flex size-8 shrink-0 items-center justify-center rounded-8 text-primary-txt transition-colors hover:bg-primary-txt/5\"\n        >\n          <Icon as={X} data-slot=\"info-banner-dismiss-icon\" className=\"size-4\" aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport { InfoBanner, infoBannerVariants };\n"],"mappings":";;;;;;;AAYA,MAAM,qBAAqB,IAAI,0CAA0C;CACvE,UAAU,EACR,SAAS;EACP,MAAM;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACP,SAAS;CACX,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC;AAED,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,SAAS;AACX;;AAqBA,SAAS,WAAW,EAClB,OACA,aACA,SACA,MACA,cAAc,MACd,SACA,WACA,WACA,GAAG,SACe;CAClB,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,IAAI;CAC3D,MAAM,eAAe,YAAY,KAAA;CAGjC,IAAI,EAFc,eAAe,UAAU,kBAE3B,OAAO;CAEvB,MAAM,sBAAsB;EAC1B,IAAI,CAAC,cAAc,mBAAmB,KAAK;EAC3C,YAAY;CACd;CAEA,MAAM,cAAc,aAAa,WAAW;CAE5C,OACE,qBAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,MAAK;EACL,WAAW,GACT,mBAAmB,EAAE,QAAQ,CAAC,GAE9B,eACA,SACF;EACA,GAAI;YAVN;GAaE,oBAAC,QAAD;IAAM,aAAU;IAAmB,WAAU;IAAkB,eAAY;cACxE,QAAQ,oBAAC,aAAD,EAAa,WAAU,SAAU,CAAA;GACtC,CAAA;GAEN,qBAAC,OAAD;IAAK,aAAU;IAAsB,WAAU;cAA/C,CACE,oBAAC,QAAD;KACE,aAAU;KACV,WAAU;eAET;IACG,CAAA,GACL,eAAe,QACd,oBAAC,QAAD;KACE,aAAU;KACV,WAAU;eAET;IACG,CAAA,CAEL;;GAEJ,eACC,oBAAC,UAAD;IACE,aAAU;IACV,MAAK;IACL,cAAW;IACX,SAAS;IACT,WAAU;cAEV,oBAAC,MAAD;KAAM,IAAI;KAAG,aAAU;KAA2B,WAAU;KAAS,eAAY;IAAQ,CAAA;GACnF,CAAA;EAEP;;AAET"}

package/dist/primitives/Input/index.cjs

@@ -1,8 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
+let class_variance_authority = require("class-variance-authority");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/primitives/Input/Input.tsx
-const inputVariants = (0, require("class-variance-authority").cva)(require_cn.cn("file:text-primary-txt text-primary-txt placeholder:text-muted-txt selection:bg-primary-invert-bg selection:text-primary-invert-txt flex w-full min-w-0 transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "focus-visible:ring-focus focus-visible:ring-3", "aria-invalid:ring-focus-error"), {
+const inputVariants = (0, class_variance_authority.cva)(require_cn.cn("file:text-primary-txt text-primary-txt placeholder:text-muted-txt selection:bg-primary-invert-bg selection:text-primary-invert-txt flex w-full min-w-0 transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "focus-visible:ring-focus focus-visible:ring-3", "aria-invalid:ring-focus-error"), {
 	variants: {
 		variant: {
 			default: "border border-primary-border bg-input-bg focus-visible:border-primary-invert-border aria-invalid:border-danger-border",

package/dist/primitives/Input/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Input/Input.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/* Figma: PS AI Helix – Core → Input & Input Group (node 16:1738). Paddings with\n   half-pixel values are Figma's \"hacks to fit scale\" tokens (no spacing step). */\nconst inputVariants = cva(\n  cn(\n    \"file:text-primary-txt text-primary-txt placeholder:text-muted-txt selection:bg-primary-invert-bg selection:text-primary-invert-txt flex w-full min-w-0 transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n    \"focus-visible:ring-focus focus-visible:ring-3\",\n    \"aria-invalid:ring-focus-error\",\n  ),\n  {\n    variants: {\n      // `ai` swaps the border for the AI gradient; text/placeholder are unchanged.\n      variant: {\n        default:\n          \"border border-primary-border bg-input-bg focus-visible:border-primary-invert-border aria-invalid:border-danger-border\",\n        ai: \"ai-border [--ai-surface:var(--input-bg)]\",\n      },\n      // Sizes map to the Figma \"Input\" spec: Mini 24px / Small 32px / Regular 36px / Large 40px.\n      size: {\n        xs: \"h-6 px-1.5 py-1 text-xs leading-4 file:h-5 file:text-xs\",\n        sm: \"h-8 px-2 py-1.5 text-sm leading-5 file:h-6 file:text-xs\",\n        default: \"h-9 px-3 py-2 text-sm leading-5 file:h-7 file:text-sm\",\n        lg: \"h-10 px-4 py-2.5 text-sm leading-5 file:h-8 file:text-sm\",\n      },\n      // Roundness: Default (12px) and Round (pill).\n      shape: {\n        default: \"rounded-12\",\n        round: \"rounded-full\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      shape: \"default\",\n    },\n  },\n);\n\n/** Styled text input that supports the Figma size and roundness axes; forwards all native `<input>` props. */\nfunction Input({\n  className,\n  type,\n  /** Chrome style — `default` bordered field or `ai` (AI gradient border). */\n  variant,\n  /** Height/typography preset — Mini (`xs`), Small (`sm`), Regular (`default`), or Large (`lg`). */\n  size,\n  /** Corner roundness — `default` (12px) or `round` (pill). */\n  shape,\n  ...props\n}: Omit<React.ComponentProps<\"input\">, \"size\"> & VariantProps<typeof inputVariants>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(inputVariants({ variant, size, shape }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Input, inputVariants };\n"],"mappings":";;;;AAOA,MAAM,iBAAA,qCAAA,EAAA,KACJA,WAAAA,GACE,sVACA,iDACA,+BACF,GACA;CACE,UAAU;EAER,SAAS;GACP,SACE;GACF,IAAI;EACN;EAEA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;EAEA,OAAO;GACL,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;CACT;AACF,CACF;;AAGA,SAAS,MAAM,EACb,WACA,MAEA,SAEA,MAEA,OACA,GAAG,SACgF;CACnF,OACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACQ;EACN,aAAU;EACV,WAAWA,WAAAA,GAAG,cAAc;GAAE;GAAS;GAAM;EAAM,CAAC,GAAG,SAAS;EAChE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Input/Input.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/* Figma: PS AI Helix – Core → Input & Input Group (node 16:1738). Paddings with\n   half-pixel values are Figma's \"hacks to fit scale\" tokens (no spacing step). */\nconst inputVariants = cva(\n  cn(\n    \"file:text-primary-txt text-primary-txt placeholder:text-muted-txt selection:bg-primary-invert-bg selection:text-primary-invert-txt flex w-full min-w-0 transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n    \"focus-visible:ring-focus focus-visible:ring-3\",\n    \"aria-invalid:ring-focus-error\",\n  ),\n  {\n    variants: {\n      // `ai` swaps the border for the AI gradient; text/placeholder are unchanged.\n      variant: {\n        default:\n          \"border border-primary-border bg-input-bg focus-visible:border-primary-invert-border aria-invalid:border-danger-border\",\n        ai: \"ai-border [--ai-surface:var(--input-bg)]\",\n      },\n      // Sizes map to the Figma \"Input\" spec: Mini 24px / Small 32px / Regular 36px / Large 40px.\n      size: {\n        xs: \"h-6 px-1.5 py-1 text-xs leading-4 file:h-5 file:text-xs\",\n        sm: \"h-8 px-2 py-1.5 text-sm leading-5 file:h-6 file:text-xs\",\n        default: \"h-9 px-3 py-2 text-sm leading-5 file:h-7 file:text-sm\",\n        lg: \"h-10 px-4 py-2.5 text-sm leading-5 file:h-8 file:text-sm\",\n      },\n      // Roundness: Default (12px) and Round (pill).\n      shape: {\n        default: \"rounded-12\",\n        round: \"rounded-full\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      shape: \"default\",\n    },\n  },\n);\n\n/** Styled text input that supports the Figma size and roundness axes; forwards all native `<input>` props. */\nfunction Input({\n  className,\n  type,\n  /** Chrome style — `default` bordered field or `ai` (AI gradient border). */\n  variant,\n  /** Height/typography preset — Mini (`xs`), Small (`sm`), Regular (`default`), or Large (`lg`). */\n  size,\n  /** Corner roundness — `default` (12px) or `round` (pill). */\n  shape,\n  ...props\n}: Omit<React.ComponentProps<\"input\">, \"size\"> & VariantProps<typeof inputVariants>) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(inputVariants({ variant, size, shape }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Input, inputVariants };\n"],"mappings":";;;;;AAOA,MAAM,iBAAA,GAAA,yBAAA,KACJA,WAAAA,GACE,sVACA,iDACA,+BACF,GACA;CACE,UAAU;EAER,SAAS;GACP,SACE;GACF,IAAI;EACN;EAEA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;EAEA,OAAO;GACL,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;CACT;AACF,CACF;;AAGA,SAAS,MAAM,EACb,WACA,MAEA,SAEA,MAEA,OACA,GAAG,SACgF;CACnF,OACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACQ;EACN,aAAU;EACV,WAAWA,WAAAA,GAAG,cAAc;GAAE;GAAS;GAAM;EAAM,CAAC,GAAG,SAAS;EAChE,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Input/index.d.cts

@@ -1,2 +1,2 @@
-import { n as inputVariants, t as Input } from "../../index32.cjs";
+import { n as inputVariants, t as Input } from "../../index34.cjs";
 export { Input, inputVariants };

package/dist/primitives/Input/index.d.ts

@@ -1,2 +1,2 @@
-import { n as inputVariants, t as Input } from "../../index32.js";
+import { n as inputVariants, t as Input } from "../../index34.js";
 export { Input, inputVariants };

package/dist/primitives/Input/index.js

@@ -1,6 +1,6 @@
 import { t as cn } from "../../cn.js";
-import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
 //#region src/primitives/Input/Input.tsx
 const inputVariants = cva(cn("file:text-primary-txt text-primary-txt placeholder:text-muted-txt selection:bg-primary-invert-bg selection:text-primary-invert-txt flex w-full min-w-0 transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "focus-visible:ring-focus focus-visible:ring-3", "aria-invalid:ring-focus-error"), {
 	variants: {

package/dist/primitives/InputGroup/index.cjs

@@ -3,8 +3,8 @@ const require_cn = require("../../cn.cjs");
 const require_primitives_Button_index = require("../Button/index.cjs");
 const require_primitives_Input_index = require("../Input/index.cjs");
 const require_primitives_Textarea_index = require("../Textarea/index.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
+let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/primitives/InputGroup/InputGroup.tsx
 /** Bordered container that groups a control (input/textarea) with addons, buttons, and text into one focusable field. */
 function InputGroup({ className, variant = "default", ...props }) {

package/dist/primitives/InputGroup/index.d.cts

@@ -1,2 +1,2 @@
-import { a as InputGroupText, i as InputGroupInput, n as InputGroupAddon, o as InputGroupTextarea, r as InputGroupButton, t as InputGroup } from "../../index33.cjs";
+import { a as InputGroupText, i as InputGroupInput, n as InputGroupAddon, o as InputGroupTextarea, r as InputGroupButton, t as InputGroup } from "../../index35.cjs";
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/primitives/InputGroup/index.d.ts

@@ -1,2 +1,2 @@
-import { a as InputGroupText, i as InputGroupInput, n as InputGroupAddon, o as InputGroupTextarea, r as InputGroupButton, t as InputGroup } from "../../index33.js";
+import { a as InputGroupText, i as InputGroupInput, n as InputGroupAddon, o as InputGroupTextarea, r as InputGroupButton, t as InputGroup } from "../../index35.js";
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/primitives/InputGroup/index.js

@@ -2,8 +2,8 @@ import { t as cn } from "../../cn.js";
 import { Button } from "../Button/index.js";
 import { Input } from "../Input/index.js";
 import { Textarea } from "../Textarea/index.js";
-import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
 //#region src/primitives/InputGroup/InputGroup.tsx
 /** Bordered container that groups a control (input/textarea) with addons, buttons, and text into one focusable field. */
 function InputGroup({ className, variant = "default", ...props }) {

package/dist/primitives/InputOtp/index.cjs

@@ -1,10 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../../chunk.cjs");
 const require_cn = require("../../cn.cjs");
+const require_Icon = require("../../Icon.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
-let lucide_react = require("lucide-react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
 let input_otp = require("input-otp");
 //#region src/primitives/InputOtp/InputOtp.tsx
 const InputOTPSettingsContext = react.createContext({ size: "default" });
@@ -68,7 +69,7 @@ function InputOTPSeparator({ ...props }) {
 		"data-slot": "input-otp-separator",
 		role: "separator",
 		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MinusIcon, {})
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, { as: lucide_react.MinusIcon })
 	});
 }
 //#endregion

package/dist/primitives/InputOtp/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["React","OTPInput","cn","OTPInputContext","MinusIcon"],"sources":["../../../src/primitives/InputOtp/InputOtp.tsx"],"sourcesContent":["\"use client\";\n\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport { MinusIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\ntype DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;\n\ntype InputOTPSize = \"default\" | \"lg\" | \"sm\" | \"xs\";\n\ntype InputOTPContextValue = {\n  size: InputOTPSize;\n  placeholder?: string;\n};\n\nconst InputOTPSettingsContext = React.createContext<InputOTPContextValue>({\n  size: \"default\",\n});\n\n// Sizes mirror the Figma \"Input\" spec: Mini 24px / Small 32px / Default 36px / Large 40px.\nconst inputOTPSlotSizes: Record<InputOTPSize, string> = {\n  xs: \"size-6 text-xs\",\n  sm: \"size-8 text-sm\",\n  default: \"size-9 text-sm\",\n  lg: \"size-10 text-base\",\n};\n\n/** One-time-passcode field: a row of single-character slots backed by a hidden input. */\nfunction InputOTP({\n  className,\n  containerClassName,\n  size = \"default\",\n  placeholder,\n  ...props\n}: DistributiveOmit<React.ComponentProps<typeof OTPInput>, \"size\" | \"placeholder\"> & {\n  /** Class applied to the outer flex container that wraps the slot groups. */\n  containerClassName?: string;\n  /** Slot dimensions and type scale: Mini 24px / Small 32px / Default 36px / Large 40px. */\n  size?: InputOTPSize;\n  /** Single character shown in empty slots as a hint until the user types. */\n  placeholder?: string;\n}) {\n  const settings = React.useMemo<InputOTPContextValue>(\n    () => ({ size, placeholder }),\n    [size, placeholder],\n  );\n\n  return (\n    <InputOTPSettingsContext.Provider value={settings}>\n      <OTPInput\n        data-slot=\"input-otp\"\n        containerClassName={cn(\n          \"flex items-center gap-2 has-disabled:opacity-50\",\n          containerClassName,\n        )}\n        className={cn(\"disabled:cursor-not-allowed\", className)}\n        {...props}\n      />\n    </InputOTPSettingsContext.Provider>\n  );\n}\n\n/** Visual cluster of adjacent slots; use multiple groups around an `InputOTPSeparator`. */\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A single character cell rendering its char, active ring, fake caret, and placeholder. */\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Zero-based position of this slot within the input's character buffer. */\n  index: number;\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext);\n  const { size, placeholder } = React.useContext(InputOTPSettingsContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n  const isEmpty = char == null || char === \"\";\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"data-[active=true]:border-primary-invert-border data-[active=true]:ring-focus data-[active=true]:aria-invalid:ring-focus-error aria-invalid:border-danger-border data-[active=true]:aria-invalid:border-danger-border relative flex items-center justify-center border-y border-r border-secondary-border bg-input-bg transition-all outline-none first:rounded-l-8 first:border-l last:rounded-r-8 data-[active=true]:z-10 data-[active=true]:ring-3\",\n        inputOTPSlotSizes[size],\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {isEmpty && placeholder && (\n        <span className=\"text-muted-txt pointer-events-none\">{placeholder}</span>\n      )}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-primary-txt h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Decorative divider (a minus icon) placed between two `InputOTPGroup`s. */\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <MinusIcon />\n    </div>\n  );\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };\n"],"mappings":";;;;;;;;;AAiBA,MAAM,0BAA0BA,MAAM,cAAoC,EACxE,MAAM,UACR,CAAC;AAGD,MAAM,oBAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,SAAS;CACT,IAAI;AACN;;AAGA,SAAS,SAAS,EAChB,WACA,oBACA,OAAO,WACP,aACA,GAAG,SAQF;CACD,MAAM,WAAWA,MAAM,eACd;EAAE;EAAM;CAAY,IAC3B,CAAC,MAAM,WAAW,CACpB;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,wBAAwB,UAAzB;EAAkC,OAAO;YACvC,iBAAA,GAAA,kBAAA,KAACC,UAAAA,UAAD;GACE,aAAU;GACV,oBAAoBC,WAAAA,GAClB,mDACA,kBACF;GACA,WAAWA,WAAAA,GAAG,+BAA+B,SAAS;GACtD,GAAI;EACL,CAAA;CAC+B,CAAA;AAEtC;;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EACpB,OACA,WACA,GAAG,SAIF;CACD,MAAM,kBAAkBF,MAAM,WAAWG,UAAAA,eAAe;CACxD,MAAM,EAAE,MAAM,gBAAgBH,MAAM,WAAW,uBAAuB;CACtE,MAAM,EAAE,MAAM,cAAc,aAAa,iBAAiB,MAAM,UAAU,CAAC;CAC3E,MAAM,UAAU,QAAQ,QAAQ,SAAS;CAEzC,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,aAAU;EACV,eAAa;EACb,WAAWE,WAAAA,GACT,ybACA,kBAAkB,OAClB,SACF;EACA,GAAI;YARN;GAUG;GACA,WAAW,eACV,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAAsC;GAAkB,CAAA;GAEzE,gBACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACb,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,4DAA6D,CAAA;GACzE,CAAA;EAEJ;;AAET;;AAGA,SAAS,kBAAkB,EAAE,GAAG,SAAsC;CACpE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,aAAU;EAAsB,MAAK;EAAY,GAAI;YACxD,iBAAA,GAAA,kBAAA,KAACE,aAAAA,WAAD,CAAY,CAAA;CACT,CAAA;AAET"}
+{"version":3,"file":"index.cjs","names":["React","OTPInput","cn","OTPInputContext","Icon","MinusIcon"],"sources":["../../../src/primitives/InputOtp/InputOtp.tsx"],"sourcesContent":["\"use client\";\n\nimport { Icon } from \"@/primitives/Icon\";\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport { MinusIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\ntype DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;\n\ntype InputOTPSize = \"default\" | \"lg\" | \"sm\" | \"xs\";\n\ntype InputOTPContextValue = {\n  size: InputOTPSize;\n  placeholder?: string;\n};\n\nconst InputOTPSettingsContext = React.createContext<InputOTPContextValue>({\n  size: \"default\",\n});\n\n// Sizes mirror the Figma \"Input\" spec: Mini 24px / Small 32px / Default 36px / Large 40px.\nconst inputOTPSlotSizes: Record<InputOTPSize, string> = {\n  xs: \"size-6 text-xs\",\n  sm: \"size-8 text-sm\",\n  default: \"size-9 text-sm\",\n  lg: \"size-10 text-base\",\n};\n\n/** One-time-passcode field: a row of single-character slots backed by a hidden input. */\nfunction InputOTP({\n  className,\n  containerClassName,\n  size = \"default\",\n  placeholder,\n  ...props\n}: DistributiveOmit<React.ComponentProps<typeof OTPInput>, \"size\" | \"placeholder\"> & {\n  /** Class applied to the outer flex container that wraps the slot groups. */\n  containerClassName?: string;\n  /** Slot dimensions and type scale: Mini 24px / Small 32px / Default 36px / Large 40px. */\n  size?: InputOTPSize;\n  /** Single character shown in empty slots as a hint until the user types. */\n  placeholder?: string;\n}) {\n  const settings = React.useMemo<InputOTPContextValue>(\n    () => ({ size, placeholder }),\n    [size, placeholder],\n  );\n\n  return (\n    <InputOTPSettingsContext.Provider value={settings}>\n      <OTPInput\n        data-slot=\"input-otp\"\n        containerClassName={cn(\n          \"flex items-center gap-2 has-disabled:opacity-50\",\n          containerClassName,\n        )}\n        className={cn(\"disabled:cursor-not-allowed\", className)}\n        {...props}\n      />\n    </InputOTPSettingsContext.Provider>\n  );\n}\n\n/** Visual cluster of adjacent slots; use multiple groups around an `InputOTPSeparator`. */\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A single character cell rendering its char, active ring, fake caret, and placeholder. */\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Zero-based position of this slot within the input's character buffer. */\n  index: number;\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext);\n  const { size, placeholder } = React.useContext(InputOTPSettingsContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n  const isEmpty = char == null || char === \"\";\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"data-[active=true]:border-primary-invert-border data-[active=true]:ring-focus data-[active=true]:aria-invalid:ring-focus-error aria-invalid:border-danger-border data-[active=true]:aria-invalid:border-danger-border relative flex items-center justify-center border-y border-r border-secondary-border bg-input-bg transition-all outline-none first:rounded-l-8 first:border-l last:rounded-r-8 data-[active=true]:z-10 data-[active=true]:ring-3\",\n        inputOTPSlotSizes[size],\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {isEmpty && placeholder && (\n        <span className=\"text-muted-txt pointer-events-none\">{placeholder}</span>\n      )}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-primary-txt h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Decorative divider (a minus icon) placed between two `InputOTPGroup`s. */\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <Icon as={MinusIcon} />\n    </div>\n  );\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };\n"],"mappings":";;;;;;;;;;AAkBA,MAAM,0BAA0BA,MAAM,cAAoC,EACxE,MAAM,UACR,CAAC;AAGD,MAAM,oBAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,SAAS;CACT,IAAI;AACN;;AAGA,SAAS,SAAS,EAChB,WACA,oBACA,OAAO,WACP,aACA,GAAG,SAQF;CACD,MAAM,WAAWA,MAAM,eACd;EAAE;EAAM;CAAY,IAC3B,CAAC,MAAM,WAAW,CACpB;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,wBAAwB,UAAzB;EAAkC,OAAO;YACvC,iBAAA,GAAA,kBAAA,KAACC,UAAAA,UAAD;GACE,aAAU;GACV,oBAAoBC,WAAAA,GAClB,mDACA,kBACF;GACA,WAAWA,WAAAA,GAAG,+BAA+B,SAAS;GACtD,GAAI;EACL,CAAA;CAC+B,CAAA;AAEtC;;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EACpB,OACA,WACA,GAAG,SAIF;CACD,MAAM,kBAAkBF,MAAM,WAAWG,UAAAA,eAAe;CACxD,MAAM,EAAE,MAAM,gBAAgBH,MAAM,WAAW,uBAAuB;CACtE,MAAM,EAAE,MAAM,cAAc,aAAa,iBAAiB,MAAM,UAAU,CAAC;CAC3E,MAAM,UAAU,QAAQ,QAAQ,SAAS;CAEzC,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,aAAU;EACV,eAAa;EACb,WAAWE,WAAAA,GACT,ybACA,kBAAkB,OAClB,SACF;EACA,GAAI;YARN;GAUG;GACA,WAAW,eACV,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAAsC;GAAkB,CAAA;GAEzE,gBACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACb,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,4DAA6D,CAAA;GACzE,CAAA;EAEJ;;AAET;;AAGA,SAAS,kBAAkB,EAAE,GAAG,SAAsC;CACpE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,aAAU;EAAsB,MAAK;EAAY,GAAI;YACxD,iBAAA,GAAA,kBAAA,KAACE,aAAAA,MAAD,EAAM,IAAIC,aAAAA,UAAY,CAAA;CACnB,CAAA;AAET"}

package/dist/primitives/InputOtp/index.d.cts

@@ -1,2 +1,2 @@
-import { i as InputOTPSlot, n as InputOTPGroup, r as InputOTPSeparator, t as InputOTP } from "../../index34.cjs";
+import { i as InputOTPSlot, n as InputOTPGroup, r as InputOTPSeparator, t as InputOTP } from "../../index36.cjs";
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/primitives/InputOtp/index.d.ts

@@ -1,2 +1,2 @@
-import { i as InputOTPSlot, n as InputOTPGroup, r as InputOTPSeparator, t as InputOTP } from "../../index34.js";
+import { i as InputOTPSlot, n as InputOTPGroup, r as InputOTPSeparator, t as InputOTP } from "../../index36.js";
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/primitives/InputOtp/index.js

@@ -1,7 +1,8 @@
 import { t as cn } from "../../cn.js";
+import { t as Icon } from "../../Icon.js";
 import * as React from "react";
-import { MinusIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { MinusIcon } from "lucide-react";
 import { OTPInput, OTPInputContext } from "input-otp";
 //#region src/primitives/InputOtp/InputOtp.tsx
 const InputOTPSettingsContext = React.createContext({ size: "default" });
@@ -65,7 +66,7 @@ function InputOTPSeparator({ ...props }) {
 		"data-slot": "input-otp-separator",
 		role: "separator",
 		...props,
-		children: /* @__PURE__ */ jsx(MinusIcon, {})
+		children: /* @__PURE__ */ jsx(Icon, { as: MinusIcon })
 	});
 }
 //#endregion

package/dist/primitives/InputOtp/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/InputOtp/InputOtp.tsx"],"sourcesContent":["\"use client\";\n\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport { MinusIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\ntype DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;\n\ntype InputOTPSize = \"default\" | \"lg\" | \"sm\" | \"xs\";\n\ntype InputOTPContextValue = {\n  size: InputOTPSize;\n  placeholder?: string;\n};\n\nconst InputOTPSettingsContext = React.createContext<InputOTPContextValue>({\n  size: \"default\",\n});\n\n// Sizes mirror the Figma \"Input\" spec: Mini 24px / Small 32px / Default 36px / Large 40px.\nconst inputOTPSlotSizes: Record<InputOTPSize, string> = {\n  xs: \"size-6 text-xs\",\n  sm: \"size-8 text-sm\",\n  default: \"size-9 text-sm\",\n  lg: \"size-10 text-base\",\n};\n\n/** One-time-passcode field: a row of single-character slots backed by a hidden input. */\nfunction InputOTP({\n  className,\n  containerClassName,\n  size = \"default\",\n  placeholder,\n  ...props\n}: DistributiveOmit<React.ComponentProps<typeof OTPInput>, \"size\" | \"placeholder\"> & {\n  /** Class applied to the outer flex container that wraps the slot groups. */\n  containerClassName?: string;\n  /** Slot dimensions and type scale: Mini 24px / Small 32px / Default 36px / Large 40px. */\n  size?: InputOTPSize;\n  /** Single character shown in empty slots as a hint until the user types. */\n  placeholder?: string;\n}) {\n  const settings = React.useMemo<InputOTPContextValue>(\n    () => ({ size, placeholder }),\n    [size, placeholder],\n  );\n\n  return (\n    <InputOTPSettingsContext.Provider value={settings}>\n      <OTPInput\n        data-slot=\"input-otp\"\n        containerClassName={cn(\n          \"flex items-center gap-2 has-disabled:opacity-50\",\n          containerClassName,\n        )}\n        className={cn(\"disabled:cursor-not-allowed\", className)}\n        {...props}\n      />\n    </InputOTPSettingsContext.Provider>\n  );\n}\n\n/** Visual cluster of adjacent slots; use multiple groups around an `InputOTPSeparator`. */\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A single character cell rendering its char, active ring, fake caret, and placeholder. */\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Zero-based position of this slot within the input's character buffer. */\n  index: number;\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext);\n  const { size, placeholder } = React.useContext(InputOTPSettingsContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n  const isEmpty = char == null || char === \"\";\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"data-[active=true]:border-primary-invert-border data-[active=true]:ring-focus data-[active=true]:aria-invalid:ring-focus-error aria-invalid:border-danger-border data-[active=true]:aria-invalid:border-danger-border relative flex items-center justify-center border-y border-r border-secondary-border bg-input-bg transition-all outline-none first:rounded-l-8 first:border-l last:rounded-r-8 data-[active=true]:z-10 data-[active=true]:ring-3\",\n        inputOTPSlotSizes[size],\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {isEmpty && placeholder && (\n        <span className=\"text-muted-txt pointer-events-none\">{placeholder}</span>\n      )}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-primary-txt h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Decorative divider (a minus icon) placed between two `InputOTPGroup`s. */\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <MinusIcon />\n    </div>\n  );\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };\n"],"mappings":";;;;;;AAiBA,MAAM,0BAA0B,MAAM,cAAoC,EACxE,MAAM,UACR,CAAC;AAGD,MAAM,oBAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,SAAS;CACT,IAAI;AACN;;AAGA,SAAS,SAAS,EAChB,WACA,oBACA,OAAO,WACP,aACA,GAAG,SAQF;CACD,MAAM,WAAW,MAAM,eACd;EAAE;EAAM;CAAY,IAC3B,CAAC,MAAM,WAAW,CACpB;CAEA,OACE,oBAAC,wBAAwB,UAAzB;EAAkC,OAAO;YACvC,oBAAC,UAAD;GACE,aAAU;GACV,oBAAoB,GAClB,mDACA,kBACF;GACA,WAAW,GAAG,+BAA+B,SAAS;GACtD,GAAI;EACL,CAAA;CAC+B,CAAA;AAEtC;;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EACpB,OACA,WACA,GAAG,SAIF;CACD,MAAM,kBAAkB,MAAM,WAAW,eAAe;CACxD,MAAM,EAAE,MAAM,gBAAgB,MAAM,WAAW,uBAAuB;CACtE,MAAM,EAAE,MAAM,cAAc,aAAa,iBAAiB,MAAM,UAAU,CAAC;CAC3E,MAAM,UAAU,QAAQ,QAAQ,SAAS;CAEzC,OACE,qBAAC,OAAD;EACE,aAAU;EACV,eAAa;EACb,WAAW,GACT,ybACA,kBAAkB,OAClB,SACF;EACA,GAAI;YARN;GAUG;GACA,WAAW,eACV,oBAAC,QAAD;IAAM,WAAU;cAAsC;GAAkB,CAAA;GAEzE,gBACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD,EAAK,WAAU,4DAA6D,CAAA;GACzE,CAAA;EAEJ;;AAET;;AAGA,SAAS,kBAAkB,EAAE,GAAG,SAAsC;CACpE,OACE,oBAAC,OAAD;EAAK,aAAU;EAAsB,MAAK;EAAY,GAAI;YACxD,oBAAC,WAAD,CAAY,CAAA;CACT,CAAA;AAET"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/InputOtp/InputOtp.tsx"],"sourcesContent":["\"use client\";\n\nimport { Icon } from \"@/primitives/Icon\";\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport { MinusIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\ntype DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;\n\ntype InputOTPSize = \"default\" | \"lg\" | \"sm\" | \"xs\";\n\ntype InputOTPContextValue = {\n  size: InputOTPSize;\n  placeholder?: string;\n};\n\nconst InputOTPSettingsContext = React.createContext<InputOTPContextValue>({\n  size: \"default\",\n});\n\n// Sizes mirror the Figma \"Input\" spec: Mini 24px / Small 32px / Default 36px / Large 40px.\nconst inputOTPSlotSizes: Record<InputOTPSize, string> = {\n  xs: \"size-6 text-xs\",\n  sm: \"size-8 text-sm\",\n  default: \"size-9 text-sm\",\n  lg: \"size-10 text-base\",\n};\n\n/** One-time-passcode field: a row of single-character slots backed by a hidden input. */\nfunction InputOTP({\n  className,\n  containerClassName,\n  size = \"default\",\n  placeholder,\n  ...props\n}: DistributiveOmit<React.ComponentProps<typeof OTPInput>, \"size\" | \"placeholder\"> & {\n  /** Class applied to the outer flex container that wraps the slot groups. */\n  containerClassName?: string;\n  /** Slot dimensions and type scale: Mini 24px / Small 32px / Default 36px / Large 40px. */\n  size?: InputOTPSize;\n  /** Single character shown in empty slots as a hint until the user types. */\n  placeholder?: string;\n}) {\n  const settings = React.useMemo<InputOTPContextValue>(\n    () => ({ size, placeholder }),\n    [size, placeholder],\n  );\n\n  return (\n    <InputOTPSettingsContext.Provider value={settings}>\n      <OTPInput\n        data-slot=\"input-otp\"\n        containerClassName={cn(\n          \"flex items-center gap-2 has-disabled:opacity-50\",\n          containerClassName,\n        )}\n        className={cn(\"disabled:cursor-not-allowed\", className)}\n        {...props}\n      />\n    </InputOTPSettingsContext.Provider>\n  );\n}\n\n/** Visual cluster of adjacent slots; use multiple groups around an `InputOTPSeparator`. */\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** A single character cell rendering its char, active ring, fake caret, and placeholder. */\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Zero-based position of this slot within the input's character buffer. */\n  index: number;\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext);\n  const { size, placeholder } = React.useContext(InputOTPSettingsContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n  const isEmpty = char == null || char === \"\";\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"data-[active=true]:border-primary-invert-border data-[active=true]:ring-focus data-[active=true]:aria-invalid:ring-focus-error aria-invalid:border-danger-border data-[active=true]:aria-invalid:border-danger-border relative flex items-center justify-center border-y border-r border-secondary-border bg-input-bg transition-all outline-none first:rounded-l-8 first:border-l last:rounded-r-8 data-[active=true]:z-10 data-[active=true]:ring-3\",\n        inputOTPSlotSizes[size],\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {isEmpty && placeholder && (\n        <span className=\"text-muted-txt pointer-events-none\">{placeholder}</span>\n      )}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-primary-txt h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Decorative divider (a minus icon) placed between two `InputOTPGroup`s. */\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <Icon as={MinusIcon} />\n    </div>\n  );\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };\n"],"mappings":";;;;;;;AAkBA,MAAM,0BAA0B,MAAM,cAAoC,EACxE,MAAM,UACR,CAAC;AAGD,MAAM,oBAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,SAAS;CACT,IAAI;AACN;;AAGA,SAAS,SAAS,EAChB,WACA,oBACA,OAAO,WACP,aACA,GAAG,SAQF;CACD,MAAM,WAAW,MAAM,eACd;EAAE;EAAM;CAAY,IAC3B,CAAC,MAAM,WAAW,CACpB;CAEA,OACE,oBAAC,wBAAwB,UAAzB;EAAkC,OAAO;YACvC,oBAAC,UAAD;GACE,aAAU;GACV,oBAAoB,GAClB,mDACA,kBACF;GACA,WAAW,GAAG,+BAA+B,SAAS;GACtD,GAAI;EACL,CAAA;CAC+B,CAAA;AAEtC;;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EACpB,OACA,WACA,GAAG,SAIF;CACD,MAAM,kBAAkB,MAAM,WAAW,eAAe;CACxD,MAAM,EAAE,MAAM,gBAAgB,MAAM,WAAW,uBAAuB;CACtE,MAAM,EAAE,MAAM,cAAc,aAAa,iBAAiB,MAAM,UAAU,CAAC;CAC3E,MAAM,UAAU,QAAQ,QAAQ,SAAS;CAEzC,OACE,qBAAC,OAAD;EACE,aAAU;EACV,eAAa;EACb,WAAW,GACT,ybACA,kBAAkB,OAClB,SACF;EACA,GAAI;YARN;GAUG;GACA,WAAW,eACV,oBAAC,QAAD;IAAM,WAAU;cAAsC;GAAkB,CAAA;GAEzE,gBACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD,EAAK,WAAU,4DAA6D,CAAA;GACzE,CAAA;EAEJ;;AAET;;AAGA,SAAS,kBAAkB,EAAE,GAAG,SAAsC;CACpE,OACE,oBAAC,OAAD;EAAK,aAAU;EAAsB,MAAK;EAAY,GAAI;YACxD,oBAAC,MAAD,EAAM,IAAI,UAAY,CAAA;CACnB,CAAA;AAET"}

package/dist/primitives/Item/index.cjs

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
 const require_primitives_Separator_index = require("../Separator/index.cjs");
-let radix_ui = require("radix-ui");
-let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
+let react_jsx_runtime = require("react/jsx-runtime");
+let radix_ui = require("radix-ui");
 //#region src/primitives/Item/Item.tsx
 /** Vertical list container that groups related `Item`s (role="list"). */
 function ItemGroup({ className, ...props }) {

package/dist/primitives/Item/index.d.cts

@@ -1,2 +1,2 @@
-import { a as ItemFooter, c as ItemMedia, i as ItemDescription, l as ItemSeparator, n as ItemActions, o as ItemGroup, r as ItemContent, s as ItemHeader, t as Item, u as ItemTitle } from "../../index35.cjs";
+import { a as ItemFooter, c as ItemMedia, i as ItemDescription, l as ItemSeparator, n as ItemActions, o as ItemGroup, r as ItemContent, s as ItemHeader, t as Item, u as ItemTitle } from "../../index37.cjs";
 export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };

package/dist/primitives/Item/index.d.ts

@@ -1,2 +1,2 @@
-import { a as ItemFooter, c as ItemMedia, i as ItemDescription, l as ItemSeparator, n as ItemActions, o as ItemGroup, r as ItemContent, s as ItemHeader, t as Item, u as ItemTitle } from "../../index35.js";
+import { a as ItemFooter, c as ItemMedia, i as ItemDescription, l as ItemSeparator, n as ItemActions, o as ItemGroup, r as ItemContent, s as ItemHeader, t as Item, u as ItemTitle } from "../../index37.js";
 export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };

package/dist/primitives/Item/index.js

@@ -1,8 +1,8 @@
 import { t as cn } from "../../cn.js";
 import { Separator as Separator$1 } from "../Separator/index.js";
-import { Slot } from "radix-ui";
-import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "radix-ui";
 //#region src/primitives/Item/Item.tsx
 /** Vertical list container that groups related `Item`s (role="list"). */
 function ItemGroup({ className, ...props }) {

package/dist/primitives/Kbd/index.d.cts

@@ -1,2 +1,2 @@
-import { n as KbdGroup, t as Kbd } from "../../index36.cjs";
+import { n as KbdGroup, t as Kbd } from "../../index38.cjs";
 export { Kbd, KbdGroup };

package/dist/primitives/Kbd/index.d.ts

@@ -1,2 +1,2 @@
-import { n as KbdGroup, t as Kbd } from "../../index36.js";
+import { n as KbdGroup, t as Kbd } from "../../index38.js";
 export { Kbd, KbdGroup };

package/dist/primitives/Label/index.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
-let radix_ui = require("radix-ui");
 let react_jsx_runtime = require("react/jsx-runtime");
+let radix_ui = require("radix-ui");
 //#region src/primitives/Label/Label.tsx
 /** Accessible form label (Radix `Label.Root`) that ties caption text to a control and dims when the associated field is disabled. */
 function Label({ className, align = "block", ...props }) {

package/dist/primitives/Label/index.d.cts

@@ -1,2 +1,2 @@
-import { t as Label } from "../../index25.cjs";
+import { t as Label } from "../../index26.cjs";
 export { Label };

package/dist/primitives/Label/index.d.ts

@@ -1,2 +1,2 @@
-import { t as Label } from "../../index25.js";
+import { t as Label } from "../../index26.js";
 export { Label };

package/dist/primitives/Label/index.js

@@ -1,6 +1,6 @@
 import { t as cn } from "../../cn.js";
-import { Label as Label$1 } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
+import { Label as Label$1 } from "radix-ui";
 //#region src/primitives/Label/Label.tsx
 /** Accessible form label (Radix `Label.Root`) that ties caption text to a control and dims when the associated field is disabled. */
 function Label({ className, align = "block", ...props }) {

package/dist/primitives/Link/index.cjs

@@ -1,9 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
-let radix_ui = require("radix-ui");
+let class_variance_authority = require("class-variance-authority");
 let react_jsx_runtime = require("react/jsx-runtime");
+let radix_ui = require("radix-ui");
 //#region src/primitives/Link/Link.tsx
-const linkVariants = (0, require("class-variance-authority").cva)("rounded-2 underline underline-offset-2 outline-none transition-colors focus-visible:ring-3 focus-visible:ring-focus", {
+const linkVariants = (0, class_variance_authority.cva)("rounded-2 underline underline-offset-2 outline-none transition-colors focus-visible:ring-3 focus-visible:ring-focus", {
 	variants: {
 		variant: {
 			default: "font-medium text-primary-txt hover:text-primary-txt/80",

package/dist/primitives/Link/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["Slot","cn"],"sources":["../../../src/primitives/Link/Link.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Link — inline text link. Use `asChild` to render a router link (e.g. React\n// Router's <Link>) while keeping the design-system styling.\nconst linkVariants = cva(\n  \"rounded-2 underline underline-offset-2 outline-none transition-colors focus-visible:ring-3 focus-visible:ring-focus\",\n  {\n    variants: {\n      variant: {\n        default: \"font-medium text-primary-txt hover:text-primary-txt/80\",\n        muted: \"font-medium text-muted-txt hover:text-primary-txt\",\n        subtle: \"text-primary-txt hover:text-primary-txt/80\",\n      },\n      underline: {\n        always: \"\",\n        hover: \"no-underline hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      underline: \"always\",\n    },\n  },\n);\n\ntype LinkProps = React.ComponentProps<\"a\"> &\n  VariantProps<typeof linkVariants> & {\n    /** Render the child element instead of an <a> (for router links). */\n    asChild?: boolean;\n    /** Visual emphasis of the link text: primary (`default`), `muted`, or `subtle`. */\n    variant?: VariantProps<typeof linkVariants>[\"variant\"];\n    /** When the underline shows: `always` or only on `hover`. */\n    underline?: VariantProps<typeof linkVariants>[\"underline\"];\n  };\n\n/** Inline text link styled to the design system; pass `asChild` to render a router link. */\nfunction Link({ asChild = false, className, variant, underline, ...props }: LinkProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return (\n    <Comp\n      data-slot=\"link\"\n      className={cn(linkVariants({ variant, underline }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Link, linkVariants, type LinkProps };\n"],"mappings":";;;;;AAQA,MAAM,gBAAA,qCAAA,EAAA,KACJ,uHACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,OAAO;GACP,QAAQ;EACV;EACA,WAAW;GACT,QAAQ;GACR,OAAO;EACT;CACF;CACA,iBAAiB;EACf,SAAS;EACT,WAAW;CACb;AACF,CACF;;AAaA,SAAS,KAAK,EAAE,UAAU,OAAO,WAAW,SAAS,WAAW,GAAG,SAAoB;CAErF,OACE,iBAAA,GAAA,kBAAA,KAFW,UAAUA,SAAAA,KAAK,OAAO,KAEjC;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,aAAa;GAAE;GAAS;EAAU,CAAC,GAAG,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["Slot","cn"],"sources":["../../../src/primitives/Link/Link.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Link — inline text link. Use `asChild` to render a router link (e.g. React\n// Router's <Link>) while keeping the design-system styling.\nconst linkVariants = cva(\n  \"rounded-2 underline underline-offset-2 outline-none transition-colors focus-visible:ring-3 focus-visible:ring-focus\",\n  {\n    variants: {\n      variant: {\n        default: \"font-medium text-primary-txt hover:text-primary-txt/80\",\n        muted: \"font-medium text-muted-txt hover:text-primary-txt\",\n        subtle: \"text-primary-txt hover:text-primary-txt/80\",\n      },\n      underline: {\n        always: \"\",\n        hover: \"no-underline hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      underline: \"always\",\n    },\n  },\n);\n\ntype LinkProps = React.ComponentProps<\"a\"> &\n  VariantProps<typeof linkVariants> & {\n    /** Render the child element instead of an <a> (for router links). */\n    asChild?: boolean;\n    /** Visual emphasis of the link text: primary (`default`), `muted`, or `subtle`. */\n    variant?: VariantProps<typeof linkVariants>[\"variant\"];\n    /** When the underline shows: `always` or only on `hover`. */\n    underline?: VariantProps<typeof linkVariants>[\"underline\"];\n  };\n\n/** Inline text link styled to the design system; pass `asChild` to render a router link. */\nfunction Link({ asChild = false, className, variant, underline, ...props }: LinkProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return (\n    <Comp\n      data-slot=\"link\"\n      className={cn(linkVariants({ variant, underline }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Link, linkVariants, type LinkProps };\n"],"mappings":";;;;;;AAQA,MAAM,gBAAA,GAAA,yBAAA,KACJ,uHACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,OAAO;GACP,QAAQ;EACV;EACA,WAAW;GACT,QAAQ;GACR,OAAO;EACT;CACF;CACA,iBAAiB;EACf,SAAS;EACT,WAAW;CACb;AACF,CACF;;AAaA,SAAS,KAAK,EAAE,UAAU,OAAO,WAAW,SAAS,WAAW,GAAG,SAAoB;CAErF,OACE,iBAAA,GAAA,kBAAA,KAFW,UAAUA,SAAAA,KAAK,OAAO,KAEjC;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,aAAa;GAAE;GAAS;EAAU,CAAC,GAAG,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Link/index.d.cts

@@ -1,2 +1,2 @@
-import { n as LinkProps, r as linkVariants, t as Link } from "../../index37.cjs";
+import { n as LinkProps, r as linkVariants, t as Link } from "../../index39.cjs";
 export { Link, LinkProps, linkVariants };

package/dist/primitives/Link/index.d.ts

@@ -1,2 +1,2 @@
-import { n as LinkProps, r as linkVariants, t as Link } from "../../index37.js";
+import { n as LinkProps, r as linkVariants, t as Link } from "../../index39.js";
 export { Link, LinkProps, linkVariants };

package/dist/primitives/Link/index.js

@@ -1,7 +1,7 @@
 import { t as cn } from "../../cn.js";
-import { Slot } from "radix-ui";
-import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "radix-ui";
 //#region src/primitives/Link/Link.tsx
 const linkVariants = cva("rounded-2 underline underline-offset-2 outline-none transition-colors focus-visible:ring-3 focus-visible:ring-focus", {
 	variants: {

package/dist/primitives/Logo/index.d.cts

@@ -1,2 +1,2 @@
-import { n as LogoBrand, r as LogoVariant, t as Logo } from "../../index38.cjs";
+import { n as LogoBrand, r as LogoVariant, t as Logo } from "../../index40.cjs";
 export { Logo, LogoBrand, LogoVariant };

package/dist/primitives/Logo/index.d.ts

@@ -1,2 +1,2 @@
-import { n as LogoBrand, r as LogoVariant, t as Logo } from "../../index38.js";
+import { n as LogoBrand, r as LogoVariant, t as Logo } from "../../index40.js";
 export { Logo, LogoBrand, LogoVariant };

package/dist/primitives/Menubar/index.cjs

@@ -1,8 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
+const require_Icon = require("../../Icon.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 let radix_ui = require("radix-ui");
-let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/primitives/Menubar/Menubar.tsx
 /** Horizontal application menu bar that hosts a row of dropdown menus (File, Edit, …). */
 function Menubar({ className, ...props }) {
@@ -78,7 +79,10 @@ function MenubarCheckboxItem({ className, children, checked, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Menubar.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, { className: "size-4" }) })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Menubar.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				as: lucide_react.CheckIcon,
+				className: "size-4"
+			}) })
 		}), children]
 	});
 }
@@ -90,7 +94,10 @@ function MenubarRadioItem({ className, children, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Menubar.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CircleIcon, { className: "size-2 fill-current" }) })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Menubar.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				as: lucide_react.CircleIcon,
+				className: "size-2 fill-current"
+			}) })
 		}), children]
 	});
 }
@@ -133,7 +140,10 @@ function MenubarSubTrigger({ className, inset, children, ...props }) {
 		"data-inset": inset,
 		className: require_cn.cn("flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-none select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg", className),
 		...props,
-		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRightIcon, { className: "ml-auto size-4" })]
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+			as: lucide_react.ChevronRightIcon,
+			className: "ml-auto size-4"
+		})]
 	});
 }
 /** The dropdown surface for a nested submenu's items. */

package/dist/primitives/Menubar/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["MenubarPrimitive","cn","CheckIcon","CircleIcon","ChevronRightIcon"],"sources":["../../../src/primitives/Menubar/Menubar.tsx"],"sourcesContent":["import { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { Menubar as MenubarPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Horizontal application menu bar that hosts a row of dropdown menus (File, Edit, …). */\nfunction Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-9 items-center gap-1 rounded-8 border border-primary-border bg-primary-bg p-1 shadow-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A single menu within the bar — wraps a trigger and its content. */\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />;\n}\n\n/** Groups related menu items together for semantic structure. */\nfunction MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />;\n}\n\n/** Portals menu content into the document body so it escapes overflow/stacking contexts. */\nfunction MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />;\n}\n\n/** Groups `MenubarRadioItem`s so only one can be selected at a time. */\nfunction MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />;\n}\n\n/** The clickable label in the bar that opens its menu's content. */\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"flex items-center rounded-8 px-2 py-1 font-heading text-sm leading-5 font-medium outline-hidden select-none focus:bg-ghost-hover-bg data-[state=open]:bg-toggle-active-bg\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The dropdown surface that holds a menu's items; portalled and animated. */\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 min-w-48 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          // Vertical hierarchy: if any item reserves the 32px indicator column\n          // (checkbox/radio items), plain items, labels and sub-triggers share it.\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-item]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-label]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-sub-trigger]:not([data-inset])]:pl-8\",\n          className,\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  );\n}\n\n/** A selectable action inside a menu's content. */\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n  /** Visual intent — `destructive` styles the item in the danger colour. */\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-danger-txt data-[variant=destructive]:focus:bg-danger-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt data-[variant=destructive]:*:[svg]:text-danger-txt!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A menu item with a toggleable checkmark indicator. */\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  );\n}\n\n/** A menu item with a radio dot indicator; use inside a `MenubarRadioGroup`. */\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading that titles a group of menu items. */\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-xs leading-4 font-medium text-muted-txt data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A thin divider line between groups of menu items. */\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"my-1 h-px bg-primary-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned hint text for an item's keyboard shortcut (e.g. ⌘T). */\nfunction MenubarShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"ml-auto text-sm leading-5 text-muted-txt\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Wraps a nested submenu (its trigger and content). */\nfunction MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />;\n}\n\n/** An item that opens a nested submenu; shows a trailing chevron. */\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-none select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </MenubarPrimitive.SubTrigger>\n  );\n}\n\n/** The dropdown surface for a nested submenu's items. */\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n        // Vertical hierarchy: if any item reserves the 32px indicator column\n        // (checkbox/radio items), plain items, labels and sub-triggers share it.\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-item]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-label]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-sub-trigger]:not([data-inset])]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["MenubarPrimitive","cn","Icon","CheckIcon","CircleIcon","ChevronRightIcon"],"sources":["../../../src/primitives/Menubar/Menubar.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { Menubar as MenubarPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Horizontal application menu bar that hosts a row of dropdown menus (File, Edit, …). */\nfunction Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-9 items-center gap-1 rounded-8 border border-primary-border bg-primary-bg p-1 shadow-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A single menu within the bar — wraps a trigger and its content. */\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />;\n}\n\n/** Groups related menu items together for semantic structure. */\nfunction MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />;\n}\n\n/** Portals menu content into the document body so it escapes overflow/stacking contexts. */\nfunction MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />;\n}\n\n/** Groups `MenubarRadioItem`s so only one can be selected at a time. */\nfunction MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />;\n}\n\n/** The clickable label in the bar that opens its menu's content. */\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"flex items-center rounded-8 px-2 py-1 font-heading text-sm leading-5 font-medium outline-hidden select-none focus:bg-ghost-hover-bg data-[state=open]:bg-toggle-active-bg\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The dropdown surface that holds a menu's items; portalled and animated. */\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 min-w-48 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          // Vertical hierarchy: if any item reserves the 32px indicator column\n          // (checkbox/radio items), plain items, labels and sub-triggers share it.\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-item]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-label]:not([data-inset])]:pl-8\",\n          \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-sub-trigger]:not([data-inset])]:pl-8\",\n          className,\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  );\n}\n\n/** A selectable action inside a menu's content. */\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n  /** Visual intent — `destructive` styles the item in the danger colour. */\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-danger-txt data-[variant=destructive]:focus:bg-danger-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-txt data-[variant=destructive]:*:[svg]:text-danger-txt!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A menu item with a toggleable checkmark indicator. */\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <Icon as={CheckIcon} className=\"size-4\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  );\n}\n\n/** A menu item with a radio dot indicator; use inside a `MenubarRadioGroup`. */\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-10 py-1.5 pr-2 pl-8 text-sm leading-5 outline-hidden select-none focus:bg-ghost-hover-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <Icon as={CircleIcon} className=\"size-2 fill-current\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  );\n}\n\n/** A non-interactive heading that titles a group of menu items. */\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-xs leading-4 font-medium text-muted-txt data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A thin divider line between groups of menu items. */\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"my-1 h-px bg-primary-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Right-aligned hint text for an item's keyboard shortcut (e.g. ⌘T). */\nfunction MenubarShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"ml-auto text-sm leading-5 text-muted-txt\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Wraps a nested submenu (its trigger and content). */\nfunction MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />;\n}\n\n/** An item that opens a nested submenu; shows a trailing chevron. */\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  /** Adds left padding to align the label with items that have leading icons/indicators. */\n  inset?: boolean;\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-none select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <Icon as={ChevronRightIcon} className=\"ml-auto size-4\" />\n    </MenubarPrimitive.SubTrigger>\n  );\n}\n\n/** The dropdown surface for a nested submenu's items. */\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-12 border border-primary-border bg-glass-none-bg p-2 text-primary-txt shadow-sm data-[side=bottom]:slide-in-from-top-8 data-[side=left]:slide-in-from-right-8 data-[side=right]:slide-in-from-left-8 data-[side=top]:slide-in-from-bottom-8 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n        // Vertical hierarchy: if any item reserves the 32px indicator column\n        // (checkbox/radio items), plain items, labels and sub-triggers share it.\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-item]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-label]:not([data-inset])]:pl-8\",\n        \"[&:has([role=menuitemcheckbox],[role=menuitemradio])_[data-slot=menubar-sub-trigger]:not([data-inset])]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n};\n"],"mappings":";;;;;;;;AAQA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAA6D;CAC5F,OACE,iBAAA,GAAA,kBAAA,KAACA,SAAAA,QAAiB,MAAlB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,kGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,GAAG,SAA6D;CACrF,OAAO,iBAAA,GAAA,kBAAA,KAACD,SAAAA,QAAiB,MAAlB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;;AAGA,SAAS,aAAa,EAAE,GAAG,SAA8D;CACvF,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,QAAiB,OAAlB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;AAGA,SAAS,cAAc,EAAE,GAAG,SAA+D;CACzF,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;;AAGA,SAAS,kBAAkB,EAAE,GAAG,SAAmE;CACjG,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,QAAiB,YAAlB;EAA6B,aAAU;EAAsB,GAAI;CAAQ,CAAA;AAClF;;AAGA,SAAS,eAAe,EACtB,WACA,GAAG,SACqD;CACxD,OACE,iBAAA,GAAA,kBAAA,KAACA,SAAAA,QAAiB,SAAlB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,6KACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EACtB,WACA,QAAQ,SACR,cAAc,IACd,aAAa,GACb,GAAG,SACqD;CACxD,OACE,iBAAA,GAAA,kBAAA,KAAC,eAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,QAAiB,SAAlB;EACE,aAAU;EACH;EACM;EACD;EACZ,WAAWC,WAAAA,GACT,4dAGA,yGACA,0GACA,gHACA,SACF;EACA,GAAI;CACL,CAAA,EACY,CAAA;AAEnB;;AAGA,SAAS,YAAY,EACnB,WACA,OACA,UAAU,WACV,GAAG,SAMF;CACD,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,QAAiB,MAAlB;EACE,aAAU;EACV,cAAY;EACZ,gBAAc;EACd,WAAWC,WAAAA,GACT,ofACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,oBAAoB,EAC3B,WACA,UACA,SACA,GAAG,SAC0D;CAC7D,OACE,iBAAA,GAAA,kBAAA,MAACD,SAAAA,QAAiB,cAAlB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,6SACA,SACF;EACS;EACT,GAAI;YAPN,CASE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACd,iBAAA,GAAA,kBAAA,KAACD,SAAAA,QAAiB,eAAlB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACE,aAAAA,MAAD;IAAM,IAAIC,aAAAA;IAAW,WAAU;GAAU,CAAA,EACX,CAAA;EAC5B,CAAA,GACL,QAC4B;;AAEnC;;AAGA,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACuD;CAC1D,OACE,iBAAA,GAAA,kBAAA,MAACH,SAAAA,QAAiB,WAAlB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,6SACA,SACF;EACA,GAAI;YANN,CAQE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACd,iBAAA,GAAA,kBAAA,KAACD,SAAAA,QAAiB,eAAlB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACE,aAAAA,MAAD;IAAM,IAAIE,aAAAA;IAAY,WAAU;GAAuB,CAAA,EACzB,CAAA;EAC5B,CAAA,GACL,QACyB;;AAEhC;;AAGA,SAAS,aAAa,EACpB,WACA,OACA,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,KAACJ,SAAAA,QAAiB,OAAlB;EACE,aAAU;EACV,cAAY;EACZ,WAAWC,WAAAA,GACT,8EACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,iBAAA,GAAA,kBAAA,KAACD,SAAAA,QAAiB,WAAlB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAuC;CAC9E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,WAAW,EAAE,GAAG,SAA4D;CACnF,OAAO,iBAAA,GAAA,kBAAA,KAACD,SAAAA,QAAiB,KAAlB;EAAsB,aAAU;EAAc,GAAI;CAAQ,CAAA;AACnE;;AAGA,SAAS,kBAAkB,EACzB,WACA,OACA,UACA,GAAG,SAIF;CACD,OACE,iBAAA,GAAA,kBAAA,MAACA,SAAAA,QAAiB,YAAlB;EACE,aAAU;EACV,cAAY;EACZ,WAAWC,WAAAA,GACT,kMACA,SACF;EACA,GAAI;YAPN,CASG,UACD,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;GAAM,IAAIG,aAAAA;GAAkB,WAAU;EAAkB,CAAA,CAC7B;;AAEjC;;AAGA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,iBAAA,GAAA,kBAAA,KAACL,SAAAA,QAAiB,YAAlB;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,4fAGA,yGACA,0GACA,gHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Menubar/index.d.cts

@@ -1,2 +1,2 @@
-import { a as MenubarItem, c as MenubarPortal, d as MenubarSeparator, f as MenubarShortcut, g as MenubarTrigger, h as MenubarSubTrigger, i as MenubarGroup, l as MenubarRadioGroup, m as MenubarSubContent, n as MenubarCheckboxItem, o as MenubarLabel, p as MenubarSub, r as MenubarContent, s as MenubarMenu, t as Menubar, u as MenubarRadioItem } from "../../index39.cjs";
+import { a as MenubarItem, c as MenubarPortal, d as MenubarSeparator, f as MenubarShortcut, g as MenubarTrigger, h as MenubarSubTrigger, i as MenubarGroup, l as MenubarRadioGroup, m as MenubarSubContent, n as MenubarCheckboxItem, o as MenubarLabel, p as MenubarSub, r as MenubarContent, s as MenubarMenu, t as Menubar, u as MenubarRadioItem } from "../../index41.cjs";
 export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger };

package/dist/primitives/Menubar/index.d.ts

@@ -1,2 +1,2 @@
-import { a as MenubarItem, c as MenubarPortal, d as MenubarSeparator, f as MenubarShortcut, g as MenubarTrigger, h as MenubarSubTrigger, i as MenubarGroup, l as MenubarRadioGroup, m as MenubarSubContent, n as MenubarCheckboxItem, o as MenubarLabel, p as MenubarSub, r as MenubarContent, s as MenubarMenu, t as Menubar, u as MenubarRadioItem } from "../../index39.js";
+import { a as MenubarItem, c as MenubarPortal, d as MenubarSeparator, f as MenubarShortcut, g as MenubarTrigger, h as MenubarSubTrigger, i as MenubarGroup, l as MenubarRadioGroup, m as MenubarSubContent, n as MenubarCheckboxItem, o as MenubarLabel, p as MenubarSub, r as MenubarContent, s as MenubarMenu, t as Menubar, u as MenubarRadioItem } from "../../index41.js";
 export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger };

package/dist/primitives/Menubar/index.js

@@ -1,7 +1,8 @@
 import { t as cn } from "../../cn.js";
+import { t as Icon } from "../../Icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import { Menubar as Menubar$1 } from "radix-ui";
-import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/Menubar/Menubar.tsx
 /** Horizontal application menu bar that hosts a row of dropdown menus (File, Edit, …). */
 function Menubar({ className, ...props }) {
@@ -77,7 +78,10 @@ function MenubarCheckboxItem({ className, children, checked, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ jsx(Menubar$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
+			children: /* @__PURE__ */ jsx(Menubar$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, {
+				as: CheckIcon,
+				className: "size-4"
+			}) })
 		}), children]
 	});
 }
@@ -89,7 +93,10 @@ function MenubarRadioItem({ className, children, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ jsx(Menubar$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) })
+			children: /* @__PURE__ */ jsx(Menubar$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, {
+				as: CircleIcon,
+				className: "size-2 fill-current"
+			}) })
 		}), children]
 	});
 }
@@ -132,7 +139,10 @@ function MenubarSubTrigger({ className, inset, children, ...props }) {
 		"data-inset": inset,
 		className: cn("flex min-h-8 cursor-default items-center gap-2 rounded-10 px-2 py-1.5 text-sm leading-5 outline-none select-none focus:bg-ghost-hover-bg data-[inset]:pl-8 data-[state=open]:bg-ghost-hover-bg", className),
 		...props,
-		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4" })]
+		children: [children, /* @__PURE__ */ jsx(Icon, {
+			as: ChevronRightIcon,
+			className: "ml-auto size-4"
+		})]
 	});
 }
 /** The dropdown surface for a nested submenu's items. */