@ngrok/mantle 0.32.3 → 0.40.1

package/dist/dialog.js

@@ -1,2 +1,2 @@
-import{a as c,b as f,c as P,d as m,e as u,f as y,g as v,h as C}from"./chunk-IVXZIYX4.js";import{g as p}from"./chunk-IDCDPWR4.js";import"./chunk-CGUSOD4E.js";import"./chunk-D3XF6J5A.js";import{a as D}from"./chunk-RTXWW6ND.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a}from"./chunk-AZ56JGNY.js";import{XIcon as k}from"@phosphor-icons/react/X";import{forwardRef as r}from"react";import{jsx as t,jsxs as F}from"react/jsx-runtime";var x=c;x.displayName="Dialog";var N=f;N.displayName="DialogTrigger";var g=P;g.displayName="DialogPortal";var b=m;b.displayName="DialogClose";var d=r(({className:o,...e},i)=>t(u,{ref:i,className:a("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",o),...e}));d.displayName="DialogOverlay";var h=r(({children:o,className:e,onInteractOutside:i,onPointerDownOutside:n,preferredWidth:s="max-w-lg",...W},z)=>F(g,{children:[t(d,{}),t("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:t(y,{className:a("flex max-h-full w-full flex-1 flex-col","outline-none focus-within:outline-none","border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200","data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95",s,e),onInteractOutside:l=>{p(l),i?.(l)},onPointerDownOutside:l=>{p(l),n?.(l)},ref:z,...W,children:o})})]}));h.displayName="DialogContent";var R=({className:o,children:e,...i})=>t("div",{className:a("border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4","has-[.icon-button]:pr-4",o),...i,children:e});R.displayName="DialogHeader";var B=({size:o="md",type:e="button",label:i="Close Dialog",appearance:n="ghost",...s})=>t(m,{asChild:!0,children:t(D,{appearance:n,icon:t(k,{}),label:i,size:o,type:e,...s})});B.displayName="DialogCloseIconButton";var I=({className:o,...e})=>t("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",o),...e});I.displayName="DialogBody";var w=({className:o,...e})=>t("div",{className:a("border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4",o),...e});w.displayName="DialogFooter";var T=r(({className:o,...e},i)=>t(v,{ref:i,className:a("text-strong truncate text-lg font-medium",o),...e}));T.displayName="DialogTitle";var O=r(({className:o,...e},i)=>t(C,{ref:i,className:a("text-muted",o),...e}));O.displayName="DialogDescription";export{x as Dialog,I as DialogBody,b as DialogClose,B as DialogCloseIconButton,h as DialogContent,O as DialogDescription,w as DialogFooter,R as DialogHeader,d as DialogOverlay,g as DialogPortal,T as DialogTitle,N as DialogTrigger};
+import{a as f,b as P,c as D,d as m,e as u,f as v,g as y,h as C}from"./chunk-2ID2TLYD.js";import{d as p}from"./chunk-UUXOG7WW.js";import"./chunk-HSTG2BTX.js";import"./chunk-D3XF6J5A.js";import{a as g}from"./chunk-RTXWW6ND.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a}from"./chunk-AZ56JGNY.js";import{XIcon as k}from"@phosphor-icons/react/X";import{forwardRef as r}from"react";import{jsx as e,jsxs as H}from"react/jsx-runtime";var x=f;x.displayName="Dialog";var N=P;N.displayName="DialogTrigger";var d=D;d.displayName="DialogPortal";var b=m;b.displayName="DialogClose";var c=r(({className:o,...t},i)=>e(u,{ref:i,className:a("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",o),...t}));c.displayName="DialogOverlay";var h=r(({children:o,className:t,onInteractOutside:i,onPointerDownOutside:l,preferredWidth:s="max-w-lg",...W},z)=>H(d,{children:[e(c,{}),e("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:e(v,{className:a("flex max-h-full w-full flex-1 flex-col","outline-none focus-within:outline-none","border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200","data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95",s,t),onInteractOutside:n=>{p(n),i?.(n)},onPointerDownOutside:n=>{p(n),l?.(n)},ref:z,...W,children:o})})]}));h.displayName="DialogContent";var R=({className:o,children:t,...i})=>e("div",{className:a("border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4","has-[.icon-button]:pr-4",o),...i,children:t});R.displayName="DialogHeader";var w=({size:o="md",type:t="button",label:i="Close Dialog",appearance:l="ghost",...s})=>e(m,{asChild:!0,children:e(g,{appearance:l,icon:e(k,{}),label:i,size:o,type:t,...s})});w.displayName="DialogCloseIconButton";var I=({className:o,...t})=>e("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",o),...t});I.displayName="DialogBody";var B=({className:o,...t})=>e("div",{className:a("border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4",o),...t});B.displayName="DialogFooter";var O=r(({className:o,...t},i)=>e(y,{ref:i,className:a("text-strong truncate text-lg font-medium",o),...t}));O.displayName="DialogTitle";var T=r(({className:o,...t},i)=>e(C,{ref:i,className:a("text-muted",o),...t}));T.displayName="DialogDescription";var F={Root:x,Body:I,Close:b,CloseIconButton:w,Content:h,Description:T,Footer:B,Header:R,Overlay:c,Portal:d,Title:O,Trigger:N};export{F as Dialog};
 //# sourceMappingURL=dialog.js.map

package/dist/dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n} from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\nimport * as DialogPrimitive from \"./primitive.js\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the Dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Dialog Title</DialogTitle>\n *       <DialogCloseIconButton />\n *     </DialogHeader>\n *     <DialogBody>\n *       <p>This is the dialog content.</p>\n *     </DialogBody>\n *     <DialogFooter>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nconst Dialog = DialogPrimitive.Root;\nDialog.displayName = \"Dialog\";\n\n/**\n * A button that opens the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-trigger\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Dialog Title</DialogTitle>\n *     </DialogHeader>\n *     <DialogBody>\n *       <p>This is the dialog content.</p>\n *     </DialogBody>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nconst DialogTrigger = DialogPrimitive.Trigger;\nDialogTrigger.displayName = \"DialogTrigger\";\n\nconst DialogPortal = DialogPrimitive.Portal;\nDialogPortal.displayName = \"DialogPortal\";\n\nconst DialogClose = DialogPrimitive.Close;\nDialogClose.displayName = \"DialogClose\";\n\nconst DialogOverlay = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDialogOverlay.displayName = \"DialogOverlay\";\n\ntype DialogContentProps = ComponentPropsWithoutRef<\n\ttypeof DialogPrimitive.Content\n> & {\n\t/**\n\t * The preferred width of the `DialogContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Dialog`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `DialogContent`\n\t *\n\t * @default `max-w-lg`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The container for the dialog content.\n * Renders on top of the overlay and is centered in the viewport.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-content\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Dialog Title</DialogTitle>\n *       <DialogCloseIconButton />\n *     </DialogHeader>\n *     <DialogBody>\n *       <p>This is the dialog content.</p>\n *     </DialogBody>\n *     <DialogFooter>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nconst DialogContent = forwardRef<ComponentRef<\"div\">, DialogContentProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonInteractOutside,\n\t\t\tonPointerDownOutside,\n\t\t\tpreferredWidth = \"max-w-lg\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<DialogPortal>\n\t\t\t<DialogOverlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<DialogPrimitive.Content\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex max-h-full w-full flex-1 flex-col\",\n\t\t\t\t\t\t\"outline-none focus-within:outline-none\",\n\t\t\t\t\t\t\"border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200\",\n\t\t\t\t\t\t\"data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\t\t\tpreferredWidth,\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</DialogPrimitive.Content>\n\t\t\t</div>\n\t\t</DialogPortal>\n\t),\n);\nDialogContent.displayName = \"DialogContent\";\n\n/**\n * Contains the header content of the dialog, including the title and close button.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-header\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Dialog Title</DialogTitle>\n *       <DialogCloseIconButton />\n *     </DialogHeader>\n *     <DialogBody>\n *       <p>This is the dialog content.</p>\n *     </DialogBody>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nconst DialogHeader = ({\n\tclassName,\n\tchildren,\n\t...props\n}: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</div>\n);\nDialogHeader.displayName = \"DialogHeader\";\n\ntype DialogCloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\n\n/**\n * An icon button that closes the dialog when clicked.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-close-icon-button\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Dialog Title</DialogTitle>\n *       <DialogCloseIconButton />\n *     </DialogHeader>\n *     <DialogBody>\n *       <p>This is the dialog content.</p>\n *     </DialogBody>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nconst DialogCloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Dialog\",\n\tappearance = \"ghost\",\n\t...props\n}: DialogCloseIconButtonProps) => (\n\t<DialogPrimitive.Close asChild>\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={<XIcon />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t</DialogPrimitive.Close>\n);\nDialogCloseIconButton.displayName = \"DialogCloseIconButton\";\n\n/**\n * Contains the main content of the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-body\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Dialog Title</DialogTitle>\n *     </DialogHeader>\n *     <DialogBody>\n *       <p>This is the dialog content.</p>\n *     </DialogBody>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nconst DialogBody = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)}\n\t\t{...props}\n\t/>\n);\nDialogBody.displayName = \"DialogBody\";\n\n/**\n * Contains the footer content of the dialog, including action buttons.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-footer\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Dialog Title</DialogTitle>\n *     </DialogHeader>\n *     <DialogBody>\n *       <p>This is the dialog content.</p>\n *     </DialogBody>\n *     <DialogFooter>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nconst DialogFooter = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nDialogFooter.displayName = \"DialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-title\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Dialog Title</DialogTitle>\n *       <DialogCloseIconButton />\n *     </DialogHeader>\n *     <DialogBody>\n *       <p>This is the dialog content.</p>\n *     </DialogBody>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nconst DialogTitle = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong truncate text-lg font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nDialogTitle.displayName = \"DialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-description\n *\n * @example\n * ```tsx\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Dialog Title</DialogTitle>\n *       <DialogDescription>\n *         This is an optional description.\n *       </DialogDescription>\n *     </DialogHeader>\n *     <DialogBody>\n *       <p>This is the dialog content.</p>\n *     </DialogBody>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nconst DialogDescription = forwardRef<\n\tComponentRef<\"p\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cx(\"text-muted\", className)}\n\t\t{...props}\n\t/>\n));\nDialogDescription.displayName = \"DialogDescription\";\n\nexport {\n\tDialog,\n\tDialogBody,\n\tDialogClose,\n\tDialogCloseIconButton,\n\tDialogContent,\n\tDialogDescription,\n\tDialogFooter,\n\tDialogHeader,\n\tDialogOverlay,\n\tDialogPortal,\n\tDialogTitle,\n\tDialogTrigger,\n};\n"],"mappings":"gZAAA,OAAS,SAAAA,MAAa,0BAMtB,OAAS,cAAAC,MAAkB,QAgF1B,cAAAC,EAuEC,QAAAC,MAvED,oBAxCD,IAAMC,EAAyBC,EAC/BD,EAAO,YAAc,SA0BrB,IAAME,EAAgCC,EACtCD,EAAc,YAAc,gBAE5B,IAAME,EAA+BC,EACrCD,EAAa,YAAc,eAE3B,IAAME,EAA8BC,EACpCD,EAAY,YAAc,cAE1B,IAAME,EAAgBC,EAGpB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3Bd,EAAiBe,EAAhB,CACA,IAAKD,EACL,UAAWE,EACV,iKACAJ,CACD,EACC,GAAGC,EACL,CACA,EACDH,EAAc,YAAc,gBAkD5B,IAAMO,EAAgBN,EACrB,CACC,CACC,SAAAO,EACA,UAAAN,EACA,kBAAAO,EACA,qBAAAC,EACA,eAAAC,EAAiB,WACjB,GAAGR,CACJ,EACAC,IAEAb,EAACK,EAAA,CACA,UAAAN,EAACU,EAAA,EAAc,EACfV,EAAC,OAAI,UAAU,sDACd,SAAAA,EAAiBsB,EAAhB,CACA,UAAWN,EACV,yCACA,yCACA,wFACA,2KACAK,EACAT,CACD,EACA,kBAAoBW,GAAU,CAC7BC,EAAgCD,CAAK,EACrCJ,IAAoBI,CAAK,CAC1B,EACA,qBAAuBA,GAAU,CAChCC,EAAgCD,CAAK,EACrCH,IAAuBG,CAAK,CAC7B,EACA,IAAKT,EACJ,GAAGD,EAEH,SAAAK,EACF,EACD,GACD,CAEF,EACAD,EAAc,YAAc,gBA2B5B,IAAMQ,EAAe,CAAC,CACrB,UAAAb,EACA,SAAAM,EACA,GAAGL,CACJ,IACCb,EAAC,OACA,UAAWgB,EACV,+GACA,0BACAJ,CACD,EACC,GAAGC,EAEH,SAAAK,EACF,EAEDO,EAAa,YAAc,eA6B3B,IAAMC,EAAwB,CAAC,CAC9B,KAAAC,EAAO,KACP,KAAAC,EAAO,SACP,MAAAC,EAAQ,eACR,WAAAC,EAAa,QACb,GAAGjB,CACJ,IACCb,EAAiBS,EAAhB,CAAsB,QAAO,GAC7B,SAAAT,EAAC+B,EAAA,CACA,WAAYD,EACZ,KAAM9B,EAACgC,EAAA,EAAM,EACb,MAAOH,EACP,KAAMF,EACN,KAAMC,EACL,GAAGf,EACL,EACD,EAEDa,EAAsB,YAAc,wBA0BpC,IAAMO,EAAa,CAAC,CAAE,UAAArB,EAAW,GAAGC,CAAM,IACzCb,EAAC,OACA,UAAWgB,EAAG,iDAAkDJ,CAAS,EACxE,GAAGC,EACL,EAEDoB,EAAW,YAAc,aAkCzB,IAAMC,EAAe,CAAC,CAAE,UAAAtB,EAAW,GAAGC,CAAM,IAC3Cb,EAAC,OACA,UAAWgB,EACV,8EACAJ,CACD,EACC,GAAGC,EACL,EAEDqB,EAAa,YAAc,eA2B3B,IAAMC,EAAcxB,EAGlB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3Bd,EAAiBoC,EAAhB,CACA,IAAKtB,EACL,UAAWE,EAAG,2CAA4CJ,CAAS,EAClE,GAAGC,EACL,CACA,EACDsB,EAAY,YAAc,cA6B1B,IAAME,EAAoB1B,EAGxB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3Bd,EAAiBsC,EAAhB,CACA,IAAKxB,EACL,UAAWE,EAAG,aAAcJ,CAAS,EACpC,GAAGC,EACL,CACA,EACDwB,EAAkB,YAAc","names":["XIcon","forwardRef","jsx","jsxs","Dialog","Root","DialogTrigger","Trigger","DialogPortal","Portal","DialogClose","Close","DialogOverlay","forwardRef","className","props","ref","Overlay","cx","DialogContent","children","onInteractOutside","onPointerDownOutside","preferredWidth","Content","event","preventCloseOnPromptInteraction","DialogHeader","DialogCloseIconButton","size","type","label","appearance","IconButton","XIcon","DialogBody","DialogFooter","DialogTitle","Title","DialogDescription","Description"]}
+{"version":3,"sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n} from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\nimport * as DialogPrimitive from \"./primitive.js\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the Dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Root = DialogPrimitive.Root;\nRoot.displayName = \"Dialog\";\n\n/**\n * A button that opens the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-trigger\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Trigger = DialogPrimitive.Trigger;\nTrigger.displayName = \"DialogTrigger\";\n\nconst Portal = DialogPrimitive.Portal;\nPortal.displayName = \"DialogPortal\";\n\nconst Close = DialogPrimitive.Close;\nClose.displayName = \"DialogClose\";\n\nconst Overlay = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nOverlay.displayName = \"DialogOverlay\";\n\ntype ContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `Dialog.Content` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Dialog`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `Dialog.Content`\n\t *\n\t * @default `max-w-lg`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The container for the dialog content.\n * Renders on top of the overlay and is centered in the viewport.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-content\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ContentProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonInteractOutside,\n\t\t\tonPointerDownOutside,\n\t\t\tpreferredWidth = \"max-w-lg\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<Portal>\n\t\t\t<Overlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<DialogPrimitive.Content\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex max-h-full w-full flex-1 flex-col\",\n\t\t\t\t\t\t\"outline-none focus-within:outline-none\",\n\t\t\t\t\t\t\"border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200\",\n\t\t\t\t\t\t\"data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\t\t\tpreferredWidth,\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</DialogPrimitive.Content>\n\t\t\t</div>\n\t\t</Portal>\n\t),\n);\nContent.displayName = \"DialogContent\";\n\n/**\n * Contains the header content of the dialog, including the title and close button.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-header\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Header = ({ className, children, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</div>\n);\nHeader.displayName = \"DialogHeader\";\n\ntype CloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\n\n/**\n * An icon button that closes the dialog when clicked.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-close-icon-button\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst CloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Dialog\",\n\tappearance = \"ghost\",\n\t...props\n}: CloseIconButtonProps) => (\n\t<DialogPrimitive.Close asChild>\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={<XIcon />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t</DialogPrimitive.Close>\n);\nCloseIconButton.displayName = \"DialogCloseIconButton\";\n\n/**\n * Contains the main content of the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-body\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Body = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)}\n\t\t{...props}\n\t/>\n);\nBody.displayName = \"DialogBody\";\n\n/**\n * Contains the footer content of the dialog, including action buttons.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-footer\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Footer = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nFooter.displayName = \"DialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-title\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong truncate text-lg font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = \"DialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-description\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>\n *         This is an optional description.\n *       </Dialog.Description>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<\"p\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cx(\"text-muted\", className)}\n\t\t{...props}\n\t/>\n));\nDescription.displayName = \"DialogDescription\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n *\n * @see https://mantle.ngrok.com/components/dialog\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Dialog = {\n\t/**\n\t * A window overlaid on either the primary window or another dialog window.\n\t * The root stateful component for the Dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Button type=\"button\" appearance=\"outlined\">\n\t *         Cancel\n\t *       </Button>\n\t *       <Button type=\"button\" appearance=\"filled\">\n\t *         Save\n\t *       </Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the main content of the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-body\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * A button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-close\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Confirm Action</Dialog.Title>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <Text>Are you sure you want to proceed?</Text>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"submit\">Confirm</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * An icon button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-close-icon-button\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tCloseIconButton,\n\t/**\n\t * The container for the dialog content.\n\t * Renders on top of the overlay and is centered in the viewport.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Button type=\"button\" appearance=\"outlined\">\n\t *         Cancel\n\t *       </Button>\n\t *       <Button type=\"button\" appearance=\"filled\">\n\t *         Save\n\t *       </Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * An accessible description to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-description\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.Description>\n\t *         This is an optional description.\n\t *       </Dialog.Description>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * Contains the footer content of the dialog, including action buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-footer\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Button type=\"button\" appearance=\"outlined\">\n\t *         Cancel\n\t *       </Button>\n\t *       <Button type=\"button\" appearance=\"filled\">\n\t *         Save\n\t *       </Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * Contains the header content of the dialog, including the title and close button.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-header\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The overlay backdrop for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-overlay\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Portal>\n\t *     <Dialog.Overlay />\n\t *     <Dialog.Content>\n\t *       <Dialog.Header>\n\t *         <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       </Dialog.Header>\n\t *       <Dialog.Body>\n\t *         <Text>Dialog content here.</Text>\n\t *       </Dialog.Body>\n\t *     </Dialog.Content>\n\t *   </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tOverlay,\n\t/**\n\t * The portal container for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-portal\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Portal>\n\t *     <Dialog.Overlay />\n\t *     <Dialog.Content>\n\t *       <Dialog.Header>\n\t *         <Dialog.Title>Portal Dialog</Dialog.Title>\n\t *       </Dialog.Header>\n\t *       <Dialog.Body>\n\t *         <Text>This dialog is rendered in a portal.</Text>\n\t *       </Dialog.Body>\n\t *     </Dialog.Content>\n\t *   </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tPortal,\n\t/**\n\t * An accessible name to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-title\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A button that opens the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport { Dialog };\n"],"mappings":"gZAAA,OAAS,SAAAA,MAAa,0BAMtB,OAAS,cAAAC,MAAkB,QAgF1B,cAAAC,EAqEC,QAAAC,MArED,oBAxCD,IAAMC,EAAuBA,EAC7BA,EAAK,YAAc,SA0BnB,IAAMC,EAA0BA,EAChCA,EAAQ,YAAc,gBAEtB,IAAMC,EAAyBA,EAC/BA,EAAO,YAAc,eAErB,IAAMC,EAAwBA,EAC9BA,EAAM,YAAc,cAEpB,IAAMC,EAAUC,EAGd,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAiBM,EAAhB,CACA,IAAKI,EACL,UAAWC,EACV,iKACAH,CACD,EACC,GAAGC,EACL,CACA,EACDH,EAAQ,YAAc,gBAgDtB,IAAMM,EAAUL,EACf,CACC,CACC,SAAAM,EACA,UAAAL,EACA,kBAAAM,EACA,qBAAAC,EACA,eAAAC,EAAiB,WACjB,GAAGP,CACJ,EACAC,IAEAT,EAACG,EAAA,CACA,UAAAJ,EAACM,EAAA,EAAQ,EACTN,EAAC,OAAI,UAAU,sDACd,SAAAA,EAAiBY,EAAhB,CACA,UAAWD,EACV,yCACA,yCACA,wFACA,2KACAK,EACAR,CACD,EACA,kBAAoBS,GAAU,CAC7BC,EAAgCD,CAAK,EACrCH,IAAoBG,CAAK,CAC1B,EACA,qBAAuBA,GAAU,CAChCC,EAAgCD,CAAK,EACrCF,IAAuBE,CAAK,CAC7B,EACA,IAAKP,EACJ,GAAGD,EAEH,SAAAI,EACF,EACD,GACD,CAEF,EACAD,EAAQ,YAAc,gBA2BtB,IAAMO,EAAS,CAAC,CAAE,UAAAX,EAAW,SAAAK,EAAU,GAAGJ,CAAM,IAC/CT,EAAC,OACA,UAAWW,EACV,+GACA,0BACAH,CACD,EACC,GAAGC,EAEH,SAAAI,EACF,EAEDM,EAAO,YAAc,eA6BrB,IAAMC,EAAkB,CAAC,CACxB,KAAAC,EAAO,KACP,KAAAC,EAAO,SACP,MAAAC,EAAQ,eACR,WAAAC,EAAa,QACb,GAAGf,CACJ,IACCT,EAAiBK,EAAhB,CAAsB,QAAO,GAC7B,SAAAL,EAACyB,EAAA,CACA,WAAYD,EACZ,KAAMxB,EAAC0B,EAAA,EAAM,EACb,MAAOH,EACP,KAAMF,EACN,KAAMC,EACL,GAAGb,EACL,EACD,EAEDW,EAAgB,YAAc,wBA0B9B,IAAMO,EAAO,CAAC,CAAE,UAAAnB,EAAW,GAAGC,CAAM,IACnCT,EAAC,OACA,UAAWW,EAAG,iDAAkDH,CAAS,EACxE,GAAGC,EACL,EAEDkB,EAAK,YAAc,aAkCnB,IAAMC,EAAS,CAAC,CAAE,UAAApB,EAAW,GAAGC,CAAM,IACrCT,EAAC,OACA,UAAWW,EACV,8EACAH,CACD,EACC,GAAGC,EACL,EAEDmB,EAAO,YAAc,eA2BrB,IAAMC,EAAQtB,EAGZ,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAiB6B,EAAhB,CACA,IAAKnB,EACL,UAAWC,EAAG,2CAA4CH,CAAS,EAClE,GAAGC,EACL,CACA,EACDoB,EAAM,YAAc,cA6BpB,IAAMC,EAAcvB,EAGlB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAiB8B,EAAhB,CACA,IAAKpB,EACL,UAAWC,EAAG,aAAcH,CAAS,EACpC,GAAGC,EACL,CACA,EACDqB,EAAY,YAAc,oBAmC1B,IAAMC,EAAS,CAmCd,KAAA7B,EAyBA,KAAAyB,EA6BA,MAAAtB,EA0BA,gBAAAe,EAmCA,QAAAR,EA4BA,YAAAkB,EAiCA,OAAAF,EA0BA,OAAAT,EAuBA,QAAAb,EA0BA,OAAAF,EA0BA,MAAAyB,EAyBA,QAAA1B,CACD","names":["XIcon","forwardRef","jsx","jsxs","Root","Trigger","Portal","Close","Overlay","forwardRef","className","props","ref","cx","Content","children","onInteractOutside","onPointerDownOutside","preferredWidth","event","preventCloseOnPromptInteraction","Header","CloseIconButton","size","type","label","appearance","IconButton","XIcon","Body","Footer","Title","Description","Dialog"]}

package/dist/dropdown-menu.d.ts

@@ -5,118 +5,320 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
 /**
  * A menu of options or actions, triggered by a button.
- * This is the root, stateful component that manages the open/closed state of the dropdown menu.
  *
- * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu
+ * @see https://mantle.ngrok.com/components/dropdown-menu
  *
  * @example
  * ```tsx
- * <DropdownMenu>
- *   <DropdownMenuTrigger asChild>
+ * <DropdownMenu.Root>
+ *   <DropdownMenu.Trigger asChild>
  *     <Button type="button" appearance="outlined">
  *       Open Menu
  *     </Button>
- *   </DropdownMenuTrigger>
- *   <DropdownMenuContent>
- *     <DropdownMenuItem>Item 1</DropdownMenuItem>
- *     <DropdownMenuItem>Item 2</DropdownMenuItem>
- *   </DropdownMenuContent>
- * </DropdownMenu>
+ *   </DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>
+ *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu.Root>
  * ```
  */
-declare const DropdownMenu: react.FC<DropdownMenuPrimitive.DropdownMenuProps>;
-/**
- * The trigger button that opens the dropdown menu.
- *
- * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-trigger
- *
- * @example
- * ```tsx
- * <DropdownMenu>
- *   <DropdownMenuTrigger asChild>
- *     <Button type="button" appearance="outlined">
- *       Open Menu
- *     </Button>
- *   </DropdownMenuTrigger>
- *   <DropdownMenuContent>
- *     <DropdownMenuItem>Item 1</DropdownMenuItem>
- *   </DropdownMenuContent>
- * </DropdownMenu>
- * ```
- */
-declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
-declare const DropdownMenuGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuPortal: react.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
-declare const DropdownMenuSub: react.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
-declare const DropdownMenuRadioGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuSubTrigger: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
-    inset?: boolean;
-} & react.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuSubContent: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-/**
- * The container for the dropdown menu content.
- *
- * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-content
- *
- * @example
- * ```tsx
- * <DropdownMenu>
- *   <DropdownMenuTrigger asChild>
- *     <Button type="button" appearance="outlined">
- *       Open Menu
- *     </Button>
- *   </DropdownMenuTrigger>
- *   <DropdownMenuContent>
- *     <DropdownMenuItem>Item 1</DropdownMenuItem>
- *     <DropdownMenuItem>Item 2</DropdownMenuItem>
- *   </DropdownMenuContent>
- * </DropdownMenu>
- * ```
- */
-declare const DropdownMenuContent: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+declare const DropdownMenu: {
     /**
-     * Whether the DropdownMenuContent should match the width of the trigger or use the intrinsic content width.
+     * The root, stateful component that manages the open/closed state of the dropdown menu.
+     *
+     * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu
+     *
+     * @example
+     * ```tsx
+     * <DropdownMenu.Root>
+     *   <DropdownMenu.Trigger asChild>
+     *     <Button>Open Menu</Button>
+     *   </DropdownMenu.Trigger>
+     *   <DropdownMenu.Content>
+     *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>
+     *   </DropdownMenu.Content>
+     * </DropdownMenu.Root>
+     * ```
      */
-    width?: "trigger" | "content";
-} & react.RefAttributes<HTMLDivElement>>;
-/**
- * An item in the dropdown menu.
- *
- * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-item
- *
- * @example
- * ```tsx
- * <DropdownMenu>
- *   <DropdownMenuTrigger asChild>
- *     <Button type="button" appearance="outlined">
- *       Open Menu
- *     </Button>
- *   </DropdownMenuTrigger>
- *   <DropdownMenuContent>
- *     <DropdownMenuItem>Item 1</DropdownMenuItem>
- *     <DropdownMenuItem>Item 2</DropdownMenuItem>
- *   </DropdownMenuContent>
- * </DropdownMenu>
- * ```
- */
-declare const DropdownMenuItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
-    inset?: boolean;
-} & react.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuCheckboxItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuRadioItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
-    name?: string;
-    id?: string;
-} & react.RefAttributes<HTMLInputElement>>;
-declare const DropdownMenuLabel: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
-    inset?: boolean;
-} & react.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuSeparator: react.ForwardRefExoticComponent<Omit<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & WithAsChild & {
-    orientation?: "horizontal" | "vertical";
-    semantic?: boolean;
-}, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuShortcut: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
-    displayName: string;
+    readonly Root: react.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+    /**
+     * A checkbox item in the dropdown menu that can be toggled on and off.
+     *
+     * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-checkbox-item
+     *
+     * @example
+     * ```tsx
+     * <DropdownMenu.Root>
+     *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+     *   <DropdownMenu.Content>
+     *     <DropdownMenu.CheckboxItem checked={true} onCheckedChange={setChecked}>
+     *       Show notifications
+     *     </DropdownMenu.CheckboxItem>
+     *   </DropdownMenu.Content>
+     * </DropdownMenu.Root>
+     * ```
+     */
+    readonly CheckboxItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * The container for the dropdown menu content. Appears in a portal with scrolling and animations.
+     *
+     * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-content
+     *
+     * @example
+     * ```tsx
+     * <DropdownMenu.Root>
+     *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+     *   <DropdownMenu.Content width="trigger">
+     *     <DropdownMenu.Item>Edit</DropdownMenu.Item>
+     *     <DropdownMenu.Item>Delete</DropdownMenu.Item>
+     *   </DropdownMenu.Content>
+     * </DropdownMenu.Root>
+     * ```
+     */
+    readonly Content: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+        /**
+         * Whether the DropdownMenuContent should match the width of the trigger or use the intrinsic content width.
+         */
+        width?: "trigger" | "content";
+    } & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * A group container for organizing related dropdown menu items.
+     *
+     * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-group
+     *
+     * @example
+     * ```tsx
+     * <DropdownMenu.Root>
+     *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+     *   <DropdownMenu.Content>
+     *     <DropdownMenu.Group>
+     *       <DropdownMenu.Label>Account</DropdownMenu.Label>
+     *       <DropdownMenu.Item>Profile</DropdownMenu.Item>
+     *       <DropdownMenu.Item>Settings</DropdownMenu.Item>
+     *     </DropdownMenu.Group>
+     *   </DropdownMenu.Content>
+     * </DropdownMenu.Root>
+     * ```
+     */
+    readonly Group: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * A standard item in the dropdown menu that can be selected or activated.
+     *
+     * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-item
+     *
+     * @example
+     * ```tsx
+     * <DropdownMenu.Root>
+     *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+     *   <DropdownMenu.Content>
+     *     <DropdownMenu.Item onSelect={() => handleEdit()}>
+     *       Edit
+     *     </DropdownMenu.Item>
+     *     <DropdownMenu.Item disabled>
+     *       Delete
+     *     </DropdownMenu.Item>
+     *   </DropdownMenu.Content>
+     * </DropdownMenu.Root>
+     * ```
+     */
+    readonly Item: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+        inset?: boolean;
+    } & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * A label for grouping and describing sections within the dropdown menu.
+     *
+     * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-label
+     *
+     * @example
+     * ```tsx
+     * <DropdownMenu.Root>
+     *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+     *   <DropdownMenu.Content>
+     *     <DropdownMenu.Label>My Account</DropdownMenu.Label>
+     *     <DropdownMenu.Item>Profile</DropdownMenu.Item>
+     *     <DropdownMenu.Item>Settings</DropdownMenu.Item>
+     *   </DropdownMenu.Content>
+     * </DropdownMenu.Root>
+     * ```
+     */
+    readonly Label: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+        inset?: boolean;
+    } & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * A radio group container for exclusive selection within the dropdown menu.
+     *
+     * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-radio-group
+     *
+     * @example
+     * ```tsx
+     * <DropdownMenu.Root>
+     *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+     *   <DropdownMenu.Content>
+     *     <DropdownMenu.RadioGroup value={value} onValueChange={setValue}>
+     *       <DropdownMenu.RadioItem value="option1">Option 1</DropdownMenu.RadioItem>
+     *       <DropdownMenu.RadioItem value="option2">Option 2</DropdownMenu.RadioItem>
+     *     </DropdownMenu.RadioGroup>
+     *   </DropdownMenu.Content>
+     * </DropdownMenu.Root>
+     * ```
+     */
+    readonly RadioGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * A radio item in the dropdown menu where only one item in the group can be selected.
+     *
+     * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-radio-item
+     *
+     * @example
+     * ```tsx
+     * <DropdownMenu.Root>
+     *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+     *   <DropdownMenu.Content>
+     *     <DropdownMenu.RadioGroup value="small" onValueChange={setSize}>
+     *       <DropdownMenu.RadioItem value="small">Small</DropdownMenu.RadioItem>
+     *       <DropdownMenu.RadioItem value="medium">Medium</DropdownMenu.RadioItem>
+     *       <DropdownMenu.RadioItem value="large">Large</DropdownMenu.RadioItem>
+     *     </DropdownMenu.RadioGroup>
+     *   </DropdownMenu.Content>
+     * </DropdownMenu.Root>
+     * ```
+     */
+    readonly RadioItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+        name?: string;
+        id?: string;
+    } & react.RefAttributes<HTMLInputElement>>;
+    /**
+     * A visual separator for dividing sections within the dropdown menu.
+     *
+     * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-separator
+     *
+     * @example
+     * ```tsx
+     * <DropdownMenu.Root>
+     *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+     *   <DropdownMenu.Content>
+     *     <DropdownMenu.Item>Edit</DropdownMenu.Item>
+     *     <DropdownMenu.Item>Copy</DropdownMenu.Item>
+     *     <DropdownMenu.Separator />
+     *     <DropdownMenu.Item>Delete</DropdownMenu.Item>
+     *   </DropdownMenu.Content>
+     * </DropdownMenu.Root>
+     * ```
+     */
+    readonly Separator: react.ForwardRefExoticComponent<Omit<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & WithAsChild & {
+        orientation?: "horizontal" | "vertical";
+        semantic?: boolean;
+    }, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * A keyboard shortcut indicator for dropdown menu items.
+     *
+     * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-shortcut
+     *
+     * @example
+     * ```tsx
+     * <DropdownMenu.Root>
+     *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+     *   <DropdownMenu.Content>
+     *     <DropdownMenu.Item>
+     *       Save
+     *       <DropdownMenu.Shortcut>⌘S</DropdownMenu.Shortcut>
+     *     </DropdownMenu.Item>
+     *   </DropdownMenu.Content>
+     * </DropdownMenu.Root>
+     * ```
+     */
+    readonly Shortcut: {
+        ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+    /**
+     * A submenu container for creating nested dropdown menus.
+     *
+     * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-sub
+     *
+     * @example
+     * ```tsx
+     * <DropdownMenu.Root>
+     *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+     *   <DropdownMenu.Content>
+     *     <DropdownMenu.Sub>
+     *       <DropdownMenu.SubTrigger>More options</DropdownMenu.SubTrigger>
+     *       <DropdownMenu.SubContent>
+     *         <DropdownMenu.Item>Sub item 1</DropdownMenu.Item>
+     *         <DropdownMenu.Item>Sub item 2</DropdownMenu.Item>
+     *       </DropdownMenu.SubContent>
+     *     </DropdownMenu.Sub>
+     *   </DropdownMenu.Content>
+     * </DropdownMenu.Root>
+     * ```
+     */
+    readonly Sub: react.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+    /**
+     * The content container for submenu items.
+     *
+     * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-sub-content
+     *
+     * @example
+     * ```tsx
+     * <DropdownMenu.Root>
+     *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+     *   <DropdownMenu.Content>
+     *     <DropdownMenu.Sub>
+     *       <DropdownMenu.SubTrigger>Export</DropdownMenu.SubTrigger>
+     *       <DropdownMenu.SubContent>
+     *         <DropdownMenu.Item>Export as PDF</DropdownMenu.Item>
+     *         <DropdownMenu.Item>Export as CSV</DropdownMenu.Item>
+     *       </DropdownMenu.SubContent>
+     *     </DropdownMenu.Sub>
+     *   </DropdownMenu.Content>
+     * </DropdownMenu.Root>
+     * ```
+     */
+    readonly SubContent: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * The trigger item that opens a submenu when hovered or focused.
+     *
+     * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-sub-trigger
+     *
+     * @example
+     * ```tsx
+     * <DropdownMenu.Root>
+     *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+     *   <DropdownMenu.Content>
+     *     <DropdownMenu.Sub>
+     *       <DropdownMenu.SubTrigger>Share</DropdownMenu.SubTrigger>
+     *       <DropdownMenu.SubContent>
+     *         <DropdownMenu.Item>Email</DropdownMenu.Item>
+     *         <DropdownMenu.Item>Copy link</DropdownMenu.Item>
+     *       </DropdownMenu.SubContent>
+     *     </DropdownMenu.Sub>
+     *   </DropdownMenu.Content>
+     * </DropdownMenu.Root>
+     * ```
+     */
+    readonly SubTrigger: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+        inset?: boolean;
+    } & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * The trigger button that opens the dropdown menu.
+     *
+     * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-trigger
+     *
+     * @example
+     * ```tsx
+     * <DropdownMenu.Root>
+     *   <DropdownMenu.Trigger asChild>
+     *     <Button type="button" appearance="outlined">
+     *       Open Menu
+     *     </Button>
+     *   </DropdownMenu.Trigger>
+     *   <DropdownMenu.Content>
+     *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>
+     *   </DropdownMenu.Content>
+     * </DropdownMenu.Root>
+     * ```
+     */
+    readonly Trigger: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 };
 
-export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
+export { DropdownMenu };

package/dist/dropdown-menu.js

@@ -1,2 +1,2 @@
-import{b as c}from"./chunk-J6ZF5J72.js";import{a as s}from"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a}from"./chunk-AZ56JGNY.js";import{CaretRightIcon as k}from"@phosphor-icons/react/CaretRight";import{CheckIcon as w}from"@phosphor-icons/react/Check";import*as e from"@radix-ui/react-dropdown-menu";import{forwardRef as d}from"react";import{jsx as o,jsxs as u}from"react/jsx-runtime";var f=e.Root;f.displayName="DropdownMenu";var g=e.Trigger;g.displayName="DropdownMenuTrigger";var M=e.Group;M.displayName="DropdownMenuGroup";var m=e.Portal;m.displayName="DropdownMenuPortal";var D=e.Sub;D.displayName="DropdownMenuSub";var h=e.RadioGroup;h.displayName="DropdownMenuRadioGroup";var v=d(({className:t,inset:n,children:r,...i},p)=>u(e.SubTrigger,{className:a("focus:bg-accent data-state-open:bg-accent relative flex cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-9 text-sm outline-none","data-highlighted:bg-popover-hover data-state-open:bg-popover-hover","[&>svg]:size-5 [&_svg]:shrink-0",n&&"pl-8",t),ref:p,...i,children:[r,o("span",{className:"absolute right-2 flex items-center",children:o(s,{svg:o(k,{weight:"bold"}),className:"size-4"})})]}));v.displayName="DropdownMenuSubTrigger";var b=d(({className:t,loop:n=!0,...r},i)=>o(m,{children:o(e.SubContent,{className:a("scrollbar","text-popover-foreground border-popover bg-popover p-1.25 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl","my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto",t),loop:n,ref:i,...r})}));b.displayName="DropdownMenuSubContent";var P=d(({className:t,onClick:n,loop:r=!0,width:i,...p},S)=>o(m,{children:o(e.Content,{ref:S,className:a("scrollbar","text-popover-foreground border-popover bg-popover p-1.25 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl outline-none","data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95","my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto",i==="trigger"&&"w-[var(--radix-dropdown-menu-trigger-width)]",t),loop:r,onClick:l=>{l.stopPropagation(),n?.(l)},...p})}));P.displayName="DropdownMenuContent";var y=d(({className:t,inset:n,...r},i)=>o(e.Item,{ref:i,className:a("focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-popover-hover data-active-item:dark:bg-popover-hover relative flex cursor-pointer select-none items-center rounded px-2 py-1.5 text-sm font-normal outline-none transition-colors","[&>svg]:size-5 [&_svg]:shrink-0",n&&"pl-8",t),...r}));y.displayName="DropdownMenuItem";var x=d(({className:t,children:n,checked:r,...i},p)=>u(e.CheckboxItem,{ref:p,className:a("text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 pl-2 pr-9 text-sm font-normal outline-none","data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover","aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium","[&>svg]:size-5 [&_svg]:shrink-0",t),checked:r,...i,children:[o("span",{className:"absolute right-2 flex items-center",children:o(e.ItemIndicator,{children:o(s,{svg:o(w,{weight:"bold"}),className:"size-4"})})}),n]}));x.displayName="DropdownMenuCheckboxItem";var C=d(({className:t,children:n,...r},i)=>u(e.RadioItem,{className:a("group/dropdown-menu-radio-item","text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 px-2 text-sm font-normal outline-none","data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover","aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium aria-checked:pr-9","[&>svg]:size-5 [&_svg]:shrink-0",t),ref:i,...r,children:[o("span",{className:"absolute right-2 items-center hidden group-aria-checked/dropdown-menu-radio-item:flex",children:o(e.ItemIndicator,{children:o(s,{svg:o(w,{weight:"bold"}),className:"size-4"})})}),n]}));C.displayName="DropdownMenuRadioItem";var R=d(({className:t,inset:n,...r},i)=>o(e.Label,{ref:i,className:a("px-2 py-1.5 text-sm font-semibold",n&&"pl-8",t),...r}));R.displayName="DropdownMenuLabel";var I=d(({className:t,...n},r)=>o(c,{ref:r,className:a("-mx-1.25 my-1 w-auto",t),...n}));I.displayName="DropdownMenuSeparator";var N=({className:t,...n})=>o("span",{className:a("ml-auto text-xs tracking-widest opacity-60",t),...n});N.displayName="DropdownMenuShortcut";export{f as DropdownMenu,x as DropdownMenuCheckboxItem,P as DropdownMenuContent,M as DropdownMenuGroup,y as DropdownMenuItem,R as DropdownMenuLabel,m as DropdownMenuPortal,h as DropdownMenuRadioGroup,C as DropdownMenuRadioItem,I as DropdownMenuSeparator,N as DropdownMenuShortcut,D as DropdownMenuSub,b as DropdownMenuSubContent,v as DropdownMenuSubTrigger,g as DropdownMenuTrigger};
+import{b as c}from"./chunk-J6ZF5J72.js";import{a as s}from"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a}from"./chunk-AZ56JGNY.js";import{CaretRightIcon as S}from"@phosphor-icons/react/CaretRight";import{CheckIcon as f}from"@phosphor-icons/react/Check";import*as e from"@radix-ui/react-dropdown-menu";import{forwardRef as d}from"react";import{jsx as o,jsxs as l}from"react/jsx-runtime";var g=e.Root;g.displayName="DropdownMenu";var v=e.Trigger;v.displayName="DropdownMenuTrigger";var h=e.Group;h.displayName="DropdownMenuGroup";var m=e.Portal;m.displayName="DropdownMenuPortal";var w=e.Sub;w.displayName="DropdownMenuSub";var b=e.RadioGroup;b.displayName="DropdownMenuRadioGroup";var M=d(({className:t,inset:n,children:r,...i},p)=>l(e.SubTrigger,{className:a("focus:bg-accent data-state-open:bg-accent relative flex cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-9 text-sm outline-none","data-highlighted:bg-popover-hover data-state-open:bg-popover-hover","[&>svg]:size-5 [&_svg]:shrink-0",n&&"pl-8",t),ref:p,...i,children:[r,o("span",{className:"absolute right-2 flex items-center",children:o(s,{svg:o(S,{weight:"bold"}),className:"size-4"})})]}));M.displayName="DropdownMenuSubTrigger";var D=d(({className:t,loop:n=!0,...r},i)=>o(m,{children:o(e.SubContent,{className:a("scrollbar","text-popover-foreground border-popover bg-popover p-1.25 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl","my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto",t),loop:n,ref:i,...r})}));D.displayName="DropdownMenuSubContent";var P=d(({className:t,onClick:n,loop:r=!0,width:i,...p},k)=>o(m,{children:o(e.Content,{ref:k,className:a("scrollbar","text-popover-foreground border-popover bg-popover p-1.25 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl outline-none","data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95","my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto",i==="trigger"&&"w-[var(--radix-dropdown-menu-trigger-width)]",t),loop:r,onClick:u=>{u.stopPropagation(),n?.(u)},...p})}));P.displayName="DropdownMenuContent";var y=d(({className:t,inset:n,...r},i)=>o(e.Item,{ref:i,className:a("focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-popover-hover data-active-item:dark:bg-popover-hover relative flex cursor-pointer select-none items-center rounded px-2 py-1.5 text-sm font-normal outline-none transition-colors","[&>svg]:size-5 [&_svg]:shrink-0",n&&"pl-8",t),...r}));y.displayName="DropdownMenuItem";var x=d(({className:t,children:n,checked:r,...i},p)=>l(e.CheckboxItem,{ref:p,className:a("text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 pl-2 pr-9 text-sm font-normal outline-none","data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover","aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium","[&>svg]:size-5 [&_svg]:shrink-0",t),checked:r,...i,children:[o("span",{className:"absolute right-2 flex items-center",children:o(e.ItemIndicator,{children:o(s,{svg:o(f,{weight:"bold"}),className:"size-4"})})}),n]}));x.displayName="DropdownMenuCheckboxItem";var C=d(({className:t,children:n,...r},i)=>l(e.RadioItem,{className:a("group/dropdown-menu-radio-item","text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 px-2 text-sm font-normal outline-none","data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover","aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium aria-checked:pr-9","[&>svg]:size-5 [&_svg]:shrink-0",t),ref:i,...r,children:[o("span",{className:"absolute right-2 items-center hidden group-aria-checked/dropdown-menu-radio-item:flex",children:o(e.ItemIndicator,{children:o(s,{svg:o(f,{weight:"bold"}),className:"size-4"})})}),n]}));C.displayName="DropdownMenuRadioItem";var R=d(({className:t,inset:n,...r},i)=>o(e.Label,{ref:i,className:a("px-2 py-1.5 text-sm font-semibold",n&&"pl-8",t),...r}));R.displayName="DropdownMenuLabel";var N=d(({className:t,...n},r)=>o(c,{ref:r,className:a("-mx-1.25 my-1 w-auto",t),...n}));N.displayName="DropdownMenuSeparator";var I=({className:t,...n})=>o("span",{className:a("ml-auto text-xs tracking-widest opacity-60",t),...n});I.displayName="DropdownMenuShortcut";var z={Root:g,CheckboxItem:x,Content:P,Group:h,Item:y,Label:R,RadioGroup:b,RadioItem:C,Separator:N,Shortcut:I,Sub:w,SubContent:D,SubTrigger:M,Trigger:v};export{z as DropdownMenu};
 //# sourceMappingURL=dropdown-menu.js.map