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

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

@@ -0,0 +1,174 @@
+A linear bar for an operation you can measure, or a long or multi-step one where watching it advance is the reassurance — a short in-context wait is a `Loader`, and a page loading a known layout is `Skeleton`. `value={null}` makes it indeterminate: use that rather than a spinner for a long wait you cannot measure, switch to a real number the moment you can, and never fake a percentage. Linear only — the system has no circular progress, so do not hand-roll a ring.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `value` | `number \| null \| undefined` | no | — | Progress value (0–max). Pass `null` for indeterminate state. |
+| `min` | `number \| undefined` | no | `0` |  |
+| `max` | `number \| undefined` | no | `100` |  |
+| `size` | `"xs" \| "sm" \| "md" \| "lg"` | no | `xs` |  |
+| `color` | `"brand" \| "slate" \| "red" \| "w-orange" \| "amber" \| "yellow" \| "lime" \| "green" \| "emerald" \| "teal" \| "cyan" \| "sky" \| "blue" \| "indigo" \| "violet" \| "fuchsia" \| "pink" \| "rose" \| "gray" \| "zinc" \| "neutral" \| "stone"` | no | `brand` |  |
+| `show-label` | `boolean \| undefined` | no | `false` |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Stories
+
+### Basic
+
+The determinate bar: `value` against `min` and `max`. The controls are live, so this is also the place to try a size or a colour.
+
+Source: Progress/Progress.stories.tsx#Basic
+
+### Sizes
+
+`xs` through `lg`. A thin bar belongs in an inline row; the heavier ones are for an operation the screen is actually about.
+
+Source: Progress/Progress.stories.tsx#Sizes
+
+### WithLabel
+
+`showLabel` prints the percentage — worth it on a long or standalone job where the number reassures, noise on a thin inline bar.
+
+Source: Progress/Progress.stories.tsx#WithLabel
+
+### Colors
+
+The full palette, though `brand` is the default for a reason: reach for another only when the colour says something true about the job, such as red for one that is failing.
+
+Source: Progress/Progress.stories.tsx#Colors
+
+### Indeterminate
+
+`value={null}` cycles the range instead of filling it, which is the honest way to show a long wait you cannot measure.
+
+Source: Progress/Progress.stories.tsx#Indeterminate
+
+## Story sources
+
+### Progress/Progress.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { VStack } from '../Stack';
+import { ProgressColorEnum } from './constants';
+import type { ProgressProps } from './Progress';
+import { Progress } from './Progress';
+
+const DESCRIPTION = [
+  'A linear bar for an operation you can measure, or a long or multi-step one where watching it advance is the reassurance — a short in-context wait is a `Loader`, and a page loading a known layout is `Skeleton`.',
+  '`value={null}` makes it indeterminate: use that rather than a spinner for a long wait you cannot measure, switch to a real number the moment you can, and never fake a percentage.',
+  'Linear only — the system has no circular progress, so do not hand-roll a ring.',
+].join(' ');
+
+const meta = {
+  title: 'Loading/Progress',
+  component: Progress,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  argTypes: {
+    value: {
+      control: { type: 'number', min: 1 },
+    },
+    min: {
+      control: { type: 'number' },
+    },
+    max: {
+      control: { type: 'number', min: 1 },
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg'],
+    },
+    color: {
+      control: 'select',
+      options: Object.values(ProgressColorEnum),
+    },
+    showLabel: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Progress>;
+
+export default meta;
+
+/** The determinate bar: `value` against `min` and `max`. The controls are live, so this is also the place to try a size or a colour. */
+export const Basic: StoryFn<ProgressProps> = args => (
+  <div className='w-280'>
+    <Progress {...args} />
+  </div>
+);
+
+Basic.args = {
+  value: 70,
+  min: 0,
+  max: 100,
+  size: 'xs',
+  color: 'brand',
+  showLabel: false,
+};
+
+const sizeRows = [
+  { size: 'xs', label: 'xs (default)', value: 20 },
+  { size: 'sm', label: 'sm', value: 40 },
+  { size: 'md', label: 'md', value: 60 },
+  { size: 'lg', label: 'lg', value: 80 },
+] as const;
+
+/** `xs` through `lg`. A thin bar belongs in an inline row; the heavier ones are for an operation the screen is actually about. */
+export const Sizes: StoryFn<typeof meta> = () => (
+  <div className='flex w-[360px] flex-col gap-16'>
+    {sizeRows.map(({ size, label, value }) => (
+      <div key={size} className='flex items-center gap-16'>
+        <span className='sb-annotation w-[112px] shrink-0'>{label}</span>
+        <Progress value={value} size={size} className='flex-1' />
+      </div>
+    ))}
+  </div>
+);
+
+/** `showLabel` prints the percentage — worth it on a long or standalone job where the number reassures, noise on a thin inline bar. */
+export const WithLabel: StoryFn<typeof meta> = () => (
+  <div className='w-280'>
+    <VStack>
+      <Progress value={20} showLabel />
+      <Progress value={40} showLabel size='sm' />
+      <Progress value={60} showLabel size='md' />
+      <Progress value={80} showLabel size='lg' />
+    </VStack>
+  </div>
+);
+
+/** The full palette, though `brand` is the default for a reason: reach for another only when the colour says something true about the job, such as red for one that is failing. */
+export const Colors: StoryFn<typeof meta> = () => (
+  <div className='flex w-[360px] flex-col gap-16'>
+    {Object.entries(ProgressColorEnum).map(([key, color], index) => (
+      <div key={color} className='flex items-center gap-16'>
+        <span className='sb-annotation w-[112px] shrink-0'>{key}</span>
+        <Progress
+          value={index + 1}
+          max={Object.entries(ProgressColorEnum).length}
+          color={color}
+          size='sm'
+          className='flex-1'
+        />
+      </div>
+    ))}
+  </div>
+);
+
+/** `value={null}` cycles the range instead of filling it, which is the honest way to show a long wait you cannot measure. */
+export const Indeterminate: StoryFn<typeof meta> = () => (
+  <div className='w-280'>
+    <Progress value={null} />
+  </div>
+);
+```

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Loading" height=480 -->
+<!doctype html><html><head><meta charset="utf-8"></head><body><div id="preview"></div><script src="./stories.js"></script><script>window.WallarmPreview.mount(document.getElementById('preview'));</script></body></html>

package/dist/project/components/Progress/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,a;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var l,o,i=Object.create,s=Object.defineProperty,c=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,m=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))p.call(e,a)||a===r||s(e,a,{get:()=>t[a],enumerable:!(n=c(t,a))||n.enumerable});return e},d={},y={$dispatcherGuard:()=>C,$makeReadOnly:()=>k,$reset:()=>O,$structuralCheck:()=>L,c:()=>_,clearRenderCounterRegistry:()=>j,renderCounterRegistry:()=>M,useRenderCounter:()=>z};for(var h in y)s(d,h,{get:y[h],enumerable:!0});e.exports=m(s({},"__esModule",{value:!0}),d);var g=(a=null!=(n=r("C"))?i(f(n)):{},m(n&&n.__esModule?a:s(a,"default",{value:n,enumerable:!0}),n)),{useRef:v,useEffect:w,isValidElement:b}=g,E=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,R=Symbol.for("react.memo_cache_sentinel"),_="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 r=0;r<e;r++)t[r]=R;return t[R]=!0,t},[])},$={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{$[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var N=null;function S(e){return E.ReactCurrentDispatcher.current=e,E.ReactCurrentDispatcher.current}$.useMemoCache=e=>{if(null!=N)return N.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var x=[];function C(e){let t=E.ReactCurrentDispatcher.current;if(0===e){if(x.push(t),1===x.length&&(N=t),t===$)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");S($)}else if(1===e){let e=x.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===x.length&&(N=null),S(e)}else if(2===e)x.push(t),S(N);else if(3===e){let e=x.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");S(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function O(e){for(let t=0;t<e.length;t++)e[t]=R}function k(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var M=new Map;function j(){for(let e of M.values())e.forEach(e=>{e.count=0})}function z(e){let t=v(null);null!=t.current&&(t.current.count+=1),w(()=>{if(null==t.current){let r,n={count:0};null==(r=M.get(e))&&(r=new Set,M.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=M.get(e))&&n.delete(r))}})}var D=new Set;function L(e,t,r,n,a,l){function o(e,t,o,i){let s=`${n}:${l} [${a}] ${r}${o} changed from ${e} to ${t} at depth ${i}`;D.has(s)||(D.add(s),console.error(s))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)o(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)o("null",`type ${typeof r}`,n,a);else if(null===r)o(`type ${typeof t}`,"null",n,a);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}`,n,a);else for(let[l,i]of t)r.has(l)?e(i,r.get(l),`${n}.get(${l})`,a+1):o(`Map instance with key ${l}`,`Map instance without key ${l}`,n,a);else o("Map instance","other value",n,a);else if(r instanceof Map)o("other value","Map instance",n,a);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}`,n,a);else for(let e of r)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else o("Set instance","other value",n,a);else if(r instanceof Set)o("other value","Set instance",n,a);else if(l||i)if(l!==i)o(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,n,a);else if(t.length!==r.length)o(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${n}[${l}]`,a+1);else if(b(t)||b(r))b(t)!==b(r)?o(`type ${b(t)?"React element":"object"}`,`type ${b(r)?"React element":"object"}`,n,a):t.type!==r.type?o(`React element of type ${t.type}`,`React element of type ${r.type}`,n,a):e(t.props,r.props,`[props of ${n}]`,a+1);else{for(let e in r)e in t||o(`object without key ${e}`,`object with key ${e}`,n,a);for(let l in t)l in r?e(t[l],r[l],`${n}.${l}`,a+1):o(`object with key ${l}`,`object without key ${l}`,n,a)}}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"}`,n,a):t!==r&&o(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=new WeakMap;function l(e,t,r){let l=t,o=r;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,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let a=r.get(t);a||((a=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,a)),l=a}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 r=a.get(e);r||(r=new Map,a.set(e,r));let n=r.get(t);if(n)return n;let l=e.forwardRef((r,n)=>{let a=e.useRef(null);if(!a.current||a.current.original!==n){let e;a.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let r=n(t);e="function"==typeof r?r:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...r,ref:a.current.callback})});return l.displayName=`CanvasHost(${t})`,r.set(t,l),l}(e,l)),{type:l,props:o}}function o(e){let t=(t,r,n)=>{let a=l(e,t,r??{});return e.createElement(a.type,void 0===n?a.props:{...a.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let a=l(e,t,r??{}),{children:o,...i}=a.props;return e.createElement(a.type,void 0===n?i:{...i,key:n},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let a=l(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),o=a.ref,i=l(e,a.type,{...a.props,ref:o});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}r.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:s,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:m,createContext:d,createElement:y,createFactory:h,createRef:g,forwardRef:v,isValidElement:w,lazy:b,memo:E,startTransition:R,unstable_act:_,useCallback:$,useContext:N,useDebugValue:S,useDeferredValue:x,useEffect:C,useId:O,useImperativeHandle:k,useInsertionEffect:M,useLayoutEffect:j,useMemo:z,useReducer:D,useRef:L,useState:T,useSyncExternalStore:P,useTransition:I,version:A,use:W}=n;r.d(t,{},{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:s,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:m,createContext:d,createElement:y,createFactory:h,createRef:g,default:n,forwardRef:v,isValidElement:w,lazy:b,memo:E,startTransition:R,unstable_act:_,use:W,useCallback:$,useContext:N,useDebugValue:S,useDeferredValue:x,useEffect:C,useId:O,useImperativeHandle:k,useInsertionEffect:M,useLayoutEffect:j,useMemo:z,useReducer:D,useRef:L,useState:T,useSyncExternalStore:P,useTransition:I,version:A})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,r),l.exports}r.d=(e,t,n)=>{var a=(t,n)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[n]:t[a]})};a(t,"get"),a(n,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:n,Fragment:a}=(0,r("p").MA)(window.React);var l=r("vD");let o=window.WallarmDS.VStack,i=window.WallarmDS.ProgressColorEnum,s=window.WallarmDS.Progress,c={title:"Loading/Progress",component:s,parameters:{layout:"centered",docs:{description:{component:"A linear bar for an operation you can measure, or a long or multi-step one where watching it advance is the reassurance — a short in-context wait is a `Loader`, and a page loading a known layout is `Skeleton`. `value={null}` makes it indeterminate: use that rather than a spinner for a long wait you cannot measure, switch to a real number the moment you can, and never fake a percentage. Linear only — the system has no circular progress, so do not hand-roll a ring."}}},argTypes:{value:{control:{type:"number",min:1}},min:{control:{type:"number"}},max:{control:{type:"number",min:1}},size:{control:"select",options:["xs","sm","md","lg"]},color:{control:"select",options:Object.values(i)},showLabel:{control:"boolean"}}},u=t=>{let r,n=(0,l.c)(2);return n[0]!==t?(r=e("div",{className:"w-280",children:e(s,{...t})}),n[0]=t,n[1]=r):r=n[1],r};u.args={value:70,min:0,max:100,size:"xs",color:"brand",showLabel:!1};let f=[{size:"xs",label:"xs (default)",value:20},{size:"sm",label:"sm",value:40},{size:"md",label:"md",value:60},{size:"lg",label:"lg",value:80}];function p(r){let{size:n,label:a,value:l}=r;return t("div",{className:"flex items-center gap-16",children:[e("span",{className:"sb-annotation w-[112px] shrink-0",children:a}),e(s,{value:l,size:n,className:"flex-1"})]},n)}function m(r,n){let[a,l]=r;return t("div",{className:"flex items-center gap-16",children:[e("span",{className:"sb-annotation w-[112px] shrink-0",children:a}),e(s,{value:n+1,max:Object.entries(i).length,color:l,size:"sm",className:"flex-1"})]},l)}var d=r("C");let y=[{name:"Basic",story:u,meta:c},{name:"Sizes",story:()=>{let t,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"flex w-[360px] flex-col gap-16",children:f.map(p)}),r[0]=t):t=r[0],t},meta:c},{name:"WithLabel",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-280",children:t(o,{children:[e(s,{value:20,showLabel:!0}),e(s,{value:40,showLabel:!0,size:"sm"}),e(s,{value:60,showLabel:!0,size:"md"}),e(s,{value:80,showLabel:!0,size:"lg"})]})}),n[0]=r):r=n[0],r},meta:c},{name:"Colors",story:()=>{let t,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"flex w-[360px] flex-col gap-16",children:Object.entries(i).map(m)}),r[0]=t):t=r[0],t},meta:c},{name:"Indeterminate",story:()=>{let t,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-280",children:e(s,{value:null})}),r[0]=t):t=r[0],t},meta:c}];function h({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,l=()=>d.default.createElement(a,n),o={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,o)}return d.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},d.default.createElement("h2",{className:"text-sm mb-12"},e.name),d.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(d.default.createElement(window.WallarmDS.Root,null,y.map((e,t)=>d.default.createElement(h,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,264 @@
+Picks exactly one option from a set — reach for `Checkbox` when several answers can be true at once, and `Select` past roughly ten options. Radios cannot be cleared once chosen, so include the neutral answer as an option rather than expecting the reader to undo.
+
+## 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 | — |  |
+| `disabled` | `boolean \| undefined` | no | — |  |
+| `value` | `string` | yes | — |  |
+| `as-child` | `boolean \| undefined` | no | — | Use the provided child element as the default rendered element, combining their props and behavior. |
+| `html-for` | `string \| undefined` | no | — |  |
+| `invalid` | `boolean \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.RadioDescription` — `RadioDescriptionProps` in the declaration bundle.
+- `WallarmDS.RadioGroup` — `RadioGroupProps` in the declaration bundle.
+- `WallarmDS.RadioLabel` — `RadioLabelProps` in the declaration bundle.
+- `WallarmDS.RadioIndicator` — `RadioIndicatorProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+`RadioGroup` ties the options to one `name` and one value; each `Radio` composes
+`RadioIndicator` and `RadioLabel`. Give the group a `defaultValue` — an unset group makes the
+reader answer a question they may not have.
+
+Source: Radio/Radio.stories.tsx#Basic
+
+### Card
+
+`variant='card'` gives every option its own bordered surface. As with `Checkbox`, cards
+exist to carry a `RadioDescription` — a card holding a bare label wastes the room it asks for.
+
+Source: Radio/Radio.stories.tsx#Card
+
+### FormField
+
+Wrapped in `Field`, so the question above the options comes from `FieldLabel` and
+`FieldDescription`. Shown as plain rows and as cards.
+
+Source: Radio/Radio.stories.tsx#FormField
+
+## Story sources
+
+### Radio/Radio.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Info } from '../../icons';
+import { Field, FieldDescription, FieldLabel } from '../Field';
+import { HStack } from '../Stack';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../Tooltip';
+import { Radio } from './Radio';
+import { RadioDescription } from './RadioDescription';
+import { RadioGroup } from './RadioGroup';
+import { RadioIndicator } from './RadioIndicator';
+import { RadioLabel } from './RadioLabel';
+
+const DESCRIPTION = [
+  'Picks exactly one option from a set — reach for `Checkbox` when several answers can be true at once, and `Select` past roughly ten options.',
+  'Radios cannot be cleared once chosen, so include the neutral answer as an option rather than expecting the reader to undo.',
+].join(' ');
+
+const meta = {
+  title: 'Inputs/Radio',
+  component: Radio,
+  subcomponents: {
+    RadioGroup,
+    RadioIndicator,
+    RadioLabel,
+    RadioDescription,
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta<typeof Radio>;
+
+export default meta;
+
+/**
+ * `RadioGroup` ties the options to one `name` and one value; each `Radio` composes
+ * `RadioIndicator` and `RadioLabel`. Give the group a `defaultValue` — an unset group makes the
+ * reader answer a question they may not have.
+ */
+export const Basic: StoryFn<typeof meta> = () => (
+  <RadioGroup name='framework' defaultValue='svelte'>
+    <Radio value='react' data-testid='radio-react'>
+      <RadioIndicator />
+      <RadioLabel>React</RadioLabel>
+      <RadioDescription>
+        By selected this value, you agree to the terms and conditions.
+      </RadioDescription>
+    </Radio>
+
+    <Radio value='solid'>
+      <RadioIndicator />
+      <RadioLabel>
+        Solid
+        <Tooltip>
+          <TooltipTrigger>
+            <Info />
+          </TooltipTrigger>
+          <TooltipContent>Additional information</TooltipContent>
+        </Tooltip>
+      </RadioLabel>
+    </Radio>
+
+    <Radio value='vue' disabled>
+      <RadioIndicator />
+      <RadioLabel>Vue</RadioLabel>
+    </Radio>
+
+    <Radio value='svelte'>
+      <RadioIndicator />
+      <RadioLabel>Svelte</RadioLabel>
+    </Radio>
+  </RadioGroup>
+);
+
+/**
+ * `variant='card'` gives every option its own bordered surface. As with `Checkbox`, cards
+ * exist to carry a `RadioDescription` — a card holding a bare label wastes the room it asks for.
+ */
+export const Card: StoryFn<typeof meta> = () => (
+  <RadioGroup variant='card' name='framework' defaultValue='vue'>
+    <Radio value='react'>
+      <RadioIndicator />
+      <RadioLabel>React</RadioLabel>
+      <RadioDescription>
+        By selected this value, you agree to the terms and conditions.
+      </RadioDescription>
+    </Radio>
+
+    <Radio value='solid'>
+      <RadioIndicator />
+      <RadioLabel>
+        Solid
+        <Tooltip>
+          <TooltipTrigger>
+            <Info />
+          </TooltipTrigger>
+          <TooltipContent>Additional information</TooltipContent>
+        </Tooltip>
+      </RadioLabel>
+    </Radio>
+
+    <Radio value='vue' disabled>
+      <RadioIndicator />
+      <RadioLabel>Vue</RadioLabel>
+      <RadioDescription>
+        By selected this value, you agree to the terms and conditions.
+      </RadioDescription>
+    </Radio>
+
+    <Radio value='svelte'>
+      <RadioIndicator />
+      <RadioLabel>Svelte</RadioLabel>
+    </Radio>
+  </RadioGroup>
+);
+
+/**
+ * Wrapped in `Field`, so the question above the options comes from `FieldLabel` and
+ * `FieldDescription`. Shown as plain rows and as cards.
+ */
+export const FormField: StoryFn<typeof meta> = () => (
+  <HStack align='start' gap={40}>
+    <Field>
+      <FieldLabel>
+        Label
+        <Tooltip>
+          <TooltipTrigger>
+            <Info />
+          </TooltipTrigger>
+          <TooltipContent>Additional information</TooltipContent>
+        </Tooltip>
+      </FieldLabel>
+
+      <FieldDescription>This is an input description.</FieldDescription>
+
+      <RadioGroup name='framework' defaultValue='svelte'>
+        <Radio value='react'>
+          <RadioIndicator />
+          <RadioLabel>React</RadioLabel>
+          <RadioDescription>
+            By selected this value, you agree to the terms and conditions.
+          </RadioDescription>
+        </Radio>
+
+        <Radio value='solid'>
+          <RadioIndicator />
+          <RadioLabel>Solid</RadioLabel>
+        </Radio>
+
+        <Radio value='vue' disabled>
+          <RadioIndicator />
+          <RadioLabel>Vue</RadioLabel>
+        </Radio>
+
+        <Radio value='svelte'>
+          <RadioIndicator />
+          <RadioLabel>Svelte</RadioLabel>
+        </Radio>
+      </RadioGroup>
+    </Field>
+
+    <Field>
+      <FieldLabel>
+        Label
+        <Tooltip>
+          <TooltipTrigger>
+            <Info />
+          </TooltipTrigger>
+          <TooltipContent>Additional information</TooltipContent>
+        </Tooltip>
+      </FieldLabel>
+
+      <FieldDescription>This is an input description.</FieldDescription>
+
+      <RadioGroup variant='card' name='framework' defaultValue='svelte'>
+        <Radio value='react'>
+          <RadioIndicator />
+          <RadioLabel>React</RadioLabel>
+          <RadioDescription>
+            By selected this value, you agree to the terms and conditions.
+          </RadioDescription>
+        </Radio>
+
+        <Radio value='solid'>
+          <RadioIndicator />
+          <RadioLabel>Solid</RadioLabel>
+        </Radio>
+
+        <Radio value='vue' disabled>
+          <RadioIndicator />
+          <RadioLabel>Vue</RadioLabel>
+        </Radio>
+
+        <Radio value='svelte'>
+          <RadioIndicator />
+          <RadioLabel>Svelte</RadioLabel>
+        </Radio>
+      </RadioGroup>
+    </Field>
+  </HStack>
+);
+```

package/dist/project/components/Radio/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/Radio/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,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,m=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of u(t))f.call(e,l)||l===r||c(e,l,{get:()=>t[l],enumerable:!(n=s(t,l))||n.enumerable});return e},h={},p={$dispatcherGuard:()=>k,$makeReadOnly:()=>O,$reset:()=>D,$structuralCheck:()=>I,c:()=>g,clearRenderCounterRegistry:()=>T,renderCounterRegistry:()=>M,useRenderCounter:()=>j};for(var y in p)c(h,y,{get:p[y],enumerable:!0});e.exports=m(c({},"__esModule",{value:!0}),h);var v=(l=null!=(n=r("C"))?i(d(n)):{},m(n&&n.__esModule?l:c(l,"default",{value:n,enumerable:!0}),n)),{useRef:_,useEffect:S,isValidElement:w}=v,b=null!=(a=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?a:v.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,R=Symbol.for("react.memo_cache_sentinel"),g="function"==typeof(null==(o=v.__COMPILER_RUNTIME)?void 0:o.c)?v.__COMPILER_RUNTIME.c:function(e){return v.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=R;return t[R]=!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 b.ReactCurrentDispatcher.current=e,b.ReactCurrentDispatcher.current}E.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function k(e){let t=b.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.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=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===C.length&&($=null),N(e)}else if(2===e)C.push(t),N($);else if(3===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");N(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function D(e){for(let t=0;t<e.length;t++)e[t]=R}function O(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var M=new Map;function T(){for(let e of M.values())e.forEach(e=>{e.count=0})}function j(e){let t=_(null);null!=t.current&&(t.current.count+=1),S(()=>{if(null==t.current){let r,n={count:0};null==(r=M.get(e))&&(r=new Set,M.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=M.get(e))&&n.delete(r))}})}var x=new Set;function I(e,t,r,n,l,a){function o(e,t,o,i){let c=`${n}:${a} [${l}] ${r}${o} changed from ${e} to ${t} at depth ${i}`;x.has(c)||(x.add(c),console.error(c))}!function e(t,r,n,l){if(!(l>2)){if(t!==r)if(typeof t!=typeof r)o(`type ${typeof t}`,`type ${typeof r}`,n,l);else if("object"==typeof t){let a=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)o("null",`type ${typeof r}`,n,l);else if(null===r)o(`type ${typeof t}`,"null",n,l);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}`,n,l);else for(let[a,i]of t)r.has(a)?e(i,r.get(a),`${n}.get(${a})`,l+1):o(`Map instance with key ${a}`,`Map instance without key ${a}`,n,l);else o("Map instance","other value",n,l);else if(r instanceof Map)o("other value","Map instance",n,l);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}`,n,l);else for(let e of r)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,n,l);else o("Set instance","other value",n,l);else if(r instanceof Set)o("other value","Set instance",n,l);else if(a||i)if(a!==i)o(`type ${a?"array":"object"}`,`type ${i?"array":"object"}`,n,l);else if(t.length!==r.length)o(`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(w(t)||w(r))w(t)!==w(r)?o(`type ${w(t)?"React element":"object"}`,`type ${w(r)?"React element":"object"}`,n,l):t.type!==r.type?o(`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||o(`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):o(`object with key ${a}`,`object without key ${a}`,n,l)}}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"}`,n,l):t!==r&&o(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,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=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 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=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:o}}function o(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:o,...i}=l.props;return e.createElement(l.type,void 0===n?i:{...i,key:n},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function i(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),o=l.ref,i=a(e,l.type,{...l.props,ref:o});return i.type===l.type&&"string"!=typeof l.type?l:e.createElement(i.type,{...i.props,key:l.key})}}}r.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:l,Component:a,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:f,cloneElement:m,createContext:h,createElement:p,createFactory:y,createRef:v,forwardRef:_,isValidElement:S,lazy:w,memo:b,startTransition:R,unstable_act:g,useCallback:E,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:D,useImperativeHandle:O,useInsertionEffect:M,useLayoutEffect:T,useMemo:j,useReducer:x,useRef:I,useState:A,useSyncExternalStore:W,useTransition:P,version:L,use:V}=n;r.d(t,{},{Children:l,Component:a,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:f,cloneElement:m,createContext:h,createElement:p,createFactory:y,createRef:v,default:n,forwardRef:_,isValidElement:S,lazy:w,memo:b,startTransition:R,unstable_act:g,use:V,useCallback:E,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:D,useImperativeHandle:O,useInsertionEffect:M,useLayoutEffect:T,useMemo:j,useReducer:x,useRef:I,useState:A,useSyncExternalStore:W,useTransition:P,version:L})}},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 o=window.WallarmDS.Icons.Info,i=window.WallarmDS.Field,c=window.WallarmDS.FieldDescription,s=window.WallarmDS.FieldLabel,u=window.WallarmDS.HStack,d=window.WallarmDS.Tooltip,f=window.WallarmDS.TooltipContent,m=window.WallarmDS.TooltipTrigger,h=window.WallarmDS.Radio,p=window.WallarmDS.RadioDescription,y=window.WallarmDS.RadioGroup,v=window.WallarmDS.RadioIndicator,_=window.WallarmDS.RadioLabel,S={title:"Inputs/Radio",component:h,subcomponents:{RadioGroup:y,RadioIndicator:v,RadioLabel:_,RadioDescription:p},parameters:{layout:"centered",docs:{description:{component:"Picks exactly one option from a set — reach for `Checkbox` when several answers can be true at once, and `Select` past roughly ten options. Radios cannot be cleared once chosen, so include the neutral answer as an option rather than expecting the reader to undo."}}}};var w=r("C");let b=[{name:"Basic",story:()=>{let r,n,l,i,c,s=(0,a.c)(5);return s[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(h,{value:"react","data-testid":"radio-react",children:[e(v,{}),e(_,{children:"React"}),e(p,{children:"By selected this value, you agree to the terms and conditions."})]}),s[0]=r):r=s[0],s[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(v,{}),s[1]=n):n=s[1],s[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(h,{value:"solid",children:[n,t(_,{children:["Solid",t(d,{children:[e(m,{children:e(o,{})}),e(f,{children:"Additional information"})]})]})]}),s[2]=l):l=s[2],s[3]===Symbol.for("react.memo_cache_sentinel")?(i=t(h,{value:"vue",disabled:!0,children:[e(v,{}),e(_,{children:"Vue"})]}),s[3]=i):i=s[3],s[4]===Symbol.for("react.memo_cache_sentinel")?(c=t(y,{name:"framework",defaultValue:"svelte",children:[r,l,i,t(h,{value:"svelte",children:[e(v,{}),e(_,{children:"Svelte"})]})]}),s[4]=c):c=s[4],c},meta:S},{name:"Card",story:()=>{let r,n,l,i,c,s=(0,a.c)(5);return s[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(h,{value:"react",children:[e(v,{}),e(_,{children:"React"}),e(p,{children:"By selected this value, you agree to the terms and conditions."})]}),s[0]=r):r=s[0],s[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(v,{}),s[1]=n):n=s[1],s[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(h,{value:"solid",children:[n,t(_,{children:["Solid",t(d,{children:[e(m,{children:e(o,{})}),e(f,{children:"Additional information"})]})]})]}),s[2]=l):l=s[2],s[3]===Symbol.for("react.memo_cache_sentinel")?(i=t(h,{value:"vue",disabled:!0,children:[e(v,{}),e(_,{children:"Vue"}),e(p,{children:"By selected this value, you agree to the terms and conditions."})]}),s[3]=i):i=s[3],s[4]===Symbol.for("react.memo_cache_sentinel")?(c=t(y,{variant:"card",name:"framework",defaultValue:"vue",children:[r,l,i,t(h,{value:"svelte",children:[e(v,{}),e(_,{children:"Svelte"})]})]}),s[4]=c):c=s[4],c},meta:S},{name:"FormField",story:()=>{let r,n,l,S,w,b,R,g,E,$,N,C,k=(0,a.c)(12);return k[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(s,{children:["Label",t(d,{children:[e(m,{children:e(o,{})}),e(f,{children:"Additional information"})]})]}),n=e(c,{children:"This is an input description."}),k[0]=r,k[1]=n):(r=k[0],n=k[1]),k[2]===Symbol.for("react.memo_cache_sentinel")?(l=t(h,{value:"react",children:[e(v,{}),e(_,{children:"React"}),e(p,{children:"By selected this value, you agree to the terms and conditions."})]}),k[2]=l):l=k[2],k[3]===Symbol.for("react.memo_cache_sentinel")?(S=t(h,{value:"solid",children:[e(v,{}),e(_,{children:"Solid"})]}),k[3]=S):S=k[3],k[4]===Symbol.for("react.memo_cache_sentinel")?(w=t(h,{value:"vue",disabled:!0,children:[e(v,{}),e(_,{children:"Vue"})]}),k[4]=w):w=k[4],k[5]===Symbol.for("react.memo_cache_sentinel")?(b=t(i,{children:[r,n,t(y,{name:"framework",defaultValue:"svelte",children:[l,S,w,t(h,{value:"svelte",children:[e(v,{}),e(_,{children:"Svelte"})]})]})]}),k[5]=b):b=k[5],k[6]===Symbol.for("react.memo_cache_sentinel")?(R=t(s,{children:["Label",t(d,{children:[e(m,{children:e(o,{})}),e(f,{children:"Additional information"})]})]}),g=e(c,{children:"This is an input description."}),k[6]=R,k[7]=g):(R=k[6],g=k[7]),k[8]===Symbol.for("react.memo_cache_sentinel")?(E=t(h,{value:"react",children:[e(v,{}),e(_,{children:"React"}),e(p,{children:"By selected this value, you agree to the terms and conditions."})]}),k[8]=E):E=k[8],k[9]===Symbol.for("react.memo_cache_sentinel")?($=t(h,{value:"solid",children:[e(v,{}),e(_,{children:"Solid"})]}),k[9]=$):$=k[9],k[10]===Symbol.for("react.memo_cache_sentinel")?(N=t(h,{value:"vue",disabled:!0,children:[e(v,{}),e(_,{children:"Vue"})]}),k[10]=N):N=k[10],k[11]===Symbol.for("react.memo_cache_sentinel")?(C=t(u,{align:"start",gap:40,children:[b,t(i,{children:[R,g,t(y,{variant:"card",name:"framework",defaultValue:"svelte",children:[E,$,N,t(h,{value:"svelte",children:[e(v,{}),e(_,{children:"Svelte"})]})]})]})]}),k[11]=C):C=k[11],C},meta:S}];function R({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=()=>w.default.createElement(l,n),o={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,o)}return w.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},w.default.createElement("h2",{className:"text-sm mb-12"},e.name),w.default.createElement(a))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(w.default.createElement(window.WallarmDS.Root,null,b.map((e,t)=>w.default.createElement(R,{key:t,entry:e})))),t}}})();