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

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

@@ -0,0 +1,531 @@
+The interactive hierarchy: rows that expand, select and disable, with the connector rails drawn for you. Reach for `Tree` when you only need to *show* nesting — this one is for working in it. Rows are composed freely, so an icon, a badge or a checkbox is just a child, and nested `TreeViewItem`s become the subtree.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `selectable` | `boolean \| undefined` | no | `false` | Allow rows to be selected by clicking. |
+| `multi-select` | `boolean \| undefined` | no | `false` | Allow more than one row to be selected at a time. |
+| `selected-ids` | `string[] \| undefined` | no | — | Controlled selected item ids. |
+| `default-selected-ids` | `string[] \| undefined` | no | — | Uncontrolled initial selected item ids. |
+| `on-selection-change` | `((ids: string[]) => void) \| undefined` | no | — | Called whenever the selection changes. |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.TreeViewItem` — `TreeViewItemProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+One level of rows. Each `TreeViewItem` is composed like any row — the component supplies the rail, the indentation and the toggle.
+
+Source: TreeView/TreeView.stories.tsx#Basic
+
+### Nested
+
+Nested items become the collapsible subtree, which is also what marks the parent as a branch. Branches start closed.
+
+Source: TreeView/TreeView.stories.tsx#Nested
+
+### WithCheckboxes
+
+The tree has no checkbox logic: the checkbox is a child, the checked set is yours, and the click has to be stopped from reaching row selection.
+
+Source: TreeView/TreeView.stories.tsx#WithCheckboxes
+
+### Selectable
+
+`selectable` (with `multiSelect` for more than one) turns rows into a selection, controlled through `selectedIds` or left to the component.
+
+Source: TreeView/TreeView.stories.tsx#Selectable
+
+### WithInlineBadge
+
+A badge beside the label, for a count that belongs to the row rather than to its children.
+
+Source: TreeView/TreeView.stories.tsx#WithInlineBadge
+
+### WithTrailingContent
+
+The label is `flex-1`, so anything after it lands against the right edge — which is how a count or a tag ends up trailing without any prop for it.
+
+Source: TreeView/TreeView.stories.tsx#WithTrailingContent
+
+### Disabled
+
+A disabled row dims and stops responding to everything: toggle, selection and checkbox alike.
+
+Source: TreeView/TreeView.stories.tsx#Disabled
+
+### WithHeaderAndSearch
+
+The toolbar is assembled from `Text`, `Button` and `Input` — there is no TreeView toolbar. Expand-all drives the items’ controlled `open` state, and the search keeps ancestors of matches and opens them.
+
+Source: TreeView/TreeView.stories.tsx#WithHeaderAndSearch
+
+## Story sources
+
+### TreeView/TreeView.stories.tsx
+
+```tsx
+import { type ReactNode, useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import {
+  ChevronsDownUp,
+  ChevronsUpDown,
+  FileText,
+  Folder,
+  PanelRightClose,
+  Search,
+} from '../../icons';
+import { Badge } from '../Badge';
+import { Button } from '../Button';
+import { Checkbox } from '../Checkbox';
+import { CheckboxIndicator } from '../Checkbox/CheckboxIndicator';
+import { Input } from '../Input';
+import { Text } from '../Text';
+import { TreeView, type TreeViewProps } from './TreeView';
+import { TreeViewItem } from './TreeViewItem';
+
+const DESCRIPTION = [
+  'The interactive hierarchy: rows that expand, select and disable, with the connector rails drawn for you.',
+  'Reach for `Tree` when you only need to *show* nesting — this one is for working in it. Rows are composed freely, so an icon, a badge or a checkbox is just a child, and nested `TreeViewItem`s become the subtree.',
+].join(' ');
+
+const meta = {
+  title: 'Navigation/TreeView',
+  component: TreeView,
+  args: {
+    'data-testid': 'tree-view',
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta<typeof TreeView>;
+
+export default meta;
+
+const CountBadge = ({ value }: { value: number }) => (
+  <Badge size='small' color='slate' type='secondary' textVariant='code'>
+    {value}
+  </Badge>
+);
+
+/** One level of rows. Each `TreeViewItem` is composed like any row — the component supplies the rail, the indentation and the toggle. */
+export const Basic: StoryFn<TreeViewProps> = args => (
+  <div className='w-320'>
+    <TreeView {...args}>
+      <TreeViewItem defaultOpen>
+        <Folder />
+        Components
+        <TreeViewItem>
+          <FileText />
+          Button.tsx
+        </TreeViewItem>
+        <TreeViewItem>
+          <FileText />
+          Input.tsx
+        </TreeViewItem>
+      </TreeViewItem>
+      <TreeViewItem>
+        <Folder />
+        Utils
+        <TreeViewItem>
+          <FileText />
+          cn.ts
+        </TreeViewItem>
+      </TreeViewItem>
+      <TreeViewItem>
+        <FileText />
+        index.ts
+      </TreeViewItem>
+    </TreeView>
+  </div>
+);
+
+/** Nested items become the collapsible subtree, which is also what marks the parent as a branch. Branches start closed. */
+export const Nested: StoryFn<TreeViewProps> = args => (
+  <div className='w-320'>
+    <TreeView {...args}>
+      <TreeViewItem defaultOpen>
+        <Folder />
+        src
+        <TreeViewItem defaultOpen>
+          <Folder />
+          components
+          <TreeViewItem defaultOpen>
+            <Folder />
+            TreeView
+            <TreeViewItem>
+              <FileText />
+              TreeView.tsx
+            </TreeViewItem>
+          </TreeViewItem>
+          <TreeViewItem>
+            <FileText />
+            Button.tsx
+          </TreeViewItem>
+        </TreeViewItem>
+        <TreeViewItem>
+          <FileText />
+          index.ts
+        </TreeViewItem>
+      </TreeViewItem>
+      <TreeViewItem>
+        <Folder />
+        public
+        <TreeViewItem>
+          <FileText />
+          favicon.ico
+        </TreeViewItem>
+      </TreeViewItem>
+    </TreeView>
+  </div>
+);
+
+/** The tree has no checkbox logic: the checkbox is a child, the checked set is yours, and the click has to be stopped from reaching row selection. */
+export const WithCheckboxes: StoryFn<TreeViewProps> = () => {
+  const [checked, setChecked] = useState<Set<string>>(() => new Set(['users']));
+  const cb = (id: string) => (
+    <Checkbox
+      checked={checked.has(id)}
+      onClick={e => e.stopPropagation()}
+      onCheckedChange={details =>
+        setChecked(prev => {
+          const next = new Set(prev);
+          if (details.checked === true) {
+            next.add(id);
+          } else {
+            next.delete(id);
+          }
+          return next;
+        })
+      }
+      className='shrink-0'
+    >
+      <CheckboxIndicator />
+    </Checkbox>
+  );
+
+  return (
+    <div className='w-320'>
+      <TreeView>
+        <TreeViewItem defaultOpen>
+          {cb('endpoints')}
+          <Folder />
+          Endpoints
+          <TreeViewItem>
+            {cb('users')}
+            <FileText />
+            /users
+          </TreeViewItem>
+          <TreeViewItem>
+            {cb('orders')}
+            <FileText />
+            /orders
+          </TreeViewItem>
+        </TreeViewItem>
+        <TreeViewItem>
+          {cb('health')}
+          <FileText />
+          /health
+        </TreeViewItem>
+      </TreeView>
+    </div>
+  );
+};
+
+/** `selectable` (with `multiSelect` for more than one) turns rows into a selection, controlled through `selectedIds` or left to the component. */
+export const Selectable: StoryFn<TreeViewProps> = () => {
+  const [selected, setSelected] = useState<string[]>(['button']);
+  return (
+    <div className='w-320'>
+      <TreeView selectable selectedIds={selected} onSelectionChange={setSelected}>
+        <TreeViewItem id='components' defaultOpen>
+          <Folder />
+          Components
+          <TreeViewItem id='button'>
+            <FileText />
+            Button.tsx
+          </TreeViewItem>
+          <TreeViewItem id='input'>
+            <FileText />
+            Input.tsx
+          </TreeViewItem>
+        </TreeViewItem>
+        <TreeViewItem id='index'>
+          <FileText />
+          index.ts
+        </TreeViewItem>
+      </TreeView>
+    </div>
+  );
+};
+
+/** A badge beside the label, for a count that belongs to the row rather than to its children. */
+export const WithInlineBadge: StoryFn<TreeViewProps> = args => (
+  <div className='w-320'>
+    <TreeView {...args}>
+      <TreeViewItem defaultOpen>
+        <Folder />
+        Endpoints
+        <TreeViewItem>
+          <FileText />
+          <Badge color='slate' size='small'>
+            new
+          </Badge>
+          /users
+        </TreeViewItem>
+        <TreeViewItem>
+          <FileText />
+          <Badge color='green' type='secondary' size='small' textVariant='code'>
+            GET
+          </Badge>
+          /orders
+        </TreeViewItem>
+      </TreeViewItem>
+      <TreeViewItem>
+        <FileText />
+        <Badge color='amber' size='small'>
+          wip
+        </Badge>
+        /health
+      </TreeViewItem>
+    </TreeView>
+  </div>
+);
+
+/** The label is `flex-1`, so anything after it lands against the right edge — which is how a count or a tag ends up trailing without any prop for it. */
+export const WithTrailingContent: StoryFn<TreeViewProps> = args => (
+  <div className='w-320'>
+    <TreeView {...args}>
+      <TreeViewItem defaultOpen>
+        <Folder />
+        src
+        <CountBadge value={3} />
+        <TreeViewItem>
+          <FileText />
+          index.ts
+          <CountBadge value={12} />
+        </TreeViewItem>
+        <TreeViewItem>
+          <FileText />
+          config.ts
+          <Badge color='blue' size='small'>
+            label
+          </Badge>
+        </TreeViewItem>
+        <TreeViewItem>
+          <FileText />
+          types.ts
+        </TreeViewItem>
+      </TreeViewItem>
+      <TreeViewItem>
+        <Folder />
+        public
+        <CountBadge value={1} />
+        <TreeViewItem>
+          <FileText />
+          favicon.ico
+        </TreeViewItem>
+      </TreeViewItem>
+    </TreeView>
+  </div>
+);
+
+/** A disabled row dims and stops responding to everything: toggle, selection and checkbox alike. */
+export const Disabled: StoryFn<TreeViewProps> = args => (
+  <div className='w-320'>
+    <TreeView selectable {...args}>
+      <TreeViewItem id='components' defaultOpen>
+        <Folder />
+        Components
+        <TreeViewItem id='button'>
+          <FileText />
+          Button.tsx
+        </TreeViewItem>
+        <TreeViewItem id='input' disabled>
+          <FileText />
+          Input.tsx (disabled)
+        </TreeViewItem>
+      </TreeViewItem>
+      <TreeViewItem disabled>
+        <Folder />
+        Utils (disabled)
+        <TreeViewItem>
+          <FileText />
+          cn.ts
+        </TreeViewItem>
+      </TreeViewItem>
+      <TreeViewItem id='index'>
+        <FileText />
+        index.ts
+      </TreeViewItem>
+    </TreeView>
+  </div>
+);
+
+interface SearchNode {
+  id: string;
+  label: string;
+  type: 'folder' | 'file';
+  children?: SearchNode[];
+}
+
+const TREE_DATA: SearchNode[] = [
+  {
+    id: 'src',
+    label: 'src',
+    type: 'folder',
+    children: [
+      {
+        id: 'components',
+        label: 'components',
+        type: 'folder',
+        children: [
+          { id: 'button', label: 'Button.tsx', type: 'file' },
+          { id: 'input', label: 'Input.tsx', type: 'file' },
+          { id: 'treeview', label: 'TreeView.tsx', type: 'file' },
+        ],
+      },
+      { id: 'index', label: 'index.ts', type: 'file' },
+    ],
+  },
+  {
+    id: 'utils',
+    label: 'utils',
+    type: 'folder',
+    children: [
+      { id: 'cn', label: 'cn.ts', type: 'file' },
+      { id: 'format', label: 'formatValue.ts', type: 'file' },
+    ],
+  },
+  { id: 'readme', label: 'README.md', type: 'file' },
+];
+
+const BRANCH_IDS = ['src', 'components', 'utils'];
+
+/** The toolbar is assembled from `Text`, `Button` and `Input` — there is no TreeView toolbar. Expand-all drives the items’ controlled `open` state, and the search keeps ancestors of matches and opens them. */
+export const WithHeaderAndSearch: StoryFn<TreeViewProps> = () => {
+  const [query, setQuery] = useState('');
+  const q = query.trim().toLowerCase();
+  const [openIds, setOpenIds] = useState<Set<string>>(() => new Set(['src', 'components']));
+
+  const isOpen = (id: string) => (q ? true : openIds.has(id));
+  const toggle = (id: string, v: boolean) =>
+    setOpenIds(prev => {
+      const next = new Set(prev);
+      if (v) {
+        next.add(id);
+      } else {
+        next.delete(id);
+      }
+      return next;
+    });
+  const setAll = (open: boolean) => setOpenIds(open ? new Set(BRANCH_IDS) : new Set());
+
+  const renderNode = (node: SearchNode): ReactNode => {
+    const selfMatch = !q || node.label.toLowerCase().includes(q);
+    const icon = node.type === 'folder' ? <Folder /> : <FileText />;
+
+    if (node.children) {
+      const kids = node.children.map(renderNode).filter(Boolean);
+      if (q && !selfMatch && kids.length === 0) {
+        return null;
+      }
+      return (
+        <TreeViewItem key={node.id} open={isOpen(node.id)} onOpenChange={v => toggle(node.id, v)}>
+          {icon}
+          {node.label}
+          {kids}
+        </TreeViewItem>
+      );
+    }
+
+    if (!selfMatch) {
+      return null;
+    }
+    return (
+      <TreeViewItem key={node.id}>
+        {icon}
+        {node.label}
+      </TreeViewItem>
+    );
+  };
+
+  const nodes = TREE_DATA.map(renderNode).filter(Boolean);
+
+  return (
+    <div className='w-320'>
+      <TreeView data-testid='tree-view'>
+        {/* Header — expand/collapse buttons grouped tightly, close set apart */}
+        <div className='flex items-center gap-8 px-8 pt-8 pb-4'>
+          <Text size='xs' weight='medium' color='secondary' grow truncate>
+            Header
+          </Text>
+          <div className='flex shrink-0 items-center gap-8'>
+            <div className='flex items-center gap-2'>
+              <Button
+                variant='ghost'
+                color='neutral'
+                size='small'
+                aria-label='Collapse all'
+                onClick={() => setAll(false)}
+              >
+                <ChevronsDownUp size='sm' />
+              </Button>
+              <Button
+                variant='ghost'
+                color='neutral'
+                size='small'
+                aria-label='Expand all'
+                onClick={() => setAll(true)}
+              >
+                <ChevronsUpDown size='sm' />
+              </Button>
+            </div>
+            <Button variant='ghost' color='neutral' size='small' aria-label='Close panel'>
+              <PanelRightClose size='sm' />
+            </Button>
+          </div>
+        </div>
+
+        {/* Search — full width, aligned with the items' selection highlight */}
+        <div className='pb-4'>
+          <div className='relative'>
+            <Search
+              size='md'
+              className='pointer-events-none absolute top-1/2 left-12 -translate-y-1/2 text-text-secondary'
+            />
+            <Input
+              placeholder='Search'
+              value={query}
+              onChange={e => setQuery(e.target.value)}
+              className='pl-40'
+            />
+          </div>
+        </div>
+
+        {nodes}
+      </TreeView>
+    </div>
+  );
+};
+```

package/dist/project/components/TreeView/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/TreeView/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,s=Object.getOwnPropertyDescriptor,m=Object.getOwnPropertyNames,d=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,f=(e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of m(t))u.call(e,l)||l===n||i(e,l,{get:()=>t[l],enumerable:!(r=s(t,l))||r.enumerable});return e},h={},p={$dispatcherGuard:()=>$,$makeReadOnly:()=>k,$reset:()=>O,$structuralCheck:()=>z,c:()=>E,clearRenderCounterRegistry:()=>I,renderCounterRegistry:()=>D,useRenderCounter:()=>M};for(var y in p)i(h,y,{get:p[y],enumerable:!0});e.exports=f(i({},"__esModule",{value:!0}),h);var _=(l=null!=(r=n("C"))?c(d(r)):{},f(r&&r.__esModule?l:i(l,"default",{value:r,enumerable:!0}),r)),{useRef:b,useEffect:S,isValidElement:w}=_,v=null!=(a=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?a:_.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,g=Symbol.for("react.memo_cache_sentinel"),E="function"==typeof(null==(o=_.__COMPILER_RUNTIME)?void 0:o.c)?_.__COMPILER_RUNTIME.c:function(e){return _.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=g;return t[g]=!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 C=null;function N(e){return v.ReactCurrentDispatcher.current=e,v.ReactCurrentDispatcher.current}R.useMemoCache=e=>{if(null!=C)return C.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var x=[];function $(e){let t=v.ReactCurrentDispatcher.current;if(0===e){if(x.push(t),1===x.length&&(C=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.");N(R)}else if(1===e){let e=x.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===x.length&&(C=null),N(e)}else if(2===e)x.push(t),N(C);else if(3===e){let e=x.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");N(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function O(e){for(let t=0;t<e.length;t++)e[t]=g}function k(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function I(){for(let e of D.values())e.forEach(e=>{e.count=0})}function M(e){let t=b(null);null!=t.current&&(t.current.count+=1),S(()=>{if(null==t.current){let n,r={count:0};null==(n=D.get(e))&&(n=new Set,D.set(e,n)),n.add(r),t.current=r}return()=>{var n;let r;null!==t.current&&(n=t.current,null!=(r=D.get(e))&&r.delete(n))}})}var T=new Set;function z(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}`;T.has(i)||(T.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(w(t)||w(n))w(t)!==w(n)?o(`type ${w(t)?"React element":"object"}`,`type ${w(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:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:u,cloneElement:f,createContext:h,createElement:p,createFactory:y,createRef:_,forwardRef:b,isValidElement:S,lazy:w,memo:v,startTransition:g,unstable_act:E,useCallback:R,useContext:C,useDebugValue:N,useDeferredValue:x,useEffect:$,useId:O,useImperativeHandle:k,useInsertionEffect:D,useLayoutEffect:I,useMemo:M,useReducer:T,useRef:z,useState:W,useSyncExternalStore:j,useTransition:A,version:P,use:V}=r;n.d(t,{},{Children:l,Component:a,Fragment:o,Profiler:c,PureComponent:i,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:u,cloneElement:f,createContext:h,createElement:p,createFactory:y,createRef:_,default:r,forwardRef:b,isValidElement:S,lazy:w,memo:v,startTransition:g,unstable_act:E,use:V,useCallback:R,useContext:C,useDebugValue:N,useDeferredValue:x,useEffect:$,useId:O,useImperativeHandle:k,useInsertionEffect:D,useLayoutEffect:I,useMemo:M,useReducer:T,useRef:z,useState:W,useSyncExternalStore:j,useTransition:A,version:P})}},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.ChevronsDownUp,i=window.WallarmDS.Icons.ChevronsUpDown,s=window.WallarmDS.Icons.FileText,m=window.WallarmDS.Icons.Folder,d=window.WallarmDS.Icons.PanelRightClose,u=window.WallarmDS.Icons.Search,f=window.WallarmDS.Badge,h=window.WallarmDS.Button,p=window.WallarmDS.Checkbox,y=window.WallarmDS.CheckboxIndicator,_=window.WallarmDS.Input,b=window.WallarmDS.Text,S=window.WallarmDS.TreeView,w=window.WallarmDS.TreeViewItem,v={title:"Navigation/TreeView",component:S,args:{"data-testid":"tree-view"},parameters:{layout:"centered",docs:{description:{component:"The interactive hierarchy: rows that expand, select and disable, with the connector rails drawn for you. Reach for `Tree` when you only need to *show* nesting — this one is for working in it. Rows are composed freely, so an icon, a badge or a checkbox is just a child, and nested `TreeViewItem`s become the subtree."}}}},g=t=>{let n,r=(0,a.c)(2),{value:l}=t;return r[0]!==l?(n=e(f,{size:"small",color:"slate",type:"secondary",textVariant:"code",children:l}),r[0]=l,r[1]=n):n=r[1],n},E=[{id:"src",label:"src",type:"folder",children:[{id:"components",label:"components",type:"folder",children:[{id:"button",label:"Button.tsx",type:"file"},{id:"input",label:"Input.tsx",type:"file"},{id:"treeview",label:"TreeView.tsx",type:"file"}]},{id:"index",label:"index.ts",type:"file"}]},{id:"utils",label:"utils",type:"folder",children:[{id:"cn",label:"cn.ts",type:"file"},{id:"format",label:"formatValue.ts",type:"file"}]},{id:"readme",label:"README.md",type:"file"}],R=["src","components","utils"];function C(){return new Set(["users"])}function N(e){return e.stopPropagation()}function x(){return new Set(["src","components"])}let $=[{name:"Basic",story:n=>{let r,l,o,c,i,d,u,f=(0,a.c)(8);return f[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(m,{}),f[0]=r):r=f[0],f[1]===Symbol.for("react.memo_cache_sentinel")?(l=t(w,{children:[e(s,{}),"Button.tsx"]}),f[1]=l):l=f[1],f[2]===Symbol.for("react.memo_cache_sentinel")?(o=t(w,{defaultOpen:!0,children:[r,"Components",l,t(w,{children:[e(s,{}),"Input.tsx"]})]}),f[2]=o):o=f[2],f[3]===Symbol.for("react.memo_cache_sentinel")?(c=e(m,{}),f[3]=c):c=f[3],f[4]===Symbol.for("react.memo_cache_sentinel")?(i=t(w,{children:[c,"Utils",t(w,{children:[e(s,{}),"cn.ts"]})]}),f[4]=i):i=f[4],f[5]===Symbol.for("react.memo_cache_sentinel")?(d=t(w,{children:[e(s,{}),"index.ts"]}),f[5]=d):d=f[5],f[6]!==n?(u=e("div",{className:"w-320",children:t(S,{...n,children:[o,i,d]})}),f[6]=n,f[7]=u):u=f[7],u},meta:v},{name:"Nested",story:n=>{let r,l,o,c,i,d,u,f,h,p=(0,a.c)(10);return p[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(m,{}),p[0]=r):r=p[0],p[1]===Symbol.for("react.memo_cache_sentinel")?(l=e(m,{}),p[1]=l):l=p[1],p[2]===Symbol.for("react.memo_cache_sentinel")?(o=e(m,{}),p[2]=o):o=p[2],p[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(w,{defaultOpen:!0,children:[o,"TreeView",t(w,{children:[e(s,{}),"TreeView.tsx"]})]}),p[3]=c):c=p[3],p[4]===Symbol.for("react.memo_cache_sentinel")?(i=t(w,{defaultOpen:!0,children:[l,"components",c,t(w,{children:[e(s,{}),"Button.tsx"]})]}),p[4]=i):i=p[4],p[5]===Symbol.for("react.memo_cache_sentinel")?(d=t(w,{defaultOpen:!0,children:[r,"src",i,t(w,{children:[e(s,{}),"index.ts"]})]}),p[5]=d):d=p[5],p[6]===Symbol.for("react.memo_cache_sentinel")?(u=e(m,{}),p[6]=u):u=p[6],p[7]===Symbol.for("react.memo_cache_sentinel")?(f=t(w,{children:[u,"public",t(w,{children:[e(s,{}),"favicon.ico"]})]}),p[7]=f):f=p[7],p[8]!==n?(h=e("div",{className:"w-320",children:t(S,{...n,children:[d,f]})}),p[8]=n,p[9]=h):h=p[9],h},meta:v},{name:"WithCheckboxes",story:()=>{let n,r,l,c,i,d,u,f,h,_,b,v,g,E,R=(0,a.c)(27),[x,$]=(0,o.useState)(C);R[0]!==x?(n=t=>e(p,{checked:x.has(t),onClick:N,onCheckedChange:e=>$(n=>{let r=new Set(n);return!0===e.checked?r.add(t):r.delete(t),r}),className:"shrink-0",children:e(y,{})}),R[0]=x,R[1]=n):n=R[1];let O=n;return R[2]!==O?(r=O("endpoints"),R[2]=O,R[3]=r):r=R[3],R[4]===Symbol.for("react.memo_cache_sentinel")?(l=e(m,{}),R[4]=l):l=R[4],R[5]!==O?(c=O("users"),R[5]=O,R[6]=c):c=R[6],R[7]===Symbol.for("react.memo_cache_sentinel")?(i=e(s,{}),R[7]=i):i=R[7],R[8]!==c?(d=t(w,{children:[c,i,"/users"]}),R[8]=c,R[9]=d):d=R[9],R[10]!==O?(u=O("orders"),R[10]=O,R[11]=u):u=R[11],R[12]===Symbol.for("react.memo_cache_sentinel")?(f=e(s,{}),R[12]=f):f=R[12],R[13]!==u?(h=t(w,{children:[u,f,"/orders"]}),R[13]=u,R[14]=h):h=R[14],R[15]!==r||R[16]!==d||R[17]!==h?(_=t(w,{defaultOpen:!0,children:[r,l,"Endpoints",d,h]}),R[15]=r,R[16]=d,R[17]=h,R[18]=_):_=R[18],R[19]!==O?(b=O("health"),R[19]=O,R[20]=b):b=R[20],R[21]===Symbol.for("react.memo_cache_sentinel")?(v=e(s,{}),R[21]=v):v=R[21],R[22]!==b?(g=t(w,{children:[b,v,"/health"]}),R[22]=b,R[23]=g):g=R[23],R[24]!==g||R[25]!==_?(E=e("div",{className:"w-320",children:t(S,{children:[_,g]})}),R[24]=g,R[25]=_,R[26]=E):E=R[26],E},meta:v},{name:"Selectable",story:()=>{let n,r,l,c,i,d,u=(0,a.c)(7);u[0]===Symbol.for("react.memo_cache_sentinel")?(n=["button"],u[0]=n):n=u[0];let[f,h]=(0,o.useState)(n);return u[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(m,{}),u[1]=r):r=u[1],u[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(w,{id:"button",children:[e(s,{}),"Button.tsx"]}),u[2]=l):l=u[2],u[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(w,{id:"components",defaultOpen:!0,children:[r,"Components",l,t(w,{id:"input",children:[e(s,{}),"Input.tsx"]})]}),u[3]=c):c=u[3],u[4]===Symbol.for("react.memo_cache_sentinel")?(i=t(w,{id:"index",children:[e(s,{}),"index.ts"]}),u[4]=i):i=u[4],u[5]!==f?(d=e("div",{className:"w-320",children:t(S,{selectable:!0,selectedIds:f,onSelectionChange:h,children:[c,i]})}),u[5]=f,u[6]=d):d=u[6],d},meta:v},{name:"WithInlineBadge",story:n=>{let r,l,o,c,i,d=(0,a.c)(6);return d[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(m,{}),d[0]=r):r=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(l=t(w,{children:[e(s,{}),e(f,{color:"slate",size:"small",children:"new"}),"/users"]}),d[1]=l):l=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(o=t(w,{defaultOpen:!0,children:[r,"Endpoints",l,t(w,{children:[e(s,{}),e(f,{color:"green",type:"secondary",size:"small",textVariant:"code",children:"GET"}),"/orders"]})]}),d[2]=o):o=d[2],d[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(w,{children:[e(s,{}),e(f,{color:"amber",size:"small",children:"wip"}),"/health"]}),d[3]=c):c=d[3],d[4]!==n?(i=e("div",{className:"w-320",children:t(S,{...n,children:[o,c]})}),d[4]=n,d[5]=i):i=d[5],i},meta:v},{name:"WithTrailingContent",story:n=>{let r,l,o,c,i,d,u,h,p,y,_,b=(0,a.c)(12);return b[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(m,{}),b[0]=r):r=b[0],b[1]===Symbol.for("react.memo_cache_sentinel")?(l=e(g,{value:3}),b[1]=l):l=b[1],b[2]===Symbol.for("react.memo_cache_sentinel")?(o=e(s,{}),b[2]=o):o=b[2],b[3]===Symbol.for("react.memo_cache_sentinel")?(c=t(w,{children:[o,"index.ts",e(g,{value:12})]}),b[3]=c):c=b[3],b[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(s,{}),b[4]=i):i=b[4],b[5]===Symbol.for("react.memo_cache_sentinel")?(d=t(w,{children:[i,"config.ts",e(f,{color:"blue",size:"small",children:"label"})]}),b[5]=d):d=b[5],b[6]===Symbol.for("react.memo_cache_sentinel")?(u=t(w,{defaultOpen:!0,children:[r,"src",l,c,d,t(w,{children:[e(s,{}),"types.ts"]})]}),b[6]=u):u=b[6],b[7]===Symbol.for("react.memo_cache_sentinel")?(h=e(m,{}),b[7]=h):h=b[7],b[8]===Symbol.for("react.memo_cache_sentinel")?(p=e(g,{value:1}),b[8]=p):p=b[8],b[9]===Symbol.for("react.memo_cache_sentinel")?(y=t(w,{children:[h,"public",p,t(w,{children:[e(s,{}),"favicon.ico"]})]}),b[9]=y):y=b[9],b[10]!==n?(_=e("div",{className:"w-320",children:t(S,{...n,children:[u,y]})}),b[10]=n,b[11]=_):_=b[11],_},meta:v},{name:"Disabled",story:n=>{let r,l,o,c,i,d,u,f=(0,a.c)(8);return f[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(m,{}),f[0]=r):r=f[0],f[1]===Symbol.for("react.memo_cache_sentinel")?(l=t(w,{id:"button",children:[e(s,{}),"Button.tsx"]}),f[1]=l):l=f[1],f[2]===Symbol.for("react.memo_cache_sentinel")?(o=t(w,{id:"components",defaultOpen:!0,children:[r,"Components",l,t(w,{id:"input",disabled:!0,children:[e(s,{}),"Input.tsx (disabled)"]})]}),f[2]=o):o=f[2],f[3]===Symbol.for("react.memo_cache_sentinel")?(c=e(m,{}),f[3]=c):c=f[3],f[4]===Symbol.for("react.memo_cache_sentinel")?(i=t(w,{disabled:!0,children:[c,"Utils (disabled)",t(w,{children:[e(s,{}),"cn.ts"]})]}),f[4]=i):i=f[4],f[5]===Symbol.for("react.memo_cache_sentinel")?(d=t(w,{id:"index",children:[e(s,{}),"index.ts"]}),f[5]=d):d=f[5],f[6]!==n?(u=e("div",{className:"w-320",children:t(S,{selectable:!0,...n,children:[o,i,d]})}),f[6]=n,f[7]=u):u=f[7],u},meta:v},{name:"WithHeaderAndSearch",story:()=>{let n,r,l,f,p,y,v,g,C,N,$,O,k,D,I,M,T=(0,a.c)(27),[z,W]=(0,o.useState)(""),j=z.trim().toLowerCase(),[A,P]=(0,o.useState)(x);T[0]===Symbol.for("react.memo_cache_sentinel")?(n=(e,t)=>P(n=>{let r=new Set(n);return t?r.add(e):r.delete(e),r}),T[0]=n):n=T[0];let V=n;T[1]===Symbol.for("react.memo_cache_sentinel")?(r=e=>P(e?new Set(R):new Set),T[1]=r):r=T[1];let U=r,L=n=>{let r=!j||n.label.toLowerCase().includes(j),l="folder"===n.type?e(m,{}):e(s,{});if(n.children){let e,a=n.children.map(L).filter(Boolean);return j&&!r&&0===a.length?null:t(w,{open:(e=n.id,!!j||A.has(e)),onOpenChange:e=>V(n.id,e),children:[l,n.label,a]},n.id)}return r?t(w,{children:[l,n.label]},n.id):null},B=E.map(L).filter(Boolean);return T[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(b,{size:"xs",weight:"medium",color:"secondary",grow:!0,truncate:!0,children:"Header"}),T[2]=l):l=T[2],T[3]!==U?(f=()=>U(!1),T[3]=U,T[4]=f):f=T[4],T[5]===Symbol.for("react.memo_cache_sentinel")?(p=e(c,{size:"sm"}),T[5]=p):p=T[5],T[6]!==f?(y=e(h,{variant:"ghost",color:"neutral",size:"small","aria-label":"Collapse all",onClick:f,children:p}),T[6]=f,T[7]=y):y=T[7],T[8]!==U?(v=()=>U(!0),T[8]=U,T[9]=v):v=T[9],T[10]===Symbol.for("react.memo_cache_sentinel")?(g=e(i,{size:"sm"}),T[10]=g):g=T[10],T[11]!==v?(C=e(h,{variant:"ghost",color:"neutral",size:"small","aria-label":"Expand all",onClick:v,children:g}),T[11]=v,T[12]=C):C=T[12],T[13]!==y||T[14]!==C?(N=t("div",{className:"flex items-center gap-2",children:[y,C]}),T[13]=y,T[14]=C,T[15]=N):N=T[15],T[16]===Symbol.for("react.memo_cache_sentinel")?($=e(h,{variant:"ghost",color:"neutral",size:"small","aria-label":"Close panel",children:e(d,{size:"sm"})}),T[16]=$):$=T[16],T[17]!==N?(O=t("div",{className:"flex items-center gap-8 px-8 pt-8 pb-4",children:[l,t("div",{className:"flex shrink-0 items-center gap-8",children:[N,$]})]}),T[17]=N,T[18]=O):O=T[18],T[19]===Symbol.for("react.memo_cache_sentinel")?(k=e(u,{size:"md",className:"pointer-events-none absolute top-1/2 left-12 -translate-y-1/2 text-text-secondary"}),T[19]=k):k=T[19],T[20]===Symbol.for("react.memo_cache_sentinel")?(D=e=>W(e.target.value),T[20]=D):D=T[20],T[21]!==z?(I=e("div",{className:"pb-4",children:t("div",{className:"relative",children:[k,e(_,{placeholder:"Search",value:z,onChange:D,className:"pl-40"})]})}),T[21]=z,T[22]=I):I=T[22],T[23]!==B||T[24]!==O||T[25]!==I?(M=e("div",{className:"w-320",children:t(S,{"data-testid":"tree-view",children:[O,I,B]})}),T[23]=B,T[24]=O,T[25]=I,T[26]=M):M=T[26],M},meta:v}];function O({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,$.map((e,t)=>o.default.createElement(O,{key:t,entry:e})))),t}}})();