@ngrok/mantle 0.70.1 → 0.71.0

package/dist/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","names":["SheetPrimitive.Root","SheetPrimitive.Trigger","SheetPrimitive.Close","SheetPrimitive.Portal","SheetPrimitive.Overlay","SheetPrimitive.Content","SheetPrimitive.Title","SheetPrimitive.Description"],"sources":["../src/components/sheet/sheet.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport type { ComponentPropsWithoutRef, ComponentRef, HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport * as SheetPrimitive from \"../dialog/primitive.js\";\n\n/**\n * The root component for a `Sheet`. Should compose the `Sheet.Trigger` and `Sheet.Content`.\n * Acts as a stateful provider for the Sheet's open/closed state.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetroot\n *\n * @example\n * ```tsx\n * // Triggering a stateful sheet\n * <Sheet.Root>\n *   <Sheet.Trigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">\n *       Open Sheet\n *     </Button>\n *   </Sheet.Trigger>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Root = SheetPrimitive.Root;\nRoot.displayName = \"Sheet\";\n\n/**\n * The button trigger for a `Sheet`. Should be rendered as a child of the `Sheet` component.\n * Renders an unstyled button by default, but can be customized with the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheettrigger\n *\n * @example\n * ```tsx\n * <Sheet.Root>\n *   <Sheet.Trigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n *   </Sheet.Trigger>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>Sheet content.</p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Trigger = SheetPrimitive.Trigger;\nTrigger.displayName = \"SheetTrigger\";\n\n/**\n * The close button for a `Sheet`. Should be rendered as a child of the `Sheet.Content` component.\n * Usually contained within the `Sheet.Footer` component.\n * Renders an unstyled button by default, but can be customized with the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetclose\n *\n * @example\n * ```tsx\n * <Sheet.Root>\n *   <Sheet.Trigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n *   </Sheet.Trigger>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>Sheet content.</p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Close = SheetPrimitive.Close;\nClose.displayName = \"SheetClose\";\n\n/**\n * The portal for a sheet. Should be rendered as a child of the `Sheet` component.\n * Renders a portal that the `SheetOverlay` and `Sheet.Content` is rendered into.\n *\n * @private\n */\nconst SheetPortal = SheetPrimitive.Portal;\nSheetPortal.displayName = \"SheetPortal\";\n\n/**\n * The overlay backdrop for a sheet. Should be rendered as a child of the `SheetPortal` component.\n *\n * You likely don't need to use this component directly, as it is used internally by the `Sheet.Content` component.\n *\n * @private\n */\nconst SheetOverlay = forwardRef<\n\tComponentRef<typeof SheetPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Overlay\n\t\tdata-slot=\"sheet-overlay\"\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-40 backdrop-blur-xs\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t\tref={ref}\n\t/>\n));\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName;\n\nconst SheetVariants = cva(\n\t\"bg-dialog border-dialog inset-y-0 h-full w-full fixed z-40 flex flex-col shadow-lg outline-hidden transition ease-in-out focus-within:outline-hidden data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * The side of the screen the sheet should slide in from.\n\t\t\t */\n\t\t\tside: {\n\t\t\t\tleft: \"data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r\",\n\t\t\t\tright:\n\t\t\t\t\t\"data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tside: \"right\",\n\t\t},\n\t},\n);\n\ntype SheetContentProps = ComponentPropsWithoutRef<typeof SheetPrimitive.Content> &\n\tVariantProps<typeof SheetVariants> & {\n\t\t/**\n\t\t * The preferred width of the `Sheet.Content` as a tailwind `max-w-` class.\n\t\t *\n\t\t * By default, a `Sheet`'s content width is responsive with a default\n\t\t * preferred width: the maximum width of the `Sheet.Content` when the window\n\t\t * viewport is larger than the mobile breakpoint (`sm`).\n\t\t *\n\t\t * @default `sm:max-w-[30rem]`\n\t\t */\n\t\tpreferredWidth?: `sm:max-w-${string}`;\n\t};\n\n/**\n * The main container for a `Sheet`. Should be rendered as a child of the `Sheet` component.\n * Renders on top of the overlay backdrop.\n * Should contain the `Sheet.Header`, `Sheet.Body`, and `Sheet.Footer`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetcontent\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, SheetContentProps>(\n\t({ children, className, preferredWidth = \"sm:max-w-[30rem]\", side = \"right\", ...props }, ref) => (\n\t\t<SheetPortal>\n\t\t\t<SheetOverlay />\n\t\t\t<SheetPrimitive.Content\n\t\t\t\tdata-slot=\"sheet-content\"\n\t\t\t\tdata-mantle-modal-content\n\t\t\t\tclassName={cx(SheetVariants({ side }), preferredWidth, className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</SheetPrimitive.Content>\n\t\t</SheetPortal>\n\t),\n);\nContent.displayName = SheetPrimitive.Content.displayName;\n\ntype SheetCloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\n\n/**\n * An icon button that closes the `Sheet` when clicked.\n * Should be rendered within the `Sheet.Header` as a child of `Sheet.Actions`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetcloseiconbutton\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst CloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Sheet\",\n\tappearance = \"ghost\",\n\t...props\n}: SheetCloseIconButtonProps) => (\n\t<SheetPrimitive.Close asChild>\n\t\t<IconButton\n\t\t\tdata-slot=\"sheet-close-icon-button\"\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</SheetPrimitive.Close>\n);\nCloseIconButton.displayName = \"SheetCloseIconButton\";\n\n/**\n * The body container for a `Sheet`. This is where you would typically place the main content of the sheet, such as forms or text.\n * Should be rendered as a child of `Sheet.Content`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetbody\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Body = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tdata-slot=\"sheet-body\"\n\t\tclassName={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)}\n\t\t{...props}\n\t/>\n);\nBody.displayName = \"SheetBody\";\n\n/**\n * The header container for a `Sheet`. This is where you would typically place the title, description, and actions.\n * Should be rendered as a child of `Sheet.Content`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetheader\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Header = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tdata-slot=\"sheet-header\"\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-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);\nHeader.displayName = \"SheetHeader\";\n\n/**\n * The footer container for a `Sheet`. This is where you would typically place close and submit buttons.\n * Should be rendered as a child of `Sheet.Content`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetfooter\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Footer = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tdata-slot=\"sheet-footer\"\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nFooter.displayName = \"SheetFooter\";\n\n/**\n * The title for a `Sheet`. Typically rendered as a child of `Sheet.TitleGroup`.\n * Defaults to an `h2` element, but can be changed via the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheettitle\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof SheetPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Title\n\t\tdata-slot=\"sheet-title\"\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong flex-1 truncate text-lg font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = SheetPrimitive.Title.displayName;\n\n/**\n * A group container for the title and actions of a sheet. Typically rendered as a child of `Sheet.Header`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheettitlegroup\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst TitleGroup = forwardRef<ComponentRef<\"div\">, HTMLAttributes<HTMLDivElement>>(\n\t({ children, className, ...props }, ref) => (\n\t\t<div\n\t\t\tdata-slot=\"sheet-title-group\"\n\t\t\tclassName={cx(\"flex items-center justify-between gap-2\", className)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t),\n);\nTitleGroup.displayName = \"SheetTitleGroup\";\n\n/**\n * A description for a sheet. Typically rendered as a child of `Sheet.Header`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetdescription\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<typeof SheetPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Description\n\t\tdata-slot=\"sheet-description\"\n\t\tref={ref}\n\t\tclassName={cx(\"text-body text-sm\", className)}\n\t\t{...props}\n\t/>\n));\nDescription.displayName = SheetPrimitive.Description.displayName;\n\n/**\n * A group container for the actions of a `Sheet`. Typically rendered as a child of `Sheet.TitleGroup`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetactions\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Actions = forwardRef<ComponentRef<\"div\">, HTMLAttributes<HTMLDivElement>>(\n\t({ children, className, ...props }, ref) => (\n\t\t<div\n\t\t\tdata-slot=\"sheet-actions\"\n\t\t\tclassName={cx(\"flex h-full items-center gap-2\", className)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t),\n);\nActions.displayName = \"SheetActions\";\n\n/**\n * A container that overlays the current view from the edge of the screen.\n * It is a lightweight way of allowing users to complete a task without losing\n * contextual information of the view beneath it.\n *\n * @see https://mantle.ngrok.com/components/sheet\n *\n * @example\n * Composition:\n * ```\n * Sheet.Root\n * ├── Sheet.Trigger\n * └── Sheet.Content\n *     ├── Sheet.Header\n *     │   ├── Sheet.TitleGroup\n *     │   │   ├── Sheet.Title\n *     │   │   └── Sheet.Actions\n *     │   └── Sheet.Description\n *     ├── Sheet.Body\n *     └── Sheet.Footer\n *         └── Sheet.Close\n * ```\n *\n * @example\n * ```tsx\n * // Triggering a stateful sheet\n * <Sheet.Root>\n *   <Sheet.Trigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">\n *       Open Sheet\n *     </Button>\n *   </Sheet.Trigger>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Sheet = {\n\t/**\n\t * The root component for a `Sheet`. Should compose the `Sheet.Trigger` and `Sheet.Content`.\n\t * Acts as a stateful provider for the Sheet's open/closed state.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A group container for the actions of a `Sheet`. Typically rendered as a child of `Sheet.TitleGroup`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetactions\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tActions,\n\t/**\n\t * The body container for a `Sheet`. This is where you would typically place the main content of the sheet, such as forms or text.\n\t * Should be rendered as a child of `Sheet.Content`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetbody\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * The close button for a `Sheet`. Should be rendered as a child of the `Sheet.Content` component.\n\t * Usually contained within the `Sheet.Footer` component.\n\t * Renders an unstyled button by default, but can be customized with the `asChild` prop.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * An icon button that closes the `Sheet` when clicked.\n\t * Should be rendered within the `Sheet.Header` as a child of `Sheet.Actions`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetcloseiconbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tCloseIconButton,\n\t/**\n\t * The main container for a `Sheet`. Should be rendered as a child of the `Sheet` component.\n\t * Renders on top of the overlay backdrop.\n\t * Should contain the `Sheet.Header`, `Sheet.Body`, and `Sheet.Footer`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * A description for a sheet. Typically rendered as a child of `Sheet.Header`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * The footer container for a `Sheet`. This is where you would typically place close and submit buttons.\n\t * Should be rendered as a child of `Sheet.Content`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetfooter\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * The header container for a `Sheet`. This is where you would typically place the title, description, and actions.\n\t * Should be rendered as a child of `Sheet.Content`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The title for a `Sheet`. Typically rendered as a child of `Sheet.TitleGroup`.\n\t * Defaults to an `h2` element, but can be changed via the `asChild` prop.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheettitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A group container for the title and actions of a sheet. Typically rendered as a child of `Sheet.Header`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheettitlegroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tTitleGroup,\n\t/**\n\t * The button trigger for a `Sheet`. Should be rendered as a child of the `Sheet` component.\n\t * Renders an unstyled button by default, but can be customized with the `asChild` prop.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheettrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tSheet,\n};\n"],"mappings":"qVAyGA,MAAM,EAAOA,EACb,EAAK,YAAc,QAuCnB,MAAM,EAAUC,EAChB,EAAQ,YAAc,eAwCtB,MAAM,EAAQC,EACd,EAAM,YAAc,aAQpB,MAAM,EAAcC,EACpB,EAAY,YAAc,cAS1B,MAAM,EAAe,GAGlB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACC,EAAD,CACC,YAAU,gBACV,UAAW,EACV,iKACA,EACA,CACD,GAAI,EACC,MACJ,CAAA,CACD,CACF,EAAa,YAAA,EAAqC,YAElD,MAAM,EAAgB,EACrB,4QACA,CACC,SAAU,CAIT,KAAM,CACL,KAAM,yFACN,MACC,4FACD,CACD,CACD,gBAAiB,CAChB,KAAM,QACN,CACD,CACD,CAkEK,EAAU,GACd,CAAE,WAAU,YAAW,iBAAiB,mBAAoB,OAAO,QAAS,GAAG,GAAS,IACxF,EAAC,EAAD,CAAA,SAAA,CACC,EAAC,EAAD,EAAgB,CAAA,CAChB,EAACC,EAAD,CACC,YAAU,gBACV,4BAAA,GACA,UAAW,EAAG,EAAc,CAAE,OAAM,CAAC,CAAE,EAAgB,EAAU,CAC5D,MACL,GAAI,EAEH,WACuB,CAAA,CACZ,CAAA,CAAA,CAEf,CACD,EAAQ,YAAA,EAAqC,YAqD7C,MAAM,GAAmB,CACxB,OAAO,KACP,OAAO,SACP,QAAQ,cACR,aAAa,QACb,GAAG,KAEH,EAACH,EAAD,CAAsB,QAAA,YACrB,EAAC,EAAD,CACC,YAAU,0BACE,aACZ,KAAM,EAAC,EAAD,EAAS,CAAA,CACR,QACD,OACA,OACN,GAAI,EACH,CAAA,CACoB,CAAA,CAExB,EAAgB,YAAc,uBAmD9B,MAAM,GAAQ,CAAE,YAAW,GAAG,KAC7B,EAAC,MAAD,CACC,YAAU,aACV,UAAW,EAAG,iDAAkD,EAAU,CAC1E,GAAI,EACH,CAAA,CAEH,EAAK,YAAc,YAmDnB,MAAM,GAAU,CAAE,YAAW,GAAG,KAC/B,EAAC,MAAD,CACC,YAAU,eACV,UAAW,EACV,2EACA,0BACA,EACA,CACD,GAAI,EACH,CAAA,CAEH,EAAO,YAAc,cAmDrB,MAAM,GAAU,CAAE,YAAW,GAAG,KAC/B,EAAC,MAAD,CACC,YAAU,eACV,UAAW,EACV,2EACA,EACA,CACD,GAAI,EACH,CAAA,CAEH,EAAO,YAAc,cAmDrB,MAAM,EAAQ,GAGX,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACI,EAAD,CACC,YAAU,cACL,MACL,UAAW,EAAG,kDAAmD,EAAU,CAC3E,GAAI,EACH,CAAA,CACD,CACF,EAAM,YAAA,EAAmC,YAkDzC,MAAM,EAAa,GACjB,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,MAAD,CACC,YAAU,oBACV,UAAW,EAAG,0CAA2C,EAAU,CACnE,GAAI,EACC,MAEJ,WACI,CAAA,CAEP,CACD,EAAW,YAAc,kBAkDzB,MAAM,EAAc,GAGjB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACC,EAAD,CACC,YAAU,oBACL,MACL,UAAW,EAAG,oBAAqB,EAAU,CAC7C,GAAI,EACH,CAAA,CACD,CACF,EAAY,YAAA,EAAyC,YAkDrD,MAAM,EAAU,GACd,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,MAAD,CACC,YAAU,gBACV,UAAW,EAAG,iCAAkC,EAAU,CAC1D,GAAI,EACC,MAEJ,WACI,CAAA,CAEP,CACD,EAAQ,YAAc,eAoHtB,MAAM,EAAQ,CAsCb,OAqCA,UAsCA,OAuCA,QAsCA,kBAuCA,UAqCA,cAsCA,SAsCA,SAsCA,QAqCA,aAsCA,UACA"}
+{"version":3,"file":"sheet.js","names":["SheetPrimitive.Root","SheetPrimitive.Trigger","SheetPrimitive.Close","SheetPrimitive.Portal","SheetPrimitive.Overlay","SheetPrimitive.Content","SheetPrimitive.Title","SheetPrimitive.Description"],"sources":["../src/components/sheet/sheet.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport type { ComponentPropsWithoutRef, ComponentRef, HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport * as SheetPrimitive from \"../dialog/primitive.js\";\n\n/**\n * The root component for a `Sheet`. Should compose the `Sheet.Trigger` and `Sheet.Content`.\n * Acts as a stateful provider for the Sheet's open/closed state.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetroot\n *\n * @example\n * ```tsx\n * // Triggering a stateful sheet\n * <Sheet.Root>\n *   <Sheet.Trigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">\n *       Open Sheet\n *     </Button>\n *   </Sheet.Trigger>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Root = SheetPrimitive.Root;\nRoot.displayName = \"Sheet\";\n\n/**\n * The button trigger for a `Sheet`. Should be rendered as a child of the `Sheet` component.\n * Renders an unstyled button by default, but can be customized with the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheettrigger\n *\n * @example\n * ```tsx\n * <Sheet.Root>\n *   <Sheet.Trigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n *   </Sheet.Trigger>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>Sheet content.</p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Trigger = SheetPrimitive.Trigger;\nTrigger.displayName = \"SheetTrigger\";\n\n/**\n * The close button for a `Sheet`. Should be rendered as a child of the `Sheet.Content` component.\n * Usually contained within the `Sheet.Footer` component.\n * Renders an unstyled button by default, but can be customized with the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetclose\n *\n * @example\n * ```tsx\n * <Sheet.Root>\n *   <Sheet.Trigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n *   </Sheet.Trigger>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>Sheet content.</p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Close = SheetPrimitive.Close;\nClose.displayName = \"SheetClose\";\n\n/**\n * The portal for a sheet. Should be rendered as a child of the `Sheet` component.\n * Renders a portal that the `SheetOverlay` and `Sheet.Content` is rendered into.\n *\n * @private\n */\nconst SheetPortal = SheetPrimitive.Portal;\nSheetPortal.displayName = \"SheetPortal\";\n\n/**\n * The overlay backdrop for a sheet. Should be rendered as a child of the `SheetPortal` component.\n *\n * You likely don't need to use this component directly, as it is used internally by the `Sheet.Content` component.\n *\n * @private\n */\nconst SheetOverlay = forwardRef<\n\tComponentRef<typeof SheetPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Overlay\n\t\tdata-slot=\"sheet-overlay\"\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-40 backdrop-blur-xs\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t\tref={ref}\n\t/>\n));\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName;\n\nconst SheetVariants = cva(\n\t\"bg-dialog border-dialog inset-y-0 h-full w-full fixed z-40 flex flex-col shadow-lg outline-hidden transition ease-in-out focus-within:outline-hidden data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * The side of the screen the sheet should slide in from.\n\t\t\t */\n\t\t\tside: {\n\t\t\t\tleft: \"data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r\",\n\t\t\t\tright:\n\t\t\t\t\t\"data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tside: \"right\",\n\t\t},\n\t},\n);\n\ntype SheetContentProps = ComponentPropsWithoutRef<typeof SheetPrimitive.Content> &\n\tVariantProps<typeof SheetVariants> & {\n\t\t/**\n\t\t * The preferred width of the `Sheet.Content` as a tailwind `max-w-` class.\n\t\t *\n\t\t * By default, a `Sheet`'s content width is responsive with a default\n\t\t * preferred width: the maximum width of the `Sheet.Content` when the window\n\t\t * viewport is larger than the mobile breakpoint (`sm`).\n\t\t *\n\t\t * @default `sm:max-w-[30rem]`\n\t\t */\n\t\tpreferredWidth?: `sm:max-w-${string}`;\n\t};\n\n/**\n * The main container for a `Sheet`. Should be rendered as a child of the `Sheet` component.\n * Renders on top of the overlay backdrop.\n * Should contain the `Sheet.Header`, `Sheet.Body`, and `Sheet.Footer`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetcontent\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, SheetContentProps>(\n\t({ children, className, preferredWidth = \"sm:max-w-[30rem]\", side = \"right\", ...props }, ref) => (\n\t\t<SheetPortal>\n\t\t\t<SheetOverlay />\n\t\t\t<SheetPrimitive.Content\n\t\t\t\tdata-slot=\"sheet-content\"\n\t\t\t\tdata-mantle-modal-content\n\t\t\t\tclassName={cx(SheetVariants({ side }), preferredWidth, className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</SheetPrimitive.Content>\n\t\t</SheetPortal>\n\t),\n);\nContent.displayName = SheetPrimitive.Content.displayName;\n\ntype SheetCloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\n\n/**\n * An icon button that closes the `Sheet` when clicked.\n * Should be rendered within the `Sheet.Header` as a child of `Sheet.Actions`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetcloseiconbutton\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst CloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Sheet\",\n\tappearance = \"ghost\",\n\t...props\n}: SheetCloseIconButtonProps) => (\n\t<SheetPrimitive.Close asChild>\n\t\t<IconButton\n\t\t\tdata-slot=\"sheet-close-icon-button\"\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</SheetPrimitive.Close>\n);\nCloseIconButton.displayName = \"SheetCloseIconButton\";\n\n/**\n * The body container for a `Sheet`. This is where you would typically place the main content of the sheet, such as forms or text.\n * Should be rendered as a child of `Sheet.Content`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetbody\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Body = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tdata-slot=\"sheet-body\"\n\t\tclassName={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)}\n\t\t{...props}\n\t/>\n);\nBody.displayName = \"SheetBody\";\n\n/**\n * The header container for a `Sheet`. This is where you would typically place the title, description, and actions.\n * Should be rendered as a child of `Sheet.Content`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetheader\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Header = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tdata-slot=\"sheet-header\"\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-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);\nHeader.displayName = \"SheetHeader\";\n\n/**\n * The footer container for a `Sheet`. This is where you would typically place close and submit buttons.\n * Should be rendered as a child of `Sheet.Content`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetfooter\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Footer = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tdata-slot=\"sheet-footer\"\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nFooter.displayName = \"SheetFooter\";\n\n/**\n * The title for a `Sheet`. Typically rendered as a child of `Sheet.TitleGroup`.\n * Defaults to an `h2` element, but can be changed via the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheettitle\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof SheetPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Title\n\t\tdata-slot=\"sheet-title\"\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong flex-1 truncate text-lg font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = SheetPrimitive.Title.displayName;\n\n/**\n * A group container for the title and actions of a sheet. Typically rendered as a child of `Sheet.Header`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheettitlegroup\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst TitleGroup = forwardRef<ComponentRef<\"div\">, HTMLAttributes<HTMLDivElement>>(\n\t({ children, className, ...props }, ref) => (\n\t\t<div\n\t\t\tdata-slot=\"sheet-title-group\"\n\t\t\tclassName={cx(\"flex items-center justify-between gap-2\", className)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t),\n);\nTitleGroup.displayName = \"SheetTitleGroup\";\n\n/**\n * A description for a sheet. Typically rendered as a child of `Sheet.Header`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetdescription\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<typeof SheetPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Description\n\t\tdata-slot=\"sheet-description\"\n\t\tref={ref}\n\t\tclassName={cx(\"text-body text-sm\", className)}\n\t\t{...props}\n\t/>\n));\nDescription.displayName = SheetPrimitive.Description.displayName;\n\n/**\n * A group container for the actions of a `Sheet`. Typically rendered as a child of `Sheet.TitleGroup`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetactions\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Actions = forwardRef<ComponentRef<\"div\">, HTMLAttributes<HTMLDivElement>>(\n\t({ children, className, ...props }, ref) => (\n\t\t<div\n\t\t\tdata-slot=\"sheet-actions\"\n\t\t\tclassName={cx(\"flex h-full items-center gap-2\", className)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t),\n);\nActions.displayName = \"SheetActions\";\n\n/**\n * A container that overlays the current view from the edge of the screen.\n * It is a lightweight way of allowing users to complete a task without losing\n * contextual information of the view beneath it. Use Sheet for side-panel\n * content that slides in from any edge — filter panels, detail/inspector\n * views, navigation drawers, mobile menus. For a centered modal that\n * interrupts the user, use `Dialog` (or `AlertDialog` for destructive\n * confirmations).\n *\n * @see https://mantle.ngrok.com/components/sheet\n *\n * @example\n * Composition:\n * ```\n * Sheet.Root\n * ├── Sheet.Trigger\n * └── Sheet.Content\n *     ├── Sheet.Header\n *     │   ├── Sheet.TitleGroup\n *     │   │   ├── Sheet.Title\n *     │   │   └── Sheet.Actions\n *     │   └── Sheet.Description\n *     ├── Sheet.Body\n *     └── Sheet.Footer\n *         └── Sheet.Close\n * ```\n *\n * @example\n * ```tsx\n * // Triggering a stateful sheet\n * <Sheet.Root>\n *   <Sheet.Trigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">\n *       Open Sheet\n *     </Button>\n *   </Sheet.Trigger>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Sheet = {\n\t/**\n\t * The root component for a `Sheet`. Should compose the `Sheet.Trigger` and `Sheet.Content`.\n\t * Acts as a stateful provider for the Sheet's open/closed state.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A group container for the actions of a `Sheet`. Typically rendered as a child of `Sheet.TitleGroup`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetactions\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tActions,\n\t/**\n\t * The body container for a `Sheet`. This is where you would typically place the main content of the sheet, such as forms or text.\n\t * Should be rendered as a child of `Sheet.Content`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetbody\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * The close button for a `Sheet`. Should be rendered as a child of the `Sheet.Content` component.\n\t * Usually contained within the `Sheet.Footer` component.\n\t * Renders an unstyled button by default, but can be customized with the `asChild` prop.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * An icon button that closes the `Sheet` when clicked.\n\t * Should be rendered within the `Sheet.Header` as a child of `Sheet.Actions`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetcloseiconbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tCloseIconButton,\n\t/**\n\t * The main container for a `Sheet`. Should be rendered as a child of the `Sheet` component.\n\t * Renders on top of the overlay backdrop.\n\t * Should contain the `Sheet.Header`, `Sheet.Body`, and `Sheet.Footer`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * A description for a sheet. Typically rendered as a child of `Sheet.Header`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * The footer container for a `Sheet`. This is where you would typically place close and submit buttons.\n\t * Should be rendered as a child of `Sheet.Content`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetfooter\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * The header container for a `Sheet`. This is where you would typically place the title, description, and actions.\n\t * Should be rendered as a child of `Sheet.Content`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The title for a `Sheet`. Typically rendered as a child of `Sheet.TitleGroup`.\n\t * Defaults to an `h2` element, but can be changed via the `asChild` prop.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheettitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A group container for the title and actions of a sheet. Typically rendered as a child of `Sheet.Header`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheettitlegroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tTitleGroup,\n\t/**\n\t * The button trigger for a `Sheet`. Should be rendered as a child of the `Sheet` component.\n\t * Renders an unstyled button by default, but can be customized with the `asChild` prop.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheettrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tSheet,\n};\n"],"mappings":"qVAyGA,MAAM,EAAOA,EACb,EAAK,YAAc,QAuCnB,MAAM,EAAUC,EAChB,EAAQ,YAAc,eAwCtB,MAAM,EAAQC,EACd,EAAM,YAAc,aAQpB,MAAM,EAAcC,EACpB,EAAY,YAAc,cAS1B,MAAM,EAAe,GAGlB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACC,EAAD,CACC,YAAU,gBACV,UAAW,EACV,iKACA,EACA,CACD,GAAI,EACC,MACJ,CAAA,CACD,CACF,EAAa,YAAA,EAAqC,YAElD,MAAM,EAAgB,EACrB,4QACA,CACC,SAAU,CAIT,KAAM,CACL,KAAM,yFACN,MACC,4FACD,CACD,CACD,gBAAiB,CAChB,KAAM,QACN,CACD,CACD,CAkEK,EAAU,GACd,CAAE,WAAU,YAAW,iBAAiB,mBAAoB,OAAO,QAAS,GAAG,GAAS,IACxF,EAAC,EAAD,CAAA,SAAA,CACC,EAAC,EAAD,EAAgB,CAAA,CAChB,EAACC,EAAD,CACC,YAAU,gBACV,4BAAA,GACA,UAAW,EAAG,EAAc,CAAE,OAAM,CAAC,CAAE,EAAgB,EAAU,CAC5D,MACL,GAAI,EAEH,WACuB,CAAA,CACZ,CAAA,CAAA,CAEf,CACD,EAAQ,YAAA,EAAqC,YAqD7C,MAAM,GAAmB,CACxB,OAAO,KACP,OAAO,SACP,QAAQ,cACR,aAAa,QACb,GAAG,KAEH,EAACH,EAAD,CAAsB,QAAA,YACrB,EAAC,EAAD,CACC,YAAU,0BACE,aACZ,KAAM,EAAC,EAAD,EAAS,CAAA,CACR,QACD,OACA,OACN,GAAI,EACH,CAAA,CACoB,CAAA,CAExB,EAAgB,YAAc,uBAmD9B,MAAM,GAAQ,CAAE,YAAW,GAAG,KAC7B,EAAC,MAAD,CACC,YAAU,aACV,UAAW,EAAG,iDAAkD,EAAU,CAC1E,GAAI,EACH,CAAA,CAEH,EAAK,YAAc,YAmDnB,MAAM,GAAU,CAAE,YAAW,GAAG,KAC/B,EAAC,MAAD,CACC,YAAU,eACV,UAAW,EACV,2EACA,0BACA,EACA,CACD,GAAI,EACH,CAAA,CAEH,EAAO,YAAc,cAmDrB,MAAM,GAAU,CAAE,YAAW,GAAG,KAC/B,EAAC,MAAD,CACC,YAAU,eACV,UAAW,EACV,2EACA,EACA,CACD,GAAI,EACH,CAAA,CAEH,EAAO,YAAc,cAmDrB,MAAM,EAAQ,GAGX,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACI,EAAD,CACC,YAAU,cACL,MACL,UAAW,EAAG,kDAAmD,EAAU,CAC3E,GAAI,EACH,CAAA,CACD,CACF,EAAM,YAAA,EAAmC,YAkDzC,MAAM,EAAa,GACjB,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,MAAD,CACC,YAAU,oBACV,UAAW,EAAG,0CAA2C,EAAU,CACnE,GAAI,EACC,MAEJ,WACI,CAAA,CAEP,CACD,EAAW,YAAc,kBAkDzB,MAAM,EAAc,GAGjB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACC,EAAD,CACC,YAAU,oBACL,MACL,UAAW,EAAG,oBAAqB,EAAU,CAC7C,GAAI,EACH,CAAA,CACD,CACF,EAAY,YAAA,EAAyC,YAkDrD,MAAM,EAAU,GACd,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,MAAD,CACC,YAAU,gBACV,UAAW,EAAG,iCAAkC,EAAU,CAC1D,GAAI,EACC,MAEJ,WACI,CAAA,CAEP,CACD,EAAQ,YAAc,eAwHtB,MAAM,EAAQ,CAsCb,OAqCA,UAsCA,OAuCA,QAsCA,kBAuCA,UAqCA,cAsCA,SAsCA,SAsCA,QAqCA,aAsCA,UACA"}

package/dist/skeleton.d.ts

@@ -2,21 +2,48 @@ import * as _$react from "react";
 
 //#region src/components/skeleton/skeleton.d.ts
 /**
- * A skeleton is a placeholder for content that is loading.
- * By using a skeleton, you can give the user an idea of what the content will
- * look like and reduce the perceived loading time and CLS (Cumulative Layout Shift).
+ * A skeleton is a placeholder for content that is loading. By rendering a
+ * neutral block where real content will eventually appear, you give the
+ * user an early sense of layout and reduce both perceived loading time
+ * and Cumulative Layout Shift (CLS).
  *
- * @note Default height is 1rem.
+ * **When to use**
+ * - Async-loaded content where the eventual shape is predictable (lists,
+ *   cards, tables, avatars).
+ * - On initial page load, before data has resolved.
+ *
+ * **When not to use**
+ * - For very short fetches (< 200 ms) — a flash of skeleton is more
+ *   distracting than helpful.
+ * - To convey error or empty states. Use {@link https://mantle.ngrok.com/components/empty Empty} instead.
+ * - As a permanent decorative shape.
+ *
+ * **Sizing.** Default height is `1rem`. Override `className` with `h-*`,
+ * `w-*`, and `rounded-*` utilities to match the real content's dimensions
+ * — the more closely the skeleton matches, the less layout shift on swap.
+ *
+ * **Accessibility.** Skeletons are decorative and convey no semantic
+ * meaning to assistive tech. If the underlying region is loading, also
+ * announce it to screen readers — e.g. wrap in an element with
+ * `role="status"` and a visually-hidden "Loading…" label.
  *
  * @see https://mantle.ngrok.com/components/skeleton
  *
  * @example
  * ```tsx
- * <Skeleton className="w-1/2" />
+ * import { Skeleton } from "@ngrok/mantle/skeleton";
  *
+ * // Text-line placeholder.
  * <Skeleton className="w-1/2" />
  *
+ * // Avatar placeholder.
  * <Skeleton className="h-12 w-12 rounded-full" />
+ *
+ * // Announce loading state to assistive tech.
+ * <div role="status" aria-live="polite">
+ *   <span className="sr-only">Loading profile…</span>
+ *   <Skeleton className="h-12 w-12 rounded-full" />
+ * </div>
  * ```
  */
 declare const Skeleton: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttributes<HTMLDivElement> & _$react.HTMLAttributes<HTMLDivElement> & {

package/dist/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","names":[],"sources":["../src/components/skeleton/skeleton.tsx"],"sourcesContent":["import { type ComponentProps, type ComponentRef, forwardRef } from \"react\";\nimport type { SelfClosingWithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype Props = Exclude<ComponentProps<\"div\">, \"children\"> & SelfClosingWithAsChild;\n\n/**\n * A skeleton is a placeholder for content that is loading.\n * By using a skeleton, you can give the user an idea of what the content will\n * look like and reduce the perceived loading time and CLS (Cumulative Layout Shift).\n *\n * @note Default height is 1rem.\n *\n * @see https://mantle.ngrok.com/components/skeleton\n *\n * @example\n * ```tsx\n * <Skeleton className=\"w-1/2\" />\n *\n * <Skeleton className=\"w-1/2\" />\n *\n * <Skeleton className=\"h-12 w-12 rounded-full\" />\n * ```\n */\nconst Skeleton = forwardRef<ComponentRef<\"div\">, Props>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tdata-slot=\"skeleton\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"dark-high-contrast:bg-black/30 high-contrast:bg-black/30 h-4 animate-pulse rounded-md bg-gray-300/25 dark:bg-gray-950/10\",\n\t\t\t\t\tclassName,\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);\nSkeleton.displayName = \"Skeleton\";\n\nexport {\n\t//,\n\tSkeleton,\n};\n"],"mappings":"kJAyBA,MAAM,EAAW,GACf,CAAE,UAAU,GAAO,YAAW,GAAG,GAAS,IAIzC,EAHiB,EAAU,EAAO,MAGlC,CACC,YAAU,WACV,UAAW,EACV,2HACA,EACA,CACI,MACL,GAAI,EACH,CAAA,CAGJ,CACD,EAAS,YAAc"}
+{"version":3,"file":"skeleton.js","names":[],"sources":["../src/components/skeleton/skeleton.tsx"],"sourcesContent":["import { type ComponentProps, type ComponentRef, forwardRef } from \"react\";\nimport type { SelfClosingWithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype Props = Exclude<ComponentProps<\"div\">, \"children\"> & SelfClosingWithAsChild;\n\n/**\n * A skeleton is a placeholder for content that is loading. By rendering a\n * neutral block where real content will eventually appear, you give the\n * user an early sense of layout and reduce both perceived loading time\n * and Cumulative Layout Shift (CLS).\n *\n * **When to use**\n * - Async-loaded content where the eventual shape is predictable (lists,\n *   cards, tables, avatars).\n * - On initial page load, before data has resolved.\n *\n * **When not to use**\n * - For very short fetches (< 200 ms) — a flash of skeleton is more\n *   distracting than helpful.\n * - To convey error or empty states. Use {@link https://mantle.ngrok.com/components/empty Empty} instead.\n * - As a permanent decorative shape.\n *\n * **Sizing.** Default height is `1rem`. Override `className` with `h-*`,\n * `w-*`, and `rounded-*` utilities to match the real content's dimensions\n * — the more closely the skeleton matches, the less layout shift on swap.\n *\n * **Accessibility.** Skeletons are decorative and convey no semantic\n * meaning to assistive tech. If the underlying region is loading, also\n * announce it to screen readers — e.g. wrap in an element with\n * `role=\"status\"` and a visually-hidden \"Loading…\" label.\n *\n * @see https://mantle.ngrok.com/components/skeleton\n *\n * @example\n * ```tsx\n * import { Skeleton } from \"@ngrok/mantle/skeleton\";\n *\n * // Text-line placeholder.\n * <Skeleton className=\"w-1/2\" />\n *\n * // Avatar placeholder.\n * <Skeleton className=\"h-12 w-12 rounded-full\" />\n *\n * // Announce loading state to assistive tech.\n * <div role=\"status\" aria-live=\"polite\">\n *   <span className=\"sr-only\">Loading profile…</span>\n *   <Skeleton className=\"h-12 w-12 rounded-full\" />\n * </div>\n * ```\n */\nconst Skeleton = forwardRef<ComponentRef<\"div\">, Props>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tdata-slot=\"skeleton\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"dark-high-contrast:bg-black/30 high-contrast:bg-black/30 h-4 animate-pulse rounded-md bg-gray-300/25 dark:bg-gray-950/10\",\n\t\t\t\t\tclassName,\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);\nSkeleton.displayName = \"Skeleton\";\n\nexport {\n\t//,\n\tSkeleton,\n};\n"],"mappings":"kJAoDA,MAAM,EAAW,GACf,CAAE,UAAU,GAAO,YAAW,GAAG,GAAS,IAIzC,EAHiB,EAAU,EAAO,MAGlC,CACC,YAAU,WACV,UAAW,EACV,2HACA,EACA,CACI,MACL,GAAI,EACH,CAAA,CAGJ,CACD,EAAS,YAAc"}

package/dist/{sort-C_Jbs1dH.js → sort-DzCsa6Qj.js}

@@ -1,2 +1,2 @@
-import{i as e}from"./direction-ClCocWIf.js";import{jsx as t}from"react/jsx-runtime";import{SortAscendingIcon as n}from"@phosphor-icons/react/SortAscending";import{SortDescendingIcon as r}from"@phosphor-icons/react/SortDescending";const i=({mode:i,direction:a,...o})=>{switch(i){case`alphanumeric`:switch(a){case`asc`:return t(n,{...o});case`desc`:return t(r,{...o});default:throw Error(`Invalid alphanumeric sorting direction given: "${a}"`)}case`time`:switch(e(a)){case`oldest-to-newest`:return t(r,{...o});case`newest-to-oldest`:return t(n,{...o});default:throw Error(`Invalid time sorting direction given: "${a}"`)}}};i.displayName=`SortIcon`;export{i as t};
-//# sourceMappingURL=sort-C_Jbs1dH.js.map
+import{i as e}from"./direction-DsB-pD9V.js";import{jsx as t}from"react/jsx-runtime";import{SortAscendingIcon as n}from"@phosphor-icons/react/SortAscending";import{SortDescendingIcon as r}from"@phosphor-icons/react/SortDescending";const i=({mode:i,direction:a,...o})=>{switch(i){case`alphanumeric`:switch(a){case`asc`:return t(n,{...o});case`desc`:return t(r,{...o});default:throw Error(`Invalid alphanumeric sorting direction given: "${a}"`)}case`time`:switch(e(a)){case`oldest-to-newest`:return t(r,{...o});case`newest-to-oldest`:return t(n,{...o});default:throw Error(`Invalid time sorting direction given: "${a}"`)}}};i.displayName=`SortIcon`;export{i as t};
+//# sourceMappingURL=sort-DzCsa6Qj.js.map

package/dist/{sort-C_Jbs1dH.js.map → sort-DzCsa6Qj.js.map}

@@ -1 +1 @@
-{"version":3,"file":"sort-C_Jbs1dH.js","names":[],"sources":["../src/components/icons/sort.tsx"],"sourcesContent":["import { SortAscendingIcon } from \"@phosphor-icons/react/SortAscending\";\nimport { SortDescendingIcon } from \"@phosphor-icons/react/SortDescending\";\nimport {\n\t$timeSortingDirection,\n\ttype AlphanumericSortingDirection,\n\ttype SortingDirection,\n\ttype SortingMode,\n\ttype TimeSortingDirection,\n} from \"../../utils/sorting/direction.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\n\ntype Props = SvgAttributes &\n\t(\n\t\t| {\n\t\t\t\tmode: Extract<SortingMode, \"alphanumeric\">;\n\t\t\t\t/**\n\t\t\t\t * Sort by alphanumeric order in \"ascending\" (asc) or \"descending\" (desc) order.\n\t\t\t\t * @example \"asc\" for A-Z, 0-9\n\t\t\t\t * @example \"desc\" for Z-A, 0-9\n\t\t\t\t */\n\t\t\t\tdirection: AlphanumericSortingDirection;\n\t\t  }\n\t\t| {\n\t\t\t\tmode: Extract<SortingMode, \"time\">;\n\t\t\t\t/**\n\t\t\t\t * Sort by time in \"newest-to-oldest\" (descending, desc) or \"oldest-to-newest\" (ascending, asc) order.\n\t\t\t\t * @example \"newest-to-oldest\" for newest first (aka descending, desc)\n\t\t\t\t * @example \"oldest-to-newest\" for oldest first (aka ascending, asc)\n\t\t\t\t */\n\t\t\t\tdirection: TimeSortingDirection | SortingDirection;\n\t\t  }\n\t);\n\n/**\n * A sorting icon that can be used to indicate the sorting direction of a table column or list.\n * It is aware of the sorting mode (alphanumeric or time) and the sorting direction (ascending or descending).\n */\nconst SortIcon = ({ mode, direction, ...props }: Props) => {\n\tswitch (mode) {\n\t\tcase \"alphanumeric\": {\n\t\t\tswitch (direction) {\n\t\t\t\tcase \"asc\":\n\t\t\t\t\treturn <SortAscendingIcon {...props} />;\n\t\t\t\tcase \"desc\":\n\t\t\t\t\treturn <SortDescendingIcon {...props} />;\n\t\t\t\tdefault:\n\t\t\t\t\tthrow new Error(`Invalid alphanumeric sorting direction given: \"${direction}\"`);\n\t\t\t}\n\t\t}\n\t\tcase \"time\": {\n\t\t\tconst timeSortingDirection = $timeSortingDirection(direction);\n\n\t\t\tswitch (timeSortingDirection) {\n\t\t\t\tcase \"oldest-to-newest\":\n\t\t\t\t\treturn <SortDescendingIcon {...props} />;\n\t\t\t\tcase \"newest-to-oldest\":\n\t\t\t\t\treturn <SortAscendingIcon {...props} />;\n\t\t\t\tdefault:\n\t\t\t\t\tthrow new Error(`Invalid time sorting direction given: \"${direction}\"`);\n\t\t\t}\n\t\t}\n\t}\n};\nSortIcon.displayName = \"SortIcon\";\n\nexport {\n\t//,\n\tSortIcon,\n};\n"],"mappings":"sOAqCA,MAAM,GAAY,CAAE,OAAM,YAAW,GAAG,KAAmB,CAC1D,OAAQ,EAAR,CACC,IAAK,eACJ,OAAQ,EAAR,CACC,IAAK,MACJ,OAAO,EAAC,EAAD,CAAmB,GAAI,EAAS,CAAA,CACxC,IAAK,OACJ,OAAO,EAAC,EAAD,CAAoB,GAAI,EAAS,CAAA,CACzC,QACC,MAAU,MAAM,kDAAkD,EAAU,GAAG,CAGlF,IAAK,OAGJ,OAF6B,EAAsB,EAAU,CAE7D,CACC,IAAK,mBACJ,OAAO,EAAC,EAAD,CAAoB,GAAI,EAAS,CAAA,CACzC,IAAK,mBACJ,OAAO,EAAC,EAAD,CAAmB,GAAI,EAAS,CAAA,CACxC,QACC,MAAU,MAAM,0CAA0C,EAAU,GAAG,IAK5E,EAAS,YAAc"}
+{"version":3,"file":"sort-DzCsa6Qj.js","names":[],"sources":["../src/components/icons/sort.tsx"],"sourcesContent":["import { SortAscendingIcon } from \"@phosphor-icons/react/SortAscending\";\nimport { SortDescendingIcon } from \"@phosphor-icons/react/SortDescending\";\nimport {\n\t$timeSortingDirection,\n\ttype AlphanumericSortingDirection,\n\ttype SortingDirection,\n\ttype SortingMode,\n\ttype TimeSortingDirection,\n} from \"../../utils/sorting/direction.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\n\ntype Props = SvgAttributes &\n\t(\n\t\t| {\n\t\t\t\tmode: Extract<SortingMode, \"alphanumeric\">;\n\t\t\t\t/**\n\t\t\t\t * Sort by alphanumeric order in \"ascending\" (asc) or \"descending\" (desc) order.\n\t\t\t\t * @example \"asc\" for A-Z, 0-9\n\t\t\t\t * @example \"desc\" for Z-A, 0-9\n\t\t\t\t */\n\t\t\t\tdirection: AlphanumericSortingDirection;\n\t\t  }\n\t\t| {\n\t\t\t\tmode: Extract<SortingMode, \"time\">;\n\t\t\t\t/**\n\t\t\t\t * Sort by time in \"newest-to-oldest\" (descending, desc) or \"oldest-to-newest\" (ascending, asc) order.\n\t\t\t\t * @example \"newest-to-oldest\" for newest first (aka descending, desc)\n\t\t\t\t * @example \"oldest-to-newest\" for oldest first (aka ascending, asc)\n\t\t\t\t */\n\t\t\t\tdirection: TimeSortingDirection | SortingDirection;\n\t\t  }\n\t);\n\n/**\n * A sorting icon that can be used to indicate the sorting direction of a table column or list.\n * It is aware of the sorting mode (alphanumeric or time) and the sorting direction (ascending or descending).\n */\nconst SortIcon = ({ mode, direction, ...props }: Props) => {\n\tswitch (mode) {\n\t\tcase \"alphanumeric\": {\n\t\t\tswitch (direction) {\n\t\t\t\tcase \"asc\":\n\t\t\t\t\treturn <SortAscendingIcon {...props} />;\n\t\t\t\tcase \"desc\":\n\t\t\t\t\treturn <SortDescendingIcon {...props} />;\n\t\t\t\tdefault:\n\t\t\t\t\tthrow new Error(`Invalid alphanumeric sorting direction given: \"${direction}\"`);\n\t\t\t}\n\t\t}\n\t\tcase \"time\": {\n\t\t\tconst timeSortingDirection = $timeSortingDirection(direction);\n\n\t\t\tswitch (timeSortingDirection) {\n\t\t\t\tcase \"oldest-to-newest\":\n\t\t\t\t\treturn <SortDescendingIcon {...props} />;\n\t\t\t\tcase \"newest-to-oldest\":\n\t\t\t\t\treturn <SortAscendingIcon {...props} />;\n\t\t\t\tdefault:\n\t\t\t\t\tthrow new Error(`Invalid time sorting direction given: \"${direction}\"`);\n\t\t\t}\n\t\t}\n\t}\n};\nSortIcon.displayName = \"SortIcon\";\n\nexport {\n\t//,\n\tSortIcon,\n};\n"],"mappings":"sOAqCA,MAAM,GAAY,CAAE,OAAM,YAAW,GAAG,KAAmB,CAC1D,OAAQ,EAAR,CACC,IAAK,eACJ,OAAQ,EAAR,CACC,IAAK,MACJ,OAAO,EAAC,EAAD,CAAmB,GAAI,EAAS,CAAA,CACxC,IAAK,OACJ,OAAO,EAAC,EAAD,CAAoB,GAAI,EAAS,CAAA,CACzC,QACC,MAAU,MAAM,kDAAkD,EAAU,GAAG,CAGlF,IAAK,OAGJ,OAF6B,EAAsB,EAEvB,CAA5B,CACC,IAAK,mBACJ,OAAO,EAAC,EAAD,CAAoB,GAAI,EAAS,CAAA,CACzC,IAAK,mBACJ,OAAO,EAAC,EAAD,CAAmB,GAAI,EAAS,CAAA,CACxC,QACC,MAAU,MAAM,0CAA0C,EAAU,GAAG,IAK5E,EAAS,YAAc"}

package/dist/split-button.d.ts

@@ -1,6 +1,6 @@
-import { t as IconButton } from "./icon-button-Cl30yTfu.js";
-import { t as Button } from "./button-DDK6nEac.js";
-import { t as DropdownMenu } from "./dropdown-menu-C9f9Y8Ov.js";
+import { t as IconButton } from "./icon-button-BnK4K7YK.js";
+import { t as Button } from "./button-Bq0x5Pv4.js";
+import { t as DropdownMenu } from "./dropdown-menu-CzUNYIfA.js";
 import * as _$react from "react";
 import { ComponentProps, ReactNode } from "react";
 import * as _$_radix_ui_react_dropdown_menu0 from "@radix-ui/react-dropdown-menu";

package/dist/split-button.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-bWc5yC3-.js";import{t as n}from"./icon-button-ZKN0sRIJ.js";import{t as r}from"./button-GokecthL.js";import{t as i}from"./dropdown-menu-Ff97BIJe.js";import{CaretDownIcon as a}from"@phosphor-icons/react/CaretDown";import{forwardRef as o}from"react";import{jsx as s}from"react/jsx-runtime";const c=o(({className:t,children:n,dir:r,open:a,defaultOpen:o,onOpenChange:c,modal:l,...u},d)=>s(i.Root,{dir:r,open:a,defaultOpen:o,onOpenChange:c,modal:l,children:s(`div`,{"data-slot":`split-button`,className:e(`flex flex-row [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px [&>*:focus]:relative [&>*:focus]:z-10 [&>*:hover]:relative [&>*:hover]:z-10 *:active:scale-100!`,t),ref:d,...u,children:n})}));c.displayName=`SplitButton`;const l=o(({type:e=`button`,...t},n)=>s(r,{appearance:`outlined`,priority:`neutral`,ref:n,type:e,...t}));l.displayName=`SplitButtonPrimaryAction`;const u=o(({icon:e,type:r=`button`,...o},c)=>s(i.Trigger,{asChild:!0,className:`group`,children:s(n,{icon:e??s(t,{svg:s(a,{weight:`bold`,className:`size-4 group-data-[state=open]:-rotate-180 transition-transform ease-out duration-150`})}),appearance:`outlined`,ref:c,type:r,...o})}));u.displayName=`SplitButtonMenuTrigger`;const d=o(({align:e=`end`,...t},n)=>s(i.Content,{align:e,ref:n,...t}));d.displayName=`SplitButtonMenuContent`;const f=o(({className:t,...n},r)=>s(i.Item,{className:e(`gap-2`,t),ref:r,...n}));f.displayName=`SplitButtonMenuItem`;const p={Root:c,PrimaryAction:l,MenuTrigger:u,MenuContent:d,MenuItem:f};export{p as SplitButton};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-bWc5yC3-.js";import{t as n}from"./icon-button-ZKN0sRIJ.js";import{t as r}from"./button-GokecthL.js";import{t as i}from"./dropdown-menu-Ducs2SEn.js";import{CaretDownIcon as a}from"@phosphor-icons/react/CaretDown";import{forwardRef as o}from"react";import{jsx as s}from"react/jsx-runtime";const c=o(({className:t,children:n,dir:r,open:a,defaultOpen:o,onOpenChange:c,modal:l,...u},d)=>s(i.Root,{dir:r,open:a,defaultOpen:o,onOpenChange:c,modal:l,children:s(`div`,{"data-slot":`split-button`,className:e(`flex flex-row [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px [&>*:focus]:relative [&>*:focus]:z-10 [&>*:hover]:relative [&>*:hover]:z-10 *:active:scale-100!`,t),ref:d,...u,children:n})}));c.displayName=`SplitButton`;const l=o(({type:e=`button`,...t},n)=>s(r,{appearance:`outlined`,priority:`neutral`,ref:n,type:e,...t}));l.displayName=`SplitButtonPrimaryAction`;const u=o(({icon:e,type:r=`button`,...o},c)=>s(i.Trigger,{asChild:!0,className:`group`,children:s(n,{icon:e??s(t,{svg:s(a,{weight:`bold`,className:`size-4 group-data-[state=open]:-rotate-180 transition-transform ease-out duration-150`})}),appearance:`outlined`,ref:c,type:r,...o})}));u.displayName=`SplitButtonMenuTrigger`;const d=o(({align:e=`end`,...t},n)=>s(i.Content,{align:e,ref:n,...t}));d.displayName=`SplitButtonMenuContent`;const f=o(({className:t,...n},r)=>s(i.Item,{className:e(`gap-2`,t),ref:r,...n}));f.displayName=`SplitButtonMenuItem`;const p={Root:c,PrimaryAction:l,MenuTrigger:u,MenuContent:d,MenuItem:f};export{p as SplitButton};
 //# sourceMappingURL=split-button.js.map

package/dist/{svg-only-BnnbLx6R.d.ts → svg-only-BtBvFy-N.d.ts}

@@ -1,4 +1,4 @@
-import { t as SvgAttributes } from "./types-DEYyl5LX.js";
+import { t as SvgAttributes } from "./types-DoV0R5Ja.js";
 import * as _$react from "react";
 import { ReactNode } from "react";
 
@@ -25,4 +25,4 @@ type SvgOnlyProps = Omit<SvgAttributes, "children"> & {
 declare const SvgOnly: _$react.ForwardRefExoticComponent<Omit<SvgOnlyProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { SvgOnlyProps as n, SvgOnly as t };
-//# sourceMappingURL=svg-only-BnnbLx6R.d.ts.map
+//# sourceMappingURL=svg-only-BtBvFy-N.d.ts.map

package/dist/{table-4q1UxE7L.d.ts → table-BsNJBKiq.d.ts}

@@ -2,8 +2,12 @@ import * as _$react from "react";
 
 //#region src/components/table/table.d.ts
 /**
- * A structured way to display data in rows and columns. The API matches the
- * HTML table element 1:1.
+ * Use `Table` for STATIC, layout-driven tabular data — read-only data dumps,
+ * simple key/value displays, plain markup tables. The API matches the HTML
+ * `<table>` element 1:1, with no built-in sorting, filtering, or pagination.
+ *
+ * For INTERACTIVE tabular data with sorting / filtering / pagination / row
+ * selection, use `DataTable` (built on TanStack Table) instead.
  *
  * @see https://mantle.ngrok.com/components/table
  *
@@ -410,4 +414,4 @@ declare const Table: {
 };
 //#endregion
 export { Table as t };
-//# sourceMappingURL=table-4q1UxE7L.d.ts.map
+//# sourceMappingURL=table-BsNJBKiq.d.ts.map

package/dist/{table-12T25gGa.js → table-Cl4nlRMR.js}

@@ -1,2 +1,2 @@
-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`,{"data-slot":`table`,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`,{"data-slot":`table-element`,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`,{"data-slot":`table-head`,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`,{"data-slot":`table-body`,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`,{"data-slot":`table-foot`,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`,{"data-slot":`table-row`,ref:i,className:e(n),...r,children:t}));p.displayName=`TableRow`;const m=n(({children:t,className:n,...r},i)=>s(`th`,{"data-slot":`table-header`,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`,{"data-slot":`table-cell`,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`,{"data-slot":`table-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-12T25gGa.js.map
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./compose-refs-DZ3cPi47.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`,{"data-slot":`table`,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`,{"data-slot":`table-element`,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`,{"data-slot":`table-head`,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`,{"data-slot":`table-body`,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`,{"data-slot":`table-foot`,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`,{"data-slot":`table-row`,ref:i,className:e(n),...r,children:t}));p.displayName=`TableRow`;const m=n(({children:t,className:n,...r},i)=>s(`th`,{"data-slot":`table-header`,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`,{"data-slot":`table-cell`,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`,{"data-slot":`table-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-Cl4nlRMR.js.map