@ngrok/mantle 0.70.0 → 0.70.2

package/dist/tabs.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./booleanish-CBGdPL3Q.js";import{t as n}from"./compose-refs-DFIaEnQH.js";import{t as r}from"./use-prefers-reduced-motion-BcwST13S.js";import{Children as i,cloneElement as a,createContext as o,forwardRef as s,isValidElement as c,useContext as l,useEffect as u,useRef as d}from"react";import f from"clsx";import p from"tiny-invariant";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";import{cva as _}from"class-variance-authority";import{Content as v,List as y,Root as b,Trigger as x}from"@radix-ui/react-tabs";const S=o({orientation:`horizontal`,appearance:`classic`}),C=s(({className:t,children:n,orientation:r=`horizontal`,appearance:i=`classic`,...a},o)=>h(b,{className:e(`flex gap-4`,r===`horizontal`?`flex-col`:`flex-row`,t),orientation:r,ref:o,...a,children:h(S.Provider,{value:{orientation:r,appearance:i},children:n})}));C.displayName=`Tabs`;const w=_(`flex`,{variants:{orientation:{horizontal:`scroll-fade-x flex-row items-center overflow-x-auto overscroll-x-none w-full min-w-0 pt-1 -mt-1 px-1 -mx-1`,vertical:`flex-col items-end gap-3.5 self-stretch`},appearance:{classic:``,pill:``}},compoundVariants:[{orientation:`horizontal`,appearance:`pill`,className:`gap-1 pb-1 -mb-1`},{orientation:`horizontal`,appearance:`classic`,className:`gap-6`},{orientation:`vertical`,appearance:`classic`,className:`border-r border-gray-200`}]}),T=s(({className:t,...i},a)=>{let{orientation:o,appearance:s}=l(S),c=d(null);return u(()=>{let e=c.current;if(!e||o!==`horizontal`)return;let t=new AbortController,n=0,i=()=>{e.toggleAttribute(`data-scroll-left`,e.scrollLeft>0),e.toggleAttribute(`data-scroll-right`,Math.ceil(e.scrollLeft)<n-1)},a=()=>{n=e.scrollWidth-e.clientWidth,i()};e.addEventListener(`scroll`,i,{passive:!0,signal:t.signal});let s=new MutationObserver(a);s.observe(e,{childList:!0,subtree:!0}),e.addEventListener(`focusin`,t=>{if(t.target instanceof Element&&t.target!==e){let e=r()?`auto`:`smooth`;t.target.scrollIntoView({behavior:e,inline:`center`,block:`nearest`})}},{signal:t.signal});let l=new ResizeObserver(a);return l.observe(e),a(),()=>{t.abort(),l.disconnect(),s.disconnect()}},[o]),h(y,{"aria-orientation":o,className:e(w({orientation:o,appearance:s}),t),ref:n(c,a),...i})});T.displayName=`TabsList`;const E=_(`absolute z-0`,{variants:{orientation:{horizontal:`bottom-0 left-0 right-0 h-0.75`,vertical:`-right-px bottom-0 top-0 w-0.75`},appearance:{classic:`group-data-state-active/tab-trigger:bg-neutral-950`,pill:`hidden`}}}),D=()=>{let{orientation:e,appearance:t}=l(S);return h(`span`,{"aria-hidden":!0,className:f(E({orientation:e,appearance:t}))})};D.displayName=`TabsTriggerDecoration`;const O=_(e(`group/tab-trigger relative flex cursor-pointer items-center gap-1 whitespace-nowrap py-3 text-sm font-medium text-gray-600`,`ring-focus-accent outline-hidden`,`aria-disabled:cursor-default aria-disabled:opacity-50`,`focus-visible:ring-4`,`[&>svg]:shrink-0 [&>svg]:size-5`,`not-aria-disabled:hover:text-gray-900`),{variants:{orientation:{horizontal:`rounded-tl-md rounded-tr-md`,vertical:`rounded-bl-md rounded-tl-md pr-3`},appearance:{classic:e(`not-aria-disabled:hover:data-state-active:text-strong`,`data-state-active:text-strong`),pill:e(`not-aria-disabled:hover:data-state-active:text-strong`,`not-aria-disabled:hover:data-state-active:bg-neutral-500/15`,`data-state-active:text-strong`,`data-state-active:bg-neutral-500/15`,`rounded-full py-2 px-3`)}}}),k=s(({"aria-disabled":n,asChild:r=!1,children:o,className:s,disabled:u,...d},f)=>{let{orientation:_,appearance:v}=l(S),y=t(n??u),b={"aria-disabled":n??u,className:e(O({orientation:_,appearance:v}),s),disabled:y,...d};if(r){let e=i.only(o);p(c(e),"When using `asChild`, TabsTrigger must be passed a single child as a JSX tag.");let t=e.props?.children,n=y?{href:void 0,to:void 0}:{tabIndex:0};return h(x,{asChild:!0,...b,ref:f,children:a(y?h(`button`,{type:`button`}):e,n,g(m,{children:[h(D,{}),t]}))})}return g(x,{ref:f,...b,children:[h(D,{}),o]})});k.displayName=`TabsTrigger`;const A=({className:t,children:n,...r})=>h(`span`,{className:e(`rounded-full bg-neutral-500/20 px-1.5 text-xs font-medium text-gray-600`,`group-data-state-active/tab-trigger:bg-neutral-950/10 group-data-state-active/tab-trigger:text-strong group-hover/tab-trigger:group-enabled/tab-trigger:group-data-state-active/tab-trigger:text-strong`,`group-hover/tab-trigger:group-enabled/tab-trigger:text-gray-700`,t),...r,children:n});A.displayName=`TabBadge`;const j=s(({className:t,...n},r)=>h(v,{ref:r,className:e(`focus-visible:ring-focus-accent outline-hidden focus-visible:ring-4`,t),...n}));j.displayName=`TabsContent`;const M={Root:C,Content:j,List:T,Trigger:k,Badge:A};export{M as Tabs};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./booleanish-CBGdPL3Q.js";import{t as n}from"./compose-refs-DZ3cPi47.js";import{t as r}from"./use-prefers-reduced-motion-aXfsyo-k.js";import{Children as i,cloneElement as a,createContext as o,forwardRef as s,isValidElement as c,useContext as l,useEffect as u,useRef as d}from"react";import f from"clsx";import p from"tiny-invariant";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";import{cva as _}from"class-variance-authority";import{Content as v,List as y,Root as b,Trigger as x}from"@radix-ui/react-tabs";const S=o({orientation:`horizontal`,appearance:`classic`}),C=s(({className:t,children:n,orientation:r=`horizontal`,appearance:i=`classic`,...a},o)=>h(b,{"data-slot":`tabs`,className:e(`flex gap-4`,r===`horizontal`?`flex-col`:`flex-row`,t),orientation:r,ref:o,...a,children:h(S.Provider,{value:{orientation:r,appearance:i},children:n})}));C.displayName=`Tabs`;const w=_(`flex`,{variants:{orientation:{horizontal:`scroll-fade-x flex-row items-center overflow-x-auto overscroll-x-none w-full min-w-0 pt-1 -mt-1 px-1 -mx-1`,vertical:`flex-col items-end gap-3.5 self-stretch`},appearance:{classic:``,pill:``}},compoundVariants:[{orientation:`horizontal`,appearance:`pill`,className:`gap-1 pb-1 -mb-1`},{orientation:`horizontal`,appearance:`classic`,className:`gap-6`},{orientation:`vertical`,appearance:`classic`,className:`border-r border-gray-200`}]}),T=s(({className:t,...i},a)=>{let{orientation:o,appearance:s}=l(S),c=d(null);return u(()=>{let e=c.current;if(!e||o!==`horizontal`)return;let t=new AbortController,n=0,i=()=>{e.toggleAttribute(`data-scroll-left`,e.scrollLeft>0),e.toggleAttribute(`data-scroll-right`,Math.ceil(e.scrollLeft)<n-1)},a=()=>{n=e.scrollWidth-e.clientWidth,i()};e.addEventListener(`scroll`,i,{passive:!0,signal:t.signal});let s=new MutationObserver(a);s.observe(e,{childList:!0,subtree:!0}),e.addEventListener(`focusin`,t=>{if(t.target instanceof Element&&t.target!==e){let e=r()?`auto`:`smooth`;t.target.scrollIntoView({behavior:e,inline:`center`,block:`nearest`})}},{signal:t.signal});let l=new ResizeObserver(a);return l.observe(e),a(),()=>{t.abort(),l.disconnect(),s.disconnect()}},[o]),h(y,{"aria-orientation":o,"data-slot":`tabs-list`,className:e(w({orientation:o,appearance:s}),t),ref:n(c,a),...i})});T.displayName=`TabsList`;const E=_(`absolute z-0`,{variants:{orientation:{horizontal:`bottom-0 left-0 right-0 h-0.75`,vertical:`-right-px bottom-0 top-0 w-0.75`},appearance:{classic:`group-data-state-active/tab-trigger:bg-neutral-950`,pill:`hidden`}}}),D=()=>{let{orientation:e,appearance:t}=l(S);return h(`span`,{"aria-hidden":!0,className:f(E({orientation:e,appearance:t}))})};D.displayName=`TabsTriggerDecoration`;const O=_(e(`group/tab-trigger relative flex cursor-pointer items-center gap-1 whitespace-nowrap py-3 text-sm font-medium text-gray-600`,`ring-focus-accent outline-hidden`,`aria-disabled:cursor-default aria-disabled:opacity-50`,`focus-visible:ring-4`,`[&>svg]:shrink-0 [&>svg]:size-5`,`not-aria-disabled:hover:text-gray-900`),{variants:{orientation:{horizontal:`rounded-tl-md rounded-tr-md`,vertical:`rounded-bl-md rounded-tl-md pr-3`},appearance:{classic:e(`not-aria-disabled:hover:data-state-active:text-strong`,`data-state-active:text-strong`),pill:e(`not-aria-disabled:hover:data-state-active:text-strong`,`not-aria-disabled:hover:data-state-active:bg-neutral-500/15`,`data-state-active:text-strong`,`data-state-active:bg-neutral-500/15`,`rounded-full py-2 px-3`)}}}),k=s(({"aria-disabled":n,asChild:r=!1,children:o,className:s,disabled:u,...d},f)=>{let{orientation:_,appearance:v}=l(S),y=t(n??u),b={"aria-disabled":n??u,className:e(O({orientation:_,appearance:v}),s),disabled:y,...d};if(r){let e=i.only(o);p(c(e),"When using `asChild`, TabsTrigger must be passed a single child as a JSX tag.");let t=e.props?.children,n=y?{href:void 0,to:void 0}:{tabIndex:0};return h(x,{asChild:!0,"data-slot":`tabs-trigger`,...b,ref:f,children:a(y?h(`button`,{type:`button`}):e,n,g(m,{children:[h(D,{}),t]}))})}return g(x,{"data-slot":`tabs-trigger`,ref:f,...b,children:[h(D,{}),o]})});k.displayName=`TabsTrigger`;const A=({className:t,children:n,...r})=>h(`span`,{"data-slot":`tabs-badge`,className:e(`rounded-full bg-neutral-500/20 px-1.5 text-xs font-medium text-gray-600`,`group-data-state-active/tab-trigger:bg-neutral-950/10 group-data-state-active/tab-trigger:text-strong group-hover/tab-trigger:group-enabled/tab-trigger:group-data-state-active/tab-trigger:text-strong`,`group-hover/tab-trigger:group-enabled/tab-trigger:text-gray-700`,t),...r,children:n});A.displayName=`TabBadge`;const j=s(({className:t,...n},r)=>h(v,{ref:r,"data-slot":`tabs-content`,className:e(`focus-visible:ring-focus-accent outline-hidden focus-visible:ring-4`,t),...n}));j.displayName=`TabsContent`;const M={Root:C,Content:j,List:T,Trigger:k,Badge:A};export{M as Tabs};
 //# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":["Root","TabsPrimitiveRoot","List","TabsPrimitiveList","clsx","Trigger","TabsPrimitiveTrigger","Content","TabsPrimitiveContent"],"sources":["../src/components/tabs/tabs.tsx"],"sourcesContent":["import {\n\tContent as TabsPrimitiveContent,\n\tList as TabsPrimitiveList,\n\tRoot as TabsPrimitiveRoot,\n\tTrigger as TabsPrimitiveTrigger,\n} from \"@radix-ui/react-tabs\";\nimport { cva } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport type { ComponentPropsWithoutRef, ComponentRef, HTMLAttributes } from \"react\";\nimport {\n\tChildren,\n\tcloneElement,\n\tcreateContext,\n\tforwardRef,\n\tisValidElement,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { getPrefersReducedMotion } from \"../../hooks/use-prefers-reduced-motion.js\";\nimport type { ScrollBehavior } from \"../../hooks/use-scroll-behavior.js\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\ntype Appearance = \"classic\" | \"pill\";\n\ntype TabsStateContextValue = {\n\torientation: Orientation;\n\tappearance: Appearance;\n};\n\nconst TabsStateContext = createContext<TabsStateContextValue>({\n\torientation: \"horizontal\",\n\tappearance: \"classic\",\n});\n\n/**\n * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n * The root component that provides context for all tab components.\n *\n * @see https://mantle.ngrok.com/components/tabs#tabsroot\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Root = forwardRef<\n\tComponentRef<typeof TabsPrimitiveRoot>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveRoot> & {\n\t\t/**\n\t\t * The appearance of the tabs. Classic appearance shows the tab\n\t\t * list with an underline; pill appearance shows each tab as a pill.\n\t\t * @default \"classic\"\n\t\t */\n\t\tappearance?: \"classic\" | \"pill\";\n\t}\n>(({ className, children, orientation = \"horizontal\", appearance = \"classic\", ...props }, ref) => (\n\t<TabsPrimitiveRoot\n\t\tclassName={cx(\"flex gap-4\", orientation === \"horizontal\" ? \"flex-col\" : \"flex-row\", className)}\n\t\torientation={orientation}\n\t\tref={ref}\n\t\t{...props}\n\t>\n\t\t<TabsStateContext.Provider value={{ orientation, appearance }}>\n\t\t\t{children}\n\t\t</TabsStateContext.Provider>\n\t</TabsPrimitiveRoot>\n));\nRoot.displayName = \"Tabs\";\n\n/**\n * Variants for the List component\n */\nconst listVariants = cva(\"flex\", {\n\tvariants: {\n\t\torientation: {\n\t\t\thorizontal:\n\t\t\t\t\"scroll-fade-x flex-row items-center overflow-x-auto overscroll-x-none w-full min-w-0 pt-1 -mt-1 px-1 -mx-1\",\n\t\t\tvertical: \"flex-col items-end gap-3.5 self-stretch\",\n\t\t} as const satisfies Record<Orientation, string>,\n\t\tappearance: {\n\t\t\tclassic: \"\",\n\t\t\tpill: \"\",\n\t\t} as const satisfies Record<Appearance, string>,\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\torientation: \"horizontal\",\n\t\t\tappearance: \"pill\",\n\t\t\t// pb-1 -mb-1 gives the focus ring space below (ring-4 is box-shadow, clipped by overflow).\n\t\t\tclassName: \"gap-1 pb-1 -mb-1\",\n\t\t},\n\t\t{\n\t\t\torientation: \"horizontal\",\n\t\t\tappearance: \"classic\",\n\t\t\tclassName: \"gap-6\",\n\t\t},\n\t\t{\n\t\t\torientation: \"vertical\",\n\t\t\tappearance: \"classic\",\n\t\t\tclassName: \"border-r border-gray-200\",\n\t\t},\n\t],\n});\n\n/**\n * Contains the triggers that are aligned along the edge of the active content.\n * The container for tab triggers that provides the visual layout for tab navigation.\n *\n * @see https://mantle.ngrok.com/components/tabs#tabslist\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst List = forwardRef<\n\tComponentRef<typeof TabsPrimitiveList>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveList>\n>(({ className, ...props }, ref) => {\n\tconst { orientation, appearance } = useContext(TabsStateContext);\n\tconst scrollRef = useRef<ComponentRef<typeof TabsPrimitiveList>>(null);\n\n\tuseEffect(() => {\n\t\tconst element = scrollRef.current;\n\t\tif (!element || orientation !== \"horizontal\") {\n\t\t\treturn;\n\t\t}\n\n\t\tconst abortController = new AbortController();\n\t\tlet maxScrollLeft = 0;\n\n\t\tconst updateShadows = () => {\n\t\t\telement.toggleAttribute(\"data-scroll-left\", element.scrollLeft > 0);\n\t\t\telement.toggleAttribute(\n\t\t\t\t\"data-scroll-right\",\n\t\t\t\tMath.ceil(element.scrollLeft) < maxScrollLeft - 1,\n\t\t\t);\n\t\t};\n\n\t\tconst handleResize = () => {\n\t\t\tmaxScrollLeft = element.scrollWidth - element.clientWidth;\n\t\t\tupdateShadows();\n\t\t};\n\n\t\t// passive: true — lets the browser optimize scroll performance by guaranteeing\n\t\t// we won't call preventDefault() inside this handler.\n\t\telement.addEventListener(\"scroll\", updateShadows, {\n\t\t\tpassive: true,\n\t\t\tsignal: abortController.signal,\n\t\t});\n\n\t\t// ResizeObserver alone won't catch scrollWidth changes caused by content\n\t\t// mutations (e.g. font loading, badge count changes) when the list container\n\t\t// itself doesn't resize. MutationObserver covers those cases.\n\t\tconst mutationObserver = new MutationObserver(handleResize);\n\t\tmutationObserver.observe(element, {\n\t\t\tchildList: true,\n\t\t\tsubtree: true, // subtree catches badge/label content changes inside triggers\n\t\t});\n\n\t\t// When Radix moves focus via arrow keys it calls element.focus(), which doesn't\n\t\t// always scroll the target into view inside an overflow container. We handle it\n\t\t// explicitly here via event delegation so every trigger gets this behavior with\n\t\t// a single listener rather than one per trigger.\n\t\telement.addEventListener(\n\t\t\t\"focusin\",\n\t\t\t(event) => {\n\t\t\t\tif (event.target instanceof Element && event.target !== element) {\n\t\t\t\t\tconst scrollBehavior: ScrollBehavior = getPrefersReducedMotion() ? \"auto\" : \"smooth\";\n\t\t\t\t\tevent.target.scrollIntoView({\n\t\t\t\t\t\tbehavior: scrollBehavior,\n\t\t\t\t\t\t// \"center\" rather than \"nearest\" so the focused tab lands in the middle\n\t\t\t\t\t\t// of the visible area, giving the user context on both sides.\n\t\t\t\t\t\tinline: \"center\",\n\t\t\t\t\t\tblock: \"nearest\",\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t},\n\t\t\t{ signal: abortController.signal },\n\t\t);\n\t\tconst resizeObserver = new ResizeObserver(handleResize);\n\t\tresizeObserver.observe(element);\n\t\thandleResize();\n\n\t\treturn () => {\n\t\t\tabortController.abort();\n\t\t\tresizeObserver.disconnect();\n\t\t\tmutationObserver.disconnect();\n\t\t};\n\t}, [orientation]);\n\n\treturn (\n\t\t<TabsPrimitiveList\n\t\t\taria-orientation={orientation}\n\t\t\tclassName={cx(listVariants({ orientation, appearance }), className)}\n\t\t\tref={composeRefs(scrollRef, ref)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nList.displayName = \"TabsList\";\n\ntype TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitiveTrigger>;\n\n/**\n * Variants for the TabsTriggerDecoration component\n */\nconst triggerDecorationVariants = cva(\"absolute z-0\", {\n\tvariants: {\n\t\torientation: {\n\t\t\thorizontal: \"bottom-0 left-0 right-0 h-0.75\",\n\t\t\tvertical: \"-right-px bottom-0 top-0 w-0.75\",\n\t\t} as const satisfies Record<Orientation, string>,\n\t\tappearance: {\n\t\t\tclassic: \"group-data-state-active/tab-trigger:bg-neutral-950\",\n\t\t\tpill: \"hidden\",\n\t\t} as const satisfies Record<Appearance, string>,\n\t},\n});\n\nconst TabsTriggerDecoration = () => {\n\tconst { orientation, appearance } = useContext(TabsStateContext);\n\n\treturn (\n\t\t<span aria-hidden className={clsx(triggerDecorationVariants({ orientation, appearance }))} />\n\t);\n};\nTabsTriggerDecoration.displayName = \"TabsTriggerDecoration\";\n\n/**\n * Variants for the Trigger component\n */\nconst triggerVariants = cva(\n\tcx(\n\t\t\"group/tab-trigger relative flex cursor-pointer items-center gap-1 whitespace-nowrap py-3 text-sm font-medium text-gray-600\",\n\t\t\"ring-focus-accent outline-hidden\",\n\t\t\"aria-disabled:cursor-default aria-disabled:opacity-50\",\n\t\t\"focus-visible:ring-4\",\n\t\t\"[&>svg]:shrink-0 [&>svg]:size-5\",\n\t\t\"not-aria-disabled:hover:text-gray-900\",\n\t),\n\t{\n\t\tvariants: {\n\t\t\torientation: {\n\t\t\t\thorizontal: \"rounded-tl-md rounded-tr-md\",\n\t\t\t\tvertical: \"rounded-bl-md rounded-tl-md pr-3\",\n\t\t\t} as const satisfies Record<Orientation, string>,\n\t\t\tappearance: {\n\t\t\t\tclassic: cx(\n\t\t\t\t\t\"not-aria-disabled:hover:data-state-active:text-strong\",\n\t\t\t\t\t\"data-state-active:text-strong\",\n\t\t\t\t),\n\t\t\t\tpill: cx(\n\t\t\t\t\t\"not-aria-disabled:hover:data-state-active:text-strong\",\n\t\t\t\t\t\"not-aria-disabled:hover:data-state-active:bg-neutral-500/15\",\n\t\t\t\t\t\"data-state-active:text-strong\",\n\t\t\t\t\t\"data-state-active:bg-neutral-500/15\",\n\t\t\t\t\t\"rounded-full py-2 px-3\",\n\t\t\t\t),\n\t\t\t} as const satisfies Record<Appearance, string>,\n\t\t},\n\t},\n);\n\n/**\n * The button that activates its associated content.\n * A clickable tab trigger that switches between different tab content panels.\n *\n * @see https://mantle.ngrok.com/components/tabs#tabstrigger\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Trigger = forwardRef<ComponentRef<typeof TabsPrimitiveTrigger>, TabsTriggerProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst { orientation, appearance } = useContext(TabsStateContext);\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled);\n\n\t\tconst tabsTriggerProps = {\n\t\t\t\"aria-disabled\": _ariaDisabled ?? _disabled,\n\t\t\tclassName: cx(triggerVariants({ orientation, appearance }), className),\n\t\t\tdisabled,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<TabsTriggerProps>(singleChild),\n\t\t\t\t\"When using `asChild`, TabsTrigger must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\tconst cloneProps = disabled\n\t\t\t\t? /**\n\t\t\t\t\t * When disabled, prevent anchor/link children from being clickable by\n\t\t\t\t\t * removing their href/to props!\n\t\t\t\t\t * This is necessary because `<a>` doesn't support the `disabled`\n\t\t\t\t\t * attribute and would be navigable. We could use `pointer-events-none`\n\t\t\t\t\t * instead, but don't by default because it would also prevent tooltip\n\t\t\t\t\t * interactions, which may be surprising.\n\t\t\t\t\t */\n\t\t\t\t\t{ href: undefined, to: undefined }\n\t\t\t\t: /**\n\t\t\t\t\t * when NOT disabled, allow keyboard navigation to the trigger,\n\t\t\t\t\t * even for asChild anchors/links\n\t\t\t\t\t */\n\t\t\t\t\t{ tabIndex: 0 };\n\n\t\t\treturn (\n\t\t\t\t<TabsPrimitiveTrigger asChild {...tabsTriggerProps} ref={ref}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tdisabled ? <button type=\"button\" /> : singleChild,\n\t\t\t\t\t\tcloneProps,\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<TabsTriggerDecoration />\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</TabsPrimitiveTrigger>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<TabsPrimitiveTrigger ref={ref} {...tabsTriggerProps}>\n\t\t\t\t<TabsTriggerDecoration />\n\t\t\t\t{children}\n\t\t\t</TabsPrimitiveTrigger>\n\t\t);\n\t},\n);\nTrigger.displayName = \"TabsTrigger\";\n\n/**\n * A badge component that can be used inside tab triggers to display additional information.\n * Typically used to show counts or status indicators within tab headers.\n *\n * @see https://mantle.ngrok.com/components/tabs#tabsbadge\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">\n *       Account <Tabs.Badge>5</Tabs.Badge>\n *     </Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n * </Tabs.Root>\n * ```\n */\nconst Badge = ({ className, children, ...props }: HTMLAttributes<HTMLSpanElement>) => (\n\t<span\n\t\tclassName={cx(\n\t\t\t\"rounded-full bg-neutral-500/20 px-1.5 text-xs font-medium text-gray-600\",\n\t\t\t\"group-data-state-active/tab-trigger:bg-neutral-950/10 group-data-state-active/tab-trigger:text-strong group-hover/tab-trigger:group-enabled/tab-trigger:group-data-state-active/tab-trigger:text-strong\",\n\t\t\t\"group-hover/tab-trigger:group-enabled/tab-trigger:text-gray-700\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</span>\n);\nBadge.displayName = \"TabBadge\";\n\n/**\n * Contains the content associated with each trigger.\n * The content panel that displays when its corresponding tab trigger is active.\n *\n * @see https://mantle.ngrok.com/components/tabs#tabscontent\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof TabsPrimitiveContent>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveContent>\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitiveContent\n\t\tref={ref}\n\t\tclassName={cx(\"focus-visible:ring-focus-accent outline-hidden focus-visible:ring-4\", className)}\n\t\t{...props}\n\t/>\n));\nContent.displayName = \"TabsContent\";\n\n/**\n * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n * The root component that provides context for all tab components.\n *\n * @see https://mantle.ngrok.com/components/tabs\n *\n * @example\n * Composition:\n * ```\n * Tabs.Root\n * ├── Tabs.List\n * │   └── Tabs.Trigger\n * │       └── Tabs.Badge\n * └── Tabs.Content\n * ```\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Tabs = {\n\t/**\n\t * The root container of the tabs component that provides context for all tab components.\n\t * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#tabsroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t *   <Tabs.Content value=\"account\">\n\t *     <p>Make changes to your account here.</p>\n\t *   </Tabs.Content>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the content associated with each trigger.\n\t * The content panel that displays when its corresponding tab trigger is active.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#tabscontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *   </Tabs.List>\n\t *   <Tabs.Content value=\"account\">\n\t *     <p>Make changes to your account here.</p>\n\t *   </Tabs.Content>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * Contains the triggers that are aligned along the edge of the active content.\n\t * The container for tab triggers that provides the visual layout for tab navigation.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#tabslist\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tList,\n\t/**\n\t * The button that activates its associated content.\n\t * A clickable tab trigger that switches between different tab content panels.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#tabstrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * A badge component that can be used inside tab triggers to display additional information.\n\t * Typically used to show counts or status indicators within tab headers.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#tabsbadge\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">\n\t *       Account <Tabs.Badge>5</Tabs.Badge>\n\t *     </Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tBadge,\n} as const;\n\nexport {\n\t//\n\tTabs,\n};\n"],"mappings":"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"}
+{"version":3,"file":"tabs.js","names":["Root","TabsPrimitiveRoot","List","TabsPrimitiveList","clsx","Trigger","TabsPrimitiveTrigger","Content","TabsPrimitiveContent"],"sources":["../src/components/tabs/tabs.tsx"],"sourcesContent":["import {\n\tContent as TabsPrimitiveContent,\n\tList as TabsPrimitiveList,\n\tRoot as TabsPrimitiveRoot,\n\tTrigger as TabsPrimitiveTrigger,\n} from \"@radix-ui/react-tabs\";\nimport { cva } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport type { ComponentPropsWithoutRef, ComponentRef, HTMLAttributes } from \"react\";\nimport {\n\tChildren,\n\tcloneElement,\n\tcreateContext,\n\tforwardRef,\n\tisValidElement,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { getPrefersReducedMotion } from \"../../hooks/use-prefers-reduced-motion.js\";\nimport type { ScrollBehavior } from \"../../hooks/use-scroll-behavior.js\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\ntype Appearance = \"classic\" | \"pill\";\n\ntype TabsStateContextValue = {\n\torientation: Orientation;\n\tappearance: Appearance;\n};\n\nconst TabsStateContext = createContext<TabsStateContextValue>({\n\torientation: \"horizontal\",\n\tappearance: \"classic\",\n});\n\n/**\n * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n * The root component that provides context for all tab components.\n *\n * @see https://mantle.ngrok.com/components/tabs#tabsroot\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Root = forwardRef<\n\tComponentRef<typeof TabsPrimitiveRoot>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveRoot> & {\n\t\t/**\n\t\t * The appearance of the tabs. Classic appearance shows the tab\n\t\t * list with an underline; pill appearance shows each tab as a pill.\n\t\t * @default \"classic\"\n\t\t */\n\t\tappearance?: \"classic\" | \"pill\";\n\t}\n>(({ className, children, orientation = \"horizontal\", appearance = \"classic\", ...props }, ref) => (\n\t<TabsPrimitiveRoot\n\t\tdata-slot=\"tabs\"\n\t\tclassName={cx(\"flex gap-4\", orientation === \"horizontal\" ? \"flex-col\" : \"flex-row\", className)}\n\t\torientation={orientation}\n\t\tref={ref}\n\t\t{...props}\n\t>\n\t\t<TabsStateContext.Provider value={{ orientation, appearance }}>\n\t\t\t{children}\n\t\t</TabsStateContext.Provider>\n\t</TabsPrimitiveRoot>\n));\nRoot.displayName = \"Tabs\";\n\n/**\n * Variants for the List component\n */\nconst listVariants = cva(\"flex\", {\n\tvariants: {\n\t\torientation: {\n\t\t\thorizontal:\n\t\t\t\t\"scroll-fade-x flex-row items-center overflow-x-auto overscroll-x-none w-full min-w-0 pt-1 -mt-1 px-1 -mx-1\",\n\t\t\tvertical: \"flex-col items-end gap-3.5 self-stretch\",\n\t\t} as const satisfies Record<Orientation, string>,\n\t\tappearance: {\n\t\t\tclassic: \"\",\n\t\t\tpill: \"\",\n\t\t} as const satisfies Record<Appearance, string>,\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\torientation: \"horizontal\",\n\t\t\tappearance: \"pill\",\n\t\t\t// pb-1 -mb-1 gives the focus ring space below (ring-4 is box-shadow, clipped by overflow).\n\t\t\tclassName: \"gap-1 pb-1 -mb-1\",\n\t\t},\n\t\t{\n\t\t\torientation: \"horizontal\",\n\t\t\tappearance: \"classic\",\n\t\t\tclassName: \"gap-6\",\n\t\t},\n\t\t{\n\t\t\torientation: \"vertical\",\n\t\t\tappearance: \"classic\",\n\t\t\tclassName: \"border-r border-gray-200\",\n\t\t},\n\t],\n});\n\n/**\n * Contains the triggers that are aligned along the edge of the active content.\n * The container for tab triggers that provides the visual layout for tab navigation.\n *\n * @see https://mantle.ngrok.com/components/tabs#tabslist\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst List = forwardRef<\n\tComponentRef<typeof TabsPrimitiveList>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveList>\n>(({ className, ...props }, ref) => {\n\tconst { orientation, appearance } = useContext(TabsStateContext);\n\tconst scrollRef = useRef<ComponentRef<typeof TabsPrimitiveList>>(null);\n\n\tuseEffect(() => {\n\t\tconst element = scrollRef.current;\n\t\tif (!element || orientation !== \"horizontal\") {\n\t\t\treturn;\n\t\t}\n\n\t\tconst abortController = new AbortController();\n\t\tlet maxScrollLeft = 0;\n\n\t\tconst updateShadows = () => {\n\t\t\telement.toggleAttribute(\"data-scroll-left\", element.scrollLeft > 0);\n\t\t\telement.toggleAttribute(\n\t\t\t\t\"data-scroll-right\",\n\t\t\t\tMath.ceil(element.scrollLeft) < maxScrollLeft - 1,\n\t\t\t);\n\t\t};\n\n\t\tconst handleResize = () => {\n\t\t\tmaxScrollLeft = element.scrollWidth - element.clientWidth;\n\t\t\tupdateShadows();\n\t\t};\n\n\t\t// passive: true — lets the browser optimize scroll performance by guaranteeing\n\t\t// we won't call preventDefault() inside this handler.\n\t\telement.addEventListener(\"scroll\", updateShadows, {\n\t\t\tpassive: true,\n\t\t\tsignal: abortController.signal,\n\t\t});\n\n\t\t// ResizeObserver alone won't catch scrollWidth changes caused by content\n\t\t// mutations (e.g. font loading, badge count changes) when the list container\n\t\t// itself doesn't resize. MutationObserver covers those cases.\n\t\tconst mutationObserver = new MutationObserver(handleResize);\n\t\tmutationObserver.observe(element, {\n\t\t\tchildList: true,\n\t\t\tsubtree: true, // subtree catches badge/label content changes inside triggers\n\t\t});\n\n\t\t// When Radix moves focus via arrow keys it calls element.focus(), which doesn't\n\t\t// always scroll the target into view inside an overflow container. We handle it\n\t\t// explicitly here via event delegation so every trigger gets this behavior with\n\t\t// a single listener rather than one per trigger.\n\t\telement.addEventListener(\n\t\t\t\"focusin\",\n\t\t\t(event) => {\n\t\t\t\tif (event.target instanceof Element && event.target !== element) {\n\t\t\t\t\tconst scrollBehavior: ScrollBehavior = getPrefersReducedMotion() ? \"auto\" : \"smooth\";\n\t\t\t\t\tevent.target.scrollIntoView({\n\t\t\t\t\t\tbehavior: scrollBehavior,\n\t\t\t\t\t\t// \"center\" rather than \"nearest\" so the focused tab lands in the middle\n\t\t\t\t\t\t// of the visible area, giving the user context on both sides.\n\t\t\t\t\t\tinline: \"center\",\n\t\t\t\t\t\tblock: \"nearest\",\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t},\n\t\t\t{ signal: abortController.signal },\n\t\t);\n\t\tconst resizeObserver = new ResizeObserver(handleResize);\n\t\tresizeObserver.observe(element);\n\t\thandleResize();\n\n\t\treturn () => {\n\t\t\tabortController.abort();\n\t\t\tresizeObserver.disconnect();\n\t\t\tmutationObserver.disconnect();\n\t\t};\n\t}, [orientation]);\n\n\treturn (\n\t\t<TabsPrimitiveList\n\t\t\taria-orientation={orientation}\n\t\t\tdata-slot=\"tabs-list\"\n\t\t\tclassName={cx(listVariants({ orientation, appearance }), className)}\n\t\t\tref={composeRefs(scrollRef, ref)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nList.displayName = \"TabsList\";\n\ntype TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitiveTrigger>;\n\n/**\n * Variants for the TabsTriggerDecoration component\n */\nconst triggerDecorationVariants = cva(\"absolute z-0\", {\n\tvariants: {\n\t\torientation: {\n\t\t\thorizontal: \"bottom-0 left-0 right-0 h-0.75\",\n\t\t\tvertical: \"-right-px bottom-0 top-0 w-0.75\",\n\t\t} as const satisfies Record<Orientation, string>,\n\t\tappearance: {\n\t\t\tclassic: \"group-data-state-active/tab-trigger:bg-neutral-950\",\n\t\t\tpill: \"hidden\",\n\t\t} as const satisfies Record<Appearance, string>,\n\t},\n});\n\nconst TabsTriggerDecoration = () => {\n\tconst { orientation, appearance } = useContext(TabsStateContext);\n\n\treturn (\n\t\t<span aria-hidden className={clsx(triggerDecorationVariants({ orientation, appearance }))} />\n\t);\n};\nTabsTriggerDecoration.displayName = \"TabsTriggerDecoration\";\n\n/**\n * Variants for the Trigger component\n */\nconst triggerVariants = cva(\n\tcx(\n\t\t\"group/tab-trigger relative flex cursor-pointer items-center gap-1 whitespace-nowrap py-3 text-sm font-medium text-gray-600\",\n\t\t\"ring-focus-accent outline-hidden\",\n\t\t\"aria-disabled:cursor-default aria-disabled:opacity-50\",\n\t\t\"focus-visible:ring-4\",\n\t\t\"[&>svg]:shrink-0 [&>svg]:size-5\",\n\t\t\"not-aria-disabled:hover:text-gray-900\",\n\t),\n\t{\n\t\tvariants: {\n\t\t\torientation: {\n\t\t\t\thorizontal: \"rounded-tl-md rounded-tr-md\",\n\t\t\t\tvertical: \"rounded-bl-md rounded-tl-md pr-3\",\n\t\t\t} as const satisfies Record<Orientation, string>,\n\t\t\tappearance: {\n\t\t\t\tclassic: cx(\n\t\t\t\t\t\"not-aria-disabled:hover:data-state-active:text-strong\",\n\t\t\t\t\t\"data-state-active:text-strong\",\n\t\t\t\t),\n\t\t\t\tpill: cx(\n\t\t\t\t\t\"not-aria-disabled:hover:data-state-active:text-strong\",\n\t\t\t\t\t\"not-aria-disabled:hover:data-state-active:bg-neutral-500/15\",\n\t\t\t\t\t\"data-state-active:text-strong\",\n\t\t\t\t\t\"data-state-active:bg-neutral-500/15\",\n\t\t\t\t\t\"rounded-full py-2 px-3\",\n\t\t\t\t),\n\t\t\t} as const satisfies Record<Appearance, string>,\n\t\t},\n\t},\n);\n\n/**\n * The button that activates its associated content.\n * A clickable tab trigger that switches between different tab content panels.\n *\n * @see https://mantle.ngrok.com/components/tabs#tabstrigger\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Trigger = forwardRef<ComponentRef<typeof TabsPrimitiveTrigger>, TabsTriggerProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst { orientation, appearance } = useContext(TabsStateContext);\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled);\n\n\t\tconst tabsTriggerProps = {\n\t\t\t\"aria-disabled\": _ariaDisabled ?? _disabled,\n\t\t\tclassName: cx(triggerVariants({ orientation, appearance }), className),\n\t\t\tdisabled,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<TabsTriggerProps>(singleChild),\n\t\t\t\t\"When using `asChild`, TabsTrigger must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\tconst cloneProps = disabled\n\t\t\t\t? /**\n\t\t\t\t\t * When disabled, prevent anchor/link children from being clickable by\n\t\t\t\t\t * removing their href/to props!\n\t\t\t\t\t * This is necessary because `<a>` doesn't support the `disabled`\n\t\t\t\t\t * attribute and would be navigable. We could use `pointer-events-none`\n\t\t\t\t\t * instead, but don't by default because it would also prevent tooltip\n\t\t\t\t\t * interactions, which may be surprising.\n\t\t\t\t\t */\n\t\t\t\t\t{ href: undefined, to: undefined }\n\t\t\t\t: /**\n\t\t\t\t\t * when NOT disabled, allow keyboard navigation to the trigger,\n\t\t\t\t\t * even for asChild anchors/links\n\t\t\t\t\t */\n\t\t\t\t\t{ tabIndex: 0 };\n\n\t\t\treturn (\n\t\t\t\t<TabsPrimitiveTrigger asChild data-slot=\"tabs-trigger\" {...tabsTriggerProps} ref={ref}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tdisabled ? <button type=\"button\" /> : singleChild,\n\t\t\t\t\t\tcloneProps,\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<TabsTriggerDecoration />\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</TabsPrimitiveTrigger>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<TabsPrimitiveTrigger data-slot=\"tabs-trigger\" ref={ref} {...tabsTriggerProps}>\n\t\t\t\t<TabsTriggerDecoration />\n\t\t\t\t{children}\n\t\t\t</TabsPrimitiveTrigger>\n\t\t);\n\t},\n);\nTrigger.displayName = \"TabsTrigger\";\n\n/**\n * A badge component that can be used inside tab triggers to display additional information.\n * Typically used to show counts or status indicators within tab headers.\n *\n * @see https://mantle.ngrok.com/components/tabs#tabsbadge\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">\n *       Account <Tabs.Badge>5</Tabs.Badge>\n *     </Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n * </Tabs.Root>\n * ```\n */\nconst Badge = ({ className, children, ...props }: HTMLAttributes<HTMLSpanElement>) => (\n\t<span\n\t\tdata-slot=\"tabs-badge\"\n\t\tclassName={cx(\n\t\t\t\"rounded-full bg-neutral-500/20 px-1.5 text-xs font-medium text-gray-600\",\n\t\t\t\"group-data-state-active/tab-trigger:bg-neutral-950/10 group-data-state-active/tab-trigger:text-strong group-hover/tab-trigger:group-enabled/tab-trigger:group-data-state-active/tab-trigger:text-strong\",\n\t\t\t\"group-hover/tab-trigger:group-enabled/tab-trigger:text-gray-700\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</span>\n);\nBadge.displayName = \"TabBadge\";\n\n/**\n * Contains the content associated with each trigger.\n * The content panel that displays when its corresponding tab trigger is active.\n *\n * @see https://mantle.ngrok.com/components/tabs#tabscontent\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof TabsPrimitiveContent>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveContent>\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitiveContent\n\t\tref={ref}\n\t\tdata-slot=\"tabs-content\"\n\t\tclassName={cx(\"focus-visible:ring-focus-accent outline-hidden focus-visible:ring-4\", className)}\n\t\t{...props}\n\t/>\n));\nContent.displayName = \"TabsContent\";\n\n/**\n * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n * The root component that provides context for all tab components.\n *\n * @see https://mantle.ngrok.com/components/tabs\n *\n * @example\n * Composition:\n * ```\n * Tabs.Root\n * ├── Tabs.List\n * │   └── Tabs.Trigger\n * │       └── Tabs.Badge\n * └── Tabs.Content\n * ```\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n *   <Tabs.List>\n *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n *   </Tabs.List>\n *   <Tabs.Content value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </Tabs.Content>\n *   <Tabs.Content value=\"password\">\n *     <p>Change your password here.</p>\n *   </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Tabs = {\n\t/**\n\t * The root container of the tabs component that provides context for all tab components.\n\t * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#tabsroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t *   <Tabs.Content value=\"account\">\n\t *     <p>Make changes to your account here.</p>\n\t *   </Tabs.Content>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Contains the content associated with each trigger.\n\t * The content panel that displays when its corresponding tab trigger is active.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#tabscontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *   </Tabs.List>\n\t *   <Tabs.Content value=\"account\">\n\t *     <p>Make changes to your account here.</p>\n\t *   </Tabs.Content>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * Contains the triggers that are aligned along the edge of the active content.\n\t * The container for tab triggers that provides the visual layout for tab navigation.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#tabslist\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tList,\n\t/**\n\t * The button that activates its associated content.\n\t * A clickable tab trigger that switches between different tab content panels.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#tabstrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n\t *     <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * A badge component that can be used inside tab triggers to display additional information.\n\t * Typically used to show counts or status indicators within tab headers.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#tabsbadge\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tabs.Root defaultValue=\"account\">\n\t *   <Tabs.List>\n\t *     <Tabs.Trigger value=\"account\">\n\t *       Account <Tabs.Badge>5</Tabs.Badge>\n\t *     </Tabs.Trigger>\n\t *   </Tabs.List>\n\t * </Tabs.Root>\n\t * ```\n\t */\n\tBadge,\n} as const;\n\nexport {\n\t//\n\tTabs,\n};\n"],"mappings":"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"}

package/dist/text-area.d.ts

@@ -1,4 +1,4 @@
-import { o as WithValidation } from "./types-BeTbgoJd.js";
+import { o as WithValidation } from "./types-DG0WQLTL.js";
 import * as _$react from "react";
 import { ComponentProps } from "react";
 

package/dist/text-area.js

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

package/dist/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","names":[],"sources":["../src/components/text-area/text-area.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef, useRef, useState } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { WithValidation } from \"../input/types.js\";\n\ntype Props = ComponentProps<\"textarea\"> &\n\tWithValidation & {\n\t\t/**\n\t\t * The visual style of the textarea.\n\t\t */\n\t\tappearance?: \"monospaced\";\n\t};\n\n/**\n * A multi-line plain-text editing control, useful when you want to allow users\n * to enter a sizeable amount of free-form text, for example a comment on a\n * review or feedback form.\n *\n * @see https://mantle.ngrok.com/components/text-area\n *\n * @example\n * ```tsx\n * <form>\n *   <div>\n *     <Label htmlFor=\"feedback\">Feedback:</Label>\n *     <TextArea\n *       id=\"feedback\"\n *       name=\"feedback\"\n *       placeholder=\"Enter your feedback here\"\n *     />\n *   </div>\n * </form>\n * ```\n */\nconst TextArea = forwardRef<ComponentRef<\"textarea\">, Props>(\n\t(\n\t\t{\n\t\t\tappearance,\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tonDragEnter,\n\t\t\tonDragLeave,\n\t\t\tonDropCapture,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\t\tconst [isDragOver, setIsDragOver] = useState(false);\n\t\tconst innerRef = useRef<ComponentRef<\"textarea\">>(null);\n\n\t\treturn (\n\t\t\t<textarea\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\tappearance === \"monospaced\" &&\n\t\t\t\t\t\t\"pointer-coarse:text-[0.9375rem] font-mono text-[0.8125rem]\",\n\t\t\t\t\t\"border-input bg-form data-drag-over:border-dashed data-drag-over:ring-4 pointer-coarse:py-[calc(theme(spacing[2.5])-1px)] pointer-coarse:text-base flex min-h-24 w-full rounded-md border px-3 py-[calc(theme(spacing[2])-1px)] focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50\",\n\t\t\t\t\t\"placeholder:text-placeholder data-drag-over:border-dashed\",\n\t\t\t\t\t\"border-form text-strong ring-focus-accent focus:border-accent-600 data-drag-over:border-accent-600\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:ring-focus-danger data-validation-error:focus-visible:border-danger-600 data-validation-error:data-drag-over:border-danger-600\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:ring-focus-success data-validation-success:focus-visible:border-success-600 data-validation-success:data-drag-over:border-success-600\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:ring-focus-warning data-validation-warning:focus-visible:border-warning-600 data-validation-warning:data-drag-over:border-warning-600\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-drag-over={isDragOver}\n\t\t\t\tonDragEnter={(event) => {\n\t\t\t\t\tsetIsDragOver(true);\n\t\t\t\t\tonDragEnter?.(event);\n\t\t\t\t}}\n\t\t\t\tonDragLeave={(event) => {\n\t\t\t\t\tsetIsDragOver(false);\n\t\t\t\t\tonDragLeave?.(event);\n\t\t\t\t}}\n\t\t\t\tonDropCapture={(event) => {\n\t\t\t\t\tsetIsDragOver(false);\n\t\t\t\t\tinnerRef.current?.focus();\n\t\t\t\t\tonDropCapture?.(event);\n\t\t\t\t}}\n\t\t\t\tref={composeRefs(innerRef, ref)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nTextArea.displayName = \"TextArea\";\n\nexport {\n\t//,\n\tTextArea,\n};\n\nexport type {\n\t//,\n\tProps as TextAreaProps,\n};\n"],"mappings":"oLAqCA,MAAM,EAAW,GAEf,CACC,aACA,eAAgB,EAChB,YACA,cACA,cACA,gBACA,WAAY,EACZ,GAAG,GAEJ,IACI,CAEJ,IAAM,EADY,GAAgB,MAAQ,IAAiB,QAExD,QACA,OAAO,GAAgB,WACtB,GAAa,CACb,EACE,EAAc,GAAgB,IAAe,QAC7C,CAAC,EAAY,GAAiB,EAAS,GAAM,CAC7C,EAAW,EAAiC,KAAK,CAEvD,OACC,EAAC,WAAD,CACC,eAAc,EACd,kBAAiB,GAAc,IAAA,GAC/B,UAAW,EACV,IAAe,cACd,6DACD,qUACA,4DACA,qGACA,+LACA,2MACA,2MACA,EACA,CACD,iBAAgB,EAChB,YAAc,GAAU,CACvB,EAAc,GAAK,CACnB,IAAc,EAAM,EAErB,YAAc,GAAU,CACvB,EAAc,GAAM,CACpB,IAAc,EAAM,EAErB,cAAgB,GAAU,CACzB,EAAc,GAAM,CACpB,EAAS,SAAS,OAAO,CACzB,IAAgB,EAAM,EAEvB,IAAK,EAAY,EAAU,EAAI,CAC/B,GAAI,EACH,CAAA,EAGJ,CACD,EAAS,YAAc"}
+{"version":3,"file":"text-area.js","names":[],"sources":["../src/components/text-area/text-area.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef, useRef, useState } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { WithValidation } from \"../input/types.js\";\n\ntype Props = ComponentProps<\"textarea\"> &\n\tWithValidation & {\n\t\t/**\n\t\t * The visual style of the textarea.\n\t\t */\n\t\tappearance?: \"monospaced\";\n\t};\n\n/**\n * A multi-line plain-text editing control, useful when you want to allow users\n * to enter a sizeable amount of free-form text, for example a comment on a\n * review or feedback form.\n *\n * @see https://mantle.ngrok.com/components/text-area\n *\n * @example\n * ```tsx\n * <form>\n *   <div>\n *     <Label htmlFor=\"feedback\">Feedback:</Label>\n *     <TextArea\n *       id=\"feedback\"\n *       name=\"feedback\"\n *       placeholder=\"Enter your feedback here\"\n *     />\n *   </div>\n * </form>\n * ```\n */\nconst TextArea = forwardRef<ComponentRef<\"textarea\">, Props>(\n\t(\n\t\t{\n\t\t\tappearance,\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tonDragEnter,\n\t\t\tonDragLeave,\n\t\t\tonDropCapture,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\t\tconst [isDragOver, setIsDragOver] = useState(false);\n\t\tconst innerRef = useRef<ComponentRef<\"textarea\">>(null);\n\n\t\treturn (\n\t\t\t<textarea\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tdata-slot=\"text-area\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\tappearance === \"monospaced\" &&\n\t\t\t\t\t\t\"pointer-coarse:text-[0.9375rem] font-mono text-[0.8125rem]\",\n\t\t\t\t\t\"border-input bg-form data-drag-over:border-dashed data-drag-over:ring-4 pointer-coarse:py-[calc(theme(spacing[2.5])-1px)] pointer-coarse:text-base flex min-h-24 w-full rounded-md border px-3 py-[calc(theme(spacing[2])-1px)] focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50\",\n\t\t\t\t\t\"placeholder:text-placeholder data-drag-over:border-dashed\",\n\t\t\t\t\t\"border-form text-strong ring-focus-accent focus:border-accent-600 data-drag-over:border-accent-600\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:ring-focus-danger data-validation-error:focus-visible:border-danger-600 data-validation-error:data-drag-over:border-danger-600\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:ring-focus-success data-validation-success:focus-visible:border-success-600 data-validation-success:data-drag-over:border-success-600\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:ring-focus-warning data-validation-warning:focus-visible:border-warning-600 data-validation-warning:data-drag-over:border-warning-600\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-drag-over={isDragOver}\n\t\t\t\tonDragEnter={(event) => {\n\t\t\t\t\tsetIsDragOver(true);\n\t\t\t\t\tonDragEnter?.(event);\n\t\t\t\t}}\n\t\t\t\tonDragLeave={(event) => {\n\t\t\t\t\tsetIsDragOver(false);\n\t\t\t\t\tonDragLeave?.(event);\n\t\t\t\t}}\n\t\t\t\tonDropCapture={(event) => {\n\t\t\t\t\tsetIsDragOver(false);\n\t\t\t\t\tinnerRef.current?.focus();\n\t\t\t\t\tonDropCapture?.(event);\n\t\t\t\t}}\n\t\t\t\tref={composeRefs(innerRef, ref)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nTextArea.displayName = \"TextArea\";\n\nexport {\n\t//,\n\tTextArea,\n};\n\nexport type {\n\t//,\n\tProps as TextAreaProps,\n};\n"],"mappings":"oLAqCA,MAAM,EAAW,GAEf,CACC,aACA,eAAgB,EAChB,YACA,cACA,cACA,gBACA,WAAY,EACZ,GAAG,GAEJ,IACI,CAEJ,IAAM,EADY,GAAgB,MAAQ,IAAiB,QAExD,QACA,OAAO,GAAgB,WACtB,GAAa,CACb,EACE,EAAc,GAAgB,IAAe,QAC7C,CAAC,EAAY,GAAiB,EAAS,GAAM,CAC7C,EAAW,EAAiC,KAAK,CAEvD,OACC,EAAC,WAAD,CACC,eAAc,EACd,kBAAiB,GAAc,IAAA,GAC/B,YAAU,YACV,UAAW,EACV,IAAe,cACd,6DACD,qUACA,4DACA,qGACA,+LACA,2MACA,2MACA,EACA,CACD,iBAAgB,EAChB,YAAc,GAAU,CACvB,EAAc,GAAK,CACnB,IAAc,EAAM,EAErB,YAAc,GAAU,CACvB,EAAc,GAAM,CACpB,IAAc,EAAM,EAErB,cAAgB,GAAU,CACzB,EAAc,GAAM,CACpB,EAAS,SAAS,OAAO,CACzB,IAAgB,EAAM,EAEvB,IAAK,EAAY,EAAU,EAAI,CAC/B,GAAI,EACH,CAAA,EAGJ,CACD,EAAS,YAAc"}

package/dist/theme.d.ts

@@ -1,4 +1,4 @@
-import { a as isResolvedTheme, c as themes, i as Theme, n as $theme, o as isTheme, r as ResolvedTheme, s as resolvedThemes, t as $resolvedTheme } from "./themes-DXb8Tk74.js";
+import { a as isResolvedTheme, c as themes, i as Theme, n as $theme, o as isTheme, r as ResolvedTheme, s as resolvedThemes, t as $resolvedTheme } from "./themes-DIEYkvNl.js";
 import { PropsWithChildren } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/{themes-DXb8Tk74.d.ts → themes-DIEYkvNl.d.ts}

@@ -33,4 +33,4 @@ declare const $resolvedTheme: <T extends ResolvedTheme = ResolvedTheme>(value: T
 declare function isResolvedTheme(value: unknown): value is ResolvedTheme;
 //#endregion
 export { isResolvedTheme as a, themes as c, Theme as i, $theme as n, isTheme as o, ResolvedTheme as r, resolvedThemes as s, $resolvedTheme as t };
-//# sourceMappingURL=themes-DXb8Tk74.d.ts.map
+//# sourceMappingURL=themes-DIEYkvNl.d.ts.map

package/dist/toast-CGnquSKO.js

@@ -0,0 +1,2 @@
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-bWc5yC3-.js";import{t as n}from"./slot-D_ZUrdEW.js";import{s as r}from"./theme-provider-BFcnjeME.js";import{createContext as i,forwardRef as a,useContext as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{CheckCircleIcon as l}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as u}from"@phosphor-icons/react/Info";import{WarningIcon as d}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as f}from"@phosphor-icons/react/WarningDiamond";import*as p from"sonner";const m=({className:t,containerAriaLabel:n,dir:i,duration_ms:a=4e3,position:o=`top-center`,style:c})=>{let l=r();return s(p.Toaster,{"data-slot":`toaster`,className:e(`toaster overlay-prompt pointer-events-auto *:duration-200`,t),containerAriaLabel:n,dir:i,duration:a,gap:12,position:o??`top-center`,style:c,theme:l,toastOptions:{unstyled:!0}})};m.displayName=`Toaster`;const h=i(``);function g(e,t){let n=t?.duration_ms;return typeof n==`number`&&n<=0&&(n=1/0),p.toast.custom(t=>s(h.Provider,{value:t,children:e}),{duration:n,...t?.id?{id:t.id}:{},unstyled:!0})}const _=i({priority:`info`}),v=a(({asChild:t,children:r,className:i,priority:a,...o},l)=>{let u=t?n:`div`;return s(_.Provider,{value:{priority:a},children:c(u,{"data-slot":`toast`,className:e(`relative flex items-start gap-2 text-sm font-sans`,`p-3 pl-3.75`,`bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg`,i),ref:l,...o,children:[s(T,{priority:a}),r]})})});v.displayName=`Toast`;const y=a(({className:n,svg:r,...i},a)=>{let c=o(_);switch(c.priority){case`danger`:return s(t,{"data-slot":`toast-icon`,className:e(`text-danger-600`,n),ref:a,svg:r??s(d,{weight:`fill`}),...i});case`warning`:return s(t,{"data-slot":`toast-icon`,className:e(`text-warning-600`,n),ref:a,svg:r??s(f,{weight:`fill`}),...i});case`success`:return s(t,{"data-slot":`toast-icon`,className:e(`text-success-600`,n),ref:a,svg:r??s(l,{weight:`fill`}),...i});case`info`:return s(t,{"data-slot":`toast-icon`,className:e(`text-accent-600`,n),ref:a,svg:s(u,{weight:`fill`}),...i});default:throw Error(`Unreachable Case: ${c.priority}`)}});y.displayName=`ToastIcon`;const b=a(({asChild:t,className:r,onClick:i,...a},c)=>{let l=o(h);return s(t?n:`button`,{"data-slot":`toast-action`,className:e(`shrink-0`,`data-icon-button:-mr-0.5 data-icon-button:-mt-0.5 data-icon-button:rounded-xs`,r),onClick:e=>{i?.(e),!e.defaultPrevented&&p.toast.dismiss(l)},ref:c,...a})});b.displayName=`ToastAction`;const x=a(({asChild:t,className:r,...i},a)=>s(t?n:`p`,{"data-slot":`toast-message`,className:e(`text-strong flex-1 text-sm font-body`,r),ref:a,...i}));x.displayName=`ToastMessage`;const S={Root:v,Action:b,Icon:y,Message:x};function C(e){e.target instanceof Element&&e.target.closest(`.overlay-prompt`)&&e.preventDefault()}const w={info:`bg-accent-600`,warning:`bg-warning-600`,success:`bg-success-600`,danger:`bg-danger-600`};function T({className:t,priority:n,...r}){return s(`div`,{"aria-hidden":!0,className:e(`z-1 absolute -inset-px right-auto w-1.5 rounded-l`,w[n],t),...r})}export{C as i,m as n,g as r,S as t};
+//# sourceMappingURL=toast-CGnquSKO.js.map

package/dist/toast-CGnquSKO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-CGnquSKO.js","names":["IconComponent"],"sources":["../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentRef,\n\ttype ReactNode,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n} from \"react\";\nimport * as ToastPrimitive from \"sonner\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport type { WithStyleProps } from \"../../types/with-style-props.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon as IconComponent } from \"../icon/icon.js\";\nimport type { SvgOnlyProps } from \"../icon/svg-only.js\";\nimport { Slot } from \"../slot/index.js\";\nimport { useAppliedTheme } from \"../theme/theme-provider.js\";\n\ntype ToasterPrimitiveProps = ComponentProps<typeof ToastPrimitive.Toaster>;\ntype ToasterPrimitiveTheme = ToasterPrimitiveProps[\"theme\"];\n\ntype ToasterProps = WithStyleProps &\n\tPick<ToasterPrimitiveProps, \"containerAriaLabel\" | \"dir\" | \"position\"> & {\n\t\t/**\n\t\t * Time in milliseconds that should elapse before automatically dismissing toasts.\n\t\t * When set here, this will be the default duration for all toasts.\n\t\t * @default 4000\n\t\t */\n\t\tduration_ms?: number;\n\t};\n\n/**\n * A container for displaying all toasts.\n *\n * Only one `<Toaster />` should be rendered in an app a time, preferably at the\n * root level of the app.\n *\n * @see https://mantle.ngrok.com/components/toast#toaster\n *\n * @example\n * ```tsx\n * <Toaster\n *   position=\"top-right\"\n *   duration_ms={5000}\n * />\n * ```\n */\nconst Toaster = ({\n\t//,\n\tclassName,\n\tcontainerAriaLabel,\n\tdir,\n\tduration_ms = 4000,\n\tposition = \"top-center\",\n\tstyle,\n}: ToasterProps) => {\n\tconst theme = useAppliedTheme();\n\n\treturn (\n\t\t<ToastPrimitive.Toaster\n\t\t\tdata-slot=\"toaster\"\n\t\t\tclassName={cx(\"toaster overlay-prompt pointer-events-auto *:duration-200\", className)}\n\t\t\tcontainerAriaLabel={containerAriaLabel}\n\t\t\tdir={dir}\n\t\t\tduration={duration_ms}\n\t\t\tgap={12}\n\t\t\tposition={position ?? \"top-center\"}\n\t\t\tstyle={style}\n\t\t\ttheme={theme as ToasterPrimitiveTheme} // we have additional themes that are not in the sonner types, so we need to cast for now\n\t\t\ttoastOptions={{\n\t\t\t\tunstyled: true,\n\t\t\t}}\n\t\t/>\n\t);\n};\nToaster.displayName = \"Toaster\";\n\nconst ToastIdContext = createContext<string | number>(\"\");\n\ntype MakeToastOptions = {\n\t/**\n\t * Time in milliseconds that should elapse before automatically closing the toast.\n\t * Will default to the `<Toaster />`'s `duration_ms` if not provided.\n\t *\n\t * You can keep the toast open until manually dismissed by passing a value <= 0 or Number.POSITIVE_INFINITY\n\t */\n\tduration_ms?: number;\n\t/**\n\t * An optional custom ID for this toast. If not given, a unique ID is provided for you.\n\t */\n\tid?: string;\n};\n\n/**\n * Create a toast. Provide a `<Toast.Root>` component as the `children` to be rendered\n * inside the `<Toaster />` section.\n *\n * @see https://mantle.ngrok.com/components/toast#maketoast\n *\n * @example\n * ```tsx\n * // Basic toast with auto-dismiss (default 4000ms, inherits from `<Toaster>`)\n * makeToast(\n *   <Toast.Root priority=\"success\">\n *     <Toast.Icon />\n *     <Toast.Message>Operation completed successfully!</Toast.Message>\n *     <Toast.Action>Dismiss</Toast.Action>\n *   </Toast.Root>\n * );\n *\n * // Toast that stays open until manually dismissed\n * makeToast(\n *   <Toast.Root priority=\"warning\">\n *     <Toast.Icon />\n *     <Toast.Message>Action required</Toast.Message>\n *     <Toast.Action>Dismiss</Toast.Action>\n *   </Toast.Root>,\n *   { duration_ms: Number.POSITIVE_INFINITY }\n * );\n * ```\n */\nfunction makeToast(children: ReactNode, options?: MakeToastOptions) {\n\tlet duration = options?.duration_ms;\n\tif (typeof duration === \"number\" && duration <= 0) {\n\t\tduration = Number.POSITIVE_INFINITY;\n\t}\n\n\treturn ToastPrimitive.toast.custom(\n\t\t(toastId) => <ToastIdContext.Provider value={toastId}>{children}</ToastIdContext.Provider>,\n\t\t{\n\t\t\t//\n\t\t\tduration,\n\t\t\t// If a custom ID is provided, use it, else use the toastId provided by the sonner library\n\t\t\t// don't set an ID to `undefined` as it breaks the sonner library\n\t\t\t...(options?.id ? { id: options.id } : {}),\n\t\t\tunstyled: true,\n\t\t},\n\t);\n}\n\nconst priorities = [\n\t//,\n\t\"danger\",\n\t\"info\",\n\t\"success\",\n\t\"warning\",\n] as const;\ntype Priority = (typeof priorities)[number];\n\ntype ToastState = {\n\tpriority: Priority;\n};\n\nconst ToastStateContext = createContext<ToastState>({\n\tpriority: \"info\",\n});\n\ntype ToastProps = ComponentProps<\"div\"> &\n\tWithAsChild & {\n\t\tpriority: Priority;\n\t};\n\n/**\n * A succinct message with a priority that is displayed temporarily.\n * Toasts are used to provide feedback to the user without interrupting their workflow.\n *\n * @see https://mantle.ngrok.com/components/toast#toastroot\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"success\">\n *   <Toast.Icon />\n *   <Toast.Message>Changes saved successfully!</Toast.Message>\n *   <Toast.Action>Undo</Toast.Action>\n * </Toast.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, ToastProps>(\n\t({ asChild, children, className, priority, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<ToastStateContext.Provider value={{ priority }}>\n\t\t\t\t<Component\n\t\t\t\t\tdata-slot=\"toast\"\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"relative flex items-start gap-2 text-sm font-sans\",\n\t\t\t\t\t\t\"p-3 pl-3.75\",\n\t\t\t\t\t\t\"bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg\",\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Do not apply overflow-hidden because we want the priority bar accent\n\t\t\t\t\t\t * to overlap the toast border, else the border flows over the\n\t\t\t\t\t\t * priority bar.\n\t\t\t\t\t\t */\n\t\t\t\t\t\tclassName,\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<PriorityBarAccent priority={priority} />\n\t\t\t\t\t{children}\n\t\t\t\t</Component>\n\t\t\t</ToastStateContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"Toast\";\n\ntype ToastIconProps = Partial<SvgOnlyProps>;\n\n/**\n * An icon that visually represents the priority of the toast.\n * If you do not provide an icon, the default icon and color for the priority is used.\n *\n * @see https://mantle.ngrok.com/components/toast#toasticon\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"warning\">\n *   <Toast.Icon />\n *   <Toast.Message>Warning message</Toast.Message>\n * </Toast.Root>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, ToastIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useContext(ToastStateContext);\n\n\t\tswitch (ctx.priority) {\n\t\t\tcase \"danger\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\tdata-slot=\"toast-icon\"\n\t\t\t\t\t\tclassName={cx(\"text-danger-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <WarningIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"warning\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\tdata-slot=\"toast-icon\"\n\t\t\t\t\t\tclassName={cx(\"text-warning-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <WarningDiamondIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"success\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\tdata-slot=\"toast-icon\"\n\t\t\t\t\t\tclassName={cx(\"text-success-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <CheckCircleIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"info\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\t//\n\t\t\t\t\t\tdata-slot=\"toast-icon\"\n\t\t\t\t\t\tclassName={cx(\"text-accent-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={<InfoIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tdefault:\n\t\t\t\tthrow new Error(`Unreachable Case: ${ctx.priority}`);\n\t\t}\n\t},\n);\nIcon.displayName = \"ToastIcon\";\n\ntype ToastActionProps = ComponentProps<\"button\"> & WithAsChild;\n\n/**\n * A button that dismisses the toast when clicked.\n * You can prevent the toast from being dismissed `onClick` by calling `event.preventDefault()`\n *\n * @see https://mantle.ngrok.com/components/toast#toastaction\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"info\">\n *   <Toast.Icon />\n *   <Toast.Message>File uploaded successfully</Toast.Message>\n *   <Toast.Action>View File</Toast.Action>\n * </Toast.Root>\n * ```\n */\nconst Action = forwardRef<ComponentRef<\"button\">, ToastActionProps>(\n\t({ asChild, className, onClick, ...props }, ref) => {\n\t\tconst ctx = useContext(ToastIdContext);\n\n\t\tconst Component = asChild ? Slot : \"button\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tdata-slot=\"toast-action\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t//,\n\t\t\t\t\t\"shrink-0\",\n\t\t\t\t\t// 👇 wiggle the bits so that icon buttons toast actions are aligned with the toast icon\n\t\t\t\t\t\"data-icon-button:-mr-0.5 data-icon-button:-mt-0.5 data-icon-button:rounded-xs\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tToastPrimitive.toast.dismiss(ctx);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAction.displayName = \"ToastAction\";\n\ntype ToastMessageProps = ComponentProps<\"p\"> & WithAsChild;\n\n/**\n * The message content of the toast.\n *\n * @see https://mantle.ngrok.com/components/toast#toastmessage\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"success\">\n *   <Toast.Icon />\n *   <Toast.Message>Your changes have been saved</Toast.Message>\n * </Toast.Root>\n * ```\n */\nconst Message = forwardRef<ComponentRef<\"p\">, ToastMessageProps>(\n\t({ asChild, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"p\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\t//\n\t\t\t\tdata-slot=\"toast-message\"\n\t\t\t\tclassName={cx(\"text-strong flex-1 text-sm font-body\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nMessage.displayName = \"ToastMessage\";\n\n/**\n * A succinct message that is displayed temporarily. Toasts are used to provide\n * feedback to the user without interrupting their workflow.\n *\n * @see https://mantle.ngrok.com/components/toast\n *\n * @example\n * Composition:\n * ```\n * Toast.Root\n * ├── Toast.Icon\n * ├── Toast.Message\n * └── Toast.Action\n * ```\n *\n * @example\n * ```tsx\n * makeToast(\n *   <Toast.Root priority=\"success\">\n *     <Toast.Icon />\n *     <Toast.Message>Operation completed successfully!</Toast.Message>\n *     <Toast.Action>Dismiss</Toast.Action>\n *   </Toast.Root>\n * );\n * ```\n */\nconst Toast = {\n\t/**\n\t * A succinct message with a priority that is displayed temporarily.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#toastroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"success\">\n\t *   <Toast.Icon />\n\t *   <Toast.Message>Changes saved successfully!</Toast.Message>\n\t *   <Toast.Action>Undo</Toast.Action>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A button that dismisses the toast when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#toastaction\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"info\">\n\t *   <Toast.Icon />\n\t *   <Toast.Message>File uploaded successfully</Toast.Message>\n\t *   <Toast.Action>View File</Toast.Action>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tAction,\n\t/**\n\t * An icon that visually represents the priority of the toast.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#toasticon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"warning\">\n\t *   <Toast.Icon />\n\t *   <Toast.Message>Warning message</Toast.Message>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The message content of the toast.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#toastmessage\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"success\">\n\t *   <Toast.Icon />\n\t *   <Toast.Message>Your changes have been saved</Toast.Message>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tMessage,\n} as const;\n\nexport {\n\t//,\n\tmakeToast,\n\tToast,\n\tToaster,\n};\n\nexport type {\n\t//,\n\tPriority,\n};\n\n/**\n * @private\n *\n * Allows any mantle floating prompt (e.g. toasts and notifications) to be interacted with\n * even when a modaled view (e.g. dialog, sheet, etc) is open and a focus trap is active.\n *\n * Without this, interacting with the prompt would close the modaled view.\n *\n * @example\n * ```tsx\n * <Dialog.Root onInteractOutside={preventCloseOnPromptInteraction}>\n *   <Dialog.Content>\n *     <p>Dialog content</p>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nexport function preventCloseOnPromptInteraction(\n\tevent: CustomEvent | PointerEvent | MouseEvent | TouchEvent | FocusEvent,\n) {\n\tif (!(event.target instanceof Element)) {\n\t\treturn;\n\t}\n\n\tif (event.target.closest(\".overlay-prompt\")) {\n\t\tevent.preventDefault();\n\t}\n}\n\nconst priorityBackgroundColor = {\n\tinfo: \"bg-accent-600\",\n\twarning: \"bg-warning-600\",\n\tsuccess: \"bg-success-600\",\n\tdanger: \"bg-danger-600\",\n} as const satisfies Record<Priority, string>;\n\ntype PriorityBarAccentProps = Omit<ComponentProps<\"div\">, \"children\"> & {\n\tpriority: Priority;\n};\n\n/**\n * @private\n *\n * A colored bar that visually represents the priority of the toast.\n */\nfunction PriorityBarAccent({ className, priority, ...props }: PriorityBarAccentProps) {\n\treturn (\n\t\t<div\n\t\t\taria-hidden\n\t\t\tclassName={cx(\n\t\t\t\t//\n\t\t\t\t\"z-1 absolute -inset-px right-auto w-1.5 rounded-l\",\n\t\t\t\tpriorityBackgroundColor[priority],\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":"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"}

package/dist/toast.d.ts

@@ -1,6 +1,6 @@
-import { t as WithAsChild } from "./as-child-CJ2vTesV.js";
-import { t as WithStyleProps } from "./with-style-props-Dlz3G1tS.js";
-import { n as SvgOnlyProps } from "./svg-only-B-xzpaiu.js";
+import { t as WithAsChild } from "./as-child-DQHfEmYB.js";
+import { t as WithStyleProps } from "./with-style-props-3iFrBR08.js";
+import { n as SvgOnlyProps } from "./svg-only-BtBvFy-N.js";
 import * as _$react from "react";
 import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";

package/dist/toast.js

@@ -1 +1 @@
-import{n as e,r as t,t as n}from"./toast-BhAyUXKL.js";export{n as Toast,e as Toaster,t as makeToast};
+import{n as e,r as t,t as n}from"./toast-CGnquSKO.js";export{n as Toast,e as Toaster,t as makeToast};

package/dist/tooltip.d.ts

@@ -74,10 +74,17 @@ declare namespace Trigger {
 }
 /**
  * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
- * This is the root, stateful component that manages the open/closed state of the tooltip.
- * Will throw if you have not wrapped your app in a `TooltipProvider`.
+ * Wrapping your app in a `TooltipProvider` is recommended to share global tooltip behavior (delay, hover settings) across your application.
+ *
+ * Use a `Tooltip` for short, non-interactive labels — for example, to clarify
+ * the purpose of an icon-only button. Per the WAI-ARIA tooltip pattern,
+ * tooltips never receive focus, so interactive content inside them is
+ * unreachable for keyboard users. Prefer `Popover` when the floating content
+ * must be interactive, or `HoverCard` for a sighted-only preview of content
+ * that already lives behind a link.
  *
  * @see https://mantle.ngrok.com/components/tooltip
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
  *
  * @example
  * Composition:

package/dist/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":[],"sources":["../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { forwardRef } from \"react\";\nimport type { ComponentProps, ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * Wraps your app to provide global functionality to your tooltips.\n * Only one instance of this component should be rendered in your app, preferably at the root.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltipprovider\n *\n * @example\n * ```tsx\n * <TooltipProvider>\n *   <App />\n * </TooltipProvider>\n * ```\n */\nconst TooltipProvider = ({\n\tdelayDuration = 0,\n\t...props\n}: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => (\n\t<TooltipPrimitive.Provider\n\t\tdata-slot=\"tooltip-provider\"\n\t\tdelayDuration={delayDuration ?? 0}\n\t\t{...props}\n\t/>\n);\nTooltipProvider.displayName = \"Tooltip.Provider\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n * This is the root, stateful component that manages the open/closed state of the tooltip.\n * Will throw if you have not wrapped your app in a `TooltipProvider`.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltiproot\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Root(props: ComponentProps<typeof TooltipPrimitive.Root>) {\n\treturn <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\n}\nRoot.displayName = \"Tooltip.Root\";\n\n/**\n * The trigger button that opens the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltiptrigger\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Trigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>) {\n\treturn <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\nTrigger.displayName = \"Tooltip.Trigger\";\n\n/**\n * The content to render inside the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltipcontent\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof TooltipPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ children, className, sideOffset = 4, ...props }, ref) => (\n\t<TooltipPrimitive.Portal>\n\t\t<TooltipPrimitive.Content\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-tooltip text-tooltip animate-in fade-in-0 zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 z-50 max-w-72 overflow-visible wrap-break-word rounded-md px-3 py-1.5 text-sm font-sans shadow\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-slot=\"tooltip-content\"\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<TooltipPrimitive.Arrow asChild>\n\t\t\t\t<div className=\"bg-tooltip z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs\" />\n\t\t\t</TooltipPrimitive.Arrow>\n\t\t</TooltipPrimitive.Content>\n\t</TooltipPrimitive.Portal>\n));\nContent.displayName = \"Tooltip.Content\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n * This is the root, stateful component that manages the open/closed state of the tooltip.\n * Will throw if you have not wrapped your app in a `TooltipProvider`.\n *\n * @see https://mantle.ngrok.com/components/tooltip\n *\n * @example\n * Composition:\n * ```\n * Tooltip.Root\n * ├── Tooltip.Trigger\n * └── Tooltip.Content\n * ```\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Tooltip = {\n\t/**\n\t * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n\t * This is the root, stateful component that manages the open/closed state of the tooltip.\n\t * Will throw if you have not wrapped your app in a `TooltipProvider`.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltiproot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The content to render inside the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltipcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltiptrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tTooltip,\n\tTooltipProvider,\n};\n"],"mappings":"oKAkBA,MAAM,GAAmB,CACxB,gBAAgB,EAChB,GAAG,KAEH,EAAC,EAAiB,SAAlB,CACC,YAAU,mBACV,cAAe,GAAiB,EAChC,GAAI,EACH,CAAA,CAEH,EAAgB,YAAc,mBAuB9B,SAAS,EAAK,EAAqD,CAClE,OAAO,EAAC,EAAiB,KAAlB,CAAuB,YAAU,UAAU,GAAI,EAAS,CAAA,CAEhE,EAAK,YAAc,eAqBnB,SAAS,EAAQ,EAAwD,CACxE,OAAO,EAAC,EAAiB,QAAlB,CAA0B,YAAU,kBAAkB,GAAI,EAAS,CAAA,CAE3E,EAAQ,YAAc,kBAqBtB,MAAM,EAAU,GAGb,CAAE,WAAU,YAAW,aAAa,EAAG,GAAG,GAAS,IACrD,EAAC,EAAiB,OAAlB,CAAA,SACC,EAAC,EAAiB,QAAlB,CACC,UAAW,EACV,sYACA,EACA,CACD,YAAU,kBACL,MACO,aACZ,GAAI,WARL,CAUE,EACD,EAAC,EAAiB,MAAlB,CAAwB,QAAA,YACvB,EAAC,MAAD,CAAK,UAAU,6EAA+E,CAAA,CACtE,CAAA,CACC,GACF,CAAA,CACzB,CACF,EAAQ,YAAc,kBA+BtB,MAAM,EAAU,CAsBf,OAoBA,UAoBA,UACA"}
+{"version":3,"file":"tooltip.js","names":[],"sources":["../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { forwardRef } from \"react\";\nimport type { ComponentProps, ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * Wraps your app to provide global functionality to your tooltips.\n * Only one instance of this component should be rendered in your app, preferably at the root.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltipprovider\n *\n * @example\n * ```tsx\n * <TooltipProvider>\n *   <App />\n * </TooltipProvider>\n * ```\n */\nconst TooltipProvider = ({\n\tdelayDuration = 0,\n\t...props\n}: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => (\n\t<TooltipPrimitive.Provider\n\t\tdata-slot=\"tooltip-provider\"\n\t\tdelayDuration={delayDuration ?? 0}\n\t\t{...props}\n\t/>\n);\nTooltipProvider.displayName = \"Tooltip.Provider\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n * This is the root, stateful component that manages the open/closed state of the tooltip.\n * Will throw if you have not wrapped your app in a `TooltipProvider`.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltiproot\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Root(props: ComponentProps<typeof TooltipPrimitive.Root>) {\n\treturn <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\n}\nRoot.displayName = \"Tooltip.Root\";\n\n/**\n * The trigger button that opens the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltiptrigger\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Trigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>) {\n\treturn <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\nTrigger.displayName = \"Tooltip.Trigger\";\n\n/**\n * The content to render inside the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltipcontent\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof TooltipPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ children, className, sideOffset = 4, ...props }, ref) => (\n\t<TooltipPrimitive.Portal>\n\t\t<TooltipPrimitive.Content\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-tooltip text-tooltip animate-in fade-in-0 zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 z-50 max-w-72 overflow-visible wrap-break-word rounded-md px-3 py-1.5 text-sm font-sans shadow\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-slot=\"tooltip-content\"\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<TooltipPrimitive.Arrow asChild>\n\t\t\t\t<div className=\"bg-tooltip z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs\" />\n\t\t\t</TooltipPrimitive.Arrow>\n\t\t</TooltipPrimitive.Content>\n\t</TooltipPrimitive.Portal>\n));\nContent.displayName = \"Tooltip.Content\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n * Wrapping your app in a `TooltipProvider` is recommended to share global tooltip behavior (delay, hover settings) across your application.\n *\n * Use a `Tooltip` for short, non-interactive labels — for example, to clarify\n * the purpose of an icon-only button. Per the WAI-ARIA tooltip pattern,\n * tooltips never receive focus, so interactive content inside them is\n * unreachable for keyboard users. Prefer `Popover` when the floating content\n * must be interactive, or `HoverCard` for a sighted-only preview of content\n * that already lives behind a link.\n *\n * @see https://mantle.ngrok.com/components/tooltip\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n *\n * @example\n * Composition:\n * ```\n * Tooltip.Root\n * ├── Tooltip.Trigger\n * └── Tooltip.Content\n * ```\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Tooltip = {\n\t/**\n\t * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n\t * This is the root, stateful component that manages the open/closed state of the tooltip.\n\t * Will throw if you have not wrapped your app in a `TooltipProvider`.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltiproot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The content to render inside the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltipcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltiptrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tTooltip,\n\tTooltipProvider,\n};\n"],"mappings":"oKAkBA,MAAM,GAAmB,CACxB,gBAAgB,EAChB,GAAG,KAEH,EAAC,EAAiB,SAAlB,CACC,YAAU,mBACV,cAAe,GAAiB,EAChC,GAAI,EACH,CAAA,CAEH,EAAgB,YAAc,mBAuB9B,SAAS,EAAK,EAAqD,CAClE,OAAO,EAAC,EAAiB,KAAlB,CAAuB,YAAU,UAAU,GAAI,EAAS,CAAA,CAEhE,EAAK,YAAc,eAqBnB,SAAS,EAAQ,EAAwD,CACxE,OAAO,EAAC,EAAiB,QAAlB,CAA0B,YAAU,kBAAkB,GAAI,EAAS,CAAA,CAE3E,EAAQ,YAAc,kBAqBtB,MAAM,EAAU,GAGb,CAAE,WAAU,YAAW,aAAa,EAAG,GAAG,GAAS,IACrD,EAAC,EAAiB,OAAlB,CAAA,SACC,EAAC,EAAiB,QAAlB,CACC,UAAW,EACV,sYACA,EACA,CACD,YAAU,kBACL,MACO,aACZ,GAAI,WARL,CAUE,EACD,EAAC,EAAiB,MAAlB,CAAwB,QAAA,YACvB,EAAC,MAAD,CAAK,UAAU,6EAA+E,CAAA,CACtE,CAAA,CACC,GACF,CAAA,CACzB,CACF,EAAQ,YAAc,kBAsCtB,MAAM,EAAU,CAsBf,OAoBA,UAoBA,UACA"}

package/dist/{traffic-policy-file-ChsoQtXQ.js → traffic-policy-file-C6LHYrIU.js}

@@ -1,2 +1,2 @@
 import{jsx as e,jsxs as t}from"react/jsx-runtime";function n(n){return t(`svg`,{fill:`currentColor`,height:`1em`,viewBox:`0 0 256 256`,width:`1em`,...n,children:[e(`path`,{fill:`none`,d:`M0 0h256v256H0z`}),e(`path`,{d:`m213.7 82.3-56-56c-1.5-1.5-3.5-2.3-5.7-2.3H56c-8.8 0-16 7.2-16 16v88c0 4.4 3.6 8 8 8s8-3.6 8-8V40h88v48c0 4.4 3.6 8 8 8h48v120h-40c-4.4 0-8 3.6-8 8s3.6 8 8 8h40c8.8 0 16-7.2 16-16V88c0-2.1-.8-4.2-2.3-5.7zm-53.7-31L188.7 80H160V51.3z`}),e(`path`,{d:`M124.6 194.5h-6.8v-27.3h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4h-6.8v-10.2c0-3.8-3.1-6.8-6.8-6.8H63.3c-3.8 0-6.8 3.1-6.8 6.8v10.2h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v27.3h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v23.9c0 3.8 3.1 6.8 6.8 6.8H111c3.8 0 6.8-3.1 6.8-6.8v-23.9h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4zm-37.5-11.9c-6.6 0-11.9-5.3-11.9-11.9s5.3-11.9 11.9-11.9S99 164.1 99 170.7s-5.3 11.9-11.9 11.9zm0 10.2c6.6 0 11.9 5.3 11.9 11.9s-5.3 11.9-11.9 11.9-11.9-5.3-11.9-11.9 5.3-11.9 11.9-11.9z`})]})}n.displayName=`TrafficPolicyFileIcon`;export{n as t};
-//# sourceMappingURL=traffic-policy-file-ChsoQtXQ.js.map
+//# sourceMappingURL=traffic-policy-file-C6LHYrIU.js.map

package/dist/{traffic-policy-file-ChsoQtXQ.js.map → traffic-policy-file-C6LHYrIU.js.map}

@@ -1 +1 @@
-{"version":3,"file":"traffic-policy-file-ChsoQtXQ.js","names":[],"sources":["../src/components/icons/traffic-policy-file.tsx"],"sourcesContent":["import type { SvgAttributes } from \"../icon/types.js\";\n\n/**\n * An icon representing a traffic policy file.\n */\nfunction TrafficPolicyFileIcon(props: SvgAttributes) {\n\treturn (\n\t\t<svg fill=\"currentColor\" height=\"1em\" viewBox=\"0 0 256 256\" width=\"1em\" {...props}>\n\t\t\t<path fill=\"none\" d=\"M0 0h256v256H0z\" />\n\t\t\t<path d=\"m213.7 82.3-56-56c-1.5-1.5-3.5-2.3-5.7-2.3H56c-8.8 0-16 7.2-16 16v88c0 4.4 3.6 8 8 8s8-3.6 8-8V40h88v48c0 4.4 3.6 8 8 8h48v120h-40c-4.4 0-8 3.6-8 8s3.6 8 8 8h40c8.8 0 16-7.2 16-16V88c0-2.1-.8-4.2-2.3-5.7zm-53.7-31L188.7 80H160V51.3z\" />\n\t\t\t<path d=\"M124.6 194.5h-6.8v-27.3h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4h-6.8v-10.2c0-3.8-3.1-6.8-6.8-6.8H63.3c-3.8 0-6.8 3.1-6.8 6.8v10.2h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v27.3h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v23.9c0 3.8 3.1 6.8 6.8 6.8H111c3.8 0 6.8-3.1 6.8-6.8v-23.9h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4zm-37.5-11.9c-6.6 0-11.9-5.3-11.9-11.9s5.3-11.9 11.9-11.9S99 164.1 99 170.7s-5.3 11.9-11.9 11.9zm0 10.2c6.6 0 11.9 5.3 11.9 11.9s-5.3 11.9-11.9 11.9-11.9-5.3-11.9-11.9 5.3-11.9 11.9-11.9z\" />\n\t\t</svg>\n\t);\n}\nTrafficPolicyFileIcon.displayName = \"TrafficPolicyFileIcon\";\n\nexport {\n\t//,\n\tTrafficPolicyFileIcon,\n};\n"],"mappings":"kDAKA,SAAS,EAAsB,EAAsB,CACpD,OACC,EAAC,MAAD,CAAK,KAAK,eAAe,OAAO,MAAM,QAAQ,cAAc,MAAM,MAAM,GAAI,WAA5E,CACC,EAAC,OAAD,CAAM,KAAK,OAAO,EAAE,kBAAoB,CAAA,CACxC,EAAC,OAAD,CAAM,EAAE,2OAA6O,CAAA,CACrP,EAAC,OAAD,CAAM,EAAE,6gBAA+gB,CAAA,CAClhB,GAGR,EAAsB,YAAc"}
+{"version":3,"file":"traffic-policy-file-C6LHYrIU.js","names":[],"sources":["../src/components/icons/traffic-policy-file.tsx"],"sourcesContent":["import type { SvgAttributes } from \"../icon/types.js\";\n\n/**\n * An icon representing a traffic policy file.\n */\nfunction TrafficPolicyFileIcon(props: SvgAttributes) {\n\treturn (\n\t\t<svg fill=\"currentColor\" height=\"1em\" viewBox=\"0 0 256 256\" width=\"1em\" {...props}>\n\t\t\t<path fill=\"none\" d=\"M0 0h256v256H0z\" />\n\t\t\t<path d=\"m213.7 82.3-56-56c-1.5-1.5-3.5-2.3-5.7-2.3H56c-8.8 0-16 7.2-16 16v88c0 4.4 3.6 8 8 8s8-3.6 8-8V40h88v48c0 4.4 3.6 8 8 8h48v120h-40c-4.4 0-8 3.6-8 8s3.6 8 8 8h40c8.8 0 16-7.2 16-16V88c0-2.1-.8-4.2-2.3-5.7zm-53.7-31L188.7 80H160V51.3z\" />\n\t\t\t<path d=\"M124.6 194.5h-6.8v-27.3h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4h-6.8v-10.2c0-3.8-3.1-6.8-6.8-6.8H63.3c-3.8 0-6.8 3.1-6.8 6.8v10.2h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v27.3h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v23.9c0 3.8 3.1 6.8 6.8 6.8H111c3.8 0 6.8-3.1 6.8-6.8v-23.9h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4zm-37.5-11.9c-6.6 0-11.9-5.3-11.9-11.9s5.3-11.9 11.9-11.9S99 164.1 99 170.7s-5.3 11.9-11.9 11.9zm0 10.2c6.6 0 11.9 5.3 11.9 11.9s-5.3 11.9-11.9 11.9-11.9-5.3-11.9-11.9 5.3-11.9 11.9-11.9z\" />\n\t\t</svg>\n\t);\n}\nTrafficPolicyFileIcon.displayName = \"TrafficPolicyFileIcon\";\n\nexport {\n\t//,\n\tTrafficPolicyFileIcon,\n};\n"],"mappings":"kDAKA,SAAS,EAAsB,EAAsB,CACpD,OACC,EAAC,MAAD,CAAK,KAAK,eAAe,OAAO,MAAM,QAAQ,cAAc,MAAM,MAAM,GAAI,WAA5E,CACC,EAAC,OAAD,CAAM,KAAK,OAAO,EAAE,kBAAoB,CAAA,CACxC,EAAC,OAAD,CAAM,EAAE,2OAA6O,CAAA,CACrP,EAAC,OAAD,CAAM,EAAE,6gBAA+gB,CAAA,CAClhB,GAGR,EAAsB,YAAc"}

package/dist/{types-BeTbgoJd.d.ts → types-DG0WQLTL.d.ts}

@@ -75,4 +75,4 @@ type WithValidation = {
 };
 //#endregion
 export { WithInputType as a, WithAutoComplete as i, InputType as n, WithValidation as o, Validation as r, AutoComplete as t };
-//# sourceMappingURL=types-BeTbgoJd.d.ts.map
+//# sourceMappingURL=types-DG0WQLTL.d.ts.map

package/dist/types-DoV0R5Ja.d.ts

@@ -0,0 +1,30 @@
+import { ComponentProps } from "react";
+
+//#region src/components/icon/types.d.ts
+/**
+ * Props accepted by SVG-rendering primitives in mantle (`Icon`, `SvgOnly`, and
+ * icon-bearing parts of other components). Extends the standard React `<svg>`
+ * props with:
+ *
+ * - `focusable` narrowed to the string literals `"true"` / `"false"`, matching
+ *   the SVG spec (React's default typing allows `boolean`, which serializes
+ *   inconsistently across browsers for this attribute).
+ * - `data-slot`, so these primitives can carry mantle's standard
+ *   `data-slot="<name>"` styling hook alongside other consumer-supplied props.
+ */
+type SvgAttributes = ComponentProps<"svg"> & {
+  /**
+   * Whether the SVG can receive keyboard focus. Use the string form
+   * (`"true"` / `"false"`) — the SVG attribute is serialized as a string and
+   * React's boolean form can produce inconsistent output.
+   */
+  focusable?: "true" | "false";
+  /**
+   * Stable styling hook used by mantle to identify this element in the DOM
+   * (e.g. `data-slot="icon"`). Consumers can override it via props spread.
+   */
+  "data-slot"?: string;
+};
+//#endregion
+export { SvgAttributes as t };
+//# sourceMappingURL=types-DoV0R5Ja.d.ts.map

package/dist/types.d.ts

@@ -1,6 +1,6 @@
-import { t as DeepNonNullable } from "./deep-non-nullable-DwBZzk4x.js";
-import { t as WithAsChild } from "./as-child-CJ2vTesV.js";
-import { i as parseBooleanish, n as CssProperties, r as Booleanish, t as $cssProperties } from "./index-vOSpS5jv.js";
-import { t as WithStyleProps } from "./with-style-props-Dlz3G1tS.js";
-import { t as VariantProps } from "./variant-props-DszdagRm.js";
+import { t as DeepNonNullable } from "./deep-non-nullable-VFm1T3JZ.js";
+import { t as WithAsChild } from "./as-child-DQHfEmYB.js";
+import { i as parseBooleanish, n as CssProperties, r as Booleanish, t as $cssProperties } from "./index-rtz7SwEq.js";
+import { t as WithStyleProps } from "./with-style-props-3iFrBR08.js";
+import { t as VariantProps } from "./variant-props-DUmSIQK8.js";
 export { $cssProperties, Booleanish, CssProperties, DeepNonNullable, VariantProps, WithAsChild, WithStyleProps, parseBooleanish };

package/dist/use-copy-to-clipboard-C7vsjJe-.js

@@ -0,0 +1,2 @@
+import{t as e}from"./copy-to-clipboard-DjOD_Mwb.js";function t(){return e}export{t};
+//# sourceMappingURL=use-copy-to-clipboard-C7vsjJe-.js.map

package/dist/use-copy-to-clipboard-C7vsjJe-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-copy-to-clipboard-C7vsjJe-.js","names":[],"sources":["../src/hooks/use-copy-to-clipboard.tsx"],"sourcesContent":["import { copyToClipboard } from \"../utils/copy-to-clipboard.js\";\n\n/**\n * A hook that returns an async function to copy a string to the clipboard.\n *\n * `await` the returned function to know whether the write succeeded. It\n * throws when both the Clipboard API and the `execCommand` polyfill fail.\n *\n * Inspired by: https://usehooks.com/usecopytoclipboard\n */\nfunction useCopyToClipboard() {\n\treturn copyToClipboard;\n}\n\nexport { useCopyToClipboard };\n"],"mappings":"oDAUA,SAAS,GAAqB,CAC7B,OAAO"}

package/dist/{use-prefers-reduced-motion-BcwST13S.js → use-prefers-reduced-motion-aXfsyo-k.js}

@@ -1,2 +1,2 @@
 import{n as e}from"./browser-only-QPyyfLaB.js";import{useEffect as t,useState as n}from"react";const r=`(prefers-reduced-motion: no-preference)`;function i(){return e()?!window.matchMedia(r).matches:!0}function a(){let[e,a]=n(!0);return t(()=>{let e=window.matchMedia(r);a(i());function t(e){a(!e.matches)}return e.addEventListener(`change`,t),()=>{e.removeEventListener(`change`,t)}},[]),e}export{a as n,i as t};
-//# sourceMappingURL=use-prefers-reduced-motion-BcwST13S.js.map
+//# sourceMappingURL=use-prefers-reduced-motion-aXfsyo-k.js.map

package/dist/{use-prefers-reduced-motion-BcwST13S.js.map → use-prefers-reduced-motion-aXfsyo-k.js.map}

@@ -1 +1 @@
-{"version":3,"file":"use-prefers-reduced-motion-BcwST13S.js","names":[],"sources":["../src/hooks/use-prefers-reduced-motion.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { canUseDOM } from \"../components/browser-only/browser-only.js\";\n\n/**\n * no-preference is the default value for the prefers-reduced-motion media query.\n * Users who have never fiddled with their a11y settings will still see animations\n * (no explicit opt-in required from a user's perspective)\n */\nconst query = \"(prefers-reduced-motion: no-preference)\";\n\n/**\n * Imperatively reads the current `prefers-reduced-motion` preference.\n * Useful in event handlers and plain functions where a hook cannot be called.\n *\n * Returns `true` when the user has opted out of animations.\n *\n * @remarks\n * Returns `true` (reduce motion) when called outside a browser environment (SSR),\n * matching the conservative default of {@link usePrefersReducedMotion}.\n */\nexport function getPrefersReducedMotion(): boolean {\n\tif (!canUseDOM()) {\n\t\treturn true;\n\t}\n\treturn !window.matchMedia(query).matches;\n}\n\n/**\n * Returns `true` when the user has opted out of animations (i.e., prefers reduced motion).\n *\n * Implementation notes:\n * - Uses the `(prefers-reduced-motion: no-preference)` media query and inverts it.\n *   This keeps the “default” mental model explicit: if the system hasn’t opted out,\n *   animations are allowed.\n * - Defaults to `true` (reduce motion) on the server/during SSR to avoid animating\n *   before hydration. The initial client effect reads the *real* preference and updates state.\n *\n * @example\n * // Conditionally shorten or skip transitions\n * const reduce = usePrefersReducedMotion();\n * const duration = reduce ? 0 : 200;\n *\n * @remarks\n * If you need to support very old browsers that lack `MediaQueryList.addEventListener`,\n * consider falling back to `addListener/removeListener`.\n */\nexport function usePrefersReducedMotion(): boolean {\n\t// Default to no animations on SSR/first paint; update on mount with the real value.\n\tconst [prefersReducedMotion, setPrefersReducedMotion] = useState(true);\n\n\tuseEffect(() => {\n\t\tconst mediaQueryList = window.matchMedia(query);\n\n\t\t// set the _real_ initial value now that we're on the client\n\t\tsetPrefersReducedMotion(getPrefersReducedMotion());\n\n\t\t// register for updates\n\t\tfunction listener(event: MediaQueryListEvent) {\n\t\t\tsetPrefersReducedMotion(!event.matches);\n\t\t}\n\n\t\tmediaQueryList.addEventListener(\"change\", listener);\n\n\t\treturn () => {\n\t\t\tmediaQueryList.removeEventListener(\"change\", listener);\n\t\t};\n\t}, []);\n\n\treturn prefersReducedMotion;\n}\n"],"mappings":"+FAQA,MAAM,EAAQ,0CAYd,SAAgB,GAAmC,CAIlD,OAHK,GAAW,CAGT,CAAC,OAAO,WAAW,EAAM,CAAC,QAFzB,GAwBT,SAAgB,GAAmC,CAElD,GAAM,CAAC,EAAsB,GAA2B,EAAS,GAAK,CAoBtE,OAlBA,MAAgB,CACf,IAAM,EAAiB,OAAO,WAAW,EAAM,CAG/C,EAAwB,GAAyB,CAAC,CAGlD,SAAS,EAAS,EAA4B,CAC7C,EAAwB,CAAC,EAAM,QAAQ,CAKxC,OAFA,EAAe,iBAAiB,SAAU,EAAS,KAEtC,CACZ,EAAe,oBAAoB,SAAU,EAAS,GAErD,EAAE,CAAC,CAEC"}
+{"version":3,"file":"use-prefers-reduced-motion-aXfsyo-k.js","names":[],"sources":["../src/hooks/use-prefers-reduced-motion.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { canUseDOM } from \"../components/browser-only/browser-only.js\";\n\n/**\n * no-preference is the default value for the prefers-reduced-motion media query.\n * Users who have never fiddled with their a11y settings will still see animations\n * (no explicit opt-in required from a user's perspective)\n */\nconst query = \"(prefers-reduced-motion: no-preference)\";\n\n/**\n * Imperatively reads the current `prefers-reduced-motion` preference.\n * Useful in event handlers and plain functions where a hook cannot be called.\n *\n * Returns `true` when the user has opted out of animations.\n *\n * @remarks\n * Returns `true` (reduce motion) when called outside a browser environment (SSR),\n * matching the conservative default of {@link usePrefersReducedMotion}.\n */\nexport function getPrefersReducedMotion(): boolean {\n\tif (!canUseDOM()) {\n\t\treturn true;\n\t}\n\treturn !window.matchMedia(query).matches;\n}\n\n/**\n * Returns `true` when the user has opted out of animations (i.e., prefers reduced motion).\n *\n * Implementation notes:\n * - Uses the `(prefers-reduced-motion: no-preference)` media query and inverts it.\n *   This keeps the “default” mental model explicit: if the system hasn’t opted out,\n *   animations are allowed.\n * - Defaults to `true` (reduce motion) on the server/during SSR to avoid animating\n *   before hydration. The initial client effect reads the *real* preference and updates state.\n *\n * @example\n * // Conditionally shorten or skip transitions\n * const reduce = usePrefersReducedMotion();\n * const duration = reduce ? 0 : 200;\n *\n * @remarks\n * If you need to support very old browsers that lack `MediaQueryList.addEventListener`,\n * consider falling back to `addListener/removeListener`.\n */\nexport function usePrefersReducedMotion(): boolean {\n\t// Default to no animations on SSR/first paint; update on mount with the real value.\n\tconst [prefersReducedMotion, setPrefersReducedMotion] = useState(true);\n\n\tuseEffect(() => {\n\t\tconst mediaQueryList = window.matchMedia(query);\n\n\t\t// set the _real_ initial value now that we're on the client\n\t\tsetPrefersReducedMotion(getPrefersReducedMotion());\n\n\t\t// register for updates\n\t\tfunction listener(event: MediaQueryListEvent) {\n\t\t\tsetPrefersReducedMotion(!event.matches);\n\t\t}\n\n\t\tmediaQueryList.addEventListener(\"change\", listener);\n\n\t\treturn () => {\n\t\t\tmediaQueryList.removeEventListener(\"change\", listener);\n\t\t};\n\t}, []);\n\n\treturn prefersReducedMotion;\n}\n"],"mappings":"+FAQA,MAAM,EAAQ,0CAYd,SAAgB,GAAmC,CAIlD,OAHK,GAAW,CAGT,CAAC,OAAO,WAAW,EAAM,CAAC,QAFzB,GAwBT,SAAgB,GAAmC,CAElD,GAAM,CAAC,EAAsB,GAA2B,EAAS,GAAK,CAoBtE,OAlBA,MAAgB,CACf,IAAM,EAAiB,OAAO,WAAW,EAAM,CAG/C,EAAwB,GAAyB,CAAC,CAGlD,SAAS,EAAS,EAA4B,CAC7C,EAAwB,CAAC,EAAM,QAAQ,CAKxC,OAFA,EAAe,iBAAiB,SAAU,EAAS,KAEtC,CACZ,EAAe,oBAAoB,SAAU,EAAS,GAErD,EAAE,CAAC,CAEC"}

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
-import { _ as timeSortingDirections, a as AlphanumericSortingDirection, c as TimeSortingDirection, d as isSortingDirection, f as isSortingMode, g as timeSortingByDirection, h as sortingModes, i as $timeSortingDirection, l as alphanumericSortingDirections, m as sortingDirections, n as $sortingDirection, o as SortingDirection, p as isTimeSortingDirection, r as $sortingMode, s as SortingMode, t as $alphanumericSortingDirection, u as isAlphanumericSortingDirection } from "./direction-Jk7BkzGo.js";
-import { a as composeRefs, i as inView, n as MarginType, r as ViewChangeHandler, t as InViewOptions } from "./in-view-DsiWfQpY.js";
+import { _ as timeSortingDirections, a as AlphanumericSortingDirection, c as TimeSortingDirection, d as isSortingDirection, f as isSortingMode, g as timeSortingByDirection, h as sortingModes, i as $timeSortingDirection, l as alphanumericSortingDirections, m as sortingDirections, n as $sortingDirection, o as SortingDirection, p as isTimeSortingDirection, r as $sortingMode, s as SortingMode, t as $alphanumericSortingDirection, u as isAlphanumericSortingDirection } from "./direction-DtBAQn7p.js";
+import { a as composeRefs, i as inView, n as MarginType, r as ViewChangeHandler, s as copyToClipboard, t as InViewOptions } from "./in-view-Da08Bx6l.js";
 
 //#region src/utils/sorting/compare.d.ts
 /**
@@ -17,5 +17,5 @@ declare function compareDatesNewestToOldest(a: Date, b: Date): number;
  */
 declare function compareDatesOldestToNewest(a: Date, b: Date): number;
 //#endregion
-export { $alphanumericSortingDirection, $sortingDirection, $sortingMode, $timeSortingDirection, type AlphanumericSortingDirection, type InViewOptions, type MarginType, type SortingDirection, type SortingMode, type TimeSortingDirection, type ViewChangeHandler, alphanumericSortingDirections, compareDatesNewestToOldest, compareDatesOldestToNewest, composeRefs, inView, isAlphanumericSortingDirection, isSortingDirection, isSortingMode, isTimeSortingDirection, sortingDirections, sortingModes, timeSortingByDirection, timeSortingDirections };
+export { $alphanumericSortingDirection, $sortingDirection, $sortingMode, $timeSortingDirection, type AlphanumericSortingDirection, type InViewOptions, type MarginType, type SortingDirection, type SortingMode, type TimeSortingDirection, type ViewChangeHandler, alphanumericSortingDirections, compareDatesNewestToOldest, compareDatesOldestToNewest, composeRefs, copyToClipboard, inView, isAlphanumericSortingDirection, isSortingDirection, isSortingMode, isTimeSortingDirection, sortingDirections, sortingModes, timeSortingByDirection, timeSortingDirections };
 //# sourceMappingURL=utils.d.ts.map

package/dist/utils.js

@@ -1,2 +1,2 @@
-import{t as e}from"./compose-refs-DFIaEnQH.js";import{a as t,c as n,d as r,f as i,i as a,l as o,n as s,o as c,p as l,r as u,s as d,t as f,u as p}from"./direction-ClCocWIf.js";import{t as m}from"./in-view-BXzPPdcl.js";function h(e,t){return Math.sign(t.getTime()-e.getTime())}function g(e,t){return Math.sign(e.getTime()-t.getTime())}export{f as $alphanumericSortingDirection,s as $sortingDirection,u as $sortingMode,a as $timeSortingDirection,t as alphanumericSortingDirections,h as compareDatesNewestToOldest,g as compareDatesOldestToNewest,e as composeRefs,m as inView,c as isAlphanumericSortingDirection,d as isSortingDirection,n as isSortingMode,o as isTimeSortingDirection,p as sortingDirections,r as sortingModes,i as timeSortingByDirection,l as timeSortingDirections};
+import{t as e}from"./compose-refs-DZ3cPi47.js";import{t}from"./copy-to-clipboard-DjOD_Mwb.js";import{a as n,c as r,d as i,f as a,i as o,l as s,n as c,o as l,p as u,r as d,s as f,t as p,u as m}from"./direction-DsB-pD9V.js";import{t as h}from"./in-view-pia_SVdE.js";function g(e,t){return Math.sign(t.getTime()-e.getTime())}function _(e,t){return Math.sign(e.getTime()-t.getTime())}export{p as $alphanumericSortingDirection,c as $sortingDirection,d as $sortingMode,o as $timeSortingDirection,n as alphanumericSortingDirections,g as compareDatesNewestToOldest,_ as compareDatesOldestToNewest,e as composeRefs,t as copyToClipboard,h as inView,l as isAlphanumericSortingDirection,f as isSortingDirection,r as isSortingMode,s as isTimeSortingDirection,m as sortingDirections,i as sortingModes,a as timeSortingByDirection,u as timeSortingDirections};
 //# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../src/utils/sorting/compare.ts"],"sourcesContent":["/**\n * Compare dates in newest-to-oldest (descending) order.\n * Used for chronological sorting use cases.\n *\n * @returns A negative number if `b` comes earlier in time than `a`; positive if `b` comes later in time than `a`; 0 if they are equivalent.\n */\nfunction compareDatesNewestToOldest(a: Date, b: Date): number {\n\treturn Math.sign(b.getTime() - a.getTime());\n}\n\n/**\n * Compare dates in oldest-to-newest (ascending) order.\n * Used for chronological sorting use cases.\n *\n * @returns A negative number if `a` comes earlier in time than `b`; positive if `a` comes later in time than `b`; 0 if they are equivalent.\n */\nfunction compareDatesOldestToNewest(a: Date, b: Date): number {\n\treturn Math.sign(a.getTime() - b.getTime());\n}\n\nexport {\n\t//,\n\tcompareDatesNewestToOldest,\n\tcompareDatesOldestToNewest,\n};\n"],"mappings":"yNAMA,SAAS,EAA2B,EAAS,EAAiB,CAC7D,OAAO,KAAK,KAAK,EAAE,SAAS,CAAG,EAAE,SAAS,CAAC,CAS5C,SAAS,EAA2B,EAAS,EAAiB,CAC7D,OAAO,KAAK,KAAK,EAAE,SAAS,CAAG,EAAE,SAAS,CAAC"}
+{"version":3,"file":"utils.js","names":[],"sources":["../src/utils/sorting/compare.ts"],"sourcesContent":["/**\n * Compare dates in newest-to-oldest (descending) order.\n * Used for chronological sorting use cases.\n *\n * @returns A negative number if `b` comes earlier in time than `a`; positive if `b` comes later in time than `a`; 0 if they are equivalent.\n */\nfunction compareDatesNewestToOldest(a: Date, b: Date): number {\n\treturn Math.sign(b.getTime() - a.getTime());\n}\n\n/**\n * Compare dates in oldest-to-newest (ascending) order.\n * Used for chronological sorting use cases.\n *\n * @returns A negative number if `a` comes earlier in time than `b`; positive if `a` comes later in time than `b`; 0 if they are equivalent.\n */\nfunction compareDatesOldestToNewest(a: Date, b: Date): number {\n\treturn Math.sign(a.getTime() - b.getTime());\n}\n\nexport {\n\t//,\n\tcompareDatesNewestToOldest,\n\tcompareDatesOldestToNewest,\n};\n"],"mappings":"wQAMA,SAAS,EAA2B,EAAS,EAAiB,CAC7D,OAAO,KAAK,KAAK,EAAE,SAAS,CAAG,EAAE,SAAS,CAAC,CAS5C,SAAS,EAA2B,EAAS,EAAiB,CAC7D,OAAO,KAAK,KAAK,EAAE,SAAS,CAAG,EAAE,SAAS,CAAC"}

package/dist/{variant-props-DszdagRm.d.ts → variant-props-DUmSIQK8.d.ts}

@@ -1,4 +1,4 @@
-import { t as DeepNonNullable } from "./deep-non-nullable-DwBZzk4x.js";
+import { t as DeepNonNullable } from "./deep-non-nullable-VFm1T3JZ.js";
 import { VariantProps } from "class-variance-authority";
 
 //#region src/types/variant-props.d.ts
@@ -10,4 +10,4 @@ import { VariantProps } from "class-variance-authority";
 type VariantProps$1<Variants extends (props: Record<PropertyKey, unknown> | undefined) => string> = Partial<DeepNonNullable<VariantProps<Variants>>>;
 //#endregion
 export { VariantProps$1 as t };
-//# sourceMappingURL=variant-props-DszdagRm.d.ts.map
+//# sourceMappingURL=variant-props-DUmSIQK8.d.ts.map

package/dist/{with-style-props-Dlz3G1tS.d.ts → with-style-props-3iFrBR08.d.ts}

@@ -26,4 +26,4 @@ type WithStyleProps = {
 };
 //#endregion
 export { WithStyleProps as t };
-//# sourceMappingURL=with-style-props-Dlz3G1tS.d.ts.map
+//# sourceMappingURL=with-style-props-3iFrBR08.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngrok/mantle",
-  "version": "0.70.0",
+  "version": "0.70.2",
   "description": "mantle is ngrok's UI library and design system.",
   "homepage": "https://mantle.ngrok.com",
   "license": "MIT",

package/dist/anchor-BtIZueBA.js

@@ -1,2 +0,0 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-BMH0fD_b.js";import{t as n}from"./slot-D_ZUrdEW.js";import{Children as r,cloneElement as i,forwardRef as a,isValidElement as o}from"react";import s from"tiny-invariant";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";const d=t=>e(`cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent`,t),f=a(({asChild:e,children:a,className:f,rel:m,icon:h,iconPlacement:g=`start`,..._},v)=>{let y=p(m),b={className:d(f),ref:v,rel:y,..._};if(e){let e=r.only(a);s(o(e),"When using `asChild`, Anchor must be passed a single child as a JSX tag.");let d=e.props?.children;return l(n,{...b,children:i(e,{},u(c,{children:[h&&g===`start`&&l(t,{className:`inline-block mr-1.5`,svg:h}),d,h&&g===`end`&&l(t,{className:`inline-block ml-1.5`,svg:h})]}))})}return u(`a`,{...b,children:[h&&g===`start`&&l(t,{className:`inline-block mr-1.5`,svg:h}),a,h&&g===`end`&&l(t,{className:`inline-block ml-1.5`,svg:h})]})});f.displayName=`Anchor`;function p(e){return Array.isArray(e)?[...new Set(e)].map(e=>e?.trim()).filter(Boolean).toSorted().join(` `)||void 0:e?.trim()||void 0}export{d as n,p as r,f as t};
-//# sourceMappingURL=anchor-BtIZueBA.js.map

package/dist/anchor-BtIZueBA.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"anchor-BtIZueBA.js","names":[],"sources":["../src/components/anchor/anchor.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Slot } from \"../slot/index.js\";\nimport type { Rel } from \"./types.js\";\n\n/**\n * The class names for the `Anchor` component which define the styles for the component.\n */\nconst anchorClassNames = (className?: string) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\n/**\n * The props for the `Anchor` component.\n */\ntype AnchorProps = Omit<ComponentProps<\"a\">, \"rel\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * An icon to render inside the anchor\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The side that the icon will render on, if one is present\n\t\t * @default \"start\"\n\t\t */\n\t\ticonPlacement?: \"start\" | \"end\";\n\t\t/**\n\t\t * The rel attribute defines the relationship between a linked resource and the current document.\n\t\t *\n\t\t * Every keyword within a space-separated value should be unique within that value.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel\n\t\t */\n\t\trel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];\n\t};\n\n/**\n * Fundamental component for rendering links to external addresses.\n *\n * @note If you need to link to an internal application route, prefer using the\n * [`react-router` `<Link>`](https://reactrouter.com/en/main/components/link)\n *\n * @see https://mantle.ngrok.com/components/anchor\n *\n * @example\n * ```tsx\n * <Anchor href=\"https://ngrok.com/\">ngrok.com</Anchor>\n *\n * <Anchor href=\"https://ngrok.com/docs\" target=\"_blank\" icon={<Book />}>\n *   ngrok docs\n * </Anchor>\n * ```\n */\nconst Anchor = forwardRef<ComponentRef<\"a\">, AnchorProps>(\n\t(\n\t\t{ asChild, children, className, rel: propRel, icon, iconPlacement = \"start\", ...props },\n\t\tref,\n\t) => {\n\t\tconst rel = resolveRel(propRel);\n\t\tconst componentProps = {\n\t\t\tclassName: anchorClassNames(className),\n\t\t\tref,\n\t\t\trel,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<AnchorProps>(singleChild),\n\t\t\t\t\"When using `asChild`, Anchor must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\treturn (\n\t\t\t\t<Slot {...componentProps}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tsingleChild,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{icon && iconPlacement === \"start\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block mr-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t\t{icon && iconPlacement === \"end\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block ml-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<a {...componentProps}>\n\t\t\t\t{icon && iconPlacement === \"start\" && <Icon className=\"inline-block mr-1.5\" svg={icon} />}\n\t\t\t\t{children}\n\t\t\t\t{icon && iconPlacement === \"end\" && <Icon className=\"inline-block ml-1.5\" svg={icon} />}\n\t\t\t</a>\n\t\t);\n\t},\n);\nAnchor.displayName = \"Anchor\";\n\n/**\n * Resolves the `rel` attribute to a string.\n *\n * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.\n */\nfunction resolveRel(\n\trel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[],\n) {\n\tif (Array.isArray(rel)) {\n\t\tconst uniqueRel = new Set(rel);\n\t\tconst result = [...uniqueRel]\n\t\t\t.map((item) => item?.trim())\n\t\t\t.filter(Boolean)\n\t\t\t.toSorted()\n\t\t\t.join(\" \");\n\t\treturn result || undefined;\n\t}\n\n\treturn rel?.trim() || undefined;\n}\n\nexport {\n\t//,\n\tAnchor,\n\tanchorClassNames,\n\tresolveRel,\n};\n\nexport type {\n\t//,\n\tAnchorProps,\n};\n"],"mappings":"mSAYA,MAAM,EAAoB,GACzB,EACC,kJACA,EACA,CA2CI,EAAS,GAEb,CAAE,UAAS,WAAU,YAAW,IAAK,EAAS,OAAM,gBAAgB,QAAS,GAAG,GAChF,IACI,CACJ,IAAM,EAAM,EAAW,EAAQ,CACzB,EAAiB,CACtB,UAAW,EAAiB,EAAU,CACtC,MACA,MACA,GAAG,EACH,CAED,GAAI,EAAS,CACZ,IAAM,EAAc,EAAS,KAAK,EAAS,CAC3C,EACC,EAA4B,EAAY,CACxC,2EACA,CACD,IAAM,EAAgB,EAAY,OAAO,SAEzC,OACC,EAAC,EAAD,CAAM,GAAI,WACR,EACA,EACA,EAAE,CACF,EAAA,EAAA,CAAA,SAAA,CACE,GAAQ,IAAkB,SAC1B,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,EAAQ,CAAA,CAEnD,EACA,GAAQ,IAAkB,OAC1B,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,EAAQ,CAAA,CAElD,CAAA,CAAA,CACH,CACK,CAAA,CAIT,OACC,EAAC,IAAD,CAAG,GAAI,WAAP,CACE,GAAQ,IAAkB,SAAW,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,EAAQ,CAAA,CACxF,EACA,GAAQ,IAAkB,OAAS,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,EAAQ,CAAA,CACpF,IAGN,CACD,EAAO,YAAc,SAOrB,SAAS,EACR,EACC,CAWD,OAVI,MAAM,QAAQ,EAAI,CAEN,CAAC,GADE,IAAI,IAAI,EAAI,CACD,CAC3B,IAAK,GAAS,GAAM,MAAM,CAAC,CAC3B,OAAO,QAAQ,CACf,UAAU,CACV,KAAK,IAAI,EACM,IAAA,GAGX,GAAK,MAAM,EAAI,IAAA"}

package/dist/button-DdrxOnUb.js

@@ -1,2 +0,0 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{forwardRef as t}from"react";import{jsx as n}from"react/jsx-runtime";import{cva as r}from"class-variance-authority";const i=r(`border-form inline-flex items-center rounded-md`,{variants:{appearance:{panel:`bg-form gap-0.5 border p-0.75 [--icon-button-border-radius:0.125rem] [&>.separator]:mx-px`,ghost:`gap-0.5`,outlined:``}}}),a=t(({appearance:t,className:r,children:a,...o},s)=>n(`div`,{className:e(i({appearance:t}),r),ref:s,...o,children:a}));a.displayName=`ButtonGroup`;export{a as t};
-//# sourceMappingURL=button-DdrxOnUb.js.map

package/dist/button-DdrxOnUb.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-DdrxOnUb.js","names":[],"sources":["../src/components/button/button-group.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport { type ComponentProps, type ComponentRef, forwardRef } from \"react\";\nimport type { VariantProps } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\nconst buttonGroupVariants = cva(\"border-form inline-flex items-center rounded-md\", {\n\tvariants: {\n\t\t/**\n\t\t * Defines the visual style of the ButtonGroup.\n\t\t */\n\t\tappearance: {\n\t\t\tpanel:\n\t\t\t\t\"bg-form gap-0.5 border p-0.75 [--icon-button-border-radius:0.125rem] [&>.separator]:mx-px\",\n\t\t\tghost: \"gap-0.5\",\n\t\t\toutlined: \"\", // TODO(cody): implement me\n\t\t},\n\t},\n});\n\ntype ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>;\n\ntype ButtonGroupProps = ComponentProps<\"div\"> & ButtonGroupVariants;\n\n/**\n * A contained group of related buttons.\n *\n * @see https://mantle.ngrok.com/components/button-group#api-button-group\n *\n * @example\n * ```tsx\n * <ButtonGroup appearance=\"panel\">\n *   <IconButton icon={<Bold />} label=\"Bold\" />\n *   <IconButton icon={<Italic />} label=\"Italic\" />\n *   <IconButton icon={<Underline />} label=\"Underline\" />\n * </ButtonGroup>\n * ```\n */\nconst ButtonGroup = forwardRef<ComponentRef<\"div\">, ButtonGroupProps>(\n\t({ appearance, className, children, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div className={cx(buttonGroupVariants({ appearance }), className)} ref={ref} {...props}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\nButtonGroup.displayName = \"ButtonGroup\";\n\nexport {\n\t//,\n\tButtonGroup,\n};\n\nexport type {\n\t//,\n\tButtonGroupProps,\n};\n"],"mappings":"+JAKA,MAAM,EAAsB,EAAI,kDAAmD,CAClF,SAAU,CAIT,WAAY,CACX,MACC,4FACD,MAAO,UACP,SAAU,GACV,CACD,CACD,CAAC,CAoBI,EAAc,GAClB,CAAE,aAAY,YAAW,WAAU,GAAG,GAAS,IAE9C,EAAC,MAAD,CAAK,UAAW,EAAG,EAAoB,CAAE,aAAY,CAAC,CAAE,EAAU,CAAO,MAAK,GAAI,EAChF,WACI,CAAA,CAGR,CACD,EAAY,YAAc"}

package/dist/compose-refs-DFIaEnQH.js

@@ -1,2 +0,0 @@
-import{useCallback as e}from"react";function t(...e){return t=>{for(let n of e)typeof n==`function`?n(t):n!=null&&(n.current=t)}}function n(...n){return e(()=>t(...n),[n])}export{n,t};
-//# sourceMappingURL=compose-refs-DFIaEnQH.js.map

package/dist/compose-refs-DFIaEnQH.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"compose-refs-DFIaEnQH.js","names":[],"sources":["../src/utils/compose-refs/compose-refs.tsx"],"sourcesContent":["import type { MutableRefObject, Ref } from \"react\";\nimport { useCallback } from \"react\";\n\ntype PossibleRef<T> = Ref<T> | undefined;\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]) {\n\treturn (node: T) => {\n\t\tfor (const ref of refs) {\n\t\t\tif (typeof ref === \"function\") {\n\t\t\t\tref(node);\n\t\t\t} else if (ref != null) {\n\t\t\t\t(ref as MutableRefObject<T>).current = node;\n\t\t\t}\n\t\t}\n\t};\n}\n\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]) {\n\treturn useCallback(() => composeRefs(...refs), [refs]);\n}\n\nexport { composeRefs, useComposedRefs };\n"],"mappings":"oCASA,SAAS,EAAe,GAAG,EAAwB,CAClD,MAAQ,IAAY,CACnB,IAAK,IAAM,KAAO,EACb,OAAO,GAAQ,WAClB,EAAI,EAAK,CACC,GAAO,OAChB,EAA4B,QAAU,IAU3C,SAAS,EAAmB,GAAG,EAAwB,CACtD,OAAO,MAAkB,EAAY,GAAG,EAAK,CAAE,CAAC,EAAK,CAAC"}

package/dist/dialog-Cw3E0Wr9.js

@@ -1,2 +0,0 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-button-CxxVPiKp.js";import{a as n,c as r,i,n as a,o,r as s,s as c,t as l}from"./primitive-pggbsddf.js";import{forwardRef as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{XIcon as p}from"@phosphor-icons/react/X";const m=o;m.displayName=`Dialog`;const h=r;h.displayName=`DialogTrigger`;const g=n;g.displayName=`DialogPortal`;const _=l;_.displayName=`DialogClose`;const v=u(({className:t,...n},r)=>d(i,{ref:r,className:e(`bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs`,t),...n}));v.displayName=`DialogOverlay`;const y=u(({children:t,className:n,preferredWidth:r=`max-w-lg`,...i},o)=>f(g,{children:[d(v,{}),d(`div`,{className:`fixed inset-4 z-50 flex items-center justify-center`,children:d(a,{"data-mantle-modal-content":!0,className:e(`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`,r,n),ref:o,...i,children:t})})]}));y.displayName=`DialogContent`;const b=({className:t,children:n,...r})=>d(`div`,{className:e(`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`,t),...r,children:n});b.displayName=`DialogHeader`;const x=({size:e=`md`,type:n=`button`,label:r=`Close Dialog`,appearance:i=`ghost`,...a})=>d(l,{asChild:!0,children:d(t,{appearance:i,icon:d(p,{}),label:r,size:e,type:n,...a})});x.displayName=`DialogCloseIconButton`;const S=({className:t,...n})=>d(`div`,{className:e(`scrollbar text-body flex-1 overflow-y-auto p-6`,t),...n});S.displayName=`DialogBody`;const C=({className:t,...n})=>d(`div`,{className:e(`border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4`,t),...n});C.displayName=`DialogFooter`;const w=u(({className:t,...n},r)=>d(c,{ref:r,className:e(`text-strong truncate text-lg font-medium`,t),...n}));w.displayName=`DialogTitle`;const T=u(({className:t,...n},r)=>d(s,{ref:r,className:e(`text-muted`,t),...n}));T.displayName=`DialogDescription`;const E={Root:m,Body:S,Close:_,CloseIconButton:x,Content:y,Description:T,Footer:C,Header:b,Overlay:v,Portal:g,Title:w,Trigger:h};export{E as t};
-//# sourceMappingURL=dialog-Cw3E0Wr9.js.map