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

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

@@ -0,0 +1,433 @@
+Sets an approximate, bounded value by dragging along a track — reach for `NumberInput` when the exact figure matters, since a slider is faster to move than it is to land. A slider should always show its value: pair it with `SliderInput` for entry, or `SliderValue` for a readout. It implies a continuum, so a few fixed choices belong in `SegmentedControl`, `Radio` or `Select`, and on/off in `Switch`.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `error` | `boolean \| undefined` | no | `false` | Error state → maps to Ark `invalid` (repaints the handle; the message is the Field's job). |
+| `on-value-change` | `((value: number[]) => void) \| undefined` | no | — | Fires live during drag with the current value array (`[n]` single, `[low, high]` range). |
+| `on-value-change-end` | `((value: number[]) => void) \| undefined` | no | — | Fires once on drag release with the committed value array. |
+| `form` | `string \| undefined` | no | — | The associate form of the underlying input element. |
+| `default-value` | `number[] \| undefined` | no | `[50]` | The initial value of the slider when rendered. Use when you don't need to control the value of the slider. |
+| `disabled` | `boolean \| undefined` | no | — | Whether the slider is disabled |
+| `name` | `string \| undefined` | no | — | The name associated with each slider thumb (when used in a form) |
+| `value` | `number[] \| undefined` | no | — | The controlled value of the slider |
+| `max` | `number \| undefined` | no | — | The maximum value of the slider |
+| `min` | `number \| undefined` | no | — | The minimum value of the slider |
+| `read-only` | `boolean \| undefined` | no | — | Whether the slider is read-only |
+| `step` | `number \| undefined` | no | — | The step value of the slider |
+| `get-aria-value-text` | `((details: ValueTextDetails) => string) \| undefined` | no | — | Function that returns a human readable value for the slider thumb |
+| `min-steps-between-thumbs` | `number \| undefined` | no | — | The minimum permitted steps between multiple thumbs. `minStepsBetweenThumbs` * `step` should reflect the gap between the thumbs. - `step: 1` and `minStepsBetweenThumbs: 10` => gap is `10` - `step: 10` and `minStepsBetweenThumbs: 2` => gap is `20` |
+| `thumb-collision-behavior` | `"none" \| "push" \| "swap" \| undefined` | no | — | Controls how thumbs behave when they collide during pointer interactions. - `none` (default): Thumbs cannot move past each other; excess movement is ignored. - `push`: Thumbs push each other without restoring their previous positions when dragged back. - `swap`: Thumbs swap places when dragged past each other. |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.SliderControl` — `SliderControlProps` in the declaration bundle.
+- `WallarmDS.SliderInput` — `SliderInputProps` in the declaration bundle.
+- `WallarmDS.SliderMarks` — `SliderMarksProps` in the declaration bundle.
+- `WallarmDS.SliderThumb` — `SliderThumbProps` in the declaration bundle.
+- `WallarmDS.SliderValue` — `SliderValueProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+One handle on a track: arrow keys move by `step`, Page keys jump further, and Home and End go
+to the bounds. `SliderThumb` is the real interactive node, so `aria-label` and analytics
+attributes go on it, and its focus reuses the hover emphasis instead of drawing a ring.
+
+Source: Slider/Slider.stories.tsx#Basic
+
+### Range
+
+Two entries in the value make two thumbs; render one `SliderThumb` per entry. The thumbs
+cannot cross, so the pair always reads as a valid range.
+
+Source: Slider/Slider.stories.tsx#Range
+
+### Ticks
+
+`SliderMarks` draws ticks along the scale. Keep `step` aligned to the marks, or the handle
+lands between them and the ticks stop meaning anything.
+
+Source: Slider/Slider.stories.tsx#Ticks
+
+### TicksWithoutSnapping
+
+The same marks used purely for orientation, with `step` finer than their spacing. Choose this
+when the marks are a guide rather than the only valid answers.
+
+Source: Slider/Slider.stories.tsx#TicksWithoutSnapping
+
+### Labeled
+
+Marks carrying text, for a scale whose steps are named rather than numeric. The handle snaps
+to the labelled positions and announces the label rather than the number, so keep it to a
+handful of rungs.
+
+Source: Slider/Slider.stories.tsx#Labeled
+
+### WithTooltip
+
+`tooltip` on a `SliderThumb` shows the value while dragging, then hides it. It suits a value
+only checked mid-gesture; anything needed afterwards wants a persistent readout instead,
+never both.
+
+Source: Slider/Slider.stories.tsx#WithTooltip
+
+### WithInput
+
+`SliderInput` is the precision escape hatch: the track for approximate moves, the field for
+an exact figure. Typing commits on blur or Enter rather than live, so clamping never fights a
+half-typed number.
+
+Source: Slider/Slider.stories.tsx#WithInput
+
+### RangeWithInput
+
+A field at each end, low on the left and high on the right. Neither crosses the other, so the
+fields cannot produce a range the track could not.
+
+Source: Slider/Slider.stories.tsx#RangeWithInput
+
+### Disabled
+
+The whole control dims and stops responding, handle included. The value stays legible,
+because a locked setting is usually one the reader still needs to read.
+
+Source: Slider/Slider.stories.tsx#Disabled
+
+### InField
+
+Wrapped in `Field`, which is the form-field shape. The slider reads that context, so the
+label and error attach without being passed anything.
+
+Source: Slider/Slider.stories.tsx#InField
+
+### FieldWithError
+
+`invalid` on the `Field` cascades to the handle. The message is `FieldError`'s job, and it
+matters here because a slider cannot show a wrong value the way a text field can.
+
+Source: Slider/Slider.stories.tsx#FieldWithError
+
+### FieldWithValue
+
+The value beside the label, which is the readout Figma draws for a slider in a form — value
+beside label is the drawn default, not one option among several.
+
+Source: Slider/Slider.stories.tsx#FieldWithValue
+
+### RangeFieldWithValue
+
+Both ends beside the label, comma-separated. For a range this is the only way to read the
+value without hovering each thumb.
+
+Source: Slider/Slider.stories.tsx#RangeFieldWithValue
+
+### WithValueReadout
+
+`SliderValue` reads the slider's own context, so a live readout needs no controlled state of
+its own.
+
+Source: Slider/Slider.stories.tsx#WithValueReadout
+
+## Story sources
+
+### Slider/Slider.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Field, FieldDescription, FieldError, FieldLabel } from '../Field';
+import { Slider, type SliderProps } from './Slider';
+import { SliderControl } from './SliderControl';
+import { SliderInput } from './SliderInput';
+import { SliderMarks } from './SliderMarks';
+import { SliderThumb } from './SliderThumb';
+import { SliderValue } from './SliderValue';
+
+const DESCRIPTION = [
+  'Sets an approximate, bounded value by dragging along a track — reach for `NumberInput` when the exact figure matters, since a slider is faster to move than it is to land.',
+  'A slider should always show its value: pair it with `SliderInput` for entry, or `SliderValue` for a readout.',
+  'It implies a continuum, so a few fixed choices belong in `SegmentedControl`, `Radio` or `Select`, and on/off in `Switch`.',
+].join(' ');
+
+const meta = {
+  title: 'Inputs/Slider',
+  component: Slider,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  args: {
+    defaultValue: [50],
+    min: 0,
+    max: 100,
+    step: 1,
+    disabled: false,
+    error: false,
+  },
+  argTypes: {
+    defaultValue: { control: 'object' },
+    value: { control: 'object' },
+    min: { control: 'number' },
+    max: { control: 'number' },
+    step: { control: 'number' },
+    disabled: { control: 'boolean' },
+    readOnly: { control: 'boolean' },
+    error: { control: 'boolean' },
+    onValueChange: { control: false },
+    onValueChangeEnd: { control: false },
+    ref: { control: false },
+  },
+  decorators: [
+    Story => (
+      <div style={{ width: 380 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+
+/**
+ * One handle on a track: arrow keys move by `step`, Page keys jump further, and Home and End go
+ * to the bounds. `SliderThumb` is the real interactive node, so `aria-label` and analytics
+ * attributes go on it, and its focus reuses the hover emphasis instead of drawing a ring.
+ */
+export const Basic: StoryFn<SliderProps> = args => (
+  <Slider {...args}>
+    <SliderControl>
+      <SliderThumb aria-label='Value' />
+    </SliderControl>
+  </Slider>
+);
+
+/**
+ * Two entries in the value make two thumbs; render one `SliderThumb` per entry. The thumbs
+ * cannot cross, so the pair always reads as a valid range.
+ */
+export const Range: StoryFn<SliderProps> = args => (
+  <Slider {...args} defaultValue={[20, 80]}>
+    <SliderControl>
+      <SliderThumb index={0} />
+      <SliderThumb index={1} />
+    </SliderControl>
+  </Slider>
+);
+
+/**
+ * `SliderMarks` draws ticks along the scale. Keep `step` aligned to the marks, or the handle
+ * lands between them and the ticks stop meaning anything.
+ */
+export const Ticks: StoryFn<SliderProps> = args => (
+  <Slider {...args} step={25} defaultValue={[50]}>
+    <SliderControl>
+      <SliderThumb aria-label='Volume' />
+      <SliderMarks
+        marks={[
+          { value: 0, label: '0' },
+          { value: 25, label: '25' },
+          { value: 50, label: '50' },
+          { value: 75, label: '75' },
+          { value: 100, label: '100' },
+        ]}
+      />
+    </SliderControl>
+  </Slider>
+);
+
+/**
+ * The same marks used purely for orientation, with `step` finer than their spacing. Choose this
+ * when the marks are a guide rather than the only valid answers.
+ */
+export const TicksWithoutSnapping: StoryFn<SliderProps> = args => (
+  <Slider {...args} step={1} defaultValue={[40]}>
+    <SliderControl>
+      <SliderThumb aria-label='Volume' />
+      <SliderMarks
+        marks={[
+          { value: 0, label: '0' },
+          { value: 25, label: '25' },
+          { value: 50, label: '50' },
+          { value: 75, label: '75' },
+          { value: 100, label: '100' },
+        ]}
+      />
+    </SliderControl>
+  </Slider>
+);
+
+/**
+ * Marks carrying text, for a scale whose steps are named rather than numeric. The handle snaps
+ * to the labelled positions and announces the label rather than the number, so keep it to a
+ * handful of rungs.
+ */
+export const Labeled: StoryFn<SliderProps> = args => (
+  <Slider {...args} min={0} max={100} step={50} defaultValue={[50]}>
+    <SliderControl>
+      <SliderThumb aria-label='Risk level' />
+      <SliderMarks
+        marks={[
+          { value: 0, label: 'Low' },
+          { value: 50, label: 'Medium' },
+          { value: 100, label: 'High' },
+        ]}
+      />
+    </SliderControl>
+  </Slider>
+);
+
+/**
+ * `tooltip` on a `SliderThumb` shows the value while dragging, then hides it. It suits a value
+ * only checked mid-gesture; anything needed afterwards wants a persistent readout instead,
+ * never both.
+ */
+export const WithTooltip: StoryFn<SliderProps> = args => (
+  <Slider {...args}>
+    <SliderControl>
+      <SliderThumb aria-label='Value' tooltip />
+    </SliderControl>
+  </Slider>
+);
+
+/**
+ * `SliderInput` is the precision escape hatch: the track for approximate moves, the field for
+ * an exact figure. Typing commits on blur or Enter rather than live, so clamping never fights a
+ * half-typed number.
+ */
+export const WithInput: StoryFn<SliderProps> = args => (
+  <Slider {...args} data-testid='slider-with-input'>
+    <SliderControl>
+      <SliderThumb aria-label='Value' />
+    </SliderControl>
+    <SliderInput />
+  </Slider>
+);
+
+/**
+ * A field at each end, low on the left and high on the right. Neither crosses the other, so the
+ * fields cannot produce a range the track could not.
+ */
+export const RangeWithInput: StoryFn<SliderProps> = args => (
+  <Slider {...args} defaultValue={[20, 80]} data-testid='slider-range-with-input'>
+    <SliderInput index={0} />
+    <SliderControl>
+      <SliderThumb index={0} />
+      <SliderThumb index={1} />
+    </SliderControl>
+    <SliderInput index={1} />
+  </Slider>
+);
+
+/**
+ * The whole control dims and stops responding, handle included. The value stays legible,
+ * because a locked setting is usually one the reader still needs to read.
+ */
+export const Disabled: StoryFn<SliderProps> = args => (
+  <Slider {...args} disabled>
+    <SliderControl>
+      <SliderThumb aria-label='Value' />
+    </SliderControl>
+  </Slider>
+);
+
+/**
+ * Wrapped in `Field`, which is the form-field shape. The slider reads that context, so the
+ * label and error attach without being passed anything.
+ */
+export const InField: StoryFn<SliderProps> = args => (
+  <Field>
+    <FieldLabel>Risk threshold</FieldLabel>
+    <Slider {...args}>
+      <SliderControl>
+        <SliderThumb />
+      </SliderControl>
+    </Slider>
+    <FieldDescription>Approximate — fine-tune the exact value later.</FieldDescription>
+  </Field>
+);
+
+/**
+ * `invalid` on the `Field` cascades to the handle. The message is `FieldError`'s job, and it
+ * matters here because a slider cannot show a wrong value the way a text field can.
+ */
+export const FieldWithError: StoryFn<SliderProps> = args => (
+  <Field invalid>
+    <FieldLabel>Risk threshold</FieldLabel>
+    <Slider {...args}>
+      <SliderControl>
+        <SliderThumb />
+      </SliderControl>
+    </Slider>
+    <FieldError>Enter a value between 0 and 100.</FieldError>
+  </Field>
+);
+
+/**
+ * The value beside the label, which is the readout Figma draws for a slider in a form — value
+ * beside label is the drawn default, not one option among several.
+ */
+export const FieldWithValue: StoryFn<SliderProps> = args => {
+  const [value, setValue] = useState([40]);
+  return (
+    <Field>
+      <div className='flex w-full items-center justify-between'>
+        <FieldLabel>Risk threshold</FieldLabel>
+        <span className='text-sm font-medium text-text-primary tabular-nums'>{value[0]}</span>
+      </div>
+      <Slider {...args} value={value} onValueChange={setValue}>
+        <SliderControl>
+          <SliderThumb />
+        </SliderControl>
+      </Slider>
+    </Field>
+  );
+};
+
+/**
+ * Both ends beside the label, comma-separated. For a range this is the only way to read the
+ * value without hovering each thumb.
+ */
+export const RangeFieldWithValue: StoryFn<SliderProps> = args => {
+  const [value, setValue] = useState([20, 80]);
+  return (
+    <Field>
+      <div className='flex w-full items-center justify-between'>
+        <FieldLabel>Risk range</FieldLabel>
+        <span className='text-sm font-medium text-text-primary tabular-nums'>
+          {value.join(', ')}
+        </span>
+      </div>
+      <Slider {...args} value={value} onValueChange={setValue}>
+        <SliderControl>
+          <SliderThumb index={0} />
+          <SliderThumb index={1} />
+        </SliderControl>
+      </Slider>
+    </Field>
+  );
+};
+
+/**
+ * `SliderValue` reads the slider's own context, so a live readout needs no controlled state of
+ * its own.
+ */
+export const WithValueReadout: StoryFn<SliderProps> = args => (
+  <Slider {...args} defaultValue={[60]}>
+    <SliderControl>
+      <SliderThumb aria-label='Volume' />
+    </SliderControl>
+    <SliderValue className='w-32 shrink-0 text-right font-medium' />
+  </Slider>
+);
+```

package/dist/project/components/Slider/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/Slider/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 a,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,m=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,f=(e,t,r,l)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let n of u(t))d.call(e,n)||n===r||c(e,n,{get:()=>t[n],enumerable:!(l=s(t,n))||l.enumerable});return e},p={},h={$dispatcherGuard:()=>C,$makeReadOnly:()=>M,$reset:()=>k,$structuralCheck:()=>I,c:()=>R,clearRenderCounterRegistry:()=>D,renderCounterRegistry:()=>O,useRenderCounter:()=>V};for(var y in h)c(p,y,{get:h[y],enumerable:!0});e.exports=f(c({},"__esModule",{value:!0}),p);var b=(n=null!=(l=r("C"))?i(m(l)):{},f(l&&l.__esModule?n:c(n,"default",{value:l,enumerable:!0}),l)),{useRef:_,useEffect:S,isValidElement:w}=b,v=null!=(a=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?a:b.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,g=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(o=b.__COMPILER_RUNTIME)?void 0:o.c)?b.__COMPILER_RUNTIME.c:function(e){return b.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=g;return t[g]=!0,t},[])},E={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{E[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var $=null;function N(e){return v.ReactCurrentDispatcher.current=e,v.ReactCurrentDispatcher.current}E.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var x=[];function C(e){let t=v.ReactCurrentDispatcher.current;if(0===e){if(x.push(t),1===x.length&&($=t),t===E)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");N(E)}else if(1===e){let e=x.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===x.length&&($=null),N(e)}else if(2===e)x.push(t),N($);else if(3===e){let e=x.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 k(e){for(let t=0;t<e.length;t++)e[t]=g}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var O=new Map;function D(){for(let e of O.values())e.forEach(e=>{e.count=0})}function V(e){let t=_(null);null!=t.current&&(t.current.count+=1),S(()=>{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 j=new Set;function I(e,t,r,l,n,a){function o(e,t,o,i){let c=`${l}:${a} [${n}] ${r}${o} changed from ${e} to ${t} at depth ${i}`;j.has(c)||(j.add(c),console.error(c))}!function e(t,r,l,n){if(!(n>2)){if(t!==r)if(typeof t!=typeof r)o(`type ${typeof t}`,`type ${typeof r}`,l,n);else if("object"==typeof t){let a=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)o("null",`type ${typeof r}`,l,n);else if(null===r)o(`type ${typeof t}`,"null",l,n);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)o(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,l,n);else for(let[a,i]of t)r.has(a)?e(i,r.get(a),`${l}.get(${a})`,n+1):o(`Map instance with key ${a}`,`Map instance without key ${a}`,l,n);else o("Map instance","other value",l,n);else if(r instanceof Map)o("other value","Map instance",l,n);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)o(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,l,n);else for(let e of r)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,l,n);else o("Set instance","other value",l,n);else if(r instanceof Set)o("other value","Set instance",l,n);else if(a||i)if(a!==i)o(`type ${a?"array":"object"}`,`type ${i?"array":"object"}`,l,n);else if(t.length!==r.length)o(`array with length ${t.length}`,`array with length ${r.length}`,l,n);else for(let a=0;a<t.length;a++)e(t[a],r[a],`${l}[${a}]`,n+1);else if(w(t)||w(r))w(t)!==w(r)?o(`type ${w(t)?"React element":"object"}`,`type ${w(r)?"React element":"object"}`,l,n):t.type!==r.type?o(`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||o(`object without key ${e}`,`object with key ${e}`,l,n);for(let a in t)a in r?e(t[a],r[a],`${l}.${a}`,n+1):o(`object with key ${a}`,`object without key ${a}`,l,n)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,l,n):t!==r&&o(t,r,l,n)}}}(e,t,"",0)}},p(e,t,r){let l=new WeakMap,n=new WeakMap;function a(e,t,r){let a=t,o=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!=o.ref&&!a.prototype?.isReactComponent){let t=a,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)),a=n}if("string"==typeof a&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof a)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 a&&null!=o.ref&&(a=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 a=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 a.displayName=`CanvasHost(${t})`,r.set(t,a),a}(e,a)),{type:a,props:o}}function o(e){let t=(t,r,l)=>{let n=a(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=a(e,t,r??{}),{children:o,...i}=n.props;return e.createElement(n.type,void 0===l?i:{...i,key:l},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...l)=>{let n=a(e,t,r??{});return e.createElement(n.type,n.props,...l)},cloneElement:(t,r,...l)=>{let n=e.cloneElement(t,r??void 0,...l),o=n.ref,i=a(e,n.type,{...n.props,ref:o});return i.type===n.type&&"string"!=typeof n.type?n:e.createElement(i.type,{...i.props,key:n.key})}}}r.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,r){r.r(t);let l=(0,r("p").YJ)(window.React),{Children:n,Component:a,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:d,cloneElement:f,createContext:p,createElement:h,createFactory:y,createRef:b,forwardRef:_,isValidElement:S,lazy:w,memo:v,startTransition:g,unstable_act:R,useCallback:E,useContext:$,useDebugValue:N,useDeferredValue:x,useEffect:C,useId:k,useImperativeHandle:M,useInsertionEffect:O,useLayoutEffect:D,useMemo:V,useReducer:j,useRef:I,useState:W,useSyncExternalStore:T,useTransition:A,version:P,use:F}=l;r.d(t,{},{Children:n,Component:a,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:d,cloneElement:f,createContext:p,createElement:h,createFactory:y,createRef:b,default:l,forwardRef:_,isValidElement:S,lazy:w,memo:v,startTransition:g,unstable_act:R,use:F,useCallback:E,useContext:$,useDebugValue:N,useDeferredValue:x,useEffect:C,useId:k,useImperativeHandle:M,useInsertionEffect:O,useLayoutEffect:D,useMemo:V,useReducer:j,useRef:I,useState:W,useSyncExternalStore:T,useTransition:A,version:P})}},t={};function r(l){var n=t[l];if(void 0!==n)return n.exports;var a=t[l]={exports:{}};return e[l](a,a.exports,r),a.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 a=r("vD"),o=r("C");let i=window.WallarmDS.Field,c=window.WallarmDS.FieldDescription,s=window.WallarmDS.FieldError,u=window.WallarmDS.FieldLabel,m=window.WallarmDS.Slider,d=window.WallarmDS.SliderControl,f=window.WallarmDS.SliderInput,p=window.WallarmDS.SliderMarks,h=window.WallarmDS.SliderThumb,y=window.WallarmDS.SliderValue,b={title:"Inputs/Slider",component:m,parameters:{layout:"centered",docs:{description:{component:"Sets an approximate, bounded value by dragging along a track — reach for `NumberInput` when the exact figure matters, since a slider is faster to move than it is to land. A slider should always show its value: pair it with `SliderInput` for entry, or `SliderValue` for a readout. It implies a continuum, so a few fixed choices belong in `SegmentedControl`, `Radio` or `Select`, and on/off in `Switch`."}}},args:{defaultValue:[50],min:0,max:100,step:1,disabled:!1,error:!1},argTypes:{defaultValue:{control:"object"},value:{control:"object"},min:{control:"number"},max:{control:"number"},step:{control:"number"},disabled:{control:"boolean"},readOnly:{control:"boolean"},error:{control:"boolean"},onValueChange:{control:!1},onValueChangeEnd:{control:!1},ref:{control:!1}},decorators:[t=>e("div",{style:{width:380},children:e(t,{})})]},_=[{name:"Basic",story:t=>{let r,l,n=(0,a.c)(3);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(d,{children:e(h,{"aria-label":"Value"})}),n[0]=r):r=n[0],n[1]!==t?(l=e(m,{...t,children:r}),n[1]=t,n[2]=l):l=n[2],l},meta:b},{name:"Range",story:r=>{let l,n,o,i=(0,a.c)(4);return i[0]===Symbol.for("react.memo_cache_sentinel")?(l=[20,80],i[0]=l):l=i[0],i[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(d,{children:[e(h,{index:0}),e(h,{index:1})]}),i[1]=n):n=i[1],i[2]!==r?(o=e(m,{...r,defaultValue:l,children:n}),i[2]=r,i[3]=o):o=i[3],o},meta:b},{name:"Ticks",story:r=>{let l,n,o,i,c=(0,a.c)(5);return c[0]===Symbol.for("react.memo_cache_sentinel")?(l=[50],c[0]=l):l=c[0],c[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{"aria-label":"Volume"}),c[1]=n):n=c[1],c[2]===Symbol.for("react.memo_cache_sentinel")?(o=t(d,{children:[n,e(p,{marks:[{value:0,label:"0"},{value:25,label:"25"},{value:50,label:"50"},{value:75,label:"75"},{value:100,label:"100"}]})]}),c[2]=o):o=c[2],c[3]!==r?(i=e(m,{...r,step:25,defaultValue:l,children:o}),c[3]=r,c[4]=i):i=c[4],i},meta:b},{name:"TicksWithoutSnapping",story:r=>{let l,n,o,i,c=(0,a.c)(5);return c[0]===Symbol.for("react.memo_cache_sentinel")?(l=[40],c[0]=l):l=c[0],c[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{"aria-label":"Volume"}),c[1]=n):n=c[1],c[2]===Symbol.for("react.memo_cache_sentinel")?(o=t(d,{children:[n,e(p,{marks:[{value:0,label:"0"},{value:25,label:"25"},{value:50,label:"50"},{value:75,label:"75"},{value:100,label:"100"}]})]}),c[2]=o):o=c[2],c[3]!==r?(i=e(m,{...r,step:1,defaultValue:l,children:o}),c[3]=r,c[4]=i):i=c[4],i},meta:b},{name:"Labeled",story:r=>{let l,n,o,i,c=(0,a.c)(5);return c[0]===Symbol.for("react.memo_cache_sentinel")?(l=[50],c[0]=l):l=c[0],c[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{"aria-label":"Risk level"}),c[1]=n):n=c[1],c[2]===Symbol.for("react.memo_cache_sentinel")?(o=t(d,{children:[n,e(p,{marks:[{value:0,label:"Low"},{value:50,label:"Medium"},{value:100,label:"High"}]})]}),c[2]=o):o=c[2],c[3]!==r?(i=e(m,{...r,min:0,max:100,step:50,defaultValue:l,children:o}),c[3]=r,c[4]=i):i=c[4],i},meta:b},{name:"WithTooltip",story:t=>{let r,l,n=(0,a.c)(3);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(d,{children:e(h,{"aria-label":"Value",tooltip:!0})}),n[0]=r):r=n[0],n[1]!==t?(l=e(m,{...t,children:r}),n[1]=t,n[2]=l):l=n[2],l},meta:b},{name:"WithInput",story:r=>{let l,n,o,i=(0,a.c)(4);return i[0]===Symbol.for("react.memo_cache_sentinel")?(l=e(d,{children:e(h,{"aria-label":"Value"})}),n=e(f,{}),i[0]=l,i[1]=n):(l=i[0],n=i[1]),i[2]!==r?(o=t(m,{...r,"data-testid":"slider-with-input",children:[l,n]}),i[2]=r,i[3]=o):o=i[3],o},meta:b},{name:"RangeWithInput",story:r=>{let l,n,o,i,c,s=(0,a.c)(6);return s[0]===Symbol.for("react.memo_cache_sentinel")?(l=[20,80],s[0]=l):l=s[0],s[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(f,{index:0}),s[1]=n):n=s[1],s[2]===Symbol.for("react.memo_cache_sentinel")?(o=t(d,{children:[e(h,{index:0}),e(h,{index:1})]}),i=e(f,{index:1}),s[2]=o,s[3]=i):(o=s[2],i=s[3]),s[4]!==r?(c=t(m,{...r,defaultValue:l,"data-testid":"slider-range-with-input",children:[n,o,i]}),s[4]=r,s[5]=c):c=s[5],c},meta:b},{name:"Disabled",story:t=>{let r,l,n=(0,a.c)(3);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(d,{children:e(h,{"aria-label":"Value"})}),n[0]=r):r=n[0],n[1]!==t?(l=e(m,{...t,disabled:!0,children:r}),n[1]=t,n[2]=l):l=n[2],l},meta:b},{name:"InField",story:r=>{let l,n,o,s,f,p=(0,a.c)(7);return p[0]===Symbol.for("react.memo_cache_sentinel")?(l=e(u,{children:"Risk threshold"}),p[0]=l):l=p[0],p[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(d,{children:e(h,{})}),p[1]=n):n=p[1],p[2]!==r?(o=e(m,{...r,children:n}),p[2]=r,p[3]=o):o=p[3],p[4]===Symbol.for("react.memo_cache_sentinel")?(s=e(c,{children:"Approximate — fine-tune the exact value later."}),p[4]=s):s=p[4],p[5]!==o?(f=t(i,{children:[l,o,s]}),p[5]=o,p[6]=f):f=p[6],f},meta:b},{name:"FieldWithError",story:r=>{let l,n,o,c,f,p=(0,a.c)(7);return p[0]===Symbol.for("react.memo_cache_sentinel")?(l=e(u,{children:"Risk threshold"}),p[0]=l):l=p[0],p[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(d,{children:e(h,{})}),p[1]=n):n=p[1],p[2]!==r?(o=e(m,{...r,children:n}),p[2]=r,p[3]=o):o=p[3],p[4]===Symbol.for("react.memo_cache_sentinel")?(c=e(s,{children:"Enter a value between 0 and 100."}),p[4]=c):c=p[4],p[5]!==o?(f=t(i,{invalid:!0,children:[l,o,c]}),p[5]=o,p[6]=f):f=p[6],f},meta:b},{name:"FieldWithValue",story:r=>{let l,n,c,s,f,p,y=(0,a.c)(11);y[0]===Symbol.for("react.memo_cache_sentinel")?(l=[40],y[0]=l):l=y[0];let[b,_]=(0,o.useState)(l);return y[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(u,{children:"Risk threshold"}),y[1]=n):n=y[1],y[2]!==b[0]?(c=t("div",{className:"flex w-full items-center justify-between",children:[n,e("span",{className:"text-sm font-medium text-text-primary tabular-nums",children:b[0]})]}),y[2]=b[0],y[3]=c):c=y[3],y[4]===Symbol.for("react.memo_cache_sentinel")?(s=e(d,{children:e(h,{})}),y[4]=s):s=y[4],y[5]!==r||y[6]!==b?(f=e(m,{...r,value:b,onValueChange:_,children:s}),y[5]=r,y[6]=b,y[7]=f):f=y[7],y[8]!==c||y[9]!==f?(p=t(i,{children:[c,f]}),y[8]=c,y[9]=f,y[10]=p):p=y[10],p},meta:b},{name:"RangeFieldWithValue",story:r=>{let l,n,c,s,f,p,y,b=(0,a.c)(13);b[0]===Symbol.for("react.memo_cache_sentinel")?(l=[20,80],b[0]=l):l=b[0];let[_,S]=(0,o.useState)(l);return b[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(u,{children:"Risk range"}),b[1]=n):n=b[1],b[2]!==_?(c=_.join(", "),b[2]=_,b[3]=c):c=b[3],b[4]!==c?(s=t("div",{className:"flex w-full items-center justify-between",children:[n,e("span",{className:"text-sm font-medium text-text-primary tabular-nums",children:c})]}),b[4]=c,b[5]=s):s=b[5],b[6]===Symbol.for("react.memo_cache_sentinel")?(f=t(d,{children:[e(h,{index:0}),e(h,{index:1})]}),b[6]=f):f=b[6],b[7]!==r||b[8]!==_?(p=e(m,{...r,value:_,onValueChange:S,children:f}),b[7]=r,b[8]=_,b[9]=p):p=b[9],b[10]!==s||b[11]!==p?(y=t(i,{children:[s,p]}),b[10]=s,b[11]=p,b[12]=y):y=b[12],y},meta:b},{name:"WithValueReadout",story:r=>{let l,n,o,i,c=(0,a.c)(5);return c[0]===Symbol.for("react.memo_cache_sentinel")?(l=[60],c[0]=l):l=c[0],c[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(d,{children:e(h,{"aria-label":"Volume"})}),o=e(y,{className:"w-32 shrink-0 text-right font-medium"}),c[1]=n,c[2]=o):(n=c[1],o=c[2]),c[3]!==r?(i=t(m,{...r,defaultValue:l,children:[n,o]}),c[3]=r,c[4]=i):i=c[4],i},meta:b}];function S({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,a=()=>o.default.createElement(n,l),i={args:l,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 o.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},o.default.createElement("h2",{className:"text-sm mb-12"},e.name),o.default.createElement(a))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(o.default.createElement(window.WallarmDS.Root,null,_.map((e,t)=>o.default.createElement(S,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,192 @@
+The full-screen entrance for a cold start — the brand `Logo` over an indeterminate bar, shown once while the app boots. Never on a route change and never as a general loading veil: in-app waits belong to `Loader`, `Skeleton` or `Progress`, and `AppShell` ships its own first-load reveal, so run one or the other rather than both. You drive `visible` and nothing else — the phases between are internal — and since it enforces no minimum on-screen time, guarding against a flash on a fast boot is the caller’s job.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `visible` | `boolean \| undefined` | no | `true` |  |
+| `shrink-target` | `SplashScreenShrinkTarget \| undefined` | no | — |  |
+| `on-phase-change` | `((phase: PhaseType) => void) \| 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 | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+
+## Stories
+
+### Basic
+
+The splash as it looks while the app boots. `visible` defaults to `true`, so this is the state you mount it in.
+
+Source: SplashScreen/SplashScreen.stories.tsx#Basic
+
+### Toggle
+
+Flipping `visible` to false is the whole handover: with no `shrinkTarget` the splash fades out and unmounts, and any children are never shown.
+
+Source: SplashScreen/SplashScreen.stories.tsx#Toggle
+
+### ShrinkToCard
+
+With a `shrinkTarget` it morphs into that box and reveals its children inside — the entrance becomes the first view, typically a sign-in card.
+
+Source: SplashScreen/SplashScreen.stories.tsx#ShrinkToCard
+
+### MeasuredHeight
+
+The splash can measure its own content height when `shrinkTarget.height` is omitted — the animation shrinks to fit whatever you put inside, no hardcoded constant needed.
+
+Source: SplashScreen/SplashScreen.stories.tsx#MeasuredHeight
+
+## Story sources
+
+### SplashScreen/SplashScreen.stories.tsx
+
+```tsx
+import { useEffect, useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { AnimatedBackground } from '../AnimatedBackground';
+import { Button } from '../Button';
+import { Input } from '../Input';
+import { VStack } from '../Stack';
+import { Text } from '../Text';
+import { SplashScreen } from './SplashScreen';
+
+const DESCRIPTION = [
+  'The full-screen entrance for a cold start — the brand `Logo` over an indeterminate bar, shown once while the app boots.',
+  'Never on a route change and never as a general loading veil: in-app waits belong to `Loader`, `Skeleton` or `Progress`, and `AppShell` ships its own first-load reveal, so run one or the other rather than both.',
+  'You drive `visible` and nothing else — the phases between are internal — and since it enforces no minimum on-screen time, guarding against a flash on a fast boot is the caller’s job.',
+].join(' ');
+
+const meta = {
+  title: 'Loading/SplashScreen',
+  component: SplashScreen,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta<typeof SplashScreen>;
+
+export default meta;
+
+/** The splash as it looks while the app boots. `visible` defaults to `true`, so this is the state you mount it in. */
+export const Basic: StoryFn = () => <SplashScreen />;
+
+/** Flipping `visible` to false is the whole handover: with no `shrinkTarget` the splash fades out and unmounts, and any children are never shown. */
+export const Toggle: StoryFn = () => {
+  const [visible, setVisible] = useState(true);
+
+  return (
+    <VStack align='center'>
+      <div className='flex h-400 w-400 items-center justify-center'>
+        <SplashScreen visible={visible} />
+      </div>
+
+      <Button type='button' onClick={() => setVisible(v => !v)}>
+        {visible ? 'Hide' : 'Show'}
+      </Button>
+    </VStack>
+  );
+};
+
+/** With a `shrinkTarget` it morphs into that box and reveals its children inside — the entrance becomes the first view, typically a sign-in card. */
+export const ShrinkToCard: StoryFn = () => {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    if (!visible) return;
+
+    const timer = window.setTimeout(() => {
+      setVisible(false);
+    }, 2000);
+
+    return () => window.clearTimeout(timer);
+  }, [visible]);
+
+  return (
+    <div className='relative h-screen w-screen'>
+      <AnimatedBackground />
+
+      <div className='absolute inset-0 flex items-center justify-center'>
+        <SplashScreen
+          visible={visible}
+          shrinkTarget={{ width: 480, height: 600, borderRadius: 12 }}
+          className='bg-bg-page-bg shadow-lg'
+        >
+          <div className='flex h-full flex-col items-center justify-center gap-4 p-8'>
+            <h2 className='text-lg font-semibold text-text-primary'>Welcome</h2>
+            <p className='text-center text-sm text-text-secondary'>
+              Content revealed after splash animation.
+            </p>
+            <Button type='button' onClick={() => setVisible(true)}>
+              Replay
+            </Button>
+          </div>
+        </SplashScreen>
+      </div>
+    </div>
+  );
+};
+
+ShrinkToCard.parameters = {
+  layout: 'fullscreen',
+};
+
+/** The splash can measure its own content height when `shrinkTarget.height` is omitted — the animation shrinks to fit whatever you put inside, no hardcoded constant needed. */
+export const MeasuredHeight: StoryFn = () => {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    if (!visible) return;
+
+    const timer = window.setTimeout(() => {
+      setVisible(false);
+    }, 2000);
+
+    return () => window.clearTimeout(timer);
+  }, [visible]);
+
+  const handleSignIn = () => {
+    setVisible(true);
+  };
+
+  return (
+    <div className='relative h-screen w-screen'>
+      <AnimatedBackground />
+
+      <div className='absolute inset-0 flex items-center justify-center'>
+        <SplashScreen
+          visible={visible}
+          shrinkTarget={{ width: 480, borderRadius: 12 }}
+          className='bg-bg-page-bg shadow-lg'
+        >
+          <div className='flex h-full w-full flex-col items-center justify-center gap-16 p-24'>
+            <Text size='xl'>Sign In</Text>
+            <div className='flex w-full flex-col gap-12'>
+              <Input placeholder='Email' />
+              <Input placeholder='Password' type='password' />
+            </div>
+            <Button variant='primary' color='brand' className='w-full' onClick={handleSignIn}>
+              Sign In
+            </Button>
+          </div>
+        </SplashScreen>
+      </div>
+    </div>
+  );
+};
+
+MeasuredHeight.parameters = {
+  layout: 'fullscreen',
+};
+```

package/dist/project/components/SplashScreen/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>