@ngrok/mantle 0.66.11 → 0.66.13
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.d.ts +8 -8
- package/dist/alert-dialog.js +1 -1
- package/dist/{button-CKL-3sIr.d.ts → button-CU5ung6o.d.ts} +7 -7
- package/dist/button.d.ts +2 -2
- package/dist/code-block.d.ts +1 -1
- package/dist/command.d.ts +96 -57
- package/dist/command.js +1 -1
- package/dist/command.js.map +1 -1
- package/dist/data-table.d.ts +3 -3
- package/dist/{dialog-BswTx6oS.js → dialog-nNRT5LpD.js} +2 -2
- package/dist/{dialog-BswTx6oS.js.map → dialog-nNRT5LpD.js.map} +1 -1
- package/dist/dialog.d.ts +422 -3
- package/dist/dialog.js +1 -1
- package/dist/{direction-deXpJFDZ.d.ts → direction-DYYpi-JC.d.ts} +1 -1
- package/dist/{dropdown-menu-D_ZoY1AH.d.ts → dropdown-menu-BEjpuGrT.d.ts} +1 -1
- package/dist/dropdown-menu.d.ts +1 -1
- package/dist/hooks.d.ts +1 -1
- package/dist/icon.d.ts +1 -1
- package/dist/icons.d.ts +2 -2
- package/dist/{in-view-CTQRT44m.d.ts → in-view-ca-moloX.d.ts} +1 -1
- package/dist/{index-CMbK9igL.d.ts → index-ViSCOUrU.d.ts} +2 -2
- package/dist/pagination.d.ts +2 -2
- package/dist/{primitive-vy5KrN2J.js → primitive-qv3vtV4B.js} +2 -2
- package/dist/{primitive-vy5KrN2J.js.map → primitive-qv3vtV4B.js.map} +1 -1
- package/dist/{select-39Jfc1Cb.d.ts → select-BkvbNKQ7.d.ts} +1 -1
- package/dist/select.d.ts +1 -1
- package/dist/sheet.js +1 -1
- package/dist/split-button.d.ts +2 -2
- package/dist/{svg-only-Dti1FvNV.d.ts → svg-only-Ct2mB46K.d.ts} +1 -1
- package/dist/{table-Dpt192qt.d.ts → table-Bs1D5Aj7.d.ts} +1 -1
- package/dist/table.d.ts +1 -1
- package/dist/theme.d.ts +4 -4
- package/dist/{themes-ClppRAGt.d.ts → themes-Dk0VkyqX.d.ts} +1 -1
- package/dist/toast.d.ts +1 -1
- package/dist/utils.d.ts +2 -2
- package/package.json +6 -6
- package/dist/dialog-BuD_JQf_.d.ts +0 -422
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog-BswTx6oS.js","names":["DialogPrimitive.Root","DialogPrimitive.Trigger","DialogPrimitive.Portal","DialogPrimitive.Close","DialogPrimitive.Overlay","DialogPrimitive.Content","DialogPrimitive.Title","DialogPrimitive.Description"],"sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport type { ComponentProps, ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport * as DialogPrimitive from \"./primitive.js\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the Dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogroot\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Button type=\"button\" appearance=\"outlined\">\n * Cancel\n * </Button>\n * <Button type=\"button\" appearance=\"filled\">\n * Save\n * </Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Root = DialogPrimitive.Root;\nRoot.displayName = \"Dialog\";\n\n/**\n * A button that opens the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogtrigger\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Trigger = DialogPrimitive.Trigger;\nTrigger.displayName = \"DialogTrigger\";\n\nconst Portal = DialogPrimitive.Portal;\nPortal.displayName = \"DialogPortal\";\n\nconst Close = DialogPrimitive.Close;\nClose.displayName = \"DialogClose\";\n\nconst Overlay = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nOverlay.displayName = \"DialogOverlay\";\n\ntype ContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `Dialog.Content` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Dialog`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `Dialog.Content`\n\t *\n\t * @default `max-w-lg`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The container for the dialog content.\n * Renders on top of the overlay and is centered in the viewport.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogcontent\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Button type=\"button\" appearance=\"outlined\">\n * Cancel\n * </Button>\n * <Button type=\"button\" appearance=\"filled\">\n * Save\n * </Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ContentProps>(\n\t({ children, className, preferredWidth = \"max-w-lg\", ...props }, ref) => (\n\t\t<Portal>\n\t\t\t<Overlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<DialogPrimitive.Content\n\t\t\t\t\tdata-mantle-modal-content\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex max-h-full w-full flex-1 flex-col\",\n\t\t\t\t\t\t\"outline-hidden focus-within:outline-hidden\",\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\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</DialogPrimitive.Content>\n\t\t\t</div>\n\t\t</Portal>\n\t),\n);\nContent.displayName = \"DialogContent\";\n\n/**\n * Contains the header content of the dialog, including the title and close button.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogheader\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Header = ({ className, children, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</div>\n);\nHeader.displayName = \"DialogHeader\";\n\ntype CloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\n\n/**\n * An icon button that closes the dialog when clicked.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogcloseiconbutton\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst CloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Dialog\",\n\tappearance = \"ghost\",\n\t...props\n}: CloseIconButtonProps) => (\n\t<DialogPrimitive.Close asChild>\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={<XIcon />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t</DialogPrimitive.Close>\n);\nCloseIconButton.displayName = \"DialogCloseIconButton\";\n\n/**\n * Contains the main content of the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogbody\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Body = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div className={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)} {...props} />\n);\nBody.displayName = \"DialogBody\";\n\n/**\n * Contains the footer content of the dialog, including action buttons.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogfooter\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Button type=\"button\" appearance=\"outlined\">\n * Cancel\n * </Button>\n * <Button type=\"button\" appearance=\"filled\">\n * Save\n * </Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Footer = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nFooter.displayName = \"DialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogtitle\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong truncate text-lg font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = \"DialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\n * Renders as a `div` by default, but can be changed to any other element using\n * the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogdescription\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>\n * This is an optional description.\n * </Dialog.Description>\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description ref={ref} className={cx(\"text-muted\", className)} {...props} />\n));\nDescription.displayName = \"DialogDescription\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n *\n * @see https://mantle.ngrok.com/components/dialog\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Button type=\"button\" appearance=\"outlined\">\n * Cancel\n * </Button>\n * <Button type=\"button\" appearance=\"filled\">\n * Save\n * </Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Dialog = {\n\t/**\n\t * A window overlaid on either the primary window or another dialog window.\n\t * The root stateful component for the Dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Cancel\n\t * </Button>\n\t * <Button type=\"button\" appearance=\"filled\">\n\t * Save\n\t * </Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the main content of the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogbody\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * A button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Confirm Action</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <Text>Are you sure you want to proceed?</Text>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"submit\">Confirm</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * An icon button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogcloseiconbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tCloseIconButton,\n\t/**\n\t * The container for the dialog content.\n\t * Renders on top of the overlay and is centered in the viewport.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Cancel\n\t * </Button>\n\t * <Button type=\"button\" appearance=\"filled\">\n\t * Save\n\t * </Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * An accessible description to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>\n\t * This is an optional description.\n\t * </Dialog.Description>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * Contains the footer content of the dialog, including action buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogfooter\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Cancel\n\t * </Button>\n\t * <Button type=\"button\" appearance=\"filled\">\n\t * Save\n\t * </Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * Contains the header content of the dialog, including the title and close button.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The overlay backdrop for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-reference\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Portal>\n\t * <Dialog.Overlay />\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <Text>Dialog content here.</Text>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tOverlay,\n\t/**\n\t * The portal container for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-reference\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Portal>\n\t * <Dialog.Overlay />\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Portal Dialog</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <Text>This dialog is rendered in a portal.</Text>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tPortal,\n\t/**\n\t * An accessible name to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogtitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A button that opens the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogtrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tDialog,\n};\n"],"mappings":"sSAyCA,MAAM,EAAOA,EACb,EAAK,YAAc,SA0BnB,MAAM,EAAUC,EAChB,EAAQ,YAAc,gBAEtB,MAAM,EAASC,EACf,EAAO,YAAc,eAErB,MAAM,EAAQC,EACd,EAAM,YAAc,cAEpB,MAAM,EAAU,GAGb,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACC,EAAD,CACM,MACL,UAAW,EACV,iKACA,EACA,CACD,GAAI,EACH,CAAA,CACD,CACF,EAAQ,YAAc,gBAgDtB,MAAM,EAAU,GACd,CAAE,WAAU,YAAW,iBAAiB,WAAY,GAAG,GAAS,IAChE,EAAC,EAAD,CAAA,SAAA,CACC,EAAC,EAAD,EAAW,CAAA,CACX,EAAC,MAAD,CAAK,UAAU,+DACd,EAACC,EAAD,CACC,4BAAA,GACA,UAAW,EACV,yCACA,6CACA,wFACA,2KACA,EACA,EACA,CACI,MACL,GAAI,EAEH,WACwB,CAAA,CACrB,CAAA,CACE,CAAA,CAAA,CAEV,CACD,EAAQ,YAAc,gBA2BtB,MAAM,GAAU,CAAE,YAAW,WAAU,GAAG,KACzC,EAAC,MAAD,CACC,UAAW,EACV,+GACA,0BACA,EACA,CACD,GAAI,EAEH,WACI,CAAA,CAEP,EAAO,YAAc,eA6BrB,MAAM,GAAmB,CACxB,OAAO,KACP,OAAO,SACP,QAAQ,eACR,aAAa,QACb,GAAG,KAEH,EAACF,EAAD,CAAuB,QAAA,YACtB,EAAC,EAAD,CACa,aACZ,KAAM,EAAC,EAAD,EAAS,CAAA,CACR,QACD,OACA,OACN,GAAI,EACH,CAAA,CACqB,CAAA,CAEzB,EAAgB,YAAc,wBA0B9B,MAAM,GAAQ,CAAE,YAAW,GAAG,KAC7B,EAAC,MAAD,CAAK,UAAW,EAAG,iDAAkD,EAAU,CAAE,GAAI,EAAS,CAAA,CAE/F,EAAK,YAAc,aAkCnB,MAAM,GAAU,CAAE,YAAW,GAAG,KAC/B,EAAC,MAAD,CACC,UAAW,EACV,8EACA,EACA,CACD,GAAI,EACH,CAAA,CAEH,EAAO,YAAc,eA2BrB,MAAM,EAAQ,GAGX,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACG,EAAD,CACM,MACL,UAAW,EAAG,2CAA4C,EAAU,CACpE,GAAI,EACH,CAAA,CACD,CACF,EAAM,YAAc,cA+BpB,MAAM,EAAc,GAGjB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACC,EAAD,CAAkC,MAAK,UAAW,EAAG,aAAc,EAAU,CAAE,GAAI,EAAS,CAAA,CAC3F,CACF,EAAY,YAAc,oBAmC1B,MAAM,EAAS,CAmCd,OAyBA,OA6BA,QA0BA,kBAmCA,UA4BA,cAiCA,SA0BA,SAuBA,UA0BA,SA0BA,QAyBA,UACA"}
|
|
1
|
+
{"version":3,"file":"dialog-nNRT5LpD.js","names":["DialogPrimitive.Root","DialogPrimitive.Trigger","DialogPrimitive.Portal","DialogPrimitive.Close","DialogPrimitive.Overlay","DialogPrimitive.Content","DialogPrimitive.Title","DialogPrimitive.Description"],"sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport type { ComponentProps, ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport * as DialogPrimitive from \"./primitive.js\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the Dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogroot\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Button type=\"button\" appearance=\"outlined\">\n * Cancel\n * </Button>\n * <Button type=\"button\" appearance=\"filled\">\n * Save\n * </Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Root = DialogPrimitive.Root;\nRoot.displayName = \"Dialog\";\n\n/**\n * A button that opens the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogtrigger\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Trigger = DialogPrimitive.Trigger;\nTrigger.displayName = \"DialogTrigger\";\n\nconst Portal = DialogPrimitive.Portal;\nPortal.displayName = \"DialogPortal\";\n\nconst Close = DialogPrimitive.Close;\nClose.displayName = \"DialogClose\";\n\nconst Overlay = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nOverlay.displayName = \"DialogOverlay\";\n\ntype ContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `Dialog.Content` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Dialog`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `Dialog.Content`\n\t *\n\t * @default `max-w-lg`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The container for the dialog content.\n * Renders on top of the overlay and is centered in the viewport.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogcontent\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Button type=\"button\" appearance=\"outlined\">\n * Cancel\n * </Button>\n * <Button type=\"button\" appearance=\"filled\">\n * Save\n * </Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ContentProps>(\n\t({ children, className, preferredWidth = \"max-w-lg\", ...props }, ref) => (\n\t\t<Portal>\n\t\t\t<Overlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<DialogPrimitive.Content\n\t\t\t\t\tdata-mantle-modal-content\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex max-h-full w-full flex-1 flex-col\",\n\t\t\t\t\t\t\"outline-hidden focus-within:outline-hidden\",\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\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</DialogPrimitive.Content>\n\t\t\t</div>\n\t\t</Portal>\n\t),\n);\nContent.displayName = \"DialogContent\";\n\n/**\n * Contains the header content of the dialog, including the title and close button.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogheader\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Header = ({ className, children, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</div>\n);\nHeader.displayName = \"DialogHeader\";\n\ntype CloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\n\n/**\n * An icon button that closes the dialog when clicked.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogcloseiconbutton\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst CloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Dialog\",\n\tappearance = \"ghost\",\n\t...props\n}: CloseIconButtonProps) => (\n\t<DialogPrimitive.Close asChild>\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={<XIcon />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t</DialogPrimitive.Close>\n);\nCloseIconButton.displayName = \"DialogCloseIconButton\";\n\n/**\n * Contains the main content of the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogbody\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Body = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div className={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)} {...props} />\n);\nBody.displayName = \"DialogBody\";\n\n/**\n * Contains the footer content of the dialog, including action buttons.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogfooter\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Button type=\"button\" appearance=\"outlined\">\n * Cancel\n * </Button>\n * <Button type=\"button\" appearance=\"filled\">\n * Save\n * </Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Footer = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nFooter.displayName = \"DialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogtitle\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong truncate text-lg font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = \"DialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\n * Renders as a `div` by default, but can be changed to any other element using\n * the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogdescription\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.Description>\n * This is an optional description.\n * </Dialog.Description>\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description ref={ref} className={cx(\"text-muted\", className)} {...props} />\n));\nDescription.displayName = \"DialogDescription\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n *\n * @see https://mantle.ngrok.com/components/dialog\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger asChild>\n * <Button type=\"button\" appearance=\"outlined\">\n * Open Dialog\n * </Button>\n * </Dialog.Trigger>\n * <Dialog.Content>\n * <Dialog.Header>\n * <Dialog.Title>Dialog Title</Dialog.Title>\n * <Dialog.CloseIconButton />\n * </Dialog.Header>\n * <Dialog.Body>\n * <p>This is the dialog content.</p>\n * </Dialog.Body>\n * <Dialog.Footer>\n * <Button type=\"button\" appearance=\"outlined\">\n * Cancel\n * </Button>\n * <Button type=\"button\" appearance=\"filled\">\n * Save\n * </Button>\n * </Dialog.Footer>\n * </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Dialog = {\n\t/**\n\t * A window overlaid on either the primary window or another dialog window.\n\t * The root stateful component for the Dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Cancel\n\t * </Button>\n\t * <Button type=\"button\" appearance=\"filled\">\n\t * Save\n\t * </Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the main content of the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogbody\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * A button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Confirm Action</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <Text>Are you sure you want to proceed?</Text>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Dialog.Close asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t * </Dialog.Close>\n\t * <Button type=\"submit\">Confirm</Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * An icon button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogcloseiconbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tCloseIconButton,\n\t/**\n\t * The container for the dialog content.\n\t * Renders on top of the overlay and is centered in the viewport.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Cancel\n\t * </Button>\n\t * <Button type=\"button\" appearance=\"filled\">\n\t * Save\n\t * </Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * An accessible description to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.Description>\n\t * This is an optional description.\n\t * </Dialog.Description>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * Contains the footer content of the dialog, including action buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogfooter\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * <Dialog.Footer>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Cancel\n\t * </Button>\n\t * <Button type=\"button\" appearance=\"filled\">\n\t * Save\n\t * </Button>\n\t * </Dialog.Footer>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * Contains the header content of the dialog, including the title and close button.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The overlay backdrop for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-reference\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Portal>\n\t * <Dialog.Overlay />\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <Text>Dialog content here.</Text>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tOverlay,\n\t/**\n\t * The portal container for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-reference\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\">Open Dialog</Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Portal>\n\t * <Dialog.Overlay />\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Portal Dialog</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <Text>This dialog is rendered in a portal.</Text>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tPortal,\n\t/**\n\t * An accessible name to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogtitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * <Dialog.CloseIconButton />\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A button that opens the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogtrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t * <Dialog.Trigger asChild>\n\t * <Button type=\"button\" appearance=\"outlined\">\n\t * Open Dialog\n\t * </Button>\n\t * </Dialog.Trigger>\n\t * <Dialog.Content>\n\t * <Dialog.Header>\n\t * <Dialog.Title>Dialog Title</Dialog.Title>\n\t * </Dialog.Header>\n\t * <Dialog.Body>\n\t * <p>This is the dialog content.</p>\n\t * </Dialog.Body>\n\t * </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tDialog,\n};\n"],"mappings":"sSAyCA,MAAM,EAAOA,EACb,EAAK,YAAc,SA0BnB,MAAM,EAAUC,EAChB,EAAQ,YAAc,gBAEtB,MAAM,EAASC,EACf,EAAO,YAAc,eAErB,MAAM,EAAQC,EACd,EAAM,YAAc,cAEpB,MAAM,EAAU,GAGb,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACC,EAAD,CACM,MACL,UAAW,EACV,iKACA,EACA,CACD,GAAI,EACH,CAAA,CACD,CACF,EAAQ,YAAc,gBAgDtB,MAAM,EAAU,GACd,CAAE,WAAU,YAAW,iBAAiB,WAAY,GAAG,GAAS,IAChE,EAAC,EAAD,CAAA,SAAA,CACC,EAAC,EAAD,EAAW,CAAA,CACX,EAAC,MAAD,CAAK,UAAU,+DACd,EAACC,EAAD,CACC,4BAAA,GACA,UAAW,EACV,yCACA,6CACA,wFACA,2KACA,EACA,EACA,CACI,MACL,GAAI,EAEH,WACwB,CAAA,CACrB,CAAA,CACE,CAAA,CAAA,CAEV,CACD,EAAQ,YAAc,gBA2BtB,MAAM,GAAU,CAAE,YAAW,WAAU,GAAG,KACzC,EAAC,MAAD,CACC,UAAW,EACV,+GACA,0BACA,EACA,CACD,GAAI,EAEH,WACI,CAAA,CAEP,EAAO,YAAc,eA6BrB,MAAM,GAAmB,CACxB,OAAO,KACP,OAAO,SACP,QAAQ,eACR,aAAa,QACb,GAAG,KAEH,EAACF,EAAD,CAAuB,QAAA,YACtB,EAAC,EAAD,CACa,aACZ,KAAM,EAAC,EAAD,EAAS,CAAA,CACR,QACD,OACA,OACN,GAAI,EACH,CAAA,CACqB,CAAA,CAEzB,EAAgB,YAAc,wBA0B9B,MAAM,GAAQ,CAAE,YAAW,GAAG,KAC7B,EAAC,MAAD,CAAK,UAAW,EAAG,iDAAkD,EAAU,CAAE,GAAI,EAAS,CAAA,CAE/F,EAAK,YAAc,aAkCnB,MAAM,GAAU,CAAE,YAAW,GAAG,KAC/B,EAAC,MAAD,CACC,UAAW,EACV,8EACA,EACA,CACD,GAAI,EACH,CAAA,CAEH,EAAO,YAAc,eA2BrB,MAAM,EAAQ,GAGX,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACG,EAAD,CACM,MACL,UAAW,EAAG,2CAA4C,EAAU,CACpE,GAAI,EACH,CAAA,CACD,CACF,EAAM,YAAc,cA+BpB,MAAM,EAAc,GAGjB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACC,EAAD,CAAkC,MAAK,UAAW,EAAG,aAAc,EAAU,CAAE,GAAI,EAAS,CAAA,CAC3F,CACF,EAAY,YAAc,oBAmC1B,MAAM,EAAS,CAmCd,OAyBA,OA6BA,QA0BA,kBAmCA,UA4BA,cAiCA,SA0BA,SAuBA,UA0BA,SA0BA,QAyBA,UACA"}
|
package/dist/dialog.d.ts
CHANGED
|
@@ -1,3 +1,422 @@
|
|
|
1
|
-
import { n as isDialogOverlayTarget } from "./primitive-tuHqhoRE.js";
|
|
2
|
-
import {
|
|
3
|
-
|
|
1
|
+
import { n as isDialogOverlayTarget, t as Root } from "./primitive-tuHqhoRE.js";
|
|
2
|
+
import { n as IconButtonProps } from "./icon-button-2r6S3HVA.js";
|
|
3
|
+
import * as react from "react";
|
|
4
|
+
import { ComponentProps } from "react";
|
|
5
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
6
|
+
import * as _radix_ui_react_dialog0 from "@radix-ui/react-dialog";
|
|
7
|
+
|
|
8
|
+
//#region src/components/dialog/dialog.d.ts
|
|
9
|
+
type CloseIconButtonProps = Partial<Omit<IconButtonProps, "icon">>;
|
|
10
|
+
/**
|
|
11
|
+
* A window overlaid on either the primary window or another dialog window.
|
|
12
|
+
*
|
|
13
|
+
* @see https://mantle.ngrok.com/components/dialog
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```tsx
|
|
17
|
+
* <Dialog.Root>
|
|
18
|
+
* <Dialog.Trigger asChild>
|
|
19
|
+
* <Button type="button" appearance="outlined">
|
|
20
|
+
* Open Dialog
|
|
21
|
+
* </Button>
|
|
22
|
+
* </Dialog.Trigger>
|
|
23
|
+
* <Dialog.Content>
|
|
24
|
+
* <Dialog.Header>
|
|
25
|
+
* <Dialog.Title>Dialog Title</Dialog.Title>
|
|
26
|
+
* <Dialog.CloseIconButton />
|
|
27
|
+
* </Dialog.Header>
|
|
28
|
+
* <Dialog.Body>
|
|
29
|
+
* <p>This is the dialog content.</p>
|
|
30
|
+
* </Dialog.Body>
|
|
31
|
+
* <Dialog.Footer>
|
|
32
|
+
* <Button type="button" appearance="outlined">
|
|
33
|
+
* Cancel
|
|
34
|
+
* </Button>
|
|
35
|
+
* <Button type="button" appearance="filled">
|
|
36
|
+
* Save
|
|
37
|
+
* </Button>
|
|
38
|
+
* </Dialog.Footer>
|
|
39
|
+
* </Dialog.Content>
|
|
40
|
+
* </Dialog.Root>
|
|
41
|
+
* ```
|
|
42
|
+
*/
|
|
43
|
+
declare const Dialog: {
|
|
44
|
+
/**
|
|
45
|
+
* A window overlaid on either the primary window or another dialog window.
|
|
46
|
+
* The root stateful component for the Dialog.
|
|
47
|
+
*
|
|
48
|
+
* @see https://mantle.ngrok.com/components/dialog#dialogroot
|
|
49
|
+
*
|
|
50
|
+
* @example
|
|
51
|
+
* ```tsx
|
|
52
|
+
* <Dialog.Root>
|
|
53
|
+
* <Dialog.Trigger asChild>
|
|
54
|
+
* <Button type="button" appearance="outlined">
|
|
55
|
+
* Open Dialog
|
|
56
|
+
* </Button>
|
|
57
|
+
* </Dialog.Trigger>
|
|
58
|
+
* <Dialog.Content>
|
|
59
|
+
* <Dialog.Header>
|
|
60
|
+
* <Dialog.Title>Dialog Title</Dialog.Title>
|
|
61
|
+
* <Dialog.CloseIconButton />
|
|
62
|
+
* </Dialog.Header>
|
|
63
|
+
* <Dialog.Body>
|
|
64
|
+
* <p>This is the dialog content.</p>
|
|
65
|
+
* </Dialog.Body>
|
|
66
|
+
* <Dialog.Footer>
|
|
67
|
+
* <Button type="button" appearance="outlined">
|
|
68
|
+
* Cancel
|
|
69
|
+
* </Button>
|
|
70
|
+
* <Button type="button" appearance="filled">
|
|
71
|
+
* Save
|
|
72
|
+
* </Button>
|
|
73
|
+
* </Dialog.Footer>
|
|
74
|
+
* </Dialog.Content>
|
|
75
|
+
* </Dialog.Root>
|
|
76
|
+
* ```
|
|
77
|
+
*/
|
|
78
|
+
readonly Root: typeof Root;
|
|
79
|
+
/**
|
|
80
|
+
* Contains the main content of the dialog.
|
|
81
|
+
*
|
|
82
|
+
* @see https://mantle.ngrok.com/components/dialog#dialogbody
|
|
83
|
+
*
|
|
84
|
+
* @example
|
|
85
|
+
* ```tsx
|
|
86
|
+
* <Dialog.Root>
|
|
87
|
+
* <Dialog.Trigger asChild>
|
|
88
|
+
* <Button type="button" appearance="outlined">
|
|
89
|
+
* Open Dialog
|
|
90
|
+
* </Button>
|
|
91
|
+
* </Dialog.Trigger>
|
|
92
|
+
* <Dialog.Content>
|
|
93
|
+
* <Dialog.Header>
|
|
94
|
+
* <Dialog.Title>Dialog Title</Dialog.Title>
|
|
95
|
+
* </Dialog.Header>
|
|
96
|
+
* <Dialog.Body>
|
|
97
|
+
* <p>This is the dialog content.</p>
|
|
98
|
+
* </Dialog.Body>
|
|
99
|
+
* </Dialog.Content>
|
|
100
|
+
* </Dialog.Root>
|
|
101
|
+
* ```
|
|
102
|
+
*/
|
|
103
|
+
readonly Body: {
|
|
104
|
+
({
|
|
105
|
+
className,
|
|
106
|
+
...props
|
|
107
|
+
}: ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
|
|
108
|
+
displayName: string;
|
|
109
|
+
};
|
|
110
|
+
/**
|
|
111
|
+
* A button that closes the dialog when clicked.
|
|
112
|
+
*
|
|
113
|
+
* @see https://mantle.ngrok.com/components/dialog#dialogclose
|
|
114
|
+
*
|
|
115
|
+
* @example
|
|
116
|
+
* ```tsx
|
|
117
|
+
* <Dialog.Root>
|
|
118
|
+
* <Dialog.Trigger asChild>
|
|
119
|
+
* <Button type="button">Open Dialog</Button>
|
|
120
|
+
* </Dialog.Trigger>
|
|
121
|
+
* <Dialog.Content>
|
|
122
|
+
* <Dialog.Header>
|
|
123
|
+
* <Dialog.Title>Confirm Action</Dialog.Title>
|
|
124
|
+
* </Dialog.Header>
|
|
125
|
+
* <Dialog.Body>
|
|
126
|
+
* <Text>Are you sure you want to proceed?</Text>
|
|
127
|
+
* </Dialog.Body>
|
|
128
|
+
* <Dialog.Footer>
|
|
129
|
+
* <Dialog.Close asChild>
|
|
130
|
+
* <Button type="button" appearance="outlined">Cancel</Button>
|
|
131
|
+
* </Dialog.Close>
|
|
132
|
+
* <Button type="submit">Confirm</Button>
|
|
133
|
+
* </Dialog.Footer>
|
|
134
|
+
* </Dialog.Content>
|
|
135
|
+
* </Dialog.Root>
|
|
136
|
+
* ```
|
|
137
|
+
*/
|
|
138
|
+
readonly Close: react.ForwardRefExoticComponent<_radix_ui_react_dialog0.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
|
|
139
|
+
/**
|
|
140
|
+
* An icon button that closes the dialog when clicked.
|
|
141
|
+
*
|
|
142
|
+
* @see https://mantle.ngrok.com/components/dialog#dialogcloseiconbutton
|
|
143
|
+
*
|
|
144
|
+
* @example
|
|
145
|
+
* ```tsx
|
|
146
|
+
* <Dialog.Root>
|
|
147
|
+
* <Dialog.Trigger asChild>
|
|
148
|
+
* <Button type="button" appearance="outlined">
|
|
149
|
+
* Open Dialog
|
|
150
|
+
* </Button>
|
|
151
|
+
* </Dialog.Trigger>
|
|
152
|
+
* <Dialog.Content>
|
|
153
|
+
* <Dialog.Header>
|
|
154
|
+
* <Dialog.Title>Dialog Title</Dialog.Title>
|
|
155
|
+
* <Dialog.CloseIconButton />
|
|
156
|
+
* </Dialog.Header>
|
|
157
|
+
* <Dialog.Body>
|
|
158
|
+
* <p>This is the dialog content.</p>
|
|
159
|
+
* </Dialog.Body>
|
|
160
|
+
* </Dialog.Content>
|
|
161
|
+
* </Dialog.Root>
|
|
162
|
+
* ```
|
|
163
|
+
*/
|
|
164
|
+
readonly CloseIconButton: {
|
|
165
|
+
({
|
|
166
|
+
size,
|
|
167
|
+
type,
|
|
168
|
+
label,
|
|
169
|
+
appearance,
|
|
170
|
+
...props
|
|
171
|
+
}: CloseIconButtonProps): react_jsx_runtime0.JSX.Element;
|
|
172
|
+
displayName: string;
|
|
173
|
+
};
|
|
174
|
+
/**
|
|
175
|
+
* The container for the dialog content.
|
|
176
|
+
* Renders on top of the overlay and is centered in the viewport.
|
|
177
|
+
*
|
|
178
|
+
* @see https://mantle.ngrok.com/components/dialog#dialogcontent
|
|
179
|
+
*
|
|
180
|
+
* @example
|
|
181
|
+
* ```tsx
|
|
182
|
+
* <Dialog.Root>
|
|
183
|
+
* <Dialog.Trigger asChild>
|
|
184
|
+
* <Button type="button" appearance="outlined">
|
|
185
|
+
* Open Dialog
|
|
186
|
+
* </Button>
|
|
187
|
+
* </Dialog.Trigger>
|
|
188
|
+
* <Dialog.Content>
|
|
189
|
+
* <Dialog.Header>
|
|
190
|
+
* <Dialog.Title>Dialog Title</Dialog.Title>
|
|
191
|
+
* <Dialog.CloseIconButton />
|
|
192
|
+
* </Dialog.Header>
|
|
193
|
+
* <Dialog.Body>
|
|
194
|
+
* <p>This is the dialog content.</p>
|
|
195
|
+
* </Dialog.Body>
|
|
196
|
+
* <Dialog.Footer>
|
|
197
|
+
* <Button type="button" appearance="outlined">
|
|
198
|
+
* Cancel
|
|
199
|
+
* </Button>
|
|
200
|
+
* <Button type="button" appearance="filled">
|
|
201
|
+
* Save
|
|
202
|
+
* </Button>
|
|
203
|
+
* </Dialog.Footer>
|
|
204
|
+
* </Dialog.Content>
|
|
205
|
+
* </Dialog.Root>
|
|
206
|
+
* ```
|
|
207
|
+
*/
|
|
208
|
+
readonly Content: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog0.DialogContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
209
|
+
/**
|
|
210
|
+
* The preferred width of the `Dialog.Content` as a tailwind `max-w-` class.
|
|
211
|
+
*
|
|
212
|
+
* By default, a `Dialog`'s content width is responsive with a default
|
|
213
|
+
* preferred width: the maximum width of the `Dialog.Content`
|
|
214
|
+
*
|
|
215
|
+
* @default `max-w-lg`
|
|
216
|
+
*/
|
|
217
|
+
preferredWidth?: `max-w-${string}`;
|
|
218
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
219
|
+
/**
|
|
220
|
+
* An accessible description to be announced when the dialog is opened.
|
|
221
|
+
*
|
|
222
|
+
* @see https://mantle.ngrok.com/components/dialog#dialogdescription
|
|
223
|
+
*
|
|
224
|
+
* @example
|
|
225
|
+
* ```tsx
|
|
226
|
+
* <Dialog.Root>
|
|
227
|
+
* <Dialog.Trigger asChild>
|
|
228
|
+
* <Button type="button" appearance="outlined">
|
|
229
|
+
* Open Dialog
|
|
230
|
+
* </Button>
|
|
231
|
+
* </Dialog.Trigger>
|
|
232
|
+
* <Dialog.Content>
|
|
233
|
+
* <Dialog.Header>
|
|
234
|
+
* <Dialog.Title>Dialog Title</Dialog.Title>
|
|
235
|
+
* <Dialog.Description>
|
|
236
|
+
* This is an optional description.
|
|
237
|
+
* </Dialog.Description>
|
|
238
|
+
* </Dialog.Header>
|
|
239
|
+
* <Dialog.Body>
|
|
240
|
+
* <p>This is the dialog content.</p>
|
|
241
|
+
* </Dialog.Body>
|
|
242
|
+
* </Dialog.Content>
|
|
243
|
+
* </Dialog.Root>
|
|
244
|
+
* ```
|
|
245
|
+
*/
|
|
246
|
+
readonly Description: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog0.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
247
|
+
/**
|
|
248
|
+
* Contains the footer content of the dialog, including action buttons.
|
|
249
|
+
*
|
|
250
|
+
* @see https://mantle.ngrok.com/components/dialog#dialogfooter
|
|
251
|
+
*
|
|
252
|
+
* @example
|
|
253
|
+
* ```tsx
|
|
254
|
+
* <Dialog.Root>
|
|
255
|
+
* <Dialog.Trigger asChild>
|
|
256
|
+
* <Button type="button" appearance="outlined">
|
|
257
|
+
* Open Dialog
|
|
258
|
+
* </Button>
|
|
259
|
+
* </Dialog.Trigger>
|
|
260
|
+
* <Dialog.Content>
|
|
261
|
+
* <Dialog.Header>
|
|
262
|
+
* <Dialog.Title>Dialog Title</Dialog.Title>
|
|
263
|
+
* </Dialog.Header>
|
|
264
|
+
* <Dialog.Body>
|
|
265
|
+
* <p>This is the dialog content.</p>
|
|
266
|
+
* </Dialog.Body>
|
|
267
|
+
* <Dialog.Footer>
|
|
268
|
+
* <Button type="button" appearance="outlined">
|
|
269
|
+
* Cancel
|
|
270
|
+
* </Button>
|
|
271
|
+
* <Button type="button" appearance="filled">
|
|
272
|
+
* Save
|
|
273
|
+
* </Button>
|
|
274
|
+
* </Dialog.Footer>
|
|
275
|
+
* </Dialog.Content>
|
|
276
|
+
* </Dialog.Root>
|
|
277
|
+
* ```
|
|
278
|
+
*/
|
|
279
|
+
readonly Footer: {
|
|
280
|
+
({
|
|
281
|
+
className,
|
|
282
|
+
...props
|
|
283
|
+
}: ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
|
|
284
|
+
displayName: string;
|
|
285
|
+
};
|
|
286
|
+
/**
|
|
287
|
+
* Contains the header content of the dialog, including the title and close button.
|
|
288
|
+
*
|
|
289
|
+
* @see https://mantle.ngrok.com/components/dialog#dialogheader
|
|
290
|
+
*
|
|
291
|
+
* @example
|
|
292
|
+
* ```tsx
|
|
293
|
+
* <Dialog.Root>
|
|
294
|
+
* <Dialog.Trigger asChild>
|
|
295
|
+
* <Button type="button" appearance="outlined">
|
|
296
|
+
* Open Dialog
|
|
297
|
+
* </Button>
|
|
298
|
+
* </Dialog.Trigger>
|
|
299
|
+
* <Dialog.Content>
|
|
300
|
+
* <Dialog.Header>
|
|
301
|
+
* <Dialog.Title>Dialog Title</Dialog.Title>
|
|
302
|
+
* <Dialog.CloseIconButton />
|
|
303
|
+
* </Dialog.Header>
|
|
304
|
+
* <Dialog.Body>
|
|
305
|
+
* <p>This is the dialog content.</p>
|
|
306
|
+
* </Dialog.Body>
|
|
307
|
+
* </Dialog.Content>
|
|
308
|
+
* </Dialog.Root>
|
|
309
|
+
* ```
|
|
310
|
+
*/
|
|
311
|
+
readonly Header: {
|
|
312
|
+
({
|
|
313
|
+
className,
|
|
314
|
+
children,
|
|
315
|
+
...props
|
|
316
|
+
}: ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
|
|
317
|
+
displayName: string;
|
|
318
|
+
};
|
|
319
|
+
/**
|
|
320
|
+
* The overlay backdrop for the dialog.
|
|
321
|
+
*
|
|
322
|
+
* @see https://mantle.ngrok.com/components/dialog#api-reference
|
|
323
|
+
*
|
|
324
|
+
* @example
|
|
325
|
+
* ```tsx
|
|
326
|
+
* <Dialog.Root>
|
|
327
|
+
* <Dialog.Portal>
|
|
328
|
+
* <Dialog.Overlay />
|
|
329
|
+
* <Dialog.Content>
|
|
330
|
+
* <Dialog.Header>
|
|
331
|
+
* <Dialog.Title>Dialog Title</Dialog.Title>
|
|
332
|
+
* </Dialog.Header>
|
|
333
|
+
* <Dialog.Body>
|
|
334
|
+
* <Text>Dialog content here.</Text>
|
|
335
|
+
* </Dialog.Body>
|
|
336
|
+
* </Dialog.Content>
|
|
337
|
+
* </Dialog.Portal>
|
|
338
|
+
* </Dialog.Root>
|
|
339
|
+
* ```
|
|
340
|
+
*/
|
|
341
|
+
readonly Overlay: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog0.DialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
342
|
+
/**
|
|
343
|
+
* The portal container for the dialog.
|
|
344
|
+
*
|
|
345
|
+
* @see https://mantle.ngrok.com/components/dialog#api-reference
|
|
346
|
+
*
|
|
347
|
+
* @example
|
|
348
|
+
* ```tsx
|
|
349
|
+
* <Dialog.Root>
|
|
350
|
+
* <Dialog.Trigger asChild>
|
|
351
|
+
* <Button type="button">Open Dialog</Button>
|
|
352
|
+
* </Dialog.Trigger>
|
|
353
|
+
* <Dialog.Portal>
|
|
354
|
+
* <Dialog.Overlay />
|
|
355
|
+
* <Dialog.Content>
|
|
356
|
+
* <Dialog.Header>
|
|
357
|
+
* <Dialog.Title>Portal Dialog</Dialog.Title>
|
|
358
|
+
* </Dialog.Header>
|
|
359
|
+
* <Dialog.Body>
|
|
360
|
+
* <Text>This dialog is rendered in a portal.</Text>
|
|
361
|
+
* </Dialog.Body>
|
|
362
|
+
* </Dialog.Content>
|
|
363
|
+
* </Dialog.Portal>
|
|
364
|
+
* </Dialog.Root>
|
|
365
|
+
* ```
|
|
366
|
+
*/
|
|
367
|
+
readonly Portal: react.FC<_radix_ui_react_dialog0.DialogPortalProps>;
|
|
368
|
+
/**
|
|
369
|
+
* An accessible name to be announced when the dialog is opened.
|
|
370
|
+
*
|
|
371
|
+
* @see https://mantle.ngrok.com/components/dialog#dialogtitle
|
|
372
|
+
*
|
|
373
|
+
* @example
|
|
374
|
+
* ```tsx
|
|
375
|
+
* <Dialog.Root>
|
|
376
|
+
* <Dialog.Trigger asChild>
|
|
377
|
+
* <Button type="button" appearance="outlined">
|
|
378
|
+
* Open Dialog
|
|
379
|
+
* </Button>
|
|
380
|
+
* </Dialog.Trigger>
|
|
381
|
+
* <Dialog.Content>
|
|
382
|
+
* <Dialog.Header>
|
|
383
|
+
* <Dialog.Title>Dialog Title</Dialog.Title>
|
|
384
|
+
* <Dialog.CloseIconButton />
|
|
385
|
+
* </Dialog.Header>
|
|
386
|
+
* <Dialog.Body>
|
|
387
|
+
* <p>This is the dialog content.</p>
|
|
388
|
+
* </Dialog.Body>
|
|
389
|
+
* </Dialog.Content>
|
|
390
|
+
* </Dialog.Root>
|
|
391
|
+
* ```
|
|
392
|
+
*/
|
|
393
|
+
readonly Title: react.ForwardRefExoticComponent<Omit<_radix_ui_react_dialog0.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
|
|
394
|
+
/**
|
|
395
|
+
* A button that opens the dialog.
|
|
396
|
+
*
|
|
397
|
+
* @see https://mantle.ngrok.com/components/dialog#dialogtrigger
|
|
398
|
+
*
|
|
399
|
+
* @example
|
|
400
|
+
* ```tsx
|
|
401
|
+
* <Dialog.Root>
|
|
402
|
+
* <Dialog.Trigger asChild>
|
|
403
|
+
* <Button type="button" appearance="outlined">
|
|
404
|
+
* Open Dialog
|
|
405
|
+
* </Button>
|
|
406
|
+
* </Dialog.Trigger>
|
|
407
|
+
* <Dialog.Content>
|
|
408
|
+
* <Dialog.Header>
|
|
409
|
+
* <Dialog.Title>Dialog Title</Dialog.Title>
|
|
410
|
+
* </Dialog.Header>
|
|
411
|
+
* <Dialog.Body>
|
|
412
|
+
* <p>This is the dialog content.</p>
|
|
413
|
+
* </Dialog.Body>
|
|
414
|
+
* </Dialog.Content>
|
|
415
|
+
* </Dialog.Root>
|
|
416
|
+
* ```
|
|
417
|
+
*/
|
|
418
|
+
readonly Trigger: react.ForwardRefExoticComponent<_radix_ui_react_dialog0.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
419
|
+
};
|
|
420
|
+
//#endregion
|
|
421
|
+
export { Dialog, isDialogOverlayTarget };
|
|
422
|
+
//# sourceMappingURL=dialog.d.ts.map
|
package/dist/dialog.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{l as e}from"./primitive-
|
|
1
|
+
import{l as e}from"./primitive-qv3vtV4B.js";import{t}from"./dialog-nNRT5LpD.js";export{t as Dialog,e as isDialogOverlayTarget};
|
|
@@ -142,4 +142,4 @@ declare function $timeSortingDirection<T extends TimeSortingDirection | SortingD
|
|
|
142
142
|
}[(T & "desc") | (T & "asc")] | (T & "newest-to-oldest") | (T & "oldest-to-newest");
|
|
143
143
|
//#endregion
|
|
144
144
|
export { timeSortingDirections as _, AlphanumericSortingDirection as a, TimeSortingDirection as c, isSortingDirection as d, isSortingMode as f, timeSortingByDirection as g, sortingModes as h, $timeSortingDirection as i, alphanumericSortingDirections as l, sortingDirections as m, $sortingDirection as n, SortingDirection as o, isTimeSortingDirection as p, $sortingMode as r, SortingMode as s, $alphanumericSortingDirection as t, isAlphanumericSortingDirection as u };
|
|
145
|
-
//# sourceMappingURL=direction-
|
|
145
|
+
//# sourceMappingURL=direction-DYYpi-JC.d.ts.map
|
package/dist/dropdown-menu.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as DropdownMenu } from "./dropdown-menu-
|
|
1
|
+
import { t as DropdownMenu } from "./dropdown-menu-BEjpuGrT.js";
|
|
2
2
|
export { DropdownMenu };
|
package/dist/hooks.d.ts
CHANGED
package/dist/icon.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { t as SvgAttributes } from "./types-Dh4BVhXC.js";
|
|
2
2
|
import { n as IconProps, t as Icon } from "./icon-B1XLv02t.js";
|
|
3
|
-
import { n as SvgOnlyProps, t as SvgOnly } from "./svg-only-
|
|
3
|
+
import { n as SvgOnlyProps, t as SvgOnly } from "./svg-only-Ct2mB46K.js";
|
|
4
4
|
export { Icon, type IconProps, type SvgAttributes, SvgOnly, type SvgOnlyProps };
|
package/dist/icons.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { t as SvgAttributes } from "./types-Dh4BVhXC.js";
|
|
2
|
-
import { a as AlphanumericSortingDirection, c as TimeSortingDirection, o as SortingDirection, s as SortingMode } from "./direction-
|
|
3
|
-
import { i as Theme } from "./themes-
|
|
2
|
+
import { a as AlphanumericSortingDirection, c as TimeSortingDirection, o as SortingDirection, s as SortingMode } from "./direction-DYYpi-JC.js";
|
|
3
|
+
import { i as Theme } from "./themes-Dk0VkyqX.js";
|
|
4
4
|
import { ComponentProps } from "react";
|
|
5
5
|
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
6
6
|
|
|
@@ -82,4 +82,4 @@ declare function inView(element: Element, onStart: (element: Element, entry: Int
|
|
|
82
82
|
}?: InViewOptions): VoidFunction;
|
|
83
83
|
//#endregion
|
|
84
84
|
export { composeRefs as a, inView as i, MarginType as n, useComposedRefs as o, ViewChangeHandler as r, InViewOptions as t };
|
|
85
|
-
//# sourceMappingURL=in-view-
|
|
85
|
+
//# sourceMappingURL=in-view-ca-moloX.d.ts.map
|
|
@@ -5,7 +5,7 @@ import * as class_variance_authority_types0 from "class-variance-authority/types
|
|
|
5
5
|
|
|
6
6
|
//#region src/components/button/button-group.d.ts
|
|
7
7
|
declare const buttonGroupVariants: (props?: ({
|
|
8
|
-
appearance?: "
|
|
8
|
+
appearance?: "ghost" | "outlined" | "panel" | null | undefined;
|
|
9
9
|
} & class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
10
10
|
type ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>;
|
|
11
11
|
type ButtonGroupProps = ComponentProps<"div"> & ButtonGroupVariants;
|
|
@@ -26,4 +26,4 @@ type ButtonGroupProps = ComponentProps<"div"> & ButtonGroupVariants;
|
|
|
26
26
|
declare const ButtonGroup: react.ForwardRefExoticComponent<Omit<ButtonGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
27
27
|
//#endregion
|
|
28
28
|
export { ButtonGroupProps as n, ButtonGroup as t };
|
|
29
|
-
//# sourceMappingURL=index-
|
|
29
|
+
//# sourceMappingURL=index-ViSCOUrU.d.ts.map
|
package/dist/pagination.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { t as WithAsChild } from "./as-child-XMVTepJu.js";
|
|
2
|
-
import { t as ButtonGroup } from "./index-
|
|
3
|
-
import { t as Select } from "./select-
|
|
2
|
+
import { t as ButtonGroup } from "./index-ViSCOUrU.js";
|
|
3
|
+
import { t as Select } from "./select-BkvbNKQ7.js";
|
|
4
4
|
import * as react from "react";
|
|
5
5
|
import { ComponentProps } from "react";
|
|
6
6
|
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{t as e}from"./booleanish-CBGdPL3Q.js";import{t}from"./slot-DdnjeV2n.js";import{i as n}from"./toast-B28JCGXG.js";import{createContext as r,forwardRef as i,useContext as a,useEffect as o,useState as s}from"react";import{jsx as c}from"react/jsx-runtime";import*as l from"@radix-ui/react-dialog";const u=r({hasDescription:!1,setHasDescription:()=>{}});function d(e){let[t,n]=s(!1);return c(u.Provider,{value:{hasDescription:t,setHasDescription:n},children:c(l.Root,{...e})})}d.displayName=`DialogPrimitiveRoot`;const f=l.Trigger;f.displayName=`DialogPrimitiveTrigger`;const p=l.Portal;p.displayName=`DialogPrimitivePortal`;const m=l.Close;m.displayName=`DialogPrimitiveClose`;const h=i((e,t)=>c(l.Overlay,{"data-overlay":!0,ref:t,...e}));h.displayName=`DialogPrimitiveOverlay`;const g=i(({onEscapeKeyDown:e,onInteractOutside:t,onPointerDownOutside:r,...i},o)=>{let s=a(u);return c(l.Content,{ref:o,onEscapeKeyDown:t=>{b(t),e?.(t)},onInteractOutside:e=>{n(e),t?.(e)},onPointerDownOutside:e=>{n(e),r?.(e)},...s.hasDescription?{}:{"aria-describedby":void 0},...i})});g.displayName=`DialogPrimitiveContent`;const _=l.Title,v=i(({asChild:e,children:n,...r},i)=>{let s=a(u);o(()=>(s.setHasDescription(!0),()=>s.setHasDescription(!1)),[s]);let d=e?t:`div`;return c(l.Description,{ref:i,asChild:!0,children:c(d,{...r,children:n})})});v.displayName=`DialogPrimitiveDescription`;function y(e){return e instanceof HTMLElement?e.hasAttribute(`data-overlay`):!1}function b(t){if(!w(t.currentTarget))return;let n=t.currentTarget,r=n instanceof Document?n.activeElement:n.ownerDocument?.activeElement??null,i=x(t.target)??x(r),a=i?S(i):null;i!=null&&e(i.getAttribute(`aria-expanded`))&&a!=null&&n.contains(i)&&n.contains(a)&&t.preventDefault()}function x(e){return C(e)?e.closest(`[aria-expanded='true'][aria-controls]`):null}function S(e){let t=e.getAttribute(`aria-controls`);if(!t)return null;let n=e.ownerDocument.getElementById(t);return n instanceof HTMLElement?n:null}function C(e){return e instanceof HTMLElement}function w(e){return e instanceof Node&&`querySelector`in e}export{p as a,f as c,h as i,y as l,g as n,d as o,v as r,_ as s,m as t};
|
|
2
|
-
//# sourceMappingURL=primitive-
|
|
1
|
+
import{t as e}from"./booleanish-CBGdPL3Q.js";import{t}from"./slot-DdnjeV2n.js";import{i as n}from"./toast-B28JCGXG.js";import{createContext as r,forwardRef as i,useContext as a,useEffect as o,useState as s}from"react";import{jsx as c}from"react/jsx-runtime";import*as l from"@radix-ui/react-dialog";const u=r({hasDescription:!1,setHasDescription:()=>{}});function d(e){let[t,n]=s(!1);return c(u.Provider,{value:{hasDescription:t,setHasDescription:n},children:c(l.Root,{...e})})}d.displayName=`DialogPrimitiveRoot`;const f=l.Trigger;f.displayName=`DialogPrimitiveTrigger`;const p=l.Portal;p.displayName=`DialogPrimitivePortal`;const m=l.Close;m.displayName=`DialogPrimitiveClose`;const h=i((e,t)=>c(l.Overlay,{"data-overlay":!0,ref:t,...e}));h.displayName=`DialogPrimitiveOverlay`;const g=i(({onEscapeKeyDown:e,onInteractOutside:t,onPointerDownOutside:r,...i},o)=>{let s=a(u);return c(l.Content,{ref:o,onEscapeKeyDown:t=>{b(t),e?.(t)},onInteractOutside:e=>{n(e),t?.(e)},onPointerDownOutside:e=>{n(e),r?.(e)},...s.hasDescription?{}:{"aria-describedby":void 0},...i})});g.displayName=`DialogPrimitiveContent`;const _=l.Title,v=i(({asChild:e,children:n,...r},i)=>{let s=a(u);o(()=>(s.setHasDescription(!0),()=>s.setHasDescription(!1)),[s]);let d=e?t:`div`;return c(l.Description,{ref:i,asChild:!0,children:c(d,{...r,children:n})})});v.displayName=`DialogPrimitiveDescription`;function y(e){return e instanceof HTMLElement?e.hasAttribute(`data-overlay`):!1}function b(t){if(!w(t.currentTarget))return;let n=t.currentTarget,r=n instanceof Document?n.activeElement:n.ownerDocument?.activeElement??null,i=x(t.target)??x(r),a=i?S(i):null;i!=null&&e(i.getAttribute(`aria-expanded`))&&a!=null&&n.contains(i)&&n.contains(a)&&(a.getAttribute(`data-open`)===`true`||a.getAttribute(`data-state`)===`open`)&&t.preventDefault()}function x(e){return C(e)?e.closest(`[aria-expanded='true'][aria-controls]`):null}function S(e){let t=e.getAttribute(`aria-controls`);if(!t)return null;let n=e.ownerDocument.getElementById(t);return n instanceof HTMLElement?n:null}function C(e){return e instanceof HTMLElement}function w(e){return e instanceof Node&&`querySelector`in e}export{p as a,f as c,h as i,y as l,g as n,d as o,v as r,_ as s,m as t};
|
|
2
|
+
//# sourceMappingURL=primitive-qv3vtV4B.js.map
|