@wallarm-org/claude-design 0.0.0-stage → 4.8.0

package/dist/project/components/Tabs/README.md

@@ -0,0 +1,443 @@
+Switches between a few peer sections of one page without going anywhere — `Tabs` owns the panels, which is what separates it from `SegmentedControl`. Underline tabs are the default for a page’s primary division; reach for `SegmentedTabs` for scoped views of one collection or a second level below these, `SegmentedControl` for a toggle that owns no panel, and `Accordion` when the sections should be open at once.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `size` | `"medium" \| "small"` | no | `medium` |  |
+| `variant` | `"default" \| "grayscale"` | no | — |  |
+| `value` | `string \| undefined` | no | — |  |
+| `default-value` | `string \| undefined` | no | — |  |
+| `lazy-mount` | `boolean \| undefined` | no | `true` |  |
+| `unmount-on-exit` | `boolean \| undefined` | no | `true` |  |
+| `as-child` | `boolean \| undefined` | no | `false` |  |
+| `on-change` | `((value: string) => void) \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.TabsList` — `TabsListProps` in the declaration bundle.
+- `WallarmDS.TabsButton` — `TabsButtonProps` in the declaration bundle.
+- `WallarmDS.TabsContent` — `TabsContentProps` in the declaration bundle.
+- `WallarmDS.TabsLineActions` — `TabsLineActionsProps` in the declaration bundle.
+- `WallarmDS.TabsSeparator` — `TabsSeparatorProps` in the declaration bundle.
+- `WallarmDS.TabsTrigger` — `TabsTriggerProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+The smallest complete set: every `TabsTrigger` value pairs with a `TabsContent` of the same value, and the panel mounts the first time it opens.
+
+Source: Tabs/Tabs.stories.tsx#Basic
+
+### Variants
+
+`grayscale` mutes the active underline and label for a bar that should sit quieter than the content it introduces.
+
+Source: Tabs/Tabs.stories.tsx#Variants
+
+### Icons
+
+An icon before the label, for a set where the words alone are slow to scan.
+
+Source: Tabs/Tabs.stories.tsx#Icons
+
+### IconsOnly
+
+Icons with no labels — only for a set the reader already knows, and each trigger still needs an accessible name.
+
+Source: Tabs/Tabs.stories.tsx#IconsOnly
+
+### Badge
+
+A count in the trigger, which is what turns a tab into a status: how much is waiting behind it.
+
+Source: Tabs/Tabs.stories.tsx#Badge
+
+### Sizes
+
+`medium` and `small`. `Tabs` is the one in the switcher family with a size — the segmented pills are fixed height.
+
+Source: Tabs/Tabs.stories.tsx#Sizes
+
+### Scrollable
+
+Past the available width the list scrolls sideways with arrow buttons rather than wrapping, so the bar stays one line however many tabs there are.
+
+Source: Tabs/Tabs.stories.tsx#Scrollable
+
+### Controlled
+
+`value` plus `onChange` when something outside the tabs decides which one is open — a route, or a step in a flow.
+
+Source: Tabs/Tabs.stories.tsx#Controlled
+
+### Disabled
+
+A disabled trigger keeps its place but drops out of the keyboard order. Prefer hiding a tab that has nothing behind it.
+
+Source: Tabs/Tabs.stories.tsx#Disabled
+
+### WithSeparator
+
+`TabsSeparator` groups the triggers inside one bar, for when two of them belong together more than the rest.
+
+Source: Tabs/Tabs.stories.tsx#WithSeparator
+
+### WithLineActions
+
+`TabsLineActions` puts controls on the right of the bar itself, which is where an action about the whole section belongs rather than inside a panel.
+
+Source: Tabs/Tabs.stories.tsx#WithLineActions
+
+## Story sources
+
+### Tabs/Tabs.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import { fn } from 'storybook/test';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { CircleDashed, Earth, Ellipsis, LayoutDashboard, Search } from '../../icons';
+import { Button } from '../Button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../DropdownMenu';
+import { NumericBadge } from '../NumericBadge';
+import { VStack } from '../Stack';
+import { Tabs } from './Tabs';
+import { TabsButton } from './TabsButton';
+import { TabsContent } from './TabsContent';
+import { TabsLineActions } from './TabsLineActions';
+import { TabsList } from './TabsList';
+import { TabsSeparator } from './TabsSeparator';
+import { TabsTrigger } from './TabsTrigger';
+
+const DESCRIPTION = [
+  'Switches between a few peer sections of one page without going anywhere — `Tabs` owns the panels, which is what separates it from `SegmentedControl`.',
+  'Underline tabs are the default for a page’s primary division; reach for `SegmentedTabs` for scoped views of one collection or a second level below these, `SegmentedControl` for a toggle that owns no panel, and `Accordion` when the sections should be open at once.',
+].join(' ');
+
+const meta = {
+  title: 'Navigation/Tabs',
+  component: Tabs,
+  subcomponents: {
+    TabsButton,
+    TabsContent,
+    TabsLineActions,
+    TabsList,
+    TabsSeparator,
+    TabsTrigger,
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+
+  args: { onChange: fn() },
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+
+type Story = StoryFn<typeof meta>;
+
+/** The smallest complete set: every `TabsTrigger` value pairs with a `TabsContent` of the same value, and the panel mounts the first time it opens. */
+export const Basic: Story = () => (
+  <div className='w-600'>
+    <Tabs defaultValue='1' data-testid='tabs'>
+      <TabsList>
+        <TabsTrigger value='1'>Tab 1</TabsTrigger>
+        <TabsTrigger value='2'>Tab 2</TabsTrigger>
+        <TabsTrigger value='3'>Tab 3</TabsTrigger>
+      </TabsList>
+      <TabsContent value='1'>Content for Tab 1</TabsContent>
+      <TabsContent value='2'>Content for Tab 2</TabsContent>
+      <TabsContent value='3'>Content for Tab 3</TabsContent>
+    </Tabs>
+  </div>
+);
+
+/** `grayscale` mutes the active underline and label for a bar that should sit quieter than the content it introduces. */
+export const Variants: Story = () => (
+  <div className='w-600'>
+    <VStack gap={32}>
+      <Tabs defaultValue='1'>
+        <TabsList>
+          <TabsTrigger value='1'>Tab 1 (Default)</TabsTrigger>
+          <TabsTrigger value='2'>Tab 2 (Default)</TabsTrigger>
+          <TabsTrigger value='3'>Tab 3 (Default)</TabsTrigger>
+        </TabsList>
+        <TabsContent value='1'>Content for Tab 1</TabsContent>
+        <TabsContent value='2'>Content for Tab 2</TabsContent>
+        <TabsContent value='3'>Content for Tab 3</TabsContent>
+      </Tabs>
+
+      <Tabs defaultValue='1' variant='grayscale'>
+        <TabsList>
+          <TabsTrigger value='1'>Tab 1 (Grayscale)</TabsTrigger>
+          <TabsTrigger value='2'>Tab 2 (Grayscale)</TabsTrigger>
+          <TabsTrigger value='3'>Tab 3 (Grayscale)</TabsTrigger>
+        </TabsList>
+        <TabsContent value='1'>Content for Tab 1</TabsContent>
+        <TabsContent value='2'>Content for Tab 2</TabsContent>
+        <TabsContent value='3'>Content for Tab 3</TabsContent>
+      </Tabs>
+    </VStack>
+  </div>
+);
+
+/** An icon before the label, for a set where the words alone are slow to scan. */
+export const Icons: Story = () => (
+  <div className='w-600'>
+    <Tabs defaultValue='1'>
+      <TabsList>
+        <TabsTrigger value='1'>
+          <CircleDashed />
+          Tab 1
+        </TabsTrigger>
+        <TabsTrigger value='2'>
+          Tab 2
+          <CircleDashed />
+        </TabsTrigger>
+        <TabsTrigger value='3'>
+          <CircleDashed />
+          Tab 3
+          <CircleDashed />
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value='1'>Content for Tab 1</TabsContent>
+      <TabsContent value='2'>Content for Tab 2</TabsContent>
+      <TabsContent value='3'>Content for Tab 3</TabsContent>
+    </Tabs>
+  </div>
+);
+
+/** Icons with no labels — only for a set the reader already knows, and each trigger still needs an accessible name. */
+export const IconsOnly: Story = () => (
+  <div className='w-600'>
+    <Tabs defaultValue='1'>
+      <TabsList>
+        <TabsTrigger value='1'>
+          <LayoutDashboard />
+        </TabsTrigger>
+        <TabsTrigger value='2'>
+          <Search />
+        </TabsTrigger>
+        <TabsTrigger value='3'>
+          <Earth />
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value='1'>Content for Tab 1</TabsContent>
+      <TabsContent value='2'>Content for Tab 2</TabsContent>
+      <TabsContent value='3'>Content for Tab 3</TabsContent>
+    </Tabs>
+  </div>
+);
+
+/** A count in the trigger, which is what turns a tab into a status: how much is waiting behind it. */
+export const Badge: Story = () => (
+  <div className='w-600'>
+    <Tabs defaultValue='1'>
+      <TabsList>
+        <TabsTrigger value='1'>
+          <CircleDashed />
+          Tab 1<NumericBadge>2 </NumericBadge>
+        </TabsTrigger>
+        <TabsTrigger value='2'>
+          Tab 2<NumericBadge>2 </NumericBadge>
+        </TabsTrigger>
+        <TabsTrigger value='3'>
+          <CircleDashed />
+          Tab 3
+          <CircleDashed />
+          <NumericBadge>2 </NumericBadge>
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value='1'>Content for Tab 1</TabsContent>
+      <TabsContent value='2'>Content for Tab 2</TabsContent>
+      <TabsContent value='3'>Content for Tab 3</TabsContent>
+    </Tabs>
+  </div>
+);
+
+/** `medium` and `small`. `Tabs` is the one in the switcher family with a size — the segmented pills are fixed height. */
+export const Sizes: Story = () => (
+  <div className='w-600'>
+    <VStack gap={32}>
+      <Tabs defaultValue='1' size='medium'>
+        <TabsList>
+          <TabsTrigger value='1'>Tab 1</TabsTrigger>
+          <TabsTrigger value='2'>Tab 2</TabsTrigger>
+          <TabsTrigger value='3'>Tab 3</TabsTrigger>
+        </TabsList>
+        <TabsContent value='1'>Content for Tab 1</TabsContent>
+        <TabsContent value='2'>Content for Tab 2</TabsContent>
+        <TabsContent value='3'>Content for Tab 3</TabsContent>
+      </Tabs>
+
+      <Tabs defaultValue='1' size='small'>
+        <TabsList>
+          <TabsTrigger value='1'>Tab 1</TabsTrigger>
+          <TabsTrigger value='2'>Tab 2</TabsTrigger>
+          <TabsTrigger value='3'>Tab 3</TabsTrigger>
+        </TabsList>
+        <TabsContent value='1'>Content for Tab 1</TabsContent>
+        <TabsContent value='2'>Content for Tab 2</TabsContent>
+        <TabsContent value='3'>Content for Tab 3</TabsContent>
+      </Tabs>
+    </VStack>
+  </div>
+);
+
+/** Past the available width the list scrolls sideways with arrow buttons rather than wrapping, so the bar stays one line however many tabs there are. */
+export const Scrollable: Story = () => (
+  <div className='w-400'>
+    <Tabs defaultValue='1'>
+      <TabsList>
+        {new Array(20).fill(null).map((_, index) => {
+          const key = index + 1;
+          return (
+            <TabsTrigger key={key} value={String(key)}>
+              Tab {key}
+            </TabsTrigger>
+          );
+        })}
+      </TabsList>
+
+      {new Array(20).fill(null).map((_, index) => {
+        const key = index + 1;
+        return (
+          <TabsContent key={key} value={String(key)}>
+            Content for Tab {key}
+          </TabsContent>
+        );
+      })}
+    </Tabs>
+  </div>
+);
+
+/** `value` plus `onChange` when something outside the tabs decides which one is open — a route, or a step in a flow. */
+export const Controlled: Story = () => {
+  const [value, setValue] = useState('1');
+
+  return (
+    <Tabs value={value} onChange={setValue}>
+      <TabsList>
+        <TabsTrigger value='1'>Tab 1</TabsTrigger>
+        <TabsTrigger value='2'>Tab 2</TabsTrigger>
+        <TabsTrigger value='3'>Tab 3</TabsTrigger>
+      </TabsList>
+      <TabsContent value='1'>Content for Tab 1</TabsContent>
+      <TabsContent value='2'>Content for Tab 2</TabsContent>
+      <TabsContent value='3'>Content for Tab 3</TabsContent>
+    </Tabs>
+  );
+};
+
+/** A disabled trigger keeps its place but drops out of the keyboard order. Prefer hiding a tab that has nothing behind it. */
+export const Disabled: Story = () => (
+  <Tabs defaultValue='1'>
+    <TabsList>
+      <TabsTrigger value='1'>Tab 1</TabsTrigger>
+      <TabsTrigger value='2' disabled>
+        Tab 2 (Disabled)
+      </TabsTrigger>
+      <TabsTrigger value='3'>Tab 3</TabsTrigger>
+      <TabsTrigger value='4'>Tab 4</TabsTrigger>
+    </TabsList>
+    <TabsContent value='1'>Content for Tab 1</TabsContent>
+    <TabsContent value='2'>Content for Tab 2</TabsContent>
+    <TabsContent value='3'>Content for Tab 3</TabsContent>
+    <TabsContent value='4'>Content for Tab 4</TabsContent>
+  </Tabs>
+);
+
+/** `TabsSeparator` groups the triggers inside one bar, for when two of them belong together more than the rest. */
+export const WithSeparator: Story = () => (
+  <div className='w-600'>
+    <Tabs defaultValue='1'>
+      <TabsList>
+        <TabsTrigger value='1'>Tab 1</TabsTrigger>
+        <TabsTrigger value='2'>Tab 2</TabsTrigger>
+        <TabsTrigger value='3'>Tab 3</TabsTrigger>
+        <TabsSeparator />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <TabsButton>
+              <Ellipsis />
+              More
+            </TabsButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Action 1</DropdownMenuItem>
+            <DropdownMenuItem>Action 2</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </TabsList>
+      <TabsContent value='1'>Content for Tab 1</TabsContent>
+      <TabsContent value='2'>Content for Tab 2</TabsContent>
+      <TabsContent value='3'>Content for Tab 3</TabsContent>
+    </Tabs>
+  </div>
+);
+
+/** `TabsLineActions` puts controls on the right of the bar itself, which is where an action about the whole section belongs rather than inside a panel. */
+export const WithLineActions: Story = () => (
+  <div className='w-600'>
+    <Tabs defaultValue='1'>
+      <TabsList>
+        <TabsTrigger value='1'>Tab 1</TabsTrigger>
+        <TabsTrigger value='2'>Tab 2</TabsTrigger>
+        <TabsTrigger value='3'>Tab 3</TabsTrigger>
+        <TabsSeparator />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <TabsButton>
+              <Ellipsis />
+              More
+            </TabsButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Action 1</DropdownMenuItem>
+            <DropdownMenuItem>Action 2</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <TabsLineActions>
+          <Button variant='ghost' color='neutral' size='medium'>
+            <CircleDashed />
+          </Button>
+
+          <TabsSeparator mx={8} />
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant='secondary' color='brand' size='medium'>
+                <CircleDashed />
+                Button
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem>Action 1</DropdownMenuItem>
+              <DropdownMenuItem>Action 2</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </TabsLineActions>
+      </TabsList>
+      <TabsContent value='1'>Content for Tab 1</TabsContent>
+      <TabsContent value='2'>Content for Tab 2</TabsContent>
+      <TabsContent value='3'>Content for Tab 3</TabsContent>
+    </Tabs>
+  </div>
+);
+```

package/dist/project/components/Tabs/preview.html

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Navigation" height=480 -->
+<!doctype html><html><head><meta charset="utf-8"></head><body><div id="preview"></div><script src="./stories.js"></script><script>window.WallarmPreview.mount(document.getElementById('preview'));</script></body></html>

package/dist/project/components/Tabs/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,n){let r,l;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var a,o,c=Object.create,i=Object.defineProperty,u=Object.getOwnPropertyDescriptor,s=Object.getOwnPropertyNames,d=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,h=(e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of s(t))f.call(e,l)||l===n||i(e,l,{get:()=>t[l],enumerable:!(r=u(t,l))||r.enumerable});return e},m={},p={$dispatcherGuard:()=>$,$makeReadOnly:()=>M,$reset:()=>D,$structuralCheck:()=>I,c:()=>C,clearRenderCounterRegistry:()=>O,renderCounterRegistry:()=>k,useRenderCounter:()=>W};for(var b in p)i(m,b,{get:p[b],enumerable:!0});e.exports=h(i({},"__esModule",{value:!0}),m);var y=(l=null!=(r=n("C"))?c(d(r)):{},h(r&&r.__esModule?l:i(l,"default",{value:r,enumerable:!0}),r)),{useRef:v,useEffect:w,isValidElement:_}=y,T=null!=(a=y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?a:y.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,S=Symbol.for("react.memo_cache_sentinel"),C="function"==typeof(null==(o=y.__COMPILER_RUNTIME)?void 0:o.c)?y.__COMPILER_RUNTIME.c:function(e){return y.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=S;return t[S]=!0,t},[])},g={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{g[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var R=null;function E(e){return T.ReactCurrentDispatcher.current=e,T.ReactCurrentDispatcher.current}g.useMemoCache=e=>{if(null!=R)return R.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function $(e){let t=T.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&(R=t),t===g)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");E(g)}else if(1===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===N.length&&(R=null),E(e)}else if(2===e)N.push(t),E(R);else if(3===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");E(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function D(e){for(let t=0;t<e.length;t++)e[t]=S}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var k=new Map;function O(){for(let e of k.values())e.forEach(e=>{e.count=0})}function W(e){let t=v(null);null!=t.current&&(t.current.count+=1),w(()=>{if(null==t.current){let n,r={count:0};null==(n=k.get(e))&&(n=new Set,k.set(e,n)),n.add(r),t.current=r}return()=>{var n;let r;null!==t.current&&(n=t.current,null!=(r=k.get(e))&&r.delete(n))}})}var A=new Set;function I(e,t,n,r,l,a){function o(e,t,o,c){let i=`${r}:${a} [${l}] ${n}${o} changed from ${e} to ${t} at depth ${c}`;A.has(i)||(A.add(i),console.error(i))}!function e(t,n,r,l){if(!(l>2)){if(t!==n)if(typeof t!=typeof n)o(`type ${typeof t}`,`type ${typeof n}`,r,l);else if("object"==typeof t){let a=Array.isArray(t),c=Array.isArray(n);if(null===t&&null!==n)o("null",`type ${typeof n}`,r,l);else if(null===n)o(`type ${typeof t}`,"null",r,l);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)o(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,r,l);else for(let[a,c]of t)n.has(a)?e(c,n.get(a),`${r}.get(${a})`,l+1):o(`Map instance with key ${a}`,`Map instance without key ${a}`,r,l);else o("Map instance","other value",r,l);else if(n instanceof Map)o("other value","Map instance",r,l);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)o(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,r,l);else for(let e of n)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,r,l);else o("Set instance","other value",r,l);else if(n instanceof Set)o("other value","Set instance",r,l);else if(a||c)if(a!==c)o(`type ${a?"array":"object"}`,`type ${c?"array":"object"}`,r,l);else if(t.length!==n.length)o(`array with length ${t.length}`,`array with length ${n.length}`,r,l);else for(let a=0;a<t.length;a++)e(t[a],n[a],`${r}[${a}]`,l+1);else if(_(t)||_(n))_(t)!==_(n)?o(`type ${_(t)?"React element":"object"}`,`type ${_(n)?"React element":"object"}`,r,l):t.type!==n.type?o(`React element of type ${t.type}`,`React element of type ${n.type}`,r,l):e(t.props,n.props,`[props of ${r}]`,l+1);else{for(let e in n)e in t||o(`object without key ${e}`,`object with key ${e}`,r,l);for(let a in t)a in n?e(t[a],n[a],`${r}.${a}`,l+1):o(`object with key ${a}`,`object without key ${a}`,r,l)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,r,l):t!==n&&o(t,n,r,l)}}}(e,t,"",0)}},p(e,t,n){let r=new WeakMap,l=new WeakMap;function a(e,t,n){let a=t,o=n;if("object"==typeof a&&null!==a&&"$$typeof"in a&&a.$$typeof===Symbol.for("react.context")&&"Provider"in a&&(a=a.Provider),"function"==typeof a&&null!=o.ref&&!a.prototype?.isReactComponent){let t=a,n=r.get(e);n||(n=new WeakMap,r.set(e,n));let l=n.get(t);l||((l=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.set(t,l)),a=l}if("string"==typeof a&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof a)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in o&&(o={...o,[t]:o[e]},delete o[e]);return"string"==typeof a&&null!=o.ref&&(a=function(e,t){let n=l.get(e);n||(n=new Map,l.set(e,n));let r=n.get(t);if(r)return r;let a=e.forwardRef((n,r)=>{let l=e.useRef(null);if(!l.current||l.current.original!==r){let e;l.current={original:r,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof r){let n=r(t);e="function"==typeof n?n:void 0}else r&&(r.current=t)}}}return e.createElement(t,{...n,ref:l.current.callback})});return a.displayName=`CanvasHost(${t})`,n.set(t,a),a}(e,a)),{type:a,props:o}}function o(e){let t=(t,n,r)=>{let l=a(e,t,n??{});return e.createElement(l.type,void 0===r?l.props:{...l.props,key:r})};return{jsx:t,jsxs:(t,n,r)=>{let l=a(e,t,n??{}),{children:o,...c}=l.props;return e.createElement(l.type,void 0===r?c:{...c,key:r},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function c(e){return{...e,createElement:(t,n,...r)=>{let l=a(e,t,n??{});return e.createElement(l.type,l.props,...r)},cloneElement:(t,n,...r)=>{let l=e.cloneElement(t,n??void 0,...r),o=l.ref,c=a(e,l.type,{...l.props,ref:o});return c.type===l.type&&"string"!=typeof l.type?l:e.createElement(c.type,{...c.props,key:l.key})}}}n.d(t,{MA:()=>o,YJ:()=>c})},C(e,t,n){n.r(t);let r=(0,n("p").YJ)(window.React),{Children:l,Component:a,Fragment:o,Profiler:c,PureComponent:i,StrictMode:u,Suspense:s,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:f,cloneElement:h,createContext:m,createElement:p,createFactory:b,createRef:y,forwardRef:v,isValidElement:w,lazy:_,memo:T,startTransition:S,unstable_act:C,useCallback:g,useContext:R,useDebugValue:E,useDeferredValue:N,useEffect:$,useId:D,useImperativeHandle:M,useInsertionEffect:k,useLayoutEffect:O,useMemo:W,useReducer:A,useRef:I,useState:V,useSyncExternalStore:j,useTransition:x,version:z,use:P}=r;n.d(t,{},{Children:l,Component:a,Fragment:o,Profiler:c,PureComponent:i,StrictMode:u,Suspense:s,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:f,cloneElement:h,createContext:m,createElement:p,createFactory:b,createRef:y,default:r,forwardRef:v,isValidElement:w,lazy:_,memo:T,startTransition:S,unstable_act:C,use:P,useCallback:g,useContext:R,useDebugValue:E,useDeferredValue:N,useEffect:$,useId:D,useImperativeHandle:M,useInsertionEffect:k,useLayoutEffect:O,useMemo:W,useReducer:A,useRef:I,useState:V,useSyncExternalStore:j,useTransition:x,version:z})}},t={};function n(r){var l=t[r];if(void 0!==l)return l.exports;var a=t[r]={exports:{}};return e[r](a,a.exports,n),a.exports}n.d=(e,t,r)=>{var l=(t,r)=>{for(var l in t)n.o(t,l)&&!n.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,[r]:t[l]})};l(t,"get"),l(r,"value")},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:r,Fragment:l}=(0,n("p").MA)(window.React);var a=n("vD"),o=n("C");let c=window.WallarmDS.Icons.CircleDashed,i=window.WallarmDS.Icons.Earth,u=window.WallarmDS.Icons.Ellipsis,s=window.WallarmDS.Icons.LayoutDashboard,d=window.WallarmDS.Icons.Search,f=window.WallarmDS.Button,h=window.WallarmDS.DropdownMenu,m=window.WallarmDS.DropdownMenuContent,p=window.WallarmDS.DropdownMenuItem,b=window.WallarmDS.DropdownMenuTrigger,y=window.WallarmDS.NumericBadge,v=window.WallarmDS.VStack,w=window.WallarmDS.Tabs,_=window.WallarmDS.TabsButton,T=window.WallarmDS.TabsContent,S=window.WallarmDS.TabsLineActions,C=window.WallarmDS.TabsList,g=window.WallarmDS.TabsSeparator,R=window.WallarmDS.TabsTrigger,E={title:"Navigation/Tabs",component:w,subcomponents:{TabsButton:_,TabsContent:T,TabsLineActions:S,TabsList:C,TabsSeparator:g,TabsTrigger:R},parameters:{layout:"centered",docs:{description:{component:"Switches between a few peer sections of one page without going anywhere — `Tabs` owns the panels, which is what separates it from `SegmentedControl`. Underline tabs are the default for a page’s primary division; reach for `SegmentedTabs` for scoped views of one collection or a second level below these, `SegmentedControl` for a toggle that owns no panel, and `Accordion` when the sections should be open at once."}}},args:{onChange:function(e=()=>{}){let t=(...t)=>e(...t);for(let n of["mockName","mockReturnValue","mockResolvedValue","mockImplementation"])t[n]=r=>("mockImplementation"===n?e=r:"mockReturnValue"===n?e=()=>r:"mockResolvedValue"===n&&(e=()=>Promise.resolve(r)),t);return t}()}};function N(e,n){let r=n+1;return t(R,{value:String(r),children:["Tab ",r]},r)}function $(e,n){let r=n+1;return t(T,{value:String(r),children:["Content for Tab ",r]},r)}let D=[{name:"Basic",story:()=>{let n,r=(0,a.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n=e("div",{className:"w-600",children:t(w,{defaultValue:"1","data-testid":"tabs",children:[t(C,{children:[e(R,{value:"1",children:"Tab 1"}),e(R,{value:"2",children:"Tab 2"}),e(R,{value:"3",children:"Tab 3"})]}),e(T,{value:"1",children:"Content for Tab 1"}),e(T,{value:"2",children:"Content for Tab 2"}),e(T,{value:"3",children:"Content for Tab 3"})]})}),r[0]=n):n=r[0],n},meta:E},{name:"Variants",story:()=>{let n,r,l=(0,a.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(w,{defaultValue:"1",children:[t(C,{children:[e(R,{value:"1",children:"Tab 1 (Default)"}),e(R,{value:"2",children:"Tab 2 (Default)"}),e(R,{value:"3",children:"Tab 3 (Default)"})]}),e(T,{value:"1",children:"Content for Tab 1"}),e(T,{value:"2",children:"Content for Tab 2"}),e(T,{value:"3",children:"Content for Tab 3"})]}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-600",children:t(v,{gap:32,children:[n,t(w,{defaultValue:"1",variant:"grayscale",children:[t(C,{children:[e(R,{value:"1",children:"Tab 1 (Grayscale)"}),e(R,{value:"2",children:"Tab 2 (Grayscale)"}),e(R,{value:"3",children:"Tab 3 (Grayscale)"})]}),e(T,{value:"1",children:"Content for Tab 1"}),e(T,{value:"2",children:"Content for Tab 2"}),e(T,{value:"3",children:"Content for Tab 3"})]})]})}),l[1]=r):r=l[1],r},meta:E},{name:"Icons",story:()=>{let n,r,l,o,i=(0,a.c)(4);return i[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(R,{value:"1",children:[e(c,{}),"Tab 1"]}),i[0]=n):n=i[0],i[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(R,{value:"2",children:["Tab 2",e(c,{})]}),i[1]=r):r=i[1],i[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(c,{}),i[2]=l):l=i[2],i[3]===Symbol.for("react.memo_cache_sentinel")?(o=e("div",{className:"w-600",children:t(w,{defaultValue:"1",children:[t(C,{children:[n,r,t(R,{value:"3",children:[l,"Tab 3",e(c,{})]})]}),e(T,{value:"1",children:"Content for Tab 1"}),e(T,{value:"2",children:"Content for Tab 2"}),e(T,{value:"3",children:"Content for Tab 3"})]})}),i[3]=o):o=i[3],o},meta:E},{name:"IconsOnly",story:()=>{let n,r,l,o=(0,a.c)(3);return o[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(R,{value:"1",children:e(s,{})}),o[0]=n):n=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(R,{value:"2",children:e(d,{})}),o[1]=r):r=o[1],o[2]===Symbol.for("react.memo_cache_sentinel")?(l=e("div",{className:"w-600",children:t(w,{defaultValue:"1",children:[t(C,{children:[n,r,e(R,{value:"3",children:e(i,{})})]}),e(T,{value:"1",children:"Content for Tab 1"}),e(T,{value:"2",children:"Content for Tab 2"}),e(T,{value:"3",children:"Content for Tab 3"})]})}),o[2]=l):l=o[2],l},meta:E},{name:"Badge",story:()=>{let n,r,l,o,i,u=(0,a.c)(5);return u[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(c,{}),u[0]=n):n=u[0],u[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(R,{value:"1",children:[n,"Tab 1",e(y,{children:"2 "})]}),u[1]=r):r=u[1],u[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(R,{value:"2",children:["Tab 2",e(y,{children:"2 "})]}),u[2]=l):l=u[2],u[3]===Symbol.for("react.memo_cache_sentinel")?(o=e(c,{}),u[3]=o):o=u[3],u[4]===Symbol.for("react.memo_cache_sentinel")?(i=e("div",{className:"w-600",children:t(w,{defaultValue:"1",children:[t(C,{children:[r,l,t(R,{value:"3",children:[o,"Tab 3",e(c,{}),e(y,{children:"2 "})]})]}),e(T,{value:"1",children:"Content for Tab 1"}),e(T,{value:"2",children:"Content for Tab 2"}),e(T,{value:"3",children:"Content for Tab 3"})]})}),u[4]=i):i=u[4],i},meta:E},{name:"Sizes",story:()=>{let n,r,l=(0,a.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(w,{defaultValue:"1",size:"medium",children:[t(C,{children:[e(R,{value:"1",children:"Tab 1"}),e(R,{value:"2",children:"Tab 2"}),e(R,{value:"3",children:"Tab 3"})]}),e(T,{value:"1",children:"Content for Tab 1"}),e(T,{value:"2",children:"Content for Tab 2"}),e(T,{value:"3",children:"Content for Tab 3"})]}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-600",children:t(v,{gap:32,children:[n,t(w,{defaultValue:"1",size:"small",children:[t(C,{children:[e(R,{value:"1",children:"Tab 1"}),e(R,{value:"2",children:"Tab 2"}),e(R,{value:"3",children:"Tab 3"})]}),e(T,{value:"1",children:"Content for Tab 1"}),e(T,{value:"2",children:"Content for Tab 2"}),e(T,{value:"3",children:"Content for Tab 3"})]})]})}),l[1]=r):r=l[1],r},meta:E},{name:"Scrollable",story:()=>{let n,r=(0,a.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n=e("div",{className:"w-400",children:t(w,{defaultValue:"1",children:[e(C,{children:Array(20).fill(null).map(N)}),Array(20).fill(null).map($)]})}),r[0]=n):n=r[0],n},meta:E},{name:"Controlled",story:()=>{let n,r,l,c,i,u=(0,a.c)(6),[s,d]=(0,o.useState)("1");return u[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(C,{children:[e(R,{value:"1",children:"Tab 1"}),e(R,{value:"2",children:"Tab 2"}),e(R,{value:"3",children:"Tab 3"})]}),r=e(T,{value:"1",children:"Content for Tab 1"}),l=e(T,{value:"2",children:"Content for Tab 2"}),c=e(T,{value:"3",children:"Content for Tab 3"}),u[0]=n,u[1]=r,u[2]=l,u[3]=c):(n=u[0],r=u[1],l=u[2],c=u[3]),u[4]!==s?(i=t(w,{value:s,onChange:d,children:[n,r,l,c]}),u[4]=s,u[5]=i):i=u[5],i},meta:E},{name:"Disabled",story:()=>{let n,r=(0,a.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(w,{defaultValue:"1",children:[t(C,{children:[e(R,{value:"1",children:"Tab 1"}),e(R,{value:"2",disabled:!0,children:"Tab 2 (Disabled)"}),e(R,{value:"3",children:"Tab 3"}),e(R,{value:"4",children:"Tab 4"})]}),e(T,{value:"1",children:"Content for Tab 1"}),e(T,{value:"2",children:"Content for Tab 2"}),e(T,{value:"3",children:"Content for Tab 3"}),e(T,{value:"4",children:"Content for Tab 4"})]}),r[0]=n):n=r[0],n},meta:E},{name:"WithSeparator",story:()=>{let n,r,l,o,c,i,s=(0,a.c)(6);return s[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(R,{value:"1",children:"Tab 1"}),r=e(R,{value:"2",children:"Tab 2"}),l=e(R,{value:"3",children:"Tab 3"}),o=e(g,{}),s[0]=n,s[1]=r,s[2]=l,s[3]=o):(n=s[0],r=s[1],l=s[2],o=s[3]),s[4]===Symbol.for("react.memo_cache_sentinel")?(c=e(b,{asChild:!0,children:t(_,{children:[e(u,{}),"More"]})}),s[4]=c):c=s[4],s[5]===Symbol.for("react.memo_cache_sentinel")?(i=e("div",{className:"w-600",children:t(w,{defaultValue:"1",children:[t(C,{children:[n,r,l,o,t(h,{children:[c,t(m,{children:[e(p,{children:"Action 1"}),e(p,{children:"Action 2"})]})]})]}),e(T,{value:"1",children:"Content for Tab 1"}),e(T,{value:"2",children:"Content for Tab 2"}),e(T,{value:"3",children:"Content for Tab 3"})]})}),s[5]=i):i=s[5],i},meta:E},{name:"WithLineActions",story:()=>{let n,r,l,o,i,s,d,y,v,E,N=(0,a.c)(10);return N[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(R,{value:"1",children:"Tab 1"}),r=e(R,{value:"2",children:"Tab 2"}),l=e(R,{value:"3",children:"Tab 3"}),o=e(g,{}),N[0]=n,N[1]=r,N[2]=l,N[3]=o):(n=N[0],r=N[1],l=N[2],o=N[3]),N[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(b,{asChild:!0,children:t(_,{children:[e(u,{}),"More"]})}),N[4]=i):i=N[4],N[5]===Symbol.for("react.memo_cache_sentinel")?(s=t(h,{children:[i,t(m,{children:[e(p,{children:"Action 1"}),e(p,{children:"Action 2"})]})]}),N[5]=s):s=N[5],N[6]===Symbol.for("react.memo_cache_sentinel")?(d=e(f,{variant:"ghost",color:"neutral",size:"medium",children:e(c,{})}),y=e(g,{mx:8}),N[6]=d,N[7]=y):(d=N[6],y=N[7]),N[8]===Symbol.for("react.memo_cache_sentinel")?(v=e(b,{asChild:!0,children:t(f,{variant:"secondary",color:"brand",size:"medium",children:[e(c,{}),"Button"]})}),N[8]=v):v=N[8],N[9]===Symbol.for("react.memo_cache_sentinel")?(E=e("div",{className:"w-600",children:t(w,{defaultValue:"1",children:[t(C,{children:[n,r,l,o,s,t(S,{children:[d,y,t(h,{children:[v,t(m,{children:[e(p,{children:"Action 1"}),e(p,{children:"Action 2"})]})]})]})]}),e(T,{value:"1",children:"Content for Tab 1"}),e(T,{value:"2",children:"Content for Tab 2"}),e(T,{value:"3",children:"Content for Tab 3"})]})}),N[9]=E):E=N[9],E},meta:E}];function M({entry:e}){let{story:t,meta:n}=e,r={...n.args,...t.args},l="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,a=()=>o.default.createElement(l,r),c={args:r,globals:{theme:"light"},parameters:{...n.parameters,...t.parameters},viewMode:"story"};for(let e of[...n.decorators||[],...t.decorators||[]].reverse()){let t=a;a=()=>e(t,c)}return o.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},o.default.createElement("h2",{className:"text-sm mb-12"},e.name),o.default.createElement(a))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(o.default.createElement(window.WallarmDS.Root,null,D.map((e,t)=>o.default.createElement(M,{key:t,entry:e})))),t}}})();