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

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

@@ -0,0 +1,467 @@
+Triggers an action — reach for `Link` when the control navigates somewhere instead, `ToggleButton` when it stays switched on, and `SplitButton` or `DropdownMenu` when several related actions compete for one slot. Keep one `variant='primary'` per view, and reserve `color='destructive'` for actions that are hard 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 |
+| --- | --- | --- | --- | --- |
+| `size` | `"small" \| "medium" \| "large" \| "inline-edit"` | no | `large` |  |
+| `loading` | `boolean` | no | `false` |  |
+| `full-width` | `boolean` | no | — |  |
+| `as-child` | `boolean \| undefined` | no | `false` |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+| `as` | `C \| undefined` | no | — |  |
+| `color` | `"brand" \| "neutral" \| "neutral-alt" \| "destructive"` | no | `brand` |  |
+| `variant` | `"primary" \| "outline" \| "ghost" \| "secondary"` | no | `primary` |  |
+
+## Stories
+
+### Basic
+
+A button with nothing set: you get the brand primary at the large size. Label it with a
+verb and its object — `Delete rule` rather than `Delete` — so the action still reads on its own.
+
+Source: Button/Button.stories.tsx#Basic
+
+### Variants
+
+`variant` sets emphasis and `color` sets meaning, and only the pairings drawn here are
+designed: `primary` exists for `brand` and `destructive` only. `neutral-alt` has ghost and
+secondary variants, shown on an inverted surface so they remain readable in both themes.
+
+Source: Button/Button.stories.tsx#Variants
+
+### Sizes
+
+Three heights at identical emphasis; `large` is the default, and the smaller two are for
+dense contexts like table rows and toolbars where a full-height button would dominate.
+
+Source: Button/Button.stories.tsx#Sizes
+
+### Disabled
+
+Every sanctioned pairing with the action unavailable. `disabled` also takes the button out
+of the tab order, so say somewhere on screen what would re-enable it rather than leaving the
+reader to guess.
+
+Source: Button/Button.stories.tsx#Disabled
+
+### Loading
+
+`loading` covers the content with a spinner but keeps the label's footprint, so the button
+doesn't resize mid-request. It disables the button on its own — passing `disabled` as well is
+redundant.
+
+Source: Button/Button.stories.tsx#Loading
+
+### Icons
+
+An icon before the label, after it, or both. The button sizes and spaces icons itself, so
+pass the icon bare; and if one button in a row carries an icon, they all should.
+
+Source: Button/Button.stories.tsx#Icons
+
+### Badge
+
+A `NumericBadge` after the label, for a count the action applies to. The button tightens
+its right padding whenever the last child isn't text, so a trailing badge or icon doesn't sit
+stranded.
+
+Source: Button/Button.stories.tsx#Badge
+
+### IconOnly
+
+There is no `iconOnly` prop: a button whose only child is an icon squares itself off. Give
+it an `aria-label` naming the action and a `Tooltip`, since nothing on screen says what it does.
+
+Source: Button/Button.stories.tsx#IconOnly
+
+### LinkAsButton
+
+`asChild` puts the button's styling on your own `<a>`, so the element stays a real link and
+middle-click and “open in new tab” keep working. Use it only when a navigation has to carry a
+button's weight; ordinary navigation is a `Link`.
+
+Source: Button/Button.stories.tsx#LinkAsButton
+
+### FullWidth
+
+`fullWidth` fills the container, for narrow surfaces like a `Drawer` or a dialog footer
+rather than a wide desktop form. Two full-width buttons side by side split the row evenly
+instead of overflowing it.
+
+Source: Button/Button.stories.tsx#FullWidth
+
+## Story sources
+
+### Button/Button.stories.tsx
+
+```tsx
+import { fn } from 'storybook/test';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { ChevronLeft, ChevronRight } from '../../icons';
+import { NumericBadge } from '../NumericBadge';
+import { HStack, VStack } from '../Stack';
+import { Button } from './Button';
+
+const DESCRIPTION = [
+  'Triggers an action — reach for `Link` when the control navigates somewhere instead, `ToggleButton` when it stays switched on, and `SplitButton` or `DropdownMenu` when several related actions compete for one slot.',
+  "Keep one `variant='primary'` per view, and reserve `color='destructive'` for actions that are hard to undo.",
+].join(' ');
+
+const meta = {
+  title: 'Actions/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+
+  args: { onClick: fn() },
+  argTypes: {
+    loading: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+/**
+ * A button with nothing set: you get the brand primary at the large size. Label it with a
+ * verb and its object — `Delete rule` rather than `Delete` — so the action still reads on its own.
+ */
+export const Basic: StoryFn<typeof meta> = ({ ...args }) => {
+  return (
+    <Button {...args} data-testid='button'>
+      Button
+    </Button>
+  );
+};
+
+/**
+ * `variant` sets emphasis and `color` sets meaning, and only the pairings drawn here are
+ * designed: `primary` exists for `brand` and `destructive` only. `neutral-alt` has ghost and
+ * secondary variants, shown on an inverted surface so they remain readable in both themes.
+ */
+export const Variants: StoryFn<typeof meta> = ({ ...args }) => (
+  <VStack>
+    <span className='sb-annotation'>Brand</span>
+
+    <HStack>
+      <Button {...args} variant='primary' color='brand'>
+        Primary
+      </Button>
+
+      <Button {...args} variant='ghost' color='brand'>
+        Ghost
+      </Button>
+
+      <Button {...args} variant='secondary' color='brand'>
+        Secondary
+      </Button>
+    </HStack>
+
+    <span className='sb-annotation'>Neutral</span>
+
+    <HStack>
+      <Button {...args} variant='outline' color='neutral'>
+        Outline
+      </Button>
+
+      <Button {...args} variant='ghost' color='neutral'>
+        Ghost
+      </Button>
+
+      <Button {...args} variant='secondary' color='neutral'>
+        Secondary
+      </Button>
+    </HStack>
+
+    <span className='sb-annotation'>Neutral Alt</span>
+
+    <HStack className='rounded-8 bg-component-toast-bg p-8'>
+      <Button {...args} variant='ghost' color='neutral-alt'>
+        Ghost
+      </Button>
+
+      <Button {...args} variant='secondary' color='neutral-alt'>
+        Secondary
+      </Button>
+    </HStack>
+
+    <span className='sb-annotation'>Destructive</span>
+
+    <HStack>
+      <Button {...args} variant='primary' color='destructive'>
+        Primary
+      </Button>
+
+      <Button {...args} variant='outline' color='destructive'>
+        Outline
+      </Button>
+
+      <Button {...args} variant='ghost' color='destructive'>
+        Ghost
+      </Button>
+
+      <Button {...args} variant='secondary' color='destructive'>
+        Secondary
+      </Button>
+    </HStack>
+  </VStack>
+);
+
+/**
+ * Three heights at identical emphasis; `large` is the default, and the smaller two are for
+ * dense contexts like table rows and toolbars where a full-height button would dominate.
+ */
+export const Sizes: StoryFn<typeof meta> = ({ ...args }) => (
+  <HStack align='end' justify='center'>
+    <Button {...args} size='small'>
+      Small
+    </Button>
+    <Button {...args} size='medium'>
+      Medium
+    </Button>
+    <Button {...args} size='large'>
+      Large
+    </Button>
+  </HStack>
+);
+
+/**
+ * Every sanctioned pairing with the action unavailable. `disabled` also takes the button out
+ * of the tab order, so say somewhere on screen what would re-enable it rather than leaving the
+ * reader to guess.
+ */
+export const Disabled: StoryFn<typeof meta> = ({ ...args }) => (
+  <VStack>
+    <span className='sb-annotation'>Brand</span>
+
+    <HStack>
+      <Button {...args} variant='primary' color='brand' disabled>
+        Primary
+      </Button>
+
+      <Button {...args} variant='ghost' color='brand' disabled>
+        Ghost
+      </Button>
+
+      <Button {...args} variant='secondary' color='brand' disabled>
+        Secondary
+      </Button>
+    </HStack>
+
+    <span className='sb-annotation'>Neutral</span>
+
+    <HStack>
+      <Button {...args} variant='outline' color='neutral' disabled>
+        Outline
+      </Button>
+
+      <Button {...args} variant='ghost' color='neutral' disabled>
+        Ghost
+      </Button>
+
+      <Button {...args} variant='secondary' color='neutral' disabled>
+        Secondary
+      </Button>
+    </HStack>
+
+    <span className='sb-annotation'>Neutral Alt</span>
+
+    <HStack className='rounded-8 bg-component-toast-bg p-8'>
+      <Button {...args} variant='ghost' color='neutral-alt' disabled>
+        Ghost
+      </Button>
+
+      <Button {...args} variant='secondary' color='neutral-alt' disabled>
+        Secondary
+      </Button>
+    </HStack>
+
+    <span className='sb-annotation'>Destructive</span>
+
+    <HStack>
+      <Button {...args} variant='primary' color='destructive' disabled>
+        Primary
+      </Button>
+
+      <Button {...args} variant='outline' color='destructive' disabled>
+        Outline
+      </Button>
+
+      <Button {...args} variant='ghost' color='destructive' disabled>
+        Ghost
+      </Button>
+
+      <Button {...args} variant='secondary' color='destructive' disabled>
+        Secondary
+      </Button>
+    </HStack>
+  </VStack>
+);
+
+/**
+ * `loading` covers the content with a spinner but keeps the label's footprint, so the button
+ * doesn't resize mid-request. It disables the button on its own — passing `disabled` as well is
+ * redundant.
+ */
+export const Loading: StoryFn<typeof meta> = ({ ...args }) => (
+  <VStack>
+    <span className='sb-annotation'>Brand</span>
+
+    <HStack>
+      <Button {...args} variant='primary' color='brand' loading>
+        Primary
+      </Button>
+
+      <Button {...args} variant='ghost' color='brand' loading>
+        Ghost
+      </Button>
+
+      <Button {...args} variant='secondary' color='brand' loading>
+        Secondary
+      </Button>
+    </HStack>
+
+    <span className='sb-annotation'>Neutral</span>
+
+    <HStack>
+      <Button {...args} variant='outline' color='neutral' loading>
+        Outline
+      </Button>
+
+      <Button {...args} variant='ghost' color='neutral' loading>
+        Ghost
+      </Button>
+
+      <Button {...args} variant='secondary' color='neutral' loading>
+        Secondary
+      </Button>
+    </HStack>
+
+    <span className='sb-annotation'>Neutral Alt</span>
+
+    <HStack className='rounded-8 bg-component-toast-bg p-8'>
+      <Button {...args} variant='ghost' color='neutral-alt' loading>
+        Ghost
+      </Button>
+
+      <Button {...args} variant='secondary' color='neutral-alt' loading>
+        Secondary
+      </Button>
+    </HStack>
+
+    <span className='sb-annotation'>Destructive</span>
+
+    <HStack>
+      <Button {...args} variant='primary' color='destructive' loading>
+        Primary
+      </Button>
+
+      <Button {...args} variant='outline' color='destructive' loading>
+        Outline
+      </Button>
+
+      <Button {...args} variant='ghost' color='destructive' loading>
+        Ghost
+      </Button>
+
+      <Button {...args} variant='secondary' color='destructive' loading>
+        Secondary
+      </Button>
+    </HStack>
+  </VStack>
+);
+
+/**
+ * An icon before the label, after it, or both. The button sizes and spaces icons itself, so
+ * pass the icon bare; and if one button in a row carries an icon, they all should.
+ */
+export const Icons: StoryFn<typeof meta> = ({ ...args }) => (
+  <HStack>
+    <Button {...args}>
+      <ChevronLeft />
+      Left icon
+    </Button>
+
+    <Button {...args}>
+      Right icon
+      <ChevronRight />
+    </Button>
+
+    <Button {...args}>
+      <ChevronLeft />2 icons
+      <ChevronRight />
+    </Button>
+  </HStack>
+);
+
+/**
+ * A `NumericBadge` after the label, for a count the action applies to. The button tightens
+ * its right padding whenever the last child isn't text, so a trailing badge or icon doesn't sit
+ * stranded.
+ */
+export const Badge: StoryFn<typeof meta> = ({ ...args }) => (
+  <Button {...args}>
+    With badge
+    <NumericBadge type='outline'>1</NumericBadge>
+  </Button>
+);
+
+/**
+ * There is no `iconOnly` prop: a button whose only child is an icon squares itself off. Give
+ * it an `aria-label` naming the action and a `Tooltip`, since nothing on screen says what it does.
+ */
+export const IconOnly: StoryFn<typeof meta> = ({ ...args }) => (
+  <HStack>
+    <Button {...args}>
+      <ChevronRight />
+    </Button>
+
+    <Button {...args} loading>
+      <ChevronRight />
+    </Button>
+
+    <Button {...args} disabled>
+      <ChevronRight />
+    </Button>
+  </HStack>
+);
+
+/**
+ * `asChild` puts the button's styling on your own `<a>`, so the element stays a real link and
+ * middle-click and “open in new tab” keep working. Use it only when a navigation has to carry a
+ * button's weight; ordinary navigation is a `Link`.
+ */
+export const LinkAsButton: StoryFn<typeof meta> = ({ ...args }) => (
+  <Button {...args} asChild>
+    <a href='https://google.com' target='_blank' rel='noopener noreferrer'>
+      Button as link
+    </a>
+  </Button>
+);
+
+/**
+ * `fullWidth` fills the container, for narrow surfaces like a `Drawer` or a dialog footer
+ * rather than a wide desktop form. Two full-width buttons side by side split the row evenly
+ * instead of overflowing it.
+ */
+export const FullWidth: StoryFn<typeof meta> = ({ ...args }) => (
+  <div className='w-400'>
+    <Button {...args} fullWidth>
+      Full width example
+    </Button>
+  </div>
+);
+```

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Actions" 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/Button/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,d=Object.getOwnPropertyNames,u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,h=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of d(t))m.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},f={},p={$dispatcherGuard:()=>C,$makeReadOnly:()=>M,$reset:()=>O,$structuralCheck:()=>T,c:()=>N,clearRenderCounterRegistry:()=>j,renderCounterRegistry:()=>D,useRenderCounter:()=>I};for(var y in p)c(f,y,{get:p[y],enumerable:!0});e.exports=h(c({},"__esModule",{value:!0}),f);var b=(a=null!=(n=r("C"))?i(u(n)):{},h(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:v,useEffect:g,isValidElement:_}=b,S=null!=(o=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:b.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,w=Symbol.for("react.memo_cache_sentinel"),N="function"==typeof(null==(l=b.__COMPILER_RUNTIME)?void 0:l.c)?b.__COMPILER_RUNTIME.c:function(e){return b.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=w;return t[w]=!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 E=null;function $(e){return S.ReactCurrentDispatcher.current=e,S.ReactCurrentDispatcher.current}R.useMemoCache=e=>{if(null!=E)return E.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var k=[];function C(e){let t=S.ReactCurrentDispatcher.current;if(0===e){if(k.push(t),1===k.length&&(E=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.");$(R)}else if(1===e){let e=k.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===k.length&&(E=null),$(e)}else if(2===e)k.push(t),$(E);else if(3===e){let e=k.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]=w}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function j(){for(let e of D.values())e.forEach(e=>{e.count=0})}function I(e){let t=v(null);null!=t.current&&(t.current.count+=1),g(()=>{if(null==t.current){let r,n={count:0};null==(r=D.get(e))&&(r=new Set,D.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=D.get(e))&&n.delete(r))}})}var P=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}`;P.has(c)||(P.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(_(t)||_(r))_(t)!==_(r)?l(`type ${_(t)?"React element":"object"}`,`type ${_(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:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:m,cloneElement:h,createContext:f,createElement:p,createFactory:y,createRef:b,forwardRef:v,isValidElement:g,lazy:_,memo:S,startTransition:w,unstable_act:N,useCallback:R,useContext:E,useDebugValue:$,useDeferredValue:k,useEffect:C,useId:O,useImperativeHandle:M,useInsertionEffect:D,useLayoutEffect:j,useMemo:I,useReducer:P,useRef:T,useState:A,useSyncExternalStore:x,useTransition:L,version:z,use:W}=n;r.d(t,{},{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:m,cloneElement:h,createContext:f,createElement:p,createFactory:y,createRef:b,default:n,forwardRef:v,isValidElement:g,lazy:_,memo:S,startTransition:w,unstable_act:N,use:W,useCallback:R,useContext:E,useDebugValue:$,useDeferredValue:k,useEffect:C,useId:O,useImperativeHandle:M,useInsertionEffect:D,useLayoutEffect:j,useMemo:I,useReducer:P,useRef:T,useState:A,useSyncExternalStore:x,useTransition:L,version:z})}},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.Icons.ChevronLeft,i=window.WallarmDS.Icons.ChevronRight,c=window.WallarmDS.NumericBadge,s=window.WallarmDS.HStack,d=window.WallarmDS.VStack,u=window.WallarmDS.Button,m={title:"Actions/Button",component:u,parameters:{layout:"centered",docs:{description:{component:"Triggers an action — reach for `Link` when the control navigates somewhere instead, `ToggleButton` when it stays switched on, and `SplitButton` or `DropdownMenu` when several related actions compete for one slot. Keep one `variant='primary'` per view, and reserve `color='destructive'` for actions that are hard to undo."}}},args:{onClick:function(e=()=>{}){let t=(...t)=>e(...t);for(let r of["mockName","mockReturnValue","mockResolvedValue","mockImplementation"])t[r]=n=>("mockImplementation"===r?e=n:"mockReturnValue"===r?e=()=>n:"mockResolvedValue"===r&&(e=()=>Promise.resolve(n)),t);return t}()},argTypes:{loading:{control:"boolean"},disabled:{control:"boolean"}}};var h=r("C");let f=[{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(u,{...r,"data-testid":"button",children:"Button"}),a[2]=r,a[3]=n):n=a[3],n},meta:m},{name:"Variants",story:r=>{let n,a,l,i,c,m,h,f,p,y,b=(0,o.c)(19);return b[0]!==r?({...n}=r,b[0]=r,b[1]=n):n=b[1],b[2]===Symbol.for("react.memo_cache_sentinel")?(a=e("span",{className:"sb-annotation",children:"Brand"}),b[2]=a):a=b[2],b[3]!==n?(l=t(s,{children:[e(u,{...n,variant:"primary",color:"brand",children:"Primary"}),e(u,{...n,variant:"ghost",color:"brand",children:"Ghost"}),e(u,{...n,variant:"secondary",color:"brand",children:"Secondary"})]}),b[3]=n,b[4]=l):l=b[4],b[5]===Symbol.for("react.memo_cache_sentinel")?(i=e("span",{className:"sb-annotation",children:"Neutral"}),b[5]=i):i=b[5],b[6]!==n?(c=t(s,{children:[e(u,{...n,variant:"outline",color:"neutral",children:"Outline"}),e(u,{...n,variant:"ghost",color:"neutral",children:"Ghost"}),e(u,{...n,variant:"secondary",color:"neutral",children:"Secondary"})]}),b[6]=n,b[7]=c):c=b[7],b[8]===Symbol.for("react.memo_cache_sentinel")?(m=e("span",{className:"sb-annotation",children:"Neutral Alt"}),b[8]=m):m=b[8],b[9]!==n?(h=t(s,{className:"rounded-8 bg-component-toast-bg p-8",children:[e(u,{...n,variant:"ghost",color:"neutral-alt",children:"Ghost"}),e(u,{...n,variant:"secondary",color:"neutral-alt",children:"Secondary"})]}),b[9]=n,b[10]=h):h=b[10],b[11]===Symbol.for("react.memo_cache_sentinel")?(f=e("span",{className:"sb-annotation",children:"Destructive"}),b[11]=f):f=b[11],b[12]!==n?(p=t(s,{children:[e(u,{...n,variant:"primary",color:"destructive",children:"Primary"}),e(u,{...n,variant:"outline",color:"destructive",children:"Outline"}),e(u,{...n,variant:"ghost",color:"destructive",children:"Ghost"}),e(u,{...n,variant:"secondary",color:"destructive",children:"Secondary"})]}),b[12]=n,b[13]=p):p=b[13],b[14]!==l||b[15]!==c||b[16]!==h||b[17]!==p?(y=t(d,{children:[a,l,i,c,m,h,f,p]}),b[14]=l,b[15]=c,b[16]=h,b[17]=p,b[18]=y):y=b[18],y},meta:m},{name:"Sizes",story:r=>{let n,a,l=(0,o.c)(4);return l[0]!==r?({...n}=r,l[0]=r,l[1]=n):n=l[1],l[2]!==n?(a=t(s,{align:"end",justify:"center",children:[e(u,{...n,size:"small",children:"Small"}),e(u,{...n,size:"medium",children:"Medium"}),e(u,{...n,size:"large",children:"Large"})]}),l[2]=n,l[3]=a):a=l[3],a},meta:m},{name:"Disabled",story:r=>{let n,a,l,i,c,m,h,f,p,y,b=(0,o.c)(19);return b[0]!==r?({...n}=r,b[0]=r,b[1]=n):n=b[1],b[2]===Symbol.for("react.memo_cache_sentinel")?(a=e("span",{className:"sb-annotation",children:"Brand"}),b[2]=a):a=b[2],b[3]!==n?(l=t(s,{children:[e(u,{...n,variant:"primary",color:"brand",disabled:!0,children:"Primary"}),e(u,{...n,variant:"ghost",color:"brand",disabled:!0,children:"Ghost"}),e(u,{...n,variant:"secondary",color:"brand",disabled:!0,children:"Secondary"})]}),b[3]=n,b[4]=l):l=b[4],b[5]===Symbol.for("react.memo_cache_sentinel")?(i=e("span",{className:"sb-annotation",children:"Neutral"}),b[5]=i):i=b[5],b[6]!==n?(c=t(s,{children:[e(u,{...n,variant:"outline",color:"neutral",disabled:!0,children:"Outline"}),e(u,{...n,variant:"ghost",color:"neutral",disabled:!0,children:"Ghost"}),e(u,{...n,variant:"secondary",color:"neutral",disabled:!0,children:"Secondary"})]}),b[6]=n,b[7]=c):c=b[7],b[8]===Symbol.for("react.memo_cache_sentinel")?(m=e("span",{className:"sb-annotation",children:"Neutral Alt"}),b[8]=m):m=b[8],b[9]!==n?(h=t(s,{className:"rounded-8 bg-component-toast-bg p-8",children:[e(u,{...n,variant:"ghost",color:"neutral-alt",disabled:!0,children:"Ghost"}),e(u,{...n,variant:"secondary",color:"neutral-alt",disabled:!0,children:"Secondary"})]}),b[9]=n,b[10]=h):h=b[10],b[11]===Symbol.for("react.memo_cache_sentinel")?(f=e("span",{className:"sb-annotation",children:"Destructive"}),b[11]=f):f=b[11],b[12]!==n?(p=t(s,{children:[e(u,{...n,variant:"primary",color:"destructive",disabled:!0,children:"Primary"}),e(u,{...n,variant:"outline",color:"destructive",disabled:!0,children:"Outline"}),e(u,{...n,variant:"ghost",color:"destructive",disabled:!0,children:"Ghost"}),e(u,{...n,variant:"secondary",color:"destructive",disabled:!0,children:"Secondary"})]}),b[12]=n,b[13]=p):p=b[13],b[14]!==l||b[15]!==c||b[16]!==h||b[17]!==p?(y=t(d,{children:[a,l,i,c,m,h,f,p]}),b[14]=l,b[15]=c,b[16]=h,b[17]=p,b[18]=y):y=b[18],y},meta:m},{name:"Loading",story:r=>{let n,a,l,i,c,m,h,f,p,y,b=(0,o.c)(19);return b[0]!==r?({...n}=r,b[0]=r,b[1]=n):n=b[1],b[2]===Symbol.for("react.memo_cache_sentinel")?(a=e("span",{className:"sb-annotation",children:"Brand"}),b[2]=a):a=b[2],b[3]!==n?(l=t(s,{children:[e(u,{...n,variant:"primary",color:"brand",loading:!0,children:"Primary"}),e(u,{...n,variant:"ghost",color:"brand",loading:!0,children:"Ghost"}),e(u,{...n,variant:"secondary",color:"brand",loading:!0,children:"Secondary"})]}),b[3]=n,b[4]=l):l=b[4],b[5]===Symbol.for("react.memo_cache_sentinel")?(i=e("span",{className:"sb-annotation",children:"Neutral"}),b[5]=i):i=b[5],b[6]!==n?(c=t(s,{children:[e(u,{...n,variant:"outline",color:"neutral",loading:!0,children:"Outline"}),e(u,{...n,variant:"ghost",color:"neutral",loading:!0,children:"Ghost"}),e(u,{...n,variant:"secondary",color:"neutral",loading:!0,children:"Secondary"})]}),b[6]=n,b[7]=c):c=b[7],b[8]===Symbol.for("react.memo_cache_sentinel")?(m=e("span",{className:"sb-annotation",children:"Neutral Alt"}),b[8]=m):m=b[8],b[9]!==n?(h=t(s,{className:"rounded-8 bg-component-toast-bg p-8",children:[e(u,{...n,variant:"ghost",color:"neutral-alt",loading:!0,children:"Ghost"}),e(u,{...n,variant:"secondary",color:"neutral-alt",loading:!0,children:"Secondary"})]}),b[9]=n,b[10]=h):h=b[10],b[11]===Symbol.for("react.memo_cache_sentinel")?(f=e("span",{className:"sb-annotation",children:"Destructive"}),b[11]=f):f=b[11],b[12]!==n?(p=t(s,{children:[e(u,{...n,variant:"primary",color:"destructive",loading:!0,children:"Primary"}),e(u,{...n,variant:"outline",color:"destructive",loading:!0,children:"Outline"}),e(u,{...n,variant:"ghost",color:"destructive",loading:!0,children:"Ghost"}),e(u,{...n,variant:"secondary",color:"destructive",loading:!0,children:"Secondary"})]}),b[12]=n,b[13]=p):p=b[13],b[14]!==l||b[15]!==c||b[16]!==h||b[17]!==p?(y=t(d,{children:[a,l,i,c,m,h,f,p]}),b[14]=l,b[15]=c,b[16]=h,b[17]=p,b[18]=y):y=b[18],y},meta:m},{name:"Icons",story:r=>{let n,a,c,d,m,h,f,p,y,b=(0,o.c)(16);return b[0]!==r?({...n}=r,b[0]=r,b[1]=n):n=b[1],b[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(l,{}),b[2]=a):a=b[2],b[3]!==n?(c=t(u,{...n,children:[a,"Left icon"]}),b[3]=n,b[4]=c):c=b[4],b[5]===Symbol.for("react.memo_cache_sentinel")?(d=e(i,{}),b[5]=d):d=b[5],b[6]!==n?(m=t(u,{...n,children:["Right icon",d]}),b[6]=n,b[7]=m):m=b[7],b[8]===Symbol.for("react.memo_cache_sentinel")?(h=e(l,{}),b[8]=h):h=b[8],b[9]===Symbol.for("react.memo_cache_sentinel")?(f=e(i,{}),b[9]=f):f=b[9],b[10]!==n?(p=t(u,{...n,children:[h,"2 icons",f]}),b[10]=n,b[11]=p):p=b[11],b[12]!==c||b[13]!==m||b[14]!==p?(y=t(s,{children:[c,m,p]}),b[12]=c,b[13]=m,b[14]=p,b[15]=y):y=b[15],y},meta:m},{name:"Badge",story:r=>{let n,a,l,i=(0,o.c)(5);return i[0]!==r?({...n}=r,i[0]=r,i[1]=n):n=i[1],i[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(c,{type:"outline",children:"1"}),i[2]=a):a=i[2],i[3]!==n?(l=t(u,{...n,children:["With badge",a]}),i[3]=n,i[4]=l):l=i[4],l},meta:m},{name:"IconOnly",story:r=>{let n,a,l,c,d,m,h,f,p=(0,o.c)(15);return p[0]!==r?({...n}=r,p[0]=r,p[1]=n):n=p[1],p[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(i,{}),p[2]=a):a=p[2],p[3]!==n?(l=e(u,{...n,children:a}),p[3]=n,p[4]=l):l=p[4],p[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(i,{}),p[5]=c):c=p[5],p[6]!==n?(d=e(u,{...n,loading:!0,children:c}),p[6]=n,p[7]=d):d=p[7],p[8]===Symbol.for("react.memo_cache_sentinel")?(m=e(i,{}),p[8]=m):m=p[8],p[9]!==n?(h=e(u,{...n,disabled:!0,children:m}),p[9]=n,p[10]=h):h=p[10],p[11]!==l||p[12]!==d||p[13]!==h?(f=t(s,{children:[l,d,h]}),p[11]=l,p[12]=d,p[13]=h,p[14]=f):f=p[14],f},meta:m},{name:"LinkAsButton",story:t=>{let r,n,a,l=(0,o.c)(5);return l[0]!==t?({...r}=t,l[0]=t,l[1]=r):r=l[1],l[2]===Symbol.for("react.memo_cache_sentinel")?(n=e("a",{href:"https://google.com",target:"_blank",rel:"noopener noreferrer",children:"Button as link"}),l[2]=n):n=l[2],l[3]!==r?(a=e(u,{...r,asChild:!0,children:n}),l[3]=r,l[4]=a):a=l[4],a},meta:m},{name:"FullWidth",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("div",{className:"w-400",children:e(u,{...r,fullWidth:!0,children:"Full width example"})}),a[2]=r,a[3]=n):n=a[3],n},meta:m}];function p({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=()=>h.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 h.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},h.default.createElement("h2",{className:"text-sm mb-12"},e.name),h.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(h.default.createElement(window.WallarmDS.Root,null,f.map((e,t)=>h.default.createElement(p,{key:t,entry:e})))),t}}})();