@ngrok/mantle 0.51.2 → 0.52.0

package/dist/dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n} from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\nimport * as DialogPrimitive from \"./primitive.js\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the Dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Root = DialogPrimitive.Root;\nRoot.displayName = \"Dialog\";\n\n/**\n * A button that opens the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-trigger\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Trigger = DialogPrimitive.Trigger;\nTrigger.displayName = \"DialogTrigger\";\n\nconst Portal = DialogPrimitive.Portal;\nPortal.displayName = \"DialogPortal\";\n\nconst Close = DialogPrimitive.Close;\nClose.displayName = \"DialogClose\";\n\nconst Overlay = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-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#api-dialog-content\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ContentProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonInteractOutside,\n\t\t\tonPointerDownOutside,\n\t\t\tpreferredWidth = \"max-w-lg\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<Portal>\n\t\t\t<Overlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<DialogPrimitive.Content\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex max-h-full w-full flex-1 flex-col\",\n\t\t\t\t\t\t\"outline-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\tonInteractOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</DialogPrimitive.Content>\n\t\t\t</div>\n\t\t</Portal>\n\t),\n);\nContent.displayName = \"DialogContent\";\n\n/**\n * Contains the header content of the dialog, including the title and close button.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-header\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Header = ({ className, children, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</div>\n);\nHeader.displayName = \"DialogHeader\";\n\ntype CloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\n\n/**\n * An icon button that closes the dialog when clicked.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-close-icon-button\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst CloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Dialog\",\n\tappearance = \"ghost\",\n\t...props\n}: CloseIconButtonProps) => (\n\t<DialogPrimitive.Close asChild>\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={<XIcon />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t</DialogPrimitive.Close>\n);\nCloseIconButton.displayName = \"DialogCloseIconButton\";\n\n/**\n * Contains the main content of the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-body\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Body = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)}\n\t\t{...props}\n\t/>\n);\nBody.displayName = \"DialogBody\";\n\n/**\n * Contains the footer content of the dialog, including action buttons.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-footer\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Footer = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nFooter.displayName = \"DialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-title\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong truncate text-lg font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = \"DialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-description\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>\n *         This is an optional description.\n *       </Dialog.Description>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<\"p\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cx(\"text-muted\", className)}\n\t\t{...props}\n\t/>\n));\nDescription.displayName = \"DialogDescription\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n *\n * @see https://mantle.ngrok.com/components/dialog\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Dialog = {\n\t/**\n\t * A window overlaid on either the primary window or another dialog window.\n\t * The root stateful component for the Dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Button type=\"button\" appearance=\"outlined\">\n\t *         Cancel\n\t *       </Button>\n\t *       <Button type=\"button\" appearance=\"filled\">\n\t *         Save\n\t *       </Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the main content of the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-body\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * A button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-close\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Confirm Action</Dialog.Title>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <Text>Are you sure you want to proceed?</Text>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"submit\">Confirm</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * An icon button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-close-icon-button\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tCloseIconButton,\n\t/**\n\t * The container for the dialog content.\n\t * Renders on top of the overlay and is centered in the viewport.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Button type=\"button\" appearance=\"outlined\">\n\t *         Cancel\n\t *       </Button>\n\t *       <Button type=\"button\" appearance=\"filled\">\n\t *         Save\n\t *       </Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * An accessible description to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-description\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.Description>\n\t *         This is an optional description.\n\t *       </Dialog.Description>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * Contains the footer content of the dialog, including action buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-footer\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Button type=\"button\" appearance=\"outlined\">\n\t *         Cancel\n\t *       </Button>\n\t *       <Button type=\"button\" appearance=\"filled\">\n\t *         Save\n\t *       </Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * Contains the header content of the dialog, including the title and close button.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-header\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The overlay backdrop for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-overlay\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Portal>\n\t *     <Dialog.Overlay />\n\t *     <Dialog.Content>\n\t *       <Dialog.Header>\n\t *         <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       </Dialog.Header>\n\t *       <Dialog.Body>\n\t *         <Text>Dialog content here.</Text>\n\t *       </Dialog.Body>\n\t *     </Dialog.Content>\n\t *   </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tOverlay,\n\t/**\n\t * The portal container for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-portal\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Portal>\n\t *     <Dialog.Overlay />\n\t *     <Dialog.Content>\n\t *       <Dialog.Header>\n\t *         <Dialog.Title>Portal Dialog</Dialog.Title>\n\t *       </Dialog.Header>\n\t *       <Dialog.Body>\n\t *         <Text>This dialog is rendered in a portal.</Text>\n\t *       </Dialog.Body>\n\t *     </Dialog.Content>\n\t *   </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tPortal,\n\t/**\n\t * An accessible name to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-title\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A button that opens the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport { Dialog };\n"],"mappings":"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","names":["XIcon","forwardRef","jsx","jsxs","Root","Trigger","Portal","Close","Overlay","forwardRef","className","props","ref","cx","Content","children","onInteractOutside","onPointerDownOutside","preferredWidth","event","preventCloseOnPromptInteraction","Header","CloseIconButton","size","type","label","appearance","IconButton","XIcon","Body","Footer","Title","Description","Dialog"]}
+{"version":3,"sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n} from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\nimport * as DialogPrimitive from \"./primitive.js\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the Dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Root = DialogPrimitive.Root;\nRoot.displayName = \"Dialog\";\n\n/**\n * A button that opens the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-trigger\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Trigger = DialogPrimitive.Trigger;\nTrigger.displayName = \"DialogTrigger\";\n\nconst Portal = DialogPrimitive.Portal;\nPortal.displayName = \"DialogPortal\";\n\nconst Close = DialogPrimitive.Close;\nClose.displayName = \"DialogClose\";\n\nconst Overlay = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-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#api-dialog-content\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ContentProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonInteractOutside,\n\t\t\tonPointerDownOutside,\n\t\t\tpreferredWidth = \"max-w-lg\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<Portal>\n\t\t\t<Overlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<DialogPrimitive.Content\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex max-h-full w-full flex-1 flex-col\",\n\t\t\t\t\t\t\"outline-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\tonInteractOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</DialogPrimitive.Content>\n\t\t\t</div>\n\t\t</Portal>\n\t),\n);\nContent.displayName = \"DialogContent\";\n\n/**\n * Contains the header content of the dialog, including the title and close button.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-header\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Header = ({ className, children, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</div>\n);\nHeader.displayName = \"DialogHeader\";\n\ntype CloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\n\n/**\n * An icon button that closes the dialog when clicked.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-close-icon-button\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst CloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Dialog\",\n\tappearance = \"ghost\",\n\t...props\n}: CloseIconButtonProps) => (\n\t<DialogPrimitive.Close asChild>\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={<XIcon />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t</DialogPrimitive.Close>\n);\nCloseIconButton.displayName = \"DialogCloseIconButton\";\n\n/**\n * Contains the main content of the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-body\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Body = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)}\n\t\t{...props}\n\t/>\n);\nBody.displayName = \"DialogBody\";\n\n/**\n * Contains the footer content of the dialog, including action buttons.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-footer\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Footer = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nFooter.displayName = \"DialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-title\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong truncate text-lg font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = \"DialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\n * 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#api-dialog-description\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>\n *         This is an optional description.\n *       </Dialog.Description>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cx(\"text-muted\", className)}\n\t\t{...props}\n\t/>\n));\nDescription.displayName = \"DialogDescription\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n *\n * @see https://mantle.ngrok.com/components/dialog\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Dialog = {\n\t/**\n\t * A window overlaid on either the primary window or another dialog window.\n\t * The root stateful component for the Dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Button type=\"button\" appearance=\"outlined\">\n\t *         Cancel\n\t *       </Button>\n\t *       <Button type=\"button\" appearance=\"filled\">\n\t *         Save\n\t *       </Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the main content of the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-body\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * A button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-close\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Confirm Action</Dialog.Title>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <Text>Are you sure you want to proceed?</Text>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"submit\">Confirm</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * An icon button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-close-icon-button\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tCloseIconButton,\n\t/**\n\t * The container for the dialog content.\n\t * Renders on top of the overlay and is centered in the viewport.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Button type=\"button\" appearance=\"outlined\">\n\t *         Cancel\n\t *       </Button>\n\t *       <Button type=\"button\" appearance=\"filled\">\n\t *         Save\n\t *       </Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * An accessible description to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-description\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.Description>\n\t *         This is an optional description.\n\t *       </Dialog.Description>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * Contains the footer content of the dialog, including action buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-footer\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Button type=\"button\" appearance=\"outlined\">\n\t *         Cancel\n\t *       </Button>\n\t *       <Button type=\"button\" appearance=\"filled\">\n\t *         Save\n\t *       </Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * Contains the header content of the dialog, including the title and close button.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-header\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The overlay backdrop for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-overlay\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Portal>\n\t *     <Dialog.Overlay />\n\t *     <Dialog.Content>\n\t *       <Dialog.Header>\n\t *         <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       </Dialog.Header>\n\t *       <Dialog.Body>\n\t *         <Text>Dialog content here.</Text>\n\t *       </Dialog.Body>\n\t *     </Dialog.Content>\n\t *   </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tOverlay,\n\t/**\n\t * The portal container for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-portal\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Portal>\n\t *     <Dialog.Overlay />\n\t *     <Dialog.Content>\n\t *       <Dialog.Header>\n\t *         <Dialog.Title>Portal Dialog</Dialog.Title>\n\t *       </Dialog.Header>\n\t *       <Dialog.Body>\n\t *         <Text>This dialog is rendered in a portal.</Text>\n\t *       </Dialog.Body>\n\t *     </Dialog.Content>\n\t *   </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tPortal,\n\t/**\n\t * An accessible name to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-title\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A button that opens the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tDialog,\n};\n"],"mappings":"gZAAA,OAAS,SAAAA,MAAa,0BAMtB,OAAS,cAAAC,MAAkB,QAgF1B,cAAAC,EAqEC,QAAAC,MArED,oBAxCD,IAAMC,EAAuBA,EAC7BA,EAAK,YAAc,SA0BnB,IAAMC,EAA0BA,EAChCA,EAAQ,YAAc,gBAEtB,IAAMC,EAAyBA,EAC/BA,EAAO,YAAc,eAErB,IAAMC,EAAwBA,EAC9BA,EAAM,YAAc,cAEpB,IAAMC,EAAUC,EAGd,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAiBM,EAAhB,CACA,IAAKI,EACL,UAAWC,EACV,iKACAH,CACD,EACC,GAAGC,EACL,CACA,EACDH,EAAQ,YAAc,gBAgDtB,IAAMM,EAAUL,EACf,CACC,CACC,SAAAM,EACA,UAAAL,EACA,kBAAAM,EACA,qBAAAC,EACA,eAAAC,EAAiB,WACjB,GAAGP,CACJ,EACAC,IAEAT,EAACG,EAAA,CACA,UAAAJ,EAACM,EAAA,EAAQ,EACTN,EAAC,OAAI,UAAU,sDACd,SAAAA,EAAiBY,EAAhB,CACA,UAAWD,EACV,yCACA,6CACA,wFACA,2KACAK,EACAR,CACD,EACA,kBAAoBS,GAAU,CAC7BC,EAAgCD,CAAK,EACrCH,IAAoBG,CAAK,CAC1B,EACA,qBAAuBA,GAAU,CAChCC,EAAgCD,CAAK,EACrCF,IAAuBE,CAAK,CAC7B,EACA,IAAKP,EACJ,GAAGD,EAEH,SAAAI,EACF,EACD,GACD,CAEF,EACAD,EAAQ,YAAc,gBA2BtB,IAAMO,EAAS,CAAC,CAAE,UAAAX,EAAW,SAAAK,EAAU,GAAGJ,CAAM,IAC/CT,EAAC,OACA,UAAWW,EACV,+GACA,0BACAH,CACD,EACC,GAAGC,EAEH,SAAAI,EACF,EAEDM,EAAO,YAAc,eA6BrB,IAAMC,EAAkB,CAAC,CACxB,KAAAC,EAAO,KACP,KAAAC,EAAO,SACP,MAAAC,EAAQ,eACR,WAAAC,EAAa,QACb,GAAGf,CACJ,IACCT,EAAiBK,EAAhB,CAAsB,QAAO,GAC7B,SAAAL,EAACyB,EAAA,CACA,WAAYD,EACZ,KAAMxB,EAAC0B,EAAA,EAAM,EACb,MAAOH,EACP,KAAMF,EACN,KAAMC,EACL,GAAGb,EACL,EACD,EAEDW,EAAgB,YAAc,wBA0B9B,IAAMO,EAAO,CAAC,CAAE,UAAAnB,EAAW,GAAGC,CAAM,IACnCT,EAAC,OACA,UAAWW,EAAG,iDAAkDH,CAAS,EACxE,GAAGC,EACL,EAEDkB,EAAK,YAAc,aAkCnB,IAAMC,EAAS,CAAC,CAAE,UAAApB,EAAW,GAAGC,CAAM,IACrCT,EAAC,OACA,UAAWW,EACV,8EACAH,CACD,EACC,GAAGC,EACL,EAEDmB,EAAO,YAAc,eA2BrB,IAAMC,EAAQtB,EAGZ,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAiB6B,EAAhB,CACA,IAAKnB,EACL,UAAWC,EAAG,2CAA4CH,CAAS,EAClE,GAAGC,EACL,CACA,EACDoB,EAAM,YAAc,cA+BpB,IAAMC,EAAcvB,EAGlB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BV,EAAiB8B,EAAhB,CACA,IAAKpB,EACL,UAAWC,EAAG,aAAcH,CAAS,EACpC,GAAGC,EACL,CACA,EACDqB,EAAY,YAAc,oBAmC1B,IAAMC,EAAS,CAmCd,KAAA7B,EAyBA,KAAAyB,EA6BA,MAAAtB,EA0BA,gBAAAe,EAmCA,QAAAR,EA4BA,YAAAkB,EAiCA,OAAAF,EA0BA,OAAAT,EAuBA,QAAAb,EA0BA,OAAAF,EA0BA,MAAAyB,EAyBA,QAAA1B,CACD","names":["XIcon","forwardRef","jsx","jsxs","Root","Trigger","Portal","Close","Overlay","forwardRef","className","props","ref","cx","Content","children","onInteractOutside","onPointerDownOutside","preferredWidth","event","preventCloseOnPromptInteraction","Header","CloseIconButton","size","type","label","appearance","IconButton","XIcon","Body","Footer","Title","Description","Dialog"]}

package/dist/hooks.d.ts

@@ -1,5 +1,99 @@
 import { useEffect } from 'react';
 
+/**
+ * Tailwind CSS breakpoints in descending order (largest → smallest).
+ *
+ * These correspond to Tailwind’s default `theme.screens` config and are used
+ * to determine the current viewport size.
+ *
+ * @see https://tailwindcss.com/docs/screens
+ *
+ * @example
+ * "2xl" // ≥96rem (1536px)
+ * "xl"  // ≥80rem (1280px)
+ * "lg"  // ≥64rem (1024px)
+ * "md"  // ≥48rem (768px)
+ * "sm"  // ≥40rem (640px)
+ */
+declare const tailwindBreakpoints: readonly ["2xl", "xl", "lg", "md", "sm"];
+/**
+ * A valid Tailwind CSS breakpoint identifier.
+ *
+ * @example
+ * const bp: TailwindBreakpoint = "md"; // ≥48rem (768px)
+ *
+ * @example
+ * "2xl" // ≥96rem (1536px)
+ * "xl"  // ≥80rem (1280px)
+ * "lg"  // ≥64rem (1024px)
+ * "md"  // ≥48rem (768px)
+ * "sm"  // ≥40rem (640px)
+ */
+type TailwindBreakpoint = (typeof tailwindBreakpoints)[number];
+/**
+ * Mantle’s breakpoint set, extending Tailwind’s with `"default"`.
+ *
+ * `"default"` represents the base (0px and up) viewport,
+ * useful for defining fallbacks or mobile-first styles.
+ *
+ * @example
+ * "default" // ≥0rem (0px)
+ * "sm"      // ≥40rem (640px)
+ * "md"      // ≥48rem (768px)
+ * "lg"      // ≥64rem (1024px)
+ * "xl"      // ≥80rem (1280px)
+ * "2xl"     // ≥96rem (1536px)
+ */
+declare const breakpoints: readonly ["default", "2xl", "xl", "lg", "md", "sm"];
+/**
+ * A valid Mantle breakpoint identifier.
+ *
+ * Includes Tailwind’s standard breakpoints plus `"default"` for 0px+.
+ *
+ * @example
+ * const bp: Breakpoint = "default"; // ≥0px
+ *
+ * @example
+ * "default" // ≥0rem (0px)
+ * "sm"      // ≥40rem (640px)
+ * "md"      // ≥48rem (768px)
+ * "lg"      // ≥64rem (1024px)
+ * "xl"      // ≥80rem (1280px)
+ * "2xl"     // ≥96rem (1536px)
+ */
+type Breakpoint = (typeof breakpoints)[number];
+/**
+ * React hook that returns the current breakpoint based on the viewport width.
+ *
+ * Uses a singleton subscription to a set of min-width media queries and returns
+ * the largest matching breakpoint. Designed for React 18+ with
+ * `useSyncExternalStore`.
+ *
+ * @returns {Breakpoint} The current breakpoint that matches the viewport width.
+ *
+ * @example
+ * const breakpoint = useBreakpoint();
+ * if (breakpoint === "lg") {
+ *   // Do something for large screens and above
+ * }
+ */
+declare function useBreakpoint(): Breakpoint;
+/**
+ * React hook that returns true if the current viewport width is below the specified breakpoint.
+ *
+ * This hook uses `window.matchMedia` with a max-width media query and leverages
+ * `useSyncExternalStore` to stay compliant with React's concurrent rendering model.
+ *
+ * @param {TailwindBreakpoint} breakpoint - The breakpoint to check against (e.g., "md", "lg").
+ *
+ * @returns {boolean} `true` if the viewport width is below the breakpoint, otherwise `false`.
+ *
+ * @example
+ * // Check if viewport is below medium (768px)
+ * const isBelowMd = useIsBelowBreakpoint("md");
+ */
+declare function useIsBelowBreakpoint(breakpoint: TailwindBreakpoint): boolean;
+
 /**
  * Returns a memoized callback that will always refer to the latest callback
  * passed to the hook.
@@ -35,11 +129,57 @@ type Options = {
  */
 declare function useDebouncedCallback<T extends (...args: unknown[]) => unknown>(callbackFn: T, options: Options): (...args: Parameters<T>) => void;
 
+/**
+ * React hook that returns whether the component tree has been hydrated
+ * on the client.
+ *
+ * Uses `useSyncExternalStore` to ensure the value is consistent between
+ * server and client rendering, preventing hydration mismatches.
+ *
+ * - On the server, it always returns `false`.
+ * - On the client (after hydration), it returns `true`.
+ *
+ * @see https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store
+ *
+ * @returns {boolean} `true` once hydration has occurred on the client,
+ * otherwise `false`.
+ *
+ * @example
+ * const isHydrated = useIsHydrated();
+ *
+ * if (!isHydrated) {
+ *   return <span style={{ visibility: "hidden" }}>Loading…</span>;
+ * }
+ *
+ * return <span>Ready!</span>;
+ */
+declare function useIsHydrated(): boolean;
+
 /**
  * useIsomorphicLayoutEffect is a hook that uses useLayoutEffect on the client and useEffect on the server.
  */
 declare const useIsomorphicLayoutEffect: typeof useEffect;
 
+/**
+ * React hook that subscribes to and returns the result of a CSS media query.
+ *
+ * This hook uses `window.matchMedia` under the hood and leverages
+ * `useSyncExternalStore` to stay compliant with React's concurrent rendering model.
+ *
+ * @param {string} query - A valid CSS media query string (e.g., `(max-width: 768px)`).
+ *
+ * @returns {boolean} `true` if the media query currently matches, otherwise `false`.
+ *
+ * @example
+ * // Detect if the user prefers a dark color scheme:
+ * const isDarkMode = useMatchesMediaQuery("(prefers-color-scheme: dark)");
+ *
+ * if (isDarkMode) {
+ *   document.body.classList.add("dark");
+ * } else {
+ *   document.body.classList.remove("dark");
+ * }
+ */
 declare function useMatchesMediaQuery(query: string): boolean;
 
 /**
@@ -54,4 +194,4 @@ declare function usePrefersReducedMotion(): boolean;
  */
 declare const useRandomStableId: (prefix?: string) => string;
 
-export { useCallbackRef, useCopyToClipboard, useDebouncedCallback, useIsomorphicLayoutEffect, useMatchesMediaQuery, usePrefersReducedMotion, useRandomStableId };
+export { type Breakpoint, type TailwindBreakpoint, breakpoints, useBreakpoint, useCallbackRef, useCopyToClipboard, useDebouncedCallback, useIsBelowBreakpoint, useIsHydrated, useIsomorphicLayoutEffect, useMatchesMediaQuery, usePrefersReducedMotion, useRandomStableId };

package/dist/hooks.js

@@ -1,2 +1,2 @@
-import{a}from"./chunk-IWKI4XHM.js";import{a as s}from"./chunk-D3XF6J5A.js";import{useEffect as c,useMemo as f,useRef as i}from"react";function u(e){let t=i(e);return c(()=>{t.current=e}),f(()=>((...o)=>t.current?.(...o)),[])}import{useCallback as m,useEffect as d,useRef as p}from"react";function l(e,t){let o=u(e),r=p(0);return d(()=>()=>window.clearTimeout(r.current),[]),m((...n)=>{window.clearTimeout(r.current),r.current=window.setTimeout(()=>o(...n),t.waitMs)},[o,t.waitMs])}import{useEffect as b,useLayoutEffect as w}from"react";var x=typeof window<"u"?w:b;import{useEffect as M,useState as R}from"react";var T="(prefers-reduced-motion: no-preference)";function k(){let[e,t]=R(!0);return M(()=>{let o=window.matchMedia(T);t(!o.matches);function r(n){t(!n.matches)}return o.addEventListener("change",r),()=>{o.removeEventListener("change",r)}},[]),e}import{useMemo as y}from"react";var E=(e="mantle")=>y(()=>h(e),[e]);function h(e="mantle"){return[e.trim()||"mantle",C()].join("-")}function C(){return Math.random().toString(36).substring(2,9)}export{u as useCallbackRef,a as useCopyToClipboard,l as useDebouncedCallback,x as useIsomorphicLayoutEffect,s as useMatchesMediaQuery,k as usePrefersReducedMotion,E as useRandomStableId};
+import{a as y}from"./chunk-X7RUBITL.js";import{a as M}from"./chunk-6J7D73WA.js";import{a as b}from"./chunk-KMNACVH6.js";import{useSyncExternalStore as k}from"react";var h=["2xl","xl","lg","md","sm"],g=["default",...h];function T(){return k(Q,R,()=>"default")}function L(e){return k(v(e),E(e),()=>!1)}var i={"2xl":"(min-width: 96rem)",xl:"(min-width: 80rem)",lg:"(min-width: 64rem)",md:"(min-width: 48rem)",sm:"(min-width: 40rem)"},a={"2xl":"(max-width: 95.99rem)",xl:"(max-width: 79.99rem)",lg:"(max-width: 63.99rem)",md:"(max-width: 47.99rem)",sm:"(max-width: 39.99rem)"},c=null,m=null;function f(){return c||(c={"2xl":window.matchMedia(i["2xl"]),xl:window.matchMedia(i.xl),lg:window.matchMedia(i.lg),md:window.matchMedia(i.md),sm:window.matchMedia(i.sm)}),c}function x(e){return m||(m={"2xl":window.matchMedia(a["2xl"]),xl:window.matchMedia(a.xl),lg:window.matchMedia(a.lg),md:window.matchMedia(a.md),sm:window.matchMedia(a.sm)}),m[e]}var d="default",u=new Set,s=!1;function B(){let e=f();for(let t of h)if(e[t].matches)return t;return"default"}var l=!1;function w(){l||(l=!0,requestAnimationFrame(()=>{l=!1;let e=B();if(e!==d){d=e;for(let t of u)t()}}))}function Q(e){if(u.add(e),!s){s=!0;let t=f();d=B();for(let n of Object.values(t))n.addEventListener("change",w)}return e(),()=>{if(u.delete(e),u.size===0&&s){s=!1;let t=f();for(let n of Object.values(t))n.removeEventListener("change",w)}}}function R(){return d}function v(e){return t=>{let n=x(e),r=!1,o=()=>{r||(r=!0,requestAnimationFrame(()=>{r=!1,t()}))};return n.addEventListener("change",o),()=>{n.removeEventListener("change",o)}}}function E(e){return()=>x(e).matches}import{useEffect as C,useMemo as S,useRef as q}from"react";function p(e){let t=q(e);return C(()=>{t.current=e}),S(()=>((...n)=>t.current?.(...n)),[])}import{useCallback as I,useEffect as W,useRef as P}from"react";function j(e,t){let n=p(e),r=P(0);return W(()=>()=>window.clearTimeout(r.current),[]),I((...o)=>{window.clearTimeout(r.current),r.current=window.setTimeout(()=>n(...o),t.waitMs)},[n,t.waitMs])}import{useEffect as O,useLayoutEffect as A}from"react";var F=typeof window<"u"?A:O;import{useEffect as D,useState as _}from"react";var $="(prefers-reduced-motion: no-preference)";function z(){let[e,t]=_(!0);return D(()=>{let n=window.matchMedia($);t(!n.matches);function r(o){t(!o.matches)}return n.addEventListener("change",r),()=>{n.removeEventListener("change",r)}},[]),e}import{useMemo as G}from"react";var H=(e="mantle")=>G(()=>U(e),[e]);function U(e="mantle"){return[e.trim()||"mantle",V()].join("-")}function V(){return Math.random().toString(36).substring(2,9)}export{g as breakpoints,T as useBreakpoint,p as useCallbackRef,y as useCopyToClipboard,j as useDebouncedCallback,L as useIsBelowBreakpoint,b as useIsHydrated,F as useIsomorphicLayoutEffect,M as useMatchesMediaQuery,z as usePrefersReducedMotion,H as useRandomStableId};
 //# sourceMappingURL=hooks.js.map

package/dist/hooks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/use-callback-ref.tsx","../src/hooks/use-debounced-callback.tsx","../src/hooks/use-isomorphic-layout-effect.tsx","../src/hooks/use-prefers-reduced-motion.tsx","../src/hooks/use-random-stable-id.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\n\n/**\n * Returns a memoized callback that will always refer to the latest callback\n * passed to the hook.\n *\n * This is useful when you want to pass a callback which may or may not be\n * memoized (have a stable identity) to a child component that will be updated\n * without causing the child component to re-render.\n */\nfunction useCallbackRef<T extends (...args: unknown[]) => unknown>(\n\tcallback: T | undefined,\n): T {\n\tconst callbackRef = useRef(callback);\n\n\tuseEffect(() => {\n\t\tcallbackRef.current = callback;\n\t});\n\n\treturn useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []);\n}\n\nexport {\n\t//,\n\tuseCallbackRef,\n};\n","import { useCallback, useEffect, useRef } from \"react\";\nimport { useCallbackRef } from \"./use-callback-ref.js\";\n\ntype Options = {\n\t/**\n\t * The delay in milliseconds to wait before calling the callback.\n\t */\n\twaitMs: number;\n};\n\n/**\n * Create a debounced version of a callback function.\n *\n * It allows you to delay the execution of a function until a certain period of\n * inactivity has passed (the `options.waitMs`), which can be useful for limiting rapid\n * invocations of a function (like in search inputs or button clicks)\n *\n * Note: The debounced callback will always refer to the latest callback passed\n * even without memoization, so it's stable and safe to use in dependency arrays.\n */\nfunction useDebouncedCallback<T extends (...args: unknown[]) => unknown>(\n\tcallbackFn: T,\n\toptions: Options,\n) {\n\tconst stableCallbackFn = useCallbackRef(callbackFn);\n\tconst debounceTimerRef = useRef(0);\n\tuseEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);\n\n\treturn useCallback(\n\t\t(...args: Parameters<T>) => {\n\t\t\twindow.clearTimeout(debounceTimerRef.current);\n\t\t\tdebounceTimerRef.current = window.setTimeout(\n\t\t\t\t() => stableCallbackFn(...args),\n\t\t\t\toptions.waitMs,\n\t\t\t);\n\t\t},\n\t\t[stableCallbackFn, options.waitMs],\n\t);\n}\n\nexport {\n\t//,\n\tuseDebouncedCallback,\n};\n","import { useEffect, useLayoutEffect } from \"react\";\n\n/**\n * useIsomorphicLayoutEffect is a hook that uses useLayoutEffect on the client and useEffect on the server.\n */\nexport const useIsomorphicLayoutEffect =\n\ttypeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n","import { useEffect, useState } from \"react\";\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 * usePrefersReducedMotion returns true if the user has opted out of animations\n */\nexport function usePrefersReducedMotion() {\n\t// default to no animations, since we don't know what the user's preference is on the server\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(!mediaQueryList.matches);\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","import { useMemo } from \"react\";\n\n/**\n * Hook to generate a random, stable id.\n * This is similar to `useId`, but generates a stable id client side which can also\n * be used for css selectors and element ids.\n */\nconst useRandomStableId = (prefix = \"mantle\") =>\n\tuseMemo(() => randomStableId(prefix), [prefix]);\n\nexport {\n\t//,\n\tuseRandomStableId,\n};\n\nfunction randomStableId(prefix = \"mantle\") {\n\tconst _prefix = prefix.trim() || \"mantle\";\n\treturn [_prefix, randomPostfix()].join(\"-\");\n}\n\nfunction randomPostfix() {\n\treturn Math.random().toString(36).substring(2, 9);\n}\n"],"mappings":"2EAAA,OAAS,aAAAA,EAAW,WAAAC,EAAS,UAAAC,MAAc,QAU3C,SAASC,EACRC,EACI,CACJ,IAAMC,EAAcH,EAAOE,CAAQ,EAEnC,OAAAJ,EAAU,IAAM,CACfK,EAAY,QAAUD,CACvB,CAAC,EAEMH,EAAQ,KAAO,IAAIK,IAASD,EAAY,UAAU,GAAGC,CAAI,GAAS,CAAC,CAAC,CAC5E,CCpBA,OAAS,eAAAC,EAAa,aAAAC,EAAW,UAAAC,MAAc,QAoB/C,SAASC,EACRC,EACAC,EACC,CACD,IAAMC,EAAmBC,EAAeH,CAAU,EAC5CI,EAAmBC,EAAO,CAAC,EACjC,OAAAC,EAAU,IAAM,IAAM,OAAO,aAAaF,EAAiB,OAAO,EAAG,CAAC,CAAC,EAEhEG,EACN,IAAIC,IAAwB,CAC3B,OAAO,aAAaJ,EAAiB,OAAO,EAC5CA,EAAiB,QAAU,OAAO,WACjC,IAAMF,EAAiB,GAAGM,CAAI,EAC9BP,EAAQ,MACT,CACD,EACA,CAACC,EAAkBD,EAAQ,MAAM,CAClC,CACD,CCtCA,OAAS,aAAAQ,EAAW,mBAAAC,MAAuB,QAKpC,IAAMC,EACZ,OAAO,OAAW,IAAcD,EAAkBD,ECNnD,OAAS,aAAAG,EAAW,YAAAC,MAAgB,QAOpC,IAAMC,EAAQ,0CAKP,SAASC,GAA0B,CAEzC,GAAM,CAACC,EAAsBC,CAAuB,EAAIJ,EAAS,EAAI,EAErE,OAAAD,EAAU,IAAM,CACf,IAAMM,EAAiB,OAAO,WAAWJ,CAAK,EAG9CG,EAAwB,CAACC,EAAe,OAAO,EAG/C,SAASC,EAASC,EAA4B,CAC7CH,EAAwB,CAACG,EAAM,OAAO,CACvC,CAEA,OAAAF,EAAe,iBAAiB,SAAUC,CAAQ,EAE3C,IAAM,CACZD,EAAe,oBAAoB,SAAUC,CAAQ,CACtD,CACD,EAAG,CAAC,CAAC,EAEEH,CACR,CCnCA,OAAS,WAAAK,MAAe,QAOxB,IAAMC,EAAoB,CAACC,EAAS,WACnCF,EAAQ,IAAMG,EAAeD,CAAM,EAAG,CAACA,CAAM,CAAC,EAO/C,SAASE,EAAeC,EAAS,SAAU,CAE1C,MAAO,CADSA,EAAO,KAAK,GAAK,SAChBC,EAAc,CAAC,EAAE,KAAK,GAAG,CAC3C,CAEA,SAASA,GAAgB,CACxB,OAAO,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,UAAU,EAAG,CAAC,CACjD","names":["useEffect","useMemo","useRef","useCallbackRef","callback","callbackRef","args","useCallback","useEffect","useRef","useDebouncedCallback","callbackFn","options","stableCallbackFn","useCallbackRef","debounceTimerRef","useRef","useEffect","useCallback","args","useEffect","useLayoutEffect","useIsomorphicLayoutEffect","useEffect","useState","query","usePrefersReducedMotion","prefersReducedMotion","setPrefersReducedMotion","mediaQueryList","listener","event","useMemo","useRandomStableId","prefix","randomStableId","randomStableId","prefix","randomPostfix"]}
+{"version":3,"sources":["../src/hooks/use-breakpoint.tsx","../src/hooks/use-callback-ref.tsx","../src/hooks/use-debounced-callback.tsx","../src/hooks/use-isomorphic-layout-effect.tsx","../src/hooks/use-prefers-reduced-motion.tsx","../src/hooks/use-random-stable-id.tsx"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\n\n/**\n * Tailwind CSS breakpoints in descending order (largest → smallest).\n *\n * These correspond to Tailwind’s default `theme.screens` config and are used\n * to determine the current viewport size.\n *\n * @see https://tailwindcss.com/docs/screens\n *\n * @example\n * \"2xl\" // ≥96rem (1536px)\n * \"xl\"  // ≥80rem (1280px)\n * \"lg\"  // ≥64rem (1024px)\n * \"md\"  // ≥48rem (768px)\n * \"sm\"  // ≥40rem (640px)\n */\nconst tailwindBreakpoints = [\"2xl\", \"xl\", \"lg\", \"md\", \"sm\"] as const;\n\n/**\n * A valid Tailwind CSS breakpoint identifier.\n *\n * @example\n * const bp: TailwindBreakpoint = \"md\"; // ≥48rem (768px)\n *\n * @example\n * \"2xl\" // ≥96rem (1536px)\n * \"xl\"  // ≥80rem (1280px)\n * \"lg\"  // ≥64rem (1024px)\n * \"md\"  // ≥48rem (768px)\n * \"sm\"  // ≥40rem (640px)\n */\ntype TailwindBreakpoint = (typeof tailwindBreakpoints)[number];\n\n/**\n * Mantle’s breakpoint set, extending Tailwind’s with `\"default\"`.\n *\n * `\"default\"` represents the base (0px and up) viewport,\n * useful for defining fallbacks or mobile-first styles.\n *\n * @example\n * \"default\" // ≥0rem (0px)\n * \"sm\"      // ≥40rem (640px)\n * \"md\"      // ≥48rem (768px)\n * \"lg\"      // ≥64rem (1024px)\n * \"xl\"      // ≥80rem (1280px)\n * \"2xl\"     // ≥96rem (1536px)\n */\nconst breakpoints = [\"default\", ...tailwindBreakpoints] as const;\n\n/**\n * A valid Mantle breakpoint identifier.\n *\n * Includes Tailwind’s standard breakpoints plus `\"default\"` for 0px+.\n *\n * @example\n * const bp: Breakpoint = \"default\"; // ≥0px\n *\n * @example\n * \"default\" // ≥0rem (0px)\n * \"sm\"      // ≥40rem (640px)\n * \"md\"      // ≥48rem (768px)\n * \"lg\"      // ≥64rem (1024px)\n * \"xl\"      // ≥80rem (1280px)\n * \"2xl\"     // ≥96rem (1536px)\n */\ntype Breakpoint = (typeof breakpoints)[number];\n\n/**\n * React hook that returns the current breakpoint based on the viewport width.\n *\n * Uses a singleton subscription to a set of min-width media queries and returns\n * the largest matching breakpoint. Designed for React 18+ with\n * `useSyncExternalStore`.\n *\n * @returns {Breakpoint} The current breakpoint that matches the viewport width.\n *\n * @example\n * const breakpoint = useBreakpoint();\n * if (breakpoint === \"lg\") {\n *   // Do something for large screens and above\n * }\n */\nfunction useBreakpoint(): Breakpoint {\n\treturn useSyncExternalStore(\n\t\tsubscribeToBreakpointChanges,\n\t\tgetCurrentBreakpointSnapshot,\n\t\t() => \"default\", // SSR fallback\n\t);\n}\n\n/**\n * React hook that returns true if the current viewport width is below the specified breakpoint.\n *\n * This hook uses `window.matchMedia` with a max-width media query and leverages\n * `useSyncExternalStore` to stay compliant with React's concurrent rendering model.\n *\n * @param {TailwindBreakpoint} breakpoint - The breakpoint to check against (e.g., \"md\", \"lg\").\n *\n * @returns {boolean} `true` if the viewport width is below the breakpoint, otherwise `false`.\n *\n * @example\n * // Check if viewport is below medium (768px)\n * const isBelowMd = useIsBelowBreakpoint(\"md\");\n */\nfunction useIsBelowBreakpoint(breakpoint: TailwindBreakpoint): boolean {\n\treturn useSyncExternalStore(\n\t\tcreateBelowBreakpointSubscribe(breakpoint),\n\t\tcreateBelowBreakpointGetSnapshot(breakpoint),\n\t\t() => false, // SSR fallback - assume desktop\n\t);\n}\n\nexport {\n\t//,\n\tbreakpoints,\n\tuseBreakpoint,\n\tuseIsBelowBreakpoint,\n};\n\nexport type {\n\t//,\n\tBreakpoint,\n\tTailwindBreakpoint,\n};\n\n/**\n * A CSS media query string representing a minimum width in `rem` units.\n *\n * @example\n * const query: MinWidthQuery = \"(min-width: 48rem)\";\n *\n * @private\n */\ntype MinWidthQuery = `(min-width: ${number}rem)`;\n\n/**\n * A CSS media query string representing a maximum width in `rem` units.\n *\n * @example\n * const query: MaxWidthQuery = \"(max-width: 47.99rem)\";\n *\n * @private\n */\ntype MaxWidthQuery = `(max-width: ${number}rem)`;\n\n/**\n * Precomputed min-width media query strings for each Tailwind breakpoint.\n *\n * Using constants avoids template string work in hot paths and ensures type\n * safety against the `MinWidthQuery` template literal type.\n *\n * @remarks\n * These are expressed in `rem`. If your CSS breakpoints are in `px`, consider\n * aligning units to avoid JS/CSS drift when `html{font-size}` changes.\n *\n * @private\n */\nconst breakpointQueries = {\n\t\"2xl\": \"(min-width: 96rem)\" as const,\n\txl: \"(min-width: 80rem)\" as const,\n\tlg: \"(min-width: 64rem)\" as const,\n\tmd: \"(min-width: 48rem)\" as const,\n\tsm: \"(min-width: 40rem)\" as const,\n} as const satisfies Record<TailwindBreakpoint, MinWidthQuery>;\n\n/**\n * Precomputed max-width media query strings used by `useIsBelowBreakpoint`.\n *\n * The `-0.01rem` offset avoids overlap at exact boundaries.\n *\n * @private\n */\nconst belowBreakpointQueries = {\n\t\"2xl\": \"(max-width: 95.99rem)\" as const, // 96 - 0.01\n\txl: \"(max-width: 79.99rem)\" as const, // 80 - 0.01\n\tlg: \"(max-width: 63.99rem)\" as const, // 64 - 0.01\n\tmd: \"(max-width: 47.99rem)\" as const, // 48 - 0.01\n\tsm: \"(max-width: 39.99rem)\" as const, // 40 - 0.01\n} as const satisfies Record<TailwindBreakpoint, MaxWidthQuery>;\n\n/**\n * Lazily-initialized cache of `MediaQueryList` objects for min-width queries.\n *\n * Initialized on first access to remain SSR-safe (no `window` at import time).\n *\n * @private\n */\nlet minWidthMQLs: Record<TailwindBreakpoint, MediaQueryList> | null = null;\n\n/**\n * Lazily-initialized cache of `MediaQueryList` objects for max-width queries.\n *\n * Used by `useIsBelowBreakpoint`. Also SSR-safe by lazy access.\n *\n * @private\n */\nlet maxWidthMQLs: Record<TailwindBreakpoint, MediaQueryList> | null = null;\n\n/**\n * Get (and lazily create) the cached `MediaQueryList` objects for min-width queries.\n *\n * @returns A record of `MediaQueryList` keyed by Tailwind breakpoint.\n * @private\n */\nfunction getMinWidthMQLs(): Record<TailwindBreakpoint, MediaQueryList> {\n\tif (!minWidthMQLs) {\n\t\tminWidthMQLs = {\n\t\t\t\"2xl\": window.matchMedia(breakpointQueries[\"2xl\"]),\n\t\t\txl: window.matchMedia(breakpointQueries.xl),\n\t\t\tlg: window.matchMedia(breakpointQueries.lg),\n\t\t\tmd: window.matchMedia(breakpointQueries.md),\n\t\t\tsm: window.matchMedia(breakpointQueries.sm),\n\t\t};\n\t}\n\treturn minWidthMQLs;\n}\n\n/**\n * Get (and lazily create) the cached `MediaQueryList` for a specific max-width breakpoint.\n *\n * @param breakpoint - Tailwind breakpoint identifier (e.g., \"md\").\n * @returns The corresponding `MediaQueryList`.\n * @private\n */\nfunction getMaxWidthMQL(breakpoint: TailwindBreakpoint): MediaQueryList {\n\tif (!maxWidthMQLs) {\n\t\tmaxWidthMQLs = {\n\t\t\t\"2xl\": window.matchMedia(belowBreakpointQueries[\"2xl\"]),\n\t\t\txl: window.matchMedia(belowBreakpointQueries.xl),\n\t\t\tlg: window.matchMedia(belowBreakpointQueries.lg),\n\t\t\tmd: window.matchMedia(belowBreakpointQueries.md),\n\t\t\tsm: window.matchMedia(belowBreakpointQueries.sm),\n\t\t};\n\t}\n\treturn maxWidthMQLs[breakpoint];\n}\n\n/**\n * Current breakpoint value used by the singleton store backing `useBreakpoint`.\n *\n * Initialized to `\"default\"` and updated on media-query change events.\n *\n * @private\n */\nlet currentBreakpointValue: Breakpoint = \"default\";\n\n/**\n * Set of component listeners subscribed to the singleton breakpoint store.\n *\n * Each listener is invoked when the current breakpoint value changes.\n *\n * @private\n */\nconst breakpointListeners = new Set<() => void>();\n\n/**\n * Flag indicating whether global media-query listeners are currently attached.\n *\n * Prevents duplicate registrations and enables full teardown when unused.\n *\n * @private\n */\nlet breakpointSubscriptionActive = false;\n\n/**\n * Compute the current breakpoint by checking cached min-width MQLs\n * from largest to smallest.\n *\n * @returns {Breakpoint} The largest matching breakpoint, or `\"default\"`.\n * @private\n */\nfunction getCurrentBreakpoint(): Breakpoint {\n\tconst mqls = getMinWidthMQLs();\n\tfor (const breakpoint of tailwindBreakpoints) {\n\t\tif (mqls[breakpoint].matches) {\n\t\t\treturn breakpoint;\n\t\t}\n\t}\n\treturn \"default\";\n}\n\n/**\n * Update the current breakpoint value and notify all listeners.\n *\n * Uses `requestAnimationFrame` to coalesce rapid resize events and minimize\n * re-renders during active window resizing.\n *\n * @private\n */\nlet breakpointUpdatePending = false;\nfunction updateCurrentBreakpoint() {\n\tif (!breakpointUpdatePending) {\n\t\tbreakpointUpdatePending = true;\n\t\trequestAnimationFrame(() => {\n\t\t\tbreakpointUpdatePending = false;\n\t\t\tconst newBreakpoint = getCurrentBreakpoint();\n\t\t\tif (newBreakpoint !== currentBreakpointValue) {\n\t\t\t\tcurrentBreakpointValue = newBreakpoint;\n\t\t\t\tfor (const listener of breakpointListeners) {\n\t\t\t\t\tlistener();\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n}\n\n/**\n * Subscribe a component to breakpoint changes (singleton pattern).\n *\n * Ensures only one set of MQL listeners exists app-wide. Also reconciles the\n * `useSyncExternalStore` initial snapshot/subscribe race by invoking the\n * subscriber once on mount.\n *\n * @param callback - Listener invoked when the breakpoint value may have changed.\n * @returns Cleanup function to unsubscribe the listener.\n * @private\n */\nfunction subscribeToBreakpointChanges(callback: () => void) {\n\tbreakpointListeners.add(callback);\n\n\t// Attach global listeners once\n\tif (!breakpointSubscriptionActive) {\n\t\tbreakpointSubscriptionActive = true;\n\t\tconst mqls = getMinWidthMQLs();\n\n\t\t// Initialize current value synchronously\n\t\tcurrentBreakpointValue = getCurrentBreakpoint();\n\n\t\t// Attach listeners to all breakpoint MQLs\n\t\tfor (const mql of Object.values(mqls)) {\n\t\t\tmql.addEventListener(\"change\", updateCurrentBreakpoint);\n\t\t}\n\t}\n\n\t// Reconcile initial getSnapshot vs subscribe ordering\n\tcallback();\n\n\t// Cleanup\n\treturn () => {\n\t\tbreakpointListeners.delete(callback);\n\n\t\t// Tear down global listeners when no one is listening\n\t\tif (breakpointListeners.size === 0 && breakpointSubscriptionActive) {\n\t\t\tbreakpointSubscriptionActive = false;\n\t\t\tconst mqls = getMinWidthMQLs();\n\t\t\tfor (const mql of Object.values(mqls)) {\n\t\t\t\tmql.removeEventListener(\"change\", updateCurrentBreakpoint);\n\t\t\t}\n\t\t}\n\t};\n}\n\n/**\n * Return the current breakpoint value from the singleton store.\n *\n * Used as the `getSnapshot` for `useSyncExternalStore`.\n *\n * @returns {Breakpoint} The latest computed breakpoint.\n * @private\n */\nfunction getCurrentBreakpointSnapshot(): Breakpoint {\n\treturn currentBreakpointValue;\n}\n\n/**\n * Factory to create a `subscribe` function for a specific \"below\" breakpoint.\n *\n * Uses a cached `MediaQueryList` and rAF-throttled change handler to avoid\n * bursty updates during resize.\n *\n * @param breakpoint - Tailwind breakpoint identifier (e.g., \"lg\").\n * @returns A `subscribe` function suitable for `useSyncExternalStore`.\n * @private\n */\nfunction createBelowBreakpointSubscribe(breakpoint: TailwindBreakpoint) {\n\treturn (callback: () => void) => {\n\t\tconst mediaQuery = getMaxWidthMQL(breakpoint);\n\n\t\t// rAF throttle the change callback during active resize\n\t\tlet pending = false;\n\t\tconst onChange = () => {\n\t\t\tif (!pending) {\n\t\t\t\tpending = true;\n\t\t\t\trequestAnimationFrame(() => {\n\t\t\t\t\tpending = false;\n\t\t\t\t\tcallback();\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tmediaQuery.addEventListener(\"change\", onChange);\n\t\treturn () => {\n\t\t\tmediaQuery.removeEventListener(\"change\", onChange);\n\t\t};\n\t};\n}\n\n/**\n * Factory to create a `getSnapshot` function for a specific \"below\" breakpoint.\n *\n * Uses the cached `MediaQueryList` for the target breakpoint.\n *\n * @param breakpoint - Tailwind breakpoint identifier (e.g., \"lg\").\n * @returns A function that returns `true` when the viewport is below the breakpoint.\n * @private\n */\nfunction createBelowBreakpointGetSnapshot(breakpoint: TailwindBreakpoint) {\n\treturn () => {\n\t\tconst mediaQuery = getMaxWidthMQL(breakpoint);\n\t\treturn mediaQuery.matches;\n\t};\n}\n","import { useEffect, useMemo, useRef } from \"react\";\n\n/**\n * Returns a memoized callback that will always refer to the latest callback\n * passed to the hook.\n *\n * This is useful when you want to pass a callback which may or may not be\n * memoized (have a stable identity) to a child component that will be updated\n * without causing the child component to re-render.\n */\nfunction useCallbackRef<T extends (...args: unknown[]) => unknown>(\n\tcallback: T | undefined,\n): T {\n\tconst callbackRef = useRef(callback);\n\n\tuseEffect(() => {\n\t\tcallbackRef.current = callback;\n\t});\n\n\treturn useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []);\n}\n\nexport {\n\t//,\n\tuseCallbackRef,\n};\n","import { useCallback, useEffect, useRef } from \"react\";\nimport { useCallbackRef } from \"./use-callback-ref.js\";\n\ntype Options = {\n\t/**\n\t * The delay in milliseconds to wait before calling the callback.\n\t */\n\twaitMs: number;\n};\n\n/**\n * Create a debounced version of a callback function.\n *\n * It allows you to delay the execution of a function until a certain period of\n * inactivity has passed (the `options.waitMs`), which can be useful for limiting rapid\n * invocations of a function (like in search inputs or button clicks)\n *\n * Note: The debounced callback will always refer to the latest callback passed\n * even without memoization, so it's stable and safe to use in dependency arrays.\n */\nfunction useDebouncedCallback<T extends (...args: unknown[]) => unknown>(\n\tcallbackFn: T,\n\toptions: Options,\n) {\n\tconst stableCallbackFn = useCallbackRef(callbackFn);\n\tconst debounceTimerRef = useRef(0);\n\tuseEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);\n\n\treturn useCallback(\n\t\t(...args: Parameters<T>) => {\n\t\t\twindow.clearTimeout(debounceTimerRef.current);\n\t\t\tdebounceTimerRef.current = window.setTimeout(\n\t\t\t\t() => stableCallbackFn(...args),\n\t\t\t\toptions.waitMs,\n\t\t\t);\n\t\t},\n\t\t[stableCallbackFn, options.waitMs],\n\t);\n}\n\nexport {\n\t//,\n\tuseDebouncedCallback,\n};\n","import { useEffect, useLayoutEffect } from \"react\";\n\n/**\n * useIsomorphicLayoutEffect is a hook that uses useLayoutEffect on the client and useEffect on the server.\n */\nexport const useIsomorphicLayoutEffect =\n\ttypeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n","import { useEffect, useState } from \"react\";\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 * usePrefersReducedMotion returns true if the user has opted out of animations\n */\nexport function usePrefersReducedMotion() {\n\t// default to no animations, since we don't know what the user's preference is on the server\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(!mediaQueryList.matches);\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","import { useMemo } from \"react\";\n\n/**\n * Hook to generate a random, stable id.\n * This is similar to `useId`, but generates a stable id client side which can also\n * be used for css selectors and element ids.\n */\nconst useRandomStableId = (prefix = \"mantle\") =>\n\tuseMemo(() => randomStableId(prefix), [prefix]);\n\nexport {\n\t//,\n\tuseRandomStableId,\n};\n\nfunction randomStableId(prefix = \"mantle\") {\n\tconst _prefix = prefix.trim() || \"mantle\";\n\treturn [_prefix, randomPostfix()].join(\"-\");\n}\n\nfunction randomPostfix() {\n\treturn Math.random().toString(36).substring(2, 9);\n}\n"],"mappings":"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","names":["useSyncExternalStore","tailwindBreakpoints","breakpoints","useBreakpoint","subscribeToBreakpointChanges","getCurrentBreakpointSnapshot","useIsBelowBreakpoint","breakpoint","createBelowBreakpointSubscribe","createBelowBreakpointGetSnapshot","breakpointQueries","belowBreakpointQueries","minWidthMQLs","maxWidthMQLs","getMinWidthMQLs","getMaxWidthMQL","breakpoint","currentBreakpointValue","breakpointListeners","breakpointSubscriptionActive","getCurrentBreakpoint","mqls","tailwindBreakpoints","breakpointUpdatePending","updateCurrentBreakpoint","newBreakpoint","listener","subscribeToBreakpointChanges","callback","mql","getCurrentBreakpointSnapshot","createBelowBreakpointSubscribe","mediaQuery","pending","onChange","createBelowBreakpointGetSnapshot","useEffect","useMemo","useRef","useCallbackRef","callback","callbackRef","args","useCallback","useEffect","useRef","useDebouncedCallback","callbackFn","options","stableCallbackFn","useCallbackRef","debounceTimerRef","useRef","useEffect","useCallback","args","useEffect","useLayoutEffect","useIsomorphicLayoutEffect","useEffect","useState","query","usePrefersReducedMotion","prefersReducedMotion","setPrefersReducedMotion","mediaQueryList","listener","event","useMemo","useRandomStableId","prefix","randomStableId","randomStableId","prefix","randomPostfix"]}

package/dist/icons.js

@@ -1,2 +1,2 @@
-import{a as h}from"./chunk-W2YQRWR5.js";import{a as s}from"./chunk-2PHWBRBD.js";import"./chunk-GYPSB3OK.js";import{l as m}from"./chunk-HSTG2BTX.js";import"./chunk-D3XF6J5A.js";import{DesktopIcon as u}from"@phosphor-icons/react/Desktop";import{MoonIcon as n}from"@phosphor-icons/react/Moon";import{SunIcon as c}from"@phosphor-icons/react/Sun";import{jsx as t}from"react/jsx-runtime";function i(o){let e=m();return t(r,{theme:e,...o})}i.displayName="AutoThemeIcon";function r({theme:o,...e}){switch(o){case"system":return t(u,{...e});case"light":return t(c,{...e});case"dark":return t(n,{...e});case"light-high-contrast":return t(c,{...e,weight:"fill"});case"dark-high-contrast":return t(n,{...e,weight:"fill"})}}r.displayName="ThemeIcon";export{i as AutoThemeIcon,s as SortIcon,r as ThemeIcon,h as TrafficPolicyFileIcon};
+import{a as h}from"./chunk-W2YQRWR5.js";import{a as s}from"./chunk-2PHWBRBD.js";import"./chunk-GYPSB3OK.js";import{l as m}from"./chunk-THKAHLEP.js";import"./chunk-6J7D73WA.js";import{DesktopIcon as u}from"@phosphor-icons/react/Desktop";import{MoonIcon as n}from"@phosphor-icons/react/Moon";import{SunIcon as c}from"@phosphor-icons/react/Sun";import{jsx as t}from"react/jsx-runtime";function i(o){let e=m();return t(r,{theme:e,...o})}i.displayName="AutoThemeIcon";function r({theme:o,...e}){switch(o){case"system":return t(u,{...e});case"light":return t(c,{...e});case"dark":return t(n,{...e});case"light-high-contrast":return t(c,{...e,weight:"fill"});case"dark-high-contrast":return t(n,{...e,weight:"fill"})}}r.displayName="ThemeIcon";export{i as AutoThemeIcon,s as SortIcon,r as ThemeIcon,h as TrafficPolicyFileIcon};
 //# sourceMappingURL=icons.js.map

package/dist/pagination.js

@@ -1,2 +1,2 @@
-import{a as p}from"./chunk-MEIVQLEY.js";import"./chunk-MF2QITTY.js";import{b}from"./chunk-J6ZF5J72.js";import{a as z}from"./chunk-3H3EUKI7.js";import{a as m}from"./chunk-S4HWPRRX.js";import"./chunk-MGYWQQVZ.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as P}from"./chunk-AZ56JGNY.js";import{CaretLeftIcon as L}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as U}from"@phosphor-icons/react/CaretRight";import{Slot as j}from"@radix-ui/react-slot";import{createContext as k,forwardRef as c,useContext as v,useState as A}from"react";import f from"tiny-invariant";import{jsx as s,jsxs as l}from"react/jsx-runtime";var S=k(void 0),y=c(({className:r,children:e,defaultPageSize:a,...t},i)=>{let[o,n]=A(a);return s(S.Provider,{value:{defaultPageSize:a,pageSize:o,setPageSize:n},children:s("div",{className:P("inline-flex items-center justify-between gap-2",r),ref:i,...t,children:e})})});y.displayName="CursorPagination";var x=c(({hasNextPage:r,hasPreviousPage:e,onNextPage:a,onPreviousPage:t,...i},o)=>l(z,{appearance:"panel",ref:o,...i,children:[s(m,{appearance:"ghost",disabled:!e,icon:s(L,{}),label:"Previous page",onClick:t,size:"sm",type:"button"}),s(b,{orientation:"vertical",className:"min-h-5"}),s(m,{appearance:"ghost",disabled:!r,icon:s(U,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));x.displayName="CursorButtons";var E=[5,10,20,50,100],h=c(({className:r,pageSizes:e=E,onChangePageSize:a,...t},i)=>{let o=v(S);return f(o,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),f(e.includes(o.defaultPageSize),"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes"),f(e.includes(o.pageSize),"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes"),l(p.Root,{defaultValue:`${o.pageSize}`,onValueChange:n=>{let g=Number.parseInt(n,10);Number.isNaN(g)&&(g=o.defaultPageSize),o.setPageSize(g),a?.(g)},children:[s(p.Trigger,{ref:i,className:P("w-auto min-w-36",r),value:o.pageSize,...t,children:s(p.Value,{})}),s(p.Content,{width:"trigger",children:e.map(n=>l(p.Item,{value:`${n}`,children:[n," per page"]},n))})]})});h.displayName="CursorPageSizeSelect";function N({asChild:r=!1,className:e,...a}){let t=v(S);return f(t,"CursorPageSizeValue must be used as a child of a CursorPagination component"),l(r?j:"span",{className:P("text-muted text-sm font-normal",e),...a,children:[t.pageSize," per page"]})}N.displayName="CursorPageSizeValue";var F={Root:y,Buttons:x,PageSizeSelect:h,PageSizeValue:N};import{useEffect as O,useState as T}from"react";function W({listSize:r,pageSize:e}){let[a,t]=T(1),[i,o]=T(e);O(()=>{o(e),t(1)},[e]),O(()=>{t(1)},[r]);let n=Math.ceil(r/i),g=(a-1)*i,C=a>1,d=a<n;function V(u){let G=Math.max(1,Math.min(u,n));t(G)}function B(){d&&t(u=>Math.min(u+1,n))}function R(){C&&t(u=>Math.max(u-1,1))}function w(u){o(u),t(1)}function I(){t(n)}function M(){t(1)}return{currentPage:a,goToFirstPage:M,goToLastPage:I,goToPage:V,hasNextPage:d,hasPreviousPage:C,nextPage:B,offset:g,pageSize:i,previousPage:R,setPageSize:w,totalPages:n}}function $(r,e){return r.slice(e.offset,e.offset+e.pageSize)}export{F as CursorPagination,$ as getOffsetPaginatedSlice,W as useOffsetPagination};
+import{a as p}from"./chunk-MEIVQLEY.js";import"./chunk-MF2QITTY.js";import{b}from"./chunk-J6ZF5J72.js";import{a as z}from"./chunk-3H3EUKI7.js";import{a as m}from"./chunk-E6VQ7CJN.js";import"./chunk-MGYWQQVZ.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as P}from"./chunk-AZ56JGNY.js";import{CaretLeftIcon as L}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as U}from"@phosphor-icons/react/CaretRight";import{Slot as j}from"@radix-ui/react-slot";import{createContext as k,forwardRef as c,useContext as v,useState as A}from"react";import f from"tiny-invariant";import{jsx as s,jsxs as l}from"react/jsx-runtime";var S=k(void 0),y=c(({className:r,children:e,defaultPageSize:a,...t},i)=>{let[o,n]=A(a);return s(S.Provider,{value:{defaultPageSize:a,pageSize:o,setPageSize:n},children:s("div",{className:P("inline-flex items-center justify-between gap-2",r),ref:i,...t,children:e})})});y.displayName="CursorPagination";var x=c(({hasNextPage:r,hasPreviousPage:e,onNextPage:a,onPreviousPage:t,...i},o)=>l(z,{appearance:"panel",ref:o,...i,children:[s(m,{appearance:"ghost",disabled:!e,icon:s(L,{}),label:"Previous page",onClick:t,size:"sm",type:"button"}),s(b,{orientation:"vertical",className:"min-h-5"}),s(m,{appearance:"ghost",disabled:!r,icon:s(U,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));x.displayName="CursorButtons";var E=[5,10,20,50,100],h=c(({className:r,pageSizes:e=E,onChangePageSize:a,...t},i)=>{let o=v(S);return f(o,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),f(e.includes(o.defaultPageSize),"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes"),f(e.includes(o.pageSize),"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes"),l(p.Root,{defaultValue:`${o.pageSize}`,onValueChange:n=>{let g=Number.parseInt(n,10);Number.isNaN(g)&&(g=o.defaultPageSize),o.setPageSize(g),a?.(g)},children:[s(p.Trigger,{ref:i,className:P("w-auto min-w-36",r),value:o.pageSize,...t,children:s(p.Value,{})}),s(p.Content,{width:"trigger",children:e.map(n=>l(p.Item,{value:`${n}`,children:[n," per page"]},n))})]})});h.displayName="CursorPageSizeSelect";function N({asChild:r=!1,className:e,...a}){let t=v(S);return f(t,"CursorPageSizeValue must be used as a child of a CursorPagination component"),l(r?j:"span",{className:P("text-muted text-sm font-normal",e),...a,children:[t.pageSize," per page"]})}N.displayName="CursorPageSizeValue";var F={Root:y,Buttons:x,PageSizeSelect:h,PageSizeValue:N};import{useEffect as O,useState as T}from"react";function W({listSize:r,pageSize:e}){let[a,t]=T(1),[i,o]=T(e);O(()=>{o(e),t(1)},[e]),O(()=>{t(1)},[r]);let n=Math.ceil(r/i),g=(a-1)*i,C=a>1,d=a<n;function V(u){let G=Math.max(1,Math.min(u,n));t(G)}function B(){d&&t(u=>Math.min(u+1,n))}function R(){C&&t(u=>Math.max(u-1,1))}function w(u){o(u),t(1)}function I(){t(n)}function M(){t(1)}return{currentPage:a,goToFirstPage:M,goToLastPage:I,goToPage:V,hasNextPage:d,hasPreviousPage:C,nextPage:B,offset:g,pageSize:i,previousPage:R,setPageSize:w,totalPages:n}}function $(r,e){return r.slice(e.offset,e.offset+e.pageSize)}export{F as CursorPagination,$ as getOffsetPaginatedSlice,W as useOffsetPagination};
 //# sourceMappingURL=pagination.js.map

package/dist/sheet.d.ts

@@ -286,7 +286,7 @@ declare const Sheet: {
      * </Sheet.Header>
      * ```
      */
-    readonly Description: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+    readonly Description: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
     /**
      * The footer container for a `Sheet`. This is where you would typically place close and submit buttons.
      * Should be rendered as a child of `Sheet.Content`.

package/dist/sheet.js

@@ -1,2 +1,2 @@
-import{a as u,b as v,c as S,d as m,e as p,f as d,g as h,h as f}from"./chunk-2ID2TLYD.js";import{d as c}from"./chunk-FUT5N3AI.js";import"./chunk-HSTG2BTX.js";import"./chunk-D3XF6J5A.js";import{a as y}from"./chunk-S4HWPRRX.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a}from"./chunk-AZ56JGNY.js";import{XIcon as W}from"@phosphor-icons/react/X";import{cva as E}from"class-variance-authority";import{forwardRef as s}from"react";import{jsx as o,jsxs as z}from"react/jsx-runtime";var P=u;P.displayName="Sheet";var C=v;C.displayName="SheetTrigger";var g=m;g.displayName="SheetClose";var N=S;N.displayName="SheetPortal";var b=s(({className:e,...t},i)=>o(p,{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-40 backdrop-blur-xs",e),...t,ref:i}));b.displayName=p.displayName;var V=E("bg-dialog border-dialog inset-y-0 h-full w-full fixed z-40 flex flex-col shadow-lg outline-hidden transition ease-in-out focus-within:outline-hidden data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in",{variants:{side:{left:"data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r",right:"data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l"}},defaultVariants:{side:"right"}}),x=s(({children:e,className:t,onInteractOutside:i,onPointerDownOutside:r,preferredWidth:l="sm:max-w-[30rem]",side:B="right",...O},A)=>z(N,{children:[o(b,{}),o(d,{className:a(V({side:B}),l,t),onInteractOutside:n=>{c(n),i?.(n)},onPointerDownOutside:n=>{c(n),r?.(n)},ref:A,...O,children:e})]}));x.displayName=d.displayName;var T=({size:e="md",type:t="button",label:i="Close Sheet",appearance:r="ghost",...l})=>o(m,{asChild:!0,children:o(y,{appearance:r,icon:o(W,{}),label:i,size:e,type:t,...l})});T.displayName="SheetCloseIconButton";var R=({className:e,...t})=>o("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",e),...t});R.displayName="SheetBody";var H=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4","has-[.icon-button]:pr-4",e),...t});H.displayName="SheetHeader";var D=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5",e),...t});D.displayName="SheetFooter";var L=s(({className:e,...t},i)=>o(h,{ref:i,className:a("text-strong flex-1 truncate text-lg font-medium",e),...t}));L.displayName=h.displayName;var M=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex items-center justify-between gap-2",t),...i,ref:r,children:e}));M.displayName="SheetTitleGroup";var I=s(({className:e,...t},i)=>o(f,{ref:i,className:a("text-body text-sm",e),...t}));I.displayName=f.displayName;var w=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex h-full items-center gap-2",t),...i,ref:r,children:e}));w.displayName="SheetActions";var k={Root:P,Actions:w,Body:R,Close:g,CloseIconButton:T,Content:x,Description:I,Footer:D,Header:H,Title:L,TitleGroup:M,Trigger:C};export{k as Sheet};
+import{a as u,b as v,c as S,d as m,e as p,f as d,g as h,h as f}from"./chunk-PX63EGR2.js";import{d as c}from"./chunk-RH46OJYB.js";import"./chunk-THKAHLEP.js";import"./chunk-6J7D73WA.js";import{a as y}from"./chunk-E6VQ7CJN.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a}from"./chunk-AZ56JGNY.js";import{XIcon as W}from"@phosphor-icons/react/X";import{cva as E}from"class-variance-authority";import{forwardRef as s}from"react";import{jsx as o,jsxs as z}from"react/jsx-runtime";var P=u;P.displayName="Sheet";var C=v;C.displayName="SheetTrigger";var g=m;g.displayName="SheetClose";var N=S;N.displayName="SheetPortal";var b=s(({className:e,...t},i)=>o(p,{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-40 backdrop-blur-xs",e),...t,ref:i}));b.displayName=p.displayName;var V=E("bg-dialog border-dialog inset-y-0 h-full w-full fixed z-40 flex flex-col shadow-lg outline-hidden transition ease-in-out focus-within:outline-hidden data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in",{variants:{side:{left:"data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r",right:"data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l"}},defaultVariants:{side:"right"}}),x=s(({children:e,className:t,onInteractOutside:i,onPointerDownOutside:r,preferredWidth:l="sm:max-w-[30rem]",side:B="right",...O},A)=>z(N,{children:[o(b,{}),o(d,{className:a(V({side:B}),l,t),onInteractOutside:n=>{c(n),i?.(n)},onPointerDownOutside:n=>{c(n),r?.(n)},ref:A,...O,children:e})]}));x.displayName=d.displayName;var T=({size:e="md",type:t="button",label:i="Close Sheet",appearance:r="ghost",...l})=>o(m,{asChild:!0,children:o(y,{appearance:r,icon:o(W,{}),label:i,size:e,type:t,...l})});T.displayName="SheetCloseIconButton";var R=({className:e,...t})=>o("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",e),...t});R.displayName="SheetBody";var H=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4","has-[.icon-button]:pr-4",e),...t});H.displayName="SheetHeader";var D=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5",e),...t});D.displayName="SheetFooter";var L=s(({className:e,...t},i)=>o(h,{ref:i,className:a("text-strong flex-1 truncate text-lg font-medium",e),...t}));L.displayName=h.displayName;var M=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex items-center justify-between gap-2",t),...i,ref:r,children:e}));M.displayName="SheetTitleGroup";var I=s(({className:e,...t},i)=>o(f,{ref:i,className:a("text-body text-sm",e),...t}));I.displayName=f.displayName;var w=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex h-full items-center gap-2",t),...i,ref:r,children:e}));w.displayName="SheetActions";var k={Root:P,Actions:w,Body:R,Close:g,CloseIconButton:T,Content:x,Description:I,Footer:D,Header:H,Title:L,TitleGroup:M,Trigger:C};export{k as Sheet};
 //# sourceMappingURL=sheet.js.map

package/dist/tabs.d.ts

@@ -11,7 +11,7 @@ import * as _radix_ui_react_tabs from '@radix-ui/react-tabs';
  *
  * @example
  * ```tsx
- * <Tabs defaultValue="account">
+ * <Tabs.Root defaultValue="account">
  *   <Tabs.List>
  *     <Tabs.Trigger value="account">Account</Tabs.Trigger>
  *     <Tabs.Trigger value="password">Password</Tabs.Trigger>
@@ -22,7 +22,7 @@ import * as _radix_ui_react_tabs from '@radix-ui/react-tabs';
  *   <Tabs.Content value="password">
  *     <p>Change your password here.</p>
  *   </Tabs.Content>
- * </Tabs>
+ * </Tabs.Root>
  * ```
  */
 declare const Tabs: {

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/tabs/tabs.tsx"],"sourcesContent":["import {\n\tContent as TabsPrimitiveContent,\n\tList as TabsPrimitiveList,\n\tRoot as TabsPrimitiveRoot,\n\tTrigger as TabsPrimitiveTrigger,\n} from \"@radix-ui/react-tabs\";\nimport clsx from \"clsx\";\nimport type {\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tHTMLAttributes,\n} from \"react\";\nimport {\n\tChildren,\n\tcloneElement,\n\tcreateContext,\n\tforwardRef,\n\tisValidElement,\n\tuseContext,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype TabsStateContextValue = {\n\torientation: \"horizontal\" | \"vertical\";\n};\n\nconst TabsStateContext = createContext<TabsStateContextValue>({\n\torientation: \"horizontal\",\n});\n\n/**\n * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n * The root component that provides context for all tab components.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs>\n * ```\n */\nconst Root = forwardRef<\n\tComponentRef<typeof TabsPrimitiveRoot>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveRoot>\n>(({ className, children, orientation = \"horizontal\", ...props }, ref) => (\n\t<TabsPrimitiveRoot\n\t\tclassName={cx(\n\t\t\t\"flex gap-4\",\n\t\t\torientation === \"horizontal\" ? \"flex-col\" : \"flex-row\",\n\t\t\tclassName,\n\t\t)}\n\t\torientation={orientation}\n\t\tref={ref}\n\t\t{...props}\n\t>\n\t\t<TabsStateContext.Provider value={{ orientation }}>\n\t\t\t{children}\n\t\t</TabsStateContext.Provider>\n\t</TabsPrimitiveRoot>\n));\nRoot.displayName = \"Tabs\";\n\n/**\n * Contains the triggers that are aligned along the edge of the active content.\n * The container for tab triggers that provides the visual layout for tab navigation.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs-list\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n * </Tabs>\n * ```\n */\nconst List = forwardRef<\n\tComponentRef<typeof TabsPrimitiveList>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveList>\n>(({ className, ...props }, ref) => {\n\tconst ctx = useContext(TabsStateContext);\n\n\treturn (\n\t\t<TabsPrimitiveList\n\t\t\taria-orientation={ctx.orientation}\n\t\t\tclassName={cx(\n\t\t\t\t\"flex border-gray-200\",\n\t\t\t\tctx.orientation === \"horizontal\"\n\t\t\t\t\t? \"flex-row items-center gap-6 border-b\"\n\t\t\t\t\t: \"flex-col items-end gap-[0.875rem] self-stretch border-r\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nList.displayName = \"TabsList\";\n\ntype TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitiveTrigger>;\n\nconst TabsTriggerDecoration = () => {\n\tconst ctx = useContext(TabsStateContext);\n\n\treturn (\n\t\t<span\n\t\t\taria-hidden\n\t\t\tclassName={clsx(\n\t\t\t\t\"group-data-state-active/tab-trigger:bg-blue-600 absolute z-0\",\n\t\t\t\tctx.orientation === \"horizontal\" &&\n\t\t\t\t\t\"-bottom-px left-0 right-0 h-[0.1875rem]\",\n\t\t\t\tctx.orientation === \"vertical\" &&\n\t\t\t\t\t\"-right-px bottom-0 top-0 w-[0.1875rem]\",\n\t\t\t)}\n\t\t/>\n\t);\n};\nTabsTriggerDecoration.displayName = \"TabsTriggerDecoration\";\n\n/**\n * The button that activates its associated content.\n * A clickable tab trigger that switches between different tab content panels.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs-trigger\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n * </Tabs>\n * ```\n */\nconst Trigger = forwardRef<\n\tComponentRef<typeof TabsPrimitiveTrigger>,\n\tTabsTriggerProps\n>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ctx = useContext(TabsStateContext);\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled);\n\n\t\tconst tabsTriggerProps = {\n\t\t\t\"aria-disabled\": _ariaDisabled ?? _disabled,\n\t\t\tclassName: cx(\n\t\t\t\t\"group/tab-trigger relative flex cursor-pointer items-center gap-1 whitespace-nowrap py-3 text-sm font-medium text-gray-600\",\n\t\t\t\tctx.orientation === \"horizontal\" && \"rounded-tl-md rounded-tr-md\",\n\t\t\t\tctx.orientation === \"vertical\" && \"rounded-bl-md rounded-tl-md pr-3\",\n\t\t\t\t\"ring-focus-accent outline-hidden\",\n\t\t\t\t\"aria-disabled:cursor-default aria-disabled:opacity-50\",\n\t\t\t\t\"focus-visible:ring-4\",\n\t\t\t\t\"[&>svg]:shrink-0 [&>svg]:size-5\",\n\t\t\t\t\"not-aria-disabled:hover:text-gray-900 not-aria-disabled:hover:data-state-active:text-blue-600\",\n\t\t\t\t\"data-state-active:text-blue-600\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\tdisabled,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<TabsTriggerProps>(singleChild),\n\t\t\t\t\"When using `asChild`, TabsTrigger must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\tconst cloneProps = {\n\t\t\t\t...(disabled\n\t\t\t\t\t? /**\n\t\t\t\t\t\t * When disabled, prevent anchor/link children from being clickable by\n\t\t\t\t\t\t * removing their href/to props!\n\t\t\t\t\t\t * This is necessary because `<a>` doesn't support the `disabled`\n\t\t\t\t\t\t * attribute and would be navigable. We could use `pointer-events-none`\n\t\t\t\t\t\t * instead, but don't by default because it would also prevent tooltip\n\t\t\t\t\t\t * interactions, which may be surprising.\n\t\t\t\t\t\t */\n\t\t\t\t\t\t{ href: undefined, to: undefined }\n\t\t\t\t\t: /**\n\t\t\t\t\t\t * when NOT disabled, allow keyboard navigation to the trigger,\n\t\t\t\t\t\t * even for asChild anchors/links\n\t\t\t\t\t\t */\n\t\t\t\t\t\t{ tabIndex: 0 }),\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\t<TabsPrimitiveTrigger asChild {...tabsTriggerProps} ref={ref}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tdisabled ? <button type=\"button\" /> : singleChild,\n\t\t\t\t\t\tcloneProps,\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<TabsTriggerDecoration />\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</TabsPrimitiveTrigger>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<TabsPrimitiveTrigger ref={ref} {...tabsTriggerProps}>\n\t\t\t\t<TabsTriggerDecoration />\n\t\t\t\t{children}\n\t\t\t</TabsPrimitiveTrigger>\n\t\t);\n\t},\n);\nTrigger.displayName = \"TabsTrigger\";\n\n/**\n * A badge component that can be used inside tab triggers to display additional information.\n * Typically used to show counts or status indicators within tab headers.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tab-badge\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">\n *       Account <Tabs.Badge>5</Tabs.Badge>\n *     </Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n * </Tabs>\n * ```\n */\nconst Badge = ({\n\tclassName,\n\tchildren,\n\t...props\n}: HTMLAttributes<HTMLSpanElement>) => (\n\t<span\n\t\tclassName={cx(\n\t\t\t\"rounded-full bg-gray-500/20 px-1.5 text-xs font-medium text-gray-600\",\n\t\t\t\"group-data-state-active/tab-trigger:bg-blue-500/20 group-data-state-active/tab-trigger:text-blue-700 group-hover/tab-trigger:group-enabled/tab-trigger:group-data-state-active/tab-trigger:text-blue-700\",\n\t\t\t\"group-hover/tab-trigger:group-enabled/tab-trigger:text-gray-700\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</span>\n);\nBadge.displayName = \"TabBadge\";\n\n/**\n * Contains the content associated with each trigger.\n * The content panel that displays when its corresponding tab trigger is active.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs-content\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof TabsPrimitiveContent>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveContent>\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitiveContent\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"focus-visible:ring-focus-accent outline-hidden focus-visible:ring-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nContent.displayName = \"TabsContent\";\n\n/**\n * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n * The root component that provides context for all tab components.\n *\n * @see https://mantle.ngrok.com/components/tabs\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs>\n * ```\n */\nconst Tabs = {\n\t/**\n\t * The root container of the tabs component that provides context for all tab components.\n\t * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tabs-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t *   <Tabs.Content value=\"account\">\n\t *     <p>Make changes to your account here.</p>\n\t *   </Tabs.Content>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the content associated with each trigger.\n\t * The content panel that displays when its corresponding tab trigger is active.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tabs-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *   </Tabs.List>\n\t *   <Tabs.Content value=\"account\">\n\t *     <p>Make changes to your account here.</p>\n\t *   </Tabs.Content>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * Contains the triggers that are aligned along the edge of the active content.\n\t * The container for tab triggers that provides the visual layout for tab navigation.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tabs-list\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tList,\n\t/**\n\t * The button that activates its associated content.\n\t * A clickable tab trigger that switches between different tab content panels.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tabs-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * A badge component that can be used inside tab triggers to display additional information.\n\t * Typically used to show counts or status indicators within tab headers.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tab-badge\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">\n\t *       Account <Tabs.Badge>5</Tabs.Badge>\n\t *     </Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tBadge,\n} as const;\n\nexport {\n\t//\n\tTabs,\n};\n"],"mappings":"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","names":["TabsPrimitiveContent","TabsPrimitiveList","TabsPrimitiveRoot","TabsPrimitiveTrigger","clsx","Children","cloneElement","createContext","forwardRef","isValidElement","useContext","invariant","Fragment","jsx","jsxs","TabsStateContext","createContext","Root","forwardRef","className","children","orientation","props","ref","TabsPrimitiveRoot","cx","List","ctx","useContext","TabsPrimitiveList","TabsTriggerDecoration","clsx","Trigger","_ariaDisabled","asChild","_disabled","disabled","parseBooleanish","tabsTriggerProps","singleChild","Children","invariant","isValidElement","grandchildren","cloneProps","TabsPrimitiveTrigger","cloneElement","Badge","Content","TabsPrimitiveContent","Tabs"]}
+{"version":3,"sources":["../src/components/tabs/tabs.tsx"],"sourcesContent":["import {\n\tContent as TabsPrimitiveContent,\n\tList as TabsPrimitiveList,\n\tRoot as TabsPrimitiveRoot,\n\tTrigger as TabsPrimitiveTrigger,\n} from \"@radix-ui/react-tabs\";\nimport clsx from \"clsx\";\nimport type {\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tHTMLAttributes,\n} from \"react\";\nimport {\n\tChildren,\n\tcloneElement,\n\tcreateContext,\n\tforwardRef,\n\tisValidElement,\n\tuseContext,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype TabsStateContextValue = {\n\torientation: \"horizontal\" | \"vertical\";\n};\n\nconst TabsStateContext = createContext<TabsStateContextValue>({\n\torientation: \"horizontal\",\n});\n\n/**\n * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n * The root component that provides context for all tab components.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Root = forwardRef<\n\tComponentRef<typeof TabsPrimitiveRoot>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveRoot>\n>(({ className, children, orientation = \"horizontal\", ...props }, ref) => (\n\t<TabsPrimitiveRoot\n\t\tclassName={cx(\n\t\t\t\"flex gap-4\",\n\t\t\torientation === \"horizontal\" ? \"flex-col\" : \"flex-row\",\n\t\t\tclassName,\n\t\t)}\n\t\torientation={orientation}\n\t\tref={ref}\n\t\t{...props}\n\t>\n\t\t<TabsStateContext.Provider value={{ orientation }}>\n\t\t\t{children}\n\t\t</TabsStateContext.Provider>\n\t</TabsPrimitiveRoot>\n));\nRoot.displayName = \"Tabs\";\n\n/**\n * Contains the triggers that are aligned along the edge of the active content.\n * The container for tab triggers that provides the visual layout for tab navigation.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs-list\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst List = forwardRef<\n\tComponentRef<typeof TabsPrimitiveList>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveList>\n>(({ className, ...props }, ref) => {\n\tconst ctx = useContext(TabsStateContext);\n\n\treturn (\n\t\t<TabsPrimitiveList\n\t\t\taria-orientation={ctx.orientation}\n\t\t\tclassName={cx(\n\t\t\t\t\"flex border-gray-200\",\n\t\t\t\tctx.orientation === \"horizontal\"\n\t\t\t\t\t? \"flex-row items-center gap-6 border-b\"\n\t\t\t\t\t: \"flex-col items-end gap-[0.875rem] self-stretch border-r\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nList.displayName = \"TabsList\";\n\ntype TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitiveTrigger>;\n\nconst TabsTriggerDecoration = () => {\n\tconst ctx = useContext(TabsStateContext);\n\n\treturn (\n\t\t<span\n\t\t\taria-hidden\n\t\t\tclassName={clsx(\n\t\t\t\t\"group-data-state-active/tab-trigger:bg-blue-600 absolute z-0\",\n\t\t\t\tctx.orientation === \"horizontal\" &&\n\t\t\t\t\t\"-bottom-px left-0 right-0 h-[0.1875rem]\",\n\t\t\t\tctx.orientation === \"vertical\" &&\n\t\t\t\t\t\"-right-px bottom-0 top-0 w-[0.1875rem]\",\n\t\t\t)}\n\t\t/>\n\t);\n};\nTabsTriggerDecoration.displayName = \"TabsTriggerDecoration\";\n\n/**\n * The button that activates its associated content.\n * A clickable tab trigger that switches between different tab content panels.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs-trigger\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Trigger = forwardRef<\n\tComponentRef<typeof TabsPrimitiveTrigger>,\n\tTabsTriggerProps\n>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ctx = useContext(TabsStateContext);\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled);\n\n\t\tconst tabsTriggerProps = {\n\t\t\t\"aria-disabled\": _ariaDisabled ?? _disabled,\n\t\t\tclassName: cx(\n\t\t\t\t\"group/tab-trigger relative flex cursor-pointer items-center gap-1 whitespace-nowrap py-3 text-sm font-medium text-gray-600\",\n\t\t\t\tctx.orientation === \"horizontal\" && \"rounded-tl-md rounded-tr-md\",\n\t\t\t\tctx.orientation === \"vertical\" && \"rounded-bl-md rounded-tl-md pr-3\",\n\t\t\t\t\"ring-focus-accent outline-hidden\",\n\t\t\t\t\"aria-disabled:cursor-default aria-disabled:opacity-50\",\n\t\t\t\t\"focus-visible:ring-4\",\n\t\t\t\t\"[&>svg]:shrink-0 [&>svg]:size-5\",\n\t\t\t\t\"not-aria-disabled:hover:text-gray-900 not-aria-disabled:hover:data-state-active:text-blue-600\",\n\t\t\t\t\"data-state-active:text-blue-600\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\tdisabled,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<TabsTriggerProps>(singleChild),\n\t\t\t\t\"When using `asChild`, TabsTrigger must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\tconst cloneProps = {\n\t\t\t\t...(disabled\n\t\t\t\t\t? /**\n\t\t\t\t\t\t * When disabled, prevent anchor/link children from being clickable by\n\t\t\t\t\t\t * removing their href/to props!\n\t\t\t\t\t\t * This is necessary because `<a>` doesn't support the `disabled`\n\t\t\t\t\t\t * attribute and would be navigable. We could use `pointer-events-none`\n\t\t\t\t\t\t * instead, but don't by default because it would also prevent tooltip\n\t\t\t\t\t\t * interactions, which may be surprising.\n\t\t\t\t\t\t */\n\t\t\t\t\t\t{ href: undefined, to: undefined }\n\t\t\t\t\t: /**\n\t\t\t\t\t\t * when NOT disabled, allow keyboard navigation to the trigger,\n\t\t\t\t\t\t * even for asChild anchors/links\n\t\t\t\t\t\t */\n\t\t\t\t\t\t{ tabIndex: 0 }),\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\t<TabsPrimitiveTrigger asChild {...tabsTriggerProps} ref={ref}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tdisabled ? <button type=\"button\" /> : singleChild,\n\t\t\t\t\t\tcloneProps,\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<TabsTriggerDecoration />\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</TabsPrimitiveTrigger>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<TabsPrimitiveTrigger ref={ref} {...tabsTriggerProps}>\n\t\t\t\t<TabsTriggerDecoration />\n\t\t\t\t{children}\n\t\t\t</TabsPrimitiveTrigger>\n\t\t);\n\t},\n);\nTrigger.displayName = \"TabsTrigger\";\n\n/**\n * A badge component that can be used inside tab triggers to display additional information.\n * Typically used to show counts or status indicators within tab headers.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tab-badge\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">\n *       Account <Tabs.Badge>5</Tabs.Badge>\n *     </Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n * </Tabs.Root>\n * ```\n */\nconst Badge = ({\n\tclassName,\n\tchildren,\n\t...props\n}: HTMLAttributes<HTMLSpanElement>) => (\n\t<span\n\t\tclassName={cx(\n\t\t\t\"rounded-full bg-gray-500/20 px-1.5 text-xs font-medium text-gray-600\",\n\t\t\t\"group-data-state-active/tab-trigger:bg-blue-500/20 group-data-state-active/tab-trigger:text-blue-700 group-hover/tab-trigger:group-enabled/tab-trigger:group-data-state-active/tab-trigger:text-blue-700\",\n\t\t\t\"group-hover/tab-trigger:group-enabled/tab-trigger:text-gray-700\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</span>\n);\nBadge.displayName = \"TabBadge\";\n\n/**\n * Contains the content associated with each trigger.\n * The content panel that displays when its corresponding tab trigger is active.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs-content\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof TabsPrimitiveContent>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveContent>\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitiveContent\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"focus-visible:ring-focus-accent outline-hidden focus-visible:ring-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nContent.displayName = \"TabsContent\";\n\n/**\n * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n * The root component that provides context for all tab components.\n *\n * @see https://mantle.ngrok.com/components/tabs\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Tabs = {\n\t/**\n\t * The root container of the tabs component that provides context for all tab components.\n\t * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tabs-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t *   <Tabs.Content value=\"account\">\n\t *     <p>Make changes to your account here.</p>\n\t *   </Tabs.Content>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the content associated with each trigger.\n\t * The content panel that displays when its corresponding tab trigger is active.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tabs-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *   </Tabs.List>\n\t *   <Tabs.Content value=\"account\">\n\t *     <p>Make changes to your account here.</p>\n\t *   </Tabs.Content>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * Contains the triggers that are aligned along the edge of the active content.\n\t * The container for tab triggers that provides the visual layout for tab navigation.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tabs-list\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tList,\n\t/**\n\t * The button that activates its associated content.\n\t * A clickable tab trigger that switches between different tab content panels.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tabs-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * A badge component that can be used inside tab triggers to display additional information.\n\t * Typically used to show counts or status indicators within tab headers.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#api-tab-badge\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">\n\t *       Account <Tabs.Badge>5</Tabs.Badge>\n\t *     </Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tBadge,\n} as const;\n\nexport {\n\t//\n\tTabs,\n};\n"],"mappings":"2EAAA,OACC,WAAWA,EACX,QAAQC,EACR,QAAQC,EACR,WAAWC,MACL,uBACP,OAAOC,MAAU,OAMjB,OACC,YAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,cAAAC,EACA,kBAAAC,EACA,cAAAC,MACM,QACP,OAAOC,MAAe,iBAgDpB,OA2JI,YAAAC,EA3JJ,OAAAC,EA2JI,QAAAC,MA3JJ,oBAxCF,IAAMC,EAAmBC,EAAqC,CAC7D,YAAa,YACd,CAAC,EAwBKC,EAAOC,EAGX,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,YAAAC,EAAc,aAAc,GAAGC,CAAM,EAAGC,IACjEV,EAACW,EAAA,CACA,UAAWC,EACV,aACAJ,IAAgB,aAAe,WAAa,WAC5CF,CACD,EACA,YAAaE,EACb,IAAKE,EACJ,GAAGD,EAEJ,SAAAT,EAACE,EAAiB,SAAjB,CAA0B,MAAO,CAAE,YAAAM,CAAY,EAC9C,SAAAD,EACF,EACD,CACA,EACDH,EAAK,YAAc,OAqBnB,IAAMS,EAAOR,EAGX,CAAC,CAAE,UAAAC,EAAW,GAAGG,CAAM,EAAGC,IAAQ,CACnC,IAAMI,EAAMC,EAAWb,CAAgB,EAEvC,OACCF,EAACgB,EAAA,CACA,mBAAkBF,EAAI,YACtB,UAAWF,EACV,uBACAE,EAAI,cAAgB,aACjB,uCACA,0DACHR,CACD,EACA,IAAKI,EACJ,GAAGD,EACL,CAEF,CAAC,EACDI,EAAK,YAAc,WAInB,IAAMI,EAAwB,IAAM,CACnC,IAAMH,EAAMC,EAAWb,CAAgB,EAEvC,OACCF,EAAC,QACA,cAAW,GACX,UAAWkB,EACV,+DACAJ,EAAI,cAAgB,cACnB,0CACDA,EAAI,cAAgB,YACnB,wCACF,EACD,CAEF,EACAG,EAAsB,YAAc,wBAqBpC,IAAME,EAAUd,EAIf,CACC,CACC,gBAAiBe,EACjB,QAAAC,EAAU,GACV,SAAAd,EACA,UAAAD,EACA,SAAUgB,EACV,GAAGb,CACJ,EACAC,IACI,CACJ,IAAMI,EAAMC,EAAWb,CAAgB,EACjCqB,EAAWC,EAAgBJ,GAAiBE,CAAS,EAErDG,EAAmB,CACxB,gBAAiBL,GAAiBE,EAClC,UAAWV,EACV,6HACAE,EAAI,cAAgB,cAAgB,8BACpCA,EAAI,cAAgB,YAAc,mCAClC,mCACA,wDACA,uBACA,kCACA,gGACA,kCACAR,CACD,EACA,SAAAiB,EACA,GAAGd,CACJ,EAEA,GAAIY,EAAS,CACZ,IAAMK,EAAcC,EAAS,KAAKpB,CAAQ,EAC1CqB,EACCC,EAAiCH,CAAW,EAC5C,+EACD,EACA,IAAMI,EAAgBJ,EAAY,OAAO,SAEnCK,EAAa,CAClB,GAAIR,EASF,CAAE,KAAM,OAAW,GAAI,MAAU,EAKjC,CAAE,SAAU,CAAE,CACjB,EAEA,OACCvB,EAACgC,EAAA,CAAqB,QAAO,GAAE,GAAGP,EAAkB,IAAKf,EACvD,SAAAuB,EACAV,EAAWvB,EAAC,UAAO,KAAK,SAAS,EAAK0B,EACtCK,EACA9B,EAAAF,EAAA,CACC,UAAAC,EAACiB,EAAA,EAAsB,EACtBa,GACF,CACD,EACD,CAEF,CAEA,OACC7B,EAAC+B,EAAA,CAAqB,IAAKtB,EAAM,GAAGe,EACnC,UAAAzB,EAACiB,EAAA,EAAsB,EACtBV,GACF,CAEF,CACD,EACAY,EAAQ,YAAc,cAoBtB,IAAMe,EAAQ,CAAC,CACd,UAAA5B,EACA,SAAAC,EACA,GAAGE,CACJ,IACCT,EAAC,QACA,UAAWY,EACV,uEACA,2MACA,kEACAN,CACD,EACC,GAAGG,EAEH,SAAAF,EACF,EAED2B,EAAM,YAAc,WAwBpB,IAAMC,EAAU9B,EAGd,CAAC,CAAE,UAAAC,EAAW,GAAGG,CAAM,EAAGC,IAC3BV,EAACoC,EAAA,CACA,IAAK1B,EACL,UAAWE,EACV,sEACAN,CACD,EACC,GAAGG,EACL,CACA,EACD0B,EAAQ,YAAc,cAwBtB,IAAME,EAAO,CAoBZ,KAAAjC,EAmBA,QAAA+B,EAiBA,KAAAtB,EAiBA,QAAAM,EAkBA,MAAAe,CACD","names":["TabsPrimitiveContent","TabsPrimitiveList","TabsPrimitiveRoot","TabsPrimitiveTrigger","clsx","Children","cloneElement","createContext","forwardRef","isValidElement","useContext","invariant","Fragment","jsx","jsxs","TabsStateContext","createContext","Root","forwardRef","className","children","orientation","props","ref","TabsPrimitiveRoot","cx","List","ctx","useContext","TabsPrimitiveList","TabsTriggerDecoration","clsx","Trigger","_ariaDisabled","asChild","_disabled","disabled","parseBooleanish","tabsTriggerProps","singleChild","Children","invariant","isValidElement","grandchildren","cloneProps","TabsPrimitiveTrigger","cloneElement","Badge","Content","TabsPrimitiveContent","Tabs"]}

package/dist/text-area.js

@@ -1,2 +1,2 @@
-import{a as d}from"./chunk-AZ56JGNY.js";import{forwardRef as b,useRef as x,useState as y}from"react";import{jsx as h}from"react/jsx-runtime";var s=b(({appearance:c,"aria-invalid":r,className:l,onDragEnter:p,onDragLeave:u,onDropCapture:f,validation:o,...g},e)=>{let n=r!=null&&r!=="false"?"error":typeof o=="function"?o():o,v=r??n==="error",[m,t]=y(!1),i=x(null);return h("textarea",{"aria-invalid":v,"data-validation":n||void 0,className:d(c==="monospaced"&&"pointer-coarse:text-[0.9375rem] font-mono text-[0.8125rem]","border-input bg-form data-drag-over:border-dashed data-drag-over:ring-4 pointer-coarse:py-[calc(theme(spacing[2.5])-1px)] pointer-coarse:text-base flex min-h-24 w-full rounded-md border px-3 py-[calc(theme(spacing[2])-1px)] focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50","placeholder:text-placeholder data-drag-over:border-dashed","border-form text-strong ring-focus-accent focus:border-accent-600 data-drag-over:border-accent-600","data-validation-error:border-danger-600 data-validation-error:ring-focus-danger data-validation-error:focus-visible:border-danger-600 data-validation-error:data-drag-over:border-danger-600","data-validation-success:border-success-600 data-validation-success:ring-focus-success data-validation-success:focus-visible:border-success-600 data-validation-success:data-drag-over:border-success-600","data-validation-warning:border-warning-600 data-validation-warning:ring-focus-warning data-validation-warning:focus-visible:border-warning-600 data-validation-warning:data-drag-over:border-warning-600",l),"data-drag-over":m,onDragEnter:a=>{t(!0),p?.(a)},onDragLeave:a=>{t(!1),u?.(a)},onDropCapture:a=>{t(!1),i.current?.focus(),f?.(a)},ref:a=>{i.current=a,typeof e=="function"?e(a):e&&(e.current=a)},...g})});s.displayName="TextArea";export{s as TextArea};
+import{a as i}from"./chunk-MF2QITTY.js";import{a as d}from"./chunk-AZ56JGNY.js";import{forwardRef as x,useRef as h,useState as w}from"react";import{jsx as y}from"react/jsx-runtime";var s=x(({appearance:c,"aria-invalid":a,className:p,onDragEnter:l,onDragLeave:f,onDropCapture:g,validation:r,...u},v)=>{let t=a!=null&&a!=="false"?"error":typeof r=="function"?r():r,m=a??t==="error",[b,o]=w(!1),n=h(null);return y("textarea",{"aria-invalid":m,"data-validation":t||void 0,className:d(c==="monospaced"&&"pointer-coarse:text-[0.9375rem] font-mono text-[0.8125rem]","border-input bg-form data-drag-over:border-dashed data-drag-over:ring-4 pointer-coarse:py-[calc(theme(spacing[2.5])-1px)] pointer-coarse:text-base flex min-h-24 w-full rounded-md border px-3 py-[calc(theme(spacing[2])-1px)] focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50","placeholder:text-placeholder data-drag-over:border-dashed","border-form text-strong ring-focus-accent focus:border-accent-600 data-drag-over:border-accent-600","data-validation-error:border-danger-600 data-validation-error:ring-focus-danger data-validation-error:focus-visible:border-danger-600 data-validation-error:data-drag-over:border-danger-600","data-validation-success:border-success-600 data-validation-success:ring-focus-success data-validation-success:focus-visible:border-success-600 data-validation-success:data-drag-over:border-success-600","data-validation-warning:border-warning-600 data-validation-warning:ring-focus-warning data-validation-warning:focus-visible:border-warning-600 data-validation-warning:data-drag-over:border-warning-600",p),"data-drag-over":b,onDragEnter:e=>{o(!0),l?.(e)},onDragLeave:e=>{o(!1),f?.(e)},onDropCapture:e=>{o(!1),n.current?.focus(),g?.(e)},ref:i(n,v),...u})});s.displayName="TextArea";export{s as TextArea};
 //# sourceMappingURL=text-area.js.map