commerce-toolkit 0.6.0 → 0.8.0

package/dist/side-panel-scroll-area-BjHd_8hw.js

@@ -0,0 +1,120 @@
+import { jsx as n } from "react/jsx-runtime";
+import { R as l, T as o, P as r, O as s, C as d, a as c, b as f } from "./index-D54L0mSJ.js";
+import { c as i } from "./utils-CRiPKpXj.js";
+import { B as u } from "./button-D0viptzn.js";
+import "./scroll-area-corner-CLcng3tk.js";
+import { S as m } from "./scroll-area-BDOOgbuL.js";
+function P({ ...a }) {
+  return /* @__PURE__ */ n(l, { "data-slot": "side-panel-root", ...a });
+}
+function h({ ...a }) {
+  return /* @__PURE__ */ n(o, { "data-slot": "side-panel-trigger", ...a });
+}
+function N({ children: a, ...e }) {
+  return /* @__PURE__ */ n(r, { "data-slot": "side-panel-portal", ...e, children: a });
+}
+function C({ children: a, className: e, ...t }) {
+  return /* @__PURE__ */ n(
+    s,
+    {
+      className: i(
+        "fixed inset-0 z-30 overflow-hidden bg-[var(--side-panel-overlay-background,color-mix(in_oklab,var(--foreground)_50%,transparent))] @container",
+        e
+      ),
+      "data-slot": "side-panel-overlay",
+      ...t,
+      children: a
+    }
+  );
+}
+function T({ children: a, className: e, ...t }) {
+  return /* @__PURE__ */ n(
+    d,
+    {
+      className: i(
+        "fixed inset-y-0 right-0 flex w-96 max-w-full flex-col bg-[var(--side-panel-background,var(--background))] font-[var(--side-panel-content-font-family,var(--font-family-body))] transition duration-500 [animation-timing-function:cubic-bezier(0.25,1,0,1)]",
+        // Open state
+        "data-[state=open]:animate-in data-[state=open]:slide-in-from-right",
+        // Closed state
+        "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right",
+        e
+      ),
+      "data-slot": "side-panel-content",
+      ...t,
+      children: a
+    }
+  );
+}
+function k({ children: a, className: e, ...t }) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: i("px-6 pb-6 @md:px-8 @md:pb-8", e),
+      "data-slot": "side-panel-body",
+      ...t,
+      children: a
+    }
+  );
+}
+function w({ children: a, className: e, ...t }) {
+  return /* @__PURE__ */ n(
+    "header",
+    {
+      className: i(
+        "flex items-center justify-between gap-2 px-6 pb-4 pt-4 @md:px-8 @md:pt-7",
+        e
+      ),
+      "data-slot": "side-panel-header",
+      ...t,
+      children: a
+    }
+  );
+}
+function B({ children: a, className: e, ...t }) {
+  return /* @__PURE__ */ n(
+    c,
+    {
+      className: i(
+        "text-2xl font-medium text-[var(--side-panel-title-text,var(--foreground))] [font-family:var(--side-panel-title-font-family,var(--font-family-heading))] @lg:text-3xl",
+        e
+      ),
+      "data-slot": "side-panel-title",
+      ...t,
+      children: a
+    }
+  );
+}
+function p({ children: a, className: e, ...t }) {
+  return /* @__PURE__ */ n(f, { className: i(e), "data-slot": "side-panel-close", ...t, children: a });
+}
+function j({ className: a, icon: e, ...t }) {
+  return /* @__PURE__ */ n(p, { asChild: !0, children: /* @__PURE__ */ n(
+    u,
+    {
+      className: i(a),
+      "data-slot": "side-panel-close-button",
+      shape: "circle",
+      size: "small",
+      variant: "outline",
+      ...t,
+      children: e?.children
+    }
+  ) });
+}
+function z({ className: a, children: e, ...t }) {
+  return /* @__PURE__ */ n(m, { className: i(a), "data-slot": "side-panel-scroll-area", ...t, children: e });
+}
+export {
+  P as S,
+  h as a,
+  N as b,
+  C as c,
+  T as d,
+  k as e,
+  w as f,
+  B as g,
+  p as h,
+  j as i,
+  z as j
+};
+//# sourceMappingURL=side-panel-scroll-area-BjHd_8hw.js.map

package/dist/side-panel-scroll-area-BjHd_8hw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel-scroll-area-BjHd_8hw.js","sources":["../src/components/side-panel/primitives/side-panel-root.tsx","../src/components/side-panel/primitives/side-panel-trigger.tsx","../src/components/side-panel/primitives/side-panel-portal.tsx","../src/components/side-panel/primitives/side-panel-overlay.tsx","../src/components/side-panel/primitives/side-panel-content.tsx","../src/components/side-panel/primitives/side-panel-body.tsx","../src/components/side-panel/primitives/side-panel-header.tsx","../src/components/side-panel/primitives/side-panel-title.tsx","../src/components/side-panel/primitives/side-panel-close.tsx","../src/components/side-panel/primitives/side-panel-close-button.tsx","../src/components/side-panel/primitives/side-panel-scroll-area.tsx"],"sourcesContent":["'use client';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport type { ComponentProps } from 'react';\n\nexport type SidePanelRootProps = ComponentProps<typeof Dialog.Root>;\n\nexport function SidePanelRoot({ ...props }: SidePanelRootProps) {\n  return <Dialog.Root data-slot=\"side-panel-root\" {...props} />;\n}\n","'use client';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport type { ComponentProps } from 'react';\n\nexport type SidePanelTriggerProps = ComponentProps<typeof Dialog.Trigger>;\n\nexport function SidePanelTrigger({ ...props }: SidePanelTriggerProps) {\n  return <Dialog.Trigger data-slot=\"side-panel-trigger\" {...props} />;\n}\n","'use client';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport type { ComponentProps } from 'react';\n\nexport type SidePanelPortalProps = ComponentProps<typeof Dialog.Portal>;\n\nexport function SidePanelPortal({ children, ...props }: SidePanelPortalProps) {\n  return (\n    <Dialog.Portal data-slot=\"side-panel-portal\" {...props}>\n      {children}\n    </Dialog.Portal>\n  );\n}\n","'use client';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SidePanelOverlayProps = ComponentProps<typeof Dialog.Overlay>;\n\nexport function SidePanelOverlay({ children, className, ...props }: SidePanelOverlayProps) {\n  return (\n    <Dialog.Overlay\n      className={cn(\n        'fixed inset-0 z-30 overflow-hidden bg-[var(--side-panel-overlay-background,color-mix(in_oklab,var(--foreground)_50%,transparent))] @container',\n        className,\n      )}\n      data-slot=\"side-panel-overlay\"\n      {...props}\n    >\n      {children}\n    </Dialog.Overlay>\n  );\n}\n","'use client';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SidePanelContentProps = ComponentProps<typeof Dialog.Content>;\n\nexport function SidePanelContent({ children, className, ...props }: SidePanelContentProps) {\n  return (\n    <Dialog.Content\n      className={cn(\n        'fixed inset-y-0 right-0 flex w-96 max-w-full flex-col bg-[var(--side-panel-background,var(--background))] font-[var(--side-panel-content-font-family,var(--font-family-body))] transition duration-500 [animation-timing-function:cubic-bezier(0.25,1,0,1)]',\n        // Open state\n        'data-[state=open]:animate-in data-[state=open]:slide-in-from-right',\n        // Closed state\n        'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right',\n        className,\n      )}\n      data-slot=\"side-panel-content\"\n      {...props}\n    >\n      {children}\n    </Dialog.Content>\n  );\n}\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SidePanelBodyProps = ComponentProps<'div'>;\n\nexport function SidePanelBody({ children, className, ...props }: SidePanelBodyProps) {\n  return (\n    <div\n      className={cn('px-6 pb-6 @md:px-8 @md:pb-8', className)}\n      data-slot=\"side-panel-body\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SidePanelHeaderProps = ComponentProps<'div'>;\n\nexport function SidePanelHeader({ children, className, ...props }: SidePanelHeaderProps) {\n  return (\n    <header\n      className={cn(\n        'flex items-center justify-between gap-2 px-6 pb-4 pt-4 @md:px-8 @md:pt-7',\n        className,\n      )}\n      data-slot=\"side-panel-header\"\n      {...props}\n    >\n      {children}\n    </header>\n  );\n}\n","'use client';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SidePanelTitleProps = ComponentProps<typeof Dialog.Title>;\n\nexport function SidePanelTitle({ children, className, ...props }: SidePanelTitleProps) {\n  return (\n    <Dialog.Title\n      className={cn(\n        'text-2xl font-medium text-[var(--side-panel-title-text,var(--foreground))] [font-family:var(--side-panel-title-font-family,var(--font-family-heading))] @lg:text-3xl',\n        className,\n      )}\n      data-slot=\"side-panel-title\"\n      {...props}\n    >\n      {children}\n    </Dialog.Title>\n  );\n}\n","'use client';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SidePanelCloseProps = ComponentProps<typeof Dialog.Close>;\n\nexport function SidePanelClose({ children, className, ...props }: SidePanelCloseProps) {\n  return (\n    <Dialog.Close className={cn(className)} data-slot=\"side-panel-close\" {...props}>\n      {children}\n    </Dialog.Close>\n  );\n}\n","'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { Button } from '@/components/button';\nimport * as SidePanelPrimitive from '@/components/side-panel';\nimport { cn } from '@/lib';\n\nexport interface SidePanelCloseButtonProps extends Omit<ComponentProps<typeof Button>, 'children'> {\n  icon?: {\n    asChild?: boolean;\n    children?: ReactNode;\n  };\n}\n\nexport function SidePanelCloseButton({ className, icon, ...props }: SidePanelCloseButtonProps) {\n  return (\n    <SidePanelPrimitive.Close asChild>\n      <Button\n        className={cn(className)}\n        data-slot=\"side-panel-close-button\"\n        shape=\"circle\"\n        size=\"small\"\n        variant=\"outline\"\n        {...props}\n      >\n        {icon?.children}\n      </Button>\n    </SidePanelPrimitive.Close>\n  );\n}\n","import type { ComponentProps } from 'react';\n\nimport { ScrollArea } from '@/components/scroll-area';\nimport { cn } from '@/lib';\n\nexport type SidePanelScrollAreaProps = ComponentProps<typeof ScrollArea>;\n\nexport function SidePanelScrollArea({ className, children, ...props }: SidePanelScrollAreaProps) {\n  return (\n    <ScrollArea className={cn(className)} data-slot=\"side-panel-scroll-area\" {...props}>\n      {children}\n    </ScrollArea>\n  );\n}\n"],"names":["SidePanelRoot","props","Dialog.Root","SidePanelTrigger","Dialog.Trigger","SidePanelPortal","children","jsx","Dialog.Portal","SidePanelOverlay","className","Dialog.Overlay","cn","SidePanelContent","Dialog.Content","SidePanelBody","SidePanelHeader","SidePanelTitle","Dialog.Title","SidePanelClose","Dialog.Close","SidePanelCloseButton","icon","SidePanelPrimitive.Close","Button","SidePanelScrollArea","ScrollArea"],"mappings":";;;;;;AAOO,SAASA,EAAc,EAAE,GAAGC,KAA6B;AAC9D,2BAAQC,GAAA,EAAY,aAAU,mBAAmB,GAAGD,GAAO;AAC7D;ACFO,SAASE,EAAiB,EAAE,GAAGF,KAAgC;AACpE,2BAAQG,GAAA,EAAe,aAAU,sBAAsB,GAAGH,GAAO;AACnE;ACFO,SAASI,EAAgB,EAAE,UAAAC,GAAU,GAAGL,KAA+B;AAC5E,SACE,gBAAAM,EAACC,GAAA,EAAc,aAAU,qBAAqB,GAAGP,GAC9C,UAAAK,GACH;AAEJ;ACJO,SAASG,EAAiB,EAAE,UAAAH,GAAU,WAAAI,GAAW,GAAGT,KAAgC;AACzF,SACE,gBAAAM;AAAA,IAACI;AAAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAF;AAAA,MAAA;AAAA,MAEF,aAAU;AAAA,MACT,GAAGT;AAAA,MAEH,UAAAK;AAAA,IAAA;AAAA,EAAA;AAGP;ACbO,SAASO,EAAiB,EAAE,UAAAP,GAAU,WAAAI,GAAW,GAAGT,KAAgC;AACzF,SACE,gBAAAM;AAAA,IAACO;AAAAA,IAAA;AAAA,MACC,WAAWF;AAAA,QACT;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA;AAAA,QACAF;AAAA,MAAA;AAAA,MAEF,aAAU;AAAA,MACT,GAAGT;AAAA,MAEH,UAAAK;AAAA,IAAA;AAAA,EAAA;AAGP;ACpBO,SAASS,EAAc,EAAE,UAAAT,GAAU,WAAAI,GAAW,GAAGT,KAA6B;AACnF,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWK,EAAG,+BAA+BF,CAAS;AAAA,MACtD,aAAU;AAAA,MACT,GAAGT;AAAA,MAEH,UAAAK;AAAA,IAAA;AAAA,EAAA;AAGP;ACVO,SAASU,EAAgB,EAAE,UAAAV,GAAU,WAAAI,GAAW,GAAGT,KAA+B;AACvF,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWK;AAAA,QACT;AAAA,QACAF;AAAA,MAAA;AAAA,MAEF,aAAU;AAAA,MACT,GAAGT;AAAA,MAEH,UAAAK;AAAA,IAAA;AAAA,EAAA;AAGP;ACVO,SAASW,EAAe,EAAE,UAAAX,GAAU,WAAAI,GAAW,GAAGT,KAA8B;AACrF,SACE,gBAAAM;AAAA,IAACW;AAAAA,IAAA;AAAA,MACC,WAAWN;AAAA,QACT;AAAA,QACAF;AAAA,MAAA;AAAA,MAEF,aAAU;AAAA,MACT,GAAGT;AAAA,MAEH,UAAAK;AAAA,IAAA;AAAA,EAAA;AAGP;ACbO,SAASa,EAAe,EAAE,UAAAb,GAAU,WAAAI,GAAW,GAAGT,KAA8B;AACrF,SACE,gBAAAM,EAACa,GAAA,EAAa,WAAWR,EAAGF,CAAS,GAAG,aAAU,oBAAoB,GAAGT,GACtE,UAAAK,EAAA,CACH;AAEJ;ACAO,SAASe,EAAqB,EAAE,WAAAX,GAAW,MAAAY,GAAM,GAAGrB,KAAoC;AAC7F,SACE,gBAAAM,EAACgB,GAAA,EAAyB,SAAO,IAC/B,UAAA,gBAAAhB;AAAA,IAACiB;AAAA,IAAA;AAAA,MACC,WAAWZ,EAAGF,CAAS;AAAA,MACvB,aAAU;AAAA,MACV,OAAM;AAAA,MACN,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAGT;AAAA,MAEH,UAAAqB,GAAM;AAAA,IAAA;AAAA,EAAA,GAEX;AAEJ;ACvBO,SAASG,EAAoB,EAAE,WAAAf,GAAW,UAAAJ,GAAU,GAAGL,KAAmC;AAC/F,SACE,gBAAAM,EAACmB,GAAA,EAAW,WAAWd,EAAGF,CAAS,GAAG,aAAU,0BAA0B,GAAGT,GAC1E,UAAAK,EAAA,CACH;AAEJ;"}

package/dist/side-panel-scroll-area-Ci_3i5ZK.cjs

@@ -0,0 +1,2 @@
+"use strict";const n=require("react/jsx-runtime"),i=require("./index-Dgln3ACt.cjs"),l=require("./utils-DoxiiusW.cjs"),o=require("./button-bfAfHC_O.cjs");require("./scroll-area-corner-B50-Euv6.cjs");const s=require("./scroll-area-Di_L0y2h.cjs");function d({...e}){return n.jsx(i.Root,{"data-slot":"side-panel-root",...e})}function c({...e}){return n.jsx(i.Trigger,{"data-slot":"side-panel-trigger",...e})}function u({children:e,...t}){return n.jsx(i.Portal,{"data-slot":"side-panel-portal",...t,children:e})}function f({children:e,className:t,...a}){return n.jsx(i.Overlay,{className:l.cn("fixed inset-0 z-30 overflow-hidden bg-[var(--side-panel-overlay-background,color-mix(in_oklab,var(--foreground)_50%,transparent))] @container",t),"data-slot":"side-panel-overlay",...a,children:e})}function p({children:e,className:t,...a}){return n.jsx(i.Content,{className:l.cn("fixed inset-y-0 right-0 flex w-96 max-w-full flex-col bg-[var(--side-panel-background,var(--background))] font-[var(--side-panel-content-font-family,var(--font-family-body))] transition duration-500 [animation-timing-function:cubic-bezier(0.25,1,0,1)]","data-[state=open]:animate-in data-[state=open]:slide-in-from-right","data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right",t),"data-slot":"side-panel-content",...a,children:e})}function x({children:e,className:t,...a}){return n.jsx("div",{className:l.cn("px-6 pb-6 @md:px-8 @md:pb-8",t),"data-slot":"side-panel-body",...a,children:e})}function m({children:e,className:t,...a}){return n.jsx("header",{className:l.cn("flex items-center justify-between gap-2 px-6 pb-4 pt-4 @md:px-8 @md:pt-7",t),"data-slot":"side-panel-header",...a,children:e})}function P({children:e,className:t,...a}){return n.jsx(i.Title,{className:l.cn("text-2xl font-medium text-[var(--side-panel-title-text,var(--foreground))] [font-family:var(--side-panel-title-font-family,var(--font-family-heading))] @lg:text-3xl",t),"data-slot":"side-panel-title",...a,children:e})}function r({children:e,className:t,...a}){return n.jsx(i.Close,{className:l.cn(t),"data-slot":"side-panel-close",...a,children:e})}function S({className:e,icon:t,...a}){return n.jsx(r,{asChild:!0,children:n.jsx(o.Button,{className:l.cn(e),"data-slot":"side-panel-close-button",shape:"circle",size:"small",variant:"outline",...a,children:t?.children})})}function g({className:e,children:t,...a}){return n.jsx(s.ScrollArea,{className:l.cn(e),"data-slot":"side-panel-scroll-area",...a,children:t})}exports.SidePanelBody=x;exports.SidePanelClose=r;exports.SidePanelCloseButton=S;exports.SidePanelContent=p;exports.SidePanelHeader=m;exports.SidePanelOverlay=f;exports.SidePanelPortal=u;exports.SidePanelRoot=d;exports.SidePanelScrollArea=g;exports.SidePanelTitle=P;exports.SidePanelTrigger=c;
+//# sourceMappingURL=side-panel-scroll-area-Ci_3i5ZK.cjs.map

package/dist/side-panel-scroll-area-Ci_3i5ZK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel-scroll-area-Ci_3i5ZK.cjs","sources":["../src/components/side-panel/primitives/side-panel-root.tsx","../src/components/side-panel/primitives/side-panel-trigger.tsx","../src/components/side-panel/primitives/side-panel-portal.tsx","../src/components/side-panel/primitives/side-panel-overlay.tsx","../src/components/side-panel/primitives/side-panel-content.tsx","../src/components/side-panel/primitives/side-panel-body.tsx","../src/components/side-panel/primitives/side-panel-header.tsx","../src/components/side-panel/primitives/side-panel-title.tsx","../src/components/side-panel/primitives/side-panel-close.tsx","../src/components/side-panel/primitives/side-panel-close-button.tsx","../src/components/side-panel/primitives/side-panel-scroll-area.tsx"],"sourcesContent":["'use client';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport type { ComponentProps } from 'react';\n\nexport type SidePanelRootProps = ComponentProps<typeof Dialog.Root>;\n\nexport function SidePanelRoot({ ...props }: SidePanelRootProps) {\n  return <Dialog.Root data-slot=\"side-panel-root\" {...props} />;\n}\n","'use client';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport type { ComponentProps } from 'react';\n\nexport type SidePanelTriggerProps = ComponentProps<typeof Dialog.Trigger>;\n\nexport function SidePanelTrigger({ ...props }: SidePanelTriggerProps) {\n  return <Dialog.Trigger data-slot=\"side-panel-trigger\" {...props} />;\n}\n","'use client';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport type { ComponentProps } from 'react';\n\nexport type SidePanelPortalProps = ComponentProps<typeof Dialog.Portal>;\n\nexport function SidePanelPortal({ children, ...props }: SidePanelPortalProps) {\n  return (\n    <Dialog.Portal data-slot=\"side-panel-portal\" {...props}>\n      {children}\n    </Dialog.Portal>\n  );\n}\n","'use client';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SidePanelOverlayProps = ComponentProps<typeof Dialog.Overlay>;\n\nexport function SidePanelOverlay({ children, className, ...props }: SidePanelOverlayProps) {\n  return (\n    <Dialog.Overlay\n      className={cn(\n        'fixed inset-0 z-30 overflow-hidden bg-[var(--side-panel-overlay-background,color-mix(in_oklab,var(--foreground)_50%,transparent))] @container',\n        className,\n      )}\n      data-slot=\"side-panel-overlay\"\n      {...props}\n    >\n      {children}\n    </Dialog.Overlay>\n  );\n}\n","'use client';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SidePanelContentProps = ComponentProps<typeof Dialog.Content>;\n\nexport function SidePanelContent({ children, className, ...props }: SidePanelContentProps) {\n  return (\n    <Dialog.Content\n      className={cn(\n        'fixed inset-y-0 right-0 flex w-96 max-w-full flex-col bg-[var(--side-panel-background,var(--background))] font-[var(--side-panel-content-font-family,var(--font-family-body))] transition duration-500 [animation-timing-function:cubic-bezier(0.25,1,0,1)]',\n        // Open state\n        'data-[state=open]:animate-in data-[state=open]:slide-in-from-right',\n        // Closed state\n        'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right',\n        className,\n      )}\n      data-slot=\"side-panel-content\"\n      {...props}\n    >\n      {children}\n    </Dialog.Content>\n  );\n}\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SidePanelBodyProps = ComponentProps<'div'>;\n\nexport function SidePanelBody({ children, className, ...props }: SidePanelBodyProps) {\n  return (\n    <div\n      className={cn('px-6 pb-6 @md:px-8 @md:pb-8', className)}\n      data-slot=\"side-panel-body\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SidePanelHeaderProps = ComponentProps<'div'>;\n\nexport function SidePanelHeader({ children, className, ...props }: SidePanelHeaderProps) {\n  return (\n    <header\n      className={cn(\n        'flex items-center justify-between gap-2 px-6 pb-4 pt-4 @md:px-8 @md:pt-7',\n        className,\n      )}\n      data-slot=\"side-panel-header\"\n      {...props}\n    >\n      {children}\n    </header>\n  );\n}\n","'use client';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SidePanelTitleProps = ComponentProps<typeof Dialog.Title>;\n\nexport function SidePanelTitle({ children, className, ...props }: SidePanelTitleProps) {\n  return (\n    <Dialog.Title\n      className={cn(\n        'text-2xl font-medium text-[var(--side-panel-title-text,var(--foreground))] [font-family:var(--side-panel-title-font-family,var(--font-family-heading))] @lg:text-3xl',\n        className,\n      )}\n      data-slot=\"side-panel-title\"\n      {...props}\n    >\n      {children}\n    </Dialog.Title>\n  );\n}\n","'use client';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SidePanelCloseProps = ComponentProps<typeof Dialog.Close>;\n\nexport function SidePanelClose({ children, className, ...props }: SidePanelCloseProps) {\n  return (\n    <Dialog.Close className={cn(className)} data-slot=\"side-panel-close\" {...props}>\n      {children}\n    </Dialog.Close>\n  );\n}\n","'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { Button } from '@/components/button';\nimport * as SidePanelPrimitive from '@/components/side-panel';\nimport { cn } from '@/lib';\n\nexport interface SidePanelCloseButtonProps extends Omit<ComponentProps<typeof Button>, 'children'> {\n  icon?: {\n    asChild?: boolean;\n    children?: ReactNode;\n  };\n}\n\nexport function SidePanelCloseButton({ className, icon, ...props }: SidePanelCloseButtonProps) {\n  return (\n    <SidePanelPrimitive.Close asChild>\n      <Button\n        className={cn(className)}\n        data-slot=\"side-panel-close-button\"\n        shape=\"circle\"\n        size=\"small\"\n        variant=\"outline\"\n        {...props}\n      >\n        {icon?.children}\n      </Button>\n    </SidePanelPrimitive.Close>\n  );\n}\n","import type { ComponentProps } from 'react';\n\nimport { ScrollArea } from '@/components/scroll-area';\nimport { cn } from '@/lib';\n\nexport type SidePanelScrollAreaProps = ComponentProps<typeof ScrollArea>;\n\nexport function SidePanelScrollArea({ className, children, ...props }: SidePanelScrollAreaProps) {\n  return (\n    <ScrollArea className={cn(className)} data-slot=\"side-panel-scroll-area\" {...props}>\n      {children}\n    </ScrollArea>\n  );\n}\n"],"names":["SidePanelRoot","props","Dialog.Root","SidePanelTrigger","Dialog.Trigger","SidePanelPortal","children","jsx","Dialog.Portal","SidePanelOverlay","className","Dialog.Overlay","cn","SidePanelContent","Dialog.Content","SidePanelBody","SidePanelHeader","SidePanelTitle","Dialog.Title","SidePanelClose","Dialog.Close","SidePanelCloseButton","icon","SidePanelPrimitive.Close","Button","SidePanelScrollArea","ScrollArea"],"mappings":"oPAOO,SAASA,EAAc,CAAE,GAAGC,GAA6B,CAC9D,aAAQC,EAAAA,KAAA,CAAY,YAAU,kBAAmB,GAAGD,EAAO,CAC7D,CCFO,SAASE,EAAiB,CAAE,GAAGF,GAAgC,CACpE,aAAQG,EAAAA,QAAA,CAAe,YAAU,qBAAsB,GAAGH,EAAO,CACnE,CCFO,SAASI,EAAgB,CAAE,SAAAC,EAAU,GAAGL,GAA+B,CAC5E,OACEM,EAAAA,IAACC,EAAAA,OAAA,CAAc,YAAU,oBAAqB,GAAGP,EAC9C,SAAAK,EACH,CAEJ,CCJO,SAASG,EAAiB,CAAE,SAAAH,EAAU,UAAAI,EAAW,GAAGT,GAAgC,CACzF,OACEM,EAAAA,IAACI,EAAAA,QAAA,CACC,UAAWC,EAAAA,GACT,gJACAF,CAAA,EAEF,YAAU,qBACT,GAAGT,EAEH,SAAAK,CAAA,CAAA,CAGP,CCbO,SAASO,EAAiB,CAAE,SAAAP,EAAU,UAAAI,EAAW,GAAGT,GAAgC,CACzF,OACEM,EAAAA,IAACO,EAAAA,QAAA,CACC,UAAWF,EAAAA,GACT,8PAEA,qEAEA,yEACAF,CAAA,EAEF,YAAU,qBACT,GAAGT,EAEH,SAAAK,CAAA,CAAA,CAGP,CCpBO,SAASS,EAAc,CAAE,SAAAT,EAAU,UAAAI,EAAW,GAAGT,GAA6B,CACnF,OACEM,EAAAA,IAAC,MAAA,CACC,UAAWK,EAAAA,GAAG,8BAA+BF,CAAS,EACtD,YAAU,kBACT,GAAGT,EAEH,SAAAK,CAAA,CAAA,CAGP,CCVO,SAASU,EAAgB,CAAE,SAAAV,EAAU,UAAAI,EAAW,GAAGT,GAA+B,CACvF,OACEM,EAAAA,IAAC,SAAA,CACC,UAAWK,EAAAA,GACT,2EACAF,CAAA,EAEF,YAAU,oBACT,GAAGT,EAEH,SAAAK,CAAA,CAAA,CAGP,CCVO,SAASW,EAAe,CAAE,SAAAX,EAAU,UAAAI,EAAW,GAAGT,GAA8B,CACrF,OACEM,EAAAA,IAACW,EAAAA,MAAA,CACC,UAAWN,EAAAA,GACT,uKACAF,CAAA,EAEF,YAAU,mBACT,GAAGT,EAEH,SAAAK,CAAA,CAAA,CAGP,CCbO,SAASa,EAAe,CAAE,SAAAb,EAAU,UAAAI,EAAW,GAAGT,GAA8B,CACrF,OACEM,MAACa,EAAAA,MAAA,CAAa,UAAWR,EAAAA,GAAGF,CAAS,EAAG,YAAU,mBAAoB,GAAGT,EACtE,SAAAK,CAAA,CACH,CAEJ,CCAO,SAASe,EAAqB,CAAE,UAAAX,EAAW,KAAAY,EAAM,GAAGrB,GAAoC,CAC7F,OACEM,EAAAA,IAACgB,EAAA,CAAyB,QAAO,GAC/B,SAAAhB,EAAAA,IAACiB,EAAAA,OAAA,CACC,UAAWZ,EAAAA,GAAGF,CAAS,EACvB,YAAU,0BACV,MAAM,SACN,KAAK,QACL,QAAQ,UACP,GAAGT,EAEH,SAAAqB,GAAM,QAAA,CAAA,EAEX,CAEJ,CCvBO,SAASG,EAAoB,CAAE,UAAAf,EAAW,SAAAJ,EAAU,GAAGL,GAAmC,CAC/F,OACEM,MAACmB,EAAAA,WAAA,CAAW,UAAWd,EAAAA,GAAGF,CAAS,EAAG,YAAU,yBAA0B,GAAGT,EAC1E,SAAAK,CAAA,CACH,CAEJ"}

package/dist/side-panel.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./side-panel-close-BSEnX7wo.cjs");exports.Body=e.SidePanelBody;exports.Close=e.SidePanelClose;exports.Content=e.SidePanelContent;exports.Header=e.SidePanelHeader;exports.Overlay=e.SidePanelOverlay;exports.Portal=e.SidePanelPortal;exports.Root=e.SidePanelRoot;exports.Title=e.SidePanelTitle;exports.Trigger=e.SidePanelTrigger;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./side-panel-scroll-area-Ci_3i5ZK.cjs");exports.Body=e.SidePanelBody;exports.Close=e.SidePanelClose;exports.CloseButton=e.SidePanelCloseButton;exports.Content=e.SidePanelContent;exports.Header=e.SidePanelHeader;exports.Overlay=e.SidePanelOverlay;exports.Portal=e.SidePanelPortal;exports.Root=e.SidePanelRoot;exports.ScrollArea=e.SidePanelScrollArea;exports.Title=e.SidePanelTitle;exports.Trigger=e.SidePanelTrigger;
 //# sourceMappingURL=side-panel.cjs.map

package/dist/side-panel.js

@@ -1,13 +1,15 @@
-import { e, h as o, d as r, f as t, c as l, b as d, S as g, g as f, a as i } from "./side-panel-close-CbsiwlUW.js";
+import { e, h as o, i as r, d as t, f as l, c as d, b as g, S as i, j as n, g as C, a as c } from "./side-panel-scroll-area-BjHd_8hw.js";
 export {
   e as Body,
   o as Close,
-  r as Content,
-  t as Header,
-  l as Overlay,
-  d as Portal,
-  g as Root,
-  f as Title,
-  i as Trigger
+  r as CloseButton,
+  t as Content,
+  l as Header,
+  d as Overlay,
+  g as Portal,
+  i as Root,
+  n as ScrollArea,
+  C as Title,
+  c as Trigger
 };
 //# sourceMappingURL=side-panel.js.map

package/dist/skeleton-box-CcjaHRz4.cjs

@@ -0,0 +1,2 @@
+"use strict";const n=require("react/jsx-runtime"),o=require("./utils-DoxiiusW.cjs");function s({className:t,...e}){return n.jsx("div",{className:o.cn("bg-[var(--skeleton,color-mix(in_oklab,var(--contrast-300)_15%,transparent))]",t),"data-slot":"skeleton-box",...e})}exports.SkeletonBox=s;
+//# sourceMappingURL=skeleton-box-CcjaHRz4.cjs.map

package/dist/skeleton-box-CcjaHRz4.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-box-CcjaHRz4.cjs","sources":["../src/components/skeleton/primitives/skeleton-box.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SkeletonBoxProps = ComponentProps<'div'>;\n\nexport function SkeletonBox({ className, ...props }: SkeletonBoxProps) {\n  return (\n    <div\n      className={cn(\n        'bg-[var(--skeleton,color-mix(in_oklab,var(--contrast-300)_15%,transparent))]',\n        className,\n      )}\n      data-slot=\"skeleton-box\"\n      {...props}\n    />\n  );\n}\n"],"names":["SkeletonBox","className","props","jsx","cn"],"mappings":"oFAMO,SAASA,EAAY,CAAE,UAAAC,EAAW,GAAGC,GAA2B,CACrE,OACEC,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,GACT,+EACAH,CAAA,EAEF,YAAU,eACT,GAAGC,CAAA,CAAA,CAGV"}

package/dist/{skeleton-box-D0XcgPLs.js → skeleton-box-EYvfbwBB.js}

@@ -1,11 +1,11 @@
 import { jsx as r } from "react/jsx-runtime";
 import { c as a } from "./utils-CRiPKpXj.js";
-function e({ className: o, ...t }) {
+function s({ className: o, ...t }) {
   return /* @__PURE__ */ r(
     "div",
     {
       className: a(
-        "bg-[var(--skeleton,color-mix(in_oklab,hsl(var(--contrast-300))_15%,transparent))]",
+        "bg-[var(--skeleton,color-mix(in_oklab,var(--contrast-300)_15%,transparent))]",
         o
       ),
       "data-slot": "skeleton-box",
@@ -14,6 +14,6 @@ function e({ className: o, ...t }) {
   );
 }
 export {
-  e as S
+  s as S
 };
-//# sourceMappingURL=skeleton-box-D0XcgPLs.js.map
+//# sourceMappingURL=skeleton-box-EYvfbwBB.js.map

package/dist/skeleton-box-EYvfbwBB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-box-EYvfbwBB.js","sources":["../src/components/skeleton/primitives/skeleton-box.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SkeletonBoxProps = ComponentProps<'div'>;\n\nexport function SkeletonBox({ className, ...props }: SkeletonBoxProps) {\n  return (\n    <div\n      className={cn(\n        'bg-[var(--skeleton,color-mix(in_oklab,var(--contrast-300)_15%,transparent))]',\n        className,\n      )}\n      data-slot=\"skeleton-box\"\n      {...props}\n    />\n  );\n}\n"],"names":["SkeletonBox","className","props","jsx","cn"],"mappings":";;AAMO,SAASA,EAAY,EAAE,WAAAC,GAAW,GAAGC,KAA2B;AACrE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAH;AAAA,MAAA;AAAA,MAEF,aAAU;AAAA,MACT,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/{skeleton-icon-Cm6f9u-Z.js → skeleton-icon-B8EIcgT0.js}

@@ -1,10 +1,10 @@
 import { jsx as n } from "react/jsx-runtime";
 import { c as r } from "./utils-CRiPKpXj.js";
-function c({ className: t, icon: o, ...e }) {
+function s({ className: t, icon: o, ...e }) {
   return /* @__PURE__ */ n(
     "div",
     {
-      className: r("text-[var(--skeleton,hsl(var(--contrast-300)))] opacity-25", t),
+      className: r("text-[var(--skeleton,var(--contrast-300))] opacity-25", t),
       "data-slot": "skeleton-icon",
       ...e,
       children: o
@@ -12,6 +12,6 @@ function c({ className: t, icon: o, ...e }) {
   );
 }
 export {
-  c as S
+  s as S
 };
-//# sourceMappingURL=skeleton-icon-Cm6f9u-Z.js.map
+//# sourceMappingURL=skeleton-icon-B8EIcgT0.js.map

package/dist/skeleton-icon-B8EIcgT0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-icon-B8EIcgT0.js","sources":["../src/components/skeleton/primitives/skeleton-icon.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SkeletonIconProps = ComponentProps<'div'> & {\n  icon: ReactNode;\n};\n\nexport function SkeletonIcon({ className, icon, ...props }: SkeletonIconProps) {\n  return (\n    <div\n      className={cn('text-[var(--skeleton,var(--contrast-300))] opacity-25', className)}\n      data-slot=\"skeleton-icon\"\n      {...props}\n    >\n      {icon}\n    </div>\n  );\n}\n"],"names":["SkeletonIcon","className","icon","props","jsx","cn"],"mappings":";;AAQO,SAASA,EAAa,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,KAA4B;AAC7E,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,yDAAyDJ,CAAS;AAAA,MAChF,aAAU;AAAA,MACT,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/skeleton-icon-ChZY8Dj6.cjs

@@ -0,0 +1,2 @@
+"use strict";const o=require("react/jsx-runtime"),s=require("./utils-DoxiiusW.cjs");function c({className:t,icon:e,...n}){return o.jsx("div",{className:s.cn("text-[var(--skeleton,var(--contrast-300))] opacity-25",t),"data-slot":"skeleton-icon",...n,children:e})}exports.SkeletonIcon=c;
+//# sourceMappingURL=skeleton-icon-ChZY8Dj6.cjs.map

package/dist/skeleton-icon-ChZY8Dj6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-icon-ChZY8Dj6.cjs","sources":["../src/components/skeleton/primitives/skeleton-icon.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SkeletonIconProps = ComponentProps<'div'> & {\n  icon: ReactNode;\n};\n\nexport function SkeletonIcon({ className, icon, ...props }: SkeletonIconProps) {\n  return (\n    <div\n      className={cn('text-[var(--skeleton,var(--contrast-300))] opacity-25', className)}\n      data-slot=\"skeleton-icon\"\n      {...props}\n    >\n      {icon}\n    </div>\n  );\n}\n"],"names":["SkeletonIcon","className","icon","props","jsx","cn"],"mappings":"oFAQO,SAASA,EAAa,CAAE,UAAAC,EAAW,KAAAC,EAAM,GAAGC,GAA4B,CAC7E,OACEC,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,GAAG,wDAAyDJ,CAAS,EAChF,YAAU,gBACT,GAAGE,EAEH,SAAAD,CAAA,CAAA,CAGP"}

package/dist/{skeleton-text-BCsnfhcU.js → skeleton-text-BKJtA5cd.js}

@@ -1,17 +1,17 @@
 import { jsx as t } from "react/jsx-runtime";
 import { c as l } from "./utils-CRiPKpXj.js";
-function a({ characterCount: e = 10, className: r, ...s }) {
+function a({ characterCount: e = 10, className: r, ...n }) {
   return /* @__PURE__ */ t(
     "div",
     {
       className: l("flex h-[1lh] items-center", r),
       "data-slot": "skeleton-text",
-      ...s,
+      ...n,
       children: /* @__PURE__ */ t(
         "div",
         {
           className: l(
-            "h-[1ex] max-w-full rounded-[inherit] bg-[var(--skeleton,color-mix(in_oklab,hsl(var(--contrast-300))_15%,transparent))]"
+            "h-[1ex] max-w-full rounded-[inherit] bg-[var(--skeleton,color-mix(in_oklab,var(--contrast-300)_15%,transparent))]"
           ),
           style: { width: e === "full" ? "100%" : `${e}ch` }
         }
@@ -22,4 +22,4 @@ function a({ characterCount: e = 10, className: r, ...s }) {
 export {
   a as S
 };
-//# sourceMappingURL=skeleton-text-BCsnfhcU.js.map
+//# sourceMappingURL=skeleton-text-BKJtA5cd.js.map

package/dist/skeleton-text-BKJtA5cd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-text-BKJtA5cd.js","sources":["../src/components/skeleton/primitives/skeleton-text.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SkeletonTextProps = ComponentProps<'div'> & {\n  characterCount?: number | 'full';\n};\n\nexport function SkeletonText({ characterCount = 10, className, ...props }: SkeletonTextProps) {\n  return (\n    <div\n      className={cn('flex h-[1lh] items-center', className)}\n      data-slot=\"skeleton-text\"\n      {...props}\n    >\n      <div\n        className={cn(\n          `h-[1ex] max-w-full rounded-[inherit] bg-[var(--skeleton,color-mix(in_oklab,var(--contrast-300)_15%,transparent))]`,\n        )}\n        style={{ width: characterCount === 'full' ? '100%' : `${characterCount}ch` }}\n      />\n    </div>\n  );\n}\n"],"names":["SkeletonText","characterCount","className","props","jsx","cn"],"mappings":";;AAQO,SAASA,EAAa,EAAE,gBAAAC,IAAiB,IAAI,WAAAC,GAAW,GAAGC,KAA4B;AAC5F,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,6BAA6BH,CAAS;AAAA,MACpD,aAAU;AAAA,MACT,GAAGC;AAAA,MAEJ,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC;AAAA,YACT;AAAA,UAAA;AAAA,UAEF,OAAO,EAAE,OAAOJ,MAAmB,SAAS,SAAS,GAAGA,CAAc,KAAA;AAAA,QAAK;AAAA,MAAA;AAAA,IAC7E;AAAA,EAAA;AAGN;"}

package/dist/skeleton-text-CY7gaT4A.cjs

@@ -0,0 +1,2 @@
+"use strict";const t=require("react/jsx-runtime"),n=require("./utils-DoxiiusW.cjs");function i({characterCount:e=10,className:s,...l}){return t.jsx("div",{className:n.cn("flex h-[1lh] items-center",s),"data-slot":"skeleton-text",...l,children:t.jsx("div",{className:n.cn("h-[1ex] max-w-full rounded-[inherit] bg-[var(--skeleton,color-mix(in_oklab,var(--contrast-300)_15%,transparent))]"),style:{width:e==="full"?"100%":`${e}ch`}})})}exports.SkeletonText=i;
+//# sourceMappingURL=skeleton-text-CY7gaT4A.cjs.map

package/dist/skeleton-text-CY7gaT4A.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-text-CY7gaT4A.cjs","sources":["../src/components/skeleton/primitives/skeleton-text.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SkeletonTextProps = ComponentProps<'div'> & {\n  characterCount?: number | 'full';\n};\n\nexport function SkeletonText({ characterCount = 10, className, ...props }: SkeletonTextProps) {\n  return (\n    <div\n      className={cn('flex h-[1lh] items-center', className)}\n      data-slot=\"skeleton-text\"\n      {...props}\n    >\n      <div\n        className={cn(\n          `h-[1ex] max-w-full rounded-[inherit] bg-[var(--skeleton,color-mix(in_oklab,var(--contrast-300)_15%,transparent))]`,\n        )}\n        style={{ width: characterCount === 'full' ? '100%' : `${characterCount}ch` }}\n      />\n    </div>\n  );\n}\n"],"names":["SkeletonText","characterCount","className","props","jsx","cn"],"mappings":"oFAQO,SAASA,EAAa,CAAE,eAAAC,EAAiB,GAAI,UAAAC,EAAW,GAAGC,GAA4B,CAC5F,OACEC,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,GAAG,4BAA6BH,CAAS,EACpD,YAAU,gBACT,GAAGC,EAEJ,SAAAC,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,GACT,mHAAA,EAEF,MAAO,CAAE,MAAOJ,IAAmB,OAAS,OAAS,GAAGA,CAAc,IAAA,CAAK,CAAA,CAC7E,CAAA,CAGN"}

package/dist/skeleton.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./skeleton-root-Bahq1UoM.cjs"),o=require("./skeleton-box-BsY5q4RG.cjs"),t=require("./skeleton-text-BxefRRo2.cjs"),n=require("./skeleton-icon-o8gtDMoj.cjs");exports.Root=e.SkeletonRoot;exports.Box=o.SkeletonBox;exports.Text=t.SkeletonText;exports.Icon=n.SkeletonIcon;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./skeleton-root-Bahq1UoM.cjs"),o=require("./skeleton-box-CcjaHRz4.cjs"),t=require("./skeleton-text-CY7gaT4A.cjs"),n=require("./skeleton-icon-ChZY8Dj6.cjs");exports.Root=e.SkeletonRoot;exports.Box=o.SkeletonBox;exports.Text=t.SkeletonText;exports.Icon=n.SkeletonIcon;
 //# sourceMappingURL=skeleton.cjs.map

package/dist/skeleton.js

@@ -1,7 +1,7 @@
 import { S as t } from "./skeleton-root-BIYF02UE.js";
-import { S as e } from "./skeleton-box-D0XcgPLs.js";
-import { S as f } from "./skeleton-text-BCsnfhcU.js";
-import { S as p } from "./skeleton-icon-Cm6f9u-Z.js";
+import { S as e } from "./skeleton-box-EYvfbwBB.js";
+import { S as f } from "./skeleton-text-BKJtA5cd.js";
+import { S as p } from "./skeleton-icon-B8EIcgT0.js";
 export {
   e as Box,
   p as Icon,

package/dist/styles.css

@@ -1,6 +1,6 @@
 /* Commerce Toolkit CSS Variables */
 :root {
-  --primary: 96 100% 68%;
+  --brand: 96 100% 68%;
   --accent: 96 100% 88%;
   --background: 0 0% 100%;
   --foreground: 0 0% 7%;
@@ -18,7 +18,7 @@
   --font-family-body:
     'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
     'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-family-mono:
+  --font-family-body:
     'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
     'Courier New', monospace;
   --font-feature-settings-heading: normal;

package/dist/swatch-radio-group.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("./index-CHBN4DXC.cjs"),i=require("./utils-DoxiiusW.cjs"),g=require("./index-DGaxX11V.cjs"),p=require("./x-Wx1ZM0Wd.cjs");function v({options:r,className:e,onOptionMouseEnter:o,...d}){return a.jsx(l,{...d,children:r.map(t=>a.jsxs(c,{"aria-label":t.label,disabled:t.disabled,onMouseEnter:()=>{o?.(t.value)},value:t.value,children:[t.type==="color"?a.jsx(n,{color:t.color}):a.jsx(u,{children:a.jsx(h,{alt:t.image.alt,height:40,src:t.image.src,width:40})}),a.jsx(b,{children:a.jsx(p.default,{absoluteStrokeWidth:!0,size:16,strokeWidth:1.5})})]},t.value))})}function l({children:r,className:e,...o}){return a.jsx(s.Root2,{className:i.cn("flex flex-wrap gap-1",e),"data-slot":"swatch-radio-group-root",...o,children:r})}function c({children:r,className:e,...o}){return a.jsx(s.Item2,{className:i.cn("group relative box-content h-8 w-8","p-0.5","rounded-full border border-[var(--swatch-radio-group-light-unchecked-border,transparent)]","transition-colors","hover:border-[var(--swatch-radio-group-light-unchecked-border-hover,hsl(var(--contrast-200)))]","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--swatch-radio-group-focus,hsl(var(--primary)))]","data-[state=checked]:border-[var(--swatch-radio-group-light-checked-border,hsl(var(--foreground)))]","aria-invalid:border-[var(--swatch-radio-group-light-border-error,hsl(var(--error)))]","disabled:border-[var(--swatch-radio-group-light-disabled-border,transparent)] data-[disabled]:pointer-events-none [&:disabled>.disabled-icon]:grid",e),"data-slot":"swatch-radio-group-item",...o,children:r})}function n({color:r,children:e,className:o,...d}){return a.jsx("span",{className:i.cn("block size-full","rounded-full border [border-color:var(--swatch-radio-group-light-option-border,color-mix(in_oklab,hsl(var(--foreground))_10%,transparent))]","group-disabled:opacity-20",o),"data-slot":"swatch-radio-group-color",style:{backgroundColor:r},...d,children:e})}function u({className:r,children:e,...o}){return a.jsx("span",{className:i.cn("relative block size-full overflow-hidden","rounded-full border border-[var(--swatch-radio-group-light-option-border,color-mix(in_oklab,hsl(var(--foreground))_10%,transparent))]","bg-clip-padding shadow",r),"data-slot":"swatch-radio-group-thumbnail",...o,children:e})}function h({className:r,children:e,asChild:o=!1,...d}){const t=o?g.Slot:"img";return a.jsx(t,{className:i.cn(r),"data-slot":"swatch-radio-group-image",...d})}function b({className:r,children:e,...o}){return a.jsx("div",{className:i.cn("disabled-icon absolute inset-0 hidden place-content-center","text-[var(--swatch-radio-group-light-icon,hsl(var(--foreground)))]",r),"data-slot":"swatch-radio-group-indicator",...o,children:e})}exports.Color=n;exports.Image=h;exports.Indicator=b;exports.Item=c;exports.Root=l;exports.SwatchRadioGroup=v;exports.Thumbnail=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("./index-CHBN4DXC.cjs"),i=require("./utils-DoxiiusW.cjs"),l=require("./index-DGaxX11V.cjs"),f=require("./x-Wx1ZM0Wd.cjs");function v({options:r,className:a,onOptionMouseEnter:o,indicatorIcon:d,...s}){return e.jsx(n,{className:a,...s,children:r.map(t=>e.jsxs(u,{"aria-label":t.label,disabled:t.disabled,onMouseEnter:()=>{o?.(t.value)},value:t.value,children:[t.type==="color"?e.jsx(h,{color:t.color}):e.jsx(g,{children:e.jsx(b,{alt:t.image.alt,asChild:t.image.asChild,height:40,src:t.image.src,width:40,children:t.image.children})}),e.jsx(p,{children:e.jsx(w,{asChild:d?.asChild,children:d?.children})})]},t.value))})}function n({children:r,className:a,...o}){return e.jsx(c.Root2,{className:i.cn("flex flex-wrap gap-1",a),"data-slot":"swatch-radio-group-root",...o,children:r})}function u({children:r,className:a,...o}){return e.jsx(c.Item2,{className:i.cn("group/swatch-radio-group-item relative box-content h-8 w-8 rounded-full border border-[var(--swatch-radio-group-light-unchecked-border,transparent)] p-0.5 transition-colors","hover:border-[var(--swatch-radio-group-light-unchecked-border-hover,var(--contrast-200))]","focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--swatch-radio-group-focus,var(--brand))]","data-[state=checked]:border-[var(--swatch-radio-group-light-checked-border,var(--foreground))]","aria-invalid:border-[var(--swatch-radio-group-light-border-error,var(--error))]","disabled:border-[var(--swatch-radio-group-light-disabled-border,transparent)] data-[disabled]:pointer-events-none [&:disabled>.disabled-icon]:grid",a),"data-slot":"swatch-radio-group-item",...o,children:r})}function h({color:r,children:a,className:o,...d}){return e.jsx("span",{className:i.cn("block size-full rounded-full border [border-color:var(--swatch-radio-group-light-option-border,color-mix(in_oklab,var(--foreground)_10%,transparent))]","group-disabled/swatch-radio-group-item:opacity-20",o),"data-slot":"swatch-radio-group-color",style:{backgroundColor:r},...d,children:a})}function g({className:r,children:a,...o}){return e.jsx("span",{className:i.cn("relative block size-full overflow-hidden rounded-full border border-[var(--swatch-radio-group-light-option-border,color-mix(in_oklab,var(--foreground)_10%,transparent))] bg-clip-padding shadow",r),"data-slot":"swatch-radio-group-thumbnail",...o,children:a})}function b({className:r,children:a,asChild:o=!1,...d}){const s=o?l.Slot:"img";return e.jsx(s,{className:i.cn(r),"data-slot":"swatch-radio-group-image",...d})}function p({className:r,children:a,...o}){return e.jsx("div",{className:i.cn("disabled-icon absolute inset-0 hidden place-content-center","text-[var(--swatch-radio-group-light-icon,var(--foreground))]",r),"data-slot":"swatch-radio-group-indicator",...o,children:a})}function w({asChild:r=!1,className:a,children:o}){return r?e.jsx(l.Slot,{className:i.cn("size-4",a),"data-slot":"swatch-radio-group-indicator-icon",children:o}):e.jsx(f.default,{absoluteStrokeWidth:!0,className:i.cn("size-4",a),"data-slot":"swatch-radio-group-indicator-icon",strokeWidth:1.5})}exports.Color=h;exports.Image=b;exports.Indicator=p;exports.IndicatorIcon=w;exports.Item=u;exports.Root=n;exports.SwatchRadioGroup=v;exports.Thumbnail=g;
 //# sourceMappingURL=swatch-radio-group.cjs.map

package/dist/swatch-radio-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"swatch-radio-group.cjs","sources":["../src/components/swatch-radio-group/swatch-radio-group.tsx","../src/components/swatch-radio-group/primitives/swatch-radio-group-root.tsx","../src/components/swatch-radio-group/primitives/swatch-radio-group-item.tsx","../src/components/swatch-radio-group/primitives/swatch-radio-group-color.tsx","../src/components/swatch-radio-group/primitives/swatch-radio-group-thumbnail.tsx","../src/components/swatch-radio-group/primitives/swatch-radio-group-image.tsx","../src/components/swatch-radio-group/primitives/swatch-radio-group-indicator.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport type { ComponentProps } from 'react';\n\nimport * as SwatchRadioGroupPrimitive from '@/components/swatch-radio-group';\n\ntype SwatchOption =\n  | {\n      type: 'color';\n      value: string;\n      label: string;\n      color: string;\n      disabled?: boolean;\n    }\n  | {\n      type: 'image';\n      value: string;\n      label: string;\n      image: { src: string; alt: string };\n      disabled?: boolean;\n    };\n\nexport type SwatchRadioGroupProps = ComponentProps<typeof SwatchRadioGroupPrimitive.Root> & {\n  options: SwatchOption[];\n  onOptionMouseEnter?: (value: string) => void;\n};\n\n/**\n * This component supports various CSS variables for theming. Here's a comprehensive list, along\n * with their default values:\n *\n * ```css\n *  :root {\n *    --swatch-radio-group-focus: var(--primary);\n *    --swatch-radio-group-light-icon: var(--foreground);\n *    --swatch-radio-group-light-unchecked-border: transparent;\n *    --swatch-radio-group-light-unchecked-border-hover: var(--contrast-200);\n *    --swatch-radio-group-light-disabled-border: transparent;\n *    --swatch-radio-group-light-border-error: var(--error);\n *    --swatch-radio-group-light-checked-border: var(--foreground);\n *    --swatch-radio-group-light-option-border: color-mix(in oklab, var(--foreground) 10%, transparent);\n *  }\n * ```\n */\nexport function SwatchRadioGroup({\n  options,\n  className,\n  onOptionMouseEnter,\n  ...props\n}: SwatchRadioGroupProps) {\n  return (\n    <SwatchRadioGroupPrimitive.Root {...props}>\n      {options.map((option) => (\n        <SwatchRadioGroupPrimitive.Item\n          aria-label={option.label}\n          disabled={option.disabled}\n          key={option.value}\n          onMouseEnter={() => {\n            onOptionMouseEnter?.(option.value);\n          }}\n          value={option.value}\n        >\n          {option.type === 'color' ? (\n            <SwatchRadioGroupPrimitive.Color color={option.color} />\n          ) : (\n            <SwatchRadioGroupPrimitive.Thumbnail>\n              <SwatchRadioGroupPrimitive.Image\n                alt={option.image.alt}\n                height={40}\n                src={option.image.src}\n                width={40}\n              />\n            </SwatchRadioGroupPrimitive.Thumbnail>\n          )}\n          <SwatchRadioGroupPrimitive.Indicator>\n            <X absoluteStrokeWidth size={16} strokeWidth={1.5} />\n          </SwatchRadioGroupPrimitive.Indicator>\n        </SwatchRadioGroupPrimitive.Item>\n      ))}\n    </SwatchRadioGroupPrimitive.Root>\n  );\n}\n","import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SwatchRadioGroupRootProps = ComponentProps<typeof RadioGroupPrimitive.Root>;\n\nexport function SwatchRadioGroupRoot({ children, className, ...props }: SwatchRadioGroupRootProps) {\n  return (\n    <RadioGroupPrimitive.Root\n      className={cn(\n        // Base layout\n        'flex flex-wrap gap-1',\n        className,\n      )}\n      data-slot=\"swatch-radio-group-root\"\n      {...props}\n    >\n      {children}\n    </RadioGroupPrimitive.Root>\n  );\n}\n","import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SwatchRadioGroupItemProps = ComponentProps<typeof RadioGroupPrimitive.Item>;\n\nexport function SwatchRadioGroupItem({ children, className, ...props }: SwatchRadioGroupItemProps) {\n  return (\n    <RadioGroupPrimitive.Item\n      className={cn(\n        // Base layout\n        'group relative box-content h-8 w-8',\n        // Spacing\n        'p-0.5',\n        // Borders & Rounded\n        'rounded-full border border-[var(--swatch-radio-group-light-unchecked-border,transparent)]',\n        // Transitions\n        'transition-colors',\n        // Hover state\n        'hover:border-[var(--swatch-radio-group-light-unchecked-border-hover,hsl(var(--contrast-200)))]',\n        // Focus-visible state\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--swatch-radio-group-focus,hsl(var(--primary)))]',\n        // Checked state\n        'data-[state=checked]:border-[var(--swatch-radio-group-light-checked-border,hsl(var(--foreground)))]',\n        // Invalid state\n        'aria-invalid:border-[var(--swatch-radio-group-light-border-error,hsl(var(--error)))]',\n        // Disabled state\n        'disabled:border-[var(--swatch-radio-group-light-disabled-border,transparent)] data-[disabled]:pointer-events-none [&:disabled>.disabled-icon]:grid',\n        className,\n      )}\n      data-slot=\"swatch-radio-group-item\"\n      {...props}\n    >\n      {children}\n    </RadioGroupPrimitive.Item>\n  );\n}\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SwatchRadioGroupColorProps = ComponentProps<'span'> & {\n  color: string;\n};\n\nexport function SwatchRadioGroupColor({\n  color,\n  children,\n  className,\n  ...props\n}: SwatchRadioGroupColorProps) {\n  return (\n    <span\n      className={cn(\n        // Base layout\n        'block size-full',\n        // Borders & Rounded\n        'rounded-full border [border-color:var(--swatch-radio-group-light-option-border,color-mix(in_oklab,hsl(var(--foreground))_10%,transparent))]',\n        // Group states\n        'group-disabled:opacity-20',\n        className,\n      )}\n      data-slot=\"swatch-radio-group-color\"\n      style={{ backgroundColor: color }}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n}\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SwatchRadioGroupThumbnailProps = ComponentProps<'span'>;\n\nexport function SwatchRadioGroupThumbnail({\n  className,\n  children,\n  ...props\n}: SwatchRadioGroupThumbnailProps) {\n  return (\n    <span\n      className={cn(\n        // Base layout\n        'relative block size-full overflow-hidden',\n        // Borders & Rounded\n        'rounded-full border border-[var(--swatch-radio-group-light-option-border,color-mix(in_oklab,hsl(var(--foreground))_10%,transparent))]',\n        // Effects\n        'bg-clip-padding shadow',\n        className,\n      )}\n      data-slot=\"swatch-radio-group-thumbnail\"\n      {...props}\n    >\n      {children}\n    </span>\n  );\n}\n","'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport interface SwatchRadioGroupImageProps extends ComponentProps<'img'> {\n  asChild?: boolean;\n}\n\nexport function SwatchRadioGroupImage({\n  className,\n  children,\n  asChild = false,\n  ...props\n}: SwatchRadioGroupImageProps) {\n  const Component = asChild ? Slot : 'img';\n\n  return <Component className={cn(className)} data-slot=\"swatch-radio-group-image\" {...props} />;\n}\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SwatchRadioGroupIndicatorProps = ComponentProps<'div'>;\n\nexport function SwatchRadioGroupIndicator({\n  className,\n  children,\n  ...props\n}: SwatchRadioGroupIndicatorProps) {\n  return (\n    <div\n      className={cn(\n        // Base layout\n        'disabled-icon absolute inset-0 hidden place-content-center',\n        // Colors\n        'text-[var(--swatch-radio-group-light-icon,hsl(var(--foreground)))]',\n        className,\n      )}\n      data-slot=\"swatch-radio-group-indicator\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["SwatchRadioGroup","options","className","onOptionMouseEnter","props","jsx","SwatchRadioGroupPrimitive.Root","option","jsxs","SwatchRadioGroupPrimitive.Item","SwatchRadioGroupPrimitive.Color","SwatchRadioGroupPrimitive.Thumbnail","SwatchRadioGroupPrimitive.Image","SwatchRadioGroupPrimitive.Indicator","X","SwatchRadioGroupRoot","children","RadioGroupPrimitive.Root","cn","SwatchRadioGroupItem","RadioGroupPrimitive.Item","SwatchRadioGroupColor","color","SwatchRadioGroupThumbnail","SwatchRadioGroupImage","asChild","Component","Slot","SwatchRadioGroupIndicator"],"mappings":"yPA2CO,SAASA,EAAiB,CAC/B,QAAAC,EACA,UAAAC,EACA,mBAAAC,EACA,GAAGC,CACL,EAA0B,CACxB,OACEC,EAAAA,IAACC,EAAA,CAAgC,GAAGF,EACjC,SAAAH,EAAQ,IAAKM,GACZC,EAAAA,KAACC,EAAA,CACC,aAAYF,EAAO,MACnB,SAAUA,EAAO,SAEjB,aAAc,IAAM,CAClBJ,IAAqBI,EAAO,KAAK,CACnC,EACA,MAAOA,EAAO,MAEb,SAAA,CAAAA,EAAO,OAAS,QACfF,EAAAA,IAACK,EAAA,CAAgC,MAAOH,EAAO,KAAA,CAAO,EAEtDF,EAAAA,IAACM,EAAA,CACC,SAAAN,EAAAA,IAACO,EAAA,CACC,IAAKL,EAAO,MAAM,IAClB,OAAQ,GACR,IAAKA,EAAO,MAAM,IAClB,MAAO,EAAA,CAAA,EAEX,EAEFF,EAAAA,IAACQ,EAAA,CACC,SAAAR,EAAAA,IAACS,EAAAA,QAAA,CAAE,oBAAmB,GAAC,KAAM,GAAI,YAAa,GAAA,CAAK,CAAA,CACrD,CAAA,CAAA,EApBKP,EAAO,KAAA,CAsBf,EACH,CAEJ,CCzEO,SAASQ,EAAqB,CAAE,SAAAC,EAAU,UAAAd,EAAW,GAAGE,GAAoC,CACjG,OACEC,EAAAA,IAACY,EAAAA,MAAA,CACC,UAAWC,EAAAA,GAET,uBACAhB,CAAA,EAEF,YAAU,0BACT,GAAGE,EAEH,SAAAY,CAAA,CAAA,CAGP,CCdO,SAASG,EAAqB,CAAE,SAAAH,EAAU,UAAAd,EAAW,GAAGE,GAAoC,CACjG,OACEC,EAAAA,IAACe,EAAAA,MAAA,CACC,UAAWF,EAAAA,GAET,qCAEA,QAEA,4FAEA,oBAEA,iGAEA,2HAEA,sGAEA,uFAEA,qJACAhB,CAAA,EAEF,YAAU,0BACT,GAAGE,EAEH,SAAAY,CAAA,CAAA,CAGP,CC7BO,SAASK,EAAsB,CACpC,MAAAC,EACA,SAAAN,EACA,UAAAd,EACA,GAAGE,CACL,EAA+B,CAC7B,OACEC,EAAAA,IAAC,OAAA,CACC,UAAWa,EAAAA,GAET,kBAEA,8IAEA,4BACAhB,CAAA,EAEF,YAAU,2BACV,MAAO,CAAE,gBAAiBoB,CAAA,EACzB,GAAGlB,EAEH,SAAAY,CAAA,CAAA,CAGP,CC1BO,SAASO,EAA0B,CACxC,UAAArB,EACA,SAAAc,EACA,GAAGZ,CACL,EAAmC,CACjC,OACEC,EAAAA,IAAC,OAAA,CACC,UAAWa,EAAAA,GAET,2CAEA,wIAEA,yBACAhB,CAAA,EAEF,YAAU,+BACT,GAAGE,EAEH,SAAAY,CAAA,CAAA,CAGP,CCjBO,SAASQ,EAAsB,CACpC,UAAAtB,EACA,SAAAc,EACA,QAAAS,EAAU,GACV,GAAGrB,CACL,EAA+B,CAC7B,MAAMsB,EAAYD,EAAUE,EAAAA,KAAO,MAEnC,OAAOtB,MAACqB,GAAU,UAAWR,EAAAA,GAAGhB,CAAS,EAAG,YAAU,2BAA4B,GAAGE,EAAO,CAC9F,CCdO,SAASwB,EAA0B,CACxC,UAAA1B,EACA,SAAAc,EACA,GAAGZ,CACL,EAAmC,CACjC,OACEC,EAAAA,IAAC,MAAA,CACC,UAAWa,EAAAA,GAET,6DAEA,qEACAhB,CAAA,EAEF,YAAU,+BACT,GAAGE,EAEH,SAAAY,CAAA,CAAA,CAGP"}
+{"version":3,"file":"swatch-radio-group.cjs","sources":["../src/components/swatch-radio-group/swatch-radio-group.tsx","../src/components/swatch-radio-group/primitives/swatch-radio-group-root.tsx","../src/components/swatch-radio-group/primitives/swatch-radio-group-item.tsx","../src/components/swatch-radio-group/primitives/swatch-radio-group-color.tsx","../src/components/swatch-radio-group/primitives/swatch-radio-group-thumbnail.tsx","../src/components/swatch-radio-group/primitives/swatch-radio-group-image.tsx","../src/components/swatch-radio-group/primitives/swatch-radio-group-indicator.tsx","../src/components/swatch-radio-group/primitives/swatch-radio-group-indicator-icon.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport * as SwatchRadioGroupPrimitive from '@/components/swatch-radio-group';\n\ntype SwatchOption =\n  | {\n      type: 'color';\n      value: string;\n      label: string;\n      color: string;\n      disabled?: boolean;\n    }\n  | {\n      type: 'image';\n      value: string;\n      label: string;\n      image: {\n        src: string;\n        alt: string;\n        asChild?: boolean;\n        children?: ReactNode;\n      };\n      disabled?: boolean;\n    };\n\nexport type SwatchRadioGroupProps = ComponentProps<typeof SwatchRadioGroupPrimitive.Root> & {\n  options: SwatchOption[];\n  onOptionMouseEnter?: (value: string) => void;\n  indicatorIcon?: {\n    asChild?: boolean;\n    children?: ReactNode;\n  };\n};\n\n/**\n * This component supports various CSS variables for theming. Here's a comprehensive list, along\n * with their default values:\n *\n * ```css\n *  :root {\n *    --swatch-radio-group-focus: var(--brand);\n *    --swatch-radio-group-light-icon: var(--foreground);\n *    --swatch-radio-group-light-unchecked-border: transparent;\n *    --swatch-radio-group-light-unchecked-border-hover: var(--contrast-200);\n *    --swatch-radio-group-light-disabled-border: transparent;\n *    --swatch-radio-group-light-border-error: var(--error);\n *    --swatch-radio-group-light-checked-border: var(--foreground);\n *    --swatch-radio-group-light-option-border: color-mix(in oklab, var(--foreground) 10%, transparent);\n *  }\n * ```\n */\nexport function SwatchRadioGroup({\n  options,\n  className,\n  onOptionMouseEnter,\n  indicatorIcon,\n  ...props\n}: SwatchRadioGroupProps) {\n  return (\n    <SwatchRadioGroupPrimitive.Root className={className} {...props}>\n      {options.map((option) => (\n        <SwatchRadioGroupPrimitive.Item\n          aria-label={option.label}\n          disabled={option.disabled}\n          key={option.value}\n          onMouseEnter={() => {\n            onOptionMouseEnter?.(option.value);\n          }}\n          value={option.value}\n        >\n          {option.type === 'color' ? (\n            <SwatchRadioGroupPrimitive.Color color={option.color} />\n          ) : (\n            <SwatchRadioGroupPrimitive.Thumbnail>\n              <SwatchRadioGroupPrimitive.Image\n                alt={option.image.alt}\n                asChild={option.image.asChild}\n                height={40}\n                src={option.image.src}\n                width={40}\n              >\n                {option.image.children}\n              </SwatchRadioGroupPrimitive.Image>\n            </SwatchRadioGroupPrimitive.Thumbnail>\n          )}\n          <SwatchRadioGroupPrimitive.Indicator>\n            <SwatchRadioGroupPrimitive.IndicatorIcon asChild={indicatorIcon?.asChild}>\n              {indicatorIcon?.children}\n            </SwatchRadioGroupPrimitive.IndicatorIcon>\n          </SwatchRadioGroupPrimitive.Indicator>\n        </SwatchRadioGroupPrimitive.Item>\n      ))}\n    </SwatchRadioGroupPrimitive.Root>\n  );\n}\n","import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SwatchRadioGroupRootProps = ComponentProps<typeof RadioGroupPrimitive.Root>;\n\nexport function SwatchRadioGroupRoot({ children, className, ...props }: SwatchRadioGroupRootProps) {\n  return (\n    <RadioGroupPrimitive.Root\n      className={cn(\n        // Base layout\n        'flex flex-wrap gap-1',\n        className,\n      )}\n      data-slot=\"swatch-radio-group-root\"\n      {...props}\n    >\n      {children}\n    </RadioGroupPrimitive.Root>\n  );\n}\n","import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SwatchRadioGroupItemProps = ComponentProps<typeof RadioGroupPrimitive.Item>;\n\nexport function SwatchRadioGroupItem({ children, className, ...props }: SwatchRadioGroupItemProps) {\n  return (\n    <RadioGroupPrimitive.Item\n      className={cn(\n        'group/swatch-radio-group-item relative box-content h-8 w-8 rounded-full border border-[var(--swatch-radio-group-light-unchecked-border,transparent)] p-0.5 transition-colors',\n        // Hover state\n        'hover:border-[var(--swatch-radio-group-light-unchecked-border-hover,var(--contrast-200))]',\n        // Focus-visible state\n        'focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--swatch-radio-group-focus,var(--brand))]',\n        // Checked state\n        'data-[state=checked]:border-[var(--swatch-radio-group-light-checked-border,var(--foreground))]',\n        // Aria-invalid state\n        'aria-invalid:border-[var(--swatch-radio-group-light-border-error,var(--error))]',\n        // Disabled state\n        'disabled:border-[var(--swatch-radio-group-light-disabled-border,transparent)] data-[disabled]:pointer-events-none [&:disabled>.disabled-icon]:grid',\n        className,\n      )}\n      data-slot=\"swatch-radio-group-item\"\n      {...props}\n    >\n      {children}\n    </RadioGroupPrimitive.Item>\n  );\n}\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SwatchRadioGroupColorProps = ComponentProps<'span'> & {\n  color: string;\n};\n\nexport function SwatchRadioGroupColor({\n  color,\n  children,\n  className,\n  ...props\n}: SwatchRadioGroupColorProps) {\n  return (\n    <span\n      className={cn(\n        'block size-full rounded-full border [border-color:var(--swatch-radio-group-light-option-border,color-mix(in_oklab,var(--foreground)_10%,transparent))]',\n        // Group disabled state\n        'group-disabled/swatch-radio-group-item:opacity-20',\n        className,\n      )}\n      data-slot=\"swatch-radio-group-color\"\n      style={{ backgroundColor: color }}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n}\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SwatchRadioGroupThumbnailProps = ComponentProps<'span'>;\n\nexport function SwatchRadioGroupThumbnail({\n  className,\n  children,\n  ...props\n}: SwatchRadioGroupThumbnailProps) {\n  return (\n    <span\n      className={cn(\n        'relative block size-full overflow-hidden rounded-full border border-[var(--swatch-radio-group-light-option-border,color-mix(in_oklab,var(--foreground)_10%,transparent))] bg-clip-padding shadow',\n        className,\n      )}\n      data-slot=\"swatch-radio-group-thumbnail\"\n      {...props}\n    >\n      {children}\n    </span>\n  );\n}\n","'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport interface SwatchRadioGroupImageProps extends ComponentProps<'img'> {\n  asChild?: boolean;\n}\n\nexport function SwatchRadioGroupImage({\n  className,\n  children,\n  asChild = false,\n  ...props\n}: SwatchRadioGroupImageProps) {\n  const Component = asChild ? Slot : 'img';\n\n  return <Component className={cn(className)} data-slot=\"swatch-radio-group-image\" {...props} />;\n}\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type SwatchRadioGroupIndicatorProps = ComponentProps<'div'>;\n\nexport function SwatchRadioGroupIndicator({\n  className,\n  children,\n  ...props\n}: SwatchRadioGroupIndicatorProps) {\n  return (\n    <div\n      className={cn(\n        // Base layout\n        'disabled-icon absolute inset-0 hidden place-content-center',\n        // Colors\n        'text-[var(--swatch-radio-group-light-icon,var(--foreground))]',\n        className,\n      )}\n      data-slot=\"swatch-radio-group-indicator\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n","'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { X } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport { cn } from '@/lib';\n\nexport interface SwatchRadioGroupIndicatorIconProps {\n  asChild?: boolean;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport function SwatchRadioGroupIndicatorIcon({\n  asChild = false,\n  className,\n  children,\n}: SwatchRadioGroupIndicatorIconProps) {\n  if (asChild) {\n    return (\n      <Slot className={cn('size-4', className)} data-slot=\"swatch-radio-group-indicator-icon\">\n        {children}\n      </Slot>\n    );\n  }\n\n  return (\n    <X\n      absoluteStrokeWidth\n      className={cn('size-4', className)}\n      data-slot=\"swatch-radio-group-indicator-icon\"\n      strokeWidth={1.5}\n    />\n  );\n}\n"],"names":["SwatchRadioGroup","options","className","onOptionMouseEnter","indicatorIcon","props","jsx","SwatchRadioGroupPrimitive.Root","option","jsxs","SwatchRadioGroupPrimitive.Item","SwatchRadioGroupPrimitive.Color","SwatchRadioGroupPrimitive.Thumbnail","SwatchRadioGroupPrimitive.Image","SwatchRadioGroupPrimitive.Indicator","SwatchRadioGroupPrimitive.IndicatorIcon","SwatchRadioGroupRoot","children","RadioGroupPrimitive.Root","cn","SwatchRadioGroupItem","RadioGroupPrimitive.Item","SwatchRadioGroupColor","color","SwatchRadioGroupThumbnail","SwatchRadioGroupImage","asChild","Component","Slot","SwatchRadioGroupIndicator","SwatchRadioGroupIndicatorIcon","X"],"mappings":"yPAmDO,SAASA,EAAiB,CAC/B,QAAAC,EACA,UAAAC,EACA,mBAAAC,EACA,cAAAC,EACA,GAAGC,CACL,EAA0B,CACxB,OACEC,MAACC,EAAA,CAA+B,UAAAL,EAAuB,GAAGG,EACvD,SAAAJ,EAAQ,IAAKO,GACZC,EAAAA,KAACC,EAAA,CACC,aAAYF,EAAO,MACnB,SAAUA,EAAO,SAEjB,aAAc,IAAM,CAClBL,IAAqBK,EAAO,KAAK,CACnC,EACA,MAAOA,EAAO,MAEb,SAAA,CAAAA,EAAO,OAAS,QACfF,EAAAA,IAACK,EAAA,CAAgC,MAAOH,EAAO,KAAA,CAAO,EAEtDF,EAAAA,IAACM,EAAA,CACC,SAAAN,EAAAA,IAACO,EAAA,CACC,IAAKL,EAAO,MAAM,IAClB,QAASA,EAAO,MAAM,QACtB,OAAQ,GACR,IAAKA,EAAO,MAAM,IAClB,MAAO,GAEN,WAAO,MAAM,QAAA,CAAA,EAElB,EAEFF,EAAAA,IAACQ,EAAA,CACC,SAAAR,EAAAA,IAACS,EAAA,CAAwC,QAASX,GAAe,QAC9D,SAAAA,GAAe,SAClB,CAAA,CACF,CAAA,CAAA,EAzBKI,EAAO,KAAA,CA2Bf,EACH,CAEJ,CCvFO,SAASQ,EAAqB,CAAE,SAAAC,EAAU,UAAAf,EAAW,GAAGG,GAAoC,CACjG,OACEC,EAAAA,IAACY,EAAAA,MAAA,CACC,UAAWC,EAAAA,GAET,uBACAjB,CAAA,EAEF,YAAU,0BACT,GAAGG,EAEH,SAAAY,CAAA,CAAA,CAGP,CCdO,SAASG,EAAqB,CAAE,SAAAH,EAAU,UAAAf,EAAW,GAAGG,GAAoC,CACjG,OACEC,EAAAA,IAACe,EAAAA,MAAA,CACC,UAAWF,EAAAA,GACT,+KAEA,4FAEA,iJAEA,iGAEA,kFAEA,qJACAjB,CAAA,EAEF,YAAU,0BACT,GAAGG,EAEH,SAAAY,CAAA,CAAA,CAGP,CCtBO,SAASK,EAAsB,CACpC,MAAAC,EACA,SAAAN,EACA,UAAAf,EACA,GAAGG,CACL,EAA+B,CAC7B,OACEC,EAAAA,IAAC,OAAA,CACC,UAAWa,EAAAA,GACT,yJAEA,oDACAjB,CAAA,EAEF,YAAU,2BACV,MAAO,CAAE,gBAAiBqB,CAAA,EACzB,GAAGlB,EAEH,SAAAY,CAAA,CAAA,CAGP,CCvBO,SAASO,EAA0B,CACxC,UAAAtB,EACA,SAAAe,EACA,GAAGZ,CACL,EAAmC,CACjC,OACEC,EAAAA,IAAC,OAAA,CACC,UAAWa,EAAAA,GACT,mMACAjB,CAAA,EAEF,YAAU,+BACT,GAAGG,EAEH,SAAAY,CAAA,CAAA,CAGP,CCZO,SAASQ,EAAsB,CACpC,UAAAvB,EACA,SAAAe,EACA,QAAAS,EAAU,GACV,GAAGrB,CACL,EAA+B,CAC7B,MAAMsB,EAAYD,EAAUE,EAAAA,KAAO,MAEnC,OAAOtB,MAACqB,GAAU,UAAWR,EAAAA,GAAGjB,CAAS,EAAG,YAAU,2BAA4B,GAAGG,EAAO,CAC9F,CCdO,SAASwB,EAA0B,CACxC,UAAA3B,EACA,SAAAe,EACA,GAAGZ,CACL,EAAmC,CACjC,OACEC,EAAAA,IAAC,MAAA,CACC,UAAWa,EAAAA,GAET,6DAEA,gEACAjB,CAAA,EAEF,YAAU,+BACT,GAAGG,EAEH,SAAAY,CAAA,CAAA,CAGP,CCZO,SAASa,EAA8B,CAC5C,QAAAJ,EAAU,GACV,UAAAxB,EACA,SAAAe,CACF,EAAuC,CACrC,OAAIS,EAEApB,MAACsB,EAAAA,MAAK,UAAWT,EAAAA,GAAG,SAAUjB,CAAS,EAAG,YAAU,oCACjD,SAAAe,CAAA,CACH,EAKFX,EAAAA,IAACyB,EAAAA,QAAA,CACC,oBAAmB,GACnB,UAAWZ,EAAAA,GAAG,SAAUjB,CAAS,EACjC,YAAU,oCACV,YAAa,GAAA,CAAA,CAGnB"}