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

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

@@ -0,0 +1,269 @@
+A column or row of children with a gap from the spacing scale — `gap` defaults to 4, which is the practical difference from `Flex`. Reach for `VStack` or `HStack` rather than `Stack` with a `direction`: they read better in a tree, and `HStack` centres its items for you. Children have to be elements — a bare string is dropped rather than rendered.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `direction` | `"row" \| "column" \| "row-reverse" \| "column-reverse"` | no | `column` |  |
+| `align` | `"start" \| "center" \| "end" \| "stretch" \| "baseline"` | no | `stretch` |  |
+| `inline` | `boolean` | no | `false` |  |
+| `full-width` | `boolean` | no | — |  |
+| `wrap` | `"wrap" \| "nowrap" \| "reverse"` | no | `nowrap` |  |
+| `justify` | `"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"` | no | `start` |  |
+| `gap` | `"0" \| "1" \| "2" \| "4" \| "6" \| "8" \| "12" \| "16" \| "20" \| "24" \| "28" \| "32" \| "36" \| "40" \| "44" \| "48" \| "56" \| "64" \| "80" \| "96" \| "112" \| "128" \| "144"` | no | `4` |  |
+| `flex-grow` | `boolean` | no | — |  |
+| `flex-shrink` | `boolean` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+| `as-child` | `boolean \| undefined` | no | `false` |  |
+
+## Sub-components
+
+- `WallarmDS.HStack` — `HStackProps` in the declaration bundle.
+- `WallarmDS.VStack` — `VStackProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+The bare `Stack`: a column, because that is its default direction, with the default gap already applied.
+
+Source: Stack/Stack.stories.tsx#Basic
+
+### Direction
+
+`VStack` and `HStack` are the same component with the direction fixed — and `HStack` also switches `align` to `center`, since a row of mixed heights almost always wants that.
+
+Source: Stack/Stack.stories.tsx#Direction
+
+### Alignment
+
+`align` positions the children across the stack, not along it: in a column that is left, centre and right.
+
+Source: Stack/Stack.stories.tsx#Alignment
+
+### Spacing
+
+`gap` takes the spacing scale rather than a free number, which is what keeps rhythm consistent between two screens built by two people.
+
+Source: Stack/Stack.stories.tsx#Spacing
+
+### Wrap
+
+With `wrap`, a row that runs out of width breaks onto the next line instead of overflowing its container.
+
+Source: Stack/Stack.stories.tsx#Wrap
+
+### FlexBehavior
+
+The four sizing knobs against a fixed parent: `fullWidth` fills it, `flexGrow` takes the leftover space, and `flexShrink={false}` refuses to be squeezed — which is what makes the last row overflow on purpose.
+
+Source: Stack/Stack.stories.tsx#FlexBehavior
+
+## Story sources
+
+### Stack/Stack.stories.tsx
+
+```tsx
+import type { ReactNode } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Flex } from '../Flex';
+import { HStack } from './HStack';
+import { Stack } from './Stack';
+import { VStack } from './VStack';
+
+const Box = ({ children }: { children: ReactNode }) => (
+  <div className='flex h-24 w-24 items-center justify-center rounded-6 border border-border-info bg-bg-light-info font-mono text-xs text-text-info'>
+    {children}
+  </div>
+);
+
+const DESCRIPTION = [
+  'A column or row of children with a gap from the spacing scale — `gap` defaults to 4, which is the practical difference from `Flex`.',
+  'Reach for `VStack` or `HStack` rather than `Stack` with a `direction`: they read better in a tree, and `HStack` centres its items for you. Children have to be elements — a bare string is dropped rather than rendered.',
+].join(' ');
+
+const meta = {
+  title: 'Layout/Stack',
+  component: Stack,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  args: {},
+} satisfies Meta<typeof Stack>;
+
+export default meta;
+
+/** The bare `Stack`: a column, because that is its default direction, with the default gap already applied. */
+export const Basic: StoryFn<typeof meta> = ({ ...args }) => (
+  <Stack {...args} gap={4}>
+    <Box>A</Box>
+    <Box>B</Box>
+    <Box>C</Box>
+  </Stack>
+);
+
+/** `VStack` and `HStack` are the same component with the direction fixed — and `HStack` also switches `align` to `center`, since a row of mixed heights almost always wants that. */
+export const Direction: StoryFn<typeof meta> = ({ ...args }) => (
+  <Flex direction='column' gap={8}>
+    <Flex direction='column'>
+      <p className='sb-annotation'>VStack</p>
+      <VStack {...args} gap={4}>
+        <Box>1</Box>
+        <Box>2</Box>
+        <Box>3</Box>
+      </VStack>
+    </Flex>
+
+    <Flex direction='column'>
+      <p className='sb-annotation'>HStack</p>
+      <HStack {...args} gap={4}>
+        <Box>1</Box>
+        <Box>2</Box>
+        <Box>3</Box>
+      </HStack>
+    </Flex>
+  </Flex>
+);
+
+/** `align` positions the children across the stack, not along it: in a column that is left, centre and right. */
+export const Alignment: StoryFn<typeof meta> = ({ ...args }) => (
+  <Flex direction='column' gap={8}>
+    <Flex direction='column'>
+      <p className='sb-annotation'>align start</p>
+      <VStack {...args} align='start'>
+        <Box>A</Box>
+        <Box>B</Box>
+        <Box>C</Box>
+      </VStack>
+    </Flex>
+
+    <Flex direction='column'>
+      <p className='sb-annotation'>align center</p>
+      <VStack {...args} align='center'>
+        <Box>A</Box>
+        <Box>B</Box>
+        <Box>C</Box>
+      </VStack>
+    </Flex>
+
+    <Flex direction='column'>
+      <p className='sb-annotation'>align end</p>
+      <VStack {...args} align='end'>
+        <Box>A</Box>
+        <Box>B</Box>
+        <Box>C</Box>
+      </VStack>
+    </Flex>
+  </Flex>
+);
+
+/** `gap` takes the spacing scale rather than a free number, which is what keeps rhythm consistent between two screens built by two people. */
+export const Spacing: StoryFn<typeof meta> = ({ ...args }) => (
+  <Flex direction='column' gap={8}>
+    <Flex direction='column'>
+      <p className='sb-annotation'>gap 2</p>
+      <VStack {...args} gap={2}>
+        <Box>A</Box>
+        <Box>B</Box>
+        <Box>C</Box>
+      </VStack>
+    </Flex>
+
+    <Flex direction='column'>
+      <p className='sb-annotation'>gap 4</p>
+      <VStack {...args} gap={4}>
+        <Box>A</Box>
+        <Box>B</Box>
+        <Box>C</Box>
+      </VStack>
+    </Flex>
+
+    <Flex direction='column'>
+      <p className='sb-annotation'>gap 8</p>
+      <VStack {...args} gap={8}>
+        <Box>A</Box>
+        <Box>B</Box>
+        <Box>C</Box>
+      </VStack>
+    </Flex>
+  </Flex>
+);
+
+/** With `wrap`, a row that runs out of width breaks onto the next line instead of overflowing its container. */
+export const Wrap: StoryFn<typeof meta> = ({ ...args }) => (
+  <Flex direction='column'>
+    <p className='sb-annotation'>wrap</p>
+    <HStack {...args} gap={2} wrap='wrap'>
+      {new Array(40).fill(null).map((_, index) => {
+        const key = `${index + 1}`;
+
+        return <Box key={key}>{key}</Box>;
+      })}
+    </HStack>
+  </Flex>
+);
+
+/** The four sizing knobs against a fixed parent: `fullWidth` fills it, `flexGrow` takes the leftover space, and `flexShrink={false}` refuses to be squeezed — which is what makes the last row overflow on purpose. */
+export const FlexBehavior: StoryFn<typeof meta> = ({ ...args }) => (
+  <Flex direction='column' gap={8}>
+    <Flex direction='column'>
+      <p className='sb-annotation'>default</p>
+      <HStack {...args} gap={4}>
+        <Box>A</Box>
+        <Box>B</Box>
+        <Box>C</Box>
+      </HStack>
+    </Flex>
+
+    <Flex direction='column'>
+      <p className='sb-annotation'>fullWidth</p>
+      <HStack {...args} gap={4} fullWidth>
+        <Box>A</Box>
+        <Box>B</Box>
+        <Box>C</Box>
+      </HStack>
+    </Flex>
+
+    <Flex direction='column'>
+      <p className='sb-annotation'>flexGrow</p>
+      <HStack>
+        <VStack {...args} gap={4} flexGrow>
+          <Box>A</Box>
+          <Box>B</Box>
+        </VStack>
+        <VStack {...args} gap={4}>
+          <Box>C</Box>
+        </VStack>
+      </HStack>
+    </Flex>
+
+    <Flex direction='column'>
+      <p className='sb-annotation'>flexShrink false</p>
+      <div className='w-48 overflow-hidden border border-gray-300 rounded'>
+        <HStack {...args} gap={4} flexShrink={false}>
+          <Box>A</Box>
+          <Box>B</Box>
+          <Box>C</Box>
+          <Box>D</Box>
+          <Box>E</Box>
+        </HStack>
+      </div>
+    </Flex>
+  </Flex>
+);
+```

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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,n){let r,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,c=Object.create,i=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,f=(e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let l of u(t))m.call(e,l)||l===n||i(e,l,{get:()=>t[l],enumerable:!(r=s(t,l))||r.enumerable});return e},h={},p={$dispatcherGuard:()=>k,$makeReadOnly:()=>M,$reset:()=>O,$structuralCheck:()=>T,c:()=>E,clearRenderCounterRegistry:()=>A,renderCounterRegistry:()=>x,useRenderCounter:()=>D};for(var y in p)i(h,y,{get:p[y],enumerable:!0});e.exports=f(i({},"__esModule",{value:!0}),h);var _=(l=null!=(r=n("C"))?c(d(r)):{},f(r&&r.__esModule?l:i(l,"default",{value:r,enumerable:!0}),r)),{useRef:b,useEffect:g,isValidElement:S}=_,w=null!=(a=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?a:_.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,R=Symbol.for("react.memo_cache_sentinel"),E="function"==typeof(null==(o=_.__COMPILER_RUNTIME)?void 0:o.c)?_.__COMPILER_RUNTIME.c:function(e){return _.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=R;return t[R]=!0,t},[])},N={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{N[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 v=null;function $(e){return w.ReactCurrentDispatcher.current=e,w.ReactCurrentDispatcher.current}N.useMemoCache=e=>{if(null!=v)return v.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function k(e){let t=w.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&(v=t),t===N)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");$(N)}else if(1===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===C.length&&(v=null),$(e)}else if(2===e)C.push(t),$(v);else if(3===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");$(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function O(e){for(let t=0;t<e.length;t++)e[t]=R}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var x=new Map;function A(){for(let e of x.values())e.forEach(e=>{e.count=0})}function D(e){let t=b(null);null!=t.current&&(t.current.count+=1),g(()=>{if(null==t.current){let n,r={count:0};null==(n=x.get(e))&&(n=new Set,x.set(e,n)),n.add(r),t.current=r}return()=>{var n;let r;null!==t.current&&(n=t.current,null!=(r=x.get(e))&&r.delete(n))}})}var j=new Set;function T(e,t,n,r,l,a){function o(e,t,o,c){let i=`${r}:${a} [${l}] ${n}${o} changed from ${e} to ${t} at depth ${c}`;j.has(i)||(j.add(i),console.error(i))}!function e(t,n,r,l){if(!(l>2)){if(t!==n)if(typeof t!=typeof n)o(`type ${typeof t}`,`type ${typeof n}`,r,l);else if("object"==typeof t){let a=Array.isArray(t),c=Array.isArray(n);if(null===t&&null!==n)o("null",`type ${typeof n}`,r,l);else if(null===n)o(`type ${typeof t}`,"null",r,l);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}`,r,l);else for(let[a,c]of t)n.has(a)?e(c,n.get(a),`${r}.get(${a})`,l+1):o(`Map instance with key ${a}`,`Map instance without key ${a}`,r,l);else o("Map instance","other value",r,l);else if(n instanceof Map)o("other value","Map instance",r,l);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}`,r,l);else for(let e of n)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,r,l);else o("Set instance","other value",r,l);else if(n instanceof Set)o("other value","Set instance",r,l);else if(a||c)if(a!==c)o(`type ${a?"array":"object"}`,`type ${c?"array":"object"}`,r,l);else if(t.length!==n.length)o(`array with length ${t.length}`,`array with length ${n.length}`,r,l);else for(let a=0;a<t.length;a++)e(t[a],n[a],`${r}[${a}]`,l+1);else if(S(t)||S(n))S(t)!==S(n)?o(`type ${S(t)?"React element":"object"}`,`type ${S(n)?"React element":"object"}`,r,l):t.type!==n.type?o(`React element of type ${t.type}`,`React element of type ${n.type}`,r,l):e(t.props,n.props,`[props of ${r}]`,l+1);else{for(let e in n)e in t||o(`object without key ${e}`,`object with key ${e}`,r,l);for(let a in t)a in n?e(t[a],n[a],`${r}.${a}`,l+1):o(`object with key ${a}`,`object without key ${a}`,r,l)}}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"}`,r,l):t!==n&&o(t,n,r,l)}}}(e,t,"",0)}},p(e,t,n){let r=new WeakMap,l=new WeakMap;function a(e,t,n){let a=t,o=n;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,n=r.get(e);n||(n=new WeakMap,r.set(e,n));let l=n.get(t);l||((l=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.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 n=l.get(e);n||(n=new Map,l.set(e,n));let r=n.get(t);if(r)return r;let a=e.forwardRef((n,r)=>{let l=e.useRef(null);if(!l.current||l.current.original!==r){let e;l.current={original:r,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof r){let n=r(t);e="function"==typeof n?n:void 0}else r&&(r.current=t)}}}return e.createElement(t,{...n,ref:l.current.callback})});return a.displayName=`CanvasHost(${t})`,n.set(t,a),a}(e,a)),{type:a,props:o}}function o(e){let t=(t,n,r)=>{let l=a(e,t,n??{});return e.createElement(l.type,void 0===r?l.props:{...l.props,key:r})};return{jsx:t,jsxs:(t,n,r)=>{let l=a(e,t,n??{}),{children:o,...c}=l.props;return e.createElement(l.type,void 0===r?c:{...c,key:r},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function c(e){return{...e,createElement:(t,n,...r)=>{let l=a(e,t,n??{});return e.createElement(l.type,l.props,...r)},cloneElement:(t,n,...r)=>{let l=e.cloneElement(t,n??void 0,...r),o=l.ref,c=a(e,l.type,{...l.props,ref:o});return c.type===l.type&&"string"!=typeof l.type?l:e.createElement(c.type,{...c.props,key:l.key})}}}n.d(t,{MA:()=>o,YJ:()=>c})},C(e,t,n){n.r(t);let r=(0,n("p").YJ)(window.React),{Children:l,Component:a,Fragment:o,Profiler:c,PureComponent:i,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:m,cloneElement:f,createContext:h,createElement:p,createFactory:y,createRef:_,forwardRef:b,isValidElement:g,lazy:S,memo:w,startTransition:R,unstable_act:E,useCallback:N,useContext:v,useDebugValue:$,useDeferredValue:C,useEffect:k,useId:O,useImperativeHandle:M,useInsertionEffect:x,useLayoutEffect:A,useMemo:D,useReducer:j,useRef:T,useState:I,useSyncExternalStore:P,useTransition:B,version:W,use:z}=r;n.d(t,{},{Children:l,Component:a,Fragment:o,Profiler:c,PureComponent:i,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:m,cloneElement:f,createContext:h,createElement:p,createFactory:y,createRef:_,default:r,forwardRef:b,isValidElement:g,lazy:S,memo:w,startTransition:R,unstable_act:E,use:z,useCallback:N,useContext:v,useDebugValue:$,useDeferredValue:C,useEffect:k,useId:O,useImperativeHandle:M,useInsertionEffect:x,useLayoutEffect:A,useMemo:D,useReducer:j,useRef:T,useState:I,useSyncExternalStore:P,useTransition:B,version:W})}},t={};function n(r){var l=t[r];if(void 0!==l)return l.exports;var a=t[r]={exports:{}};return e[r](a,a.exports,n),a.exports}n.d=(e,t,r)=>{var l=(t,r)=>{for(var l in t)n.o(t,l)&&!n.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,[r]:t[l]})};l(t,"get"),l(r,"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:r,Fragment:l}=(0,n("p").MA)(window.React);var a=n("vD");let o=window.WallarmDS.Flex,c=window.WallarmDS.HStack,i=window.WallarmDS.Stack,s=window.WallarmDS.VStack,u=t=>{let n,r=(0,a.c)(2),{children:l}=t;return r[0]!==l?(n=e("div",{className:"flex h-24 w-24 items-center justify-center rounded-6 border border-border-info bg-bg-light-info font-mono text-xs text-text-info",children:l}),r[0]=l,r[1]=n):n=r[1],n},d={title:"Layout/Stack",component:i,parameters:{layout:"padded",docs:{description:{component:"A column or row of children with a gap from the spacing scale — `gap` defaults to 4, which is the practical difference from `Flex`. Reach for `VStack` or `HStack` rather than `Stack` with a `direction`: they read better in a tree, and `HStack` centres its items for you. Children have to be elements — a bare string is dropped rather than rendered."}}},args:{}};function m(t,n){let r=`${n+1}`;return e(u,{children:r},r)}var f=n("C");let h=[{name:"Basic",story:n=>{let r,l,o,c,s,d=(0,a.c)(7);return d[0]!==n?({...r}=n,d[0]=n,d[1]=r):r=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(l=e(u,{children:"A"}),o=e(u,{children:"B"}),c=e(u,{children:"C"}),d[2]=l,d[3]=o,d[4]=c):(l=d[2],o=d[3],c=d[4]),d[5]!==r?(s=t(i,{...r,gap:4,children:[l,o,c]}),d[5]=r,d[6]=s):s=d[6],s},meta:d},{name:"Direction",story:n=>{let r,l,i,d,m,f,h,p,y,_,b,g,S=(0,a.c)(17);return S[0]!==n?({...r}=n,S[0]=n,S[1]=r):r=S[1],S[2]===Symbol.for("react.memo_cache_sentinel")?(l=e("p",{className:"sb-annotation",children:"VStack"}),S[2]=l):l=S[2],S[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(u,{children:"1"}),d=e(u,{children:"2"}),m=e(u,{children:"3"}),S[3]=i,S[4]=d,S[5]=m):(i=S[3],d=S[4],m=S[5]),S[6]!==r?(f=t(o,{direction:"column",children:[l,t(s,{...r,gap:4,children:[i,d,m]})]}),S[6]=r,S[7]=f):f=S[7],S[8]===Symbol.for("react.memo_cache_sentinel")?(h=e("p",{className:"sb-annotation",children:"HStack"}),S[8]=h):h=S[8],S[9]===Symbol.for("react.memo_cache_sentinel")?(p=e(u,{children:"1"}),y=e(u,{children:"2"}),_=e(u,{children:"3"}),S[9]=p,S[10]=y,S[11]=_):(p=S[9],y=S[10],_=S[11]),S[12]!==r?(b=t(o,{direction:"column",children:[h,t(c,{...r,gap:4,children:[p,y,_]})]}),S[12]=r,S[13]=b):b=S[13],S[14]!==b||S[15]!==f?(g=t(o,{direction:"column",gap:8,children:[f,b]}),S[14]=b,S[15]=f,S[16]=g):g=S[16],g},meta:d},{name:"Alignment",story:n=>{let r,l,c,i,d,m,f,h,p,y,_,b,g,S,w,R,E,N=(0,a.c)(24);return N[0]!==n?({...r}=n,N[0]=n,N[1]=r):r=N[1],N[2]===Symbol.for("react.memo_cache_sentinel")?(l=e("p",{className:"sb-annotation",children:"align start"}),N[2]=l):l=N[2],N[3]===Symbol.for("react.memo_cache_sentinel")?(c=e(u,{children:"A"}),i=e(u,{children:"B"}),d=e(u,{children:"C"}),N[3]=c,N[4]=i,N[5]=d):(c=N[3],i=N[4],d=N[5]),N[6]!==r?(m=t(o,{direction:"column",children:[l,t(s,{...r,align:"start",children:[c,i,d]})]}),N[6]=r,N[7]=m):m=N[7],N[8]===Symbol.for("react.memo_cache_sentinel")?(f=e("p",{className:"sb-annotation",children:"align center"}),N[8]=f):f=N[8],N[9]===Symbol.for("react.memo_cache_sentinel")?(h=e(u,{children:"A"}),p=e(u,{children:"B"}),y=e(u,{children:"C"}),N[9]=h,N[10]=p,N[11]=y):(h=N[9],p=N[10],y=N[11]),N[12]!==r?(_=t(o,{direction:"column",children:[f,t(s,{...r,align:"center",children:[h,p,y]})]}),N[12]=r,N[13]=_):_=N[13],N[14]===Symbol.for("react.memo_cache_sentinel")?(b=e("p",{className:"sb-annotation",children:"align end"}),N[14]=b):b=N[14],N[15]===Symbol.for("react.memo_cache_sentinel")?(g=e(u,{children:"A"}),S=e(u,{children:"B"}),w=e(u,{children:"C"}),N[15]=g,N[16]=S,N[17]=w):(g=N[15],S=N[16],w=N[17]),N[18]!==r?(R=t(o,{direction:"column",children:[b,t(s,{...r,align:"end",children:[g,S,w]})]}),N[18]=r,N[19]=R):R=N[19],N[20]!==_||N[21]!==R||N[22]!==m?(E=t(o,{direction:"column",gap:8,children:[m,_,R]}),N[20]=_,N[21]=R,N[22]=m,N[23]=E):E=N[23],E},meta:d},{name:"Spacing",story:n=>{let r,l,c,i,d,m,f,h,p,y,_,b,g,S,w,R,E,N=(0,a.c)(24);return N[0]!==n?({...r}=n,N[0]=n,N[1]=r):r=N[1],N[2]===Symbol.for("react.memo_cache_sentinel")?(l=e("p",{className:"sb-annotation",children:"gap 2"}),N[2]=l):l=N[2],N[3]===Symbol.for("react.memo_cache_sentinel")?(c=e(u,{children:"A"}),i=e(u,{children:"B"}),d=e(u,{children:"C"}),N[3]=c,N[4]=i,N[5]=d):(c=N[3],i=N[4],d=N[5]),N[6]!==r?(m=t(o,{direction:"column",children:[l,t(s,{...r,gap:2,children:[c,i,d]})]}),N[6]=r,N[7]=m):m=N[7],N[8]===Symbol.for("react.memo_cache_sentinel")?(f=e("p",{className:"sb-annotation",children:"gap 4"}),N[8]=f):f=N[8],N[9]===Symbol.for("react.memo_cache_sentinel")?(h=e(u,{children:"A"}),p=e(u,{children:"B"}),y=e(u,{children:"C"}),N[9]=h,N[10]=p,N[11]=y):(h=N[9],p=N[10],y=N[11]),N[12]!==r?(_=t(o,{direction:"column",children:[f,t(s,{...r,gap:4,children:[h,p,y]})]}),N[12]=r,N[13]=_):_=N[13],N[14]===Symbol.for("react.memo_cache_sentinel")?(b=e("p",{className:"sb-annotation",children:"gap 8"}),N[14]=b):b=N[14],N[15]===Symbol.for("react.memo_cache_sentinel")?(g=e(u,{children:"A"}),S=e(u,{children:"B"}),w=e(u,{children:"C"}),N[15]=g,N[16]=S,N[17]=w):(g=N[15],S=N[16],w=N[17]),N[18]!==r?(R=t(o,{direction:"column",children:[b,t(s,{...r,gap:8,children:[g,S,w]})]}),N[18]=r,N[19]=R):R=N[19],N[20]!==_||N[21]!==R||N[22]!==m?(E=t(o,{direction:"column",gap:8,children:[m,_,R]}),N[20]=_,N[21]=R,N[22]=m,N[23]=E):E=N[23],E},meta:d},{name:"Wrap",story:n=>{let r,l,i,s,u=(0,a.c)(6);return u[0]!==n?({...r}=n,u[0]=n,u[1]=r):r=u[1],u[2]===Symbol.for("react.memo_cache_sentinel")?(l=e("p",{className:"sb-annotation",children:"wrap"}),u[2]=l):l=u[2],u[3]===Symbol.for("react.memo_cache_sentinel")?(i=Array(40).fill(null).map(m),u[3]=i):i=u[3],u[4]!==r?(s=t(o,{direction:"column",children:[l,e(c,{...r,gap:2,wrap:"wrap",children:i})]}),u[4]=r,u[5]=s):s=u[5],s},meta:d},{name:"FlexBehavior",story:n=>{let r,l,i,d,m,f,h,p,y,_,b,g,S,w,R,E,N,v,$,C,k,O,M,x,A,D,j=(0,a.c)(38);return j[0]!==n?({...r}=n,j[0]=n,j[1]=r):r=j[1],j[2]===Symbol.for("react.memo_cache_sentinel")?(l=e("p",{className:"sb-annotation",children:"default"}),j[2]=l):l=j[2],j[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(u,{children:"A"}),d=e(u,{children:"B"}),m=e(u,{children:"C"}),j[3]=i,j[4]=d,j[5]=m):(i=j[3],d=j[4],m=j[5]),j[6]!==r?(f=t(o,{direction:"column",children:[l,t(c,{...r,gap:4,children:[i,d,m]})]}),j[6]=r,j[7]=f):f=j[7],j[8]===Symbol.for("react.memo_cache_sentinel")?(h=e("p",{className:"sb-annotation",children:"fullWidth"}),j[8]=h):h=j[8],j[9]===Symbol.for("react.memo_cache_sentinel")?(p=e(u,{children:"A"}),y=e(u,{children:"B"}),_=e(u,{children:"C"}),j[9]=p,j[10]=y,j[11]=_):(p=j[9],y=j[10],_=j[11]),j[12]!==r?(b=t(o,{direction:"column",children:[h,t(c,{...r,gap:4,fullWidth:!0,children:[p,y,_]})]}),j[12]=r,j[13]=b):b=j[13],j[14]===Symbol.for("react.memo_cache_sentinel")?(g=e("p",{className:"sb-annotation",children:"flexGrow"}),j[14]=g):g=j[14],j[15]===Symbol.for("react.memo_cache_sentinel")?(S=e(u,{children:"A"}),w=e(u,{children:"B"}),j[15]=S,j[16]=w):(S=j[15],w=j[16]),j[17]!==r?(R=t(s,{...r,gap:4,flexGrow:!0,children:[S,w]}),j[17]=r,j[18]=R):R=j[18],j[19]===Symbol.for("react.memo_cache_sentinel")?(E=e(u,{children:"C"}),j[19]=E):E=j[19],j[20]!==r?(N=e(s,{...r,gap:4,children:E}),j[20]=r,j[21]=N):N=j[21],j[22]!==R||j[23]!==N?(v=t(o,{direction:"column",children:[g,t(c,{children:[R,N]})]}),j[22]=R,j[23]=N,j[24]=v):v=j[24],j[25]===Symbol.for("react.memo_cache_sentinel")?($=e("p",{className:"sb-annotation",children:"flexShrink false"}),j[25]=$):$=j[25],j[26]===Symbol.for("react.memo_cache_sentinel")?(C=e(u,{children:"A"}),k=e(u,{children:"B"}),O=e(u,{children:"C"}),M=e(u,{children:"D"}),x=e(u,{children:"E"}),j[26]=C,j[27]=k,j[28]=O,j[29]=M,j[30]=x):(C=j[26],k=j[27],O=j[28],M=j[29],x=j[30]),j[31]!==r?(A=t(o,{direction:"column",children:[$,e("div",{className:"w-48 overflow-hidden border border-gray-300 rounded",children:t(c,{...r,gap:4,flexShrink:!1,children:[C,k,O,M,x]})})]}),j[31]=r,j[32]=A):A=j[32],j[33]!==b||j[34]!==v||j[35]!==A||j[36]!==f?(D=t(o,{direction:"column",gap:8,children:[f,b,v,A]}),j[33]=b,j[34]=v,j[35]=A,j[36]=f,j[37]=D):D=j[37],D},meta:d}];function p({entry:e}){let{story:t,meta:n}=e,r={...n.args,...t.args},l="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,a=()=>f.default.createElement(l,r),o={args:r,globals:{theme:"light"},parameters:{...n.parameters,...t.parameters},viewMode:"story"};for(let e of[...n.decorators||[],...t.decorators||[]].reverse()){let t=a;a=()=>e(t,o)}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,h.map((e,t)=>f.default.createElement(p,{key:t,entry:e})))),t}}})();