@spark-ui/components 14.1.0 → 14.1.2

package/dist/DialogContent.styles-CziMQtYr.js

@@ -0,0 +1,2 @@
+"use strict";const a=require("class-variance-authority"),e=a.cva(["z-modal flex flex-col bg-surface group transition-all","focus-visible:outline-hidden focus-visible:u-outline","[&:not(:has(footer))]:pb-lg","[&:not(:has(header))]:pt-lg","data-open:animation-duration-400 data-closed:animation-duration-200","data-starting-style:scale-90 data-starting-style:opacity-0","data-ending-style:scale-90 data-ending-style:opacity-0","data-nested-dialog-open:after:pointer-events-none","after:bg-transparent","after:transition-all","after:duration-200","data-nested-dialog-open:after:inset-0","data-nested-dialog-open:after:absolute","data-nested-dialog-open:after:rounded-[inherit]","data-nested-dialog-open:after:bg-overlay/dim-3"],{variants:{size:{fullscreen:"fixed size-full top-0 left-0",sm:"max-w-[min(480px,calc(100vw-2rem))] data-nested-dialog-open:scale-90",md:"max-w-[min(672px,calc(100vw-2rem))] data-nested-dialog-open:scale-90",lg:"max-w-[min(864px,calc(100vw-2rem))] data-nested-dialog-open:scale-90"},isNarrow:{true:["max-w-[calc(100vw-2rem)]"],false:[]}},compoundVariants:[{size:["sm","md","lg"],class:["fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2","max-h-[80%]","shadow-md rounded-lg","data-open:animate-fade-in","data-closed:animate-fade-out"]},{size:["sm","md","lg"],isNarrow:!1,class:["w-full"]}],defaultVariants:{size:"md",isNarrow:!1}});exports.dialogContentStyles=e;
+//# sourceMappingURL=DialogContent.styles-CziMQtYr.js.map

package/dist/DialogContent.styles-CziMQtYr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContent.styles-CziMQtYr.js","sources":["../src/dialog/DialogContent.styles.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const dialogContentStyles = cva(\n  [\n    'z-modal flex flex-col bg-surface group transition-all',\n    'focus-visible:outline-hidden focus-visible:u-outline',\n    '[&:not(:has(footer))]:pb-lg',\n    '[&:not(:has(header))]:pt-lg',\n    'data-open:animation-duration-400 data-closed:animation-duration-200',\n    'data-starting-style:scale-90 data-starting-style:opacity-0',\n    'data-ending-style:scale-90 data-ending-style:opacity-0',\n    // Nested dialog effect\n    'data-nested-dialog-open:after:pointer-events-none',\n    'after:bg-transparent',\n    'after:transition-all',\n    'after:duration-200',\n    'data-nested-dialog-open:after:inset-0',\n    'data-nested-dialog-open:after:absolute',\n    'data-nested-dialog-open:after:rounded-[inherit]',\n    'data-nested-dialog-open:after:bg-overlay/dim-3',\n  ],\n  {\n    variants: {\n      size: {\n        fullscreen: 'fixed size-full top-0 left-0',\n        sm: 'max-w-[min(480px,calc(100vw-2rem))] data-nested-dialog-open:scale-90',\n        md: 'max-w-[min(672px,calc(100vw-2rem))] data-nested-dialog-open:scale-90',\n        lg: 'max-w-[min(864px,calc(100vw-2rem))] data-nested-dialog-open:scale-90',\n      },\n      isNarrow: {\n        true: ['max-w-[calc(100vw-2rem)]'],\n        false: [],\n      },\n    },\n    compoundVariants: [\n      {\n        size: ['sm', 'md', 'lg'],\n        class: [\n          'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n          'max-h-[80%]',\n          'shadow-md rounded-lg',\n          'data-open:animate-fade-in',\n          'data-closed:animate-fade-out',\n        ],\n      },\n      {\n        size: ['sm', 'md', 'lg'],\n        isNarrow: false,\n        class: ['w-full'],\n      },\n    ],\n    defaultVariants: {\n      size: 'md',\n      isNarrow: false,\n    },\n  }\n)\n\nexport type DialogContentStylesProps = VariantProps<typeof dialogContentStyles>\n"],"names":["dialogContentStyles","cva"],"mappings":"yDAEaA,EAAsBC,EAAAA,IACjC,CACE,wDACA,uDACA,8BACA,8BACA,sEACA,6DACA,yDAEA,oDACA,uBACA,uBACA,qBACA,wCACA,yCACA,kDACA,gDAAA,EAEF,CACE,SAAU,CACR,KAAM,CACJ,WAAY,+BACZ,GAAI,uEACJ,GAAI,uEACJ,GAAI,sEAAA,EAEN,SAAU,CACR,KAAM,CAAC,0BAA0B,EACjC,MAAO,CAAA,CAAC,CACV,EAEF,iBAAkB,CAChB,CACE,KAAM,CAAC,KAAM,KAAM,IAAI,EACvB,MAAO,CACL,2DACA,cACA,uBACA,4BACA,8BAAA,CACF,EAEF,CACE,KAAM,CAAC,KAAM,KAAM,IAAI,EACvB,SAAU,GACV,MAAO,CAAC,QAAQ,CAAA,CAClB,EAEF,gBAAiB,CACf,KAAM,KACN,SAAU,EAAA,CACZ,CAEJ"}

package/dist/{DialogContent.styles-BSfXHt21.mjs → DialogContent.styles-Du7_Dkde.mjs}

@@ -9,7 +9,6 @@ const t = a(
     "data-starting-style:scale-90 data-starting-style:opacity-0",
     "data-ending-style:scale-90 data-ending-style:opacity-0",
     // Nested dialog effect
-    "data-nested-dialog-open:scale-90",
     "data-nested-dialog-open:after:pointer-events-none",
     "after:bg-transparent",
     "after:transition-all",
@@ -23,12 +22,12 @@ const t = a(
     variants: {
       size: {
         fullscreen: "fixed size-full top-0 left-0",
-        sm: "max-w-sz-480",
-        md: "max-w-sz-672",
-        lg: "max-w-sz-864"
+        sm: "max-w-[min(480px,calc(100vw-2rem))] data-nested-dialog-open:scale-90",
+        md: "max-w-[min(672px,calc(100vw-2rem))] data-nested-dialog-open:scale-90",
+        lg: "max-w-[min(864px,calc(100vw-2rem))] data-nested-dialog-open:scale-90"
       },
       isNarrow: {
-        true: [],
+        true: ["max-w-[calc(100vw-2rem)]"],
         false: []
       }
     },
@@ -58,4 +57,4 @@ const t = a(
 export {
   t as d
 };
-//# sourceMappingURL=DialogContent.styles-BSfXHt21.mjs.map
+//# sourceMappingURL=DialogContent.styles-Du7_Dkde.mjs.map

package/dist/DialogContent.styles-Du7_Dkde.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContent.styles-Du7_Dkde.mjs","sources":["../src/dialog/DialogContent.styles.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const dialogContentStyles = cva(\n  [\n    'z-modal flex flex-col bg-surface group transition-all',\n    'focus-visible:outline-hidden focus-visible:u-outline',\n    '[&:not(:has(footer))]:pb-lg',\n    '[&:not(:has(header))]:pt-lg',\n    'data-open:animation-duration-400 data-closed:animation-duration-200',\n    'data-starting-style:scale-90 data-starting-style:opacity-0',\n    'data-ending-style:scale-90 data-ending-style:opacity-0',\n    // Nested dialog effect\n    'data-nested-dialog-open:after:pointer-events-none',\n    'after:bg-transparent',\n    'after:transition-all',\n    'after:duration-200',\n    'data-nested-dialog-open:after:inset-0',\n    'data-nested-dialog-open:after:absolute',\n    'data-nested-dialog-open:after:rounded-[inherit]',\n    'data-nested-dialog-open:after:bg-overlay/dim-3',\n  ],\n  {\n    variants: {\n      size: {\n        fullscreen: 'fixed size-full top-0 left-0',\n        sm: 'max-w-[min(480px,calc(100vw-2rem))] data-nested-dialog-open:scale-90',\n        md: 'max-w-[min(672px,calc(100vw-2rem))] data-nested-dialog-open:scale-90',\n        lg: 'max-w-[min(864px,calc(100vw-2rem))] data-nested-dialog-open:scale-90',\n      },\n      isNarrow: {\n        true: ['max-w-[calc(100vw-2rem)]'],\n        false: [],\n      },\n    },\n    compoundVariants: [\n      {\n        size: ['sm', 'md', 'lg'],\n        class: [\n          'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n          'max-h-[80%]',\n          'shadow-md rounded-lg',\n          'data-open:animate-fade-in',\n          'data-closed:animate-fade-out',\n        ],\n      },\n      {\n        size: ['sm', 'md', 'lg'],\n        isNarrow: false,\n        class: ['w-full'],\n      },\n    ],\n    defaultVariants: {\n      size: 'md',\n      isNarrow: false,\n    },\n  }\n)\n\nexport type DialogContentStylesProps = VariantProps<typeof dialogContentStyles>\n"],"names":["dialogContentStyles","cva"],"mappings":";AAEO,MAAMA,IAAsBC;AAAA,EACjC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,UAAU;AAAA,QACR,MAAM,CAAC,0BAA0B;AAAA,QACjC,OAAO,CAAA;AAAA,MAAC;AAAA,IACV;AAAA,IAEF,kBAAkB;AAAA,MAChB;AAAA,QACE,MAAM,CAAC,MAAM,MAAM,IAAI;AAAA,QACvB,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,MAAM,CAAC,MAAM,MAAM,IAAI;AAAA,QACvB,UAAU;AAAA,QACV,OAAO,CAAC,QAAQ;AAAA,MAAA;AAAA,IAClB;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ;"}

package/dist/alert-dialog/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),i=require("@base-ui/react/alert-dialog"),d=require("react"),w=require("../Slot-DQ8z2zsy.js"),A=require("@spark-ui/hooks/use-merge-refs"),P=require("@spark-ui/hooks/use-scroll-overflow"),c=require("class-variance-authority"),O=require("../DialogContent.styles-bBs6l8Cy.js"),y=d.createContext(null),q=({children:e,withFade:t=!1,cancelRef:a})=>l.jsx(y.Provider,{value:{cancelRef:a,withFade:t},children:e}),p=()=>{const e=d.useContext(y);if(!e)throw Error("useAlertDialog must be used within an AlertDialog provider");return e},m=({onOpenChange:e,withFade:t=!1,...a})=>{const o=d.useRef(null),s=e?(n,g)=>{e(n)}:void 0;return l.jsx(q,{withFade:t,cancelRef:o,children:l.jsx(i.AlertDialog.Root,{"data-spark-component":"alert-dialog",onOpenChange:s,...a})})};m.displayName="AlertDialog";function D(e,t){const a=e?w.Slot:t;return e?({...o})=>l.jsx(a,{...o}):void 0}const x=({asChild:e=!1,...t})=>{const a=D(e,"button");return l.jsx(i.AlertDialog.Close,{"data-spark-component":"alert-dialog-action",render:a,...t})};x.displayName="AlertDialog.Action";const f=({children:e,className:t,inset:a=!1,ref:o,...s})=>{const n=d.useRef(null),g=A.useMergeRefs(o,n),{withFade:S}=p(),{overflow:u}=P.useScrollOverflow(n);return l.jsx("div",{"data-spark-component":"alert-dialog-body",ref:g,className:c.cx("focus-visible:u-outline relative grow overflow-y-auto outline-hidden","transition-all duration-300",{"px-xl py-lg":!a},t),style:{...S&&{maskImage:"linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",maskSize:`100% calc(100% + ${u.top?"0px":"44px"} + ${u.bottom?"0px":"44px"})`,maskPosition:`0 ${u.top?"0px":"-44px"}`}},...s,children:e})};f.displayName="AlertDialog.Body";const N=({asChild:e=!1,ref:t,...a})=>{const{cancelRef:o}=p(),s=A.useMergeRefs(t,o),n=D(e,"button");return l.jsx(i.AlertDialog.Close,{ref:s,"data-spark-component":"alert-dialog-cancel",render:n,...a})};N.displayName="AlertDialog.Cancel";const v=({className:e,ref:t,initialFocus:a,...o})=>{const{cancelRef:s}=p(),n=a!==void 0?a:()=>s.current;return l.jsx(i.AlertDialog.Popup,{ref:t,"data-spark-component":"alert-dialog-content",role:"alertdialog",className:g=>c.cx(O.dialogContentStyles({size:"md",isNarrow:!0}),"min-w-sz-288","transition-all duration-150","data-starting-style:scale-90 data-starting-style:opacity-0","data-ending-style:scale-90 data-ending-style:opacity-0",typeof e=="function"?e(g):e),initialFocus:n,...o})};v.displayName="AlertDialog.Content";const j=e=>l.jsx(i.AlertDialog.Description,{"data-spark-component":"alert-dialog-description",...e});j.displayName="AlertDialog.Description";const C=({children:e,className:t,ref:a,...o})=>l.jsx("footer",{"data-spark-component":"alert-dialog-footer",ref:a,className:c.cx(t,["px-xl","py-lg"]),...o,children:e});C.displayName="AlertDialog.Footer";const b=({children:e,className:t,ref:a,...o})=>l.jsx("header",{"data-spark-component":"alert-dialog-header",ref:a,className:c.cx(t,["px-xl","py-lg"]),...o,children:e});b.displayName="AlertDialog.Header";const k=({className:e,...t})=>l.jsx(i.AlertDialog.Backdrop,{"data-spark-component":"alert-dialog-overlay",className:a=>c.cx("z-overlay fixed top-0 left-0 h-screen w-screen","bg-overlay/dim-1","data-starting-style:animate-fade-in","data-ending-style:animate-fade-out",typeof e=="function"?e(a):e),...t});k.displayName="AlertDialog.Overlay";const R=({className:e,...t})=>l.jsx(i.AlertDialog.Portal,{"data-spark-component":"alert-dialog-portal",className:c.cx(e,"z-modal absolute"),...t});R.displayName="AlertDialog.Portal";const T=({className:e,...t})=>l.jsx(i.AlertDialog.Title,{"data-spark-component":"alert-dialog-title",className:c.cx("text-headline-1 text-on-surface",e),...t});T.displayName="AlertDialog.Title";const h=({asChild:e=!1,...t})=>{const a=D(e,"button");return l.jsx(i.AlertDialog.Trigger,{"data-spark-component":"alert-dialog-trigger",render:a,...t})};h.displayName="AlertDialog.Trigger";const r=Object.assign(m,{Action:x,Body:f,Cancel:N,Content:v,Description:j,Footer:C,Header:b,Overlay:k,Portal:R,Title:T,Trigger:h});r.displayName="AlertDialog";r.Action.displayName="AlertDialog.Action";r.Body.displayName="AlertDialog.Body";r.Cancel.displayName="AlertDialog.Cancel";r.Content.displayName="AlertDialog.Content";r.Description.displayName="AlertDialog.Description";r.Footer.displayName="AlertDialog.Footer";r.Header.displayName="AlertDialog.Header";r.Overlay.displayName="AlertDialog.Overlay";r.Portal.displayName="AlertDialog.Portal";r.Title.displayName="AlertDialog.Title";r.Trigger.displayName="AlertDialog.Trigger";exports.AlertDialog=r;exports.useAlertDialog=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),i=require("@base-ui/react/alert-dialog"),d=require("react"),S=require("../Slot-DQ8z2zsy.js"),A=require("@spark-ui/hooks/use-merge-refs"),P=require("@spark-ui/hooks/use-scroll-overflow"),c=require("class-variance-authority"),O=require("../DialogContent.styles-CziMQtYr.js"),y=d.createContext(null),q=({children:e,withFade:t=!1,cancelRef:a})=>l.jsx(y.Provider,{value:{cancelRef:a,withFade:t},children:e}),p=()=>{const e=d.useContext(y);if(!e)throw Error("useAlertDialog must be used within an AlertDialog provider");return e},m=({onOpenChange:e,withFade:t=!1,...a})=>{const o=d.useRef(null),s=e?(n,g)=>{e(n)}:void 0;return l.jsx(q,{withFade:t,cancelRef:o,children:l.jsx(i.AlertDialog.Root,{"data-spark-component":"alert-dialog",onOpenChange:s,...a})})};m.displayName="AlertDialog";function D(e,t){const a=e?S.Slot:t;return e?({...o})=>l.jsx(a,{...o}):void 0}const x=({asChild:e=!1,...t})=>{const a=D(e,"button");return l.jsx(i.AlertDialog.Close,{"data-spark-component":"alert-dialog-action",render:a,...t})};x.displayName="AlertDialog.Action";const f=({children:e,className:t,inset:a=!1,ref:o,...s})=>{const n=d.useRef(null),g=A.useMergeRefs(o,n),{withFade:w}=p(),{overflow:u}=P.useScrollOverflow(n);return l.jsx("div",{"data-spark-component":"alert-dialog-body",ref:g,className:c.cx("focus-visible:u-outline relative grow overflow-y-auto outline-hidden","transition-all duration-300",{"px-xl py-lg":!a},t),style:{...w&&{maskImage:"linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",maskSize:`100% calc(100% + ${u.top?"0px":"44px"} + ${u.bottom?"0px":"44px"})`,maskPosition:`0 ${u.top?"0px":"-44px"}`}},...s,children:e})};f.displayName="AlertDialog.Body";const N=({asChild:e=!1,ref:t,...a})=>{const{cancelRef:o}=p(),s=A.useMergeRefs(t,o),n=D(e,"button");return l.jsx(i.AlertDialog.Close,{ref:s,"data-spark-component":"alert-dialog-cancel",render:n,...a})};N.displayName="AlertDialog.Cancel";const v=({className:e,ref:t,initialFocus:a,...o})=>{const{cancelRef:s}=p(),n=a!==void 0?a:()=>s.current;return l.jsx(i.AlertDialog.Popup,{ref:t,"data-spark-component":"alert-dialog-content",role:"alertdialog",className:g=>c.cx(O.dialogContentStyles({size:"md",isNarrow:!0}),"min-w-[min(288px,calc(100vw-2rem))]","transition-all duration-150","data-starting-style:scale-90 data-starting-style:opacity-0","data-ending-style:scale-90 data-ending-style:opacity-0",typeof e=="function"?e(g):e),initialFocus:n,...o})};v.displayName="AlertDialog.Content";const j=e=>l.jsx(i.AlertDialog.Description,{"data-spark-component":"alert-dialog-description",...e});j.displayName="AlertDialog.Description";const C=({children:e,className:t,ref:a,...o})=>l.jsx("footer",{"data-spark-component":"alert-dialog-footer",ref:a,className:c.cx(t,["px-xl","py-lg"]),...o,children:e});C.displayName="AlertDialog.Footer";const b=({children:e,className:t,ref:a,...o})=>l.jsx("header",{"data-spark-component":"alert-dialog-header",ref:a,className:c.cx(t,["px-xl","py-lg"]),...o,children:e});b.displayName="AlertDialog.Header";const k=({className:e,...t})=>l.jsx(i.AlertDialog.Backdrop,{"data-spark-component":"alert-dialog-overlay",className:a=>c.cx("z-overlay fixed top-0 left-0 h-screen w-screen","bg-overlay/dim-1","data-starting-style:animate-fade-in","data-ending-style:animate-fade-out",typeof e=="function"?e(a):e),...t});k.displayName="AlertDialog.Overlay";const R=({className:e,...t})=>l.jsx(i.AlertDialog.Portal,{"data-spark-component":"alert-dialog-portal",className:c.cx(e,"z-modal absolute"),...t});R.displayName="AlertDialog.Portal";const T=({className:e,...t})=>l.jsx(i.AlertDialog.Title,{"data-spark-component":"alert-dialog-title",className:c.cx("text-headline-1 text-on-surface",e),...t});T.displayName="AlertDialog.Title";const h=({asChild:e=!1,...t})=>{const a=D(e,"button");return l.jsx(i.AlertDialog.Trigger,{"data-spark-component":"alert-dialog-trigger",render:a,...t})};h.displayName="AlertDialog.Trigger";const r=Object.assign(m,{Action:x,Body:f,Cancel:N,Content:v,Description:j,Footer:C,Header:b,Overlay:k,Portal:R,Title:T,Trigger:h});r.displayName="AlertDialog";r.Action.displayName="AlertDialog.Action";r.Body.displayName="AlertDialog.Body";r.Cancel.displayName="AlertDialog.Cancel";r.Content.displayName="AlertDialog.Content";r.Description.displayName="AlertDialog.Description";r.Footer.displayName="AlertDialog.Footer";r.Header.displayName="AlertDialog.Header";r.Overlay.displayName="AlertDialog.Overlay";r.Portal.displayName="AlertDialog.Portal";r.Title.displayName="AlertDialog.Title";r.Trigger.displayName="AlertDialog.Trigger";exports.AlertDialog=r;exports.useAlertDialog=p;
 //# sourceMappingURL=index.js.map

package/dist/alert-dialog/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/alert-dialog/AlertDialogContext.tsx","../../src/alert-dialog/AlertDialog.tsx","../../src/alert-dialog/useRenderSlot.tsx","../../src/alert-dialog/AlertDialogAction.tsx","../../src/alert-dialog/AlertDialogBody.tsx","../../src/alert-dialog/AlertDialogCancel.tsx","../../src/alert-dialog/AlertDialogContent.tsx","../../src/alert-dialog/AlertDialogDescription.tsx","../../src/alert-dialog/AlertDialogFooter.tsx","../../src/alert-dialog/AlertDialogHeader.tsx","../../src/alert-dialog/AlertDialogOverlay.tsx","../../src/alert-dialog/AlertDialogPortal.tsx","../../src/alert-dialog/AlertDialogTitle.tsx","../../src/alert-dialog/AlertDialogTrigger.tsx","../../src/alert-dialog/index.ts"],"sourcesContent":["import { createContext, MutableRefObject, type ReactNode, useContext } from 'react'\n\nexport interface AlertDialogContextValue {\n  cancelRef: MutableRefObject<HTMLButtonElement | null>\n  withFade: boolean\n}\n\nexport const AlertDialogContext = createContext<AlertDialogContextValue | null>(null)\n\nexport const AlertDialogProvider = ({\n  children,\n  withFade = false,\n  cancelRef,\n}: {\n  children: ReactNode\n  withFade?: boolean\n  cancelRef: MutableRefObject<HTMLButtonElement | null>\n}) => {\n  return (\n    <AlertDialogContext.Provider\n      value={{\n        cancelRef,\n        withFade,\n      }}\n    >\n      {children}\n    </AlertDialogContext.Provider>\n  )\n}\n\nexport const useAlertDialog = () => {\n  const context = useContext(AlertDialogContext)\n\n  if (!context) {\n    throw Error('useAlertDialog must be used within an AlertDialog provider')\n  }\n\n  return context\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref, useRef } from 'react'\n\nimport { AlertDialogProvider } from './AlertDialogContext'\n\nexport interface AlertDialogProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Root>, 'onOpenChange' | 'render'> {\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: boolean\n  /**\n   * Default open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).\n   */\n  withFade?: boolean\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialog = ({ onOpenChange, withFade = false, ...props }: AlertDialogProps) => {\n  const cancelRef = useRef<HTMLButtonElement | null>(null)\n\n  const handleOpenChange = onOpenChange\n    ? (open: boolean, _eventDetails: unknown) => {\n        onOpenChange(open)\n      }\n    : undefined\n\n  return (\n    <AlertDialogProvider withFade={withFade} cancelRef={cancelRef}>\n      <BaseAlertDialog.Root\n        data-spark-component=\"alert-dialog\"\n        onOpenChange={handleOpenChange}\n        {...props}\n      />\n    </AlertDialogProvider>\n  )\n}\n\nAlertDialog.displayName = 'AlertDialog'\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n  const Component = asChild ? Slot : defaultTag\n\n  return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogActionProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Close>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogAction = ({ asChild = false, ...props }: AlertDialogActionProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Close\n      data-spark-component=\"alert-dialog-action\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogAction.displayName = 'AlertDialog.Action'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref, useRef } from 'react'\n\nimport { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogBodyProps {\n  children: ReactNode\n  className?: string\n  tabIndex?: number\n  ref?: Ref<HTMLDivElement>\n  inset?: boolean\n}\n\nexport const AlertDialogBody = ({\n  children,\n  className,\n  inset = false,\n  ref: forwardedRef,\n  ...rest\n}: AlertDialogBodyProps): ReactElement => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n  const { withFade } = useAlertDialog()\n  const { overflow } = useScrollOverflow(scrollAreaRef)\n\n  return (\n    <div\n      data-spark-component=\"alert-dialog-body\"\n      ref={ref}\n      className={cx(\n        'focus-visible:u-outline relative grow overflow-y-auto outline-hidden',\n        'transition-all duration-300',\n        {\n          ['px-xl py-lg']: !inset,\n        },\n        className\n      )}\n      style={{\n        ...(withFade && {\n          maskImage:\n            'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n          maskSize: `100% calc(100% + ${overflow.top ? '0px' : '44px'} + ${overflow.bottom ? '0px' : '44px'})`,\n          maskPosition: `0 ${overflow.top ? '0px' : '-44px'}`,\n        }),\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nAlertDialogBody.displayName = 'AlertDialog.Body'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useAlertDialog } from './AlertDialogContext'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogCancelProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Close>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogCancel = ({\n  asChild = false,\n  ref: forwardedRef,\n  ...props\n}: AlertDialogCancelProps) => {\n  const { cancelRef } = useAlertDialog()\n  const ref = useMergeRefs(forwardedRef, cancelRef)\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Close\n      ref={ref}\n      data-spark-component=\"alert-dialog-cancel\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogCancel.displayName = 'AlertDialog.Cancel'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { dialogContentStyles } from '../dialog/DialogContent.styles'\nimport { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogContentProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Popup>, 'render'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogContent = ({\n  className,\n  ref,\n  initialFocus,\n  ...others\n}: AlertDialogContentProps) => {\n  const { cancelRef } = useAlertDialog()\n\n  // Default: focus the cancel button when dialog opens\n  // Users can override by passing their own initialFocus prop (RefObject, false, true, or function)\n  const handleInitialFocus = initialFocus !== undefined ? initialFocus : () => cancelRef.current\n\n  return (\n    <BaseAlertDialog.Popup\n      ref={ref}\n      data-spark-component=\"alert-dialog-content\"\n      role=\"alertdialog\"\n      className={state =>\n        cx(\n          dialogContentStyles({ size: 'md', isNarrow: true }),\n          'min-w-sz-288',\n          // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n          // Transition with opacity and scale for smooth open/close animations\n          'transition-all duration-150',\n          'data-starting-style:scale-90 data-starting-style:opacity-0',\n          'data-ending-style:scale-90 data-ending-style:opacity-0',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      initialFocus={handleInitialFocus}\n      {...others}\n    />\n  )\n}\n\nAlertDialogContent.displayName = 'AlertDialog.Content'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogDescriptionProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Description>, 'render'> {\n  ref?: Ref<HTMLParagraphElement>\n}\n\nexport const AlertDialogDescription = (props: AlertDialogDescriptionProps) => {\n  return <BaseAlertDialog.Description data-spark-component=\"alert-dialog-description\" {...props} />\n}\n\nAlertDialogDescription.displayName = 'AlertDialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogFooterProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogFooter = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: AlertDialogFooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"alert-dialog-footer\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </footer>\n)\n\nAlertDialogFooter.displayName = 'AlertDialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogHeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogHeader = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: AlertDialogHeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"alert-dialog-header\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nAlertDialogHeader.displayName = 'AlertDialog.Header'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogOverlayProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Backdrop>, 'render'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogOverlay = ({ className, ...props }: AlertDialogOverlayProps) => {\n  return (\n    <BaseAlertDialog.Backdrop\n      data-spark-component=\"alert-dialog-overlay\"\n      className={state =>\n        cx(\n          'z-overlay fixed top-0 left-0 h-screen w-screen',\n          'bg-overlay/dim-1',\n          // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n          'data-starting-style:animate-fade-in',\n          'data-ending-style:animate-fade-out',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      {...props}\n    />\n  )\n}\n\nAlertDialogOverlay.displayName = 'AlertDialog.Overlay'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type AlertDialogPortalProps = ComponentProps<typeof BaseAlertDialog.Portal>\n\nexport const AlertDialogPortal = ({ className, ...props }: AlertDialogPortalProps) => {\n  return (\n    <BaseAlertDialog.Portal\n      data-spark-component=\"alert-dialog-portal\"\n      className={cx(className, 'z-modal absolute')}\n      {...props}\n    />\n  )\n}\n\nAlertDialogPortal.displayName = 'AlertDialog.Portal'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogTitleProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Title>, 'render'> {\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const AlertDialogTitle = ({ className, ...props }: AlertDialogTitleProps) => {\n  return (\n    <BaseAlertDialog.Title\n      data-spark-component=\"alert-dialog-title\"\n      className={cx('text-headline-1 text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nAlertDialogTitle.displayName = 'AlertDialog.Title'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogTriggerProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Trigger>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogTrigger = ({ asChild = false, ...props }: AlertDialogTriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Trigger\n      data-spark-component=\"alert-dialog-trigger\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogTrigger.displayName = 'AlertDialog.Trigger'\n","import { AlertDialog as Root } from './AlertDialog'\nimport { AlertDialogAction } from './AlertDialogAction'\nimport { AlertDialogBody } from './AlertDialogBody'\nimport { AlertDialogCancel } from './AlertDialogCancel'\nimport { AlertDialogContent } from './AlertDialogContent'\nimport { AlertDialogDescription } from './AlertDialogDescription'\nimport { AlertDialogFooter } from './AlertDialogFooter'\nimport { AlertDialogHeader } from './AlertDialogHeader'\nimport { AlertDialogOverlay } from './AlertDialogOverlay'\nimport { AlertDialogPortal } from './AlertDialogPortal'\nimport { AlertDialogTitle } from './AlertDialogTitle'\nimport { AlertDialogTrigger } from './AlertDialogTrigger'\n\nexport * from './AlertDialog'\nexport { useAlertDialog } from './AlertDialogContext'\nexport { type AlertDialogActionProps } from './AlertDialogAction'\nexport { type AlertDialogBodyProps } from './AlertDialogBody'\nexport { type AlertDialogCancelProps } from './AlertDialogCancel'\nexport { type AlertDialogContentProps } from './AlertDialogContent'\nexport { type AlertDialogDescriptionProps } from './AlertDialogDescription'\nexport { type AlertDialogFooterProps } from './AlertDialogFooter'\nexport { type AlertDialogHeaderProps } from './AlertDialogHeader'\nexport { type AlertDialogOverlayProps } from './AlertDialogOverlay'\nexport { type AlertDialogPortalProps } from './AlertDialogPortal'\nexport { type AlertDialogTitleProps } from './AlertDialogTitle'\nexport { type AlertDialogTriggerProps } from './AlertDialogTrigger'\n\nexport const AlertDialog: typeof Root & {\n  Action: typeof AlertDialogAction\n  Body: typeof AlertDialogBody\n  Cancel: typeof AlertDialogCancel\n  Content: typeof AlertDialogContent\n  Description: typeof AlertDialogDescription\n  Footer: typeof AlertDialogFooter\n  Header: typeof AlertDialogHeader\n  Overlay: typeof AlertDialogOverlay\n  Portal: typeof AlertDialogPortal\n  Title: typeof AlertDialogTitle\n  Trigger: typeof AlertDialogTrigger\n} = Object.assign(Root, {\n  Action: AlertDialogAction,\n  Body: AlertDialogBody,\n  Cancel: AlertDialogCancel,\n  Content: AlertDialogContent,\n  Description: AlertDialogDescription,\n  Footer: AlertDialogFooter,\n  Header: AlertDialogHeader,\n  Overlay: AlertDialogOverlay,\n  Portal: AlertDialogPortal,\n  Title: AlertDialogTitle,\n  Trigger: AlertDialogTrigger,\n})\n\nAlertDialog.displayName = 'AlertDialog'\nAlertDialog.Action.displayName = 'AlertDialog.Action'\nAlertDialog.Body.displayName = 'AlertDialog.Body'\nAlertDialog.Cancel.displayName = 'AlertDialog.Cancel'\nAlertDialog.Content.displayName = 'AlertDialog.Content'\nAlertDialog.Description.displayName = 'AlertDialog.Description'\nAlertDialog.Footer.displayName = 'AlertDialog.Footer'\nAlertDialog.Header.displayName = 'AlertDialog.Header'\nAlertDialog.Overlay.displayName = 'AlertDialog.Overlay'\nAlertDialog.Portal.displayName = 'AlertDialog.Portal'\nAlertDialog.Title.displayName = 'AlertDialog.Title'\nAlertDialog.Trigger.displayName = 'AlertDialog.Trigger'\n"],"names":["AlertDialogContext","createContext","AlertDialogProvider","children","withFade","cancelRef","jsx","useAlertDialog","context","useContext","AlertDialog","onOpenChange","props","useRef","handleOpenChange","open","_eventDetails","BaseAlertDialog","useRenderSlot","asChild","defaultTag","Component","Slot","AlertDialogAction","renderSlot","AlertDialogBody","className","inset","forwardedRef","rest","scrollAreaRef","ref","useMergeRefs","overflow","useScrollOverflow","cx","AlertDialogCancel","AlertDialogContent","initialFocus","others","handleInitialFocus","state","dialogContentStyles","AlertDialogDescription","AlertDialogFooter","AlertDialogHeader","AlertDialogOverlay","AlertDialogPortal","AlertDialogTitle","AlertDialogTrigger","Root"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/alert-dialog/AlertDialogContext.tsx","../../src/alert-dialog/AlertDialog.tsx","../../src/alert-dialog/useRenderSlot.tsx","../../src/alert-dialog/AlertDialogAction.tsx","../../src/alert-dialog/AlertDialogBody.tsx","../../src/alert-dialog/AlertDialogCancel.tsx","../../src/alert-dialog/AlertDialogContent.tsx","../../src/alert-dialog/AlertDialogDescription.tsx","../../src/alert-dialog/AlertDialogFooter.tsx","../../src/alert-dialog/AlertDialogHeader.tsx","../../src/alert-dialog/AlertDialogOverlay.tsx","../../src/alert-dialog/AlertDialogPortal.tsx","../../src/alert-dialog/AlertDialogTitle.tsx","../../src/alert-dialog/AlertDialogTrigger.tsx","../../src/alert-dialog/index.ts"],"sourcesContent":["import { createContext, MutableRefObject, type ReactNode, useContext } from 'react'\n\nexport interface AlertDialogContextValue {\n  cancelRef: MutableRefObject<HTMLButtonElement | null>\n  withFade: boolean\n}\n\nexport const AlertDialogContext = createContext<AlertDialogContextValue | null>(null)\n\nexport const AlertDialogProvider = ({\n  children,\n  withFade = false,\n  cancelRef,\n}: {\n  children: ReactNode\n  withFade?: boolean\n  cancelRef: MutableRefObject<HTMLButtonElement | null>\n}) => {\n  return (\n    <AlertDialogContext.Provider\n      value={{\n        cancelRef,\n        withFade,\n      }}\n    >\n      {children}\n    </AlertDialogContext.Provider>\n  )\n}\n\nexport const useAlertDialog = () => {\n  const context = useContext(AlertDialogContext)\n\n  if (!context) {\n    throw Error('useAlertDialog must be used within an AlertDialog provider')\n  }\n\n  return context\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref, useRef } from 'react'\n\nimport { AlertDialogProvider } from './AlertDialogContext'\n\nexport interface AlertDialogProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Root>, 'onOpenChange' | 'render'> {\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: boolean\n  /**\n   * Default open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).\n   */\n  withFade?: boolean\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialog = ({ onOpenChange, withFade = false, ...props }: AlertDialogProps) => {\n  const cancelRef = useRef<HTMLButtonElement | null>(null)\n\n  const handleOpenChange = onOpenChange\n    ? (open: boolean, _eventDetails: unknown) => {\n        onOpenChange(open)\n      }\n    : undefined\n\n  return (\n    <AlertDialogProvider withFade={withFade} cancelRef={cancelRef}>\n      <BaseAlertDialog.Root\n        data-spark-component=\"alert-dialog\"\n        onOpenChange={handleOpenChange}\n        {...props}\n      />\n    </AlertDialogProvider>\n  )\n}\n\nAlertDialog.displayName = 'AlertDialog'\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n  const Component = asChild ? Slot : defaultTag\n\n  return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogActionProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Close>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogAction = ({ asChild = false, ...props }: AlertDialogActionProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Close\n      data-spark-component=\"alert-dialog-action\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogAction.displayName = 'AlertDialog.Action'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref, useRef } from 'react'\n\nimport { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogBodyProps {\n  children: ReactNode\n  className?: string\n  tabIndex?: number\n  ref?: Ref<HTMLDivElement>\n  inset?: boolean\n}\n\nexport const AlertDialogBody = ({\n  children,\n  className,\n  inset = false,\n  ref: forwardedRef,\n  ...rest\n}: AlertDialogBodyProps): ReactElement => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n  const { withFade } = useAlertDialog()\n  const { overflow } = useScrollOverflow(scrollAreaRef)\n\n  return (\n    <div\n      data-spark-component=\"alert-dialog-body\"\n      ref={ref}\n      className={cx(\n        'focus-visible:u-outline relative grow overflow-y-auto outline-hidden',\n        'transition-all duration-300',\n        {\n          ['px-xl py-lg']: !inset,\n        },\n        className\n      )}\n      style={{\n        ...(withFade && {\n          maskImage:\n            'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n          maskSize: `100% calc(100% + ${overflow.top ? '0px' : '44px'} + ${overflow.bottom ? '0px' : '44px'})`,\n          maskPosition: `0 ${overflow.top ? '0px' : '-44px'}`,\n        }),\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nAlertDialogBody.displayName = 'AlertDialog.Body'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useAlertDialog } from './AlertDialogContext'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogCancelProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Close>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogCancel = ({\n  asChild = false,\n  ref: forwardedRef,\n  ...props\n}: AlertDialogCancelProps) => {\n  const { cancelRef } = useAlertDialog()\n  const ref = useMergeRefs(forwardedRef, cancelRef)\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Close\n      ref={ref}\n      data-spark-component=\"alert-dialog-cancel\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogCancel.displayName = 'AlertDialog.Cancel'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { dialogContentStyles } from '../dialog/DialogContent.styles'\nimport { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogContentProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Popup>, 'render'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogContent = ({\n  className,\n  ref,\n  initialFocus,\n  ...others\n}: AlertDialogContentProps) => {\n  const { cancelRef } = useAlertDialog()\n\n  // Default: focus the cancel button when dialog opens\n  // Users can override by passing their own initialFocus prop (RefObject, false, true, or function)\n  const handleInitialFocus = initialFocus !== undefined ? initialFocus : () => cancelRef.current\n\n  return (\n    <BaseAlertDialog.Popup\n      ref={ref}\n      data-spark-component=\"alert-dialog-content\"\n      role=\"alertdialog\"\n      className={state =>\n        cx(\n          dialogContentStyles({ size: 'md', isNarrow: true }),\n          'min-w-[min(288px,calc(100vw-2rem))]',\n          // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n          // Transition with opacity and scale for smooth open/close animations\n          'transition-all duration-150',\n          'data-starting-style:scale-90 data-starting-style:opacity-0',\n          'data-ending-style:scale-90 data-ending-style:opacity-0',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      initialFocus={handleInitialFocus}\n      {...others}\n    />\n  )\n}\n\nAlertDialogContent.displayName = 'AlertDialog.Content'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogDescriptionProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Description>, 'render'> {\n  ref?: Ref<HTMLParagraphElement>\n}\n\nexport const AlertDialogDescription = (props: AlertDialogDescriptionProps) => {\n  return <BaseAlertDialog.Description data-spark-component=\"alert-dialog-description\" {...props} />\n}\n\nAlertDialogDescription.displayName = 'AlertDialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogFooterProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogFooter = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: AlertDialogFooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"alert-dialog-footer\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </footer>\n)\n\nAlertDialogFooter.displayName = 'AlertDialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogHeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogHeader = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: AlertDialogHeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"alert-dialog-header\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nAlertDialogHeader.displayName = 'AlertDialog.Header'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogOverlayProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Backdrop>, 'render'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogOverlay = ({ className, ...props }: AlertDialogOverlayProps) => {\n  return (\n    <BaseAlertDialog.Backdrop\n      data-spark-component=\"alert-dialog-overlay\"\n      className={state =>\n        cx(\n          'z-overlay fixed top-0 left-0 h-screen w-screen',\n          'bg-overlay/dim-1',\n          // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n          'data-starting-style:animate-fade-in',\n          'data-ending-style:animate-fade-out',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      {...props}\n    />\n  )\n}\n\nAlertDialogOverlay.displayName = 'AlertDialog.Overlay'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type AlertDialogPortalProps = ComponentProps<typeof BaseAlertDialog.Portal>\n\nexport const AlertDialogPortal = ({ className, ...props }: AlertDialogPortalProps) => {\n  return (\n    <BaseAlertDialog.Portal\n      data-spark-component=\"alert-dialog-portal\"\n      className={cx(className, 'z-modal absolute')}\n      {...props}\n    />\n  )\n}\n\nAlertDialogPortal.displayName = 'AlertDialog.Portal'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogTitleProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Title>, 'render'> {\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const AlertDialogTitle = ({ className, ...props }: AlertDialogTitleProps) => {\n  return (\n    <BaseAlertDialog.Title\n      data-spark-component=\"alert-dialog-title\"\n      className={cx('text-headline-1 text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nAlertDialogTitle.displayName = 'AlertDialog.Title'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogTriggerProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Trigger>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogTrigger = ({ asChild = false, ...props }: AlertDialogTriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Trigger\n      data-spark-component=\"alert-dialog-trigger\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogTrigger.displayName = 'AlertDialog.Trigger'\n","import { AlertDialog as Root } from './AlertDialog'\nimport { AlertDialogAction } from './AlertDialogAction'\nimport { AlertDialogBody } from './AlertDialogBody'\nimport { AlertDialogCancel } from './AlertDialogCancel'\nimport { AlertDialogContent } from './AlertDialogContent'\nimport { AlertDialogDescription } from './AlertDialogDescription'\nimport { AlertDialogFooter } from './AlertDialogFooter'\nimport { AlertDialogHeader } from './AlertDialogHeader'\nimport { AlertDialogOverlay } from './AlertDialogOverlay'\nimport { AlertDialogPortal } from './AlertDialogPortal'\nimport { AlertDialogTitle } from './AlertDialogTitle'\nimport { AlertDialogTrigger } from './AlertDialogTrigger'\n\nexport * from './AlertDialog'\nexport { useAlertDialog } from './AlertDialogContext'\nexport { type AlertDialogActionProps } from './AlertDialogAction'\nexport { type AlertDialogBodyProps } from './AlertDialogBody'\nexport { type AlertDialogCancelProps } from './AlertDialogCancel'\nexport { type AlertDialogContentProps } from './AlertDialogContent'\nexport { type AlertDialogDescriptionProps } from './AlertDialogDescription'\nexport { type AlertDialogFooterProps } from './AlertDialogFooter'\nexport { type AlertDialogHeaderProps } from './AlertDialogHeader'\nexport { type AlertDialogOverlayProps } from './AlertDialogOverlay'\nexport { type AlertDialogPortalProps } from './AlertDialogPortal'\nexport { type AlertDialogTitleProps } from './AlertDialogTitle'\nexport { type AlertDialogTriggerProps } from './AlertDialogTrigger'\n\nexport const AlertDialog: typeof Root & {\n  Action: typeof AlertDialogAction\n  Body: typeof AlertDialogBody\n  Cancel: typeof AlertDialogCancel\n  Content: typeof AlertDialogContent\n  Description: typeof AlertDialogDescription\n  Footer: typeof AlertDialogFooter\n  Header: typeof AlertDialogHeader\n  Overlay: typeof AlertDialogOverlay\n  Portal: typeof AlertDialogPortal\n  Title: typeof AlertDialogTitle\n  Trigger: typeof AlertDialogTrigger\n} = Object.assign(Root, {\n  Action: AlertDialogAction,\n  Body: AlertDialogBody,\n  Cancel: AlertDialogCancel,\n  Content: AlertDialogContent,\n  Description: AlertDialogDescription,\n  Footer: AlertDialogFooter,\n  Header: AlertDialogHeader,\n  Overlay: AlertDialogOverlay,\n  Portal: AlertDialogPortal,\n  Title: AlertDialogTitle,\n  Trigger: AlertDialogTrigger,\n})\n\nAlertDialog.displayName = 'AlertDialog'\nAlertDialog.Action.displayName = 'AlertDialog.Action'\nAlertDialog.Body.displayName = 'AlertDialog.Body'\nAlertDialog.Cancel.displayName = 'AlertDialog.Cancel'\nAlertDialog.Content.displayName = 'AlertDialog.Content'\nAlertDialog.Description.displayName = 'AlertDialog.Description'\nAlertDialog.Footer.displayName = 'AlertDialog.Footer'\nAlertDialog.Header.displayName = 'AlertDialog.Header'\nAlertDialog.Overlay.displayName = 'AlertDialog.Overlay'\nAlertDialog.Portal.displayName = 'AlertDialog.Portal'\nAlertDialog.Title.displayName = 'AlertDialog.Title'\nAlertDialog.Trigger.displayName = 'AlertDialog.Trigger'\n"],"names":["AlertDialogContext","createContext","AlertDialogProvider","children","withFade","cancelRef","jsx","useAlertDialog","context","useContext","AlertDialog","onOpenChange","props","useRef","handleOpenChange","open","_eventDetails","BaseAlertDialog","useRenderSlot","asChild","defaultTag","Component","Slot","AlertDialogAction","renderSlot","AlertDialogBody","className","inset","forwardedRef","rest","scrollAreaRef","ref","useMergeRefs","overflow","useScrollOverflow","cx","AlertDialogCancel","AlertDialogContent","initialFocus","others","handleInitialFocus","state","dialogContentStyles","AlertDialogDescription","AlertDialogFooter","AlertDialogHeader","AlertDialogOverlay","AlertDialogPortal","AlertDialogTitle","AlertDialogTrigger","Root"],"mappings":"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"}

package/dist/alert-dialog/index.mjs

@@ -5,8 +5,8 @@ import { a as F } from "../Slot-D2Bbf8Gw.mjs";
 import { useMergeRefs as D } from "@spark-ui/hooks/use-merge-refs";
 import { useScrollOverflow as B } from "@spark-ui/hooks/use-scroll-overflow";
 import { cx as d } from "class-variance-authority";
-import { d as z } from "../DialogContent.styles-BSfXHt21.mjs";
-const A = R(null), H = ({
+import { d as H } from "../DialogContent.styles-Du7_Dkde.mjs";
+const A = R(null), $ = ({
   children: e,
   withFade: t = !1,
   cancelRef: a
@@ -19,7 +19,7 @@ const A = R(null), H = ({
     },
     children: e
   }
-), p = () => {
+), g = () => {
   const e = S(A);
   if (!e)
     throw Error("useAlertDialog must be used within an AlertDialog provider");
@@ -28,7 +28,7 @@ const A = R(null), H = ({
   const l = y(null), s = e ? (n, c) => {
     e(n);
   } : void 0;
-  return /* @__PURE__ */ o(H, { withFade: t, cancelRef: l, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o($, { withFade: t, cancelRef: l, children: /* @__PURE__ */ o(
     i.Root,
     {
       "data-spark-component": "alert-dialog",
@@ -61,7 +61,7 @@ const N = ({
   ref: l,
   ...s
 }) => {
-  const n = y(null), c = D(l, n), { withFade: O } = p(), { overflow: g } = B(n);
+  const n = y(null), c = D(l, n), { withFade: O } = g(), { overflow: p } = B(n);
   return /* @__PURE__ */ o(
     "div",
     {
@@ -78,8 +78,8 @@ const N = ({
       style: {
         ...O && {
           maskImage: "linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",
-          maskSize: `100% calc(100% + ${g.top ? "0px" : "44px"} + ${g.bottom ? "0px" : "44px"})`,
-          maskPosition: `0 ${g.top ? "0px" : "-44px"}`
+          maskSize: `100% calc(100% + ${p.top ? "0px" : "44px"} + ${p.bottom ? "0px" : "44px"})`,
+          maskPosition: `0 ${p.top ? "0px" : "-44px"}`
         }
       },
       ...s,
@@ -93,7 +93,7 @@ const x = ({
   ref: t,
   ...a
 }) => {
-  const { cancelRef: l } = p(), s = D(t, l), n = m(e, "button");
+  const { cancelRef: l } = g(), s = D(t, l), n = m(e, "button");
   return /* @__PURE__ */ o(
     i.Close,
     {
@@ -111,7 +111,7 @@ const v = ({
   initialFocus: a,
   ...l
 }) => {
-  const { cancelRef: s } = p(), n = a !== void 0 ? a : () => s.current;
+  const { cancelRef: s } = g(), n = a !== void 0 ? a : () => s.current;
   return /* @__PURE__ */ o(
     i.Popup,
     {
@@ -119,8 +119,8 @@ const v = ({
       "data-spark-component": "alert-dialog-content",
       role: "alertdialog",
       className: (c) => d(
-        z({ size: "md", isNarrow: !0 }),
-        "min-w-sz-288",
+        H({ size: "md", isNarrow: !0 }),
+        "min-w-[min(288px,calc(100vw-2rem))]",
         // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes
         // Transition with opacity and scale for smooth open/close animations
         "transition-all duration-150",
@@ -241,6 +241,6 @@ r.Title.displayName = "AlertDialog.Title";
 r.Trigger.displayName = "AlertDialog.Trigger";
 export {
   r as AlertDialog,
-  p as useAlertDialog
+  g as useAlertDialog
 };
 //# sourceMappingURL=index.mjs.map

package/dist/alert-dialog/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/alert-dialog/AlertDialogContext.tsx","../../src/alert-dialog/AlertDialog.tsx","../../src/alert-dialog/useRenderSlot.tsx","../../src/alert-dialog/AlertDialogAction.tsx","../../src/alert-dialog/AlertDialogBody.tsx","../../src/alert-dialog/AlertDialogCancel.tsx","../../src/alert-dialog/AlertDialogContent.tsx","../../src/alert-dialog/AlertDialogDescription.tsx","../../src/alert-dialog/AlertDialogFooter.tsx","../../src/alert-dialog/AlertDialogHeader.tsx","../../src/alert-dialog/AlertDialogOverlay.tsx","../../src/alert-dialog/AlertDialogPortal.tsx","../../src/alert-dialog/AlertDialogTitle.tsx","../../src/alert-dialog/AlertDialogTrigger.tsx","../../src/alert-dialog/index.ts"],"sourcesContent":["import { createContext, MutableRefObject, type ReactNode, useContext } from 'react'\n\nexport interface AlertDialogContextValue {\n  cancelRef: MutableRefObject<HTMLButtonElement | null>\n  withFade: boolean\n}\n\nexport const AlertDialogContext = createContext<AlertDialogContextValue | null>(null)\n\nexport const AlertDialogProvider = ({\n  children,\n  withFade = false,\n  cancelRef,\n}: {\n  children: ReactNode\n  withFade?: boolean\n  cancelRef: MutableRefObject<HTMLButtonElement | null>\n}) => {\n  return (\n    <AlertDialogContext.Provider\n      value={{\n        cancelRef,\n        withFade,\n      }}\n    >\n      {children}\n    </AlertDialogContext.Provider>\n  )\n}\n\nexport const useAlertDialog = () => {\n  const context = useContext(AlertDialogContext)\n\n  if (!context) {\n    throw Error('useAlertDialog must be used within an AlertDialog provider')\n  }\n\n  return context\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref, useRef } from 'react'\n\nimport { AlertDialogProvider } from './AlertDialogContext'\n\nexport interface AlertDialogProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Root>, 'onOpenChange' | 'render'> {\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: boolean\n  /**\n   * Default open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).\n   */\n  withFade?: boolean\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialog = ({ onOpenChange, withFade = false, ...props }: AlertDialogProps) => {\n  const cancelRef = useRef<HTMLButtonElement | null>(null)\n\n  const handleOpenChange = onOpenChange\n    ? (open: boolean, _eventDetails: unknown) => {\n        onOpenChange(open)\n      }\n    : undefined\n\n  return (\n    <AlertDialogProvider withFade={withFade} cancelRef={cancelRef}>\n      <BaseAlertDialog.Root\n        data-spark-component=\"alert-dialog\"\n        onOpenChange={handleOpenChange}\n        {...props}\n      />\n    </AlertDialogProvider>\n  )\n}\n\nAlertDialog.displayName = 'AlertDialog'\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n  const Component = asChild ? Slot : defaultTag\n\n  return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogActionProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Close>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogAction = ({ asChild = false, ...props }: AlertDialogActionProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Close\n      data-spark-component=\"alert-dialog-action\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogAction.displayName = 'AlertDialog.Action'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref, useRef } from 'react'\n\nimport { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogBodyProps {\n  children: ReactNode\n  className?: string\n  tabIndex?: number\n  ref?: Ref<HTMLDivElement>\n  inset?: boolean\n}\n\nexport const AlertDialogBody = ({\n  children,\n  className,\n  inset = false,\n  ref: forwardedRef,\n  ...rest\n}: AlertDialogBodyProps): ReactElement => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n  const { withFade } = useAlertDialog()\n  const { overflow } = useScrollOverflow(scrollAreaRef)\n\n  return (\n    <div\n      data-spark-component=\"alert-dialog-body\"\n      ref={ref}\n      className={cx(\n        'focus-visible:u-outline relative grow overflow-y-auto outline-hidden',\n        'transition-all duration-300',\n        {\n          ['px-xl py-lg']: !inset,\n        },\n        className\n      )}\n      style={{\n        ...(withFade && {\n          maskImage:\n            'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n          maskSize: `100% calc(100% + ${overflow.top ? '0px' : '44px'} + ${overflow.bottom ? '0px' : '44px'})`,\n          maskPosition: `0 ${overflow.top ? '0px' : '-44px'}`,\n        }),\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nAlertDialogBody.displayName = 'AlertDialog.Body'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useAlertDialog } from './AlertDialogContext'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogCancelProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Close>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogCancel = ({\n  asChild = false,\n  ref: forwardedRef,\n  ...props\n}: AlertDialogCancelProps) => {\n  const { cancelRef } = useAlertDialog()\n  const ref = useMergeRefs(forwardedRef, cancelRef)\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Close\n      ref={ref}\n      data-spark-component=\"alert-dialog-cancel\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogCancel.displayName = 'AlertDialog.Cancel'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { dialogContentStyles } from '../dialog/DialogContent.styles'\nimport { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogContentProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Popup>, 'render'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogContent = ({\n  className,\n  ref,\n  initialFocus,\n  ...others\n}: AlertDialogContentProps) => {\n  const { cancelRef } = useAlertDialog()\n\n  // Default: focus the cancel button when dialog opens\n  // Users can override by passing their own initialFocus prop (RefObject, false, true, or function)\n  const handleInitialFocus = initialFocus !== undefined ? initialFocus : () => cancelRef.current\n\n  return (\n    <BaseAlertDialog.Popup\n      ref={ref}\n      data-spark-component=\"alert-dialog-content\"\n      role=\"alertdialog\"\n      className={state =>\n        cx(\n          dialogContentStyles({ size: 'md', isNarrow: true }),\n          'min-w-sz-288',\n          // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n          // Transition with opacity and scale for smooth open/close animations\n          'transition-all duration-150',\n          'data-starting-style:scale-90 data-starting-style:opacity-0',\n          'data-ending-style:scale-90 data-ending-style:opacity-0',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      initialFocus={handleInitialFocus}\n      {...others}\n    />\n  )\n}\n\nAlertDialogContent.displayName = 'AlertDialog.Content'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogDescriptionProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Description>, 'render'> {\n  ref?: Ref<HTMLParagraphElement>\n}\n\nexport const AlertDialogDescription = (props: AlertDialogDescriptionProps) => {\n  return <BaseAlertDialog.Description data-spark-component=\"alert-dialog-description\" {...props} />\n}\n\nAlertDialogDescription.displayName = 'AlertDialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogFooterProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogFooter = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: AlertDialogFooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"alert-dialog-footer\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </footer>\n)\n\nAlertDialogFooter.displayName = 'AlertDialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogHeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogHeader = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: AlertDialogHeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"alert-dialog-header\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nAlertDialogHeader.displayName = 'AlertDialog.Header'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogOverlayProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Backdrop>, 'render'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogOverlay = ({ className, ...props }: AlertDialogOverlayProps) => {\n  return (\n    <BaseAlertDialog.Backdrop\n      data-spark-component=\"alert-dialog-overlay\"\n      className={state =>\n        cx(\n          'z-overlay fixed top-0 left-0 h-screen w-screen',\n          'bg-overlay/dim-1',\n          // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n          'data-starting-style:animate-fade-in',\n          'data-ending-style:animate-fade-out',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      {...props}\n    />\n  )\n}\n\nAlertDialogOverlay.displayName = 'AlertDialog.Overlay'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type AlertDialogPortalProps = ComponentProps<typeof BaseAlertDialog.Portal>\n\nexport const AlertDialogPortal = ({ className, ...props }: AlertDialogPortalProps) => {\n  return (\n    <BaseAlertDialog.Portal\n      data-spark-component=\"alert-dialog-portal\"\n      className={cx(className, 'z-modal absolute')}\n      {...props}\n    />\n  )\n}\n\nAlertDialogPortal.displayName = 'AlertDialog.Portal'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogTitleProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Title>, 'render'> {\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const AlertDialogTitle = ({ className, ...props }: AlertDialogTitleProps) => {\n  return (\n    <BaseAlertDialog.Title\n      data-spark-component=\"alert-dialog-title\"\n      className={cx('text-headline-1 text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nAlertDialogTitle.displayName = 'AlertDialog.Title'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogTriggerProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Trigger>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogTrigger = ({ asChild = false, ...props }: AlertDialogTriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Trigger\n      data-spark-component=\"alert-dialog-trigger\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogTrigger.displayName = 'AlertDialog.Trigger'\n","import { AlertDialog as Root } from './AlertDialog'\nimport { AlertDialogAction } from './AlertDialogAction'\nimport { AlertDialogBody } from './AlertDialogBody'\nimport { AlertDialogCancel } from './AlertDialogCancel'\nimport { AlertDialogContent } from './AlertDialogContent'\nimport { AlertDialogDescription } from './AlertDialogDescription'\nimport { AlertDialogFooter } from './AlertDialogFooter'\nimport { AlertDialogHeader } from './AlertDialogHeader'\nimport { AlertDialogOverlay } from './AlertDialogOverlay'\nimport { AlertDialogPortal } from './AlertDialogPortal'\nimport { AlertDialogTitle } from './AlertDialogTitle'\nimport { AlertDialogTrigger } from './AlertDialogTrigger'\n\nexport * from './AlertDialog'\nexport { useAlertDialog } from './AlertDialogContext'\nexport { type AlertDialogActionProps } from './AlertDialogAction'\nexport { type AlertDialogBodyProps } from './AlertDialogBody'\nexport { type AlertDialogCancelProps } from './AlertDialogCancel'\nexport { type AlertDialogContentProps } from './AlertDialogContent'\nexport { type AlertDialogDescriptionProps } from './AlertDialogDescription'\nexport { type AlertDialogFooterProps } from './AlertDialogFooter'\nexport { type AlertDialogHeaderProps } from './AlertDialogHeader'\nexport { type AlertDialogOverlayProps } from './AlertDialogOverlay'\nexport { type AlertDialogPortalProps } from './AlertDialogPortal'\nexport { type AlertDialogTitleProps } from './AlertDialogTitle'\nexport { type AlertDialogTriggerProps } from './AlertDialogTrigger'\n\nexport const AlertDialog: typeof Root & {\n  Action: typeof AlertDialogAction\n  Body: typeof AlertDialogBody\n  Cancel: typeof AlertDialogCancel\n  Content: typeof AlertDialogContent\n  Description: typeof AlertDialogDescription\n  Footer: typeof AlertDialogFooter\n  Header: typeof AlertDialogHeader\n  Overlay: typeof AlertDialogOverlay\n  Portal: typeof AlertDialogPortal\n  Title: typeof AlertDialogTitle\n  Trigger: typeof AlertDialogTrigger\n} = Object.assign(Root, {\n  Action: AlertDialogAction,\n  Body: AlertDialogBody,\n  Cancel: AlertDialogCancel,\n  Content: AlertDialogContent,\n  Description: AlertDialogDescription,\n  Footer: AlertDialogFooter,\n  Header: AlertDialogHeader,\n  Overlay: AlertDialogOverlay,\n  Portal: AlertDialogPortal,\n  Title: AlertDialogTitle,\n  Trigger: AlertDialogTrigger,\n})\n\nAlertDialog.displayName = 'AlertDialog'\nAlertDialog.Action.displayName = 'AlertDialog.Action'\nAlertDialog.Body.displayName = 'AlertDialog.Body'\nAlertDialog.Cancel.displayName = 'AlertDialog.Cancel'\nAlertDialog.Content.displayName = 'AlertDialog.Content'\nAlertDialog.Description.displayName = 'AlertDialog.Description'\nAlertDialog.Footer.displayName = 'AlertDialog.Footer'\nAlertDialog.Header.displayName = 'AlertDialog.Header'\nAlertDialog.Overlay.displayName = 'AlertDialog.Overlay'\nAlertDialog.Portal.displayName = 'AlertDialog.Portal'\nAlertDialog.Title.displayName = 'AlertDialog.Title'\nAlertDialog.Trigger.displayName = 'AlertDialog.Trigger'\n"],"names":["AlertDialogContext","createContext","AlertDialogProvider","children","withFade","cancelRef","jsx","useAlertDialog","context","useContext","AlertDialog","onOpenChange","props","useRef","handleOpenChange","open","_eventDetails","BaseAlertDialog","useRenderSlot","asChild","defaultTag","Component","Slot","AlertDialogAction","renderSlot","AlertDialogBody","className","inset","forwardedRef","rest","scrollAreaRef","ref","useMergeRefs","overflow","useScrollOverflow","cx","AlertDialogCancel","AlertDialogContent","initialFocus","others","handleInitialFocus","state","dialogContentStyles","AlertDialogDescription","AlertDialogFooter","AlertDialogHeader","AlertDialogOverlay","AlertDialogPortal","AlertDialogTitle","AlertDialogTrigger","Root"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/alert-dialog/AlertDialogContext.tsx","../../src/alert-dialog/AlertDialog.tsx","../../src/alert-dialog/useRenderSlot.tsx","../../src/alert-dialog/AlertDialogAction.tsx","../../src/alert-dialog/AlertDialogBody.tsx","../../src/alert-dialog/AlertDialogCancel.tsx","../../src/alert-dialog/AlertDialogContent.tsx","../../src/alert-dialog/AlertDialogDescription.tsx","../../src/alert-dialog/AlertDialogFooter.tsx","../../src/alert-dialog/AlertDialogHeader.tsx","../../src/alert-dialog/AlertDialogOverlay.tsx","../../src/alert-dialog/AlertDialogPortal.tsx","../../src/alert-dialog/AlertDialogTitle.tsx","../../src/alert-dialog/AlertDialogTrigger.tsx","../../src/alert-dialog/index.ts"],"sourcesContent":["import { createContext, MutableRefObject, type ReactNode, useContext } from 'react'\n\nexport interface AlertDialogContextValue {\n  cancelRef: MutableRefObject<HTMLButtonElement | null>\n  withFade: boolean\n}\n\nexport const AlertDialogContext = createContext<AlertDialogContextValue | null>(null)\n\nexport const AlertDialogProvider = ({\n  children,\n  withFade = false,\n  cancelRef,\n}: {\n  children: ReactNode\n  withFade?: boolean\n  cancelRef: MutableRefObject<HTMLButtonElement | null>\n}) => {\n  return (\n    <AlertDialogContext.Provider\n      value={{\n        cancelRef,\n        withFade,\n      }}\n    >\n      {children}\n    </AlertDialogContext.Provider>\n  )\n}\n\nexport const useAlertDialog = () => {\n  const context = useContext(AlertDialogContext)\n\n  if (!context) {\n    throw Error('useAlertDialog must be used within an AlertDialog provider')\n  }\n\n  return context\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref, useRef } from 'react'\n\nimport { AlertDialogProvider } from './AlertDialogContext'\n\nexport interface AlertDialogProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Root>, 'onOpenChange' | 'render'> {\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: boolean\n  /**\n   * Default open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).\n   */\n  withFade?: boolean\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialog = ({ onOpenChange, withFade = false, ...props }: AlertDialogProps) => {\n  const cancelRef = useRef<HTMLButtonElement | null>(null)\n\n  const handleOpenChange = onOpenChange\n    ? (open: boolean, _eventDetails: unknown) => {\n        onOpenChange(open)\n      }\n    : undefined\n\n  return (\n    <AlertDialogProvider withFade={withFade} cancelRef={cancelRef}>\n      <BaseAlertDialog.Root\n        data-spark-component=\"alert-dialog\"\n        onOpenChange={handleOpenChange}\n        {...props}\n      />\n    </AlertDialogProvider>\n  )\n}\n\nAlertDialog.displayName = 'AlertDialog'\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n  const Component = asChild ? Slot : defaultTag\n\n  return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogActionProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Close>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogAction = ({ asChild = false, ...props }: AlertDialogActionProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Close\n      data-spark-component=\"alert-dialog-action\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogAction.displayName = 'AlertDialog.Action'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref, useRef } from 'react'\n\nimport { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogBodyProps {\n  children: ReactNode\n  className?: string\n  tabIndex?: number\n  ref?: Ref<HTMLDivElement>\n  inset?: boolean\n}\n\nexport const AlertDialogBody = ({\n  children,\n  className,\n  inset = false,\n  ref: forwardedRef,\n  ...rest\n}: AlertDialogBodyProps): ReactElement => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n  const { withFade } = useAlertDialog()\n  const { overflow } = useScrollOverflow(scrollAreaRef)\n\n  return (\n    <div\n      data-spark-component=\"alert-dialog-body\"\n      ref={ref}\n      className={cx(\n        'focus-visible:u-outline relative grow overflow-y-auto outline-hidden',\n        'transition-all duration-300',\n        {\n          ['px-xl py-lg']: !inset,\n        },\n        className\n      )}\n      style={{\n        ...(withFade && {\n          maskImage:\n            'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n          maskSize: `100% calc(100% + ${overflow.top ? '0px' : '44px'} + ${overflow.bottom ? '0px' : '44px'})`,\n          maskPosition: `0 ${overflow.top ? '0px' : '-44px'}`,\n        }),\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nAlertDialogBody.displayName = 'AlertDialog.Body'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useAlertDialog } from './AlertDialogContext'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogCancelProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Close>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogCancel = ({\n  asChild = false,\n  ref: forwardedRef,\n  ...props\n}: AlertDialogCancelProps) => {\n  const { cancelRef } = useAlertDialog()\n  const ref = useMergeRefs(forwardedRef, cancelRef)\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Close\n      ref={ref}\n      data-spark-component=\"alert-dialog-cancel\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogCancel.displayName = 'AlertDialog.Cancel'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { dialogContentStyles } from '../dialog/DialogContent.styles'\nimport { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogContentProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Popup>, 'render'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogContent = ({\n  className,\n  ref,\n  initialFocus,\n  ...others\n}: AlertDialogContentProps) => {\n  const { cancelRef } = useAlertDialog()\n\n  // Default: focus the cancel button when dialog opens\n  // Users can override by passing their own initialFocus prop (RefObject, false, true, or function)\n  const handleInitialFocus = initialFocus !== undefined ? initialFocus : () => cancelRef.current\n\n  return (\n    <BaseAlertDialog.Popup\n      ref={ref}\n      data-spark-component=\"alert-dialog-content\"\n      role=\"alertdialog\"\n      className={state =>\n        cx(\n          dialogContentStyles({ size: 'md', isNarrow: true }),\n          'min-w-[min(288px,calc(100vw-2rem))]',\n          // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n          // Transition with opacity and scale for smooth open/close animations\n          'transition-all duration-150',\n          'data-starting-style:scale-90 data-starting-style:opacity-0',\n          'data-ending-style:scale-90 data-ending-style:opacity-0',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      initialFocus={handleInitialFocus}\n      {...others}\n    />\n  )\n}\n\nAlertDialogContent.displayName = 'AlertDialog.Content'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogDescriptionProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Description>, 'render'> {\n  ref?: Ref<HTMLParagraphElement>\n}\n\nexport const AlertDialogDescription = (props: AlertDialogDescriptionProps) => {\n  return <BaseAlertDialog.Description data-spark-component=\"alert-dialog-description\" {...props} />\n}\n\nAlertDialogDescription.displayName = 'AlertDialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogFooterProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogFooter = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: AlertDialogFooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"alert-dialog-footer\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </footer>\n)\n\nAlertDialogFooter.displayName = 'AlertDialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogHeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogHeader = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: AlertDialogHeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"alert-dialog-header\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nAlertDialogHeader.displayName = 'AlertDialog.Header'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogOverlayProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Backdrop>, 'render'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogOverlay = ({ className, ...props }: AlertDialogOverlayProps) => {\n  return (\n    <BaseAlertDialog.Backdrop\n      data-spark-component=\"alert-dialog-overlay\"\n      className={state =>\n        cx(\n          'z-overlay fixed top-0 left-0 h-screen w-screen',\n          'bg-overlay/dim-1',\n          // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n          'data-starting-style:animate-fade-in',\n          'data-ending-style:animate-fade-out',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      {...props}\n    />\n  )\n}\n\nAlertDialogOverlay.displayName = 'AlertDialog.Overlay'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type AlertDialogPortalProps = ComponentProps<typeof BaseAlertDialog.Portal>\n\nexport const AlertDialogPortal = ({ className, ...props }: AlertDialogPortalProps) => {\n  return (\n    <BaseAlertDialog.Portal\n      data-spark-component=\"alert-dialog-portal\"\n      className={cx(className, 'z-modal absolute')}\n      {...props}\n    />\n  )\n}\n\nAlertDialogPortal.displayName = 'AlertDialog.Portal'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogTitleProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Title>, 'render'> {\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const AlertDialogTitle = ({ className, ...props }: AlertDialogTitleProps) => {\n  return (\n    <BaseAlertDialog.Title\n      data-spark-component=\"alert-dialog-title\"\n      className={cx('text-headline-1 text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nAlertDialogTitle.displayName = 'AlertDialog.Title'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogTriggerProps\n  extends Omit<ComponentProps<typeof BaseAlertDialog.Trigger>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogTrigger = ({ asChild = false, ...props }: AlertDialogTriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Trigger\n      data-spark-component=\"alert-dialog-trigger\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogTrigger.displayName = 'AlertDialog.Trigger'\n","import { AlertDialog as Root } from './AlertDialog'\nimport { AlertDialogAction } from './AlertDialogAction'\nimport { AlertDialogBody } from './AlertDialogBody'\nimport { AlertDialogCancel } from './AlertDialogCancel'\nimport { AlertDialogContent } from './AlertDialogContent'\nimport { AlertDialogDescription } from './AlertDialogDescription'\nimport { AlertDialogFooter } from './AlertDialogFooter'\nimport { AlertDialogHeader } from './AlertDialogHeader'\nimport { AlertDialogOverlay } from './AlertDialogOverlay'\nimport { AlertDialogPortal } from './AlertDialogPortal'\nimport { AlertDialogTitle } from './AlertDialogTitle'\nimport { AlertDialogTrigger } from './AlertDialogTrigger'\n\nexport * from './AlertDialog'\nexport { useAlertDialog } from './AlertDialogContext'\nexport { type AlertDialogActionProps } from './AlertDialogAction'\nexport { type AlertDialogBodyProps } from './AlertDialogBody'\nexport { type AlertDialogCancelProps } from './AlertDialogCancel'\nexport { type AlertDialogContentProps } from './AlertDialogContent'\nexport { type AlertDialogDescriptionProps } from './AlertDialogDescription'\nexport { type AlertDialogFooterProps } from './AlertDialogFooter'\nexport { type AlertDialogHeaderProps } from './AlertDialogHeader'\nexport { type AlertDialogOverlayProps } from './AlertDialogOverlay'\nexport { type AlertDialogPortalProps } from './AlertDialogPortal'\nexport { type AlertDialogTitleProps } from './AlertDialogTitle'\nexport { type AlertDialogTriggerProps } from './AlertDialogTrigger'\n\nexport const AlertDialog: typeof Root & {\n  Action: typeof AlertDialogAction\n  Body: typeof AlertDialogBody\n  Cancel: typeof AlertDialogCancel\n  Content: typeof AlertDialogContent\n  Description: typeof AlertDialogDescription\n  Footer: typeof AlertDialogFooter\n  Header: typeof AlertDialogHeader\n  Overlay: typeof AlertDialogOverlay\n  Portal: typeof AlertDialogPortal\n  Title: typeof AlertDialogTitle\n  Trigger: typeof AlertDialogTrigger\n} = Object.assign(Root, {\n  Action: AlertDialogAction,\n  Body: AlertDialogBody,\n  Cancel: AlertDialogCancel,\n  Content: AlertDialogContent,\n  Description: AlertDialogDescription,\n  Footer: AlertDialogFooter,\n  Header: AlertDialogHeader,\n  Overlay: AlertDialogOverlay,\n  Portal: AlertDialogPortal,\n  Title: AlertDialogTitle,\n  Trigger: AlertDialogTrigger,\n})\n\nAlertDialog.displayName = 'AlertDialog'\nAlertDialog.Action.displayName = 'AlertDialog.Action'\nAlertDialog.Body.displayName = 'AlertDialog.Body'\nAlertDialog.Cancel.displayName = 'AlertDialog.Cancel'\nAlertDialog.Content.displayName = 'AlertDialog.Content'\nAlertDialog.Description.displayName = 'AlertDialog.Description'\nAlertDialog.Footer.displayName = 'AlertDialog.Footer'\nAlertDialog.Header.displayName = 'AlertDialog.Header'\nAlertDialog.Overlay.displayName = 'AlertDialog.Overlay'\nAlertDialog.Portal.displayName = 'AlertDialog.Portal'\nAlertDialog.Title.displayName = 'AlertDialog.Title'\nAlertDialog.Trigger.displayName = 'AlertDialog.Trigger'\n"],"names":["AlertDialogContext","createContext","AlertDialogProvider","children","withFade","cancelRef","jsx","useAlertDialog","context","useContext","AlertDialog","onOpenChange","props","useRef","handleOpenChange","open","_eventDetails","BaseAlertDialog","useRenderSlot","asChild","defaultTag","Component","Slot","AlertDialogAction","renderSlot","AlertDialogBody","className","inset","forwardedRef","rest","scrollAreaRef","ref","useMergeRefs","overflow","useScrollOverflow","cx","AlertDialogCancel","AlertDialogContent","initialFocus","others","handleInitialFocus","state","dialogContentStyles","AlertDialogDescription","AlertDialogFooter","AlertDialogHeader","AlertDialogOverlay","AlertDialogPortal","AlertDialogTitle","AlertDialogTrigger","Root"],"mappings":";;;;;;;;AAOO,MAAMA,IAAqBC,EAA8C,IAAI,GAEvEC,IAAsB,CAAC;AAAA,EAClC,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC;AACF,MAMI,gBAAAC;AAAA,EAACN,EAAmB;AAAA,EAAnB;AAAA,IACC,OAAO;AAAA,MACL,WAAAK;AAAA,MACA,UAAAD;AAAA,IAAA;AAAA,IAGD,UAAAD;AAAA,EAAA;AAAA,GAKMI,IAAiB,MAAM;AAClC,QAAMC,IAAUC,EAAWT,CAAkB;AAE7C,MAAI,CAACQ;AACH,UAAM,MAAM,4DAA4D;AAG1E,SAAOA;AACT,GCRaE,IAAc,CAAC,EAAE,cAAAC,GAAc,UAAAP,IAAW,IAAO,GAAGQ,QAA8B;AAC7F,QAAMP,IAAYQ,EAAiC,IAAI,GAEjDC,IAAmBH,IACrB,CAACI,GAAeC,MAA2B;AACzC,IAAAL,EAAaI,CAAI;AAAA,EACnB,IACA;AAEJ,SACE,gBAAAT,EAACJ,GAAA,EAAoB,UAAAE,GAAoB,WAAAC,GACvC,UAAA,gBAAAC;AAAA,IAACW,EAAgB;AAAA,IAAhB;AAAA,MACC,wBAAqB;AAAA,MACrB,cAAcH;AAAA,MACb,GAAGF;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;AAEAF,EAAY,cAAc;AChDnB,SAASQ,EAAcC,GAAkBC,GAAoB;AAClE,QAAMC,IAAYF,IAAUG,IAAOF;AAEnC,SAAOD,IAAU,CAAC,EAAE,GAAGP,EAAA,MAAY,gBAAAN,EAACe,GAAA,EAAW,GAAGT,EAAA,CAAO,IAAK;AAChE;ACQO,MAAMW,IAAoB,CAAC,EAAE,SAAAJ,IAAU,IAAO,GAAGP,QAAoC;AAC1F,QAAMY,IAAaN,EAAcC,GAAS,QAAQ;AAElD,SACE,gBAAAb;AAAA,IAACW,EAAgB;AAAA,IAAhB;AAAA,MACC,wBAAqB;AAAA,MACrB,QAAQO;AAAA,MACP,GAAGZ;AAAA,IAAA;AAAA,EAAA;AAGV;AAEAW,EAAkB,cAAc;ACXzB,MAAME,IAAkB,CAAC;AAAA,EAC9B,UAAAtB;AAAA,EACA,WAAAuB;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,KAAKC;AAAA,EACL,GAAGC;AACL,MAA0C;AACxC,QAAMC,IAAgBjB,EAAuB,IAAI,GAC3CkB,IAAMC,EAAaJ,GAAcE,CAAa,GAE9C,EAAE,UAAA1B,EAAA,IAAaG,EAAA,GACf,EAAE,UAAA0B,EAAA,IAAaC,EAAkBJ,CAAa;AAEpD,SACE,gBAAAxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,KAAAyB;AAAA,MACA,WAAWI;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,UACG,eAAgB,CAACR;AAAA,QAAA;AAAA,QAEpBD;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,GAAItB,KAAY;AAAA,UACd,WACE;AAAA,UACF,UAAU,oBAAoB6B,EAAS,MAAM,QAAQ,MAAM,MAAMA,EAAS,SAAS,QAAQ,MAAM;AAAA,UACjG,cAAc,KAAKA,EAAS,MAAM,QAAQ,OAAO;AAAA,QAAA;AAAA,MACnD;AAAA,MAED,GAAGJ;AAAA,MAEH,UAAA1B;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAsB,EAAgB,cAAc;ACvCvB,MAAMW,IAAoB,CAAC;AAAA,EAChC,SAAAjB,IAAU;AAAA,EACV,KAAKS;AAAA,EACL,GAAGhB;AACL,MAA8B;AAC5B,QAAM,EAAE,WAAAP,EAAA,IAAcE,EAAA,GAChBwB,IAAMC,EAAaJ,GAAcvB,CAAS,GAC1CmB,IAAaN,EAAcC,GAAS,QAAQ;AAElD,SACE,gBAAAb;AAAA,IAACW,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAc;AAAA,MACA,wBAAqB;AAAA,MACrB,QAAQP;AAAA,MACP,GAAGZ;AAAA,IAAA;AAAA,EAAA;AAGV;AAEAwB,EAAkB,cAAc;ACvBzB,MAAMC,IAAqB,CAAC;AAAA,EACjC,WAAAX;AAAA,EACA,KAAAK;AAAA,EACA,cAAAO;AAAA,EACA,GAAGC;AACL,MAA+B;AAC7B,QAAM,EAAE,WAAAlC,EAAA,IAAcE,EAAA,GAIhBiC,IAAqBF,MAAiB,SAAYA,IAAe,MAAMjC,EAAU;AAEvF,SACE,gBAAAC;AAAA,IAACW,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAc;AAAA,MACA,wBAAqB;AAAA,MACrB,MAAK;AAAA,MACL,WAAW,CAAAU,MACTN;AAAA,QACEO,EAAoB,EAAE,MAAM,MAAM,UAAU,IAAM;AAAA,QAClD;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAOhB,KAAc,aAAaA,EAAUe,CAAK,IAAIf;AAAA,MAAA;AAAA,MAGzD,cAAcc;AAAA,MACb,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGV;AAEAF,EAAmB,cAAc;ACvC1B,MAAMM,IAAyB,CAAC/B,wBAC7BK,EAAgB,aAAhB,EAA4B,wBAAqB,4BAA4B,GAAGL,GAAO;AAGjG+B,EAAuB,cAAc;ACH9B,MAAMC,IAAoB,CAAC;AAAA,EAChC,UAAAzC;AAAA,EACA,WAAAuB;AAAA,EACA,KAAAK;AAAA,EACA,GAAGF;AACL,MACE,gBAAAvB;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,wBAAqB;AAAA,IACrB,KAAAyB;AAAA,IACA,WAAWI,EAAGT,GAAW,CAAC,SAAS,OAAO,CAAC;AAAA,IAC1C,GAAGG;AAAA,IAEH,UAAA1B;AAAA,EAAA;AACH;AAGFyC,EAAkB,cAAc;AChBzB,MAAMC,IAAoB,CAAC;AAAA,EAChC,UAAA1C;AAAA,EACA,WAAAuB;AAAA,EACA,KAAAK;AAAA,EACA,GAAGF;AACL,MACE,gBAAAvB;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,wBAAqB;AAAA,IACrB,KAAAyB;AAAA,IACA,WAAWI,EAAGT,GAAW,CAAC,SAAS,OAAO,CAAC;AAAA,IAC1C,GAAGG;AAAA,IAEH,UAAA1B;AAAA,EAAA;AACH;AAGF0C,EAAkB,cAAc;AChBzB,MAAMC,IAAqB,CAAC,EAAE,WAAApB,GAAW,GAAGd,QAE/C,gBAAAN;AAAA,EAACW,EAAgB;AAAA,EAAhB;AAAA,IACC,wBAAqB;AAAA,IACrB,WAAW,CAAAwB,MACTN;AAAA,MACE;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,MACA;AAAA,MACA,OAAOT,KAAc,aAAaA,EAAUe,CAAK,IAAIf;AAAA,IAAA;AAAA,IAGxD,GAAGd;AAAA,EAAA;AAAA;AAKVkC,EAAmB,cAAc;ACtB1B,MAAMC,IAAoB,CAAC,EAAE,WAAArB,GAAW,GAAGd,QAE9C,gBAAAN;AAAA,EAACW,EAAgB;AAAA,EAAhB;AAAA,IACC,wBAAqB;AAAA,IACrB,WAAWkB,EAAGT,GAAW,kBAAkB;AAAA,IAC1C,GAAGd;AAAA,EAAA;AAAA;AAKVmC,EAAkB,cAAc;ACPzB,MAAMC,IAAmB,CAAC,EAAE,WAAAtB,GAAW,GAAGd,QAE7C,gBAAAN;AAAA,EAACW,EAAgB;AAAA,EAAhB;AAAA,IACC,wBAAqB;AAAA,IACrB,WAAWkB,EAAG,mCAAmCT,CAAS;AAAA,IACzD,GAAGd;AAAA,EAAA;AAAA;AAKVoC,EAAiB,cAAc;ACLxB,MAAMC,IAAqB,CAAC,EAAE,SAAA9B,IAAU,IAAO,GAAGP,QAAqC;AAC5F,QAAMY,IAAaN,EAAcC,GAAS,QAAQ;AAElD,SACE,gBAAAb;AAAA,IAACW,EAAgB;AAAA,IAAhB;AAAA,MACC,wBAAqB;AAAA,MACrB,QAAQO;AAAA,MACP,GAAGZ;AAAA,IAAA;AAAA,EAAA;AAGV;AAEAqC,EAAmB,cAAc;ACC1B,MAAMvC,IAYT,OAAO,OAAOwC,GAAM;AAAA,EACtB,QAAQ3B;AAAA,EACR,MAAME;AAAA,EACN,QAAQW;AAAA,EACR,SAASC;AAAA,EACT,aAAaM;AAAA,EACb,QAAQC;AAAA,EACR,QAAQC;AAAA,EACR,SAASC;AAAA,EACT,QAAQC;AAAA,EACR,OAAOC;AAAA,EACP,SAASC;AACX,CAAC;AAEDvC,EAAY,cAAc;AAC1BA,EAAY,OAAO,cAAc;AACjCA,EAAY,KAAK,cAAc;AAC/BA,EAAY,OAAO,cAAc;AACjCA,EAAY,QAAQ,cAAc;AAClCA,EAAY,YAAY,cAAc;AACtCA,EAAY,OAAO,cAAc;AACjCA,EAAY,OAAO,cAAc;AACjCA,EAAY,QAAQ,cAAc;AAClCA,EAAY,OAAO,cAAc;AACjCA,EAAY,MAAM,cAAc;AAChCA,EAAY,QAAQ,cAAc;"}

package/dist/dialog/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("@base-ui/react/dialog"),d=require("react"),w=require("@spark-ui/hooks/use-merge-refs"),B=require("@spark-ui/hooks/use-scroll-overflow"),n=require("class-variance-authority"),p=require("../useRenderSlot-DATwjgpo.js"),O=require("@spark-ui/icons/Close"),P=require("../Icon-CF0W0LKr.js"),I=require("../IconButton-D3g86WpZ.js"),T=require("../DialogContent.styles-bBs6l8Cy.js"),x=d.createContext(null),F=({children:e,withFade:o=!1})=>{const[t,s]=d.useState(!1);return a.jsx(x.Provider,{value:{isFullScreen:t,setIsFullScreen:s,withFade:o},children:e})},m=()=>{const e=d.useContext(x);if(!e)throw Error("useDialog must be used within a Dialog provider");return e},f=({withFade:e=!1,onOpenChange:o,...t})=>{const s=o?(i,l)=>{o(i)}:void 0;return a.jsx(F,{withFade:e,children:a.jsx(r.Dialog.Root,{"data-spark-component":"dialog",onOpenChange:s,...t})})};f.displayName="Dialog.Root";const y=({children:e,className:o,inset:t=!1,ref:s,...i})=>{const l=d.useRef(null),c=w.useMergeRefs(s,l),{withFade:g}=m(),{overflow:u}=B.useScrollOverflow(l);return a.jsx("div",{"data-spark-component":"dialog-body",ref:c,className:n.cx("focus-visible:u-outline relative grow overflow-y-auto outline-hidden","transition-all duration-300",{"px-xl py-lg":!t},o),style:{...g&&{maskImage:"linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",maskSize:`100% calc(100% + ${u.top?"0px":"44px"} + ${u.bottom?"0px":"44px"})`,maskPosition:`0 ${u.top?"0px":"-44px"}`}},...i,children:e})};y.displayName="Dialog.Body";const D=({asChild:e=!1,...o})=>{const t=p.useRenderSlot(e,"button");return a.jsx(r.Dialog.Close,{"data-spark-component":"dialog-close",render:t,...o})},b=({"aria-label":e,className:o,size:t="md",intent:s="neutral",design:i="ghost",children:l=a.jsx(O.Close,{}),ref:c,...g})=>a.jsx(D,{"data-spark-component":"dialog-close-button","data-part":"close",ref:c,className:n.cx(["absolute","top-md","right-xl"],o),asChild:!0,...g,children:a.jsx(I.IconButton,{intent:s,size:t,design:i,"aria-label":e,children:a.jsx(P.Icon,{children:l})})}),$=Object.assign(b,{id:"CloseButton"});b.displayName="Dialog.CloseButton";const j=({className:e,isNarrow:o=!1,size:t="md",ref:s,...i})=>{const{setIsFullScreen:l}=m();return d.useEffect(()=>(t==="fullscreen"&&l(!0),()=>l(!1)),[l,t]),a.jsx(r.Dialog.Popup,{ref:s,"data-spark-component":"dialog-content",role:"dialog",className:c=>n.cx(T.dialogContentStyles({isNarrow:o,size:t,className:typeof e=="function"?e(c):e})),...i})};j.displayName="Dialog.Content";const h=e=>a.jsx(r.Dialog.Description,{"data-spark-component":"dialog-description",...e});h.displayName="Dialog.Description";const v=({children:e,className:o,ref:t,...s})=>a.jsx("footer",{"data-spark-component":"dialog-footer",ref:t,className:n.cx(o,["px-xl","py-lg"]),...s,children:e});v.displayName="Dialog.Footer";const N=({children:e,className:o,ref:t,...s})=>a.jsx("header",{"data-spark-component":"dialog-header",ref:t,className:n.cx(o,["px-xl","py-lg"]),...s,children:e});N.displayName="Dialog.Header";const k=({className:e,...o})=>a.jsx(r.Dialog.Backdrop,{"data-spark-component":"dialog-overlay",className:t=>n.cx("z-overlay size-screen fixed inset-0","bg-overlay/dim-1","data-starting-style:animate-fade-in","data-ending-style:animate-fade-out",typeof e=="function"?e(t):e),...o});k.displayName="Dialog.Overlay";const C=({className:e,...o})=>a.jsx(r.Dialog.Portal,{"data-spark-component":"dialog-portal",className:n.cx(e,"z-modal absolute"),...o});C.displayName="Dialog.Portal";const S=({className:e,ref:o,...t})=>a.jsx(r.Dialog.Title,{"data-spark-component":"dialog-title",ref:o,className:n.cx("text-headline-1 text-on-surface","group-has-data-[part=close]:pr-3xl",e),...t});S.displayName="Dialog.Title";const R=({asChild:e=!1,...o})=>{const t=p.useRenderSlot(e,"button");return a.jsx(r.Dialog.Trigger,{"data-spark-component":"dialog-trigger",render:t,...o})};R.displayName="Dialog.Trigger";const q=Object.assign(f,{Trigger:R,Portal:C,Overlay:k,Content:j,Header:N,Body:y,Footer:v,Close:D,CloseButton:$,Title:S,Description:h});q.displayName="Dialog";exports.Dialog=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("@base-ui/react/dialog"),d=require("react"),w=require("@spark-ui/hooks/use-merge-refs"),B=require("@spark-ui/hooks/use-scroll-overflow"),n=require("class-variance-authority"),p=require("../useRenderSlot-DATwjgpo.js"),O=require("@spark-ui/icons/Close"),P=require("../Icon-CF0W0LKr.js"),I=require("../IconButton-D3g86WpZ.js"),T=require("../DialogContent.styles-CziMQtYr.js"),x=d.createContext(null),F=({children:e,withFade:o=!1})=>{const[t,s]=d.useState(!1);return a.jsx(x.Provider,{value:{isFullScreen:t,setIsFullScreen:s,withFade:o},children:e})},m=()=>{const e=d.useContext(x);if(!e)throw Error("useDialog must be used within a Dialog provider");return e},f=({withFade:e=!1,onOpenChange:o,...t})=>{const s=o?(i,l)=>{o(i)}:void 0;return a.jsx(F,{withFade:e,children:a.jsx(r.Dialog.Root,{"data-spark-component":"dialog",onOpenChange:s,...t})})};f.displayName="Dialog.Root";const y=({children:e,className:o,inset:t=!1,ref:s,...i})=>{const l=d.useRef(null),c=w.useMergeRefs(s,l),{withFade:g}=m(),{overflow:u}=B.useScrollOverflow(l);return a.jsx("div",{"data-spark-component":"dialog-body",ref:c,className:n.cx("focus-visible:u-outline relative grow overflow-y-auto outline-hidden","transition-all duration-300",{"px-xl py-lg":!t},o),style:{...g&&{maskImage:"linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",maskSize:`100% calc(100% + ${u.top?"0px":"44px"} + ${u.bottom?"0px":"44px"})`,maskPosition:`0 ${u.top?"0px":"-44px"}`}},...i,children:e})};y.displayName="Dialog.Body";const D=({asChild:e=!1,...o})=>{const t=p.useRenderSlot(e,"button");return a.jsx(r.Dialog.Close,{"data-spark-component":"dialog-close",render:t,...o})},b=({"aria-label":e,className:o,size:t="md",intent:s="neutral",design:i="ghost",children:l=a.jsx(O.Close,{}),ref:c,...g})=>a.jsx(D,{"data-spark-component":"dialog-close-button","data-part":"close",ref:c,className:n.cx(["absolute","top-md","right-xl"],o),asChild:!0,...g,children:a.jsx(I.IconButton,{intent:s,size:t,design:i,"aria-label":e,children:a.jsx(P.Icon,{children:l})})}),$=Object.assign(b,{id:"CloseButton"});b.displayName="Dialog.CloseButton";const j=({className:e,isNarrow:o=!1,size:t="md",ref:s,...i})=>{const{setIsFullScreen:l}=m();return d.useEffect(()=>(t==="fullscreen"&&l(!0),()=>l(!1)),[l,t]),a.jsx(r.Dialog.Popup,{ref:s,"data-spark-component":"dialog-content",role:"dialog",className:c=>n.cx(T.dialogContentStyles({isNarrow:o,size:t,className:typeof e=="function"?e(c):e})),...i})};j.displayName="Dialog.Content";const h=e=>a.jsx(r.Dialog.Description,{"data-spark-component":"dialog-description",...e});h.displayName="Dialog.Description";const v=({children:e,className:o,ref:t,...s})=>a.jsx("footer",{"data-spark-component":"dialog-footer",ref:t,className:n.cx(o,["px-xl","py-lg"]),...s,children:e});v.displayName="Dialog.Footer";const N=({children:e,className:o,ref:t,...s})=>a.jsx("header",{"data-spark-component":"dialog-header",ref:t,className:n.cx(o,["px-xl","py-lg"]),...s,children:e});N.displayName="Dialog.Header";const k=({className:e,...o})=>a.jsx(r.Dialog.Backdrop,{"data-spark-component":"dialog-overlay",className:t=>n.cx("z-overlay size-screen fixed inset-0","bg-overlay/dim-1","data-starting-style:animate-fade-in","data-ending-style:animate-fade-out",typeof e=="function"?e(t):e),...o});k.displayName="Dialog.Overlay";const C=({className:e,...o})=>a.jsx(r.Dialog.Portal,{"data-spark-component":"dialog-portal",className:n.cx(e,"z-modal absolute"),...o});C.displayName="Dialog.Portal";const S=({className:e,ref:o,...t})=>a.jsx(r.Dialog.Title,{"data-spark-component":"dialog-title",ref:o,className:n.cx("text-headline-1 text-on-surface","group-has-data-[part=close]:pr-3xl",e),...t});S.displayName="Dialog.Title";const R=({asChild:e=!1,...o})=>{const t=p.useRenderSlot(e,"button");return a.jsx(r.Dialog.Trigger,{"data-spark-component":"dialog-trigger",render:t,...o})};R.displayName="Dialog.Trigger";const q=Object.assign(f,{Trigger:R,Portal:C,Overlay:k,Content:j,Header:N,Body:y,Footer:v,Close:D,CloseButton:$,Title:S,Description:h});q.displayName="Dialog";exports.Dialog=q;
 //# sourceMappingURL=index.js.map

package/dist/dialog/index.mjs

@@ -8,7 +8,7 @@ import { u as m } from "../useRenderSlot-LwWj8QbC.mjs";
 import { Close as $ } from "@spark-ui/icons/Close";
 import { I as j } from "../Icon-Ck-dhfLd.mjs";
 import { I as z } from "../IconButton-C62-axzv.mjs";
-import { d as E } from "../DialogContent.styles-BSfXHt21.mjs";
+import { d as E } from "../DialogContent.styles-Du7_Dkde.mjs";
 const g = B(null), H = ({
   children: o,
   withFade: e = !1

package/dist/meter/MeterValue.d.ts

@@ -1,7 +1,9 @@
 import { Meter as BaseMeter } from '@base-ui/react/meter';
-import { ComponentProps, PropsWithChildren } from 'react';
-export type MeterValueProps = Omit<ComponentProps<typeof BaseMeter.Value>, 'render'>;
+import { ComponentProps, ReactNode } from 'react';
+export type MeterValueProps = Omit<ComponentProps<typeof BaseMeter.Value>, 'render' | 'children'> & {
+    children?: ((formattedValue: string, value: number) => ReactNode) | null | undefined;
+};
 export declare const MeterValue: {
-    ({ className, children, ...others }: PropsWithChildren<MeterValueProps>): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, ...others }: MeterValueProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/meter/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),f=require("@base-ui/react/meter"),b=require("class-variance-authority"),s=require("react"),N=require("@spark-ui/hooks/use-merge-refs"),x=s.createContext(null),R=":meter",y=()=>{const t=s.useContext(x);if(!t)throw new Error("useMeter must be used within a Meter provider");return t},h=({className:t,value:r,max:a=100,min:n=0,shape:o="rounded",intent:e="support",children:c,ref:i,...u})=>{const[l,d]=s.useState(),v=s.useMemo(()=>({value:r??0,max:a,min:n,intent:e,shape:o,onLabelId:d}),[a,n,r,e,o,d]);return m.jsx(x.Provider,{value:v,children:m.jsx(f.Meter.Root,{"data-spark-component":"meter",ref:i,className:b.cx("gap-y-sm focus-visible:u-outline box-border grid grid-cols-2",t),value:r,max:a,min:n,"aria-labelledby":l,...u,children:c})})};h.displayName="Meter";const p=({id:t,children:r,ref:a,...n})=>{const o=`${R}-label-${s.useId()}`,e=t||o,{onLabelId:c}=y(),i=s.useCallback(l=>{c(l?e:void 0)},[e,c]),u=N.useMergeRefs(a,i);return m.jsx(f.Meter.Label,{"data-spark-component":"meter-label",id:e,className:"default:text-body-1 text-on-surface default:font-bold",ref:u,...n,children:r})};p.displayName="Meter.Label";const I=b.cva(["relative col-span-2","h-sz-8 w-full","transform-gpu overflow-hidden","bg-on-background/dim-4"]),j=b.cva(["size-full","ease-standard transition-[width] duration-700","motion-reduce:transition-none"],{variants:{intent:{main:["bg-main"],support:["bg-support"],success:["bg-success"],alert:["bg-alert"],danger:["bg-error"],info:["bg-info"]},shape:{square:[],rounded:["rounded-sm"]}}});function w(t,r,a={}){const{threshold:n=.1,rootMargin:o}=a,e=s.useRef(!1),c=s.useRef(r);return s.useEffect(()=>{c.current=r},[r]),s.useEffect(()=>{const i=t.current;if(!i||e.current)return;const u=new IntersectionObserver(l=>{l.forEach(d=>{d.isIntersecting&&!e.current&&requestAnimationFrame(()=>{e.current||(e.current=!0,c.current(),u.disconnect())})})},{threshold:n,rootMargin:o});return u.observe(i),()=>{u.disconnect()}},[t,n,o]),e.current}const M=({className:t,...r})=>{const{value:a,max:n,min:o,intent:e,shape:c}=y(),i=(a-o)/(n-o)*100,u=s.useRef(null),[l,d]=s.useState(!1);return w(u,()=>{d(!0)}),m.jsx(f.Meter.Track,{ref:u,"data-spark-component":"meter-track",className:b.cx(I(),{"rounded-sm":c==="rounded"},t),...r,children:m.jsx(f.Meter.Indicator,{"data-spark-component":"meter-indicator",className:j({intent:e,shape:c}),style:{width:l?`${i}%`:"0%"}})})};M.displayName="Meter.Track";const g=({className:t,children:r,...a})=>m.jsx(f.Meter.Value,{"data-spark-component":"meter-value",className:b.cx("default:text-body-1 text-on-surface","col-start-2 text-right",t),...a,children:r});g.displayName="Meter.Value";const k=Object.assign(h,{Label:p,Track:M,Value:g});k.displayName="Meter";p.displayName="Meter.Label";M.displayName="Meter.Track";g.displayName="Meter.Value";exports.Meter=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),f=require("@base-ui/react/meter"),b=require("class-variance-authority"),s=require("react"),N=require("@spark-ui/hooks/use-merge-refs"),x=s.createContext(null),R=":meter",y=()=>{const t=s.useContext(x);if(!t)throw new Error("useMeter must be used within a Meter provider");return t},h=({className:t,value:r,max:a=100,min:n=0,shape:o="rounded",intent:e="support",children:c,ref:i,...u})=>{const[l,d]=s.useState(),v=s.useMemo(()=>({value:r??0,max:a,min:n,intent:e,shape:o,onLabelId:d}),[a,n,r,e,o,d]);return m.jsx(x.Provider,{value:v,children:m.jsx(f.Meter.Root,{"data-spark-component":"meter",ref:i,className:b.cx("gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]",t),value:r,max:a,min:n,"aria-labelledby":l,...u,children:c})})};h.displayName="Meter";const p=({id:t,children:r,ref:a,...n})=>{const o=`${R}-label-${s.useId()}`,e=t||o,{onLabelId:c}=y(),i=s.useCallback(l=>{c(l?e:void 0)},[e,c]),u=N.useMergeRefs(a,i);return m.jsx(f.Meter.Label,{"data-spark-component":"meter-label",id:e,className:"default:text-body-1 text-on-surface default:font-bold",ref:u,...n,children:r})};p.displayName="Meter.Label";const I=b.cva(["relative col-span-2","h-sz-8 w-full","transform-gpu overflow-hidden","bg-on-background/dim-4"]),j=b.cva(["size-full","ease-standard transition-[width] duration-700","motion-reduce:transition-none"],{variants:{intent:{main:["bg-main"],support:["bg-support"],success:["bg-success"],alert:["bg-alert"],danger:["bg-error"],info:["bg-info"]},shape:{square:[],rounded:["rounded-sm"]}}});function w(t,r,a={}){const{threshold:n=.1,rootMargin:o}=a,e=s.useRef(!1),c=s.useRef(r);return s.useEffect(()=>{c.current=r},[r]),s.useEffect(()=>{const i=t.current;if(!i||e.current)return;const u=new IntersectionObserver(l=>{l.forEach(d=>{d.isIntersecting&&!e.current&&requestAnimationFrame(()=>{e.current||(e.current=!0,c.current(),u.disconnect())})})},{threshold:n,rootMargin:o});return u.observe(i),()=>{u.disconnect()}},[t,n,o]),e.current}const M=({className:t,...r})=>{const{value:a,max:n,min:o,intent:e,shape:c}=y(),i=(a-o)/(n-o)*100,u=s.useRef(null),[l,d]=s.useState(!1);return w(u,()=>{d(!0)}),m.jsx(f.Meter.Track,{ref:u,"data-spark-component":"meter-track",className:b.cx(I(),{"rounded-sm":c==="rounded"},t),...r,children:m.jsx(f.Meter.Indicator,{"data-spark-component":"meter-indicator",className:j({intent:e,shape:c}),style:{width:l?`${i}%`:"0%"}})})};M.displayName="Meter.Track";const g=({className:t,children:r,...a})=>m.jsx(f.Meter.Value,{"data-spark-component":"meter-value",className:b.cx("default:text-body-1 text-on-surface","col-start-2 text-right",t),...a,children:r});g.displayName="Meter.Value";const k=Object.assign(h,{Label:p,Track:M,Value:g});k.displayName="Meter";p.displayName="Meter.Label";M.displayName="Meter.Track";g.displayName="Meter.Value";exports.Meter=k;
 //# sourceMappingURL=index.js.map

package/dist/meter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/meter/MeterContext.tsx","../../src/meter/Meter.tsx","../../src/meter/MeterLabel.tsx","../../src/meter/MeterTrack.styles.ts","../../src/meter/useIntersectionAnimation.ts","../../src/meter/MeterTrack.tsx","../../src/meter/MeterValue.tsx","../../src/meter/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  shape: 'square' | 'rounded'\n  onLabelId: (id?: string) => void\n}\n\nexport const MeterContext = createContext<MeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':meter'\n\nexport const useMeter = () => {\n  const context = useContext(MeterContext)\n\n  if (!context) {\n    throw new Error('useMeter must be used within a Meter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterContext } from './MeterContext'\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterProps\n  extends Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'> {\n  /**\n   * Shape of the meter track and indicator.\n   */\n  shape?: 'square' | 'rounded'\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Meter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  shape = 'rounded',\n  intent = 'support',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<MeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n    }\n  }, [max, min, value, intent, shape, setLabelId])\n\n  return (\n    <MeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"meter\"\n        ref={ref}\n        className={cx('gap-y-sm focus-visible:u-outline box-border grid grid-cols-2', className)}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </MeterContext.Provider>\n  )\n}\n\nMeter.displayName = 'Meter'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useMeter } from './MeterContext'\n\nexport type MeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nexport const MeterLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: MeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useMeter()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"meter-label\"\n      id={id}\n      className=\"default:text-body-1 text-on-surface default:font-bold\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nMeterLabel.displayName = 'Meter.Label'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const meterTrackStyles = cva([\n  'relative col-span-2',\n  'h-sz-8 w-full',\n  'transform-gpu overflow-hidden',\n  'bg-on-background/dim-4',\n])\n\nexport type MeterTrackStylesProps = VariantProps<typeof meterTrackStyles>\n\nexport const meterIndicatorStyles = cva(\n  ['size-full', 'ease-standard transition-[width] duration-700', 'motion-reduce:transition-none'],\n  {\n    variants: {\n      /**\n       * Color scheme of the meter component.\n       */\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        danger: ['bg-error'],\n        info: ['bg-info'],\n      },\n      /**\n       * Shape of the meter component.\n       */\n      shape: {\n        square: [],\n        rounded: ['rounded-sm'],\n      },\n    },\n  }\n)\n\nexport type MeterIndicatorStylesProps = VariantProps<typeof meterIndicatorStyles>\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, useRef, useState } from 'react'\n\nimport { useMeter } from './MeterContext'\nimport { meterIndicatorStyles, meterTrackStyles } from './MeterTrack.styles'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nexport type MeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'>\n\nexport const MeterTrack = ({ className, ...others }: MeterTrackProps) => {\n  const { value, max, min, intent, shape } = useMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const trackRef = useRef<HTMLDivElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(trackRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track\n      ref={trackRef}\n      data-spark-component=\"meter-track\"\n      className={cx(meterTrackStyles(), { 'rounded-sm': shape === 'rounded' }, className)}\n      {...others}\n    >\n      <BaseMeter.Indicator\n        data-spark-component=\"meter-indicator\"\n        className={meterIndicatorStyles({ intent, shape })}\n        style={{\n          width: hasAnimated ? `${percentage}%` : '0%',\n        }}\n      />\n    </BaseMeter.Track>\n  )\n}\n\nMeterTrack.displayName = 'Meter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nexport type MeterValueProps = Omit<ComponentProps<typeof BaseMeter.Value>, 'render'>\n\nexport const MeterValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<MeterValueProps>) => {\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"meter-value\"\n      className={cx('default:text-body-1 text-on-surface', 'col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nMeterValue.displayName = 'Meter.Value'\n","import { Meter as Root } from './Meter'\nimport { MeterLabel } from './MeterLabel'\nimport { MeterTrack } from './MeterTrack'\nimport { MeterValue } from './MeterValue'\n\nexport const Meter: typeof Root & {\n  Label: typeof MeterLabel\n  Track: typeof MeterTrack\n  Value: typeof MeterValue\n} = Object.assign(Root, {\n  Label: MeterLabel,\n  Track: MeterTrack,\n  Value: MeterValue,\n})\n\nMeter.displayName = 'Meter'\nMeterLabel.displayName = 'Meter.Label'\nMeterTrack.displayName = 'Meter.Track'\nMeterValue.displayName = 'Meter.Value'\n\nexport { type MeterProps } from './Meter'\nexport { type MeterLabelProps } from './MeterLabel'\nexport { type MeterTrackProps } from './MeterTrack'\nexport { type MeterValueProps } from './MeterValue'\n"],"names":["MeterContext","createContext","ID_PREFIX","useMeter","context","useContext","Meter","className","value","max","min","shape","intent","children","ref","others","labelId","setLabelId","useState","contextValue","useMemo","jsx","BaseMeter","cx","MeterLabel","idProp","forwardedRef","internalID","useId","id","onLabelId","rootRef","useCallback","el","useMergeRefs","meterTrackStyles","cva","meterIndicatorStyles","useIntersectionAnimation","elementRef","onIntersect","options","threshold","rootMargin","hasTriggeredRef","useRef","callbackRef","useEffect","element","observer","entries","entry","MeterTrack","percentage","trackRef","hasAnimated","setHasAnimated","MeterValue","Root"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/meter/MeterContext.tsx","../../src/meter/Meter.tsx","../../src/meter/MeterLabel.tsx","../../src/meter/MeterTrack.styles.ts","../../src/meter/useIntersectionAnimation.ts","../../src/meter/MeterTrack.tsx","../../src/meter/MeterValue.tsx","../../src/meter/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  shape: 'square' | 'rounded'\n  onLabelId: (id?: string) => void\n}\n\nexport const MeterContext = createContext<MeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':meter'\n\nexport const useMeter = () => {\n  const context = useContext(MeterContext)\n\n  if (!context) {\n    throw new Error('useMeter must be used within a Meter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterContext } from './MeterContext'\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterProps\n  extends Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'> {\n  /**\n   * Shape of the meter track and indicator.\n   */\n  shape?: 'square' | 'rounded'\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Meter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  shape = 'rounded',\n  intent = 'support',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<MeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n    }\n  }, [max, min, value, intent, shape, setLabelId])\n\n  return (\n    <MeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"meter\"\n        ref={ref}\n        className={cx(\n          'gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]',\n          className\n        )}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </MeterContext.Provider>\n  )\n}\n\nMeter.displayName = 'Meter'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useMeter } from './MeterContext'\n\nexport type MeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nexport const MeterLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: MeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useMeter()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"meter-label\"\n      id={id}\n      className=\"default:text-body-1 text-on-surface default:font-bold\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nMeterLabel.displayName = 'Meter.Label'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const meterTrackStyles = cva([\n  'relative col-span-2',\n  'h-sz-8 w-full',\n  'transform-gpu overflow-hidden',\n  'bg-on-background/dim-4',\n])\n\nexport type MeterTrackStylesProps = VariantProps<typeof meterTrackStyles>\n\nexport const meterIndicatorStyles = cva(\n  ['size-full', 'ease-standard transition-[width] duration-700', 'motion-reduce:transition-none'],\n  {\n    variants: {\n      /**\n       * Color scheme of the meter component.\n       */\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        danger: ['bg-error'],\n        info: ['bg-info'],\n      },\n      /**\n       * Shape of the meter component.\n       */\n      shape: {\n        square: [],\n        rounded: ['rounded-sm'],\n      },\n    },\n  }\n)\n\nexport type MeterIndicatorStylesProps = VariantProps<typeof meterIndicatorStyles>\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, useRef, useState } from 'react'\n\nimport { useMeter } from './MeterContext'\nimport { meterIndicatorStyles, meterTrackStyles } from './MeterTrack.styles'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nexport type MeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'>\n\nexport const MeterTrack = ({ className, ...others }: MeterTrackProps) => {\n  const { value, max, min, intent, shape } = useMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const trackRef = useRef<HTMLDivElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(trackRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track\n      ref={trackRef}\n      data-spark-component=\"meter-track\"\n      className={cx(meterTrackStyles(), { 'rounded-sm': shape === 'rounded' }, className)}\n      {...others}\n    >\n      <BaseMeter.Indicator\n        data-spark-component=\"meter-indicator\"\n        className={meterIndicatorStyles({ intent, shape })}\n        style={{\n          width: hasAnimated ? `${percentage}%` : '0%',\n        }}\n      />\n    </BaseMeter.Track>\n  )\n}\n\nMeterTrack.displayName = 'Meter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nexport type MeterValueProps = Omit<\n  ComponentProps<typeof BaseMeter.Value>,\n  'render' | 'children'\n> & {\n  children?: ((formattedValue: string, value: number) => ReactNode) | null | undefined\n}\n\nexport const MeterValue = ({ className, children, ...others }: MeterValueProps) => {\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"meter-value\"\n      className={cx('default:text-body-1 text-on-surface', 'col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nMeterValue.displayName = 'Meter.Value'\n","import { Meter as Root } from './Meter'\nimport { MeterLabel } from './MeterLabel'\nimport { MeterTrack } from './MeterTrack'\nimport { MeterValue } from './MeterValue'\n\nexport const Meter: typeof Root & {\n  Label: typeof MeterLabel\n  Track: typeof MeterTrack\n  Value: typeof MeterValue\n} = Object.assign(Root, {\n  Label: MeterLabel,\n  Track: MeterTrack,\n  Value: MeterValue,\n})\n\nMeter.displayName = 'Meter'\nMeterLabel.displayName = 'Meter.Label'\nMeterTrack.displayName = 'Meter.Track'\nMeterValue.displayName = 'Meter.Value'\n\nexport { type MeterProps } from './Meter'\nexport { type MeterLabelProps } from './MeterLabel'\nexport { type MeterTrackProps } from './MeterTrack'\nexport { type MeterValueProps } from './MeterValue'\n"],"names":["MeterContext","createContext","ID_PREFIX","useMeter","context","useContext","Meter","className","value","max","min","shape","intent","children","ref","others","labelId","setLabelId","useState","contextValue","useMemo","jsx","BaseMeter","cx","MeterLabel","idProp","forwardedRef","internalID","useId","id","onLabelId","rootRef","useCallback","el","useMergeRefs","meterTrackStyles","cva","meterIndicatorStyles","useIntersectionAnimation","elementRef","onIntersect","options","threshold","rootMargin","hasTriggeredRef","useRef","callbackRef","useEffect","element","observer","entries","entry","MeterTrack","percentage","trackRef","hasAnimated","setHasAnimated","MeterValue","Root"],"mappings":"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"}

package/dist/meter/index.mjs

@@ -3,8 +3,8 @@ import { Meter as m } from "@base-ui/react/meter";
 import { cx as p, cva as h } from "class-variance-authority";
 import { createContext as w, useContext as L, useState as y, useMemo as R, useId as T, useCallback as V, useRef as f, useEffect as k } from "react";
 import { useMergeRefs as $ } from "@spark-ui/hooks/use-merge-refs";
-const v = w(null), A = ":meter", x = () => {
-  const t = L(v);
+const x = w(null), A = ":meter", v = () => {
+  const t = L(x);
   if (!t)
     throw new Error("useMeter must be used within a Meter provider");
   return t;
@@ -27,12 +27,15 @@ const v = w(null), A = ":meter", x = () => {
     shape: s,
     onLabelId: u
   }), [a, n, r, e, s, u]);
-  return /* @__PURE__ */ d(v.Provider, { value: I, children: /* @__PURE__ */ d(
+  return /* @__PURE__ */ d(x.Provider, { value: I, children: /* @__PURE__ */ d(
     m.Root,
     {
       "data-spark-component": "meter",
       ref: l,
-      className: p("gap-y-sm focus-visible:u-outline box-border grid grid-cols-2", t),
+      className: p(
+        "gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]",
+        t
+      ),
       value: r,
       max: a,
       min: n,
@@ -49,7 +52,7 @@ const b = ({
   ref: a,
   ...n
 }) => {
-  const s = `${A}-label-${T()}`, e = t || s, { onLabelId: o } = x(), l = V(
+  const s = `${A}-label-${T()}`, e = t || s, { onLabelId: o } = v(), l = V(
     (i) => {
       o(i ? e : void 0);
     },
@@ -123,8 +126,8 @@ function S(t, r, a = {}) {
     };
   }, [t, n, s]), e.current;
 }
-const M = ({ className: t, ...r }) => {
-  const { value: a, max: n, min: s, intent: e, shape: o } = x(), l = (a - s) / (n - s) * 100, c = f(null), [i, u] = y(!1);
+const g = ({ className: t, ...r }) => {
+  const { value: a, max: n, min: s, intent: e, shape: o } = v(), l = (a - s) / (n - s) * 100, c = f(null), [i, u] = y(!1);
   return S(c, () => {
     u(!0);
   }), /* @__PURE__ */ d(
@@ -147,12 +150,8 @@ const M = ({ className: t, ...r }) => {
     }
   );
 };
-M.displayName = "Meter.Track";
-const g = ({
-  className: t,
-  children: r,
-  ...a
-}) => /* @__PURE__ */ d(
+g.displayName = "Meter.Track";
+const M = ({ className: t, children: r, ...a }) => /* @__PURE__ */ d(
   m.Value,
   {
     "data-spark-component": "meter-value",
@@ -161,16 +160,16 @@ const g = ({
     children: r
   }
 );
-g.displayName = "Meter.Value";
+M.displayName = "Meter.Value";
 const j = Object.assign(N, {
   Label: b,
-  Track: M,
-  Value: g
+  Track: g,
+  Value: M
 });
 j.displayName = "Meter";
 b.displayName = "Meter.Label";
-M.displayName = "Meter.Track";
-g.displayName = "Meter.Value";
+g.displayName = "Meter.Track";
+M.displayName = "Meter.Value";
 export {
   j as Meter
 };

package/dist/meter/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/meter/MeterContext.tsx","../../src/meter/Meter.tsx","../../src/meter/MeterLabel.tsx","../../src/meter/MeterTrack.styles.ts","../../src/meter/useIntersectionAnimation.ts","../../src/meter/MeterTrack.tsx","../../src/meter/MeterValue.tsx","../../src/meter/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  shape: 'square' | 'rounded'\n  onLabelId: (id?: string) => void\n}\n\nexport const MeterContext = createContext<MeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':meter'\n\nexport const useMeter = () => {\n  const context = useContext(MeterContext)\n\n  if (!context) {\n    throw new Error('useMeter must be used within a Meter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterContext } from './MeterContext'\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterProps\n  extends Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'> {\n  /**\n   * Shape of the meter track and indicator.\n   */\n  shape?: 'square' | 'rounded'\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Meter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  shape = 'rounded',\n  intent = 'support',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<MeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n    }\n  }, [max, min, value, intent, shape, setLabelId])\n\n  return (\n    <MeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"meter\"\n        ref={ref}\n        className={cx('gap-y-sm focus-visible:u-outline box-border grid grid-cols-2', className)}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </MeterContext.Provider>\n  )\n}\n\nMeter.displayName = 'Meter'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useMeter } from './MeterContext'\n\nexport type MeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nexport const MeterLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: MeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useMeter()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"meter-label\"\n      id={id}\n      className=\"default:text-body-1 text-on-surface default:font-bold\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nMeterLabel.displayName = 'Meter.Label'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const meterTrackStyles = cva([\n  'relative col-span-2',\n  'h-sz-8 w-full',\n  'transform-gpu overflow-hidden',\n  'bg-on-background/dim-4',\n])\n\nexport type MeterTrackStylesProps = VariantProps<typeof meterTrackStyles>\n\nexport const meterIndicatorStyles = cva(\n  ['size-full', 'ease-standard transition-[width] duration-700', 'motion-reduce:transition-none'],\n  {\n    variants: {\n      /**\n       * Color scheme of the meter component.\n       */\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        danger: ['bg-error'],\n        info: ['bg-info'],\n      },\n      /**\n       * Shape of the meter component.\n       */\n      shape: {\n        square: [],\n        rounded: ['rounded-sm'],\n      },\n    },\n  }\n)\n\nexport type MeterIndicatorStylesProps = VariantProps<typeof meterIndicatorStyles>\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, useRef, useState } from 'react'\n\nimport { useMeter } from './MeterContext'\nimport { meterIndicatorStyles, meterTrackStyles } from './MeterTrack.styles'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nexport type MeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'>\n\nexport const MeterTrack = ({ className, ...others }: MeterTrackProps) => {\n  const { value, max, min, intent, shape } = useMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const trackRef = useRef<HTMLDivElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(trackRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track\n      ref={trackRef}\n      data-spark-component=\"meter-track\"\n      className={cx(meterTrackStyles(), { 'rounded-sm': shape === 'rounded' }, className)}\n      {...others}\n    >\n      <BaseMeter.Indicator\n        data-spark-component=\"meter-indicator\"\n        className={meterIndicatorStyles({ intent, shape })}\n        style={{\n          width: hasAnimated ? `${percentage}%` : '0%',\n        }}\n      />\n    </BaseMeter.Track>\n  )\n}\n\nMeterTrack.displayName = 'Meter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nexport type MeterValueProps = Omit<ComponentProps<typeof BaseMeter.Value>, 'render'>\n\nexport const MeterValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<MeterValueProps>) => {\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"meter-value\"\n      className={cx('default:text-body-1 text-on-surface', 'col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nMeterValue.displayName = 'Meter.Value'\n","import { Meter as Root } from './Meter'\nimport { MeterLabel } from './MeterLabel'\nimport { MeterTrack } from './MeterTrack'\nimport { MeterValue } from './MeterValue'\n\nexport const Meter: typeof Root & {\n  Label: typeof MeterLabel\n  Track: typeof MeterTrack\n  Value: typeof MeterValue\n} = Object.assign(Root, {\n  Label: MeterLabel,\n  Track: MeterTrack,\n  Value: MeterValue,\n})\n\nMeter.displayName = 'Meter'\nMeterLabel.displayName = 'Meter.Label'\nMeterTrack.displayName = 'Meter.Track'\nMeterValue.displayName = 'Meter.Value'\n\nexport { type MeterProps } from './Meter'\nexport { type MeterLabelProps } from './MeterLabel'\nexport { type MeterTrackProps } from './MeterTrack'\nexport { type MeterValueProps } from './MeterValue'\n"],"names":["MeterContext","createContext","ID_PREFIX","useMeter","context","useContext","Meter","className","value","max","min","shape","intent","children","ref","others","labelId","setLabelId","useState","contextValue","useMemo","jsx","BaseMeter","cx","MeterLabel","idProp","forwardedRef","internalID","useId","id","onLabelId","rootRef","useCallback","el","useMergeRefs","meterTrackStyles","cva","meterIndicatorStyles","useIntersectionAnimation","elementRef","onIntersect","options","threshold","rootMargin","hasTriggeredRef","useRef","callbackRef","useEffect","element","observer","entries","entry","MeterTrack","percentage","trackRef","hasAnimated","setHasAnimated","MeterValue","Root"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/meter/MeterContext.tsx","../../src/meter/Meter.tsx","../../src/meter/MeterLabel.tsx","../../src/meter/MeterTrack.styles.ts","../../src/meter/useIntersectionAnimation.ts","../../src/meter/MeterTrack.tsx","../../src/meter/MeterValue.tsx","../../src/meter/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  shape: 'square' | 'rounded'\n  onLabelId: (id?: string) => void\n}\n\nexport const MeterContext = createContext<MeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':meter'\n\nexport const useMeter = () => {\n  const context = useContext(MeterContext)\n\n  if (!context) {\n    throw new Error('useMeter must be used within a Meter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterContext } from './MeterContext'\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterProps\n  extends Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'> {\n  /**\n   * Shape of the meter track and indicator.\n   */\n  shape?: 'square' | 'rounded'\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Meter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  shape = 'rounded',\n  intent = 'support',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<MeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n    }\n  }, [max, min, value, intent, shape, setLabelId])\n\n  return (\n    <MeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"meter\"\n        ref={ref}\n        className={cx(\n          'gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]',\n          className\n        )}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </MeterContext.Provider>\n  )\n}\n\nMeter.displayName = 'Meter'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useMeter } from './MeterContext'\n\nexport type MeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nexport const MeterLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: MeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useMeter()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"meter-label\"\n      id={id}\n      className=\"default:text-body-1 text-on-surface default:font-bold\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nMeterLabel.displayName = 'Meter.Label'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const meterTrackStyles = cva([\n  'relative col-span-2',\n  'h-sz-8 w-full',\n  'transform-gpu overflow-hidden',\n  'bg-on-background/dim-4',\n])\n\nexport type MeterTrackStylesProps = VariantProps<typeof meterTrackStyles>\n\nexport const meterIndicatorStyles = cva(\n  ['size-full', 'ease-standard transition-[width] duration-700', 'motion-reduce:transition-none'],\n  {\n    variants: {\n      /**\n       * Color scheme of the meter component.\n       */\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        danger: ['bg-error'],\n        info: ['bg-info'],\n      },\n      /**\n       * Shape of the meter component.\n       */\n      shape: {\n        square: [],\n        rounded: ['rounded-sm'],\n      },\n    },\n  }\n)\n\nexport type MeterIndicatorStylesProps = VariantProps<typeof meterIndicatorStyles>\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, useRef, useState } from 'react'\n\nimport { useMeter } from './MeterContext'\nimport { meterIndicatorStyles, meterTrackStyles } from './MeterTrack.styles'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nexport type MeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'>\n\nexport const MeterTrack = ({ className, ...others }: MeterTrackProps) => {\n  const { value, max, min, intent, shape } = useMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const trackRef = useRef<HTMLDivElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(trackRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track\n      ref={trackRef}\n      data-spark-component=\"meter-track\"\n      className={cx(meterTrackStyles(), { 'rounded-sm': shape === 'rounded' }, className)}\n      {...others}\n    >\n      <BaseMeter.Indicator\n        data-spark-component=\"meter-indicator\"\n        className={meterIndicatorStyles({ intent, shape })}\n        style={{\n          width: hasAnimated ? `${percentage}%` : '0%',\n        }}\n      />\n    </BaseMeter.Track>\n  )\n}\n\nMeterTrack.displayName = 'Meter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nexport type MeterValueProps = Omit<\n  ComponentProps<typeof BaseMeter.Value>,\n  'render' | 'children'\n> & {\n  children?: ((formattedValue: string, value: number) => ReactNode) | null | undefined\n}\n\nexport const MeterValue = ({ className, children, ...others }: MeterValueProps) => {\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"meter-value\"\n      className={cx('default:text-body-1 text-on-surface', 'col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nMeterValue.displayName = 'Meter.Value'\n","import { Meter as Root } from './Meter'\nimport { MeterLabel } from './MeterLabel'\nimport { MeterTrack } from './MeterTrack'\nimport { MeterValue } from './MeterValue'\n\nexport const Meter: typeof Root & {\n  Label: typeof MeterLabel\n  Track: typeof MeterTrack\n  Value: typeof MeterValue\n} = Object.assign(Root, {\n  Label: MeterLabel,\n  Track: MeterTrack,\n  Value: MeterValue,\n})\n\nMeter.displayName = 'Meter'\nMeterLabel.displayName = 'Meter.Label'\nMeterTrack.displayName = 'Meter.Track'\nMeterValue.displayName = 'Meter.Value'\n\nexport { type MeterProps } from './Meter'\nexport { type MeterLabelProps } from './MeterLabel'\nexport { type MeterTrackProps } from './MeterTrack'\nexport { type MeterValueProps } from './MeterValue'\n"],"names":["MeterContext","createContext","ID_PREFIX","useMeter","context","useContext","Meter","className","value","max","min","shape","intent","children","ref","others","labelId","setLabelId","useState","contextValue","useMemo","jsx","BaseMeter","cx","MeterLabel","idProp","forwardedRef","internalID","useId","id","onLabelId","rootRef","useCallback","el","useMergeRefs","meterTrackStyles","cva","meterIndicatorStyles","useIntersectionAnimation","elementRef","onIntersect","options","threshold","rootMargin","hasTriggeredRef","useRef","callbackRef","useEffect","element","observer","entries","entry","MeterTrack","percentage","trackRef","hasAnimated","setHasAnimated","MeterValue","Root"],"mappings":"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"}

package/dist/progress/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),g=require("@base-ui/react/progress"),b=require("class-variance-authority"),i=require("react"),L=require("@spark-ui/hooks/use-merge-refs"),I=i.createContext(null),R=":progress",h=()=>{const s=i.useContext(I);if(!s)throw new Error("useProgress must be used within a Progress provider");return s},C=b.cva(["h-full w-full","transition-width duration-400"],{variants:{intent:{basic:["bg-basic"],main:["bg-main"],support:["bg-support"],accent:["bg-accent"],success:["bg-success"],alert:["bg-alert"],danger:["bg-error"],info:["bg-info"],neutral:["bg-neutral"]},shape:{square:[],rounded:["rounded-sm"]}}}),j=({className:s,style:t,ref:r,onTransitionEnd:n,...c})=>{const{value:e,max:a,min:l,intent:u,shape:d,onComplete:p}=h(),f=e!==null?(e-l)/(a-l)*100:0,m=e===null,P=y=>{n?.(y),e!==null&&e>=a&&p&&p()};return o.jsx(g.Progress.Indicator,{"data-spark-component":"progress-indicator",className:b.cx(C({className:s,intent:u,shape:d}),m&&"animate-standalone-indeterminate-bar absolute -translate-x-1/2"),style:{...t,...!m&&e!==null&&{width:`${f}%`}},ref:r,onTransitionEnd:P,...c})};j.displayName="ProgressIndicator";const x=({className:s,...t})=>{const{shape:r}=h();return o.jsx(g.Progress.Track,{"data-spark-component":"progress-track",className:b.cx("h-sz-4 relative col-span-2 w-full","transform-gpu","overflow-hidden","bg-on-background/dim-4",{"rounded-sm":r==="rounded"},s),...t,children:o.jsx(j,{})})};x.displayName="Progress.Track";const T=({className:s,value:t,max:r=100,min:n=0,shape:c="square",intent:e="basic",onComplete:a,getValueLabel:l,getAriaValueText:u,children:d=o.jsx(x,{}),ref:p,...f})=>{const[m,P]=i.useState(),y=i.useMemo(()=>({value:t??null,max:r,min:n,intent:e,shape:c,onLabelId:P,onComplete:a}),[r,n,t,e,c,P,a]),V=u||(l?(q,v)=>v===null?q??"":l(v,r):void 0);return o.jsx(I.Provider,{value:y,children:o.jsx(g.Progress.Root,{"data-spark-component":"progress",ref:p,className:b.cx("gap-sm focus-visible:u-outline grid grid-cols-2",s),value:t??null,max:r,min:n,"aria-labelledby":m,getAriaValueText:V,...f,children:d})})};T.displayName="Progress";const N=({id:s,children:t,ref:r,...n})=>{const c=`${R}-label-${i.useId()}`,e=s||c,{onLabelId:a}=h(),l=i.useCallback(d=>{a(d?e:void 0)},[e,a]),u=L.useMergeRefs(r,l);return o.jsx(g.Progress.Label,{"data-spark-component":"progress-label",id:e,className:"default:text-body-1 text-on-surface default:font-bold",ref:u,...n,children:t})};N.displayName="Progress.Label";const k=({className:s,children:t,...r})=>o.jsx(g.Progress.Value,{"data-spark-component":"progress-value",className:b.cx("default:text-body-1 text-on-surface col-start-2 text-right",s),...r,children:t});k.displayName="Progress.Value";const w=Object.assign(T,{Label:N,Track:x,Value:k});w.displayName="Progress";N.displayName="Progress.Label";x.displayName="Progress.Track";k.displayName="Progress.Value";exports.Progress=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),g=require("@base-ui/react/progress"),b=require("class-variance-authority"),u=require("react"),L=require("@spark-ui/hooks/use-merge-refs"),I=u.createContext(null),R=":progress",h=()=>{const s=u.useContext(I);if(!s)throw new Error("useProgress must be used within a Progress provider");return s},C=b.cva(["h-full w-full","transition-width duration-400"],{variants:{intent:{basic:["bg-basic"],main:["bg-main"],support:["bg-support"],accent:["bg-accent"],success:["bg-success"],alert:["bg-alert"],danger:["bg-error"],info:["bg-info"],neutral:["bg-neutral"]},shape:{square:[],rounded:["rounded-sm"]}}}),j=({className:s,style:t,ref:r,onTransitionEnd:n,...c})=>{const{value:e,max:a,min:l,intent:i,shape:d,onComplete:p}=h(),x=e!==null?(e-l)/(a-l)*100:0,m=e===null,P=y=>{n?.(y),e!==null&&e>=a&&p&&p()};return o.jsx(g.Progress.Indicator,{"data-spark-component":"progress-indicator",className:b.cx(C({className:s,intent:i,shape:d}),m&&"animate-standalone-indeterminate-bar absolute -translate-x-1/2"),style:{...t,...!m&&e!==null&&{width:`${x}%`}},ref:r,onTransitionEnd:P,...c})};j.displayName="ProgressIndicator";const f=({className:s,...t})=>{const{shape:r}=h();return o.jsx(g.Progress.Track,{"data-spark-component":"progress-track",className:b.cx("h-sz-4 relative col-span-2 w-full","transform-gpu","overflow-hidden","bg-on-background/dim-4",{"rounded-sm":r==="rounded"},s),...t,children:o.jsx(j,{})})};f.displayName="Progress.Track";const T=({className:s,value:t,max:r=100,min:n=0,shape:c="square",intent:e="basic",onComplete:a,getValueLabel:l,getAriaValueText:i,children:d=o.jsx(f,{}),ref:p,...x})=>{const[m,P]=u.useState(),y=u.useMemo(()=>({value:t??null,max:r,min:n,intent:e,shape:c,onLabelId:P,onComplete:a}),[r,n,t,e,c,P,a]),V=i||(l?(q,v)=>v===null?q??"":l(v,r):void 0);return o.jsx(I.Provider,{value:y,children:o.jsx(g.Progress.Root,{"data-spark-component":"progress",ref:p,className:b.cx("gap-sm focus-visible:u-outline grid grid-cols-[1fr_auto]",s),value:t??null,max:r,min:n,"aria-labelledby":m,getAriaValueText:V,...x,children:d})})};T.displayName="Progress";const N=({id:s,children:t,ref:r,...n})=>{const c=`${R}-label-${u.useId()}`,e=s||c,{onLabelId:a}=h(),l=u.useCallback(d=>{a(d?e:void 0)},[e,a]),i=L.useMergeRefs(r,l);return o.jsx(g.Progress.Label,{"data-spark-component":"progress-label",id:e,className:"default:text-body-1 text-on-surface default:font-bold",ref:i,...n,children:t})};N.displayName="Progress.Label";const k=({className:s,children:t,...r})=>o.jsx(g.Progress.Value,{"data-spark-component":"progress-value",className:b.cx("default:text-body-1 text-on-surface col-start-2 text-right",s),...r,children:t});k.displayName="Progress.Value";const w=Object.assign(T,{Label:N,Track:f,Value:k});w.displayName="Progress";N.displayName="Progress.Label";f.displayName="Progress.Track";k.displayName="Progress.Value";exports.Progress=w;
 //# sourceMappingURL=index.js.map

package/dist/progress/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/progress/ProgressContext.tsx","../../src/progress/ProgressIndicator.tsx","../../src/progress/ProgressTrack.tsx","../../src/progress/Progress.tsx","../../src/progress/ProgressLabel.tsx","../../src/progress/ProgressValue.tsx","../../src/progress/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\n\nexport interface ProgressContextValue {\n  value: number | null\n  max: number\n  min: number\n  shape: 'square' | 'rounded'\n  intent: ProgressIndicatorStylesProps['intent']\n  onLabelId: (id?: string) => void\n  onComplete?: () => void\n}\n\nexport const ProgressContext = createContext<ProgressContextValue | null>(null)\n\nexport const ID_PREFIX = ':progress'\n\nexport const useProgress = () => {\n  const context = useContext(ProgressContext)\n\n  if (!context) {\n    throw new Error('useProgress must be used within a Progress provider')\n  }\n\n  return context\n}\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cva, cx, VariantProps } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useProgress } from './ProgressContext'\n\nexport const progressIndicatorStyles = cva(['h-full w-full', 'transition-width duration-400'], {\n  variants: {\n    /**\n     * Color scheme of the progress component.\n     */\n    intent: {\n      basic: ['bg-basic'],\n      main: ['bg-main'],\n      support: ['bg-support'],\n      accent: ['bg-accent'],\n      success: ['bg-success'],\n      alert: ['bg-alert'],\n      danger: ['bg-error'],\n      info: ['bg-info'],\n      neutral: ['bg-neutral'],\n    },\n    /**\n     * Shape of the progress component.\n     */\n    shape: {\n      square: [],\n      rounded: ['rounded-sm'],\n    },\n  },\n})\n\nexport type ProgressIndicatorStylesProps = VariantProps<typeof progressIndicatorStyles>\n\nexport type ProgressIndicatorProps = Omit<ComponentProps<typeof BaseProgress.Indicator>, 'render'>\n\nexport const ProgressIndicator = ({\n  className,\n  style,\n  ref,\n  onTransitionEnd,\n  ...others\n}: PropsWithChildren<ProgressIndicatorProps>) => {\n  const { value, max, min, intent, shape, onComplete } = useProgress()\n\n  const percentage = value !== null ? ((value - min) / (max - min)) * 100 : 0\n  const isIndeterminate = value === null\n\n  const handleTransitionEnd = (event: Parameters<NonNullable<ProgressIndicatorProps['onTransitionEnd']>>[0]) => {\n    // Call the original onTransitionEnd if provided\n    onTransitionEnd?.(event)\n\n    // If progress is complete and we have a callback, call it\n    if (value !== null && value >= max && onComplete) {\n      onComplete()\n    }\n  }\n\n  return (\n    <BaseProgress.Indicator\n      data-spark-component=\"progress-indicator\"\n      className={cx(\n        progressIndicatorStyles({\n          className,\n          intent,\n          shape,\n        }),\n        isIndeterminate && 'animate-standalone-indeterminate-bar absolute -translate-x-1/2'\n      )}\n      style={{\n        ...style,\n        ...(!isIndeterminate && value !== null && { width: `${percentage}%` }),\n      }}\n      ref={ref}\n      onTransitionEnd={handleTransitionEnd}\n      {...others}\n    />\n  )\n}\n\nProgressIndicator.displayName = 'ProgressIndicator'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useProgress } from './ProgressContext'\nimport { ProgressIndicator } from './ProgressIndicator'\n\nexport type ProgressTrackProps = Omit<ComponentProps<typeof BaseProgress.Track>, 'render'>\n\nexport const ProgressTrack = ({ className, ...others }: ProgressTrackProps) => {\n  const { shape } = useProgress()\n\n  return (\n    <BaseProgress.Track\n      data-spark-component=\"progress-track\"\n      className={cx(\n        'h-sz-4 relative col-span-2 w-full',\n        'transform-gpu',\n        'overflow-hidden',\n        'bg-on-background/dim-4',\n        { 'rounded-sm': shape === 'rounded' },\n        className\n      )}\n      {...others}\n    >\n      <ProgressIndicator />\n    </BaseProgress.Track>\n  )\n}\n\nProgressTrack.displayName = 'Progress.Track'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { ProgressContext } from './ProgressContext'\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\nimport { ProgressTrack } from './ProgressTrack'\n\nexport interface ProgressProps\n  extends Omit<ComponentProps<typeof BaseProgress.Root>, 'render'>,\n    Pick<ProgressIndicatorStylesProps, 'intent'> {\n  shape?: 'square' | 'rounded'\n  /**\n   * Callback called when the progress reaches its maximum value and the transition animation completes.\n   */\n  onComplete?: () => void\n  /**\n   * Function that returns a string value that provides a human-readable text alternative for the current value of the progress bar.\n   * @deprecated Use `getAriaValueText` instead. This prop is kept for backward compatibility.\n   */\n  getValueLabel?: (value: number, max: number) => string\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Progress = ({\n  className,\n  value: valueProp,\n  max = 100,\n  min = 0,\n  shape = 'square',\n  intent = 'basic',\n  onComplete,\n  getValueLabel,\n  getAriaValueText: getAriaValueTextProp,\n  children = <ProgressTrack />,\n  ref,\n  ...others\n}: PropsWithChildren<ProgressProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: valueProp ?? null,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n      onComplete,\n    }\n  }, [max, min, valueProp, intent, shape, setLabelId, onComplete])\n\n  // Map getValueLabel to getAriaValueText for backward compatibility\n  const getAriaValueText =\n    getAriaValueTextProp ||\n    (getValueLabel\n      ? (formattedValue: string | null, value: number | null) => {\n          if (value === null) return formattedValue ?? ''\n\n          return getValueLabel(value, max)\n        }\n      : undefined)\n\n  return (\n    <ProgressContext.Provider value={contextValue}>\n      <BaseProgress.Root\n        data-spark-component=\"progress\"\n        ref={ref}\n        className={cx('gap-sm focus-visible:u-outline grid grid-cols-2', className)}\n        value={valueProp ?? null}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        getAriaValueText={getAriaValueText}\n        {...others}\n      >\n        {children}\n      </BaseProgress.Root>\n    </ProgressContext.Provider>\n  )\n}\n\nProgress.displayName = 'Progress'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useProgress } from './ProgressContext'\n\nexport type ProgressLabelProps = Omit<ComponentProps<typeof BaseProgress.Label>, 'render'>\n\nexport const ProgressLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: ProgressLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useProgress()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseProgress.Label\n      data-spark-component=\"progress-label\"\n      id={id}\n      className=\"default:text-body-1 text-on-surface default:font-bold\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseProgress.Label>\n  )\n}\n\nProgressLabel.displayName = 'Progress.Label'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nexport type ProgressValueProps = Omit<ComponentProps<typeof BaseProgress.Value>, 'render'>\n\nexport const ProgressValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<ProgressValueProps>) => {\n  return (\n    <BaseProgress.Value\n      data-spark-component=\"progress-value\"\n      className={cx('default:text-body-1 text-on-surface col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseProgress.Value>\n  )\n}\n\nProgressValue.displayName = 'Progress.Value'\n","import { Progress as Root } from './Progress'\nimport { ProgressLabel } from './ProgressLabel'\nimport { ProgressTrack } from './ProgressTrack'\nimport { ProgressValue } from './ProgressValue'\n\nexport const Progress: typeof Root & {\n  Label: typeof ProgressLabel\n  Track: typeof ProgressTrack\n  Value: typeof ProgressValue\n} = Object.assign(Root, {\n  Label: ProgressLabel,\n  Track: ProgressTrack,\n  Value: ProgressValue,\n})\n\nProgress.displayName = 'Progress'\nProgressLabel.displayName = 'Progress.Label'\nProgressTrack.displayName = 'Progress.Track'\nProgressValue.displayName = 'Progress.Value'\n\nexport { type ProgressProps } from './Progress'\nexport { type ProgressLabelProps } from './ProgressLabel'\nexport { type ProgressTrackProps } from './ProgressTrack'\nexport { type ProgressValueProps } from './ProgressValue'\n"],"names":["ProgressContext","createContext","ID_PREFIX","useProgress","context","useContext","progressIndicatorStyles","cva","ProgressIndicator","className","style","ref","onTransitionEnd","others","value","max","min","intent","shape","onComplete","percentage","isIndeterminate","handleTransitionEnd","event","jsx","BaseProgress","cx","ProgressTrack","Progress","valueProp","getValueLabel","getAriaValueTextProp","children","labelId","setLabelId","useState","contextValue","useMemo","getAriaValueText","formattedValue","ProgressLabel","idProp","forwardedRef","internalID","useId","id","onLabelId","rootRef","useCallback","el","useMergeRefs","ProgressValue","Root"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/progress/ProgressContext.tsx","../../src/progress/ProgressIndicator.tsx","../../src/progress/ProgressTrack.tsx","../../src/progress/Progress.tsx","../../src/progress/ProgressLabel.tsx","../../src/progress/ProgressValue.tsx","../../src/progress/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\n\nexport interface ProgressContextValue {\n  value: number | null\n  max: number\n  min: number\n  shape: 'square' | 'rounded'\n  intent: ProgressIndicatorStylesProps['intent']\n  onLabelId: (id?: string) => void\n  onComplete?: () => void\n}\n\nexport const ProgressContext = createContext<ProgressContextValue | null>(null)\n\nexport const ID_PREFIX = ':progress'\n\nexport const useProgress = () => {\n  const context = useContext(ProgressContext)\n\n  if (!context) {\n    throw new Error('useProgress must be used within a Progress provider')\n  }\n\n  return context\n}\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cva, cx, VariantProps } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useProgress } from './ProgressContext'\n\nexport const progressIndicatorStyles = cva(['h-full w-full', 'transition-width duration-400'], {\n  variants: {\n    /**\n     * Color scheme of the progress component.\n     */\n    intent: {\n      basic: ['bg-basic'],\n      main: ['bg-main'],\n      support: ['bg-support'],\n      accent: ['bg-accent'],\n      success: ['bg-success'],\n      alert: ['bg-alert'],\n      danger: ['bg-error'],\n      info: ['bg-info'],\n      neutral: ['bg-neutral'],\n    },\n    /**\n     * Shape of the progress component.\n     */\n    shape: {\n      square: [],\n      rounded: ['rounded-sm'],\n    },\n  },\n})\n\nexport type ProgressIndicatorStylesProps = VariantProps<typeof progressIndicatorStyles>\n\nexport type ProgressIndicatorProps = Omit<ComponentProps<typeof BaseProgress.Indicator>, 'render'>\n\nexport const ProgressIndicator = ({\n  className,\n  style,\n  ref,\n  onTransitionEnd,\n  ...others\n}: PropsWithChildren<ProgressIndicatorProps>) => {\n  const { value, max, min, intent, shape, onComplete } = useProgress()\n\n  const percentage = value !== null ? ((value - min) / (max - min)) * 100 : 0\n  const isIndeterminate = value === null\n\n  const handleTransitionEnd = (event: Parameters<NonNullable<ProgressIndicatorProps['onTransitionEnd']>>[0]) => {\n    // Call the original onTransitionEnd if provided\n    onTransitionEnd?.(event)\n\n    // If progress is complete and we have a callback, call it\n    if (value !== null && value >= max && onComplete) {\n      onComplete()\n    }\n  }\n\n  return (\n    <BaseProgress.Indicator\n      data-spark-component=\"progress-indicator\"\n      className={cx(\n        progressIndicatorStyles({\n          className,\n          intent,\n          shape,\n        }),\n        isIndeterminate && 'animate-standalone-indeterminate-bar absolute -translate-x-1/2'\n      )}\n      style={{\n        ...style,\n        ...(!isIndeterminate && value !== null && { width: `${percentage}%` }),\n      }}\n      ref={ref}\n      onTransitionEnd={handleTransitionEnd}\n      {...others}\n    />\n  )\n}\n\nProgressIndicator.displayName = 'ProgressIndicator'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useProgress } from './ProgressContext'\nimport { ProgressIndicator } from './ProgressIndicator'\n\nexport type ProgressTrackProps = Omit<ComponentProps<typeof BaseProgress.Track>, 'render'>\n\nexport const ProgressTrack = ({ className, ...others }: ProgressTrackProps) => {\n  const { shape } = useProgress()\n\n  return (\n    <BaseProgress.Track\n      data-spark-component=\"progress-track\"\n      className={cx(\n        'h-sz-4 relative col-span-2 w-full',\n        'transform-gpu',\n        'overflow-hidden',\n        'bg-on-background/dim-4',\n        { 'rounded-sm': shape === 'rounded' },\n        className\n      )}\n      {...others}\n    >\n      <ProgressIndicator />\n    </BaseProgress.Track>\n  )\n}\n\nProgressTrack.displayName = 'Progress.Track'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { ProgressContext } from './ProgressContext'\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\nimport { ProgressTrack } from './ProgressTrack'\n\nexport interface ProgressProps\n  extends Omit<ComponentProps<typeof BaseProgress.Root>, 'render'>,\n    Pick<ProgressIndicatorStylesProps, 'intent'> {\n  shape?: 'square' | 'rounded'\n  /**\n   * Callback called when the progress reaches its maximum value and the transition animation completes.\n   */\n  onComplete?: () => void\n  /**\n   * Function that returns a string value that provides a human-readable text alternative for the current value of the progress bar.\n   * @deprecated Use `getAriaValueText` instead. This prop is kept for backward compatibility.\n   */\n  getValueLabel?: (value: number, max: number) => string\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Progress = ({\n  className,\n  value: valueProp,\n  max = 100,\n  min = 0,\n  shape = 'square',\n  intent = 'basic',\n  onComplete,\n  getValueLabel,\n  getAriaValueText: getAriaValueTextProp,\n  children = <ProgressTrack />,\n  ref,\n  ...others\n}: PropsWithChildren<ProgressProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: valueProp ?? null,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n      onComplete,\n    }\n  }, [max, min, valueProp, intent, shape, setLabelId, onComplete])\n\n  // Map getValueLabel to getAriaValueText for backward compatibility\n  const getAriaValueText =\n    getAriaValueTextProp ||\n    (getValueLabel\n      ? (formattedValue: string | null, value: number | null) => {\n          if (value === null) return formattedValue ?? ''\n\n          return getValueLabel(value, max)\n        }\n      : undefined)\n\n  return (\n    <ProgressContext.Provider value={contextValue}>\n      <BaseProgress.Root\n        data-spark-component=\"progress\"\n        ref={ref}\n        className={cx('gap-sm focus-visible:u-outline grid grid-cols-[1fr_auto]', className)}\n        value={valueProp ?? null}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        getAriaValueText={getAriaValueText}\n        {...others}\n      >\n        {children}\n      </BaseProgress.Root>\n    </ProgressContext.Provider>\n  )\n}\n\nProgress.displayName = 'Progress'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useProgress } from './ProgressContext'\n\nexport type ProgressLabelProps = Omit<ComponentProps<typeof BaseProgress.Label>, 'render'>\n\nexport const ProgressLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: ProgressLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useProgress()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseProgress.Label\n      data-spark-component=\"progress-label\"\n      id={id}\n      className=\"default:text-body-1 text-on-surface default:font-bold\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseProgress.Label>\n  )\n}\n\nProgressLabel.displayName = 'Progress.Label'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nexport type ProgressValueProps = Omit<ComponentProps<typeof BaseProgress.Value>, 'render'>\n\nexport const ProgressValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<ProgressValueProps>) => {\n  return (\n    <BaseProgress.Value\n      data-spark-component=\"progress-value\"\n      className={cx('default:text-body-1 text-on-surface col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseProgress.Value>\n  )\n}\n\nProgressValue.displayName = 'Progress.Value'\n","import { Progress as Root } from './Progress'\nimport { ProgressLabel } from './ProgressLabel'\nimport { ProgressTrack } from './ProgressTrack'\nimport { ProgressValue } from './ProgressValue'\n\nexport const Progress: typeof Root & {\n  Label: typeof ProgressLabel\n  Track: typeof ProgressTrack\n  Value: typeof ProgressValue\n} = Object.assign(Root, {\n  Label: ProgressLabel,\n  Track: ProgressTrack,\n  Value: ProgressValue,\n})\n\nProgress.displayName = 'Progress'\nProgressLabel.displayName = 'Progress.Label'\nProgressTrack.displayName = 'Progress.Track'\nProgressValue.displayName = 'Progress.Value'\n\nexport { type ProgressProps } from './Progress'\nexport { type ProgressLabelProps } from './ProgressLabel'\nexport { type ProgressTrackProps } from './ProgressTrack'\nexport { type ProgressValueProps } from './ProgressValue'\n"],"names":["ProgressContext","createContext","ID_PREFIX","useProgress","context","useContext","progressIndicatorStyles","cva","ProgressIndicator","className","style","ref","onTransitionEnd","others","value","max","min","intent","shape","onComplete","percentage","isIndeterminate","handleTransitionEnd","event","jsx","BaseProgress","cx","ProgressTrack","Progress","valueProp","getValueLabel","getAriaValueTextProp","children","labelId","setLabelId","useState","contextValue","useMemo","getAriaValueText","formattedValue","ProgressLabel","idProp","forwardedRef","internalID","useId","id","onLabelId","rootRef","useCallback","el","useMergeRefs","ProgressValue","Root"],"mappings":"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"}

package/dist/progress/index.mjs

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { Progress as u } from "@base-ui/react/progress";
+import { Progress as d } from "@base-ui/react/progress";
 import { cva as V, cx as b } from "class-variance-authority";
 import { createContext as $, useContext as C, useState as E, useMemo as R, useId as j, useCallback as q } from "react";
 import { useMergeRefs as A } from "@spark-ui/hooks/use-merge-refs";
@@ -39,18 +39,18 @@ const I = $(null), D = ":progress", y = () => {
   onTransitionEnd: n,
   ...c
 }) => {
-  const { value: e, max: t, min: l, intent: i, shape: d, onComplete: g } = y(), P = e !== null ? (e - l) / (t - l) * 100 : 0, p = e === null, m = (x) => {
+  const { value: e, max: t, min: l, intent: i, shape: u, onComplete: g } = y(), P = e !== null ? (e - l) / (t - l) * 100 : 0, p = e === null, m = (x) => {
     n?.(x), e !== null && e >= t && g && g();
   };
   return /* @__PURE__ */ o(
-    u.Indicator,
+    d.Indicator,
     {
       "data-spark-component": "progress-indicator",
       className: b(
         M({
           className: s,
           intent: i,
-          shape: d
+          shape: u
         }),
         p && "animate-standalone-indeterminate-bar absolute -translate-x-1/2"
       ),
@@ -68,7 +68,7 @@ v.displayName = "ProgressIndicator";
 const f = ({ className: s, ...a }) => {
   const { shape: r } = y();
   return /* @__PURE__ */ o(
-    u.Track,
+    d.Track,
     {
       "data-spark-component": "progress-track",
       className: b(
@@ -95,7 +95,7 @@ const T = ({
   onComplete: t,
   getValueLabel: l,
   getAriaValueText: i,
-  children: d = /* @__PURE__ */ o(f, {}),
+  children: u = /* @__PURE__ */ o(f, {}),
   ref: g,
   ...P
 }) => {
@@ -109,18 +109,18 @@ const T = ({
     onComplete: t
   }), [r, n, a, e, c, m, t]), w = i || (l ? (L, k) => k === null ? L ?? "" : l(k, r) : void 0);
   return /* @__PURE__ */ o(I.Provider, { value: x, children: /* @__PURE__ */ o(
-    u.Root,
+    d.Root,
     {
       "data-spark-component": "progress",
       ref: g,
-      className: b("gap-sm focus-visible:u-outline grid grid-cols-2", s),
+      className: b("gap-sm focus-visible:u-outline grid grid-cols-[1fr_auto]", s),
       value: a ?? null,
       max: r,
       min: n,
       "aria-labelledby": p,
       getAriaValueText: w,
       ...P,
-      children: d
+      children: u
     }
   ) });
 };
@@ -132,13 +132,13 @@ const N = ({
   ...n
 }) => {
   const c = `${D}-label-${j()}`, e = s || c, { onLabelId: t } = y(), l = q(
-    (d) => {
-      t(d ? e : void 0);
+    (u) => {
+      t(u ? e : void 0);
     },
     [e, t]
   ), i = A(r, l);
   return /* @__PURE__ */ o(
-    u.Label,
+    d.Label,
     {
       "data-spark-component": "progress-label",
       id: e,
@@ -155,7 +155,7 @@ const h = ({
   children: a,
   ...r
 }) => /* @__PURE__ */ o(
-  u.Value,
+  d.Value,
   {
     "data-spark-component": "progress-value",
     className: b("default:text-body-1 text-on-surface col-start-2 text-right", s),

package/dist/progress/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/progress/ProgressContext.tsx","../../src/progress/ProgressIndicator.tsx","../../src/progress/ProgressTrack.tsx","../../src/progress/Progress.tsx","../../src/progress/ProgressLabel.tsx","../../src/progress/ProgressValue.tsx","../../src/progress/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\n\nexport interface ProgressContextValue {\n  value: number | null\n  max: number\n  min: number\n  shape: 'square' | 'rounded'\n  intent: ProgressIndicatorStylesProps['intent']\n  onLabelId: (id?: string) => void\n  onComplete?: () => void\n}\n\nexport const ProgressContext = createContext<ProgressContextValue | null>(null)\n\nexport const ID_PREFIX = ':progress'\n\nexport const useProgress = () => {\n  const context = useContext(ProgressContext)\n\n  if (!context) {\n    throw new Error('useProgress must be used within a Progress provider')\n  }\n\n  return context\n}\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cva, cx, VariantProps } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useProgress } from './ProgressContext'\n\nexport const progressIndicatorStyles = cva(['h-full w-full', 'transition-width duration-400'], {\n  variants: {\n    /**\n     * Color scheme of the progress component.\n     */\n    intent: {\n      basic: ['bg-basic'],\n      main: ['bg-main'],\n      support: ['bg-support'],\n      accent: ['bg-accent'],\n      success: ['bg-success'],\n      alert: ['bg-alert'],\n      danger: ['bg-error'],\n      info: ['bg-info'],\n      neutral: ['bg-neutral'],\n    },\n    /**\n     * Shape of the progress component.\n     */\n    shape: {\n      square: [],\n      rounded: ['rounded-sm'],\n    },\n  },\n})\n\nexport type ProgressIndicatorStylesProps = VariantProps<typeof progressIndicatorStyles>\n\nexport type ProgressIndicatorProps = Omit<ComponentProps<typeof BaseProgress.Indicator>, 'render'>\n\nexport const ProgressIndicator = ({\n  className,\n  style,\n  ref,\n  onTransitionEnd,\n  ...others\n}: PropsWithChildren<ProgressIndicatorProps>) => {\n  const { value, max, min, intent, shape, onComplete } = useProgress()\n\n  const percentage = value !== null ? ((value - min) / (max - min)) * 100 : 0\n  const isIndeterminate = value === null\n\n  const handleTransitionEnd = (event: Parameters<NonNullable<ProgressIndicatorProps['onTransitionEnd']>>[0]) => {\n    // Call the original onTransitionEnd if provided\n    onTransitionEnd?.(event)\n\n    // If progress is complete and we have a callback, call it\n    if (value !== null && value >= max && onComplete) {\n      onComplete()\n    }\n  }\n\n  return (\n    <BaseProgress.Indicator\n      data-spark-component=\"progress-indicator\"\n      className={cx(\n        progressIndicatorStyles({\n          className,\n          intent,\n          shape,\n        }),\n        isIndeterminate && 'animate-standalone-indeterminate-bar absolute -translate-x-1/2'\n      )}\n      style={{\n        ...style,\n        ...(!isIndeterminate && value !== null && { width: `${percentage}%` }),\n      }}\n      ref={ref}\n      onTransitionEnd={handleTransitionEnd}\n      {...others}\n    />\n  )\n}\n\nProgressIndicator.displayName = 'ProgressIndicator'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useProgress } from './ProgressContext'\nimport { ProgressIndicator } from './ProgressIndicator'\n\nexport type ProgressTrackProps = Omit<ComponentProps<typeof BaseProgress.Track>, 'render'>\n\nexport const ProgressTrack = ({ className, ...others }: ProgressTrackProps) => {\n  const { shape } = useProgress()\n\n  return (\n    <BaseProgress.Track\n      data-spark-component=\"progress-track\"\n      className={cx(\n        'h-sz-4 relative col-span-2 w-full',\n        'transform-gpu',\n        'overflow-hidden',\n        'bg-on-background/dim-4',\n        { 'rounded-sm': shape === 'rounded' },\n        className\n      )}\n      {...others}\n    >\n      <ProgressIndicator />\n    </BaseProgress.Track>\n  )\n}\n\nProgressTrack.displayName = 'Progress.Track'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { ProgressContext } from './ProgressContext'\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\nimport { ProgressTrack } from './ProgressTrack'\n\nexport interface ProgressProps\n  extends Omit<ComponentProps<typeof BaseProgress.Root>, 'render'>,\n    Pick<ProgressIndicatorStylesProps, 'intent'> {\n  shape?: 'square' | 'rounded'\n  /**\n   * Callback called when the progress reaches its maximum value and the transition animation completes.\n   */\n  onComplete?: () => void\n  /**\n   * Function that returns a string value that provides a human-readable text alternative for the current value of the progress bar.\n   * @deprecated Use `getAriaValueText` instead. This prop is kept for backward compatibility.\n   */\n  getValueLabel?: (value: number, max: number) => string\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Progress = ({\n  className,\n  value: valueProp,\n  max = 100,\n  min = 0,\n  shape = 'square',\n  intent = 'basic',\n  onComplete,\n  getValueLabel,\n  getAriaValueText: getAriaValueTextProp,\n  children = <ProgressTrack />,\n  ref,\n  ...others\n}: PropsWithChildren<ProgressProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: valueProp ?? null,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n      onComplete,\n    }\n  }, [max, min, valueProp, intent, shape, setLabelId, onComplete])\n\n  // Map getValueLabel to getAriaValueText for backward compatibility\n  const getAriaValueText =\n    getAriaValueTextProp ||\n    (getValueLabel\n      ? (formattedValue: string | null, value: number | null) => {\n          if (value === null) return formattedValue ?? ''\n\n          return getValueLabel(value, max)\n        }\n      : undefined)\n\n  return (\n    <ProgressContext.Provider value={contextValue}>\n      <BaseProgress.Root\n        data-spark-component=\"progress\"\n        ref={ref}\n        className={cx('gap-sm focus-visible:u-outline grid grid-cols-2', className)}\n        value={valueProp ?? null}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        getAriaValueText={getAriaValueText}\n        {...others}\n      >\n        {children}\n      </BaseProgress.Root>\n    </ProgressContext.Provider>\n  )\n}\n\nProgress.displayName = 'Progress'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useProgress } from './ProgressContext'\n\nexport type ProgressLabelProps = Omit<ComponentProps<typeof BaseProgress.Label>, 'render'>\n\nexport const ProgressLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: ProgressLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useProgress()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseProgress.Label\n      data-spark-component=\"progress-label\"\n      id={id}\n      className=\"default:text-body-1 text-on-surface default:font-bold\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseProgress.Label>\n  )\n}\n\nProgressLabel.displayName = 'Progress.Label'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nexport type ProgressValueProps = Omit<ComponentProps<typeof BaseProgress.Value>, 'render'>\n\nexport const ProgressValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<ProgressValueProps>) => {\n  return (\n    <BaseProgress.Value\n      data-spark-component=\"progress-value\"\n      className={cx('default:text-body-1 text-on-surface col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseProgress.Value>\n  )\n}\n\nProgressValue.displayName = 'Progress.Value'\n","import { Progress as Root } from './Progress'\nimport { ProgressLabel } from './ProgressLabel'\nimport { ProgressTrack } from './ProgressTrack'\nimport { ProgressValue } from './ProgressValue'\n\nexport const Progress: typeof Root & {\n  Label: typeof ProgressLabel\n  Track: typeof ProgressTrack\n  Value: typeof ProgressValue\n} = Object.assign(Root, {\n  Label: ProgressLabel,\n  Track: ProgressTrack,\n  Value: ProgressValue,\n})\n\nProgress.displayName = 'Progress'\nProgressLabel.displayName = 'Progress.Label'\nProgressTrack.displayName = 'Progress.Track'\nProgressValue.displayName = 'Progress.Value'\n\nexport { type ProgressProps } from './Progress'\nexport { type ProgressLabelProps } from './ProgressLabel'\nexport { type ProgressTrackProps } from './ProgressTrack'\nexport { type ProgressValueProps } from './ProgressValue'\n"],"names":["ProgressContext","createContext","ID_PREFIX","useProgress","context","useContext","progressIndicatorStyles","cva","ProgressIndicator","className","style","ref","onTransitionEnd","others","value","max","min","intent","shape","onComplete","percentage","isIndeterminate","handleTransitionEnd","event","jsx","BaseProgress","cx","ProgressTrack","Progress","valueProp","getValueLabel","getAriaValueTextProp","children","labelId","setLabelId","useState","contextValue","useMemo","getAriaValueText","formattedValue","ProgressLabel","idProp","forwardedRef","internalID","useId","id","onLabelId","rootRef","useCallback","el","useMergeRefs","ProgressValue","Root"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/progress/ProgressContext.tsx","../../src/progress/ProgressIndicator.tsx","../../src/progress/ProgressTrack.tsx","../../src/progress/Progress.tsx","../../src/progress/ProgressLabel.tsx","../../src/progress/ProgressValue.tsx","../../src/progress/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\n\nexport interface ProgressContextValue {\n  value: number | null\n  max: number\n  min: number\n  shape: 'square' | 'rounded'\n  intent: ProgressIndicatorStylesProps['intent']\n  onLabelId: (id?: string) => void\n  onComplete?: () => void\n}\n\nexport const ProgressContext = createContext<ProgressContextValue | null>(null)\n\nexport const ID_PREFIX = ':progress'\n\nexport const useProgress = () => {\n  const context = useContext(ProgressContext)\n\n  if (!context) {\n    throw new Error('useProgress must be used within a Progress provider')\n  }\n\n  return context\n}\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cva, cx, VariantProps } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nimport { useProgress } from './ProgressContext'\n\nexport const progressIndicatorStyles = cva(['h-full w-full', 'transition-width duration-400'], {\n  variants: {\n    /**\n     * Color scheme of the progress component.\n     */\n    intent: {\n      basic: ['bg-basic'],\n      main: ['bg-main'],\n      support: ['bg-support'],\n      accent: ['bg-accent'],\n      success: ['bg-success'],\n      alert: ['bg-alert'],\n      danger: ['bg-error'],\n      info: ['bg-info'],\n      neutral: ['bg-neutral'],\n    },\n    /**\n     * Shape of the progress component.\n     */\n    shape: {\n      square: [],\n      rounded: ['rounded-sm'],\n    },\n  },\n})\n\nexport type ProgressIndicatorStylesProps = VariantProps<typeof progressIndicatorStyles>\n\nexport type ProgressIndicatorProps = Omit<ComponentProps<typeof BaseProgress.Indicator>, 'render'>\n\nexport const ProgressIndicator = ({\n  className,\n  style,\n  ref,\n  onTransitionEnd,\n  ...others\n}: PropsWithChildren<ProgressIndicatorProps>) => {\n  const { value, max, min, intent, shape, onComplete } = useProgress()\n\n  const percentage = value !== null ? ((value - min) / (max - min)) * 100 : 0\n  const isIndeterminate = value === null\n\n  const handleTransitionEnd = (event: Parameters<NonNullable<ProgressIndicatorProps['onTransitionEnd']>>[0]) => {\n    // Call the original onTransitionEnd if provided\n    onTransitionEnd?.(event)\n\n    // If progress is complete and we have a callback, call it\n    if (value !== null && value >= max && onComplete) {\n      onComplete()\n    }\n  }\n\n  return (\n    <BaseProgress.Indicator\n      data-spark-component=\"progress-indicator\"\n      className={cx(\n        progressIndicatorStyles({\n          className,\n          intent,\n          shape,\n        }),\n        isIndeterminate && 'animate-standalone-indeterminate-bar absolute -translate-x-1/2'\n      )}\n      style={{\n        ...style,\n        ...(!isIndeterminate && value !== null && { width: `${percentage}%` }),\n      }}\n      ref={ref}\n      onTransitionEnd={handleTransitionEnd}\n      {...others}\n    />\n  )\n}\n\nProgressIndicator.displayName = 'ProgressIndicator'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nimport { useProgress } from './ProgressContext'\nimport { ProgressIndicator } from './ProgressIndicator'\n\nexport type ProgressTrackProps = Omit<ComponentProps<typeof BaseProgress.Track>, 'render'>\n\nexport const ProgressTrack = ({ className, ...others }: ProgressTrackProps) => {\n  const { shape } = useProgress()\n\n  return (\n    <BaseProgress.Track\n      data-spark-component=\"progress-track\"\n      className={cx(\n        'h-sz-4 relative col-span-2 w-full',\n        'transform-gpu',\n        'overflow-hidden',\n        'bg-on-background/dim-4',\n        { 'rounded-sm': shape === 'rounded' },\n        className\n      )}\n      {...others}\n    >\n      <ProgressIndicator />\n    </BaseProgress.Track>\n  )\n}\n\nProgressTrack.displayName = 'Progress.Track'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { ProgressContext } from './ProgressContext'\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator'\nimport { ProgressTrack } from './ProgressTrack'\n\nexport interface ProgressProps\n  extends Omit<ComponentProps<typeof BaseProgress.Root>, 'render'>,\n    Pick<ProgressIndicatorStylesProps, 'intent'> {\n  shape?: 'square' | 'rounded'\n  /**\n   * Callback called when the progress reaches its maximum value and the transition animation completes.\n   */\n  onComplete?: () => void\n  /**\n   * Function that returns a string value that provides a human-readable text alternative for the current value of the progress bar.\n   * @deprecated Use `getAriaValueText` instead. This prop is kept for backward compatibility.\n   */\n  getValueLabel?: (value: number, max: number) => string\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Progress = ({\n  className,\n  value: valueProp,\n  max = 100,\n  min = 0,\n  shape = 'square',\n  intent = 'basic',\n  onComplete,\n  getValueLabel,\n  getAriaValueText: getAriaValueTextProp,\n  children = <ProgressTrack />,\n  ref,\n  ...others\n}: PropsWithChildren<ProgressProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: valueProp ?? null,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n      onComplete,\n    }\n  }, [max, min, valueProp, intent, shape, setLabelId, onComplete])\n\n  // Map getValueLabel to getAriaValueText for backward compatibility\n  const getAriaValueText =\n    getAriaValueTextProp ||\n    (getValueLabel\n      ? (formattedValue: string | null, value: number | null) => {\n          if (value === null) return formattedValue ?? ''\n\n          return getValueLabel(value, max)\n        }\n      : undefined)\n\n  return (\n    <ProgressContext.Provider value={contextValue}>\n      <BaseProgress.Root\n        data-spark-component=\"progress\"\n        ref={ref}\n        className={cx('gap-sm focus-visible:u-outline grid grid-cols-[1fr_auto]', className)}\n        value={valueProp ?? null}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        getAriaValueText={getAriaValueText}\n        {...others}\n      >\n        {children}\n      </BaseProgress.Root>\n    </ProgressContext.Provider>\n  )\n}\n\nProgress.displayName = 'Progress'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useProgress } from './ProgressContext'\n\nexport type ProgressLabelProps = Omit<ComponentProps<typeof BaseProgress.Label>, 'render'>\n\nexport const ProgressLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: ProgressLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useProgress()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseProgress.Label\n      data-spark-component=\"progress-label\"\n      id={id}\n      className=\"default:text-body-1 text-on-surface default:font-bold\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseProgress.Label>\n  )\n}\n\nProgressLabel.displayName = 'Progress.Label'\n","import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren } from 'react'\n\nexport type ProgressValueProps = Omit<ComponentProps<typeof BaseProgress.Value>, 'render'>\n\nexport const ProgressValue = ({\n  className,\n  children,\n  ...others\n}: PropsWithChildren<ProgressValueProps>) => {\n  return (\n    <BaseProgress.Value\n      data-spark-component=\"progress-value\"\n      className={cx('default:text-body-1 text-on-surface col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseProgress.Value>\n  )\n}\n\nProgressValue.displayName = 'Progress.Value'\n","import { Progress as Root } from './Progress'\nimport { ProgressLabel } from './ProgressLabel'\nimport { ProgressTrack } from './ProgressTrack'\nimport { ProgressValue } from './ProgressValue'\n\nexport const Progress: typeof Root & {\n  Label: typeof ProgressLabel\n  Track: typeof ProgressTrack\n  Value: typeof ProgressValue\n} = Object.assign(Root, {\n  Label: ProgressLabel,\n  Track: ProgressTrack,\n  Value: ProgressValue,\n})\n\nProgress.displayName = 'Progress'\nProgressLabel.displayName = 'Progress.Label'\nProgressTrack.displayName = 'Progress.Track'\nProgressValue.displayName = 'Progress.Value'\n\nexport { type ProgressProps } from './Progress'\nexport { type ProgressLabelProps } from './ProgressLabel'\nexport { type ProgressTrackProps } from './ProgressTrack'\nexport { type ProgressValueProps } from './ProgressValue'\n"],"names":["ProgressContext","createContext","ID_PREFIX","useProgress","context","useContext","progressIndicatorStyles","cva","ProgressIndicator","className","style","ref","onTransitionEnd","others","value","max","min","intent","shape","onComplete","percentage","isIndeterminate","handleTransitionEnd","event","jsx","BaseProgress","cx","ProgressTrack","Progress","valueProp","getValueLabel","getAriaValueTextProp","children","labelId","setLabelId","useState","contextValue","useMemo","getAriaValueText","formattedValue","ProgressLabel","idProp","forwardedRef","internalID","useId","id","onLabelId","rootRef","useCallback","el","useMergeRefs","ProgressValue","Root"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "14.1.0",
+  "version": "14.1.2",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -54,9 +54,9 @@
     "@react-aria/toast": "^3.0.0-beta.18",
     "@react-stately/numberfield": "3.9.11",
     "@react-stately/toast": "^3.0.0-beta.7",
-    "@spark-ui/hooks": "^14.1.0",
-    "@spark-ui/icons": "^14.1.0",
-    "@spark-ui/internal-utils": "^14.1.0",
+    "@spark-ui/hooks": "^14.1.2",
+    "@spark-ui/icons": "^14.1.2",
+    "@spark-ui/internal-utils": "^14.1.2",
     "@zag-js/pagination": "1.30.0",
     "@zag-js/react": "1.30.0",
     "class-variance-authority": "0.7.1",

package/dist/DialogContent.styles-BSfXHt21.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"DialogContent.styles-BSfXHt21.mjs","sources":["../src/dialog/DialogContent.styles.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const dialogContentStyles = cva(\n  [\n    'z-modal flex flex-col bg-surface group transition-all',\n    'focus-visible:outline-hidden focus-visible:u-outline',\n    '[&:not(:has(footer))]:pb-lg',\n    '[&:not(:has(header))]:pt-lg',\n    'data-open:animation-duration-400 data-closed:animation-duration-200',\n    'data-starting-style:scale-90 data-starting-style:opacity-0',\n    'data-ending-style:scale-90 data-ending-style:opacity-0',\n    // Nested dialog effect\n    'data-nested-dialog-open:scale-90',\n    'data-nested-dialog-open:after:pointer-events-none',\n    'after:bg-transparent',\n    'after:transition-all',\n    'after:duration-200',\n    'data-nested-dialog-open:after:inset-0',\n    'data-nested-dialog-open:after:absolute',\n    'data-nested-dialog-open:after:rounded-[inherit]',\n    'data-nested-dialog-open:after:bg-overlay/dim-3',\n  ],\n  {\n    variants: {\n      size: {\n        fullscreen: 'fixed size-full top-0 left-0',\n        sm: 'max-w-sz-480',\n        md: 'max-w-sz-672',\n        lg: 'max-w-sz-864',\n      },\n      isNarrow: {\n        true: [],\n        false: [],\n      },\n    },\n    compoundVariants: [\n      {\n        size: ['sm', 'md', 'lg'],\n        class: [\n          'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n          'max-h-[80%]',\n          'shadow-md rounded-lg',\n          'data-open:animate-fade-in',\n          'data-closed:animate-fade-out',\n        ],\n      },\n      {\n        size: ['sm', 'md', 'lg'],\n        isNarrow: false,\n        class: ['w-full'],\n      },\n    ],\n    defaultVariants: {\n      size: 'md',\n      isNarrow: false,\n    },\n  }\n)\n\nexport type DialogContentStylesProps = VariantProps<typeof dialogContentStyles>\n"],"names":["dialogContentStyles","cva"],"mappings":";AAEO,MAAMA,IAAsBC;AAAA,EACjC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,UAAU;AAAA,QACR,MAAM,CAAA;AAAA,QACN,OAAO,CAAA;AAAA,MAAC;AAAA,IACV;AAAA,IAEF,kBAAkB;AAAA,MAChB;AAAA,QACE,MAAM,CAAC,MAAM,MAAM,IAAI;AAAA,QACvB,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,MAAM,CAAC,MAAM,MAAM,IAAI;AAAA,QACvB,UAAU;AAAA,QACV,OAAO,CAAC,QAAQ;AAAA,MAAA;AAAA,IAClB;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ;"}

package/dist/DialogContent.styles-bBs6l8Cy.js

@@ -1,2 +0,0 @@
-"use strict";const a=require("class-variance-authority"),e=a.cva(["z-modal flex flex-col bg-surface group transition-all","focus-visible:outline-hidden focus-visible:u-outline","[&:not(:has(footer))]:pb-lg","[&:not(:has(header))]:pt-lg","data-open:animation-duration-400 data-closed:animation-duration-200","data-starting-style:scale-90 data-starting-style:opacity-0","data-ending-style:scale-90 data-ending-style:opacity-0","data-nested-dialog-open:scale-90","data-nested-dialog-open:after:pointer-events-none","after:bg-transparent","after:transition-all","after:duration-200","data-nested-dialog-open:after:inset-0","data-nested-dialog-open:after:absolute","data-nested-dialog-open:after:rounded-[inherit]","data-nested-dialog-open:after:bg-overlay/dim-3"],{variants:{size:{fullscreen:"fixed size-full top-0 left-0",sm:"max-w-sz-480",md:"max-w-sz-672",lg:"max-w-sz-864"},isNarrow:{true:[],false:[]}},compoundVariants:[{size:["sm","md","lg"],class:["fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2","max-h-[80%]","shadow-md rounded-lg","data-open:animate-fade-in","data-closed:animate-fade-out"]},{size:["sm","md","lg"],isNarrow:!1,class:["w-full"]}],defaultVariants:{size:"md",isNarrow:!1}});exports.dialogContentStyles=e;
-//# sourceMappingURL=DialogContent.styles-bBs6l8Cy.js.map

package/dist/DialogContent.styles-bBs6l8Cy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DialogContent.styles-bBs6l8Cy.js","sources":["../src/dialog/DialogContent.styles.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const dialogContentStyles = cva(\n  [\n    'z-modal flex flex-col bg-surface group transition-all',\n    'focus-visible:outline-hidden focus-visible:u-outline',\n    '[&:not(:has(footer))]:pb-lg',\n    '[&:not(:has(header))]:pt-lg',\n    'data-open:animation-duration-400 data-closed:animation-duration-200',\n    'data-starting-style:scale-90 data-starting-style:opacity-0',\n    'data-ending-style:scale-90 data-ending-style:opacity-0',\n    // Nested dialog effect\n    'data-nested-dialog-open:scale-90',\n    'data-nested-dialog-open:after:pointer-events-none',\n    'after:bg-transparent',\n    'after:transition-all',\n    'after:duration-200',\n    'data-nested-dialog-open:after:inset-0',\n    'data-nested-dialog-open:after:absolute',\n    'data-nested-dialog-open:after:rounded-[inherit]',\n    'data-nested-dialog-open:after:bg-overlay/dim-3',\n  ],\n  {\n    variants: {\n      size: {\n        fullscreen: 'fixed size-full top-0 left-0',\n        sm: 'max-w-sz-480',\n        md: 'max-w-sz-672',\n        lg: 'max-w-sz-864',\n      },\n      isNarrow: {\n        true: [],\n        false: [],\n      },\n    },\n    compoundVariants: [\n      {\n        size: ['sm', 'md', 'lg'],\n        class: [\n          'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n          'max-h-[80%]',\n          'shadow-md rounded-lg',\n          'data-open:animate-fade-in',\n          'data-closed:animate-fade-out',\n        ],\n      },\n      {\n        size: ['sm', 'md', 'lg'],\n        isNarrow: false,\n        class: ['w-full'],\n      },\n    ],\n    defaultVariants: {\n      size: 'md',\n      isNarrow: false,\n    },\n  }\n)\n\nexport type DialogContentStylesProps = VariantProps<typeof dialogContentStyles>\n"],"names":["dialogContentStyles","cva"],"mappings":"yDAEaA,EAAsBC,EAAAA,IACjC,CACE,wDACA,uDACA,8BACA,8BACA,sEACA,6DACA,yDAEA,mCACA,oDACA,uBACA,uBACA,qBACA,wCACA,yCACA,kDACA,gDAAA,EAEF,CACE,SAAU,CACR,KAAM,CACJ,WAAY,+BACZ,GAAI,eACJ,GAAI,eACJ,GAAI,cAAA,EAEN,SAAU,CACR,KAAM,CAAA,EACN,MAAO,CAAA,CAAC,CACV,EAEF,iBAAkB,CAChB,CACE,KAAM,CAAC,KAAM,KAAM,IAAI,EACvB,MAAO,CACL,2DACA,cACA,uBACA,4BACA,8BAAA,CACF,EAEF,CACE,KAAM,CAAC,KAAM,KAAM,IAAI,EACvB,SAAU,GACV,MAAO,CAAC,QAAQ,CAAA,CAClB,EAEF,gBAAiB,CACf,KAAM,KACN,SAAU,EAAA,CACZ,CAEJ"}