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

package/dist/project/components/SearchModal/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/SearchModal/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,d=Object.getOwnPropertyNames,m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,h=(e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of d(t))u.call(e,l)||l===n||i(e,l,{get:()=>t[l],enumerable:!(r=s(t,l))||r.enumerable});return e},p={},f={$dispatcherGuard:()=>$,$makeReadOnly:()=>D,$reset:()=>E,$structuralCheck:()=>I,c:()=>N,clearRenderCounterRegistry:()=>M,renderCounterRegistry:()=>k,useRenderCounter:()=>O};for(var y in f)i(p,y,{get:f[y],enumerable:!0});e.exports=h(i({},"__esModule",{value:!0}),p);var S=(l=null!=(r=n("C"))?c(m(r)):{},h(r&&r.__esModule?l:i(l,"default",{value:r,enumerable:!0}),r)),{useRef:b,useEffect:g,isValidElement:w}=S,_=null!=(a=S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?a:S.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,x=Symbol.for("react.memo_cache_sentinel"),N="function"==typeof(null==(o=S.__COMPILER_RUNTIME)?void 0:o.c)?S.__COMPILER_RUNTIME.c:function(e){return S.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=x;return t[x]=!0,t},[])},C={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{C[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 v=null;function R(e){return _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}C.useMemoCache=e=>{if(null!=v)return v.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var z=[];function $(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if(z.push(t),1===z.length&&(v=t),t===C)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(C)}else if(1===e){let e=z.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===z.length&&(v=null),R(e)}else if(2===e)z.push(t),R(v);else if(3===e){let e=z.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");R(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function E(e){for(let t=0;t<e.length;t++)e[t]=x}function D(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var k=new Map;function M(){for(let e of k.values())e.forEach(e=>{e.count=0})}function O(e){let t=b(null);null!=t.current&&(t.current.count+=1),g(()=>{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 W=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}`;W.has(i)||(W.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:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:u,cloneElement:h,createContext:p,createElement:f,createFactory:y,createRef:S,forwardRef:b,isValidElement:g,lazy:w,memo:_,startTransition:x,unstable_act:N,useCallback:C,useContext:v,useDebugValue:R,useDeferredValue:z,useEffect:$,useId:E,useImperativeHandle:D,useInsertionEffect:k,useLayoutEffect:M,useMemo:O,useReducer:W,useRef:I,useState:A,useSyncExternalStore:P,useTransition:j,version:T,use:L}=r;n.d(t,{},{Children:l,Component:a,Fragment:o,Profiler:c,PureComponent:i,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:u,cloneElement:h,createContext:p,createElement:f,createFactory:y,createRef:S,default:r,forwardRef:b,isValidElement:g,lazy:w,memo:_,startTransition:x,unstable_act:N,use:L,useCallback:C,useContext:v,useDebugValue:R,useDeferredValue:z,useEffect:$,useId:E,useImperativeHandle:D,useInsertionEffect:k,useLayoutEffect:M,useMemo:O,useReducer:W,useRef:I,useState:A,useSyncExternalStore:P,useTransition:j,version:T})}},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.ChevronRight,i=window.WallarmDS.Icons.Clock,s=window.WallarmDS.Icons.Compass,d=window.WallarmDS.Icons.Globe,m=window.WallarmDS.Icons.History,u=window.WallarmDS.Icons.Layers,h=window.WallarmDS.Icons.Plus,p=window.WallarmDS.Icons.Search,f=window.WallarmDS.Icons.Settings,y=window.WallarmDS.Icons.Shield,S=window.WallarmDS.Icons.Users,b=window.WallarmDS.Icons.Zap,g=window.WallarmDS.Button,w=window.WallarmDS.Kbd,_=window.WallarmDS.Text,x=window.WallarmDS.WallyIcon,N=window.WallarmDS.SearchModal,C=window.WallarmDS.SearchModalBody,v=window.WallarmDS.SearchModalContent,R=window.WallarmDS.SearchModalEmpty,z=window.WallarmDS.SearchModalFooter,$=window.WallarmDS.SearchModalGroup,E=window.WallarmDS.SearchModalGroupLabel,D=window.WallarmDS.SearchModalInput,k=window.WallarmDS.SearchModalItem,M=window.WallarmDS.SearchModalTrigger,O={title:"Navigation/SearchModal",component:N,subcomponents:{SearchModalTrigger:M,SearchModalContent:v,SearchModalInput:D,SearchModalBody:C,SearchModalGroup:$,SearchModalGroupLabel:E,SearchModalItem:k,SearchModalEmpty:R,SearchModalFooter:z},parameters:{layout:"centered",docs:{description:{component:"A command-palette dialog opened with Cmd+K (Ctrl+K on Windows/Linux). Provides a search input, grouped item lists, keyboard navigation, and a footer with keyboard hints. Content is consumer-assembled: the component is a composable shell, not a hard-wired feature."}}}},W=()=>void 0,I=[{id:"recent-1",label:"Attack Rechecker — Scanner",icon:e(m,{className:"text-text-primary !icon-md"}),date:"2m ago"},{id:"recent-2",label:"API Discovery — API Security",icon:e(m,{className:"text-text-primary !icon-md"}),date:"15m ago"},{id:"recent-3",label:"Rules — Cloud WAF",icon:e(m,{className:"text-text-primary !icon-md"}),date:"1h ago"},{id:"recent-4",label:"Dashboards — Platform",icon:e(m,{className:"text-text-primary !icon-md"}),date:"3h ago"},{id:"recent-5",label:"Integrations — Settings",icon:e(m,{className:"text-text-primary !icon-md"}),date:"Yesterday"}],A=[{id:"nav-scanner",label:"Scanner",icon:e(p,{className:"text-text-primary !icon-md"})},{id:"nav-api-security",label:"API Security",icon:e(y,{className:"text-text-primary !icon-md"})},{id:"nav-cloud-waf",label:"Cloud WAF",icon:e(d,{className:"text-text-primary !icon-md"})},{id:"nav-dashboards",label:"Dashboards",icon:e(u,{className:"text-text-primary !icon-md"})},{id:"nav-settings",label:"Settings",icon:e(f,{className:"text-text-primary !icon-md"})},{id:"nav-connectors",label:"Connectors",icon:e(b,{className:"text-text-primary !icon-md"})},{id:"nav-audit-log",label:"Audit Log",icon:e(i,{className:"text-text-primary !icon-md"})},{id:"nav-users",label:"Users & Roles",icon:e(S,{className:"text-text-primary !icon-md"})}],P=[{id:"create-rule",label:"Rule",icon:e(y,{className:"text-text-primary !icon-md"}),section:"Cloud WAF"},{id:"create-trigger",label:"Trigger",icon:e(b,{className:"text-text-primary !icon-md"}),section:"Cloud WAF"},{id:"create-app",label:"Application",icon:e(d,{className:"text-text-primary !icon-md"}),section:"Scanner"},{id:"create-scope",label:"Scan scope",icon:e(s,{className:"text-text-primary !icon-md"}),section:"Scanner"},{id:"create-connector",label:"Connector",icon:e(b,{className:"text-text-primary !icon-md"}),section:"Integrations"}];function j(e,t){if(!t)return e;let n=t.toLowerCase();return e.filter(e=>e.label.toLowerCase().includes(n))}let T=()=>{let n,r,l=(0,a.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(p,{}),l[0]=n):n=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(M,{asChild:!0,children:t(g,{variant:"outline",color:"neutral",children:[n,"Search",t(w,{size:"xsmall",children:["u">typeof navigator&&/Mac/i.test(navigator.userAgent)?"⌘":"Ctrl+","K"]})]})}),l[1]=r):r=l[1],r};function L(n){return t(k,{onSelect:W,children:[n.icon,e(_,{size:"sm",children:n.label}),e("span",{className:"ml-auto",children:e(_,{size:"xs",color:"secondary",children:n.date})})]},n.id)}function F(n){return t(k,{onSelect:W,children:[n.icon,e(_,{size:"sm",children:n.label}),e(c,{className:"text-text-tertiary ml-auto !icon-sm"})]},n.id)}function U(n){return t(k,{onSelect:W,children:[n.icon,e(_,{size:"sm",children:n.label}),e(c,{className:"text-text-tertiary ml-auto !icon-sm"})]},n.id)}function Q(n){return t(k,{onSelect:W,children:[n.icon,e(_,{size:"sm",children:n.label})]},n.id)}function G(n){let[r,l]=n;return t($,{children:[e(E,{children:e(_,{size:"xs",color:"secondary",weight:"medium",children:r})}),l.map(Q)]},r)}function J(n){return e(k,{asChild:!0,onSelect:W,children:t("a",{href:`#${n.id}`,children:[n.icon,e(_,{size:"sm",children:n.label}),e(c,{className:"text-text-tertiary ml-auto !icon-sm"})]})},n.id)}function V(n){return t(k,{onSelect:"switch-tenant"===n.id?void 0:W,disabled:"switch-tenant"===n.id,children:[n.icon,e(_,{size:"sm",children:n.label}),"switch-tenant"===n.id&&e("span",{className:"ml-auto",children:e(_,{size:"xs",color:"secondary",children:"Unavailable"})})]},n.id)}function Y(n){return t(k,{onSelect:W,children:[n.icon,e(_,{size:"sm",children:n.label})]},n.id)}function B(t,n){return{id:`item-${n}`,label:`Feature ${n+1}`,icon:e(s,{className:"text-text-primary !icon-md"})}}function H(n){return t(k,{onSelect:W,children:[n.icon,e(_,{size:"sm",children:n.label})]},n.id)}let K=[{name:"Basic",story:()=>{let n,r,c,i,s,d,m,u,p,f,y,b,g,w,M,O,P=(0,a.c)(35),[U,Q]=(0,o.useState)(!1),[G,J]=(0,o.useState)("");P[0]!==G?(n=j(I,G),P[0]=G,P[1]=n):n=P[1];let V=n;P[2]!==G?(r=j(A,G),P[2]=G,P[3]=r):r=P[3];let Y=r,B=V.length>0||Y.length>0;P[4]===Symbol.for("react.memo_cache_sentinel")?(c=e(T,{}),P[4]=c):c=P[4],P[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(D,{placeholder:"Search products, features, and more\\u2026"}),P[5]=i):i=P[5],P[6]===Symbol.for("react.memo_cache_sentinel")?(s=e(E,{children:e(_,{size:"xs",color:"secondary",weight:"medium",children:"Quick actions"})}),P[6]=s):s=P[6],P[7]===Symbol.for("react.memo_cache_sentinel")?(d=e(x,{variant:"circle",size:"sm"}),P[7]=d):d=P[7];let H=G?`Ask Wally "${G}"`:"Ask Wally";return P[8]!==H?(m=t(k,{onSelect:W,children:[d,e(_,{size:"sm",children:H})]}),P[8]=H,P[9]=m):m=P[9],P[10]!==G?(u=!G&&t(l,{children:[t(k,{onSelect:W,children:[e(S,{className:"!icon-md"}),e(_,{size:"sm",children:"Switch tenant"})]}),t(k,{onSelect:W,children:[e(h,{className:"!icon-md"}),e(_,{size:"sm",children:"Create…"})]})]}),P[10]=G,P[11]=u):u=P[11],P[12]!==m||P[13]!==u?(p=t($,{children:[s,m,u]}),P[12]=m,P[13]=u,P[14]=p):p=P[14],P[15]!==V?(f=V.length>0&&t($,{children:[e(E,{children:e(_,{size:"xs",color:"secondary",weight:"medium",children:"Recent"})}),V.map(L)]}),P[15]=V,P[16]=f):f=P[16],P[17]!==Y||P[18]!==B||P[19]!==G?(y=(B||!G)&&t($,{children:[e(E,{children:e(_,{size:"xs",color:"secondary",weight:"medium",children:G?"Go to":"Jump to"})}),(G?Y:A).map(F)]}),P[17]=Y,P[18]=B,P[19]=G,P[20]=y):y=P[20],P[21]!==B||P[22]!==G?(b=G&&!B&&e($,{children:e(R,{children:e(_,{size:"sm",color:"secondary",children:"No results"})})}),P[21]=B,P[22]=G,P[23]=b):b=P[23],P[24]!==f||P[25]!==y||P[26]!==b||P[27]!==p?(g=t(C,{children:[p,f,y,b]}),P[24]=f,P[25]=y,P[26]=b,P[27]=p,P[28]=g):g=P[28],P[29]===Symbol.for("react.memo_cache_sentinel")?(w=e(z,{}),P[29]=w):w=P[29],P[30]!==g?(M=t(v,{children:[i,g,w]}),P[30]=g,P[31]=M):M=P[31],P[32]!==U||P[33]!==M?(O=t(N,{open:U,onOpenChange:Q,onQueryChange:J,"data-testid":"search",children:[c,M]}),P[32]=U,P[33]=M,P[34]=O):O=P[34],O},meta:O},{name:"EmptyRecents",story:()=>{let n,r,c,i,s,d,m,u,p,f,y,b,g,w,M,O=(0,a.c)(32),[I,P]=(0,o.useState)(!1),[L,F]=(0,o.useState)("");O[0]!==L?(n=j(A,L),O[0]=L,O[1]=n):n=O[1];let Q=n;O[2]===Symbol.for("react.memo_cache_sentinel")?(r=e(T,{}),O[2]=r):r=O[2],O[3]===Symbol.for("react.memo_cache_sentinel")?(c=e(D,{placeholder:"Search products, features, and more\\u2026"}),O[3]=c):c=O[3],O[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(E,{children:e(_,{size:"xs",color:"secondary",weight:"medium",children:"Quick actions"})}),O[4]=i):i=O[4],O[5]===Symbol.for("react.memo_cache_sentinel")?(s=e(x,{variant:"circle",size:"sm"}),O[5]=s):s=O[5];let G=L?`Ask Wally "${L}"`:"Ask Wally";return O[6]!==G?(d=t(k,{onSelect:W,children:[s,e(_,{size:"sm",children:G})]}),O[6]=G,O[7]=d):d=O[7],O[8]!==L?(m=!L&&t(l,{children:[t(k,{onSelect:W,children:[e(S,{className:"!icon-md"}),e(_,{size:"sm",children:"Switch tenant"})]}),t(k,{onSelect:W,children:[e(h,{className:"!icon-md"}),e(_,{size:"sm",children:"Create…"})]})]}),O[8]=L,O[9]=m):m=O[9],O[10]!==d||O[11]!==m?(u=t($,{children:[i,d,m]}),O[10]=d,O[11]=m,O[12]=u):u=O[12],O[13]!==L?(p=!L&&t($,{children:[e(E,{children:e(_,{size:"xs",color:"secondary",weight:"medium",children:"Recent"})}),e(R,{children:e(_,{size:"sm",color:"secondary",children:"Nothing recent yet"})})]}),O[13]=L,O[14]=p):p=O[14],O[15]!==Q||O[16]!==L?(f=Q.length>0&&t($,{children:[e(E,{children:e(_,{size:"xs",color:"secondary",weight:"medium",children:L?"Go to":"Jump to"})}),Q.map(U)]}),O[15]=Q,O[16]=L,O[17]=f):f=O[17],O[18]!==Q.length||O[19]!==L?(y=L&&0===Q.length&&e($,{children:e(R,{children:e(_,{size:"sm",color:"secondary",children:"No results"})})}),O[18]=Q.length,O[19]=L,O[20]=y):y=O[20],O[21]!==f||O[22]!==y||O[23]!==u||O[24]!==p?(b=t(C,{children:[u,p,f,y]}),O[21]=f,O[22]=y,O[23]=u,O[24]=p,O[25]=b):b=O[25],O[26]===Symbol.for("react.memo_cache_sentinel")?(g=e(z,{}),O[26]=g):g=O[26],O[27]!==b?(w=t(v,{children:[c,b,g]}),O[27]=b,O[28]=w):w=O[28],O[29]!==I||O[30]!==w?(M=t(N,{open:I,onOpenChange:P,onQueryChange:F,children:[r,w]}),O[29]=I,O[30]=w,O[31]=M):M=O[31],M},meta:O},{name:"SubList",story:()=>{let n,r,l,c,i,s,d,m,u,h,p=(0,a.c)(18),[f,y]=(0,o.useState)(!1),[S,b]=(0,o.useState)("");p[0]!==S?(n=j(P,S),p[0]=S,p[1]=n):n=p[1];let g=n;if(p[2]!==g){for(let e of(r=new Map,g)){let t=e.section??"Other",n=r.get(t);n?n.push(e):r.set(t,[e])}p[2]=g,p[3]=r}else r=p[3];let x=r;return p[4]===Symbol.for("react.memo_cache_sentinel")?(l=e(T,{}),p[4]=l):l=p[4],p[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(D,{placeholder:"Filter creatable items\\u2026"}),p[5]=c):c=p[5],p[6]!==g.length||p[7]!==x?(i=g.length>0?[...x.entries()].map(G):e($,{children:e(R,{children:e(_,{size:"sm",color:"secondary",children:"No results"})})}),p[6]=g.length,p[7]=x,p[8]=i):i=p[8],p[9]!==i?(s=e(C,{children:i}),p[9]=i,p[10]=s):s=p[10],p[11]===Symbol.for("react.memo_cache_sentinel")?(d=t("span",{className:"inline-flex items-center gap-4",children:[e(w,{size:"xsmall",children:"esc"}),e(_,{size:"xs",color:"secondary",children:"back"})]}),p[11]=d):d=p[11],p[12]===Symbol.for("react.memo_cache_sentinel")?(m=t(z,{children:[d,t("span",{className:"inline-flex items-center gap-4",children:[e(w,{size:"xsmall",children:"↵"}),e(_,{size:"xs",color:"secondary",children:"to select"})]})]}),p[12]=m):m=p[12],p[13]!==s?(u=t(v,{children:[c,s,m]}),p[13]=s,p[14]=u):u=p[14],p[15]!==f||p[16]!==u?(h=t(N,{open:f,onOpenChange:y,onQueryChange:b,children:[l,u]}),p[15]=f,p[16]=u,p[17]=h):h=p[17],h},meta:O},{name:"ItemsAsLinks",story:()=>{let n,r,l,c,i,s,d,m=(0,a.c)(13),[u,h]=(0,o.useState)(!1),[p,f]=(0,o.useState)("");m[0]!==p?(n=j(A,p),m[0]=p,m[1]=n):n=m[1];let y=n;return m[2]===Symbol.for("react.memo_cache_sentinel")?(r=e(T,{}),m[2]=r):r=m[2],m[3]===Symbol.for("react.memo_cache_sentinel")?(l=e(D,{placeholder:"Search products, features, and more\\u2026"}),m[3]=l):l=m[3],m[4]!==y||m[5]!==p?(c=e(C,{children:y.length>0?t($,{children:[e(E,{children:e(_,{size:"xs",color:"secondary",weight:"medium",children:p?"Go to":"Jump to"})}),y.map(J)]}):e($,{children:e(R,{children:e(_,{size:"sm",color:"secondary",children:"No results"})})})}),m[4]=y,m[5]=p,m[6]=c):c=m[6],m[7]===Symbol.for("react.memo_cache_sentinel")?(i=e(z,{}),m[7]=i):i=m[7],m[8]!==c?(s=t(v,{children:[l,c,i]}),m[8]=c,m[9]=s):s=m[9],m[10]!==u||m[11]!==s?(d=t(N,{open:u,onOpenChange:h,onQueryChange:f,children:[r,s]}),m[10]=u,m[11]=s,m[12]=d):d=m[12],d},meta:O},{name:"DisabledItems",story:()=>{let n,r,l,c,i,s,d,m,u=(0,a.c)(15),[p,f]=(0,o.useState)(!1),[y,b]=(0,o.useState)("");if(u[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(x,{variant:"circle",size:"sm"}),u[0]=n):n=u[0],u[1]!==y){let t,l;u[3]===Symbol.for("react.memo_cache_sentinel")?(t=e(S,{className:"!icon-md"}),u[3]=t):t=u[3],u[4]===Symbol.for("react.memo_cache_sentinel")?(l=e(h,{className:"!icon-md"}),u[4]=l):l=u[4],r=j([{id:"ask-wally",label:"Ask Wally",icon:n},{id:"switch-tenant",label:"Switch tenant",icon:t},{id:"create",label:"Create…",icon:l}],y),u[1]=y,u[2]=r}else r=u[2];let g=r;return u[5]===Symbol.for("react.memo_cache_sentinel")?(l=e(T,{}),u[5]=l):l=u[5],u[6]===Symbol.for("react.memo_cache_sentinel")?(c=e(D,{placeholder:"Search products, features, and more\\u2026"}),u[6]=c):c=u[6],u[7]!==g?(i=e(C,{children:g.length>0?t($,{children:[e(E,{children:e(_,{size:"xs",color:"secondary",weight:"medium",children:"Quick actions"})}),g.map(V)]}):e($,{children:e(R,{children:e(_,{size:"sm",color:"secondary",children:"No results"})})})}),u[7]=g,u[8]=i):i=u[8],u[9]===Symbol.for("react.memo_cache_sentinel")?(s=e(z,{}),u[9]=s):s=u[9],u[10]!==i?(d=t(v,{children:[c,i,s]}),u[10]=i,u[11]=d):d=u[11],u[12]!==p||u[13]!==d?(m=t(N,{open:p,onOpenChange:f,onQueryChange:b,children:[l,d]}),u[12]=p,u[13]=d,u[14]=m):m=u[14],m},meta:O},{name:"CloseOnSelectFalse",story:()=>{let n,r,l,c,i,s,d,m,u,h=(0,a.c)(15),[p,f]=(0,o.useState)(!1),[y,S]=(0,o.useState)("");h[0]===Symbol.for("react.memo_cache_sentinel")?(n=[],h[0]=n):n=h[0];let[b,g]=(0,o.useState)(n);h[1]!==y?(r=j(A,y),h[1]=y,h[2]=r):r=h[2];let w=r;h[3]===Symbol.for("react.memo_cache_sentinel")?(l=e=>g(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e]),h[3]=l):l=h[3];let x=l;return h[4]===Symbol.for("react.memo_cache_sentinel")?(c=e(T,{}),h[4]=c):c=h[4],h[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(D,{placeholder:"Pick items (modal stays open)\\u2026"}),h[5]=i):i=h[5],h[6]!==w||h[7]!==b?(s=e(C,{children:w.length>0?t($,{children:[e(E,{children:t(_,{size:"xs",color:"secondary",weight:"medium",children:["Products ",b.length>0&&`(${b.length} selected)`]})}),w.map(n=>t(k,{closeOnSelect:!1,onSelect:()=>x(n.id),children:[n.icon,e(_,{size:"sm",children:n.label}),b.includes(n.id)&&e("span",{className:"ml-auto",children:e(_,{size:"xs",color:"primary-alt",children:"Selected"})})]},n.id))]}):e($,{children:e(R,{children:e(_,{size:"sm",color:"secondary",children:"No results"})})})}),h[6]=w,h[7]=b,h[8]=s):s=h[8],h[9]===Symbol.for("react.memo_cache_sentinel")?(d=e(z,{}),h[9]=d):d=h[9],h[10]!==s?(m=t(v,{children:[i,s,d]}),h[10]=s,h[11]=m):m=h[11],h[12]!==p||h[13]!==m?(u=t(N,{open:p,onOpenChange:f,onQueryChange:S,children:[c,m]}),h[12]=p,h[13]=m,h[14]=u):u=h[14],u},meta:O},{name:"Controlled",story:()=>{let n,r,c,i,s,d,m,u=(0,a.c)(13),[h,p]=(0,o.useState)(!1),[f,y]=(0,o.useState)("");u[0]!==f?(n=j(A,f),u[0]=f,u[1]=n):n=u[1];let S=n;return u[2]===Symbol.for("react.memo_cache_sentinel")?(r=e(g,{variant:"outline",color:"neutral",onClick:()=>p(!0),children:"Open Programmatically"}),u[2]=r):r=u[2],u[3]===Symbol.for("react.memo_cache_sentinel")?(c=e(D,{placeholder:"Search products, features, and more\\u2026"}),u[3]=c):c=u[3],u[4]!==S||u[5]!==f?(i=e(C,{children:S.length>0?t($,{children:[e(E,{children:e(_,{size:"xs",color:"secondary",weight:"medium",children:f?"Go to":"Jump to"})}),S.map(Y)]}):e($,{children:e(R,{children:e(_,{size:"sm",color:"secondary",children:"No results"})})})}),u[4]=S,u[5]=f,u[6]=i):i=u[6],u[7]===Symbol.for("react.memo_cache_sentinel")?(s=e(z,{}),u[7]=s):s=u[7],u[8]!==i?(d=t(v,{children:[c,i,s]}),u[8]=i,u[9]=d):d=u[9],u[10]!==h||u[11]!==d?(m=t(l,{children:[r,e(N,{open:h,onOpenChange:p,onQueryChange:y,children:d})]}),u[10]=h,u[11]=d,u[12]=m):m=u[12],m},meta:O},{name:"Scrollable",story:()=>{let n,r,l,c,i,s,d,m,u=(0,a.c)(13),[h,p]=(0,o.useState)(!1),[f,y]=(0,o.useState)("");u[0]===Symbol.for("react.memo_cache_sentinel")?(n=Array.from({length:30},B),u[0]=n):n=u[0];let S=n;u[1]!==f?(r=j(S,f),u[1]=f,u[2]=r):r=u[2];let b=r;return u[3]===Symbol.for("react.memo_cache_sentinel")?(l=e(T,{}),u[3]=l):l=u[3],u[4]===Symbol.for("react.memo_cache_sentinel")?(c=e(D,{placeholder:"Search products, features, and more\\u2026"}),u[4]=c):c=u[4],u[5]!==b?(i=e(C,{children:b.length>0?t($,{children:[e(E,{children:e(_,{size:"xs",color:"secondary",weight:"medium",children:"All features"})}),b.map(H)]}):e($,{children:e(R,{children:e(_,{size:"sm",color:"secondary",children:"No results"})})})}),u[5]=b,u[6]=i):i=u[6],u[7]===Symbol.for("react.memo_cache_sentinel")?(s=e(z,{}),u[7]=s):s=u[7],u[8]!==i?(d=t(v,{children:[c,i,s]}),u[8]=i,u[9]=d):d=u[9],u[10]!==h||u[11]!==d?(m=t(N,{open:h,onOpenChange:p,onQueryChange:y,children:[l,d]}),u[10]=h,u[11]=d,u[12]=m):m=u[12],m},meta:O}];function Z({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,K.map((e,t)=>o.default.createElement(Z,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,382 @@
+Switches between renditions of the same content, with every option visible — reach for `Tabs` when the sections are distinct places rather than views of one thing, and `Radio` when the choice is an answer a form submits. It owns no panel: it reports the chosen value and you re-render the content yourself.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `title` | `string \| undefined` | no | — |  |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `full-width` | `boolean` | no | `false` |  |
+| `value` | `string \| undefined` | no | — | The currently selected value |
+| `default-value` | `string \| undefined` | no | — | The default selected value |
+| `on-change` | `((value: string) => void) \| undefined` | no | — | Callback function called when the selection changes |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.SegmentedControlButton` — `SegmentedControlButtonProps` in the declaration bundle.
+- `WallarmDS.SegmentedControlItem` — `SegmentedControlItemProps` in the declaration bundle.
+- `WallarmDS.SegmentedControlSeparator` — `SegmentedControlSeparatorProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+Two to five options, all visible at once. Past that the control gets cramped and the
+comparison it exists to offer stops working.
+
+Source: SegmentedControl/SegmentedControl.stories.tsx#Basic
+
+### Disabled
+
+A disabled option stays visible rather than disappearing, so the set of choices doesn't
+change shape between visits.
+
+Source: SegmentedControl/SegmentedControl.stories.tsx#Disabled
+
+### Icons
+
+Icons beside the labels, which helps when the options are renditions — a list against a
+grid — rather than categories.
+
+Source: SegmentedControl/SegmentedControl.stories.tsx#Icons
+
+### IconOnly
+
+Icon-only segments for a toolbar. Each still needs an accessible name; the icon is the
+label only visually.
+
+Source: SegmentedControl/SegmentedControl.stories.tsx#IconOnly
+
+### MoreButton
+
+An overflow trigger for the options that didn't fit. If you need this often, the choice
+probably wants a `Select`.
+
+Source: SegmentedControl/SegmentedControl.stories.tsx#MoreButton
+
+### Many
+
+What too many options looks like — worth seeing so the limit is a judgement rather than a
+rule you took on trust.
+
+Source: SegmentedControl/SegmentedControl.stories.tsx#Many
+
+### Badge
+
+A count on a segment, for when each view holds a different number of things and the reader
+would otherwise have to switch to find out.
+
+Source: SegmentedControl/SegmentedControl.stories.tsx#Badge
+
+### FullWidth
+
+Stretches to its container, dividing the width evenly. Suits a narrow panel; in a wide one
+it leaves the segments floating far apart.
+
+Source: SegmentedControl/SegmentedControl.stories.tsx#FullWidth
+
+### Controlled
+
+Own the value when something else has to move with it, which is the usual case, since the
+control renders no panel of its own.
+
+Source: SegmentedControl/SegmentedControl.stories.tsx#Controlled
+
+### FormField
+
+Inside `Field`, for when the choice really is a form answer — the case where `Radio` is
+often the better call.
+
+Source: SegmentedControl/SegmentedControl.stories.tsx#FormField
+
+## Story sources
+
+### SegmentedControl/SegmentedControl.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import { fn } from 'storybook/test';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import {
+  ChevronLeft,
+  ChevronRight,
+  CircleDashed,
+  Ellipsis,
+  Home,
+  Info,
+  Search,
+  SlidersHorizontal,
+} from '../../icons';
+import { Field, FieldDescription, FieldLabel } from '../Field';
+import { NumericBadge } from '../NumericBadge';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../Tooltip';
+import { SegmentedControl, type SegmentedControlProps } from './SegmentedControl';
+import { SegmentedControlButton } from './SegmentedControlButton';
+import { SegmentedControlItem } from './SegmentedControlItem';
+import { SegmentedControlSeparator } from './SegmentedControlSeparator';
+
+const DESCRIPTION = [
+  'Switches between renditions of the same content, with every option visible — reach for `Tabs` when the sections are distinct places rather than views of one thing, and `Radio` when the choice is an answer a form submits.',
+  'It owns no panel: it reports the chosen value and you re-render the content yourself.',
+].join(' ');
+
+const onShowMore = fn().mockName('onShowMore');
+
+const meta = {
+  title: 'Inputs/SegmentedControl',
+  component: SegmentedControl,
+  subcomponents: {
+    SegmentedControlItem,
+    SegmentedControlSeparator,
+    SegmentedControlButton,
+  },
+  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 control should take full width',
+      defaultValue: false,
+    },
+  },
+} satisfies Meta<typeof SegmentedControl>;
+
+export default meta;
+
+/**
+ * Two to five options, all visible at once. Past that the control gets cramped and the
+ * comparison it exists to offer stops working.
+ */
+export const Basic: StoryFn<SegmentedControlProps> = () => (
+  <SegmentedControl defaultValue='1' data-testid='segmented-control'>
+    <SegmentedControlItem value='1'>
+      Headers
+      <NumericBadge>33</NumericBadge>
+    </SegmentedControlItem>
+    <SegmentedControlItem value='2'>
+      Parameters
+      <NumericBadge>100</NumericBadge>
+    </SegmentedControlItem>
+    <SegmentedControlItem value='3'>Schema</SegmentedControlItem>
+  </SegmentedControl>
+);
+
+/**
+ * A disabled option stays visible rather than disappearing, so the set of choices doesn't
+ * change shape between visits.
+ */
+export const Disabled: StoryFn<SegmentedControlProps> = () => (
+  <SegmentedControl defaultValue='1'>
+    <SegmentedControlItem value='1'>Active</SegmentedControlItem>
+    <SegmentedControlItem value='2' disabled>
+      Disabled
+    </SegmentedControlItem>
+    <SegmentedControlItem value='3'>Normal</SegmentedControlItem>
+  </SegmentedControl>
+);
+
+/**
+ * Icons beside the labels, which helps when the options are renditions — a list against a
+ * grid — rather than categories.
+ */
+export const Icons: StoryFn<SegmentedControlProps> = () => (
+  <SegmentedControl defaultValue='1'>
+    <SegmentedControlItem value='1'>
+      <ChevronLeft />
+      Previous
+    </SegmentedControlItem>
+    <SegmentedControlItem value='2'>
+      <Search />
+      Search
+    </SegmentedControlItem>
+    <SegmentedControlItem value='3'>
+      Next
+      <ChevronRight />
+    </SegmentedControlItem>
+  </SegmentedControl>
+);
+
+/**
+ * Icon-only segments for a toolbar. Each still needs an accessible name; the icon is the
+ * label only visually.
+ */
+export const IconOnly: StoryFn<SegmentedControlProps> = () => (
+  <SegmentedControl defaultValue='user'>
+    <SegmentedControlItem value='user'>
+      <Home />
+      <NumericBadge>1</NumericBadge>
+    </SegmentedControlItem>
+    <SegmentedControlItem value='settings'>
+      <SlidersHorizontal />
+    </SegmentedControlItem>
+    <SegmentedControlItem value='search'>
+      <Search />
+    </SegmentedControlItem>
+  </SegmentedControl>
+);
+
+/**
+ * An overflow trigger for the options that didn't fit. If you need this often, the choice
+ * probably wants a `Select`.
+ */
+export const MoreButton: StoryFn<SegmentedControlProps> = () => (
+  <SegmentedControl defaultValue='1'>
+    <SegmentedControlItem value='1'>
+      Headers
+      <NumericBadge>33</NumericBadge>
+    </SegmentedControlItem>
+    <SegmentedControlItem value='2'>
+      Parameters
+      <NumericBadge>100</NumericBadge>
+    </SegmentedControlItem>
+    <SegmentedControlItem value='3'>Schema</SegmentedControlItem>
+    <SegmentedControlSeparator />
+    <SegmentedControlButton onClick={onShowMore}>
+      <Ellipsis />
+      More
+    </SegmentedControlButton>
+  </SegmentedControl>
+);
+
+/**
+ * What too many options looks like — worth seeing so the limit is a judgement rather than a
+ * rule you took on trust.
+ */
+export const Many: StoryFn<SegmentedControlProps> = () => {
+  const items = Array.from({ length: 10 }, (_, i) => ({
+    id: String(i + 1),
+    text: `Item ${i + 1}`,
+  }));
+
+  return (
+    <SegmentedControl defaultValue='1'>
+      {items.slice(0, 7).map(item => (
+        <SegmentedControlItem key={item.id} value={item.id}>
+          {item.text}
+        </SegmentedControlItem>
+      ))}
+      <SegmentedControlSeparator />
+      <SegmentedControlButton onClick={onShowMore}>
+        <Ellipsis />
+        More
+      </SegmentedControlButton>
+    </SegmentedControl>
+  );
+};
+
+/**
+ * A count on a segment, for when each view holds a different number of things and the reader
+ * would otherwise have to switch to find out.
+ */
+export const Badge: StoryFn<SegmentedControlProps> = () => (
+  <SegmentedControl defaultValue='icon-badge'>
+    <SegmentedControlItem value='icon-only'>
+      <CircleDashed />
+    </SegmentedControlItem>
+    <SegmentedControlItem value='icon-badge'>
+      <CircleDashed />
+      <NumericBadge>1</NumericBadge>
+    </SegmentedControlItem>
+    <SegmentedControlItem value='text-badge'>
+      Items
+      <NumericBadge>99</NumericBadge>
+    </SegmentedControlItem>
+  </SegmentedControl>
+);
+
+/**
+ * Stretches to its container, dividing the width evenly. Suits a narrow panel; in a wide one
+ * it leaves the segments floating far apart.
+ */
+export const FullWidth: StoryFn<SegmentedControlProps> = () => (
+  <div className='min-w-800'>
+    <SegmentedControl defaultValue='1' fullWidth>
+      <SegmentedControlItem value='1'>
+        Overview
+        <NumericBadge>12</NumericBadge>
+      </SegmentedControlItem>
+      <SegmentedControlItem value='2'>Analytics</SegmentedControlItem>
+      <SegmentedControlItem value='3'>
+        Reports
+        <NumericBadge>5</NumericBadge>
+      </SegmentedControlItem>
+      <SegmentedControlItem value='4'>Settings</SegmentedControlItem>
+    </SegmentedControl>
+  </div>
+);
+
+/**
+ * Own the value when something else has to move with it, which is the usual case, since the
+ * control renders no panel of its own.
+ */
+export const Controlled: StoryFn<SegmentedControlProps> = () => {
+  const [value, setValue] = useState<string>('1');
+
+  return (
+    <SegmentedControl value={value} onChange={setValue}>
+      <SegmentedControlItem value='1'>
+        Headers
+        <NumericBadge>33</NumericBadge>
+      </SegmentedControlItem>
+      <SegmentedControlItem value='2'>
+        Parameters
+        <NumericBadge>100</NumericBadge>
+      </SegmentedControlItem>
+      <SegmentedControlItem value='3'>Schema</SegmentedControlItem>
+    </SegmentedControl>
+  );
+};
+
+/**
+ * Inside `Field`, for when the choice really is a form answer — the case where `Radio` is
+ * often the better call.
+ */
+export const FormField: StoryFn<typeof meta> = () => (
+  <Field>
+    <FieldLabel>
+      Label
+      <Tooltip>
+        <TooltipTrigger>
+          <Info />
+        </TooltipTrigger>
+        <TooltipContent>Additional information</TooltipContent>
+      </Tooltip>
+    </FieldLabel>
+
+    <FieldDescription>This is an input description.</FieldDescription>
+
+    <SegmentedControl defaultValue='1'>
+      <SegmentedControlItem value='1'>
+        Headers
+        <NumericBadge>33</NumericBadge>
+      </SegmentedControlItem>
+      <SegmentedControlItem value='2'>
+        Parameters
+        <NumericBadge>100</NumericBadge>
+      </SegmentedControlItem>
+      <SegmentedControlItem value='3'>Schema</SegmentedControlItem>
+    </SegmentedControl>
+  </Field>
+);
+```

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Inputs" 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/SegmentedControl/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,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,u=Object.getOwnPropertyNames,m=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,f=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of u(t))d.call(e,l)||l===r||i(e,l,{get:()=>t[l],enumerable:!(n=s(t,l))||n.enumerable});return e},h={},p={$dispatcherGuard:()=>D,$makeReadOnly:()=>M,$reset:()=>k,$structuralCheck:()=>x,c:()=>R,clearRenderCounterRegistry:()=>O,renderCounterRegistry:()=>I,useRenderCounter:()=>W};for(var y in p)i(h,y,{get:p[y],enumerable:!0});e.exports=f(i({},"__esModule",{value:!0}),h);var S=(l=null!=(n=r("C"))?c(m(n)):{},f(n&&n.__esModule?l:i(l,"default",{value:n,enumerable:!0}),n)),{useRef:w,useEffect:_,isValidElement:v}=S,b=null!=(a=S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?a:S.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,g=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(o=S.__COMPILER_RUNTIME)?void 0:o.c)?S.__COMPILER_RUNTIME.c:function(e){return S.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=g;return t[g]=!0,t},[])},E={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{E[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 $(e){return b.ReactCurrentDispatcher.current=e,b.ReactCurrentDispatcher.current}E.useMemoCache=e=>{if(null!=C)return C.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function D(e){let t=b.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&(C=t),t===E)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)}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&&(C=null),$(e)}else if(2===e)N.push(t),$(C);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 k(e){for(let t=0;t<e.length;t++)e[t]=g}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var I=new Map;function O(){for(let e of I.values())e.forEach(e=>{e.count=0})}function W(e){let t=w(null);null!=t.current&&(t.current.count+=1),_(()=>{if(null==t.current){let r,n={count:0};null==(r=I.get(e))&&(r=new Set,I.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=I.get(e))&&n.delete(r))}})}var T=new Set;function x(e,t,r,n,l,a){function o(e,t,o,c){let i=`${n}:${a} [${l}] ${r}${o} changed from ${e} to ${t} at depth ${c}`;T.has(i)||(T.add(i),console.error(i))}!function e(t,r,n,l){if(!(l>2)){if(t!==r)if(typeof t!=typeof r)o(`type ${typeof t}`,`type ${typeof r}`,n,l);else if("object"==typeof t){let a=Array.isArray(t),c=Array.isArray(r);if(null===t&&null!==r)o("null",`type ${typeof r}`,n,l);else if(null===r)o(`type ${typeof t}`,"null",n,l);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)o(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,l);else for(let[a,c]of t)r.has(a)?e(c,r.get(a),`${n}.get(${a})`,l+1):o(`Map instance with key ${a}`,`Map instance without key ${a}`,n,l);else o("Map instance","other value",n,l);else if(r instanceof Map)o("other value","Map instance",n,l);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)o(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,l);else for(let e of r)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,n,l);else o("Set instance","other value",n,l);else if(r instanceof Set)o("other value","Set instance",n,l);else if(a||c)if(a!==c)o(`type ${a?"array":"object"}`,`type ${c?"array":"object"}`,n,l);else if(t.length!==r.length)o(`array with length ${t.length}`,`array with length ${r.length}`,n,l);else for(let a=0;a<t.length;a++)e(t[a],r[a],`${n}[${a}]`,l+1);else if(v(t)||v(r))v(t)!==v(r)?o(`type ${v(t)?"React element":"object"}`,`type ${v(r)?"React element":"object"}`,n,l):t.type!==r.type?o(`React element of type ${t.type}`,`React element of type ${r.type}`,n,l):e(t.props,r.props,`[props of ${n}]`,l+1);else{for(let e in r)e in t||o(`object without key ${e}`,`object with key ${e}`,n,l);for(let a in t)a in r?e(t[a],r[a],`${n}.${a}`,l+1):o(`object with key ${a}`,`object without key ${a}`,n,l)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,l):t!==r&&o(t,r,n,l)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,l=new WeakMap;function a(e,t,r){let a=t,o=r;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,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let l=r.get(t);l||((l=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.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 r=l.get(e);r||(r=new Map,l.set(e,r));let n=r.get(t);if(n)return n;let a=e.forwardRef((r,n)=>{let l=e.useRef(null);if(!l.current||l.current.original!==n){let e;l.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let r=n(t);e="function"==typeof r?r:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...r,ref:l.current.callback})});return a.displayName=`CanvasHost(${t})`,r.set(t,a),a}(e,a)),{type:a,props:o}}function o(e){let t=(t,r,n)=>{let l=a(e,t,r??{});return e.createElement(l.type,void 0===n?l.props:{...l.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let l=a(e,t,r??{}),{children:o,...c}=l.props;return e.createElement(l.type,void 0===n?c:{...c,key:n},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function c(e){return{...e,createElement:(t,r,...n)=>{let l=a(e,t,r??{});return e.createElement(l.type,l.props,...n)},cloneElement:(t,r,...n)=>{let l=e.cloneElement(t,r??void 0,...n),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})}}}r.d(t,{MA:()=>o,YJ:()=>c})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:l,Component:a,Fragment:o,Profiler:c,PureComponent:i,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:d,cloneElement:f,createContext:h,createElement:p,createFactory:y,createRef:S,forwardRef:w,isValidElement:_,lazy:v,memo:b,startTransition:g,unstable_act:R,useCallback:E,useContext:C,useDebugValue:$,useDeferredValue:N,useEffect:D,useId:k,useImperativeHandle:M,useInsertionEffect:I,useLayoutEffect:O,useMemo:W,useReducer:T,useRef:x,useState:j,useSyncExternalStore:P,useTransition:A,version:V,use:L}=n;r.d(t,{},{Children:l,Component:a,Fragment:o,Profiler:c,PureComponent:i,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:d,cloneElement:f,createContext:h,createElement:p,createFactory:y,createRef:S,default:n,forwardRef:w,isValidElement:_,lazy:v,memo:b,startTransition:g,unstable_act:R,use:L,useCallback:E,useContext:C,useDebugValue:$,useDeferredValue:N,useEffect:D,useId:k,useImperativeHandle:M,useInsertionEffect:I,useLayoutEffect:O,useMemo:W,useReducer:T,useRef:x,useState:j,useSyncExternalStore:P,useTransition:A,version:V})}},t={};function r(n){var l=t[n];if(void 0!==l)return l.exports;var a=t[n]={exports:{}};return e[n](a,a.exports,r),a.exports}r.d=(e,t,n)=>{var l=(t,n)=>{for(var l in t)r.o(t,l)&&!r.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,[n]:t[l]})};l(t,"get"),l(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.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:n,Fragment:l}=(0,r("p").MA)(window.React);var a=r("vD"),o=r("C");let c=window.WallarmDS.Icons.ChevronLeft,i=window.WallarmDS.Icons.ChevronRight,s=window.WallarmDS.Icons.CircleDashed,u=window.WallarmDS.Icons.Ellipsis,m=window.WallarmDS.Icons.Home,d=window.WallarmDS.Icons.Info,f=window.WallarmDS.Icons.Search,h=window.WallarmDS.Icons.SlidersHorizontal,p=window.WallarmDS.Field,y=window.WallarmDS.FieldDescription,S=window.WallarmDS.FieldLabel,w=window.WallarmDS.NumericBadge,_=window.WallarmDS.Tooltip,v=window.WallarmDS.TooltipContent,b=window.WallarmDS.TooltipTrigger,g=window.WallarmDS.SegmentedControl,R=window.WallarmDS.SegmentedControlButton,E=window.WallarmDS.SegmentedControlItem,C=window.WallarmDS.SegmentedControlSeparator,$=(function(e=()=>{}){let t=(...t)=>e(...t);for(let r of["mockName","mockReturnValue","mockResolvedValue","mockImplementation"])t[r]=n=>("mockImplementation"===r?e=n:"mockReturnValue"===r?e=()=>n:"mockResolvedValue"===r&&(e=()=>Promise.resolve(n)),t);return t})().mockName("onShowMore"),N={title:"Inputs/SegmentedControl",component:g,subcomponents:{SegmentedControlItem:E,SegmentedControlSeparator:C,SegmentedControlButton:R},parameters:{layout:"centered",docs:{description:{component:"Switches between renditions of the same content, with every option visible — reach for `Tabs` when the sections are distinct places rather than views of one thing, and `Radio` when the choice is an answer a form submits. It owns no panel: it reports the chosen value and you re-render the content yourself."}}},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 control should take full width",defaultValue:!1}}};function D(e,t){return{id:String(t+1),text:`Item ${t+1}`}}function k(t){return e(E,{value:t.id,children:t.text},t.id)}let M=[{name:"Basic",story:()=>{let r,n,l=(0,a.c)(2);return l[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(E,{value:"1",children:["Headers",e(w,{children:"33"})]}),l[0]=r):r=l[0],l[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(g,{defaultValue:"1","data-testid":"segmented-control",children:[r,t(E,{value:"2",children:["Parameters",e(w,{children:"100"})]}),e(E,{value:"3",children:"Schema"})]}),l[1]=n):n=l[1],n},meta:N},{name:"Disabled",story:()=>{let r,n=(0,a.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(g,{defaultValue:"1",children:[e(E,{value:"1",children:"Active"}),e(E,{value:"2",disabled:!0,children:"Disabled"}),e(E,{value:"3",children:"Normal"})]}),n[0]=r):r=n[0],r},meta:N},{name:"Icons",story:()=>{let r,n,l,o=(0,a.c)(3);return o[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(E,{value:"1",children:[e(c,{}),"Previous"]}),o[0]=r):r=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(E,{value:"2",children:[e(f,{}),"Search"]}),o[1]=n):n=o[1],o[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(g,{defaultValue:"1",children:[r,n,t(E,{value:"3",children:["Next",e(i,{})]})]}),o[2]=l):l=o[2],l},meta:N},{name:"IconOnly",story:()=>{let r,n,l,o=(0,a.c)(3);return o[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(E,{value:"user",children:[e(m,{}),e(w,{children:"1"})]}),o[0]=r):r=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(E,{value:"settings",children:e(h,{})}),o[1]=n):n=o[1],o[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(g,{defaultValue:"user",children:[r,n,e(E,{value:"search",children:e(f,{})})]}),o[2]=l):l=o[2],l},meta:N},{name:"MoreButton",story:()=>{let r,n,l,o,c,i=(0,a.c)(5);return i[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(E,{value:"1",children:["Headers",e(w,{children:"33"})]}),i[0]=r):r=i[0],i[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(E,{value:"2",children:["Parameters",e(w,{children:"100"})]}),l=e(E,{value:"3",children:"Schema"}),o=e(C,{}),i[1]=n,i[2]=l,i[3]=o):(n=i[1],l=i[2],o=i[3]),i[4]===Symbol.for("react.memo_cache_sentinel")?(c=t(g,{defaultValue:"1",children:[r,n,l,o,t(R,{onClick:$,children:[e(u,{}),"More"]})]}),i[4]=c):c=i[4],c},meta:N},{name:"Many",story:()=>{let r,n,l,o,c=(0,a.c)(4);c[0]===Symbol.for("react.memo_cache_sentinel")?(r=Array.from({length:10},D),c[0]=r):r=c[0];let i=r;return c[1]===Symbol.for("react.memo_cache_sentinel")?(n=i.slice(0,7).map(k),l=e(C,{}),c[1]=n,c[2]=l):(n=c[1],l=c[2]),c[3]===Symbol.for("react.memo_cache_sentinel")?(o=t(g,{defaultValue:"1",children:[n,l,t(R,{onClick:$,children:[e(u,{}),"More"]})]}),c[3]=o):o=c[3],o},meta:N},{name:"Badge",story:()=>{let r,n,l,o=(0,a.c)(3);return o[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(E,{value:"icon-only",children:e(s,{})}),o[0]=r):r=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(E,{value:"icon-badge",children:[e(s,{}),e(w,{children:"1"})]}),o[1]=n):n=o[1],o[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(g,{defaultValue:"icon-badge",children:[r,n,t(E,{value:"text-badge",children:["Items",e(w,{children:"99"})]})]}),o[2]=l):l=o[2],l},meta:N},{name:"FullWidth",story:()=>{let r,n,l,o=(0,a.c)(3);return o[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(E,{value:"1",children:["Overview",e(w,{children:"12"})]}),n=e(E,{value:"2",children:"Analytics"}),o[0]=r,o[1]=n):(r=o[0],n=o[1]),o[2]===Symbol.for("react.memo_cache_sentinel")?(l=e("div",{className:"min-w-800",children:t(g,{defaultValue:"1",fullWidth:!0,children:[r,n,t(E,{value:"3",children:["Reports",e(w,{children:"5"})]}),e(E,{value:"4",children:"Settings"})]})}),o[2]=l):l=o[2],l},meta:N},{name:"Controlled",story:()=>{let r,n,l,c,i=(0,a.c)(5),[s,u]=(0,o.useState)("1");return i[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(E,{value:"1",children:["Headers",e(w,{children:"33"})]}),i[0]=r):r=i[0],i[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(E,{value:"2",children:["Parameters",e(w,{children:"100"})]}),l=e(E,{value:"3",children:"Schema"}),i[1]=n,i[2]=l):(n=i[1],l=i[2]),i[3]!==s?(c=t(g,{value:s,onChange:u,children:[r,n,l]}),i[3]=s,i[4]=c):c=i[4],c},meta:N},{name:"FormField",story:()=>{let r,n,l,o,c=(0,a.c)(4);return c[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(S,{children:["Label",t(_,{children:[e(b,{children:e(d,{})}),e(v,{children:"Additional information"})]})]}),n=e(y,{children:"This is an input description."}),c[0]=r,c[1]=n):(r=c[0],n=c[1]),c[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(E,{value:"1",children:["Headers",e(w,{children:"33"})]}),c[2]=l):l=c[2],c[3]===Symbol.for("react.memo_cache_sentinel")?(o=t(p,{children:[r,n,t(g,{defaultValue:"1",children:[l,t(E,{value:"2",children:["Parameters",e(w,{children:"100"})]}),e(E,{value:"3",children:"Schema"})]})]}),c[3]=o):o=c[3],o},meta:N}];function I({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},l="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,a=()=>o.default.createElement(l,n),c={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.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,M.map((e,t)=>o.default.createElement(I,{key:t,entry:e})))),t}}})();