@ngrok/mantle 0.32.0 → 0.32.1

package/dist/switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/switch/switch.tsx"],"sourcesContent":["import {\n\tRoot as SwitchPrimitiveRoot,\n\tThumb as SwitchPrimitiveThumb,\n} from \"@radix-ui/react-switch\";\nimport clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype SwitchProps = ComponentPropsWithoutRef<typeof SwitchPrimitiveRoot> & {\n\t/**\n\t * Makes the switch immutable, meaning the user can not edit the control.\n\t */\n\treadOnly?: boolean;\n};\n\n/**\n * A form control that allows the user to toggle between checked and not checked.\n *\n * @see https://mantle.ngrok.com/components/switch#api\n *\n * @example\n * ```tsx\n * <form>\n *   <Label htmlFor=\"airplane-mode\" className=\"flex items-center gap-2\">\n *     Airplane Mode\n *     <Switch name=\"airplane-mode\" id=\"airplane-mode\" />\n *   </Label>\n * </form>\n *```\n */\nconst Switch = forwardRef<\n\tComponentRef<typeof SwitchPrimitiveRoot>,\n\tSwitchProps\n>(\n\t(\n\t\t{\n\t\t\t\"aria-readonly\": _ariaReadOnly,\n\t\t\tclassName,\n\t\t\treadOnly: _readOnly,\n\t\t\tonClick,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst readOnly = parseBooleanish(_readOnly ?? _ariaReadOnly);\n\n\t\treturn (\n\t\t\t<SwitchPrimitiveRoot\n\t\t\t\taria-readonly={readOnly}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full outline-none\",\n\t\t\t\t\t\"disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-none focus-visible:ring-4\",\n\t\t\t\t\t\"data-state-checked:bg-blue-500 data-state-unchecked:bg-gray-400\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tif (readOnly) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SwitchPrimitiveThumb\n\t\t\t\t\tclassName={clsx(\n\t\t\t\t\t\t\"pointer-events-none block size-4 rounded-full bg-[#fff] shadow-md ring-0 transition-transform\",\n\t\t\t\t\t\t\"data-state-checked:translate-x-[1.125rem] data-state-unchecked:translate-x-[0.125rem]\",\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t</SwitchPrimitiveRoot>\n\t\t);\n\t},\n);\nSwitch.displayName = \"Switch\";\n\nexport {\n\t//\n\tSwitch,\n};\n"],"mappings":"gFAAA,OACC,QAAQA,EACR,SAASC,MACH,yBACP,OAAOC,MAAU,OACjB,OAAS,cAAAC,MAAkB,QAgEvB,cAAAC,MAAA,oBArCJ,IAAMC,EAASC,EAId,CACC,CACC,gBAAiBC,EACjB,UAAAC,EACA,SAAUC,EACV,QAAAC,EACA,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAAgBL,GAAaF,CAAa,EAE3D,OACCH,EAACW,EAAA,CACA,gBAAeF,EACf,UAAWG,EACV,0FACA,8CACA,kHACA,kEACAR,CACD,EACA,QAAUS,GAAU,CACnB,GAAIJ,EAAU,CACbI,EAAM,eAAe,EACrBA,EAAM,gBAAgB,EACtB,MACD,CACAP,IAAUO,CAAK,CAChB,EACA,IAAKL,EACJ,GAAGD,EAEJ,SAAAP,EAACc,EAAA,CACA,UAAWC,EACV,gGACA,uFACD,EACD,EACD,CAEF,CACD,EACAd,EAAO,YAAc","names":["SwitchPrimitiveRoot","SwitchPrimitiveThumb","clsx","forwardRef","jsx","Switch","forwardRef","_ariaReadOnly","className","_readOnly","onClick","props","ref","readOnly","parseBooleanish","SwitchPrimitiveRoot","cx","event","SwitchPrimitiveThumb","clsx"]}
+{"version":3,"sources":["../src/components/switch/switch.tsx"],"sourcesContent":["import {\n\tRoot as SwitchPrimitiveRoot,\n\tThumb as SwitchPrimitiveThumb,\n} from \"@radix-ui/react-switch\";\nimport clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype SwitchProps = ComponentPropsWithoutRef<typeof SwitchPrimitiveRoot> & {\n\t/**\n\t * Makes the switch immutable, meaning the user can not edit the control.\n\t */\n\treadOnly?: boolean;\n};\n\n/**\n * A form control that allows the user to toggle between checked and not checked.\n *\n * @see https://mantle.ngrok.com/components/switch#api-switch\n *\n * @example\n * ```tsx\n * <form>\n *   <Label htmlFor=\"airplane-mode\" className=\"flex items-center gap-2\">\n *     Airplane Mode\n *     <Switch name=\"airplane-mode\" id=\"airplane-mode\" />\n *   </Label>\n * </form>\n * ```\n */\nconst Switch = forwardRef<\n\tComponentRef<typeof SwitchPrimitiveRoot>,\n\tSwitchProps\n>(\n\t(\n\t\t{\n\t\t\t\"aria-readonly\": _ariaReadOnly,\n\t\t\tclassName,\n\t\t\treadOnly: _readOnly,\n\t\t\tonClick,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst readOnly = parseBooleanish(_readOnly ?? _ariaReadOnly);\n\n\t\treturn (\n\t\t\t<SwitchPrimitiveRoot\n\t\t\t\taria-readonly={readOnly}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full outline-none\",\n\t\t\t\t\t\"disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-none focus-visible:ring-4\",\n\t\t\t\t\t\"data-state-checked:bg-blue-500 data-state-unchecked:bg-gray-400\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tif (readOnly) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SwitchPrimitiveThumb\n\t\t\t\t\tclassName={clsx(\n\t\t\t\t\t\t\"pointer-events-none block size-4 rounded-full bg-[#fff] shadow-md ring-0 transition-transform\",\n\t\t\t\t\t\t\"data-state-checked:translate-x-[1.125rem] data-state-unchecked:translate-x-[0.125rem]\",\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t</SwitchPrimitiveRoot>\n\t\t);\n\t},\n);\nSwitch.displayName = \"Switch\";\n\nexport {\n\t//\n\tSwitch,\n};\n"],"mappings":"gFAAA,OACC,QAAQA,EACR,SAASC,MACH,yBACP,OAAOC,MAAU,OACjB,OAAS,cAAAC,MAAkB,QAgEvB,cAAAC,MAAA,oBArCJ,IAAMC,EAASC,EAId,CACC,CACC,gBAAiBC,EACjB,UAAAC,EACA,SAAUC,EACV,QAAAC,EACA,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAAgBL,GAAaF,CAAa,EAE3D,OACCH,EAACW,EAAA,CACA,gBAAeF,EACf,UAAWG,EACV,0FACA,8CACA,kHACA,kEACAR,CACD,EACA,QAAUS,GAAU,CACnB,GAAIJ,EAAU,CACbI,EAAM,eAAe,EACrBA,EAAM,gBAAgB,EACtB,MACD,CACAP,IAAUO,CAAK,CAChB,EACA,IAAKL,EACJ,GAAGD,EAEJ,SAAAP,EAACc,EAAA,CACA,UAAWC,EACV,gGACA,uFACD,EACD,EACD,CAEF,CACD,EACAd,EAAO,YAAc","names":["SwitchPrimitiveRoot","SwitchPrimitiveThumb","clsx","forwardRef","jsx","Switch","forwardRef","_ariaReadOnly","className","_readOnly","onClick","props","ref","readOnly","parseBooleanish","SwitchPrimitiveRoot","cx","event","SwitchPrimitiveThumb","clsx"]}

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-72UMV3YP.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,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};
 //# sourceMappingURL=table.js.map

package/dist/tabs.d.ts

@@ -3,10 +3,113 @@ import * as react from 'react';
 import { HTMLAttributes } from 'react';
 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
+ *
+ * @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 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>>;
-declare const TabBadge: ({ className, children, ...props }: HTMLAttributes<HTMLSpanElement>) => react_jsx_runtime.JSX.Element;
+/**
+ * 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;
+};
+/**
+ * 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 };

package/dist/tabs.js

@@ -1,2 +1,2 @@
-import{a as T}from"./chunk-3C5O3AQA.js";import{a as i}from"./chunk-AZ56JGNY.js";import{Content as N,List as z,Root as w,Trigger as f}from"@radix-ui/react-tabs";import S from"clsx";import{Children as W,cloneElement as B,createContext as E,forwardRef as n,isValidElement as H,useContext as p}from"react";import M from"tiny-invariant";import{Fragment as A,jsx as r,jsxs as v}from"react/jsx-runtime";var g=E({orientation:"horizontal"}),x=n(({className:t,children:o,orientation:e="horizontal",...a},s)=>r(w,{className:i("flex gap-4",e==="horizontal"?"flex-col":"flex-row",t),orientation:e,ref:s,...a,children:r(g.Provider,{value:{orientation:e},children:o})}));x.displayName="Tabs";var h=n(({className:t,...o},e)=>{let a=p(g);return r(z,{"aria-orientation":a.orientation,className:i("flex border-gray-200",a.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 u=()=>{let t=p(g);return r("span",{"aria-hidden":!0,className:S("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]")})},C=n(({"aria-disabled":t,asChild:o=!1,children:e,className:a,disabled:s,...y},m)=>{let d=p(g),b=T(t??s),c={"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",d.orientation==="horizontal"&&"rounded-tl-md rounded-tr-md",d.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",a),disabled:b,...y};if(o){let l=W.only(e);M(H(l),"When using `asChild`, TabsTrigger must be passed a single child as a JSX tag.");let R=l.props?.children,L={...b?{href:void 0,to:void 0}:{tabIndex:0}};return r(f,{asChild:!0,...c,ref:m,children:B(b?r("button",{type:"button"}):l,L,v(A,{children:[r(u,{}),R]}))})}return v(f,{ref:m,...c,children:[r(u,{}),e]})});C.displayName="TabsTrigger";var V=({className:t,children:o,...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:o}),P=n(({className:t,...o},e)=>r(N,{ref:e,className:i("focus-visible:ring-focus-accent outline-none focus-visible:ring-4",t),...o}));P.displayName="TabsContent";export{V as TabBadge,x as Tabs,P as TabsContent,h as TabsList,C as TabsTrigger};
+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};
 //# 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\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\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};\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\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);\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":"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","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 *   <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":"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","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"]}

package/dist/text-area.d.ts

@@ -13,7 +13,7 @@ type Props = ComponentProps<"textarea"> & WithValidation & {
  * to enter a sizeable amount of free-form text, for example a comment on a
  * review or feedback form.
  *
- * @see https://mantle.ngrok.com/components/text-area#api
+ * @see https://mantle.ngrok.com/components/text-area#api-text-area
  *
  * @example
  * ```tsx
@@ -27,6 +27,7 @@ type Props = ComponentProps<"textarea"> & WithValidation & {
  *     />
  *   </div>
  * </form>
+ * ```
  */
 declare const TextArea: react.ForwardRefExoticComponent<Omit<Props, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
 

package/dist/text-area.js.map

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

package/dist/theme-provider.d.ts

@@ -9,10 +9,19 @@ type Props = {
     includeNunitoSans?: boolean;
 };
 /**
- * Preload custom fonts used in the theme. This should be added to the head of the document in your application, preferably as high as possible.
- * Normally you won't use this directly, but instead use the `MantleThemeHeadContent` component which includes this.
- */
-declare const PreloadFonts: ({ includeNunitoSans }: Props) => react_jsx_runtime.JSX.Element;
+ * Preload custom fonts used in the theme.
+ *
+ * @see https://mantle.ngrok.com/components/theme-provider#api-preload-fonts
+ *
+ * @example
+ * ```tsx
+ * <PreloadFonts includeNunitoSans />
+ * ```
+ */
+declare const PreloadFonts: {
+    ({ includeNunitoSans }: Props): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 /**
  * resolvedThemes is a tuple of valid themes that have been resolved from "system" to a specific theme.
@@ -56,8 +65,20 @@ type ThemeProviderProps = PropsWithChildren & {
 };
 /**
  * ThemeProvider is a React Context Provider that provides the current theme and a function to set the theme.
+ *
+ * @see https://mantle.ngrok.com/components/theme-provider#api-theme-provider
+ *
+ * @example
+ * ```tsx
+ * <ThemeProvider defaultTheme="system" storageKey="app-theme">
+ *   <App />
+ * </ThemeProvider>
+ * ```
  */
 declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare namespace ThemeProvider {
+    var displayName: string;
+}
 /**
  * useTheme returns the current theme and a function to set the theme.
  *
@@ -93,7 +114,10 @@ type MantleThemeHeadContentProps = {
  * MantleThemeHeadContent is a React component that prevents the wrong theme from flashing on initial page load.
  * Render as high as possible in the <head> element.
  */
-declare const MantleThemeHeadContent: ({ defaultTheme, storageKey, includeNunitoSans, }: MantleThemeHeadContentProps) => react_jsx_runtime.JSX.Element;
+declare const MantleThemeHeadContent: {
+    ({ defaultTheme, storageKey, includeNunitoSans, }: MantleThemeHeadContentProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 type InitialThemeProps = {
     className: string;
     "data-applied-theme": Omit<Theme, "system">;

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-3XX7M573.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-6RJ2G2DK.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

@@ -4,7 +4,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as ToastPrimitive from 'sonner';
 import { W as WithAsChild } from './as-child-DJ7x3JFV.js';
 import { W as WithStyleProps } from './with-style-props-VnLWm0Yd.js';
-import { a as SvgOnlyProps } from './svg-only-CS2INnEL.js';
+import { a as SvgOnlyProps } from './svg-only-Bj2yffO4.js';
 import './types-BuKAGhC-.js';
 
 type ToasterPrimitiveProps = ComponentProps<typeof ToastPrimitive.Toaster>;
@@ -21,8 +21,21 @@ type ToasterProps = WithStyleProps & Pick<ToasterPrimitiveProps, "containerAriaL
  *
  * Only one `<Toaster />` should be rendered in an app a time, preferably at the
  * root level of the app.
+ *
+ * @see https://mantle.ngrok.com/components/toast#api-toaster
+ *
+ * @example
+ * ```tsx
+ * <Toaster
+ *   position="top-right"
+ *   duration_ms={5000}
+ * />
+ * ```
  */
-declare const Toaster: ({ className, containerAriaLabel, dir, duration_ms, position, style, }: ToasterProps) => react_jsx_runtime.JSX.Element;
+declare const Toaster: {
+    ({ className, containerAriaLabel, dir, duration_ms, position, style, }: ToasterProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 type MakeToastOptions = {
     /**
      * Time in milliseconds that should elapse before automatically closing the toast.
@@ -37,6 +50,19 @@ type MakeToastOptions = {
 /**
  * Create a toast. Provide a `<Toast>` component as the `children` to be rendered
  * inside the `<Toaster />` section.
+ *
+ * @see https://mantle.ngrok.com/components/toast#api-make-toast
+ *
+ * @example
+ * ```tsx
+ * makeToast(
+ *   <Toast priority="success">
+ *     <ToastIcon />
+ *     <ToastMessage>Operation completed successfully!</ToastMessage>
+ *     <ToastAction>Dismiss</ToastAction>
+ *   </Toast>
+ * );
+ * ```
  */
 declare function makeToast(children: ReactNode, options?: MakeToastOptions): string | number;
 declare const priorities: readonly ["danger", "info", "success", "warning"];
@@ -47,22 +73,64 @@ type ToastProps = ComponentProps<"div"> & WithAsChild & {
 /**
  * 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.
+ *
+ * @see https://mantle.ngrok.com/components/toast#api-toast-message
+ *
+ * @example
+ * ```tsx
+ * <Toast priority="success">
+ *   <ToastIcon />
+ *   <ToastMessage>Your changes have been saved</ToastMessage>
+ * </Toast>
+ * ```
  */
 declare const ToastMessage: react.ForwardRefExoticComponent<Omit<ToastMessageProps, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
 

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-BGY3DO4G.js";import"./chunk-3XX7M573.js";import"./chunk-D3XF6J5A.js";import"./chunk-XQVVOOLT.js";import"./chunk-HDPLH5HC.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 s,d as a,e,f as r}from"./chunk-NRMIFYYG.js";import"./chunk-6RJ2G2DK.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};
 //# sourceMappingURL=toast.js.map

package/dist/tooltip.d.ts

@@ -8,39 +8,79 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
  * Wraps your app to provide global functionality to your tooltips.
  * Only one instance of this component should be rendered in your app, preferably at the root.
  *
- * @preview This component is in `preview` mode which means the API is not stable and may change.
- * There may also be bugs! Please file an issue if you find any! <3
+ * @see https://mantle.ngrok.com/components/tooltip#api-tooltip-provider
  *
- * https://github.com/ngrok-oss/mantle/issues
+ * @example
+ * ```tsx
+ * <TooltipProvider>
+ *   <App />
+ * </TooltipProvider>
+ * ```
  */
-declare const TooltipProvider: ({ delayDuration, ...props }: ComponentPropsWithoutRef<typeof Provider>) => react_jsx_runtime.JSX.Element;
+declare const TooltipProvider: {
+    ({ delayDuration, ...props }: ComponentPropsWithoutRef<typeof Provider>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 /**
  * 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`.
  *
- * @preview This component is in `preview` mode which means the API is not stable and may change.
- * There may also be bugs! Please file an issue if you find any! <3
+ * @see https://mantle.ngrok.com/components/tooltip#api-tooltip
  *
- * https://github.com/ngrok-oss/mantle/issues
+ * @example
+ * ```tsx
+ * <Tooltip>
+ *   <TooltipTrigger asChild>
+ *     <Button type="button" appearance="outlined">
+ *       Hover me
+ *     </Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>
+ *     This is a tooltip
+ *   </TooltipContent>
+ * </Tooltip>
+ * ```
  */
 declare const Tooltip: react.FC<_radix_ui_react_tooltip.TooltipProps>;
 /**
  * The trigger button that opens the tooltip.
  *
- * @preview This component is in `preview` mode which means the API is not stable and may change.
- * There may also be bugs! Please file an issue if you find any! <3
+ * @see https://mantle.ngrok.com/components/tooltip#api-tooltip-trigger
  *
- * https://github.com/ngrok-oss/mantle/issues
+ * @example
+ * ```tsx
+ * <Tooltip>
+ *   <TooltipTrigger asChild>
+ *     <Button type="button" appearance="outlined">
+ *       Hover me
+ *     </Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>
+ *     This is a tooltip
+ *   </TooltipContent>
+ * </Tooltip>
+ * ```
  */
 declare const TooltipTrigger: react.ForwardRefExoticComponent<_radix_ui_react_tooltip.TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 /**
  * The content to render inside the tooltip.
  *
- * @preview This component is in `preview` mode which means the API is not stable and may change.
- * There may also be bugs! Please file an issue if you find any! <3
+ * @see https://mantle.ngrok.com/components/tooltip#api-tooltip-content
  *
- * https://github.com/ngrok-oss/mantle/issues
+ * @example
+ * ```tsx
+ * <Tooltip>
+ *   <TooltipTrigger asChild>
+ *     <Button type="button" appearance="outlined">
+ *       Hover me
+ *     </Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>
+ *     This is a tooltip
+ *   </TooltipContent>
+ * </Tooltip>
+ * ```
  */
 declare const TooltipContent: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tooltip.TooltipContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 

package/dist/tooltip.js

@@ -1,2 +1,2 @@
-import{a as e}from"./chunk-AZ56JGNY.js";import{Content as p,Provider as s,Root as f,Trigger as m}from"@radix-ui/react-tooltip";import{forwardRef as l}from"react";import{jsx as n}from"react/jsx-runtime";var C=({delayDuration:o=0,...t})=>n(s,{delayDuration:o??0,...t}),T=f,c=m,i=l(({children:o,className:t,sideOffset:r=4,...d},a)=>n(p,{ref:a,sideOffset:r,className:e("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-hidden break-words rounded-md px-3 py-1.5 text-sm shadow font-sans",t),...d,children:o}));i.displayName="TooltipContent";export{T as Tooltip,i as TooltipContent,C as TooltipProvider,c as TooltipTrigger};
+import{a as e}from"./chunk-AZ56JGNY.js";import{Content as l,Provider as f,Root as T,Trigger as C}from"@radix-ui/react-tooltip";import{forwardRef as g}from"react";import{jsx as p}from"react/jsx-runtime";var i=({delayDuration:o=0,...t})=>p(f,{delayDuration:o??0,...t});i.displayName="TooltipProvider";var r=T;r.displayName="Tooltip";var n=C;n.displayName="TooltipTrigger";var a=g(({children:o,className:t,sideOffset:d=4,...s},m)=>p(l,{ref:m,sideOffset:d,className:e("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-hidden break-words rounded-md px-3 py-1.5 text-sm shadow font-sans",t),...s,children:o}));a.displayName="TooltipContent";export{r as Tooltip,a as TooltipContent,i as TooltipProvider,n as TooltipTrigger};
 //# sourceMappingURL=tooltip.js.map

package/dist/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { Content, Provider, Root, Trigger } from \"@radix-ui/react-tooltip\";\nimport { forwardRef } from \"react\";\nimport type { 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 * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst TooltipProvider = ({\n\tdelayDuration = 0,\n\t...props\n}: ComponentPropsWithoutRef<typeof Provider>) => (\n\t<Provider delayDuration={delayDuration ?? 0} {...props} />\n);\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 * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst Tooltip = Root;\n\n/**\n * The trigger button that opens the tooltip.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst TooltipTrigger = Trigger;\n\n/**\n * The content to render inside the tooltip.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst TooltipContent = forwardRef<\n\tComponentRef<typeof Content>,\n\tComponentPropsWithoutRef<typeof Content>\n>(({ children, className, sideOffset = 4, ...props }, ref) => (\n\t<Content\n\t\tref={ref}\n\t\tsideOffset={sideOffset}\n\t\tclassName={cx(\n\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-hidden break-words rounded-md px-3 py-1.5 text-sm shadow font-sans\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</Content>\n));\nTooltipContent.displayName = \"TooltipContent\";\n\nexport {\n\t//,\n\tTooltip,\n\tTooltipContent,\n\tTooltipProvider,\n\tTooltipTrigger,\n};\n"],"mappings":"wCAAA,OAAS,WAAAA,EAAS,YAAAC,EAAU,QAAAC,EAAM,WAAAC,MAAe,0BACjD,OAAS,cAAAC,MAAkB,QAiB1B,cAAAC,MAAA,oBAJD,IAAMC,EAAkB,CAAC,CACxB,cAAAC,EAAgB,EAChB,GAAGC,CACJ,IACCH,EAACI,EAAA,CAAS,cAAeF,GAAiB,EAAI,GAAGC,EAAO,EAanDE,EAAUC,EAUVC,EAAiBC,EAUjBC,EAAiBC,EAGrB,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,WAAAC,EAAa,EAAG,GAAGV,CAAM,EAAGW,IACrDd,EAACe,EAAA,CACA,IAAKD,EACL,WAAYD,EACZ,UAAWG,EACV,iYACAJ,CACD,EACC,GAAGT,EAEH,SAAAQ,EACF,CACA,EACDF,EAAe,YAAc","names":["Content","Provider","Root","Trigger","forwardRef","jsx","TooltipProvider","delayDuration","props","Provider","Tooltip","Root","TooltipTrigger","Trigger","TooltipContent","forwardRef","children","className","sideOffset","ref","Content","cx"]}
+{"version":3,"sources":["../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { Content, Provider, Root, Trigger } from \"@radix-ui/react-tooltip\";\nimport { forwardRef } from \"react\";\nimport type { 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#api-tooltip-provider\n *\n * @example\n * ```tsx\n * <TooltipProvider>\n *   <App />\n * </TooltipProvider>\n * ```\n */\nconst TooltipProvider = ({\n\tdelayDuration = 0,\n\t...props\n}: ComponentPropsWithoutRef<typeof Provider>) => (\n\t<Provider delayDuration={delayDuration ?? 0} {...props} />\n);\nTooltipProvider.displayName = \"TooltipProvider\";\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#api-tooltip\n *\n * @example\n * ```tsx\n * <Tooltip>\n *   <TooltipTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </TooltipTrigger>\n *   <TooltipContent>\n *     This is a tooltip\n *   </TooltipContent>\n * </Tooltip>\n * ```\n */\nconst Tooltip = Root;\nTooltip.displayName = \"Tooltip\";\n\n/**\n * The trigger button that opens the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#api-tooltip-trigger\n *\n * @example\n * ```tsx\n * <Tooltip>\n *   <TooltipTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </TooltipTrigger>\n *   <TooltipContent>\n *     This is a tooltip\n *   </TooltipContent>\n * </Tooltip>\n * ```\n */\nconst TooltipTrigger = Trigger;\nTooltipTrigger.displayName = \"TooltipTrigger\";\n\n/**\n * The content to render inside the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#api-tooltip-content\n *\n * @example\n * ```tsx\n * <Tooltip>\n *   <TooltipTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </TooltipTrigger>\n *   <TooltipContent>\n *     This is a tooltip\n *   </TooltipContent>\n * </Tooltip>\n * ```\n */\nconst TooltipContent = forwardRef<\n\tComponentRef<typeof Content>,\n\tComponentPropsWithoutRef<typeof Content>\n>(({ children, className, sideOffset = 4, ...props }, ref) => (\n\t<Content\n\t\tref={ref}\n\t\tsideOffset={sideOffset}\n\t\tclassName={cx(\n\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-hidden break-words rounded-md px-3 py-1.5 text-sm shadow font-sans\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</Content>\n));\nTooltipContent.displayName = \"TooltipContent\";\n\nexport {\n\t//,\n\tTooltip,\n\tTooltipContent,\n\tTooltipProvider,\n\tTooltipTrigger,\n};\n"],"mappings":"wCAAA,OAAS,WAAAA,EAAS,YAAAC,EAAU,QAAAC,EAAM,WAAAC,MAAe,0BACjD,OAAS,cAAAC,MAAkB,QAqB1B,cAAAC,MAAA,oBAJD,IAAMC,EAAkB,CAAC,CACxB,cAAAC,EAAgB,EAChB,GAAGC,CACJ,IACCH,EAACI,EAAA,CAAS,cAAeF,GAAiB,EAAI,GAAGC,EAAO,EAEzDF,EAAgB,YAAc,kBAuB9B,IAAMI,EAAUC,EAChBD,EAAQ,YAAc,UAqBtB,IAAME,EAAiBC,EACvBD,EAAe,YAAc,iBAqB7B,IAAME,EAAiBC,EAGrB,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,WAAAC,EAAa,EAAG,GAAGV,CAAM,EAAGW,IACrDd,EAACe,EAAA,CACA,IAAKD,EACL,WAAYD,EACZ,UAAWG,EACV,iYACAJ,CACD,EACC,GAAGT,EAEH,SAAAQ,EACF,CACA,EACDF,EAAe,YAAc","names":["Content","Provider","Root","Trigger","forwardRef","jsx","TooltipProvider","delayDuration","props","Provider","Tooltip","Root","TooltipTrigger","Trigger","TooltipContent","forwardRef","children","className","sideOffset","ref","Content","cx"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.32.0",
+  "version": "0.32.1",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",