@ngrok/mantle 0.65.0 → 0.66.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/alert-dialog.js +1 -1
- package/dist/alert-dialog.js.map +1 -1
- package/dist/browser-only.js +1 -1
- package/dist/{chunk-EIEPGCIG.js → chunk-2FYR6IJV.js} +2 -2
- package/dist/chunk-5VDCC3YW.js +2 -0
- package/dist/chunk-5VDCC3YW.js.map +1 -0
- package/dist/chunk-EVU5XGB4.js +2 -0
- package/dist/chunk-EVU5XGB4.js.map +1 -0
- package/dist/{chunk-KCF3KPUB.js → chunk-LBO5LEYM.js} +2 -2
- package/dist/{chunk-HF3KJHO3.js → chunk-SGGOH2WW.js} +2 -2
- package/dist/command.js +1 -1
- package/dist/command.js.map +1 -1
- package/dist/dialog.js +1 -1
- package/dist/hooks.d.ts +56 -3
- package/dist/hooks.js +1 -1
- package/dist/hooks.js.map +1 -1
- package/dist/icons.js +1 -1
- package/dist/icons.js.map +1 -1
- package/dist/multi-select.d.ts +270 -0
- package/dist/multi-select.js +2 -0
- package/dist/multi-select.js.map +1 -0
- package/dist/sheet.js +1 -1
- package/dist/sheet.js.map +1 -1
- package/dist/theme.js +1 -1
- package/dist/toast.js +1 -1
- package/package.json +10 -2
- package/dist/chunk-KMNACVH6.js +0 -2
- package/dist/chunk-KMNACVH6.js.map +0 -1
- package/dist/chunk-NJNFZ2EG.js +0 -2
- package/dist/chunk-NJNFZ2EG.js.map +0 -1
- /package/dist/{chunk-EIEPGCIG.js.map → chunk-2FYR6IJV.js.map} +0 -0
- /package/dist/{chunk-KCF3KPUB.js.map → chunk-LBO5LEYM.js.map} +0 -0
- /package/dist/{chunk-HF3KJHO3.js.map → chunk-SGGOH2WW.js.map} +0 -0
package/dist/alert-dialog.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as y,b as A,c as u,d as c,e as D,f as C,g as P,h as v}from"./chunk-ELZLLG6G.js";import{d as f}from"./chunk-
|
|
1
|
+
import{a as y,b as A,c as u,d as c,e as D,f as C,g as P,h as v}from"./chunk-ELZLLG6G.js";import{d as f}from"./chunk-2FYR6IJV.js";import"./chunk-SGGOH2WW.js";import"./chunk-6J7D73WA.js";import"./chunk-5VDCC3YW.js";import{a as d}from"./chunk-W5A5HSFE.js";import"./chunk-63ZAW25Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-IVQ626TU.js";import{a as p}from"./chunk-ADF5DAYG.js";import{a as g}from"./chunk-SBQHQ2SJ.js";import{a}from"./chunk-PFXFESEN.js";import{InfoIcon as H}from"@phosphor-icons/react/Info";import{WarningIcon as k}from"@phosphor-icons/react/Warning";import{createContext as M,forwardRef as n,useContext as $,useMemo as q}from"react";import E from"tiny-invariant";import{jsx as i,jsxs as J}from"react/jsx-runtime";var x=M(null);function N(){let t=$(x);return E(t,"AlertDialog child component used outside of AlertDialog parent!"),t}function h({priority:t,...e}){let o=q(()=>({priority:t}),[t]);return i(x.Provider,{value:o,children:i(y,{...e})})}h.displayName="AlertDialog";var R=A;R.displayName="AlertDialogTrigger";var b=u;b.displayName="AlertDialogPortal";var W=n(({className:t,...e},o)=>i(D,{className:a("data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs",t),...e,ref:o}));W.displayName="AlertDialogOverlay";var I=n(({className:t,onInteractOutside:e,onPointerDownOutside:o,preferredWidth:r="max-w-md",...l},m)=>J(b,{children:[i(W,{}),i("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:i(C,{ref:m,className:a("flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start","outline-hidden focus-within:outline-hidden","p-6","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",r,t),onInteractOutside:s=>{f(s),e?.(s)},onPointerDownOutside:s=>{f(s),o?.(s)},...l})})]}));I.displayName="AlertDialogContent";var O=n(({asChild:t=!1,className:e,...o},r)=>i(t?p:"div",{className:a("flex-1 space-y-4",e),ref:r,...o}));O.displayName="AlertDialogBody";var w=n(({asChild:t=!1,className:e,...o},r)=>i(t?p:"div",{className:a("flex flex-col space-y-2 text-center sm:text-start",e),ref:r,...o}));w.displayName="AlertDialogHeader";var B=n(({asChild:t=!1,className:e,...o},r)=>i(t?p:"div",{className:a("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e),ref:r,...o}));B.displayName="AlertDialogFooter";var T=n(({className:t,...e},o)=>i(P,{ref:o,className:a("text-strong text-center text-lg font-medium sm:text-start",t),...e}));T.displayName="AlertDialogTitle";var z=n(({className:t,...e},o)=>i(v,{ref:o,className:a("text-body text-center text-sm font-normal sm:text-start",t),...e}));z.displayName="AlertDialogDescription";var S=n(({appearance:t="filled",...e},o)=>{let r=N(),l="default";return r.priority==="danger"&&(l="danger"),i(d,{appearance:t,priority:l,ref:o,...e})});S.displayName="AlertDialogAction";var j=n(({appearance:t="outlined",className:e,priority:o="neutral",...r},l)=>i(c,{asChild:!0,children:i(d,{appearance:t,className:a("mt-2 sm:mt-0",e),priority:o,ref:l,...r})}));j.displayName="AlertDialogCancel";var V=n(({className:t,svg:e,...o},r)=>{let l=N(),m=l.priority==="danger"?"text-danger-600":"text-accent-600",s=l.priority==="danger"?i(k,{}):i(H,{});return i(g,{ref:r,className:a("size-12 sm:size-7",m,t),svg:e??s,...o})});V.displayName="AlertDialogIcon";var F=c;F.displayName="AlertDialogClose";var G={Root:h,Action:S,Body:O,Cancel:j,Close:F,Content:I,Description:z,Footer:B,Header:w,Icon:V,Title:T,Trigger:R};export{G as AlertDialog};
|
|
2
2
|
//# sourceMappingURL=alert-dialog.js.map
|
package/dist/alert-dialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\ttype ReactNode,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Button, type ButtonPriority, type ButtonProps } from \"../button/button.js\";\nimport * as AlertDialogPrimitive from \"../dialog/primitive.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Slot } from \"../slot/index.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\n\nconst priorities = [\"info\", \"danger\"] as const;\ntype Priority = (typeof priorities)[number];\n\ntype AlertDialogContextValue = {\n\tpriority: Priority;\n};\n\nconst AlertDialogContext = createContext<AlertDialogContextValue | null>(null);\n\nfunction useAlertDialogContext() {\n\tconst context = useContext(AlertDialogContext);\n\tinvariant(context, \"AlertDialog child component used outside of AlertDialog parent!\");\n\treturn context;\n}\n\ntype AlertDialogProps = ComponentProps<typeof AlertDialogPrimitive.Root> & {\n\t/**\n\t * Indicates the importance or impact level of the AlertDialog, affecting its\n\t * color and styling to communicate its purpose to the user.\n\t */\n\tpriority: Priority;\n};\n\n/**\n * A modal dialog that interrupts the user with important content and expects a\n * response.\n * The root stateful component for the Alert Dialog.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogroot\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nfunction Root({ priority, ...props }: AlertDialogProps) {\n\tconst context: AlertDialogContextValue = useMemo(() => ({ priority }), [priority]);\n\n\treturn (\n\t\t<AlertDialogContext.Provider value={context}>\n\t\t\t<AlertDialogPrimitive.Root {...props} />\n\t\t</AlertDialogContext.Provider>\n\t);\n}\nRoot.displayName = \"AlertDialog\";\n\n/**\n * A button that opens the Alert Dialog.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogtrigger\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Trigger = AlertDialogPrimitive.Trigger;\nTrigger.displayName = \"AlertDialogTrigger\";\n\n/**\n * The portal for the Alert Dialog.\n *\n * @private\n */\nconst AlertDialogPortal = AlertDialogPrimitive.Portal;\nAlertDialogPortal.displayName = \"AlertDialogPortal\";\n\n/**\n * A layer that covers the inert portion of the view when the dialog is open.\n *\n * @private\n */\nconst AlertDialogOverlay = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Overlay\n\t\tclassName={cx(\n\t\t\t\"data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t\tref={ref}\n\t/>\n));\nAlertDialogOverlay.displayName = \"AlertDialogOverlay\";\n\ntype AlertDialogContentProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `AlertDialogContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `AlertDialog`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `AlertDialogContent`\n\t *\n\t * @default `max-w-md`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The popover alert dialog container.\n *\n * Renders on top of the overlay and is centered in the viewport.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcontent\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Content>,\n\tAlertDialogContentProps\n>(\n\t(\n\t\t{ className, onInteractOutside, onPointerDownOutside, preferredWidth = \"max-w-md\", ...props },\n\t\tref,\n\t) => (\n\t\t<AlertDialogPortal>\n\t\t\t<AlertDialogOverlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<AlertDialogPrimitive.Content\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start\",\n\t\t\t\t\t\t\"outline-hidden focus-within:outline-hidden\",\n\t\t\t\t\t\t\"p-6\",\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\t{...props}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</AlertDialogPortal>\n\t),\n);\nContent.displayName = \"AlertDialogContent\";\n\n/**\n * Contains the main content of the alert dialog.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogbody\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Body = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn <Component className={cx(\"flex-1 space-y-4\", className)} ref={ref} {...props} />;\n\t},\n);\nBody.displayName = \"AlertDialogBody\";\n\n/**\n * Contains the header content of the dialog, including the title and description.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogheader\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Header = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\"flex flex-col space-y-2 text-center sm:text-start\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nHeader.displayName = \"AlertDialogHeader\";\n\n/**\n * Contains the footer content of the dialog, including the action and cancel buttons.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogfooter\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Footer = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nFooter.displayName = \"AlertDialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * Alternatively, you can provide `aria-label` or `aria-labelledby` to\n * `AlertDialogContent` and exclude this component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogtitle\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong text-center text-lg font-medium sm:text-start\", className)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = \"AlertDialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\n * Renders as a `div` by default, but can be changed to any other element using\n * the `asChild` prop.\n *\n * Alternatively, you can provide `aria-describedby` to `AlertDialogContent` and\n * exclude this component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogdescription\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cx(\"text-body text-center text-sm font-normal sm:text-start\", className)}\n\t\t{...props}\n\t/>\n));\nDescription.displayName = \"AlertDialogDescription\";\n\n/**\n * A button that confirms the Alert Dialog action.\n * Will default to appearance=\"filled\", as well as the priority color from the `AlertDialog`.\n * Does not close the alert dialog by default.\n *\n * These buttons should be distinguished visually from the AlertDialogCancel button.\n *\n * Composes around the mantle Button component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogaction\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Action = forwardRef<ComponentRef<\"button\">, ButtonProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\tappearance = \"filled\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ctx = useAlertDialogContext();\n\t\tlet buttonPriority: NonNullable<ButtonPriority> = \"default\";\n\t\tif (ctx.priority === \"danger\") {\n\t\t\tbuttonPriority = \"danger\";\n\t\t}\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\t//\n\t\t\t\tappearance={appearance}\n\t\t\t\tpriority={buttonPriority}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAction.displayName = \"AlertDialogAction\";\n\n/**\n * A button that closes the dialog and cancels the action.\n * Will default to appearance=\"outlined\" and priority=\"neutral\".\n *\n * This button should be distinguished visually from AlertDialogAction buttons.\n *\n * Composes around the mantle Button component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcancel\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Cancel = forwardRef<ComponentRef<\"button\">, ButtonProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\tappearance = \"outlined\",\n\t\t\tclassName,\n\t\t\tpriority = \"neutral\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<AlertDialogPrimitive.Close asChild>\n\t\t\t<Button\n\t\t\t\tappearance={appearance}\n\t\t\t\tclassName={cx(\"mt-2 sm:mt-0\", className)}\n\t\t\t\tpriority={priority}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</AlertDialogPrimitive.Close>\n\t),\n);\nCancel.displayName = \"AlertDialogCancel\";\n\ntype AlertDialogIconProps = Omit<SvgAttributes, \"children\"> & {\n\tsvg?: ReactNode;\n};\n\n/**\n * An icon that visually represents the priority of the AlertDialog.\n *\n * Defaults to a warning icon for danger priority and an info icon for info\n * priority with the appropriate color.\n *\n * Can be overridden with a custom icon using the `svg` prop.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogicon\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, AlertDialogIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useAlertDialogContext();\n\t\tconst defaultColor = ctx.priority === \"danger\" ? \"text-danger-600\" : \"text-accent-600\";\n\t\tconst defaultIcon = ctx.priority === \"danger\" ? <WarningIcon /> : <InfoIcon />;\n\n\t\treturn (\n\t\t\t<SvgOnly\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"size-12 sm:size-7\", defaultColor, className)}\n\t\t\t\tsvg={svg ?? defaultIcon}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nIcon.displayName = \"AlertDialogIcon\";\n\n/**\n * A button that closes the Alert Dialog. (Unstyled)\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogclose\n *\n * @example\n * ```tsx\n * <AlertDialog.Close asChild>\n * <AlertDialog.Action\n * type=\"button\"\n * onClick={() => doThing()}\n * >\n * Do thing and close\n * </AlertDialog.Action>\n * </AlertDialog.Close>\n */\nconst Close = AlertDialogPrimitive.Close;\nClose.displayName = \"AlertDialogClose\";\n\n/**\n * A modal dialog that interrupts the user with important content and expects a\n * response.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst AlertDialog = {\n\t/**\n\t * A modal dialog that interrupts the user with important content and expects a response.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Root priority=\"danger\">\n\t * <AlertDialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Show Alert Dialog\n\t * </Button>\n\t * </AlertDialog.Trigger>\n\t * <AlertDialog.Content>\n\t * <AlertDialog.Icon />\n\t * <AlertDialog.Body>\n\t * <AlertDialog.Header>\n\t * <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t * <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * <AlertDialog.Footer>\n\t * <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t * <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * </AlertDialog.Body>\n\t * </AlertDialog.Content>\n\t * </AlertDialog.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A button that confirms the Alert Dialog action.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogaction\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Footer>\n\t * <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t * <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * ```\n\t */\n\tAction,\n\t/**\n\t * Contains the main content of the alert dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogbody\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Content>\n\t * <AlertDialog.Icon />\n\t * <AlertDialog.Body>\n\t * <AlertDialog.Header>\n\t * <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t * <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * <AlertDialog.Footer>\n\t * <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t * <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * </AlertDialog.Body>\n\t * </AlertDialog.Content>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * A button that closes the dialog and cancels the action.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcancel\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Footer>\n\t * <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t * <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * ```\n\t */\n\tCancel,\n\t/**\n\t * A button that closes the Alert Dialog. (Unstyled)\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Close asChild>\n\t * <AlertDialog.Action\n\t * type=\"button\"\n\t * onClick={() => doThing()}\n\t * >\n\t * Do thing and close\n\t * </AlertDialog.Action>\n\t * </AlertDialog.Close>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * The popover alert dialog container.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Content>\n\t * <AlertDialog.Icon />\n\t * <AlertDialog.Body>\n\t * <AlertDialog.Header>\n\t * <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t * <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * <AlertDialog.Footer>\n\t * <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t * <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * </AlertDialog.Body>\n\t * </AlertDialog.Content>\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/alert-dialog#alertdialogdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Header>\n\t * <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t * <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * Contains the footer content of the dialog, including the action and cancel buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogfooter\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Footer>\n\t * <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t * <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * Contains the header content of the dialog, including the title and description.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Header>\n\t * <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t * <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * An icon that visually represents the priority of the AlertDialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogicon\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Content>\n\t * <AlertDialog.Icon />\n\t * <AlertDialog.Body>\n\t * <AlertDialog.Header>\n\t * <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t * <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * </AlertDialog.Body>\n\t * </AlertDialog.Content>\n\t * ```\n\t */\n\tIcon,\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/alert-dialog#alertdialogtitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Header>\n\t * <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t * <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A button that opens the Alert Dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogtrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Show Alert Dialog\n\t * </Button>\n\t * </AlertDialog.Trigger>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tAlertDialog,\n};\n"],"mappings":"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","names":["InfoIcon","WarningIcon","createContext","forwardRef","useContext","useMemo","invariant","jsx","jsxs","AlertDialogContext","createContext","useAlertDialogContext","context","useContext","invariant","Root","priority","props","useMemo","jsx","Trigger","AlertDialogPortal","Portal","AlertDialogOverlay","forwardRef","className","ref","Overlay","cx","Content","onInteractOutside","onPointerDownOutside","preferredWidth","jsxs","event","preventCloseOnPromptInteraction","Body","asChild","Slot","Header","Footer","Title","Description","Action","appearance","ctx","buttonPriority","Button","Cancel","Close","Icon","svg","defaultColor","defaultIcon","WarningIcon","InfoIcon","SvgOnly","AlertDialog"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\ttype ReactNode,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Button, type ButtonPriority, type ButtonProps } from \"../button/button.js\";\nimport * as AlertDialogPrimitive from \"../dialog/primitive.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Slot } from \"../slot/index.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\n\nconst priorities = [\"info\", \"danger\"] as const;\ntype Priority = (typeof priorities)[number];\n\ntype AlertDialogContextValue = {\n\tpriority: Priority;\n};\n\nconst AlertDialogContext = createContext<AlertDialogContextValue | null>(null);\n\nfunction useAlertDialogContext() {\n\tconst context = useContext(AlertDialogContext);\n\tinvariant(context, \"AlertDialog child component used outside of AlertDialog parent!\");\n\treturn context;\n}\n\ntype AlertDialogProps = ComponentProps<typeof AlertDialogPrimitive.Root> & {\n\t/**\n\t * Indicates the importance or impact level of the AlertDialog, affecting its\n\t * color and styling to communicate its purpose to the user.\n\t */\n\tpriority: Priority;\n};\n\n/**\n * A modal dialog that interrupts the user with important content and expects a\n * response.\n * The root stateful component for the Alert Dialog.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogroot\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nfunction Root({ priority, ...props }: AlertDialogProps) {\n\tconst context: AlertDialogContextValue = useMemo(() => ({ priority }), [priority]);\n\n\treturn (\n\t\t<AlertDialogContext.Provider value={context}>\n\t\t\t<AlertDialogPrimitive.Root {...props} />\n\t\t</AlertDialogContext.Provider>\n\t);\n}\nRoot.displayName = \"AlertDialog\";\n\n/**\n * A button that opens the Alert Dialog.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogtrigger\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Trigger = AlertDialogPrimitive.Trigger;\nTrigger.displayName = \"AlertDialogTrigger\";\n\n/**\n * The portal for the Alert Dialog.\n *\n * @private\n */\nconst AlertDialogPortal = AlertDialogPrimitive.Portal;\nAlertDialogPortal.displayName = \"AlertDialogPortal\";\n\n/**\n * A layer that covers the inert portion of the view when the dialog is open.\n *\n * @private\n */\nconst AlertDialogOverlay = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Overlay\n\t\tclassName={cx(\n\t\t\t\"data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t\tref={ref}\n\t/>\n));\nAlertDialogOverlay.displayName = \"AlertDialogOverlay\";\n\ntype AlertDialogContentProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `AlertDialogContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `AlertDialog`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `AlertDialogContent`\n\t *\n\t * @default `max-w-md`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The popover alert dialog container.\n *\n * Renders on top of the overlay and is centered in the viewport.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcontent\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Content>,\n\tAlertDialogContentProps\n>(\n\t(\n\t\t{ className, onInteractOutside, onPointerDownOutside, preferredWidth = \"max-w-md\", ...props },\n\t\tref,\n\t) => (\n\t\t<AlertDialogPortal>\n\t\t\t<AlertDialogOverlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<AlertDialogPrimitive.Content\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start\",\n\t\t\t\t\t\t\"outline-hidden focus-within:outline-hidden\",\n\t\t\t\t\t\t\"p-6\",\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\t{...props}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</AlertDialogPortal>\n\t),\n);\nContent.displayName = \"AlertDialogContent\";\n\n/**\n * Contains the main content of the alert dialog.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogbody\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Body = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn <Component className={cx(\"flex-1 space-y-4\", className)} ref={ref} {...props} />;\n\t},\n);\nBody.displayName = \"AlertDialogBody\";\n\n/**\n * Contains the header content of the dialog, including the title and description.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogheader\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Header = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\"flex flex-col space-y-2 text-center sm:text-start\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nHeader.displayName = \"AlertDialogHeader\";\n\n/**\n * Contains the footer content of the dialog, including the action and cancel buttons.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogfooter\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Footer = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nFooter.displayName = \"AlertDialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * Alternatively, you can provide `aria-label` or `aria-labelledby` to\n * `AlertDialogContent` and exclude this component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogtitle\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong text-center text-lg font-medium sm:text-start\", className)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = \"AlertDialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\n * Renders as a `div` by default, but can be changed to any other element using\n * the `asChild` prop.\n *\n * Alternatively, you can provide `aria-describedby` to `AlertDialogContent` and\n * exclude this component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogdescription\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cx(\"text-body text-center text-sm font-normal sm:text-start\", className)}\n\t\t{...props}\n\t/>\n));\nDescription.displayName = \"AlertDialogDescription\";\n\n/**\n * A button that confirms the Alert Dialog action.\n * Will default to appearance=\"filled\", as well as the priority color from the `AlertDialog`.\n * Does not close the alert dialog by default.\n *\n * These buttons should be distinguished visually from the AlertDialogCancel button.\n *\n * Composes around the mantle Button component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogaction\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Action = forwardRef<ComponentRef<\"button\">, ButtonProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\tappearance = \"filled\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ctx = useAlertDialogContext();\n\t\tlet buttonPriority: NonNullable<ButtonPriority> = \"default\";\n\t\tif (ctx.priority === \"danger\") {\n\t\t\tbuttonPriority = \"danger\";\n\t\t}\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\t//\n\t\t\t\tappearance={appearance}\n\t\t\t\tpriority={buttonPriority}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAction.displayName = \"AlertDialogAction\";\n\n/**\n * A button that closes the dialog and cancels the action.\n * Will default to appearance=\"outlined\" and priority=\"neutral\".\n *\n * This button should be distinguished visually from AlertDialogAction buttons.\n *\n * Composes around the mantle Button component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcancel\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Cancel = forwardRef<ComponentRef<\"button\">, ButtonProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\tappearance = \"outlined\",\n\t\t\tclassName,\n\t\t\tpriority = \"neutral\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<AlertDialogPrimitive.Close asChild>\n\t\t\t<Button\n\t\t\t\tappearance={appearance}\n\t\t\t\tclassName={cx(\"mt-2 sm:mt-0\", className)}\n\t\t\t\tpriority={priority}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</AlertDialogPrimitive.Close>\n\t),\n);\nCancel.displayName = \"AlertDialogCancel\";\n\ntype AlertDialogIconProps = Omit<SvgAttributes, \"children\"> & {\n\tsvg?: ReactNode;\n};\n\n/**\n * An icon that visually represents the priority of the AlertDialog.\n *\n * Defaults to a warning icon for danger priority and an info icon for info\n * priority with the appropriate color.\n *\n * Can be overridden with a custom icon using the `svg` prop.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogicon\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, AlertDialogIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useAlertDialogContext();\n\t\tconst defaultColor = ctx.priority === \"danger\" ? \"text-danger-600\" : \"text-accent-600\";\n\t\tconst defaultIcon = ctx.priority === \"danger\" ? <WarningIcon /> : <InfoIcon />;\n\n\t\treturn (\n\t\t\t<SvgOnly\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"size-12 sm:size-7\", defaultColor, className)}\n\t\t\t\tsvg={svg ?? defaultIcon}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nIcon.displayName = \"AlertDialogIcon\";\n\n/**\n * A button that closes the Alert Dialog. (Unstyled)\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogclose\n *\n * @example\n * ```tsx\n * <AlertDialog.Close asChild>\n * <AlertDialog.Action\n * type=\"button\"\n * onClick={() => doThing()}\n * >\n * Do thing and close\n * </AlertDialog.Action>\n * </AlertDialog.Close>\n */\nconst Close = AlertDialogPrimitive.Close;\nClose.displayName = \"AlertDialogClose\";\n\n/**\n * A modal dialog that interrupts the user with important content and expects a\n * response.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n * <AlertDialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Show Danger Alert Dialog\n * </Button>\n * </AlertDialog.Trigger>\n * <AlertDialog.Content>\n * <AlertDialog.Icon />\n * <AlertDialog.Body>\n * <AlertDialog.Header>\n * <AlertDialog.Title>\n * Are you absolutely sure?\n * </AlertDialog.Title>\n * <AlertDialog.Description>\n * Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n * </AlertDialog.Description>\n * </AlertDialog.Header>\n * <AlertDialog.Footer>\n * <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n * <AlertDialog.Action type=\"button\">\n * Continue\n * </AlertDialog.Action>\n * </AlertDialog.Footer>\n * </AlertDialog.Body>\n * </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst AlertDialog = {\n\t/**\n\t * A modal dialog that interrupts the user with important content and expects a response.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Root priority=\"danger\">\n\t * <AlertDialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Show Alert Dialog\n\t * </Button>\n\t * </AlertDialog.Trigger>\n\t * <AlertDialog.Content>\n\t * <AlertDialog.Icon />\n\t * <AlertDialog.Body>\n\t * <AlertDialog.Header>\n\t * <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t * <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * <AlertDialog.Footer>\n\t * <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t * <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * </AlertDialog.Body>\n\t * </AlertDialog.Content>\n\t * </AlertDialog.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A button that confirms the Alert Dialog action.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogaction\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Footer>\n\t * <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t * <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * ```\n\t */\n\tAction,\n\t/**\n\t * Contains the main content of the alert dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogbody\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Content>\n\t * <AlertDialog.Icon />\n\t * <AlertDialog.Body>\n\t * <AlertDialog.Header>\n\t * <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t * <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * <AlertDialog.Footer>\n\t * <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t * <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * </AlertDialog.Body>\n\t * </AlertDialog.Content>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * A button that closes the dialog and cancels the action.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcancel\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Footer>\n\t * <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t * <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * ```\n\t */\n\tCancel,\n\t/**\n\t * A button that closes the Alert Dialog. (Unstyled)\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Close asChild>\n\t * <AlertDialog.Action\n\t * type=\"button\"\n\t * onClick={() => doThing()}\n\t * >\n\t * Do thing and close\n\t * </AlertDialog.Action>\n\t * </AlertDialog.Close>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * The popover alert dialog container.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Content>\n\t * <AlertDialog.Icon />\n\t * <AlertDialog.Body>\n\t * <AlertDialog.Header>\n\t * <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t * <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * <AlertDialog.Footer>\n\t * <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t * <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * </AlertDialog.Body>\n\t * </AlertDialog.Content>\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/alert-dialog#alertdialogdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Header>\n\t * <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t * <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * Contains the footer content of the dialog, including the action and cancel buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogfooter\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Footer>\n\t * <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t * <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * Contains the header content of the dialog, including the title and description.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Header>\n\t * <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t * <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * An icon that visually represents the priority of the AlertDialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogicon\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Content>\n\t * <AlertDialog.Icon />\n\t * <AlertDialog.Body>\n\t * <AlertDialog.Header>\n\t * <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t * <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * </AlertDialog.Body>\n\t * </AlertDialog.Content>\n\t * ```\n\t */\n\tIcon,\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/alert-dialog#alertdialogtitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Header>\n\t * <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t * <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A button that opens the Alert Dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogtrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Show Alert Dialog\n\t * </Button>\n\t * </AlertDialog.Trigger>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tAlertDialog,\n};\n"],"mappings":"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","names":["InfoIcon","WarningIcon","createContext","forwardRef","useContext","useMemo","invariant","jsx","jsxs","AlertDialogContext","createContext","useAlertDialogContext","context","useContext","invariant","Root","priority","props","useMemo","jsx","Trigger","AlertDialogPortal","Portal","AlertDialogOverlay","forwardRef","className","ref","Overlay","cx","Content","onInteractOutside","onPointerDownOutside","preferredWidth","jsxs","event","preventCloseOnPromptInteraction","Body","asChild","Slot","Header","Footer","Title","Description","Action","appearance","ctx","buttonPriority","Button","Cancel","Close","Icon","svg","defaultColor","defaultIcon","WarningIcon","InfoIcon","SvgOnly","AlertDialog"]}
|
package/dist/browser-only.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{b as r,c as e}from"./chunk-5VDCC3YW.js";export{r as BrowserOnly,e as canUseDOM};
|
|
2
2
|
//# sourceMappingURL=browser-only.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{m as y}from"./chunk-
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
1
|
+
import{m as y}from"./chunk-SGGOH2WW.js";import{a as p}from"./chunk-IVQ626TU.js";import{a as d}from"./chunk-ADF5DAYG.js";import{a as n}from"./chunk-PFXFESEN.js";import{CheckCircleIcon as x}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as w}from"@phosphor-icons/react/Info";import{WarningIcon as I}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as N}from"@phosphor-icons/react/WarningDiamond";import{createContext as P,forwardRef as l,useContext as f}from"react";import*as c from"sonner";import{jsx as s,jsxs as k}from"react/jsx-runtime";var A=({className:t,containerAriaLabel:e,dir:o,duration_ms:r=4e3,position:i="top-center",style:a})=>{let m=y();return s(c.Toaster,{className:n("toaster overlay-prompt pointer-events-auto *:duration-200",t),containerAriaLabel:e,dir:o,duration:r,gap:12,position:i??"top-center",style:a,theme:m,toastOptions:{unstyled:!0}})};A.displayName="Toaster";var g=P("");function L(t,e){let o=e?.duration_ms;return typeof o=="number"&&o<=0&&(o=Number.POSITIVE_INFINITY),c.toast.custom(r=>s(g.Provider,{value:r,children:t}),{duration:o,...e?.id?{id:e.id}:{},unstyled:!0})}var T=P({priority:"info"}),v=l(({asChild:t,children:e,className:o,priority:r,...i},a)=>{let m=t?d:"div";return s(T.Provider,{value:{priority:r},children:k(m,{className:n("relative flex items-start gap-2 text-sm font-sans","p-3 pl-3.75","bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg",o),ref:a,...i,children:[s(S,{priority:r}),e]})})});v.displayName="Toast";var h=l(({className:t,svg:e,...o},r)=>{let i=f(T);switch(i.priority){case"danger":return s(p,{className:n("text-danger-600",t),ref:r,svg:e??s(I,{weight:"fill"}),...o});case"warning":return s(p,{className:n("text-warning-600",t),ref:r,svg:e??s(N,{weight:"fill"}),...o});case"success":return s(p,{className:n("text-success-600",t),ref:r,svg:e??s(x,{weight:"fill"}),...o});case"info":return s(p,{className:n("text-accent-600",t),ref:r,svg:s(w,{weight:"fill"}),...o});default:throw new Error(`Unreachable Case: ${i.priority}`)}});h.displayName="ToastIcon";var C=l(({asChild:t,className:e,onClick:o,...r},i)=>{let a=f(g);return s(t?d:"button",{className:n("shrink-0","data-icon-button:-mr-0.5 data-icon-button:-mt-0.5 data-icon-button:rounded-xs",e),onClick:u=>{o?.(u),!u.defaultPrevented&&c.toast.dismiss(a)},ref:i,...r})});C.displayName="ToastAction";var b=l(({asChild:t,className:e,...o},r)=>s(t?d:"p",{className:n("text-strong flex-1 text-sm font-body",e),ref:r,...o}));b.displayName="ToastMessage";var z={Root:v,Action:C,Icon:h,Message:b};function U(t){t.target instanceof Element&&t.target.closest(".overlay-prompt")&&t.preventDefault()}var R={info:"bg-accent-600",warning:"bg-warning-600",success:"bg-success-600",danger:"bg-danger-600"};function S({className:t,priority:e,...o}){return s("div",{"aria-hidden":!0,className:n("z-1 absolute -inset-px right-auto w-1.5 rounded-l",R[e],t),...o})}export{A as a,L as b,z as c,U as d};
|
|
2
|
+
//# sourceMappingURL=chunk-2FYR6IJV.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{useSyncExternalStore as n}from"react";function e(){return n(o,()=>!0,()=>!1)}function o(){return()=>{}}function f({children:r,fallback:t=null}){return e()?r():t}function a(){return typeof window<"u"&&typeof document<"u"}export{e as a,f as b,a as c};
|
|
2
|
+
//# sourceMappingURL=chunk-5VDCC3YW.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/hooks/use-is-hydrated.tsx","../src/components/browser-only/browser-only.tsx"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\n\n/**\n * React hook that returns whether the component tree has been hydrated\n * on the client.\n *\n * Uses `useSyncExternalStore` to ensure the value is consistent between\n * server and client rendering, preventing hydration mismatches.\n *\n * - On the server, it always returns `false`.\n * - On the client (after hydration), it returns `true`.\n *\n * @see https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store\n *\n * @returns {boolean} `true` once hydration has occurred on the client,\n * otherwise `false`.\n *\n * @example\n * const isHydrated = useIsHydrated();\n *\n * if (!isHydrated) {\n * return <span style={{ visibility: \"hidden\" }}>Loading…</span>;\n * }\n *\n * return <span>Ready!</span>;\n */\nfunction useIsHydrated() {\n\treturn useSyncExternalStore(\n\t\temptySubscribe,\n\t\t() => true,\n\t\t() => false,\n\t);\n}\n\nexport {\n\t//,\n\tuseIsHydrated,\n};\n\n/**\n * No-op subscription function required by `useSyncExternalStore`.\n *\n * Since hydration state never changes after mount, this effectively\n * does nothing.\n *\n * @private\n */\nfunction emptySubscribe() {\n\treturn () => {};\n}\n","import type { ReactNode } from \"react\";\nimport { useIsHydrated } from \"../../hooks/use-is-hydrated.js\";\n\ntype Props = {\n\t/**\n\t * Children must be a render function so that evaluation is deferred\n\t * until after hydration has occurred.\n\t */\n\tchildren: () => ReactNode;\n\t/**\n\t * Optional fallback to render on the server (and during hydration)\n\t * before the client-only children are mounted.\n\t * Ideally, this should be the same dimensions as the eventual children\n\t * to avoid layout shift.\n\t */\n\tfallback?: ReactNode;\n};\n\n/**\n * A wrapper component that ensures its children only render in the browser,\n * after hydration has completed.\n *\n * This is useful for components that rely on browser-only APIs\n * (e.g. `window`, `document`, `localStorage`, media queries) or that\n * cannot safely be rendered during server-side rendering (SSR).\n *\n * - On the server, and during the initial hydration pass,\n * the `fallback` is rendered.\n * - On the client, after hydration, the `children` render function is called.\n *\n * @see https://mantle.ngrok.com/components/browser-only\n *\n * @example\n * ```tsx\n * <BrowserOnly fallback={<div style={{ height: 200 }} />} >\n * {() => <ExpensiveChart />}\n * </BrowserOnly>\n * ```\n *\n * @see useIsHydrated\n */\nfunction BrowserOnly({ children, fallback = null }: Props) {\n\treturn useIsHydrated() ? children() : fallback;\n}\n\n/**\n * Detects whether DOM APIs are available.\n *\n * @description\n * Returns `true` when running in a windowed browser context where both\n * `window` and a real `document` exist. This will be `false` in SSR/Node.\n *\n * Note: Test environments that provide a DOM shim (e.g. JSDOM) will return `true`.\n *\n * @returns {boolean} `true` if DOM APIs are available; otherwise `false`.\n *\n * @example\n * if (canUseDOM()) {\n * localStorage.setItem(\"foo\", \"bar\");\n * }\n */\nfunction canUseDOM(): boolean {\n\treturn typeof window !== \"undefined\" && typeof document !== \"undefined\";\n}\n\nexport {\n\t//,\n\tcanUseDOM,\n\tBrowserOnly,\n};\n"],"mappings":"AAAA,OAAS,wBAAAA,MAA4B,QA0BrC,SAASC,GAAgB,CACxB,OAAOD,EACNE,EACA,IAAM,GACN,IAAM,EACP,CACD,CAeA,SAASC,GAAiB,CACzB,MAAO,IAAM,CAAC,CACf,CCRA,SAASC,EAAY,CAAE,SAAAC,EAAU,SAAAC,EAAW,IAAK,EAAU,CAC1D,OAAOC,EAAc,EAAIF,EAAS,EAAIC,CACvC,CAkBA,SAASE,GAAqB,CAC7B,OAAO,OAAO,OAAW,KAAe,OAAO,SAAa,GAC7D","names":["useSyncExternalStore","useIsHydrated","emptySubscribe","emptySubscribe","BrowserOnly","children","fallback","useIsHydrated","canUseDOM"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{c as n}from"./chunk-5VDCC3YW.js";import{useEffect as s,useState as u}from"react";var o="(prefers-reduced-motion: no-preference)";function d(){return n()?!window.matchMedia(o).matches:!0}function m(){let[i,e]=u(!0);return s(()=>{let t=window.matchMedia(o);e(d());function r(c){e(!c.matches)}return t.addEventListener("change",r),()=>{t.removeEventListener("change",r)}},[]),i}export{d as a,m as b};
|
|
2
|
+
//# sourceMappingURL=chunk-EVU5XGB4.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/hooks/use-prefers-reduced-motion.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { canUseDOM } from \"../components/browser-only/browser-only.js\";\n\n/**\n * no-preference is the default value for the prefers-reduced-motion media query.\n * Users who have never fiddled with their a11y settings will still see animations\n * (no explicit opt-in required from a user's perspective)\n */\nconst query = \"(prefers-reduced-motion: no-preference)\";\n\n/**\n * Imperatively reads the current `prefers-reduced-motion` preference.\n * Useful in event handlers and plain functions where a hook cannot be called.\n *\n * Returns `true` when the user has opted out of animations.\n *\n * @remarks\n * Returns `true` (reduce motion) when called outside a browser environment (SSR),\n * matching the conservative default of {@link usePrefersReducedMotion}.\n */\nexport function getPrefersReducedMotion(): boolean {\n\tif (!canUseDOM()) {\n\t\treturn true;\n\t}\n\treturn !window.matchMedia(query).matches;\n}\n\n/**\n * Returns `true` when the user has opted out of animations (i.e., prefers reduced motion).\n *\n * Implementation notes:\n * - Uses the `(prefers-reduced-motion: no-preference)` media query and inverts it.\n * This keeps the “default” mental model explicit: if the system hasn’t opted out,\n * animations are allowed.\n * - Defaults to `true` (reduce motion) on the server/during SSR to avoid animating\n * before hydration. The initial client effect reads the *real* preference and updates state.\n *\n * @example\n * // Conditionally shorten or skip transitions\n * const reduce = usePrefersReducedMotion();\n * const duration = reduce ? 0 : 200;\n *\n * @remarks\n * If you need to support very old browsers that lack `MediaQueryList.addEventListener`,\n * consider falling back to `addListener/removeListener`.\n */\nexport function usePrefersReducedMotion(): boolean {\n\t// Default to no animations on SSR/first paint; update on mount with the real value.\n\tconst [prefersReducedMotion, setPrefersReducedMotion] = useState(true);\n\n\tuseEffect(() => {\n\t\tconst mediaQueryList = window.matchMedia(query);\n\n\t\t// set the _real_ initial value now that we're on the client\n\t\tsetPrefersReducedMotion(getPrefersReducedMotion());\n\n\t\t// register for updates\n\t\tfunction listener(event: MediaQueryListEvent) {\n\t\t\tsetPrefersReducedMotion(!event.matches);\n\t\t}\n\n\t\tmediaQueryList.addEventListener(\"change\", listener);\n\n\t\treturn () => {\n\t\t\tmediaQueryList.removeEventListener(\"change\", listener);\n\t\t};\n\t}, []);\n\n\treturn prefersReducedMotion;\n}\n"],"mappings":"wCAAA,OAAS,aAAAA,EAAW,YAAAC,MAAgB,QAQpC,IAAMC,EAAQ,0CAYP,SAASC,GAAmC,CAClD,OAAKC,EAAU,EAGR,CAAC,OAAO,WAAWF,CAAK,EAAE,QAFzB,EAGT,CAqBO,SAASG,GAAmC,CAElD,GAAM,CAACC,EAAsBC,CAAuB,EAAIC,EAAS,EAAI,EAErE,OAAAC,EAAU,IAAM,CACf,IAAMC,EAAiB,OAAO,WAAWR,CAAK,EAG9CK,EAAwBJ,EAAwB,CAAC,EAGjD,SAASQ,EAASC,EAA4B,CAC7CL,EAAwB,CAACK,EAAM,OAAO,CACvC,CAEA,OAAAF,EAAe,iBAAiB,SAAUC,CAAQ,EAE3C,IAAM,CACZD,EAAe,oBAAoB,SAAUC,CAAQ,CACtD,CACD,EAAG,CAAC,CAAC,EAEEL,CACR","names":["useEffect","useState","query","getPrefersReducedMotion","canUseDOM","usePrefersReducedMotion","prefersReducedMotion","setPrefersReducedMotion","useState","useEffect","mediaQueryList","listener","event"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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-ELZLLG6G.js";import{d as p}from"./chunk-
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
1
|
+
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-ELZLLG6G.js";import{d as p}from"./chunk-2FYR6IJV.js";import{c as g}from"./chunk-CBRSMQ26.js";import{a}from"./chunk-PFXFESEN.js";import{XIcon as k}from"@phosphor-icons/react/X";import{forwardRef as r}from"react";import{jsx as e,jsxs as F}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-xs",o),...t}));c.displayName="DialogOverlay";var h=r(({children:o,className:t,onInteractOutside:i,onPointerDownOutside:l,preferredWidth:s="max-w-lg",...W},z)=>F(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-hidden focus-within:outline-hidden","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 E={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{E as a};
|
|
2
|
+
//# sourceMappingURL=chunk-LBO5LEYM.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as D}from"./chunk-6J7D73WA.js";import{
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
1
|
+
import{a as D}from"./chunk-6J7D73WA.js";import{c as g}from"./chunk-5VDCC3YW.js";import{a as Q}from"./chunk-PFXFESEN.js";import{Fragment as Z,jsx as K}from"react/jsx-runtime";var q="https://assets.ngrok.com",J=`${q}/fonts`,z=["/roobert/roobert-proportional-vf.woff2","/jetbrains/jetbrainsmono-wght.woff2","/jetbrains/jetbrainsmono-italic-wght.woff2","/family/family-regular.woff2","/family/family-italic.woff2"];function X(e){let t=e.startsWith("/")?e:`/${e}`;return`${J}${t}`}var W=()=>K(Z,{children:z.map(e=>K("link",{rel:"preload",href:X(e),as:"font",type:"font/woff2",crossOrigin:"anonymous"},e))});W.displayName="PreloadCoreFonts";var k=["light","dark","light-high-contrast","dark-high-contrast"],I=["system",...k],ye=e=>e;function C(e){return typeof e!="string"?!1:I.includes(e)}var ve=e=>e;function O(e){return typeof e!="string"?!1:k.includes(e)}import{createContext as ee,useContext as B,useEffect as te,useMemo as V,useRef as ne,useState as oe}from"react";import re from"tiny-invariant";import{Fragment as pe,jsx as F,jsxs as fe}from"react/jsx-runtime";var w="(prefers-color-scheme: dark)",M="(prefers-contrast: more)",u="mantle-ui-theme",H="system",se=["system",()=>null],N=ee(se);function ie({children:e}){let[t,r]=oe(()=>{let o=E({cookie:g()?document.cookie:null});return _(o),o}),n=ne(null);te(()=>{function o(d){let m=d??E({cookie:document.cookie});r(m),_(m)}o();try{"BroadcastChannel"in window&&(n.current=new BroadcastChannel(u),n.current.onmessage=d=>{let m=d?.data?.theme;C(m)&&o(m)})}catch{}function c(d){d.key===`${u}__ping`&&o()}window.addEventListener("storage",c);let a=window.matchMedia(w),p=window.matchMedia(M);function l(){o()}function y(){document.visibilityState==="visible"&&o()}return a.addEventListener("change",l),p.addEventListener("change",l),window.addEventListener("pageshow",l),document.addEventListener("visibilitychange",y),()=>{window.removeEventListener("storage",c),a.removeEventListener("change",l),p.removeEventListener("change",l),window.removeEventListener("pageshow",l),document.removeEventListener("visibilitychange",y);try{n.current?.close()}catch{}n.current=null}},[]);let s=V(()=>[t,o=>{ue(o),r(o),_(o),le(o,{broadcastChannel:n.current,pingKey:`${u}__ping`})}],[t]);return F(N.Provider,{value:s,children:e})}ie.displayName="ThemeProvider";function $e(){let e=B(N);return re(e,"useTheme must be used within a ThemeProvider"),e}function _(e){if(!g())return;let t=window.document.documentElement,r=window.matchMedia(w).matches,n=window.matchMedia(M).matches,s=$(e,{prefersDarkMode:r,prefersHighContrast:n}),o=t.dataset.theme,c=t.dataset.appliedTheme,a=C(o)?o:void 0,p=O(c)?c:void 0;a===e&&p===s||(t.classList.remove(...k),t.classList.add(s),t.dataset.theme=e,t.dataset.appliedTheme=s)}function Ee(){if(!g())return{appliedTheme:void 0,theme:void 0};let e=window.document.documentElement,t=C(e.dataset.theme)?e.dataset.theme:void 0;return{appliedTheme:O(e.dataset.appliedTheme)?e.dataset.appliedTheme:void 0,theme:t}}function $(e,{prefersDarkMode:t,prefersHighContrast:r}){return e==="system"?ae({prefersDarkMode:t,prefersHighContrast:r}):e}function Fe(){let e=B(N),t=e!=null?e[0]:"system",r=D(w),n=D(M);return $(t,{prefersDarkMode:r,prefersHighContrast:n})}function ae({prefersDarkMode:e,prefersHighContrast:t}){return t?e?"dark-high-contrast":"light-high-contrast":e?"dark":"light"}function me(e){let{storageKey:t,defaultTheme:r,themes:n,resolvedThemes:s,prefersDarkModeMediaQuery:o,prefersHighContrastMediaQuery:c}=e;function a(i){return typeof i=="string"&&n.includes(i)}function p(i){let h=document.cookie;if(!h)return null;try{let b=h.split(";").find(L=>L.trim().startsWith(`${i}=`))?.split("=")[1];return b?decodeURIComponent(b):null}catch{return null}}function l(i,h){let T=new Date;T.setFullYear(T.getFullYear()+1);let x=window.location.hostname,b=window.location.protocol,A=x==="ngrok.com"||x.endsWith(".ngrok.com")?"; domain=.ngrok.com":"",L=b==="https:"?"; Secure":"";return`${i}=${encodeURIComponent(h)}; expires=${T.toUTCString()}; path=/${A}; SameSite=Lax${L}`}function y(i,h){try{document.cookie=l(i,h)}catch{}}function d(i,h,T){return i==="system"?T?h?"dark-high-contrast":"light-high-contrast":h?"dark":"light":i}let m=null,v=null,P=null;try{m=p(t)}catch{}if(a(m))P=m;else{try{v=window.localStorage?.getItem(t)??null}catch{}a(v)&&(P=v)}let S=a(P)?P:r,G=matchMedia(o).matches,j=matchMedia(c).matches,R=d(S,G,j),f=document.documentElement;if(f.dataset.appliedTheme!==R||f.dataset.theme!==S){for(let i of s)f.classList.remove(i);f.classList.add(R),f.dataset.theme=S,f.dataset.appliedTheme=R}let U=a(m);try{if(a(v)&&!U){y(t,v);try{window.localStorage.removeItem(t)}catch{}}else U||y(t,S)}catch{}}function ce(){let e={storageKey:u,defaultTheme:H,themes:I,resolvedThemes:k,prefersDarkModeMediaQuery:w,prefersHighContrastMediaQuery:M};return`(${me.toString()})(${JSON.stringify(e)})`}var Y=({nonce:e})=>F("script",{dangerouslySetInnerHTML:{__html:ce()},nonce:e,suppressHydrationWarning:!0});Y.displayName="PreventWrongThemeFlashScript";var he=({nonce:e})=>fe(pe,{children:[F(Y,{nonce:e}),F(W,{})]});he.displayName="MantleThemeHeadContent";function Re(e={}){let{className:t="",ssrCookie:r}=e??{};return V(()=>{let n,s;if(!g())n=E({cookie:r}),s=$(n,{prefersDarkMode:!1,prefersHighContrast:!1});else{let o=window.matchMedia(w).matches,c=window.matchMedia(M).matches;n=E({cookie:document.cookie}),s=$(n,{prefersDarkMode:o,prefersHighContrast:c})}return{className:Q(t,s),"data-applied-theme":s,"data-theme":n}},[t,r])}function E({cookie:e}){if(!e)return H;try{let n=e.split(";").find(o=>o.trim().startsWith(`${u}=`))?.split("=")[1],s=n?globalThis.decodeURIComponent(n):null;return C(s)?s:H}catch{return H}}function xe(e){if(e)return e.split(";").map(t=>t.trim()).find(t=>t.startsWith(`${u}=`))}function le(e,t){let{broadcastChannel:r,pingKey:n}=t;try{if(r){r.postMessage({theme:e,timestamp:Date.now()});return}}catch{}try{localStorage.setItem(n,JSON.stringify({theme:e,timestamp:Date.now()}))}catch{}}function de(e){let t=new Date;t.setFullYear(t.getFullYear()+1);let{hostname:r,protocol:n}=window.location,s=r==="ngrok.com"||r.endsWith(".ngrok.com")?"; domain=.ngrok.com":"",o=n==="https:"?"; Secure":"";return`${u}=${encodeURIComponent(e)}; expires=${t.toUTCString()}; path=/${s}; SameSite=Lax${o}`}function ue(e){if(g())try{document.cookie=de(e)}catch{}}export{q as a,X as b,W as c,k as d,I as e,ye as f,C as g,ve as h,O as i,ie as j,$e as k,Ee as l,Fe as m,ce as n,he as o,Re as p,E as q,xe as r};
|
|
2
|
+
//# sourceMappingURL=chunk-SGGOH2WW.js.map
|
package/dist/command.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as r}from"./chunk-
|
|
1
|
+
import{a as r}from"./chunk-LBO5LEYM.js";import{a as u}from"./chunk-JQ5D5YZR.js";import{b as c}from"./chunk-MLXONRJD.js";import"./chunk-ELZLLG6G.js";import"./chunk-2FYR6IJV.js";import"./chunk-SGGOH2WW.js";import"./chunk-6J7D73WA.js";import"./chunk-5VDCC3YW.js";import"./chunk-CBRSMQ26.js";import"./chunk-63ZAW25Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-IVQ626TU.js";import"./chunk-ADF5DAYG.js";import"./chunk-SBQHQ2SJ.js";import{a as m}from"./chunk-PFXFESEN.js";import{MagnifyingGlassIcon as b}from"@phosphor-icons/react/MagnifyingGlass";import{Command as p,useCommandState as w}from"cmdk";import{forwardRef as n}from"react";import{jsx as a,jsxs as i}from"react/jsx-runtime";var l=n(({className:o,...e},t)=>a(p,{ref:t,"data-slot":"command",className:m("bg-popover flex h-full w-full flex-col overflow-hidden rounded-md",o),...e}));l.displayName="Command";var f=({children:o,className:e,description:t="Search for a command to run...",filter:s,shouldFilter:d,showCloseButton:N=!0,title:P="Command Palette",...k})=>i(r.Root,{...k,children:[i(r.Header,{className:"sr-only absolute",children:[a(r.Title,{children:P}),a(r.Description,{children:t})]}),i(r.Content,{className:m("overflow-hidden p-0 relative",e),children:[a(l,{className:"**:[[cmdk-group-heading]]:text-muted **:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",filter:s,shouldFilter:d,children:o}),N&&a("div",{className:"absolute top-1.5 right-1.5",children:a(r.CloseIconButton,{})})]})]});f.displayName="CommandDialog";var g=n(({className:o,...e},t)=>i("div",{ref:t,"data-slot":"command-input-wrapper",className:"flex h-9 items-center gap-2 border-b border-popover px-3",children:[a(b,{className:"size-4 shrink-0 opacity-50"}),a(p.Input,{"data-slot":"command-input",className:m("placeholder:text-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",o),...e})]}));g.displayName="CommandInput";var C=n(({className:o,...e},t)=>a(p.List,{ref:t,"data-slot":"command-list",className:m("max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar",o),...e}));C.displayName="CommandList";var h=n(({className:o,...e},t)=>a(p.Empty,{ref:t,"data-slot":"command-empty",className:m("py-6 text-center text-sm",o),...e}));h.displayName="CommandEmpty";var y=n(({className:o,...e},t)=>a(p.Group,{ref:t,"data-slot":"command-group",className:m("**:[[cmdk-group-heading]]:text-muted overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium",o),...e}));y.displayName="CommandGroup";var v=n(({className:o,...e},t)=>a(c,{ref:t,"data-slot":"command-separator",className:m("-mx-1 my-1 w-auto",o),...e}));v.displayName="CommandSeparator";var x=n(({className:o,...e},t)=>a(p.Item,{ref:t,"data-slot":"command-item",className:m("data-[selected=true]:bg-popover-hover [&_svg:not([class*='text-'])]:text-muted relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",o),...e}));x.displayName="CommandItem";var R=n(({className:o,...e},t)=>a("span",{ref:t,"data-slot":"command-shortcut",className:m("text-muted ml-auto text-xs tracking-widest",o),...e}));R.displayName="CommandShortcut";var D={Root:l,Dialog:f,Input:g,List:C,Empty:h,Group:y,Item:x,Shortcut:R,Separator:v};import{useEffect as _,useState as S}from"react";import{jsx as G,jsxs as M}from"react/jsx-runtime";function I({className:o,...e}){let[t,s]=S("\u2303");_(()=>{s(A())},[]);let d=t==="\u2318"?"Command":"Control";return M(u,{...e,suppressHydrationWarning:!0,className:m(t==="\u2303"&&"font-medium",o),children:[G("span",{className:"sr-only",children:d}),t]})}function W(o){return"userAgentData"in o}function A(){if(typeof navigator>"u")return"\u2303";let o="";return W(navigator)&&(o=navigator.userAgentData.platform??""),o||(o=navigator.platform||navigator.userAgent||""),/mac|iphone|ipad|ipod/i.test(o)?"\u2318":"\u2303"}export{D as Command,I as MetaKey,w as useCommandState};
|
|
2
2
|
//# sourceMappingURL=command.js.map
|
package/dist/command.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/command/command.tsx","../src/components/command/meta-key.tsx"],"sourcesContent":["\"use client\";\n\nimport { MagnifyingGlassIcon } from \"@phosphor-icons/react/MagnifyingGlass\";\nimport { Command as CommandPrimitive, useCommandState } from \"cmdk\";\n\nimport { type ComponentPropsWithoutRef, type ComponentRef, forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Dialog } from \"../dialog/dialog.js\";\nimport { Separator } from \"../separator/separator.js\";\n\ntype CommandRootProps = ComponentPropsWithoutRef<typeof CommandPrimitive>;\n\n/**\n * The root component for the Command. It provides the context for all other command sub-components.\n *\n * @see https://mantle.ngrok.com/components/command#commandroot\n *\n * @example\n * ```tsx\n * <Command.Root>\n * <Command.Input placeholder=\"Type a command or search...\" />\n * <Command.List>\n * <Command.Empty>No results found.</Command.Empty>\n * <Command.Group heading=\"Suggestions\">\n * <Command.Item>\n * <span>Calendar</span>\n * </Command.Item>\n * </Command.Group>\n * <Command.Separator />\n * <Command.Group heading=\"Settings\">\n * <Command.Item>\n * <span>Profile</span>\n * </Command.Item>\n * </Command.Group>\n * </Command.List>\n * </Command.Root>\n */\nconst CommandRoot = forwardRef<ComponentRef<\"div\">, CommandRootProps>(\n\t({ className, ...props }, ref) => (\n\t\t<CommandPrimitive\n\t\t\tref={ref}\n\t\t\tdata-slot=\"command\"\n\t\t\tclassName={cx(\"bg-popover flex h-full w-full flex-col overflow-hidden rounded-md\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nCommandRoot.displayName = \"Command\";\n\n/**\n * The props for the CommandDialog component.\n *\n * @see https://mantle.ngrok.com/components/command#commanddialog\n */\ntype CommandDialogProps = ComponentPropsWithoutRef<typeof Dialog.Root> & {\n\t/**\n\t * The title of the command dialog.\n\t */\n\ttitle?: string;\n\t/**\n\t * The description of the command dialog.\n\t */\n\tdescription?: string;\n\t/**\n\t * Class name(s) to apply to the command dialog content.\n\t */\n\tclassName?: string;\n\t/**\n\t * Whether to show the close button.\n\t */\n\tshowCloseButton?: boolean;\n\t/**\n\t * Custom filter function for the command list.\n\t *\n\t * @see https://github.com/pacocoursey/cmdk?tab=readme-ov-file#filtering\n\t */\n\tfilter?: CommandRootProps[\"filter\"];\n\t/**\n\t * Whether to enable filtering of command items. When false, disables built-in filtering.\n\t *\n\t * @see https://github.com/pacocoursey/cmdk?tab=readme-ov-file#filtering\n\t */\n\tshouldFilter?: CommandRootProps[\"shouldFilter\"];\n};\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the CommandDialog.\n *\n * @see https://mantle.ngrok.com/components/command#commanddialog\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n * <Command.Input placeholder=\"Type a command or search...\" />\n * <Command.List>\n * <Command.Empty>No results found.</Command.Empty>\n * <Command.Group heading=\"Suggestions\">\n * <Command.Item>\n * <span>Calendar</span>\n * </Command.Item>\n * </Command.Group>\n * <Command.Separator />\n * <Command.Group heading=\"Settings\">\n * <Command.Item>\n * <span>Profile</span>\n * </Command.Item>\n * </Command.Group>\n * </Command.List>\n * </Command.Dialog>\n */\nconst CommandDialog = ({\n\tchildren,\n\tclassName,\n\tdescription = \"Search for a command to run...\",\n\tfilter,\n\tshouldFilter,\n\tshowCloseButton = true,\n\ttitle = \"Command Palette\",\n\t...props\n}: CommandDialogProps) => (\n\t<Dialog.Root {...props}>\n\t\t<Dialog.Header className=\"sr-only absolute\">\n\t\t\t<Dialog.Title>{title}</Dialog.Title>\n\t\t\t<Dialog.Description>{description}</Dialog.Description>\n\t\t</Dialog.Header>\n\t\t<Dialog.Content className={cx(\"overflow-hidden p-0 relative\", className)}>\n\t\t\t<CommandRoot\n\t\t\t\tclassName=\"**:[[cmdk-group-heading]]:text-muted **:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\"\n\t\t\t\tfilter={filter}\n\t\t\t\tshouldFilter={shouldFilter}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</CommandRoot>\n\t\t\t{showCloseButton && (\n\t\t\t\t<div className=\"absolute top-1.5 right-1.5\">\n\t\t\t\t\t<Dialog.CloseIconButton />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Dialog.Content>\n\t</Dialog.Root>\n);\nCommandDialog.displayName = \"CommandDialog\";\n\n/**\n * The input component for the Command. It provides the input for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#commandinput\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n * <Command.Input placeholder=\"Type a command or search...\" />\n * <Command.List>\n * <Command.Empty>No results found.</Command.Empty>\n * <Command.Group heading=\"Suggestions\">\n * <Command.Item>\n * <span>Calendar</span>\n * </Command.Item>\n * </Command.Group>\n * <Command.Separator />\n * <Command.Group heading=\"Settings\">\n * <Command.Item>\n * <span>Profile</span>\n * </Command.Item>\n * </Command.Group>\n * </Command.List>\n * </Command.Dialog>\n */\nconst CommandInput = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n\t<div\n\t\tref={ref}\n\t\tdata-slot=\"command-input-wrapper\"\n\t\tclassName=\"flex h-9 items-center gap-2 border-b border-popover px-3\"\n\t>\n\t\t<MagnifyingGlassIcon className=\"size-4 shrink-0 opacity-50\" />\n\t\t<CommandPrimitive.Input\n\t\t\tdata-slot=\"command-input\"\n\t\t\tclassName={cx(\n\t\t\t\t\"placeholder:text-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</div>\n));\nCommandInput.displayName = \"CommandInput\";\n\n/**\n * The list component for the Command. It provides the list for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#commandlist\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n * <Command.Input placeholder=\"Type a command or search...\" />\n * <Command.List>\n * <Command.Empty>No results found.</Command.Empty>\n * <Command.Group heading=\"Suggestions\">\n * <Command.Item>\n * <span>Calendar</span>\n * </Command.Item>\n * </Command.Group>\n * <Command.Separator />\n * <Command.Group heading=\"Settings\">\n * <Command.Item>\n * <span>Profile</span>\n * </Command.Item>\n * </Command.Group>\n * </Command.List>\n * </Command.Dialog>\n */\nconst CommandList = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.List\n\t\tref={ref}\n\t\tdata-slot=\"command-list\"\n\t\tclassName={cx(\"max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar\", className)}\n\t\t{...props}\n\t/>\n));\nCommandList.displayName = \"CommandList\";\n\n/**\n * The empty component for the Command. It provides the empty state for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#commandempty\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n * <Command.Input placeholder=\"Type a command or search...\" />\n * <Command.List>\n * <Command.Empty>No results found.</Command.Empty>\n * <Command.Group heading=\"Suggestions\">\n * <Command.Item>\n * <span>Calendar</span>\n * </Command.Item>\n * </Command.Group>\n * <Command.Separator />\n * <Command.Group heading=\"Settings\">\n * <Command.Item>\n * <span>Profile</span>\n * </Command.Item>\n * </Command.Group>\n * </Command.List>\n * </Command.Dialog>\n */\nconst CommandEmpty = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Empty\n\t\tref={ref}\n\t\tdata-slot=\"command-empty\"\n\t\tclassName={cx(\"py-6 text-center text-sm\", className)}\n\t\t{...props}\n\t/>\n));\nCommandEmpty.displayName = \"CommandEmpty\";\n\n/**\n * The group component for the Command. It provides the group for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#commandgroup\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n * <Command.Input placeholder=\"Type a command or search...\" />\n * <Command.List>\n * <Command.Empty>No results found.</Command.Empty>\n * <Command.Group heading=\"Suggestions\">\n * <Command.Item>\n * <span>Calendar</span>\n * </Command.Item>\n * </Command.Group>\n * <Command.Separator />\n * <Command.Group heading=\"Settings\">\n * <Command.Item>\n * <span>Profile</span>\n * </Command.Item>\n * </Command.Group>\n * </Command.List>\n * </Command.Dialog>\n */\nconst CommandGroup = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Group\n\t\tref={ref}\n\t\tdata-slot=\"command-group\"\n\t\tclassName={cx(\n\t\t\t\"**:[[cmdk-group-heading]]:text-muted overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandGroup.displayName = \"CommandGroup\";\n\n/**\n * The separator component for the Command. It provides the separator for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#commandseparator\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n * <Command.Input placeholder=\"Type a command or search...\" />\n * <Command.List>\n * <Command.Empty>No results found.</Command.Empty>\n * <Command.Group heading=\"Suggestions\">\n * <Command.Item>\n * <span>Calendar</span>\n * </Command.Item>\n * </Command.Group>\n * <Command.Separator />\n * <Command.Group heading=\"Settings\">\n * <Command.Item>\n * <span>Profile</span>\n * </Command.Item>\n * </Command.Group>\n * </Command.List>\n * </Command.Dialog>\n */\nconst CommandSeparator = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tdata-slot=\"command-separator\"\n\t\tclassName={cx(\"-mx-1 my-1 w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nCommandSeparator.displayName = \"CommandSeparator\";\n\n/**\n * The item component for the Command. It provides the item for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#commanditem\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n * <Command.Input placeholder=\"Type a command or search...\" />\n * <Command.List>\n * <Command.Empty>No results found.</Command.Empty>\n * <Command.Group heading=\"Suggestions\">\n * <Command.Item>\n * <span>Calendar</span>\n * </Command.Item>\n * </Command.Group>\n * <Command.Separator />\n * <Command.Group heading=\"Settings\">\n * <Command.Item>\n * <span>Profile</span>\n * </Command.Item>\n * </Command.Group>\n * </Command.List>\n * </Command.Dialog>\n */\nconst CommandItem = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Item\n\t\tref={ref}\n\t\tdata-slot=\"command-item\"\n\t\tclassName={cx(\n\t\t\t\"data-[selected=true]:bg-popover-hover [&_svg:not([class*='text-'])]:text-muted relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandItem.displayName = \"CommandItem\";\n\n/**\n * The shortcut component for the Command. It provides the shortcut for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#commandshortcut\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n * <Command.Input placeholder=\"Type a command or search...\" />\n * <Command.List>\n * <Command.Empty>No results found.</Command.Empty>\n * <Command.Group heading=\"Suggestions\">\n * <Command.Item>\n * <span>Calendar</span>\n * </Command.Item>\n * </Command.Group>\n * <Command.Separator />\n * <Command.Group heading=\"Settings\">\n * <Command.Item>\n * <span>Profile</span>\n * <Command.Shortcut>⌘,</Command.Shortcut>\n * </Command.Item>\n * </Command.Group>\n * </Command.List>\n * </Command.Dialog>\n */\nconst CommandShortcut = forwardRef<ComponentRef<\"span\">, ComponentPropsWithoutRef<\"span\">>(\n\t({ className, ...props }, ref) => (\n\t\t<span\n\t\t\tref={ref}\n\t\t\tdata-slot=\"command-shortcut\"\n\t\t\tclassName={cx(\"text-muted ml-auto text-xs tracking-widest\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nCommandShortcut.displayName = \"CommandShortcut\";\n\n/**\n * The command component for the Command. It provides the command for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n * <Command.Input placeholder=\"Type a command or search...\" />\n * <Command.List>\n * <Command.Empty>No results found.</Command.Empty>\n * <Command.Group heading=\"Suggestions\">\n * <Command.Item>\n * <span>Calendar</span>\n * </Command.Item>\n * </Command.Group>\n * <Command.Separator />\n * <Command.Group heading=\"Settings\">\n * <Command.Item>\n * <span>Profile</span>\n * </Command.Item>\n * </Command.Group>\n * </Command.List>\n * </Command.Dialog>\n */\nconst Command = {\n\t/**\n\t * The root component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commandroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Root>\n\t * <Command.Input placeholder=\"Type a command or search...\" />\n\t * <Command.List>\n\t * <Command.Empty>No results found.</Command.Empty>\n\t * </Command.List>\n\t * </Command.Root>\n\t * ```\n\t */\n\tRoot: CommandRoot,\n\t/**\n\t * The dialog component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commanddialog\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Dialog>\n\t * <Command.Input placeholder=\"Type a command or search...\" />\n\t * <Command.List>\n\t * <Command.Empty>No results found.</Command.Empty>\n\t * </Command.List>\n\t * </Command.Dialog>\n\t * ```\n\t */\n\tDialog: CommandDialog,\n\t/**\n\t * The input component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commandinput\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Input placeholder=\"Type a command or search...\" />\n\t * ```\n\t */\n\tInput: CommandInput,\n\t/**\n\t * The list component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commandlist\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.List>\n\t * <Command.Empty>No results found.</Command.Empty>\n\t * </Command.List>\n\t */\n\tList: CommandList,\n\t/**\n\t * The empty component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commandempty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Empty>No results found.</Command.Empty>\n\t * ```\n\t */\n\tEmpty: CommandEmpty,\n\t/**\n\t * The group component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commandgroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Group heading=\"Suggestions\">\n\t * <Command.Item>\n\t * Calendar\n\t * </Command.Item>\n\t * </Command.Group>\n\t * ```\n\t */\n\tGroup: CommandGroup,\n\t/**\n\t * The item component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commanditem\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Item>\n\t * Calendar\n\t * </Command.Item>\n\t * ```\n\t */\n\tItem: CommandItem,\n\t/**\n\t * The shortcut component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commandshortcut\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Shortcut>⌘,</Command.Shortcut>\n\t * ```\n\t */\n\tShortcut: CommandShortcut,\n\t/**\n\t * The separator component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commandseparator\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Separator />\n\t * ```\n\t */\n\tSeparator: CommandSeparator,\n} as const;\n\nexport {\n\t//,\n\tCommand,\n\tuseCommandState,\n};\n","import { type ComponentProps, useEffect, useState } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Kbd } from \"../kbd/kbd.js\";\n\ntype Props = Omit<ComponentProps<\"kbd\">, \"children\">;\n\ntype Mod = \"⌘\" | \"⌃\";\n\n/**\n * Renders the platform-appropriate meta key kbd (⌘ or ⌃).\n *\n * - Initializes to `\"⌃\"` to avoid SSR mismatch.\n * - Updates on mount using `detectMetaKey()`.\n */\nfunction MetaKey({ className, ...props }: Props) {\n\tconst [glyph, setGlyph] = useState<Mod>(\"⌃\");\n\n\tuseEffect(() => {\n\t\tsetGlyph(detectMetaKey());\n\t}, []);\n\n\tconst label = glyph === \"⌘\" ? \"Command\" : \"Control\";\n\n\treturn (\n\t\t<Kbd\n\t\t\t{...props}\n\t\t\tsuppressHydrationWarning\n\t\t\tclassName={cx(glyph === \"⌃\" && \"font-medium\", className)}\n\t\t>\n\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t{glyph}\n\t\t</Kbd>\n\t);\n}\n\nexport {\n\t//,\n\tMetaKey,\n};\n\n/**\n * Type guard for `navigator.userAgentData` existence.\n * Useful for newer UA hints where `platform` may be available.\n *\n * @param navigator The global `navigator`\n * @returns `true` if UA Data hints exist; narrows `navigator` accordingly.\n */\nfunction hasUAData(\n\tnavigator: Navigator,\n): navigator is Navigator & { userAgentData: { platform?: string } } {\n\treturn \"userAgentData\" in navigator;\n}\n\n/**\n * Detects the appropriate meta key label for the current platform.\n *\n * SSR-safe: returns `\"⌃\"` when `navigator` is not available.\n *\n * @returns `\"⌘\"` for Apple platforms; otherwise `\"⌃\"`.\n */\nfunction detectMetaKey(): Mod {\n\tif (typeof navigator === \"undefined\") {\n\t\treturn \"⌃\"; // SSR default\n\t}\n\n\tlet platform = \"\";\n\n\tif (hasUAData(navigator)) {\n\t\tplatform = navigator.userAgentData.platform ?? \"\";\n\t}\n\n\tif (!platform) {\n\t\tplatform = navigator.platform || navigator.userAgent || \"\";\n\t}\n\n\tconst isApple = /mac|iphone|ipad|ipod/i.test(platform);\n\n\tif (isApple) {\n\t\treturn \"⌘\";\n\t}\n\n\treturn \"⌃\";\n}\n"],"mappings":"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","names":["MagnifyingGlassIcon","CommandPrimitive","useCommandState","forwardRef","jsx","jsxs","CommandRoot","forwardRef","className","props","ref","CommandPrimitive","cx","CommandDialog","children","description","filter","shouldFilter","showCloseButton","title","Dialog","CommandInput","MagnifyingGlassIcon","CommandList","CommandEmpty","CommandGroup","CommandSeparator","Separator","CommandItem","CommandShortcut","Command","useEffect","useState","jsx","jsxs","MetaKey","className","props","glyph","setGlyph","useState","useEffect","detectMetaKey","label","Kbd","cx","hasUAData","navigator","detectMetaKey","platform"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/command/command.tsx","../src/components/command/meta-key.tsx"],"sourcesContent":["\"use client\";\n\nimport { MagnifyingGlassIcon } from \"@phosphor-icons/react/MagnifyingGlass\";\nimport { Command as CommandPrimitive, useCommandState } from \"cmdk\";\n\nimport { type ComponentPropsWithoutRef, type ComponentRef, forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Dialog } from \"../dialog/dialog.js\";\nimport { Separator } from \"../separator/separator.js\";\n\ntype CommandRootProps = ComponentPropsWithoutRef<typeof CommandPrimitive>;\n\n/**\n * The root component for the Command. It provides the context for all other command sub-components.\n *\n * @see https://mantle.ngrok.com/components/command#commandroot\n *\n * @example\n * ```tsx\n * <Command.Root>\n * <Command.Input placeholder=\"Type a command or search...\" />\n * <Command.List>\n * <Command.Empty>No results found.</Command.Empty>\n * <Command.Group heading=\"Suggestions\">\n * <Command.Item>\n * <span>Calendar</span>\n * </Command.Item>\n * </Command.Group>\n * <Command.Separator />\n * <Command.Group heading=\"Settings\">\n * <Command.Item>\n * <span>Profile</span>\n * </Command.Item>\n * </Command.Group>\n * </Command.List>\n * </Command.Root>\n */\nconst CommandRoot = forwardRef<ComponentRef<\"div\">, CommandRootProps>(\n\t({ className, ...props }, ref) => (\n\t\t<CommandPrimitive\n\t\t\tref={ref}\n\t\t\tdata-slot=\"command\"\n\t\t\tclassName={cx(\"bg-popover flex h-full w-full flex-col overflow-hidden rounded-md\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nCommandRoot.displayName = \"Command\";\n\n/**\n * The props for the CommandDialog component.\n *\n * @see https://mantle.ngrok.com/components/command#commanddialog\n */\ntype CommandDialogProps = ComponentPropsWithoutRef<typeof Dialog.Root> & {\n\t/**\n\t * The title of the command dialog.\n\t */\n\ttitle?: string;\n\t/**\n\t * The description of the command dialog.\n\t */\n\tdescription?: string;\n\t/**\n\t * Class name(s) to apply to the command dialog content.\n\t */\n\tclassName?: string;\n\t/**\n\t * Whether to show the close button.\n\t */\n\tshowCloseButton?: boolean;\n\t/**\n\t * Custom filter function for the command list.\n\t *\n\t * @see https://github.com/pacocoursey/cmdk?tab=readme-ov-file#filtering\n\t */\n\tfilter?: CommandRootProps[\"filter\"];\n\t/**\n\t * Whether to enable filtering of command items. When false, disables built-in filtering.\n\t *\n\t * @see https://github.com/pacocoursey/cmdk?tab=readme-ov-file#filtering\n\t */\n\tshouldFilter?: CommandRootProps[\"shouldFilter\"];\n};\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the CommandDialog.\n *\n * @see https://mantle.ngrok.com/components/command#commanddialog\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n * <Command.Input placeholder=\"Type a command or search...\" />\n * <Command.List>\n * <Command.Empty>No results found.</Command.Empty>\n * <Command.Group heading=\"Suggestions\">\n * <Command.Item>\n * <span>Calendar</span>\n * </Command.Item>\n * </Command.Group>\n * <Command.Separator />\n * <Command.Group heading=\"Settings\">\n * <Command.Item>\n * <span>Profile</span>\n * </Command.Item>\n * </Command.Group>\n * </Command.List>\n * </Command.Dialog>\n */\nconst CommandDialog = ({\n\tchildren,\n\tclassName,\n\tdescription = \"Search for a command to run...\",\n\tfilter,\n\tshouldFilter,\n\tshowCloseButton = true,\n\ttitle = \"Command Palette\",\n\t...props\n}: CommandDialogProps) => (\n\t<Dialog.Root {...props}>\n\t\t<Dialog.Header className=\"sr-only absolute\">\n\t\t\t<Dialog.Title>{title}</Dialog.Title>\n\t\t\t<Dialog.Description>{description}</Dialog.Description>\n\t\t</Dialog.Header>\n\t\t<Dialog.Content className={cx(\"overflow-hidden p-0 relative\", className)}>\n\t\t\t<CommandRoot\n\t\t\t\tclassName=\"**:[[cmdk-group-heading]]:text-muted **:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\"\n\t\t\t\tfilter={filter}\n\t\t\t\tshouldFilter={shouldFilter}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</CommandRoot>\n\t\t\t{showCloseButton && (\n\t\t\t\t<div className=\"absolute top-1.5 right-1.5\">\n\t\t\t\t\t<Dialog.CloseIconButton />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Dialog.Content>\n\t</Dialog.Root>\n);\nCommandDialog.displayName = \"CommandDialog\";\n\n/**\n * The input component for the Command. It provides the input for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#commandinput\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n * <Command.Input placeholder=\"Type a command or search...\" />\n * <Command.List>\n * <Command.Empty>No results found.</Command.Empty>\n * <Command.Group heading=\"Suggestions\">\n * <Command.Item>\n * <span>Calendar</span>\n * </Command.Item>\n * </Command.Group>\n * <Command.Separator />\n * <Command.Group heading=\"Settings\">\n * <Command.Item>\n * <span>Profile</span>\n * </Command.Item>\n * </Command.Group>\n * </Command.List>\n * </Command.Dialog>\n */\nconst CommandInput = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n\t<div\n\t\tref={ref}\n\t\tdata-slot=\"command-input-wrapper\"\n\t\tclassName=\"flex h-9 items-center gap-2 border-b border-popover px-3\"\n\t>\n\t\t<MagnifyingGlassIcon className=\"size-4 shrink-0 opacity-50\" />\n\t\t<CommandPrimitive.Input\n\t\t\tdata-slot=\"command-input\"\n\t\t\tclassName={cx(\n\t\t\t\t\"placeholder:text-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</div>\n));\nCommandInput.displayName = \"CommandInput\";\n\n/**\n * The list component for the Command. It provides the list for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#commandlist\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n * <Command.Input placeholder=\"Type a command or search...\" />\n * <Command.List>\n * <Command.Empty>No results found.</Command.Empty>\n * <Command.Group heading=\"Suggestions\">\n * <Command.Item>\n * <span>Calendar</span>\n * </Command.Item>\n * </Command.Group>\n * <Command.Separator />\n * <Command.Group heading=\"Settings\">\n * <Command.Item>\n * <span>Profile</span>\n * </Command.Item>\n * </Command.Group>\n * </Command.List>\n * </Command.Dialog>\n */\nconst CommandList = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.List\n\t\tref={ref}\n\t\tdata-slot=\"command-list\"\n\t\tclassName={cx(\"max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar\", className)}\n\t\t{...props}\n\t/>\n));\nCommandList.displayName = \"CommandList\";\n\n/**\n * The empty component for the Command. It provides the empty state for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#commandempty\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n * <Command.Input placeholder=\"Type a command or search...\" />\n * <Command.List>\n * <Command.Empty>No results found.</Command.Empty>\n * <Command.Group heading=\"Suggestions\">\n * <Command.Item>\n * <span>Calendar</span>\n * </Command.Item>\n * </Command.Group>\n * <Command.Separator />\n * <Command.Group heading=\"Settings\">\n * <Command.Item>\n * <span>Profile</span>\n * </Command.Item>\n * </Command.Group>\n * </Command.List>\n * </Command.Dialog>\n */\nconst CommandEmpty = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Empty\n\t\tref={ref}\n\t\tdata-slot=\"command-empty\"\n\t\tclassName={cx(\"py-6 text-center text-sm\", className)}\n\t\t{...props}\n\t/>\n));\nCommandEmpty.displayName = \"CommandEmpty\";\n\n/**\n * The group component for the Command. It provides the group for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#commandgroup\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n * <Command.Input placeholder=\"Type a command or search...\" />\n * <Command.List>\n * <Command.Empty>No results found.</Command.Empty>\n * <Command.Group heading=\"Suggestions\">\n * <Command.Item>\n * <span>Calendar</span>\n * </Command.Item>\n * </Command.Group>\n * <Command.Separator />\n * <Command.Group heading=\"Settings\">\n * <Command.Item>\n * <span>Profile</span>\n * </Command.Item>\n * </Command.Group>\n * </Command.List>\n * </Command.Dialog>\n */\nconst CommandGroup = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Group\n\t\tref={ref}\n\t\tdata-slot=\"command-group\"\n\t\tclassName={cx(\n\t\t\t\"**:[[cmdk-group-heading]]:text-muted overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandGroup.displayName = \"CommandGroup\";\n\n/**\n * The separator component for the Command. It provides the separator for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#commandseparator\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n * <Command.Input placeholder=\"Type a command or search...\" />\n * <Command.List>\n * <Command.Empty>No results found.</Command.Empty>\n * <Command.Group heading=\"Suggestions\">\n * <Command.Item>\n * <span>Calendar</span>\n * </Command.Item>\n * </Command.Group>\n * <Command.Separator />\n * <Command.Group heading=\"Settings\">\n * <Command.Item>\n * <span>Profile</span>\n * </Command.Item>\n * </Command.Group>\n * </Command.List>\n * </Command.Dialog>\n */\nconst CommandSeparator = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tdata-slot=\"command-separator\"\n\t\tclassName={cx(\"-mx-1 my-1 w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nCommandSeparator.displayName = \"CommandSeparator\";\n\n/**\n * The item component for the Command. It provides the item for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#commanditem\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n * <Command.Input placeholder=\"Type a command or search...\" />\n * <Command.List>\n * <Command.Empty>No results found.</Command.Empty>\n * <Command.Group heading=\"Suggestions\">\n * <Command.Item>\n * <span>Calendar</span>\n * </Command.Item>\n * </Command.Group>\n * <Command.Separator />\n * <Command.Group heading=\"Settings\">\n * <Command.Item>\n * <span>Profile</span>\n * </Command.Item>\n * </Command.Group>\n * </Command.List>\n * </Command.Dialog>\n */\nconst CommandItem = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Item\n\t\tref={ref}\n\t\tdata-slot=\"command-item\"\n\t\tclassName={cx(\n\t\t\t\"data-[selected=true]:bg-popover-hover [&_svg:not([class*='text-'])]:text-muted relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandItem.displayName = \"CommandItem\";\n\n/**\n * The shortcut component for the Command. It provides the shortcut for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#commandshortcut\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n * <Command.Input placeholder=\"Type a command or search...\" />\n * <Command.List>\n * <Command.Empty>No results found.</Command.Empty>\n * <Command.Group heading=\"Suggestions\">\n * <Command.Item>\n * <span>Calendar</span>\n * </Command.Item>\n * </Command.Group>\n * <Command.Separator />\n * <Command.Group heading=\"Settings\">\n * <Command.Item>\n * <span>Profile</span>\n * <Command.Shortcut>⌘,</Command.Shortcut>\n * </Command.Item>\n * </Command.Group>\n * </Command.List>\n * </Command.Dialog>\n */\nconst CommandShortcut = forwardRef<ComponentRef<\"span\">, ComponentPropsWithoutRef<\"span\">>(\n\t({ className, ...props }, ref) => (\n\t\t<span\n\t\t\tref={ref}\n\t\t\tdata-slot=\"command-shortcut\"\n\t\t\tclassName={cx(\"text-muted ml-auto text-xs tracking-widest\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nCommandShortcut.displayName = \"CommandShortcut\";\n\n/**\n * The command component for the Command. It provides the command for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n * <Command.Input placeholder=\"Type a command or search...\" />\n * <Command.List>\n * <Command.Empty>No results found.</Command.Empty>\n * <Command.Group heading=\"Suggestions\">\n * <Command.Item>\n * <span>Calendar</span>\n * </Command.Item>\n * </Command.Group>\n * <Command.Separator />\n * <Command.Group heading=\"Settings\">\n * <Command.Item>\n * <span>Profile</span>\n * </Command.Item>\n * </Command.Group>\n * </Command.List>\n * </Command.Dialog>\n */\nconst Command = {\n\t/**\n\t * The root component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commandroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Root>\n\t * <Command.Input placeholder=\"Type a command or search...\" />\n\t * <Command.List>\n\t * <Command.Empty>No results found.</Command.Empty>\n\t * </Command.List>\n\t * </Command.Root>\n\t * ```\n\t */\n\tRoot: CommandRoot,\n\t/**\n\t * The dialog component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commanddialog\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Dialog>\n\t * <Command.Input placeholder=\"Type a command or search...\" />\n\t * <Command.List>\n\t * <Command.Empty>No results found.</Command.Empty>\n\t * </Command.List>\n\t * </Command.Dialog>\n\t * ```\n\t */\n\tDialog: CommandDialog,\n\t/**\n\t * The input component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commandinput\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Input placeholder=\"Type a command or search...\" />\n\t * ```\n\t */\n\tInput: CommandInput,\n\t/**\n\t * The list component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commandlist\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.List>\n\t * <Command.Empty>No results found.</Command.Empty>\n\t * </Command.List>\n\t */\n\tList: CommandList,\n\t/**\n\t * The empty component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commandempty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Empty>No results found.</Command.Empty>\n\t * ```\n\t */\n\tEmpty: CommandEmpty,\n\t/**\n\t * The group component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commandgroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Group heading=\"Suggestions\">\n\t * <Command.Item>\n\t * Calendar\n\t * </Command.Item>\n\t * </Command.Group>\n\t * ```\n\t */\n\tGroup: CommandGroup,\n\t/**\n\t * The item component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commanditem\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Item>\n\t * Calendar\n\t * </Command.Item>\n\t * ```\n\t */\n\tItem: CommandItem,\n\t/**\n\t * The shortcut component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commandshortcut\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Shortcut>⌘,</Command.Shortcut>\n\t * ```\n\t */\n\tShortcut: CommandShortcut,\n\t/**\n\t * The separator component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#commandseparator\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Separator />\n\t * ```\n\t */\n\tSeparator: CommandSeparator,\n} as const;\n\nexport {\n\t//,\n\tCommand,\n\tuseCommandState,\n};\n","import { type ComponentProps, useEffect, useState } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Kbd } from \"../kbd/kbd.js\";\n\ntype Props = Omit<ComponentProps<\"kbd\">, \"children\">;\n\ntype Mod = \"⌘\" | \"⌃\";\n\n/**\n * Renders the platform-appropriate meta key kbd (⌘ or ⌃).\n *\n * - Initializes to `\"⌃\"` to avoid SSR mismatch.\n * - Updates on mount using `detectMetaKey()`.\n */\nfunction MetaKey({ className, ...props }: Props) {\n\tconst [glyph, setGlyph] = useState<Mod>(\"⌃\");\n\n\tuseEffect(() => {\n\t\tsetGlyph(detectMetaKey());\n\t}, []);\n\n\tconst label = glyph === \"⌘\" ? \"Command\" : \"Control\";\n\n\treturn (\n\t\t<Kbd\n\t\t\t{...props}\n\t\t\tsuppressHydrationWarning\n\t\t\tclassName={cx(glyph === \"⌃\" && \"font-medium\", className)}\n\t\t>\n\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t{glyph}\n\t\t</Kbd>\n\t);\n}\n\nexport {\n\t//,\n\tMetaKey,\n};\n\n/**\n * Type guard for `navigator.userAgentData` existence.\n * Useful for newer UA hints where `platform` may be available.\n *\n * @param navigator The global `navigator`\n * @returns `true` if UA Data hints exist; narrows `navigator` accordingly.\n */\nfunction hasUAData(\n\tnavigator: Navigator,\n): navigator is Navigator & { userAgentData: { platform?: string } } {\n\treturn \"userAgentData\" in navigator;\n}\n\n/**\n * Detects the appropriate meta key label for the current platform.\n *\n * SSR-safe: returns `\"⌃\"` when `navigator` is not available.\n *\n * @returns `\"⌘\"` for Apple platforms; otherwise `\"⌃\"`.\n */\nfunction detectMetaKey(): Mod {\n\tif (typeof navigator === \"undefined\") {\n\t\treturn \"⌃\"; // SSR default\n\t}\n\n\tlet platform = \"\";\n\n\tif (hasUAData(navigator)) {\n\t\tplatform = navigator.userAgentData.platform ?? \"\";\n\t}\n\n\tif (!platform) {\n\t\tplatform = navigator.platform || navigator.userAgent || \"\";\n\t}\n\n\tconst isApple = /mac|iphone|ipad|ipod/i.test(platform);\n\n\tif (isApple) {\n\t\treturn \"⌘\";\n\t}\n\n\treturn \"⌃\";\n}\n"],"mappings":"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","names":["MagnifyingGlassIcon","CommandPrimitive","useCommandState","forwardRef","jsx","jsxs","CommandRoot","forwardRef","className","props","ref","CommandPrimitive","cx","CommandDialog","children","description","filter","shouldFilter","showCloseButton","title","Dialog","CommandInput","MagnifyingGlassIcon","CommandList","CommandEmpty","CommandGroup","CommandSeparator","Separator","CommandItem","CommandShortcut","Command","useEffect","useState","jsx","jsxs","MetaKey","className","props","glyph","setGlyph","useState","useEffect","detectMetaKey","label","Kbd","cx","hasUAData","navigator","detectMetaKey","platform"]}
|
package/dist/dialog.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as r}from"./chunk-
|
|
1
|
+
import{a as r}from"./chunk-LBO5LEYM.js";import{i as o}from"./chunk-ELZLLG6G.js";import"./chunk-2FYR6IJV.js";import"./chunk-SGGOH2WW.js";import"./chunk-6J7D73WA.js";import"./chunk-5VDCC3YW.js";import"./chunk-CBRSMQ26.js";import"./chunk-63ZAW25Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-IVQ626TU.js";import"./chunk-ADF5DAYG.js";import"./chunk-SBQHQ2SJ.js";import"./chunk-PFXFESEN.js";export{r as Dialog,o as isDialogOverlayTarget};
|
|
2
2
|
//# sourceMappingURL=dialog.js.map
|
package/dist/hooks.d.ts
CHANGED
|
@@ -192,6 +192,17 @@ declare const useIsomorphicLayoutEffect: typeof useEffect;
|
|
|
192
192
|
*/
|
|
193
193
|
declare function useMatchesMediaQuery(query: string): boolean;
|
|
194
194
|
|
|
195
|
+
/**
|
|
196
|
+
* Imperatively reads the current `prefers-reduced-motion` preference.
|
|
197
|
+
* Useful in event handlers and plain functions where a hook cannot be called.
|
|
198
|
+
*
|
|
199
|
+
* Returns `true` when the user has opted out of animations.
|
|
200
|
+
*
|
|
201
|
+
* @remarks
|
|
202
|
+
* Returns `true` (reduce motion) when called outside a browser environment (SSR),
|
|
203
|
+
* matching the conservative default of {@link usePrefersReducedMotion}.
|
|
204
|
+
*/
|
|
205
|
+
declare function getPrefersReducedMotion(): boolean;
|
|
195
206
|
/**
|
|
196
207
|
* Returns `true` when the user has opted out of animations (i.e., prefers reduced motion).
|
|
197
208
|
*
|
|
@@ -199,8 +210,8 @@ declare function useMatchesMediaQuery(query: string): boolean;
|
|
|
199
210
|
* - Uses the `(prefers-reduced-motion: no-preference)` media query and inverts it.
|
|
200
211
|
* This keeps the “default” mental model explicit: if the system hasn’t opted out,
|
|
201
212
|
* animations are allowed.
|
|
202
|
-
* - Defaults to `true` on the server to avoid animating
|
|
203
|
-
* client effect reads the *real* preference and updates state.
|
|
213
|
+
* - Defaults to `true` (reduce motion) on the server/during SSR to avoid animating
|
|
214
|
+
* before hydration. The initial client effect reads the *real* preference and updates state.
|
|
204
215
|
*
|
|
205
216
|
* @example
|
|
206
217
|
* // Conditionally shorten or skip transitions
|
|
@@ -322,4 +333,46 @@ type UseInViewOptions = {
|
|
|
322
333
|
*/
|
|
323
334
|
declare function useInView(ref: RefObject<Element | null>, { root, margin, amount, once, initial }?: UseInViewOptions): boolean;
|
|
324
335
|
|
|
325
|
-
|
|
336
|
+
type UseUndoRedoReturn<T> = {
|
|
337
|
+
/** Whether there are actions to undo. */
|
|
338
|
+
canUndo: boolean;
|
|
339
|
+
/** Whether there are actions to redo. */
|
|
340
|
+
canRedo: boolean;
|
|
341
|
+
/** Push a snapshot onto the undo stack. Clears the redo stack. */
|
|
342
|
+
push: (snapshot: T) => void;
|
|
343
|
+
/** Pop the last snapshot from the undo stack. Returns `undefined` if empty. */
|
|
344
|
+
undo: (current: T) => T | undefined;
|
|
345
|
+
/** Pop the last snapshot from the redo stack. Returns `undefined` if empty. */
|
|
346
|
+
redo: (current: T) => T | undefined;
|
|
347
|
+
};
|
|
348
|
+
/**
|
|
349
|
+
* A generic undo/redo hook backed by a reducer.
|
|
350
|
+
*
|
|
351
|
+
* Maintains two stacks (undo and redo). Call `push` before mutating state
|
|
352
|
+
* to snapshot the current value. Call `undo`/`redo` with the current value
|
|
353
|
+
* to swap it with the previous/next snapshot.
|
|
354
|
+
*
|
|
355
|
+
* @example
|
|
356
|
+
* ```tsx
|
|
357
|
+
* const { push, undo, redo, canUndo, canRedo } = useUndoRedo<string[]>();
|
|
358
|
+
*
|
|
359
|
+
* function removeItem(item: string) {
|
|
360
|
+
* push([...items]); // snapshot before mutation
|
|
361
|
+
* setItems(items.filter((i) => i !== item));
|
|
362
|
+
* }
|
|
363
|
+
*
|
|
364
|
+
* function handleKeyDown(event: KeyboardEvent) {
|
|
365
|
+
* if ((event.metaKey || event.ctrlKey) && event.key === "z" && !event.shiftKey) {
|
|
366
|
+
* const previous = undo(items);
|
|
367
|
+
* if (previous) setItems(previous);
|
|
368
|
+
* }
|
|
369
|
+
* if ((event.metaKey || event.ctrlKey) && (event.shiftKey && event.key === "z" || event.key === "y")) {
|
|
370
|
+
* const next = redo(items);
|
|
371
|
+
* if (next) setItems(next);
|
|
372
|
+
* }
|
|
373
|
+
* }
|
|
374
|
+
* ```
|
|
375
|
+
*/
|
|
376
|
+
declare function useUndoRedo<T>(): UseUndoRedoReturn<T>;
|
|
377
|
+
|
|
378
|
+
export { type Breakpoint, type TailwindBreakpoint, type UseInViewOptions, type UseUndoRedoReturn, breakpoints, getPrefersReducedMotion, useBreakpoint, useCallbackRef, useCopyToClipboard, useDebouncedCallback, useInView, useIsBelowBreakpoint, useIsHydrated, useIsomorphicLayoutEffect, useMatchesMediaQuery, usePrefersReducedMotion, useRandomStableId, useScrollBehavior, useUndoRedo };
|