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

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

@@ -0,0 +1,281 @@
+One total read as a few named parts in a single band — reach for `BarList` when each part deserves a row of its own, and `Metric` when there is no breakdown to show at all. The header is composed from the shared `Metric` bricks rather than configured, so a value and its delta read the same here as anywhere else in the family; hovering a segment or a legend item fades the rest.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `data` | `HorizontalBarStackDatum[]` | yes | — | Segments + legend. One array drives both, so colors stay in sync. |
+| `total` | `number \| undefined` | no | — | Bar denominator. `> sum(data.value)` → grey remainder tail. Default: `sum(data.value)`. |
+| `legend` | `boolean \| undefined` | no | `true` | Show/hide the legend. Default: true. |
+| `active-name` | `string \| null \| undefined` | no | — | Controlled hover target, joined by `name`. Omitted → managed internally. Set together with `onActiveNameChange` to sync hover across charts (e.g. a sibling highlights the same series). Mirrors `PieChart`. |
+| `on-active-name-change` | `((name: string \| null) => void) \| undefined` | no | — |  |
+| `selected-names` | `string[] \| undefined` | no | — | Names to emphasise. When non-empty, non-selected segments + legend items fade. Hover (`activeName`) wins — while a series is hovered, only it stays bright. Names not in `data` are ignored. |
+| `on-select` | `((name: string) => void) \| undefined` | no | — | Click-to-filter. When provided, legend items become interactive (`role='button'`, `tabIndex=0`, Enter/Space) and fire with the clicked datum's `name`. The caller owns the filter (typically: drive `selectedNames`, or filter `data`). |
+| `title` | `string \| undefined` | no | — |  |
+| `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 | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.HorizontalBarStackSkeleton` — `HorizontalBarStackSkeletonProps` in the declaration bundle.
+
+## Stories
+
+### Default
+
+The full shape: a headline value with its delta, a three-part band, and the legend that
+names the parts.
+
+Source: SimpleCharts/HorizontalBarStack/HorizontalBarStack.stories.tsx#Default
+
+### NoDelta
+
+The same without the delta — a value with no comparison to make yet.
+
+Source: SimpleCharts/HorizontalBarStack/HorizontalBarStack.stories.tsx#NoDelta
+
+### NoValue
+
+No header at all: the band and its legend alone, for a card whose total is already stated
+somewhere else.
+
+Source: SimpleCharts/HorizontalBarStack/HorizontalBarStack.stories.tsx#NoValue
+
+### WithRemainder
+
+A `total` above the sum of the parts fills the difference with a grey tail — 91 of 120,
+where the 29 nobody has accounted for is part of what the card says.
+
+Source: SimpleCharts/HorizontalBarStack/HorizontalBarStack.stories.tsx#WithRemainder
+
+### LegendOff
+
+`legend={false}` leaves the band on its own, for a card too small to carry names or one
+whose legend is already nearby.
+
+Source: SimpleCharts/HorizontalBarStack/HorizontalBarStack.stories.tsx#LegendOff
+
+### Palette
+
+All six chart colours in one band, which is the check that they stay tellable apart at the
+widths a real breakdown gives them.
+
+Source: SimpleCharts/HorizontalBarStack/HorizontalBarStack.stories.tsx#Palette
+
+### Loading
+
+`HorizontalBarStackSkeleton` stands in while the card loads, holding the header and band
+heights so nothing shifts when data arrives.
+
+Source: SimpleCharts/HorizontalBarStack/HorizontalBarStack.stories.tsx#Loading
+
+### Selectable
+
+`onSelect` turns the legend into a filter — the chosen series stays bright, the rest fade,
+and clicking it again clears. Hover always wins, so pointing at any series brings it forward
+regardless of what is selected.
+
+Source: SimpleCharts/HorizontalBarStack/HorizontalBarStack.stories.tsx#Selectable
+
+## Story sources
+
+### SimpleCharts/HorizontalBarStack/HorizontalBarStack.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Chart } from '../Chart/Chart';
+import { ChartHeader } from '../Chart/ChartHeader';
+import { ChartTitle } from '../Chart/ChartTitle';
+import { MetricDelta, MetricHeader, MetricValue } from '../Metric';
+import type { ChartColor } from '../types';
+import {
+  HorizontalBarStack,
+  type HorizontalBarStackDatum,
+  type HorizontalBarStackProps,
+} from './HorizontalBarStack';
+import { HorizontalBarStackSkeleton } from './HorizontalBarStackSkeleton';
+
+const figmaUrl =
+  'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=9667-10883';
+
+const severityData: HorizontalBarStackDatum[] = [
+  { name: 'Critical', value: 42, color: 'red' },
+  { name: 'High', value: 31, color: 'brand' },
+  { name: 'Medium', value: 18, color: 'amber' },
+];
+
+const DESCRIPTION = [
+  'One total read as a few named parts in a single band — reach for `BarList` when each part deserves a row of its own, and `Metric` when there is no breakdown to show at all.',
+  'The header is composed from the shared `Metric` bricks rather than configured, so a value and its delta read the same here as anywhere else in the family; hovering a segment or a legend item fades the rest.',
+].join(' ');
+
+const meta = {
+  title: 'Data Display/SimpleCharts/HorizontalBarStack',
+  component: HorizontalBarStack,
+  parameters: {
+    layout: 'centered',
+    design: { type: 'figma', url: figmaUrl },
+    docs: { description: { component: DESCRIPTION } },
+  },
+  args: {
+    // Base for derived slot ids (`horizontal-bar-stack--bar`, `--legend-item`, …) used by e2e tests.
+    'data-testid': 'horizontal-bar-stack',
+  },
+  argTypes: {
+    data: { control: false },
+    children: { control: false },
+    selectedNames: { control: false },
+    onSelect: { control: false },
+    activeName: { control: false },
+    onActiveNameChange: { control: false },
+    ref: { control: false },
+    className: { control: 'text' },
+  },
+} satisfies Meta<typeof HorizontalBarStack>;
+
+export default meta;
+
+const Frame: StoryFn<HorizontalBarStackProps> = args => (
+  <div className='w-400'>
+    <Chart>
+      <ChartHeader>
+        <ChartTitle>Findings by severity</ChartTitle>
+      </ChartHeader>
+      <HorizontalBarStack {...args} />
+    </Chart>
+  </div>
+);
+
+/**
+ * The full shape: a headline value with its delta, a three-part band, and the legend that
+ * names the parts.
+ */
+export const Default: StoryFn<HorizontalBarStackProps> = Frame.bind({});
+Default.args = {
+  data: severityData,
+  children: (
+    <MetricHeader>
+      <MetricValue>91</MetricValue>
+      <MetricDelta value={10} trend='up' sentiment='negative' />
+    </MetricHeader>
+  ),
+};
+
+/**
+ * The same without the delta — a value with no comparison to make yet.
+ */
+export const NoDelta: StoryFn<HorizontalBarStackProps> = Frame.bind({});
+NoDelta.args = {
+  data: severityData,
+  children: (
+    <MetricHeader>
+      <MetricValue>91</MetricValue>
+    </MetricHeader>
+  ),
+};
+
+/**
+ * No header at all: the band and its legend alone, for a card whose total is already stated
+ * somewhere else.
+ */
+export const NoValue: StoryFn<HorizontalBarStackProps> = Frame.bind({});
+NoValue.args = { data: severityData };
+
+/**
+ * A `total` above the sum of the parts fills the difference with a grey tail — 91 of 120,
+ * where the 29 nobody has accounted for is part of what the card says.
+ */
+export const WithRemainder: StoryFn<HorizontalBarStackProps> = Frame.bind({});
+WithRemainder.args = {
+  data: severityData,
+  total: 120,
+  children: (
+    <MetricHeader>
+      <MetricValue>91</MetricValue>
+      <MetricDelta value={4} trend='down' sentiment='positive' />
+    </MetricHeader>
+  ),
+};
+
+/**
+ * `legend={false}` leaves the band on its own, for a card too small to carry names or one
+ * whose legend is already nearby.
+ */
+export const LegendOff: StoryFn<HorizontalBarStackProps> = Frame.bind({});
+LegendOff.args = {
+  data: severityData,
+  legend: false,
+  children: (
+    <MetricHeader>
+      <MetricValue>91</MetricValue>
+    </MetricHeader>
+  ),
+};
+
+const PALETTE: ChartColor[] = ['red', 'brand', 'amber', 'blue', 'green', 'purple'];
+/**
+ * All six chart colours in one band, which is the check that they stay tellable apart at the
+ * widths a real breakdown gives them.
+ */
+export const Palette: StoryFn<HorizontalBarStackProps> = Frame.bind({});
+Palette.args = {
+  data: PALETTE.map((color, i) => ({ name: color, value: 10 + i, color })),
+  children: (
+    <MetricHeader>
+      <MetricValue>75</MetricValue>
+    </MetricHeader>
+  ),
+};
+
+/**
+ * `HorizontalBarStackSkeleton` stands in while the card loads, holding the header and band
+ * heights so nothing shifts when data arrives.
+ */
+export const Loading: StoryFn = () => (
+  <div className='w-400'>
+    <Chart>
+      <ChartHeader>
+        <ChartTitle>Findings by severity</ChartTitle>
+      </ChartHeader>
+      <HorizontalBarStackSkeleton data-testid='horizontal-bar-stack-skeleton' />
+    </Chart>
+  </div>
+);
+
+/**
+ * `onSelect` turns the legend into a filter — the chosen series stays bright, the rest fade,
+ * and clicking it again clears. Hover always wins, so pointing at any series brings it forward
+ * regardless of what is selected.
+ */
+export const Selectable: StoryFn<HorizontalBarStackProps> = () => {
+  const [selected, setSelected] = useState<string | null>('Critical');
+  return (
+    <div className='w-400'>
+      <Chart>
+        <ChartHeader>
+          <ChartTitle>Findings by severity</ChartTitle>
+        </ChartHeader>
+        <HorizontalBarStack
+          data-testid='horizontal-bar-stack'
+          data={severityData}
+          selectedNames={selected ? [selected] : []}
+          onSelect={name => setSelected(prev => (prev === name ? null : name))}
+        >
+          <MetricHeader>
+            <MetricValue>91</MetricValue>
+          </MetricHeader>
+        </HorizontalBarStack>
+      </Chart>
+    </div>
+  );
+};
+```

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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,a;/**
+ * 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 l,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,p=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))f.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},m={},h={$dispatcherGuard:()=>k,$makeReadOnly:()=>O,$reset:()=>M,$structuralCheck:()=>z,c:()=>R,clearRenderCounterRegistry:()=>T,renderCounterRegistry:()=>D,useRenderCounter:()=>j};for(var y in h)c(m,y,{get:h[y],enumerable:!0});e.exports=p(c({},"__esModule",{value:!0}),m);var g=(a=null!=(n=r("C"))?i(d(n)):{},p(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:w,useEffect:b,isValidElement:v}=g,S=null!=(l=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,_=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(o=g.__COMPILER_RUNTIME)?void 0:o.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=_;return t[_]=!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 $=null;function N(e){return S.ReactCurrentDispatcher.current=e,S.ReactCurrentDispatcher.current}E.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function k(e){let t=S.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&($=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.");N(E)}else if(1===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===C.length&&($=null),N(e)}else if(2===e)C.push(t),N($);else if(3===e){let e=C.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 M(e){for(let t=0;t<e.length;t++)e[t]=_}function O(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function T(){for(let e of D.values())e.forEach(e=>{e.count=0})}function j(e){let t=w(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let r,n={count:0};null==(r=D.get(e))&&(r=new Set,D.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=D.get(e))&&n.delete(r))}})}var x=new Set;function z(e,t,r,n,a,l){function o(e,t,o,i){let c=`${n}:${l} [${a}] ${r}${o} changed from ${e} to ${t} at depth ${i}`;x.has(c)||(x.add(c),console.error(c))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)o(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)o("null",`type ${typeof r}`,n,a);else if(null===r)o(`type ${typeof t}`,"null",n,a);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,a);else for(let[l,i]of t)r.has(l)?e(i,r.get(l),`${n}.get(${l})`,a+1):o(`Map instance with key ${l}`,`Map instance without key ${l}`,n,a);else o("Map instance","other value",n,a);else if(r instanceof Map)o("other value","Map instance",n,a);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,a);else for(let e of r)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else o("Set instance","other value",n,a);else if(r instanceof Set)o("other value","Set instance",n,a);else if(l||i)if(l!==i)o(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,n,a);else if(t.length!==r.length)o(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${n}[${l}]`,a+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,a):t.type!==r.type?o(`React element of type ${t.type}`,`React element of type ${r.type}`,n,a):e(t.props,r.props,`[props of ${n}]`,a+1);else{for(let e in r)e in t||o(`object without key ${e}`,`object with key ${e}`,n,a);for(let l in t)l in r?e(t[l],r[l],`${n}.${l}`,a+1):o(`object with key ${l}`,`object without key ${l}`,n,a)}}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,a):t!==r&&o(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=new WeakMap;function l(e,t,r){let l=t,o=r;if("object"==typeof l&&null!==l&&"$$typeof"in l&&l.$$typeof===Symbol.for("react.context")&&"Provider"in l&&(l=l.Provider),"function"==typeof l&&null!=o.ref&&!l.prototype?.isReactComponent){let t=l,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let a=r.get(t);a||((a=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,a)),l=a}if("string"==typeof l&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof l)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 l&&null!=o.ref&&(l=function(e,t){let r=a.get(e);r||(r=new Map,a.set(e,r));let n=r.get(t);if(n)return n;let l=e.forwardRef((r,n)=>{let a=e.useRef(null);if(!a.current||a.current.original!==n){let e;a.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:a.current.callback})});return l.displayName=`CanvasHost(${t})`,r.set(t,l),l}(e,l)),{type:l,props:o}}function o(e){let t=(t,r,n)=>{let a=l(e,t,r??{});return e.createElement(a.type,void 0===n?a.props:{...a.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let a=l(e,t,r??{}),{children:o,...i}=a.props;return e.createElement(a.type,void 0===n?i:{...i,key:n},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let a=l(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),o=a.ref,i=l(e,a.type,{...a.props,ref:o});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}r.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:f,cloneElement:p,createContext:m,createElement:h,createFactory:y,createRef:g,forwardRef:w,isValidElement:b,lazy:v,memo:S,startTransition:_,unstable_act:R,useCallback:E,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:M,useImperativeHandle:O,useInsertionEffect:D,useLayoutEffect:T,useMemo:j,useReducer:x,useRef:z,useState:A,useSyncExternalStore:W,useTransition:I,version:P,use:L}=n;r.d(t,{},{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:f,cloneElement:p,createContext:m,createElement:h,createFactory:y,createRef:g,default:n,forwardRef:w,isValidElement:b,lazy:v,memo:S,startTransition:_,unstable_act:R,use:L,useCallback:E,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:M,useImperativeHandle:O,useInsertionEffect:D,useLayoutEffect:T,useMemo:j,useReducer:x,useRef:z,useState:A,useSyncExternalStore:W,useTransition:I,version:P})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,r),l.exports}r.d=(e,t,n)=>{var a=(t,n)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[n]:t[a]})};a(t,"get"),a(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:a}=(0,r("p").MA)(window.React);var l=r("vD"),o=r("C");let i=window.WallarmDS.Chart,c=window.WallarmDS.ChartHeader,s=window.WallarmDS.ChartTitle,u=window.WallarmDS.MetricDelta,d=window.WallarmDS.MetricHeader,f=window.WallarmDS.MetricValue,p=window.WallarmDS.HorizontalBarStack,m=window.WallarmDS.HorizontalBarStackSkeleton,h=[{name:"Critical",value:42,color:"red"},{name:"High",value:31,color:"brand"},{name:"Medium",value:18,color:"amber"}],y={title:"Data Display/SimpleCharts/HorizontalBarStack",component:p,parameters:{layout:"centered",design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=9667-10883"},docs:{description:{component:"One total read as a few named parts in a single band — reach for `BarList` when each part deserves a row of its own, and `Metric` when there is no breakdown to show at all. The header is composed from the shared `Metric` bricks rather than configured, so a value and its delta read the same here as anywhere else in the family; hovering a segment or a legend item fades the rest."}}},args:{"data-testid":"horizontal-bar-stack"},argTypes:{data:{control:!1},children:{control:!1},selectedNames:{control:!1},onSelect:{control:!1},activeName:{control:!1},onActiveNameChange:{control:!1},ref:{control:!1},className:{control:"text"}}},g=r=>{let n,a,o=(0,l.c)(3);return o[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(c,{children:e(s,{children:"Findings by severity"})}),o[0]=n):n=o[0],o[1]!==r?(a=e("div",{className:"w-400",children:t(i,{children:[n,e(p,{...r})]})}),o[1]=r,o[2]=a):a=o[2],a},w=g.bind({});w.args={data:h,children:t(d,{children:[e(f,{children:"91"}),e(u,{value:10,trend:"up",sentiment:"negative"})]})};let b=g.bind({});b.args={data:h,children:e(d,{children:e(f,{children:"91"})})};let v=g.bind({});v.args={data:h};let S=g.bind({});S.args={data:h,total:120,children:t(d,{children:[e(f,{children:"91"}),e(u,{value:4,trend:"down",sentiment:"positive"})]})};let _=g.bind({});_.args={data:h,legend:!1,children:e(d,{children:e(f,{children:"91"})})};let R=g.bind({});R.args={data:["red","brand","amber","blue","green","purple"].map((e,t)=>({name:e,value:10+t,color:e})),children:e(d,{children:e(f,{children:"75"})})};let E=[{name:"Default",story:w,meta:y},{name:"NoDelta",story:b,meta:y},{name:"NoValue",story:v,meta:y},{name:"WithRemainder",story:S,meta:y},{name:"LegendOff",story:_,meta:y},{name:"Palette",story:R,meta:y},{name:"Loading",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-400",children:t(i,{children:[e(c,{children:e(s,{children:"Findings by severity"})}),e(m,{"data-testid":"horizontal-bar-stack-skeleton"})]})}),n[0]=r):r=n[0],r},meta:y},{name:"Selectable",story:()=>{let r,n,a,u,m,y=(0,l.c)(7),[g,w]=(0,o.useState)("Critical");return y[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(c,{children:e(s,{children:"Findings by severity"})}),y[0]=r):r=y[0],y[1]!==g?(n=g?[g]:[],y[1]=g,y[2]=n):n=y[2],y[3]===Symbol.for("react.memo_cache_sentinel")?(a=e=>w(t=>t===e?null:e),y[3]=a):a=y[3],y[4]===Symbol.for("react.memo_cache_sentinel")?(u=e(d,{children:e(f,{children:"91"})}),y[4]=u):u=y[4],y[5]!==n?(m=e("div",{className:"w-400",children:t(i,{children:[r,e(p,{"data-testid":"horizontal-bar-stack",data:h,selectedNames:n,onSelect:a,children:u})]})}),y[5]=n,y[6]=m):m=y[6],m},meta:y}];function $({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,l=()=>o.default.createElement(a,n),i={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,i)}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(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(o.default.createElement(window.WallarmDS.Root,null,E.map((e,t)=>o.default.createElement($,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,137 @@
+Renders an HTTP method as a fixed-colour code `Badge` — the colour is part of the vocabulary rather than a choice: safe reads green, destructive rose, the technical verbs slate. A verb outside the seven known ones prints verbatim in slate, so nothing unexpected is swallowed; reach for `Badge` itself when what you are labelling is not a method.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `method` | `(string & {}) \| HttpMethodName` | yes | — | HTTP method to render. Known values from `HttpMethodName` get a dedicated color via `HTTP_METHOD_COLOR`; any other string renders in slate as the "Other" fallback (the text itself is shown verbatim). |
+| `size` | `"small" \| "medium" \| "large" \| null \| undefined` | no | `medium` | Badge size — defaults to `medium`. |
+| `title` | `string \| undefined` | no | — |  |
+| `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 | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+
+## Stories
+
+### Playground
+
+One badge on the controls, for trying a method or a size the stories below do not cover.
+
+Source: HttpMethod/HttpMethod.stories.tsx#Playground
+
+### AllMethods
+
+The seven methods with their locked colours, and an unrecognised verb underneath taking
+the slate fallback.
+
+Source: HttpMethod/HttpMethod.stories.tsx#AllMethods
+
+### Sizes
+
+`medium`, the default, is a 20px badge; `large` adds vertical padding to reach 24px and
+leaves the code type at 12px, so it is about air in the row, not emphasis.
+
+Source: HttpMethod/HttpMethod.stories.tsx#Sizes
+
+### UnknownMethodFallsBackToSlate
+
+`TRACE`, `CONNECT` and `LINK` are real verbs with no colour of their own, so they come
+out slate rather than being dropped or rewritten.
+
+Source: HttpMethod/HttpMethod.stories.tsx#UnknownMethodFallsBackToSlate
+
+## Story sources
+
+### HttpMethod/HttpMethod.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { HStack, VStack } from '../Stack';
+import { HTTP_METHODS } from './constants';
+import { HttpMethod } from './HttpMethod';
+
+const DESCRIPTION = [
+  'Renders an HTTP method as a fixed-colour code `Badge` — the colour is part of the vocabulary rather than a choice: safe reads green, destructive rose, the technical verbs slate.',
+  'A verb outside the seven known ones prints verbatim in slate, so nothing unexpected is swallowed; reach for `Badge` itself when what you are labelling is not a method.',
+].join(' ');
+
+const meta = {
+  title: 'Data Display/HttpMethod',
+  component: HttpMethod,
+  parameters: {
+    layout: 'centered',
+    docs: { description: { component: DESCRIPTION } },
+  },
+  args: {
+    method: 'GET',
+    size: 'medium',
+  },
+  argTypes: {
+    method: {
+      control: 'select',
+      options: [...HTTP_METHODS, 'TRACE'],
+    },
+    size: {
+      control: 'select',
+      options: ['medium', 'large'],
+    },
+  },
+} satisfies Meta<typeof HttpMethod>;
+
+export default meta;
+
+/**
+ * One badge on the controls, for trying a method or a size the stories below do not cover.
+ */
+export const Playground: StoryFn<typeof HttpMethod> = args => <HttpMethod {...args} />;
+
+/**
+ * The seven methods with their locked colours, and an unrecognised verb underneath taking
+ * the slate fallback.
+ */
+export const AllMethods: StoryFn<typeof meta> = () => (
+  <VStack align='start' gap={8}>
+    {HTTP_METHODS.map(method => (
+      <HttpMethod key={method} method={method} />
+    ))}
+    <HttpMethod method='OTHER' />
+  </VStack>
+);
+
+/**
+ * `medium`, the default, is a 20px badge; `large` adds vertical padding to reach 24px and
+ * leaves the code type at 12px, so it is about air in the row, not emphasis.
+ */
+export const Sizes: StoryFn<typeof meta> = () => (
+  <VStack gap={16}>
+    <HStack align='center' gap={8}>
+      {HTTP_METHODS.map(method => (
+        <HttpMethod key={method} method={method} size='medium' />
+      ))}
+    </HStack>
+    <HStack align='center' gap={8}>
+      {HTTP_METHODS.map(method => (
+        <HttpMethod key={method} method={method} size='large' />
+      ))}
+    </HStack>
+  </VStack>
+);
+
+/**
+ * `TRACE`, `CONNECT` and `LINK` are real verbs with no colour of their own, so they come
+ * out slate rather than being dropped or rewritten.
+ */
+export const UnknownMethodFallsBackToSlate: StoryFn<typeof meta> = () => (
+  <HStack align='center' gap={8}>
+    <HttpMethod method='TRACE' />
+    <HttpMethod method='CONNECT' />
+    <HttpMethod method='LINK' />
+  </HStack>
+);
+```

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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,a;/**
+ * 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 o,l,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,d=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))p.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},m={},y={$dispatcherGuard:()=>M,$makeReadOnly:()=>k,$reset:()=>O,$structuralCheck:()=>A,c:()=>b,clearRenderCounterRegistry:()=>D,renderCounterRegistry:()=>T,useRenderCounter:()=>j};for(var h in y)c(m,h,{get:y[h],enumerable:!0});e.exports=d(c({},"__esModule",{value:!0}),m);var g=(a=null!=(n=r("C"))?i(f(n)):{},d(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:w,useEffect:E,isValidElement:R}=g,_=null!=(o=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),b="function"==typeof(null==(l=g.__COMPILER_RUNTIME)?void 0:l.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=v;return t[v]=!0,t},[])},$={};["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]=()=>{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 S=null;function N(e){return _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}$.useMemoCache=e=>{if(null!=S)return S.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function M(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&(S=t),t===$)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($)}else if(1===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===C.length&&(S=null),N(e)}else if(2===e)C.push(t),N(S);else if(3===e){let e=C.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]=v}function k(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var T=new Map;function D(){for(let e of T.values())e.forEach(e=>{e.count=0})}function j(e){let t=w(null);null!=t.current&&(t.current.count+=1),E(()=>{if(null==t.current){let r,n={count:0};null==(r=T.get(e))&&(r=new Set,T.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=T.get(e))&&n.delete(r))}})}var x=new Set;function A(e,t,r,n,a,o){function l(e,t,l,i){let c=`${n}:${o} [${a}] ${r}${l} changed from ${e} to ${t} at depth ${i}`;x.has(c)||(x.add(c),console.error(c))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)l(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)l("null",`type ${typeof r}`,n,a);else if(null===r)l(`type ${typeof t}`,"null",n,a);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)l(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,a);else for(let[o,i]of t)r.has(o)?e(i,r.get(o),`${n}.get(${o})`,a+1):l(`Map instance with key ${o}`,`Map instance without key ${o}`,n,a);else l("Map instance","other value",n,a);else if(r instanceof Map)l("other value","Map instance",n,a);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)l(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,a);else for(let e of r)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else l("Set instance","other value",n,a);else if(r instanceof Set)l("other value","Set instance",n,a);else if(o||i)if(o!==i)l(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,n,a);else if(t.length!==r.length)l(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let o=0;o<t.length;o++)e(t[o],r[o],`${n}[${o}]`,a+1);else if(R(t)||R(r))R(t)!==R(r)?l(`type ${R(t)?"React element":"object"}`,`type ${R(r)?"React element":"object"}`,n,a):t.type!==r.type?l(`React element of type ${t.type}`,`React element of type ${r.type}`,n,a):e(t.props,r.props,`[props of ${n}]`,a+1);else{for(let e in r)e in t||l(`object without key ${e}`,`object with key ${e}`,n,a);for(let o in t)o in r?e(t[o],r[o],`${n}.${o}`,a+1):l(`object with key ${o}`,`object without key ${o}`,n,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&l(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,a):t!==r&&l(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=new WeakMap;function o(e,t,r){let o=t,l=r;if("object"==typeof o&&null!==o&&"$$typeof"in o&&o.$$typeof===Symbol.for("react.context")&&"Provider"in o&&(o=o.Provider),"function"==typeof o&&null!=l.ref&&!o.prototype?.isReactComponent){let t=o,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let a=r.get(t);a||((a=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,a)),o=a}if("string"==typeof o&&"boolean"==typeof l.inert&&((l={...l}).inert?l.inert="":delete l.inert),"string"==typeof o)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in l&&(l={...l,[t]:l[e]},delete l[e]);return"string"==typeof o&&null!=l.ref&&(o=function(e,t){let r=a.get(e);r||(r=new Map,a.set(e,r));let n=r.get(t);if(n)return n;let o=e.forwardRef((r,n)=>{let a=e.useRef(null);if(!a.current||a.current.original!==n){let e;a.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:a.current.callback})});return o.displayName=`CanvasHost(${t})`,r.set(t,o),o}(e,o)),{type:o,props:l}}function l(e){let t=(t,r,n)=>{let a=o(e,t,r??{});return e.createElement(a.type,void 0===n?a.props:{...a.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let a=o(e,t,r??{}),{children:l,...i}=a.props;return e.createElement(a.type,void 0===n?i:{...i,key:n},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let a=o(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),l=a.ref,i=o(e,a.type,{...a.props,ref:l});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}r.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:d,createContext:m,createElement:y,createFactory:h,createRef:g,forwardRef:w,isValidElement:E,lazy:R,memo:_,startTransition:v,unstable_act:b,useCallback:$,useContext:S,useDebugValue:N,useDeferredValue:C,useEffect:M,useId:O,useImperativeHandle:k,useInsertionEffect:T,useLayoutEffect:D,useMemo:j,useReducer:x,useRef:A,useState:P,useSyncExternalStore:I,useTransition:z,version:L,use:U}=n;r.d(t,{},{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:d,createContext:m,createElement:y,createFactory:h,createRef:g,default:n,forwardRef:w,isValidElement:E,lazy:R,memo:_,startTransition:v,unstable_act:b,use:U,useCallback:$,useContext:S,useDebugValue:N,useDeferredValue:C,useEffect:M,useId:O,useImperativeHandle:k,useInsertionEffect:T,useLayoutEffect:D,useMemo:j,useReducer:x,useRef:A,useState:P,useSyncExternalStore:I,useTransition:z,version:L})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.exports}r.d=(e,t,n)=>{var a=(t,n)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[n]:t[a]})};a(t,"get"),a(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:a}=(0,r("p").MA)(window.React);var o=r("vD");let l=window.WallarmDS.HStack,i=window.WallarmDS.VStack,c=window.WallarmDS.HTTP_METHODS,s=window.WallarmDS.HttpMethod,u={title:"Data Display/HttpMethod",component:s,parameters:{layout:"centered",docs:{description:{component:"Renders an HTTP method as a fixed-colour code `Badge` — the colour is part of the vocabulary rather than a choice: safe reads green, destructive rose, the technical verbs slate. A verb outside the seven known ones prints verbatim in slate, so nothing unexpected is swallowed; reach for `Badge` itself when what you are labelling is not a method."}}},args:{method:"GET",size:"medium"},argTypes:{method:{control:"select",options:[...c,"TRACE"]},size:{control:"select",options:["medium","large"]}}};function f(t){return e(s,{method:t},t)}function p(t){return e(s,{method:t,size:"medium"},t)}function d(t){return e(s,{method:t,size:"large"},t)}var m=r("C");let y=[{name:"Playground",story:t=>{let r,n=(0,o.c)(2);return n[0]!==t?(r=e(s,{...t}),n[0]=t,n[1]=r):r=n[1],r},meta:u},{name:"AllMethods",story:()=>{let r,n=(0,o.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(i,{align:"start",gap:8,children:[c.map(f),e(s,{method:"OTHER"})]}),n[0]=r):r=n[0],r},meta:u},{name:"Sizes",story:()=>{let r,n,a=(0,o.c)(2);return a[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(l,{align:"center",gap:8,children:c.map(p)}),a[0]=r):r=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(i,{gap:16,children:[r,e(l,{align:"center",gap:8,children:c.map(d)})]}),a[1]=n):n=a[1],n},meta:u},{name:"UnknownMethodFallsBackToSlate",story:()=>{let r,n=(0,o.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(l,{align:"center",gap:8,children:[e(s,{method:"TRACE"}),e(s,{method:"CONNECT"}),e(s,{method:"LINK"})]}),n[0]=r):r=n[0],r},meta:u}];function h({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,o=()=>m.default.createElement(a,n),l={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=o;o=()=>e(t,l)}return m.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},m.default.createElement("h2",{className:"text-sm mb-12"},e.name),m.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(m.default.createElement(window.WallarmDS.Root,null,y.map((e,t)=>m.default.createElement(h,{key:t,entry:e})))),t}}})();