@ngrok/mantle 0.32.0 → 0.32.1

package/dist/radio-group.d.ts

@@ -6,6 +6,23 @@ import { W as WithAsChild } from './as-child-DJ7x3JFV.js';
 
 /**
  * A group of radio items. It manages the state of the children radios. Unstyled and simple.
+ * Used as the root component for grouping related radio items where only one can be selected.
+ *
+ * @see https://mantle.ngrok.com/components/radio-group#api-radio-group
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup value={value} onValueChange={setValue}>
+ *   <RadioItem value="option1">
+ *     <RadioIndicator />
+ *     <span>Option 1</span>
+ *   </RadioItem>
+ *   <RadioItem value="option2">
+ *     <RadioIndicator />
+ *     <span>Option 2</span>
+ *   </RadioItem>
+ * </RadioGroup>
+ * ```
  */
 declare const RadioGroup: react.ForwardRefExoticComponent<Omit<RadioGroupProps, "as" | "children"> & {
     children?: ReactNode | undefined;
@@ -23,6 +40,18 @@ type RadioStateContextValue = {
 /**
  * A simple radio item that can be used inside a radio group. The "conventional" use-case.
  * Must be a child of `RadioGroup`.
+ *
+ * @see https://mantle.ngrok.com/components/radio-group#api-radio-item
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup value={value} onValueChange={setValue}>
+ *   <RadioItem value="option1">
+ *     <RadioIndicator />
+ *     <span>Option 1</span>
+ *   </RadioItem>
+ * </RadioGroup>
+ * ```
  */
 declare const RadioItem: react.ForwardRefExoticComponent<Omit<RadioProps, "children"> & {
     children?: ReactNode | undefined;
@@ -37,8 +66,21 @@ type RadioIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
  * You can customize the indicator by passing children:
  * - a different component
  * - a render-props function that receives the radio state context and should return a component.
+ *
+ * @see https://mantle.ngrok.com/components/radio-group#api-radio-indicator
+ *
+ * @example
+ * ```tsx
+ * <RadioItem value="option1">
+ *   <RadioIndicator />
+ *   <span>Option 1</span>
+ * </RadioItem>
+ * ```
  */
-declare const RadioIndicator: ({ children, className, ...props }: RadioIndicatorProps) => react_jsx_runtime.JSX.Element;
+declare const RadioIndicator: {
+    ({ children, className, ...props }: RadioIndicatorProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 /**
  * A group of radio list items. Use RadioListItem as direct children.
  */
@@ -62,7 +104,10 @@ declare const RadioCard: react.ForwardRefExoticComponent<Omit<RadioProps, "child
  * The content of any radio item. Use it to wrap any labels, descriptions, or content of a radio item.
  * Use it as a child of `RadioItem`, `RadioListItem`, or `RadioCard`.
  */
-declare const RadioItemContent: ({ asChild, children, className, ...props }: RadioItemContentProps) => react_jsx_runtime.JSX.Element;
+declare const RadioItemContent: {
+    ({ asChild, children, className, ...props }: RadioItemContentProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 /**
  * An inline group of radio buttons. Use RadioButton as direct children.
  */
@@ -80,6 +125,9 @@ type RadioInputSandboxProps = HTMLAttributes<HTMLDivElement>;
  * A sandbox container for input elements composed within radio group items.
  * It prevents the default behavior of the radio group when clicking on the input element or accepting keyboard input.
  */
-declare const RadioInputSandbox: ({ children, onClick, onKeyDown, ...props }: RadioInputSandboxProps) => react_jsx_runtime.JSX.Element;
+declare const RadioInputSandbox: {
+    ({ children, onClick, onKeyDown, ...props }: RadioInputSandboxProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 export { RadioButton, RadioButtonGroup, RadioCard, RadioGroup, RadioGroupList, RadioIndicator, RadioInputSandbox, RadioItem, RadioItemContent, RadioListItem };

package/dist/radio-group.js

@@ -1,2 +1,2 @@
-import{a as v}from"./chunk-ERBZR6SY.js";import{a as l}from"./chunk-AZ56JGNY.js";import{Radio as u,RadioGroup as G}from"@headlessui/react";import{Slot as H}from"@radix-ui/react-slot";import f from"clsx";import{Children as N,cloneElement as L,createContext as S,forwardRef as n,isValidElement as T,useContext as m,useRef as z}from"react";import{Fragment as R,jsx as a}from"react/jsx-runtime";var b=n((e,o)=>a(G,{...e,ref:o}));b.displayName="RadioGroup";var c=S({autofocus:!1,checked:!1,disabled:!1,focus:!1,hover:!1}),y=n(({children:e,className:o,...r},t)=>a(u,{className:l("group/radio aria-enabled:cursor-pointer [&_label]:cursor-inherit flex cursor-default gap-2 py-1 text-sm focus:outline-none",o),as:"div",...r,ref:t,children:i=>a(c.Provider,{value:i,children:e})}));y.displayName="RadioItem";var M=({checked:e,disabled:o,focus:r,hover:t})=>a("span",{className:l("border-form flex size-4 items-center justify-center rounded-full border shrink-0",o&&"cursor-default opacity-50",e&&"border-accent-500 bg-accent-500",r&&!o&&"border-accent-600 ring-focus-accent ring-4",t&&"border-accent-600"),children:e&&a("span",{className:"size-2 rounded-full bg-[#fff] shrink-0"})}),w=({children:e,className:o,...r})=>{let t=m(c);return a("div",{className:l("radio-indicator inline-flex size-5 select-none items-center justify-center shrink-0",o),...r,children:e==null?a(M,{...t}):typeof e=="function"?e(t):e})},x=n(({className:e,...o},r)=>a(b,{className:f("-space-y-px",e),...o,ref:r}));x.displayName="RadioGroupList";var P=n(({children:e,className:o,...r},t)=>a(u,{as:"div",className:l("group/radio border-form [&_label]:cursor-inherit relative flex select-none gap-2 border px-3 py-2 text-sm","aria-enabled:cursor-pointer focus:outline-none","focus-visible:ring-focus-accent aria-enabled:focus-visible:border-accent-600 focus-visible:ring-4","first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md","aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400 not-aria-disabled:hover:aria-checked:border-accent-600","has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2",o),ref:t,...r,children:i=>a(R,{children:a(c.Provider,{value:i,children:e})})}));P.displayName="RadioListItem";var C=n(({children:e,className:o,...r},t)=>a(u,{as:"div",className:f("group/radio border-card bg-card [&_label]:cursor-inherit relative rounded-md border p-4 text-sm","aria-enabled:cursor-pointer focus:outline-none","focus-visible:ring-focus-accent aria-enabled:focus-visible:border-accent-600 focus-visible:ring-4","first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md","aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 aria-enabled:hover:aria-checked:border-accent-600 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400",o),...r,ref:t,children:i=>a(R,{children:a(c.Provider,{value:i,children:e})})}));C.displayName="RadioCard";var B=({asChild:e=!1,children:o,className:r,...t})=>{let i=m(c);return a(e?H:"div",{className:f("min-w-0 flex-1",i.disabled&&"opacity-50",r),...t,children:o})},g=n(({className:e,...o},r)=>a(b,{className:f("flex flex-row flex-nowrap -space-x-px",e),...o,ref:r}));g.displayName="RadioButtonGroup";var I=n(({children:e,className:o,...r},t)=>a(u,{as:"div",className:l("group/radio border-form [&_label]:cursor-inherit relative flex flex-1 select-none items-center justify-center gap-2 border px-3 text-sm","h-9","focus-visible:ring-focus-accent aria-enabled:focus-visible:border-accent-600 focus-visible:ring-4","aria-enabled:cursor-pointer focus:outline-none","first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md","aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600 aria-disabled:opacity-50","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 aria-enabled:hover:aria-checked:border-accent-600","has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2",o),ref:t,...r,children:i=>a(R,{children:a(c.Provider,{value:i,children:e})})}));I.displayName="RadioButton";var D=({children:e,onClick:o,onKeyDown:r,...t})=>{let i=z(null),s=m(c),p=N.only(e),k=s.disabled||!s.checked;return a("div",{ref:i,"aria-disabled":s.disabled,onKeyDown:d=>{if(s.disabled){d.stopPropagation(),d.preventDefault();return}switch(d.key){case"Enter":case"Tab":break;default:d.stopPropagation()}r?.(d)},onClick:d=>{if(s.disabled){d.stopPropagation(),d.preventDefault();return}let h=d.target;v(h)&&window.requestAnimationFrame(()=>{h.focus()}),o?.(d)},...t,children:T(p)?L(p,{disabled:s.disabled||p.props.disabled,tabIndex:k?-1:p.props.tabIndex}):null})};export{I as RadioButton,g as RadioButtonGroup,C as RadioCard,b as RadioGroup,x as RadioGroupList,w as RadioIndicator,D as RadioInputSandbox,y as RadioItem,B as RadioItemContent,P as RadioListItem};
+import{a as y}from"./chunk-ERBZR6SY.js";import{a as l}from"./chunk-AZ56JGNY.js";import{Radio as u,RadioGroup as L}from"@headlessui/react";import{Slot as S}from"@radix-ui/react-slot";import f from"clsx";import{Children as T,cloneElement as z,createContext as M,forwardRef as n,isValidElement as w,useContext as b,useRef as B}from"react";import{Fragment as R,jsx as a}from"react/jsx-runtime";var m=n((e,o)=>a(L,{...e,ref:o}));m.displayName="RadioGroup";var c=M({autofocus:!1,checked:!1,disabled:!1,focus:!1,hover:!1}),v=n(({children:e,className:o,...r},t)=>a(u,{className:l("group/radio aria-enabled:cursor-pointer [&_label]:cursor-inherit flex cursor-default gap-2 py-1 text-sm focus:outline-none",o),as:"div",...r,ref:t,children:i=>a(c.Provider,{value:i,children:e})}));v.displayName="RadioItem";var D=({checked:e,disabled:o,focus:r,hover:t})=>a("span",{className:l("border-form flex size-4 items-center justify-center rounded-full border shrink-0",o&&"cursor-default opacity-50",e&&"border-accent-500 bg-accent-500",r&&!o&&"border-accent-600 ring-focus-accent ring-4",t&&"border-accent-600"),children:e&&a("span",{className:"size-2 rounded-full bg-[#fff] shrink-0"})}),x=({children:e,className:o,...r})=>{let t=b(c);return a("div",{className:l("radio-indicator inline-flex size-5 select-none items-center justify-center shrink-0",o),...r,children:e==null?a(D,{...t}):typeof e=="function"?e(t):e})};x.displayName="RadioIndicator";var P=n(({className:e,...o},r)=>a(m,{className:f("-space-y-px",e),...o,ref:r}));P.displayName="RadioGroupList";var C=n(({children:e,className:o,...r},t)=>a(u,{as:"div",className:l("group/radio border-form [&_label]:cursor-inherit relative flex select-none gap-2 border px-3 py-2 text-sm","aria-enabled:cursor-pointer focus:outline-none","focus-visible:ring-focus-accent aria-enabled:focus-visible:border-accent-600 focus-visible:ring-4","first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md","aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400 not-aria-disabled:hover:aria-checked:border-accent-600","has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2",o),ref:t,...r,children:i=>a(R,{children:a(c.Provider,{value:i,children:e})})}));C.displayName="RadioListItem";var I=n(({children:e,className:o,...r},t)=>a(u,{as:"div",className:f("group/radio border-card bg-card [&_label]:cursor-inherit relative rounded-md border p-4 text-sm","aria-enabled:cursor-pointer focus:outline-none","focus-visible:ring-focus-accent aria-enabled:focus-visible:border-accent-600 focus-visible:ring-4","first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md","aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 aria-enabled:hover:aria-checked:border-accent-600 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400",o),...r,ref:t,children:i=>a(R,{children:a(c.Provider,{value:i,children:e})})}));I.displayName="RadioCard";var g=({asChild:e=!1,children:o,className:r,...t})=>{let i=b(c);return a(e?S:"div",{className:f("min-w-0 flex-1",i.disabled&&"opacity-50",r),...t,children:o})};g.displayName="RadioItemContent";var k=n(({className:e,...o},r)=>a(m,{className:f("flex flex-row flex-nowrap -space-x-px",e),...o,ref:r}));k.displayName="RadioButtonGroup";var N=n(({children:e,className:o,...r},t)=>a(u,{as:"div",className:l("group/radio border-form [&_label]:cursor-inherit relative flex flex-1 select-none items-center justify-center gap-2 border px-3 text-sm","h-9","focus-visible:ring-focus-accent aria-enabled:focus-visible:border-accent-600 focus-visible:ring-4","aria-enabled:cursor-pointer focus:outline-none","first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md","aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600 aria-disabled:opacity-50","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 aria-enabled:hover:aria-checked:border-accent-600","has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2",o),ref:t,...r,children:i=>a(R,{children:a(c.Provider,{value:i,children:e})})}));N.displayName="RadioButton";var G=({children:e,onClick:o,onKeyDown:r,...t})=>{let i=B(null),s=b(c),p=T.only(e),H=s.disabled||!s.checked;return a("div",{ref:i,"aria-disabled":s.disabled,onKeyDown:d=>{if(s.disabled){d.stopPropagation(),d.preventDefault();return}switch(d.key){case"Enter":case"Tab":break;default:d.stopPropagation()}r?.(d)},onClick:d=>{if(s.disabled){d.stopPropagation(),d.preventDefault();return}let h=d.target;y(h)&&window.requestAnimationFrame(()=>{h.focus()}),o?.(d)},...t,children:w(p)?z(p,{disabled:s.disabled||p.props.disabled,tabIndex:H?-1:p.props.tabIndex}):null})};G.displayName="RadioInputSandbox";export{N as RadioButton,k as RadioButtonGroup,I as RadioCard,m as RadioGroup,P as RadioGroupList,x as RadioIndicator,G as RadioInputSandbox,v as RadioItem,g as RadioItemContent,C as RadioListItem};
 //# sourceMappingURL=radio-group.js.map

package/dist/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/radio-group/radio-group.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n\tRadio as HeadlessRadio,\n\tRadioGroup as HeadlessRadioGroup,\n} from \"@headlessui/react\";\nimport type {\n\tRadioGroupProps as HeadlessRadioGroupProps,\n\tRadioProps as HeadlessRadioProps,\n} from \"@headlessui/react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport clsx from \"clsx\";\nimport {\n\tChildren,\n\tcloneElement,\n\tcreateContext,\n\tforwardRef,\n\tisValidElement,\n\tuseContext,\n\tuseRef,\n} from \"react\";\nimport type {\n\tComponentRef,\n\tHTMLAttributes,\n\tPropsWithChildren,\n\tReactNode,\n} from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { isInput } from \"../input/is-input.js\";\n\ntype RadioGroupProps = PropsWithChildren<\n\tOmit<HeadlessRadioGroupProps, \"as\" | \"children\">\n>;\n\n/**\n * A group of radio items. It manages the state of the children radios. Unstyled and simple.\n */\nconst RadioGroup = forwardRef<\n\tComponentRef<typeof HeadlessRadioGroup>,\n\tRadioGroupProps\n>((props, ref) => <HeadlessRadioGroup {...props} ref={ref} />);\nRadioGroup.displayName = \"RadioGroup\";\n\n/**\n * The shape of the radio state context.\n */\ntype RadioStateContextValue = {\n\tautofocus: boolean;\n\tchecked: boolean;\n\tdisabled: boolean;\n\tfocus: boolean;\n\thover: boolean;\n};\n\n/**\n * The radio state. It's used to pass the state of the radio to its children components.\n * It's used internally by the radio components to manage the state/style of the radio items.\n * Used in place of css classes to avoid specificity issues and slightly improve performance.\n */\nconst RadioStateContext = createContext<RadioStateContextValue>({\n\tautofocus: false,\n\tchecked: false,\n\tdisabled: false,\n\tfocus: false,\n\thover: false,\n});\n\ntype RadioItemProps = Omit<HeadlessRadioProps, \"children\"> & PropsWithChildren;\n\n/**\n * A simple radio item that can be used inside a radio group. The \"conventional\" use-case.\n * Must be a child of `RadioGroup`.\n */\nconst RadioItem = forwardRef<ComponentRef<\"div\">, RadioItemProps>(\n\t({ children, className, ...props }, ref) => (\n\t\t<HeadlessRadio\n\t\t\tclassName={cx(\n\t\t\t\t\"group/radio aria-enabled:cursor-pointer [&_label]:cursor-inherit flex cursor-default gap-2 py-1 text-sm focus:outline-none\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tas=\"div\"\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{(ctx) => (\n\t\t\t\t<RadioStateContext.Provider value={ctx}>\n\t\t\t\t\t{children}\n\t\t\t\t</RadioStateContext.Provider>\n\t\t\t)}\n\t\t</HeadlessRadio>\n\t),\n);\nRadioItem.displayName = \"RadioItem\";\n\ntype RadioIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\"> & {\n\tchildren?: ReactNode | ((context: RadioStateContextValue) => ReactNode);\n};\n\n/**\n * The default radio indicator.\n * @private\n */\nconst DefaultRadioIndicator = ({\n\tchecked,\n\tdisabled,\n\tfocus,\n\thover,\n}: RadioStateContextValue) => (\n\t<span\n\t\tclassName={cx(\n\t\t\t\"border-form flex size-4 items-center justify-center rounded-full border shrink-0\",\n\t\t\tdisabled && \"cursor-default opacity-50\",\n\t\t\tchecked && \"border-accent-500 bg-accent-500\",\n\t\t\tfocus && !disabled && \"border-accent-600 ring-focus-accent ring-4\",\n\t\t\thover && \"border-accent-600\",\n\t\t)}\n\t>\n\t\t{checked && <span className=\"size-2 rounded-full bg-[#fff] shrink-0\" />}\n\t</span>\n);\n\n/**\n * The selection indicator for any radio item.\n * Use it as a child of `RadioItem`, `RadioListItem`, or `RadioCard`.\n * By default, it's a circle that changes color when checked.\n * You can customize the indicator by passing children:\n * - a different component\n * - a render-props function that receives the radio state context and should return a component.\n */\nconst RadioIndicator = ({\n\tchildren,\n\tclassName,\n\t...props\n}: RadioIndicatorProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cx(\n\t\t\t\t\"radio-indicator inline-flex size-5 select-none items-center justify-center shrink-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children == null ? (\n\t\t\t\t<DefaultRadioIndicator {...ctx} />\n\t\t\t) : typeof children === \"function\" ? (\n\t\t\t\tchildren(ctx)\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\n/**\n * A group of radio list items. Use RadioListItem as direct children.\n */\nconst RadioGroupList = forwardRef<\n\tComponentRef<typeof RadioGroup>,\n\tRadioGroupProps\n>(({ className, ...props }, ref) => {\n\treturn (\n\t\t<RadioGroup\n\t\t\tclassName={clsx(\"-space-y-px\", className)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t/>\n\t);\n});\nRadioGroupList.displayName = \"RadioGroupList\";\n\ntype RadioListItemProps = RadioItemProps;\n\n/**\n * A radio list item that is used inside a `RadioGroupList`.\n */\nconst RadioListItem = forwardRef<ComponentRef<\"div\">, RadioListItemProps>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<HeadlessRadio\n\t\t\t\tas=\"div\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/radio border-form [&_label]:cursor-inherit relative flex select-none gap-2 border px-3 py-2 text-sm\",\n\t\t\t\t\t\"aria-enabled:cursor-pointer focus:outline-none\",\n\t\t\t\t\t\"focus-visible:ring-focus-accent aria-enabled:focus-visible:border-accent-600 focus-visible:ring-4\",\n\t\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\t\"aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400 not-aria-disabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{(ctx) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<RadioStateContext.Provider value={ctx}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</RadioStateContext.Provider>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</HeadlessRadio>\n\t\t);\n\t},\n);\nRadioListItem.displayName = \"RadioListItem\";\n\ntype RadioItemContentProps = HTMLAttributes<HTMLDivElement> & WithAsChild;\n\ntype RadioCardProps = RadioItemProps;\n\n/**\n * A radio card item. Use it as a child of `RadioGroup`\n */\nconst RadioCard = forwardRef<ComponentRef<\"div\">, RadioCardProps>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<HeadlessRadio\n\t\t\t\tas=\"div\"\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"group/radio border-card bg-card [&_label]:cursor-inherit relative rounded-md border p-4 text-sm\",\n\t\t\t\t\t\"aria-enabled:cursor-pointer focus:outline-none\",\n\t\t\t\t\t\"focus-visible:ring-focus-accent aria-enabled:focus-visible:border-accent-600 focus-visible:ring-4\",\n\t\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\t\"aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 aria-enabled:hover:aria-checked:border-accent-600 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t{(ctx) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<RadioStateContext.Provider value={ctx}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</RadioStateContext.Provider>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</HeadlessRadio>\n\t\t);\n\t},\n);\nRadioCard.displayName = \"RadioCard\";\n\n/**\n * The content of any radio item. Use it to wrap any labels, descriptions, or content of a radio item.\n * Use it as a child of `RadioItem`, `RadioListItem`, or `RadioCard`.\n */\nconst RadioItemContent = ({\n\tasChild = false,\n\tchildren,\n\tclassName,\n\t...props\n}: RadioItemContentProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={clsx(\n\t\t\t\t\"min-w-0 flex-1\",\n\t\t\t\tctx.disabled && \"opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\n\n/**\n * An inline group of radio buttons. Use RadioButton as direct children.\n */\nconst RadioButtonGroup = forwardRef<\n\tComponentRef<typeof RadioGroup>,\n\tRadioGroupProps\n>(({ className, ...props }, ref) => {\n\treturn (\n\t\t<RadioGroup\n\t\t\tclassName={clsx(\"flex flex-row flex-nowrap -space-x-px\", className)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t/>\n\t);\n});\nRadioButtonGroup.displayName = \"RadioButtonGroup\";\n\ntype RadioButtonProps = RadioItemProps;\n\n/**\n * A radio button that is used inside a `RadioButtonGroup`.\n */\nconst RadioButton = forwardRef<ComponentRef<\"div\">, RadioButtonProps>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<HeadlessRadio\n\t\t\t\tas=\"div\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/radio border-form [&_label]:cursor-inherit relative flex flex-1 select-none items-center justify-center gap-2 border px-3 text-sm\",\n\t\t\t\t\t\"h-9\",\n\t\t\t\t\t\"focus-visible:ring-focus-accent aria-enabled:focus-visible:border-accent-600 focus-visible:ring-4\",\n\t\t\t\t\t\"aria-enabled:cursor-pointer focus:outline-none\",\n\t\t\t\t\t\"first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md\",\n\t\t\t\t\t\"aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600 aria-disabled:opacity-50\",\n\t\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 aria-enabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{(ctx) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<RadioStateContext.Provider value={ctx}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</RadioStateContext.Provider>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</HeadlessRadio>\n\t\t);\n\t},\n);\nRadioButton.displayName = \"RadioButton\";\n\ntype RadioInputSandboxProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * A sandbox container for input elements composed within radio group items.\n * It prevents the default behavior of the radio group when clicking on the input element or accepting keyboard input.\n */\nconst RadioInputSandbox = ({\n\tchildren,\n\tonClick,\n\tonKeyDown,\n\t...props\n}: RadioInputSandboxProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst ctx = useContext(RadioStateContext);\n\n\tconst singleChild = Children.only(children);\n\n\t// Prevent the child input from receiving focus when the parent radio group item is disabled or unchecked.\n\tconst shouldPreventTabIndex = ctx.disabled || !ctx.checked;\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\taria-disabled={ctx.disabled}\n\t\t\tonKeyDown={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tswitch (event.key) {\n\t\t\t\t\tcase \"Enter\":\n\t\t\t\t\tcase \"Tab\":\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t}\n\t\t\t\tonKeyDown?.(event);\n\t\t\t}}\n\t\t\tonClick={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst target = event.target;\n\t\t\t\tif (isInput(target)) {\n\t\t\t\t\twindow.requestAnimationFrame(() => {\n\t\t\t\t\t\ttarget.focus();\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t>\n\t\t\t{isValidElement<HTMLInputElement>(singleChild)\n\t\t\t\t? cloneElement(singleChild, {\n\t\t\t\t\t\tdisabled: ctx.disabled || singleChild.props.disabled,\n\t\t\t\t\t\ttabIndex: shouldPreventTabIndex ? -1 : singleChild.props.tabIndex,\n\t\t\t\t\t})\n\t\t\t\t: null}\n\t\t</div>\n\t);\n};\n\nexport {\n\t//\n\tRadioButton,\n\tRadioButtonGroup,\n\tRadioCard,\n\tRadioGroup,\n\tRadioGroupList,\n\tRadioIndicator,\n\tRadioInputSandbox,\n\tRadioItem,\n\tRadioItemContent,\n\tRadioListItem,\n};\n"],"mappings":"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","names":["HeadlessRadio","HeadlessRadioGroup","Slot","clsx","Children","cloneElement","createContext","forwardRef","isValidElement","useContext","useRef","Fragment","jsx","RadioGroup","forwardRef","props","ref","HeadlessRadioGroup","RadioStateContext","createContext","RadioItem","children","className","HeadlessRadio","cx","ctx","DefaultRadioIndicator","checked","disabled","focus","hover","RadioIndicator","useContext","RadioGroupList","clsx","RadioListItem","RadioCard","RadioItemContent","asChild","Slot","RadioButtonGroup","RadioButton","RadioInputSandbox","onClick","onKeyDown","useRef","singleChild","Children","shouldPreventTabIndex","event","target","isInput","isValidElement","cloneElement"]}
+{"version":3,"sources":["../src/components/radio-group/radio-group.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n\tRadio as HeadlessRadio,\n\tRadioGroup as HeadlessRadioGroup,\n} from \"@headlessui/react\";\nimport type {\n\tRadioGroupProps as HeadlessRadioGroupProps,\n\tRadioProps as HeadlessRadioProps,\n} from \"@headlessui/react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport clsx from \"clsx\";\nimport {\n\tChildren,\n\tcloneElement,\n\tcreateContext,\n\tforwardRef,\n\tisValidElement,\n\tuseContext,\n\tuseRef,\n} from \"react\";\nimport type {\n\tComponentRef,\n\tHTMLAttributes,\n\tPropsWithChildren,\n\tReactNode,\n} from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { isInput } from \"../input/is-input.js\";\n\ntype RadioGroupProps = PropsWithChildren<\n\tOmit<HeadlessRadioGroupProps, \"as\" | \"children\">\n>;\n\n/**\n * A group of radio items. It manages the state of the children radios. Unstyled and simple.\n * Used as the root component for grouping related radio items where only one can be selected.\n *\n * @see https://mantle.ngrok.com/components/radio-group#api-radio-group\n *\n * @example\n * ```tsx\n * <RadioGroup value={value} onValueChange={setValue}>\n *   <RadioItem value=\"option1\">\n *     <RadioIndicator />\n *     <span>Option 1</span>\n *   </RadioItem>\n *   <RadioItem value=\"option2\">\n *     <RadioIndicator />\n *     <span>Option 2</span>\n *   </RadioItem>\n * </RadioGroup>\n * ```\n */\nconst RadioGroup = forwardRef<\n\tComponentRef<typeof HeadlessRadioGroup>,\n\tRadioGroupProps\n>((props, ref) => <HeadlessRadioGroup {...props} ref={ref} />);\nRadioGroup.displayName = \"RadioGroup\";\n\n/**\n * The shape of the radio state context.\n */\ntype RadioStateContextValue = {\n\tautofocus: boolean;\n\tchecked: boolean;\n\tdisabled: boolean;\n\tfocus: boolean;\n\thover: boolean;\n};\n\n/**\n * The radio state. It's used to pass the state of the radio to its children components.\n * It's used internally by the radio components to manage the state/style of the radio items.\n * Used in place of css classes to avoid specificity issues and slightly improve performance.\n */\nconst RadioStateContext = createContext<RadioStateContextValue>({\n\tautofocus: false,\n\tchecked: false,\n\tdisabled: false,\n\tfocus: false,\n\thover: false,\n});\n\ntype RadioItemProps = Omit<HeadlessRadioProps, \"children\"> & PropsWithChildren;\n\n/**\n * A simple radio item that can be used inside a radio group. The \"conventional\" use-case.\n * Must be a child of `RadioGroup`.\n *\n * @see https://mantle.ngrok.com/components/radio-group#api-radio-item\n *\n * @example\n * ```tsx\n * <RadioGroup value={value} onValueChange={setValue}>\n *   <RadioItem value=\"option1\">\n *     <RadioIndicator />\n *     <span>Option 1</span>\n *   </RadioItem>\n * </RadioGroup>\n * ```\n */\nconst RadioItem = forwardRef<ComponentRef<\"div\">, RadioItemProps>(\n\t({ children, className, ...props }, ref) => (\n\t\t<HeadlessRadio\n\t\t\tclassName={cx(\n\t\t\t\t\"group/radio aria-enabled:cursor-pointer [&_label]:cursor-inherit flex cursor-default gap-2 py-1 text-sm focus:outline-none\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tas=\"div\"\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{(ctx) => (\n\t\t\t\t<RadioStateContext.Provider value={ctx}>\n\t\t\t\t\t{children}\n\t\t\t\t</RadioStateContext.Provider>\n\t\t\t)}\n\t\t</HeadlessRadio>\n\t),\n);\nRadioItem.displayName = \"RadioItem\";\n\ntype RadioIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\"> & {\n\tchildren?: ReactNode | ((context: RadioStateContextValue) => ReactNode);\n};\n\n/**\n * The default radio indicator.\n * @private\n */\nconst DefaultRadioIndicator = ({\n\tchecked,\n\tdisabled,\n\tfocus,\n\thover,\n}: RadioStateContextValue) => (\n\t<span\n\t\tclassName={cx(\n\t\t\t\"border-form flex size-4 items-center justify-center rounded-full border shrink-0\",\n\t\t\tdisabled && \"cursor-default opacity-50\",\n\t\t\tchecked && \"border-accent-500 bg-accent-500\",\n\t\t\tfocus && !disabled && \"border-accent-600 ring-focus-accent ring-4\",\n\t\t\thover && \"border-accent-600\",\n\t\t)}\n\t>\n\t\t{checked && <span className=\"size-2 rounded-full bg-[#fff] shrink-0\" />}\n\t</span>\n);\n\n/**\n * The selection indicator for any radio item.\n * Use it as a child of `RadioItem`, `RadioListItem`, or `RadioCard`.\n * By default, it's a circle that changes color when checked.\n * You can customize the indicator by passing children:\n * - a different component\n * - a render-props function that receives the radio state context and should return a component.\n *\n * @see https://mantle.ngrok.com/components/radio-group#api-radio-indicator\n *\n * @example\n * ```tsx\n * <RadioItem value=\"option1\">\n *   <RadioIndicator />\n *   <span>Option 1</span>\n * </RadioItem>\n * ```\n */\nconst RadioIndicator = ({\n\tchildren,\n\tclassName,\n\t...props\n}: RadioIndicatorProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cx(\n\t\t\t\t\"radio-indicator inline-flex size-5 select-none items-center justify-center shrink-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children == null ? (\n\t\t\t\t<DefaultRadioIndicator {...ctx} />\n\t\t\t) : typeof children === \"function\" ? (\n\t\t\t\tchildren(ctx)\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t</div>\n\t);\n};\nRadioIndicator.displayName = \"RadioIndicator\";\n\n/**\n * A group of radio list items. Use RadioListItem as direct children.\n */\nconst RadioGroupList = forwardRef<\n\tComponentRef<typeof RadioGroup>,\n\tRadioGroupProps\n>(({ className, ...props }, ref) => {\n\treturn (\n\t\t<RadioGroup\n\t\t\tclassName={clsx(\"-space-y-px\", className)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t/>\n\t);\n});\nRadioGroupList.displayName = \"RadioGroupList\";\n\ntype RadioListItemProps = RadioItemProps;\n\n/**\n * A radio list item that is used inside a `RadioGroupList`.\n */\nconst RadioListItem = forwardRef<ComponentRef<\"div\">, RadioListItemProps>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<HeadlessRadio\n\t\t\t\tas=\"div\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/radio border-form [&_label]:cursor-inherit relative flex select-none gap-2 border px-3 py-2 text-sm\",\n\t\t\t\t\t\"aria-enabled:cursor-pointer focus:outline-none\",\n\t\t\t\t\t\"focus-visible:ring-focus-accent aria-enabled:focus-visible:border-accent-600 focus-visible:ring-4\",\n\t\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\t\"aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400 not-aria-disabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{(ctx) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<RadioStateContext.Provider value={ctx}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</RadioStateContext.Provider>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</HeadlessRadio>\n\t\t);\n\t},\n);\nRadioListItem.displayName = \"RadioListItem\";\n\ntype RadioItemContentProps = HTMLAttributes<HTMLDivElement> & WithAsChild;\n\ntype RadioCardProps = RadioItemProps;\n\n/**\n * A radio card item. Use it as a child of `RadioGroup`\n */\nconst RadioCard = forwardRef<ComponentRef<\"div\">, RadioCardProps>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<HeadlessRadio\n\t\t\t\tas=\"div\"\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"group/radio border-card bg-card [&_label]:cursor-inherit relative rounded-md border p-4 text-sm\",\n\t\t\t\t\t\"aria-enabled:cursor-pointer focus:outline-none\",\n\t\t\t\t\t\"focus-visible:ring-focus-accent aria-enabled:focus-visible:border-accent-600 focus-visible:ring-4\",\n\t\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\t\"aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 aria-enabled:hover:aria-checked:border-accent-600 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t{(ctx) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<RadioStateContext.Provider value={ctx}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</RadioStateContext.Provider>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</HeadlessRadio>\n\t\t);\n\t},\n);\nRadioCard.displayName = \"RadioCard\";\n\n/**\n * The content of any radio item. Use it to wrap any labels, descriptions, or content of a radio item.\n * Use it as a child of `RadioItem`, `RadioListItem`, or `RadioCard`.\n */\nconst RadioItemContent = ({\n\tasChild = false,\n\tchildren,\n\tclassName,\n\t...props\n}: RadioItemContentProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={clsx(\n\t\t\t\t\"min-w-0 flex-1\",\n\t\t\t\tctx.disabled && \"opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\nRadioItemContent.displayName = \"RadioItemContent\";\n\n/**\n * An inline group of radio buttons. Use RadioButton as direct children.\n */\nconst RadioButtonGroup = forwardRef<\n\tComponentRef<typeof RadioGroup>,\n\tRadioGroupProps\n>(({ className, ...props }, ref) => {\n\treturn (\n\t\t<RadioGroup\n\t\t\tclassName={clsx(\"flex flex-row flex-nowrap -space-x-px\", className)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t/>\n\t);\n});\nRadioButtonGroup.displayName = \"RadioButtonGroup\";\n\ntype RadioButtonProps = RadioItemProps;\n\n/**\n * A radio button that is used inside a `RadioButtonGroup`.\n */\nconst RadioButton = forwardRef<ComponentRef<\"div\">, RadioButtonProps>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<HeadlessRadio\n\t\t\t\tas=\"div\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/radio border-form [&_label]:cursor-inherit relative flex flex-1 select-none items-center justify-center gap-2 border px-3 text-sm\",\n\t\t\t\t\t\"h-9\",\n\t\t\t\t\t\"focus-visible:ring-focus-accent aria-enabled:focus-visible:border-accent-600 focus-visible:ring-4\",\n\t\t\t\t\t\"aria-enabled:cursor-pointer focus:outline-none\",\n\t\t\t\t\t\"first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md\",\n\t\t\t\t\t\"aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600 aria-disabled:opacity-50\",\n\t\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 aria-enabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{(ctx) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<RadioStateContext.Provider value={ctx}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</RadioStateContext.Provider>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</HeadlessRadio>\n\t\t);\n\t},\n);\nRadioButton.displayName = \"RadioButton\";\n\ntype RadioInputSandboxProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * A sandbox container for input elements composed within radio group items.\n * It prevents the default behavior of the radio group when clicking on the input element or accepting keyboard input.\n */\nconst RadioInputSandbox = ({\n\tchildren,\n\tonClick,\n\tonKeyDown,\n\t...props\n}: RadioInputSandboxProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst ctx = useContext(RadioStateContext);\n\n\tconst singleChild = Children.only(children);\n\n\t// Prevent the child input from receiving focus when the parent radio group item is disabled or unchecked.\n\tconst shouldPreventTabIndex = ctx.disabled || !ctx.checked;\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\taria-disabled={ctx.disabled}\n\t\t\tonKeyDown={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tswitch (event.key) {\n\t\t\t\t\tcase \"Enter\":\n\t\t\t\t\tcase \"Tab\":\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t}\n\t\t\t\tonKeyDown?.(event);\n\t\t\t}}\n\t\t\tonClick={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst target = event.target;\n\t\t\t\tif (isInput(target)) {\n\t\t\t\t\twindow.requestAnimationFrame(() => {\n\t\t\t\t\t\ttarget.focus();\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t>\n\t\t\t{isValidElement<HTMLInputElement>(singleChild)\n\t\t\t\t? cloneElement(singleChild, {\n\t\t\t\t\t\tdisabled: ctx.disabled || singleChild.props.disabled,\n\t\t\t\t\t\ttabIndex: shouldPreventTabIndex ? -1 : singleChild.props.tabIndex,\n\t\t\t\t\t})\n\t\t\t\t: null}\n\t\t</div>\n\t);\n};\nRadioInputSandbox.displayName = \"RadioInputSandbox\";\n\nexport {\n\t//\n\tRadioButton,\n\tRadioButtonGroup,\n\tRadioCard,\n\tRadioGroup,\n\tRadioGroupList,\n\tRadioIndicator,\n\tRadioInputSandbox,\n\tRadioItem,\n\tRadioItemContent,\n\tRadioListItem,\n};\n"],"mappings":"gFAEA,OACC,SAASA,EACT,cAAcC,MACR,oBAKP,OAAS,QAAAC,MAAY,uBACrB,OAAOC,MAAU,OACjB,OACC,YAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,cAAAC,EACA,kBAAAC,EACA,cAAAC,EACA,UAAAC,MACM,QAsCW,OAmLb,YAAAC,EAnLa,OAAAC,MAAA,oBAHlB,IAAMC,EAAaC,EAGjB,CAACC,EAAOC,IAAQJ,EAACK,EAAA,CAAoB,GAAGF,EAAO,IAAKC,EAAK,CAAE,EAC7DH,EAAW,YAAc,aAkBzB,IAAMK,EAAoBC,EAAsC,CAC/D,UAAW,GACX,QAAS,GACT,SAAU,GACV,MAAO,GACP,MAAO,EACR,CAAC,EAoBKC,EAAYN,EACjB,CAAC,CAAE,SAAAO,EAAU,UAAAC,EAAW,GAAGP,CAAM,EAAGC,IACnCJ,EAACW,EAAA,CACA,UAAWC,EACV,6HACAF,CACD,EACA,GAAG,MACF,GAAGP,EACJ,IAAKC,EAEJ,SAACS,GACDb,EAACM,EAAkB,SAAlB,CAA2B,MAAOO,EACjC,SAAAJ,EACF,EAEF,CAEF,EACAD,EAAU,YAAc,YAUxB,IAAMM,EAAwB,CAAC,CAC9B,QAAAC,EACA,SAAAC,EACA,MAAAC,EACA,MAAAC,CACD,IACClB,EAAC,QACA,UAAWY,EACV,mFACAI,GAAY,4BACZD,GAAW,kCACXE,GAAS,CAACD,GAAY,6CACtBE,GAAS,mBACV,EAEC,SAAAH,GAAWf,EAAC,QAAK,UAAU,yCAAyC,EACtE,EAqBKmB,EAAiB,CAAC,CACvB,SAAAV,EACA,UAAAC,EACA,GAAGP,CACJ,IAA2B,CAC1B,IAAMU,EAAMO,EAAWd,CAAiB,EAExC,OACCN,EAAC,OACA,UAAWY,EACV,sFACAF,CACD,EACC,GAAGP,EAEH,SAAAM,GAAY,KACZT,EAACc,EAAA,CAAuB,GAAGD,EAAK,EAC7B,OAAOJ,GAAa,WACvBA,EAASI,CAAG,EAEZJ,EAEF,CAEF,EACAU,EAAe,YAAc,iBAK7B,IAAME,EAAiBnB,EAGrB,CAAC,CAAE,UAAAQ,EAAW,GAAGP,CAAM,EAAGC,IAE1BJ,EAACC,EAAA,CACA,UAAWqB,EAAK,cAAeZ,CAAS,EACvC,GAAGP,EACJ,IAAKC,EACN,CAED,EACDiB,EAAe,YAAc,iBAO7B,IAAME,EAAgBrB,EACrB,CAAC,CAAE,SAAAO,EAAU,UAAAC,EAAW,GAAGP,CAAM,EAAGC,IAElCJ,EAACW,EAAA,CACA,GAAG,MACH,UAAWC,EACV,4GACA,iDACA,oGACA,gHACA,2FACA,yOACA,iFACAF,CACD,EACA,IAAKN,EACJ,GAAGD,EAEH,SAACU,GACDb,EAAAD,EAAA,CACC,SAAAC,EAACM,EAAkB,SAAlB,CAA2B,MAAOO,EACjC,SAAAJ,EACF,EACD,EAEF,CAGH,EACAc,EAAc,YAAc,gBAS5B,IAAMC,EAAYtB,EACjB,CAAC,CAAE,SAAAO,EAAU,UAAAC,EAAW,GAAGP,CAAM,EAAGC,IAElCJ,EAACW,EAAA,CACA,GAAG,MACH,UAAWW,EACV,kGACA,iDACA,oGACA,gHACA,2FACA,oOACAZ,CACD,EACC,GAAGP,EACJ,IAAKC,EAEJ,SAACS,GACDb,EAAAD,EAAA,CACC,SAAAC,EAACM,EAAkB,SAAlB,CAA2B,MAAOO,EACjC,SAAAJ,EACF,EACD,EAEF,CAGH,EACAe,EAAU,YAAc,YAMxB,IAAMC,EAAmB,CAAC,CACzB,QAAAC,EAAU,GACV,SAAAjB,EACA,UAAAC,EACA,GAAGP,CACJ,IAA6B,CAC5B,IAAMU,EAAMO,EAAWd,CAAiB,EAGxC,OACCN,EAHiB0B,EAAUC,EAAO,MAGjC,CACA,UAAWL,EACV,iBACAT,EAAI,UAAY,aAChBH,CACD,EACC,GAAGP,EAEH,SAAAM,EACF,CAEF,EACAgB,EAAiB,YAAc,mBAK/B,IAAMG,EAAmB1B,EAGvB,CAAC,CAAE,UAAAQ,EAAW,GAAGP,CAAM,EAAGC,IAE1BJ,EAACC,EAAA,CACA,UAAWqB,EAAK,wCAAyCZ,CAAS,EACjE,GAAGP,EACJ,IAAKC,EACN,CAED,EACDwB,EAAiB,YAAc,mBAO/B,IAAMC,EAAc3B,EACnB,CAAC,CAAE,SAAAO,EAAU,UAAAC,EAAW,GAAGP,CAAM,EAAGC,IAElCJ,EAACW,EAAA,CACA,GAAG,MACH,UAAWC,EACV,0IACA,MACA,oGACA,iDACA,gHACA,uFACA,qIACA,iFACAF,CACD,EACA,IAAKN,EACJ,GAAGD,EAEH,SAACU,GACDb,EAAAD,EAAA,CACC,SAAAC,EAACM,EAAkB,SAAlB,CAA2B,MAAOO,EACjC,SAAAJ,EACF,EACD,EAEF,CAGH,EACAoB,EAAY,YAAc,cAQ1B,IAAMC,EAAoB,CAAC,CAC1B,SAAArB,EACA,QAAAsB,EACA,UAAAC,EACA,GAAG7B,CACJ,IAA8B,CAC7B,IAAMC,EAAM6B,EAAuB,IAAI,EACjCpB,EAAMO,EAAWd,CAAiB,EAElC4B,EAAcC,EAAS,KAAK1B,CAAQ,EAGpC2B,EAAwBvB,EAAI,UAAY,CAACA,EAAI,QAEnD,OACCb,EAAC,OACA,IAAKI,EACL,gBAAeS,EAAI,SACnB,UAAYwB,GAAU,CACrB,GAAIxB,EAAI,SAAU,CACjBwB,EAAM,gBAAgB,EACtBA,EAAM,eAAe,EACrB,MACD,CACA,OAAQA,EAAM,IAAK,CAClB,IAAK,QACL,IAAK,MACJ,MACD,QACCA,EAAM,gBAAgB,CACxB,CACAL,IAAYK,CAAK,CAClB,EACA,QAAUA,GAAU,CACnB,GAAIxB,EAAI,SAAU,CACjBwB,EAAM,gBAAgB,EACtBA,EAAM,eAAe,EACrB,MACD,CACA,IAAMC,EAASD,EAAM,OACjBE,EAAQD,CAAM,GACjB,OAAO,sBAAsB,IAAM,CAClCA,EAAO,MAAM,CACd,CAAC,EAEFP,IAAUM,CAAK,CAChB,EACC,GAAGlC,EAEH,SAAAqC,EAAiCN,CAAW,EAC1CO,EAAaP,EAAa,CAC1B,SAAUrB,EAAI,UAAYqB,EAAY,MAAM,SAC5C,SAAUE,EAAwB,GAAKF,EAAY,MAAM,QAC1D,CAAC,EACA,KACJ,CAEF,EACAJ,EAAkB,YAAc","names":["HeadlessRadio","HeadlessRadioGroup","Slot","clsx","Children","cloneElement","createContext","forwardRef","isValidElement","useContext","useRef","Fragment","jsx","RadioGroup","forwardRef","props","ref","HeadlessRadioGroup","RadioStateContext","createContext","RadioItem","children","className","HeadlessRadio","cx","ctx","DefaultRadioIndicator","checked","disabled","focus","hover","RadioIndicator","useContext","RadioGroupList","clsx","RadioListItem","RadioCard","RadioItemContent","asChild","Slot","RadioButtonGroup","RadioButton","RadioInputSandbox","onClick","onKeyDown","useRef","singleChild","Children","shouldPreventTabIndex","event","target","isInput","isValidElement","cloneElement"]}

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

@@ -44,9 +44,6 @@ 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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/sandboxed-on-click/sandboxed-on-click.tsx"],"sourcesContent":["\"use client\";\n\nimport { 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":"AAEA,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"]}
+{"version":3,"sources":["../src/components/sandboxed-on-click/sandboxed-on-click.tsx"],"sourcesContent":["\"use client\";\n\nimport { 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 * @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":"AAEA,OAAS,QAAAA,MAAY,uBAOrB,OAAS,cAAAC,MAAkB,QAsGxB,cAAAC,MAAA,oBAvEH,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,GAqBKC,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

@@ -8,7 +8,10 @@ type WithAriaInvalid = Pick<SelectHTMLAttributes<HTMLSelectElement>, "aria-inval
 /**
  * Displays a list of options for the user to pick from—triggered by a button.
  *
+ * @see https://mantle.ngrok.com/components/select#api-select
+ *
  * @example
+ * ```tsx
  * <Select>
  *   <SelectTrigger>
  *     <SelectValue placeholder="Select a fruit" />
@@ -28,8 +31,7 @@ type WithAriaInvalid = Pick<SelectHTMLAttributes<HTMLSelectElement>, "aria-inval
  *     </SelectGroup>
  *   </SelectContent>
  * </Select>
- *
- * @see https://mantle.ngrok.com/components/select#api-select
+ * ```
  */
 declare const Select: react.ForwardRefExoticComponent<{
     children?: ReactNode | undefined;
@@ -106,7 +108,10 @@ declare const SelectValue: react.ForwardRefExoticComponent<SelectPrimitive.Selec
 /**
  * The button that toggles the select. The SelectContent will position itself adjacent to the trigger.
  *
+ * @see https://mantle.ngrok.com/components/select#api-select-trigger
+ *
  * @example
+ * ```tsx
  * <Select>
  *   <SelectTrigger>
  *     <SelectValue placeholder="Select a fruit" />
@@ -117,8 +122,7 @@ declare const SelectValue: react.ForwardRefExoticComponent<SelectPrimitive.Selec
  *     <SelectItem value="cherry">Cherry</SelectItem>
  *   </SelectContent>
  * </Select>
- *
- * @see https://mantle.ngrok.com/components/select#api-select-trigger
+ * ```
  */
 declare const SelectTrigger: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & WithAriaInvalid & WithValidation & react.RefAttributes<HTMLButtonElement>>;
 /**

package/dist/select.js

@@ -1,2 +1,2 @@
-import{a as e,b as t,c as l,d as S,e as c,f as r,g as o,h as a}from"./chunk-ZXLA5BJX.js";import"./chunk-MF2QITTY.js";import"./chunk-UXH22BMO.js";import"./chunk-XQVVOOLT.js";import"./chunk-HDPLH5HC.js";import"./chunk-AZ56JGNY.js";export{e as Select,c as SelectContent,t as SelectGroup,o as SelectItem,r as SelectLabel,a as SelectSeparator,S as SelectTrigger,l as SelectValue};
+import{a as e,b as t,c as l,d as S,e as c,f as r,g as o,h as a}from"./chunk-3X4AKTRA.js";import"./chunk-MF2QITTY.js";import"./chunk-J6ZF5J72.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import"./chunk-AZ56JGNY.js";export{e as Select,c as SelectContent,t as SelectGroup,o as SelectItem,r as SelectLabel,a as SelectSeparator,S as SelectTrigger,l as SelectValue};
 //# sourceMappingURL=select.js.map

package/dist/separator.d.ts

@@ -30,7 +30,10 @@ type Orientation = (typeof orientations)[number];
  * </HorizontalSeparatorGroup>
  * ```
  */
-declare const HorizontalSeparatorGroup: ({ className, children, asChild, ...props }: HTMLAttributes<HTMLDivElement> & WithAsChild) => react_jsx_runtime.JSX.Element;
+declare const HorizontalSeparatorGroup: {
+    ({ className, children, asChild, ...props }: HTMLAttributes<HTMLDivElement> & WithAsChild): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 type SeparatorProps = ComponentProps<"div"> & WithAsChild & {
     /**
      * Either `horizontal` or `vertical`.

package/dist/separator.js

@@ -1,2 +1,2 @@
-import{a as r,b as o}from"./chunk-UXH22BMO.js";import"./chunk-AZ56JGNY.js";export{r as HorizontalSeparatorGroup,o as Separator};
+import{a as r,b as o}from"./chunk-J6ZF5J72.js";import"./chunk-AZ56JGNY.js";export{r as HorizontalSeparatorGroup,o as Separator};
 //# sourceMappingURL=separator.js.map

package/dist/sheet.d.ts

@@ -4,8 +4,8 @@ import * as react from 'react';
 import { HTMLAttributes } from 'react';
 import * as _radix_ui_react_dialog from '@radix-ui/react-dialog';
 import { VariantProps } from 'class-variance-authority';
-import { a as IconButtonProps } from './icon-button-D41yiI7H.js';
-import { R as Root } from './primitive-hud69IM9.js';
+import { a as IconButtonProps } from './icon-button-D4BTvC7F.js';
+import { R as Root } from './primitive-BUbUB7RS.js';
 import './as-child-DJ7x3JFV.js';
 import './variant-props-oDo2u-We.js';
 import './deep-non-nullable-SmpSvoSd.js';
@@ -280,7 +280,10 @@ type SheetCloseIconButtonProps = Partial<Omit<IconButtonProps, "icon">>;
  * </Sheet>
  * ```
  */
-declare const SheetCloseIconButton: ({ size, type, label, appearance, ...props }: SheetCloseIconButtonProps) => react_jsx_runtime.JSX.Element;
+declare const SheetCloseIconButton: {
+    ({ size, type, label, appearance, ...props }: SheetCloseIconButtonProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 /**
  * The body container for a `Sheet`. This is where you would typically place the main content of the sheet, such as forms or text.
  * Should be rendered as a child of `SheetContent`.
@@ -330,7 +333,10 @@ declare const SheetCloseIconButton: ({ size, type, label, appearance, ...props }
  * </Sheet>
  * ```
  */
-declare const SheetBody: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+declare const SheetBody: {
+    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 /**
  * The header container for a `Sheet`. This is where you would typically place the title, description, and actions.
  * Should be rendered as a child of `SheetContent`.
@@ -380,7 +386,10 @@ declare const SheetBody: ({ className, ...props }: HTMLAttributes<HTMLDivElement
  * </Sheet>
  * ```
  */
-declare const SheetHeader: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+declare const SheetHeader: {
+    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 /**
  * The footer container for a `Sheet`. This is where you would typically place close and submit buttons.
  * Should be rendered as a child of `SheetContent`.
@@ -430,7 +439,10 @@ declare const SheetHeader: ({ className, ...props }: HTMLAttributes<HTMLDivEleme
  * </Sheet>
  * ```
  */
-declare const SheetFooter: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+declare const SheetFooter: {
+    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 /**
  * The title for a `Sheet`. Typically rendered as a child of `SheetTitleGroup`.
  * Defaults to an `h2` element, but can be changed via the `asChild` prop.

package/dist/sheet.js

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

package/dist/sheet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/sheet/sheet.tsx"],"sourcesContent":["import { XIcon } 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={<XIcon />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t</SheetPrimitive.Close>\n);\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":"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","names":["XIcon","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","XIcon","SheetBody","SheetHeader","SheetFooter","SheetTitle","Title","SheetTitleGroup","SheetDescription","Description","SheetActions"]}
+{"version":3,"sources":["../src/components/sheet/sheet.tsx"],"sourcesContent":["import { XIcon } 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;\nSheet.displayName = \"Sheet\";\n\n/**\n * The button trigger for a `Sheet`. Should be rendered as a child of the `Sheet` component.\n * Renders an unstyled button by default, but can be customized with the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/sheet#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;\nSheetTrigger.displayName = \"SheetTrigger\";\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;\nSheetClose.displayName = \"SheetClose\";\n\n/**\n * The portal for a sheet. Should be rendered as a child of the `Sheet` component.\n * Renders a portal that the `SheetOverlay` and `SheetContent` is rendered into.\n *\n * @private\n */\nconst SheetPortal = SheetPrimitive.Portal;\nSheetPortal.displayName = \"SheetPortal\";\n\n/**\n * The overlay backdrop for a sheet. Should be rendered as a child of the `SheetPortal` component.\n *\n * You likely don't need to use this component directly, as it is used internally by the `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={<XIcon />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t</SheetPrimitive.Close>\n);\nSheetCloseIconButton.displayName = \"SheetCloseIconButton\";\n\n/**\n * The body container for a `Sheet`. This is where you would typically place the main content of the sheet, such as forms or text.\n * Should be rendered as a child of `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);\nSheetBody.displayName = \"SheetBody\";\n\n/**\n * The header container for a `Sheet`. This is where you would typically place the title, description, and actions.\n * Should be rendered as a child of `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);\nSheetHeader.displayName = \"SheetHeader\";\n\n/**\n * The footer container for a `Sheet`. This is where you would typically place close and submit buttons.\n * Should be rendered as a child of `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);\nSheetFooter.displayName = \"SheetFooter\";\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":"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","names":["XIcon","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","XIcon","SheetBody","SheetHeader","SheetFooter","SheetTitle","Title","SheetTitleGroup","SheetDescription","Description","SheetActions"]}

package/dist/{svg-only-CS2INnEL.d.ts → svg-only-Bj2yffO4.d.ts}

@@ -10,16 +10,16 @@ type SvgOnlyProps = Omit<SvgAttributes, "children"> & {
 };
 /**
  * Accepts a single SVG icon element and decorates it with `shrink-0` class.
+ * You probably want to use the `Icon` component instead.
  *
- * Merges `className` selectors with the following order of precedence (last one wins):
- * 1. SvgOnly base classes ("shrink-0")
- * 2. SvgOnly className
- * 3. svg className
+ * @see https://mantle.ngrok.com/components/icon#api-svg-only
  *
- * You probably want to use the `Icon` component instead.
+ * @example
+ * ```tsx
+ * import { ShrimpIcon } from "@phosphor-icons/react/Shrimp";
  *
- * The main difference between `Icon` and `SvgOnly` is that `SvgOnly` does not
- * apply any default sizing styles, only `shrink-0`.
+ * <SvgOnly svg={<ShrimpIcon />} />
+ * ```
  */
 declare const SvgOnly: react.ForwardRefExoticComponent<Omit<SvgOnlyProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
 

package/dist/switch.d.ts

@@ -4,7 +4,7 @@ import * as _radix_ui_react_switch from '@radix-ui/react-switch';
 /**
  * A form control that allows the user to toggle between checked and not checked.
  *
- * @see https://mantle.ngrok.com/components/switch#api
+ * @see https://mantle.ngrok.com/components/switch#api-switch
  *
  * @example
  * ```tsx
@@ -14,7 +14,7 @@ import * as _radix_ui_react_switch from '@radix-ui/react-switch';
  *     <Switch name="airplane-mode" id="airplane-mode" />
  *   </Label>
  * </form>
- *```
+ * ```
  */
 declare const Switch: react.ForwardRefExoticComponent<Omit<_radix_ui_react_switch.SwitchProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
     /**