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

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

@@ -0,0 +1,145 @@
+A spinner for a short, in-context wait you cannot measure — one thing at a time, placed where the waiting is happening. Reach for `Skeleton` when a page, list or table is loading a layout you already know, and for `Progress` when you can measure the wait or it runs past about ten seconds, where a spinner starts to read as frozen; a `Button` carries its own loading state, so never put one beside a button. It ships no label and no live region of its own, so the announcement has to come from a `role="status"` element around it.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `type` | `LoaderType \| undefined` | no | `circle` |  |
+| `background` | `boolean \| undefined` | no | `true` |  |
+| `color` | `"primary" \| "primary-alt" \| "primary-alt-fixed" \| "brand" \| "danger"` | no | — |  |
+| `size` | `"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl"` | no | `xl` |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Stories
+
+### Basic
+
+The default: a `circle` at `xl`, and always indeterminate — there is no determinate spinner, because that is `Progress`.
+
+Source: Loader/Loader.stories.tsx#Basic
+
+### Types
+
+`circle` beside `sonner`, the radial fade. Pick one for a surface and stay with it rather than mixing both in a view.
+
+Source: Loader/Loader.stories.tsx#Types
+
+### Sizes
+
+`sm` to `3xl`, 12px to 48px. The small end is for inline waits inside a field or a row; `xl` and up are for a spinner centred in a panel.
+
+Source: Loader/Loader.stories.tsx#Sizes
+
+### Colors
+
+The icon colours, with `primary-alt` and `primary-alt-fixed` for dark surfaces. With no `color` set the spinner simply takes the current text colour, which is usually what you want.
+
+Source: Loader/Loader.stories.tsx#Colors
+
+### CircleBackground
+
+`background={false}` drops the faint track ring behind the circle — worth it on a surface where the ring reads as a border. It applies to `circle` only.
+
+Source: Loader/Loader.stories.tsx#CircleBackground
+
+## Story sources
+
+### Loader/Loader.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { HStack, VStack } from '../Stack';
+import { Loader } from './Loader';
+
+const DESCRIPTION = [
+  'A spinner for a short, in-context wait you cannot measure — one thing at a time, placed where the waiting is happening.',
+  'Reach for `Skeleton` when a page, list or table is loading a layout you already know, and for `Progress` when you can measure the wait or it runs past about ten seconds, where a spinner starts to read as frozen; a `Button` carries its own loading state, so never put one beside a button.',
+  'It ships no label and no live region of its own, so the announcement has to come from a `role="status"` element around it.',
+].join(' ');
+
+const meta = {
+  title: 'Loading/Loader',
+  component: Loader,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta<typeof Loader>;
+
+export default meta;
+
+/** The default: a `circle` at `xl`, and always indeterminate — there is no determinate spinner, because that is `Progress`. */
+export const Basic: StoryFn<typeof meta> = () => <Loader />;
+
+/** `circle` beside `sonner`, the radial fade. Pick one for a surface and stay with it rather than mixing both in a view. */
+export const Types: StoryFn<typeof meta> = () => (
+  <HStack>
+    <Loader type='circle' />
+    <Loader type='sonner' />
+  </HStack>
+);
+
+/** `sm` to `3xl`, 12px to 48px. The small end is for inline waits inside a field or a row; `xl` and up are for a spinner centred in a panel. */
+export const Sizes: StoryFn<typeof meta> = () => (
+  <VStack>
+    <HStack>
+      <Loader size='sm' />
+      <Loader size='md' />
+      <Loader size='lg' />
+      <Loader size='xl' />
+      <Loader size='2xl' />
+      <Loader size='3xl' />
+    </HStack>
+
+    <HStack>
+      <Loader type='sonner' size='sm' />
+      <Loader type='sonner' size='md' />
+      <Loader type='sonner' size='lg' />
+      <Loader type='sonner' size='xl' />
+      <Loader type='sonner' size='2xl' />
+      <Loader type='sonner' size='3xl' />
+    </HStack>
+  </VStack>
+);
+
+/** The icon colours, with `primary-alt` and `primary-alt-fixed` for dark surfaces. With no `color` set the spinner simply takes the current text colour, which is usually what you want. */
+export const Colors: StoryFn<typeof meta> = () => (
+  <VStack>
+    <HStack>
+      <Loader color='primary' />
+      <Loader color='brand' />
+      <Loader color='danger' />
+      <div className='flex gap-4 bg-slate-950'>
+        <Loader color='primary-alt' />
+
+        <Loader color='primary-alt-fixed' />
+      </div>
+    </HStack>
+
+    <HStack>
+      <Loader type='sonner' color='primary' />
+      <Loader type='sonner' color='brand' />
+      <Loader type='sonner' color='danger' />
+      <div className='flex gap-4 bg-slate-950'>
+        <Loader type='sonner' color='primary-alt' />
+
+        <Loader type='sonner' color='primary-alt-fixed' />
+      </div>
+    </HStack>
+  </VStack>
+);
+
+/** `background={false}` drops the faint track ring behind the circle — worth it on a surface where the ring reads as a border. It applies to `circle` only. */
+export const CircleBackground: StoryFn<typeof meta> = () => (
+  <HStack>
+    <Loader />
+    <Loader background={false} />
+  </HStack>
+);
+```

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Loading" 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/Loader/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,f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,m=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let o of u(t))p.call(e,o)||o===r||c(e,o,{get:()=>t[o],enumerable:!(n=s(t,o))||n.enumerable});return e},y={},d={$dispatcherGuard:()=>k,$makeReadOnly:()=>M,$reset:()=>O,$structuralCheck:()=>T,c:()=>S,clearRenderCounterRegistry:()=>z,renderCounterRegistry:()=>x,useRenderCounter:()=>j};for(var h in d)c(y,h,{get:d[h],enumerable:!0});e.exports=m(c({},"__esModule",{value:!0}),y);var g=(o=null!=(n=r("C"))?i(f(n)):{},m(n&&n.__esModule?o:c(o,"default",{value:n,enumerable:!0}),n)),{useRef:_,useEffect:b,isValidElement:w}=g,R=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,E=Symbol.for("react.memo_cache_sentinel"),S="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]=E;return t[E]=!0,t},[])},v={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{v[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 R.ReactCurrentDispatcher.current=e,R.ReactCurrentDispatcher.current}v.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function k(e){let t=R.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&($=t),t===v)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(v)}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 O(e){for(let t=0;t<e.length;t++)e[t]=E}function M(){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 j(e){let t=_(null);null!=t.current&&(t.current.count+=1),b(()=>{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 D=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}`;D.has(c)||(D.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:f,act:p,cloneElement:m,createContext:y,createElement:d,createFactory:h,createRef:g,forwardRef:_,isValidElement:b,lazy:w,memo:R,startTransition:E,unstable_act:S,useCallback:v,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:O,useImperativeHandle:M,useInsertionEffect:x,useLayoutEffect:z,useMemo:j,useReducer:D,useRef:T,useState:I,useSyncExternalStore:A,useTransition:P,version:L,use:U}=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:f,act:p,cloneElement:m,createContext:y,createElement:d,createFactory:h,createRef:g,default:n,forwardRef:_,isValidElement:b,lazy:w,memo:R,startTransition:E,unstable_act:S,use:U,useCallback:v,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:O,useImperativeHandle:M,useInsertionEffect:x,useLayoutEffect:z,useMemo:j,useReducer:D,useRef:T,useState:I,useSyncExternalStore:A,useTransition:P,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");let l=window.WallarmDS.HStack,i=window.WallarmDS.VStack,c=window.WallarmDS.Loader,s={title:"Loading/Loader",component:c,parameters:{layout:"centered",docs:{description:{component:'A spinner for a short, in-context wait you cannot measure — one thing at a time, placed where the waiting is happening. Reach for `Skeleton` when a page, list or table is loading a layout you already know, and for `Progress` when you can measure the wait or it runs past about ten seconds, where a spinner starts to read as frozen; a `Button` carries its own loading state, so never put one beside a button. It ships no label and no live region of its own, so the announcement has to come from a `role="status"` element around it.'}}}};var u=r("C");let f=[{name:"Basic",story:()=>{let t,r=(0,a.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(c,{}),r[0]=t):t=r[0],t},meta:s},{name:"Types",story:()=>{let r,n=(0,a.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(l,{children:[e(c,{type:"circle"}),e(c,{type:"sonner"})]}),n[0]=r):r=n[0],r},meta:s},{name:"Sizes",story:()=>{let r,n,o=(0,a.c)(2);return o[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(l,{children:[e(c,{size:"sm"}),e(c,{size:"md"}),e(c,{size:"lg"}),e(c,{size:"xl"}),e(c,{size:"2xl"}),e(c,{size:"3xl"})]}),o[0]=r):r=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(i,{children:[r,t(l,{children:[e(c,{type:"sonner",size:"sm"}),e(c,{type:"sonner",size:"md"}),e(c,{type:"sonner",size:"lg"}),e(c,{type:"sonner",size:"xl"}),e(c,{type:"sonner",size:"2xl"}),e(c,{type:"sonner",size:"3xl"})]})]}),o[1]=n):n=o[1],n},meta:s},{name:"Colors",story:()=>{let r,n,o,s,u,f,p,m,y=(0,a.c)(8);return y[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(c,{color:"primary"}),n=e(c,{color:"brand"}),o=e(c,{color:"danger"}),y[0]=r,y[1]=n,y[2]=o):(r=y[0],n=y[1],o=y[2]),y[3]===Symbol.for("react.memo_cache_sentinel")?(s=t(l,{children:[r,n,o,t("div",{className:"flex gap-4 bg-slate-950",children:[e(c,{color:"primary-alt"}),e(c,{color:"primary-alt-fixed"})]})]}),y[3]=s):s=y[3],y[4]===Symbol.for("react.memo_cache_sentinel")?(u=e(c,{type:"sonner",color:"primary"}),f=e(c,{type:"sonner",color:"brand"}),p=e(c,{type:"sonner",color:"danger"}),y[4]=u,y[5]=f,y[6]=p):(u=y[4],f=y[5],p=y[6]),y[7]===Symbol.for("react.memo_cache_sentinel")?(m=t(i,{children:[s,t(l,{children:[u,f,p,t("div",{className:"flex gap-4 bg-slate-950",children:[e(c,{type:"sonner",color:"primary-alt"}),e(c,{type:"sonner",color:"primary-alt-fixed"})]})]})]}),y[7]=m):m=y[7],m},meta:s},{name:"CircleBackground",story:()=>{let r,n=(0,a.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(l,{children:[e(c,{}),e(c,{background:!1})]}),n[0]=r):r=n[0],r},meta:s}];function p({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=()=>u.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 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(a))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(u.default.createElement(window.WallarmDS.Root,null,f.map((e,t)=>u.default.createElement(p,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,183 @@
+The Wallarm logo in its three forms — `icon`, `wordmark` and `full` — sized by height, with the width following. `color` is a decision about the surface rather than a style choice: `default` on light, `white` on a dark surface where the mark should keep its brand colour, and `full-white` only where the whole lockup has to be a single colour. It renders a bare `svg` with no accessible name, so pass an `aria-label` where the logo is the only thing naming a link, and leave it unlabelled where a heading beside it already does.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `type` | `LogoType \| undefined` | no | `full` |  |
+| `color` | `LogoStyle \| undefined` | no | `default` |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `name` | `string \| undefined` | no | — |  |
+| `height` | `string \| number \| undefined` | no | — |  |
+| `max` | `string \| number \| undefined` | no | — |  |
+| `min` | `string \| number \| undefined` | no | — |  |
+| `target` | `string \| undefined` | no | — |  |
+| `width` | `string \| number \| undefined` | no | — |  |
+| `href` | `string \| undefined` | no | — |  |
+| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"` | no | `lg` |  |
+
+## Stories
+
+### Basic
+
+Every knob live. The defaults are `full` at `lg`, which is 20px tall.
+
+Source: Logo/Logo.stories.tsx#Basic
+
+### Types
+
+The three forms at one height: the icon alone where space is tight, the wordmark where the mark already appears nearby, and the full lockup everywhere else.
+
+Source: Logo/Logo.stories.tsx#Types
+
+### Styles
+
+Each colour style on the surface it is for. `white` keeps the icon’s brand colour and turns only the wordmark white; `full-white` gives up the colour entirely.
+
+Source: Logo/Logo.stories.tsx#Styles
+
+### Sizes
+
+`xs` to `2xl`, 10px to 32px of height. The three forms sit side by side because the same height buys three very different footprints — 34, 75 and 118 units of viewBox width.
+
+Source: Logo/Logo.stories.tsx#Sizes
+
+## Story sources
+
+### Logo/Logo.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { HStack, VStack } from '../Stack';
+import { Logo, type LogoProps } from './Logo';
+
+const DESCRIPTION = [
+  'The Wallarm logo in its three forms — `icon`, `wordmark` and `full` — sized by height, with the width following.',
+  '`color` is a decision about the surface rather than a style choice: `default` on light, `white` on a dark surface where the mark should keep its brand colour, and `full-white` only where the whole lockup has to be a single colour.',
+  'It renders a bare `svg` with no accessible name, so pass an `aria-label` where the logo is the only thing naming a link, and leave it unlabelled where a heading beside it already does.',
+].join(' ');
+
+const meta = {
+  title: 'Brand/Logo',
+  component: Logo,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['icon', 'wordmark', 'full'],
+      description: 'Which logo form to render.',
+    },
+    color: {
+      control: 'select',
+      options: ['default', 'white', 'full-white'],
+      description: 'Color style of the logo.',
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+      description: 'Height of the logo (width scales proportionally).',
+    },
+  },
+} satisfies Meta<typeof Logo>;
+
+export default meta;
+
+/** Every knob live. The defaults are `full` at `lg`, which is 20px tall. */
+export const Basic: StoryFn<LogoProps> = args => <Logo {...args} />;
+
+Basic.args = {
+  type: 'full',
+  color: 'default',
+  size: 'lg',
+};
+
+/** The three forms at one height: the icon alone where space is tight, the wordmark where the mark already appears nearby, and the full lockup everywhere else. */
+export const Types: StoryFn<LogoProps> = args => (
+  <HStack gap={96} justify='between' fullWidth>
+    <Logo {...args} type='icon' />
+    <Logo {...args} type='wordmark' />
+    <Logo {...args} type='full' />
+  </HStack>
+);
+
+Types.args = {
+  size: 'xl',
+  color: 'default',
+};
+
+/** Each colour style on the surface it is for. `white` keeps the icon’s brand colour and turns only the wordmark white; `full-white` gives up the colour entirely. */
+export const Styles: StoryFn<LogoProps> = args => (
+  <VStack gap={16}>
+    <div className='rounded-8 px-16 py-8'>
+      <HStack gap={96} justify='between' fullWidth>
+        <Logo {...args} type='icon' color='default' />
+        <Logo {...args} type='wordmark' color='default' />
+        <Logo {...args} type='full' color='default' />
+      </HStack>
+    </div>
+    <div className='rounded-8 bg-slate-900 px-16 py-8'>
+      <HStack gap={96} justify='between' fullWidth>
+        <Logo {...args} type='icon' color='white' />
+        <Logo {...args} type='wordmark' color='white' />
+        <Logo {...args} type='full' color='white' />
+      </HStack>
+    </div>
+    <div className='rounded-8 bg-slate-900 px-16 py-8'>
+      <HStack gap={96} justify='between' fullWidth>
+        <Logo {...args} type='icon' color='full-white' />
+        <Logo {...args} type='wordmark' color='full-white' />
+        <Logo {...args} type='full' color='full-white' />
+      </HStack>
+    </div>
+  </VStack>
+);
+
+Styles.args = {
+  size: 'xl',
+};
+
+/** `xs` to `2xl`, 10px to 32px of height. The three forms sit side by side because the same height buys three very different footprints — 34, 75 and 118 units of viewBox width. */
+export const Sizes: StoryFn<LogoProps> = args => (
+  <HStack gap={96} justify='between' fullWidth>
+    <VStack gap={16} align='start'>
+      <Logo {...args} type='icon' size='xs' />
+      <Logo {...args} type='icon' size='sm' />
+      <Logo {...args} type='icon' size='md' />
+      <Logo {...args} type='icon' size='lg' />
+      <Logo {...args} type='icon' size='xl' />
+      <Logo {...args} type='icon' size='2xl' />
+    </VStack>
+    <VStack gap={16} align='start'>
+      <Logo {...args} type='wordmark' size='xs' />
+      <Logo {...args} type='wordmark' size='sm' />
+      <Logo {...args} type='wordmark' size='md' />
+      <Logo {...args} type='wordmark' size='lg' />
+      <Logo {...args} type='wordmark' size='xl' />
+      <Logo {...args} type='wordmark' size='2xl' />
+    </VStack>
+    <VStack gap={16} align='start'>
+      <Logo {...args} type='full' size='xs' />
+      <Logo {...args} type='full' size='sm' />
+      <Logo {...args} type='full' size='md' />
+      <Logo {...args} type='full' size='lg' />
+      <Logo {...args} type='full' size='xl' />
+      <Logo {...args} type='full' size='2xl' />
+    </VStack>
+  </HStack>
+);
+
+Sizes.args = {
+  color: 'default',
+};
+```

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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let l,n;/**
+ * 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,i=Object.create,s=Object.defineProperty,c=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,d=(e,t,r,l)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let n of u(t))f.call(e,n)||n===r||s(e,n,{get:()=>t[n],enumerable:!(l=c(t,n))||l.enumerable});return e},y={},m={$dispatcherGuard:()=>C,$makeReadOnly:()=>z,$reset:()=>x,$structuralCheck:()=>T,c:()=>$,clearRenderCounterRegistry:()=>M,renderCounterRegistry:()=>O,useRenderCounter:()=>j};for(var h in m)s(y,h,{get:m[h],enumerable:!0});e.exports=d(s({},"__esModule",{value:!0}),y);var g=(n=null!=(l=r("C"))?i(p(l)):{},d(l&&l.__esModule?n:s(n,"default",{value:l,enumerable:!0}),l)),{useRef:w,useEffect:b,isValidElement:R}=g,E=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"),$="function"==typeof(null==(a=g.__COMPILER_RUNTIME)?void 0:a.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 k=null;function S(e){return E.ReactCurrentDispatcher.current=e,E.ReactCurrentDispatcher.current}_.useMemoCache=e=>{if(null!=k)return k.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function C(e){let t=E.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&(k=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=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===N.length&&(k=null),S(e)}else if(2===e)N.push(t),S(k);else if(3===e){let e=N.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 x(e){for(let t=0;t<e.length;t++)e[t]=v}function z(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var O=new Map;function M(){for(let e of O.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,l={count:0};null==(r=O.get(e))&&(r=new Set,O.set(e,r)),r.add(l),t.current=l}return()=>{var r;let l;null!==t.current&&(r=t.current,null!=(l=O.get(e))&&l.delete(r))}})}var D=new Set;function T(e,t,r,l,n,o){function a(e,t,a,i){let s=`${l}:${o} [${n}] ${r}${a} changed from ${e} to ${t} at depth ${i}`;D.has(s)||(D.add(s),console.error(s))}!function e(t,r,l,n){if(!(n>2)){if(t!==r)if(typeof t!=typeof r)a(`type ${typeof t}`,`type ${typeof r}`,l,n);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)a("null",`type ${typeof r}`,l,n);else if(null===r)a(`type ${typeof t}`,"null",l,n);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}`,l,n);else for(let[o,i]of t)r.has(o)?e(i,r.get(o),`${l}.get(${o})`,n+1):a(`Map instance with key ${o}`,`Map instance without key ${o}`,l,n);else a("Map instance","other value",l,n);else if(r instanceof Map)a("other value","Map instance",l,n);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}`,l,n);else for(let e of r)t.has(e)||a(`Set instance without element ${e}`,`Set instance with element ${e}`,l,n);else a("Set instance","other value",l,n);else if(r instanceof Set)a("other value","Set instance",l,n);else if(o||i)if(o!==i)a(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,l,n);else if(t.length!==r.length)a(`array with length ${t.length}`,`array with length ${r.length}`,l,n);else for(let o=0;o<t.length;o++)e(t[o],r[o],`${l}[${o}]`,n+1);else if(R(t)||R(r))R(t)!==R(r)?a(`type ${R(t)?"React element":"object"}`,`type ${R(r)?"React element":"object"}`,l,n):t.type!==r.type?a(`React element of type ${t.type}`,`React element of type ${r.type}`,l,n):e(t.props,r.props,`[props of ${l}]`,n+1);else{for(let e in r)e in t||a(`object without key ${e}`,`object with key ${e}`,l,n);for(let o in t)o in r?e(t[o],r[o],`${l}.${o}`,n+1):a(`object with key ${o}`,`object without key ${o}`,l,n)}}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"}`,l,n):t!==r&&a(t,r,l,n)}}}(e,t,"",0)}},p(e,t,r){let l=new WeakMap,n=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=l.get(e);r||(r=new WeakMap,l.set(e,r));let n=r.get(t);n||((n=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,n)),o=n}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=n.get(e);r||(r=new Map,n.set(e,r));let l=r.get(t);if(l)return l;let o=e.forwardRef((r,l)=>{let n=e.useRef(null);if(!n.current||n.current.original!==l){let e;n.current={original:l,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof l){let r=l(t);e="function"==typeof r?r:void 0}else l&&(l.current=t)}}}return e.createElement(t,{...r,ref:n.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,l)=>{let n=o(e,t,r??{});return e.createElement(n.type,void 0===l?n.props:{...n.props,key:l})};return{jsx:t,jsxs:(t,r,l)=>{let n=o(e,t,r??{}),{children:a,...i}=n.props;return e.createElement(n.type,void 0===l?i:{...i,key:l},...Array.isArray(a)?a:[a])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...l)=>{let n=o(e,t,r??{});return e.createElement(n.type,n.props,...l)},cloneElement:(t,r,...l)=>{let n=e.cloneElement(t,r??void 0,...l),a=n.ref,i=o(e,n.type,{...n.props,ref:a});return i.type===n.type&&"string"!=typeof n.type?n:e.createElement(i.type,{...i.props,key:n.key})}}}r.d(t,{MA:()=>a,YJ:()=>i})},C(e,t,r){r.r(t);let l=(0,r("p").YJ)(window.React),{Children:n,Component:o,Fragment:a,Profiler:i,PureComponent:s,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:f,cloneElement:d,createContext:y,createElement:m,createFactory:h,createRef:g,forwardRef:w,isValidElement:b,lazy:R,memo:E,startTransition:v,unstable_act:$,useCallback:_,useContext:k,useDebugValue:S,useDeferredValue:N,useEffect:C,useId:x,useImperativeHandle:z,useInsertionEffect:O,useLayoutEffect:M,useMemo:j,useReducer:D,useRef:T,useState:I,useSyncExternalStore:W,useTransition:A,version:P,use:L}=l;r.d(t,{},{Children:n,Component:o,Fragment:a,Profiler:i,PureComponent:s,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:f,cloneElement:d,createContext:y,createElement:m,createFactory:h,createRef:g,default:l,forwardRef:w,isValidElement:b,lazy:R,memo:E,startTransition:v,unstable_act:$,use:L,useCallback:_,useContext:k,useDebugValue:S,useDeferredValue:N,useEffect:C,useId:x,useImperativeHandle:z,useInsertionEffect:O,useLayoutEffect:M,useMemo:j,useReducer:D,useRef:T,useState:I,useSyncExternalStore:W,useTransition:A,version:P})}},t={};function r(l){var n=t[l];if(void 0!==n)return n.exports;var o=t[l]={exports:{}};return e[l](o,o.exports,r),o.exports}r.d=(e,t,l)=>{var n=(t,l)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,[l]:t[n]})};n(t,"get"),n(l,"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:l,Fragment:n}=(0,r("p").MA)(window.React);var o=r("vD");let a=window.WallarmDS.HStack,i=window.WallarmDS.VStack,s=window.WallarmDS.Logo,c={title:"Brand/Logo",component:s,parameters:{layout:"centered",docs:{description:{component:"The Wallarm logo in its three forms — `icon`, `wordmark` and `full` — sized by height, with the width following. `color` is a decision about the surface rather than a style choice: `default` on light, `white` on a dark surface where the mark should keep its brand colour, and `full-white` only where the whole lockup has to be a single colour. It renders a bare `svg` with no accessible name, so pass an `aria-label` where the logo is the only thing naming a link, and leave it unlabelled where a heading beside it already does."}}},argTypes:{type:{control:"select",options:["icon","wordmark","full"],description:"Which logo form to render."},color:{control:"select",options:["default","white","full-white"],description:"Color style of the logo."},size:{control:"select",options:["xs","sm","md","lg","xl","2xl"],description:"Height of the logo (width scales proportionally)."}}},u=t=>{let r,l=(0,o.c)(2);return l[0]!==t?(r=e(s,{...t}),l[0]=t,l[1]=r):r=l[1],r};u.args={type:"full",color:"default",size:"lg"};let p=r=>{let l,n=(0,o.c)(2);return n[0]!==r?(l=t(a,{gap:96,justify:"between",fullWidth:!0,children:[e(s,{...r,type:"icon"}),e(s,{...r,type:"wordmark"}),e(s,{...r,type:"full"})]}),n[0]=r,n[1]=l):l=n[1],l};p.args={size:"xl",color:"default"};let f=r=>{let l,n,c,u,p=(0,o.c)(10);return p[0]!==r?(l=e("div",{className:"rounded-8 px-16 py-8",children:t(a,{gap:96,justify:"between",fullWidth:!0,children:[e(s,{...r,type:"icon",color:"default"}),e(s,{...r,type:"wordmark",color:"default"}),e(s,{...r,type:"full",color:"default"})]})}),p[0]=r,p[1]=l):l=p[1],p[2]!==r?(n=e("div",{className:"rounded-8 bg-slate-900 px-16 py-8",children:t(a,{gap:96,justify:"between",fullWidth:!0,children:[e(s,{...r,type:"icon",color:"white"}),e(s,{...r,type:"wordmark",color:"white"}),e(s,{...r,type:"full",color:"white"})]})}),p[2]=r,p[3]=n):n=p[3],p[4]!==r?(c=e("div",{className:"rounded-8 bg-slate-900 px-16 py-8",children:t(a,{gap:96,justify:"between",fullWidth:!0,children:[e(s,{...r,type:"icon",color:"full-white"}),e(s,{...r,type:"wordmark",color:"full-white"}),e(s,{...r,type:"full",color:"full-white"})]})}),p[4]=r,p[5]=c):c=p[5],p[6]!==l||p[7]!==n||p[8]!==c?(u=t(i,{gap:16,children:[l,n,c]}),p[6]=l,p[7]=n,p[8]=c,p[9]=u):u=p[9],u};f.args={size:"xl"};let d=r=>{let l,n,c,u,p=(0,o.c)(10);return p[0]!==r?(l=t(i,{gap:16,align:"start",children:[e(s,{...r,type:"icon",size:"xs"}),e(s,{...r,type:"icon",size:"sm"}),e(s,{...r,type:"icon",size:"md"}),e(s,{...r,type:"icon",size:"lg"}),e(s,{...r,type:"icon",size:"xl"}),e(s,{...r,type:"icon",size:"2xl"})]}),p[0]=r,p[1]=l):l=p[1],p[2]!==r?(n=t(i,{gap:16,align:"start",children:[e(s,{...r,type:"wordmark",size:"xs"}),e(s,{...r,type:"wordmark",size:"sm"}),e(s,{...r,type:"wordmark",size:"md"}),e(s,{...r,type:"wordmark",size:"lg"}),e(s,{...r,type:"wordmark",size:"xl"}),e(s,{...r,type:"wordmark",size:"2xl"})]}),p[2]=r,p[3]=n):n=p[3],p[4]!==r?(c=t(i,{gap:16,align:"start",children:[e(s,{...r,type:"full",size:"xs"}),e(s,{...r,type:"full",size:"sm"}),e(s,{...r,type:"full",size:"md"}),e(s,{...r,type:"full",size:"lg"}),e(s,{...r,type:"full",size:"xl"}),e(s,{...r,type:"full",size:"2xl"})]}),p[4]=r,p[5]=c):c=p[5],p[6]!==l||p[7]!==n||p[8]!==c?(u=t(a,{gap:96,justify:"between",fullWidth:!0,children:[l,n,c]}),p[6]=l,p[7]=n,p[8]=c,p[9]=u):u=p[9],u};d.args={color:"default"};var y=r("C");let m=[{name:"Basic",story:u,meta:c},{name:"Types",story:p,meta:c},{name:"Styles",story:f,meta:c},{name:"Sizes",story:d,meta:c}];function h({entry:e}){let{story:t,meta:r}=e,l={...r.args,...t.args},n="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,o=()=>y.default.createElement(n,l),a={args:l,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 y.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},y.default.createElement("h2",{className:"text-sm mb-12"},e.name),y.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(y.default.createElement(window.WallarmDS.Root,null,m.map((e,t)=>y.default.createElement(h,{key:t,entry:e})))),t}}})();