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

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

@@ -0,0 +1,423 @@
+Joins a field to whatever sits against it — an icon, a unit, a shortcut hint, a button — inside one bordered box that focuses as a single control. Reach for `Field` instead when what you need is a label and a description rather than something attached to the field itself.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `size` | `"default" \| "medium" \| "small" \| "inline-edit"` | no | `default` |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.InputGroupAddon` — `InputGroupAddonProps` in the declaration bundle.
+- `WallarmDS.InputGroupText` — `InputGroupTextProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+`InputGroupAddon` on either side of the control. The group draws the border, so the input
+inside it draws none — which is why an `Input` used here looks different from one used alone.
+
+Source: InputGroup/InputGroup.stories.tsx#Basic
+
+### Disabled
+
+Disabling the control dims the whole group, addons included, so the box reads as one
+unavailable thing rather than a live button next to a dead field.
+
+Source: InputGroup/InputGroup.stories.tsx#Disabled
+
+### WithError
+
+The error border is drawn by the group for the same reason, keeping the red outline around
+everything the reader thinks of as the field.
+
+Source: InputGroup/InputGroup.stories.tsx#WithError
+
+### WithLoader
+
+A `Loader` as a trailing addon, for a field that validates or searches as you type. It
+replaces nothing, so the text doesn't shift when it appears.
+
+Source: InputGroup/InputGroup.stories.tsx#WithLoader
+
+### WithKbd
+
+A `Kbd` addon showing the shortcut that focuses the field — the search-box convention.
+Only worth it where the shortcut actually exists.
+
+Source: InputGroup/InputGroup.stories.tsx#WithKbd
+
+### WithTooltip
+
+An addon that explains the field, for when the reason is longer than a description line but
+shorter than help text.
+
+Source: InputGroup/InputGroup.stories.tsx#WithTooltip
+
+### WithTextarea
+
+The group also wraps a `Textarea`, with `align='block-end'` putting the addon under the
+text rather than beside it — this is the composer shape.
+
+Source: InputGroup/InputGroup.stories.tsx#WithTextarea
+
+### WithSelect
+
+A `Select` as an addon, for a unit or scope that changes what the value means. Keep it on
+the side the reader reads last.
+
+Source: InputGroup/InputGroup.stories.tsx#WithSelect
+
+## Story sources
+
+### InputGroup/InputGroup.stories.tsx
+
+```tsx
+import { createListCollection } from '@ark-ui/react/collection';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { ArrowUp, Info, LayoutGrid, LayoutTemplate, Search, Settings2 } from '../../icons';
+import { Button } from '../Button';
+import { Input } from '../Input';
+import { Kbd } from '../Kbd';
+import { Loader } from '../Loader';
+import {
+  Select,
+  SelectButton,
+  SelectContent,
+  SelectOption,
+  SelectOptionIndicator,
+  SelectOptionText,
+  SelectPositioner,
+} from '../Select';
+import { HStack, VStack } from '../Stack';
+import { Textarea } from '../Textarea';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../Tooltip';
+import { InputGroup } from './InputGroup';
+import { InputGroupAddon } from './InputGroupAddon';
+import { InputGroupText } from './InputGroupText';
+
+const DESCRIPTION = [
+  'Joins a field to whatever sits against it — an icon, a unit, a shortcut hint, a button — inside one bordered box that focuses as a single control.',
+  'Reach for `Field` instead when what you need is a label and a description rather than something attached to the field itself.',
+].join(' ');
+
+const meta = {
+  title: 'Inputs/InputGroup',
+  component: InputGroup,
+  subcomponents: {
+    InputGroupAddon,
+    InputGroupText,
+  },
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta<typeof InputGroup>;
+
+export default meta;
+
+/**
+ * `InputGroupAddon` on either side of the control. The group draws the border, so the input
+ * inside it draws none — which is why an `Input` used here looks different from one used alone.
+ */
+export const Basic: StoryFn<typeof meta> = () => (
+  <VStack gap={12}>
+    <InputGroup data-testid='input-group'>
+      <InputGroupAddon>
+        <Search />
+      </InputGroupAddon>
+      <Input placeholder='Enter' data-testid='input-group-input' />
+      <InputGroupAddon align='inline-end'>
+        <Info />
+      </InputGroupAddon>
+    </InputGroup>
+
+    <InputGroup>
+      <InputGroupAddon variant='outline'>
+        <InputGroupText>https://</InputGroupText>
+      </InputGroupAddon>
+      <Input placeholder='Enter' value='wallarm/user-settings' />
+      <InputGroupAddon variant='outline' align='inline-end'>
+        <InputGroupText>.com</InputGroupText>
+      </InputGroupAddon>
+    </InputGroup>
+  </VStack>
+);
+
+/**
+ * Disabling the control dims the whole group, addons included, so the box reads as one
+ * unavailable thing rather than a live button next to a dead field.
+ */
+export const Disabled: StoryFn<typeof meta> = () => (
+  <VStack gap={12}>
+    <InputGroup>
+      <InputGroupAddon>
+        <Search />
+      </InputGroupAddon>
+      <Input placeholder='Enter' disabled />
+      <InputGroupAddon align='inline-end'>
+        <Info />
+      </InputGroupAddon>
+    </InputGroup>
+
+    <InputGroup>
+      <InputGroupAddon>
+        <InputGroupText>https://</InputGroupText>
+      </InputGroupAddon>
+      <Input placeholder='Enter' value='wallarm/user-settings' disabled />
+      <InputGroupAddon align='inline-end'>
+        <InputGroupText>.com</InputGroupText>
+      </InputGroupAddon>
+    </InputGroup>
+  </VStack>
+);
+
+/**
+ * The error border is drawn by the group for the same reason, keeping the red outline around
+ * everything the reader thinks of as the field.
+ */
+export const WithError: StoryFn<typeof meta> = () => (
+  <VStack gap={12}>
+    <InputGroup>
+      <InputGroupAddon>
+        <Search />
+      </InputGroupAddon>
+      <Input placeholder='Enter' error />
+      <InputGroupAddon align='inline-end'>
+        <Info />
+      </InputGroupAddon>
+    </InputGroup>
+
+    <InputGroup>
+      <InputGroupAddon>
+        <InputGroupText>https://</InputGroupText>
+      </InputGroupAddon>
+      <Input placeholder='Enter' value='wallarm/user-settings' error />
+      <InputGroupAddon align='inline-end'>
+        <InputGroupText>.com</InputGroupText>
+      </InputGroupAddon>
+    </InputGroup>
+  </VStack>
+);
+
+/**
+ * A `Loader` as a trailing addon, for a field that validates or searches as you type. It
+ * replaces nothing, so the text doesn't shift when it appears.
+ */
+export const WithLoader: StoryFn<typeof meta> = () => (
+  <InputGroup>
+    <Input placeholder='Searching...' disabled />
+    <InputGroupAddon align='inline-end'>
+      <Loader size='md' />
+    </InputGroupAddon>
+  </InputGroup>
+);
+
+/**
+ * A `Kbd` addon showing the shortcut that focuses the field — the search-box convention.
+ * Only worth it where the shortcut actually exists.
+ */
+export const WithKbd: StoryFn<typeof meta> = () => (
+  <InputGroup>
+    <InputGroupAddon>
+      <Search />
+    </InputGroupAddon>
+    <Input placeholder='Search' />
+    <InputGroupAddon align='inline-end'>
+      <Kbd>⌘</Kbd>
+      <Kbd>K</Kbd>
+    </InputGroupAddon>
+  </InputGroup>
+);
+
+/**
+ * An addon that explains the field, for when the reason is longer than a description line but
+ * shorter than help text.
+ */
+export const WithTooltip: StoryFn<typeof meta> = () => (
+  <InputGroup>
+    <InputGroupAddon>
+      <Search />
+    </InputGroupAddon>
+    <Input placeholder='Enter' />
+    <InputGroupAddon align='inline-end'>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Info />
+        </TooltipTrigger>
+        <TooltipContent>Get more info</TooltipContent>
+      </Tooltip>
+    </InputGroupAddon>
+  </InputGroup>
+);
+
+/**
+ * The group also wraps a `Textarea`, with `align='block-end'` putting the addon under the
+ * text rather than beside it — this is the composer shape.
+ */
+export const WithTextarea: StoryFn<typeof meta> = () => (
+  <div style={{ width: 480 }}>
+    <VStack gap={12}>
+      <InputGroup>
+        <Textarea minRows={1} maxRows={5} placeholder='Type a message...' />
+      </InputGroup>
+
+      <InputGroup>
+        <Textarea minRows={1} maxRows={5} placeholder='Type a message...' />
+        <InputGroupAddon align='block-end'>
+          <HStack fullWidth align='center' justify='end'>
+            <Button variant='primary' color='brand' size='small'>
+              <ArrowUp />
+            </Button>
+          </HStack>
+        </InputGroupAddon>
+      </InputGroup>
+
+      <InputGroup>
+        <Textarea minRows={1} maxRows={5} placeholder='Type a message...' />
+        <InputGroupAddon align='block-end'>
+          <HStack fullWidth align='center' justify='between'>
+            <Button variant='secondary' size='small' color='neutral'>
+              <Settings2 />
+            </Button>
+            <Button variant='primary' color='brand' size='small'>
+              <ArrowUp />
+            </Button>
+          </HStack>
+        </InputGroupAddon>
+      </InputGroup>
+    </VStack>
+  </div>
+);
+
+/**
+ * A `Select` as an addon, for a unit or scope that changes what the value means. Keep it on
+ * the side the reader reads last.
+ */
+export const WithSelect: StoryFn<typeof meta> = () => {
+  const collection = createListCollection({
+    items: [
+      {
+        label: 'React',
+        value: 'react',
+        icon: LayoutGrid,
+        category: 'Frontend',
+      },
+      {
+        label: 'Vue',
+        value: 'vue',
+        icon: LayoutTemplate,
+        category: 'Frontend',
+      },
+      {
+        label: 'Angular',
+        value: 'angular',
+        icon: Search,
+        category: 'Frontend',
+      },
+    ],
+  });
+
+  return (
+    <VStack gap={12}>
+      <InputGroup>
+        <InputGroupAddon variant='outline'>
+          <Select collection={collection}>
+            <SelectButton />
+
+            <SelectPositioner>
+              <SelectContent>
+                {collection.items.map(skill => (
+                  <SelectOption key={skill.value} item={skill}>
+                    <SelectOptionText>{skill.label}</SelectOptionText>
+                    <SelectOptionIndicator />
+                  </SelectOption>
+                ))}
+              </SelectContent>
+            </SelectPositioner>
+          </Select>
+        </InputGroupAddon>
+
+        <Input placeholder='Enter' />
+      </InputGroup>
+
+      <InputGroup>
+        <Input placeholder='Enter' />
+        <InputGroupAddon align='inline-end' variant='outline'>
+          <Select collection={collection}>
+            <SelectButton />
+
+            <SelectPositioner>
+              <SelectContent>
+                {collection.items.map(skill => (
+                  <SelectOption key={skill.value} item={skill}>
+                    <SelectOptionText>{skill.label}</SelectOptionText>
+                    <SelectOptionIndicator />
+                  </SelectOption>
+                ))}
+              </SelectContent>
+            </SelectPositioner>
+          </Select>
+        </InputGroupAddon>
+      </InputGroup>
+
+      <InputGroup>
+        <InputGroupAddon>
+          <Select collection={collection}>
+            <SelectButton />
+
+            <SelectPositioner>
+              <SelectContent>
+                {collection.items.map(skill => (
+                  <SelectOption key={skill.value} item={skill}>
+                    <SelectOptionText>{skill.label}</SelectOptionText>
+                    <SelectOptionIndicator />
+                  </SelectOption>
+                ))}
+              </SelectContent>
+            </SelectPositioner>
+          </Select>
+        </InputGroupAddon>
+
+        <Input placeholder='Enter' />
+      </InputGroup>
+
+      <InputGroup>
+        <Input placeholder='Enter' />
+        <InputGroupAddon align='inline-end'>
+          <Select collection={collection}>
+            <SelectButton />
+
+            <SelectPositioner>
+              <SelectContent>
+                {collection.items.map(skill => (
+                  <SelectOption key={skill.value} item={skill}>
+                    <SelectOptionText>{skill.label}</SelectOptionText>
+                    <SelectOptionIndicator />
+                  </SelectOption>
+                ))}
+              </SelectContent>
+            </SelectPositioner>
+          </Select>
+        </InputGroupAddon>
+      </InputGroup>
+    </VStack>
+  );
+};
+```

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,i;/**
+ * 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,o=Object.create,s=Object.defineProperty,c=Object.getOwnPropertyDescriptor,h=Object.getOwnPropertyNames,u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,f=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let i of h(t))m.call(e,i)||i===r||s(e,i,{get:()=>t[i],enumerable:!(n=c(t,i))||n.enumerable});return e},d={},p={$dispatcherGuard:()=>D,$makeReadOnly:()=>M,$reset:()=>$,$structuralCheck:()=>V,c:()=>I,clearRenderCounterRegistry:()=>N,renderCounterRegistry:()=>C,useRenderCounter:()=>T};for(var y in p)s(d,y,{get:p[y],enumerable:!0});e.exports=f(s({},"__esModule",{value:!0}),d);var g=(i=null!=(n=r("C"))?o(u(n)):{},f(n&&n.__esModule?i:s(i,"default",{value:n,enumerable:!0}),n)),{useRef:b,useEffect:S,isValidElement:w}=g,_=null!=(l=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),I="function"==typeof(null==(a=g.__COMPILER_RUNTIME)?void 0:a.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},[])},E={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{E[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var R=null;function O(e){return _.ReactCurrentDispatcher.current=e,_.ReactCurrentDispatcher.current}E.useMemoCache=e=>{if(null!=R)return R.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var x=[];function D(e){let t=_.ReactCurrentDispatcher.current;if(0===e){if(x.push(t),1===x.length&&(R=t),t===E)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");O(E)}else if(1===e){let e=x.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===x.length&&(R=null),O(e)}else if(2===e)x.push(t),O(R);else if(3===e){let e=x.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");O(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function $(e){for(let t=0;t<e.length;t++)e[t]=v}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var C=new Map;function N(){for(let e of C.values())e.forEach(e=>{e.count=0})}function T(e){let t=b(null);null!=t.current&&(t.current.count+=1),S(()=>{if(null==t.current){let r,n={count:0};null==(r=C.get(e))&&(r=new Set,C.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=C.get(e))&&n.delete(r))}})}var W=new Set;function V(e,t,r,n,i,l){function a(e,t,a,o){let s=`${n}:${l} [${i}] ${r}${a} changed from ${e} to ${t} at depth ${o}`;W.has(s)||(W.add(s),console.error(s))}!function e(t,r,n,i){if(!(i>2)){if(t!==r)if(typeof t!=typeof r)a(`type ${typeof t}`,`type ${typeof r}`,n,i);else if("object"==typeof t){let l=Array.isArray(t),o=Array.isArray(r);if(null===t&&null!==r)a("null",`type ${typeof r}`,n,i);else if(null===r)a(`type ${typeof t}`,"null",n,i);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)a(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,i);else for(let[l,o]of t)r.has(l)?e(o,r.get(l),`${n}.get(${l})`,i+1):a(`Map instance with key ${l}`,`Map instance without key ${l}`,n,i);else a("Map instance","other value",n,i);else if(r instanceof Map)a("other value","Map instance",n,i);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)a(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,i);else for(let e of r)t.has(e)||a(`Set instance without element ${e}`,`Set instance with element ${e}`,n,i);else a("Set instance","other value",n,i);else if(r instanceof Set)a("other value","Set instance",n,i);else if(l||o)if(l!==o)a(`type ${l?"array":"object"}`,`type ${o?"array":"object"}`,n,i);else if(t.length!==r.length)a(`array with length ${t.length}`,`array with length ${r.length}`,n,i);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${n}[${l}]`,i+1);else if(w(t)||w(r))w(t)!==w(r)?a(`type ${w(t)?"React element":"object"}`,`type ${w(r)?"React element":"object"}`,n,i):t.type!==r.type?a(`React element of type ${t.type}`,`React element of type ${r.type}`,n,i):e(t.props,r.props,`[props of ${n}]`,i+1);else{for(let e in r)e in t||a(`object without key ${e}`,`object with key ${e}`,n,i);for(let l in t)l in r?e(t[l],r[l],`${n}.${l}`,i+1):a(`object with key ${l}`,`object without key ${l}`,n,i)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&a(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,i):t!==r&&a(t,r,n,i)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,i=new WeakMap;function l(e,t,r){let l=t,a=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!=a.ref&&!l.prototype?.isReactComponent){let t=l,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let i=r.get(t);i||((i=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,i)),l=i}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 r=i.get(e);r||(r=new Map,i.set(e,r));let n=r.get(t);if(n)return n;let l=e.forwardRef((r,n)=>{let i=e.useRef(null);if(!i.current||i.current.original!==n){let e;i.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:i.current.callback})});return l.displayName=`CanvasHost(${t})`,r.set(t,l),l}(e,l)),{type:l,props:a}}function a(e){let t=(t,r,n)=>{let i=l(e,t,r??{});return e.createElement(i.type,void 0===n?i.props:{...i.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let i=l(e,t,r??{}),{children:a,...o}=i.props;return e.createElement(i.type,void 0===n?o:{...o,key:n},...Array.isArray(a)?a:[a])},jsxDEV:t,Fragment:e.Fragment}}function o(e){return{...e,createElement:(t,r,...n)=>{let i=l(e,t,r??{});return e.createElement(i.type,i.props,...n)},cloneElement:(t,r,...n)=>{let i=e.cloneElement(t,r??void 0,...n),a=i.ref,o=l(e,i.type,{...i.props,ref:a});return o.type===i.type&&"string"!=typeof i.type?i:e.createElement(o.type,{...o.props,key:i.key})}}}r.d(t,{MA:()=>a,YJ:()=>o})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:i,Component:l,Fragment:a,Profiler:o,PureComponent:s,StrictMode:c,Suspense:h,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:m,cloneElement:f,createContext:d,createElement:p,createFactory:y,createRef:g,forwardRef:b,isValidElement:S,lazy:w,memo:_,startTransition:v,unstable_act:I,useCallback:E,useContext:R,useDebugValue:O,useDeferredValue:x,useEffect:D,useId:$,useImperativeHandle:M,useInsertionEffect:C,useLayoutEffect:N,useMemo:T,useReducer:W,useRef:V,useState:j,useSyncExternalStore:k,useTransition:A,version:z,use:P}=n;r.d(t,{},{Children:i,Component:l,Fragment:a,Profiler:o,PureComponent:s,StrictMode:c,Suspense:h,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:m,cloneElement:f,createContext:d,createElement:p,createFactory:y,createRef:g,default:n,forwardRef:b,isValidElement:S,lazy:w,memo:_,startTransition:v,unstable_act:I,use:P,useCallback:E,useContext:R,useDebugValue:O,useDeferredValue:x,useEffect:D,useId:$,useImperativeHandle:M,useInsertionEffect:C,useLayoutEffect:N,useMemo:T,useReducer:W,useRef:V,useState:j,useSyncExternalStore:k,useTransition:A,version:z})}},t={};function r(n){var i=t[n];if(void 0!==i)return i.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,r),l.exports}r.d=(e,t,n)=>{var i=(t,n)=>{for(var i in t)r.o(t,i)&&!r.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,[n]:t[i]})};i(t,"get"),i(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:i}=(0,r("p").MA)(window.React);var l=r("vD"),a=Object.defineProperty,o=(e,t,r)=>{let n;return(n="symbol"!=typeof t?t+"":t)in e?a(e,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[n]=r},s=e=>null!=e&&"object"==typeof e&&!Array.isArray(e),c=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);Function.prototype.toString.call(Object);var h=e=>e?.constructor.name==="Array",u=(e,t)=>{if(Object.is(e,t))return!0;if(null==e&&null!=t||null!=e&&null==t)return!1;if("function"==typeof e?.isEqual&&"function"==typeof t?.isEqual)return e.isEqual(t);if("function"==typeof e&&"function"==typeof t)return e.toString()===t.toString();if(h(e)&&h(t))return((e,t)=>{if(e.length!==t.length)return!1;for(let r=0;r<e.length;r++)if(!u(e[r],t[r]))return!1;return!0})(Array.from(e),Array.from(t));if("object"!=typeof e||"object"!=typeof t)return!1;let r=Object.keys(t??Object.create(null)),n=r.length;for(let t=0;t<n;t++)if(!Reflect.has(e,r[t]))return!1;for(let i=0;i<n;i++){let n=r[i];if(!u(e[n],t[n]))return!1}return!0},m={itemToValue:e=>"string"==typeof e?e:s(e)&&c(e,"value")?e.value:"",itemToString:e=>"string"==typeof e?e:s(e)&&c(e,"label")?e.label:m.itemToValue(e),isItemDisabled:e=>!!(s(e)&&c(e,"disabled"))&&!!e.disabled},f=class e{constructor(t){o(this,"options",t),o(this,"items"),o(this,"indexMap",null),o(this,"copy",t=>new e({...this.options,items:t??[...this.items]})),o(this,"isEqual",e=>u(this.items,e.items)),o(this,"setItems",e=>this.copy(e)),o(this,"getValues",(e=this.items)=>{let t=[];for(let r of e){let e=this.getItemValue(r);null!=e&&t.push(e)}return t}),o(this,"find",e=>{if(null==e)return null;let t=this.indexOf(e);return -1!==t?this.at(t):null}),o(this,"findMany",e=>{let t=[];for(let r of e){let e=this.find(r);null!=e&&t.push(e)}return t}),o(this,"at",e=>{if(!this.options.groupBy&&!this.options.groupSort)return this.items[e]??null;let t=0;for(let[,r]of this.group())for(let n of r){if(t===e)return n;t++}return null}),o(this,"sortFn",(e,t)=>(this.indexOf(e)??0)-(this.indexOf(t)??0)),o(this,"sort",e=>[...e].sort(this.sortFn.bind(this))),o(this,"getItemValue",e=>null==e?null:this.options.itemToValue?.(e)??m.itemToValue(e)),o(this,"getItemDisabled",e=>null!=e&&(this.options.isItemDisabled?.(e)??m.isItemDisabled(e))),o(this,"stringifyItem",e=>null==e?null:this.options.itemToString?.(e)??m.itemToString(e)),o(this,"stringify",e=>null==e?null:this.stringifyItem(this.find(e))),o(this,"stringifyItems",(e,t=", ")=>{let r=[];for(let t of e){let e=this.stringifyItem(t);null!=e&&r.push(e)}return r.join(t)}),o(this,"stringifyMany",(e,t)=>this.stringifyItems(this.findMany(e),t)),o(this,"has",e=>-1!==this.indexOf(e)),o(this,"hasItem",e=>null!=e&&this.has(this.getItemValue(e))),o(this,"group",()=>{let{groupBy:e,groupSort:t}=this.options;if(!e)return[["",[...this.items]]];let r=new Map;this.items.forEach((t,n)=>{let i=e(t,n);r.has(i)||r.set(i,[]),r.get(i).push(t)});let n=Array.from(r.entries());return t&&n.sort(([e],[r])=>{if("function"==typeof t)return t(e,r);if(Array.isArray(t)){let n=t.indexOf(e),i=t.indexOf(r);return -1===n?1:-1===i?-1:n-i}return"asc"===t?e.localeCompare(r):"desc"===t?r.localeCompare(e):0}),n}),o(this,"getNextValue",(e,t=1,r=!1)=>{let n=this.indexOf(e);if(-1===n)return null;for(n=r?Math.min(n+t,this.size-1):n+t;n<=this.size&&this.getItemDisabled(this.at(n));)n++;return this.getItemValue(this.at(n))}),o(this,"getPreviousValue",(e,t=1,r=!1)=>{let n=this.indexOf(e);if(-1===n)return null;for(n=r?Math.max(n-t,0):n-t;n>=0&&this.getItemDisabled(this.at(n));)n--;return this.getItemValue(this.at(n))}),o(this,"indexOf",e=>{if(null==e)return -1;if(!this.options.groupBy&&!this.options.groupSort)return this.items.findIndex(t=>this.getItemValue(t)===e);if(!this.indexMap){this.indexMap=new Map;let e=0;for(let[,t]of this.group())for(let r of t){let t=this.getItemValue(r);null!=t&&this.indexMap.set(t,e),e++}}return this.indexMap.get(e)??-1}),o(this,"getByText",(e,t)=>{let r=null!=t?this.indexOf(t):-1,n=1===e.length;for(let i=0;i<this.items.length;i++){let l=this.items[(r+i+1)%this.items.length];if((!n||this.getItemValue(l)!==t)&&!this.getItemDisabled(l)&&d(this.stringifyItem(l),e))return l}}),o(this,"search",(e,t)=>{let{state:r,currentValue:n,timeout:i=350}=t,l=r.keysSoFar+e,a=l.length>1&&Array.from(l).every(e=>e===l[0])?l[0]:l,o=this.getByText(a,n),s=this.getItemValue(o);function c(){clearTimeout(r.timer),r.timer=-1}return!function e(t){r.keysSoFar=t,c(),""!==t&&(r.timer=+setTimeout(()=>{e(""),c()},i))}(l),s}),o(this,"update",(e,t)=>{let r=this.indexOf(e);return -1===r?this:this.copy([...this.items.slice(0,r),t,...this.items.slice(r+1)])}),o(this,"upsert",(e,t,r="append")=>{let n=this.indexOf(e);return -1===n?("append"===r?this.append:this.prepend)(t):this.copy([...this.items.slice(0,n),t,...this.items.slice(n+1)])}),o(this,"insert",(e,...t)=>this.copy(p(this.items,e,...t))),o(this,"insertBefore",(e,...t)=>{let r=this.indexOf(e);if(-1===r)if(0!==this.items.length)return this;else r=0;return this.copy(p(this.items,r,...t))}),o(this,"insertAfter",(e,...t)=>{let r=this.indexOf(e);if(-1===r)if(0!==this.items.length)return this;else r=0;return this.copy(p(this.items,r+1,...t))}),o(this,"prepend",(...e)=>this.copy(p(this.items,0,...e))),o(this,"append",(...e)=>this.copy(p(this.items,this.items.length,...e))),o(this,"filter",e=>{let t=this.items.filter((t,r)=>e(this.stringifyItem(t),r,t));return this.copy(t)}),o(this,"remove",(...e)=>{let t=e.map(e=>"string"==typeof e?e:this.getItemValue(e));return this.copy(this.items.filter(e=>{let r=this.getItemValue(e);return null!=r&&!t.includes(r)}))}),o(this,"move",(e,t)=>{let r=this.indexOf(e);return -1===r?this:this.copy(y(this.items,[r],t))}),o(this,"moveBefore",(e,...t)=>{let r=this.items.findIndex(t=>this.getItemValue(t)===e);if(-1===r)return this;let n=t.map(e=>this.items.findIndex(t=>this.getItemValue(t)===e)).sort((e,t)=>e-t);return this.copy(y(this.items,n,r))}),o(this,"moveAfter",(e,...t)=>{let r=this.items.findIndex(t=>this.getItemValue(t)===e);if(-1===r)return this;let n=t.map(e=>this.items.findIndex(t=>this.getItemValue(t)===e)).sort((e,t)=>e-t);return this.copy(y(this.items,n,r+1))}),o(this,"reorder",(e,t)=>this.copy(y(this.items,[e],t))),o(this,"compareValue",(e,t)=>{let r=this.indexOf(e),n=this.indexOf(t);return r<n?-1:+(r>n)}),o(this,"range",(e,t)=>{let r=[],n=e;for(;null!=n;){if(this.find(n)&&r.push(n),n===t)return r;n=this.getNextValue(n)}return[]}),o(this,"getValueRange",(e,t)=>e&&t?0>=this.compareValue(e,t)?this.range(e,t):this.range(t,e):[]),o(this,"toString",()=>{let e="";for(let t of this.items)e+=[this.getItemValue(t),this.stringifyItem(t),this.getItemDisabled(t)].filter(Boolean).join(":")+",";return e}),o(this,"toJSON",()=>({size:this.size,first:this.firstValue,last:this.lastValue})),this.items=[...t.items]}get size(){return this.items.length}get firstValue(){let e=0;for(;this.getItemDisabled(this.at(e));)e++;return this.getItemValue(this.at(e))}get lastValue(){let e=this.size-1;for(;this.getItemDisabled(this.at(e));)e--;return this.getItemValue(this.at(e))}*[Symbol.iterator](){yield*this.items}},d=(e,t)=>!!e?.toLowerCase().startsWith(t.toLowerCase());function p(e,t,...r){return[...e.slice(0,t),...r,...e.slice(t)]}function y(e,t,r){let n=(t=[...t].sort((e,t)=>e-t)).map(t=>e[t]);for(let r=t.length-1;r>=0;r--)e=[...e.slice(0,t[r]),...e.slice(t[r]+1)];return r=Math.max(0,r-t.filter(e=>e<r).length),[...e.slice(0,r),...n,...e.slice(r)]}let g=window.WallarmDS.Icons.ArrowUp,b=window.WallarmDS.Icons.Info,S=window.WallarmDS.Icons.LayoutGrid,w=window.WallarmDS.Icons.LayoutTemplate,_=window.WallarmDS.Icons.Search,v=window.WallarmDS.Icons.Settings2,I=window.WallarmDS.Button,E=window.WallarmDS.Input,R=window.WallarmDS.Kbd,O=window.WallarmDS.Loader,x=window.WallarmDS.Select,D=window.WallarmDS.SelectButton,$=window.WallarmDS.SelectContent,M=window.WallarmDS.SelectOption,C=window.WallarmDS.SelectOptionIndicator,N=window.WallarmDS.SelectOptionText,T=window.WallarmDS.SelectPositioner,W=window.WallarmDS.HStack,V=window.WallarmDS.VStack,j=window.WallarmDS.Textarea,k=window.WallarmDS.Tooltip,A=window.WallarmDS.TooltipContent,z=window.WallarmDS.TooltipTrigger,P=window.WallarmDS.InputGroup,L=window.WallarmDS.InputGroupAddon,F=window.WallarmDS.InputGroupText,B={title:"Inputs/InputGroup",component:P,subcomponents:{InputGroupAddon:L,InputGroupText:F},parameters:{layout:"centered",docs:{description:{component:"Joins a field to whatever sits against it — an icon, a unit, a shortcut hint, a button — inside one bordered box that focuses as a single control. Reach for `Field` instead when what you need is a label and a description rather than something attached to the field itself."}}}};function U(r){return t(M,{item:r,children:[e(N,{children:r.label}),e(C,{})]},r.value)}function G(r){return t(M,{item:r,children:[e(N,{children:r.label}),e(C,{})]},r.value)}function H(r){return t(M,{item:r,children:[e(N,{children:r.label}),e(C,{})]},r.value)}function J(r){return t(M,{item:r,children:[e(N,{children:r.label}),e(C,{})]},r.value)}var Y=r("C");let q=[{name:"Basic",story:()=>{let r,n,i,a,o,s,c=(0,l.c)(6);return c[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(L,{children:e(_,{})}),n=e(E,{placeholder:"Enter","data-testid":"input-group-input"}),c[0]=r,c[1]=n):(r=c[0],n=c[1]),c[2]===Symbol.for("react.memo_cache_sentinel")?(i=t(P,{"data-testid":"input-group",children:[r,n,e(L,{align:"inline-end",children:e(b,{})})]}),c[2]=i):i=c[2],c[3]===Symbol.for("react.memo_cache_sentinel")?(a=e(L,{variant:"outline",children:e(F,{children:"https://"})}),o=e(E,{placeholder:"Enter",value:"wallarm/user-settings"}),c[3]=a,c[4]=o):(a=c[3],o=c[4]),c[5]===Symbol.for("react.memo_cache_sentinel")?(s=t(V,{gap:12,children:[i,t(P,{children:[a,o,e(L,{variant:"outline",align:"inline-end",children:e(F,{children:".com"})})]})]}),c[5]=s):s=c[5],s},meta:B},{name:"Disabled",story:()=>{let r,n,i,a,o,s,c=(0,l.c)(6);return c[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(L,{children:e(_,{})}),n=e(E,{placeholder:"Enter",disabled:!0}),c[0]=r,c[1]=n):(r=c[0],n=c[1]),c[2]===Symbol.for("react.memo_cache_sentinel")?(i=t(P,{children:[r,n,e(L,{align:"inline-end",children:e(b,{})})]}),c[2]=i):i=c[2],c[3]===Symbol.for("react.memo_cache_sentinel")?(a=e(L,{children:e(F,{children:"https://"})}),o=e(E,{placeholder:"Enter",value:"wallarm/user-settings",disabled:!0}),c[3]=a,c[4]=o):(a=c[3],o=c[4]),c[5]===Symbol.for("react.memo_cache_sentinel")?(s=t(V,{gap:12,children:[i,t(P,{children:[a,o,e(L,{align:"inline-end",children:e(F,{children:".com"})})]})]}),c[5]=s):s=c[5],s},meta:B},{name:"WithError",story:()=>{let r,n,i,a,o,s,c=(0,l.c)(6);return c[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(L,{children:e(_,{})}),n=e(E,{placeholder:"Enter",error:!0}),c[0]=r,c[1]=n):(r=c[0],n=c[1]),c[2]===Symbol.for("react.memo_cache_sentinel")?(i=t(P,{children:[r,n,e(L,{align:"inline-end",children:e(b,{})})]}),c[2]=i):i=c[2],c[3]===Symbol.for("react.memo_cache_sentinel")?(a=e(L,{children:e(F,{children:"https://"})}),o=e(E,{placeholder:"Enter",value:"wallarm/user-settings",error:!0}),c[3]=a,c[4]=o):(a=c[3],o=c[4]),c[5]===Symbol.for("react.memo_cache_sentinel")?(s=t(V,{gap:12,children:[i,t(P,{children:[a,o,e(L,{align:"inline-end",children:e(F,{children:".com"})})]})]}),c[5]=s):s=c[5],s},meta:B},{name:"WithLoader",story:()=>{let r,n,i=(0,l.c)(2);return i[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(E,{placeholder:"Searching...",disabled:!0}),i[0]=r):r=i[0],i[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(P,{children:[r,e(L,{align:"inline-end",children:e(O,{size:"md"})})]}),i[1]=n):n=i[1],n},meta:B},{name:"WithKbd",story:()=>{let r,n,i,a=(0,l.c)(3);return a[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(L,{children:e(_,{})}),n=e(E,{placeholder:"Search"}),a[0]=r,a[1]=n):(r=a[0],n=a[1]),a[2]===Symbol.for("react.memo_cache_sentinel")?(i=t(P,{children:[r,n,t(L,{align:"inline-end",children:[e(R,{children:"⌘"}),e(R,{children:"K"})]})]}),a[2]=i):i=a[2],i},meta:B},{name:"WithTooltip",story:()=>{let r,n,i,a=(0,l.c)(3);return a[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(L,{children:e(_,{})}),n=e(E,{placeholder:"Enter"}),a[0]=r,a[1]=n):(r=a[0],n=a[1]),a[2]===Symbol.for("react.memo_cache_sentinel")?(i=t(P,{children:[r,n,e(L,{align:"inline-end",children:t(k,{children:[e(z,{asChild:!0,children:e(b,{})}),e(A,{children:"Get more info"})]})})]}),a[2]=i):i=a[2],i},meta:B},{name:"WithTextarea",story:()=>{let r,n,i,a,o,s,c,h=(0,l.c)(7);return h[0]===Symbol.for("react.memo_cache_sentinel")?(r={width:480},h[0]=r):r=h[0],h[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(P,{children:e(j,{minRows:1,maxRows:5,placeholder:"Type a message..."})}),h[1]=n):n=h[1],h[2]===Symbol.for("react.memo_cache_sentinel")?(i=e(j,{minRows:1,maxRows:5,placeholder:"Type a message..."}),h[2]=i):i=h[2],h[3]===Symbol.for("react.memo_cache_sentinel")?(a=t(P,{children:[i,e(L,{align:"block-end",children:e(W,{fullWidth:!0,align:"center",justify:"end",children:e(I,{variant:"primary",color:"brand",size:"small",children:e(g,{})})})})]}),h[3]=a):a=h[3],h[4]===Symbol.for("react.memo_cache_sentinel")?(o=e(j,{minRows:1,maxRows:5,placeholder:"Type a message..."}),h[4]=o):o=h[4],h[5]===Symbol.for("react.memo_cache_sentinel")?(s=e(I,{variant:"secondary",size:"small",color:"neutral",children:e(v,{})}),h[5]=s):s=h[5],h[6]===Symbol.for("react.memo_cache_sentinel")?(c=e("div",{style:r,children:t(V,{gap:12,children:[n,a,t(P,{children:[o,e(L,{align:"block-end",children:t(W,{fullWidth:!0,align:"center",justify:"between",children:[s,e(I,{variant:"primary",color:"brand",size:"small",children:e(g,{})})]})})]})]})}),h[6]=c):c=h[6],c},meta:B},{name:"WithSelect",story:()=>{let r,n,i,a,o,s,c,h,u,m,d,p,y=(0,l.c)(12);return y[0]===Symbol.for("react.memo_cache_sentinel")?(n=new f({items:[{label:"React",value:"react",icon:S,category:"Frontend"},{label:"Vue",value:"vue",icon:w,category:"Frontend"},{label:"Angular",value:"angular",icon:_,category:"Frontend"}]}),r=V,i=12,a=t(P,{children:[e(L,{variant:"outline",children:t(x,{collection:n,children:[e(D,{}),e(T,{children:e($,{children:n.items.map(U)})})]})}),e(E,{placeholder:"Enter"})]}),y[0]=r,y[1]=n,y[2]=i,y[3]=a):(r=y[0],n=y[1],i=y[2],a=y[3]),y[4]===Symbol.for("react.memo_cache_sentinel")?(o=e(E,{placeholder:"Enter"}),y[4]=o):o=y[4],y[5]===Symbol.for("react.memo_cache_sentinel")?(s=e(D,{}),y[5]=s):s=y[5],y[6]===Symbol.for("react.memo_cache_sentinel")?(c=t(P,{children:[o,e(L,{align:"inline-end",variant:"outline",children:t(x,{collection:n,children:[s,e(T,{children:e($,{children:n.items.map(G)})})]})})]}),y[6]=c):c=y[6],y[7]===Symbol.for("react.memo_cache_sentinel")?(h=e(D,{}),y[7]=h):h=y[7],y[8]===Symbol.for("react.memo_cache_sentinel")?(u=t(P,{children:[e(L,{children:t(x,{collection:n,children:[h,e(T,{children:e($,{children:n.items.map(H)})})]})}),e(E,{placeholder:"Enter"})]}),y[8]=u):u=y[8],y[9]===Symbol.for("react.memo_cache_sentinel")?(m=e(E,{placeholder:"Enter"}),y[9]=m):m=y[9],y[10]===Symbol.for("react.memo_cache_sentinel")?(d=e(D,{}),y[10]=d):d=y[10],y[11]===Symbol.for("react.memo_cache_sentinel")?(p=t(r,{gap:i,children:[a,c,u,t(P,{children:[m,e(L,{align:"inline-end",children:t(x,{collection:n,children:[d,e(T,{children:e($,{children:n.items.map(J)})})]})})]})]}),y[11]=p):p=y[11],p},meta:B}];function K({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},i="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,l=()=>Y.default.createElement(i,n),a={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,a)}return Y.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},Y.default.createElement("h2",{className:"text-sm mb-12"},e.name),Y.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(Y.default.createElement(window.WallarmDS.Root,null,q.map((e,t)=>Y.default.createElement(K,{key:t,entry:e})))),t}}})();