@ngrok/mantle 0.70.0 → 0.70.2

package/dist/dialog-Cw3E0Wr9.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dialog-Cw3E0Wr9.js","names":["DialogPrimitive.Root","DialogPrimitive.Trigger","DialogPrimitive.Portal","DialogPrimitive.Close","DialogPrimitive.Overlay","DialogPrimitive.Content","DialogPrimitive.Title","DialogPrimitive.Description"],"sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport type { ComponentProps, ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport * as DialogPrimitive from \"./primitive.js\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the Dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogroot\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>This is an optional description.</Dialog.Description>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Dialog.Close asChild>\n *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *       </Dialog.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Root = DialogPrimitive.Root;\nRoot.displayName = \"Dialog\";\n\n/**\n * A button that opens the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogtrigger\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>This is an optional description.</Dialog.Description>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Dialog.Close asChild>\n *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *       </Dialog.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Trigger = DialogPrimitive.Trigger;\nTrigger.displayName = \"DialogTrigger\";\n\nconst Portal = DialogPrimitive.Portal;\nPortal.displayName = \"DialogPortal\";\n\nconst Close = DialogPrimitive.Close;\nClose.displayName = \"DialogClose\";\n\nconst Overlay = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nOverlay.displayName = \"DialogOverlay\";\n\ntype ContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `Dialog.Content` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Dialog`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `Dialog.Content`\n\t *\n\t * @default `max-w-lg`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The container for the dialog content.\n * Renders on top of the overlay and is centered in the viewport.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogcontent\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>This is an optional description.</Dialog.Description>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Dialog.Close asChild>\n *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *       </Dialog.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ContentProps>(\n\t({ children, className, preferredWidth = \"max-w-lg\", ...props }, ref) => (\n\t\t<Portal>\n\t\t\t<Overlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<DialogPrimitive.Content\n\t\t\t\t\tdata-mantle-modal-content\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex max-h-full w-full flex-1 flex-col\",\n\t\t\t\t\t\t\"outline-hidden focus-within:outline-hidden\",\n\t\t\t\t\t\t\"border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200\",\n\t\t\t\t\t\t\"data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\t\t\tpreferredWidth,\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</DialogPrimitive.Content>\n\t\t\t</div>\n\t\t</Portal>\n\t),\n);\nContent.displayName = \"DialogContent\";\n\n/**\n * Contains the header content of the dialog, including the title and close button.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogheader\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>This is an optional description.</Dialog.Description>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Dialog.Close asChild>\n *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *       </Dialog.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Header = ({ className, children, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</div>\n);\nHeader.displayName = \"DialogHeader\";\n\ntype CloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\n\n/**\n * An icon button that closes the dialog when clicked.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogcloseiconbutton\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>This is an optional description.</Dialog.Description>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Dialog.Close asChild>\n *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *       </Dialog.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst CloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Dialog\",\n\tappearance = \"ghost\",\n\t...props\n}: CloseIconButtonProps) => (\n\t<DialogPrimitive.Close asChild>\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={<XIcon />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t</DialogPrimitive.Close>\n);\nCloseIconButton.displayName = \"DialogCloseIconButton\";\n\n/**\n * Contains the main content of the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogbody\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>This is an optional description.</Dialog.Description>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Dialog.Close asChild>\n *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *       </Dialog.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Body = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div className={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)} {...props} />\n);\nBody.displayName = \"DialogBody\";\n\n/**\n * Contains the footer content of the dialog, including action buttons.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogfooter\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>This is an optional description.</Dialog.Description>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Dialog.Close asChild>\n *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *       </Dialog.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Footer = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nFooter.displayName = \"DialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogtitle\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>This is an optional description.</Dialog.Description>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Dialog.Close asChild>\n *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *       </Dialog.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong truncate text-lg font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = \"DialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\n * Renders as a `div` by default, but can be changed to any other element using\n * the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/dialog#dialogdescription\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>This is an optional description.</Dialog.Description>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Dialog.Close asChild>\n *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *       </Dialog.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description ref={ref} className={cx(\"text-muted\", className)} {...props} />\n));\nDescription.displayName = \"DialogDescription\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n *\n * @see https://mantle.ngrok.com/components/dialog\n *\n * @example\n * Composition:\n * ```\n * Dialog.Root\n * ├── Dialog.Trigger\n * └── Dialog.Content\n *     ├── Dialog.Header\n *     │   ├── Dialog.Title\n *     │   ├── Dialog.Description\n *     │   └── Dialog.CloseIconButton\n *     ├── Dialog.Body\n *     └── Dialog.Footer\n *         └── Dialog.Close\n * ```\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>This is an optional description.</Dialog.Description>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Dialog.Close asChild>\n *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n *       </Dialog.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Dialog = {\n\t/**\n\t * A window overlaid on either the primary window or another dialog window.\n\t * The root stateful component for the Dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</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>This is an optional description.</Dialog.Description>\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 *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the main content of the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogbody\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</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>This is an optional description.</Dialog.Description>\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 *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * A button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</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>This is an optional description.</Dialog.Description>\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 *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * An icon button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogcloseiconbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</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>This is an optional description.</Dialog.Description>\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 *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tCloseIconButton,\n\t/**\n\t * The container for the dialog content.\n\t * Renders on top of the overlay and is centered in the viewport.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</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>This is an optional description.</Dialog.Description>\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 *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * An accessible description to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</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>This is an optional description.</Dialog.Description>\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 *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * Contains the footer content of the dialog, including action buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogfooter\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</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>This is an optional description.</Dialog.Description>\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 *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * Contains the header content of the dialog, including the title and close button.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</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>This is an optional description.</Dialog.Description>\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 *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The overlay backdrop for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-reference\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">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>Dialog Title</Dialog.Title>\n\t *         <Dialog.Description>This is an optional description.</Dialog.Description>\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 *         <Dialog.Close asChild>\n\t *           <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *         </Dialog.Close>\n\t *         <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *       </Dialog.Footer>\n\t *     </Dialog.Content>\n\t *   </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tOverlay,\n\t/**\n\t * The portal container for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-reference\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">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>Dialog Title</Dialog.Title>\n\t *         <Dialog.Description>This is an optional description.</Dialog.Description>\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 *         <Dialog.Close asChild>\n\t *           <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *         </Dialog.Close>\n\t *         <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *       </Dialog.Footer>\n\t *     </Dialog.Content>\n\t *   </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tPortal,\n\t/**\n\t * An accessible name to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogtitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</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>This is an optional description.</Dialog.Description>\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 *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A button that opens the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#dialogtrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">Open Dialog</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>This is an optional description.</Dialog.Description>\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 *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Dialog.Footer>\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":"sSAsCA,MAAM,EAAOA,EACb,EAAK,YAAc,SAgCnB,MAAM,EAAUC,EAChB,EAAQ,YAAc,gBAEtB,MAAM,EAASC,EACf,EAAO,YAAc,eAErB,MAAM,EAAQC,EACd,EAAM,YAAc,cAEpB,MAAM,EAAU,GAGb,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACC,EAAD,CACM,MACL,UAAW,EACV,iKACA,EACA,CACD,GAAI,EACH,CAAA,CACD,CACF,EAAQ,YAAc,gBA6CtB,MAAM,EAAU,GACd,CAAE,WAAU,YAAW,iBAAiB,WAAY,GAAG,GAAS,IAChE,EAAC,EAAD,CAAA,SAAA,CACC,EAAC,EAAD,EAAW,CAAA,CACX,EAAC,MAAD,CAAK,UAAU,+DACd,EAACC,EAAD,CACC,4BAAA,GACA,UAAW,EACV,yCACA,6CACA,wFACA,2KACA,EACA,EACA,CACI,MACL,GAAI,EAEH,WACwB,CAAA,CACrB,CAAA,CACE,CAAA,CAAA,CAEV,CACD,EAAQ,YAAc,gBAgCtB,MAAM,GAAU,CAAE,YAAW,WAAU,GAAG,KACzC,EAAC,MAAD,CACC,UAAW,EACV,+GACA,0BACA,EACA,CACD,GAAI,EAEH,WACI,CAAA,CAEP,EAAO,YAAc,eAkCrB,MAAM,GAAmB,CACxB,OAAO,KACP,OAAO,SACP,QAAQ,eACR,aAAa,QACb,GAAG,KAEH,EAACF,EAAD,CAAuB,QAAA,YACtB,EAAC,EAAD,CACa,aACZ,KAAM,EAAC,EAAD,EAAS,CAAA,CACR,QACD,OACA,OACN,GAAI,EACH,CAAA,CACqB,CAAA,CAEzB,EAAgB,YAAc,wBAgC9B,MAAM,GAAQ,CAAE,YAAW,GAAG,KAC7B,EAAC,MAAD,CAAK,UAAW,EAAG,iDAAkD,EAAU,CAAE,GAAI,EAAS,CAAA,CAE/F,EAAK,YAAc,aAgCnB,MAAM,GAAU,CAAE,YAAW,GAAG,KAC/B,EAAC,MAAD,CACC,UAAW,EACV,8EACA,EACA,CACD,GAAI,EACH,CAAA,CAEH,EAAO,YAAc,eAgCrB,MAAM,EAAQ,GAGX,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACG,EAAD,CACM,MACL,UAAW,EAAG,2CAA4C,EAAU,CACpE,GAAI,EACH,CAAA,CACD,CACF,EAAM,YAAc,cAkCpB,MAAM,EAAc,GAGjB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACC,EAAD,CAAkC,MAAK,UAAW,EAAG,aAAc,EAAU,CAAE,GAAI,EAAS,CAAA,CAC3F,CACF,EAAY,YAAc,oBA+C1B,MAAM,EAAS,CAgCd,OA+BA,OA+BA,QA+BA,kBAgCA,UA+BA,cA+BA,SA+BA,SAkCA,UAkCA,SA+BA,QA+BA,UACA"}

package/dist/dropdown-menu-Bfi9ODPB.js

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

package/dist/dropdown-menu-Bfi9ODPB.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-menu-Bfi9ODPB.js","names":[],"sources":["../src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import { CaretRightIcon } from \"@phosphor-icons/react/CaretRight\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentProps, ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Separator } from \"../separator/separator.js\";\n\n/**\n * A menu of options or actions, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the dropdown menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuroot\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Root = DropdownMenuPrimitive.Root;\nRoot.displayName = \"DropdownMenu\";\n\n/**\n * The trigger button that opens the dropdown menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenutrigger\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Trigger = DropdownMenuPrimitive.Trigger;\nTrigger.displayName = \"DropdownMenuTrigger\";\n\nconst Group = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Group>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>\n>(({ className, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Group ref={ref} className={cx(\"space-y-px\", className)} {...props} />\n));\nGroup.displayName = \"DropdownMenuGroup\";\n\n/**\n * The portal container for rendering dropdown content outside the normal DOM tree.\n */\nconst Portal = DropdownMenuPrimitive.Portal;\nPortal.displayName = \"DropdownMenuPortal\";\n\nconst Sub = DropdownMenuPrimitive.Sub;\nSub.displayName = \"DropdownMenuSub\";\n\nconst RadioGroup = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.RadioGroup>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup>\n>(({ className, ...props }, ref) => (\n\t<DropdownMenuPrimitive.RadioGroup ref={ref} className={cx(\"space-y-px\", className)} {...props} />\n));\nRadioGroup.displayName = \"DropdownMenuRadioGroup\";\n\n/**\n * A trigger for a dropdown menu sub-menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenusubtrigger\n */\nconst SubTrigger = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, children, ...props }, ref) => (\n\t<DropdownMenuPrimitive.SubTrigger\n\t\tclassName={cx(\n\t\t\t\"focus:bg-accent data-state-open:bg-accent relative flex select-none items-center rounded-md py-1.5 pl-2 pr-9 text-sm outline-hidden\",\n\t\t\t\"data-highlighted:bg-active-menu-item data-state-open:bg-active-menu-item\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\tref={ref}\n\t\t{...props}\n\t>\n\t\t{children}\n\t\t<span className=\"absolute right-2 flex items-center\">\n\t\t\t<Icon svg={<CaretRightIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t</span>\n\t</DropdownMenuPrimitive.SubTrigger>\n));\nSubTrigger.displayName = \"DropdownMenuSubTrigger\";\n\n/**\n * The content container for a dropdown menu sub-menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenusubcontent\n */\nconst SubContent = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.SubContent>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, loop = true, ...props }, ref) => (\n\t<Portal>\n\t\t<DropdownMenuPrimitive.SubContent\n\t\t\tclassName={cx(\n\t\t\t\t\"scrollbar\",\n\t\t\t\t\"text-popover-foreground border-popover bg-popover p-1.25 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border shadow-xl space-y-px font-sans\",\n\t\t\t\t\"my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)-16px)] overflow-auto\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tloop={loop}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t</Portal>\n));\nSubContent.displayName = \"DropdownMenuSubContent\";\n\ntype DropdownMenuContentProps = ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {\n\t/**\n\t * Whether the DropdownMenuContent should match the width of the trigger or use the intrinsic content width.\n\t */\n\twidth?: \"trigger\" | \"content\";\n};\n\n/**\n * The container for the dropdown menu content.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenucontent\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Content>,\n\tDropdownMenuContentProps\n>(({ className, onClick, loop = true, width, ...props }, ref) => (\n\t<Portal>\n\t\t<DropdownMenuPrimitive.Content\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"scrollbar\",\n\t\t\t\t\"text-popover-foreground border-popover bg-popover p-1.25 z-50 min-w-32 overflow-hidden rounded-md border shadow-xl outline-hidden space-y-px font-sans\",\n\t\t\t\t\"data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\t\"my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)-16px)] overflow-auto\",\n\t\t\t\twidth === \"trigger\" && \"w-(--radix-dropdown-menu-trigger-width)\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tloop={loop}\n\t\t\tonClick={(event) => {\n\t\t\t\t/**\n\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t * of the DropdownMenu\n\t\t\t\t */\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t</Portal>\n));\nContent.displayName = \"DropdownMenuContent\";\n\n/**\n * An item in the dropdown menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuitem\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Item = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Item>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-strong text-sm font-normal outline-hidden transition-colors\",\n\t\t\t\"data-highlighted:bg-active-menu-item\",\n\t\t\t\"focus:bg-accent focus:text-accent-foreground\",\n\t\t\t\"data-disabled:cursor-default data-disabled:opacity-50\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nItem.displayName = \"DropdownMenuItem\";\n\n/**\n * A menu item with a checkbox that can be controlled or uncontrolled.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenucheckboxitem\n */\nconst CheckboxItem = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n\t<DropdownMenuPrimitive.CheckboxItem\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded-md py-1.5 pl-2 pr-9 text-sm font-normal outline-hidden\",\n\t\t\t\"data-highlighted:bg-active-menu-item\",\n\t\t\t\"aria-checked:bg-selected-menu-item\",\n\t\t\t\"data-highlighted:aria-checked:bg-active-selected-menu-item!\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tclassName,\n\t\t)}\n\t\tchecked={checked}\n\t\t{...props}\n\t>\n\t\t<span className=\"absolute right-2 flex items-center\">\n\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4 text-accent-600\" />\n\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t</span>\n\t\t{children}\n\t</DropdownMenuPrimitive.CheckboxItem>\n));\nCheckboxItem.displayName = \"DropdownMenuCheckboxItem\";\n\ntype DropdownMenuRadioItemProps = ComponentPropsWithoutRef<\n\ttypeof DropdownMenuPrimitive.RadioItem\n> & {\n\tname?: string;\n\tid?: string;\n};\n\n/**\n * A menu item with a radio button that can be controlled or uncontrolled.\n * Used within a RadioGroup to create a set of mutually exclusive options.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuradioitem\n */\nconst RadioItem = forwardRef<ComponentRef<\"input\">, DropdownMenuRadioItemProps>(\n\t({ className, children, ...props }, ref) => (\n\t\t<DropdownMenuPrimitive.RadioItem\n\t\t\tclassName={cx(\n\t\t\t\t\"group/dropdown-menu-radio-item\",\n\t\t\t\t\"text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded-md py-1.5 px-2 text-sm font-normal outline-none\",\n\t\t\t\t\"data-highlighted:bg-active-menu-item\",\n\t\t\t\t\"aria-checked:bg-selected-menu-item aria-checked:pr-9\",\n\t\t\t\t\"data-highlighted:aria-checked:bg-active-selected-menu-item!\",\n\t\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"absolute right-2 items-center hidden group-aria-checked/dropdown-menu-radio-item:flex\">\n\t\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4 text-accent-600\" />\n\t\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</DropdownMenuPrimitive.RadioItem>\n\t),\n);\nRadioItem.displayName = \"DropdownMenuRadioItem\";\n\n/**\n * A label for a group of dropdown menu items.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenulabel\n */\nconst Label = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cx(\"px-2 py-1.5 text-sm font-medium\", inset && \"pl-8\", className)}\n\t\t{...props}\n\t/>\n));\nLabel.displayName = \"DropdownMenuLabel\";\n\n/**\n * A visual separator between dropdown menu items or groups.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuseparator\n */\nconst DropdownSeparator = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator ref={ref} className={cx(\"-mx-1.25 my-1 w-auto\", className)} {...props} />\n));\nDropdownSeparator.displayName = \"DropdownMenuSeparator\";\n\nconst Shortcut = ({ className, ...props }: ComponentProps<\"span\">) => {\n\treturn (\n\t\t<span className={cx(\"ml-auto text-xs tracking-widest opacity-60\", className)} {...props} />\n\t);\n};\nShortcut.displayName = \"DropdownMenuShortcut\";\n\n/**\n * A menu of options or actions, triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu\n *\n * @example\n * Composition:\n * ```\n * DropdownMenu.Root\n * ├── DropdownMenu.Trigger\n * └── DropdownMenu.Content\n *     ├── DropdownMenu.Group\n *     │   ├── DropdownMenu.Label\n *     │   ├── DropdownMenu.Item\n *     │   │   └── DropdownMenu.Shortcut\n *     │   ├── DropdownMenu.CheckboxItem\n *     │   └── DropdownMenu.RadioGroup\n *     │       └── DropdownMenu.RadioItem\n *     ├── DropdownMenu.Separator\n *     └── DropdownMenu.Sub\n *         ├── DropdownMenu.SubTrigger\n *         └── DropdownMenu.SubContent\n * ```\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst DropdownMenu = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger asChild>\n\t *     <Button>Open Menu</Button>\n\t *   </DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A checkbox item in the dropdown menu that can be toggled on and off.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenucheckboxitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.CheckboxItem checked={true} onCheckedChange={setChecked}>\n\t *       Show notifications\n\t *     </DropdownMenu.CheckboxItem>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tCheckboxItem,\n\t/**\n\t * The container for the dropdown menu content. Appears in a portal with scrolling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenucontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content width=\"trigger\">\n\t *     <DropdownMenu.Item>Edit</DropdownMenu.Item>\n\t *     <DropdownMenu.Item>Delete</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * A group container for organizing related dropdown menu items.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenugroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Group>\n\t *       <DropdownMenu.Label>Account</DropdownMenu.Label>\n\t *       <DropdownMenu.Item>Profile</DropdownMenu.Item>\n\t *       <DropdownMenu.Item>Settings</DropdownMenu.Item>\n\t *     </DropdownMenu.Group>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * A standard item in the dropdown menu that can be selected or activated.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item onSelect={() => handleEdit()}>\n\t *       Edit\n\t *     </DropdownMenu.Item>\n\t *     <DropdownMenu.Item disabled>\n\t *       Delete\n\t *     </DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * A label for grouping and describing sections within the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenulabel\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Label>My Account</DropdownMenu.Label>\n\t *     <DropdownMenu.Item>Profile</DropdownMenu.Item>\n\t *     <DropdownMenu.Item>Settings</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tLabel,\n\t/**\n\t * A radio group container for exclusive selection within the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuradiogroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.RadioGroup value={value} onValueChange={setValue}>\n\t *       <DropdownMenu.RadioItem value=\"option1\">Option 1</DropdownMenu.RadioItem>\n\t *       <DropdownMenu.RadioItem value=\"option2\">Option 2</DropdownMenu.RadioItem>\n\t *     </DropdownMenu.RadioGroup>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tRadioGroup,\n\t/**\n\t * A radio item in the dropdown menu where only one item in the group can be selected.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuradioitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.RadioGroup value=\"small\" onValueChange={setSize}>\n\t *       <DropdownMenu.RadioItem value=\"small\">Small</DropdownMenu.RadioItem>\n\t *       <DropdownMenu.RadioItem value=\"medium\">Medium</DropdownMenu.RadioItem>\n\t *       <DropdownMenu.RadioItem value=\"large\">Large</DropdownMenu.RadioItem>\n\t *     </DropdownMenu.RadioGroup>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tRadioItem,\n\t/**\n\t * A visual separator for dividing sections within the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenuseparator\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item>Edit</DropdownMenu.Item>\n\t *     <DropdownMenu.Item>Copy</DropdownMenu.Item>\n\t *     <DropdownMenu.Separator />\n\t *     <DropdownMenu.Item>Delete</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSeparator: DropdownSeparator,\n\t/**\n\t * A keyboard shortcut indicator for dropdown menu items.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenushortcut\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item>\n\t *       Save\n\t *       <DropdownMenu.Shortcut>⌘S</DropdownMenu.Shortcut>\n\t *     </DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tShortcut,\n\t/**\n\t * A submenu container for creating nested dropdown menus.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenusub\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Sub>\n\t *       <DropdownMenu.SubTrigger>More options</DropdownMenu.SubTrigger>\n\t *       <DropdownMenu.SubContent>\n\t *         <DropdownMenu.Item>Sub item 1</DropdownMenu.Item>\n\t *         <DropdownMenu.Item>Sub item 2</DropdownMenu.Item>\n\t *       </DropdownMenu.SubContent>\n\t *     </DropdownMenu.Sub>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSub,\n\t/**\n\t * The content container for submenu items.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenusubcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Sub>\n\t *       <DropdownMenu.SubTrigger>Export</DropdownMenu.SubTrigger>\n\t *       <DropdownMenu.SubContent>\n\t *         <DropdownMenu.Item>Export as PDF</DropdownMenu.Item>\n\t *         <DropdownMenu.Item>Export as CSV</DropdownMenu.Item>\n\t *       </DropdownMenu.SubContent>\n\t *     </DropdownMenu.Sub>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSubContent,\n\t/**\n\t * The trigger item that opens a submenu when hovered or focused.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenusubtrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Sub>\n\t *       <DropdownMenu.SubTrigger>Share</DropdownMenu.SubTrigger>\n\t *       <DropdownMenu.SubContent>\n\t *         <DropdownMenu.Item>Email</DropdownMenu.Item>\n\t *         <DropdownMenu.Item>Copy link</DropdownMenu.Item>\n\t *       </DropdownMenu.SubContent>\n\t *     </DropdownMenu.Sub>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSubTrigger,\n\t/**\n\t * The trigger button that opens the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#dropdownmenutrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Menu\n\t *     </Button>\n\t *   </DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tDropdownMenu,\n};\n"],"mappings":"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"}

package/dist/icon-BMH0fD_b.js

@@ -1,2 +0,0 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./svg-only-DnZldAY9.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({className:n,style:i,svg:a,...o},s)=>r(t,{ref:s,className:e(`size-5`,n),style:i,svg:a,...o}));i.displayName=`Icon`;export{i as t};
-//# sourceMappingURL=icon-BMH0fD_b.js.map

package/dist/kbd-GS-e4ICt.js

@@ -1,2 +0,0 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{jsx as t}from"react/jsx-runtime";function n({children:n,className:r,...i}){return t(`kbd`,{className:e(`[font-kerning:normal] [font-variant-ligatures:common-ligatures_contextual]`,`appearance-none tabular-nums inline-grid place-items-center size-5 bg-neutral-500/15 px-1 rounded text-mono leading-none font-mono`,r),...i,children:n})}export{n as t};
-//# sourceMappingURL=kbd-GS-e4ICt.js.map

package/dist/select-BPzMl3gm.js

@@ -1,2 +0,0 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-BMH0fD_b.js";import{t as n}from"./compose-refs-DFIaEnQH.js";import{n as r}from"./separator-Yk9hMn8E.js";import{CaretDownIcon as i}from"@phosphor-icons/react/CaretDown";import{createContext as a,forwardRef as o,useContext as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{CheckIcon as u}from"@phosphor-icons/react/Check";import{CaretUpIcon as d}from"@phosphor-icons/react/CaretUp";import*as f from"@radix-ui/react-select";const p=a({}),m=o(({"aria-invalid":e,children:t,id:n,validation:r,onBlur:i,onValueChange:a,onChange:o,...s},l)=>c(f.Root,{...s,onValueChange:e=>{o?.(e),a?.(e)},children:c(p.Provider,{value:{"aria-invalid":e,id:n,validation:r,onBlur:i,ref:l},children:t})}));m.displayName=`Select`;const h=o(({className:t,...n},r)=>c(f.Group,{ref:r,className:e(`space-y-px`,t),...n}));h.displayName=`SelectGroup`;const g=f.Value;g.displayName=`SelectValue`;const _=o(({"aria-invalid":r,className:a,children:o,id:u,validation:d,...m},h)=>{let g=s(p),_=g[`aria-invalid`]??r,v=_!=null&&_!==`false`,y=g.validation??d,b=v?`error`:typeof y==`function`?y():y,x=_??b===`error`,S=g.id??u;return l(f.Trigger,{"aria-invalid":x,className:e(`h-9 text-sm`,`border-form bg-form text-strong font-sans placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left`,`hover:border-neutral-400`,`focus:outline-hidden focus:ring-4 aria-expanded:ring-4`,`focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent`,`data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success`,`data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning`,`data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger`,a),"data-validation":b||void 0,id:S,ref:n(h,g.ref),...m,children:[o,c(f.Icon,{asChild:!0,children:c(t,{svg:c(i,{weight:`bold`}),className:`size-4`})})]})});_.displayName=`SelectTrigger`;const v=o(({className:n,...r},i)=>c(f.ScrollUpButton,{ref:i,className:e(`flex cursor-default items-center justify-center py-1`,n),...r,children:c(t,{svg:c(d,{weight:`bold`}),className:`size-4`})}));v.displayName=`SelectScrollUpButton`;const y=o(({className:n,...r},a)=>c(f.ScrollDownButton,{ref:a,className:e(`flex cursor-default items-center justify-center py-1`,n),...r,children:c(t,{svg:c(i,{weight:`bold`}),className:`size-4`})}));y.displayName=`SelectScrollDownButton`;const b=o(({className:t,children:n,position:r=`popper`,width:i=`trigger`,...a},o)=>c(f.Portal,{children:l(f.Content,{ref:o,className:e(`border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md`,`bg-popover font-sans`,r===`popper`&&`data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-(--radix-select-content-available-height)`,i===`trigger`&&`w-(--radix-select-trigger-width)`,t),position:r,...a,children:[c(v,{}),c(f.Viewport,{className:e(`p-1 space-y-px`,r===`popper`&&`h-(--radix-select-trigger-height) w-full`),children:n}),c(y,{})]})}));b.displayName=`SelectContent`;const x=o(({className:t,...n},r)=>c(f.Label,{ref:r,className:e(`px-2 py-1.5 text-sm font-medium`,t),...n}));x.displayName=`SelectLabel`;const S=o(({className:n,children:r,icon:i,...a},o)=>l(f.Item,{ref:o,className:e(`relative flex gap-2 w-full cursor-pointer select-none items-center rounded-md py-1.5 pl-2 pr-8 text-strong text-sm outline-hidden`,`focus:bg-active-menu-item`,`data-disabled:pointer-events-none data-disabled:opacity-50`,`data-state-checked:bg-selected-menu-item`,`focus:data-state-checked:bg-active-selected-menu-item`,n),...a,children:[i&&c(t,{svg:i}),c(f.ItemText,{children:r}),c(f.ItemIndicator,{className:`absolute right-2 flex h-3.5 w-3.5 items-center justify-center`,children:c(t,{svg:c(u,{weight:`bold`}),className:`size-4 text-accent-600`})})]}));S.displayName=`SelectItem`;const C=o(({className:t,...n},i)=>c(r,{ref:i,className:e(`-mx-1 my-1 h-px w-auto`,t),...n}));C.displayName=`SelectSeparator`;const w={Root:m,Content:b,Group:h,Item:S,Label:x,Separator:C,Trigger:_,Value:g};export{w as t};
-//# sourceMappingURL=select-BPzMl3gm.js.map

package/dist/select-BPzMl3gm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"select-BPzMl3gm.js","names":[],"sources":["../src/components/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport { CaretUpIcon } from \"@phosphor-icons/react/CaretUp\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tFocusEvent,\n\tPropsWithChildren,\n\tReactNode,\n\tRef,\n\tSelectHTMLAttributes,\n} from \"react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport type { WithValidation } from \"../input/types.js\";\nimport { Separator } from \"../separator/separator.js\";\n\ntype WithAriaInvalid = Pick<SelectHTMLAttributes<HTMLSelectElement>, \"aria-invalid\">;\ntype SelectContextType = WithValidation &\n\tWithAriaInvalid & {\n\t\t/**\n\t\t * Ref for the trigger button.\n\t\t */\n\t\tref?: Ref<HTMLButtonElement>;\n\t\t/**\n\t\t * Event handler called when Select blurs.\n\t\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t\t */\n\t\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t} & Pick<ComponentProps<\"button\">, \"id\">;\n\nconst SelectContext = createContext<SelectContextType>({});\n\ntype SelectProps = PropsWithChildren & {\n\tautoComplete?: string;\n\tdefaultOpen?: boolean;\n\tdefaultValue?: string;\n\tdir?: \"ltr\" | \"rtl\";\n\tdisabled?: boolean;\n\tform?: string;\n\tid?: string;\n\tname?: string;\n\t/**\n\t * Event handler called when Select blurs.\n\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t */\n\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t/**\n\t * Event handler called when the value changes.\n\t * @deprecated Use `onValueChange` instead.\n\t */\n\tonChange?: (value: string) => void;\n\tonOpenChange?(open: boolean): void;\n\tonValueChange?(value: string): void;\n\topen?: boolean;\n\trequired?: boolean;\n\tvalue?: string;\n} & WithValidation &\n\tWithAriaInvalid;\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/select#selectroot\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Root = forwardRef<HTMLButtonElement, SelectProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tchildren,\n\t\t\tid,\n\t\t\tvalidation,\n\t\t\tonBlur,\n\t\t\tonValueChange,\n\t\t\tonChange,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<SelectPrimitive.Root\n\t\t\t\t{...props}\n\t\t\t\tonValueChange={(value) => {\n\t\t\t\t\tonChange?.(value);\n\t\t\t\t\tonValueChange?.(value);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SelectContext.Provider\n\t\t\t\t\tvalue={{ \"aria-invalid\": _ariaInvalid, id, validation, onBlur, ref }}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectContext.Provider>\n\t\t\t</SelectPrimitive.Root>\n\t\t);\n\t},\n);\nRoot.displayName = \"Select\";\n\n/**\n * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.\n *\n * @see https://mantle.ngrok.com/components/select#selectgroup\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Group = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Group>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Group>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Group ref={ref} className={cx(\"space-y-px\", className)} {...props} />\n));\nGroup.displayName = \"SelectGroup\";\n\n/**\n * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.\n *\n * @see https://mantle.ngrok.com/components/select#selectvalue\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Value = SelectPrimitive.Value;\nValue.displayName = \"SelectValue\";\n\ntype SelectTriggerProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &\n\tWithAriaInvalid &\n\tWithValidation;\n\n/**\n * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.\n *\n * @see https://mantle.ngrok.com/components/select#selecttrigger\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Trigger = forwardRef<ComponentRef<typeof SelectPrimitive.Trigger>, SelectTriggerProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": ariaInValidProp,\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tid: propId,\n\t\t\tvalidation: propValidation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ctx = useContext(SelectContext);\n\t\tconst _ariaInvalid = ctx[\"aria-invalid\"] ?? ariaInValidProp;\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst _validation = ctx.validation ?? propValidation;\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\t\tconst id = ctx.id ?? propId;\n\n\t\treturn (\n\t\t\t<SelectPrimitive.Trigger\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"h-9 text-sm\",\n\t\t\t\t\t\"border-form bg-form text-strong font-sans placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left\",\n\t\t\t\t\t\"hover:border-neutral-400\",\n\t\t\t\t\t\"focus:outline-hidden focus:ring-4 aria-expanded:ring-4\",\n\t\t\t\t\t\"focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tid={id}\n\t\t\t\tref={composeRefs(ref, ctx.ref)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<SelectPrimitive.Icon asChild>\n\t\t\t\t\t<Icon svg={<CaretDownIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t\t</SelectPrimitive.Icon>\n\t\t\t</SelectPrimitive.Trigger>\n\t\t);\n\t},\n);\nTrigger.displayName = \"SelectTrigger\";\n\n/**\n * The button that scrolls the select content up.\n * @private\n */\nconst SelectScrollUpButton = forwardRef<\n\tComponentRef<typeof SelectPrimitive.ScrollUpButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollUpButton\n\t\tref={ref}\n\t\tclassName={cx(\"flex cursor-default items-center justify-center py-1\", className)}\n\t\t{...props}\n\t>\n\t\t<Icon svg={<CaretUpIcon weight=\"bold\" />} className=\"size-4\" />\n\t</SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = \"SelectScrollUpButton\";\n\n/**\n * The button that scrolls the select content down.\n * @private\n */\nconst SelectScrollDownButton = forwardRef<\n\tComponentRef<typeof SelectPrimitive.ScrollDownButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollDownButton\n\t\tref={ref}\n\t\tclassName={cx(\"flex cursor-default items-center justify-center py-1\", className)}\n\t\t{...props}\n\t>\n\t\t<Icon svg={<CaretDownIcon weight=\"bold\" />} className=\"size-4\" />\n\t</SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = \"SelectScrollDownButton\";\n\ntype SelectContentProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {\n\t/**\n\t * The width of the content. Defaults to the width of the trigger.\n\t * If set to \"content\", the content will use the intrinsic content width; it will be the width of the longest/widest item.\n\t * @default \"trigger\"\n\t */\n\twidth?: \"trigger\" | \"content\";\n};\n\n/**\n * The component that pops out when the select is open as a portal adjacent to the trigger button.\n * It contains a scrolling viewport of the select items.\n *\n * @see https://mantle.ngrok.com/components/select#selectcontent\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<typeof SelectPrimitive.Content>, SelectContentProps>(\n\t({ className, children, position = \"popper\", width = \"trigger\", ...props }, ref) => (\n\t\t<SelectPrimitive.Portal>\n\t\t\t<SelectPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md\",\n\t\t\t\t\t\"bg-popover font-sans\",\n\t\t\t\t\tposition === \"popper\" &&\n\t\t\t\t\t\t\"data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-(--radix-select-content-available-height)\",\n\t\t\t\t\twidth === \"trigger\" && \"w-(--radix-select-trigger-width)\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tposition={position}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SelectScrollUpButton />\n\t\t\t\t<SelectPrimitive.Viewport\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"p-1 space-y-px\",\n\t\t\t\t\t\tposition === \"popper\" && \"h-(--radix-select-trigger-height) w-full\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectPrimitive.Viewport>\n\t\t\t\t<SelectScrollDownButton />\n\t\t\t</SelectPrimitive.Content>\n\t\t</SelectPrimitive.Portal>\n\t),\n);\nContent.displayName = \"SelectContent\";\n\n/**\n * Used to render the label of a group. It won't be focusable using arrow keys.\n *\n * @see https://mantle.ngrok.com/components/select#selectlabel\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Label = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cx(\"px-2 py-1.5 text-sm font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nLabel.displayName = \"SelectLabel\";\n\ntype SelectItemProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {\n\ticon?: ReactNode;\n};\n\n/**\n * An option within a select menu. Similar to an html `<option>` element.\n * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.\n * Displays the children as the option's text.\n *\n * @see https://mantle.ngrok.com/components/select#selectitem\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Item = forwardRef<ComponentRef<typeof SelectPrimitive.Item>, SelectItemProps>(\n\t({ className, children, icon, ...props }, ref) => (\n\t\t<SelectPrimitive.Item\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"relative flex gap-2 w-full cursor-pointer select-none items-center rounded-md py-1.5 pl-2 pr-8 text-strong text-sm outline-hidden\",\n\t\t\t\t\"focus:bg-active-menu-item\",\n\t\t\t\t\"data-disabled:pointer-events-none data-disabled:opacity-50\",\n\t\t\t\t\"data-state-checked:bg-selected-menu-item\",\n\t\t\t\t\"focus:data-state-checked:bg-active-selected-menu-item\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{icon && <Icon svg={icon} />}\n\t\t\t<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\t\t\t<SelectPrimitive.ItemIndicator className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4 text-accent-600\" />\n\t\t\t</SelectPrimitive.ItemIndicator>\n\t\t</SelectPrimitive.Item>\n\t),\n);\nItem.displayName = \"SelectItem\";\n\n/**\n * Used to visually separate items or groups of items in the select content.\n *\n * @see https://mantle.ngrok.com/components/select#selectseparator\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst SelectSeparatorComponent = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator ref={ref} className={cx(\"-mx-1 my-1 h-px w-auto\", className)} {...props} />\n));\nSelectSeparatorComponent.displayName = \"SelectSeparator\";\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/select\n *\n * @example\n * Composition:\n * ```\n * Select.Root\n * ├── Select.Trigger\n * │   └── Select.Value\n * └── Select.Content\n *     ├── Select.Group\n *     │   ├── Select.Label\n *     │   └── Select.Item\n *     └── Select.Separator\n * ```\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Select = {\n\t/**\n\t * Displays a list of options for the user to pick from—triggered by a button.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The component that pops out when the select is open as a portal adjacent to the trigger button.\n\t * It contains a scrolling viewport of the select items.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n\t * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectgroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * An option within a select menu. Similar to an html `<option>` element.\n\t * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.\n\t * Displays the children as the option's text.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * Used to render the label of a group. It won't be focusable using arrow keys.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectlabel\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tLabel,\n\t/**\n\t * Used to visually separate items or groups of items in the select content.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectseparator\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tSeparator: SelectSeparatorComponent,\n\t/**\n\t * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selecttrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#selectvalue\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tValue,\n} as const;\n\nexport {\n\t//,\n\tSelect,\n};\n"],"mappings":"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"}

package/dist/separator-Yk9hMn8E.js

@@ -1,2 +0,0 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./slot-D_ZUrdEW.js";import{createContext as n,forwardRef as r,useContext as i}from"react";import{jsx as a}from"react/jsx-runtime";const o=[`horizontal`,`vertical`],s=n({}),c=({className:n,children:r,asChild:i,...o})=>{let c=i?t:`div`;return a(s.Provider,{value:{orientation:`horizontal`},children:a(c,{"data-horizontal-separator-group":!0,className:e(`group flex items-center gap-2 [&_*:not([data-separator])]:shrink-0`,n),...o,children:r})})};c.displayName=`HorizontalSeparatorGroup`;const l=r(({asChild:n=!1,children:r,className:o,orientation:c,semantic:l=!1,...d},f)=>{let p=n?t:`div`,m=i(s).orientation??(u(c)?c:`horizontal`),h=l?{"aria-orientation":m===`vertical`?m:void 0,role:`separator`}:{role:`none`};return a(p,{className:e(`separator`,`dark-high-contrast:bg-black high-contrast:bg-black bg-gray-500/20 dark:bg-gray-600/20`,m===`horizontal`?`h-px w-full group-data-horizontal-separator-group:flex-1`:`h-full w-px`,o),"data-orientation":m,"data-separator":!0,...h,ref:f,...n?{children:r}:{},...d})});l.displayName=`Separator`;function u(e){return typeof e==`string`&&o.includes(e)}export{l as n,c as t};
-//# sourceMappingURL=separator-Yk9hMn8E.js.map

package/dist/separator-Yk9hMn8E.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"separator-Yk9hMn8E.js","names":[],"sources":["../src/components/separator/separator.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef, HTMLAttributes } from \"react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst orientations = [\"horizontal\", \"vertical\"] as const;\ntype Orientation = (typeof orientations)[number];\n\ntype SeparatorGroupContextShape = {\n\torientation?: Orientation;\n};\n\nconst SeparatorGroupContext = createContext<SeparatorGroupContextShape>({});\n\n/**\n * A container to layout a group of horizontal separators and other children.\n * Overrides all children `Separator`s to be `orientation=\"horizontal\"`.\n *\n * @see https://mantle.ngrok.com/components/separator\n *\n * @example\n * ```tsx\n * <HorizontalSeparatorGroup>\n *   <Separator />\n *   <h3>ngrok mantle</h3>\n *   <Separator />\n * </HorizontalSeparatorGroup>\n *\n * <HorizontalSeparatorGroup>\n *   <h3>ngrok mantle</h3>\n *   <Separator />\n * </HorizontalSeparatorGroup>\n *\n * <HorizontalSeparatorGroup>\n *   <Separator />\n *   <h3>ngrok mantle</h3>\n * </HorizontalSeparatorGroup>\n * ```\n */\nconst HorizontalSeparatorGroup = ({\n\tclassName,\n\tchildren,\n\tasChild,\n\t...props\n}: HTMLAttributes<HTMLDivElement> & WithAsChild) => {\n\tconst Comp = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<SeparatorGroupContext.Provider value={{ orientation: \"horizontal\" }}>\n\t\t\t<Comp\n\t\t\t\tdata-horizontal-separator-group\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group flex items-center gap-2 [&_*:not([data-separator])]:shrink-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Comp>\n\t\t</SeparatorGroupContext.Provider>\n\t);\n};\nHorizontalSeparatorGroup.displayName = \"HorizontalSeparatorGroup\";\n\ntype SeparatorProps = ComponentProps<\"div\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * Either `horizontal` or `vertical`.\n\t\t *\n\t\t * @default \"horizontal\"\n\t\t */\n\t\torientation?: Orientation;\n\t\t/**\n\t\t * If `true`, the separator will be rendered with all accessibility-related attributes and role=\"separator\".\n\t\t * If `false`, the separator is purely decorative and all accessibility-related attributes\n\t\t * are updated so that that the rendered element is removed from the accessibility tree.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tsemantic?: boolean;\n\t};\n\n/**\n * Visually or semantically separates content.\n *\n * @see https://mantle.ngrok.com/components/separator\n *\n * @example\n * ```tsx\n * <Separator className=\"my-4\" />\n *\n * <Separator className=\"my-4\" semantic />\n *\n * <div className=\"flex h-5 items-center gap-4 text-sm\">\n *   Blog\n *   <Separator orientation=\"vertical\" />\n *   Docs\n *   <Separator orientation=\"vertical\" />\n *   Source\n * </div>\n * ```\n */\nconst Separator = forwardRef<ComponentRef<\"div\">, SeparatorProps>(\n\t(\n\t\t{\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\torientation: propOrientation,\n\t\t\tsemantic = false,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\tconst ctx = useContext(SeparatorGroupContext);\n\t\t// Prefer the orientation from the context if it's set, else fallback to the prop and then to \"horizontal\".\n\t\tconst orientation =\n\t\t\tctx.orientation ?? (isOrientation(propOrientation) ? propOrientation : \"horizontal\");\n\t\t// `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical\n\t\tconst ariaOrientation = orientation === \"vertical\" ? orientation : undefined;\n\t\tconst semanticProps = semantic\n\t\t\t? { \"aria-orientation\": ariaOrientation, role: \"separator\" }\n\t\t\t: { role: \"none\" };\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"separator\",\n\t\t\t\t\t\"dark-high-contrast:bg-black high-contrast:bg-black bg-gray-500/20 dark:bg-gray-600/20\",\n\t\t\t\t\torientation === \"horizontal\"\n\t\t\t\t\t\t? \"h-px w-full group-data-horizontal-separator-group:flex-1\"\n\t\t\t\t\t\t: \"h-full w-px\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-orientation={orientation}\n\t\t\t\tdata-separator\n\t\t\t\t{...semanticProps}\n\t\t\t\tref={ref}\n\t\t\t\t{...(asChild ? { children } : {})} // only pass children if asChild is true\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nSeparator.displayName = \"Separator\";\n\nexport {\n\t//,\n\tHorizontalSeparatorGroup,\n\tSeparator,\n};\n\nfunction isOrientation(value: unknown): value is Orientation {\n\treturn typeof value === \"string\" && orientations.includes(value as Orientation);\n}\n"],"mappings":"qLAMA,MAAM,EAAe,CAAC,aAAc,WAAW,CAOzC,EAAwB,EAA0C,EAAE,CAAC,CA2BrE,GAA4B,CACjC,YACA,WACA,UACA,GAAG,KACgD,CACnD,IAAM,EAAO,EAAU,EAAO,MAE9B,OACC,EAAC,EAAsB,SAAvB,CAAgC,MAAO,CAAE,YAAa,aAAc,UACnE,EAAC,EAAD,CACC,kCAAA,GACA,UAAW,EACV,qEACA,EACA,CACD,GAAI,EAEH,WACK,CAAA,CACyB,CAAA,EAGnC,EAAyB,YAAc,2BAwCvC,MAAM,EAAY,GAEhB,CACC,UAAU,GACV,WACA,YACA,YAAa,EACb,WAAW,GACX,GAAG,GAEJ,IACI,CACJ,IAAM,EAAY,EAAU,EAAO,MAG7B,EAFM,EAAW,EAAsB,CAGxC,cAAgB,EAAc,EAAgB,CAAG,EAAkB,cAGlE,EAAgB,EACnB,CAAE,mBAFmB,IAAgB,WAAa,EAAc,IAAA,GAEzB,KAAM,YAAa,CAC1D,CAAE,KAAM,OAAQ,CAEnB,OACC,EAAC,EAAD,CACC,UAAW,EACV,YACA,wFACA,IAAgB,aACb,2DACA,cACH,EACA,CACD,mBAAkB,EAClB,iBAAA,GACA,GAAI,EACC,MACL,GAAK,EAAU,CAAE,WAAU,CAAG,EAAE,CAChC,GAAI,EACH,CAAA,EAGJ,CACD,EAAU,YAAc,YAQxB,SAAS,EAAc,EAAsC,CAC5D,OAAO,OAAO,GAAU,UAAY,EAAa,SAAS,EAAqB"}

package/dist/table-BMGcRJlk.js

@@ -1,2 +0,0 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./compose-refs-DFIaEnQH.js";import{forwardRef as n,useLayoutEffect as r,useMemo as i,useRef as a,useState as o}from"react";import{jsx as s}from"react/jsx-runtime";const c=n(({children:n,className:r,...i},a)=>{let o=v();return s(`div`,{className:e(`group/table relative w-full overflow-hidden rounded-lg border border-card bg-white dark:bg-gray-100`,r),"data-sticky-active":o.state.hasOverflow&&!o.state.scrolledToEnd||void 0,"data-x-overflow":o.state.hasOverflow,"data-x-scroll-end":o.state.hasOverflow&&o.state.scrolledToEnd,...i,children:s(`div`,{className:e(`scrollbar scroll-fade-x overflow-x-auto overflow-y-clip overscroll-x-none`,`has-data-mantle-table-sticky-right:[--_fade-right:black]`),"data-scroll-left":o.state.hasOverflow&&!o.state.scrolledToStart||void 0,"data-scroll-right":o.state.hasOverflow&&!o.state.scrolledToEnd||void 0,ref:t(o.ref,a),children:n})})});c.displayName=`TableRoot`;const l=n(({children:t,className:n,...r},i)=>s(`table`,{ref:i,className:e(`table-auto border-separate border-spacing-0 caption-bottom w-full min-w-full text-left`,n),...r,children:t}));l.displayName=`TableElement`;const u=n(({children:t,className:n,...r},i)=>s(`thead`,{ref:i,className:e(`[&>tr:last-child>*]:border-b [&>tr:last-child>*]:border-card-muted`,`[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted`,`text-muted bg-base`,`[&>tr]:bg-base`,n),...r,children:t}));u.displayName=`TableHead`;const d=n(({children:t,className:n,...r},i)=>s(`tbody`,{className:e(`[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted`,`text-body`,`[&>tr]:bg-card [&>tr]:not-only:hover:bg-card-hover`,n),ref:i,...r,children:t}));d.displayName=`TableBody`;const f=n(({children:t,className:n,...r},i)=>s(`tfoot`,{ref:i,className:e(`font-medium text-body`,`[&>tr:first-child>*]:border-t [&>tr:first-child>*]:border-card-muted`,`[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted`,`[&>tr]:bg-gray-50/50 [&>tr]:hover:bg-card-hover`,n),...r,children:t}));f.displayName=`TableFoot`;const p=n(({children:t,className:n,...r},i)=>s(`tr`,{ref:i,className:e(n),...r,children:t}));p.displayName=`TableRow`;const m=n(({children:t,className:n,...r},i)=>s(`th`,{ref:i,className:e(`h-11 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0`,n),...r,children:t}));m.displayName=`TableHeader`;const h=n(({children:t,className:n,...r},i)=>s(`td`,{ref:i,className:e(`p-3 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-mono`,n),...r,children:t}));h.displayName=`TableCell`;const g=n(({children:t,className:n,...r},i)=>s(`caption`,{ref:i,className:e(`py-4 text-sm text-gray-500`,`border-t border-card-muted`,n),...r,children:t}));g.displayName=`TableCaption`;const _={Body:d,Caption:g,Cell:h,Element:l,Foot:f,Head:u,Header:m,Root:c,Row:p};function v(){let e=a(null),[t,n]=o({hasOverflow:!1,scrolledToStart:!0,scrolledToEnd:!1});return r(()=>{let t=e.current;if(!t)return;let r=0,i=()=>{let e=t.scrollWidth>t.clientWidth,r=t.scrollLeft<1,i=Math.abs(t.scrollWidth-t.scrollLeft-t.clientWidth)<1;n(t=>t.hasOverflow!==e||t.scrolledToStart!==r||t.scrolledToEnd!==i?{hasOverflow:e,scrolledToStart:r,scrolledToEnd:i}:t)},a=()=>{r===0&&(r=requestAnimationFrame(()=>{r=0,i()}))},o=new ResizeObserver(a);o.observe(t);let s=new MutationObserver(a);return s.observe(t,{childList:!0,subtree:!0}),t.addEventListener(`scroll`,a,{passive:!0}),i(),()=>{cancelAnimationFrame(r),o.disconnect(),s.disconnect(),t.removeEventListener(`scroll`,a)}},[]),i(()=>({ref:e,state:t}),[t])}export{_ as t};
-//# sourceMappingURL=table-BMGcRJlk.js.map

package/dist/table-BMGcRJlk.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"table-BMGcRJlk.js","names":[],"sources":["../src/components/table/table.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * The `<Table.Root>` is the root container element for all `Table`s.\n * It provides styling and additional functionality, such as horizontal overflow\n * detection.\n *\n * Must be used as the parent of a `<Table.Element>`.\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tableroot\n */\nconst Root = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ children, className, ...props }, ref) => {\n\t\tconst horizontalOverflow = useHorizontalOverflowObserver<ComponentRef<\"div\">>();\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/table relative w-full overflow-hidden rounded-lg border border-card bg-white dark:bg-gray-100\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-sticky-active={\n\t\t\t\t\t(horizontalOverflow.state.hasOverflow && !horizontalOverflow.state.scrolledToEnd) ||\n\t\t\t\t\tundefined\n\t\t\t\t}\n\t\t\t\tdata-x-overflow={horizontalOverflow.state.hasOverflow}\n\t\t\t\tdata-x-scroll-end={\n\t\t\t\t\thorizontalOverflow.state.hasOverflow && horizontalOverflow.state.scrolledToEnd\n\t\t\t\t}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"scrollbar scroll-fade-x overflow-x-auto overflow-y-clip overscroll-x-none\",\n\t\t\t\t\t\t// When the table contains a sticky right column (e.g., DataTable.ActionCell\n\t\t\t\t\t\t// / DataTable.ActionHeader), suppress the container's right-side fade so the\n\t\t\t\t\t\t// pinned column stays fully opaque. The pinned column provides its own\n\t\t\t\t\t\t// left-side gradient for the scroll-under effect.\n\t\t\t\t\t\t\"has-data-mantle-table-sticky-right:[--_fade-right:black]\",\n\t\t\t\t\t)}\n\t\t\t\t\tdata-scroll-left={\n\t\t\t\t\t\t(horizontalOverflow.state.hasOverflow && !horizontalOverflow.state.scrolledToStart) ||\n\t\t\t\t\t\tundefined\n\t\t\t\t\t}\n\t\t\t\t\tdata-scroll-right={\n\t\t\t\t\t\t(horizontalOverflow.state.hasOverflow && !horizontalOverflow.state.scrolledToEnd) ||\n\t\t\t\t\t\tundefined\n\t\t\t\t\t}\n\t\t\t\t\tref={composeRefs(horizontalOverflow.ref, ref)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t},\n);\nRoot.displayName = \"TableRoot\";\n\n/**\n * The `<Table.Element>` is a structured way to display data in rows and columns. The API\n * matches the HTML `<table>` element 1:1.\n *\n * Permitted content in this order:\n * 1. optional: `<Table.Caption>`\n * 2. 0 or more: `<colgroup>` elements\n * 3. optional: `<Table.Head>`\n * 4. either one of the following:\n *    - 0 or more: `<Table.Body>`\n *    - 0 or more: `<Table.Row>`\n * 5. optional: `<Table.Foot>`\n *\n * @description\n * Establishes a table formatting context. Elements inside the `<Table.Element>`\n * generate rectangular boxes. Each box occupies a number of table cells\n * according to the following rules:\n *   1. The row boxes fill the table in the source code order from top to bottom.\n *      Each row box occupies one row of cells.\n *   2. A row group box occupies one or more row boxes.\n *   3. Column boxes are placed next to each other in source code order.\n *      Depending on the value of the dir attribute, the columns are laid in\n *      left-to-right or right-to-left direction. A column box occupies one or\n *      more columns of table cells.\n *   4. A column group box occupies one or more column boxes.\n *   5. A cell box may span over multiple rows and columns. User agents trim\n *      cells to fit in the available number of rows and columns.\n * Table cells do have padding. Boxes that make up a table do not have margins.\n * For more in depth information, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table).\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tableelement\n */\nconst Element = forwardRef<ComponentRef<\"table\">, ComponentProps<\"table\">>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<table\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"table-auto border-separate border-spacing-0 caption-bottom w-full min-w-full text-left\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</table>\n\t\t);\n\t},\n);\nElement.displayName = \"TableElement\";\n\n/**\n * The `<Table.Head>` is a container for the table's column headers.\n * Encapsulates a set of `<Table.Row>`s, indicating that they comprise the head\n * of a table with information about the table's columns. This is usually in the\n * form of column headers (`<Table.Header>`).\n *\n * Must be used as a child of a `<Table.Element>`. It should only come after any\n * `<Table.Caption>` or `<colgroup>` and before any `<Table.Body>` or `<Table.Foot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tableheader\n */\nconst Head = forwardRef<ComponentRef<\"thead\">, ComponentProps<\"thead\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<thead\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t// In border-separate, <tr>/<thead> borders don't render, so apply\n\t\t\t\t// dividers directly to cells.\n\t\t\t\t\"[&>tr:last-child>*]:border-b [&>tr:last-child>*]:border-card-muted\",\n\t\t\t\t\"[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted\",\n\t\t\t\t\"text-muted bg-base\",\n\t\t\t\t\"[&>tr]:bg-base\", // Row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</thead>\n\t),\n);\nHead.displayName = \"TableHead\";\n\n/**\n * The `<Table.Body>` encapsulates a set of `<Table.Row>`s, indicating that they\n * comprise the body of a table's (main) data.\n *\n * Must be used as a child of a `<Table.Element>` and only come after any\n * `<Table.Caption>`, `<colgroup>`, or `<Table.Head>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablebody\n */\nconst Body = forwardRef<ComponentRef<\"tbody\">, ComponentProps<\"tbody\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tbody\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t// In border-separate, <tr>/<tbody> borders don't render, so apply\n\t\t\t\t// dividers directly to cells.\n\t\t\t\t\"[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted\",\n\t\t\t\t\"text-body\",\n\t\t\t\t\"[&>tr]:bg-card [&>tr]:not-only:hover:bg-card-hover\", // Body row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tbody>\n\t),\n);\nBody.displayName = \"TableBody\";\n\n/**\n * The `<Table.Foot>` encapsulates a set of `<Table.Row>`s, indicating that they\n * comprise the foot of a table with information about the table's columns. This\n * is usually a summary of the columns, e.g., a sum of the given numbers in a\n * column.\n *\n * Must be used as a child of a `<Table.Element>` and only come after any\n * `<Table.Caption>`, `<colgroup>`, `<Table.Head>`, and `<Table.Body>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>` elements\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablefoot\n */\nconst Foot = forwardRef<ComponentRef<\"tfoot\">, ComponentProps<\"tfoot\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tfoot\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t\"font-medium text-body\",\n\t\t\t\t// In border-separate, <tr>/<tfoot> borders don't render, so apply\n\t\t\t\t// dividers directly to cells.\n\t\t\t\t\"[&>tr:first-child>*]:border-t [&>tr:first-child>*]:border-card-muted\",\n\t\t\t\t\"[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted\",\n\t\t\t\t\"[&>tr]:bg-gray-50/50 [&>tr]:hover:bg-card-hover\", // Row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tfoot>\n\t),\n);\nFoot.displayName = \"TableFoot\";\n\n/**\n * The `<Table.Row>` defines a row of cells in a table. The row's cells can then\n * be established using a mix of `<Table.Cell>` and `<Table.Header>` components.\n *\n * Must be used as a child of a `<Table.Head>`, `<Table.Body>`, or `<Table.Foot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Header>` or `<Table.Cell>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablerow\n */\nconst Row = forwardRef<ComponentRef<\"tr\">, ComponentProps<\"tr\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tr\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t// This could be removed, or simplified\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tr>\n\t),\n);\nRow.displayName = \"TableRow\";\n\n/**\n * The `<Table.Header>` defines a cell as the header of a group of table cells\n * and may be used as a child of a `<Table.Row>`. The exact nature of this group\n * is defined by the scope and headers attributes.\n *\n * Must be used as a child of a `<Table.Row>`.\n *\n * Permitted Content:\n * 1. Flow content, but with no header, footer, sectioning content, or heading\n * content descendants.\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tableheader\n */\nconst Header = forwardRef<ComponentRef<\"th\">, ComponentProps<\"th\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<th\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"h-11 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</th>\n\t),\n);\nHeader.displayName = \"TableHeader\";\n\n/**\n * The `<Table.Cell>` defines a cell of a table that contains data and may be\n * used as a child of a `<Table.Row>`.\n *\n * Must be used as a child of a `<Table.Row>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablecell\n */\nconst Cell = forwardRef<ComponentRef<\"td\">, ComponentProps<\"td\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<td\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"p-3 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-mono\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</td>\n\t),\n);\nCell.displayName = \"TableCell\";\n\n/**\n * The optional `<Table.Caption>` specifies the caption (or title) of a table,\n * providing the table an accessible description.\n *\n * If used, must be the first child of a `<Table.Element>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablecaption\n */\nconst Caption = forwardRef<ComponentRef<\"caption\">, ComponentProps<\"caption\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<caption\n\t\t\tref={ref}\n\t\t\tclassName={cx(\"py-4 text-sm text-gray-500\", \"border-t border-card-muted\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</caption>\n\t),\n);\nCaption.displayName = \"TableCaption\";\n\n/**\n * A structured way to display data in rows and columns. The API matches the\n * HTML table element 1:1.\n *\n * @see https://mantle.ngrok.com/components/table\n *\n * @example\n * Composition:\n * ```\n * Table.Root\n * └── Table.Element\n *     ├── Table.Caption\n *     ├── Table.Head\n *     │   └── Table.Row\n *     │       └── Table.Header\n *     ├── Table.Body\n *     │   └── Table.Row\n *     │       └── Table.Cell\n *     └── Table.Foot\n * ```\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n */\nconst Table = {\n\t/**\n\t * The body section of the table. Encapsulates a set of table rows comprising the body of a table's main data.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablebody\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * An optional caption that specifies the caption (or title) of a table, providing an accessible description.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablecaption\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tCaption,\n\t/**\n\t * A cell that contains data and may be used as a child of a table row.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablecell\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tCell,\n\t/**\n\t * A structured way to display data in rows and columns. The API matches the HTML table element 1:1.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tableelement\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tElement,\n\t/**\n\t * The foot section of a table. Encapsulates a set of table rows comprising the foot with summary information.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablefoot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tFoot,\n\t/**\n\t * The head section of a table. Contains the table's column headers information.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tableheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tHead,\n\t/**\n\t * A cell that defines the header of a group of table cells as a child of a table row.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tableheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The root container element for all tables. Provides styling and additional functionality like horizontal overflow detection.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tableroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Defines a row of cells in a table. Contains a mix of table cells and table headers.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablerow\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tRow,\n} as const;\n\nexport {\n\t//,\n\tTable,\n};\n\n/**\n * A custom hook that observes the horizontal overflow of an element and determines\n * if it has overflow and if it is scrolled to the end.\n *\n * @private\n */\nfunction useHorizontalOverflowObserver<T extends HTMLElement>() {\n\tconst ref = useRef<T | null>(null);\n\tconst [state, setState] = useState({\n\t\thasOverflow: false,\n\t\tscrolledToStart: true,\n\t\tscrolledToEnd: false,\n\t});\n\n\tuseLayoutEffect(() => {\n\t\tconst element = ref.current;\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet frameId = 0;\n\n\t\tconst checkState = () => {\n\t\t\tconst hasOverflow = element.scrollWidth > element.clientWidth;\n\t\t\tconst scrolledToStart = element.scrollLeft < 1;\n\t\t\tconst scrolledToEnd =\n\t\t\t\tMath.abs(element.scrollWidth - element.scrollLeft - element.clientWidth) < 1;\n\n\t\t\tsetState((previous) => {\n\t\t\t\tif (\n\t\t\t\t\tprevious.hasOverflow !== hasOverflow ||\n\t\t\t\t\tprevious.scrolledToStart !== scrolledToStart ||\n\t\t\t\t\tprevious.scrolledToEnd !== scrolledToEnd\n\t\t\t\t) {\n\t\t\t\t\treturn { hasOverflow, scrolledToStart, scrolledToEnd };\n\t\t\t\t}\n\t\t\t\treturn previous; // No state change\n\t\t\t});\n\t\t};\n\n\t\t// Coalesce rapid-fire events (scroll, mutation, resize) into a single\n\t\t// layout read per animation frame to avoid redundant work.\n\t\tconst scheduleCheck = () => {\n\t\t\tif (frameId === 0) {\n\t\t\t\tframeId = requestAnimationFrame(() => {\n\t\t\t\t\tframeId = 0;\n\t\t\t\t\tcheckState();\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tconst resizeObserver = new ResizeObserver(scheduleCheck);\n\t\tresizeObserver.observe(element);\n\n\t\tconst mutationObserver = new MutationObserver(scheduleCheck);\n\t\tmutationObserver.observe(element, { childList: true, subtree: true });\n\n\t\telement.addEventListener(\"scroll\", scheduleCheck, { passive: true });\n\n\t\tcheckState();\n\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(frameId);\n\t\t\tresizeObserver.disconnect();\n\t\t\tmutationObserver.disconnect();\n\t\t\telement.removeEventListener(\"scroll\", scheduleCheck);\n\t\t};\n\t}, []);\n\n\treturn useMemo(() => ({ ref, state }), [state]);\n}\n"],"mappings":"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"}

package/dist/toast-BhAyUXKL.js

@@ -1,2 +0,0 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-BMH0fD_b.js";import{t as n}from"./slot-D_ZUrdEW.js";import{s as r}from"./theme-provider-BFcnjeME.js";import{createContext as i,forwardRef as a,useContext as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{CheckCircleIcon as l}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as u}from"@phosphor-icons/react/Info";import{WarningIcon as d}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as f}from"@phosphor-icons/react/WarningDiamond";import*as p from"sonner";const m=({className:t,containerAriaLabel:n,dir:i,duration_ms:a=4e3,position:o=`top-center`,style:c})=>{let l=r();return s(p.Toaster,{className:e(`toaster overlay-prompt pointer-events-auto *:duration-200`,t),containerAriaLabel:n,dir:i,duration:a,gap:12,position:o??`top-center`,style:c,theme:l,toastOptions:{unstyled:!0}})};m.displayName=`Toaster`;const h=i(``);function g(e,t){let n=t?.duration_ms;return typeof n==`number`&&n<=0&&(n=1/0),p.toast.custom(t=>s(h.Provider,{value:t,children:e}),{duration:n,...t?.id?{id:t.id}:{},unstyled:!0})}const _=i({priority:`info`}),v=a(({asChild:t,children:r,className:i,priority:a,...o},l)=>{let u=t?n:`div`;return s(_.Provider,{value:{priority:a},children:c(u,{className:e(`relative flex items-start gap-2 text-sm font-sans`,`p-3 pl-3.75`,`bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg`,i),ref:l,...o,children:[s(T,{priority:a}),r]})})});v.displayName=`Toast`;const y=a(({className:n,svg:r,...i},a)=>{let c=o(_);switch(c.priority){case`danger`:return s(t,{className:e(`text-danger-600`,n),ref:a,svg:r??s(d,{weight:`fill`}),...i});case`warning`:return s(t,{className:e(`text-warning-600`,n),ref:a,svg:r??s(f,{weight:`fill`}),...i});case`success`:return s(t,{className:e(`text-success-600`,n),ref:a,svg:r??s(l,{weight:`fill`}),...i});case`info`:return s(t,{className:e(`text-accent-600`,n),ref:a,svg:s(u,{weight:`fill`}),...i});default:throw Error(`Unreachable Case: ${c.priority}`)}});y.displayName=`ToastIcon`;const b=a(({asChild:t,className:r,onClick:i,...a},c)=>{let l=o(h);return s(t?n:`button`,{className:e(`shrink-0`,`data-icon-button:-mr-0.5 data-icon-button:-mt-0.5 data-icon-button:rounded-xs`,r),onClick:e=>{i?.(e),!e.defaultPrevented&&p.toast.dismiss(l)},ref:c,...a})});b.displayName=`ToastAction`;const x=a(({asChild:t,className:r,...i},a)=>s(t?n:`p`,{className:e(`text-strong flex-1 text-sm font-body`,r),ref:a,...i}));x.displayName=`ToastMessage`;const S={Root:v,Action:b,Icon:y,Message:x};function C(e){e.target instanceof Element&&e.target.closest(`.overlay-prompt`)&&e.preventDefault()}const w={info:`bg-accent-600`,warning:`bg-warning-600`,success:`bg-success-600`,danger:`bg-danger-600`};function T({className:t,priority:n,...r}){return s(`div`,{"aria-hidden":!0,className:e(`z-1 absolute -inset-px right-auto w-1.5 rounded-l`,w[n],t),...r})}export{C as i,m as n,g as r,S as t};
-//# sourceMappingURL=toast-BhAyUXKL.js.map

package/dist/toast-BhAyUXKL.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"toast-BhAyUXKL.js","names":["IconComponent"],"sources":["../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentRef,\n\ttype ReactNode,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n} from \"react\";\nimport * as ToastPrimitive from \"sonner\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport type { WithStyleProps } from \"../../types/with-style-props.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon as IconComponent } from \"../icon/icon.js\";\nimport type { SvgOnlyProps } from \"../icon/svg-only.js\";\nimport { Slot } from \"../slot/index.js\";\nimport { useAppliedTheme } from \"../theme/theme-provider.js\";\n\ntype ToasterPrimitiveProps = ComponentProps<typeof ToastPrimitive.Toaster>;\ntype ToasterPrimitiveTheme = ToasterPrimitiveProps[\"theme\"];\n\ntype ToasterProps = WithStyleProps &\n\tPick<ToasterPrimitiveProps, \"containerAriaLabel\" | \"dir\" | \"position\"> & {\n\t\t/**\n\t\t * Time in milliseconds that should elapse before automatically dismissing toasts.\n\t\t * When set here, this will be the default duration for all toasts.\n\t\t * @default 4000\n\t\t */\n\t\tduration_ms?: number;\n\t};\n\n/**\n * A container for displaying all toasts.\n *\n * Only one `<Toaster />` should be rendered in an app a time, preferably at the\n * root level of the app.\n *\n * @see https://mantle.ngrok.com/components/toast#toaster\n *\n * @example\n * ```tsx\n * <Toaster\n *   position=\"top-right\"\n *   duration_ms={5000}\n * />\n * ```\n */\nconst Toaster = ({\n\t//,\n\tclassName,\n\tcontainerAriaLabel,\n\tdir,\n\tduration_ms = 4000,\n\tposition = \"top-center\",\n\tstyle,\n}: ToasterProps) => {\n\tconst theme = useAppliedTheme();\n\n\treturn (\n\t\t<ToastPrimitive.Toaster\n\t\t\tclassName={cx(\"toaster overlay-prompt pointer-events-auto *:duration-200\", className)}\n\t\t\tcontainerAriaLabel={containerAriaLabel}\n\t\t\tdir={dir}\n\t\t\tduration={duration_ms}\n\t\t\tgap={12}\n\t\t\tposition={position ?? \"top-center\"}\n\t\t\tstyle={style}\n\t\t\ttheme={theme as ToasterPrimitiveTheme} // we have additional themes that are not in the sonner types, so we need to cast for now\n\t\t\ttoastOptions={{\n\t\t\t\tunstyled: true,\n\t\t\t}}\n\t\t/>\n\t);\n};\nToaster.displayName = \"Toaster\";\n\nconst ToastIdContext = createContext<string | number>(\"\");\n\ntype MakeToastOptions = {\n\t/**\n\t * Time in milliseconds that should elapse before automatically closing the toast.\n\t * Will default to the `<Toaster />`'s `duration_ms` if not provided.\n\t *\n\t * You can keep the toast open until manually dismissed by passing a value <= 0 or Number.POSITIVE_INFINITY\n\t */\n\tduration_ms?: number;\n\t/**\n\t * An optional custom ID for this toast. If not given, a unique ID is provided for you.\n\t */\n\tid?: string;\n};\n\n/**\n * Create a toast. Provide a `<Toast.Root>` component as the `children` to be rendered\n * inside the `<Toaster />` section.\n *\n * @see https://mantle.ngrok.com/components/toast#maketoast\n *\n * @example\n * ```tsx\n * // Basic toast with auto-dismiss (default 4000ms, inherits from `<Toaster>`)\n * makeToast(\n *   <Toast.Root priority=\"success\">\n *     <Toast.Icon />\n *     <Toast.Message>Operation completed successfully!</Toast.Message>\n *     <Toast.Action>Dismiss</Toast.Action>\n *   </Toast.Root>\n * );\n *\n * // Toast that stays open until manually dismissed\n * makeToast(\n *   <Toast.Root priority=\"warning\">\n *     <Toast.Icon />\n *     <Toast.Message>Action required</Toast.Message>\n *     <Toast.Action>Dismiss</Toast.Action>\n *   </Toast.Root>,\n *   { duration_ms: Number.POSITIVE_INFINITY }\n * );\n * ```\n */\nfunction makeToast(children: ReactNode, options?: MakeToastOptions) {\n\tlet duration = options?.duration_ms;\n\tif (typeof duration === \"number\" && duration <= 0) {\n\t\tduration = Number.POSITIVE_INFINITY;\n\t}\n\n\treturn ToastPrimitive.toast.custom(\n\t\t(toastId) => <ToastIdContext.Provider value={toastId}>{children}</ToastIdContext.Provider>,\n\t\t{\n\t\t\t//\n\t\t\tduration,\n\t\t\t// If a custom ID is provided, use it, else use the toastId provided by the sonner library\n\t\t\t// don't set an ID to `undefined` as it breaks the sonner library\n\t\t\t...(options?.id ? { id: options.id } : {}),\n\t\t\tunstyled: true,\n\t\t},\n\t);\n}\n\nconst priorities = [\n\t//,\n\t\"danger\",\n\t\"info\",\n\t\"success\",\n\t\"warning\",\n] as const;\ntype Priority = (typeof priorities)[number];\n\ntype ToastState = {\n\tpriority: Priority;\n};\n\nconst ToastStateContext = createContext<ToastState>({\n\tpriority: \"info\",\n});\n\ntype ToastProps = ComponentProps<\"div\"> &\n\tWithAsChild & {\n\t\tpriority: Priority;\n\t};\n\n/**\n * A succinct message with a priority that is displayed temporarily.\n * Toasts are used to provide feedback to the user without interrupting their workflow.\n *\n * @see https://mantle.ngrok.com/components/toast#toastroot\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"success\">\n *   <Toast.Icon />\n *   <Toast.Message>Changes saved successfully!</Toast.Message>\n *   <Toast.Action>Undo</Toast.Action>\n * </Toast.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, ToastProps>(\n\t({ asChild, children, className, priority, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<ToastStateContext.Provider value={{ priority }}>\n\t\t\t\t<Component\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"relative flex items-start gap-2 text-sm font-sans\",\n\t\t\t\t\t\t\"p-3 pl-3.75\",\n\t\t\t\t\t\t\"bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg\",\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Do not apply overflow-hidden because we want the priority bar accent\n\t\t\t\t\t\t * to overlap the toast border, else the border flows over the\n\t\t\t\t\t\t * priority bar.\n\t\t\t\t\t\t */\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t<PriorityBarAccent priority={priority} />\n\t\t\t\t\t{children}\n\t\t\t\t</Component>\n\t\t\t</ToastStateContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"Toast\";\n\ntype ToastIconProps = Partial<SvgOnlyProps>;\n\n/**\n * An icon that visually represents the priority of the toast.\n * If you do not provide an icon, the default icon and color for the priority is used.\n *\n * @see https://mantle.ngrok.com/components/toast#toasticon\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"warning\">\n *   <Toast.Icon />\n *   <Toast.Message>Warning message</Toast.Message>\n * </Toast.Root>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, ToastIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useContext(ToastStateContext);\n\n\t\tswitch (ctx.priority) {\n\t\t\tcase \"danger\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\tclassName={cx(\"text-danger-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <WarningIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"warning\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\tclassName={cx(\"text-warning-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <WarningDiamondIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"success\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\tclassName={cx(\"text-success-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <CheckCircleIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"info\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\t//\n\t\t\t\t\t\tclassName={cx(\"text-accent-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={<InfoIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tdefault:\n\t\t\t\tthrow new Error(`Unreachable Case: ${ctx.priority}`);\n\t\t}\n\t},\n);\nIcon.displayName = \"ToastIcon\";\n\ntype ToastActionProps = ComponentProps<\"button\"> & WithAsChild;\n\n/**\n * A button that dismisses the toast when clicked.\n * You can prevent the toast from being dismissed `onClick` by calling `event.preventDefault()`\n *\n * @see https://mantle.ngrok.com/components/toast#toastaction\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"info\">\n *   <Toast.Icon />\n *   <Toast.Message>File uploaded successfully</Toast.Message>\n *   <Toast.Action>View File</Toast.Action>\n * </Toast.Root>\n * ```\n */\nconst Action = forwardRef<ComponentRef<\"button\">, ToastActionProps>(\n\t({ asChild, className, onClick, ...props }, ref) => {\n\t\tconst ctx = useContext(ToastIdContext);\n\n\t\tconst Component = asChild ? Slot : \"button\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\n\t\t\t\t\t//,\n\t\t\t\t\t\"shrink-0\",\n\t\t\t\t\t// 👇 wiggle the bits so that icon buttons toast actions are aligned with the toast icon\n\t\t\t\t\t\"data-icon-button:-mr-0.5 data-icon-button:-mt-0.5 data-icon-button:rounded-xs\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tToastPrimitive.toast.dismiss(ctx);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAction.displayName = \"ToastAction\";\n\ntype ToastMessageProps = ComponentProps<\"p\"> & WithAsChild;\n\n/**\n * The message content of the toast.\n *\n * @see https://mantle.ngrok.com/components/toast#toastmessage\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"success\">\n *   <Toast.Icon />\n *   <Toast.Message>Your changes have been saved</Toast.Message>\n * </Toast.Root>\n * ```\n */\nconst Message = forwardRef<ComponentRef<\"p\">, ToastMessageProps>(\n\t({ asChild, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"p\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\t//\n\t\t\t\tclassName={cx(\"text-strong flex-1 text-sm font-body\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nMessage.displayName = \"ToastMessage\";\n\n/**\n * A succinct message that is displayed temporarily. Toasts are used to provide\n * feedback to the user without interrupting their workflow.\n *\n * @see https://mantle.ngrok.com/components/toast\n *\n * @example\n * Composition:\n * ```\n * Toast.Root\n * ├── Toast.Icon\n * ├── Toast.Message\n * └── Toast.Action\n * ```\n *\n * @example\n * ```tsx\n * makeToast(\n *   <Toast.Root priority=\"success\">\n *     <Toast.Icon />\n *     <Toast.Message>Operation completed successfully!</Toast.Message>\n *     <Toast.Action>Dismiss</Toast.Action>\n *   </Toast.Root>\n * );\n * ```\n */\nconst Toast = {\n\t/**\n\t * A succinct message with a priority that is displayed temporarily.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#toastroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"success\">\n\t *   <Toast.Icon />\n\t *   <Toast.Message>Changes saved successfully!</Toast.Message>\n\t *   <Toast.Action>Undo</Toast.Action>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A button that dismisses the toast when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#toastaction\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"info\">\n\t *   <Toast.Icon />\n\t *   <Toast.Message>File uploaded successfully</Toast.Message>\n\t *   <Toast.Action>View File</Toast.Action>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tAction,\n\t/**\n\t * An icon that visually represents the priority of the toast.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#toasticon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"warning\">\n\t *   <Toast.Icon />\n\t *   <Toast.Message>Warning message</Toast.Message>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The message content of the toast.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#toastmessage\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"success\">\n\t *   <Toast.Icon />\n\t *   <Toast.Message>Your changes have been saved</Toast.Message>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tMessage,\n} as const;\n\nexport {\n\t//,\n\tmakeToast,\n\tToast,\n\tToaster,\n};\n\nexport type {\n\t//,\n\tPriority,\n};\n\n/**\n * @private\n *\n * Allows any mantle floating prompt (e.g. toasts and notifications) to be interacted with\n * even when a modaled view (e.g. dialog, sheet, etc) is open and a focus trap is active.\n *\n * Without this, interacting with the prompt would close the modaled view.\n *\n * @example\n * ```tsx\n * <Dialog.Root onInteractOutside={preventCloseOnPromptInteraction}>\n *   <Dialog.Content>\n *     <p>Dialog content</p>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nexport function preventCloseOnPromptInteraction(\n\tevent: CustomEvent | PointerEvent | MouseEvent | TouchEvent | FocusEvent,\n) {\n\tif (!(event.target instanceof Element)) {\n\t\treturn;\n\t}\n\n\tif (event.target.closest(\".overlay-prompt\")) {\n\t\tevent.preventDefault();\n\t}\n}\n\nconst priorityBackgroundColor = {\n\tinfo: \"bg-accent-600\",\n\twarning: \"bg-warning-600\",\n\tsuccess: \"bg-success-600\",\n\tdanger: \"bg-danger-600\",\n} as const satisfies Record<Priority, string>;\n\ntype PriorityBarAccentProps = Omit<ComponentProps<\"div\">, \"children\"> & {\n\tpriority: Priority;\n};\n\n/**\n * @private\n *\n * A colored bar that visually represents the priority of the toast.\n */\nfunction PriorityBarAccent({ className, priority, ...props }: PriorityBarAccentProps) {\n\treturn (\n\t\t<div\n\t\t\taria-hidden\n\t\t\tclassName={cx(\n\t\t\t\t//\n\t\t\t\t\"z-1 absolute -inset-px right-auto w-1.5 rounded-l\",\n\t\t\t\tpriorityBackgroundColor[priority],\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":"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"}

package/dist/types-zKzi66a6.d.ts

@@ -1,9 +0,0 @@
-import { ComponentProps } from "react";
-
-//#region src/components/icon/types.d.ts
-type SvgAttributes = ComponentProps<"svg"> & {
-  focusable?: "true" | "false";
-};
-//#endregion
-export { SvgAttributes as t };
-//# sourceMappingURL=types-zKzi66a6.d.ts.map

package/dist/use-copy-to-clipboard-Ds9MsSNU.js

@@ -1,2 +0,0 @@
-import{useCallback as e,useState as t}from"react";function n(){let[n,i]=t(``);return[n,e(async e=>{try{if(typeof window.navigator?.clipboard?.writeText==`function`)await navigator.clipboard.writeText(e);else throw Error(`writeText not supported`)}catch(t){try{r(e)}catch{throw t}}i(e)},[])]}function r(e){let t=document.createElement(`textarea`);t.value=e,document.body.appendChild(t);try{t.select(),document.execCommand(`copy`)}finally{document.body.removeChild(t)}}export{n as t};
-//# sourceMappingURL=use-copy-to-clipboard-Ds9MsSNU.js.map

package/dist/use-copy-to-clipboard-Ds9MsSNU.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-copy-to-clipboard-Ds9MsSNU.js","names":[],"sources":["../src/hooks/use-copy-to-clipboard.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\n/**\n * A hook that allows you to copy a string to the clipboard.\n *\n * The returned `copyToClipboard` function is async — `await` it to know\n * whether the write succeeded. It throws when both the Clipboard API and\n * the `execCommand` polyfill fail.\n *\n * Inspired by: https://usehooks.com/usecopytoclipboard\n */\nfunction useCopyToClipboard() {\n\tconst [state, setState] = useState<string>(\"\");\n\n\tconst copyToClipboard = useCallback(async (value: string) => {\n\t\ttry {\n\t\t\tif (typeof window.navigator?.clipboard?.writeText === \"function\") {\n\t\t\t\tawait navigator.clipboard.writeText(value);\n\t\t\t} else {\n\t\t\t\tthrow new Error(\"writeText not supported\");\n\t\t\t}\n\t\t} catch (clipboardError) {\n\t\t\ttry {\n\t\t\t\tcopyToClipboardPolyfill(value);\n\t\t\t} catch {\n\t\t\t\tthrow clipboardError; // both approaches failed; propagate\n\t\t\t}\n\t\t}\n\t\tsetState(value);\n\t}, []);\n\n\treturn [state, copyToClipboard] as const;\n}\n\nexport { useCopyToClipboard };\n\n/**\n * A fallback copy to clipboard function for older browsers.\n */\nfunction copyToClipboardPolyfill(text: string) {\n\tconst tempTextArea = document.createElement(\"textarea\");\n\ttempTextArea.value = text;\n\tdocument.body.appendChild(tempTextArea);\n\ttry {\n\t\ttempTextArea.select();\n\t\tdocument.execCommand(\"copy\");\n\t} finally {\n\t\tdocument.body.removeChild(tempTextArea);\n\t}\n}\n"],"mappings":"kDAWA,SAAS,GAAqB,CAC7B,GAAM,CAAC,EAAO,GAAY,EAAiB,GAAG,CAmB9C,MAAO,CAAC,EAjBgB,EAAY,KAAO,IAAkB,CAC5D,GAAI,CACH,GAAI,OAAO,OAAO,WAAW,WAAW,WAAc,WACrD,MAAM,UAAU,UAAU,UAAU,EAAM,MAE1C,MAAU,MAAM,0BAA0B,OAEnC,EAAgB,CACxB,GAAI,CACH,EAAwB,EAAM,MACvB,CACP,MAAM,GAGR,EAAS,EAAM,EACb,EAAE,CAAC,CAEyB,CAQhC,SAAS,EAAwB,EAAc,CAC9C,IAAM,EAAe,SAAS,cAAc,WAAW,CACvD,EAAa,MAAQ,EACrB,SAAS,KAAK,YAAY,EAAa,CACvC,GAAI,CACH,EAAa,QAAQ,CACrB,SAAS,YAAY,OAAO,QACnB,CACT,SAAS,KAAK,YAAY,EAAa"}