@ngrok/mantle 0.32.3 → 0.40.0

package/dist/table.js

@@ -1,2 +1,2 @@
-import{a as e,b as a,c as l,d as b,e as o,f as T,g as t,h as d,i as r}from"./chunk-JIRNFNH5.js";import"./chunk-MF2QITTY.js";import"./chunk-AZ56JGNY.js";export{a as Table,b as TableBody,r as TableCaption,d as TableCell,o as TableFoot,l as TableHead,t as TableHeader,e as TableRoot,T as TableRow};
+import{a as e}from"./chunk-F4N3P7B7.js";import"./chunk-MF2QITTY.js";import"./chunk-AZ56JGNY.js";export{e as Table};
 //# sourceMappingURL=table.js.map

package/dist/tabs.d.ts

@@ -7,109 +7,119 @@ import * as _radix_ui_react_tabs from '@radix-ui/react-tabs';
  * A set of layered sections of content—known as tab panels—that are displayed one at a time.
  * The root component that provides context for all tab components.
  *
- * @see https://mantle.ngrok.com/components/tabs#api-tabs
+ * @see https://mantle.ngrok.com/components/tabs
  *
  * @example
  * ```tsx
  * <Tabs defaultValue="account">
- *   <TabsList>
- *     <TabsTrigger value="account">Account</TabsTrigger>
- *     <TabsTrigger value="password">Password</TabsTrigger>
- *   </TabsList>
- *   <TabsContent value="account">
+ *   <Tabs.List>
+ *     <Tabs.Trigger value="account">Account</Tabs.Trigger>
+ *     <Tabs.Trigger value="password">Password</Tabs.Trigger>
+ *   </Tabs.List>
+ *   <Tabs.Content value="account">
  *     <p>Make changes to your account here.</p>
- *   </TabsContent>
- *   <TabsContent value="password">
+ *   </Tabs.Content>
+ *   <Tabs.Content value="password">
  *     <p>Change your password here.</p>
- *   </TabsContent>
+ *   </Tabs.Content>
  * </Tabs>
  * ```
  */
-declare const Tabs: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-/**
- * Contains the triggers that are aligned along the edge of the active content.
- * The container for tab triggers that provides the visual layout for tab navigation.
- *
- * @see https://mantle.ngrok.com/components/tabs#api-tabs-list
- *
- * @example
- * ```tsx
- * <Tabs defaultValue="account">
- *   <TabsList>
- *     <TabsTrigger value="account">Account</TabsTrigger>
- *     <TabsTrigger value="password">Password</TabsTrigger>
- *   </TabsList>
- *   <TabsContent value="account">
- *     <p>Make changes to your account here.</p>
- *   </TabsContent>
- * </Tabs>
- * ```
- */
-declare const TabsList: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-/**
- * The button that activates its associated content.
- * A clickable tab trigger that switches between different tab content panels.
- *
- * @see https://mantle.ngrok.com/components/tabs#api-tabs-trigger
- *
- * @example
- * ```tsx
- * <Tabs defaultValue="account">
- *   <TabsList>
- *     <TabsTrigger value="account">Account</TabsTrigger>
- *     <TabsTrigger value="password">Password</TabsTrigger>
- *   </TabsList>
- *   <TabsContent value="account">
- *     <p>Make changes to your account here.</p>
- *   </TabsContent>
- * </Tabs>
- * ```
- */
-declare const TabsTrigger: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
-/**
- * A badge component that can be used inside tab triggers to display additional information.
- * Typically used to show counts or status indicators within tab headers.
- *
- * @see https://mantle.ngrok.com/components/tabs#api-tab-badge
- *
- * @example
- * ```tsx
- * <Tabs defaultValue="account">
- *   <TabsList>
- *     <TabsTrigger value="account">
- *       Account <TabBadge>5</TabBadge>
- *     </TabsTrigger>
- *     <TabsTrigger value="password">Password</TabsTrigger>
- *   </TabsList>
- * </Tabs>
- * ```
- */
-declare const TabBadge: {
-    ({ className, children, ...props }: HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
-    displayName: string;
+declare const Tabs: {
+    /**
+     * The root container of the tabs component that provides context for all tab components.
+     * A set of layered sections of content—known as tab panels—that are displayed one at a time.
+     *
+     * @see https://mantle.ngrok.com/components/tabs#api-tabs-root
+     *
+     * @example
+     * ```tsx
+     * <Tabs.Root defaultValue="account">
+     *   <Tabs.List>
+     *     <Tabs.Trigger value="account">Account</Tabs.Trigger>
+     *     <Tabs.Trigger value="password">Password</Tabs.Trigger>
+     *   </Tabs.List>
+     *   <Tabs.Content value="account">
+     *     <p>Make changes to your account here.</p>
+     *   </Tabs.Content>
+     * </Tabs.Root>
+     * ```
+     */
+    readonly Root: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * Contains the content associated with each trigger.
+     * The content panel that displays when its corresponding tab trigger is active.
+     *
+     * @see https://mantle.ngrok.com/components/tabs#api-tabs-content
+     *
+     * @example
+     * ```tsx
+     * <Tabs.Root defaultValue="account">
+     *   <Tabs.List>
+     *     <Tabs.Trigger value="account">Account</Tabs.Trigger>
+     *   </Tabs.List>
+     *   <Tabs.Content value="account">
+     *     <p>Make changes to your account here.</p>
+     *   </Tabs.Content>
+     * </Tabs.Root>
+     * ```
+     */
+    readonly Content: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * Contains the triggers that are aligned along the edge of the active content.
+     * The container for tab triggers that provides the visual layout for tab navigation.
+     *
+     * @see https://mantle.ngrok.com/components/tabs#api-tabs-list
+     *
+     * @example
+     * ```tsx
+     * <Tabs.Root defaultValue="account">
+     *   <Tabs.List>
+     *     <Tabs.Trigger value="account">Account</Tabs.Trigger>
+     *     <Tabs.Trigger value="password">Password</Tabs.Trigger>
+     *   </Tabs.List>
+     * </Tabs.Root>
+     * ```
+     */
+    readonly List: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * The button that activates its associated content.
+     * A clickable tab trigger that switches between different tab content panels.
+     *
+     * @see https://mantle.ngrok.com/components/tabs#api-tabs-trigger
+     *
+     * @example
+     * ```tsx
+     * <Tabs.Root defaultValue="account">
+     *   <Tabs.List>
+     *     <Tabs.Trigger value="account">Account</Tabs.Trigger>
+     *     <Tabs.Trigger value="password">Password</Tabs.Trigger>
+     *   </Tabs.List>
+     * </Tabs.Root>
+     * ```
+     */
+    readonly Trigger: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    /**
+     * A badge component that can be used inside tab triggers to display additional information.
+     * Typically used to show counts or status indicators within tab headers.
+     *
+     * @see https://mantle.ngrok.com/components/tabs#api-tab-badge
+     *
+     * @example
+     * ```tsx
+     * <Tabs.Root defaultValue="account">
+     *   <Tabs.List>
+     *     <Tabs.Trigger value="account">
+     *       Account <Tabs.Badge>5</Tabs.Badge>
+     *     </Tabs.Trigger>
+     *   </Tabs.List>
+     * </Tabs.Root>
+     * ```
+     */
+    readonly Badge: {
+        ({ className, children, ...props }: HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
 };
-/**
- * Contains the content associated with each trigger.
- * The content panel that displays when its corresponding tab trigger is active.
- *
- * @see https://mantle.ngrok.com/components/tabs#api-tabs-content
- *
- * @example
- * ```tsx
- * <Tabs defaultValue="account">
- *   <TabsList>
- *     <TabsTrigger value="account">Account</TabsTrigger>
- *     <TabsTrigger value="password">Password</TabsTrigger>
- *   </TabsList>
- *   <TabsContent value="account">
- *     <p>Make changes to your account here.</p>
- *   </TabsContent>
- *   <TabsContent value="password">
- *     <p>Change your password here.</p>
- *   </TabsContent>
- * </Tabs>
- * ```
- */
-declare const TabsContent: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
-export { TabBadge, Tabs, TabsContent, TabsList, TabsTrigger };
+export { Tabs };

package/dist/tabs.js

@@ -1,2 +1,2 @@
-import{a as f}from"./chunk-3C5O3AQA.js";import{a as i}from"./chunk-AZ56JGNY.js";import{Content as z,List as w,Root as S,Trigger as u}from"@radix-ui/react-tabs";import W from"clsx";import{Children as B,cloneElement as E,createContext as H,forwardRef as n,isValidElement as M,useContext as m}from"react";import V from"tiny-invariant";import{Fragment as A,jsx as r,jsxs as v}from"react/jsx-runtime";var g=H({orientation:"horizontal"}),x=n(({className:t,children:a,orientation:e="horizontal",...o},s)=>r(S,{className:i("flex gap-4",e==="horizontal"?"flex-col":"flex-row",t),orientation:e,ref:s,...o,children:r(g.Provider,{value:{orientation:e},children:a})}));x.displayName="Tabs";var h=n(({className:t,...a},e)=>{let o=m(g);return r(w,{"aria-orientation":o.orientation,className:i("flex border-gray-200",o.orientation==="horizontal"?"flex-row items-center gap-6 border-b":"flex-col items-end gap-[0.875rem] self-stretch border-r",t),ref:e,...a})});h.displayName="TabsList";var p=()=>{let t=m(g);return r("span",{"aria-hidden":!0,className:W("group-data-state-active/tab-trigger:bg-blue-600 absolute z-0",t.orientation==="horizontal"&&"-bottom-px left-0 right-0 h-[0.1875rem]",t.orientation==="vertical"&&"-right-px bottom-0 top-0 w-[0.1875rem]")})};p.displayName="TabsTriggerDecoration";var y=n(({"aria-disabled":t,asChild:a=!1,children:e,className:o,disabled:s,...R},d)=>{let c=m(g),b=f(t??s),T={"aria-disabled":t??s,className:i("group/tab-trigger relative flex cursor-pointer items-center gap-1 whitespace-nowrap py-3 text-sm font-medium text-gray-600",c.orientation==="horizontal"&&"rounded-tl-md rounded-tr-md",c.orientation==="vertical"&&"rounded-bl-md rounded-tl-md pr-3","ring-focus-accent outline-none","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 not-aria-disabled:hover:data-state-active:text-blue-600","data-state-active:text-blue-600",o),disabled:b,...R};if(a){let l=B.only(e);V(M(l),"When using `asChild`, TabsTrigger must be passed a single child as a JSX tag.");let N=l.props?.children,L={...b?{href:void 0,to:void 0}:{tabIndex:0}};return r(u,{asChild:!0,...T,ref:d,children:E(b?r("button",{type:"button"}):l,L,v(A,{children:[r(p,{}),N]}))})}return v(u,{ref:d,...T,children:[r(p,{}),e]})});y.displayName="TabsTrigger";var C=({className:t,children:a,...e})=>r("span",{className:i("rounded-full bg-gray-500/20 px-1.5 text-xs font-medium text-gray-600","group-data-state-active/tab-trigger:bg-blue-500/20 group-data-state-active/tab-trigger:text-blue-700 group-hover/tab-trigger:group-enabled/tab-trigger:group-data-state-active/tab-trigger:text-blue-700","group-hover/tab-trigger:group-enabled/tab-trigger:text-gray-700",t),...e,children:a});C.displayName="TabBadge";var P=n(({className:t,...a},e)=>r(z,{ref:e,className:i("focus-visible:ring-focus-accent outline-none focus-visible:ring-4",t),...a}));P.displayName="TabsContent";export{C as TabBadge,x as Tabs,P as TabsContent,h as TabsList,y as TabsTrigger};
+import{a as u}from"./chunk-3C5O3AQA.js";import{a}from"./chunk-AZ56JGNY.js";import{Content as L,List as w,Root as S,Trigger as T}from"@radix-ui/react-tabs";import W from"clsx";import{Children as B,cloneElement as E,createContext as H,forwardRef as n,isValidElement as M,useContext as m}from"react";import V from"tiny-invariant";import{Fragment as k,jsx as r,jsxs as v}from"react/jsx-runtime";var g=H({orientation:"horizontal"}),x=n(({className:t,children:o,orientation:e="horizontal",...i},s)=>r(S,{className:a("flex gap-4",e==="horizontal"?"flex-col":"flex-row",t),orientation:e,ref:s,...i,children:r(g.Provider,{value:{orientation:e},children:o})}));x.displayName="Tabs";var h=n(({className:t,...o},e)=>{let i=m(g);return r(w,{"aria-orientation":i.orientation,className:a("flex border-gray-200",i.orientation==="horizontal"?"flex-row items-center gap-6 border-b":"flex-col items-end gap-[0.875rem] self-stretch border-r",t),ref:e,...o})});h.displayName="TabsList";var b=()=>{let t=m(g);return r("span",{"aria-hidden":!0,className:W("group-data-state-active/tab-trigger:bg-blue-600 absolute z-0",t.orientation==="horizontal"&&"-bottom-px left-0 right-0 h-[0.1875rem]",t.orientation==="vertical"&&"-right-px bottom-0 top-0 w-[0.1875rem]")})};b.displayName="TabsTriggerDecoration";var y=n(({"aria-disabled":t,asChild:o=!1,children:e,className:i,disabled:s,...R},d)=>{let c=m(g),l=u(t??s),f={"aria-disabled":t??s,className:a("group/tab-trigger relative flex cursor-pointer items-center gap-1 whitespace-nowrap py-3 text-sm font-medium text-gray-600",c.orientation==="horizontal"&&"rounded-tl-md rounded-tr-md",c.orientation==="vertical"&&"rounded-bl-md rounded-tl-md pr-3","ring-focus-accent outline-none","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 not-aria-disabled:hover:data-state-active:text-blue-600","data-state-active:text-blue-600",i),disabled:l,...R};if(o){let p=B.only(e);V(M(p),"When using `asChild`, TabsTrigger must be passed a single child as a JSX tag.");let N=p.props?.children,z={...l?{href:void 0,to:void 0}:{tabIndex:0}};return r(T,{asChild:!0,...f,ref:d,children:E(l?r("button",{type:"button"}):p,z,v(k,{children:[r(b,{}),N]}))})}return v(T,{ref:d,...f,children:[r(b,{}),e]})});y.displayName="TabsTrigger";var P=({className:t,children:o,...e})=>r("span",{className:a("rounded-full bg-gray-500/20 px-1.5 text-xs font-medium text-gray-600","group-data-state-active/tab-trigger:bg-blue-500/20 group-data-state-active/tab-trigger:text-blue-700 group-hover/tab-trigger:group-enabled/tab-trigger:group-data-state-active/tab-trigger:text-blue-700","group-hover/tab-trigger:group-enabled/tab-trigger:text-gray-700",t),...e,children:o});P.displayName="TabBadge";var C=n(({className:t,...o},e)=>r(L,{ref:e,className:a("focus-visible:ring-focus-accent outline-none focus-visible:ring-4",t),...o}));C.displayName="TabsContent";var A={Root:x,Content:C,List:h,Trigger:y,Badge:P};export{A as Tabs};
 //# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"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 clsx from \"clsx\";\nimport type {\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tHTMLAttributes,\n} from \"react\";\nimport {\n\tChildren,\n\tcloneElement,\n\tcreateContext,\n\tforwardRef,\n\tisValidElement,\n\tuseContext,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype TabsStateContextValue = {\n\torientation: \"horizontal\" | \"vertical\";\n};\n\nconst TabsStateContext = createContext<TabsStateContextValue>({\n\torientation: \"horizontal\",\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#api-tabs\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"account\">\n *   <TabsList>\n *     <TabsTrigger value=\"account\">Account</TabsTrigger>\n *     <TabsTrigger value=\"password\">Password</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </TabsContent>\n *   <TabsContent value=\"password\">\n *     <p>Change your password here.</p>\n *   </TabsContent>\n * </Tabs>\n * ```\n */\nconst Tabs = forwardRef<\n\tComponentRef<typeof TabsPrimitiveRoot>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveRoot>\n>(({ className, children, orientation = \"horizontal\", ...props }, ref) => (\n\t<TabsPrimitiveRoot\n\t\tclassName={cx(\n\t\t\t\"flex gap-4\",\n\t\t\torientation === \"horizontal\" ? \"flex-col\" : \"flex-row\",\n\t\t\tclassName,\n\t\t)}\n\t\torientation={orientation}\n\t\tref={ref}\n\t\t{...props}\n\t>\n\t\t<TabsStateContext.Provider value={{ orientation }}>\n\t\t\t{children}\n\t\t</TabsStateContext.Provider>\n\t</TabsPrimitiveRoot>\n));\nTabs.displayName = \"Tabs\";\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#api-tabs-list\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"account\">\n *   <TabsList>\n *     <TabsTrigger value=\"account\">Account</TabsTrigger>\n *     <TabsTrigger value=\"password\">Password</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </TabsContent>\n * </Tabs>\n * ```\n */\nconst TabsList = forwardRef<\n\tComponentRef<typeof TabsPrimitiveList>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveList>\n>(({ className, ...props }, ref) => {\n\tconst ctx = useContext(TabsStateContext);\n\n\treturn (\n\t\t<TabsPrimitiveList\n\t\t\taria-orientation={ctx.orientation}\n\t\t\tclassName={cx(\n\t\t\t\t\"flex border-gray-200\",\n\t\t\t\tctx.orientation === \"horizontal\"\n\t\t\t\t\t? \"flex-row items-center gap-6 border-b\"\n\t\t\t\t\t: \"flex-col items-end gap-[0.875rem] self-stretch border-r\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nTabsList.displayName = \"TabsList\";\n\ntype TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitiveTrigger>;\n\nconst TabsTriggerDecoration = () => {\n\tconst ctx = useContext(TabsStateContext);\n\n\treturn (\n\t\t<span\n\t\t\taria-hidden\n\t\t\tclassName={clsx(\n\t\t\t\t\"group-data-state-active/tab-trigger:bg-blue-600 absolute z-0\",\n\t\t\t\tctx.orientation === \"horizontal\" &&\n\t\t\t\t\t\"-bottom-px left-0 right-0 h-[0.1875rem]\",\n\t\t\t\tctx.orientation === \"vertical\" &&\n\t\t\t\t\t\"-right-px bottom-0 top-0 w-[0.1875rem]\",\n\t\t\t)}\n\t\t/>\n\t);\n};\nTabsTriggerDecoration.displayName = \"TabsTriggerDecoration\";\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#api-tabs-trigger\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"account\">\n *   <TabsList>\n *     <TabsTrigger value=\"account\">Account</TabsTrigger>\n *     <TabsTrigger value=\"password\">Password</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </TabsContent>\n * </Tabs>\n * ```\n */\nconst TabsTrigger = forwardRef<\n\tComponentRef<typeof TabsPrimitiveTrigger>,\n\tTabsTriggerProps\n>(\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 ctx = 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(\n\t\t\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\t\tctx.orientation === \"horizontal\" && \"rounded-tl-md rounded-tr-md\",\n\t\t\t\tctx.orientation === \"vertical\" && \"rounded-bl-md rounded-tl-md pr-3\",\n\t\t\t\t\"ring-focus-accent outline-none\",\n\t\t\t\t\"aria-disabled:cursor-default aria-disabled:opacity-50\",\n\t\t\t\t\"focus-visible:ring-4\",\n\t\t\t\t\"[&>svg]:shrink-0 [&>svg]:size-5\",\n\t\t\t\t\"not-aria-disabled:hover:text-gray-900 not-aria-disabled:hover:data-state-active:text-blue-600\",\n\t\t\t\t\"data-state-active:text-blue-600\",\n\t\t\t\tclassName,\n\t\t\t),\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 = {\n\t\t\t\t...(disabled\n\t\t\t\t\t? /**\n\t\t\t\t\t\t * When disabled, prevent anchor/link children from being clickable by\n\t\t\t\t\t\t * removing their href/to props!\n\t\t\t\t\t\t * This is necessary because `<a>` doesn't support the `disabled`\n\t\t\t\t\t\t * attribute and would be navigable. We could use `pointer-events-none`\n\t\t\t\t\t\t * instead, but don't by default because it would also prevent tooltip\n\t\t\t\t\t\t * interactions, which may be surprising.\n\t\t\t\t\t\t */\n\t\t\t\t\t\t{ href: undefined, to: undefined }\n\t\t\t\t\t: /**\n\t\t\t\t\t\t * when NOT disabled, allow keyboard navigation to the trigger,\n\t\t\t\t\t\t * even for asChild anchors/links\n\t\t\t\t\t\t */\n\t\t\t\t\t\t{ tabIndex: 0 }),\n\t\t\t};\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);\nTabsTrigger.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#api-tab-badge\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"account\">\n *   <TabsList>\n *     <TabsTrigger value=\"account\">\n *       Account <TabBadge>5</TabBadge>\n *     </TabsTrigger>\n *     <TabsTrigger value=\"password\">Password</TabsTrigger>\n *   </TabsList>\n * </Tabs>\n * ```\n */\nconst TabBadge = ({\n\tclassName,\n\tchildren,\n\t...props\n}: HTMLAttributes<HTMLSpanElement>) => (\n\t<span\n\t\tclassName={cx(\n\t\t\t\"rounded-full bg-gray-500/20 px-1.5 text-xs font-medium text-gray-600\",\n\t\t\t\"group-data-state-active/tab-trigger:bg-blue-500/20 group-data-state-active/tab-trigger:text-blue-700 group-hover/tab-trigger:group-enabled/tab-trigger:group-data-state-active/tab-trigger:text-blue-700\",\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);\nTabBadge.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#api-tabs-content\n *\n * @example\n * ```tsx\n * <Tabs defaultValue=\"account\">\n *   <TabsList>\n *     <TabsTrigger value=\"account\">Account</TabsTrigger>\n *     <TabsTrigger value=\"password\">Password</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"account\">\n *     <p>Make changes to your account here.</p>\n *   </TabsContent>\n *   <TabsContent value=\"password\">\n *     <p>Change your password here.</p>\n *   </TabsContent>\n * </Tabs>\n * ```\n */\nconst TabsContent = forwardRef<\n\tComponentRef<typeof TabsPrimitiveContent>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveContent>\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitiveContent\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"focus-visible:ring-focus-accent outline-none focus-visible:ring-4\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTabsContent.displayName = \"TabsContent\";\n\nexport {\n\t//\n\tTabBadge,\n\tTabs,\n\tTabsContent,\n\tTabsList,\n\tTabsTrigger,\n};\n"],"mappings":"gFAAA,OACC,WAAWA,EACX,QAAQC,EACR,QAAQC,EACR,WAAWC,MACL,uBACP,OAAOC,MAAU,OAMjB,OACC,YAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,cAAAC,EACA,kBAAAC,EACA,cAAAC,MACM,QACP,OAAOC,MAAe,iBAgDpB,OA2JI,YAAAC,EA3JJ,OAAAC,EA2JI,QAAAC,MA3JJ,oBAxCF,IAAMC,EAAmBC,EAAqC,CAC7D,YAAa,YACd,CAAC,EAwBKC,EAAOC,EAGX,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,YAAAC,EAAc,aAAc,GAAGC,CAAM,EAAGC,IACjEV,EAACW,EAAA,CACA,UAAWC,EACV,aACAJ,IAAgB,aAAe,WAAa,WAC5CF,CACD,EACA,YAAaE,EACb,IAAKE,EACJ,GAAGD,EAEJ,SAAAT,EAACE,EAAiB,SAAjB,CAA0B,MAAO,CAAE,YAAAM,CAAY,EAC9C,SAAAD,EACF,EACD,CACA,EACDH,EAAK,YAAc,OAqBnB,IAAMS,EAAWR,EAGf,CAAC,CAAE,UAAAC,EAAW,GAAGG,CAAM,EAAGC,IAAQ,CACnC,IAAMI,EAAMC,EAAWb,CAAgB,EAEvC,OACCF,EAACgB,EAAA,CACA,mBAAkBF,EAAI,YACtB,UAAWF,EACV,uBACAE,EAAI,cAAgB,aACjB,uCACA,0DACHR,CACD,EACA,IAAKI,EACJ,GAAGD,EACL,CAEF,CAAC,EACDI,EAAS,YAAc,WAIvB,IAAMI,EAAwB,IAAM,CACnC,IAAMH,EAAMC,EAAWb,CAAgB,EAEvC,OACCF,EAAC,QACA,cAAW,GACX,UAAWkB,EACV,+DACAJ,EAAI,cAAgB,cACnB,0CACDA,EAAI,cAAgB,YACnB,wCACF,EACD,CAEF,EACAG,EAAsB,YAAc,wBAqBpC,IAAME,EAAcd,EAInB,CACC,CACC,gBAAiBe,EACjB,QAAAC,EAAU,GACV,SAAAd,EACA,UAAAD,EACA,SAAUgB,EACV,GAAGb,CACJ,EACAC,IACI,CACJ,IAAMI,EAAMC,EAAWb,CAAgB,EACjCqB,EAAWC,EAAgBJ,GAAiBE,CAAS,EAErDG,EAAmB,CACxB,gBAAiBL,GAAiBE,EAClC,UAAWV,EACV,6HACAE,EAAI,cAAgB,cAAgB,8BACpCA,EAAI,cAAgB,YAAc,mCAClC,iCACA,wDACA,uBACA,kCACA,gGACA,kCACAR,CACD,EACA,SAAAiB,EACA,GAAGd,CACJ,EAEA,GAAIY,EAAS,CACZ,IAAMK,EAAcC,EAAS,KAAKpB,CAAQ,EAC1CqB,EACCC,EAAiCH,CAAW,EAC5C,+EACD,EACA,IAAMI,EAAgBJ,EAAY,OAAO,SAEnCK,EAAa,CAClB,GAAIR,EASF,CAAE,KAAM,OAAW,GAAI,MAAU,EAKjC,CAAE,SAAU,CAAE,CACjB,EAEA,OACCvB,EAACgC,EAAA,CAAqB,QAAO,GAAE,GAAGP,EAAkB,IAAKf,EACvD,SAAAuB,EACAV,EAAWvB,EAAC,UAAO,KAAK,SAAS,EAAK0B,EACtCK,EACA9B,EAAAF,EAAA,CACC,UAAAC,EAACiB,EAAA,EAAsB,EACtBa,GACF,CACD,EACD,CAEF,CAEA,OACC7B,EAAC+B,EAAA,CAAqB,IAAKtB,EAAM,GAAGe,EACnC,UAAAzB,EAACiB,EAAA,EAAsB,EACtBV,GACF,CAEF,CACD,EACAY,EAAY,YAAc,cAoB1B,IAAMe,EAAW,CAAC,CACjB,UAAA5B,EACA,SAAAC,EACA,GAAGE,CACJ,IACCT,EAAC,QACA,UAAWY,EACV,uEACA,2MACA,kEACAN,CACD,EACC,GAAGG,EAEH,SAAAF,EACF,EAED2B,EAAS,YAAc,WAwBvB,IAAMC,EAAc9B,EAGlB,CAAC,CAAE,UAAAC,EAAW,GAAGG,CAAM,EAAGC,IAC3BV,EAACoC,EAAA,CACA,IAAK1B,EACL,UAAWE,EACV,oEACAN,CACD,EACC,GAAGG,EACL,CACA,EACD0B,EAAY,YAAc","names":["TabsPrimitiveContent","TabsPrimitiveList","TabsPrimitiveRoot","TabsPrimitiveTrigger","clsx","Children","cloneElement","createContext","forwardRef","isValidElement","useContext","invariant","Fragment","jsx","jsxs","TabsStateContext","createContext","Tabs","forwardRef","className","children","orientation","props","ref","TabsPrimitiveRoot","cx","TabsList","ctx","useContext","TabsPrimitiveList","TabsTriggerDecoration","clsx","TabsTrigger","_ariaDisabled","asChild","_disabled","disabled","parseBooleanish","tabsTriggerProps","singleChild","Children","invariant","isValidElement","grandchildren","cloneProps","TabsPrimitiveTrigger","cloneElement","TabBadge","TabsContent","TabsPrimitiveContent"]}
+{"version":3,"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 clsx from \"clsx\";\nimport type {\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tHTMLAttributes,\n} from \"react\";\nimport {\n\tChildren,\n\tcloneElement,\n\tcreateContext,\n\tforwardRef,\n\tisValidElement,\n\tuseContext,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype TabsStateContextValue = {\n\torientation: \"horizontal\" | \"vertical\";\n};\n\nconst TabsStateContext = createContext<TabsStateContextValue>({\n\torientation: \"horizontal\",\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#api-tabs\n *\n * @example\n * ```tsx\n * <Tabs 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>\n * ```\n */\nconst Root = forwardRef<\n\tComponentRef<typeof TabsPrimitiveRoot>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveRoot>\n>(({ className, children, orientation = \"horizontal\", ...props }, ref) => (\n\t<TabsPrimitiveRoot\n\t\tclassName={cx(\n\t\t\t\"flex gap-4\",\n\t\t\torientation === \"horizontal\" ? \"flex-col\" : \"flex-row\",\n\t\t\tclassName,\n\t\t)}\n\t\torientation={orientation}\n\t\tref={ref}\n\t\t{...props}\n\t>\n\t\t<TabsStateContext.Provider value={{ orientation }}>\n\t\t\t{children}\n\t\t</TabsStateContext.Provider>\n\t</TabsPrimitiveRoot>\n));\nRoot.displayName = \"Tabs\";\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#api-tabs-list\n *\n * @example\n * ```tsx\n * <Tabs 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>\n * ```\n */\nconst List = forwardRef<\n\tComponentRef<typeof TabsPrimitiveList>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveList>\n>(({ className, ...props }, ref) => {\n\tconst ctx = useContext(TabsStateContext);\n\n\treturn (\n\t\t<TabsPrimitiveList\n\t\t\taria-orientation={ctx.orientation}\n\t\t\tclassName={cx(\n\t\t\t\t\"flex border-gray-200\",\n\t\t\t\tctx.orientation === \"horizontal\"\n\t\t\t\t\t? \"flex-row items-center gap-6 border-b\"\n\t\t\t\t\t: \"flex-col items-end gap-[0.875rem] self-stretch border-r\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nList.displayName = \"TabsList\";\n\ntype TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitiveTrigger>;\n\nconst TabsTriggerDecoration = () => {\n\tconst ctx = useContext(TabsStateContext);\n\n\treturn (\n\t\t<span\n\t\t\taria-hidden\n\t\t\tclassName={clsx(\n\t\t\t\t\"group-data-state-active/tab-trigger:bg-blue-600 absolute z-0\",\n\t\t\t\tctx.orientation === \"horizontal\" &&\n\t\t\t\t\t\"-bottom-px left-0 right-0 h-[0.1875rem]\",\n\t\t\t\tctx.orientation === \"vertical\" &&\n\t\t\t\t\t\"-right-px bottom-0 top-0 w-[0.1875rem]\",\n\t\t\t)}\n\t\t/>\n\t);\n};\nTabsTriggerDecoration.displayName = \"TabsTriggerDecoration\";\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#api-tabs-trigger\n *\n * @example\n * ```tsx\n * <Tabs 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>\n * ```\n */\nconst Trigger = forwardRef<\n\tComponentRef<typeof TabsPrimitiveTrigger>,\n\tTabsTriggerProps\n>(\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 ctx = 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(\n\t\t\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\t\tctx.orientation === \"horizontal\" && \"rounded-tl-md rounded-tr-md\",\n\t\t\t\tctx.orientation === \"vertical\" && \"rounded-bl-md rounded-tl-md pr-3\",\n\t\t\t\t\"ring-focus-accent outline-none\",\n\t\t\t\t\"aria-disabled:cursor-default aria-disabled:opacity-50\",\n\t\t\t\t\"focus-visible:ring-4\",\n\t\t\t\t\"[&>svg]:shrink-0 [&>svg]:size-5\",\n\t\t\t\t\"not-aria-disabled:hover:text-gray-900 not-aria-disabled:hover:data-state-active:text-blue-600\",\n\t\t\t\t\"data-state-active:text-blue-600\",\n\t\t\t\tclassName,\n\t\t\t),\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 = {\n\t\t\t\t...(disabled\n\t\t\t\t\t? /**\n\t\t\t\t\t\t * When disabled, prevent anchor/link children from being clickable by\n\t\t\t\t\t\t * removing their href/to props!\n\t\t\t\t\t\t * This is necessary because `<a>` doesn't support the `disabled`\n\t\t\t\t\t\t * attribute and would be navigable. We could use `pointer-events-none`\n\t\t\t\t\t\t * instead, but don't by default because it would also prevent tooltip\n\t\t\t\t\t\t * interactions, which may be surprising.\n\t\t\t\t\t\t */\n\t\t\t\t\t\t{ href: undefined, to: undefined }\n\t\t\t\t\t: /**\n\t\t\t\t\t\t * when NOT disabled, allow keyboard navigation to the trigger,\n\t\t\t\t\t\t * even for asChild anchors/links\n\t\t\t\t\t\t */\n\t\t\t\t\t\t{ tabIndex: 0 }),\n\t\t\t};\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#api-tab-badge\n *\n * @example\n * ```tsx\n * <Tabs 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>\n * ```\n */\nconst Badge = ({\n\tclassName,\n\tchildren,\n\t...props\n}: HTMLAttributes<HTMLSpanElement>) => (\n\t<span\n\t\tclassName={cx(\n\t\t\t\"rounded-full bg-gray-500/20 px-1.5 text-xs font-medium text-gray-600\",\n\t\t\t\"group-data-state-active/tab-trigger:bg-blue-500/20 group-data-state-active/tab-trigger:text-blue-700 group-hover/tab-trigger:group-enabled/tab-trigger:group-data-state-active/tab-trigger:text-blue-700\",\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#api-tabs-content\n *\n * @example\n * ```tsx\n * <Tabs 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>\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(\n\t\t\t\"focus-visible:ring-focus-accent outline-none focus-visible:ring-4\",\n\t\t\tclassName,\n\t\t)}\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 * ```tsx\n * <Tabs 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>\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#api-tabs-root\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#api-tabs-content\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#api-tabs-list\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#api-tabs-trigger\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#api-tab-badge\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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","names":["TabsPrimitiveContent","TabsPrimitiveList","TabsPrimitiveRoot","TabsPrimitiveTrigger","clsx","Children","cloneElement","createContext","forwardRef","isValidElement","useContext","invariant","Fragment","jsx","jsxs","TabsStateContext","createContext","Root","forwardRef","className","children","orientation","props","ref","TabsPrimitiveRoot","cx","List","ctx","useContext","TabsPrimitiveList","TabsTriggerDecoration","clsx","Trigger","_ariaDisabled","asChild","_disabled","disabled","parseBooleanish","tabsTriggerProps","singleChild","Children","invariant","isValidElement","grandchildren","cloneProps","TabsPrimitiveTrigger","cloneElement","Badge","Content","TabsPrimitiveContent","Tabs"]}

package/dist/theme-provider.js

@@ -1,2 +1,2 @@
-import{a as e,b as m,c as r,d as o,e as t,f as h,g as s,h as T,i as p,j as l,k as d,l as n,m as i,n as a,o as v}from"./chunk-CGUSOD4E.js";import"./chunk-D3XF6J5A.js";export{h as $resolvedTheme,o as $theme,a as MantleThemeHeadContent,e as PreloadFonts,T as ThemeProvider,l as applyTheme,s as isResolvedTheme,t as isTheme,i as preventWrongThemeFlashScriptContent,d as readThemeFromHtmlElement,m as resolvedThemes,r as themes,n as useAppliedTheme,v as useInitialHtmlThemeProps,p as useTheme};
+import{a as e,b as m,c as r,d as o,e as t,f as h,g as s,h as T,i as p,j as l,k as d,l as n,m as i,n as a,o as v}from"./chunk-HSTG2BTX.js";import"./chunk-D3XF6J5A.js";export{h as $resolvedTheme,o as $theme,a as MantleThemeHeadContent,e as PreloadFonts,T as ThemeProvider,l as applyTheme,s as isResolvedTheme,t as isTheme,i as preventWrongThemeFlashScriptContent,d as readThemeFromHtmlElement,m as resolvedThemes,r as themes,n as useAppliedTheme,v as useInitialHtmlThemeProps,p as useTheme};
 //# sourceMappingURL=theme-provider.js.map

package/dist/toast.d.ts

@@ -48,7 +48,7 @@ type MakeToastOptions = {
     id?: string;
 };
 /**
- * Create a toast. Provide a `<Toast>` component as the `children` to be rendered
+ * Create a toast. Provide a `<Toast.Root>` component as the `children` to be rendered
  * inside the `<Toaster />` section.
  *
  * @see https://mantle.ngrok.com/components/toast#api-make-toast
@@ -56,11 +56,11 @@ type MakeToastOptions = {
  * @example
  * ```tsx
  * makeToast(
- *   <Toast priority="success">
- *     <ToastIcon />
- *     <ToastMessage>Operation completed successfully!</ToastMessage>
- *     <ToastAction>Dismiss</ToastAction>
- *   </Toast>
+ *   <Toast.Root priority="success">
+ *     <Toast.Icon />
+ *     <Toast.Message>Operation completed successfully!</Toast.Message>
+ *     <Toast.Action>Dismiss</Toast.Action>
+ *   </Toast.Root>
  * );
  * ```
  */
@@ -70,68 +70,84 @@ type Priority = (typeof priorities)[number];
 type ToastProps = ComponentProps<"div"> & WithAsChild & {
     priority: Priority;
 };
-/**
- * A succinct message with a priority that is displayed temporarily.
- * Toasts are used to provide feedback to the user without interrupting their workflow.
- *
- * @see https://mantle.ngrok.com/components/toast#api-toast
- *
- * @example
- * ```tsx
- * <Toast priority="success">
- *   <ToastIcon />
- *   <ToastMessage>Changes saved successfully!</ToastMessage>
- *   <ToastAction>Undo</ToastAction>
- * </Toast>
- * ```
- */
-declare const Toast: react.ForwardRefExoticComponent<Omit<ToastProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-/**
- * An icon that visually represents the priority of the toast.
- * If you do not provide an icon, the default icon and color for the priority is used.
- *
- * @see https://mantle.ngrok.com/components/toast#api-toast-icon
- *
- * @example
- * ```tsx
- * <Toast priority="warning">
- *   <ToastIcon />
- *   <ToastMessage>Warning message</ToastMessage>
- * </Toast>
- * ```
- */
-declare const ToastIcon: react.ForwardRefExoticComponent<Omit<Partial<SvgOnlyProps>, "ref"> & react.RefAttributes<SVGSVGElement>>;
 type ToastActionProps = ComponentProps<"button"> & WithAsChild;
-/**
- * A button that dismisses the toast when clicked.
- * You can prevent the toast from being dismissed `onClick` by calling `event.preventDefault()`
- *
- * @see https://mantle.ngrok.com/components/toast#api-toast-action
- *
- * @example
- * ```tsx
- * <Toast priority="info">
- *   <ToastIcon />
- *   <ToastMessage>File uploaded successfully</ToastMessage>
- *   <ToastAction>View File</ToastAction>
- * </Toast>
- * ```
- */
-declare const ToastAction: react.ForwardRefExoticComponent<Omit<ToastActionProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 type ToastMessageProps = ComponentProps<"p"> & WithAsChild;
 /**
- * The message content of the toast.
+ * A succinct message that is displayed temporarily. Toasts are used to provide
+ * feedback to the user without interrupting their workflow.
  *
- * @see https://mantle.ngrok.com/components/toast#api-toast-message
+ * @see https://mantle.ngrok.com/components/toast
  *
  * @example
  * ```tsx
- * <Toast priority="success">
- *   <ToastIcon />
- *   <ToastMessage>Your changes have been saved</ToastMessage>
- * </Toast>
+ * makeToast(
+ *   <Toast.Root priority="success">
+ *     <Toast.Icon />
+ *     <Toast.Message>Operation completed successfully!</Toast.Message>
+ *     <Toast.Action>Dismiss</Toast.Action>
+ *   </Toast.Root>
+ * );
  * ```
  */
-declare const ToastMessage: react.ForwardRefExoticComponent<Omit<ToastMessageProps, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+declare const Toast: {
+    /**
+     * A succinct message with a priority that is displayed temporarily.
+     *
+     * @see https://mantle.ngrok.com/components/toast#api-toast-root
+     *
+     * @example
+     * ```tsx
+     * <Toast.Root priority="success">
+     *   <Toast.Icon />
+     *   <Toast.Message>Changes saved successfully!</Toast.Message>
+     *   <Toast.Action>Undo</Toast.Action>
+     * </Toast.Root>
+     * ```
+     */
+    readonly Root: react.ForwardRefExoticComponent<Omit<ToastProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * A button that dismisses the toast when clicked.
+     *
+     * @see https://mantle.ngrok.com/components/toast#api-toast-action
+     *
+     * @example
+     * ```tsx
+     * <Toast.Root priority="info">
+     *   <Toast.Icon />
+     *   <Toast.Message>File uploaded successfully</Toast.Message>
+     *   <Toast.Action>View File</Toast.Action>
+     * </Toast.Root>
+     * ```
+     */
+    readonly Action: react.ForwardRefExoticComponent<Omit<ToastActionProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    /**
+     * An icon that visually represents the priority of the toast.
+     *
+     * @see https://mantle.ngrok.com/components/toast#api-toast-icon
+     *
+     * @example
+     * ```tsx
+     * <Toast.Root priority="warning">
+     *   <Toast.Icon />
+     *   <Toast.Message>Warning message</Toast.Message>
+     * </Toast.Root>
+     * ```
+     */
+    readonly Icon: react.ForwardRefExoticComponent<Omit<Partial<SvgOnlyProps>, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    /**
+     * The message content of the toast.
+     *
+     * @see https://mantle.ngrok.com/components/toast#api-toast-message
+     *
+     * @example
+     * ```tsx
+     * <Toast.Root priority="success">
+     *   <Toast.Icon />
+     *   <Toast.Message>Your changes have been saved</Toast.Message>
+     * </Toast.Root>
+     * ```
+     */
+    readonly Message: react.ForwardRefExoticComponent<Omit<ToastMessageProps, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+};
 
-export { type Priority, Toast, ToastAction, ToastIcon, ToastMessage, Toaster, makeToast };
+export { type Priority, Toast, Toaster, makeToast };

package/dist/toast.js

@@ -1,2 +1,2 @@
-import{a as o,b as t,c as s,d as a,e,f as r}from"./chunk-IDCDPWR4.js";import"./chunk-CGUSOD4E.js";import"./chunk-D3XF6J5A.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import"./chunk-AZ56JGNY.js";export{s as Toast,e as ToastAction,a as ToastIcon,r as ToastMessage,o as Toaster,t as makeToast};
+import{a as o,b as t,c as r}from"./chunk-UUXOG7WW.js";import"./chunk-HSTG2BTX.js";import"./chunk-D3XF6J5A.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import"./chunk-AZ56JGNY.js";export{r as Toast,o as Toaster,t as makeToast};
 //# sourceMappingURL=toast.js.map