@ngrok/mantle 0.55.4 → 0.56.0

package/dist/alert.js

@@ -1,2 +1,2 @@
-import{c as d}from"./chunk-XTCU7MXB.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import{a as l}from"./chunk-NPTDRQT5.js";import{a as i}from"./chunk-AZ56JGNY.js";import{CheckCircleIcon as C}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as P}from"@phosphor-icons/react/Info";import{WarningIcon as I}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as N}from"@phosphor-icons/react/WarningDiamond";import{XIcon as h}from"@phosphor-icons/react/X";import{Slot as m}from"@radix-ui/react-slot";import{cva as w}from"class-variance-authority";import{createContext as R,forwardRef as c,useContext as D,useMemo as T}from"react";import B from"tiny-invariant";import{jsx as r}from"react/jsx-runtime";var u=R(null);function f(){let t=D(u);return B(t,"useAlertContext hook used outside of Alert parent!"),t}var H=w("relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm",{variants:{priority:{danger:"border-danger-500/50 bg-danger-500/10 text-danger-700",info:"border-accent-500/50 bg-accent-500/10 text-accent-700",success:"border-success-500/50 bg-success-500/10 text-success-700",warning:"border-warning-500/50 bg-warning-500/10 text-warning-700"},appearance:{banner:"border-x-0 border-t-0 rounded-none z-50 sticky",default:""}},compoundVariants:[{priority:"danger",appearance:"banner",className:""},{priority:"info",appearance:"banner",className:""},{priority:"success",appearance:"banner",className:""},{priority:"warning",appearance:"banner",className:""}]}),g=c(({appearance:t="default",className:o,priority:e,...n},s)=>{let a=T(()=>({priority:e}),[e]);return r(u.Provider,{value:a,children:r("div",{ref:s,className:i(H({appearance:t,priority:e}),o),...n})})});g.displayName="Alert";var M={danger:r(I,{}),info:r(P,{}),success:r(C,{}),warning:r(N,{})},y=c(({className:t,svg:o,...e},n)=>{let s=f(),a=M[s.priority];return r(l,{ref:n,className:i("size-5",t),svg:o??a,...e})});y.displayName="AlertIcon";var x=c(({className:t,...o},e)=>r("div",{ref:e,className:i("min-w-0 flex-1 has-[[data-alert-dismiss]]:pr-6",t),...o}));x.displayName="AlertContent";var A=c(({asChild:t=!1,className:o,...e},n)=>r(t?m:"h5",{ref:n,className:i("font-medium",o),...e}));A.displayName="AlertTitle";var b=c(({asChild:t=!1,className:o,...e},n)=>r(t?m:"div",{ref:n,className:i("text-sm",o),...e}));b.displayName="AlertDescription";var v=({size:t="sm",type:o="button",label:e="Dismiss Alert",appearance:n="ghost",className:s,...a})=>{let p=f();return r(d,{appearance:n,icon:r(h,{}),label:e,size:t,"data-alert-dismiss":!0,className:i("right-1.5 top-1.5 absolute",{"text-danger-700 not-disabled:hover:text-danger-800 not-disabled:active:text-danger-900":p.priority==="danger","text-accent-700 not-disabled:hover:text-accent-800 not-disabled:active:text-accent-900":p.priority==="info","text-success-700 not-disabled:hover:text-success-800 not-disabled:active:text-success-900":p.priority==="success","text-warning-700 not-disabled:hover:text-warning-800 not-disabled:active:text-warning-900":p.priority==="warning"},s),type:o,...a})};v.displayName="AlertDismissIconButton";var V={Root:g,Content:x,Description:b,DismissIconButton:v,Icon:y,Title:A};export{V as Alert};
+import{c as d}from"./chunk-5TI54DZZ.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import{a as l}from"./chunk-NPTDRQT5.js";import{a as i}from"./chunk-AZ56JGNY.js";import{CheckCircleIcon as C}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as P}from"@phosphor-icons/react/Info";import{WarningIcon as I}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as N}from"@phosphor-icons/react/WarningDiamond";import{XIcon as h}from"@phosphor-icons/react/X";import{Slot as m}from"@radix-ui/react-slot";import{cva as w}from"class-variance-authority";import{createContext as R,forwardRef as c,useContext as D,useMemo as T}from"react";import B from"tiny-invariant";import{jsx as r}from"react/jsx-runtime";var u=R(null);function f(){let t=D(u);return B(t,"useAlertContext hook used outside of Alert parent!"),t}var H=w("relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm",{variants:{priority:{danger:"border-danger-500/50 bg-danger-500/10 text-danger-700",info:"border-accent-500/50 bg-accent-500/10 text-accent-700",success:"border-success-500/50 bg-success-500/10 text-success-700",warning:"border-warning-500/50 bg-warning-500/10 text-warning-700"},appearance:{banner:"border-x-0 border-t-0 rounded-none z-50 sticky",default:""}},compoundVariants:[{priority:"danger",appearance:"banner",className:""},{priority:"info",appearance:"banner",className:""},{priority:"success",appearance:"banner",className:""},{priority:"warning",appearance:"banner",className:""}]}),g=c(({appearance:t="default",className:o,priority:e,...n},s)=>{let a=T(()=>({priority:e}),[e]);return r(u.Provider,{value:a,children:r("div",{ref:s,className:i(H({appearance:t,priority:e}),o),...n})})});g.displayName="Alert";var M={danger:r(I,{}),info:r(P,{}),success:r(C,{}),warning:r(N,{})},y=c(({className:t,svg:o,...e},n)=>{let s=f(),a=M[s.priority];return r(l,{ref:n,className:i("size-5",t),svg:o??a,...e})});y.displayName="AlertIcon";var x=c(({className:t,...o},e)=>r("div",{ref:e,className:i("min-w-0 flex-1 has-[[data-alert-dismiss]]:pr-6",t),...o}));x.displayName="AlertContent";var A=c(({asChild:t=!1,className:o,...e},n)=>r(t?m:"h5",{ref:n,className:i("font-medium",o),...e}));A.displayName="AlertTitle";var b=c(({asChild:t=!1,className:o,...e},n)=>r(t?m:"div",{ref:n,className:i("text-sm",o),...e}));b.displayName="AlertDescription";var v=({size:t="sm",type:o="button",label:e="Dismiss Alert",appearance:n="ghost",className:s,...a})=>{let p=f();return r(d,{appearance:n,icon:r(h,{}),label:e,size:t,"data-alert-dismiss":!0,className:i("right-1.5 top-1.5 absolute",{"text-danger-700 not-disabled:hover:text-danger-800 not-disabled:active:text-danger-900":p.priority==="danger","text-accent-700 not-disabled:hover:text-accent-800 not-disabled:active:text-accent-900":p.priority==="info","text-success-700 not-disabled:hover:text-success-800 not-disabled:active:text-success-900":p.priority==="success","text-warning-700 not-disabled:hover:text-warning-800 not-disabled:active:text-warning-900":p.priority==="warning"},s),type:o,...a})};v.displayName="AlertDismissIconButton";var V={Root:g,Content:x,Description:b,DismissIconButton:v,Icon:y,Title:A};export{V as Alert};
 //# sourceMappingURL=alert.js.map

package/dist/button.js

@@ -1,2 +1,2 @@
-import{a as c}from"./chunk-3H3EUKI7.js";import{c as a}from"./chunk-XTCU7MXB.js";import{a as b}from"./chunk-T5U5KWUW.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import"./chunk-AZ56JGNY.js";export{b as Button,c as ButtonGroup,a as IconButton};
+import{a as c}from"./chunk-3H3EUKI7.js";import{c as a}from"./chunk-5TI54DZZ.js";import{a as b}from"./chunk-T5U5KWUW.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import"./chunk-AZ56JGNY.js";export{b as Button,c as ButtonGroup,a as IconButton};
 //# sourceMappingURL=button.js.map

package/dist/calendar.js

@@ -1,2 +1,2 @@
-import{a,b as o}from"./chunk-XTCU7MXB.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import{a as r}from"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as e}from"./chunk-AZ56JGNY.js";import{CaretLeftIcon as p}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as f}from"@phosphor-icons/react/CaretRight";import{DayPicker as u}from"react-day-picker";import{jsx as t}from"react/jsx-runtime";function d({className:l,classNames:s,showOutsideDays:i=!1,...n}){return t(u,{animate:!1,components:{Chevron:c=>{let m=c.orientation==="left"?t(p,{}):t(f,{});return t(r,{svg:m,className:"size-4"})}},classNames:{root:e("isolate",l),button_next:e(a,o({appearance:"ghost",size:"sm"}),"absolute right-0"),button_previous:e(a,o({appearance:"ghost",size:"sm"}),"absolute left-0"),caption_label:"text-sm font-medium",day:e("overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 size-7 rounded-md",n.mode==="range"?"first:has-aria-selected:rounded-l-md last:has-aria-selected:rounded-r-md":""),day_button:"day size-full rounded-md not-aria-selected:not-disabled:hover:bg-filled-accent/15",disabled:"text-muted opacity-50",hidden:"invisible",month:"space-y-4",month_caption:"flex justify-center pt-1 relative items-center",month_grid:"w-full border-collapse space-y-1",months:"flex flex-col sm:flex-row gap-y-4 sm:gap-x-4 sm:gap-y-0 relative max-w-min",nav:"flex items-center absolute inset-x-0 top-1 h-5 justify-between z-10",outside:"day-outside aria-selected:text-on-filled opacity-50 text-muted",range_end:"day-range-end [&:not(.day-range-start)]:rounded-l-none",range_middle:"day-range-middle not-disabled:aria-selected:bg-filled-accent/15 aria-selected:text-strong rounded-none not-disabled:aria-selected:hover:bg-filled-accent/25",range_start:"day-range-start [&:not(.day-range-end)]:rounded-r-none",selected:"not-disabled:bg-filled-accent text-on-filled not-disabled:hover:bg-filled-accent",today:"not-aria-selected:not-disabled:text-accent-600 font-medium not-aria-selected:not-disabled:bg-filled-accent/10 rounded-md",week:"flex w-full mt-1",weekday:"text-body w-7 text-[0.8rem] text-center font-normal",weekdays:"flex",...s},showOutsideDays:i,...n})}d.displayName="Calendar";export{d as Calendar};
+import{a,b as o}from"./chunk-5TI54DZZ.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import{a as r}from"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as e}from"./chunk-AZ56JGNY.js";import{CaretLeftIcon as p}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as f}from"@phosphor-icons/react/CaretRight";import{DayPicker as u}from"react-day-picker";import{jsx as t}from"react/jsx-runtime";function d({className:l,classNames:s,showOutsideDays:i=!1,...n}){return t(u,{animate:!1,components:{Chevron:c=>{let m=c.orientation==="left"?t(p,{}):t(f,{});return t(r,{svg:m,className:"size-4"})}},classNames:{root:e("isolate",l),button_next:e(a,o({appearance:"ghost",size:"sm"}),"absolute right-0"),button_previous:e(a,o({appearance:"ghost",size:"sm"}),"absolute left-0"),caption_label:"text-sm font-medium",day:e("overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 size-7 rounded-md",n.mode==="range"?"first:has-aria-selected:rounded-l-md last:has-aria-selected:rounded-r-md":""),day_button:"day size-full rounded-md not-aria-selected:not-disabled:hover:bg-filled-accent/15",disabled:"text-muted opacity-50",hidden:"invisible",month:"space-y-4",month_caption:"flex justify-center pt-1 relative items-center",month_grid:"w-full border-collapse space-y-1",months:"flex flex-col sm:flex-row gap-y-4 sm:gap-x-4 sm:gap-y-0 relative max-w-min",nav:"flex items-center absolute inset-x-0 top-1 h-5 justify-between z-10",outside:"day-outside aria-selected:text-on-filled opacity-50 text-muted",range_end:"day-range-end [&:not(.day-range-start)]:rounded-l-none",range_middle:"day-range-middle not-disabled:aria-selected:bg-filled-accent/15 aria-selected:text-strong rounded-none not-disabled:aria-selected:hover:bg-filled-accent/25",range_start:"day-range-start [&:not(.day-range-end)]:rounded-r-none",selected:"not-disabled:bg-filled-accent text-on-filled not-disabled:hover:bg-filled-accent",today:"not-aria-selected:not-disabled:text-accent-600 font-medium not-aria-selected:not-disabled:bg-filled-accent/10 rounded-md",week:"flex w-full mt-1",weekday:"text-body w-7 text-[0.8rem] text-center font-normal",weekdays:"flex",...s},showOutsideDays:i,...n})}d.displayName="Calendar";export{d as Calendar};
 //# sourceMappingURL=calendar.js.map

package/dist/chunk-5TI54DZZ.js

@@ -0,0 +1,2 @@
+import{a as l}from"./chunk-3C5O3AQA.js";import{a as d}from"./chunk-I6T6YV2L.js";import{a as r}from"./chunk-AZ56JGNY.js";import{CircleNotchIcon as x}from"@phosphor-icons/react/CircleNotch";import{Slot as I}from"@radix-ui/react-slot";import{cva as C}from"class-variance-authority";import{clsx as H}from"clsx";import{Children as M,cloneElement as T,forwardRef as V,isValidElement as E}from"react";import N from"tiny-invariant";import{Fragment as z,jsx as t,jsxs as R}from"react/jsx-runtime";var A=H("icon-button","inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border","focus:outline-hidden focus-visible:ring-4","disabled:cursor-default disabled:opacity-50","not-disabled:active:scale-[0.97]"),L=C("",{variants:{appearance:{ghost:"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent",outlined:"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600"},isLoading:{false:"",true:"opacity-50"},size:{xs:"size-6",sm:"size-7",md:"size-9"}},defaultVariants:{appearance:"outlined",size:"md"}}),P=V(({"aria-disabled":c,appearance:u,asChild:b=!1,children:o,className:p,disabled:m,icon:f,isLoading:e=!1,label:v,size:a,type:h,...B},g)=>{let n=l(c??m??e),y=e?t(x,{className:"animate-spin"}):f,s={"aria-disabled":n,className:r(A,L({appearance:u,isLoading:e,size:a}),p),"data-disabled":n,"data-icon-button":!0,"data-loading":e,"data-size":a,disabled:n,ref:g,...B},i=R(z,{children:[t("span",{className:"sr-only",children:v}),t(d,{svg:y})]});return b?(N(E(o)&&M.only(o),"When using `asChild`, IconButton must be passed a single child as a JSX tag."),t(I,{...s,children:T(o,{},i)})):t("button",{...s,type:h,children:i})});P.displayName="IconButton";export{A as a,L as b,P as c};
+//# sourceMappingURL=chunk-5TI54DZZ.js.map

package/dist/{chunk-XTCU7MXB.js.map → chunk-5TI54DZZ.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/button/icon-button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { VariantProps, WithAsChild } from \"../../types/index.js\";\nimport { parseBooleanish } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/index.js\";\n\nconst baseIconButtonClasses = clsx(\n\t\"icon-button\",\n\t\"inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border\",\n\t\"focus:outline-hidden focus-visible:ring-4\",\n\t\"disabled:cursor-default disabled:opacity-50\",\n\t\"not-disabled:active:scale-[0.97]\",\n);\n\nconst iconButtonVariants = cva(\"\", {\n\tvariants: {\n\t\t/**\n\t\t * Defines the visual style of the Button.\n\t\t */\n\t\tappearance: {\n\t\t\tghost:\n\t\t\t\t\"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent\",\n\t\t\toutlined:\n\t\t\t\t\"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600\",\n\t\t},\n\t\t/**\n\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t * replace the `icon` with a spinner.\n\t\t * It will also disable user interaction with the button and set `aria-disabled`.\n\t\t */\n\t\tisLoading: {\n\t\t\tfalse: \"\",\n\t\t\ttrue: \"opacity-50\",\n\t\t},\n\t\t/**\n\t\t * The size of the IconButton.\n\t\t */\n\t\tsize: {\n\t\t\txs: \"size-6\",\n\t\t\tsm: \"size-7\",\n\t\t\tmd: \"size-9\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tappearance: \"outlined\",\n\t\tsize: \"md\",\n\t},\n});\n\ntype IconButtonVariants = VariantProps<typeof iconButtonVariants>;\n\n/**\n * The props for the `Button` component.\n */\ntype IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tWithAsChild &\n\tIconButtonVariants & {\n\t\t/**\n\t\t * The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.\n\t\t */\n\t\tlabel: string;\n\t\t/**\n\t\t * An icon to render inside the button. If the `state` is `\"pending\"`, then\n\t\t * the icon will automatically be replaced with a spinner.\n\t\t */\n\t\ticon: ReactNode;\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Use the `asChild` prop to compose Radix's functionality onto alternative\n\t\t\t\t * element types or your own React components.\n\t\t\t\t *\n\t\t\t\t * When `asChild` is set to `true`, mantle will not render a default DOM\n\t\t\t\t * element, instead cloning the component's child and passing it the props and\n\t\t\t\t * behavior required to make it functional.\n\t\t\t\t *\n\t\t\t\t * asChild can be used as deeply as you need to. This means it is a great way\n\t\t\t\t * to compose multiple primitive's behavior together.\n\t\t\t\t *\n\t\t\t\t * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition\n\t\t\t\t */\n\t\t\t\tasChild: true;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t\t  }\n\t\t| {\n\t\t\t\tasChild?: false | undefined;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype: Exclude<\n\t\t\t\t\tButtonHTMLAttributes<HTMLButtonElement>[\"type\"],\n\t\t\t\t\tundefined\n\t\t\t\t>;\n\t\t  }\n\t);\n\n/**\n * Renders a button or a component that looks like a button, an interactive\n * element activated by a user with a mouse, keyboard, finger, voice command, or\n * other assistive technology. Once activated, it then performs an action, such\n * as submitting a form or opening a dialog.\n * Renders only a single icon as children with an accessible, screen-reader-only label.\n *\n * @see https://mantle.ngrok.com/components/button#api-icon-button\n *\n * @example\n * ```tsx\n * <IconButton\n *   type=\"button\"\n *   icon={<TrashIcon />}\n *   label=\"Delete item\"\n *   appearance=\"ghost\"\n *   size=\"sm\"\n * />\n * ```\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\ticon: propIcon,\n\t\t\tisLoading = false,\n\t\t\tlabel,\n\t\t\tsize,\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled ?? isLoading);\n\t\tconst icon = isLoading ? (\n\t\t\t<CircleNotchIcon className=\"animate-spin\" />\n\t\t) : (\n\t\t\tpropIcon\n\t\t);\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\tclassName: cx(\n\t\t\t\tbaseIconButtonClasses,\n\t\t\t\ticonButtonVariants({ appearance, isLoading, size }),\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\t\"data-disabled\": disabled,\n\t\t\t\"data-icon-button\": true,\n\t\t\t\"data-loading\": isLoading,\n\t\t\t\"data-size\": size,\n\t\t\tdisabled,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tinvariant(\n\t\t\t\tisValidElement(children) && Children.only(children),\n\t\t\t\t\"When using `asChild`, IconButton must be passed a single child as a JSX tag.\",\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<Slot {...buttonProps}>\n\t\t\t\t\t{cloneElement(children, {}, <Icon svg={icon} />)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t\t<Icon svg={icon} />\n\t\t\t</button>\n\t\t);\n\t},\n);\nIconButton.displayName = \"IconButton\";\n\nexport {\n\t//,\n\tIconButton,\n\ticonButtonVariants,\n\tbaseIconButtonClasses,\n};\n\nexport type {\n\t//,\n\tIconButtonProps,\n};\n"],"mappings":"mHAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAAW,2BACpB,OAAS,QAAAC,MAAY,OACrB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QAEnE,OAAOC,MAAe,iBAiKnB,cAAAC,EAmCA,QAAAC,MAnCA,oBA3JH,IAAMC,EAAwBC,EAC7B,cACA,8GACA,4CACA,8CACA,kCACD,EAEMC,EAAqBC,EAAI,GAAI,CAClC,SAAU,CAIT,WAAY,CACX,MACC,2MACD,SACC,wWACF,EAMA,UAAW,CACV,MAAO,GACP,KAAM,YACP,EAIA,KAAM,CACL,GAAI,SACJ,GAAI,SACJ,GAAI,QACL,CACD,EACA,gBAAiB,CAChB,WAAY,WACZ,KAAM,IACP,CACD,CAAC,EA8FKC,EAAaC,EAClB,CACC,CACC,gBAAiBC,EACjB,WAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,UAAAC,EACA,SAAUC,EACV,KAAMC,EACN,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EACA,KAAAC,EACA,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAAgBd,GAAiBK,GAAaE,CAAS,EAClEQ,EAAOR,EACZf,EAACwB,EAAA,CAAgB,UAAU,eAAe,EAE1CV,EAGKW,EAAc,CACnB,gBAAiBJ,EACjB,UAAWK,EACVxB,EACAE,EAAmB,CAAE,WAAAK,EAAY,UAAAM,EAAW,KAAAE,CAAK,CAAC,EAClDL,CACD,EACA,gBAAiBS,EACjB,mBAAoB,GACpB,eAAgBN,EAChB,YAAaE,EACb,SAAAI,EACA,IAAAD,EACA,GAAGD,CACJ,EAEA,OAAIT,GACHiB,EACCC,EAAejB,CAAQ,GAAKkB,EAAS,KAAKlB,CAAQ,EAClD,8EACD,EAGCX,EAAC8B,EAAA,CAAM,GAAGL,EACR,SAAAM,EAAapB,EAAU,CAAC,EAAGX,EAACgC,EAAA,CAAK,IAAKT,EAAM,CAAE,EAChD,GAKDtB,EAAC,UAAQ,GAAGwB,EAAa,KAAMP,EAC9B,UAAAlB,EAAC,QAAK,UAAU,UAAW,SAAAgB,EAAM,EACjChB,EAACgC,EAAA,CAAK,IAAKT,EAAM,GAClB,CAEF,CACD,EACAjB,EAAW,YAAc","names":["CircleNotchIcon","Slot","cva","clsx","Children","cloneElement","forwardRef","isValidElement","invariant","jsx","jsxs","baseIconButtonClasses","clsx","iconButtonVariants","cva","IconButton","forwardRef","_ariaDisabled","appearance","asChild","children","className","_disabled","propIcon","isLoading","label","size","type","props","ref","disabled","parseBooleanish","icon","CircleNotchIcon","buttonProps","cx","invariant","isValidElement","Children","Slot","cloneElement","Icon"]}
+{"version":3,"sources":["../src/components/button/icon-button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { VariantProps, WithAsChild } from \"../../types/index.js\";\nimport { parseBooleanish } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/index.js\";\n\nconst baseIconButtonClasses = clsx(\n\t\"icon-button\",\n\t\"inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border\",\n\t\"focus:outline-hidden focus-visible:ring-4\",\n\t\"disabled:cursor-default disabled:opacity-50\",\n\t\"not-disabled:active:scale-[0.97]\",\n);\n\nconst iconButtonVariants = cva(\"\", {\n\tvariants: {\n\t\t/**\n\t\t * Defines the visual style of the Button.\n\t\t */\n\t\tappearance: {\n\t\t\tghost:\n\t\t\t\t\"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent\",\n\t\t\toutlined:\n\t\t\t\t\"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600\",\n\t\t},\n\t\t/**\n\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t * replace the `icon` with a spinner.\n\t\t * It will also disable user interaction with the button and set `aria-disabled`.\n\t\t */\n\t\tisLoading: {\n\t\t\tfalse: \"\",\n\t\t\ttrue: \"opacity-50\",\n\t\t},\n\t\t/**\n\t\t * The size of the IconButton.\n\t\t */\n\t\tsize: {\n\t\t\txs: \"size-6\",\n\t\t\tsm: \"size-7\",\n\t\t\tmd: \"size-9\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tappearance: \"outlined\",\n\t\tsize: \"md\",\n\t},\n});\n\ntype IconButtonVariants = VariantProps<typeof iconButtonVariants>;\n\n/**\n * The props for the `Button` component.\n */\ntype IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tWithAsChild &\n\tIconButtonVariants & {\n\t\t/**\n\t\t * The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.\n\t\t */\n\t\tlabel: string;\n\t\t/**\n\t\t * An icon to render inside the button. If the `state` is `\"pending\"`, then\n\t\t * the icon will automatically be replaced with a spinner.\n\t\t */\n\t\ticon: ReactNode;\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Use the `asChild` prop to compose Radix's functionality onto alternative\n\t\t\t\t * element types or your own React components.\n\t\t\t\t *\n\t\t\t\t * When `asChild` is set to `true`, mantle will not render a default DOM\n\t\t\t\t * element, instead cloning the component's child and passing it the props and\n\t\t\t\t * behavior required to make it functional.\n\t\t\t\t *\n\t\t\t\t * asChild can be used as deeply as you need to. This means it is a great way\n\t\t\t\t * to compose multiple primitive's behavior together.\n\t\t\t\t *\n\t\t\t\t * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition\n\t\t\t\t */\n\t\t\t\tasChild: true;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t\t  }\n\t\t| {\n\t\t\t\tasChild?: false | undefined;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype: Exclude<\n\t\t\t\t\tButtonHTMLAttributes<HTMLButtonElement>[\"type\"],\n\t\t\t\t\tundefined\n\t\t\t\t>;\n\t\t  }\n\t);\n\n/**\n * Renders a button or a component that looks like a button, an interactive\n * element activated by a user with a mouse, keyboard, finger, voice command, or\n * other assistive technology. Once activated, it then performs an action, such\n * as submitting a form or opening a dialog.\n * Renders only a single icon as children with an accessible, screen-reader-only label.\n *\n * @see https://mantle.ngrok.com/components/button#api-icon-button\n *\n * @example\n * ```tsx\n * <IconButton\n *   type=\"button\"\n *   icon={<TrashIcon />}\n *   label=\"Delete item\"\n *   appearance=\"ghost\"\n *   size=\"sm\"\n * />\n * ```\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\ticon: propIcon,\n\t\t\tisLoading = false,\n\t\t\tlabel,\n\t\t\tsize,\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled ?? isLoading);\n\t\tconst icon = isLoading ? (\n\t\t\t<CircleNotchIcon className=\"animate-spin\" />\n\t\t) : (\n\t\t\tpropIcon\n\t\t);\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\tclassName: cx(\n\t\t\t\tbaseIconButtonClasses,\n\t\t\t\ticonButtonVariants({ appearance, isLoading, size }),\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\t\"data-disabled\": disabled,\n\t\t\t\"data-icon-button\": true,\n\t\t\t\"data-loading\": isLoading,\n\t\t\t\"data-size\": size,\n\t\t\tdisabled,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tconst innerChildren = (\n\t\t\t<>\n\t\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t\t<Icon svg={icon} />\n\t\t\t</>\n\t\t);\n\n\t\tif (asChild) {\n\t\t\tinvariant(\n\t\t\t\tisValidElement(children) && Children.only(children),\n\t\t\t\t\"When using `asChild`, IconButton must be passed a single child as a JSX tag.\",\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<Slot {...buttonProps}>\n\t\t\t\t\t{cloneElement(children, {}, innerChildren)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t{innerChildren}\n\t\t\t</button>\n\t\t);\n\t},\n);\nIconButton.displayName = \"IconButton\";\n\nexport {\n\t//,\n\tIconButton,\n\ticonButtonVariants,\n\tbaseIconButtonClasses,\n};\n\nexport type {\n\t//,\n\tIconButtonProps,\n};\n"],"mappings":"wHAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAAW,2BACpB,OAAS,QAAAC,MAAY,OACrB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QAEnE,OAAOC,MAAe,iBAiKnB,OAsBA,YAAAC,EAtBA,OAAAC,EAsBA,QAAAC,MAtBA,oBA3JH,IAAMC,EAAwBC,EAC7B,cACA,8GACA,4CACA,8CACA,kCACD,EAEMC,EAAqBC,EAAI,GAAI,CAClC,SAAU,CAIT,WAAY,CACX,MACC,2MACD,SACC,wWACF,EAMA,UAAW,CACV,MAAO,GACP,KAAM,YACP,EAIA,KAAM,CACL,GAAI,SACJ,GAAI,SACJ,GAAI,QACL,CACD,EACA,gBAAiB,CAChB,WAAY,WACZ,KAAM,IACP,CACD,CAAC,EA8FKC,EAAaC,EAClB,CACC,CACC,gBAAiBC,EACjB,WAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,UAAAC,EACA,SAAUC,EACV,KAAMC,EACN,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EACA,KAAAC,EACA,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAAgBd,GAAiBK,GAAaE,CAAS,EAClEQ,EAAOR,EACZf,EAACwB,EAAA,CAAgB,UAAU,eAAe,EAE1CV,EAGKW,EAAc,CACnB,gBAAiBJ,EACjB,UAAWK,EACVxB,EACAE,EAAmB,CAAE,WAAAK,EAAY,UAAAM,EAAW,KAAAE,CAAK,CAAC,EAClDL,CACD,EACA,gBAAiBS,EACjB,mBAAoB,GACpB,eAAgBN,EAChB,YAAaE,EACb,SAAAI,EACA,IAAAD,EACA,GAAGD,CACJ,EAEMQ,EACL1B,EAAAF,EAAA,CACC,UAAAC,EAAC,QAAK,UAAU,UAAW,SAAAgB,EAAM,EACjChB,EAAC4B,EAAA,CAAK,IAAKL,EAAM,GAClB,EAGD,OAAIb,GACHmB,EACCC,EAAenB,CAAQ,GAAKoB,EAAS,KAAKpB,CAAQ,EAClD,8EACD,EAGCX,EAACgC,EAAA,CAAM,GAAGP,EACR,SAAAQ,EAAatB,EAAU,CAAC,EAAGgB,CAAa,EAC1C,GAKD3B,EAAC,UAAQ,GAAGyB,EAAa,KAAMP,EAC7B,SAAAS,EACF,CAEF,CACD,EACArB,EAAW,YAAc","names":["CircleNotchIcon","Slot","cva","clsx","Children","cloneElement","forwardRef","isValidElement","invariant","Fragment","jsx","jsxs","baseIconButtonClasses","clsx","iconButtonVariants","cva","IconButton","forwardRef","_ariaDisabled","appearance","asChild","children","className","_disabled","propIcon","isLoading","label","size","type","props","ref","disabled","parseBooleanish","icon","CircleNotchIcon","buttonProps","cx","innerChildren","Icon","invariant","isValidElement","Children","Slot","cloneElement"]}

package/dist/chunk-LT2WA5TR.js

@@ -0,0 +1,2 @@
+import{a as f,b as P,c as D,d as m,e as u,f as v,g as y,h as C}from"./chunk-VIKPHWPP.js";import{d as p}from"./chunk-WVBQX6DT.js";import{c as g}from"./chunk-5TI54DZZ.js";import{a}from"./chunk-AZ56JGNY.js";import{XIcon as k}from"@phosphor-icons/react/X";import{forwardRef as r}from"react";import{jsx as e,jsxs as F}from"react/jsx-runtime";var x=f;x.displayName="Dialog";var N=P;N.displayName="DialogTrigger";var d=D;d.displayName="DialogPortal";var b=m;b.displayName="DialogClose";var c=r(({className:o,...t},i)=>e(u,{ref:i,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-50 backdrop-blur-xs",o),...t}));c.displayName="DialogOverlay";var h=r(({children:o,className:t,onInteractOutside:i,onPointerDownOutside:l,preferredWidth:s="max-w-lg",...W},z)=>F(d,{children:[e(c,{}),e("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:e(v,{className:a("flex max-h-full w-full flex-1 flex-col","outline-hidden focus-within:outline-hidden","border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200","data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95",s,t),onInteractOutside:n=>{p(n),i?.(n)},onPointerDownOutside:n=>{p(n),l?.(n)},ref:z,...W,children:o})})]}));h.displayName="DialogContent";var R=({className:o,children:t,...i})=>e("div",{className:a("border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4","has-[.icon-button]:pr-4",o),...i,children:t});R.displayName="DialogHeader";var w=({size:o="md",type:t="button",label:i="Close Dialog",appearance:l="ghost",...s})=>e(m,{asChild:!0,children:e(g,{appearance:l,icon:e(k,{}),label:i,size:o,type:t,...s})});w.displayName="DialogCloseIconButton";var I=({className:o,...t})=>e("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",o),...t});I.displayName="DialogBody";var B=({className:o,...t})=>e("div",{className:a("border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4",o),...t});B.displayName="DialogFooter";var O=r(({className:o,...t},i)=>e(y,{ref:i,className:a("text-strong truncate text-lg font-medium",o),...t}));O.displayName="DialogTitle";var T=r(({className:o,...t},i)=>e(C,{ref:i,className:a("text-muted",o),...t}));T.displayName="DialogDescription";var E={Root:x,Body:I,Close:b,CloseIconButton:w,Content:h,Description:T,Footer:B,Header:R,Overlay:c,Portal:d,Title:O,Trigger:N};export{E as a};
+//# sourceMappingURL=chunk-LT2WA5TR.js.map

package/dist/chunk-LT2WA5TR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n} from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\nimport * as DialogPrimitive from \"./primitive.js\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the Dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Root = DialogPrimitive.Root;\nRoot.displayName = \"Dialog\";\n\n/**\n * A button that opens the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-trigger\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Trigger = DialogPrimitive.Trigger;\nTrigger.displayName = \"DialogTrigger\";\n\nconst Portal = DialogPrimitive.Portal;\nPortal.displayName = \"DialogPortal\";\n\nconst Close = DialogPrimitive.Close;\nClose.displayName = \"DialogClose\";\n\nconst Overlay = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nOverlay.displayName = \"DialogOverlay\";\n\ntype ContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `Dialog.Content` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Dialog`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `Dialog.Content`\n\t *\n\t * @default `max-w-lg`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The container for the dialog content.\n * Renders on top of the overlay and is centered in the viewport.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-content\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ContentProps>(\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 = \"max-w-lg\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<Portal>\n\t\t\t<Overlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<DialogPrimitive.Content\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex max-h-full w-full flex-1 flex-col\",\n\t\t\t\t\t\t\"outline-hidden focus-within:outline-hidden\",\n\t\t\t\t\t\t\"border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200\",\n\t\t\t\t\t\t\"data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\t\t\tpreferredWidth,\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</DialogPrimitive.Content>\n\t\t\t</div>\n\t\t</Portal>\n\t),\n);\nContent.displayName = \"DialogContent\";\n\n/**\n * Contains the header content of the dialog, including the title and close button.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-header\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Header = ({ className, children, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</div>\n);\nHeader.displayName = \"DialogHeader\";\n\ntype CloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\n\n/**\n * An icon button that closes the dialog when clicked.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-close-icon-button\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst CloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Dialog\",\n\tappearance = \"ghost\",\n\t...props\n}: CloseIconButtonProps) => (\n\t<DialogPrimitive.Close asChild>\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={<XIcon />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t</DialogPrimitive.Close>\n);\nCloseIconButton.displayName = \"DialogCloseIconButton\";\n\n/**\n * Contains the main content of the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-body\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Body = ({ className, ...props }: ComponentProps<\"div\">) => (\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);\nBody.displayName = \"DialogBody\";\n\n/**\n * Contains the footer content of the dialog, including action buttons.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-footer\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Footer = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nFooter.displayName = \"DialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-title\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong truncate text-lg font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = \"DialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\n * Renders as a `div` by default, but can be changed to any other element using\n * the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-description\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>\n *         This is an optional description.\n *       </Dialog.Description>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cx(\"text-muted\", className)}\n\t\t{...props}\n\t/>\n));\nDescription.displayName = \"DialogDescription\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n *\n * @see https://mantle.ngrok.com/components/dialog\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Dialog = {\n\t/**\n\t * A window overlaid on either the primary window or another dialog window.\n\t * The root stateful component for the Dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Button type=\"button\" appearance=\"outlined\">\n\t *         Cancel\n\t *       </Button>\n\t *       <Button type=\"button\" appearance=\"filled\">\n\t *         Save\n\t *       </Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the main content of the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-body\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * A button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-close\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Confirm Action</Dialog.Title>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <Text>Are you sure you want to proceed?</Text>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"submit\">Confirm</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * An icon button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-close-icon-button\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tCloseIconButton,\n\t/**\n\t * The container for the dialog content.\n\t * Renders on top of the overlay and is centered in the viewport.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Button type=\"button\" appearance=\"outlined\">\n\t *         Cancel\n\t *       </Button>\n\t *       <Button type=\"button\" appearance=\"filled\">\n\t *         Save\n\t *       </Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * An accessible description to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-description\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.Description>\n\t *         This is an optional description.\n\t *       </Dialog.Description>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * Contains the footer content of the dialog, including action buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-footer\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Button type=\"button\" appearance=\"outlined\">\n\t *         Cancel\n\t *       </Button>\n\t *       <Button type=\"button\" appearance=\"filled\">\n\t *         Save\n\t *       </Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * Contains the header content of the dialog, including the title and close button.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-header\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The overlay backdrop for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-overlay\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Portal>\n\t *     <Dialog.Overlay />\n\t *     <Dialog.Content>\n\t *       <Dialog.Header>\n\t *         <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       </Dialog.Header>\n\t *       <Dialog.Body>\n\t *         <Text>Dialog content here.</Text>\n\t *       </Dialog.Body>\n\t *     </Dialog.Content>\n\t *   </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tOverlay,\n\t/**\n\t * The portal container for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-portal\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Portal>\n\t *     <Dialog.Overlay />\n\t *     <Dialog.Content>\n\t *       <Dialog.Header>\n\t *         <Dialog.Title>Portal Dialog</Dialog.Title>\n\t *       </Dialog.Header>\n\t *       <Dialog.Body>\n\t *         <Text>This dialog is rendered in a portal.</Text>\n\t *       </Dialog.Body>\n\t *     </Dialog.Content>\n\t *   </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tPortal,\n\t/**\n\t * An accessible name to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-title\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A button that opens the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tDialog,\n};\n"],"mappings":"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","names":["XIcon","forwardRef","jsx","jsxs","Root","Trigger","Portal","Close","Overlay","forwardRef","className","props","ref","cx","Content","children","onInteractOutside","onPointerDownOutside","preferredWidth","event","preventCloseOnPromptInteraction","Header","CloseIconButton","size","type","label","appearance","IconButton","XIcon","Body","Footer","Title","Description","Dialog"]}

package/dist/command.d.ts

@@ -0,0 +1,250 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import { Dialog } from './dialog.js';
+export { useCommandState } from 'cmdk';
+import '@radix-ui/react-dialog';
+import './icon-button-D4BTvC7F.js';
+import 'class-variance-authority/types';
+import './as-child-DJ7x3JFV.js';
+import './variant-props-oDo2u-We.js';
+import 'class-variance-authority';
+import './deep-non-nullable-SmpSvoSd.js';
+import './primitive-CBR_XmVa.js';
+
+/**
+ * The props for the CommandDialog component.
+ *
+ * @see https://mantle.ngrok.com/components/command#api-command-dialog
+ */
+type CommandDialogProps = ComponentPropsWithoutRef<typeof Dialog.Root> & {
+    /**
+     * The title of the command dialog.
+     */
+    title?: string;
+    /**
+     * The description of the command dialog.
+     */
+    description?: string;
+    /**
+     * Class name(s) to apply to the command dialog content.
+     */
+    className?: string;
+    /**
+     * Whether to show the close button.
+     */
+    showCloseButton?: boolean;
+};
+/**
+ * The command component for the Command. It provides the command for the command palette.
+ *
+ * @see https://mantle.ngrok.com/components/command#api-command
+ *
+ * @example
+ * ```tsx
+ * <Command.Dialog>
+ *   <Command.Input placeholder="Type a command or search..." />
+ *   <Command.List>
+ *     <Command.Empty>No results found.</Command.Empty>
+ *     <Command.Group heading="Suggestions">
+ *       <Command.Item>
+ *         <span>Calendar</span>
+ *       </Command.Item>
+ *     </Command.Group>
+ *     <Command.Separator />
+ *     <Command.Group heading="Settings">
+ *       <Command.Item>
+ *         <span>Profile</span>
+ *       </Command.Item>
+ *     </Command.Group>
+ *   </Command.List>
+ * </Command.Dialog>
+ */
+declare const Command: {
+    /**
+     * The root component for the Command component.
+     *
+     * @see https://mantle.ngrok.com/components/command#api-command-root
+     *
+     * @example
+     * ```tsx
+     * <Command.Root>
+     *   <Command.Input placeholder="Type a command or search..." />
+     *   <Command.List>
+     *     <Command.Empty>No results found.</Command.Empty>
+     *   </Command.List>
+     * </Command.Root>
+     * ```
+     */
+    readonly Root: react.ForwardRefExoticComponent<Omit<{
+        children?: React.ReactNode;
+    } & Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "key" | "asChild" | keyof react.HTMLAttributes<HTMLDivElement>> & {
+        label?: string;
+        shouldFilter?: boolean;
+        filter?: (value: string, search: string, keywords?: string[]) => number;
+        defaultValue?: string;
+        value?: string;
+        onValueChange?: (value: string) => void;
+        loop?: boolean;
+        disablePointerSelection?: boolean;
+        vimBindings?: boolean;
+    } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * The dialog component for the Command component.
+     *
+     * @see https://mantle.ngrok.com/components/command#api-command-dialog
+     *
+     * @example
+     * ```tsx
+     * <Command.Dialog>
+     *   <Command.Input placeholder="Type a command or search..." />
+     *   <Command.List>
+     *     <Command.Empty>No results found.</Command.Empty>
+     *   </Command.List>
+     * </Command.Dialog>
+     * ```
+     */
+    readonly Dialog: {
+        ({ title, description, children, className, showCloseButton, ...props }: CommandDialogProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+    /**
+     * The input component for the Command component.
+     *
+     * @see https://mantle.ngrok.com/components/command#api-command-input
+     *
+     * @example
+     * ```tsx
+     * <Command.Input placeholder="Type a command or search..." />
+     * ```
+     */
+    readonly Input: react.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof react.InputHTMLAttributes<HTMLInputElement>> & {
+        ref?: React.Ref<HTMLInputElement>;
+    } & {
+        asChild?: boolean;
+    }, "key" | "asChild" | keyof react.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
+        value?: string;
+        onValueChange?: (search: string) => void;
+    } & react.RefAttributes<HTMLInputElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * The list component for the Command component.
+     *
+     * @see https://mantle.ngrok.com/components/command#api-command-list
+     *
+     * @example
+     * ```tsx
+     * <Command.List>
+     *   <Command.Empty>No results found.</Command.Empty>
+     * </Command.List>
+     */
+    readonly List: react.ForwardRefExoticComponent<Omit<{
+        children?: React.ReactNode;
+    } & Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "key" | "asChild" | keyof react.HTMLAttributes<HTMLDivElement>> & {
+        label?: string;
+    } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * The empty component for the Command component.
+     *
+     * @see https://mantle.ngrok.com/components/command#api-command-empty
+     *
+     * @example
+     * ```tsx
+     * <Command.Empty>No results found.</Command.Empty>
+     * ```
+     */
+    readonly Empty: react.ForwardRefExoticComponent<Omit<{
+        children?: React.ReactNode;
+    } & Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "key" | "asChild" | keyof react.HTMLAttributes<HTMLDivElement>> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * The group component for the Command component.
+     *
+     * @see https://mantle.ngrok.com/components/command#api-command-group
+     *
+     * @example
+     * ```tsx
+     * <Command.Group heading="Suggestions">
+     *   <Command.Item>
+     *     Calendar
+     *   </Command.Item>
+     * </Command.Group>
+     * ```
+     */
+    readonly Group: react.ForwardRefExoticComponent<Omit<{
+        children?: React.ReactNode;
+    } & Omit<Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "key" | "asChild" | keyof react.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
+        heading?: React.ReactNode;
+        value?: string;
+        forceMount?: boolean;
+    } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * The item component for the Command component.
+     *
+     * @see https://mantle.ngrok.com/components/command#api-command-item
+     *
+     * @example
+     * ```tsx
+     * <Command.Item>
+     *   Calendar
+     * </Command.Item>
+     * ```
+     */
+    readonly Item: react.ForwardRefExoticComponent<Omit<{
+        children?: React.ReactNode;
+    } & Omit<Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "key" | "asChild" | keyof react.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
+        disabled?: boolean;
+        onSelect?: (value: string) => void;
+        value?: string;
+        keywords?: string[];
+        forceMount?: boolean;
+    } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * The shortcut component for the Command component.
+     *
+     * @see https://mantle.ngrok.com/components/command#api-command-shortcut
+     *
+     * @example
+     * ```tsx
+     * <Command.Shortcut>⌘,</Command.Shortcut>
+     * ```
+     */
+    readonly Shortcut: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & react.RefAttributes<HTMLSpanElement>>;
+    /**
+     * The seprator component for the Command component.
+     *
+     * @see https://mantle.ngrok.com/components/command#api-command-separator
+     *
+     * @example
+     * ```tsx
+     * <Command.Separator />
+     * ```
+     */
+    readonly Separator: react.ForwardRefExoticComponent<Omit<Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "key" | "asChild" | keyof react.HTMLAttributes<HTMLDivElement>> & {
+        alwaysRender?: boolean;
+    } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+};
+
+export { Command };

package/dist/command.js

@@ -0,0 +1,2 @@
+import{a as d}from"./chunk-LT2WA5TR.js";import"./chunk-VIKPHWPP.js";import"./chunk-WVBQX6DT.js";import"./chunk-4CLIEHH3.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-5TI54DZZ.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{MagnifyingGlassIcon as R}from"@phosphor-icons/react/MagnifyingGlass";import{Command as p,useCommandState as _}from"cmdk";import{forwardRef as n}from"react";import{jsx as m,jsxs as i}from"react/jsx-runtime";var s=n(({className:e,...o},t)=>m(p,{ref:t,"data-slot":"command",className:a("bg-popover flex h-full w-full flex-col overflow-hidden rounded-md",e),...o}));s.displayName="Command";var r=({title:e="Command Palette",description:o="Search for a command to run...",children:t,className:v,showCloseButton:y=!0,...x})=>i(d.Root,{...x,children:[i(d.Header,{className:"sr-only absolute",children:[m(d.Title,{children:e}),m(d.Description,{children:o})]}),i(d.Content,{className:a("overflow-hidden p-0 relative",v),children:[m(s,{className:"[&_[cmdk-group-heading]]:text-muted **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",children:t}),y&&m("div",{className:"absolute top-1.5 right-1.5",children:m(d.CloseIconButton,{})})]})]});r.displayName="CommandDialog";var l=n(({className:e,...o},t)=>i("div",{ref:t,"data-slot":"command-input-wrapper",className:"flex h-9 items-center gap-2 border-b border-popover px-3",children:[m(R,{className:"size-4 shrink-0 opacity-50"}),m(p.Input,{"data-slot":"command-input",className:a("placeholder:text-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",e),...o})]}));l.displayName="CommandInput";var c=n(({className:e,...o},t)=>m(p.List,{ref:t,"data-slot":"command-list",className:a("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar",e),...o}));c.displayName="CommandList";var u=n(({className:e,...o},t)=>m(p.Empty,{ref:t,"data-slot":"command-empty",className:"py-6 text-center text-sm",...o}));u.displayName="CommandEmpty";var f=n(({className:e,...o},t)=>m(p.Group,{ref:t,"data-slot":"command-group",className:a("[&_[cmdk-group-heading]]:text-muted overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",e),...o}));f.displayName="CommandGroup";var g=n(({className:e,...o},t)=>m(p.Separator,{ref:t,"data-slot":"command-separator",className:a("dark-high-contrast:bg-black high-contrast:bg-black bg-gray-500/20 dark:bg-gray-600/20 -mx-1 h-px",e),...o}));g.displayName="CommandSeparator";var C=n(({className:e,...o},t)=>m(p.Item,{ref:t,"data-slot":"command-item",className:a("data-[selected=true]:bg-popover-hover [&_svg:not([class*='text-'])]:text-muted relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",e),...o}));C.displayName="CommandItem";var h=n(({className:e,...o},t)=>m("span",{ref:t,"data-slot":"command-shortcut",className:a("text-muted ml-auto text-xs tracking-widest",e),...o}));h.displayName="CommandShortcut";var k={Root:s,Dialog:r,Input:l,List:c,Empty:u,Group:f,Item:C,Shortcut:h,Separator:g};export{k as Command,_ as useCommandState};
+//# sourceMappingURL=command.js.map

package/dist/command.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/command/command.tsx"],"sourcesContent":["\"use client\";\n\nimport { MagnifyingGlassIcon } from \"@phosphor-icons/react/MagnifyingGlass\";\nimport { Command as CommandPrimitive, useCommandState } from \"cmdk\";\n\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tforwardRef,\n} from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Dialog } from \"../dialog/dialog.js\";\n\n/**\n * The root component for the Command. It provides the context for all other command sub-components.\n *\n * @see https://mantle.ngrok.com/components/command#api-command-root\n *\n * @example\n * ```tsx\n * <Command.Root>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Root>\n */\nconst CommandRoot = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive\n\t\tref={ref}\n\t\tdata-slot=\"command\"\n\t\tclassName={cx(\n\t\t\t\"bg-popover flex h-full w-full flex-col overflow-hidden rounded-md\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandRoot.displayName = \"Command\";\n\n/**\n * The props for the CommandDialog component.\n *\n * @see https://mantle.ngrok.com/components/command#api-command-dialog\n */\ntype CommandDialogProps = ComponentPropsWithoutRef<typeof Dialog.Root> & {\n\t/**\n\t * The title of the command dialog.\n\t */\n\ttitle?: string;\n\t/**\n\t * The description of the command dialog.\n\t */\n\tdescription?: string;\n\t/**\n\t * Class name(s) to apply to the command dialog content.\n\t */\n\tclassName?: string;\n\t/**\n\t * Whether to show the close button.\n\t */\n\tshowCloseButton?: boolean;\n};\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the CommandDialog.\n *\n * @see https://mantle.ngrok.com/components/command#api-command-dialog\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandDialog = ({\n\ttitle = \"Command Palette\",\n\tdescription = \"Search for a command to run...\",\n\tchildren,\n\tclassName,\n\tshowCloseButton = true,\n\t...props\n}: CommandDialogProps) => (\n\t<Dialog.Root {...props}>\n\t\t<Dialog.Header className=\"sr-only absolute\">\n\t\t\t<Dialog.Title>{title}</Dialog.Title>\n\t\t\t<Dialog.Description>{description}</Dialog.Description>\n\t\t</Dialog.Header>\n\t\t<Dialog.Content className={cx(\"overflow-hidden p-0 relative\", className)}>\n\t\t\t<CommandRoot className=\"[&_[cmdk-group-heading]]:text-muted **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n\t\t\t\t{children}\n\t\t\t</CommandRoot>\n\t\t\t{showCloseButton && (\n\t\t\t\t<div className=\"absolute top-1.5 right-1.5\">\n\t\t\t\t\t<Dialog.CloseIconButton />\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Dialog.Content>\n\t</Dialog.Root>\n);\nCommandDialog.displayName = \"CommandDialog\";\n\n/**\n * The input component for the Command. It provides the input for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#api-command-input\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandInput = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n\t<div\n\t\tref={ref}\n\t\tdata-slot=\"command-input-wrapper\"\n\t\tclassName=\"flex h-9 items-center gap-2 border-b border-popover px-3\"\n\t>\n\t\t<MagnifyingGlassIcon className=\"size-4 shrink-0 opacity-50\" />\n\t\t<CommandPrimitive.Input\n\t\t\tdata-slot=\"command-input\"\n\t\t\tclassName={cx(\n\t\t\t\t\"placeholder:text-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</div>\n));\nCommandInput.displayName = \"CommandInput\";\n\n/**\n * The list component for the Command. It provides the list for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#api-command-list\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandList = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.List\n\t\tref={ref}\n\t\tdata-slot=\"command-list\"\n\t\tclassName={cx(\n\t\t\t\"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandList.displayName = \"CommandList\";\n\n/**\n * The empty component for the Command. It provides the empty state for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#api-command-empty\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandEmpty = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Empty\n\t\tref={ref}\n\t\tdata-slot=\"command-empty\"\n\t\tclassName=\"py-6 text-center text-sm\"\n\t\t{...props}\n\t/>\n));\nCommandEmpty.displayName = \"CommandEmpty\";\n\n/**\n * The group component for the Command. It provides the group for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#api-command-group\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandGroup = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Group\n\t\tref={ref}\n\t\tdata-slot=\"command-group\"\n\t\tclassName={cx(\n\t\t\t\"[&_[cmdk-group-heading]]:text-muted overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandGroup.displayName = \"CommandGroup\";\n\n/**\n * The separator component for the Command. It provides the separator for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#api-command-separator\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandSeparator = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Separator\n\t\tref={ref}\n\t\tdata-slot=\"command-separator\"\n\t\tclassName={cx(\n\t\t\t\"dark-high-contrast:bg-black high-contrast:bg-black bg-gray-500/20 dark:bg-gray-600/20 -mx-1 h-px\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandSeparator.displayName = \"CommandSeparator\";\n\n/**\n * The item component for the Command. It provides the item for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#api-command-item\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandItem = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Item\n\t\tref={ref}\n\t\tdata-slot=\"command-item\"\n\t\tclassName={cx(\n\t\t\t\"data-[selected=true]:bg-popover-hover [&_svg:not([class*='text-'])]:text-muted relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandItem.displayName = \"CommandItem\";\n\n/**\n * The shortcut component for the Command. It provides the shortcut for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#api-command-shortcut\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *         <Command.Shortcut>⌘,</Command.Shortcut>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst CommandShortcut = forwardRef<\n\tComponentRef<\"span\">,\n\tComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n\t<span\n\t\tref={ref}\n\t\tdata-slot=\"command-shortcut\"\n\t\tclassName={cx(\"text-muted ml-auto text-xs tracking-widest\", className)}\n\t\t{...props}\n\t/>\n));\nCommandShortcut.displayName = \"CommandShortcut\";\n\n/**\n * The command component for the Command. It provides the command for the command palette.\n *\n * @see https://mantle.ngrok.com/components/command#api-command\n *\n * @example\n * ```tsx\n * <Command.Dialog>\n *   <Command.Input placeholder=\"Type a command or search...\" />\n *   <Command.List>\n *     <Command.Empty>No results found.</Command.Empty>\n *     <Command.Group heading=\"Suggestions\">\n *       <Command.Item>\n *         <span>Calendar</span>\n *       </Command.Item>\n *     </Command.Group>\n *     <Command.Separator />\n *     <Command.Group heading=\"Settings\">\n *       <Command.Item>\n *         <span>Profile</span>\n *       </Command.Item>\n *     </Command.Group>\n *   </Command.List>\n * </Command.Dialog>\n */\nconst Command = {\n\t/**\n\t * The root component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#api-command-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Root>\n\t *   <Command.Input placeholder=\"Type a command or search...\" />\n\t *   <Command.List>\n\t *     <Command.Empty>No results found.</Command.Empty>\n\t *   </Command.List>\n\t * </Command.Root>\n\t * ```\n\t */\n\tRoot: CommandRoot,\n\t/**\n\t * The dialog component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#api-command-dialog\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Dialog>\n\t *   <Command.Input placeholder=\"Type a command or search...\" />\n\t *   <Command.List>\n\t *     <Command.Empty>No results found.</Command.Empty>\n\t *   </Command.List>\n\t * </Command.Dialog>\n\t * ```\n\t */\n\tDialog: CommandDialog,\n\t/**\n\t * The input component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#api-command-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Input placeholder=\"Type a command or search...\" />\n\t * ```\n\t */\n\tInput: CommandInput,\n\t/**\n\t * The list component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#api-command-list\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.List>\n\t *   <Command.Empty>No results found.</Command.Empty>\n\t * </Command.List>\n\t */\n\tList: CommandList,\n\t/**\n\t * The empty component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#api-command-empty\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Empty>No results found.</Command.Empty>\n\t * ```\n\t */\n\tEmpty: CommandEmpty,\n\t/**\n\t * The group component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#api-command-group\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Group heading=\"Suggestions\">\n\t *   <Command.Item>\n\t *     Calendar\n\t *   </Command.Item>\n\t * </Command.Group>\n\t * ```\n\t */\n\tGroup: CommandGroup,\n\t/**\n\t * The item component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#api-command-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Item>\n\t *   Calendar\n\t * </Command.Item>\n\t * ```\n\t */\n\tItem: CommandItem,\n\t/**\n\t * The shortcut component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#api-command-shortcut\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Shortcut>⌘,</Command.Shortcut>\n\t * ```\n\t */\n\tShortcut: CommandShortcut,\n\t/**\n\t * The seprator component for the Command component.\n\t *\n\t * @see https://mantle.ngrok.com/components/command#api-command-separator\n\t *\n\t * @example\n\t * ```tsx\n\t * <Command.Separator />\n\t * ```\n\t */\n\tSeparator: CommandSeparator,\n} as const;\n\nexport {\n\t//,\n\tCommand,\n\tuseCommandState,\n};\n"],"mappings":"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","names":["MagnifyingGlassIcon","CommandPrimitive","useCommandState","forwardRef","jsx","jsxs","CommandRoot","forwardRef","className","props","ref","CommandPrimitive","cx","CommandDialog","title","description","children","showCloseButton","Dialog","CommandInput","MagnifyingGlassIcon","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandShortcut","Command"]}

package/dist/dialog.js

@@ -1,2 +1,2 @@
-import{a as f,b as D,c as P,d as m,e as v,f as y,g as u,h as C,i as k}from"./chunk-VIKPHWPP.js";import{d as p}from"./chunk-WVBQX6DT.js";import"./chunk-4CLIEHH3.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import{c}from"./chunk-XTCU7MXB.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 F}from"@phosphor-icons/react/X";import{forwardRef as n}from"react";import{jsx as e,jsxs as j}from"react/jsx-runtime";var x=f;x.displayName="Dialog";var N=D;N.displayName="DialogTrigger";var d=P;d.displayName="DialogPortal";var b=m;b.displayName="DialogClose";var g=n(({className:o,...t},i)=>e(v,{ref:i,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-50 backdrop-blur-xs",o),...t}));g.displayName="DialogOverlay";var h=n(({children:o,className:t,onInteractOutside:i,onPointerDownOutside:l,preferredWidth:s="max-w-lg",...W},z)=>j(d,{children:[e(g,{}),e("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:e(y,{className:a("flex max-h-full w-full flex-1 flex-col","outline-hidden focus-within:outline-hidden","border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200","data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95",s,t),onInteractOutside:r=>{p(r),i?.(r)},onPointerDownOutside:r=>{p(r),l?.(r)},ref:z,...W,children:o})})]}));h.displayName="DialogContent";var R=({className:o,children:t,...i})=>e("div",{className:a("border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4","has-[.icon-button]:pr-4",o),...i,children:t});R.displayName="DialogHeader";var w=({size:o="md",type:t="button",label:i="Close Dialog",appearance:l="ghost",...s})=>e(m,{asChild:!0,children:e(c,{appearance:l,icon:e(F,{}),label:i,size:o,type:t,...s})});w.displayName="DialogCloseIconButton";var I=({className:o,...t})=>e("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",o),...t});I.displayName="DialogBody";var B=({className:o,...t})=>e("div",{className:a("border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4",o),...t});B.displayName="DialogFooter";var O=n(({className:o,...t},i)=>e(u,{ref:i,className:a("text-strong truncate text-lg font-medium",o),...t}));O.displayName="DialogTitle";var T=n(({className:o,...t},i)=>e(C,{ref:i,className:a("text-muted",o),...t}));T.displayName="DialogDescription";var H={Root:x,Body:I,Close:b,CloseIconButton:w,Content:h,Description:T,Footer:B,Header:R,Overlay:g,Portal:d,Title:O,Trigger:N};export{H as Dialog,k as isDialogOverlayTarget};
+import{a as r}from"./chunk-LT2WA5TR.js";import{i as o}from"./chunk-VIKPHWPP.js";import"./chunk-WVBQX6DT.js";import"./chunk-4CLIEHH3.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-5TI54DZZ.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import"./chunk-AZ56JGNY.js";export{r as Dialog,o as isDialogOverlayTarget};
 //# sourceMappingURL=dialog.js.map

package/dist/dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n} from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\nimport * as DialogPrimitive from \"./primitive.js\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n * The root stateful component for the Dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Root = DialogPrimitive.Root;\nRoot.displayName = \"Dialog\";\n\n/**\n * A button that opens the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-trigger\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Trigger = DialogPrimitive.Trigger;\nTrigger.displayName = \"DialogTrigger\";\n\nconst Portal = DialogPrimitive.Portal;\nPortal.displayName = \"DialogPortal\";\n\nconst Close = DialogPrimitive.Close;\nClose.displayName = \"DialogClose\";\n\nconst Overlay = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nOverlay.displayName = \"DialogOverlay\";\n\ntype ContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n\t/**\n\t * The preferred width of the `Dialog.Content` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Dialog`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `Dialog.Content`\n\t *\n\t * @default `max-w-lg`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The container for the dialog content.\n * Renders on top of the overlay and is centered in the viewport.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-content\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ContentProps>(\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 = \"max-w-lg\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<Portal>\n\t\t\t<Overlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<DialogPrimitive.Content\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex max-h-full w-full flex-1 flex-col\",\n\t\t\t\t\t\t\"outline-hidden focus-within:outline-hidden\",\n\t\t\t\t\t\t\"border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200\",\n\t\t\t\t\t\t\"data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\t\t\tpreferredWidth,\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</DialogPrimitive.Content>\n\t\t\t</div>\n\t\t</Portal>\n\t),\n);\nContent.displayName = \"DialogContent\";\n\n/**\n * Contains the header content of the dialog, including the title and close button.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-header\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Header = ({ className, children, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</div>\n);\nHeader.displayName = \"DialogHeader\";\n\ntype CloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\n\n/**\n * An icon button that closes the dialog when clicked.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-close-icon-button\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst CloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Dialog\",\n\tappearance = \"ghost\",\n\t...props\n}: CloseIconButtonProps) => (\n\t<DialogPrimitive.Close asChild>\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={<XIcon />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t</DialogPrimitive.Close>\n);\nCloseIconButton.displayName = \"DialogCloseIconButton\";\n\n/**\n * Contains the main content of the dialog.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-body\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Body = ({ className, ...props }: ComponentProps<\"div\">) => (\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);\nBody.displayName = \"DialogBody\";\n\n/**\n * Contains the footer content of the dialog, including action buttons.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-footer\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Footer = ({ className, ...props }: ComponentProps<\"div\">) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nFooter.displayName = \"DialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-title\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong truncate text-lg font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = \"DialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\n * Renders as a `div` by default, but can be changed to any other element using\n * the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/dialog#api-dialog-description\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.Description>\n *         This is an optional description.\n *       </Dialog.Description>\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<typeof DialogPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cx(\"text-muted\", className)}\n\t\t{...props}\n\t/>\n));\nDescription.displayName = \"DialogDescription\";\n\n/**\n * A window overlaid on either the primary window or another dialog window.\n *\n * @see https://mantle.ngrok.com/components/dialog\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Dialog\n *     </Button>\n *   </Dialog.Trigger>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Dialog Title</Dialog.Title>\n *       <Dialog.CloseIconButton />\n *     </Dialog.Header>\n *     <Dialog.Body>\n *       <p>This is the dialog content.</p>\n *     </Dialog.Body>\n *     <Dialog.Footer>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Cancel\n *       </Button>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nconst Dialog = {\n\t/**\n\t * A window overlaid on either the primary window or another dialog window.\n\t * The root stateful component for the Dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Button type=\"button\" appearance=\"outlined\">\n\t *         Cancel\n\t *       </Button>\n\t *       <Button type=\"button\" appearance=\"filled\">\n\t *         Save\n\t *       </Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the main content of the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-body\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * A button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-close\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Confirm Action</Dialog.Title>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <Text>Are you sure you want to proceed?</Text>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Dialog.Close asChild>\n\t *         <Button type=\"button\" appearance=\"outlined\">Cancel</Button>\n\t *       </Dialog.Close>\n\t *       <Button type=\"submit\">Confirm</Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * An icon button that closes the dialog when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-close-icon-button\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tCloseIconButton,\n\t/**\n\t * The container for the dialog content.\n\t * Renders on top of the overlay and is centered in the viewport.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Button type=\"button\" appearance=\"outlined\">\n\t *         Cancel\n\t *       </Button>\n\t *       <Button type=\"button\" appearance=\"filled\">\n\t *         Save\n\t *       </Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * An accessible description to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-description\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.Description>\n\t *         This is an optional description.\n\t *       </Dialog.Description>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * Contains the footer content of the dialog, including action buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-footer\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *     <Dialog.Footer>\n\t *       <Button type=\"button\" appearance=\"outlined\">\n\t *         Cancel\n\t *       </Button>\n\t *       <Button type=\"button\" appearance=\"filled\">\n\t *         Save\n\t *       </Button>\n\t *     </Dialog.Footer>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * Contains the header content of the dialog, including the title and close button.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-header\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The overlay backdrop for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-overlay\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Portal>\n\t *     <Dialog.Overlay />\n\t *     <Dialog.Content>\n\t *       <Dialog.Header>\n\t *         <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       </Dialog.Header>\n\t *       <Dialog.Body>\n\t *         <Text>Dialog content here.</Text>\n\t *       </Dialog.Body>\n\t *     </Dialog.Content>\n\t *   </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tOverlay,\n\t/**\n\t * The portal container for the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-portal\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\">Open Dialog</Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Portal>\n\t *     <Dialog.Overlay />\n\t *     <Dialog.Content>\n\t *       <Dialog.Header>\n\t *         <Dialog.Title>Portal Dialog</Dialog.Title>\n\t *       </Dialog.Header>\n\t *       <Dialog.Body>\n\t *         <Text>This dialog is rendered in a portal.</Text>\n\t *       </Dialog.Body>\n\t *     </Dialog.Content>\n\t *   </Dialog.Portal>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tPortal,\n\t/**\n\t * An accessible name to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-title\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *       <Dialog.CloseIconButton />\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A button that opens the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/dialog#api-dialog-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Dialog.Root>\n\t *   <Dialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Dialog\n\t *     </Button>\n\t *   </Dialog.Trigger>\n\t *   <Dialog.Content>\n\t *     <Dialog.Header>\n\t *       <Dialog.Title>Dialog Title</Dialog.Title>\n\t *     </Dialog.Header>\n\t *     <Dialog.Body>\n\t *       <p>This is the dialog content.</p>\n\t *     </Dialog.Body>\n\t *   </Dialog.Content>\n\t * </Dialog.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tDialog,\n};\n"],"mappings":"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","names":["XIcon","forwardRef","jsx","jsxs","Root","Trigger","Portal","Close","Overlay","forwardRef","className","props","ref","cx","Content","children","onInteractOutside","onPointerDownOutside","preferredWidth","event","preventCloseOnPromptInteraction","Header","CloseIconButton","size","type","label","appearance","IconButton","XIcon","Body","Footer","Title","Description","Dialog"]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/pagination.js

@@ -1,2 +1,2 @@
-import{a as p}from"./chunk-EBW5W235.js";import{b}from"./chunk-J6ZF5J72.js";import"./chunk-MF2QITTY.js";import{a as z}from"./chunk-3H3EUKI7.js";import{c as m}from"./chunk-XTCU7MXB.js";import"./chunk-T5U5KWUW.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as P}from"./chunk-AZ56JGNY.js";import{CaretLeftIcon as L}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as U}from"@phosphor-icons/react/CaretRight";import{Slot as j}from"@radix-ui/react-slot";import{createContext as k,forwardRef as c,useContext as v,useState as A}from"react";import f from"tiny-invariant";import{jsx as s,jsxs as l}from"react/jsx-runtime";var S=k(void 0),y=c(({className:r,children:e,defaultPageSize:a,...t},i)=>{let[o,n]=A(a);return s(S.Provider,{value:{defaultPageSize:a,pageSize:o,setPageSize:n},children:s("div",{className:P("inline-flex items-center justify-between gap-2",r),ref:i,...t,children:e})})});y.displayName="CursorPagination";var x=c(({hasNextPage:r,hasPreviousPage:e,onNextPage:a,onPreviousPage:t,...i},o)=>l(z,{appearance:"panel",ref:o,...i,children:[s(m,{appearance:"ghost",disabled:!e,icon:s(L,{}),label:"Previous page",onClick:t,size:"sm",type:"button"}),s(b,{orientation:"vertical",className:"min-h-5"}),s(m,{appearance:"ghost",disabled:!r,icon:s(U,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));x.displayName="CursorButtons";var E=[5,10,20,50,100],h=c(({className:r,pageSizes:e=E,onChangePageSize:a,...t},i)=>{let o=v(S);return f(o,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),f(e.includes(o.defaultPageSize),"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes"),f(e.includes(o.pageSize),"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes"),l(p.Root,{defaultValue:`${o.pageSize}`,onValueChange:n=>{let g=Number.parseInt(n,10);Number.isNaN(g)&&(g=o.defaultPageSize),o.setPageSize(g),a?.(g)},children:[s(p.Trigger,{ref:i,className:P("w-auto min-w-36",r),value:o.pageSize,...t,children:s(p.Value,{})}),s(p.Content,{width:"trigger",children:e.map(n=>l(p.Item,{value:`${n}`,children:[n," per page"]},n))})]})});h.displayName="CursorPageSizeSelect";function N({asChild:r=!1,className:e,...a}){let t=v(S);return f(t,"CursorPageSizeValue must be used as a child of a CursorPagination component"),l(r?j:"span",{className:P("text-muted text-sm font-normal",e),...a,children:[t.pageSize," per page"]})}N.displayName="CursorPageSizeValue";var F={Root:y,Buttons:x,PageSizeSelect:h,PageSizeValue:N};import{useEffect as O,useState as T}from"react";function W({listSize:r,pageSize:e}){let[a,t]=T(1),[i,o]=T(e);O(()=>{o(e),t(1)},[e]),O(()=>{t(1)},[r]);let n=Math.ceil(r/i),g=(a-1)*i,C=a>1,d=a<n;function V(u){let G=Math.max(1,Math.min(u,n));t(G)}function B(){d&&t(u=>Math.min(u+1,n))}function R(){C&&t(u=>Math.max(u-1,1))}function w(u){o(u),t(1)}function I(){t(n)}function M(){t(1)}return{currentPage:a,goToFirstPage:M,goToLastPage:I,goToPage:V,hasNextPage:d,hasPreviousPage:C,nextPage:B,offset:g,pageSize:i,previousPage:R,setPageSize:w,totalPages:n}}function $(r,e){return r.slice(e.offset,e.offset+e.pageSize)}export{F as CursorPagination,$ as getOffsetPaginatedSlice,W as useOffsetPagination};
+import{a as p}from"./chunk-EBW5W235.js";import{b}from"./chunk-J6ZF5J72.js";import"./chunk-MF2QITTY.js";import{a as z}from"./chunk-3H3EUKI7.js";import{c as m}from"./chunk-5TI54DZZ.js";import"./chunk-T5U5KWUW.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as P}from"./chunk-AZ56JGNY.js";import{CaretLeftIcon as L}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as U}from"@phosphor-icons/react/CaretRight";import{Slot as j}from"@radix-ui/react-slot";import{createContext as k,forwardRef as c,useContext as v,useState as A}from"react";import f from"tiny-invariant";import{jsx as s,jsxs as l}from"react/jsx-runtime";var S=k(void 0),y=c(({className:r,children:e,defaultPageSize:a,...t},i)=>{let[o,n]=A(a);return s(S.Provider,{value:{defaultPageSize:a,pageSize:o,setPageSize:n},children:s("div",{className:P("inline-flex items-center justify-between gap-2",r),ref:i,...t,children:e})})});y.displayName="CursorPagination";var x=c(({hasNextPage:r,hasPreviousPage:e,onNextPage:a,onPreviousPage:t,...i},o)=>l(z,{appearance:"panel",ref:o,...i,children:[s(m,{appearance:"ghost",disabled:!e,icon:s(L,{}),label:"Previous page",onClick:t,size:"sm",type:"button"}),s(b,{orientation:"vertical",className:"min-h-5"}),s(m,{appearance:"ghost",disabled:!r,icon:s(U,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));x.displayName="CursorButtons";var E=[5,10,20,50,100],h=c(({className:r,pageSizes:e=E,onChangePageSize:a,...t},i)=>{let o=v(S);return f(o,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),f(e.includes(o.defaultPageSize),"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes"),f(e.includes(o.pageSize),"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes"),l(p.Root,{defaultValue:`${o.pageSize}`,onValueChange:n=>{let g=Number.parseInt(n,10);Number.isNaN(g)&&(g=o.defaultPageSize),o.setPageSize(g),a?.(g)},children:[s(p.Trigger,{ref:i,className:P("w-auto min-w-36",r),value:o.pageSize,...t,children:s(p.Value,{})}),s(p.Content,{width:"trigger",children:e.map(n=>l(p.Item,{value:`${n}`,children:[n," per page"]},n))})]})});h.displayName="CursorPageSizeSelect";function N({asChild:r=!1,className:e,...a}){let t=v(S);return f(t,"CursorPageSizeValue must be used as a child of a CursorPagination component"),l(r?j:"span",{className:P("text-muted text-sm font-normal",e),...a,children:[t.pageSize," per page"]})}N.displayName="CursorPageSizeValue";var F={Root:y,Buttons:x,PageSizeSelect:h,PageSizeValue:N};import{useEffect as O,useState as T}from"react";function W({listSize:r,pageSize:e}){let[a,t]=T(1),[i,o]=T(e);O(()=>{o(e),t(1)},[e]),O(()=>{t(1)},[r]);let n=Math.ceil(r/i),g=(a-1)*i,C=a>1,d=a<n;function V(u){let G=Math.max(1,Math.min(u,n));t(G)}function B(){d&&t(u=>Math.min(u+1,n))}function R(){C&&t(u=>Math.max(u-1,1))}function w(u){o(u),t(1)}function I(){t(n)}function M(){t(1)}return{currentPage:a,goToFirstPage:M,goToLastPage:I,goToPage:V,hasNextPage:d,hasPreviousPage:C,nextPage:B,offset:g,pageSize:i,previousPage:R,setPageSize:w,totalPages:n}}function $(r,e){return r.slice(e.offset,e.offset+e.pageSize)}export{F as CursorPagination,$ as getOffsetPaginatedSlice,W as useOffsetPagination};
 //# sourceMappingURL=pagination.js.map

package/dist/sheet.js

@@ -1,2 +1,2 @@
-import{a as u,b as v,c as S,d as m,e as p,f as d,g as h,h as f}from"./chunk-VIKPHWPP.js";import{d as c}from"./chunk-WVBQX6DT.js";import"./chunk-4CLIEHH3.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import{c as y}from"./chunk-XTCU7MXB.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 o,jsxs as z}from"react/jsx-runtime";var P=u;P.displayName="Sheet";var C=v;C.displayName="SheetTrigger";var g=m;g.displayName="SheetClose";var N=S;N.displayName="SheetPortal";var b=s(({className:e,...t},i)=>o(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-xs",e),...t,ref:i}));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-hidden transition ease-in-out focus-within:outline-hidden data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in",{variants:{side:{left:"data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r",right:"data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l"}},defaultVariants:{side:"right"}}),x=s(({children:e,className:t,onInteractOutside:i,onPointerDownOutside:r,preferredWidth:l="sm:max-w-[30rem]",side:B="right",...O},A)=>z(N,{children:[o(b,{}),o(d,{className:a(V({side:B}),l,t),onInteractOutside:n=>{c(n),i?.(n)},onPointerDownOutside:n=>{c(n),r?.(n)},ref:A,...O,children:e})]}));x.displayName=d.displayName;var T=({size:e="md",type:t="button",label:i="Close Sheet",appearance:r="ghost",...l})=>o(m,{asChild:!0,children:o(y,{appearance:r,icon:o(W,{}),label:i,size:e,type:t,...l})});T.displayName="SheetCloseIconButton";var R=({className:e,...t})=>o("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",e),...t});R.displayName="SheetBody";var H=({className:e,...t})=>o("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});H.displayName="SheetHeader";var D=({className:e,...t})=>o("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 L=s(({className:e,...t},i)=>o(h,{ref:i,className:a("text-strong flex-1 truncate text-lg font-medium",e),...t}));L.displayName=h.displayName;var M=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex items-center justify-between gap-2",t),...i,ref:r,children:e}));M.displayName="SheetTitleGroup";var I=s(({className:e,...t},i)=>o(f,{ref:i,className:a("text-body text-sm",e),...t}));I.displayName=f.displayName;var w=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex h-full items-center gap-2",t),...i,ref:r,children:e}));w.displayName="SheetActions";var k={Root:P,Actions:w,Body:R,Close:g,CloseIconButton:T,Content:x,Description:I,Footer:D,Header:H,Title:L,TitleGroup:M,Trigger:C};export{k as Sheet};
+import{a as u,b as v,c as S,d as m,e as p,f as d,g as h,h as f}from"./chunk-VIKPHWPP.js";import{d as c}from"./chunk-WVBQX6DT.js";import"./chunk-4CLIEHH3.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import{c as y}from"./chunk-5TI54DZZ.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 o,jsxs as z}from"react/jsx-runtime";var P=u;P.displayName="Sheet";var C=v;C.displayName="SheetTrigger";var g=m;g.displayName="SheetClose";var N=S;N.displayName="SheetPortal";var b=s(({className:e,...t},i)=>o(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-xs",e),...t,ref:i}));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-hidden transition ease-in-out focus-within:outline-hidden data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in",{variants:{side:{left:"data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r",right:"data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l"}},defaultVariants:{side:"right"}}),x=s(({children:e,className:t,onInteractOutside:i,onPointerDownOutside:r,preferredWidth:l="sm:max-w-[30rem]",side:B="right",...O},A)=>z(N,{children:[o(b,{}),o(d,{className:a(V({side:B}),l,t),onInteractOutside:n=>{c(n),i?.(n)},onPointerDownOutside:n=>{c(n),r?.(n)},ref:A,...O,children:e})]}));x.displayName=d.displayName;var T=({size:e="md",type:t="button",label:i="Close Sheet",appearance:r="ghost",...l})=>o(m,{asChild:!0,children:o(y,{appearance:r,icon:o(W,{}),label:i,size:e,type:t,...l})});T.displayName="SheetCloseIconButton";var R=({className:e,...t})=>o("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",e),...t});R.displayName="SheetBody";var H=({className:e,...t})=>o("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});H.displayName="SheetHeader";var D=({className:e,...t})=>o("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 L=s(({className:e,...t},i)=>o(h,{ref:i,className:a("text-strong flex-1 truncate text-lg font-medium",e),...t}));L.displayName=h.displayName;var M=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex items-center justify-between gap-2",t),...i,ref:r,children:e}));M.displayName="SheetTitleGroup";var I=s(({className:e,...t},i)=>o(f,{ref:i,className:a("text-body text-sm",e),...t}));I.displayName=f.displayName;var w=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex h-full items-center gap-2",t),...i,ref:r,children:e}));w.displayName="SheetActions";var k={Root:P,Actions:w,Body:R,Close:g,CloseIconButton:T,Content:x,Description:I,Footer:D,Header:H,Title:L,TitleGroup:M,Trigger:C};export{k as Sheet};
 //# sourceMappingURL=sheet.js.map

package/package.json

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.55.4",
+  "version": "0.56.0",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",
@@ -42,6 +42,7 @@
     "@uidotdev/usehooks": "2.4.1",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
+    "cmdk": "1.1.1",
     "prismjs": "1.30.0",
     "react-day-picker": "9.11.1",
     "sonner": "2.0.7",
@@ -155,6 +156,11 @@
       "import": "./dist/combobox.js",
       "types": "./dist/combobox.d.ts"
     },
+    "./command": {
+      "@ngrok/mantle/source": "./src/components/command/index.ts",
+      "import": "./dist/command.js",
+      "types": "./dist/command.d.ts"
+    },
     "./compose-refs": {
       "@ngrok/mantle/source": "./src/utils/compose-refs/index.ts",
       "import": "./dist/compose-refs.js",

package/dist/chunk-XTCU7MXB.js

@@ -1,2 +0,0 @@
-import{a as l}from"./chunk-3C5O3AQA.js";import{a}from"./chunk-I6T6YV2L.js";import{a as d}from"./chunk-AZ56JGNY.js";import{CircleNotchIcon as y}from"@phosphor-icons/react/CircleNotch";import{Slot as x}from"@radix-ui/react-slot";import{cva as I}from"class-variance-authority";import{clsx as C}from"clsx";import{Children as H,cloneElement as M,forwardRef as T,isValidElement as V}from"react";import E from"tiny-invariant";import{jsx as t,jsxs as P}from"react/jsx-runtime";var N=C("icon-button","inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border","focus:outline-hidden focus-visible:ring-4","disabled:cursor-default disabled:opacity-50","not-disabled:active:scale-[0.97]"),A=I("",{variants:{appearance:{ghost:"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent",outlined:"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600"},isLoading:{false:"",true:"opacity-50"},size:{xs:"size-6",sm:"size-7",md:"size-9"}},defaultVariants:{appearance:"outlined",size:"md"}}),L=T(({"aria-disabled":c,appearance:u,asChild:b=!1,children:o,className:p,disabled:m,icon:f,isLoading:e=!1,label:v,size:s,type:g,...B},h)=>{let n=l(c??m??e),i=e?t(y,{className:"animate-spin"}):f,r={"aria-disabled":n,className:d(N,A({appearance:u,isLoading:e,size:s}),p),"data-disabled":n,"data-icon-button":!0,"data-loading":e,"data-size":s,disabled:n,ref:h,...B};return b?(E(V(o)&&H.only(o),"When using `asChild`, IconButton must be passed a single child as a JSX tag."),t(x,{...r,children:M(o,{},t(a,{svg:i}))})):P("button",{...r,type:g,children:[t("span",{className:"sr-only",children:v}),t(a,{svg:i})]})});L.displayName="IconButton";export{N as a,A as b,L as c};
-//# sourceMappingURL=chunk-XTCU7MXB.js.map