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

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

@@ -0,0 +1,332 @@
+Select part of an image by moving and zooming it inside a fixed frame, then export a Blob at the exact outputSize. The frame follows the output aspect ratio and preserves the source proportions. Compose Slider for zoom, FileUpload for choosing a file, and your own Save action through ImageCropperContext. All processing runs in the browser; the consumer owns uploading. Preview rounding is visual only: the saved image is rectangular. Remote images need crossOrigin="anonymous" on ImageCropperImage and server CORS permission for canvas export; local file/object URLs also work. Size the preview with width classes; CSS scale transforms on ancestors are not supported by the underlying crop geometry. Arrow keys pan, Shift accelerates, and +/− zoom.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `output-size` | `complex` | yes | — | Exact exported pixel dimensions; also determines the visible frame's aspect ratio. |
+| `zoom` | `number \| undefined` | no | — |  |
+| `default-zoom` | `number \| undefined` | no | `1` |  |
+| `min-zoom` | `number \| undefined` | no | `1` | The minimum scale, relative to the image covering the frame. Must be at least 1. |
+| `max-zoom` | `number \| undefined` | no | `5` |  |
+| `on-zoom-change` | `((zoom: number) => 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 | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.ImageCropperContext` — `ImageCropperContextProps` in the declaration bundle.
+- `WallarmDS.ImageCropperGrid` — `ImageCropperGridProps` in the declaration bundle.
+- `WallarmDS.ImageCropperImage` — `ImageCropperImageProps` in the declaration bundle.
+- `WallarmDS.ImageCropperSelection` — `ImageCropperSelectionProps` in the declaration bundle.
+- `WallarmDS.ImageCropperViewport` — `ImageCropperViewportProps` in the declaration bundle.
+
+## Stories
+
+### Avatar
+
+A small rounded preview like the avatar design; the saved square is 256 × 256 pixels.
+
+Source: ImageCropper/ImageCropper.stories.tsx#Avatar
+
+### Landscape
+
+Wide source and output: a 600 × 300 image is cropped to a 320 × 180 result.
+
+Source: ImageCropper/ImageCropper.stories.tsx#Landscape
+
+### WithFileUpload
+
+FileUpload owns picking and validation; useFilePreviewUrl releases the local object URL.
+
+Source: ImageCropper/ImageCropper.stories.tsx#WithFileUpload
+
+### Controlled
+
+The parent can accept or reject zoom changes; the image and external slider follow its value.
+
+Source: ImageCropper/ImageCropper.stories.tsx#Controlled
+
+### Geometry
+
+Color bands make source proportions and the exact exported selection easy to verify.
+
+Source: ImageCropper/ImageCropper.stories.tsx#Geometry
+
+## Story sources
+
+### ImageCropper/ImageCropper.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Button } from '../Button';
+import { FileUpload, FileUploadError, FileUploadTrigger, useFilePreviewUrl } from '../FileUpload';
+import { Slider, SliderControl, SliderThumb } from '../Slider';
+import {
+  ImageCropper,
+  ImageCropperContext,
+  ImageCropperGrid,
+  ImageCropperImage,
+  type ImageCropperProps,
+  ImageCropperSelection,
+  ImageCropperViewport,
+} from '.';
+import { LANDSCAPE, PORTRAIT, TALL_BANDS, WIDE_BANDS } from './stories/fixtures';
+
+const meta = {
+  title: 'Inputs/ImageCropper',
+  component: ImageCropper,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Select part of an image by moving and zooming it inside a fixed frame, then export a Blob at the exact outputSize. The frame follows the output aspect ratio and preserves the source proportions. Compose Slider for zoom, FileUpload for choosing a file, and your own Save action through ImageCropperContext. All processing runs in the browser; the consumer owns uploading. Preview rounding is visual only: the saved image is rectangular. Remote images need crossOrigin="anonymous" on ImageCropperImage and server CORS permission for canvas export; local file/object URLs also work. Size the preview with width classes; CSS scale transforms on ancestors are not supported by the underlying crop geometry. Arrow keys pan, Shift accelerates, and +/− zoom.',
+      },
+      source: {
+        code: `<ImageCropper outputSize={{ width: 256, height: 256 }}>
+  <ImageCropperViewport className="w-[100px] rounded-[32px]">
+    <ImageCropperImage src={imageUrl} alt="Image to crop" />
+    <ImageCropperSelection aria-label="Position image">
+      <ImageCropperGrid />
+    </ImageCropperSelection>
+  </ImageCropperViewport>
+  <ImageCropperContext>
+    {api => (
+      <>
+        <Slider value={[api.zoom]} min={1} max={5} step={0.1}
+          onValueChange={([zoom]) => { if (zoom !== undefined) api.setZoom(zoom); }}>
+          <SliderControl><SliderThumb aria-label="Zoom image" /></SliderControl>
+        </Slider>
+        <Button disabled={!api.ready} onClick={async () => {
+          const blob = await api.getCroppedImage();
+          if (blob) saveImage(blob);
+        }}>Save</Button>
+      </>
+    )}
+  </ImageCropperContext>
+</ImageCropper>`,
+      },
+    },
+  },
+  args: { outputSize: { width: 256, height: 256 }, minZoom: 1, maxZoom: 4 },
+  argTypes: {
+    outputSize: { control: 'object' },
+    minZoom: { control: 'number' },
+    maxZoom: { control: 'number' },
+    defaultZoom: { control: 'number' },
+    zoom: { control: false },
+    onZoomChange: { control: false },
+    children: { control: false },
+    ref: { control: false },
+  },
+} satisfies Meta<typeof ImageCropper>;
+
+export default meta;
+
+interface ExampleProps extends ImageCropperProps {
+  source?: string;
+  compact?: boolean;
+  upload?: boolean;
+  geometry?: boolean;
+}
+
+const Example = ({
+  source = PORTRAIT,
+  compact = false,
+  upload = false,
+  geometry = false,
+  ...args
+}: ExampleProps) => {
+  const [files, setFiles] = useState<File[]>([]);
+  const [result, setResult] = useState<File | null>(null);
+  const [error, setError] = useState('');
+  const [alternate, setAlternate] = useState(false);
+  const src = useFilePreviewUrl(files[0]);
+  const resultUrl = useFilePreviewUrl(result);
+
+  return (
+    <div className='flex w-[304px] max-w-[calc(100vw-32px)] flex-col gap-24'>
+      <ImageCropper {...args} data-testid='cropper' className='flex flex-col items-center gap-24'>
+        <ImageCropperViewport
+          className={compact || geometry ? 'w-[100px] rounded-[32px]' : 'w-[280px] rounded-12'}
+        >
+          <ImageCropperImage
+            src={alternate ? TALL_BANDS : (src ?? source)}
+            alt='Image to crop'
+            onLoad={() => setError('')}
+            onError={() => setError('This image could not be opened. Choose another file.')}
+          />
+          <ImageCropperSelection aria-label='Crop image'>
+            <ImageCropperGrid />
+          </ImageCropperSelection>
+        </ImageCropperViewport>
+        <ImageCropperContext>
+          {api => (
+            <>
+              <Slider
+                data-testid='cropper-zoom'
+                className='w-full'
+                value={[api.zoom]}
+                min={args.minZoom ?? 1}
+                max={args.maxZoom ?? 4}
+                step={0.1}
+                disabled={!api.ready}
+                onValueChange={([value]) => {
+                  if (value !== undefined) api.setZoom(value);
+                }}
+              >
+                <SliderControl>
+                  <SliderThumb aria-label='Zoom image' />
+                </SliderControl>
+              </Slider>
+              <div className='flex items-center gap-8'>
+                <Button
+                  data-testid='cropper-save'
+                  disabled={!api.ready}
+                  onClick={async () => {
+                    try {
+                      const blob = await api.getCroppedImage();
+                      if (blob) {
+                        setResult(new File([blob], 'cropped-image.png', { type: blob.type }));
+                        setError('');
+                      } else {
+                        setError('The image could not be exported. Try a local image file.');
+                      }
+                    } catch {
+                      setError('The image could not be exported. Try a local image file.');
+                    }
+                  }}
+                >
+                  Save image
+                </Button>
+                <Button variant='secondary' color='neutral' onClick={() => api.reset()}>
+                  Reset
+                </Button>
+              </div>
+            </>
+          )}
+        </ImageCropperContext>
+      </ImageCropper>
+      {upload && (
+        <FileUpload
+          value={files}
+          onValueChange={next => {
+            setFiles(next);
+            setResult(null);
+          }}
+          accept='image/png,image/jpeg,image/webp'
+          maxFileSize={10 * 1024 * 1024}
+          data-testid='cropper-upload'
+        >
+          <FileUploadTrigger variant='secondary' color='neutral'>
+            Select file
+          </FileUploadTrigger>
+          <FileUploadError />
+        </FileUpload>
+      )}
+      {geometry && (
+        <Button data-testid='cropper-replace' onClick={() => setAlternate(value => !value)}>
+          Switch source orientation
+        </Button>
+      )}
+      {error && (
+        <p role='alert' className='text-sm text-text-danger'>
+          {error}
+        </p>
+      )}
+      {resultUrl && (
+        <div className='flex flex-col items-center gap-8'>
+          <img
+            data-testid='cropper-result'
+            src={resultUrl}
+            alt='Saved crop'
+            className='max-h-[200px] max-w-full object-contain'
+          />
+          <a
+            href={resultUrl}
+            download='cropped-image.png'
+            className='text-sm text-text-link-default'
+          >
+            Download {args.outputSize.width} × {args.outputSize.height}
+          </a>
+        </div>
+      )}
+    </div>
+  );
+};
+
+/** A small rounded preview like the avatar design; the saved square is 256 × 256 pixels. */
+export const Avatar: StoryFn<ImageCropperProps> = args => <Example {...args} compact />;
+
+/** Wide source and output: a 600 × 300 image is cropped to a 320 × 180 result. */
+export const Landscape: StoryFn<ImageCropperProps> = args => (
+  <Example {...args} source={LANDSCAPE} outputSize={{ width: 320, height: 180 }} />
+);
+
+/** FileUpload owns picking and validation; useFilePreviewUrl releases the local object URL. */
+export const WithFileUpload: StoryFn<ImageCropperProps> = args => <Example {...args} upload />;
+
+/** The parent can accept or reject zoom changes; the image and external slider follow its value. */
+export const Controlled: StoryFn<ImageCropperProps> = args => {
+  const [zoom, setZoom] = useState(1.5);
+  const [locked, setLocked] = useState(false);
+  return (
+    <div className='flex flex-col items-center gap-16'>
+      <Example
+        {...args}
+        zoom={zoom}
+        onZoomChange={value => {
+          if (!locked) setZoom(value);
+        }}
+      />
+      <Button
+        variant='secondary'
+        color='neutral'
+        data-testid='cropper-lock-zoom'
+        onClick={() => setLocked(value => !value)}
+      >
+        {locked ? 'Unlock zoom' : 'Lock zoom'}
+      </Button>
+    </div>
+  );
+};
+
+/** Color bands make source proportions and the exact exported selection easy to verify. */
+export const Geometry: StoryFn<ImageCropperProps> = args => (
+  <Example {...args} source={WIDE_BANDS} outputSize={{ width: 64, height: 64 }} geometry />
+);
+```
+
+### ImageCropper/stories/fixtures.ts
+
+```tsx
+const svgUrl = (svg: string) => `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+
+// Local deterministic illustrations keep the examples and export checks independent of network/CORS.
+export const PORTRAIT = svgUrl(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="300" viewBox="0 0 200 300"><rect width="200" height="300" fill="#c9d9ec"/><circle cx="100" cy="112" r="48" fill="#31344e"/><ellipse cx="100" cy="132" rx="35" ry="44" fill="#eec5a6"/><path d="M65 119q5-53 65-20l9 30q-31-4-44-30-9 18-30 20" fill="#31344e"/><path d="M30 300v-67q0-55 70-55t70 55v67" fill="#56749b"/><path d="m77 179 23 37 23-37" fill="#eec5a6"/></svg>',
+);
+
+export const LANDSCAPE = svgUrl(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 600 300"><rect width="600" height="300" fill="#d5e6ef"/><circle cx="430" cy="77" r="34" fill="#f4bc68"/><path d="m0 260 170-200 155 200z" fill="#829ca1"/><path d="m90 300 260-248 250 248" fill="#577a87"/><path d="m297 103 53-51 62 62-39-13-23 11-20-17z" fill="#f5f1e7"/><path d="M0 248q170-50 300 5t300-13v60H0" fill="#335d68"/></svg>',
+);
+
+export const WIDE_BANDS = svgUrl(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"><path fill="#ff0000" d="M0 0h100v200H0z"/><path fill="#00ff00" d="M100 0h100v200H100z"/><path fill="#0000ff" d="M200 0h100v200H200z"/><path fill="#ffff00" d="M300 0h100v200H300z"/></svg>',
+);
+
+export const TALL_BANDS = svgUrl(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="400"><path fill="#ff0000" d="M0 0h200v100H0z"/><path fill="#00ff00" d="M0 100h200v100H0z"/><path fill="#0000ff" d="M0 200h200v100H0z"/><path fill="#ffff00" d="M0 300h200v100H0z"/></svg>',
+);
+```

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

@@ -0,0 +1,33 @@
+var e={vD(e,t,r){let o,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,n,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,p=Object.getOwnPropertyNames,u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,d=(e,t,r,o)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of p(t))m.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(o=s(t,a))||o.enumerable});return e},f={},h={$dispatcherGuard:()=>N,$makeReadOnly:()=>I,$reset:()=>z,$structuralCheck:()=>T,c:()=>x,clearRenderCounterRegistry:()=>k,renderCounterRegistry:()=>M,useRenderCounter:()=>O};for(var g in h)c(f,g,{get:h[g],enumerable:!0});e.exports=d(c({},"__esModule",{value:!0}),f);var y=(a=null!=(o=r("C"))?i(u(o)):{},d(o&&o.__esModule?a:c(a,"default",{value:o,enumerable:!0}),o)),{useRef:w,useEffect:v,isValidElement:S}=y,b=null!=(l=y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:y.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,C=Symbol.for("react.memo_cache_sentinel"),x="function"==typeof(null==(n=y.__COMPILER_RUNTIME)?void 0:n.c)?y.__COMPILER_RUNTIME.c:function(e){return y.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=C;return t[C]=!0,t},[])},R={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{R[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 E(e){return b.ReactCurrentDispatcher.current=e,b.ReactCurrentDispatcher.current}R.useMemoCache=e=>{if(null!=_)return _.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var $=[];function N(e){let t=b.ReactCurrentDispatcher.current;if(0===e){if($.push(t),1===$.length&&(_=t),t===R)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.");E(R)}else if(1===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===$.length&&(_=null),E(e)}else if(2===e)$.push(t),E(_);else if(3===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");E(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function z(e){for(let t=0;t<e.length;t++)e[t]=C}function I(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var M=new Map;function k(){for(let e of M.values())e.forEach(e=>{e.count=0})}function O(e){let t=w(null);null!=t.current&&(t.current.count+=1),v(()=>{if(null==t.current){let r,o={count:0};null==(r=M.get(e))&&(r=new Set,M.set(e,r)),r.add(o),t.current=o}return()=>{var r;let o;null!==t.current&&(r=t.current,null!=(o=M.get(e))&&o.delete(r))}})}var D=new Set;function T(e,t,r,o,a,l){function n(e,t,n,i){let c=`${o}:${l} [${a}] ${r}${n} changed from ${e} to ${t} at depth ${i}`;D.has(c)||(D.add(c),console.error(c))}!function e(t,r,o,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)n(`type ${typeof t}`,`type ${typeof r}`,o,a);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)n("null",`type ${typeof r}`,o,a);else if(null===r)n(`type ${typeof t}`,"null",o,a);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)n(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,o,a);else for(let[l,i]of t)r.has(l)?e(i,r.get(l),`${o}.get(${l})`,a+1):n(`Map instance with key ${l}`,`Map instance without key ${l}`,o,a);else n("Map instance","other value",o,a);else if(r instanceof Map)n("other value","Map instance",o,a);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)n(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,o,a);else for(let e of r)t.has(e)||n(`Set instance without element ${e}`,`Set instance with element ${e}`,o,a);else n("Set instance","other value",o,a);else if(r instanceof Set)n("other value","Set instance",o,a);else if(l||i)if(l!==i)n(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,o,a);else if(t.length!==r.length)n(`array with length ${t.length}`,`array with length ${r.length}`,o,a);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${o}[${l}]`,a+1);else if(S(t)||S(r))S(t)!==S(r)?n(`type ${S(t)?"React element":"object"}`,`type ${S(r)?"React element":"object"}`,o,a):t.type!==r.type?n(`React element of type ${t.type}`,`React element of type ${r.type}`,o,a):e(t.props,r.props,`[props of ${o}]`,a+1);else{for(let e in r)e in t||n(`object without key ${e}`,`object with key ${e}`,o,a);for(let l in t)l in r?e(t[l],r[l],`${o}.${l}`,a+1):n(`object with key ${l}`,`object without key ${l}`,o,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&n(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,o,a):t!==r&&n(t,r,o,a)}}}(e,t,"",0)}},p(e,t,r){let o=new WeakMap,a=new WeakMap;function l(e,t,r){let l=t,n=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!=n.ref&&!l.prototype?.isReactComponent){let t=l,r=o.get(e);r||(r=new WeakMap,o.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 n.inert&&((n={...n}).inert?n.inert="":delete n.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in n&&(n={...n,[t]:n[e]},delete n[e]);return"string"==typeof l&&null!=n.ref&&(l=function(e,t){let r=a.get(e);r||(r=new Map,a.set(e,r));let o=r.get(t);if(o)return o;let l=e.forwardRef((r,o)=>{let a=e.useRef(null);if(!a.current||a.current.original!==o){let e;a.current={original:o,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof o){let r=o(t);e="function"==typeof r?r:void 0}else o&&(o.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:n}}function n(e){let t=(t,r,o)=>{let a=l(e,t,r??{});return e.createElement(a.type,void 0===o?a.props:{...a.props,key:o})};return{jsx:t,jsxs:(t,r,o)=>{let a=l(e,t,r??{}),{children:n,...i}=a.props;return e.createElement(a.type,void 0===o?i:{...i,key:o},...Array.isArray(n)?n:[n])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...o)=>{let a=l(e,t,r??{});return e.createElement(a.type,a.props,...o)},cloneElement:(t,r,...o)=>{let a=e.cloneElement(t,r??void 0,...o),n=a.ref,i=l(e,a.type,{...a.props,ref:n});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}r.d(t,{MA:()=>n,YJ:()=>i})},C(e,t,r){r.r(t);let o=(0,r("p").YJ)(window.React),{Children:a,Component:l,Fragment:n,Profiler:i,PureComponent:c,StrictMode:s,Suspense:p,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:m,cloneElement:d,createContext:f,createElement:h,createFactory:g,createRef:y,forwardRef:w,isValidElement:v,lazy:S,memo:b,startTransition:C,unstable_act:x,useCallback:R,useContext:_,useDebugValue:E,useDeferredValue:$,useEffect:N,useId:z,useImperativeHandle:I,useInsertionEffect:M,useLayoutEffect:k,useMemo:O,useReducer:D,useRef:T,useState:j,useSyncExternalStore:W,useTransition:U,version:A,use:P}=o;r.d(t,{},{Children:a,Component:l,Fragment:n,Profiler:i,PureComponent:c,StrictMode:s,Suspense:p,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:m,cloneElement:d,createContext:f,createElement:h,createFactory:g,createRef:y,default:o,forwardRef:w,isValidElement:v,lazy:S,memo:b,startTransition:C,unstable_act:x,use:P,useCallback:R,useContext:_,useDebugValue:E,useDeferredValue:$,useEffect:N,useId:z,useImperativeHandle:I,useInsertionEffect:M,useLayoutEffect:k,useMemo:O,useReducer:D,useRef:T,useState:j,useSyncExternalStore:W,useTransition:U,version:A})}},t={};function r(o){var a=t[o];if(void 0!==a)return a.exports;var l=t[o]={exports:{}};return e[o](l,l.exports,r),l.exports}r.d=(e,t,o)=>{var a=(t,o)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[o]:t[a]})};a(t,"get"),a(o,"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:o,Fragment:a}=(0,r("p").MA)(window.React);var l=r("vD"),n=r("C");let i=e=>`data:image/svg+xml;charset=utf-8,${encodeURIComponent(e)}`,c=i('<svg xmlns="http://www.w3.org/2000/svg" width="200" height="300" viewBox="0 0 200 300"><rect width="200" height="300" fill="#c9d9ec"/><circle cx="100" cy="112" r="48" fill="#31344e"/><ellipse cx="100" cy="132" rx="35" ry="44" fill="#eec5a6"/><path d="M65 119q5-53 65-20l9 30q-31-4-44-30-9 18-30 20" fill="#31344e"/><path d="M30 300v-67q0-55 70-55t70 55v67" fill="#56749b"/><path d="m77 179 23 37 23-37" fill="#eec5a6"/></svg>'),s=i('<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 600 300"><rect width="600" height="300" fill="#d5e6ef"/><circle cx="430" cy="77" r="34" fill="#f4bc68"/><path d="m0 260 170-200 155 200z" fill="#829ca1"/><path d="m90 300 260-248 250 248" fill="#577a87"/><path d="m297 103 53-51 62 62-39-13-23 11-20-17z" fill="#f5f1e7"/><path d="M0 248q170-50 300 5t300-13v60H0" fill="#335d68"/></svg>'),p=i('<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"><path fill="#ff0000" d="M0 0h100v200H0z"/><path fill="#00ff00" d="M100 0h100v200H100z"/><path fill="#0000ff" d="M200 0h100v200H200z"/><path fill="#ffff00" d="M300 0h100v200H300z"/></svg>'),u=i('<svg xmlns="http://www.w3.org/2000/svg" width="200" height="400"><path fill="#ff0000" d="M0 0h200v100H0z"/><path fill="#00ff00" d="M0 100h200v100H0z"/><path fill="#0000ff" d="M0 200h200v100H0z"/><path fill="#ffff00" d="M0 300h200v100H0z"/></svg>'),m=window.WallarmDS.Button,d=window.WallarmDS.FileUpload,f=window.WallarmDS.FileUploadError,h=window.WallarmDS.FileUploadTrigger,g=window.WallarmDS.useFilePreviewUrl,y=window.WallarmDS.Slider,w=window.WallarmDS.SliderControl,v=window.WallarmDS.SliderThumb,S=window.WallarmDS.ImageCropper,b=window.WallarmDS.ImageCropperContext,C=window.WallarmDS.ImageCropperGrid,x=window.WallarmDS.ImageCropperImage,R=window.WallarmDS.ImageCropperSelection,_=window.WallarmDS.ImageCropperViewport,E={title:"Inputs/ImageCropper",component:S,parameters:{layout:"centered",docs:{description:{component:'Select part of an image by moving and zooming it inside a fixed frame, then export a Blob at the exact outputSize. The frame follows the output aspect ratio and preserves the source proportions. Compose Slider for zoom, FileUpload for choosing a file, and your own Save action through ImageCropperContext. All processing runs in the browser; the consumer owns uploading. Preview rounding is visual only: the saved image is rectangular. Remote images need crossOrigin="anonymous" on ImageCropperImage and server CORS permission for canvas export; local file/object URLs also work. Size the preview with width classes; CSS scale transforms on ancestors are not supported by the underlying crop geometry. Arrow keys pan, Shift accelerates, and +/− zoom.'},source:{code:`<ImageCropper outputSize={{ width: 256, height: 256 }}>
+  <ImageCropperViewport className="w-[100px] rounded-[32px]">
+    <ImageCropperImage src={imageUrl} alt="Image to crop" />
+    <ImageCropperSelection aria-label="Position image">
+      <ImageCropperGrid />
+    </ImageCropperSelection>
+  </ImageCropperViewport>
+  <ImageCropperContext>
+    {api => (
+      <>
+        <Slider value={[api.zoom]} min={1} max={5} step={0.1}
+          onValueChange={([zoom]) => { if (zoom !== undefined) api.setZoom(zoom); }}>
+          <SliderControl><SliderThumb aria-label="Zoom image" /></SliderControl>
+        </Slider>
+        <Button disabled={!api.ready} onClick={async () => {
+          const blob = await api.getCroppedImage();
+          if (blob) saveImage(blob);
+        }}>Save</Button>
+      </>
+    )}
+  </ImageCropperContext>
+</ImageCropper>`}}},args:{outputSize:{width:256,height:256},minZoom:1,maxZoom:4},argTypes:{outputSize:{control:"object"},minZoom:{control:"number"},maxZoom:{control:"number"},defaultZoom:{control:"number"},zoom:{control:!1},onZoomChange:{control:!1},children:{control:!1},ref:{control:!1}}},$=r=>{let o,i,s,p,E,$,z,I,M,k,O,D,T,j,W,U,A,P,Z=(0,l.c)(38);Z[0]!==r?({source:i,compact:s,upload:p,geometry:E,...o}=r,Z[0]=r,Z[1]=o,Z[2]=i,Z[3]=s,Z[4]=p,Z[5]=E):(o=Z[1],i=Z[2],s=Z[3],p=Z[4],E=Z[5]);let L=void 0===i?c:i,F=void 0!==s&&s,H=void 0!==p&&p,V=void 0!==E&&E;Z[6]===Symbol.for("react.memo_cache_sentinel")?($=[],Z[6]=$):$=Z[6];let[B,G]=(0,n.useState)($),[Y,q]=(0,n.useState)(null),[J,X]=(0,n.useState)(""),[K,Q]=(0,n.useState)(!1),ee=g(B[0]),et=g(Y),er=F||V?"w-[100px] rounded-[32px]":"w-[280px] rounded-12",eo=K?u:ee??L;return Z[7]===Symbol.for("react.memo_cache_sentinel")?(z=()=>X(""),I=()=>X("This image could not be opened. Choose another file."),Z[7]=z,Z[8]=I):(z=Z[7],I=Z[8]),Z[9]!==eo?(M=e(x,{src:eo,alt:"Image to crop",onLoad:z,onError:I}),Z[9]=eo,Z[10]=M):M=Z[10],Z[11]===Symbol.for("react.memo_cache_sentinel")?(k=e(R,{"aria-label":"Crop image",children:e(C,{})}),Z[11]=k):k=Z[11],Z[12]!==M||Z[13]!==er?(O=t(_,{className:er,children:[M,k]}),Z[12]=M,Z[13]=er,Z[14]=O):O=Z[14],Z[15]!==o.maxZoom||Z[16]!==o.minZoom?(D=e(b,{children:r=>t(a,{children:[e(y,{"data-testid":"cropper-zoom",className:"w-full",value:[r.zoom],min:o.minZoom??1,max:o.maxZoom??4,step:.1,disabled:!r.ready,onValueChange:e=>{let[t]=e;void 0!==t&&r.setZoom(t)},children:e(w,{children:e(v,{"aria-label":"Zoom image"})})}),t("div",{className:"flex items-center gap-8",children:[e(m,{"data-testid":"cropper-save",disabled:!r.ready,onClick:async()=>{try{let e=await r.getCroppedImage();e?(q(new File([e],"cropped-image.png",{type:e.type})),X("")):X("The image could not be exported. Try a local image file.")}catch{X("The image could not be exported. Try a local image file.")}},children:"Save image"}),e(m,{variant:"secondary",color:"neutral",onClick:()=>r.reset(),children:"Reset"})]})]})}),Z[15]=o.maxZoom,Z[16]=o.minZoom,Z[17]=D):D=Z[17],Z[18]!==o||Z[19]!==O||Z[20]!==D?(T=t(S,{...o,"data-testid":"cropper",className:"flex flex-col items-center gap-24",children:[O,D]}),Z[18]=o,Z[19]=O,Z[20]=D,Z[21]=T):T=Z[21],Z[22]!==B||Z[23]!==H?(j=H&&t(d,{value:B,onValueChange:e=>{G(e),q(null)},accept:"image/png,image/jpeg,image/webp",maxFileSize:0xa00000,"data-testid":"cropper-upload",children:[e(h,{variant:"secondary",color:"neutral",children:"Select file"}),e(f,{})]}),Z[22]=B,Z[23]=H,Z[24]=j):j=Z[24],Z[25]!==V?(W=V&&e(m,{"data-testid":"cropper-replace",onClick:()=>Q(N),children:"Switch source orientation"}),Z[25]=V,Z[26]=W):W=Z[26],Z[27]!==J?(U=J&&e("p",{role:"alert",className:"text-sm text-text-danger",children:J}),Z[27]=J,Z[28]=U):U=Z[28],Z[29]!==o.outputSize||Z[30]!==et?(A=et&&t("div",{className:"flex flex-col items-center gap-8",children:[e("img",{"data-testid":"cropper-result",src:et,alt:"Saved crop",className:"max-h-[200px] max-w-full object-contain"}),t("a",{href:et,download:"cropped-image.png",className:"text-sm text-text-link-default",children:["Download ",o.outputSize.width," × ",o.outputSize.height]})]}),Z[29]=o.outputSize,Z[30]=et,Z[31]=A):A=Z[31],Z[32]!==T||Z[33]!==j||Z[34]!==W||Z[35]!==U||Z[36]!==A?(P=t("div",{className:"flex w-[304px] max-w-[calc(100vw-32px)] flex-col gap-24",children:[T,j,W,U,A]}),Z[32]=T,Z[33]=j,Z[34]=W,Z[35]=U,Z[36]=A,Z[37]=P):P=Z[37],P};function N(e){return!e}function z(e){return!e}let I=[{name:"Avatar",story:t=>{let r,o=(0,l.c)(2);return o[0]!==t?(r=e($,{...t,compact:!0}),o[0]=t,o[1]=r):r=o[1],r},meta:E},{name:"Landscape",story:t=>{let r,o,a=(0,l.c)(3);return a[0]===Symbol.for("react.memo_cache_sentinel")?(r={width:320,height:180},a[0]=r):r=a[0],a[1]!==t?(o=e($,{...t,source:s,outputSize:r}),a[1]=t,a[2]=o):o=a[2],o},meta:E},{name:"WithFileUpload",story:t=>{let r,o=(0,l.c)(2);return o[0]!==t?(r=e($,{...t,upload:!0}),o[0]=t,o[1]=r):r=o[1],r},meta:E},{name:"Controlled",story:r=>{let o,a,i,c,s,p=(0,l.c)(12),[u,d]=(0,n.useState)(1.5),[f,h]=(0,n.useState)(!1);p[0]!==f?(o=e=>{f||d(e)},p[0]=f,p[1]=o):o=p[1],p[2]!==r||p[3]!==o||p[4]!==u?(a=e($,{...r,zoom:u,onZoomChange:o}),p[2]=r,p[3]=o,p[4]=u,p[5]=a):a=p[5],p[6]===Symbol.for("react.memo_cache_sentinel")?(i=()=>h(z),p[6]=i):i=p[6];let g=f?"Unlock zoom":"Lock zoom";return p[7]!==g?(c=e(m,{variant:"secondary",color:"neutral","data-testid":"cropper-lock-zoom",onClick:i,children:g}),p[7]=g,p[8]=c):c=p[8],p[9]!==a||p[10]!==c?(s=t("div",{className:"flex flex-col items-center gap-16",children:[a,c]}),p[9]=a,p[10]=c,p[11]=s):s=p[11],s},meta:E},{name:"Geometry",story:t=>{let r,o,a=(0,l.c)(3);return a[0]===Symbol.for("react.memo_cache_sentinel")?(r={width:64,height:64},a[0]=r):r=a[0],a[1]!==t?(o=e($,{...t,source:p,outputSize:r,geometry:!0}),a[1]=t,a[2]=o):o=a[2],o},meta:E}];function M({entry:e}){let{story:t,meta:r}=e,o={...r.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,l=()=>n.default.createElement(a,o),i={args:o,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,i)}return n.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},n.default.createElement("h2",{className:"text-sm mb-12"},e.name),n.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(n.default.createElement(window.WallarmDS.Root,null,I.map((e,t)=>n.default.createElement(M,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,110 @@
+A coloured dot for a state next to something that already names it — a row, a tab, an item in a list. Reach for `Badge` when the state needs naming, since colour on its own carries nothing for a reader who cannot separate the hues.
+
+## 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 | — |  |
+| `color` | `"info" \| "brand" \| "warning" \| "success" \| "ai" \| "danger"` | no | `info` |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `size` | `"sm" \| "md"` | no | `sm` |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Stories
+
+### Basic
+
+The default dot. It only works where the thing beside it is already labelled — the dot
+qualifies that label rather than replacing it.
+
+Source: Indicator/Indicator.stories.tsx#Basic
+
+### AllVariants
+
+Both sizes against every colour. The colours mean what they mean everywhere else in the
+system, so pick from meaning rather than from contrast.
+
+Source: Indicator/Indicator.stories.tsx#AllVariants
+
+## Story sources
+
+### Indicator/Indicator.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { HStack, VStack } from '../Stack';
+import { Indicator } from './Indicator';
+
+const colors = ['info', 'brand', 'danger', 'warning', 'success', 'ai'] as const;
+
+const DESCRIPTION = [
+  'A coloured dot for a state next to something that already names it — a row, a tab, an item in a list.',
+  'Reach for `Badge` when the state needs naming, since colour on its own carries nothing for a reader who cannot separate the hues.',
+].join(' ');
+
+const meta = {
+  title: 'Status Indication/Indicator',
+  component: Indicator,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md'],
+    },
+    color: {
+      control: 'select',
+      options: colors,
+    },
+  },
+} satisfies Meta<typeof Indicator>;
+
+export default meta;
+
+/**
+ * The default dot. It only works where the thing beside it is already labelled — the dot
+ * qualifies that label rather than replacing it.
+ */
+export const Basic: StoryFn<typeof meta> = ({ ...args }) => <Indicator {...args} />;
+
+/**
+ * Both sizes against every colour. The colours mean what they mean everywhere else in the
+ * system, so pick from meaning rather than from contrast.
+ */
+export const AllVariants: StoryFn<typeof meta> = () => (
+  // Fixed-width cells so each size heading sits over its own column: the dots are 6 and 8px, far
+  // narrower than the words above them, so without a shared width nothing lines up.
+  <VStack gap={16} align='start'>
+    <HStack gap={24} align='center'>
+      <span className='sb-annotation w-32 text-center'>sm</span>
+      <span className='sb-annotation w-32 text-center'>md</span>
+    </HStack>
+
+    {colors.map(color => (
+      <HStack key={color} gap={24} align='center'>
+        <div className='flex w-32 justify-center'>
+          <Indicator size='sm' color={color} />
+        </div>
+        <div className='flex w-32 justify-center'>
+          <Indicator size='md' color={color} />
+        </div>
+        <span className='sb-annotation'>{color}</span>
+      </HStack>
+    ))}
+  </VStack>
+);
+```

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Status Indication" 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/Indicator/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 o,l,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,f=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,d=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))p.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},m={},y={$dispatcherGuard:()=>O,$makeReadOnly:()=>k,$reset:()=>M,$structuralCheck:()=>T,c:()=>b,clearRenderCounterRegistry:()=>x,renderCounterRegistry:()=>j,useRenderCounter:()=>D};for(var h in y)c(m,h,{get:y[h],enumerable:!0});e.exports=d(c({},"__esModule",{value:!0}),m);var g=(a=null!=(n=r("C"))?i(f(n)):{},d(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:w,useEffect:R,isValidElement:E}=g,$=null!=(o=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),b="function"==typeof(null==(l=g.__COMPILER_RUNTIME)?void 0:l.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=v;return t[v]=!0,t},[])},_={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{_[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var N=null;function S(e){return $.ReactCurrentDispatcher.current=e,$.ReactCurrentDispatcher.current}_.useMemoCache=e=>{if(null!=N)return N.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function O(e){let t=$.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.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=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===C.length&&(N=null),S(e)}else if(2===e)C.push(t),S(N);else if(3===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");S(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function M(e){for(let t=0;t<e.length;t++)e[t]=v}function k(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var j=new Map;function x(){for(let e of j.values())e.forEach(e=>{e.count=0})}function D(e){let t=w(null);null!=t.current&&(t.current.count+=1),R(()=>{if(null==t.current){let r,n={count:0};null==(r=j.get(e))&&(r=new Set,j.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=j.get(e))&&n.delete(r))}})}var I=new Set;function T(e,t,r,n,a,o){function l(e,t,l,i){let c=`${n}:${o} [${a}] ${r}${l} changed from ${e} to ${t} at depth ${i}`;I.has(c)||(I.add(c),console.error(c))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)l(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)l("null",`type ${typeof r}`,n,a);else if(null===r)l(`type ${typeof t}`,"null",n,a);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)l(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,a);else for(let[o,i]of t)r.has(o)?e(i,r.get(o),`${n}.get(${o})`,a+1):l(`Map instance with key ${o}`,`Map instance without key ${o}`,n,a);else l("Map instance","other value",n,a);else if(r instanceof Map)l("other value","Map instance",n,a);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)l(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,a);else for(let e of r)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else l("Set instance","other value",n,a);else if(r instanceof Set)l("other value","Set instance",n,a);else if(o||i)if(o!==i)l(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,n,a);else if(t.length!==r.length)l(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let o=0;o<t.length;o++)e(t[o],r[o],`${n}[${o}]`,a+1);else if(E(t)||E(r))E(t)!==E(r)?l(`type ${E(t)?"React element":"object"}`,`type ${E(r)?"React element":"object"}`,n,a):t.type!==r.type?l(`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||l(`object without key ${e}`,`object with key ${e}`,n,a);for(let o in t)o in r?e(t[o],r[o],`${n}.${o}`,a+1):l(`object with key ${o}`,`object without key ${o}`,n,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&l(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,a):t!==r&&l(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=new WeakMap;function o(e,t,r){let o=t,l=r;if("object"==typeof o&&null!==o&&"$$typeof"in o&&o.$$typeof===Symbol.for("react.context")&&"Provider"in o&&(o=o.Provider),"function"==typeof o&&null!=l.ref&&!o.prototype?.isReactComponent){let t=o,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)),o=a}if("string"==typeof o&&"boolean"==typeof l.inert&&((l={...l}).inert?l.inert="":delete l.inert),"string"==typeof o)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in l&&(l={...l,[t]:l[e]},delete l[e]);return"string"==typeof o&&null!=l.ref&&(o=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 o=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 o.displayName=`CanvasHost(${t})`,r.set(t,o),o}(e,o)),{type:o,props:l}}function l(e){let t=(t,r,n)=>{let a=o(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=o(e,t,r??{}),{children:l,...i}=a.props;return e.createElement(a.type,void 0===n?i:{...i,key:n},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let a=o(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),l=a.ref,i=o(e,a.type,{...a.props,ref:l});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}r.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:d,createContext:m,createElement:y,createFactory:h,createRef:g,forwardRef:w,isValidElement:R,lazy:E,memo:$,startTransition:v,unstable_act:b,useCallback:_,useContext:N,useDebugValue:S,useDeferredValue:C,useEffect:O,useId:M,useImperativeHandle:k,useInsertionEffect:j,useLayoutEffect:x,useMemo:D,useReducer:I,useRef:T,useState:A,useSyncExternalStore:P,useTransition:z,version:L,use:U}=n;r.d(t,{},{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:f,act:p,cloneElement:d,createContext:m,createElement:y,createFactory:h,createRef:g,default:n,forwardRef:w,isValidElement:R,lazy:E,memo:$,startTransition:v,unstable_act:b,use:U,useCallback:_,useContext:N,useDebugValue:S,useDeferredValue:C,useEffect:O,useId:M,useImperativeHandle:k,useInsertionEffect:j,useLayoutEffect:x,useMemo:D,useReducer:I,useRef:T,useState:A,useSyncExternalStore:P,useTransition:z,version:L})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.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 o=r("vD");let l=window.WallarmDS.HStack,i=window.WallarmDS.VStack,c=window.WallarmDS.Indicator,s=["info","brand","danger","warning","success","ai"],u={title:"Status Indication/Indicator",component:c,parameters:{layout:"centered",docs:{description:{component:"A coloured dot for a state next to something that already names it — a row, a tab, an item in a list. Reach for `Badge` when the state needs naming, since colour on its own carries nothing for a reader who cannot separate the hues."}}},argTypes:{size:{control:"select",options:["sm","md"]},color:{control:"select",options:s}}};function f(r){return t(l,{gap:24,align:"center",children:[e("div",{className:"flex w-32 justify-center",children:e(c,{size:"sm",color:r})}),e("div",{className:"flex w-32 justify-center",children:e(c,{size:"md",color:r})}),e("span",{className:"sb-annotation",children:r})]},r)}var p=r("C");let d=[{name:"Basic",story:t=>{let r,n,a=(0,o.c)(4);return a[0]!==t?({...r}=t,a[0]=t,a[1]=r):r=a[1],a[2]!==r?(n=e(c,{...r}),a[2]=r,a[3]=n):n=a[3],n},meta:u},{name:"AllVariants",story:()=>{let r,n=(0,o.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(i,{gap:16,align:"start",children:[t(l,{gap:24,align:"center",children:[e("span",{className:"sb-annotation w-32 text-center",children:"sm"}),e("span",{className:"sb-annotation w-32 text-center",children:"md"})]}),s.map(f)]}),n[0]=r):r=n[0],r},meta:u}];function m({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,o=()=>p.default.createElement(a,n),l={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=o;o=()=>e(t,l)}return p.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},p.default.createElement("h2",{className:"text-sm mb-12"},e.name),p.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(p.default.createElement(window.WallarmDS.Root,null,d.map((e,t)=>p.default.createElement(m,{key:t,entry:e})))),t}}})();