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

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

@@ -0,0 +1,317 @@
+Prints a number the way the house number guide says to: abbreviated by default — `12k`, `59.6M` — with the full figure in a tooltip behind a dashed underline. `type` chooses the family: `decimal`, `percent`, which refuses to round to a flat `0%` or `100%` it has not earned, and `byte`, which counts in units of 1000.
+
+## 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 | — |  |
+| `value` | `number \| null \| undefined` | yes | — | Numeric value to display. null/undefined renders em dash + "No data" tooltip. |
+| `type` | `FormatNumberType \| undefined` | no | `decimal` | Formatting category. Default: 'decimal'. - 'decimal': plain number with optional abbreviation - 'percent': percentage with boundary safety - 'byte': decimal byte units: 512 B, 2.3 GB |
+| `notation` | `FormatNumberNotation \| undefined` | no | `compact` | 'compact' abbreviates (12k, 59.6M); 'standard' shows full value. Default: 'compact'. Only applies to type='decimal' and type='byte'. |
+| `unit` | `string \| undefined` | no | — | Unit label for accessible name + tooltip: "requests", "errors". Appended after a space. Only meaningful for type='decimal'. |
+| `decimals` | `number \| undefined` | no | `0` | Decimal places for percent. Default: 0. |
+| `tooltip` | `boolean \| undefined` | no | `true` | Whether to show a tooltip with the full value on abbreviated numbers. When false, abbreviated values display without tooltip or dashed underline. Default: true. |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Stories
+
+### Compact
+
+The raw value beside what the component makes of it, across the tier boundaries —
+999,499 stays `999k` while 999,500 becomes `1M`, because the tier turns over when
+rounding would reach 1000×. Abbreviated values use tabular figures, so a column of
+them stays aligned.
+
+Source: FormatNumber/FormatNumber.stories.tsx#Compact
+
+### Standard
+
+`notation='standard'` prints the grouped figure instead, for the place where the exact
+number is the point and there is room to show it.
+
+Source: FormatNumber/FormatNumber.stories.tsx#Standard
+
+### WithUnit
+
+`unit` follows the value — except on an abbreviated number with its tooltip still on,
+where it moves into the tooltip and the accessible name and leaves the cell.
+
+Source: FormatNumber/FormatNumber.stories.tsx#WithUnit
+
+### Percent
+
+The boundary rules: anything above zero that would round to `0%` prints `<1%`, and
+anything below a hundred that would round to `100%` prints `>99%`, with `decimals`
+moving both thresholds.
+
+Source: FormatNumber/FormatNumber.stories.tsx#Percent
+
+### Bytes
+
+`byte` counts in decimal units — a thousand to the kilobyte, not 1024 — so 12,700,000
+reads `12.7 MB`, and `standard` spells the whole figure out.
+
+Source: FormatNumber/FormatNumber.stories.tsx#Bytes
+
+### NoTooltip
+
+`tooltip={false}` removes the tooltip and the dashed underline with it, for a cell where
+the abbreviation is enough; the full value stays in the accessible name.
+
+Source: FormatNumber/FormatNumber.stories.tsx#NoTooltip
+
+### NegativeValues
+
+Negatives abbreviate on the same tiers, with the sign kept in front of the number.
+
+Source: FormatNumber/FormatNumber.stories.tsx#NegativeValues
+
+### NullValue
+
+`null` and `undefined` render an em dash with 'No data' on hover, so a figure nobody
+recorded never reads as a zero.
+
+Source: FormatNumber/FormatNumber.stories.tsx#NullValue
+
+### SpecialValues
+
+Zero is printed as itself rather than abbreviated, while `NaN` and `Infinity` fall back
+to the em dash — with no tooltip, since there is nothing behind them to show.
+
+Source: FormatNumber/FormatNumber.stories.tsx#SpecialValues
+
+## Story sources
+
+### FormatNumber/FormatNumber.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { FormatNumber } from './FormatNumber';
+
+const DESCRIPTION = [
+  'Prints a number the way the house number guide says to: abbreviated by default — `12k`, `59.6M` — with the full figure in a tooltip behind a dashed underline.',
+  '`type` chooses the family: `decimal`, `percent`, which refuses to round to a flat `0%` or `100%` it has not earned, and `byte`, which counts in units of 1000.',
+].join(' ');
+
+const meta = {
+  title: 'Data Display/FormatNumber',
+  component: FormatNumber,
+  parameters: {
+    layout: 'centered',
+    docs: { description: { component: DESCRIPTION } },
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['decimal', 'percent', 'byte'],
+    },
+    notation: {
+      control: 'radio',
+      options: ['compact', 'standard'],
+    },
+    decimals: {
+      control: 'number',
+    },
+  },
+  args: {
+    value: 12345,
+    type: 'decimal',
+    notation: 'compact',
+  },
+} satisfies Meta<typeof FormatNumber>;
+
+export default meta;
+
+const compactValues = [0, 5, 42, 999, 1_000, 12_042, 59_614, 999_499, 999_500, 1_400_000_000_000];
+
+/**
+ * The raw value beside what the component makes of it, across the tier boundaries —
+ * 999,499 stays `999k` while 999,500 becomes `1M`, because the tier turns over when
+ * rounding would reach 1000×. Abbreviated values use tabular figures, so a column of
+ * them stays aligned.
+ */
+export const Compact: StoryFn<typeof meta> = () => (
+  <div className='grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12'>
+    {compactValues.map(v => (
+      <>
+        <span key={`label-${v}`} className='sb-annotation text-right'>
+          {v.toLocaleString('en-US')}
+        </span>
+        <FormatNumber key={v} value={v} />
+      </>
+    ))}
+  </div>
+);
+
+/**
+ * `notation='standard'` prints the grouped figure instead, for the place where the exact
+ * number is the point and there is room to show it.
+ */
+export const Standard: StoryFn<typeof meta> = () => (
+  <div className='grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12'>
+    {compactValues.map(v => (
+      <>
+        <span key={`label-${v}`} className='sb-annotation text-right'>
+          {v.toLocaleString('en-US')}
+        </span>
+        <FormatNumber key={v} value={v} notation='standard' />
+      </>
+    ))}
+  </div>
+);
+
+/**
+ * `unit` follows the value — except on an abbreviated number with its tooltip still on,
+ * where it moves into the tooltip and the accessible name and leaves the cell.
+ */
+export const WithUnit: StoryFn<typeof meta> = () => (
+  <div className='grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12'>
+    <span className='sb-annotation text-right'>42</span>
+    <FormatNumber value={42} unit='requests' />
+
+    <span className='sb-annotation text-right'>12,042</span>
+    <FormatNumber value={12_042} unit='requests' />
+
+    <span className='sb-annotation text-right'>59,614,283</span>
+    <FormatNumber value={59_614_283} unit='errors' />
+
+    <span className='sb-annotation text-right'>500 (standard)</span>
+    <FormatNumber value={500} unit='requests' notation='standard' />
+  </div>
+);
+
+/**
+ * The boundary rules: anything above zero that would round to `0%` prints `<1%`, and
+ * anything below a hundred that would round to `100%` prints `>99%`, with `decimals`
+ * moving both thresholds.
+ */
+export const Percent: StoryFn<typeof meta> = () => (
+  <div className='grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12'>
+    <span className='sb-annotation text-right'>0%</span>
+    <FormatNumber value={0} type='percent' />
+
+    <span className='sb-annotation text-right'>0.02% (decimals=0)</span>
+    <FormatNumber value={0.02} type='percent' />
+
+    <span className='sb-annotation text-right'>0.02% (decimals=1)</span>
+    <FormatNumber value={0.02} type='percent' decimals={1} />
+
+    <span className='sb-annotation text-right'>25.5%</span>
+    <FormatNumber value={25.5} type='percent' decimals={1} />
+
+    <span className='sb-annotation text-right'>50%</span>
+    <FormatNumber value={50} type='percent' />
+
+    <span className='sb-annotation text-right'>99.97% (decimals=0)</span>
+    <FormatNumber value={99.97} type='percent' />
+
+    <span className='sb-annotation text-right'>99.97% (decimals=1)</span>
+    <FormatNumber value={99.97} type='percent' decimals={1} />
+
+    <span className='sb-annotation text-right'>100%</span>
+    <FormatNumber value={100} type='percent' />
+  </div>
+);
+
+/**
+ * `byte` counts in decimal units — a thousand to the kilobyte, not 1024 — so 12,700,000
+ * reads `12.7 MB`, and `standard` spells the whole figure out.
+ */
+export const Bytes: StoryFn<typeof meta> = () => (
+  <div className='grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12'>
+    <span className='sb-annotation text-right'>512 (compact)</span>
+    <FormatNumber value={512} type='byte' />
+
+    <span className='sb-annotation text-right'>3,400 (compact)</span>
+    <FormatNumber value={3_400} type='byte' />
+
+    <span className='sb-annotation text-right'>12,700,000 (compact)</span>
+    <FormatNumber value={12_700_000} type='byte' />
+
+    <span className='sb-annotation text-right'>2,345,678,901 (compact)</span>
+    <FormatNumber value={2_345_678_901} type='byte' />
+
+    <span className='sb-annotation text-right'>1,100,000,000,000 (compact)</span>
+    <FormatNumber value={1_100_000_000_000} type='byte' />
+
+    <span className='sb-annotation text-right'>12,700,000 (standard)</span>
+    <FormatNumber value={12_700_000} type='byte' notation='standard' />
+  </div>
+);
+
+/**
+ * `tooltip={false}` removes the tooltip and the dashed underline with it, for a cell where
+ * the abbreviation is enough; the full value stays in the accessible name.
+ */
+export const NoTooltip: StoryFn<typeof meta> = () => (
+  <div className='grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12'>
+    <span className='sb-annotation text-right'>12,042 (decimal)</span>
+    <FormatNumber value={12_042} tooltip={false} />
+
+    <span className='sb-annotation text-right'>59,614,283 (decimal)</span>
+    <FormatNumber value={59_614_283} tooltip={false} />
+
+    <span className='sb-annotation text-right'>12,042 with unit</span>
+    <FormatNumber value={12_042} unit='requests' tooltip={false} />
+
+    <span className='sb-annotation text-right'>12,700,000 (byte)</span>
+    <FormatNumber value={12_700_000} type='byte' tooltip={false} />
+  </div>
+);
+
+/**
+ * Negatives abbreviate on the same tiers, with the sign kept in front of the number.
+ */
+export const NegativeValues: StoryFn<typeof meta> = () => (
+  <div className='grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12'>
+    <span className='sb-annotation text-right'>-42</span>
+    <FormatNumber value={-42} />
+
+    <span className='sb-annotation text-right'>-12,042</span>
+    <FormatNumber value={-12_042} />
+
+    <span className='sb-annotation text-right'>-59,614,283</span>
+    <FormatNumber value={-59_614_283} />
+  </div>
+);
+
+/**
+ * `null` and `undefined` render an em dash with 'No data' on hover, so a figure nobody
+ * recorded never reads as a zero.
+ */
+export const NullValue: StoryFn<typeof meta> = () => (
+  <div className='grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12'>
+    <span className='sb-annotation text-right'>null</span>
+    <FormatNumber value={null} />
+
+    <span className='sb-annotation text-right'>undefined</span>
+    <FormatNumber value={undefined} />
+  </div>
+);
+
+/**
+ * Zero is printed as itself rather than abbreviated, while `NaN` and `Infinity` fall back
+ * to the em dash — with no tooltip, since there is nothing behind them to show.
+ */
+export const SpecialValues: StoryFn<typeof meta> = () => (
+  <div className='grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12'>
+    <span className='sb-annotation text-right'>0</span>
+    <FormatNumber value={0} />
+
+    <span className='sb-annotation text-right'>NaN</span>
+    <FormatNumber value={Number.NaN} />
+
+    <span className='sb-annotation text-right'>Infinity</span>
+    <FormatNumber value={Number.POSITIVE_INFINITY} />
+  </div>
+);
+```

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,n){let a,r;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var l,o,i=Object.create,s=Object.defineProperty,c=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,d=(e,t,n,a)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let r of u(t))m.call(e,r)||r===n||s(e,r,{get:()=>t[r],enumerable:!(a=c(t,r))||a.enumerable});return e},f={},h={$dispatcherGuard:()=>C,$makeReadOnly:()=>O,$reset:()=>M,$structuralCheck:()=>I,c:()=>R,clearRenderCounterRegistry:()=>j,renderCounterRegistry:()=>k,useRenderCounter:()=>D};for(var y in h)s(f,y,{get:h[y],enumerable:!0});e.exports=d(s({},"__esModule",{value:!0}),f);var g=(r=null!=(a=n("C"))?i(p(a)):{},d(a&&a.__esModule?r:s(r,"default",{value:a,enumerable:!0}),a)),{useRef:b,useEffect:v,isValidElement:N}=g,_=null!=(l=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,x=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(o=g.__COMPILER_RUNTIME)?void 0:o.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=x;return t[x]=!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 w=null;function S(e){return _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}E.useMemoCache=e=>{if(null!=w)return w.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var $=[];function C(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if($.push(t),1===$.length&&(w=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.");S(E)}else if(1===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===$.length&&(w=null),S(e)}else if(2===e)$.push(t),S(w);else if(3===e){let e=$.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 M(e){for(let t=0;t<e.length;t++)e[t]=x}function O(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var k=new Map;function j(){for(let e of k.values())e.forEach(e=>{e.count=0})}function D(e){let t=b(null);null!=t.current&&(t.current.count+=1),v(()=>{if(null==t.current){let n,a={count:0};null==(n=k.get(e))&&(n=new Set,k.set(e,n)),n.add(a),t.current=a}return()=>{var n;let a;null!==t.current&&(n=t.current,null!=(a=k.get(e))&&a.delete(n))}})}var T=new Set;function I(e,t,n,a,r,l){function o(e,t,o,i){let s=`${a}:${l} [${r}] ${n}${o} changed from ${e} to ${t} at depth ${i}`;T.has(s)||(T.add(s),console.error(s))}!function e(t,n,a,r){if(!(r>2)){if(t!==n)if(typeof t!=typeof n)o(`type ${typeof t}`,`type ${typeof n}`,a,r);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(n);if(null===t&&null!==n)o("null",`type ${typeof n}`,a,r);else if(null===n)o(`type ${typeof t}`,"null",a,r);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)o(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,a,r);else for(let[l,i]of t)n.has(l)?e(i,n.get(l),`${a}.get(${l})`,r+1):o(`Map instance with key ${l}`,`Map instance without key ${l}`,a,r);else o("Map instance","other value",a,r);else if(n instanceof Map)o("other value","Map instance",a,r);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)o(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,a,r);else for(let e of n)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,a,r);else o("Set instance","other value",a,r);else if(n instanceof Set)o("other value","Set instance",a,r);else if(l||i)if(l!==i)o(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,a,r);else if(t.length!==n.length)o(`array with length ${t.length}`,`array with length ${n.length}`,a,r);else for(let l=0;l<t.length;l++)e(t[l],n[l],`${a}[${l}]`,r+1);else if(N(t)||N(n))N(t)!==N(n)?o(`type ${N(t)?"React element":"object"}`,`type ${N(n)?"React element":"object"}`,a,r):t.type!==n.type?o(`React element of type ${t.type}`,`React element of type ${n.type}`,a,r):e(t.props,n.props,`[props of ${a}]`,r+1);else{for(let e in n)e in t||o(`object without key ${e}`,`object with key ${e}`,a,r);for(let l in t)l in n?e(t[l],n[l],`${a}.${l}`,r+1):o(`object with key ${l}`,`object without key ${l}`,a,r)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,a,r):t!==n&&o(t,n,a,r)}}}(e,t,"",0)}},p(e,t,n){let a=new WeakMap,r=new WeakMap;function l(e,t,n){let l=t,o=n;if("object"==typeof l&&null!==l&&"$$typeof"in l&&l.$$typeof===Symbol.for("react.context")&&"Provider"in l&&(l=l.Provider),"function"==typeof l&&null!=o.ref&&!l.prototype?.isReactComponent){let t=l,n=a.get(e);n||(n=new WeakMap,a.set(e,n));let r=n.get(t);r||((r=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.set(t,r)),l=r}if("string"==typeof l&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in o&&(o={...o,[t]:o[e]},delete o[e]);return"string"==typeof l&&null!=o.ref&&(l=function(e,t){let n=r.get(e);n||(n=new Map,r.set(e,n));let a=n.get(t);if(a)return a;let l=e.forwardRef((n,a)=>{let r=e.useRef(null);if(!r.current||r.current.original!==a){let e;r.current={original:a,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof a){let n=a(t);e="function"==typeof n?n:void 0}else a&&(a.current=t)}}}return e.createElement(t,{...n,ref:r.current.callback})});return l.displayName=`CanvasHost(${t})`,n.set(t,l),l}(e,l)),{type:l,props:o}}function o(e){let t=(t,n,a)=>{let r=l(e,t,n??{});return e.createElement(r.type,void 0===a?r.props:{...r.props,key:a})};return{jsx:t,jsxs:(t,n,a)=>{let r=l(e,t,n??{}),{children:o,...i}=r.props;return e.createElement(r.type,void 0===a?i:{...i,key:a},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,n,...a)=>{let r=l(e,t,n??{});return e.createElement(r.type,r.props,...a)},cloneElement:(t,n,...a)=>{let r=e.cloneElement(t,n??void 0,...a),o=r.ref,i=l(e,r.type,{...r.props,ref:o});return i.type===r.type&&"string"!=typeof r.type?r:e.createElement(i.type,{...i.props,key:r.key})}}}n.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,n){n.r(t);let a=(0,n("p").YJ)(window.React),{Children:r,Component:l,Fragment:o,Profiler:i,PureComponent:s,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:m,cloneElement:d,createContext:f,createElement:h,createFactory:y,createRef:g,forwardRef:b,isValidElement:v,lazy:N,memo:_,startTransition:x,unstable_act:R,useCallback:E,useContext:w,useDebugValue:S,useDeferredValue:$,useEffect:C,useId:M,useImperativeHandle:O,useInsertionEffect:k,useLayoutEffect:j,useMemo:D,useReducer:T,useRef:I,useState:P,useSyncExternalStore:A,useTransition:L,version:U,use:z}=a;n.d(t,{},{Children:r,Component:l,Fragment:o,Profiler:i,PureComponent:s,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:m,cloneElement:d,createContext:f,createElement:h,createFactory:y,createRef:g,default:a,forwardRef:b,isValidElement:v,lazy:N,memo:_,startTransition:x,unstable_act:R,use:z,useCallback:E,useContext:w,useDebugValue:S,useDeferredValue:$,useEffect:C,useId:M,useImperativeHandle:O,useInsertionEffect:k,useLayoutEffect:j,useMemo:D,useReducer:T,useRef:I,useState:P,useSyncExternalStore:A,useTransition:L,version:U})}},t={};function n(a){var r=t[a];if(void 0!==r)return r.exports;var l=t[a]={exports:{}};return e[a](l,l.exports,n),l.exports}n.d=(e,t,a)=>{var r=(t,a)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,[a]:t[r]})};r(t,"get"),r(a,"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:a,Fragment:r}=(0,n("p").MA)(window.React);var l=n("vD");let o=window.WallarmDS.FormatNumber,i={title:"Data Display/FormatNumber",component:o,parameters:{layout:"centered",docs:{description:{component:"Prints a number the way the house number guide says to: abbreviated by default — `12k`, `59.6M` — with the full figure in a tooltip behind a dashed underline. `type` chooses the family: `decimal`, `percent`, which refuses to round to a flat `0%` or `100%` it has not earned, and `byte`, which counts in units of 1000."}}},argTypes:{type:{control:"select",options:["decimal","percent","byte"]},notation:{control:"radio",options:["compact","standard"]},decimals:{control:"number"}},args:{value:12345,type:"decimal",notation:"compact"}},s=[0,5,42,999,1e3,12042,59614,999499,999500,14e11];function c(n){return t(r,{children:[e("span",{className:"sb-annotation text-right",children:n.toLocaleString("en-US")},`label-${n}`),e(o,{value:n},n)]})}function u(n){return t(r,{children:[e("span",{className:"sb-annotation text-right",children:n.toLocaleString("en-US")},`label-${n}`),e(o,{value:n,notation:"standard"},n)]})}var p=n("C");let m=[{name:"Compact",story:()=>{let t,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12",children:s.map(c)}),n[0]=t):t=n[0],t},meta:i},{name:"Standard",story:()=>{let t,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12",children:s.map(u)}),n[0]=t):t=n[0],t},meta:i},{name:"WithUnit",story:()=>{let n,a=(0,l.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=t("div",{className:"grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12",children:[e("span",{className:"sb-annotation text-right",children:"42"}),e(o,{value:42,unit:"requests"}),e("span",{className:"sb-annotation text-right",children:"12,042"}),e(o,{value:12042,unit:"requests"}),e("span",{className:"sb-annotation text-right",children:"59,614,283"}),e(o,{value:0x38da44b,unit:"errors"}),e("span",{className:"sb-annotation text-right",children:"500 (standard)"}),e(o,{value:500,unit:"requests",notation:"standard"})]}),a[0]=n):n=a[0],n},meta:i},{name:"Percent",story:()=>{let n,a=(0,l.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=t("div",{className:"grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12",children:[e("span",{className:"sb-annotation text-right",children:"0%"}),e(o,{value:0,type:"percent"}),e("span",{className:"sb-annotation text-right",children:"0.02% (decimals=0)"}),e(o,{value:.02,type:"percent"}),e("span",{className:"sb-annotation text-right",children:"0.02% (decimals=1)"}),e(o,{value:.02,type:"percent",decimals:1}),e("span",{className:"sb-annotation text-right",children:"25.5%"}),e(o,{value:25.5,type:"percent",decimals:1}),e("span",{className:"sb-annotation text-right",children:"50%"}),e(o,{value:50,type:"percent"}),e("span",{className:"sb-annotation text-right",children:"99.97% (decimals=0)"}),e(o,{value:99.97,type:"percent"}),e("span",{className:"sb-annotation text-right",children:"99.97% (decimals=1)"}),e(o,{value:99.97,type:"percent",decimals:1}),e("span",{className:"sb-annotation text-right",children:"100%"}),e(o,{value:100,type:"percent"})]}),a[0]=n):n=a[0],n},meta:i},{name:"Bytes",story:()=>{let n,a=(0,l.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=t("div",{className:"grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12",children:[e("span",{className:"sb-annotation text-right",children:"512 (compact)"}),e(o,{value:512,type:"byte"}),e("span",{className:"sb-annotation text-right",children:"3,400 (compact)"}),e(o,{value:3400,type:"byte"}),e("span",{className:"sb-annotation text-right",children:"12,700,000 (compact)"}),e(o,{value:127e5,type:"byte"}),e("span",{className:"sb-annotation text-right",children:"2,345,678,901 (compact)"}),e(o,{value:0x8bd03835,type:"byte"}),e("span",{className:"sb-annotation text-right",children:"1,100,000,000,000 (compact)"}),e(o,{value:11e11,type:"byte"}),e("span",{className:"sb-annotation text-right",children:"12,700,000 (standard)"}),e(o,{value:127e5,type:"byte",notation:"standard"})]}),a[0]=n):n=a[0],n},meta:i},{name:"NoTooltip",story:()=>{let n,a=(0,l.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=t("div",{className:"grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12",children:[e("span",{className:"sb-annotation text-right",children:"12,042 (decimal)"}),e(o,{value:12042,tooltip:!1}),e("span",{className:"sb-annotation text-right",children:"59,614,283 (decimal)"}),e(o,{value:0x38da44b,tooltip:!1}),e("span",{className:"sb-annotation text-right",children:"12,042 with unit"}),e(o,{value:12042,unit:"requests",tooltip:!1}),e("span",{className:"sb-annotation text-right",children:"12,700,000 (byte)"}),e(o,{value:127e5,type:"byte",tooltip:!1})]}),a[0]=n):n=a[0],n},meta:i},{name:"NegativeValues",story:()=>{let n,a=(0,l.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=t("div",{className:"grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12",children:[e("span",{className:"sb-annotation text-right",children:"-42"}),e(o,{value:-42}),e("span",{className:"sb-annotation text-right",children:"-12,042"}),e(o,{value:-12042}),e("span",{className:"sb-annotation text-right",children:"-59,614,283"}),e(o,{value:-0x38da44b})]}),a[0]=n):n=a[0],n},meta:i},{name:"NullValue",story:()=>{let n,a=(0,l.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=t("div",{className:"grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12",children:[e("span",{className:"sb-annotation text-right",children:"null"}),e(o,{value:null}),e("span",{className:"sb-annotation text-right",children:"undefined"}),e(o,{value:void 0})]}),a[0]=n):n=a[0],n},meta:i},{name:"SpecialValues",story:()=>{let n,a=(0,l.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(n=t("div",{className:"grid grid-cols-[1fr_1fr] items-center gap-x-16 gap-y-12",children:[e("span",{className:"sb-annotation text-right",children:"0"}),e(o,{value:0}),e("span",{className:"sb-annotation text-right",children:"NaN"}),e(o,{value:0/0}),e("span",{className:"sb-annotation text-right",children:"Infinity"}),e(o,{value:1/0})]}),a[0]=n):n=a[0],n},meta:i}];function d({entry:e}){let{story:t,meta:n}=e,a={...n.args,...t.args},r="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,l=()=>p.default.createElement(r,a),o={args:a,globals:{theme:"light"},parameters:{...n.parameters,...t.parameters},viewMode:"story"};for(let e of[...n.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,o)}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(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(p.default.createElement(window.WallarmDS.Root,null,m.map((e,t)=>p.default.createElement(d,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,240 @@
+Geist for titles and section headings, where hierarchy comes from the size step — reach for `Text` when the words are copy rather than a title. Visual size and document level are independent: pick `size` for how it looks and `as` for the outline, so a visually small heading can still be the `h2` the structure needs.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `color` | `"primary" \| "primary-alt" \| "secondary" \| "secondary-alt" \| "inherit"` | no | `inherit` |  |
+| `size` | `"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl"` | no | `xl` |  |
+| `weight` | `"light" \| "regular" \| "medium" \| "bold"` | no | `bold` |  |
+| `align` | `"left" \| "center" \| "right"` | no | — |  |
+| `grow` | `boolean` | no | `false` |  |
+| `truncate` | `boolean` | no | `false` |  |
+| `as-child` | `boolean \| undefined` | no | `false` |  |
+| `line-clamp` | `number \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+| `as` | `C \| undefined` | no | `h1` |  |
+
+## Stories
+
+### Basic
+
+The default step. A heading is a title first and a size second, which is why the two are
+separate props.
+
+Source: Heading/Heading.stories.tsx#Basic
+
+### Sizes
+
+The full ramp with its metrics. The bottom steps deliberately duplicate the text ramp — `sm`
+is 14 on 20 exactly as in `Text` — because what separates them is semantic, not visual.
+
+Source: Heading/Heading.stories.tsx#Sizes
+
+### Weights
+
+All four weights at every size, so weight emphasises within a level rather than creating one.
+
+Source: Heading/Heading.stories.tsx#Weights
+
+### AsChild
+
+`asChild` moves the styling onto your own element, keeping whatever tag the surrounding
+markup needs.
+
+Source: Heading/Heading.stories.tsx#AsChild
+
+### PolymorphicElements
+
+`as` across the heading levels, which is the outline both a screen reader and a table of
+contents read. Choose it from the document structure, not from the size you wanted.
+
+Source: Heading/Heading.stories.tsx#PolymorphicElements
+
+### AsSpan
+
+A heading rendered inline, for a title inside a row of other content where a block element
+would break the line.
+
+Source: Heading/Heading.stories.tsx#AsSpan
+
+### AsDiv
+
+A heading with no document level at all, for text that looks like a title but should not
+appear in the outline.
+
+Source: Heading/Heading.stories.tsx#AsDiv
+
+## Story sources
+
+### Heading/Heading.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { VStack } from '../Stack';
+import { Text } from '../Text';
+import { Heading } from './Heading';
+
+const DESCRIPTION = [
+  'Geist for titles and section headings, where hierarchy comes from the size step — reach for `Text` when the words are copy rather than a title.',
+  'Visual size and document level are independent: pick `size` for how it looks and `as` for the outline, so a visually small heading can still be the `h2` the structure needs.',
+].join(' ');
+
+const meta = {
+  title: 'Typography/Heading',
+  component: Heading,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+
+  args: {},
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'],
+    },
+    weight: {
+      control: 'select',
+      options: ['light', 'regular', 'medium', 'bold'],
+    },
+    as: {
+      control: 'select',
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'div', 'span'],
+    },
+    asChild: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Heading>;
+
+export default meta;
+
+/**
+ * The default step. A heading is a title first and a size second, which is why the two are
+ * separate props.
+ */
+export const Basic: StoryFn<typeof meta> = ({ ...args }) => (
+  <Heading {...args}>Default Heading</Heading>
+);
+
+/** Size / leading in px, measured from the rendered component. */
+const SIZES = [
+  { size: '7xl', metrics: '72 / 72' },
+  { size: '6xl', metrics: '60 / 60' },
+  { size: '5xl', metrics: '48 / 48' },
+  { size: '4xl', metrics: '36 / 40' },
+  { size: '3xl', metrics: '30 / 36' },
+  { size: '2xl', metrics: '24 / 32' },
+  { size: 'xl', metrics: '20 / 28' },
+  { size: 'lg', metrics: '18 / 24' },
+  { size: 'md', metrics: '16 / 24' },
+  { size: 'sm', metrics: '14 / 20' },
+] as const;
+
+/**
+ * The full ramp with its metrics. The bottom steps deliberately duplicate the text ramp — `sm`
+ * is 14 on 20 exactly as in `Text` — because what separates them is semantic, not visual.
+ */
+export const Sizes: StoryFn<typeof meta> = ({ ...args }) => (
+  <VStack gap={24} align='start'>
+    {SIZES.map(({ size, metrics }) => (
+      <VStack key={size} gap={4} align='start'>
+        <Text size='xs' color='secondary'>
+          size=&apos;{size}&apos; · {metrics}
+        </Text>
+        <Heading {...args} size={size}>
+          The quick brown fox
+        </Heading>
+      </VStack>
+    ))}
+  </VStack>
+);
+
+/**
+ * All four weights at every size, so weight emphasises within a level rather than creating one.
+ */
+export const Weights: StoryFn<typeof meta> = ({ ...args }) => (
+  <VStack align='start'>
+    <Heading {...args} size='3xl' weight='light'>
+      Light Weight Heading
+    </Heading>
+    <Heading {...args} size='3xl' weight='regular'>
+      Regular Weight Heading
+    </Heading>
+    <Heading {...args} size='3xl' weight='medium'>
+      Medium Weight Heading
+    </Heading>
+    <Heading {...args} size='3xl' weight='bold'>
+      Bold Weight Heading
+    </Heading>
+  </VStack>
+);
+
+/**
+ * `asChild` moves the styling onto your own element, keeping whatever tag the surrounding
+ * markup needs.
+ */
+export const AsChild: StoryFn<typeof meta> = ({ ...args }) => (
+  <Heading {...args} size='4xl' weight='bold' asChild>
+    <h2>Custom H2 Element with AsChild</h2>
+  </Heading>
+);
+
+/**
+ * `as` across the heading levels, which is the outline both a screen reader and a table of
+ * contents read. Choose it from the document structure, not from the size you wanted.
+ */
+export const PolymorphicElements: StoryFn<typeof meta> = ({ ...args }) => (
+  <VStack align='start'>
+    <Heading {...args} as='h1' size='4xl'>
+      H1 Heading
+    </Heading>
+    <Heading {...args} as='h2' size='3xl'>
+      H2 Heading
+    </Heading>
+    <Heading {...args} as='h3' size='2xl'>
+      H3 Heading
+    </Heading>
+    <Heading {...args} as='h4' size='xl'>
+      H4 Heading
+    </Heading>
+    <Heading {...args} as='h5' size='lg'>
+      H5 Heading
+    </Heading>
+    <Heading {...args} as='h6' size='md'>
+      H6 Heading
+    </Heading>
+  </VStack>
+);
+
+/**
+ * A heading rendered inline, for a title inside a row of other content where a block element
+ * would break the line.
+ */
+export const AsSpan: StoryFn<typeof meta> = ({ ...args }) => (
+  <Text>
+    This is a paragraph with{' '}
+    <Heading {...args} as='span' size='lg' weight='bold'>
+      inline heading text
+    </Heading>{' '}
+    using span element.
+  </Text>
+);
+
+/**
+ * A heading with no document level at all, for text that looks like a title but should not
+ * appear in the outline.
+ */
+export const AsDiv: StoryFn<typeof meta> = ({ ...args }) => (
+  <Heading {...args} as='div' size='2xl' weight='medium'>
+    This heading is rendered as a div element
+  </Heading>
+);
+```

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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,l;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var a,i,o=Object.create,s=Object.defineProperty,c=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,d=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of u(t))p.call(e,l)||l===r||s(e,l,{get:()=>t[l],enumerable:!(n=c(t,l))||n.enumerable});return e},h={},m={$dispatcherGuard:()=>C,$makeReadOnly:()=>M,$reset:()=>N,$structuralCheck:()=>H,c:()=>$,clearRenderCounterRegistry:()=>k,renderCounterRegistry:()=>O,useRenderCounter:()=>T};for(var y in m)s(h,y,{get:m[y],enumerable:!0});e.exports=d(s({},"__esModule",{value:!0}),h);var g=(l=null!=(n=r("C"))?o(f(n)):{},d(n&&n.__esModule?l:s(l,"default",{value:n,enumerable:!0}),n)),{useRef:w,useEffect:E,isValidElement:R}=g,v=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,b=Symbol.for("react.memo_cache_sentinel"),$="function"==typeof(null==(i=g.__COMPILER_RUNTIME)?void 0:i.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 x=null;function S(e){return v.ReactCurrentDispatcher.current=e,v.ReactCurrentDispatcher.current}_.useMemoCache=e=>{if(null!=x)return x.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var z=[];function C(e){let t=v.ReactCurrentDispatcher.current;if(0===e){if(z.push(t),1===z.length&&(x=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=z.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===z.length&&(x=null),S(e)}else if(2===e)z.push(t),S(x);else if(3===e){let e=z.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 N(e){for(let t=0;t<e.length;t++)e[t]=b}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var O=new Map;function k(){for(let e of O.values())e.forEach(e=>{e.count=0})}function T(e){let t=w(null);null!=t.current&&(t.current.count+=1),E(()=>{if(null==t.current){let r,n={count:0};null==(r=O.get(e))&&(r=new Set,O.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=O.get(e))&&n.delete(r))}})}var D=new Set;function H(e,t,r,n,l,a){function i(e,t,i,o){let s=`${n}:${a} [${l}] ${r}${i} changed from ${e} to ${t} at depth ${o}`;D.has(s)||(D.add(s),console.error(s))}!function e(t,r,n,l){if(!(l>2)){if(t!==r)if(typeof t!=typeof r)i(`type ${typeof t}`,`type ${typeof r}`,n,l);else if("object"==typeof t){let a=Array.isArray(t),o=Array.isArray(r);if(null===t&&null!==r)i("null",`type ${typeof r}`,n,l);else if(null===r)i(`type ${typeof t}`,"null",n,l);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)i(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,l);else for(let[a,o]of t)r.has(a)?e(o,r.get(a),`${n}.get(${a})`,l+1):i(`Map instance with key ${a}`,`Map instance without key ${a}`,n,l);else i("Map instance","other value",n,l);else if(r instanceof Map)i("other value","Map instance",n,l);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)i(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,l);else for(let e of r)t.has(e)||i(`Set instance without element ${e}`,`Set instance with element ${e}`,n,l);else i("Set instance","other value",n,l);else if(r instanceof Set)i("other value","Set instance",n,l);else if(a||o)if(a!==o)i(`type ${a?"array":"object"}`,`type ${o?"array":"object"}`,n,l);else if(t.length!==r.length)i(`array with length ${t.length}`,`array with length ${r.length}`,n,l);else for(let a=0;a<t.length;a++)e(t[a],r[a],`${n}[${a}]`,l+1);else if(R(t)||R(r))R(t)!==R(r)?i(`type ${R(t)?"React element":"object"}`,`type ${R(r)?"React element":"object"}`,n,l):t.type!==r.type?i(`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||i(`object without key ${e}`,`object with key ${e}`,n,l);for(let a in t)a in r?e(t[a],r[a],`${n}.${a}`,l+1):i(`object with key ${a}`,`object without key ${a}`,n,l)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&i(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,l):t!==r&&i(t,r,n,l)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,l=new WeakMap;function a(e,t,r){let a=t,i=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!=i.ref&&!a.prototype?.isReactComponent){let t=a,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let l=r.get(t);l||((l=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,l)),a=l}if("string"==typeof a&&"boolean"==typeof i.inert&&((i={...i}).inert?i.inert="":delete i.inert),"string"==typeof a)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in i&&(i={...i,[t]:i[e]},delete i[e]);return"string"==typeof a&&null!=i.ref&&(a=function(e,t){let r=l.get(e);r||(r=new Map,l.set(e,r));let n=r.get(t);if(n)return n;let a=e.forwardRef((r,n)=>{let l=e.useRef(null);if(!l.current||l.current.original!==n){let e;l.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let r=n(t);e="function"==typeof r?r:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...r,ref:l.current.callback})});return a.displayName=`CanvasHost(${t})`,r.set(t,a),a}(e,a)),{type:a,props:i}}function i(e){let t=(t,r,n)=>{let l=a(e,t,r??{});return e.createElement(l.type,void 0===n?l.props:{...l.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let l=a(e,t,r??{}),{children:i,...o}=l.props;return e.createElement(l.type,void 0===n?o:{...o,key:n},...Array.isArray(i)?i:[i])},jsxDEV:t,Fragment:e.Fragment}}function o(e){return{...e,createElement:(t,r,...n)=>{let l=a(e,t,r??{});return e.createElement(l.type,l.props,...n)},cloneElement:(t,r,...n)=>{let l=e.cloneElement(t,r??void 0,...n),i=l.ref,o=a(e,l.type,{...l.props,ref:i});return o.type===l.type&&"string"!=typeof l.type?l:e.createElement(o.type,{...o.props,key:l.key})}}}r.d(t,{MA:()=>i,YJ:()=>o})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:l,Component:a,Fragment:i,Profiler:o,PureComponent:s,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:d,createContext:h,createElement:m,createFactory:y,createRef:g,forwardRef:w,isValidElement:E,lazy:R,memo:v,startTransition:b,unstable_act:$,useCallback:_,useContext:x,useDebugValue:S,useDeferredValue:z,useEffect:C,useId:N,useImperativeHandle:M,useInsertionEffect:O,useLayoutEffect:k,useMemo:T,useReducer:D,useRef:H,useState:j,useSyncExternalStore:A,useTransition:I,version:P,use:W}=n;r.d(t,{},{Children:l,Component:a,Fragment:i,Profiler:o,PureComponent:s,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:d,createContext:h,createElement:m,createFactory:y,createRef:g,default:n,forwardRef:w,isValidElement:E,lazy:R,memo:v,startTransition:b,unstable_act:$,use:W,useCallback:_,useContext:x,useDebugValue:S,useDeferredValue:z,useEffect:C,useId:N,useImperativeHandle:M,useInsertionEffect:O,useLayoutEffect:k,useMemo:T,useReducer:D,useRef:H,useState:j,useSyncExternalStore:A,useTransition:I,version:P})}},t={};function r(n){var l=t[n];if(void 0!==l)return l.exports;var a=t[n]={exports:{}};return e[n](a,a.exports,r),a.exports}r.d=(e,t,n)=>{var l=(t,n)=>{for(var l in t)r.o(t,l)&&!r.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,[n]:t[l]})};l(t,"get"),l(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:n,Fragment:l}=(0,r("p").MA)(window.React);var a=r("vD");let i=window.WallarmDS.VStack,o=window.WallarmDS.Text,s=window.WallarmDS.Heading,c={title:"Typography/Heading",component:s,parameters:{layout:"centered",docs:{description:{component:"Geist for titles and section headings, where hierarchy comes from the size step — reach for `Text` when the words are copy rather than a title. Visual size and document level are independent: pick `size` for how it looks and `as` for the outline, so a visually small heading can still be the `h2` the structure needs."}}},args:{},argTypes:{size:{control:"select",options:["sm","md","lg","xl","2xl","3xl","4xl","5xl","6xl","7xl"]},weight:{control:"select",options:["light","regular","medium","bold"]},as:{control:"select",options:["h1","h2","h3","h4","h5","h6","p","div","span"]},asChild:{control:"boolean"}}},u=[{size:"7xl",metrics:"72 / 72"},{size:"6xl",metrics:"60 / 60"},{size:"5xl",metrics:"48 / 48"},{size:"4xl",metrics:"36 / 40"},{size:"3xl",metrics:"30 / 36"},{size:"2xl",metrics:"24 / 32"},{size:"xl",metrics:"20 / 28"},{size:"lg",metrics:"18 / 24"},{size:"md",metrics:"16 / 24"},{size:"sm",metrics:"14 / 20"}];var f=r("C");let p=[{name:"Basic",story:t=>{let r,n,l=(0,a.c)(4);return l[0]!==t?({...r}=t,l[0]=t,l[1]=r):r=l[1],l[2]!==r?(n=e(s,{...r,children:"Default Heading"}),l[2]=r,l[3]=n):n=l[3],n},meta:c},{name:"Sizes",story:r=>{let n,l,c,f=(0,a.c)(6);return f[0]!==r?({...n}=r,f[0]=r,f[1]=n):n=f[1],f[2]!==n?(l=u.map(r=>{let{size:l,metrics:a}=r;return t(i,{gap:4,align:"start",children:[t(o,{size:"xs",color:"secondary",children:["size='",l,"' · ",a]}),e(s,{...n,size:l,children:"The quick brown fox"})]},l)}),f[2]=n,f[3]=l):l=f[3],f[4]!==l?(c=e(i,{gap:24,align:"start",children:l}),f[4]=l,f[5]=c):c=f[5],c},meta:c},{name:"Weights",story:r=>{let n,l,o=(0,a.c)(4);return o[0]!==r?({...n}=r,o[0]=r,o[1]=n):n=o[1],o[2]!==n?(l=t(i,{align:"start",children:[e(s,{...n,size:"3xl",weight:"light",children:"Light Weight Heading"}),e(s,{...n,size:"3xl",weight:"regular",children:"Regular Weight Heading"}),e(s,{...n,size:"3xl",weight:"medium",children:"Medium Weight Heading"}),e(s,{...n,size:"3xl",weight:"bold",children:"Bold Weight Heading"})]}),o[2]=n,o[3]=l):l=o[3],l},meta:c},{name:"AsChild",story:t=>{let r,n,l,i=(0,a.c)(5);return i[0]!==t?({...r}=t,i[0]=t,i[1]=r):r=i[1],i[2]===Symbol.for("react.memo_cache_sentinel")?(n=e("h2",{children:"Custom H2 Element with AsChild"}),i[2]=n):n=i[2],i[3]!==r?(l=e(s,{...r,size:"4xl",weight:"bold",asChild:!0,children:n}),i[3]=r,i[4]=l):l=i[4],l},meta:c},{name:"PolymorphicElements",story:r=>{let n,l,o=(0,a.c)(4);return o[0]!==r?({...n}=r,o[0]=r,o[1]=n):n=o[1],o[2]!==n?(l=t(i,{align:"start",children:[e(s,{...n,as:"h1",size:"4xl",children:"H1 Heading"}),e(s,{...n,as:"h2",size:"3xl",children:"H2 Heading"}),e(s,{...n,as:"h3",size:"2xl",children:"H3 Heading"}),e(s,{...n,as:"h4",size:"xl",children:"H4 Heading"}),e(s,{...n,as:"h5",size:"lg",children:"H5 Heading"}),e(s,{...n,as:"h6",size:"md",children:"H6 Heading"})]}),o[2]=n,o[3]=l):l=o[3],l},meta:c},{name:"AsSpan",story:r=>{let n,l,i=(0,a.c)(4);return i[0]!==r?({...n}=r,i[0]=r,i[1]=n):n=i[1],i[2]!==n?(l=t(o,{children:["This is a paragraph with"," ",e(s,{...n,as:"span",size:"lg",weight:"bold",children:"inline heading text"})," ","using span element."]}),i[2]=n,i[3]=l):l=i[3],l},meta:c},{name:"AsDiv",story:t=>{let r,n,l=(0,a.c)(4);return l[0]!==t?({...r}=t,l[0]=t,l[1]=r):r=l[1],l[2]!==r?(n=e(s,{...r,as:"div",size:"2xl",weight:"medium",children:"This heading is rendered as a div element"}),l[2]=r,l[3]=n):n=l[3],n},meta:c}];function d({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},l="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,a=()=>f.default.createElement(l,n),i={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=a;a=()=>e(t,i)}return f.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},f.default.createElement("h2",{className:"text-sm mb-12"},e.name),f.default.createElement(a))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(f.default.createElement(window.WallarmDS.Root,null,p.map((e,t)=>f.default.createElement(d,{key:t,entry:e})))),t}}})();