@ngrok/mantle 0.22.2 → 0.23.0

package/dist/checkbox.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { W as WithValidation } from './types-Cs5ck3Vt.js';
+import { W as WithValidation } from './types-DehRoXC5.js';
 
 type CheckedState = boolean | "indeterminate";
 /**

package/dist/combobox.d.ts

@@ -3,7 +3,7 @@ import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as Primitive from '@ariakit/react';
 import { W as WithAsChild } from './as-child-Cvu56SuO.js';
-import { W as WithValidation } from './types-Cs5ck3Vt.js';
+import { W as WithValidation } from './types-DehRoXC5.js';
 
 type ComboboxProps = Primitive.ComboboxProviderProps;
 /**

package/dist/input.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { InputHTMLAttributes, PropsWithChildren } from 'react';
-import { a as WithAutoComplete, b as WithInputType, W as WithValidation } from './types-Cs5ck3Vt.js';
-export { A as AutoComplete, I as InputType, V as Validation } from './types-Cs5ck3Vt.js';
+import { a as WithAutoComplete, b as WithInputType, W as WithValidation } from './types-DehRoXC5.js';
+export { A as AutoComplete, I as InputType, V as Validation } from './types-DehRoXC5.js';
 
 type BaseProps = WithAutoComplete & WithInputType & WithValidation;
 /**

package/dist/pagination.d.ts

@@ -10,7 +10,7 @@ import 'class-variance-authority';
 import './deep-non-nullable-SmpSvoSd.js';
 import '@radix-ui/react-separator';
 import '@radix-ui/react-select';
-import './types-Cs5ck3Vt.js';
+import './types-DehRoXC5.js';
 
 type CursorPaginationProps = ComponentProps<"div"> & {
     /**

package/dist/popover.js

@@ -1,2 +1,2 @@
-import{a as e}from"./chunk-AZ56JGNY.js";import*as o from"@radix-ui/react-popover";import{forwardRef as f}from"react";import{jsx as t}from"react/jsx-runtime";var r=o.Root;r.displayName="Popover";var i=o.Trigger;i.displayName="PopoverTrigger";var p=o.Anchor;p.displayName="PopoverAnchor";var a=o.Close;a.displayName="PopoverClose";var n=f(({className:m,align:P="center",sideOffset:d=4,...s},v)=>t(o.Portal,{children:t(o.Content,{ref:v,align:P,sideOffset:d,className:e("text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 w-72 rounded-md border p-4 shadow-md outline-none",m),...s})}));n.displayName="PopoverContent";export{r as Popover,p as PopoverAnchor,a as PopoverClose,n as PopoverContent,i as PopoverTrigger};
+import{a as t}from"./chunk-AZ56JGNY.js";import*as o from"@radix-ui/react-popover";import{forwardRef as c}from"react";import{jsx as r}from"react/jsx-runtime";var i=o.Root;i.displayName="Popover";var p=o.Trigger;p.displayName="PopoverTrigger";var a=o.Anchor;a.displayName="PopoverAnchor";var n=o.Close;n.displayName="PopoverClose";var m=c(({align:P="center",className:s,onClick:d,sideOffset:v=4,...f},l)=>r(o.Portal,{children:r(o.Content,{align:P,className:t("text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 w-72 rounded-md border p-4 shadow-md outline-none",s),onClick:e=>{e.stopPropagation(),d?.(e)},ref:l,sideOffset:v,...f})}));m.displayName="PopoverContent";export{i as Popover,a as PopoverAnchor,n as PopoverClose,m as PopoverContent,p as PopoverTrigger};
 //# sourceMappingURL=popover.js.map

package/dist/popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A popover is a floating overlay that appears above other elements on the page.\n * Displays rich content in a portal, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the popover.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst Popover = PopoverPrimitive.Root;\nPopover.displayName = \"Popover\";\n\n/**\n * The trigger button that opens the popover.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst PopoverTrigger = PopoverPrimitive.Trigger;\nPopoverTrigger.displayName = \"PopoverTrigger\";\n\n/**\n * An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst PopoverAnchor = PopoverPrimitive.Anchor;\nPopoverAnchor.displayName = \"PopoverAnchor\";\n\n/**\n * A button that closes an open popover.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst PopoverClose = PopoverPrimitive.Close;\nPopoverClose.displayName = \"PopoverClose\";\n\n/**\n * The content to render inside the popover.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst PopoverContent = forwardRef<\n\tComponentRef<typeof PopoverPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n\t<PopoverPrimitive.Portal>\n\t\t<PopoverPrimitive.Content\n\t\t\tref={ref}\n\t\t\talign={align}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cx(\n\t\t\t\t\"text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 w-72 rounded-md border p-4 shadow-md outline-none\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</PopoverPrimitive.Portal>\n));\nPopoverContent.displayName = \"PopoverContent\";\n\nexport {\n\t//,\n\tPopover,\n\tPopoverAnchor,\n\tPopoverClose,\n\tPopoverContent,\n\tPopoverTrigger,\n};\n"],"mappings":"wCAAA,UAAYA,MAAsB,0BAClC,OAAS,cAAAC,MAAkB,QA+DzB,cAAAC,MAAA,oBAjDF,IAAMC,EAA2B,OACjCA,EAAQ,YAAc,UAUtB,IAAMC,EAAkC,UACxCA,EAAe,YAAc,iBAU7B,IAAMC,EAAiC,SACvCA,EAAc,YAAc,gBAU5B,IAAMC,EAAgC,QACtCA,EAAa,YAAc,eAU3B,IAAMC,EAAiBC,EAGrB,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAQ,SAAU,WAAAC,EAAa,EAAG,GAAGC,CAAM,EAAGC,IAC7DX,EAAkB,SAAjB,CACA,SAAAA,EAAkB,UAAjB,CACA,IAAKW,EACL,MAAOH,EACP,WAAYC,EACZ,UAAWG,EACV,waACAL,CACD,EACC,GAAGG,EACL,EACD,CACA,EACDL,EAAe,YAAc","names":["PopoverPrimitive","forwardRef","jsx","Popover","PopoverTrigger","PopoverAnchor","PopoverClose","PopoverContent","forwardRef","className","align","sideOffset","props","ref","cx"]}
+{"version":3,"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A popover is a floating overlay that appears above other elements on the page.\n * Displays rich content in a portal, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the popover.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst Popover = PopoverPrimitive.Root;\nPopover.displayName = \"Popover\";\n\n/**\n * The trigger button that opens the popover.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst PopoverTrigger = PopoverPrimitive.Trigger;\nPopoverTrigger.displayName = \"PopoverTrigger\";\n\n/**\n * An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst PopoverAnchor = PopoverPrimitive.Anchor;\nPopoverAnchor.displayName = \"PopoverAnchor\";\n\n/**\n * A button that closes an open popover.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst PopoverClose = PopoverPrimitive.Close;\nPopoverClose.displayName = \"PopoverClose\";\n\n/**\n * The content to render inside the popover.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst PopoverContent = forwardRef<\n\tComponentRef<typeof PopoverPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\talign = \"center\",\n\t\t\tclassName,\n\t\t\tonClick,\n\t\t\tsideOffset = 4,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<PopoverPrimitive.Portal>\n\t\t\t<PopoverPrimitive.Content\n\t\t\t\talign={align}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 w-72 rounded-md border p-4 shadow-md outline-none\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\t/**\n\t\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t\t * of the PopoverContent\n\t\t\t\t\t */\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</PopoverPrimitive.Portal>\n\t),\n);\nPopoverContent.displayName = \"PopoverContent\";\n\nexport {\n\t//,\n\tPopover,\n\tPopoverAnchor,\n\tPopoverClose,\n\tPopoverContent,\n\tPopoverTrigger,\n};\n"],"mappings":"wCAAA,UAAYA,MAAsB,0BAClC,OAAS,cAAAC,MAAkB,QA0ExB,cAAAC,MAAA,oBA5DH,IAAMC,EAA2B,OACjCA,EAAQ,YAAc,UAUtB,IAAMC,EAAkC,UACxCA,EAAe,YAAc,iBAU7B,IAAMC,EAAiC,SACvCA,EAAc,YAAc,gBAU5B,IAAMC,EAAgC,QACtCA,EAAa,YAAc,eAU3B,IAAMC,EAAiBC,EAItB,CACC,CAEC,MAAAC,EAAQ,SACR,UAAAC,EACA,QAAAC,EACA,WAAAC,EAAa,EACb,GAAGC,CACJ,EACAC,IAEAZ,EAAkB,SAAjB,CACA,SAAAA,EAAkB,UAAjB,CACA,MAAOO,EACP,UAAWM,EACV,waACAL,CACD,EACA,QAAUM,GAAU,CAKnBA,EAAM,gBAAgB,EACtBL,IAAUK,CAAK,CAChB,EACA,IAAKF,EACL,WAAYF,EACX,GAAGC,EACL,EACD,CAEF,EACAN,EAAe,YAAc","names":["PopoverPrimitive","forwardRef","jsx","Popover","PopoverTrigger","PopoverAnchor","PopoverClose","PopoverContent","forwardRef","align","className","onClick","sideOffset","props","ref","cx","event"]}

package/dist/sandboxed-on-click.d.ts

@@ -0,0 +1,66 @@
+import * as react from 'react';
+import { ComponentProps, MouseEventHandler } from 'react';
+import { W as WithAsChild } from './as-child-Cvu56SuO.js';
+
+type BaseProps = {
+    /**
+     * Only call `event.preventDefault()` in the `onClick` handler if the user
+     * has not set `allowClickEventDefault` to `true`. This allows the user to
+     * control whether or not the default behavior of the click event should be
+     * allowed.
+     *
+     * This is useful for links or buttons that should navigate or perform some
+     * action on click.
+     *
+     * @default false
+     */
+    allowClickEventDefault?: boolean;
+};
+type EventProps = BaseProps & {
+    /**
+     * The click event handler.
+     */
+    onClick?: MouseEventHandler<HTMLElement>;
+};
+/**
+ * Props for the sandboxed onClick container. Spread this on the element you want
+ * to prevent the click event from bubbling out of.
+ *
+ * @see https://mantle.ngrok.com/components/sandboxed-on-click#api-sandboxed-on-click
+ */
+declare const sandboxedOnClickProps: ({ allowClickEventDefault, onClick, }?: EventProps) => {
+    /**
+     * Marking an element with the role presentation indicates to assistive
+     * technology that this element should be ignored; it exists to support the
+     * web application and is not meant for humans to interact with directly.
+     *
+     * @see https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/65be35b0f6c6cf8b79e9a748cb657a64b78c6535/docs/rules/no-noninteractive-element-interactions.md#case-this-element-is-catching-bubbled-events-from-elements-that-it-contains
+     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role
+     */
+    readonly role: "presentation";
+    readonly onClick: (event: react.MouseEvent<HTMLElement, MouseEvent>) => void;
+};
+type Props = ComponentProps<"div"> & WithAsChild & BaseProps;
+/**
+ * A container that prevents the click event from bubbling out of it.
+ *
+ * Good to use when you want to provide some action buttons inside of a table
+ * row or list item that navigates on click.
+ *
+ * @see https://mantle.ngrok.com/components/sandboxed-on-click#api-sandboxed-on-click
+ *
+ * @example
+ * ```tsx
+ * <TableRow onClick={() => navigate("/somewhere")}>
+ *   <TableRowCell>
+ *     <SandboxedOnClick allowClickEventDefault>
+ *       <Anchor href="https://ngrok.com/docs">
+ *         See ngrok docs
+ *       </Anchor>
+ *     </SandboxedOnClick>
+ *   </TableRowCell>
+ * </TableRow>
+ */
+declare const SandboxedOnClick: react.ForwardRefExoticComponent<Omit<Props, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+export { SandboxedOnClick, sandboxedOnClickProps };

package/dist/sandboxed-on-click.js

@@ -0,0 +1,2 @@
+import{Slot as a}from"@radix-ui/react-slot";import{forwardRef as l}from"react";import{jsx as d}from"react/jsx-runtime";var n=({allowClickEventDefault:e=!1,onClick:t}={})=>({role:"presentation",onClick:o=>{o.stopPropagation(),e||o.preventDefault(),t?.(o)}}),s=l(({allowClickEventDefault:e=!1,asChild:t=!1,children:o,onClick:p,...r},i)=>d(t?a:"div",{ref:i,...r,...n({allowClickEventDefault:e,onClick:p}),children:o}));s.displayName="SandboxedOnClick";export{s as SandboxedOnClick,n as sandboxedOnClickProps};
+//# sourceMappingURL=sandboxed-on-click.js.map

package/dist/sandboxed-on-click.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/sandboxed-on-click/sandboxed-on-click.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type {\n\tComponentProps,\n\tComponentRef,\n\tHTMLAttributes,\n\tMouseEventHandler,\n} from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\n\ntype BaseProps = {\n\t/**\n\t * Only call `event.preventDefault()` in the `onClick` handler if the user\n\t * has not set `allowClickEventDefault` to `true`. This allows the user to\n\t * control whether or not the default behavior of the click event should be\n\t * allowed.\n\t *\n\t * This is useful for links or buttons that should navigate or perform some\n\t * action on click.\n\t *\n\t * @default false\n\t */\n\tallowClickEventDefault?: boolean;\n};\n\ntype EventProps = BaseProps & {\n\t/**\n\t * The click event handler.\n\t */\n\tonClick?: MouseEventHandler<HTMLElement>;\n};\n\n/**\n * Props for the sandboxed onClick container. Spread this on the element you want\n * to prevent the click event from bubbling out of.\n *\n * @see https://mantle.ngrok.com/components/sandboxed-on-click#api-sandboxed-on-click\n */\nconst sandboxedOnClickProps = ({\n\tallowClickEventDefault = false,\n\tonClick,\n}: EventProps = {}) =>\n\t({\n\t\t/**\n\t\t * Marking an element with the role presentation indicates to assistive\n\t\t * technology that this element should be ignored; it exists to support the\n\t\t * web application and is not meant for humans to interact with directly.\n\t\t *\n\t\t * @see https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/65be35b0f6c6cf8b79e9a748cb657a64b78c6535/docs/rules/no-noninteractive-element-interactions.md#case-this-element-is-catching-bubbled-events-from-elements-that-it-contains\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role\n\t\t */\n\t\trole: \"presentation\",\n\t\tonClick: (event) => {\n\t\t\t/**\n\t\t\t * we _always_ want to stop propagation to prevent the event from bubbling\n\t\t\t * out of the sandboxed container\n\t\t\t */\n\t\t\tevent.stopPropagation();\n\n\t\t\t/**\n\t\t\t * Only call `event.preventDefault()` if the user has not set\n\t\t\t * `allowClickEventDefault` to true. This allows the user to control\n\t\t\t * whether or not the default behavior of the click event should be\n\t\t\t * allowed.\n\t\t\t *\n\t\t\t * This is useful for links or buttons that should navigate or perform\n\t\t\t * some action on click.\n\t\t\t */\n\t\t\tif (!allowClickEventDefault) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t\tonClick?.(event);\n\t\t},\n\t}) as const satisfies HTMLAttributes<HTMLElement>;\n\ntype Props = ComponentProps<\"div\"> & WithAsChild & BaseProps;\n\n/**\n * A container that prevents the click event from bubbling out of it.\n *\n * Good to use when you want to provide some action buttons inside of a table\n * row or list item that navigates on click.\n *\n * @see https://mantle.ngrok.com/components/sandboxed-on-click#api-sandboxed-on-click\n *\n * @example\n * ```tsx\n * <TableRow onClick={() => navigate(\"/somewhere\")}>\n *   <TableRowCell>\n *     <SandboxedOnClick allowClickEventDefault>\n *       <Anchor href=\"https://ngrok.com/docs\">\n *         See ngrok docs\n *       </Anchor>\n *     </SandboxedOnClick>\n *   </TableRowCell>\n * </TableRow>\n */\nconst SandboxedOnClick = forwardRef<ComponentRef<\"div\">, Props>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\tallowClickEventDefault = false,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tonClick,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t\t{...sandboxedOnClickProps({ allowClickEventDefault, onClick })}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nSandboxedOnClick.displayName = \"SandboxedOnClick\";\n\nexport {\n\t//,\n\tSandboxedOnClick,\n\tsandboxedOnClickProps,\n};\n"],"mappings":"AAAA,OAAS,QAAAA,MAAY,uBAOrB,OAAS,cAAAC,MAAkB,QAyGxB,cAAAC,MAAA,oBA1EH,IAAMC,EAAwB,CAAC,CAC9B,uBAAAC,EAAyB,GACzB,QAAAC,CACD,EAAgB,CAAC,KACf,CASA,KAAM,eACN,QAAUC,GAAU,CAKnBA,EAAM,gBAAgB,EAWjBF,GACJE,EAAM,eAAe,EAEtBD,IAAUC,CAAK,CAChB,CACD,GAwBKC,EAAmBN,EACxB,CACC,CAEC,uBAAAG,EAAyB,GACzB,QAAAI,EAAU,GACV,SAAAC,EACA,QAAAJ,EACA,GAAGK,CACJ,EACAC,IAKCT,EAHiBM,EAAUR,EAAO,MAGjC,CACA,IAAKW,EACJ,GAAGD,EACH,GAAGP,EAAsB,CAAE,uBAAAC,EAAwB,QAAAC,CAAQ,CAAC,EAE5D,SAAAI,EACF,CAGH,EACAF,EAAiB,YAAc","names":["Slot","forwardRef","jsx","sandboxedOnClickProps","allowClickEventDefault","onClick","event","SandboxedOnClick","asChild","children","props","ref"]}

package/dist/select.d.ts

@@ -2,7 +2,7 @@ import * as _radix_ui_react_separator from '@radix-ui/react-separator';
 import * as react from 'react';
 import { SelectHTMLAttributes, FocusEvent } from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { W as WithValidation } from './types-Cs5ck3Vt.js';
+import { W as WithValidation } from './types-DehRoXC5.js';
 
 type WithAriaInvalid = Pick<SelectHTMLAttributes<HTMLSelectElement>, "aria-invalid">;
 /**

package/dist/sheet.d.ts

@@ -217,8 +217,19 @@ declare const SheetClose: react.ForwardRefExoticComponent<_radix_ui_react_dialog
  * ```
  */
 declare const SheetContent: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog.DialogContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
-    side?: "left" | "right" | "bottom" | "top" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLDivElement>>;
+    side?: "left" | "right" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    /**
+     * The preferred width of the `SheetContent` as a tailwind `max-w-` class.
+     *
+     * By default, a `Sheet`'s content width is responsive with a default
+     * preferred width: the maximum width of the `SheetContent` when the window
+     * viewport is larger than the mobile breakpoint (`sm`).
+     *
+     * @default `sm:max-w-[30rem]`
+     */
+    preferredWidth?: `sm:max-w-${string}`;
+} & react.RefAttributes<HTMLDivElement>>;
 type SheetCloseIconButtonProps = Partial<Omit<IconButtonProps, "icon">>;
 /**
  * An icon button that closes the `Sheet` when clicked.

package/dist/sheet.js

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

package/dist/sheet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/sheet/sheet.tsx"],"sourcesContent":["import { X } from \"@phosphor-icons/react/X\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport type {\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tHTMLAttributes,\n} 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\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\n\n/**\n * The root component for a `Sheet`. Should compose the `SheetTrigger` and `SheetContent`.\n * Acts as a stateful provider for the Sheet's open/closed state.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet\n *\n * @example\n * ```tsx\n * // Triggering a stateful sheet\n * <Sheet>\n *   <SheetTrigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">\n *       Open Sheet\n *     </Button>\n *   </SheetTrigger>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst Sheet = SheetPrimitive.Root;\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#api-sheet-trigger\n *\n * @example\n * ```tsx\n * <Sheet>\n *   <SheetTrigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">\n *       Open Sheet\n *     </Button>\n *   </SheetTrigger>\n *   <SheetContent>\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 *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetTrigger = SheetPrimitive.Trigger;\n\n/**\n * The close button for a `Sheet`. Should be rendered as a child of the `SheetContent` component.\n * Usually contained within the `SheetFooter` 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#api-sheet-close\n *\n * @example\n * ```tsx\n * <Sheet>\n *   <SheetTrigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">\n *       Open Sheet\n *     </Button>\n *   </SheetTrigger>\n *   <SheetContent>\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 *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetClose = SheetPrimitive.Close;\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 `SheetContent` is rendered into.\n *\n * @private\n */\nconst SheetPortal = SheetPrimitive.Portal;\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 `SheetContent` 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\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-sm\",\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 data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in fixed z-40 flex flex-col shadow-lg outline-none transition ease-in-out focus-within:outline-none\",\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\ttop: \"border-dialog data-state-closed:slide-out-to-top data-state-open:slide-in-from-top inset-x-0 top-0 border-b\",\n\t\t\t\tbottom:\n\t\t\t\t\t\"border-dialog data-state-closed:slide-out-to-bottom data-state-open:slide-in-from-bottom inset-x-0 bottom-0 border-t\",\n\t\t\t\tleft: \"border-dialog data-state-closed:slide-out-to-left data-state-open:slide-in-from-left inset-y-0 left-0 h-full w-full border-r sm:max-w-[30rem]\",\n\t\t\t\tright:\n\t\t\t\t\t\"border-dialog data-state-closed:slide-out-to-right data-state-open:slide-in-from-right inset-y-0 right-0 h-full w-full border-l sm:max-w-[30rem]\",\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<\n\ttypeof SheetPrimitive.Content\n> &\n\tVariantProps<typeof SheetVariants>;\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 `SheetHeader`, `SheetBody`, and `SheetFooter`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-content\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetContent = forwardRef<ComponentRef<\"div\">, SheetContentProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonInteractOutside,\n\t\t\tonPointerDownOutside,\n\t\t\tside = \"right\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<SheetPortal>\n\t\t\t<SheetOverlay />\n\t\t\t<SheetPrimitive.Content\n\t\t\t\tclassName={cx(SheetVariants({ side }), className)}\n\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t}}\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);\nSheetContent.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 `SheetHeader` as a child of `SheetActions`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-close-icon-button\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetCloseIconButton = ({\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\tappearance={appearance}\n\t\t\ticon={<X />}\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);\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 `SheetContent`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-body\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetBody = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)}\n\t\t{...props}\n\t/>\n);\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 `SheetContent`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-header\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetHeader = ({\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLDivElement>) => (\n\t<div\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);\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 `SheetContent`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-footer\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetFooter = ({\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLDivElement>) => (\n\t<div\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);\n\n/**\n * The title for a `Sheet`. Typically rendered as a child of `SheetTitleGroup`.\n * Defaults to an `h2` element, but can be changed via the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-title\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetTitle = forwardRef<\n\tComponentRef<typeof SheetPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.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));\nSheetTitle.displayName = SheetPrimitive.Title.displayName;\n\n/**\n * A group container for the title and actions of a sheet. Typically rendered as a child of `SheetHeader`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-title-group\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetTitleGroup = forwardRef<\n\tComponentRef<\"div\">,\n\tHTMLAttributes<HTMLDivElement>\n>(({ children, className, ...props }, ref) => (\n\t<div\n\t\tclassName={cx(\"flex items-center justify-between gap-2\", className)}\n\t\t{...props}\n\t\tref={ref}\n\t>\n\t\t{children}\n\t</div>\n));\nSheetTitleGroup.displayName = \"SheetTitleGroup\";\n\n/**\n * A description for a sheet. Typically rendered as a child of `SheetHeader`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-description\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetDescription = forwardRef<\n\tComponentRef<typeof SheetPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cx(\"text-body text-sm\", className)}\n\t\t{...props}\n\t/>\n));\nSheetDescription.displayName = SheetPrimitive.Description.displayName;\n\n/**\n * A group container for the actions of a `Sheet`. Typically rendered as a child of `SheetTitleGroup`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-actions\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetActions = forwardRef<\n\tComponentRef<\"div\">,\n\tHTMLAttributes<HTMLDivElement>\n>(({ children, className, ...props }, ref) => (\n\t<div\n\t\tclassName={cx(\"flex h-full items-center gap-2\", className)}\n\t\t{...props}\n\t\tref={ref}\n\t>\n\t\t{children}\n\t</div>\n));\nSheetActions.displayName = \"SheetActions\";\n\nexport {\n\t//,\n\tSheet,\n\tSheetActions,\n\tSheetBody,\n\tSheetClose,\n\tSheetCloseIconButton,\n\tSheetContent,\n\tSheetDescription,\n\tSheetFooter,\n\tSheetHeader,\n\tSheetTitle,\n\tSheetTitleGroup,\n\tSheetTrigger,\n};\n"],"mappings":"qZAAA,OAAS,KAAAA,MAAS,0BAClB,OAA4B,OAAAC,MAAW,2BAMvC,OAAS,cAAAC,MAAkB,QAwL1B,cAAAC,EAoGC,QAAAC,MApGD,oBAjFD,IAAMC,EAAuBC,EA2BvBC,EAA8BC,EAiC9BC,EAA4BC,EAQ5BC,EAA6BC,EAS7BC,EAAeC,EAGnB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3Bd,EAAgBe,EAAf,CACA,UAAWC,EACV,iKACAJ,CACD,EACC,GAAGC,EACJ,IAAKC,EACN,CACA,EACDJ,EAAa,YAA6BK,EAAQ,YAElD,IAAME,EAAgBC,EACrB,kOACA,CACC,SAAU,CAIT,KAAM,CACL,IAAK,8GACL,OACC,uHACD,KAAM,gJACN,MACC,kJACF,CACD,EACA,gBAAiB,CAChB,KAAM,OACP,CACD,CACD,EAyDMC,EAAeR,EACpB,CACC,CACC,SAAAS,EACA,UAAAR,EACA,kBAAAS,EACA,qBAAAC,EACA,KAAAC,EAAO,QACP,GAAGV,CACJ,EACAC,IAEAb,EAACO,EAAA,CACA,UAAAR,EAACU,EAAA,EAAa,EACdV,EAAgBwB,EAAf,CACA,UAAWR,EAAGC,EAAc,CAAE,KAAAM,CAAK,CAAC,EAAGX,CAAS,EAChD,kBAAoBa,GAAU,CAC7BC,EAAgCD,CAAK,EACrCJ,IAAoBI,CAAK,CAC1B,EACA,qBAAuBA,GAAU,CAChCC,EAAgCD,CAAK,EACrCH,IAAuBG,CAAK,CAC7B,EACA,IAAKX,EACJ,GAAGD,EAEH,SAAAO,EACF,GACD,CAEF,EACAD,EAAa,YAA6BK,EAAQ,YAqDlD,IAAMG,EAAuB,CAAC,CAC7B,KAAAC,EAAO,KACP,KAAAC,EAAO,SACP,MAAAC,EAAQ,cACR,WAAAC,EAAa,QACb,GAAGlB,CACJ,IACCb,EAAgBO,EAAf,CAAqB,QAAO,GAC5B,SAAAP,EAACgC,EAAA,CACA,WAAYD,EACZ,KAAM/B,EAACiC,EAAA,EAAE,EACT,MAAOH,EACP,KAAMF,EACN,KAAMC,EACL,GAAGhB,EACL,EACD,EAoDKqB,EAAY,CAAC,CAAE,UAAAtB,EAAW,GAAGC,CAAM,IACxCb,EAAC,OACA,UAAWgB,EAAG,iDAAkDJ,CAAS,EACxE,GAAGC,EACL,EAoDKsB,EAAc,CAAC,CACpB,UAAAvB,EACA,GAAGC,CACJ,IACCb,EAAC,OACA,UAAWgB,EACV,2EACA,0BACAJ,CACD,EACC,GAAGC,EACL,EAoDKuB,EAAc,CAAC,CACpB,UAAAxB,EACA,GAAGC,CACJ,IACCb,EAAC,OACA,UAAWgB,EACV,2EACAJ,CACD,EACC,GAAGC,EACL,EAoDKwB,EAAa1B,EAGjB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3Bd,EAAgBsC,EAAf,CACA,IAAKxB,EACL,UAAWE,EAAG,kDAAmDJ,CAAS,EACzE,GAAGC,EACL,CACA,EACDwB,EAAW,YAA6BC,EAAM,YAkD9C,IAAMC,EAAkB5B,EAGtB,CAAC,CAAE,SAAAS,EAAU,UAAAR,EAAW,GAAGC,CAAM,EAAGC,IACrCd,EAAC,OACA,UAAWgB,EAAG,0CAA2CJ,CAAS,EACjE,GAAGC,EACJ,IAAKC,EAEJ,SAAAM,EACF,CACA,EACDmB,EAAgB,YAAc,kBAkD9B,IAAMC,EAAmB7B,EAGvB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3Bd,EAAgByC,EAAf,CACA,IAAK3B,EACL,UAAWE,EAAG,oBAAqBJ,CAAS,EAC3C,GAAGC,EACL,CACA,EACD2B,EAAiB,YAA6BC,EAAY,YAkD1D,IAAMC,EAAe/B,EAGnB,CAAC,CAAE,SAAAS,EAAU,UAAAR,EAAW,GAAGC,CAAM,EAAGC,IACrCd,EAAC,OACA,UAAWgB,EAAG,iCAAkCJ,CAAS,EACxD,GAAGC,EACJ,IAAKC,EAEJ,SAAAM,EACF,CACA,EACDsB,EAAa,YAAc","names":["X","cva","forwardRef","jsx","jsxs","Sheet","Root","SheetTrigger","Trigger","SheetClose","Close","SheetPortal","Portal","SheetOverlay","forwardRef","className","props","ref","Overlay","cx","SheetVariants","cva","SheetContent","children","onInteractOutside","onPointerDownOutside","side","Content","event","preventCloseOnPromptInteraction","SheetCloseIconButton","size","type","label","appearance","IconButton","X","SheetBody","SheetHeader","SheetFooter","SheetTitle","Title","SheetTitleGroup","SheetDescription","Description","SheetActions"]}
+{"version":3,"sources":["../src/components/sheet/sheet.tsx"],"sourcesContent":["import { X } from \"@phosphor-icons/react/X\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport type {\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tHTMLAttributes,\n} 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\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\n\n/**\n * The root component for a `Sheet`. Should compose the `SheetTrigger` and `SheetContent`.\n * Acts as a stateful provider for the Sheet's open/closed state.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet\n *\n * @example\n * ```tsx\n * // Triggering a stateful sheet\n * <Sheet>\n *   <SheetTrigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">\n *       Open Sheet\n *     </Button>\n *   </SheetTrigger>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst Sheet = SheetPrimitive.Root;\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#api-sheet-trigger\n *\n * @example\n * ```tsx\n * <Sheet>\n *   <SheetTrigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">\n *       Open Sheet\n *     </Button>\n *   </SheetTrigger>\n *   <SheetContent>\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 *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetTrigger = SheetPrimitive.Trigger;\n\n/**\n * The close button for a `Sheet`. Should be rendered as a child of the `SheetContent` component.\n * Usually contained within the `SheetFooter` 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#api-sheet-close\n *\n * @example\n * ```tsx\n * <Sheet>\n *   <SheetTrigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">\n *       Open Sheet\n *     </Button>\n *   </SheetTrigger>\n *   <SheetContent>\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 *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetClose = SheetPrimitive.Close;\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 `SheetContent` is rendered into.\n *\n * @private\n */\nconst SheetPortal = SheetPrimitive.Portal;\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 `SheetContent` 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\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-sm\",\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-none transition ease-in-out focus-within:outline-none 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<\n\ttypeof SheetPrimitive.Content\n> &\n\tVariantProps<typeof SheetVariants> & {\n\t\t/**\n\t\t * The preferred width of the `SheetContent` 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 `SheetContent` 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 `SheetHeader`, `SheetBody`, and `SheetFooter`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-content\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetContent = forwardRef<ComponentRef<\"div\">, SheetContentProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonInteractOutside,\n\t\t\tonPointerDownOutside,\n\t\t\tpreferredWidth = \"sm:max-w-[30rem]\",\n\t\t\tside = \"right\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<SheetPortal>\n\t\t\t<SheetOverlay />\n\t\t\t<SheetPrimitive.Content\n\t\t\t\tclassName={cx(SheetVariants({ side }), preferredWidth, className)}\n\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t}}\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);\nSheetContent.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 `SheetHeader` as a child of `SheetActions`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-close-icon-button\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetCloseIconButton = ({\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\tappearance={appearance}\n\t\t\ticon={<X />}\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);\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 `SheetContent`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-body\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetBody = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)}\n\t\t{...props}\n\t/>\n);\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 `SheetContent`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-header\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetHeader = ({\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLDivElement>) => (\n\t<div\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);\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 `SheetContent`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-footer\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetFooter = ({\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLDivElement>) => (\n\t<div\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);\n\n/**\n * The title for a `Sheet`. Typically rendered as a child of `SheetTitleGroup`.\n * Defaults to an `h2` element, but can be changed via the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-title\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetTitle = forwardRef<\n\tComponentRef<typeof SheetPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.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));\nSheetTitle.displayName = SheetPrimitive.Title.displayName;\n\n/**\n * A group container for the title and actions of a sheet. Typically rendered as a child of `SheetHeader`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-title-group\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetTitleGroup = forwardRef<\n\tComponentRef<\"div\">,\n\tHTMLAttributes<HTMLDivElement>\n>(({ children, className, ...props }, ref) => (\n\t<div\n\t\tclassName={cx(\"flex items-center justify-between gap-2\", className)}\n\t\t{...props}\n\t\tref={ref}\n\t>\n\t\t{children}\n\t</div>\n));\nSheetTitleGroup.displayName = \"SheetTitleGroup\";\n\n/**\n * A description for a sheet. Typically rendered as a child of `SheetHeader`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-description\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetDescription = forwardRef<\n\tComponentRef<typeof SheetPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cx(\"text-body text-sm\", className)}\n\t\t{...props}\n\t/>\n));\nSheetDescription.displayName = SheetPrimitive.Description.displayName;\n\n/**\n * A group container for the actions of a `Sheet`. Typically rendered as a child of `SheetTitleGroup`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-actions\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\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 *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetActions = forwardRef<\n\tComponentRef<\"div\">,\n\tHTMLAttributes<HTMLDivElement>\n>(({ children, className, ...props }, ref) => (\n\t<div\n\t\tclassName={cx(\"flex h-full items-center gap-2\", className)}\n\t\t{...props}\n\t\tref={ref}\n\t>\n\t\t{children}\n\t</div>\n));\nSheetActions.displayName = \"SheetActions\";\n\nexport {\n\t//,\n\tSheet,\n\tSheetActions,\n\tSheetBody,\n\tSheetClose,\n\tSheetCloseIconButton,\n\tSheetContent,\n\tSheetDescription,\n\tSheetFooter,\n\tSheetHeader,\n\tSheetTitle,\n\tSheetTitleGroup,\n\tSheetTrigger,\n};\n"],"mappings":"qZAAA,OAAS,KAAAA,MAAS,0BAClB,OAA4B,OAAAC,MAAW,2BAMvC,OAAS,cAAAC,MAAkB,QAwL1B,cAAAC,EA6GC,QAAAC,MA7GD,oBAjFD,IAAMC,EAAuBC,EA2BvBC,EAA8BC,EAiC9BC,EAA4BC,EAQ5BC,EAA6BC,EAS7BC,EAAeC,EAGnB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3Bd,EAAgBe,EAAf,CACA,UAAWC,EACV,iKACAJ,CACD,EACC,GAAGC,EACJ,IAAKC,EACN,CACA,EACDJ,EAAa,YAA6BK,EAAQ,YAElD,IAAME,EAAgBC,EACrB,wQACA,CACC,SAAU,CAIT,KAAM,CACL,KAAM,yFACN,MACC,2FACF,CACD,EACA,gBAAiB,CAChB,KAAM,OACP,CACD,CACD,EAoEMC,EAAeR,EACpB,CACC,CACC,SAAAS,EACA,UAAAR,EACA,kBAAAS,EACA,qBAAAC,EACA,eAAAC,EAAiB,mBACjB,KAAAC,EAAO,QACP,GAAGX,CACJ,EACAC,IAEAb,EAACO,EAAA,CACA,UAAAR,EAACU,EAAA,EAAa,EACdV,EAAgByB,EAAf,CACA,UAAWT,EAAGC,EAAc,CAAE,KAAAO,CAAK,CAAC,EAAGD,EAAgBX,CAAS,EAChE,kBAAoBc,GAAU,CAC7BC,EAAgCD,CAAK,EACrCL,IAAoBK,CAAK,CAC1B,EACA,qBAAuBA,GAAU,CAChCC,EAAgCD,CAAK,EACrCJ,IAAuBI,CAAK,CAC7B,EACA,IAAKZ,EACJ,GAAGD,EAEH,SAAAO,EACF,GACD,CAEF,EACAD,EAAa,YAA6BM,EAAQ,YAqDlD,IAAMG,EAAuB,CAAC,CAC7B,KAAAC,EAAO,KACP,KAAAC,EAAO,SACP,MAAAC,EAAQ,cACR,WAAAC,EAAa,QACb,GAAGnB,CACJ,IACCb,EAAgBO,EAAf,CAAqB,QAAO,GAC5B,SAAAP,EAACiC,EAAA,CACA,WAAYD,EACZ,KAAMhC,EAACkC,EAAA,EAAE,EACT,MAAOH,EACP,KAAMF,EACN,KAAMC,EACL,GAAGjB,EACL,EACD,EAoDKsB,EAAY,CAAC,CAAE,UAAAvB,EAAW,GAAGC,CAAM,IACxCb,EAAC,OACA,UAAWgB,EAAG,iDAAkDJ,CAAS,EACxE,GAAGC,EACL,EAoDKuB,EAAc,CAAC,CACpB,UAAAxB,EACA,GAAGC,CACJ,IACCb,EAAC,OACA,UAAWgB,EACV,2EACA,0BACAJ,CACD,EACC,GAAGC,EACL,EAoDKwB,EAAc,CAAC,CACpB,UAAAzB,EACA,GAAGC,CACJ,IACCb,EAAC,OACA,UAAWgB,EACV,2EACAJ,CACD,EACC,GAAGC,EACL,EAoDKyB,EAAa3B,EAGjB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3Bd,EAAgBuC,EAAf,CACA,IAAKzB,EACL,UAAWE,EAAG,kDAAmDJ,CAAS,EACzE,GAAGC,EACL,CACA,EACDyB,EAAW,YAA6BC,EAAM,YAkD9C,IAAMC,EAAkB7B,EAGtB,CAAC,CAAE,SAAAS,EAAU,UAAAR,EAAW,GAAGC,CAAM,EAAGC,IACrCd,EAAC,OACA,UAAWgB,EAAG,0CAA2CJ,CAAS,EACjE,GAAGC,EACJ,IAAKC,EAEJ,SAAAM,EACF,CACA,EACDoB,EAAgB,YAAc,kBAkD9B,IAAMC,EAAmB9B,EAGvB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3Bd,EAAgB0C,EAAf,CACA,IAAK5B,EACL,UAAWE,EAAG,oBAAqBJ,CAAS,EAC3C,GAAGC,EACL,CACA,EACD4B,EAAiB,YAA6BC,EAAY,YAkD1D,IAAMC,EAAehC,EAGnB,CAAC,CAAE,SAAAS,EAAU,UAAAR,EAAW,GAAGC,CAAM,EAAGC,IACrCd,EAAC,OACA,UAAWgB,EAAG,iCAAkCJ,CAAS,EACxD,GAAGC,EACJ,IAAKC,EAEJ,SAAAM,EACF,CACA,EACDuB,EAAa,YAAc","names":["X","cva","forwardRef","jsx","jsxs","Sheet","Root","SheetTrigger","Trigger","SheetClose","Close","SheetPortal","Portal","SheetOverlay","forwardRef","className","props","ref","Overlay","cx","SheetVariants","cva","SheetContent","children","onInteractOutside","onPointerDownOutside","preferredWidth","side","Content","event","preventCloseOnPromptInteraction","SheetCloseIconButton","size","type","label","appearance","IconButton","X","SheetBody","SheetHeader","SheetFooter","SheetTitle","Title","SheetTitleGroup","SheetDescription","Description","SheetActions"]}

package/dist/text-area.d.ts

@@ -1,18 +1,33 @@
 import * as react from 'react';
-import { TextareaHTMLAttributes } from 'react';
-import { W as WithValidation } from './types-Cs5ck3Vt.js';
+import { ComponentProps } from 'react';
+import { W as WithValidation } from './types-DehRoXC5.js';
 
-type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & WithValidation & {
+type Props = ComponentProps<"textarea"> & WithValidation & {
     /**
      * The visual style of the textarea.
      */
     appearance?: "monospaced";
 };
-declare const TextArea: react.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & WithValidation & {
-    /**
-     * The visual style of the textarea.
-     */
-    appearance?: "monospaced";
-} & react.RefAttributes<HTMLTextAreaElement>>;
+/**
+ * A multi-line plain-text editing control, useful when you want to allow users
+ * to enter a sizeable amount of free-form text, for example a comment on a
+ * review or feedback form.
+ *
+ * @see https://mantle.ngrok.com/components/text-area#api
+ *
+ * @example
+ * ```tsx
+ * <form>
+ *   <div>
+ *     <Label htmlFor="feedback">Feedback:</Label>
+ *     <TextArea
+ *       id="feedback"
+ *       name="feedback"
+ *       placeholder="Enter your feedback here"
+ *     />
+ *   </div>
+ * </form>
+ */
+declare const TextArea: react.ForwardRefExoticComponent<Omit<Props, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
 
-export { TextArea, type TextAreaProps };
+export { TextArea };

package/dist/text-area.js

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

package/dist/text-area.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/text-area/text-area.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport { forwardRef, useRef, useState } from \"react\";\nimport type { TextareaHTMLAttributes } from \"react\";\nimport type { VariantProps } from \"../../types/variant-props.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { WithValidation } from \"../input/types.js\";\n\nconst textAreaVariants = cva(\n\t\"border-input bg-form data-drag-over:border-dashed data-drag-over:ring-4 flex min-h-24 w-full rounded-md border px-3 py-[calc(theme(spacing[2.5])-1px)] text-base focus-visible:outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50 sm:py-[calc(theme(spacing[2])-1px)] sm:text-sm\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * The visual style of the textarea.\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tmonospaced: \"font-mono text-[0.9375rem] sm:text-[0.8125rem]\",\n\t\t\t},\n\t\t},\n\t},\n);\n\nexport type TextAreaVariants = VariantProps<typeof textAreaVariants>;\n\nexport type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> &\n\tWithValidation & {\n\t\t/**\n\t\t * The visual style of the textarea.\n\t\t */\n\t\tappearance?: \"monospaced\";\n\t};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n\t(\n\t\t{\n\t\t\tappearance,\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tonDragEnter,\n\t\t\tonDragLeave,\n\t\t\tonDropCapture,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\t\tconst [isDragOver, setIsDragOver] = useState(false);\n\t\tconst _ref = useRef<HTMLTextAreaElement | null>(null);\n\n\t\treturn (\n\t\t\t<textarea\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\tappearance === \"monospaced\" &&\n\t\t\t\t\t\t\"pointer-coarse:text-[0.9375rem] font-mono text-[0.8125rem]\",\n\t\t\t\t\t\"border-input bg-form data-drag-over:border-dashed data-drag-over:ring-4 pointer-coarse:py-[calc(theme(spacing[2.5])-1px)] pointer-coarse:text-base flex min-h-24 w-full rounded-md border px-3 py-[calc(theme(spacing[2])-1px)] focus-visible:outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50\",\n\t\t\t\t\t\"placeholder:text-placeholder data-drag-over:border-dashed\",\n\t\t\t\t\t\"border-form text-strong ring-focus-accent focus:border-accent-600 data-drag-over:border-accent-600\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:ring-focus-danger data-validation-error:focus-visible:border-danger-600 data-validation-error:data-drag-over:border-danger-600\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:ring-focus-success data-validation-success:focus-visible:border-success-600 data-validation-success:data-drag-over:border-success-600\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:ring-focus-warning data-validation-warning:focus-visible:border-warning-600 data-validation-warning:data-drag-over:border-warning-600\",\n\t\t\t\t\t//,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-drag-over={isDragOver}\n\t\t\t\tonDragEnter={(event) => {\n\t\t\t\t\tsetIsDragOver(true);\n\t\t\t\t\tonDragEnter?.(event);\n\t\t\t\t}}\n\t\t\t\tonDragLeave={(event) => {\n\t\t\t\t\tsetIsDragOver(false);\n\t\t\t\t\tonDragLeave?.(event);\n\t\t\t\t}}\n\t\t\t\tonDropCapture={(event) => {\n\t\t\t\t\tsetIsDragOver(false);\n\t\t\t\t\t_ref.current?.focus();\n\t\t\t\t\tonDropCapture?.(event);\n\t\t\t\t}}\n\t\t\t\tref={(node) => {\n\t\t\t\t\t_ref.current = node;\n\t\t\t\t\tif (typeof ref === \"function\") {\n\t\t\t\t\t\tref(node);\n\t\t\t\t\t} else if (ref) {\n\t\t\t\t\t\tref.current = node;\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nTextArea.displayName = \"TextArea\";\n\nexport { TextArea };\n"],"mappings":"wCAAA,OAAS,OAAAA,MAAW,2BACpB,OAAS,cAAAC,EAAY,UAAAC,EAAQ,YAAAC,MAAgB,QAuD1C,cAAAC,MAAA,oBAjDH,IAAMC,EAAmBC,EACxB,mTACA,CACC,SAAU,CAIT,WAAY,CACX,WAAY,gDACb,CACD,CACD,CACD,EAYMC,EAAWC,EAChB,CACC,CACC,WAAAC,EACA,eAAgBC,EAChB,UAAAC,EACA,YAAAC,EACA,YAAAC,EACA,cAAAC,EACA,WAAYC,EACZ,GAAGC,CACJ,EACAC,IACI,CAEJ,IAAMC,EADYR,GAAgB,MAAQA,IAAiB,QAExD,QACA,OAAOK,GAAgB,WACtBA,EAAY,EACZA,EACEI,EAAcT,GAAgBQ,IAAe,QAC7C,CAACE,EAAYC,CAAa,EAAIC,EAAS,EAAK,EAC5CC,EAAOC,EAAmC,IAAI,EAEpD,OACCpB,EAAC,YACA,eAAce,EACd,kBAAiBD,GAAc,OAC/B,UAAWO,EACVhB,IAAe,cACd,6DACD,mUACA,4DACA,qGACA,+LACA,2MACA,2MAEAE,CACD,EACA,iBAAgBS,EAChB,YAAcM,GAAU,CACvBL,EAAc,EAAI,EAClBT,IAAcc,CAAK,CACpB,EACA,YAAcA,GAAU,CACvBL,EAAc,EAAK,EACnBR,IAAca,CAAK,CACpB,EACA,cAAgBA,GAAU,CACzBL,EAAc,EAAK,EACnBE,EAAK,SAAS,MAAM,EACpBT,IAAgBY,CAAK,CACtB,EACA,IAAMC,GAAS,CACdJ,EAAK,QAAUI,EACX,OAAOV,GAAQ,WAClBA,EAAIU,CAAI,EACEV,IACVA,EAAI,QAAUU,EAEhB,EACC,GAAGX,EACL,CAEF,CACD,EACAT,EAAS,YAAc","names":["cva","forwardRef","useRef","useState","jsx","textAreaVariants","cva","TextArea","forwardRef","appearance","_ariaInvalid","className","onDragEnter","onDragLeave","onDropCapture","_validation","props","ref","validation","ariaInvalid","isDragOver","setIsDragOver","useState","_ref","useRef","cx","event","node"]}
+{"version":3,"sources":["../src/components/text-area/text-area.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef, useRef, useState } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { WithValidation } from \"../input/types.js\";\n\ntype Props = ComponentProps<\"textarea\"> &\n\tWithValidation & {\n\t\t/**\n\t\t * The visual style of the textarea.\n\t\t */\n\t\tappearance?: \"monospaced\";\n\t};\n\n/**\n * A multi-line plain-text editing control, useful when you want to allow users\n * to enter a sizeable amount of free-form text, for example a comment on a\n * review or feedback form.\n *\n * @see https://mantle.ngrok.com/components/text-area#api\n *\n * @example\n * ```tsx\n * <form>\n *   <div>\n *     <Label htmlFor=\"feedback\">Feedback:</Label>\n *     <TextArea\n *       id=\"feedback\"\n *       name=\"feedback\"\n *       placeholder=\"Enter your feedback here\"\n *     />\n *   </div>\n * </form>\n */\nconst TextArea = forwardRef<ComponentRef<\"textarea\">, Props>(\n\t(\n\t\t{\n\t\t\tappearance,\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tonDragEnter,\n\t\t\tonDragLeave,\n\t\t\tonDropCapture,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\t\tconst [isDragOver, setIsDragOver] = useState(false);\n\t\tconst _ref = useRef<HTMLTextAreaElement | null>(null);\n\n\t\treturn (\n\t\t\t<textarea\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\tappearance === \"monospaced\" &&\n\t\t\t\t\t\t\"pointer-coarse:text-[0.9375rem] font-mono text-[0.8125rem]\",\n\t\t\t\t\t\"border-input bg-form data-drag-over:border-dashed data-drag-over:ring-4 pointer-coarse:py-[calc(theme(spacing[2.5])-1px)] pointer-coarse:text-base flex min-h-24 w-full rounded-md border px-3 py-[calc(theme(spacing[2])-1px)] focus-visible:outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50\",\n\t\t\t\t\t\"placeholder:text-placeholder data-drag-over:border-dashed\",\n\t\t\t\t\t\"border-form text-strong ring-focus-accent focus:border-accent-600 data-drag-over:border-accent-600\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:ring-focus-danger data-validation-error:focus-visible:border-danger-600 data-validation-error:data-drag-over:border-danger-600\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:ring-focus-success data-validation-success:focus-visible:border-success-600 data-validation-success:data-drag-over:border-success-600\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:ring-focus-warning data-validation-warning:focus-visible:border-warning-600 data-validation-warning:data-drag-over:border-warning-600\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-drag-over={isDragOver}\n\t\t\t\tonDragEnter={(event) => {\n\t\t\t\t\tsetIsDragOver(true);\n\t\t\t\t\tonDragEnter?.(event);\n\t\t\t\t}}\n\t\t\t\tonDragLeave={(event) => {\n\t\t\t\t\tsetIsDragOver(false);\n\t\t\t\t\tonDragLeave?.(event);\n\t\t\t\t}}\n\t\t\t\tonDropCapture={(event) => {\n\t\t\t\t\tsetIsDragOver(false);\n\t\t\t\t\t_ref.current?.focus();\n\t\t\t\t\tonDropCapture?.(event);\n\t\t\t\t}}\n\t\t\t\tref={(node) => {\n\t\t\t\t\t_ref.current = node;\n\t\t\t\t\tif (typeof ref === \"function\") {\n\t\t\t\t\t\tref(node);\n\t\t\t\t\t} else if (ref) {\n\t\t\t\t\t\tref.current = node;\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nTextArea.displayName = \"TextArea\";\n\nexport {\n\t//,\n\tTextArea,\n};\n\nexport type {\n\t//,\n\tProps as TextAreaProps,\n};\n"],"mappings":"wCACA,OAAS,cAAAA,EAAY,UAAAC,EAAQ,YAAAC,MAAgB,QAyD1C,cAAAC,MAAA,oBAzBH,IAAMC,EAAWC,EAChB,CACC,CACC,WAAAC,EACA,eAAgBC,EAChB,UAAAC,EACA,YAAAC,EACA,YAAAC,EACA,cAAAC,EACA,WAAYC,EACZ,GAAGC,CACJ,EACAC,IACI,CAEJ,IAAMC,EADYR,GAAgB,MAAQA,IAAiB,QAExD,QACA,OAAOK,GAAgB,WACtBA,EAAY,EACZA,EACEI,EAAcT,GAAgBQ,IAAe,QAC7C,CAACE,EAAYC,CAAa,EAAIC,EAAS,EAAK,EAC5CC,EAAOC,EAAmC,IAAI,EAEpD,OACClB,EAAC,YACA,eAAca,EACd,kBAAiBD,GAAc,OAC/B,UAAWO,EACVhB,IAAe,cACd,6DACD,mUACA,4DACA,qGACA,+LACA,2MACA,2MACAE,CACD,EACA,iBAAgBS,EAChB,YAAcM,GAAU,CACvBL,EAAc,EAAI,EAClBT,IAAcc,CAAK,CACpB,EACA,YAAcA,GAAU,CACvBL,EAAc,EAAK,EACnBR,IAAca,CAAK,CACpB,EACA,cAAgBA,GAAU,CACzBL,EAAc,EAAK,EACnBE,EAAK,SAAS,MAAM,EACpBT,IAAgBY,CAAK,CACtB,EACA,IAAMC,GAAS,CACdJ,EAAK,QAAUI,EACX,OAAOV,GAAQ,WAClBA,EAAIU,CAAI,EACEV,IACVA,EAAI,QAAUU,EAEhB,EACC,GAAGX,EACL,CAEF,CACD,EACAT,EAAS,YAAc","names":["forwardRef","useRef","useState","jsx","TextArea","forwardRef","appearance","_ariaInvalid","className","onDragEnter","onDragLeave","onDropCapture","_validation","props","ref","validation","ariaInvalid","isDragOver","setIsDragOver","useState","_ref","useRef","cx","event","node"]}

package/dist/{types-Cs5ck3Vt.d.ts → types-DehRoXC5.d.ts}

@@ -48,15 +48,8 @@ type WithInputType = {
  * @example
  * the false type is useful when using short-circuiting logic, e.g.
  *
- * ```
- * validation={Boolean(formState.errors.name) && "error"}
- * ```
- *
- * if `formState.errors.name` is falsey, then the input will show default presentation
- * this prevents you from having to use a ternary with `undefined`, e.g.
- *
- * ```
- * validation={Boolean(formState.errors.name) ? "error" : undefined}
+ * ```tsx
+ * validation={field.state.meta.errors.length > 0 && "error"}
  * ```
  */
 type Validation = "error" | "success" | "warning" | false;
@@ -73,15 +66,8 @@ type WithValidation = {
      * @example
      * the false type is useful when using short-circuiting logic, e.g.
      *
-     * ```
-     * validation={Boolean(formState.errors.name) && "error"}
-     * ```
-     *
-     * if `formState.errors.name` is falsey, then the input will show default presentation
-     * this prevents you from having to use a ternary with `undefined`, e.g.
-     *
-     * ```
-     * validation={Boolean(formState.errors.name) ? "error" : undefined}
+     * ```tsx
+     * validation={field.state.meta.errors.length > 0 && "error"}
      * ```
      */
     validation?: Validation | (() => Validation);

package/package.json

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.22.2",
+  "version": "0.23.0",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",
@@ -25,8 +25,8 @@
     "node": "^22.0.0"
   },
   "dependencies": {
-    "@ariakit/react": "0.4.15",
-    "@headlessui/react": "2.2.0",
+    "@ariakit/react": "0.4.16",
+    "@headlessui/react": "2.2.1",
     "@radix-ui/react-accordion": "1.2.3",
     "@radix-ui/react-dialog": "1.1.6",
     "@radix-ui/react-dropdown-menu": "2.1.6",
@@ -44,7 +44,7 @@
     "clsx": "2.1.1",
     "prismjs": "1.30.0",
     "react-day-picker": "8.10.1",
-    "sonner": "2.0.2",
+    "sonner": "2.0.3",
     "tailwind-merge": "2.6.0",
     "tailwindcss-animate": "1.0.7",
     "tiny-invariant": "1.3.3"
@@ -53,12 +53,12 @@
     "@phosphor-icons/react": "2.1.7",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.2.0",
+    "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
-    "@types/node": "22.13.14",
+    "@types/node": "22.14.0",
     "@types/prismjs": "1.26.5",
     "@types/react": "18.3.20",
-    "@types/react-dom": "18.3.5",
+    "@types/react-dom": "18.3.6",
     "@vitejs/plugin-react": "4.3.4",
     "autoprefixer": "10.4.21",
     "browserslist": "4.24.4",
@@ -67,10 +67,10 @@
     "postcss": "8.5.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-router": "7.4.1",
+    "react-router": "7.5.0",
     "tailwindcss": "3.4.17",
     "tsup": "8.4.0",
-    "typescript": "5.8.2",
+    "typescript": "5.8.3",
     "zod": "3.24.2",
     "@cfg/tsconfig": "1.0.0"
   },
@@ -238,6 +238,11 @@
       "import": "./dist/radio-group.js",
       "types": "./dist/radio-group.d.ts"
     },
+    "./sandboxed-on-click": {
+      "@ngrok/mantle/source": "./src/components/sandboxed-on-click/index.ts",
+      "import": "./dist/sandboxed-on-click.js",
+      "types": "./dist/sandboxed-on-click.d.ts"
+    },
     "./select": {
       "@ngrok/mantle/source": "./src/components/select/index.ts",
       "import": "./dist/select.js",