@ngrok/mantle 0.73.3 → 0.73.4

package/dist/sheet.d.ts

@@ -1,11 +1,7 @@
-import { t as Root } from "./primitive-qkxTYBUY.js";
-import { n as IconButtonProps } from "./icon-button-BDTb-lxs.js";
-import * as _$react from "react";
+import { t as Root } from "./primitive-D_-h74Kt.js";
+import { n as IconButtonProps } from "./icon-button-ntupABbM.js";
 import { HTMLAttributes } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
-import * as _$_radix_ui_react_dialog0 from "@radix-ui/react-dialog";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 
 //#region src/components/sheet/sheet.d.ts
 type SheetCloseIconButtonProps = Partial<Omit<IconButtonProps, "icon">>;
@@ -202,7 +198,7 @@ declare const Sheet: {
    * </Sheet.Root>
    * ```
    */
-  readonly Actions: _$react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & _$react.RefAttributes<HTMLDivElement>>;
+  readonly Actions: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
   /**
    * The body container for a `Sheet`. This is where you would typically place the main content of the sheet, such as forms or text.
    * Should be rendered as a child of `Sheet.Content`.
@@ -244,7 +240,7 @@ declare const Sheet: {
     ({
       className,
       ...props
-    }: HTMLAttributes<HTMLDivElement>): _$react_jsx_runtime0.JSX.Element;
+    }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
   };
   /**
@@ -285,7 +281,7 @@ declare const Sheet: {
    * </Sheet.Root>
    * ```
    */
-  readonly Close: _$react.ForwardRefExoticComponent<_$_radix_ui_react_dialog0.DialogCloseProps & _$react.RefAttributes<HTMLButtonElement>>;
+  readonly Close: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
   /**
    * An icon button that closes the `Sheet` when clicked.
    * Should be rendered within the `Sheet.Header` as a child of `Sheet.Actions`.
@@ -330,7 +326,7 @@ declare const Sheet: {
       label,
       appearance,
       ...props
-    }: SheetCloseIconButtonProps): _$react_jsx_runtime0.JSX.Element;
+    }: SheetCloseIconButtonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
   };
   /**
@@ -371,9 +367,9 @@ declare const Sheet: {
    * </Sheet.Root>
    * ```
    */
-  readonly Content: _$react.ForwardRefExoticComponent<Omit<Omit<_$_radix_ui_react_dialog0.DialogContentProps & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+  readonly Content: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
     side?: "left" | "right" | null | undefined;
-  } & _$class_variance_authority_types0.ClassProp) | undefined) => string> & {
+  } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
     /**
      * The preferred width of the `Sheet.Content` as a tailwind `max-w-` class.
      *
@@ -384,7 +380,7 @@ declare const Sheet: {
      * @default `sm:max-w-[30rem]`
      */
     preferredWidth?: `sm:max-w-${string}`;
-  } & _$react.RefAttributes<HTMLDivElement>>;
+  } & import("react").RefAttributes<HTMLDivElement>>;
   /**
    * A description for a sheet. Typically rendered as a child of `Sheet.Header`.
    *
@@ -421,7 +417,7 @@ declare const Sheet: {
    * </Sheet.Root>
    * ```
    */
-  readonly Description: _$react.ForwardRefExoticComponent<Omit<Omit<_$_radix_ui_react_dialog0.DialogDescriptionProps & _$react.RefAttributes<HTMLParagraphElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+  readonly Description: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   /**
    * The footer container for a `Sheet`. This is where you would typically place close and submit buttons.
    * Should be rendered as a child of `Sheet.Content`.
@@ -463,7 +459,7 @@ declare const Sheet: {
     ({
       className,
       ...props
-    }: HTMLAttributes<HTMLDivElement>): _$react_jsx_runtime0.JSX.Element;
+    }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
   };
   /**
@@ -507,7 +503,7 @@ declare const Sheet: {
     ({
       className,
       ...props
-    }: HTMLAttributes<HTMLDivElement>): _$react_jsx_runtime0.JSX.Element;
+    }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
   };
   /**
@@ -547,7 +543,7 @@ declare const Sheet: {
    * </Sheet.Root>
    * ```
    */
-  readonly Title: _$react.ForwardRefExoticComponent<Omit<_$_radix_ui_react_dialog0.DialogTitleProps & _$react.RefAttributes<HTMLHeadingElement>, "ref"> & _$react.RefAttributes<HTMLHeadingElement>>;
+  readonly Title: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
   /**
    * A group container for the title and actions of a sheet. Typically rendered as a child of `Sheet.Header`.
    *
@@ -584,7 +580,7 @@ declare const Sheet: {
    * </Sheet.Root>
    * ```
    */
-  readonly TitleGroup: _$react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & _$react.RefAttributes<HTMLDivElement>>;
+  readonly TitleGroup: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
   /**
    * The button trigger for a `Sheet`. Should be rendered as a child of the `Sheet` component.
    * Renders an unstyled button by default, but can be customized with the `asChild` prop.
@@ -622,7 +618,7 @@ declare const Sheet: {
    * </Sheet.Root>
    * ```
    */
-  readonly Trigger: _$react.ForwardRefExoticComponent<_$_radix_ui_react_dialog0.DialogTriggerProps & _$react.RefAttributes<HTMLButtonElement>>;
+  readonly Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 };
 //#endregion
 export { Sheet };

package/dist/sheet.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-button-ZKN0sRIJ.js";import{a as n,c as r,i,n as a,o,r as s,s as c,t as l}from"./primitive-tXm_8n_t.js";import{forwardRef as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{XIcon as p}from"@phosphor-icons/react/X";import{cva as m}from"class-variance-authority";const h=o;h.displayName=`Sheet`;const g=r;g.displayName=`SheetTrigger`;const _=l;_.displayName=`SheetClose`;const v=n;v.displayName=`SheetPortal`;const y=u(({className:t,...n},r)=>d(i,{"data-slot":`sheet-overlay`,className:e(`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`,t),...n,ref:r}));y.displayName=i.displayName;const b=m(`bg-dialog border-dialog inset-y-0 h-full w-full fixed z-40 flex flex-col shadow-lg outline-hidden transition ease-in-out focus-within:outline-hidden data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in`,{variants:{side:{left:`data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r`,right:`data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l`}},defaultVariants:{side:`right`}}),x=u(({children:t,className:n,preferredWidth:r=`sm:max-w-[30rem]`,side:i=`right`,...o},s)=>f(v,{children:[d(y,{}),d(a,{"data-slot":`sheet-content`,"data-mantle-modal-content":!0,className:e(b({side:i}),r,n),ref:s,...o,children:t})]}));x.displayName=a.displayName;const S=({size:e=`md`,type:n=`button`,label:r=`Close Sheet`,appearance:i=`ghost`,...a})=>d(l,{asChild:!0,children:d(t,{"data-slot":`sheet-close-icon-button`,appearance:i,icon:d(p,{}),label:r,size:e,type:n,...a})});S.displayName=`SheetCloseIconButton`;const C=({className:t,...n})=>d(`div`,{"data-slot":`sheet-body`,className:e(`scrollbar scrollbar-gutter-stable text-body flex-1 overflow-y-auto p-6`,t),...n});C.displayName=`SheetBody`;const w=({className:t,...n})=>d(`div`,{"data-slot":`sheet-header`,className:e(`border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4`,`has-[.icon-button]:pr-4`,t),...n});w.displayName=`SheetHeader`;const T=({className:t,...n})=>d(`div`,{"data-slot":`sheet-footer`,className:e(`border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5`,t),...n});T.displayName=`SheetFooter`;const E=u(({className:t,...n},r)=>d(c,{"data-slot":`sheet-title`,ref:r,className:e(`text-strong flex-1 truncate text-lg font-medium`,t),...n}));E.displayName=c.displayName;const D=u(({children:t,className:n,...r},i)=>d(`div`,{"data-slot":`sheet-title-group`,className:e(`flex items-center justify-between gap-2`,n),...r,ref:i,children:t}));D.displayName=`SheetTitleGroup`;const O=u(({className:t,...n},r)=>d(s,{"data-slot":`sheet-description`,ref:r,className:e(`text-body text-sm`,t),...n}));O.displayName=s.displayName;const k=u(({children:t,className:n,...r},i)=>d(`div`,{"data-slot":`sheet-actions`,className:e(`flex h-full items-center gap-2`,n),...r,ref:i,children:t}));k.displayName=`SheetActions`;const A={Root:h,Actions:k,Body:C,Close:_,CloseIconButton:S,Content:x,Description:O,Footer:T,Header:w,Title:E,TitleGroup:D,Trigger:g};export{A as Sheet};
+import{t as e}from"./cx-CBSnSC36.js";import{t}from"./icon-button-C_Ht_g1C.js";import{a as n,c as r,i,n as a,o,r as s,s as c,t as l}from"./primitive-Cn3h4DJg.js";import{forwardRef as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{XIcon as p}from"@phosphor-icons/react/X";import{cva as m}from"class-variance-authority";const h=o;h.displayName=`Sheet`;const g=r;g.displayName=`SheetTrigger`;const _=l;_.displayName=`SheetClose`;const v=n;v.displayName=`SheetPortal`;const y=u(({className:t,...n},r)=>d(i,{"data-slot":`sheet-overlay`,className:e(`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`,t),...n,ref:r}));y.displayName=i.displayName;const b=m(`bg-dialog border-dialog inset-y-0 h-full w-full fixed z-40 flex flex-col shadow-lg outline-hidden transition ease-in-out focus-within:outline-hidden data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in`,{variants:{side:{left:`data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r`,right:`data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l`}},defaultVariants:{side:`right`}}),x=u(({children:t,className:n,preferredWidth:r=`sm:max-w-[30rem]`,side:i=`right`,...o},s)=>f(v,{children:[d(y,{}),d(a,{"data-slot":`sheet-content`,"data-mantle-modal-content":!0,className:e(b({side:i}),r,n),ref:s,...o,children:t})]}));x.displayName=a.displayName;const S=({size:e=`md`,type:n=`button`,label:r=`Close Sheet`,appearance:i=`ghost`,...a})=>d(l,{asChild:!0,children:d(t,{"data-slot":`sheet-close-icon-button`,appearance:i,icon:d(p,{}),label:r,size:e,type:n,...a})});S.displayName=`SheetCloseIconButton`;const C=({className:t,...n})=>d(`div`,{"data-slot":`sheet-body`,className:e(`scrollbar scrollbar-gutter-stable text-body flex-1 overflow-y-auto p-6`,t),...n});C.displayName=`SheetBody`;const w=({className:t,...n})=>d(`div`,{"data-slot":`sheet-header`,className:e(`border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4`,`has-[.icon-button]:pr-4`,t),...n});w.displayName=`SheetHeader`;const T=({className:t,...n})=>d(`div`,{"data-slot":`sheet-footer`,className:e(`border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5`,t),...n});T.displayName=`SheetFooter`;const E=u(({className:t,...n},r)=>d(c,{"data-slot":`sheet-title`,ref:r,className:e(`text-strong flex-1 truncate text-lg font-medium`,t),...n}));E.displayName=c.displayName;const D=u(({children:t,className:n,...r},i)=>d(`div`,{"data-slot":`sheet-title-group`,className:e(`flex items-center justify-between gap-2`,n),...r,ref:i,children:t}));D.displayName=`SheetTitleGroup`;const O=u(({className:t,...n},r)=>d(s,{"data-slot":`sheet-description`,ref:r,className:e(`text-body text-sm`,t),...n}));O.displayName=s.displayName;const k=u(({children:t,className:n,...r},i)=>d(`div`,{"data-slot":`sheet-actions`,className:e(`flex h-full items-center gap-2`,n),...r,ref:i,children:t}));k.displayName=`SheetActions`;const A={Root:h,Actions:k,Body:C,Close:_,CloseIconButton:S,Content:x,Description:O,Footer:T,Header:w,Title:E,TitleGroup:D,Trigger:g};export{A as Sheet};
 //# sourceMappingURL=sheet.js.map

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(\n\t\t\t\"scrollbar scrollbar-gutter-stable text-body flex-1 overflow-y-auto p-6\",\n\t\t\tclassName,\n\t\t)}\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,EACV,yEACA,EACA,CACD,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"}
+{"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(\n\t\t\t\"scrollbar scrollbar-gutter-stable text-body flex-1 overflow-y-auto p-6\",\n\t\t\tclassName,\n\t\t)}\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,CACD,EACA,GAAI,EACC,KACL,CAAA,CACD,EACD,EAAa,YAAA,EAAqC,YAElD,MAAM,EAAgB,EACrB,4QACA,CACC,SAAU,CAIT,KAAM,CACL,KAAM,yFACN,MACC,2FACF,CACD,EACA,gBAAiB,CAChB,KAAM,OACP,CACD,CACD,EAkEM,EAAU,GACd,CAAE,WAAU,YAAW,iBAAiB,mBAAoB,OAAO,QAAS,GAAG,GAAS,IACxF,EAAC,EAAD,CAAA,SAAA,CACC,EAAC,EAAD,CAAe,CAAA,EACf,EAACC,EAAD,CACC,YAAU,gBACV,4BAAA,GACA,UAAW,EAAG,EAAc,CAAE,MAAK,CAAC,EAAG,EAAgB,CAAS,EAC3D,MACL,GAAI,EAEH,UACsB,CAAA,CACZ,CAAA,CAAA,CAEf,EACA,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,CAAQ,CAAA,EACP,QACD,OACA,OACN,GAAI,CACJ,CAAA,CACoB,CAAA,EAEvB,EAAgB,YAAc,uBAmD9B,MAAM,GAAQ,CAAE,YAAW,GAAG,KAC7B,EAAC,MAAD,CACC,YAAU,aACV,UAAW,EACV,yEACA,CACD,EACA,GAAI,CACJ,CAAA,EAEF,EAAK,YAAc,YAmDnB,MAAM,GAAU,CAAE,YAAW,GAAG,KAC/B,EAAC,MAAD,CACC,YAAU,eACV,UAAW,EACV,2EACA,0BACA,CACD,EACA,GAAI,CACJ,CAAA,EAEF,EAAO,YAAc,cAmDrB,MAAM,GAAU,CAAE,YAAW,GAAG,KAC/B,EAAC,MAAD,CACC,YAAU,eACV,UAAW,EACV,2EACA,CACD,EACA,GAAI,CACJ,CAAA,EAEF,EAAO,YAAc,cAmDrB,MAAM,EAAQ,GAGX,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACI,EAAD,CACC,YAAU,cACL,MACL,UAAW,EAAG,kDAAmD,CAAS,EAC1E,GAAI,CACJ,CAAA,CACD,EACD,EAAM,YAAA,EAAmC,YAkDzC,MAAM,EAAa,GACjB,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,MAAD,CACC,YAAU,oBACV,UAAW,EAAG,0CAA2C,CAAS,EAClE,GAAI,EACC,MAEJ,UACG,CAAA,CAEP,EACA,EAAW,YAAc,kBAkDzB,MAAM,EAAc,GAGjB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACC,EAAD,CACC,YAAU,oBACL,MACL,UAAW,EAAG,oBAAqB,CAAS,EAC5C,GAAI,CACJ,CAAA,CACD,EACD,EAAY,YAAA,EAAyC,YAkDrD,MAAM,EAAU,GACd,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,MAAD,CACC,YAAU,gBACV,UAAW,EAAG,iCAAkC,CAAS,EACzD,GAAI,EACC,MAEJ,UACG,CAAA,CAEP,EACA,EAAQ,YAAc,eAwHtB,MAAM,EAAQ,CAsCb,OAqCA,UAsCA,OAuCA,QAsCA,kBAuCA,UAqCA,cAsCA,SAsCA,SAsCA,QAqCA,aAsCA,SACD"}

package/dist/skeleton.d.ts

@@ -1,5 +1,3 @@
-import * as _$react from "react";
-
 //#region src/components/skeleton/skeleton.d.ts
 /**
  * A skeleton is a placeholder for content that is loading. By rendering a
@@ -46,13 +44,13 @@ import * as _$react from "react";
  * </div>
  * ```
  */
-declare const Skeleton: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttributes<HTMLDivElement> & _$react.HTMLAttributes<HTMLDivElement> & {
+declare const Skeleton: import("react").ForwardRefExoticComponent<(Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
   asChild: true;
-  children: _$react.ReactNode;
-}, "ref"> | Omit<_$react.ClassAttributes<HTMLDivElement> & _$react.HTMLAttributes<HTMLDivElement> & {
+  children: import("react").ReactNode;
+}, "ref"> | Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
   asChild?: false | undefined;
   children?: undefined;
-}, "ref">) & _$react.RefAttributes<HTMLDivElement>>;
+}, "ref">) & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Skeleton };
 //# sourceMappingURL=skeleton.d.ts.map

package/dist/skeleton.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./slot-D_ZUrdEW.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({asChild:n=!1,className:i,...a},o)=>r(n?t:`div`,{"data-slot":`skeleton`,className:e(`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`,i),ref:o,...a}));i.displayName=`Skeleton`;export{i as Skeleton};
+import{t as e}from"./cx-CBSnSC36.js";import{t}from"./slot-CV5fmqFr.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({asChild:n=!1,className:i,...a},o)=>r(n?t:`div`,{"data-slot":`skeleton`,className:e(`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`,i),ref:o,...a}));i.displayName=`Skeleton`;export{i as Skeleton};
 //# sourceMappingURL=skeleton.js.map

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. 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"}
+{"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,CACD,EACK,MACL,GAAI,CACJ,CAAA,CAGJ,EACA,EAAS,YAAc"}

package/dist/skip-to-main-link.d.ts

@@ -1,5 +1,4 @@
 import { ComponentProps } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/skip-to-main-link/skip-to-main-link.d.ts
 type SkipToMainLinkProps = Omit<ComponentProps<"a">, "href"> & {
@@ -42,7 +41,7 @@ declare const SkipToMainLink: {
     onClick,
     targetId,
     ...props
-  }: SkipToMainLinkProps): _$react_jsx_runtime0.JSX.Element;
+  }: SkipToMainLinkProps): import("react/jsx-runtime").JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/skip-to-main-link.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./anchor-2stEauOz.js";import{jsx as n}from"react/jsx-runtime";const r=({children:r=`Skip to main content`,className:i,onClick:a,targetId:o=`main`,...s})=>n(t,{...s,"data-slot":`skip-to-main-link`,href:`#${o}`,onClick:e=>{e.preventDefault(),window.history.replaceState(null,``,`#${o}`),document.getElementById(o)?.focus({preventScroll:!0}),a?.(e)},className:e(`not-focus:sr-only bg-card fixed top-2 left-2 z-max px-4 py-2 shadow-lg`,i),children:r});r.displayName=`SkipToMainLink`;export{r as SkipToMainLink};
+import{t as e}from"./cx-CBSnSC36.js";import{t}from"./anchor-CcTY5SIz.js";import{jsx as n}from"react/jsx-runtime";const r=({children:r=`Skip to main content`,className:i,onClick:a,targetId:o=`main`,...s})=>n(t,{...s,"data-slot":`skip-to-main-link`,href:`#${o}`,onClick:e=>{e.preventDefault(),window.history.replaceState(null,``,`#${o}`),document.getElementById(o)?.focus({preventScroll:!0}),a?.(e)},className:e(`not-focus:sr-only bg-card fixed top-2 left-2 z-max px-4 py-2 shadow-lg`,i),children:r});r.displayName=`SkipToMainLink`;export{r as SkipToMainLink};
 //# sourceMappingURL=skip-to-main-link.js.map

package/dist/skip-to-main-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"skip-to-main-link.js","names":[],"sources":["../src/components/skip-to-main-link/skip-to-main-link.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { Anchor } from \"../anchor/anchor.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype SkipToMainLinkProps = Omit<ComponentProps<\"a\">, \"href\"> & {\n\t/**\n\t * The id of the target element to focus when the link is activated.\n\t * Must match the `id` on the `<Main>` (or any focusable landmark) you\n\t * want keyboard users to be sent to.\n\t *\n\t * @default \"main\"\n\t */\n\ttargetId?: string;\n};\n\n/**\n * A visually-hidden-until-focused \"skip link\" that lets keyboard users jump\n * past repeated navigation and land directly on the page's main content\n * landmark. When activated, it updates the URL hash and focuses the element\n * identified by `targetId` (defaulting to `\"main\"`) without scrolling. It\n * still renders a plain anchor with `href=\"#${targetId}\"` to preserve link\n * semantics, support copy-link / no-JavaScript fallback behavior, and avoid\n * any router dependency in React Router, Next.js, or plain HTML.\n *\n * Pair with the `<Main>` component (or any element with a matching `id`\n * and `tabIndex={-1}`) so it can receive focus.\n *\n * @see https://mantle.ngrok.com/components/skip-to-main-link\n *\n * @example\n * ```tsx\n * <SkipToMainLink />\n * <Header />\n * <Main>\n *   <h1>Page title</h1>\n * </Main>\n * ```\n */\nconst SkipToMainLink = ({\n\tchildren = \"Skip to main content\",\n\tclassName,\n\tonClick,\n\ttargetId = \"main\",\n\t...props\n}: SkipToMainLinkProps) => {\n\treturn (\n\t\t<Anchor\n\t\t\t{...props}\n\t\t\tdata-slot=\"skip-to-main-link\"\n\t\t\thref={`#${targetId}`}\n\t\t\tonClick={(event) => {\n\t\t\t\tevent.preventDefault();\n\t\t\t\twindow.history.replaceState(null, \"\", `#${targetId}`);\n\t\t\t\tdocument.getElementById(targetId)?.focus({ preventScroll: true });\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\tclassName={cx(\n\t\t\t\t\"not-focus:sr-only bg-card fixed top-2 left-2 z-max px-4 py-2 shadow-lg\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</Anchor>\n\t);\n};\nSkipToMainLink.displayName = \"SkipToMainLink\";\n\nexport {\n\t//,\n\tSkipToMainLink,\n};\n"],"mappings":"iHAsCA,MAAM,GAAkB,CACvB,WAAW,uBACX,YACA,UACA,WAAW,OACX,GAAG,KAGF,EAAC,EAAD,CACC,GAAI,EACJ,YAAU,oBACV,KAAM,IAAI,IACV,QAAU,GAAU,CACnB,EAAM,gBAAgB,CACtB,OAAO,QAAQ,aAAa,KAAM,GAAI,IAAI,IAAW,CACrD,SAAS,eAAe,EAAS,EAAE,MAAM,CAAE,cAAe,GAAM,CAAC,CACjE,IAAU,EAAM,EAEjB,UAAW,EACV,yEACA,EACA,CAEA,WACO,CAAA,CAGX,EAAe,YAAc"}
+{"version":3,"file":"skip-to-main-link.js","names":[],"sources":["../src/components/skip-to-main-link/skip-to-main-link.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { Anchor } from \"../anchor/anchor.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype SkipToMainLinkProps = Omit<ComponentProps<\"a\">, \"href\"> & {\n\t/**\n\t * The id of the target element to focus when the link is activated.\n\t * Must match the `id` on the `<Main>` (or any focusable landmark) you\n\t * want keyboard users to be sent to.\n\t *\n\t * @default \"main\"\n\t */\n\ttargetId?: string;\n};\n\n/**\n * A visually-hidden-until-focused \"skip link\" that lets keyboard users jump\n * past repeated navigation and land directly on the page's main content\n * landmark. When activated, it updates the URL hash and focuses the element\n * identified by `targetId` (defaulting to `\"main\"`) without scrolling. It\n * still renders a plain anchor with `href=\"#${targetId}\"` to preserve link\n * semantics, support copy-link / no-JavaScript fallback behavior, and avoid\n * any router dependency in React Router, Next.js, or plain HTML.\n *\n * Pair with the `<Main>` component (or any element with a matching `id`\n * and `tabIndex={-1}`) so it can receive focus.\n *\n * @see https://mantle.ngrok.com/components/skip-to-main-link\n *\n * @example\n * ```tsx\n * <SkipToMainLink />\n * <Header />\n * <Main>\n *   <h1>Page title</h1>\n * </Main>\n * ```\n */\nconst SkipToMainLink = ({\n\tchildren = \"Skip to main content\",\n\tclassName,\n\tonClick,\n\ttargetId = \"main\",\n\t...props\n}: SkipToMainLinkProps) => {\n\treturn (\n\t\t<Anchor\n\t\t\t{...props}\n\t\t\tdata-slot=\"skip-to-main-link\"\n\t\t\thref={`#${targetId}`}\n\t\t\tonClick={(event) => {\n\t\t\t\tevent.preventDefault();\n\t\t\t\twindow.history.replaceState(null, \"\", `#${targetId}`);\n\t\t\t\tdocument.getElementById(targetId)?.focus({ preventScroll: true });\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\tclassName={cx(\n\t\t\t\t\"not-focus:sr-only bg-card fixed top-2 left-2 z-max px-4 py-2 shadow-lg\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</Anchor>\n\t);\n};\nSkipToMainLink.displayName = \"SkipToMainLink\";\n\nexport {\n\t//,\n\tSkipToMainLink,\n};\n"],"mappings":"iHAsCA,MAAM,GAAkB,CACvB,WAAW,uBACX,YACA,UACA,WAAW,OACX,GAAG,KAGF,EAAC,EAAD,CACC,GAAI,EACJ,YAAU,oBACV,KAAM,IAAI,IACV,QAAU,GAAU,CACnB,EAAM,eAAe,EACrB,OAAO,QAAQ,aAAa,KAAM,GAAI,IAAI,GAAU,EACpD,SAAS,eAAe,CAAQ,GAAG,MAAM,CAAE,cAAe,EAAK,CAAC,EAChE,IAAU,CAAK,CAChB,EACA,UAAW,EACV,yEACA,CACD,EAEC,UACM,CAAA,EAGV,EAAe,YAAc"}

package/dist/slider.d.ts

@@ -1,5 +1,4 @@
 import { ComponentProps } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 
 //#region src/components/slider/slider.d.ts
@@ -110,7 +109,7 @@ declare function Slider({
   showTicks,
   value,
   ...props
-}: SliderProps): _$react_jsx_runtime0.JSX.Element;
+}: SliderProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
 export { Slider, type SliderProps };
 //# sourceMappingURL=slider.d.ts.map

package/dist/slider.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./field-context-B7Z1cmZW.js";import{useContext as n}from"react";import{jsx as r,jsxs as i}from"react/jsx-runtime";import*as a from"@radix-ui/react-slider";function o({"aria-describedby":o,"aria-errormessage":l,"aria-invalid":u,"aria-label":d,"aria-labelledby":f,className:p,color:m=`bg-accent-600`,defaultValue:h,id:g,max:_=100,min:v=0,minStepsBetweenThumbs:y=1,name:b,step:x=1,showTicks:S=!1,value:C,...w}){let T=n(t),E=C==null?void 0:Array.isArray(C)?C:[C],D=h==null?void 0:Array.isArray(h)?h:[h],O=E??D??[v],k=s(S,v,_,x);return i(a.Root,{"data-slot":`slider`,defaultValue:D,value:E,...T?{}:{"aria-describedby":o,"aria-errormessage":l,"aria-invalid":u,id:g},min:v,minStepsBetweenThumbs:y,max:_,name:b,step:x,className:e(`[--slider-thumb-size:--spacing(4.5)]`,`data-orientation-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-orientation-vertical:h-full data-orientation-vertical:w-auto data-orientation-vertical:flex-col`,k>0&&`mb-3`,p),...w,children:[r(a.Track,{"data-slot":`slider-track`,className:e(`bg-neutral-300 rounded-full relative grow overflow-hidden`,`data-orientation-horizontal:h-1.5 data-orientation-horizontal:w-full`,`data-orientation-vertical:w-1.5 data-orientation-vertical:h-full`),children:r(a.Range,{"data-slot":`slider-range`,className:e(`absolute select-none data-orientation-horizontal:h-full data-orientation-vertical:w-full`,m)})}),Array.from({length:O.length},(t,n)=>r(a.Thumb,{"data-slot":`slider-thumb`,"aria-describedby":T?.[`aria-describedby`]??o,"aria-errormessage":T?.[`aria-errormessage`]??l,"aria-invalid":T?.[`aria-invalid`]??u,"aria-label":c({ariaLabel:d,index:n,thumbCount:O.length}),"aria-labelledby":f,id:n===0?T?.id:void 0,className:e(`bg-card border-card relative size-(--slider-thumb-size) rounded-full border`,`shadow-md transition-[color,box-shadow]`,`after:absolute after:-inset-2`,`focus-visible:ring-3 focus-visible:ring-accent-500/20 focus-visible:outline-hidden`,`block shrink-0 cursor-pointer select-none`,`data-disabled:pointer-events-none data-disabled:cursor-default`)},n)),k>0&&r(`div`,{"data-slot":`slider-ticks`,className:`absolute top-full mt-1.5 flex w-full justify-between px-[calc(var(--slider-thumb-size)/2)]`,"aria-hidden":`true`,children:Array.from({length:k},(e,t)=>r(`span`,{"data-slot":`slider-tick`,className:`bg-card-border h-1.5 w-px`},t))})]})}function s(e,t,n,r){let i=n-t;return!e||!Number.isFinite(i)||!Number.isFinite(r)||r<=0||i<=0?0:Math.floor(i/r)+1}function c({ariaLabel:e,index:t,thumbCount:n}){if(e)return n===1?e:n===2?`${t===0?`Minimum`:`Maximum`} ${e}`:`${e} ${t+1} of ${n}`}export{o as Slider};
+import{t as e}from"./cx-CBSnSC36.js";import{t}from"./field-context-4k1kI7Bo.js";import{useContext as n}from"react";import{jsx as r,jsxs as i}from"react/jsx-runtime";import*as a from"@radix-ui/react-slider";function o({"aria-describedby":o,"aria-errormessage":l,"aria-invalid":u,"aria-label":d,"aria-labelledby":f,className:p,color:m=`bg-accent-600`,defaultValue:h,id:g,max:_=100,min:v=0,minStepsBetweenThumbs:y=1,name:b,step:x=1,showTicks:S=!1,value:C,...w}){let T=n(t),E=C==null?void 0:Array.isArray(C)?C:[C],D=h==null?void 0:Array.isArray(h)?h:[h],O=E??D??[v],k=s(S,v,_,x);return i(a.Root,{"data-slot":`slider`,defaultValue:D,value:E,...T?{}:{"aria-describedby":o,"aria-errormessage":l,"aria-invalid":u,id:g},min:v,minStepsBetweenThumbs:y,max:_,name:b,step:x,className:e(`[--slider-thumb-size:--spacing(4.5)]`,`data-orientation-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-orientation-vertical:h-full data-orientation-vertical:w-auto data-orientation-vertical:flex-col`,k>0&&`mb-3`,p),...w,children:[r(a.Track,{"data-slot":`slider-track`,className:e(`bg-neutral-300 rounded-full relative grow overflow-hidden`,`data-orientation-horizontal:h-1.5 data-orientation-horizontal:w-full`,`data-orientation-vertical:w-1.5 data-orientation-vertical:h-full`),children:r(a.Range,{"data-slot":`slider-range`,className:e(`absolute select-none data-orientation-horizontal:h-full data-orientation-vertical:w-full`,m)})}),Array.from({length:O.length},(t,n)=>r(a.Thumb,{"data-slot":`slider-thumb`,"aria-describedby":T?.[`aria-describedby`]??o,"aria-errormessage":T?.[`aria-errormessage`]??l,"aria-invalid":T?.[`aria-invalid`]??u,"aria-label":c({ariaLabel:d,index:n,thumbCount:O.length}),"aria-labelledby":f,id:n===0?T?.id:void 0,className:e(`bg-card border-card relative size-(--slider-thumb-size) rounded-full border`,`shadow-md transition-[color,box-shadow]`,`after:absolute after:-inset-2`,`focus-visible:ring-3 focus-visible:ring-accent-500/20 focus-visible:outline-hidden`,`block shrink-0 cursor-pointer select-none`,`data-disabled:pointer-events-none data-disabled:cursor-default`)},n)),k>0&&r(`div`,{"data-slot":`slider-ticks`,className:`absolute top-full mt-1.5 flex w-full justify-between px-[calc(var(--slider-thumb-size)/2)]`,"aria-hidden":`true`,children:Array.from({length:k},(e,t)=>r(`span`,{"data-slot":`slider-tick`,className:`bg-card-border h-1.5 w-px`},t))})]})}function s(e,t,n,r){let i=n-t;return!e||!Number.isFinite(i)||!Number.isFinite(r)||r<=0||i<=0?0:Math.floor(i/r)+1}function c({ariaLabel:e,index:t,thumbCount:n}){if(e)return n===1?e:n===2?`${t===0?`Minimum`:`Maximum`} ${e}`:`${e} ${t+1} of ${n}`}export{o as Slider};
 //# sourceMappingURL=slider.js.map

package/dist/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":[],"sources":["../src/components/slider/slider.tsx"],"sourcesContent":["\"use client\";\n\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport type { ComponentProps } from \"react\";\nimport { useContext } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { FieldControlContext } from \"../field/field-context.js\";\n\ntype SliderBaseProps = Omit<ComponentProps<typeof SliderPrimitive.Root>, \"defaultValue\" | \"value\">;\n\n/**\n * Value props for the {@link Slider} component. Either both `defaultValue` and\n * `value` must be the same type (both `number` or both `number[]`), or only one\n * may be provided.\n */\ntype SliderValueProps =\n\t| {\n\t\t\t/**\n\t\t\t * The value of the slider when initially rendered. Use when you do not need\n\t\t\t * to control the state of the slider.\n\t\t\t */\n\t\t\tdefaultValue?: number;\n\t\t\t/**\n\t\t\t * The controlled value of the slider. Must be used with `onValueChange`.\n\t\t\t */\n\t\t\tvalue?: number;\n\t  }\n\t| {\n\t\t\t/**\n\t\t\t * The values of the slider when initially rendered. Use when you do not need\n\t\t\t * to control the state of the slider. Pass an array to create a range slider\n\t\t\t * with multiple thumbs.\n\t\t\t */\n\t\t\tdefaultValue?: number[];\n\t\t\t/**\n\t\t\t * The controlled values of the slider. Must be used with `onValueChange`.\n\t\t\t * Pass an array to create a range slider with multiple thumbs.\n\t\t\t */\n\t\t\tvalue?: number[];\n\t  };\n\n/**\n * Props for the {@link Slider} component.\n */\ntype SliderProps = SliderBaseProps &\n\tSliderValueProps & {\n\t\t/**\n\t\t * The color of the slider range. Accepts any Tailwind `bg-*` class.\n\t\t * @default \"bg-accent-500\"\n\t\t */\n\t\tcolor?: `bg-${string}`;\n\t\t/**\n\t\t * Whether to show tick marks along the track at each `step` interval.\n\t\t * @default false\n\t\t */\n\t\tshowTicks?: boolean;\n\t};\n\n/**\n * An input where the user selects a value from within a given range.\n *\n * When composing with `Field.Item`, wrap `Slider` in `Field.Control`.\n * `Field.Control` flows `aria-invalid`, `aria-describedby`, and\n * `aria-errormessage` onto each thumb via `FieldControlContext`. Because\n * slider thumbs are ARIA slider widgets rather than native labelable controls,\n * pass `aria-label` or `aria-labelledby` to `Slider`; Mantle forwards those\n * labels to the rendered thumb(s).\n *\n * @see https://mantle.ngrok.com/components/slider\n *\n * @example\n * ```tsx\n * // single thumb\n * <Slider\n *   aria-label=\"Volume\"\n *   defaultValue={75}\n *   max={100}\n *   step={1}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // range\n *  <Slider\n *    aria-label=\"Price\"\n *    defaultValue={[25, 50]}\n *    max={100}\n *    step={5}\n *  />\n * ```\n *\n * @example\n * ```tsx\n * // multiple thumbs\n * <Slider\n *   aria-label=\"Breakpoint\"\n *   defaultValue={[10, 20, 70]}\n *   max={100}\n *   step={10}\n *  />\n * ```\n */\nfunction Slider({\n\t\"aria-describedby\": ariaDescribedBy,\n\t\"aria-errormessage\": ariaErrorMessage,\n\t\"aria-invalid\": ariaInvalid,\n\t\"aria-label\": ariaLabel,\n\t\"aria-labelledby\": ariaLabelledBy,\n\tclassName,\n\tcolor = \"bg-accent-600\",\n\tdefaultValue,\n\tid,\n\tmax = 100,\n\tmin = 0,\n\tminStepsBetweenThumbs = 1,\n\tname,\n\tstep = 1,\n\tshowTicks = false,\n\tvalue,\n\t...props\n}: SliderProps) {\n\tconst fieldControl = useContext(FieldControlContext);\n\tconst normalizedValue = value != null ? (Array.isArray(value) ? value : [value]) : undefined;\n\tconst normalizedDefaultValue =\n\t\tdefaultValue != null\n\t\t\t? Array.isArray(defaultValue)\n\t\t\t\t? defaultValue\n\t\t\t\t: [defaultValue]\n\t\t\t: undefined;\n\tconst values = normalizedValue ?? normalizedDefaultValue ?? [min];\n\tconst tickCount = computeTickCount(showTicks, min, max, step);\n\n\treturn (\n\t\t<SliderPrimitive.Root\n\t\t\tdata-slot=\"slider\"\n\t\t\tdefaultValue={normalizedDefaultValue}\n\t\t\tvalue={normalizedValue}\n\t\t\t{...(fieldControl\n\t\t\t\t? {}\n\t\t\t\t: {\n\t\t\t\t\t\t\"aria-describedby\": ariaDescribedBy,\n\t\t\t\t\t\t\"aria-errormessage\": ariaErrorMessage,\n\t\t\t\t\t\t\"aria-invalid\": ariaInvalid,\n\t\t\t\t\t\tid,\n\t\t\t\t\t})}\n\t\t\tmin={min}\n\t\t\tminStepsBetweenThumbs={minStepsBetweenThumbs}\n\t\t\tmax={max}\n\t\t\tname={name}\n\t\t\tstep={step}\n\t\t\tclassName={cx(\n\t\t\t\t\"[--slider-thumb-size:--spacing(4.5)]\",\n\t\t\t\t\"data-orientation-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-orientation-vertical:h-full data-orientation-vertical:w-auto data-orientation-vertical:flex-col\",\n\t\t\t\ttickCount > 0 && \"mb-3\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<SliderPrimitive.Track\n\t\t\t\tdata-slot=\"slider-track\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"bg-neutral-300 rounded-full relative grow overflow-hidden\",\n\t\t\t\t\t\"data-orientation-horizontal:h-1.5 data-orientation-horizontal:w-full\",\n\t\t\t\t\t\"data-orientation-vertical:w-1.5 data-orientation-vertical:h-full\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<SliderPrimitive.Range\n\t\t\t\t\tdata-slot=\"slider-range\"\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"absolute select-none data-orientation-horizontal:h-full data-orientation-vertical:w-full\",\n\t\t\t\t\t\tcolor,\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t</SliderPrimitive.Track>\n\t\t\t{Array.from({ length: values.length }, (_, index) => (\n\t\t\t\t<SliderPrimitive.Thumb\n\t\t\t\t\tdata-slot=\"slider-thumb\"\n\t\t\t\t\tkey={index}\n\t\t\t\t\taria-describedby={fieldControl?.[\"aria-describedby\"] ?? ariaDescribedBy}\n\t\t\t\t\taria-errormessage={fieldControl?.[\"aria-errormessage\"] ?? ariaErrorMessage}\n\t\t\t\t\taria-invalid={fieldControl?.[\"aria-invalid\"] ?? ariaInvalid}\n\t\t\t\t\taria-label={resolveThumbAriaLabel({\n\t\t\t\t\t\tariaLabel,\n\t\t\t\t\t\tindex,\n\t\t\t\t\t\tthumbCount: values.length,\n\t\t\t\t\t})}\n\t\t\t\t\taria-labelledby={ariaLabelledBy}\n\t\t\t\t\t// Only the first thumb receives the field-generated id so\n\t\t\t\t\t// Field.Label's htmlFor lands on a unique element. Range/\n\t\t\t\t\t// multi-thumb sliders share the surrounding aria wiring.\n\t\t\t\t\tid={index === 0 ? fieldControl?.id : undefined}\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"bg-card border-card relative size-(--slider-thumb-size) rounded-full border\",\n\t\t\t\t\t\t\"shadow-md transition-[color,box-shadow]\",\n\t\t\t\t\t\t\"after:absolute after:-inset-2\",\n\t\t\t\t\t\t\"focus-visible:ring-3 focus-visible:ring-accent-500/20 focus-visible:outline-hidden\",\n\t\t\t\t\t\t\"block shrink-0 cursor-pointer select-none\",\n\t\t\t\t\t\t\"data-disabled:pointer-events-none data-disabled:cursor-default\",\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t))}\n\t\t\t{tickCount > 0 && (\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"slider-ticks\"\n\t\t\t\t\tclassName=\"absolute top-full mt-1.5 flex w-full justify-between px-[calc(var(--slider-thumb-size)/2)]\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t{Array.from({ length: tickCount }, (_, index) => (\n\t\t\t\t\t\t<span key={index} data-slot=\"slider-tick\" className=\"bg-card-border h-1.5 w-px\" />\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</SliderPrimitive.Root>\n\t);\n}\n\nexport { Slider };\nexport type { SliderProps };\n\n// MARK: - Private\n\n/**\n * Compute the number of tick marks to render based on the slider's range and step.\n * Returns 0 if ticks are disabled or if the step/range is invalid.\n */\nfunction computeTickCount(showTicks: boolean, min: number, max: number, step: number): number {\n\tconst range = max - min;\n\tif (!showTicks || !Number.isFinite(range) || !Number.isFinite(step) || step <= 0 || range <= 0) {\n\t\treturn 0;\n\t}\n\treturn Math.floor(range / step) + 1;\n}\n\nfunction resolveThumbAriaLabel({\n\tariaLabel,\n\tindex,\n\tthumbCount,\n}: {\n\tariaLabel?: string;\n\tindex: number;\n\tthumbCount: number;\n}): string | undefined {\n\tif (!ariaLabel) {\n\t\treturn undefined;\n\t}\n\n\tif (thumbCount === 1) {\n\t\treturn ariaLabel;\n\t}\n\n\tif (thumbCount === 2) {\n\t\treturn `${index === 0 ? \"Minimum\" : \"Maximum\"} ${ariaLabel}`;\n\t}\n\n\treturn `${ariaLabel} ${index + 1} of ${thumbCount}`;\n}\n"],"mappings":"8MAuGA,SAAS,EAAO,CACf,mBAAoB,EACpB,oBAAqB,EACrB,eAAgB,EAChB,aAAc,EACd,kBAAmB,EACnB,YACA,QAAQ,gBACR,eACA,KACA,MAAM,IACN,MAAM,EACN,wBAAwB,EACxB,OACA,OAAO,EACP,YAAY,GACZ,QACA,GAAG,GACY,CACf,IAAM,EAAe,EAAW,EAAoB,CAC9C,EAAkB,GAAS,KAAkD,IAAA,GAA1C,MAAM,QAAQ,EAAM,CAAG,EAAQ,CAAC,EAAM,CACzE,EACL,GAAgB,KAIb,IAAA,GAHA,MAAM,QAAQ,EAAa,CAC1B,EACA,CAAC,EAAa,CAEb,EAAS,GAAmB,GAA0B,CAAC,EAAI,CAC3D,EAAY,EAAiB,EAAW,EAAK,EAAK,EAAK,CAE7D,OACC,EAAC,EAAgB,KAAjB,CACC,YAAU,SACV,aAAc,EACd,MAAO,EACP,GAAK,EACF,EAAE,CACF,CACA,mBAAoB,EACpB,oBAAqB,EACrB,eAAgB,EAChB,KACA,CACE,MACkB,wBAClB,MACC,OACA,OACN,UAAW,EACV,uCACA,4NACA,EAAY,GAAK,OACjB,EACA,CACD,GAAI,WAvBL,CAyBC,EAAC,EAAgB,MAAjB,CACC,YAAU,eACV,UAAW,EACV,4DACA,uEACA,mEACA,UAED,EAAC,EAAgB,MAAjB,CACC,YAAU,eACV,UAAW,EACV,2FACA,EACA,CACA,CAAA,CACqB,CAAA,CACvB,MAAM,KAAK,CAAE,OAAQ,EAAO,OAAQ,EAAG,EAAG,IAC1C,EAAC,EAAgB,MAAjB,CACC,YAAU,eAEV,mBAAkB,IAAe,qBAAuB,EACxD,oBAAmB,IAAe,sBAAwB,EAC1D,eAAc,IAAe,iBAAmB,EAChD,aAAY,EAAsB,CACjC,YACA,QACA,WAAY,EAAO,OACnB,CAAC,CACF,kBAAiB,EAIjB,GAAI,IAAU,EAAI,GAAc,GAAK,IAAA,GACrC,UAAW,EACV,8EACA,0CACA,gCACA,qFACA,4CACA,iEACA,CACA,CAtBI,EAsBJ,CACD,CACD,EAAY,GACZ,EAAC,MAAD,CACC,YAAU,eACV,UAAU,6FACV,cAAY,gBAEX,MAAM,KAAK,CAAE,OAAQ,EAAW,EAAG,EAAG,IACtC,EAAC,OAAD,CAAkB,YAAU,cAAc,UAAU,4BAA8B,CAAvE,EAAuE,CACjF,CACG,CAAA,CAEe,GAazB,SAAS,EAAiB,EAAoB,EAAa,EAAa,EAAsB,CAC7F,IAAM,EAAQ,EAAM,EAIpB,MAHI,CAAC,GAAa,CAAC,OAAO,SAAS,EAAM,EAAI,CAAC,OAAO,SAAS,EAAK,EAAI,GAAQ,GAAK,GAAS,EACrF,EAED,KAAK,MAAM,EAAQ,EAAK,CAAG,EAGnC,SAAS,EAAsB,CAC9B,YACA,QACA,cAKsB,CACjB,KAYL,OARI,IAAe,EACX,EAGJ,IAAe,EACX,GAAG,IAAU,EAAI,UAAY,UAAU,GAAG,IAG3C,GAAG,EAAU,GAAG,EAAQ,EAAE,MAAM"}
+{"version":3,"file":"slider.js","names":[],"sources":["../src/components/slider/slider.tsx"],"sourcesContent":["\"use client\";\n\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport type { ComponentProps } from \"react\";\nimport { useContext } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { FieldControlContext } from \"../field/field-context.js\";\n\ntype SliderBaseProps = Omit<ComponentProps<typeof SliderPrimitive.Root>, \"defaultValue\" | \"value\">;\n\n/**\n * Value props for the {@link Slider} component. Either both `defaultValue` and\n * `value` must be the same type (both `number` or both `number[]`), or only one\n * may be provided.\n */\ntype SliderValueProps =\n\t| {\n\t\t\t/**\n\t\t\t * The value of the slider when initially rendered. Use when you do not need\n\t\t\t * to control the state of the slider.\n\t\t\t */\n\t\t\tdefaultValue?: number;\n\t\t\t/**\n\t\t\t * The controlled value of the slider. Must be used with `onValueChange`.\n\t\t\t */\n\t\t\tvalue?: number;\n\t  }\n\t| {\n\t\t\t/**\n\t\t\t * The values of the slider when initially rendered. Use when you do not need\n\t\t\t * to control the state of the slider. Pass an array to create a range slider\n\t\t\t * with multiple thumbs.\n\t\t\t */\n\t\t\tdefaultValue?: number[];\n\t\t\t/**\n\t\t\t * The controlled values of the slider. Must be used with `onValueChange`.\n\t\t\t * Pass an array to create a range slider with multiple thumbs.\n\t\t\t */\n\t\t\tvalue?: number[];\n\t  };\n\n/**\n * Props for the {@link Slider} component.\n */\ntype SliderProps = SliderBaseProps &\n\tSliderValueProps & {\n\t\t/**\n\t\t * The color of the slider range. Accepts any Tailwind `bg-*` class.\n\t\t * @default \"bg-accent-500\"\n\t\t */\n\t\tcolor?: `bg-${string}`;\n\t\t/**\n\t\t * Whether to show tick marks along the track at each `step` interval.\n\t\t * @default false\n\t\t */\n\t\tshowTicks?: boolean;\n\t};\n\n/**\n * An input where the user selects a value from within a given range.\n *\n * When composing with `Field.Item`, wrap `Slider` in `Field.Control`.\n * `Field.Control` flows `aria-invalid`, `aria-describedby`, and\n * `aria-errormessage` onto each thumb via `FieldControlContext`. Because\n * slider thumbs are ARIA slider widgets rather than native labelable controls,\n * pass `aria-label` or `aria-labelledby` to `Slider`; Mantle forwards those\n * labels to the rendered thumb(s).\n *\n * @see https://mantle.ngrok.com/components/slider\n *\n * @example\n * ```tsx\n * // single thumb\n * <Slider\n *   aria-label=\"Volume\"\n *   defaultValue={75}\n *   max={100}\n *   step={1}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // range\n *  <Slider\n *    aria-label=\"Price\"\n *    defaultValue={[25, 50]}\n *    max={100}\n *    step={5}\n *  />\n * ```\n *\n * @example\n * ```tsx\n * // multiple thumbs\n * <Slider\n *   aria-label=\"Breakpoint\"\n *   defaultValue={[10, 20, 70]}\n *   max={100}\n *   step={10}\n *  />\n * ```\n */\nfunction Slider({\n\t\"aria-describedby\": ariaDescribedBy,\n\t\"aria-errormessage\": ariaErrorMessage,\n\t\"aria-invalid\": ariaInvalid,\n\t\"aria-label\": ariaLabel,\n\t\"aria-labelledby\": ariaLabelledBy,\n\tclassName,\n\tcolor = \"bg-accent-600\",\n\tdefaultValue,\n\tid,\n\tmax = 100,\n\tmin = 0,\n\tminStepsBetweenThumbs = 1,\n\tname,\n\tstep = 1,\n\tshowTicks = false,\n\tvalue,\n\t...props\n}: SliderProps) {\n\tconst fieldControl = useContext(FieldControlContext);\n\tconst normalizedValue = value != null ? (Array.isArray(value) ? value : [value]) : undefined;\n\tconst normalizedDefaultValue =\n\t\tdefaultValue != null\n\t\t\t? Array.isArray(defaultValue)\n\t\t\t\t? defaultValue\n\t\t\t\t: [defaultValue]\n\t\t\t: undefined;\n\tconst values = normalizedValue ?? normalizedDefaultValue ?? [min];\n\tconst tickCount = computeTickCount(showTicks, min, max, step);\n\n\treturn (\n\t\t<SliderPrimitive.Root\n\t\t\tdata-slot=\"slider\"\n\t\t\tdefaultValue={normalizedDefaultValue}\n\t\t\tvalue={normalizedValue}\n\t\t\t{...(fieldControl\n\t\t\t\t? {}\n\t\t\t\t: {\n\t\t\t\t\t\t\"aria-describedby\": ariaDescribedBy,\n\t\t\t\t\t\t\"aria-errormessage\": ariaErrorMessage,\n\t\t\t\t\t\t\"aria-invalid\": ariaInvalid,\n\t\t\t\t\t\tid,\n\t\t\t\t\t})}\n\t\t\tmin={min}\n\t\t\tminStepsBetweenThumbs={minStepsBetweenThumbs}\n\t\t\tmax={max}\n\t\t\tname={name}\n\t\t\tstep={step}\n\t\t\tclassName={cx(\n\t\t\t\t\"[--slider-thumb-size:--spacing(4.5)]\",\n\t\t\t\t\"data-orientation-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-orientation-vertical:h-full data-orientation-vertical:w-auto data-orientation-vertical:flex-col\",\n\t\t\t\ttickCount > 0 && \"mb-3\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<SliderPrimitive.Track\n\t\t\t\tdata-slot=\"slider-track\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"bg-neutral-300 rounded-full relative grow overflow-hidden\",\n\t\t\t\t\t\"data-orientation-horizontal:h-1.5 data-orientation-horizontal:w-full\",\n\t\t\t\t\t\"data-orientation-vertical:w-1.5 data-orientation-vertical:h-full\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<SliderPrimitive.Range\n\t\t\t\t\tdata-slot=\"slider-range\"\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"absolute select-none data-orientation-horizontal:h-full data-orientation-vertical:w-full\",\n\t\t\t\t\t\tcolor,\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t</SliderPrimitive.Track>\n\t\t\t{Array.from({ length: values.length }, (_, index) => (\n\t\t\t\t<SliderPrimitive.Thumb\n\t\t\t\t\tdata-slot=\"slider-thumb\"\n\t\t\t\t\tkey={index}\n\t\t\t\t\taria-describedby={fieldControl?.[\"aria-describedby\"] ?? ariaDescribedBy}\n\t\t\t\t\taria-errormessage={fieldControl?.[\"aria-errormessage\"] ?? ariaErrorMessage}\n\t\t\t\t\taria-invalid={fieldControl?.[\"aria-invalid\"] ?? ariaInvalid}\n\t\t\t\t\taria-label={resolveThumbAriaLabel({\n\t\t\t\t\t\tariaLabel,\n\t\t\t\t\t\tindex,\n\t\t\t\t\t\tthumbCount: values.length,\n\t\t\t\t\t})}\n\t\t\t\t\taria-labelledby={ariaLabelledBy}\n\t\t\t\t\t// Only the first thumb receives the field-generated id so\n\t\t\t\t\t// Field.Label's htmlFor lands on a unique element. Range/\n\t\t\t\t\t// multi-thumb sliders share the surrounding aria wiring.\n\t\t\t\t\tid={index === 0 ? fieldControl?.id : undefined}\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"bg-card border-card relative size-(--slider-thumb-size) rounded-full border\",\n\t\t\t\t\t\t\"shadow-md transition-[color,box-shadow]\",\n\t\t\t\t\t\t\"after:absolute after:-inset-2\",\n\t\t\t\t\t\t\"focus-visible:ring-3 focus-visible:ring-accent-500/20 focus-visible:outline-hidden\",\n\t\t\t\t\t\t\"block shrink-0 cursor-pointer select-none\",\n\t\t\t\t\t\t\"data-disabled:pointer-events-none data-disabled:cursor-default\",\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t))}\n\t\t\t{tickCount > 0 && (\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"slider-ticks\"\n\t\t\t\t\tclassName=\"absolute top-full mt-1.5 flex w-full justify-between px-[calc(var(--slider-thumb-size)/2)]\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t{Array.from({ length: tickCount }, (_, index) => (\n\t\t\t\t\t\t<span key={index} data-slot=\"slider-tick\" className=\"bg-card-border h-1.5 w-px\" />\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</SliderPrimitive.Root>\n\t);\n}\n\nexport { Slider };\nexport type { SliderProps };\n\n// MARK: - Private\n\n/**\n * Compute the number of tick marks to render based on the slider's range and step.\n * Returns 0 if ticks are disabled or if the step/range is invalid.\n */\nfunction computeTickCount(showTicks: boolean, min: number, max: number, step: number): number {\n\tconst range = max - min;\n\tif (!showTicks || !Number.isFinite(range) || !Number.isFinite(step) || step <= 0 || range <= 0) {\n\t\treturn 0;\n\t}\n\treturn Math.floor(range / step) + 1;\n}\n\nfunction resolveThumbAriaLabel({\n\tariaLabel,\n\tindex,\n\tthumbCount,\n}: {\n\tariaLabel?: string;\n\tindex: number;\n\tthumbCount: number;\n}): string | undefined {\n\tif (!ariaLabel) {\n\t\treturn undefined;\n\t}\n\n\tif (thumbCount === 1) {\n\t\treturn ariaLabel;\n\t}\n\n\tif (thumbCount === 2) {\n\t\treturn `${index === 0 ? \"Minimum\" : \"Maximum\"} ${ariaLabel}`;\n\t}\n\n\treturn `${ariaLabel} ${index + 1} of ${thumbCount}`;\n}\n"],"mappings":"8MAuGA,SAAS,EAAO,CACf,mBAAoB,EACpB,oBAAqB,EACrB,eAAgB,EAChB,aAAc,EACd,kBAAmB,EACnB,YACA,QAAQ,gBACR,eACA,KACA,MAAM,IACN,MAAM,EACN,wBAAwB,EACxB,OACA,OAAO,EACP,YAAY,GACZ,QACA,GAAG,GACY,CACf,IAAM,EAAe,EAAW,CAAmB,EAC7C,EAAkB,GAAS,KAAkD,IAAA,GAA1C,MAAM,QAAQ,CAAK,EAAI,EAAQ,CAAC,CAAK,EACxE,EACL,GAAgB,KAIb,IAAA,GAHA,MAAM,QAAQ,CAAY,EACzB,EACA,CAAC,CAAY,EAEZ,EAAS,GAAmB,GAA0B,CAAC,CAAG,EAC1D,EAAY,EAAiB,EAAW,EAAK,EAAK,CAAI,EAE5D,OACC,EAAC,EAAgB,KAAjB,CACC,YAAU,SACV,aAAc,EACd,MAAO,EACP,GAAK,EACF,CAAC,EACD,CACA,mBAAoB,EACpB,oBAAqB,EACrB,eAAgB,EAChB,IACD,EACG,MACkB,wBAClB,MACC,OACA,OACN,UAAW,EACV,uCACA,4NACA,EAAY,GAAK,OACjB,CACD,EACA,GAAI,WAvBL,CAyBC,EAAC,EAAgB,MAAjB,CACC,YAAU,eACV,UAAW,EACV,4DACA,uEACA,kEACD,WAEA,EAAC,EAAgB,MAAjB,CACC,YAAU,eACV,UAAW,EACV,2FACA,CACD,CACA,CAAA,CACqB,CAAA,EACtB,MAAM,KAAK,CAAE,OAAQ,EAAO,MAAO,GAAI,EAAG,IAC1C,EAAC,EAAgB,MAAjB,CACC,YAAU,eAEV,mBAAkB,IAAe,qBAAuB,EACxD,oBAAmB,IAAe,sBAAwB,EAC1D,eAAc,IAAe,iBAAmB,EAChD,aAAY,EAAsB,CACjC,YACA,QACA,WAAY,EAAO,MACpB,CAAC,EACD,kBAAiB,EAIjB,GAAI,IAAU,EAAI,GAAc,GAAK,IAAA,GACrC,UAAW,EACV,8EACA,0CACA,gCACA,qFACA,4CACA,gEACD,CACA,EAtBK,CAsBL,CACD,EACA,EAAY,GACZ,EAAC,MAAD,CACC,YAAU,eACV,UAAU,6FACV,cAAY,gBAEX,MAAM,KAAK,CAAE,OAAQ,CAAU,GAAI,EAAG,IACtC,EAAC,OAAD,CAAkB,YAAU,cAAc,UAAU,2BAA6B,EAAtE,CAAsE,CACjF,CACG,CAAA,CAEe,GAExB,CAWA,SAAS,EAAiB,EAAoB,EAAa,EAAa,EAAsB,CAC7F,IAAM,EAAQ,EAAM,EAIpB,MAHI,CAAC,GAAa,CAAC,OAAO,SAAS,CAAK,GAAK,CAAC,OAAO,SAAS,CAAI,GAAK,GAAQ,GAAK,GAAS,EACrF,EAED,KAAK,MAAM,EAAQ,CAAI,EAAI,CACnC,CAEA,SAAS,EAAsB,CAC9B,YACA,QACA,cAKsB,CACjB,KAYL,OARI,IAAe,EACX,EAGJ,IAAe,EACX,GAAG,IAAU,EAAI,UAAY,UAAU,GAAG,IAG3C,GAAG,EAAU,GAAG,EAAQ,EAAE,MAAM,GACxC"}