@ngrok/mantle 0.58.2 → 0.58.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tabs.d.ts +8 -1
- package/dist/tabs.js +1 -1
- package/dist/tabs.js.map +1 -1
- package/package.json +1 -1
package/dist/tabs.d.ts
CHANGED
|
@@ -45,7 +45,14 @@ declare const Tabs: {
|
|
|
45
45
|
* </Tabs.Root>
|
|
46
46
|
* ```
|
|
47
47
|
*/
|
|
48
|
-
readonly Root: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsProps & react.RefAttributes<HTMLDivElement>, "ref"> &
|
|
48
|
+
readonly Root: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
49
|
+
/**
|
|
50
|
+
* The appearance of the tabs. Classic appearance shows the tab
|
|
51
|
+
* list with an underline; pill appearance shows each tab as a pill.
|
|
52
|
+
* @default "classic"
|
|
53
|
+
*/
|
|
54
|
+
appearance?: "classic" | "pill";
|
|
55
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
49
56
|
/**
|
|
50
57
|
* Contains the content associated with each trigger.
|
|
51
58
|
* The content panel that displays when its corresponding tab trigger is active.
|
package/dist/tabs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as v}from"./chunk-3C5O3AQA.js";import{a as r}from"./chunk-PFXFESEN.js";import{Content as V,List as w,Root as S,Trigger as T}from"@radix-ui/react-tabs";import{cva as b}from"class-variance-authority";import W from"clsx";import{Children as O,cloneElement as B,createContext as E,forwardRef as n,isValidElement as H,useContext as m}from"react";import M from"tiny-invariant";import{Fragment as X,jsx as i,jsxs as h}from"react/jsx-runtime";var c=E({orientation:"horizontal",appearance:"classic"}),x=n(({className:t,children:a,orientation:e="horizontal",appearance:o="classic",...s},p)=>i(S,{className:r("flex gap-4",e==="horizontal"?"flex-col":"flex-row",t),orientation:e,ref:p,...s,children:i(c.Provider,{value:{orientation:e,appearance:o},children:a})}));x.displayName="Tabs";var D=b("flex border-gray-200",{variants:{orientation:{horizontal:"flex-row items-center",vertical:"flex-col items-end gap-3.5 self-stretch"},appearance:{classic:"",pill:""}},compoundVariants:[{orientation:"horizontal",appearance:"pill",className:"gap-1"},{orientation:"horizontal",appearance:"classic",className:"gap-6 border-b"},{orientation:"vertical",appearance:"classic",className:"border-r"}]}),y=n(({className:t,...a},e)=>{let{orientation:o,appearance:s}=m(c);return i(w,{"aria-orientation":o,className:r(D({orientation:o,appearance:s}),t),ref:e,...a})});y.displayName="TabsList";var k=b("absolute z-0",{variants:{orientation:{horizontal:"-bottom-px left-0 right-0 h-[0.1875rem]",vertical:"-right-px bottom-0 top-0 w-[0.1875rem]"},appearance:{classic:"group-data-state-active/tab-trigger:bg-blue-600",pill:"hidden"}}}),d=()=>{let{orientation:t,appearance:a}=m(c);return i("span",{"aria-hidden":!0,className:W(k({orientation:t,appearance:a}))})};d.displayName="TabsTriggerDecoration";var I=b(r("group/tab-trigger relative flex cursor-pointer items-center gap-1 whitespace-nowrap py-3 text-sm font-medium text-gray-600","ring-focus-accent outline-hidden","aria-disabled:cursor-default aria-disabled:opacity-50","focus-visible:ring-4","[&>svg]:shrink-0 [&>svg]:size-5","not-aria-disabled:hover:text-gray-900"),{variants:{orientation:{horizontal:"rounded-tl-md rounded-tr-md",vertical:"rounded-bl-md rounded-tl-md pr-3"},appearance:{classic:r("not-aria-disabled:hover:data-state-active:text-blue-600","data-state-active:text-blue-600"),pill:r("not-aria-disabled:hover:data-state-active:text-blue-700","not-aria-disabled:hover:data-state-active:bg-accent-500/20","data-state-active:text-blue-700","data-state-active:bg-accent-500/20","rounded-full py-2 px-3")}}}),P=n(({"aria-disabled":t,asChild:a=!1,children:e,className:o,disabled:s,...p},f)=>{let{orientation:N,appearance:z}=m(c),l=v(t??s),u={"aria-disabled":t??s,className:r(I({orientation:N,appearance:z}),o),disabled:l,...p};if(a){let g=O.only(e);M(H(g),"When using `asChild`, TabsTrigger must be passed a single child as a JSX tag.");let L=g.props?.children,A={...l?{href:void 0,to:void 0}:{tabIndex:0}};return i(T,{asChild:!0,...u,ref:f,children:B(l?i("button",{type:"button"}):g,A,h(X,{children:[i(d,{}),L]}))})}return h(T,{ref:f,...u,children:[i(d,{}),e]})});P.displayName="TabsTrigger";var C=({className:t,children:a,...e})=>i("span",{className:r("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 R=n(({className:t,...a},e)=>i(V,{ref:e,className:r("focus-visible:ring-focus-accent outline-hidden focus-visible:ring-4",t),...a}));R.displayName="TabsContent";var J={Root:x,Content:R,List:y,Trigger:P,Badge:C};export{J as Tabs};
|
|
2
2
|
//# sourceMappingURL=tabs.js.map
|
package/dist/tabs.js.map
CHANGED
|
@@ -1 +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.Root defaultValue=\"account\">\n * <Tabs.List>\n * <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n * <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n * </Tabs.List>\n * <Tabs.Content value=\"account\">\n * <p>Make changes to your account here.</p>\n * </Tabs.Content>\n * <Tabs.Content value=\"password\">\n * <p>Change your password here.</p>\n * </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Root = forwardRef<\n\tComponentRef<typeof TabsPrimitiveRoot>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveRoot>\n>(({ 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.Root defaultValue=\"account\">\n * <Tabs.List>\n * <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n * <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n * </Tabs.List>\n * <Tabs.Content value=\"account\">\n * <p>Make changes to your account here.</p>\n * </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst List = forwardRef<\n\tComponentRef<typeof TabsPrimitiveList>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveList>\n>(({ className, ...props }, ref) => {\n\tconst 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.Root defaultValue=\"account\">\n * <Tabs.List>\n * <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n * <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n * </Tabs.List>\n * <Tabs.Content value=\"account\">\n * <p>Make changes to your account here.</p>\n * </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Trigger = forwardRef<\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-hidden\",\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.Root defaultValue=\"account\">\n * <Tabs.List>\n * <Tabs.Trigger value=\"account\">\n * Account <Tabs.Badge>5</Tabs.Badge>\n * </Tabs.Trigger>\n * <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n * </Tabs.List>\n * </Tabs.Root>\n * ```\n */\nconst Badge = ({\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.Root defaultValue=\"account\">\n * <Tabs.List>\n * <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n * <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n * </Tabs.List>\n * <Tabs.Content value=\"account\">\n * <p>Make changes to your account here.</p>\n * </Tabs.Content>\n * <Tabs.Content value=\"password\">\n * <p>Change your password here.</p>\n * </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof TabsPrimitiveContent>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveContent>\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitiveContent\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"focus-visible:ring-focus-accent outline-hidden 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.Root defaultValue=\"account\">\n * <Tabs.List>\n * <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n * <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n * </Tabs.List>\n * <Tabs.Content value=\"account\">\n * <p>Make changes to your account here.</p>\n * </Tabs.Content>\n * <Tabs.Content value=\"password\">\n * <p>Change your password here.</p>\n * </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Tabs = {\n\t/**\n\t * The root container of the tabs component that provides context for all tab components.\n\t * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#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"]}
|
|
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 { cva } from \"class-variance-authority\";\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 Orientation = \"horizontal\" | \"vertical\";\ntype Appearance = \"classic\" | \"pill\";\n\ntype TabsStateContextValue = {\n\torientation: Orientation;\n\tappearance: Appearance;\n};\n\nconst TabsStateContext = createContext<TabsStateContextValue>({\n\torientation: \"horizontal\",\n\tappearance: \"classic\",\n});\n\n/**\n * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n * The root component that provides context for all tab components.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n * <Tabs.List>\n * <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n * <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n * </Tabs.List>\n * <Tabs.Content value=\"account\">\n * <p>Make changes to your account here.</p>\n * </Tabs.Content>\n * <Tabs.Content value=\"password\">\n * <p>Change your password here.</p>\n * </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Root = forwardRef<\n\tComponentRef<typeof TabsPrimitiveRoot>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveRoot> & {\n\t\t/**\n\t\t * The appearance of the tabs. Classic appearance shows the tab\n\t\t * list with an underline; pill appearance shows each tab as a pill.\n\t\t * @default \"classic\"\n\t\t */\n\t\tappearance?: \"classic\" | \"pill\";\n\t}\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\torientation = \"horizontal\",\n\t\t\tappearance = \"classic\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<TabsPrimitiveRoot\n\t\t\tclassName={cx(\n\t\t\t\t\"flex gap-4\",\n\t\t\t\torientation === \"horizontal\" ? \"flex-col\" : \"flex-row\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\torientation={orientation}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t<TabsStateContext.Provider value={{ orientation, appearance }}>\n\t\t\t\t{children}\n\t\t\t</TabsStateContext.Provider>\n\t\t</TabsPrimitiveRoot>\n\t),\n);\nRoot.displayName = \"Tabs\";\n\n/**\n * Variants for the List component\n */\nconst listVariants = cva(\"flex border-gray-200\", {\n\tvariants: {\n\t\torientation: {\n\t\t\thorizontal: \"flex-row items-center\",\n\t\t\tvertical: \"flex-col items-end gap-3.5 self-stretch\",\n\t\t} as const satisfies Record<Orientation, string>,\n\t\tappearance: {\n\t\t\tclassic: \"\",\n\t\t\tpill: \"\",\n\t\t} as const satisfies Record<Appearance, string>,\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\torientation: \"horizontal\",\n\t\t\tappearance: \"pill\",\n\t\t\tclassName: \"gap-1\",\n\t\t},\n\t\t{\n\t\t\torientation: \"horizontal\",\n\t\t\tappearance: \"classic\",\n\t\t\tclassName: \"gap-6 border-b\",\n\t\t},\n\t\t{\n\t\t\torientation: \"vertical\",\n\t\t\tappearance: \"classic\",\n\t\t\tclassName: \"border-r\",\n\t\t},\n\t],\n});\n\n/**\n * Contains the triggers that are aligned along the edge of the active content.\n * The container for tab triggers that provides the visual layout for tab navigation.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs-list\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n * <Tabs.List>\n * <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n * <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n * </Tabs.List>\n * <Tabs.Content value=\"account\">\n * <p>Make changes to your account here.</p>\n * </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst List = forwardRef<\n\tComponentRef<typeof TabsPrimitiveList>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveList>\n>(({ className, ...props }, ref) => {\n\tconst { orientation, appearance } = useContext(TabsStateContext);\n\n\treturn (\n\t\t<TabsPrimitiveList\n\t\t\taria-orientation={orientation}\n\t\t\tclassName={cx(listVariants({ orientation, appearance }), className)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nList.displayName = \"TabsList\";\n\ntype TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitiveTrigger>;\n\n/**\n * Variants for the TabsTriggerDecoration component\n */\nconst triggerDecorationVariants = cva(\"absolute z-0\", {\n\tvariants: {\n\t\torientation: {\n\t\t\thorizontal: \"-bottom-px left-0 right-0 h-[0.1875rem]\",\n\t\t\tvertical: \"-right-px bottom-0 top-0 w-[0.1875rem]\",\n\t\t} as const satisfies Record<Orientation, string>,\n\t\tappearance: {\n\t\t\tclassic: \"group-data-state-active/tab-trigger:bg-blue-600\",\n\t\t\tpill: \"hidden\",\n\t\t} as const satisfies Record<Appearance, string>,\n\t},\n});\n\nconst TabsTriggerDecoration = () => {\n\tconst { orientation, appearance } = useContext(TabsStateContext);\n\n\treturn (\n\t\t<span\n\t\t\taria-hidden\n\t\t\tclassName={clsx(triggerDecorationVariants({ orientation, appearance }))}\n\t\t/>\n\t);\n};\nTabsTriggerDecoration.displayName = \"TabsTriggerDecoration\";\n\n/**\n * Variants for the Trigger component\n */\nconst triggerVariants = cva(\n\tcx(\n\t\t\"group/tab-trigger relative flex cursor-pointer items-center gap-1 whitespace-nowrap py-3 text-sm font-medium text-gray-600\",\n\t\t\"ring-focus-accent outline-hidden\",\n\t\t\"aria-disabled:cursor-default aria-disabled:opacity-50\",\n\t\t\"focus-visible:ring-4\",\n\t\t\"[&>svg]:shrink-0 [&>svg]:size-5\",\n\t\t\"not-aria-disabled:hover:text-gray-900\",\n\t),\n\t{\n\t\tvariants: {\n\t\t\torientation: {\n\t\t\t\thorizontal: \"rounded-tl-md rounded-tr-md\",\n\t\t\t\tvertical: \"rounded-bl-md rounded-tl-md pr-3\",\n\t\t\t} as const satisfies Record<Orientation, string>,\n\t\t\tappearance: {\n\t\t\t\tclassic: cx(\n\t\t\t\t\t\"not-aria-disabled:hover:data-state-active:text-blue-600\",\n\t\t\t\t\t\"data-state-active:text-blue-600\",\n\t\t\t\t),\n\t\t\t\tpill: cx(\n\t\t\t\t\t\"not-aria-disabled:hover:data-state-active:text-blue-700\",\n\t\t\t\t\t\"not-aria-disabled:hover:data-state-active:bg-accent-500/20\",\n\t\t\t\t\t\"data-state-active:text-blue-700\",\n\t\t\t\t\t\"data-state-active:bg-accent-500/20\",\n\t\t\t\t\t\"rounded-full py-2 px-3\",\n\t\t\t\t),\n\t\t\t} as const satisfies Record<Appearance, string>,\n\t\t},\n\t},\n);\n\n/**\n * The button that activates its associated content.\n * A clickable tab trigger that switches between different tab content panels.\n *\n * @see https://mantle.ngrok.com/components/tabs#api-tabs-trigger\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"account\">\n * <Tabs.List>\n * <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n * <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n * </Tabs.List>\n * <Tabs.Content value=\"account\">\n * <p>Make changes to your account here.</p>\n * </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Trigger = forwardRef<\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 { orientation, appearance } = useContext(TabsStateContext);\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled);\n\n\t\tconst tabsTriggerProps = {\n\t\t\t\"aria-disabled\": _ariaDisabled ?? _disabled,\n\t\t\tclassName: cx(triggerVariants({ orientation, appearance }), className),\n\t\t\tdisabled,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<TabsTriggerProps>(singleChild),\n\t\t\t\t\"When using `asChild`, TabsTrigger must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\tconst cloneProps = {\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.Root defaultValue=\"account\">\n * <Tabs.List>\n * <Tabs.Trigger value=\"account\">\n * Account <Tabs.Badge>5</Tabs.Badge>\n * </Tabs.Trigger>\n * <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n * </Tabs.List>\n * </Tabs.Root>\n * ```\n */\nconst Badge = ({\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.Root defaultValue=\"account\">\n * <Tabs.List>\n * <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n * <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n * </Tabs.List>\n * <Tabs.Content value=\"account\">\n * <p>Make changes to your account here.</p>\n * </Tabs.Content>\n * <Tabs.Content value=\"password\">\n * <p>Change your password here.</p>\n * </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof TabsPrimitiveContent>,\n\tComponentPropsWithoutRef<typeof TabsPrimitiveContent>\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitiveContent\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"focus-visible:ring-focus-accent outline-hidden 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.Root defaultValue=\"account\">\n * <Tabs.List>\n * <Tabs.Trigger value=\"account\">Account</Tabs.Trigger>\n * <Tabs.Trigger value=\"password\">Password</Tabs.Trigger>\n * </Tabs.List>\n * <Tabs.Content value=\"account\">\n * <p>Make changes to your account here.</p>\n * </Tabs.Content>\n * <Tabs.Content value=\"password\">\n * <p>Change your password here.</p>\n * </Tabs.Content>\n * </Tabs.Root>\n * ```\n */\nconst Tabs = {\n\t/**\n\t * The root container of the tabs component that provides context for all tab components.\n\t * A set of layered sections of content—known as tab panels—that are displayed one at a time.\n\t *\n\t * @see https://mantle.ngrok.com/components/tabs#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","cva","clsx","Children","cloneElement","createContext","forwardRef","isValidElement","useContext","invariant","Fragment","jsx","jsxs","TabsStateContext","createContext","Root","forwardRef","className","children","orientation","appearance","props","ref","TabsPrimitiveRoot","cx","listVariants","cva","List","useContext","TabsPrimitiveList","triggerDecorationVariants","TabsTriggerDecoration","clsx","triggerVariants","Trigger","_ariaDisabled","asChild","_disabled","disabled","parseBooleanish","tabsTriggerProps","singleChild","Children","invariant","isValidElement","grandchildren","cloneProps","TabsPrimitiveTrigger","cloneElement","Badge","Content","TabsPrimitiveContent","Tabs"]}
|