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

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

@@ -0,0 +1,177 @@
+A number the reader nudges rather than types from scratch — reach for `Input` when the figure is just data like a port or an ID, and `Slider` when the position matters more than the exact value. It starts at zero rather than empty, so pass `defaultValue` wherever a pre-filled zero would be mistaken for an answer.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `form` | `string \| undefined` | no | — | The associate form of the input element. |
+| `title` | `string \| undefined` | no | — |  |
+| `pattern` | `string \| undefined` | no | — | The pattern used to check the <input> element's value against |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| undefined` | no | `0` | The initial value of the input when rendered. Use when you don't need to control the value of the input. |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string` | no | — | The unique identifier of the machine. |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `input-mode` | `"text" \| "tel" \| "numeric" \| "decimal"` | no | — | Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `disabled` | `boolean \| undefined` | no | — | Whether the number input is disabled. |
+| `name` | `string \| undefined` | no | — | The name attribute of the number input. Useful for form submission. |
+| `value` | `string \| undefined` | no | — | The controlled value of the input |
+| `as-child` | `boolean \| undefined` | no | — | Use the provided child element as the default rendered element, combining their props and behavior. |
+| `max` | `number \| undefined` | no | — | The maximum value of the number input |
+| `min` | `number \| undefined` | no | — | The minimum value of the number input |
+| `ids` | `complex` | no | — | The ids of the elements in the number input. Useful for composition. |
+| `read-only` | `boolean \| undefined` | no | — | Whether the number input is readonly |
+| `required` | `boolean \| undefined` | no | — | Whether the number input is required |
+| `on-value-change` | `complex` | no | — | Function invoked when the value changes |
+| `step` | `number \| undefined` | no | — | The amount to increment or decrement the value by |
+| `translations` | `complex` | no | — | Specifies the localized strings that identifies the accessibility elements and their states |
+| `large-step` | `number \| undefined` | no | — | The amount to increment or decrement the value by when the `Shift` key is held. |
+| `small-step` | `number \| undefined` | no | — | The amount to increment or decrement the value by when the `Alt` key is held. |
+| `allow-mouse-wheel` | `boolean \| undefined` | no | — | Whether to allow mouse wheel to change the value |
+| `allow-overflow` | `boolean \| undefined` | no | — | Whether to allow the value overflow the min/max range |
+| `clamp-value-on-blur` | `boolean \| undefined` | no | — | Whether to clamp the value when the input loses focus (blur) |
+| `focus-input-on-change` | `boolean \| undefined` | no | — | Whether to focus input when the value changes |
+| `format-options` | `Intl.NumberFormatOptions \| undefined` | no | — | The options to pass to the `Intl.NumberFormat` constructor |
+| `on-value-invalid` | `complex` | no | — | Function invoked when the value overflows or underflows the min/max range |
+| `on-focus-change` | `complex` | no | — | Function invoked when the number input is focused |
+| `on-value-commit` | `complex` | no | — | Function invoked when the value is committed (when the input is blurred or the Enter key is pressed) |
+| `spin-on-press` | `boolean \| undefined` | no | — | Whether to spin the value when the increment/decrement button is pressed |
+| `locale` | `string \| undefined` | no | — | The current locale. Based on the BCP 47 definition. |
+| `size` | `"default" \| "medium" \| "small" \| "inline-edit"` | no | `default` |  |
+| `error` | `boolean \| undefined` | no | `false` |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Stories
+
+### Basic
+
+The field with its steppers, which are always drawn — there is no version without them, so
+this control always invites adjustment even when the reader would rather type.
+
+Source: NumberInput/NumberInput.stories.tsx#Basic
+
+### Sizes
+
+The same height scale as `Input`, with the steppers shrinking to match rather than being
+dropped at the smaller sizes.
+
+Source: NumberInput/NumberInput.stories.tsx#Sizes
+
+### Disabled
+
+Field and steppers both out. Worth checking here that the value still reads clearly, since
+a number nobody can change is often the number that matters.
+
+Source: NumberInput/NumberInput.stories.tsx#Disabled
+
+### WithValue
+
+A set value. Typing is allowed as well as stepping, and the value is clamped against `min`
+and `max` rather than refused as it is typed.
+
+Source: NumberInput/NumberInput.stories.tsx#WithValue
+
+### WithError
+
+`error` reddens the border and sets the invalid state; the reason belongs in `FieldError`
+beneath it.
+
+Source: NumberInput/NumberInput.stories.tsx#WithError
+
+## Story sources
+
+### NumberInput/NumberInput.stories.tsx
+
+```tsx
+import { fn } from 'storybook/test';
+import type { Meta, StoryFn, StoryObj } from 'storybook-react-rsbuild';
+import { HStack } from '../Stack';
+import { NumberInput } from './NumberInput';
+
+const DESCRIPTION = [
+  'A number the reader nudges rather than types from scratch — reach for `Input` when the figure is just data like a port or an ID, and `Slider` when the position matters more than the exact value.',
+  'It starts at zero rather than empty, so pass `defaultValue` wherever a pre-filled zero would be mistaken for an answer.',
+].join(' ');
+
+const meta = {
+  title: 'Inputs/NumberInput',
+  component: NumberInput,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  args: {
+    onChange: fn(),
+  },
+  argTypes: {
+    error: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof NumberInput>;
+
+export default meta;
+
+/**
+ * The field with its steppers, which are always drawn — there is no version without them, so
+ * this control always invites adjustment even when the reader would rather type.
+ */
+export const Basic: StoryObj<typeof meta> = {
+  args: {
+    'data-testid': 'number-input',
+  },
+};
+
+/**
+ * The same height scale as `Input`, with the steppers shrinking to match rather than being
+ * dropped at the smaller sizes.
+ */
+export const Sizes: StoryFn<typeof meta> = ({ ...args }) => (
+  <HStack gap={16} align='start'>
+    <NumberInput {...args} size='default' />
+    <NumberInput {...args} size='medium' />
+    <NumberInput {...args} size='small' />
+  </HStack>
+);
+
+/**
+ * Field and steppers both out. Worth checking here that the value still reads clearly, since
+ * a number nobody can change is often the number that matters.
+ */
+export const Disabled: StoryObj<typeof meta> = {
+  args: {
+    disabled: true,
+  },
+};
+
+/**
+ * A set value. Typing is allowed as well as stepping, and the value is clamped against `min`
+ * and `max` rather than refused as it is typed.
+ */
+export const WithValue: StoryObj<typeof meta> = {
+  args: {
+    value: '999',
+  },
+};
+
+/**
+ * `error` reddens the border and sets the invalid state; the reason belongs in `FieldError`
+ * beneath it.
+ */
+export const WithError: StoryObj<typeof meta> = {
+  args: {
+    error: true,
+  },
+};
+```

package/dist/project/components/NumberInput/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/NumberInput/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,s=Object.defineProperty,u=Object.getOwnPropertyDescriptor,c=Object.getOwnPropertyNames,f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,m=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of c(t))p.call(e,a)||a===r||s(e,a,{get:()=>t[a],enumerable:!(n=u(t,a))||n.enumerable});return e},d={},y={$dispatcherGuard:()=>C,$makeReadOnly:()=>M,$reset:()=>O,$structuralCheck:()=>T,c:()=>$,clearRenderCounterRegistry:()=>j,renderCounterRegistry:()=>I,useRenderCounter:()=>D};for(var h in y)s(d,h,{get:y[h],enumerable:!0});e.exports=m(s({},"__esModule",{value:!0}),d);var g=(a=null!=(n=r("C"))?i(f(n)):{},m(n&&n.__esModule?a:s(a,"default",{value:n,enumerable:!0}),n)),{useRef:R,useEffect:w,isValidElement:E}=g,v=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,b=Symbol.for("react.memo_cache_sentinel"),$="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]=b;return t[b]=!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 N=null;function S(e){return v.ReactCurrentDispatcher.current=e,v.ReactCurrentDispatcher.current}_.useMemoCache=e=>{if(null!=N)return N.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var k=[];function C(e){let t=v.ReactCurrentDispatcher.current;if(0===e){if(k.push(t),1===k.length&&(N=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.");S(_)}else if(1===e){let e=k.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===k.length&&(N=null),S(e)}else if(2===e)k.push(t),S(N);else if(3===e){let e=k.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");S(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function O(e){for(let t=0;t<e.length;t++)e[t]=b}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var I=new Map;function j(){for(let e of I.values())e.forEach(e=>{e.count=0})}function D(e){let t=R(null);null!=t.current&&(t.current.count+=1),w(()=>{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 x=new Set;function T(e,t,r,n,a,o){function l(e,t,l,i){let s=`${n}:${o} [${a}] ${r}${l} changed from ${e} to ${t} at depth ${i}`;x.has(s)||(x.add(s),console.error(s))}!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(E(t)||E(r))E(t)!==E(r)?l(`type ${E(t)?"React element":"object"}`,`type ${E(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:s,StrictMode:u,Suspense:c,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:m,createContext:d,createElement:y,createFactory:h,createRef:g,forwardRef:R,isValidElement:w,lazy:E,memo:v,startTransition:b,unstable_act:$,useCallback:_,useContext:N,useDebugValue:S,useDeferredValue:k,useEffect:C,useId:O,useImperativeHandle:M,useInsertionEffect:I,useLayoutEffect:j,useMemo:D,useReducer:x,useRef:T,useState:z,useSyncExternalStore:A,useTransition:P,version:L,use:V}=n;r.d(t,{},{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:s,StrictMode:u,Suspense:c,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:m,createContext:d,createElement:y,createFactory:h,createRef:g,default:n,forwardRef:R,isValidElement:w,lazy:E,memo:v,startTransition:b,unstable_act:$,use:V,useCallback:_,useContext:N,useDebugValue:S,useDeferredValue:k,useEffect:C,useId:O,useImperativeHandle:M,useInsertionEffect:I,useLayoutEffect:j,useMemo:D,useReducer:x,useRef:T,useState:z,useSyncExternalStore:A,useTransition:P,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.NumberInput,s={title:"Inputs/NumberInput",component:i,parameters:{layout:"centered",docs:{description:{component:"A number the reader nudges rather than types from scratch — reach for `Input` when the figure is just data like a port or an ID, and `Slider` when the position matters more than the exact value. It starts at zero rather than empty, so pass `defaultValue` wherever a pre-filled zero would be mistaken for an answer."}}},args:{onChange: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}()},argTypes:{error:{control:"boolean"},disabled:{control:"boolean"}}};var u=r("C");let c=[{name:"Basic",story:{args:{"data-testid":"number-input"}},meta:s},{name:"Sizes",story:r=>{let n,a,s=(0,o.c)(4);return s[0]!==r?({...n}=r,s[0]=r,s[1]=n):n=s[1],s[2]!==n?(a=t(l,{gap:16,align:"start",children:[e(i,{...n,size:"default"}),e(i,{...n,size:"medium"}),e(i,{...n,size:"small"})]}),s[2]=n,s[3]=a):a=s[3],a},meta:s},{name:"Disabled",story:{args:{disabled:!0}},meta:s},{name:"WithValue",story:{args:{value:"999"}},meta:s},{name:"WithError",story:{args:{error:!0}},meta:s}];function f({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=()=>u.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 u.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},u.default.createElement("h2",{className:"text-sm mb-12"},e.name),u.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(u.default.createElement(window.WallarmDS.Root,null,c.map((e,t)=>u.default.createElement(f,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,252 @@
+A compact count, `!` / `?` glyph, or icon attached to a tab, button, menu item, or step.
+
+`type` sets the visual weight and `color` sets the meaning. Supported combinations:
+
+- `solid`: `brand`, `danger`
+- `secondary`: `neutral`, `neutral-alt`, `info`, `success`, `danger`, `brand`
+- `outline`: `neutral`, `success`, `danger`, `brand`
+
+The default is `secondary` / `neutral`. With `type="solid"`, the default color is `brand`.
+
+`size="default"` corresponds to Medium (20px tall, 16px icon); `size="small"` is 16px tall with a 12px icon. Pass content as children and give an icon-only badge an accessible name when it conveys meaning.
+
+Hover and focus states apply to clickable badges. Use `asChild` with a native button or link when the badge is an action or navigation target.
+
+Migration from the removed flat `type` API:
+
+| Previous type | New type | New color |
+| --- | --- | --- |
+| `primary` | `secondary` | `neutral` |
+| `primary-alt` | `secondary` | `neutral-alt` |
+| `brand` | `solid` | `brand` |
+| `destructive` | `solid` | `danger` |
+| `outline` | `outline` | `neutral` |
+| `info` | `secondary` | `info` |
+
+## 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 | — |  |
+| `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 | — |  |
+| `color` | `"neutral" \| "neutral-alt" \| "brand" \| "danger" \| "success" \| "info"` | no | `type === 'solid' ? 'brand' : 'neutral'` |  |
+| `type` | `"solid" \| "secondary" \| "outline"` | no | `secondary` |  |
+| `size` | `"default" \| "small"` | no | `default` |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+| `as-child` | `boolean \| undefined` | no | `false` | Applies the badge to its child element, such as a span or a native button. |
+| `data-slot` | `string \| undefined` | no | — |  |
+
+## Stories
+
+### Basic
+
+The default count. Keep it to what the reader can take in at a glance; a four-digit count is
+a number they need to read, not see.
+
+Source: NumericBadge/NumericBadge.stories.tsx#Basic
+
+### Sizes
+
+Two heights, chosen to sit inside the control they are attached to rather than beside it.
+
+Source: NumericBadge/NumericBadge.stories.tsx#Sizes
+
+### Types
+
+Every supported Type × Color combination, in Medium and Small.
+
+Source: NumericBadge/NumericBadge.stories.tsx#Types
+
+### Content
+
+Numbers, short glyphs, and icons share the same badge heights.
+
+Source: NumericBadge/NumericBadge.stories.tsx#Content
+
+### Clickable
+
+Use a native button for an action; Tab, Enter, and Space work as expected.
+
+Source: NumericBadge/NumericBadge.stories.tsx#Clickable
+
+## Story sources
+
+### NumericBadge/NumericBadge.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Check } from '../../icons';
+import { HStack, VStack } from '../Stack';
+import { NumericBadge } from './NumericBadge';
+
+const DESCRIPTION = [
+  'A compact count, `!` / `?` glyph, or icon attached to a tab, button, menu item, or step.',
+  '`type` sets the visual weight and `color` sets the meaning. Supported combinations:',
+  '- `solid`: `brand`, `danger`\n- `secondary`: `neutral`, `neutral-alt`, `info`, `success`, `danger`, `brand`\n- `outline`: `neutral`, `success`, `danger`, `brand`',
+  'The default is `secondary` / `neutral`. With `type="solid"`, the default color is `brand`.',
+  '`size="default"` corresponds to Medium (20px tall, 16px icon); `size="small"` is 16px tall with a 12px icon. Pass content as children and give an icon-only badge an accessible name when it conveys meaning.',
+  'Hover and focus states apply to clickable badges. Use `asChild` with a native button or link when the badge is an action or navigation target.',
+  'Migration from the removed flat `type` API:\n\n| Previous type | New type | New color |\n| --- | --- | --- |\n| `primary` | `secondary` | `neutral` |\n| `primary-alt` | `secondary` | `neutral-alt` |\n| `brand` | `solid` | `brand` |\n| `destructive` | `solid` | `danger` |\n| `outline` | `outline` | `neutral` |\n| `info` | `secondary` | `info` |',
+].join('\n\n');
+
+const combinations = [
+  { type: 'solid', color: 'brand' },
+  { type: 'solid', color: 'danger' },
+  { type: 'secondary', color: 'neutral' },
+  { type: 'secondary', color: 'neutral-alt' },
+  { type: 'secondary', color: 'info' },
+  { type: 'secondary', color: 'success' },
+  { type: 'secondary', color: 'danger' },
+  { type: 'secondary', color: 'brand' },
+  { type: 'outline', color: 'neutral' },
+  { type: 'outline', color: 'success' },
+  { type: 'outline', color: 'danger' },
+  { type: 'outline', color: 'brand' },
+] as const;
+
+const meta = {
+  title: 'Status Indication/NumericBadge',
+  component: NumericBadge,
+  argTypes: {
+    type: { control: 'select', options: ['solid', 'secondary', 'outline'] },
+    color: {
+      control: 'select',
+      options: ['neutral', 'neutral-alt', 'brand', 'info', 'success', 'danger'],
+    },
+    size: { control: 'select', options: ['default', 'small'] },
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta<typeof NumericBadge>;
+
+export default meta;
+
+/**
+ * The default count. Keep it to what the reader can take in at a glance; a four-digit count is
+ * a number they need to read, not see.
+ */
+export const Basic: StoryFn<typeof meta> = args => <NumericBadge {...args}>1</NumericBadge>;
+
+/**
+ * Two heights, chosen to sit inside the control they are attached to rather than beside it.
+ */
+export const Sizes: StoryFn<typeof meta> = () => (
+  // One row per size, each holding its own label: parallel columns drift apart as soon as the
+  // label and the specimen have different heights.
+  <VStack gap={8} align='start'>
+    {(['small', 'default'] as const).map(size => (
+      <HStack key={size} gap={12} align='center'>
+        <span className='sb-annotation w-96 text-right'>{size}</span>
+        <NumericBadge size={size}>1</NumericBadge>
+      </HStack>
+    ))}
+  </VStack>
+);
+
+/**
+ * Every supported Type × Color combination, in Medium and Small.
+ */
+export const Types: StoryFn<typeof meta> = () => (
+  // One row per type, so the label always sits beside the badges it names.
+  <VStack gap={8} align='start'>
+    {combinations.map(({ type, color }) => (
+      <HStack key={`${type}-${color}`} gap={12} align='center'>
+        <span className='sb-annotation w-256 whitespace-nowrap text-right'>
+          {type} / {color}
+        </span>
+        <div
+          className={`inline-flex items-center gap-12 p-8 ${color === 'neutral-alt' ? 'bg-component-tooltip-bg' : ''}`}
+        >
+          <NumericBadge type={type} color={color} size='default'>
+            1
+          </NumericBadge>
+          <NumericBadge type={type} color={color} size='small'>
+            1
+          </NumericBadge>
+        </div>
+      </HStack>
+    ))}
+  </VStack>
+);
+
+/** Numbers, short glyphs, and icons share the same badge heights. */
+export const Content: StoryFn<typeof meta> = () => (
+  <VStack gap={16} align='start'>
+    {(['default', 'small'] as const).map(size => (
+      <HStack key={size} gap={12} align='center'>
+        <span className='sb-annotation w-96 text-right'>{size}</span>
+        <NumericBadge data-testid='numeric-badge' size={size}>
+          1
+        </NumericBadge>
+        <NumericBadge data-testid='numeric-badge' size={size}>
+          99
+        </NumericBadge>
+        <NumericBadge
+          data-testid='numeric-badge'
+          size={size}
+          color='danger'
+          aria-label='Needs attention'
+        >
+          !
+        </NumericBadge>
+        <NumericBadge data-testid='numeric-badge' size={size} color='info' aria-label='Unknown'>
+          ?
+        </NumericBadge>
+        <NumericBadge
+          data-testid='numeric-badge'
+          size={size}
+          color='success'
+          aria-label='Completed'
+        >
+          <Check />
+        </NumericBadge>
+      </HStack>
+    ))}
+  </VStack>
+);
+
+/** Use a native button for an action; Tab, Enter, and Space work as expected. */
+export const Clickable: StoryFn<typeof meta> = () => {
+  const [activations, setActivations] = useState(0);
+
+  return (
+    <VStack gap={12} align='start'>
+      {combinations.map(({ type, color }) => (
+        <HStack key={`${type}-${color}`} gap={12} align='center'>
+          <span className='sb-annotation w-256 whitespace-nowrap text-right'>
+            {type} / {color}
+          </span>
+          <div className={color === 'neutral-alt' ? 'bg-component-tooltip-bg p-8' : 'p-8'}>
+            <NumericBadge
+              asChild
+              type={type}
+              color={color}
+              onClick={() => setActivations(count => count + 1)}
+            >
+              <button type='button' aria-label={`${type} ${color}`}>
+                1
+              </button>
+            </NumericBadge>
+          </div>
+        </HStack>
+      ))}
+      <output aria-label='Activations'>{activations}</output>
+    </VStack>
+  );
+};
+```

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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,n){let r,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,p=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,f=(e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))d.call(e,a)||a===n||c(e,a,{get:()=>t[a],enumerable:!(r=s(t,a))||r.enumerable});return e},m={},y={$dispatcherGuard:()=>k,$makeReadOnly:()=>O,$reset:()=>M,$structuralCheck:()=>T,c:()=>R,clearRenderCounterRegistry:()=>z,renderCounterRegistry:()=>x,useRenderCounter:()=>D};for(var h in y)c(m,h,{get:y[h],enumerable:!0});e.exports=f(c({},"__esModule",{value:!0}),m);var g=(a=null!=(r=n("C"))?i(p(r)):{},f(r&&r.__esModule?a:c(a,"default",{value:r,enumerable:!0}),r)),{useRef:b,useEffect:w,isValidElement:v}=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,$=Symbol.for("react.memo_cache_sentinel"),R="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 n=0;n<e;n++)t[n]=$;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 S=null;function N(e){return _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}E.useMemoCache=e=>{if(null!=S)return S.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function k(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&(S=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&&(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 M(e){for(let t=0;t<e.length;t++)e[t]=$}function O(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var x=new Map;function z(){for(let e of x.values())e.forEach(e=>{e.count=0})}function D(e){let t=b(null);null!=t.current&&(t.current.count+=1),w(()=>{if(null==t.current){let n,r={count:0};null==(n=x.get(e))&&(n=new Set,x.set(e,n)),n.add(r),t.current=r}return()=>{var n;let r;null!==t.current&&(n=t.current,null!=(r=x.get(e))&&r.delete(n))}})}var j=new Set;function T(e,t,n,r,a,o){function l(e,t,l,i){let c=`${r}:${o} [${a}] ${n}${l} changed from ${e} to ${t} at depth ${i}`;j.has(c)||(j.add(c),console.error(c))}!function e(t,n,r,a){if(!(a>2)){if(t!==n)if(typeof t!=typeof n)l(`type ${typeof t}`,`type ${typeof n}`,r,a);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(n);if(null===t&&null!==n)l("null",`type ${typeof n}`,r,a);else if(null===n)l(`type ${typeof t}`,"null",r,a);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)l(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,r,a);else for(let[o,i]of t)n.has(o)?e(i,n.get(o),`${r}.get(${o})`,a+1):l(`Map instance with key ${o}`,`Map instance without key ${o}`,r,a);else l("Map instance","other value",r,a);else if(n instanceof Map)l("other value","Map instance",r,a);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)l(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,r,a);else for(let e of n)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,r,a);else l("Set instance","other value",r,a);else if(n instanceof Set)l("other value","Set instance",r,a);else if(o||i)if(o!==i)l(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,r,a);else if(t.length!==n.length)l(`array with length ${t.length}`,`array with length ${n.length}`,r,a);else for(let o=0;o<t.length;o++)e(t[o],n[o],`${r}[${o}]`,a+1);else if(v(t)||v(n))v(t)!==v(n)?l(`type ${v(t)?"React element":"object"}`,`type ${v(n)?"React element":"object"}`,r,a):t.type!==n.type?l(`React element of type ${t.type}`,`React element of type ${n.type}`,r,a):e(t.props,n.props,`[props of ${r}]`,a+1);else{for(let e in n)e in t||l(`object without key ${e}`,`object with key ${e}`,r,a);for(let o in t)o in n?e(t[o],n[o],`${r}.${o}`,a+1):l(`object with key ${o}`,`object without key ${o}`,r,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&l(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,r,a):t!==n&&l(t,n,r,a)}}}(e,t,"",0)}},p(e,t,n){let r=new WeakMap,a=new WeakMap;function o(e,t,n){let o=t,l=n;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,n=r.get(e);n||(n=new WeakMap,r.set(e,n));let a=n.get(t);a||((a=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.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 n=a.get(e);n||(n=new Map,a.set(e,n));let r=n.get(t);if(r)return r;let o=e.forwardRef((n,r)=>{let a=e.useRef(null);if(!a.current||a.current.original!==r){let e;a.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:a.current.callback})});return o.displayName=`CanvasHost(${t})`,n.set(t,o),o}(e,o)),{type:o,props:l}}function l(e){let t=(t,n,r)=>{let a=o(e,t,n??{});return e.createElement(a.type,void 0===r?a.props:{...a.props,key:r})};return{jsx:t,jsxs:(t,n,r)=>{let a=o(e,t,n??{}),{children:l,...i}=a.props;return e.createElement(a.type,void 0===r?i:{...i,key:r},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,n,...r)=>{let a=o(e,t,n??{});return e.createElement(a.type,a.props,...r)},cloneElement:(t,n,...r)=>{let a=e.cloneElement(t,n??void 0,...r),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})}}}n.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,n){n.r(t);let r=(0,n("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:p,act:d,cloneElement:f,createContext:m,createElement:y,createFactory:h,createRef:g,forwardRef:b,isValidElement:w,lazy:v,memo:_,startTransition:$,unstable_act:R,useCallback:E,useContext:S,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:M,useImperativeHandle:O,useInsertionEffect:x,useLayoutEffect:z,useMemo:D,useReducer:j,useRef:T,useState:I,useSyncExternalStore:A,useTransition:P,version:U,use:W}=r;n.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:p,act:d,cloneElement:f,createContext:m,createElement:y,createFactory:h,createRef:g,default:r,forwardRef:b,isValidElement:w,lazy:v,memo:_,startTransition:$,unstable_act:R,use:W,useCallback:E,useContext:S,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:M,useImperativeHandle:O,useInsertionEffect:x,useLayoutEffect:z,useMemo:D,useReducer:j,useRef:T,useState:I,useSyncExternalStore:A,useTransition:P,version:U})}},t={};function n(r){var a=t[r];if(void 0!==a)return a.exports;var o=t[r]={exports:{}};return e[r](o,o.exports,n),o.exports}n.d=(e,t,r)=>{var a=(t,r)=>{for(var a in t)n.o(t,a)&&!n.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[r]:t[a]})};a(t,"get"),a(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:a}=(0,n("p").MA)(window.React);var o=n("vD"),l=n("C");let i=window.WallarmDS.Icons.Check,c=window.WallarmDS.HStack,s=window.WallarmDS.VStack,u=window.WallarmDS.NumericBadge,p=[{type:"solid",color:"brand"},{type:"solid",color:"danger"},{type:"secondary",color:"neutral"},{type:"secondary",color:"neutral-alt"},{type:"secondary",color:"info"},{type:"secondary",color:"success"},{type:"secondary",color:"danger"},{type:"secondary",color:"brand"},{type:"outline",color:"neutral"},{type:"outline",color:"success"},{type:"outline",color:"danger"},{type:"outline",color:"brand"}],d={title:"Status Indication/NumericBadge",component:u,argTypes:{type:{control:"select",options:["solid","secondary","outline"]},color:{control:"select",options:["neutral","neutral-alt","brand","info","success","danger"]},size:{control:"select",options:["default","small"]}},parameters:{layout:"centered",docs:{description:{component:'A compact count, `!` / `?` glyph, or icon attached to a tab, button, menu item, or step.\n\n`type` sets the visual weight and `color` sets the meaning. Supported combinations:\n\n- `solid`: `brand`, `danger`\n- `secondary`: `neutral`, `neutral-alt`, `info`, `success`, `danger`, `brand`\n- `outline`: `neutral`, `success`, `danger`, `brand`\n\nThe default is `secondary` / `neutral`. With `type="solid"`, the default color is `brand`.\n\n`size="default"` corresponds to Medium (20px tall, 16px icon); `size="small"` is 16px tall with a 12px icon. Pass content as children and give an icon-only badge an accessible name when it conveys meaning.\n\nHover and focus states apply to clickable badges. Use `asChild` with a native button or link when the badge is an action or navigation target.\n\nMigration from the removed flat `type` API:\n\n| Previous type | New type | New color |\n| --- | --- | --- |\n| `primary` | `secondary` | `neutral` |\n| `primary-alt` | `secondary` | `neutral-alt` |\n| `brand` | `solid` | `brand` |\n| `destructive` | `solid` | `danger` |\n| `outline` | `outline` | `neutral` |\n| `info` | `secondary` | `info` |'}}}};function f(n){return t(c,{gap:12,align:"center",children:[e("span",{className:"sb-annotation w-96 text-right",children:n}),e(u,{size:n,children:"1"})]},n)}function m(n){let{type:r,color:a}=n;return t(c,{gap:12,align:"center",children:[t("span",{className:"sb-annotation w-256 whitespace-nowrap text-right",children:[r," / ",a]}),t("div",{className:`inline-flex items-center gap-12 p-8 ${"neutral-alt"===a?"bg-component-tooltip-bg":""}`,children:[e(u,{type:r,color:a,size:"default",children:"1"}),e(u,{type:r,color:a,size:"small",children:"1"})]})]},`${r}-${a}`)}function y(n){return t(c,{gap:12,align:"center",children:[e("span",{className:"sb-annotation w-96 text-right",children:n}),e(u,{"data-testid":"numeric-badge",size:n,children:"1"}),e(u,{"data-testid":"numeric-badge",size:n,children:"99"}),e(u,{"data-testid":"numeric-badge",size:n,color:"danger","aria-label":"Needs attention",children:"!"}),e(u,{"data-testid":"numeric-badge",size:n,color:"info","aria-label":"Unknown",children:"?"}),e(u,{"data-testid":"numeric-badge",size:n,color:"success","aria-label":"Completed",children:e(i,{})})]},n)}function h(e){return e+1}let g=[{name:"Basic",story:t=>{let n,r=(0,o.c)(2);return r[0]!==t?(n=e(u,{...t,children:"1"}),r[0]=t,r[1]=n):n=r[1],n},meta:d},{name:"Sizes",story:()=>{let t,n,r=(0,o.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=["small","default"],r[0]=t):t=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(s,{gap:8,align:"start",children:t.map(f)}),r[1]=n):n=r[1],n},meta:d},{name:"Types",story:()=>{let t,n=(0,o.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(s,{gap:8,align:"start",children:p.map(m)}),n[0]=t):t=n[0],t},meta:d},{name:"Content",story:()=>{let t,n,r=(0,o.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=["default","small"],r[0]=t):t=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(s,{gap:16,align:"start",children:t.map(y)}),r[1]=n):n=r[1],n},meta:d},{name:"Clickable",story:()=>{let n,r,a=(0,o.c)(3),[i,d]=(0,l.useState)(0);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=p.map(n=>{let{type:r,color:a}=n;return t(c,{gap:12,align:"center",children:[t("span",{className:"sb-annotation w-256 whitespace-nowrap text-right",children:[r," / ",a]}),e("div",{className:"neutral-alt"===a?"bg-component-tooltip-bg p-8":"p-8",children:e(u,{asChild:!0,type:r,color:a,onClick:()=>d(h),children:e("button",{type:"button","aria-label":`${r} ${a}`,children:"1"})})})]},`${r}-${a}`)}),a[0]=n):n=a[0],a[1]!==i?(r=t(s,{gap:12,align:"start",children:[n,e("output",{"aria-label":"Activations",children:i})]}),a[1]=i,a[2]=r):r=a[2],r},meta:d}];function b({entry:e}){let{story:t,meta:n}=e,r={...n.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,o=()=>l.default.createElement(a,r),i={args:r,globals:{theme:"light"},parameters:{...n.parameters,...t.parameters},viewMode:"story"};for(let e of[...n.decorators||[],...t.decorators||[]].reverse()){let t=o;o=()=>e(t,i)}return l.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},l.default.createElement("h2",{className:"text-sm mb-12"},e.name),l.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(l.default.createElement(window.WallarmDS.Root,null,g.map((e,t)=>l.default.createElement(b,{key:t,entry:e})))),t}}})();