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

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

@@ -0,0 +1,390 @@
+The pill-skinned tab set: it owns its panels like `Tabs` but wears `SegmentedControl`’s look. Reach for it for scoped views of a single collection — All / Active / Blocked — or as a second level under primary `Tabs`, never as a page’s main tabs. The line against `SegmentedControl` is whether selecting changes *which* content shows (here) or only *how the same content looks* (there). Keep the set short: overflow goes to a “More” menu, since these pills do not scroll.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `full-width` | `boolean` | no | `false` |  |
+| `value` | `string \| undefined` | no | — |  |
+| `default-value` | `string \| undefined` | no | — |  |
+| `lazy-mount` | `boolean \| undefined` | no | `true` |  |
+| `unmount-on-exit` | `boolean \| undefined` | no | `true` |  |
+| `on-change` | `((value: string) => void) \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.SegmentedTabsTrigger` — `SegmentedTabsTriggerProps` in the declaration bundle.
+- `WallarmDS.SegmentedTabsButton` — `SegmentedTabsButtonProps` in the declaration bundle.
+- `WallarmDS.SegmentedTabsContent` — `SegmentedTabsContentProps` in the declaration bundle.
+- `WallarmDS.SegmentedTabsList` — `SegmentedTabsListProps` in the declaration bundle.
+- `WallarmDS.SegmentedTabsSeparator` — `SegmentedTabsSeparatorProps` in the declaration bundle.
+- `WallarmDS.SegmentedTabsTriggerButton` — `SegmentedTabsTriggerButtonProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+The smallest set — pills and their panels, with the selected pill sliding under the label.
+
+Source: SegmentedTabs/SegmentedTabs.stories.tsx#Basic
+
+### Disabled
+
+A disabled pill stays visible but unselectable, for a scope that exists and currently has nothing to show.
+
+Source: SegmentedTabs/SegmentedTabs.stories.tsx#Disabled
+
+### WithNumericBadge
+
+A `NumericBadge` in the pill turns a scope into a count, which is most of the value of this pattern over plain tabs.
+
+Source: SegmentedTabs/SegmentedTabs.stories.tsx#WithNumericBadge
+
+### WithIcons
+
+An icon beside the label, for scopes that read faster as symbols.
+
+Source: SegmentedTabs/SegmentedTabs.stories.tsx#WithIcons
+
+### WithContextAction
+
+A pill can carry its own action button — the three-dot menu appears on hover, which is how a saved view gets rename and delete without leaving the row.
+
+Source: SegmentedTabs/SegmentedTabs.stories.tsx#WithContextAction
+
+### WithSeparator
+
+`SegmentedTabsSeparator` splits the fixed presets from what follows, which is the seam the overflow menu sits behind.
+
+Source: SegmentedTabs/SegmentedTabs.stories.tsx#WithSeparator
+
+### WithIndicator
+
+The `indicator` dot marks a saved or custom view, so a user-made scope is distinguishable from the built-in ones.
+
+Source: SegmentedTabs/SegmentedTabs.stories.tsx#WithIndicator
+
+### FullWidth
+
+`fullWidth` stretches the row to its container, for a toolbar where the pills should span rather than huddle left.
+
+Source: SegmentedTabs/SegmentedTabs.stories.tsx#FullWidth
+
+### Controlled
+
+`value` and `onChange` when the scope lives outside the component — in the URL, or shared with a filter.
+
+Source: SegmentedTabs/SegmentedTabs.stories.tsx#Controlled
+
+## Story sources
+
+### SegmentedTabs/SegmentedTabs.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { CircleDashed, Ellipsis } from '../../icons';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../DropdownMenu';
+import { NumericBadge } from '../NumericBadge';
+import { SegmentedTabs } from './SegmentedTabs';
+import { SegmentedTabsButton } from './SegmentedTabsButton';
+import { SegmentedTabsContent } from './SegmentedTabsContent';
+import { SegmentedTabsList } from './SegmentedTabsList';
+import { SegmentedTabsSeparator } from './SegmentedTabsSeparator';
+import { SegmentedTabsTrigger } from './SegmentedTabsTrigger';
+import { SegmentedTabsTriggerButton } from './SegmentedTabsTriggerButton';
+
+const DESCRIPTION = [
+  'The pill-skinned tab set: it owns its panels like `Tabs` but wears `SegmentedControl`’s look. Reach for it for scoped views of a single collection — All / Active / Blocked — or as a second level under primary `Tabs`, never as a page’s main tabs.',
+  'The line against `SegmentedControl` is whether selecting changes *which* content shows (here) or only *how the same content looks* (there). Keep the set short: overflow goes to a “More” menu, since these pills do not scroll.',
+].join(' ');
+
+const meta = {
+  title: 'Navigation/SegmentedTabs',
+  component: SegmentedTabs,
+  subcomponents: {
+    SegmentedTabsButton,
+    SegmentedTabsContent,
+    SegmentedTabsList,
+    SegmentedTabsSeparator,
+    SegmentedTabsTrigger,
+    SegmentedTabsTriggerButton,
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  argTypes: {
+    value: {
+      control: { type: 'text' },
+      description: 'Currently selected value',
+    },
+    onChange: {
+      description: 'Callback when selection changes',
+      action: 'onChange',
+    },
+    fullWidth: {
+      control: { type: 'boolean' },
+      description: 'Whether the segmented tabs should take full width',
+      defaultValue: false,
+    },
+  },
+} satisfies Meta<typeof SegmentedTabs>;
+
+export default meta;
+
+type Story = StoryFn<typeof meta>;
+
+/** The smallest set — pills and their panels, with the selected pill sliding under the label. */
+export const Basic: Story = () => (
+  <SegmentedTabs defaultValue='react' data-testid='segmented-tabs'>
+    <SegmentedTabsList>
+      <SegmentedTabsTrigger value='react'>React</SegmentedTabsTrigger>
+      <SegmentedTabsTrigger value='vue'>Vue</SegmentedTabsTrigger>
+      <SegmentedTabsTrigger value='solid'>Solid</SegmentedTabsTrigger>
+      <SegmentedTabsTrigger value='svelte'>Svelte</SegmentedTabsTrigger>
+    </SegmentedTabsList>
+    <SegmentedTabsContent value='react'>React Content</SegmentedTabsContent>
+    <SegmentedTabsContent value='vue'>Vue Content</SegmentedTabsContent>
+    <SegmentedTabsContent value='solid'>Solid Content</SegmentedTabsContent>
+    <SegmentedTabsContent value='svelte'>Svelte Content</SegmentedTabsContent>
+  </SegmentedTabs>
+);
+
+/** A disabled pill stays visible but unselectable, for a scope that exists and currently has nothing to show. */
+export const Disabled: Story = () => (
+  <SegmentedTabs defaultValue='react'>
+    <SegmentedTabsList>
+      <SegmentedTabsTrigger value='react' disabled>
+        React
+      </SegmentedTabsTrigger>
+      <SegmentedTabsTrigger value='vue'>Vue</SegmentedTabsTrigger>
+      <SegmentedTabsTrigger value='solid'>Solid</SegmentedTabsTrigger>
+      <SegmentedTabsTrigger value='svelte'>Svelte</SegmentedTabsTrigger>
+    </SegmentedTabsList>
+    <SegmentedTabsContent value='react'>React Content</SegmentedTabsContent>
+    <SegmentedTabsContent value='vue'>Vue Content</SegmentedTabsContent>
+    <SegmentedTabsContent value='solid'>Solid Content</SegmentedTabsContent>
+    <SegmentedTabsContent value='svelte'>Svelte Content</SegmentedTabsContent>
+  </SegmentedTabs>
+);
+
+/** A `NumericBadge` in the pill turns a scope into a count, which is most of the value of this pattern over plain tabs. */
+export const WithNumericBadge: Story = () => (
+  <SegmentedTabs defaultValue='react'>
+    <SegmentedTabsList>
+      <SegmentedTabsTrigger value='react'>React</SegmentedTabsTrigger>
+      <SegmentedTabsTrigger value='vue'>
+        Vue
+        <NumericBadge>1</NumericBadge>
+      </SegmentedTabsTrigger>
+      <SegmentedTabsTrigger value='solid'>Solid</SegmentedTabsTrigger>
+      <SegmentedTabsTrigger value='svelte'>Svelte</SegmentedTabsTrigger>
+    </SegmentedTabsList>
+    <SegmentedTabsContent value='react'>React Content</SegmentedTabsContent>
+    <SegmentedTabsContent value='vue'>Vue Content</SegmentedTabsContent>
+    <SegmentedTabsContent value='solid'>Solid Content</SegmentedTabsContent>
+    <SegmentedTabsContent value='svelte'>Svelte Content</SegmentedTabsContent>
+  </SegmentedTabs>
+);
+
+/** An icon beside the label, for scopes that read faster as symbols. */
+export const WithIcons: Story = () => (
+  <SegmentedTabs defaultValue='react'>
+    <SegmentedTabsList>
+      <SegmentedTabsTrigger value='react'>
+        <CircleDashed />
+        React
+      </SegmentedTabsTrigger>
+      <SegmentedTabsTrigger value='vue'>
+        <CircleDashed />
+      </SegmentedTabsTrigger>
+      <SegmentedTabsTrigger value='solid'>
+        <CircleDashed />
+        Solid
+        <NumericBadge>1</NumericBadge>
+      </SegmentedTabsTrigger>
+      <SegmentedTabsTrigger value='svelte'>
+        <CircleDashed />
+        <NumericBadge>1</NumericBadge>
+      </SegmentedTabsTrigger>
+    </SegmentedTabsList>
+    <SegmentedTabsContent value='react'>React Content</SegmentedTabsContent>
+    <SegmentedTabsContent value='vue'>Vue Content</SegmentedTabsContent>
+    <SegmentedTabsContent value='solid'>Solid Content</SegmentedTabsContent>
+    <SegmentedTabsContent value='svelte'>Svelte Content</SegmentedTabsContent>
+  </SegmentedTabs>
+);
+
+/** A pill can carry its own action button — the three-dot menu appears on hover, which is how a saved view gets rename and delete without leaving the row. */
+export const WithContextAction: Story = () => (
+  <SegmentedTabs defaultValue='react'>
+    <SegmentedTabsList>
+      <SegmentedTabsTrigger value='react'>
+        React
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SegmentedTabsTriggerButton />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Action 1</DropdownMenuItem>
+            <DropdownMenuItem>Action 2</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SegmentedTabsTrigger>
+
+      <SegmentedTabsTrigger value='vue'>
+        Vue
+        <NumericBadge>1</NumericBadge>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SegmentedTabsTriggerButton />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Action 1</DropdownMenuItem>
+            <DropdownMenuItem>Action 2</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SegmentedTabsTrigger>
+
+      <SegmentedTabsTrigger value='solid'>
+        Solid
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SegmentedTabsTriggerButton />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Action 1</DropdownMenuItem>
+            <DropdownMenuItem>Action 2</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SegmentedTabsTrigger>
+
+      <SegmentedTabsTrigger value='svelte'>
+        Svelte
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SegmentedTabsTriggerButton />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Action 1</DropdownMenuItem>
+            <DropdownMenuItem>Action 2</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SegmentedTabsTrigger>
+    </SegmentedTabsList>
+    <SegmentedTabsContent value='react'>React Content</SegmentedTabsContent>
+    <SegmentedTabsContent value='vue'>Vue Content</SegmentedTabsContent>
+    <SegmentedTabsContent value='solid'>Solid Content</SegmentedTabsContent>
+    <SegmentedTabsContent value='svelte'>Svelte Content</SegmentedTabsContent>
+  </SegmentedTabs>
+);
+
+/** `SegmentedTabsSeparator` splits the fixed presets from what follows, which is the seam the overflow menu sits behind. */
+export const WithSeparator: Story = () => (
+  <SegmentedTabs defaultValue='react'>
+    <SegmentedTabsList>
+      <SegmentedTabsTrigger value='react'>React</SegmentedTabsTrigger>
+
+      <SegmentedTabsTrigger value='vue'>
+        Vue
+        <NumericBadge>1</NumericBadge>
+      </SegmentedTabsTrigger>
+
+      <SegmentedTabsTrigger value='svelte'>Svelte</SegmentedTabsTrigger>
+
+      <SegmentedTabsSeparator />
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <SegmentedTabsButton>
+            <Ellipsis />
+            More
+          </SegmentedTabsButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Action 1</DropdownMenuItem>
+          <DropdownMenuItem>Action 2</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SegmentedTabsList>
+    <SegmentedTabsContent value='react'>React Content</SegmentedTabsContent>
+    <SegmentedTabsContent value='vue'>Vue Content</SegmentedTabsContent>
+    <SegmentedTabsContent value='solid'>Solid Content</SegmentedTabsContent>
+    <SegmentedTabsContent value='svelte'>Svelte Content</SegmentedTabsContent>
+  </SegmentedTabs>
+);
+
+/** The `indicator` dot marks a saved or custom view, so a user-made scope is distinguishable from the built-in ones. */
+export const WithIndicator: Story = () => (
+  <SegmentedTabs defaultValue='all'>
+    <SegmentedTabsList>
+      <SegmentedTabsTrigger value='all'>All Attacks</SegmentedTabsTrigger>
+      <SegmentedTabsTrigger value='critical' indicator>
+        Critical
+      </SegmentedTabsTrigger>
+      <SegmentedTabsTrigger value='api'>API Abuse</SegmentedTabsTrigger>
+      <SegmentedTabsTrigger value='custom' indicator>
+        Custom View
+      </SegmentedTabsTrigger>
+    </SegmentedTabsList>
+    <SegmentedTabsContent value='all'>All Attacks Content</SegmentedTabsContent>
+    <SegmentedTabsContent value='critical'>Critical Content</SegmentedTabsContent>
+    <SegmentedTabsContent value='api'>API Abuse Content</SegmentedTabsContent>
+    <SegmentedTabsContent value='custom'>Custom View Content</SegmentedTabsContent>
+  </SegmentedTabs>
+);
+
+/** `fullWidth` stretches the row to its container, for a toolbar where the pills should span rather than huddle left. */
+export const FullWidth: Story = () => (
+  <div className='min-w-800'>
+    <SegmentedTabs defaultValue='react' fullWidth>
+      <SegmentedTabsList>
+        <SegmentedTabsTrigger value='react'>React</SegmentedTabsTrigger>
+        <SegmentedTabsTrigger value='vue'>Vue</SegmentedTabsTrigger>
+        <SegmentedTabsTrigger value='solid'>Solid</SegmentedTabsTrigger>
+        <SegmentedTabsTrigger value='svelte'>Svelte</SegmentedTabsTrigger>
+      </SegmentedTabsList>
+      <SegmentedTabsContent value='react'>React Content</SegmentedTabsContent>
+      <SegmentedTabsContent value='vue'>Vue Content</SegmentedTabsContent>
+      <SegmentedTabsContent value='solid'>Solid Content</SegmentedTabsContent>
+      <SegmentedTabsContent value='svelte'>Svelte Content</SegmentedTabsContent>
+    </SegmentedTabs>
+  </div>
+);
+
+/** `value` and `onChange` when the scope lives outside the component — in the URL, or shared with a filter. */
+export const Controlled: Story = () => {
+  const [value, setValue] = useState<string>('vue');
+
+  return (
+    <SegmentedTabs value={value} onChange={setValue}>
+      <SegmentedTabsList>
+        <SegmentedTabsTrigger value='react'>React</SegmentedTabsTrigger>
+
+        <SegmentedTabsTrigger value='vue'>Vue</SegmentedTabsTrigger>
+
+        <SegmentedTabsTrigger value='solid'>Solid</SegmentedTabsTrigger>
+
+        <SegmentedTabsTrigger value='svelte'>Svelte</SegmentedTabsTrigger>
+      </SegmentedTabsList>
+      <SegmentedTabsContent value='react'>React Content</SegmentedTabsContent>
+      <SegmentedTabsContent value='vue'>Vue Content</SegmentedTabsContent>
+      <SegmentedTabsContent value='solid'>Solid Content</SegmentedTabsContent>
+      <SegmentedTabsContent value='svelte'>Svelte Content</SegmentedTabsContent>
+    </SegmentedTabs>
+  );
+};
+```

package/dist/project/components/SegmentedTabs/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/SegmentedTabs/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,n){let l,r;/**
+ * 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,h=Object.prototype.hasOwnProperty,m=(e,t,n,l)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let r of s(t))h.call(e,r)||r===n||i(e,r,{get:()=>t[r],enumerable:!(l=u(t,r))||l.enumerable});return e},f={},v={$dispatcherGuard:()=>D,$makeReadOnly:()=>k,$reset:()=>M,$structuralCheck:()=>W,c:()=>g,clearRenderCounterRegistry:()=>T,renderCounterRegistry:()=>A,useRenderCounter:()=>O};for(var p in v)i(f,p,{get:v[p],enumerable:!0});e.exports=m(i({},"__esModule",{value:!0}),f);var y=(r=null!=(l=n("C"))?c(d(l)):{},m(l&&l.__esModule?r:i(r,"default",{value:l,enumerable:!0}),l)),{useRef:S,useEffect:_,isValidElement:C}=y,w=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,b=Symbol.for("react.memo_cache_sentinel"),g="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]=b;return t[b]=!0,t},[])},R={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{R[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 E=null;function $(e){return w.ReactCurrentDispatcher.current=e,w.ReactCurrentDispatcher.current}R.useMemoCache=e=>{if(null!=E)return E.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function D(e){let t=w.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&(E=t),t===R)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.");$(R)}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&&(E=null),$(e)}else if(2===e)N.push(t),$(E);else if(3===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");$(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function M(e){for(let t=0;t<e.length;t++)e[t]=b}function k(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var A=new Map;function T(){for(let e of A.values())e.forEach(e=>{e.count=0})}function O(e){let t=S(null);null!=t.current&&(t.current.count+=1),_(()=>{if(null==t.current){let n,l={count:0};null==(n=A.get(e))&&(n=new Set,A.set(e,n)),n.add(l),t.current=l}return()=>{var n;let l;null!==t.current&&(n=t.current,null!=(l=A.get(e))&&l.delete(n))}})}var V=new Set;function W(e,t,n,l,r,a){function o(e,t,o,c){let i=`${l}:${a} [${r}] ${n}${o} changed from ${e} to ${t} at depth ${c}`;V.has(i)||(V.add(i),console.error(i))}!function e(t,n,l,r){if(!(r>2)){if(t!==n)if(typeof t!=typeof n)o(`type ${typeof t}`,`type ${typeof n}`,l,r);else if("object"==typeof t){let a=Array.isArray(t),c=Array.isArray(n);if(null===t&&null!==n)o("null",`type ${typeof n}`,l,r);else if(null===n)o(`type ${typeof t}`,"null",l,r);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}`,l,r);else for(let[a,c]of t)n.has(a)?e(c,n.get(a),`${l}.get(${a})`,r+1):o(`Map instance with key ${a}`,`Map instance without key ${a}`,l,r);else o("Map instance","other value",l,r);else if(n instanceof Map)o("other value","Map instance",l,r);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}`,l,r);else for(let e of n)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,l,r);else o("Set instance","other value",l,r);else if(n instanceof Set)o("other value","Set instance",l,r);else if(a||c)if(a!==c)o(`type ${a?"array":"object"}`,`type ${c?"array":"object"}`,l,r);else if(t.length!==n.length)o(`array with length ${t.length}`,`array with length ${n.length}`,l,r);else for(let a=0;a<t.length;a++)e(t[a],n[a],`${l}[${a}]`,r+1);else if(C(t)||C(n))C(t)!==C(n)?o(`type ${C(t)?"React element":"object"}`,`type ${C(n)?"React element":"object"}`,l,r):t.type!==n.type?o(`React element of type ${t.type}`,`React element of type ${n.type}`,l,r):e(t.props,n.props,`[props of ${l}]`,r+1);else{for(let e in n)e in t||o(`object without key ${e}`,`object with key ${e}`,l,r);for(let a in t)a in n?e(t[a],n[a],`${l}.${a}`,r+1):o(`object with key ${a}`,`object without key ${a}`,l,r)}}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"}`,l,r):t!==n&&o(t,n,l,r)}}}(e,t,"",0)}},p(e,t,n){let l=new WeakMap,r=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=l.get(e);n||(n=new WeakMap,l.set(e,n));let r=n.get(t);r||((r=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.set(t,r)),a=r}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=r.get(e);n||(n=new Map,r.set(e,n));let l=n.get(t);if(l)return l;let a=e.forwardRef((n,l)=>{let r=e.useRef(null);if(!r.current||r.current.original!==l){let e;r.current={original:l,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof l){let n=l(t);e="function"==typeof n?n:void 0}else l&&(l.current=t)}}}return e.createElement(t,{...n,ref:r.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,l)=>{let r=a(e,t,n??{});return e.createElement(r.type,void 0===l?r.props:{...r.props,key:l})};return{jsx:t,jsxs:(t,n,l)=>{let r=a(e,t,n??{}),{children:o,...c}=r.props;return e.createElement(r.type,void 0===l?c:{...c,key:l},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function c(e){return{...e,createElement:(t,n,...l)=>{let r=a(e,t,n??{});return e.createElement(r.type,r.props,...l)},cloneElement:(t,n,...l)=>{let r=e.cloneElement(t,n??void 0,...l),o=r.ref,c=a(e,r.type,{...r.props,ref:o});return c.type===r.type&&"string"!=typeof r.type?r:e.createElement(c.type,{...c.props,key:r.key})}}}n.d(t,{MA:()=>o,YJ:()=>c})},C(e,t,n){n.r(t);let l=(0,n("p").YJ)(window.React),{Children:r,Component:a,Fragment:o,Profiler:c,PureComponent:i,StrictMode:u,Suspense:s,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:h,cloneElement:m,createContext:f,createElement:v,createFactory:p,createRef:y,forwardRef:S,isValidElement:_,lazy:C,memo:w,startTransition:b,unstable_act:g,useCallback:R,useContext:E,useDebugValue:$,useDeferredValue:N,useEffect:D,useId:M,useImperativeHandle:k,useInsertionEffect:A,useLayoutEffect:T,useMemo:O,useReducer:V,useRef:W,useState:I,useSyncExternalStore:j,useTransition:x,version:P,use:z}=l;n.d(t,{},{Children:r,Component:a,Fragment:o,Profiler:c,PureComponent:i,StrictMode:u,Suspense:s,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:h,cloneElement:m,createContext:f,createElement:v,createFactory:p,createRef:y,default:l,forwardRef:S,isValidElement:_,lazy:C,memo:w,startTransition:b,unstable_act:g,use:z,useCallback:R,useContext:E,useDebugValue:$,useDeferredValue:N,useEffect:D,useId:M,useImperativeHandle:k,useInsertionEffect:A,useLayoutEffect:T,useMemo:O,useReducer:V,useRef:W,useState:I,useSyncExternalStore:j,useTransition:x,version:P})}},t={};function n(l){var r=t[l];if(void 0!==r)return r.exports;var a=t[l]={exports:{}};return e[l](a,a.exports,n),a.exports}n.d=(e,t,l)=>{var r=(t,l)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,[l]:t[r]})};r(t,"get"),r(l,"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:l,Fragment:r}=(0,n("p").MA)(window.React);var a=n("vD"),o=n("C");let c=window.WallarmDS.Icons.CircleDashed,i=window.WallarmDS.Icons.Ellipsis,u=window.WallarmDS.DropdownMenu,s=window.WallarmDS.DropdownMenuContent,d=window.WallarmDS.DropdownMenuItem,h=window.WallarmDS.DropdownMenuTrigger,m=window.WallarmDS.NumericBadge,f=window.WallarmDS.SegmentedTabs,v=window.WallarmDS.SegmentedTabsButton,p=window.WallarmDS.SegmentedTabsContent,y=window.WallarmDS.SegmentedTabsList,S=window.WallarmDS.SegmentedTabsSeparator,_=window.WallarmDS.SegmentedTabsTrigger,C=window.WallarmDS.SegmentedTabsTriggerButton,w={title:"Navigation/SegmentedTabs",component:f,subcomponents:{SegmentedTabsButton:v,SegmentedTabsContent:p,SegmentedTabsList:y,SegmentedTabsSeparator:S,SegmentedTabsTrigger:_,SegmentedTabsTriggerButton:C},parameters:{layout:"centered",docs:{description:{component:"The pill-skinned tab set: it owns its panels like `Tabs` but wears `SegmentedControl`’s look. Reach for it for scoped views of a single collection — All / Active / Blocked — or as a second level under primary `Tabs`, never as a page’s main tabs. The line against `SegmentedControl` is whether selecting changes *which* content shows (here) or only *how the same content looks* (there). Keep the set short: overflow goes to a “More” menu, since these pills do not scroll."}}},argTypes:{value:{control:{type:"text"},description:"Currently selected value"},onChange:{description:"Callback when selection changes",action:"onChange"},fullWidth:{control:{type:"boolean"},description:"Whether the segmented tabs should take full width",defaultValue:!1}}},b=[{name:"Basic",story:()=>{let n,l=(0,a.c)(1);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(f,{defaultValue:"react","data-testid":"segmented-tabs",children:[t(y,{children:[e(_,{value:"react",children:"React"}),e(_,{value:"vue",children:"Vue"}),e(_,{value:"solid",children:"Solid"}),e(_,{value:"svelte",children:"Svelte"})]}),e(p,{value:"react",children:"React Content"}),e(p,{value:"vue",children:"Vue Content"}),e(p,{value:"solid",children:"Solid Content"}),e(p,{value:"svelte",children:"Svelte Content"})]}),l[0]=n):n=l[0],n},meta:w},{name:"Disabled",story:()=>{let n,l=(0,a.c)(1);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(f,{defaultValue:"react",children:[t(y,{children:[e(_,{value:"react",disabled:!0,children:"React"}),e(_,{value:"vue",children:"Vue"}),e(_,{value:"solid",children:"Solid"}),e(_,{value:"svelte",children:"Svelte"})]}),e(p,{value:"react",children:"React Content"}),e(p,{value:"vue",children:"Vue Content"}),e(p,{value:"solid",children:"Solid Content"}),e(p,{value:"svelte",children:"Svelte Content"})]}),l[0]=n):n=l[0],n},meta:w},{name:"WithNumericBadge",story:()=>{let n,l,r=(0,a.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(_,{value:"react",children:"React"}),r[0]=n):n=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(l=t(f,{defaultValue:"react",children:[t(y,{children:[n,t(_,{value:"vue",children:["Vue",e(m,{children:"1"})]}),e(_,{value:"solid",children:"Solid"}),e(_,{value:"svelte",children:"Svelte"})]}),e(p,{value:"react",children:"React Content"}),e(p,{value:"vue",children:"Vue Content"}),e(p,{value:"solid",children:"Solid Content"}),e(p,{value:"svelte",children:"Svelte Content"})]}),r[1]=l):l=r[1],l},meta:w},{name:"WithIcons",story:()=>{let n,l,r,o,i,u=(0,a.c)(5);return u[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(_,{value:"react",children:[e(c,{}),"React"]}),u[0]=n):n=u[0],u[1]===Symbol.for("react.memo_cache_sentinel")?(l=e(_,{value:"vue",children:e(c,{})}),u[1]=l):l=u[1],u[2]===Symbol.for("react.memo_cache_sentinel")?(r=e(c,{}),u[2]=r):r=u[2],u[3]===Symbol.for("react.memo_cache_sentinel")?(o=t(_,{value:"solid",children:[r,"Solid",e(m,{children:"1"})]}),u[3]=o):o=u[3],u[4]===Symbol.for("react.memo_cache_sentinel")?(i=t(f,{defaultValue:"react",children:[t(y,{children:[n,l,o,t(_,{value:"svelte",children:[e(c,{}),e(m,{children:"1"})]})]}),e(p,{value:"react",children:"React Content"}),e(p,{value:"vue",children:"Vue Content"}),e(p,{value:"solid",children:"Solid Content"}),e(p,{value:"svelte",children:"Svelte Content"})]}),u[4]=i):i=u[4],i},meta:w},{name:"WithContextAction",story:()=>{let n,l,r,o,c,i,v,S,w,b=(0,a.c)(9);return b[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{asChild:!0,children:e(C,{})}),b[0]=n):n=b[0],b[1]===Symbol.for("react.memo_cache_sentinel")?(l=t(_,{value:"react",children:["React",t(u,{children:[n,t(s,{children:[e(d,{children:"Action 1"}),e(d,{children:"Action 2"})]})]})]}),b[1]=l):l=b[1],b[2]===Symbol.for("react.memo_cache_sentinel")?(r=e(m,{children:"1"}),b[2]=r):r=b[2],b[3]===Symbol.for("react.memo_cache_sentinel")?(o=e(h,{asChild:!0,children:e(C,{})}),b[3]=o):o=b[3],b[4]===Symbol.for("react.memo_cache_sentinel")?(c=t(_,{value:"vue",children:["Vue",r,t(u,{children:[o,t(s,{children:[e(d,{children:"Action 1"}),e(d,{children:"Action 2"})]})]})]}),b[4]=c):c=b[4],b[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(h,{asChild:!0,children:e(C,{})}),b[5]=i):i=b[5],b[6]===Symbol.for("react.memo_cache_sentinel")?(v=t(_,{value:"solid",children:["Solid",t(u,{children:[i,t(s,{children:[e(d,{children:"Action 1"}),e(d,{children:"Action 2"})]})]})]}),b[6]=v):v=b[6],b[7]===Symbol.for("react.memo_cache_sentinel")?(S=e(h,{asChild:!0,children:e(C,{})}),b[7]=S):S=b[7],b[8]===Symbol.for("react.memo_cache_sentinel")?(w=t(f,{defaultValue:"react",children:[t(y,{children:[l,c,v,t(_,{value:"svelte",children:["Svelte",t(u,{children:[S,t(s,{children:[e(d,{children:"Action 1"}),e(d,{children:"Action 2"})]})]})]})]}),e(p,{value:"react",children:"React Content"}),e(p,{value:"vue",children:"Vue Content"}),e(p,{value:"solid",children:"Solid Content"}),e(p,{value:"svelte",children:"Svelte Content"})]}),b[8]=w):w=b[8],w},meta:w},{name:"WithSeparator",story:()=>{let n,l,r,o,c,C,w=(0,a.c)(6);return w[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(_,{value:"react",children:"React"}),w[0]=n):n=w[0],w[1]===Symbol.for("react.memo_cache_sentinel")?(l=t(_,{value:"vue",children:["Vue",e(m,{children:"1"})]}),r=e(_,{value:"svelte",children:"Svelte"}),o=e(S,{}),w[1]=l,w[2]=r,w[3]=o):(l=w[1],r=w[2],o=w[3]),w[4]===Symbol.for("react.memo_cache_sentinel")?(c=e(h,{asChild:!0,children:t(v,{children:[e(i,{}),"More"]})}),w[4]=c):c=w[4],w[5]===Symbol.for("react.memo_cache_sentinel")?(C=t(f,{defaultValue:"react",children:[t(y,{children:[n,l,r,o,t(u,{children:[c,t(s,{children:[e(d,{children:"Action 1"}),e(d,{children:"Action 2"})]})]})]}),e(p,{value:"react",children:"React Content"}),e(p,{value:"vue",children:"Vue Content"}),e(p,{value:"solid",children:"Solid Content"}),e(p,{value:"svelte",children:"Svelte Content"})]}),w[5]=C):C=w[5],C},meta:w},{name:"WithIndicator",story:()=>{let n,l=(0,a.c)(1);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(f,{defaultValue:"all",children:[t(y,{children:[e(_,{value:"all",children:"All Attacks"}),e(_,{value:"critical",indicator:!0,children:"Critical"}),e(_,{value:"api",children:"API Abuse"}),e(_,{value:"custom",indicator:!0,children:"Custom View"})]}),e(p,{value:"all",children:"All Attacks Content"}),e(p,{value:"critical",children:"Critical Content"}),e(p,{value:"api",children:"API Abuse Content"}),e(p,{value:"custom",children:"Custom View Content"})]}),l[0]=n):n=l[0],n},meta:w},{name:"FullWidth",story:()=>{let n,l=(0,a.c)(1);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=e("div",{className:"min-w-800",children:t(f,{defaultValue:"react",fullWidth:!0,children:[t(y,{children:[e(_,{value:"react",children:"React"}),e(_,{value:"vue",children:"Vue"}),e(_,{value:"solid",children:"Solid"}),e(_,{value:"svelte",children:"Svelte"})]}),e(p,{value:"react",children:"React Content"}),e(p,{value:"vue",children:"Vue Content"}),e(p,{value:"solid",children:"Solid Content"}),e(p,{value:"svelte",children:"Svelte Content"})]})}),l[0]=n):n=l[0],n},meta:w},{name:"Controlled",story:()=>{let n,l,r,c,i,u,s=(0,a.c)(7),[d,h]=(0,o.useState)("vue");return s[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(y,{children:[e(_,{value:"react",children:"React"}),e(_,{value:"vue",children:"Vue"}),e(_,{value:"solid",children:"Solid"}),e(_,{value:"svelte",children:"Svelte"})]}),l=e(p,{value:"react",children:"React Content"}),r=e(p,{value:"vue",children:"Vue Content"}),c=e(p,{value:"solid",children:"Solid Content"}),i=e(p,{value:"svelte",children:"Svelte Content"}),s[0]=n,s[1]=l,s[2]=r,s[3]=c,s[4]=i):(n=s[0],l=s[1],r=s[2],c=s[3],i=s[4]),s[5]!==d?(u=t(f,{value:d,onChange:h,children:[n,l,r,c,i]}),s[5]=d,s[6]=u):u=s[6],u},meta:w}];function g({entry:e}){let{story:t,meta:n}=e,l={...n.args,...t.args},r="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,a=()=>o.default.createElement(r,l),c={args:l,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,b.map((e,t)=>o.default.createElement(g,{key:t,entry:e})))),t}}})();