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

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

@@ -0,0 +1,201 @@
+A short code split into one cell per character, for codes that arrive by mail or from an authenticator — reach for `Input` for anything the reader knows by heart. Six cells by default, and `groupSize` inserts separators so the reader can check what they typed against what they were sent.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| — | See emitted declarations in `components/index.d.ts`. | | | |
+
+## Sub-components
+
+- `WallarmDS.OTPInput` — `OTPInputProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+Six cells, with focus advancing as the reader types and a paste filling the whole code at
+once — pasting is how most codes actually arrive.
+
+Source: InputOTP/OTPInput.stories.tsx#Basic
+
+### Disabled
+
+All cells out together. The code is a single value, so cells are never disabled
+individually.
+
+Source: InputOTP/OTPInput.stories.tsx#Disabled
+
+### WithError
+
+The invalid state across every cell, since a wrong code is wrong as a whole rather than in
+one position.
+
+Source: InputOTP/OTPInput.stories.tsx#WithError
+
+### Numeric
+
+Numeric entry brings up the number keypad, and the `otp` flag lets a password manager or
+the OS offer the code it has just received.
+
+Source: InputOTP/OTPInput.stories.tsx#Numeric
+
+### Masked
+
+`mask` hides the characters as they are entered. Reserve it for codes worth hiding —
+masking a six-digit code the reader is copying off a screen only makes it harder.
+
+Source: InputOTP/OTPInput.stories.tsx#Masked
+
+### WithField
+
+Inside `Field`, so the instruction above the cells comes from `FieldLabel` and
+`FieldDescription` — which is where to say where the code came from.
+
+Source: InputOTP/OTPInput.stories.tsx#WithField
+
+## Story sources
+
+### InputOTP/OTPInput.stories.tsx
+
+```tsx
+import { fn } from 'storybook/test';
+import type { Meta, StoryFn, StoryObj } from 'storybook-react-rsbuild';
+import { Field } from '../Field';
+import { FieldLabel } from '../Field/FieldLabel';
+import { OTPInput } from './OTPInput';
+
+const DESCRIPTION = [
+  'A short code split into one cell per character, for codes that arrive by mail or from an authenticator — reach for `Input` for anything the reader knows by heart.',
+  'Six cells by default, and `groupSize` inserts separators so the reader can check what they typed against what they were sent.',
+].join(' ');
+
+const meta = {
+  title: 'Inputs/OTPInput',
+  component: OTPInput,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  args: {
+    type: 'alphanumeric',
+    count: 6,
+    groupSize: 2,
+    separator: '\u2014',
+    placeholder: '',
+    error: false,
+    disabled: false,
+    mask: false,
+    otp: false,
+    onValueChange: fn(),
+    onValueComplete: fn(),
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['numeric', 'alphanumeric', 'alphabetic'],
+    },
+    count: {
+      control: { type: 'number', min: 1, max: 12 },
+    },
+    groupSize: {
+      control: { type: 'number', min: 0, max: 6 },
+    },
+    separator: {
+      control: { type: 'text' },
+    },
+    placeholder: {
+      control: { type: 'text' },
+    },
+    error: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    mask: {
+      control: 'boolean',
+    },
+    otp: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof OTPInput>;
+
+export default meta;
+
+/**
+ * Six cells, with focus advancing as the reader types and a paste filling the whole code at
+ * once — pasting is how most codes actually arrive.
+ */
+export const Basic: StoryFn<typeof meta> = ({ ...args }) => <OTPInput {...args} />;
+
+/**
+ * All cells out together. The code is a single value, so cells are never disabled
+ * individually.
+ */
+export const Disabled: StoryObj<typeof meta> = {
+  args: {
+    disabled: true,
+  },
+};
+
+/**
+ * The invalid state across every cell, since a wrong code is wrong as a whole rather than in
+ * one position.
+ */
+export const WithError: StoryObj<typeof meta> = {
+  args: {
+    error: true,
+  },
+};
+
+/**
+ * Numeric entry brings up the number keypad, and the `otp` flag lets a password manager or
+ * the OS offer the code it has just received.
+ */
+export const Numeric: StoryObj<typeof meta> = {
+  args: {
+    type: 'numeric',
+    otp: true,
+  },
+};
+
+/**
+ * `mask` hides the characters as they are entered. Reserve it for codes worth hiding —
+ * masking a six-digit code the reader is copying off a screen only makes it harder.
+ */
+export const Masked: StoryObj<typeof meta> = {
+  args: {
+    mask: true,
+    defaultValue: ['1', '2', '3', '4', '5', '6'],
+    type: 'numeric',
+  },
+};
+
+/**
+ * Inside `Field`, so the instruction above the cells comes from `FieldLabel` and
+ * `FieldDescription` — which is where to say where the code came from.
+ */
+export const WithField: StoryObj<typeof meta> = {
+  decorators: [
+    Story => (
+      <div className='w-320'>
+        <Story />
+      </div>
+    ),
+  ],
+  render: args => (
+    <Field required>
+      <FieldLabel>Label</FieldLabel>
+      <OTPInput {...args} />
+    </Field>
+  ),
+};
+```

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,o;/**
+ * 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,l,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,m=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let o of u(t))f.call(e,o)||o===r||c(e,o,{get:()=>t[o],enumerable:!(n=s(t,o))||n.enumerable});return e},d={},y={$dispatcherGuard:()=>C,$makeReadOnly:()=>M,$reset:()=>O,$structuralCheck:()=>T,c:()=>$,clearRenderCounterRegistry:()=>D,renderCounterRegistry:()=>x,useRenderCounter:()=>I};for(var h in y)c(d,h,{get:y[h],enumerable:!0});e.exports=m(c({},"__esModule",{value:!0}),d);var g=(o=null!=(n=r("C"))?i(p(n)):{},m(n&&n.__esModule?o:c(o,"default",{value:n,enumerable:!0}),n)),{useRef:b,useEffect:R,isValidElement:w}=g,E=null!=(a=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?a:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=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]=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 E.ReactCurrentDispatcher.current=e,E.ReactCurrentDispatcher.current}_.useMemoCache=e=>{if(null!=S)return S.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var k=[];function C(e){let t=E.ReactCurrentDispatcher.current;if(0===e){if(k.push(t),1===k.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=k.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===k.length&&(S=null),N(e)}else if(2===e)k.push(t),N(S);else if(3===e){let e=k.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 M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var x=new Map;function D(){for(let e of x.values())e.forEach(e=>{e.count=0})}function I(e){let t=b(null);null!=t.current&&(t.current.count+=1),R(()=>{if(null==t.current){let r,n={count:0};null==(r=x.get(e))&&(r=new Set,x.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=x.get(e))&&n.delete(r))}})}var j=new Set;function T(e,t,r,n,o,a){function l(e,t,l,i){let c=`${n}:${a} [${o}] ${r}${l} changed from ${e} to ${t} at depth ${i}`;j.has(c)||(j.add(c),console.error(c))}!function e(t,r,n,o){if(!(o>2)){if(t!==r)if(typeof t!=typeof r)l(`type ${typeof t}`,`type ${typeof r}`,n,o);else if("object"==typeof t){let a=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)l("null",`type ${typeof r}`,n,o);else if(null===r)l(`type ${typeof t}`,"null",n,o);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,o);else for(let[a,i]of t)r.has(a)?e(i,r.get(a),`${n}.get(${a})`,o+1):l(`Map instance with key ${a}`,`Map instance without key ${a}`,n,o);else l("Map instance","other value",n,o);else if(r instanceof Map)l("other value","Map instance",n,o);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,o);else for(let e of r)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,n,o);else l("Set instance","other value",n,o);else if(r instanceof Set)l("other value","Set instance",n,o);else if(a||i)if(a!==i)l(`type ${a?"array":"object"}`,`type ${i?"array":"object"}`,n,o);else if(t.length!==r.length)l(`array with length ${t.length}`,`array with length ${r.length}`,n,o);else for(let a=0;a<t.length;a++)e(t[a],r[a],`${n}[${a}]`,o+1);else if(w(t)||w(r))w(t)!==w(r)?l(`type ${w(t)?"React element":"object"}`,`type ${w(r)?"React element":"object"}`,n,o):t.type!==r.type?l(`React element of type ${t.type}`,`React element of type ${r.type}`,n,o):e(t.props,r.props,`[props of ${n}]`,o+1);else{for(let e in r)e in t||l(`object without key ${e}`,`object with key ${e}`,n,o);for(let a in t)a in r?e(t[a],r[a],`${n}.${a}`,o+1):l(`object with key ${a}`,`object without key ${a}`,n,o)}}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,o):t!==r&&l(t,r,n,o)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,o=new WeakMap;function a(e,t,r){let a=t,l=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!=l.ref&&!a.prototype?.isReactComponent){let t=a,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let o=r.get(t);o||((o=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,o)),a=o}if("string"==typeof a&&"boolean"==typeof l.inert&&((l={...l}).inert?l.inert="":delete l.inert),"string"==typeof a)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 a&&null!=l.ref&&(a=function(e,t){let r=o.get(e);r||(r=new Map,o.set(e,r));let n=r.get(t);if(n)return n;let a=e.forwardRef((r,n)=>{let o=e.useRef(null);if(!o.current||o.current.original!==n){let e;o.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:o.current.callback})});return a.displayName=`CanvasHost(${t})`,r.set(t,a),a}(e,a)),{type:a,props:l}}function l(e){let t=(t,r,n)=>{let o=a(e,t,r??{});return e.createElement(o.type,void 0===n?o.props:{...o.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let o=a(e,t,r??{}),{children:l,...i}=o.props;return e.createElement(o.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 o=a(e,t,r??{});return e.createElement(o.type,o.props,...n)},cloneElement:(t,r,...n)=>{let o=e.cloneElement(t,r??void 0,...n),l=o.ref,i=a(e,o.type,{...o.props,ref:l});return i.type===o.type&&"string"!=typeof o.type?o:e.createElement(i.type,{...i.props,key:o.key})}}}r.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:o,Component:a,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:f,cloneElement:m,createContext:d,createElement:y,createFactory:h,createRef:g,forwardRef:b,isValidElement:R,lazy:w,memo:E,startTransition:v,unstable_act:$,useCallback:_,useContext:S,useDebugValue:N,useDeferredValue:k,useEffect:C,useId:O,useImperativeHandle:M,useInsertionEffect:x,useLayoutEffect:D,useMemo:I,useReducer:j,useRef:T,useState:P,useSyncExternalStore:A,useTransition:z,version:L,use:V}=n;r.d(t,{},{Children:o,Component:a,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:f,cloneElement:m,createContext:d,createElement:y,createFactory:h,createRef:g,default:n,forwardRef:b,isValidElement:R,lazy:w,memo:E,startTransition:v,unstable_act:$,use:V,useCallback:_,useContext:S,useDebugValue:N,useDeferredValue:k,useEffect:C,useId:O,useImperativeHandle:M,useInsertionEffect:x,useLayoutEffect:D,useMemo:I,useReducer:j,useRef:T,useState:P,useSyncExternalStore:A,useTransition:z,version:L})}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var a=t[n]={exports:{}};return e[n](a,a.exports,r),a.exports}r.d=(e,t,n)=>{var o=(t,n)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,[n]:t[o]})};o(t,"get"),o(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:o}=(0,r("p").MA)(window.React);var a=r("vD");function l(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}let i=window.WallarmDS.Field,c=window.WallarmDS.FieldLabel,s=window.WallarmDS.OTPInput,u={title:"Inputs/OTPInput",component:s,parameters:{layout:"centered",docs:{description:{component:"A short code split into one cell per character, for codes that arrive by mail or from an authenticator — reach for `Input` for anything the reader knows by heart. Six cells by default, and `groupSize` inserts separators so the reader can check what they typed against what they were sent."}}},args:{type:"alphanumeric",count:6,groupSize:2,separator:"—",placeholder:"",error:!1,disabled:!1,mask:!1,otp:!1,onValueChange:l(),onValueComplete:l()},argTypes:{type:{control:"select",options:["numeric","alphanumeric","alphabetic"]},count:{control:{type:"number",min:1,max:12}},groupSize:{control:{type:"number",min:0,max:6}},separator:{control:{type:"text"}},placeholder:{control:{type:"text"}},error:{control:"boolean"},disabled:{control:"boolean"},mask:{control:"boolean"},otp:{control:"boolean"}}};var p=r("C");let f=[{name:"Basic",story:t=>{let r,n,o=(0,a.c)(4);return o[0]!==t?({...r}=t,o[0]=t,o[1]=r):r=o[1],o[2]!==r?(n=e(s,{...r}),o[2]=r,o[3]=n):n=o[3],n},meta:u},{name:"Disabled",story:{args:{disabled:!0}},meta:u},{name:"WithError",story:{args:{error:!0}},meta:u},{name:"Numeric",story:{args:{type:"numeric",otp:!0}},meta:u},{name:"Masked",story:{args:{mask:!0,defaultValue:["1","2","3","4","5","6"],type:"numeric"}},meta:u},{name:"WithField",story:{decorators:[t=>e("div",{className:"w-320",children:e(t,{})})],render:r=>t(i,{required:!0,children:[e(c,{children:"Label"}),e(s,{...r})]})},meta:u}];function m({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},o="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,a=()=>p.default.createElement(o,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=a;a=()=>e(t,l)}return p.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},p.default.createElement("h2",{className:"text-sm mb-12"},e.name),p.default.createElement(a))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(p.default.createElement(window.WallarmDS.Root,null,f.map((e,t)=>p.default.createElement(m,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,226 @@
+One IP address and what is known about it — the country it resolves to, the port, the provider owning the range — composed as a row in which the address is the identity and everything else is context. `IpList` collapses a set of them: vertical keeps the first and hides the rest behind a `+N addresses` link, horizontal fits as many as the width allows and puts the remainder in a `+N` badge.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `as-child` | `boolean \| undefined` | no | `false` |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.IpAddress` — `IpAddressProps` in the declaration bundle.
+- `WallarmDS.IpCountry` — `IpCountryProps` in the declaration bundle.
+- `WallarmDS.IpList` — `IpListProps` in the declaration bundle.
+- `WallarmDS.IpPort` — `IpPortProps` in the declaration bundle.
+- `WallarmDS.IpProvider` — `IpProviderProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+The five compositions, from the address on its own up to an IPv6 with a provider. The
+address truncates with a tooltip behind it, so the longest v6 still cannot widen its row.
+
+Source: Ip/Ip.stories.tsx#Basic
+
+### HorizontalMultiple
+
+Eight addresses in a 600px row: the ones that fit are separated by a middle dot, and the
+rest fold into a `+N` badge that opens the full set in a popover.
+
+Source: Ip/Ip.stories.tsx#HorizontalMultiple
+
+### VerticalMultiple
+
+Three vertical lists, each showing its first address only and holding the rest behind a
+`+N addresses` link — the link indents to the address when the row opens with a flag.
+
+Source: Ip/Ip.stories.tsx#VerticalMultiple
+
+## Story sources
+
+### Ip/Ip.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { VStack } from '../Stack';
+import { Ip } from './Ip';
+import { IpAddress } from './IpAddress';
+import { IpCountry } from './IpCountry';
+import { IpList } from './IpList';
+import { IpPort } from './IpPort';
+import { IpProvider } from './IpProvider';
+
+const DESCRIPTION = [
+  'One IP address and what is known about it — the country it resolves to, the port, the provider owning the range — composed as a row in which the address is the identity and everything else is context.',
+  '`IpList` collapses a set of them: vertical keeps the first and hides the rest behind a `+N addresses` link, horizontal fits as many as the width allows and puts the remainder in a `+N` badge.',
+].join(' ');
+
+const meta: Meta = {
+  title: 'Data Display/Ip',
+  parameters: {
+    layout: 'centered',
+    docs: { description: { component: DESCRIPTION } },
+  },
+};
+
+export default meta;
+
+/**
+ * The five compositions, from the address on its own up to an IPv6 with a provider. The
+ * address truncates with a tooltip behind it, so the longest v6 still cannot widen its row.
+ */
+export const Basic: StoryFn = () => (
+  <div className='grid grid-cols-[auto_200px] items-center gap-x-12 gap-y-8'>
+    <span className='sb-annotation text-right'>basic</span>
+    <Ip>
+      <IpAddress>8.8.8.8</IpAddress>
+    </Ip>
+
+    <span className='sb-annotation text-right'>with country flag</span>
+    <Ip>
+      <IpCountry code='US' />
+      <IpAddress>1.1.1.1</IpAddress>
+    </Ip>
+
+    <span className='sb-annotation text-right'>with port</span>
+    <Ip>
+      <IpCountry code='DE' />
+      <IpAddress>77.88.8.8</IpAddress>
+      <IpPort>:8080</IpPort>
+    </Ip>
+
+    <span className='sb-annotation text-right'>with provider</span>
+    <Ip>
+      <IpCountry code='NL' />
+      <IpAddress>20.33.0.0</IpAddress>
+      <IpProvider>Azure</IpProvider>
+    </Ip>
+
+    <span className='sb-annotation text-right'>IPv6</span>
+    <Ip>
+      <IpCountry code='JP' />
+      <IpAddress>2001:0db8:85a3:0000:0000:8a2e:0370:7334</IpAddress>
+      <IpProvider>GCP</IpProvider>
+    </Ip>
+  </div>
+);
+
+/**
+ * Eight addresses in a 600px row: the ones that fit are separated by a middle dot, and the
+ * rest fold into a `+N` badge that opens the full set in a popover.
+ */
+export const HorizontalMultiple: StoryFn = () => (
+  <div style={{ width: 600 }}>
+    <IpList type='horizontal' data-testid='horizontal-ips'>
+      <Ip>
+        <IpCountry code='ES' />
+        <IpAddress>142.198.167.52</IpAddress>
+        <IpProvider>Azure</IpProvider>
+      </Ip>
+      <Ip>
+        <IpCountry code='US' />
+        <IpAddress>34.74.73.20</IpAddress>
+        <IpProvider>AWS</IpProvider>
+      </Ip>
+      <Ip>
+        <IpCountry code='MY' />
+        <IpAddress>34.74.73.21</IpAddress>
+        <IpProvider>GCP</IpProvider>
+      </Ip>
+      <Ip>
+        <IpCountry code='US' />
+        <IpAddress>34.74.73.22</IpAddress>
+        <IpProvider>AWS</IpProvider>
+      </Ip>
+      <Ip>
+        <IpCountry code='MY' />
+        <IpAddress>34.74.73.23</IpAddress>
+        <IpProvider>GCP</IpProvider>
+      </Ip>
+      <Ip>
+        <IpCountry code='DE' />
+        <IpAddress>77.88.8.8</IpAddress>
+      </Ip>
+      <Ip>
+        <IpCountry code='NL' />
+        <IpAddress>20.33.0.0</IpAddress>
+      </Ip>
+      <Ip>
+        <IpCountry code='JP' />
+        <IpAddress>192.168.1.1</IpAddress>
+      </Ip>
+    </IpList>
+  </div>
+);
+
+/**
+ * Three vertical lists, each showing its first address only and holding the rest behind a
+ * `+N addresses` link — the link indents to the address when the row opens with a flag.
+ */
+export const VerticalMultiple: StoryFn = () => (
+  <VStack gap={12}>
+    <IpList>
+      <Ip>
+        <IpCountry code='US' />
+        <IpAddress>8.8.8.8</IpAddress>
+      </Ip>
+      <Ip>
+        <IpCountry code='AU' />
+        <IpAddress>1.1.1.1</IpAddress>
+      </Ip>
+      <Ip>
+        <IpCountry code='DE' />
+        <IpAddress>77.88.8.8</IpAddress>
+      </Ip>
+    </IpList>
+    <IpList>
+      <Ip data-testid='ip'>
+        <IpCountry code='NL' />
+        <IpAddress>52.94.76.0</IpAddress>
+      </Ip>
+      <Ip data-testid='ip'>
+        <IpCountry code='NL' />
+        <IpAddress>20.33.0.0</IpAddress>
+      </Ip>
+      <Ip data-testid='ip'>
+        <IpCountry code='AZ' />
+        <IpAddress>35.190.0.0</IpAddress>
+        <IpProvider>GCP</IpProvider>
+      </Ip>
+      <Ip data-testid='ip'>
+        <IpCountry code='US' />
+        <IpAddress>169.55.0.0</IpAddress>
+        <IpProvider>IBM Cloud</IpProvider>
+      </Ip>
+      <Ip data-testid='ip'>
+        <IpAddress>88.198.0.0</IpAddress>
+        <IpPort>:8080</IpPort>
+      </Ip>
+    </IpList>
+    <IpList>
+      <Ip>
+        <IpAddress>10.0.0.1</IpAddress>
+        <IpPort>:8080</IpPort>
+        <IpProvider>Tor</IpProvider>
+      </Ip>
+      <Ip>
+        <IpAddress>10.0.0.2</IpAddress>
+        <IpPort>:443</IpPort>
+        <IpProvider>VPN</IpProvider>
+      </Ip>
+    </IpList>
+  </VStack>
+);
+```

package/dist/project/components/Ip/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/Ip/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 o,a,c=Object.create,i=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,u=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty,f=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of d(t))h.call(e,l)||l===r||i(e,l,{get:()=>t[l],enumerable:!(n=s(t,l))||n.enumerable});return e},m={},p={$dispatcherGuard:()=>M,$makeReadOnly:()=>k,$reset:()=>O,$structuralCheck:()=>A,c:()=>v,clearRenderCounterRegistry:()=>I,renderCounterRegistry:()=>D,useRenderCounter:()=>x};for(var y in p)i(m,y,{get:p[y],enumerable:!0});e.exports=f(i({},"__esModule",{value:!0}),m);var _=(l=null!=(n=r("C"))?c(u(n)):{},f(n&&n.__esModule?l:i(l,"default",{value:n,enumerable:!0}),n)),{useRef:b,useEffect:S,isValidElement:w}=_,g=null!=(o=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:_.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,E=Symbol.for("react.memo_cache_sentinel"),v="function"==typeof(null==(a=_.__COMPILER_RUNTIME)?void 0:a.c)?_.__COMPILER_RUNTIME.c:function(e){return _.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=E;return t[E]=!0,t},[])},R={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{R[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var N=null;function $(e){return g.ReactCurrentDispatcher.current=e,g.ReactCurrentDispatcher.current}R.useMemoCache=e=>{if(null!=N)return N.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function M(e){let t=g.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&(N=t),t===R)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");$(R)}else if(1===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===C.length&&(N=null),$(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");$(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function O(e){for(let t=0;t<e.length;t++)e[t]=E}function k(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function I(){for(let e of D.values())e.forEach(e=>{e.count=0})}function x(e){let t=b(null);null!=t.current&&(t.current.count+=1),S(()=>{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 P=new Set;function A(e,t,r,n,l,o){function a(e,t,a,c){let i=`${n}:${o} [${l}] ${r}${a} changed from ${e} to ${t} at depth ${c}`;P.has(i)||(P.add(i),console.error(i))}!function e(t,r,n,l){if(!(l>2)){if(t!==r)if(typeof t!=typeof r)a(`type ${typeof t}`,`type ${typeof r}`,n,l);else if("object"==typeof t){let o=Array.isArray(t),c=Array.isArray(r);if(null===t&&null!==r)a("null",`type ${typeof r}`,n,l);else if(null===r)a(`type ${typeof t}`,"null",n,l);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)a(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,l);else for(let[o,c]of t)r.has(o)?e(c,r.get(o),`${n}.get(${o})`,l+1):a(`Map instance with key ${o}`,`Map instance without key ${o}`,n,l);else a("Map instance","other value",n,l);else if(r instanceof Map)a("other value","Map instance",n,l);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)a(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,l);else for(let e of r)t.has(e)||a(`Set instance without element ${e}`,`Set instance with element ${e}`,n,l);else a("Set instance","other value",n,l);else if(r instanceof Set)a("other value","Set instance",n,l);else if(o||c)if(o!==c)a(`type ${o?"array":"object"}`,`type ${c?"array":"object"}`,n,l);else if(t.length!==r.length)a(`array with length ${t.length}`,`array with length ${r.length}`,n,l);else for(let o=0;o<t.length;o++)e(t[o],r[o],`${n}[${o}]`,l+1);else if(w(t)||w(r))w(t)!==w(r)?a(`type ${w(t)?"React element":"object"}`,`type ${w(r)?"React element":"object"}`,n,l):t.type!==r.type?a(`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||a(`object without key ${e}`,`object with key ${e}`,n,l);for(let o in t)o in r?e(t[o],r[o],`${n}.${o}`,l+1):a(`object with key ${o}`,`object without key ${o}`,n,l)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&a(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,l):t!==r&&a(t,r,n,l)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,l=new WeakMap;function o(e,t,r){let o=t,a=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!=a.ref&&!o.prototype?.isReactComponent){let t=o,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)),o=l}if("string"==typeof o&&"boolean"==typeof a.inert&&((a={...a}).inert?a.inert="":delete a.inert),"string"==typeof o)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in a&&(a={...a,[t]:a[e]},delete a[e]);return"string"==typeof o&&null!=a.ref&&(o=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 o=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 o.displayName=`CanvasHost(${t})`,r.set(t,o),o}(e,o)),{type:o,props:a}}function a(e){let t=(t,r,n)=>{let l=o(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=o(e,t,r??{}),{children:a,...c}=l.props;return e.createElement(l.type,void 0===n?c:{...c,key:n},...Array.isArray(a)?a:[a])},jsxDEV:t,Fragment:e.Fragment}}function c(e){return{...e,createElement:(t,r,...n)=>{let l=o(e,t,r??{});return e.createElement(l.type,l.props,...n)},cloneElement:(t,r,...n)=>{let l=e.cloneElement(t,r??void 0,...n),a=l.ref,c=o(e,l.type,{...l.props,ref:a});return c.type===l.type&&"string"!=typeof l.type?l:e.createElement(c.type,{...c.props,key:l.key})}}}r.d(t,{MA:()=>a,YJ:()=>c})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:l,Component:o,Fragment:a,Profiler:c,PureComponent:i,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:h,cloneElement:f,createContext:m,createElement:p,createFactory:y,createRef:_,forwardRef:b,isValidElement:S,lazy:w,memo:g,startTransition:E,unstable_act:v,useCallback:R,useContext:N,useDebugValue:$,useDeferredValue:C,useEffect:M,useId:O,useImperativeHandle:k,useInsertionEffect:D,useLayoutEffect:I,useMemo:x,useReducer:P,useRef:A,useState:j,useSyncExternalStore:T,useTransition:z,version:L,use:U}=n;r.d(t,{},{Children:l,Component:o,Fragment:a,Profiler:c,PureComponent:i,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:h,cloneElement:f,createContext:m,createElement:p,createFactory:y,createRef:_,default:n,forwardRef:b,isValidElement:S,lazy:w,memo:g,startTransition:E,unstable_act:v,use:U,useCallback:R,useContext:N,useDebugValue:$,useDeferredValue:C,useEffect:M,useId:O,useImperativeHandle:k,useInsertionEffect:D,useLayoutEffect:I,useMemo:x,useReducer:P,useRef:A,useState:j,useSyncExternalStore:T,useTransition:z,version:L})}},t={};function r(n){var l=t[n];if(void 0!==l)return l.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.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 o=r("vD");let a=window.WallarmDS.VStack,c=window.WallarmDS.Ip,i=window.WallarmDS.IpAddress,s=window.WallarmDS.IpCountry,d=window.WallarmDS.IpList,u=window.WallarmDS.IpPort,h=window.WallarmDS.IpProvider,f={title:"Data Display/Ip",parameters:{layout:"centered",docs:{description:{component:"One IP address and what is known about it — the country it resolves to, the port, the provider owning the range — composed as a row in which the address is the identity and everything else is context. `IpList` collapses a set of them: vertical keeps the first and hides the rest behind a `+N addresses` link, horizontal fits as many as the width allows and puts the remainder in a `+N` badge."}}}};var m=r("C");let p=[{name:"Basic",story:()=>{let r,n,l,a,d,f,m,p,y,_,b=(0,o.c)(10);return b[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("span",{className:"sb-annotation text-right",children:"basic"}),b[0]=r):r=b[0],b[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(c,{children:e(i,{children:"8.8.8.8"})}),l=e("span",{className:"sb-annotation text-right",children:"with country flag"}),b[1]=n,b[2]=l):(n=b[1],l=b[2]),b[3]===Symbol.for("react.memo_cache_sentinel")?(a=t(c,{children:[e(s,{code:"US"}),e(i,{children:"1.1.1.1"})]}),d=e("span",{className:"sb-annotation text-right",children:"with port"}),b[3]=a,b[4]=d):(a=b[3],d=b[4]),b[5]===Symbol.for("react.memo_cache_sentinel")?(f=t(c,{children:[e(s,{code:"DE"}),e(i,{children:"77.88.8.8"}),e(u,{children:":8080"})]}),m=e("span",{className:"sb-annotation text-right",children:"with provider"}),b[5]=f,b[6]=m):(f=b[5],m=b[6]),b[7]===Symbol.for("react.memo_cache_sentinel")?(p=t(c,{children:[e(s,{code:"NL"}),e(i,{children:"20.33.0.0"}),e(h,{children:"Azure"})]}),y=e("span",{className:"sb-annotation text-right",children:"IPv6"}),b[7]=p,b[8]=y):(p=b[7],y=b[8]),b[9]===Symbol.for("react.memo_cache_sentinel")?(_=t("div",{className:"grid grid-cols-[auto_200px] items-center gap-x-12 gap-y-8",children:[r,n,l,a,d,f,m,p,y,t(c,{children:[e(s,{code:"JP"}),e(i,{children:"2001:0db8:85a3:0000:0000:8a2e:0370:7334"}),e(h,{children:"GCP"})]})]}),b[9]=_):_=b[9],_},meta:f},{name:"HorizontalMultiple",story:()=>{let r,n,l,a,u,f,m,p,y,_=(0,o.c)(9);return _[0]===Symbol.for("react.memo_cache_sentinel")?(r={width:600},_[0]=r):r=_[0],_[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(c,{children:[e(s,{code:"ES"}),e(i,{children:"142.198.167.52"}),e(h,{children:"Azure"})]}),_[1]=n):n=_[1],_[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(c,{children:[e(s,{code:"US"}),e(i,{children:"34.74.73.20"}),e(h,{children:"AWS"})]}),_[2]=l):l=_[2],_[3]===Symbol.for("react.memo_cache_sentinel")?(a=t(c,{children:[e(s,{code:"MY"}),e(i,{children:"34.74.73.21"}),e(h,{children:"GCP"})]}),_[3]=a):a=_[3],_[4]===Symbol.for("react.memo_cache_sentinel")?(u=t(c,{children:[e(s,{code:"US"}),e(i,{children:"34.74.73.22"}),e(h,{children:"AWS"})]}),_[4]=u):u=_[4],_[5]===Symbol.for("react.memo_cache_sentinel")?(f=t(c,{children:[e(s,{code:"MY"}),e(i,{children:"34.74.73.23"}),e(h,{children:"GCP"})]}),_[5]=f):f=_[5],_[6]===Symbol.for("react.memo_cache_sentinel")?(m=t(c,{children:[e(s,{code:"DE"}),e(i,{children:"77.88.8.8"})]}),_[6]=m):m=_[6],_[7]===Symbol.for("react.memo_cache_sentinel")?(p=t(c,{children:[e(s,{code:"NL"}),e(i,{children:"20.33.0.0"})]}),_[7]=p):p=_[7],_[8]===Symbol.for("react.memo_cache_sentinel")?(y=e("div",{style:r,children:t(d,{type:"horizontal","data-testid":"horizontal-ips",children:[n,l,a,u,f,m,p,t(c,{children:[e(s,{code:"JP"}),e(i,{children:"192.168.1.1"})]})]})}),_[8]=y):y=_[8],y},meta:f},{name:"VerticalMultiple",story:()=>{let r,n,l,f,m,p,y,_,b,S,w=(0,o.c)(10);return w[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(c,{children:[e(s,{code:"US"}),e(i,{children:"8.8.8.8"})]}),w[0]=r):r=w[0],w[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(c,{children:[e(s,{code:"AU"}),e(i,{children:"1.1.1.1"})]}),w[1]=n):n=w[1],w[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(d,{children:[r,n,t(c,{children:[e(s,{code:"DE"}),e(i,{children:"77.88.8.8"})]})]}),w[2]=l):l=w[2],w[3]===Symbol.for("react.memo_cache_sentinel")?(f=t(c,{"data-testid":"ip",children:[e(s,{code:"NL"}),e(i,{children:"52.94.76.0"})]}),w[3]=f):f=w[3],w[4]===Symbol.for("react.memo_cache_sentinel")?(m=t(c,{"data-testid":"ip",children:[e(s,{code:"NL"}),e(i,{children:"20.33.0.0"})]}),w[4]=m):m=w[4],w[5]===Symbol.for("react.memo_cache_sentinel")?(p=t(c,{"data-testid":"ip",children:[e(s,{code:"AZ"}),e(i,{children:"35.190.0.0"}),e(h,{children:"GCP"})]}),w[5]=p):p=w[5],w[6]===Symbol.for("react.memo_cache_sentinel")?(y=t(c,{"data-testid":"ip",children:[e(s,{code:"US"}),e(i,{children:"169.55.0.0"}),e(h,{children:"IBM Cloud"})]}),w[6]=y):y=w[6],w[7]===Symbol.for("react.memo_cache_sentinel")?(_=t(d,{children:[f,m,p,y,t(c,{"data-testid":"ip",children:[e(i,{children:"88.198.0.0"}),e(u,{children:":8080"})]})]}),w[7]=_):_=w[7],w[8]===Symbol.for("react.memo_cache_sentinel")?(b=t(c,{children:[e(i,{children:"10.0.0.1"}),e(u,{children:":8080"}),e(h,{children:"Tor"})]}),w[8]=b):b=w[8],w[9]===Symbol.for("react.memo_cache_sentinel")?(S=t(a,{gap:12,children:[l,_,t(d,{children:[b,t(c,{children:[e(i,{children:"10.0.0.2"}),e(u,{children:":443"}),e(h,{children:"VPN"})]})]})]}),w[9]=S):S=w[9],S},meta:f}];function y({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,o=()=>m.default.createElement(l,n),a={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,a)}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,p.map((e,t)=>m.default.createElement(y,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,126 @@
+Shows a keyboard shortcut as a `<kbd>` cap. It is display-only — the DS binds nothing, so the `keydown` handler stays yours — and `Code` is the one to reach for when what you are showing is a value rather than a key. One cap holds one key and `KbdGroup` sets out a combination; render the modifier symbols (⌘, ⇧, ⌥, ↵) rather than the words, so the same shortcut reads the same everywhere.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `size` | `"xsmall" \| "small" \| "medium"` | no | `small` |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.KbdGroup` — `KbdGroupProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+A single cap at the default size. The look is fixed — `size` is the way in, `className` is not.
+
+Source: Kbd/Kbd.stories.tsx#Basic
+
+### Group
+
+`KbdGroup` lays a combination out one cap per key: modifiers on their own above, and a two-key chord below where the `+` is plain text between the caps.
+
+Source: Kbd/Kbd.stories.tsx#Group
+
+### Sizes
+
+`small` beside `medium`. Match the cap to the density of the text around it rather than to what looks best on its own.
+
+Source: Kbd/Kbd.stories.tsx#Sizes
+
+### WithTooltip
+
+Inside a `Tooltip` the cap restyles itself for the inverted surface, so a shortcut hint needs nothing special from you.
+
+Source: Kbd/Kbd.stories.tsx#WithTooltip
+
+## Story sources
+
+### Kbd/Kbd.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Info } from '../../icons';
+import { Button } from '../Button';
+import { HStack, VStack } from '../Stack';
+import { Text } from '../Text';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../Tooltip';
+import { Kbd } from './Kbd';
+import { KbdGroup } from './KbdGroup';
+
+const DESCRIPTION = [
+  'Shows a keyboard shortcut as a `<kbd>` cap. It is display-only — the DS binds nothing, so the `keydown` handler stays yours — and `Code` is the one to reach for when what you are showing is a value rather than a key.',
+  'One cap holds one key and `KbdGroup` sets out a combination; render the modifier symbols (⌘, ⇧, ⌥, ↵) rather than the words, so the same shortcut reads the same everywhere.',
+].join(' ');
+
+const meta = {
+  title: 'Primitives/Kbd',
+  component: Kbd,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta<typeof Kbd>;
+
+export default meta;
+
+/** A single cap at the default size. The look is fixed — `size` is the way in, `className` is not. */
+export const Basic: StoryFn<typeof meta> = () => <Kbd>⌘</Kbd>;
+
+/** `KbdGroup` lays a combination out one cap per key: modifiers on their own above, and a two-key chord below where the `+` is plain text between the caps. */
+export const Group: StoryFn<typeof meta> = () => (
+  <VStack>
+    <KbdGroup>
+      <Kbd>⌘</Kbd>
+      <Kbd>⇧</Kbd>
+      <Kbd>⌥</Kbd>
+      <Kbd>⌃</Kbd>
+    </KbdGroup>
+
+    <KbdGroup>
+      <Kbd>Ctrl</Kbd>
+      <Text>+</Text>
+      <Kbd>B</Kbd>
+    </KbdGroup>
+  </VStack>
+);
+
+/** `small` beside `medium`. Match the cap to the density of the text around it rather than to what looks best on its own. */
+export const Sizes: StoryFn<typeof meta> = () => (
+  <HStack>
+    <Kbd size='small'>⌘</Kbd>
+    <Kbd size='medium'>⌘</Kbd>
+  </HStack>
+);
+
+/** Inside a `Tooltip` the cap restyles itself for the inverted surface, so a shortcut hint needs nothing special from you. */
+export const WithTooltip: StoryFn<typeof meta> = () => (
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button variant='outline' color='neutral'>
+        <Info />
+      </Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      Add instance <Kbd>⌘</Kbd>
+    </TooltipContent>
+  </Tooltip>
+);
+```

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Primitives" 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>