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

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

@@ -0,0 +1,406 @@
+Click-to-copy is a **behaviour pattern**, not a component.
+Any existing element — a Button, InlineCodeSnippet, Attribute value, table cell, or DropdownMenuItem — copies a value on click and confirms it.
+
+### Feedback rules
+
+1. **Element can change itself** (button, icon button, code snippet action): swap in place. Copy icon → Check, label "Copy code" → "Copied" at the idle width, tooltip "Click to copy" → "Copied".
+2. **Clickable text without an icon** (inline code snippet, a value): tooltip only.
+3. **Element disappears after the action or has nothing to transform** (menu item): toast "Copied".
+
+Never two feedbacks at once. Copied state resets after ~2 s.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `text` | `string \| (() => string)` | yes | — | The text to copy to the clipboard. Pass a function to read the text lazily at click time (e.g. the live document of an editor). |
+| `tooltip` | `string \| boolean \| { idle: string; copied: string; } \| undefined` | no | — | Show a tooltip with copy feedback. - `true` — "Click to copy" / "Copied" - `string` — custom idle text; copied text stays "Copied" - `{ idle: string; copied: string }` — fully custom tooltip text |
+| `on-copied` | `(() => void) \| undefined` | no | — | Fired after a successful copy. Use for toast feedback. |
+| `reset-delay` | `number \| undefined` | no | `2000` | Time in ms before the `copied` state resets (default: 2000). |
+
+## Sub-components
+
+- `WallarmDS.CopyableIcon` — `CopyableIconProps` in the declaration bundle.
+- `WallarmDS.CopyableLabel` — `CopyableLabelProps` in the declaration bundle.
+
+## Stories
+
+### IconButton
+
+A ghost icon-only button — the most compact form. The icon swaps from
+`Copy` to `Check` and the tooltip changes from "Click to copy" to "Copied".
+
+Source: Copyable/stories/ClickToCopy.stories.tsx#IconButton
+
+### LabelledButton
+
+A labelled button using `CopyableLabel` for width-stable text swap.
+The wrapper always occupies the width of the wider label, preventing
+layout shift when the text toggles between "Copy code" and "Copied".
+
+Source: Copyable/stories/ClickToCopy.stories.tsx#LabelledButton
+
+### InInlineCodeSnippet
+
+`InlineCodeSnippet` has built-in click-to-copy with tooltip-only feedback
+(feedback rule 2 — clickable text without an icon).
+
+Source: Copyable/stories/ClickToCopy.stories.tsx#InInlineCodeSnippet
+
+### InCodeSnippet
+
+Inside a `CodeSnippet`, the `CodeSnippetCopyButton` uses the Copyable
+pattern internally — icon-only, ghost/neutral, with tooltip feedback.
+
+Source: Copyable/stories/ClickToCopy.stories.tsx#InCodeSnippet
+
+### ValueText
+
+A plain text value wrapped in `Copyable` with tooltip feedback (feedback
+rule 2). This is the pattern for Attribute values or any non-interactive
+text that should be copyable on click.
+
+Source: Copyable/stories/ClickToCopy.stories.tsx#ValueText
+
+### DropdownMenuItemWithToast
+
+When the element disappears after the action (like a dropdown menu item),
+use toast feedback via `onCopied` (feedback rule 3). The `Copyable`
+component does not bake in toast — the consumer fires it from the callback.
+
+Source: Copyable/stories/ClickToCopy.stories.tsx#DropdownMenuItemWithToast
+
+### SelectMenuItemWithToast
+
+A Select option that copies on select — same toast feedback pattern as the
+dropdown menu item (feedback rule 3).
+
+Source: Copyable/stories/ClickToCopy.stories.tsx#SelectMenuItemWithToast
+
+### AllRecipes
+
+All recipes side-by-side for comparison. The three feedback types —
+in-place swap, tooltip-only, and toast — are shown together.
+
+Source: Copyable/stories/ClickToCopy.stories.tsx#AllRecipes
+
+## Story sources
+
+### Copyable/stories/ClickToCopy.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Copy } from '../../../icons';
+import { Attribute, AttributeLabel, AttributeValue } from '../../Attribute';
+import { Button } from '../../Button';
+import {
+  CodeSnippetActions,
+  CodeSnippetAdapterProvider,
+  CodeSnippetCode,
+  CodeSnippetContent,
+  CodeSnippetCopyButton,
+  CodeSnippetRoot,
+  InlineCodeSnippet,
+  plainAdapter,
+} from '../../CodeSnippet';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuItemIcon,
+  DropdownMenuItemText,
+  DropdownMenuTrigger,
+} from '../../DropdownMenu';
+import {
+  createListCollection,
+  Select,
+  SelectButton,
+  SelectContent,
+  SelectOption,
+  SelectOptionText,
+  SelectPositioner,
+} from '../../Select';
+import { HStack, VStack } from '../../Stack';
+import { Text } from '../../Text';
+import { Toaster, toaster } from '../../Toast';
+import { Copyable } from '../Copyable';
+import { CopyableIcon } from '../CopyableIcon';
+import { CopyableLabel } from '../CopyableLabel';
+
+const DESCRIPTION = [
+  'Click-to-copy is a **behaviour pattern**, not a component.',
+  'Any existing element — a Button, InlineCodeSnippet, Attribute value, table cell, or DropdownMenuItem — copies a value on click and confirms it.',
+  '',
+  '### Feedback rules',
+  '',
+  '1. **Element can change itself** (button, icon button, code snippet action): swap in place. Copy icon → Check, label "Copy code" → "Copied" at the idle width, tooltip "Click to copy" → "Copied".',
+  '2. **Clickable text without an icon** (inline code snippet, a value): tooltip only.',
+  '3. **Element disappears after the action or has nothing to transform** (menu item): toast "Copied".',
+  '',
+  'Never two feedbacks at once. Copied state resets after ~2 s.',
+].join('\n');
+
+const SAMPLE_TEXT = 'Hello, clipboard!';
+const SAMPLE_CODE = 'npx wasd-new@latest add code-snippet';
+
+const meta = {
+  title: 'Data Display/Click to Copy',
+  component: Copyable,
+  subcomponents: { CopyableIcon, CopyableLabel },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  decorators: [
+    (Story: React.ComponentType) => (
+      <>
+        <Toaster />
+        <Story />
+      </>
+    ),
+  ],
+} satisfies Meta<typeof Copyable>;
+
+export default meta;
+
+/**
+ * A ghost icon-only button — the most compact form. The icon swaps from
+ * `Copy` to `Check` and the tooltip changes from "Click to copy" to "Copied".
+ */
+export const IconButton: StoryFn<typeof meta> = () => (
+  <Copyable text={SAMPLE_TEXT} tooltip>
+    <Button variant='ghost' color='neutral' size='small' aria-label='Copy'>
+      <CopyableIcon />
+    </Button>
+  </Copyable>
+);
+
+/**
+ * A labelled button using `CopyableLabel` for width-stable text swap.
+ * The wrapper always occupies the width of the wider label, preventing
+ * layout shift when the text toggles between "Copy code" and "Copied".
+ */
+export const LabelledButton: StoryFn<typeof meta> = () => (
+  <VStack align='start' gap={16}>
+    <Copyable text={SAMPLE_TEXT} tooltip>
+      <Button variant='secondary' size='medium'>
+        <CopyableIcon /> <CopyableLabel idle='Copy code' copied='Copied' />
+      </Button>
+    </Copyable>
+    <Copyable text={SAMPLE_TEXT} tooltip>
+      <Button variant='ghost' color='neutral' size='medium'>
+        <CopyableIcon /> <CopyableLabel idle='Copy link' copied='Copied' />
+      </Button>
+    </Copyable>
+  </VStack>
+);
+
+/**
+ * `InlineCodeSnippet` has built-in click-to-copy with tooltip-only feedback
+ * (feedback rule 2 — clickable text without an icon).
+ */
+export const InInlineCodeSnippet: StoryFn<typeof meta> = () => (
+  <Text size='sm' color='secondary'>
+    To start creating an interface, run <InlineCodeSnippet code='npm install @wads/ui' size='md' />
+  </Text>
+);
+InInlineCodeSnippet.parameters = { layout: 'padded' };
+
+/**
+ * Inside a `CodeSnippet`, the `CodeSnippetCopyButton` uses the Copyable
+ * pattern internally — icon-only, ghost/neutral, with tooltip feedback.
+ */
+export const InCodeSnippet: StoryFn<typeof meta> = () => (
+  <CodeSnippetAdapterProvider adapter={plainAdapter}>
+    <CodeSnippetRoot code={SAMPLE_CODE} language='text'>
+      <CodeSnippetActions>
+        <CodeSnippetCopyButton />
+      </CodeSnippetActions>
+      <CodeSnippetContent>
+        <CodeSnippetCode />
+      </CodeSnippetContent>
+    </CodeSnippetRoot>
+  </CodeSnippetAdapterProvider>
+);
+InCodeSnippet.parameters = { layout: 'padded' };
+
+/**
+ * A plain text value wrapped in `Copyable` with tooltip feedback (feedback
+ * rule 2). This is the pattern for Attribute values or any non-interactive
+ * text that should be copyable on click.
+ */
+export const ValueText: StoryFn<typeof meta> = () => {
+  const value = '192.168.1.1';
+
+  return (
+    <Attribute>
+      <AttributeLabel>IP Address</AttributeLabel>
+      <AttributeValue>
+        <Copyable text={value} tooltip>
+          <Text size='sm'>{value}</Text>
+        </Copyable>
+      </AttributeValue>
+    </Attribute>
+  );
+};
+
+/**
+ * When the element disappears after the action (like a dropdown menu item),
+ * use toast feedback via `onCopied` (feedback rule 3). The `Copyable`
+ * component does not bake in toast — the consumer fires it from the callback.
+ */
+export const DropdownMenuItemWithToast: StoryFn<typeof meta> = () => {
+  const handleCopied = () => {
+    toaster.create({ title: 'Copied', type: 'default', variant: 'simple' });
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant='outline' color='neutral'>
+          Actions
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <Copyable text={SAMPLE_TEXT} onCopied={handleCopied}>
+          <DropdownMenuItem>
+            <DropdownMenuItemIcon>
+              <Copy />
+            </DropdownMenuItemIcon>
+            <DropdownMenuItemText>Copy value</DropdownMenuItemText>
+          </DropdownMenuItem>
+        </Copyable>
+        <DropdownMenuItem>Edit</DropdownMenuItem>
+        <DropdownMenuItem>Delete</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+/**
+ * A Select option that copies on select — same toast feedback pattern as the
+ * dropdown menu item (feedback rule 3).
+ */
+export const SelectMenuItemWithToast: StoryFn<typeof meta> = () => {
+  const endpoints = [
+    'GET /api/users',
+    'POST /api/users',
+    'GET /api/users/:id',
+    'DELETE /api/users/:id',
+  ];
+
+  const collection = createListCollection({
+    items: endpoints.map(e => ({ label: e, value: e })),
+  });
+
+  const [value, setValue] = useState<string[]>([]);
+
+  const handleValueChange = (details: { value: string[] }) => {
+    const selected = details.value[0];
+    if (selected) {
+      navigator.clipboard.writeText(selected);
+      toaster.create({ title: 'Copied', type: 'default', variant: 'simple' });
+    }
+    // Reset so the select doesn't hold a value — it acts as a copy trigger
+    setValue([]);
+  };
+
+  return (
+    <Select
+      collection={collection}
+      value={value}
+      onValueChange={handleValueChange}
+      positioning={{ placement: 'bottom-start' }}
+    >
+      <SelectButton placeholder='Select endpoint to copy' style={{ width: 280 }} />
+      <SelectPositioner>
+        <SelectContent>
+          {endpoints.map(ep => (
+            <SelectOption key={ep} item={{ label: ep, value: ep }}>
+              <SelectOptionText>{ep}</SelectOptionText>
+            </SelectOption>
+          ))}
+        </SelectContent>
+      </SelectPositioner>
+    </Select>
+  );
+};
+
+/**
+ * All recipes side-by-side for comparison. The three feedback types —
+ * in-place swap, tooltip-only, and toast — are shown together.
+ */
+export const AllRecipes: StoryFn<typeof meta> = () => {
+  const handleCopied = () => {
+    toaster.create({ title: 'Copied', type: 'default', variant: 'simple' });
+  };
+
+  return (
+    <VStack align='start' gap={32}>
+      <VStack align='start' gap={8}>
+        <Text size='xs' color='secondary' weight='medium'>
+          Icon button (swap)
+        </Text>
+        <Copyable text={SAMPLE_TEXT} tooltip>
+          <Button variant='ghost' color='neutral' size='small' aria-label='Copy'>
+            <CopyableIcon />
+          </Button>
+        </Copyable>
+      </VStack>
+
+      <VStack align='start' gap={8}>
+        <Text size='xs' color='secondary' weight='medium'>
+          Labelled button (swap)
+        </Text>
+        <HStack gap={12}>
+          <Copyable text={SAMPLE_TEXT} tooltip>
+            <Button variant='secondary' size='medium'>
+              <CopyableIcon /> <CopyableLabel idle='Copy code' copied='Copied' />
+            </Button>
+          </Copyable>
+        </HStack>
+      </VStack>
+
+      <VStack align='start' gap={8}>
+        <Text size='xs' color='secondary' weight='medium'>
+          Inline code snippet (tooltip only)
+        </Text>
+        <Text size='sm'>
+          Run <InlineCodeSnippet code='npm install' size='md' /> to install.
+        </Text>
+      </VStack>
+
+      <VStack align='start' gap={8}>
+        <Text size='xs' color='secondary' weight='medium'>
+          Dropdown menu item (toast)
+        </Text>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant='outline' color='neutral' size='small'>
+              Actions
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <Copyable text={SAMPLE_TEXT} onCopied={handleCopied}>
+              <DropdownMenuItem>
+                <DropdownMenuItemIcon>
+                  <Copy />
+                </DropdownMenuItemIcon>
+                <DropdownMenuItemText>Copy value</DropdownMenuItemText>
+              </DropdownMenuItem>
+            </Copyable>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </VStack>
+    </VStack>
+  );
+};
+AllRecipes.parameters = { layout: 'padded' };
+```

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

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,n){let r,o;/**
+ * 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,a,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,d=Object.getOwnPropertyNames,u=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,m=(e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let o of d(t))p.call(e,o)||o===n||c(e,o,{get:()=>t[o],enumerable:!(r=s(t,o))||r.enumerable});return e},f={},h={$dispatcherGuard:()=>W,$makeReadOnly:()=>M,$reset:()=>N,$structuralCheck:()=>T,c:()=>v,clearRenderCounterRegistry:()=>k,renderCounterRegistry:()=>x,useRenderCounter:()=>O};for(var y in h)c(f,y,{get:h[y],enumerable:!0});e.exports=m(c({},"__esModule",{value:!0}),f);var w=(o=null!=(r=n("C"))?i(u(r)):{},m(r&&r.__esModule?o:c(o,"default",{value:r,enumerable:!0}),r)),{useRef:S,useEffect:_,isValidElement:b}=w,C=null!=(l=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:w.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,g=Symbol.for("react.memo_cache_sentinel"),v="function"==typeof(null==(a=w.__COMPILER_RUNTIME)?void 0:a.c)?w.__COMPILER_RUNTIME.c:function(e){return w.useMemo(()=>{let t=Array(e);for(let n=0;n<e;n++)t[n]=g;return t[g]=!0,t},[])},D={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{D[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 R(e){return C.ReactCurrentDispatcher.current=e,C.ReactCurrentDispatcher.current}D.useMemoCache=e=>{if(null!=E)return E.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var $=[];function W(e){let t=C.ReactCurrentDispatcher.current;if(0===e){if($.push(t),1===$.length&&(E=t),t===D)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(D)}else if(1===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===$.length&&(E=null),R(e)}else if(2===e)$.push(t),R(E);else if(3===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");R(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function N(e){for(let t=0;t<e.length;t++)e[t]=g}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var x=new Map;function k(){for(let e of x.values())e.forEach(e=>{e.count=0})}function O(e){let t=S(null);null!=t.current&&(t.current.count+=1),_(()=>{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 I=new Set;function T(e,t,n,r,o,l){function a(e,t,a,i){let c=`${r}:${l} [${o}] ${n}${a} changed from ${e} to ${t} at depth ${i}`;I.has(c)||(I.add(c),console.error(c))}!function e(t,n,r,o){if(!(o>2)){if(t!==n)if(typeof t!=typeof n)a(`type ${typeof t}`,`type ${typeof n}`,r,o);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(n);if(null===t&&null!==n)a("null",`type ${typeof n}`,r,o);else if(null===n)a(`type ${typeof t}`,"null",r,o);else if(t instanceof Map)if(n instanceof Map)if(t.size!==n.size)a(`Map instance with size ${t.size}`,`Map instance with size ${n.size}`,r,o);else for(let[l,i]of t)n.has(l)?e(i,n.get(l),`${r}.get(${l})`,o+1):a(`Map instance with key ${l}`,`Map instance without key ${l}`,r,o);else a("Map instance","other value",r,o);else if(n instanceof Map)a("other value","Map instance",r,o);else if(t instanceof Set)if(n instanceof Set)if(t.size!==n.size)a(`Set instance with size ${t.size}`,`Set instance with size ${n.size}`,r,o);else for(let e of n)t.has(e)||a(`Set instance without element ${e}`,`Set instance with element ${e}`,r,o);else a("Set instance","other value",r,o);else if(n instanceof Set)a("other value","Set instance",r,o);else if(l||i)if(l!==i)a(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,r,o);else if(t.length!==n.length)a(`array with length ${t.length}`,`array with length ${n.length}`,r,o);else for(let l=0;l<t.length;l++)e(t[l],n[l],`${r}[${l}]`,o+1);else if(b(t)||b(n))b(t)!==b(n)?a(`type ${b(t)?"React element":"object"}`,`type ${b(n)?"React element":"object"}`,r,o):t.type!==n.type?a(`React element of type ${t.type}`,`React element of type ${n.type}`,r,o):e(t.props,n.props,`[props of ${r}]`,o+1);else{for(let e in n)e in t||a(`object without key ${e}`,`object with key ${e}`,r,o);for(let l in t)l in n?e(t[l],n[l],`${r}.${l}`,o+1):a(`object with key ${l}`,`object without key ${l}`,r,o)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(n)?isNaN(t)!==isNaN(n)&&a(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(n)?"NaN":"non-NaN value"}`,r,o):t!==n&&a(t,n,r,o)}}}(e,t,"",0)}},p(e,t,n){let r=new WeakMap,o=new WeakMap;function l(e,t,n){let l=t,a=n;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!=a.ref&&!l.prototype?.isReactComponent){let t=l,n=r.get(e);n||(n=new WeakMap,r.set(e,n));let o=n.get(t);o||((o=e.forwardRef((e,n)=>t({...e,ref:n}))).displayName=t.displayName??t.name,n.set(t,o)),l=o}if("string"==typeof l&&"boolean"==typeof a.inert&&((a={...a}).inert?a.inert="":delete a.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in a&&(a={...a,[t]:a[e]},delete a[e]);return"string"==typeof l&&null!=a.ref&&(l=function(e,t){let n=o.get(e);n||(n=new Map,o.set(e,n));let r=n.get(t);if(r)return r;let l=e.forwardRef((n,r)=>{let o=e.useRef(null);if(!o.current||o.current.original!==r){let e;o.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:o.current.callback})});return l.displayName=`CanvasHost(${t})`,n.set(t,l),l}(e,l)),{type:l,props:a}}function a(e){let t=(t,n,r)=>{let o=l(e,t,n??{});return e.createElement(o.type,void 0===r?o.props:{...o.props,key:r})};return{jsx:t,jsxs:(t,n,r)=>{let o=l(e,t,n??{}),{children:a,...i}=o.props;return e.createElement(o.type,void 0===r?i:{...i,key:r},...Array.isArray(a)?a:[a])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,n,...r)=>{let o=l(e,t,n??{});return e.createElement(o.type,o.props,...r)},cloneElement:(t,n,...r)=>{let o=e.cloneElement(t,n??void 0,...r),a=o.ref,i=l(e,o.type,{...o.props,ref:a});return i.type===o.type&&"string"!=typeof o.type?o:e.createElement(i.type,{...i.props,key:o.key})}}}n.d(t,{MA:()=>a,YJ:()=>i})},C(e,t,n){n.r(t);let r=(0,n("p").YJ)(window.React),{Children:o,Component:l,Fragment:a,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:p,cloneElement:m,createContext:f,createElement:h,createFactory:y,createRef:w,forwardRef:S,isValidElement:_,lazy:b,memo:C,startTransition:g,unstable_act:v,useCallback:D,useContext:E,useDebugValue:R,useDeferredValue:$,useEffect:W,useId:N,useImperativeHandle:M,useInsertionEffect:x,useLayoutEffect:k,useMemo:O,useReducer:I,useRef:T,useState:A,useSyncExternalStore:z,useTransition:j,version:P,use:L}=r;n.d(t,{},{Children:o,Component:l,Fragment:a,Profiler:i,PureComponent:c,StrictMode:s,Suspense:d,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:p,cloneElement:m,createContext:f,createElement:h,createFactory:y,createRef:w,default:r,forwardRef:S,isValidElement:_,lazy:b,memo:C,startTransition:g,unstable_act:v,use:L,useCallback:D,useContext:E,useDebugValue:R,useDeferredValue:$,useEffect:W,useId:N,useImperativeHandle:M,useInsertionEffect:x,useLayoutEffect:k,useMemo:O,useReducer:I,useRef:T,useState:A,useSyncExternalStore:z,useTransition:j,version:P})}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var l=t[r]={exports:{}};return e[r](l,l.exports,n),l.exports}n.d=(e,t,r)=>{var o=(t,r)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,[r]:t[o]})};o(t,"get"),o(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:o}=(0,n("p").MA)(window.React);var l=n("vD"),a=n("C");let i=window.WallarmDS.Icons.Copy,c=window.WallarmDS.Attribute,s=window.WallarmDS.AttributeLabel,d=window.WallarmDS.AttributeValue,u=window.WallarmDS.Button,p=window.WallarmDS.CodeSnippetActions,m=window.WallarmDS.CodeSnippetAdapterProvider,f=window.WallarmDS.CodeSnippetCode,h=window.WallarmDS.CodeSnippetContent,y=window.WallarmDS.CodeSnippetCopyButton,w=window.WallarmDS.CodeSnippetRoot,S=window.WallarmDS.InlineCodeSnippet,_=window.WallarmDS.plainAdapter,b=window.WallarmDS.DropdownMenu,C=window.WallarmDS.DropdownMenuContent,g=window.WallarmDS.DropdownMenuItem,v=window.WallarmDS.DropdownMenuItemIcon,D=window.WallarmDS.DropdownMenuItemText,E=window.WallarmDS.DropdownMenuTrigger,R=window.WallarmDS.createListCollection,$=window.WallarmDS.Select,W=window.WallarmDS.SelectButton,N=window.WallarmDS.SelectContent,M=window.WallarmDS.SelectOption,x=window.WallarmDS.SelectOptionText,k=window.WallarmDS.SelectPositioner,O=window.WallarmDS.HStack,I=window.WallarmDS.VStack,T=window.WallarmDS.Text,A=window.WallarmDS.Toaster,z=window.WallarmDS.toaster,j=window.WallarmDS.Copyable,P=window.WallarmDS.CopyableIcon,L=window.WallarmDS.CopyableLabel,U="Hello, clipboard!",V={title:"Data Display/Click to Copy",component:j,subcomponents:{CopyableIcon:P,CopyableLabel:L},parameters:{layout:"centered",docs:{description:{component:'Click-to-copy is a **behaviour pattern**, not a component.\nAny existing element — a Button, InlineCodeSnippet, Attribute value, table cell, or DropdownMenuItem — copies a value on click and confirms it.\n\n### Feedback rules\n\n1. **Element can change itself** (button, icon button, code snippet action): swap in place. Copy icon → Check, label "Copy code" → "Copied" at the idle width, tooltip "Click to copy" → "Copied".\n2. **Clickable text without an icon** (inline code snippet, a value): tooltip only.\n3. **Element disappears after the action or has nothing to transform** (menu item): toast "Copied".\n\nNever two feedbacks at once. Copied state resets after ~2 s.'}}},decorators:[n=>t(o,{children:[e(A,{}),e(n,{})]})]},B=()=>{let n,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(n=t(T,{size:"sm",color:"secondary",children:["To start creating an interface, run ",e(S,{code:"npm install @wads/ui",size:"md"})]}),r[0]=n):n=r[0],n};B.parameters={layout:"padded"};let F=()=>{let n,r,o=(0,l.c)(2);return o[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(p,{children:e(y,{})}),o[0]=n):n=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(m,{adapter:_,children:t(w,{code:"npx wasd-new@latest add code-snippet",language:"text",children:[n,e(h,{children:e(f,{})})]})}),o[1]=r):r=o[1],r};F.parameters={layout:"padded"};let H=()=>{let n,r,o,a,c,s,d,p,m,f,h=(0,l.c)(10);return h[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(T,{size:"xs",color:"secondary",weight:"medium",children:"Icon button (swap)"}),h[0]=n):n=h[0],h[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(I,{align:"start",gap:8,children:[n,e(j,{text:U,tooltip:!0,children:e(u,{variant:"ghost",color:"neutral",size:"small","aria-label":"Copy",children:e(P,{})})})]}),h[1]=r):r=h[1],h[2]===Symbol.for("react.memo_cache_sentinel")?(o=e(T,{size:"xs",color:"secondary",weight:"medium",children:"Labelled button (swap)"}),h[2]=o):o=h[2],h[3]===Symbol.for("react.memo_cache_sentinel")?(a=e(P,{}),h[3]=a):a=h[3],h[4]===Symbol.for("react.memo_cache_sentinel")?(c=t(I,{align:"start",gap:8,children:[o,e(O,{gap:12,children:e(j,{text:U,tooltip:!0,children:t(u,{variant:"secondary",size:"medium",children:[a," ",e(L,{idle:"Copy code",copied:"Copied"})]})})})]}),h[4]=c):c=h[4],h[5]===Symbol.for("react.memo_cache_sentinel")?(s=e(T,{size:"xs",color:"secondary",weight:"medium",children:"Inline code snippet (tooltip only)"}),h[5]=s):s=h[5],h[6]===Symbol.for("react.memo_cache_sentinel")?(d=t(I,{align:"start",gap:8,children:[s,t(T,{size:"sm",children:["Run ",e(S,{code:"npm install",size:"md"})," to install."]})]}),h[6]=d):d=h[6],h[7]===Symbol.for("react.memo_cache_sentinel")?(p=e(T,{size:"xs",color:"secondary",weight:"medium",children:"Dropdown menu item (toast)"}),h[7]=p):p=h[7],h[8]===Symbol.for("react.memo_cache_sentinel")?(m=e(E,{asChild:!0,children:e(u,{variant:"outline",color:"neutral",size:"small",children:"Actions"})}),h[8]=m):m=h[8],h[9]===Symbol.for("react.memo_cache_sentinel")?(f=t(I,{align:"start",gap:32,children:[r,c,d,t(I,{align:"start",gap:8,children:[p,t(b,{children:[m,e(C,{children:e(j,{text:U,onCopied:Z,children:t(g,{children:[e(v,{children:e(i,{})}),e(D,{children:"Copy value"})]})})})]})]})]}),h[9]=f):f=h[9],f};function Y(){z.create({title:"Copied",type:"default",variant:"simple"})}function G(e){return{label:e,value:e}}function J(t){return e(M,{item:{label:t,value:t},children:e(x,{children:t})},t)}function Z(){z.create({title:"Copied",type:"default",variant:"simple"})}H.parameters={layout:"padded"};let X=[{name:"IconButton",story:()=>{let t,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(j,{text:U,tooltip:!0,children:e(u,{variant:"ghost",color:"neutral",size:"small","aria-label":"Copy",children:e(P,{})})}),n[0]=t):t=n[0],t},meta:V},{name:"LabelledButton",story:()=>{let n,r,o,a,i=(0,l.c)(4);return i[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(P,{}),i[0]=n):n=i[0],i[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(j,{text:U,tooltip:!0,children:t(u,{variant:"secondary",size:"medium",children:[n," ",e(L,{idle:"Copy code",copied:"Copied"})]})}),i[1]=r):r=i[1],i[2]===Symbol.for("react.memo_cache_sentinel")?(o=e(P,{}),i[2]=o):o=i[2],i[3]===Symbol.for("react.memo_cache_sentinel")?(a=t(I,{align:"start",gap:16,children:[r,e(j,{text:U,tooltip:!0,children:t(u,{variant:"ghost",color:"neutral",size:"medium",children:[o," ",e(L,{idle:"Copy link",copied:"Copied"})]})})]}),i[3]=a):a=i[3],a},meta:V},{name:"InInlineCodeSnippet",story:B,meta:V},{name:"InCodeSnippet",story:F,meta:V},{name:"ValueText",story:()=>{let n,r,o=(0,l.c)(2);return o[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(s,{children:"IP Address"}),o[0]=n):n=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(c,{children:[n,e(d,{children:e(j,{text:"192.168.1.1",tooltip:!0,children:e(T,{size:"sm",children:"192.168.1.1"})})})]}),o[1]=r):r=o[1],r},meta:V},{name:"DropdownMenuItemWithToast",story:()=>{let n,r,o=(0,l.c)(2);return o[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(E,{asChild:!0,children:e(u,{variant:"outline",color:"neutral",children:"Actions"})}),o[0]=n):n=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(b,{children:[n,t(C,{children:[e(j,{text:U,onCopied:Y,children:t(g,{children:[e(v,{children:e(i,{})}),e(D,{children:"Copy value"})]})}),e(g,{children:"Edit"}),e(g,{children:"Delete"})]})]}),o[1]=r):r=o[1],r},meta:V},{name:"SelectMenuItemWithToast",story:()=>{let n,r,o,i,c,s,d,u,p=(0,l.c)(9);p[0]===Symbol.for("react.memo_cache_sentinel")?(r=R({items:(n=["GET /api/users","POST /api/users","GET /api/users/:id","DELETE /api/users/:id"]).map(G)}),p[0]=n,p[1]=r):(n=p[0],r=p[1]);let m=r;p[2]===Symbol.for("react.memo_cache_sentinel")?(o=[],p[2]=o):o=p[2];let[f,h]=(0,a.useState)(o);p[3]===Symbol.for("react.memo_cache_sentinel")?(i=e=>{let t=e.value[0];t&&(navigator.clipboard.writeText(t),z.create({title:"Copied",type:"default",variant:"simple"})),h([])},p[3]=i):i=p[3];let y=i;return p[4]===Symbol.for("react.memo_cache_sentinel")?(c={placement:"bottom-start"},p[4]=c):c=p[4],p[5]===Symbol.for("react.memo_cache_sentinel")?(s=e(W,{placeholder:"Select endpoint to copy",style:{width:280}}),p[5]=s):s=p[5],p[6]===Symbol.for("react.memo_cache_sentinel")?(d=e(k,{children:e(N,{children:n.map(J)})}),p[6]=d):d=p[6],p[7]!==f?(u=t($,{collection:m,value:f,onValueChange:y,positioning:c,children:[s,d]}),p[7]=f,p[8]=u):u=p[8],u},meta:V},{name:"AllRecipes",story:H,meta:V}];function q({entry:e}){let{story:t,meta:n}=e,r={...n.args,...t.args},o="function"==typeof t||t.$$typeof?t:t.render||n.render||n.component,l=()=>a.default.createElement(o,r),i={args:r,globals:{theme:"light"},parameters:{...n.parameters,...t.parameters},viewMode:"story"};for(let e of[...n.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,i)}return a.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},a.default.createElement("h2",{className:"text-sm mb-12"},e.name),a.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(a.default.createElement(window.WallarmDS.Root,null,X.map((e,t)=>a.default.createElement(q,{key:t,entry:e})))),t}}})();