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

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

@@ -0,0 +1,284 @@
+Shows where in a request a parameter lives — the method, then each container down to the parameter itself, with the last segment highlighted and carrying a bolt when `attack` marks it as the one that was hit. Copying a path yields a `FilterInput` query rather than the text on screen — `method = "POST" AND parameter = "JSON.nginx_config"` — so a finding can be pasted straight into a search.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `method` | `"GET" \| "POST" \| "PUT" \| "PATCH" \| "DELETE" \| "HEAD" \| "OPTIONS"` | no | — |  |
+| `segments` | `string[]` | yes | — |  |
+| `encoding` | `string \| undefined` | no | — |  |
+| `attack` | `boolean \| undefined` | no | `false` |  |
+| `expandable` | `boolean \| undefined` | no | `false` | Opt in to click-to-expand. When `true`, a *truncated* path becomes interactive: clicking the `…` collapse indicator (or the path) expands it inline to show every segment, and clicking again collapses it back to `first … last`. No effect when the path already fits without truncation. `expandable` only controls the affordance (whether the user can toggle); the open/closed state is owned by `expanded` / `defaultExpanded`. |
+| `expanded` | `boolean` | no | `false` | Controlled expanded state. When provided, the component does not manage its own state — pair it with {@link onExpandedChange}. |
+| `default-expanded` | `boolean \| undefined` | no | `false` | Initial expanded state for the uncontrolled case. Ignored when `expanded` is provided. Defaults to `false`. |
+| `on-expanded-change` | `((expanded: boolean) => void) \| undefined` | no | — | Called with the next expanded state whenever the user toggles the path. Required for controlled usage; also useful for analytics in the uncontrolled case. |
+| `copy-format` | `complex` | no | `formatAsFilter` |  |
+| `title` | `string \| undefined` | no | — |  |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Stories
+
+### FullPath
+
+Every part at once: a method, two segments, an encoding, and the `attack` bolt on the
+parameter that was hit.
+
+Source: ParameterPath/ParameterPath.stories.tsx#FullPath
+
+### NoEncoding
+
+With no `encoding` the trailing chip simply goes, and the path ends on the parameter.
+
+Source: ParameterPath/ParameterPath.stories.tsx#NoEncoding
+
+### PathIndexBola
+
+A numeric segment: `path › 2` is the second element of the URL path, which is how a BOLA
+finding points at a resource id rather than a named field.
+
+Source: ParameterPath/ParameterPath.stories.tsx#PathIndexBola
+
+### Header
+
+The container need not be a body — here the parameter is a request header, and the first
+segment is what says so.
+
+Source: ParameterPath/ParameterPath.stories.tsx#Header
+
+### Cookie
+
+The same shape for a cookie: first segment names where the value came from, last names
+the value.
+
+Source: ParameterPath/ParameterPath.stories.tsx#Cookie
+
+### DeepNestedTruncated
+
+Seven segments in 280px: the middle collapses to an ellipsis and the full path moves into
+a tooltip. The truncation is measured, not a CSS clip, so it reacts to the real width.
+
+Source: ParameterPath/ParameterPath.stories.tsx#DeepNestedTruncated
+
+### NoMethod
+
+`method` is optional — leave it out where the row around the path already says which
+request this belongs to.
+
+Source: ParameterPath/ParameterPath.stories.tsx#NoMethod
+
+### ExpandableTruncated
+
+`expandable` makes a truncated path clickable and focusable: it opens inline to show every
+segment, and the tooltip stands down while it is open.
+
+Source: ParameterPath/ParameterPath.stories.tsx#ExpandableTruncated
+
+### ExpandableFitsInline
+
+The same path given room to fit. `expandable` leaves no affordance behind when there is
+nothing to expand — no ellipsis, no cursor, no focus stop.
+
+Source: ParameterPath/ParameterPath.stories.tsx#ExpandableFitsInline
+
+### Playground
+
+The props on controls, for trying a segment list or a method the stories above skip.
+
+Source: ParameterPath/ParameterPath.stories.tsx#Playground
+
+### Gallery
+
+The shapes together, as they would read down a column of findings — with a narrow cell at
+the bottom to show what happens when the column is the constraint.
+
+Source: ParameterPath/ParameterPath.stories.tsx#Gallery
+
+## Story sources
+
+### ParameterPath/ParameterPath.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import type { HttpMethodName } from '../HttpMethod';
+import { VStack } from '../Stack';
+import { ParameterPath } from './ParameterPath';
+
+const DESCRIPTION = [
+  'Shows where in a request a parameter lives — the method, then each container down to the parameter itself, with the last segment highlighted and carrying a bolt when `attack` marks it as the one that was hit.',
+  'Copying a path yields a `FilterInput` query rather than the text on screen — `method = "POST" AND parameter = "JSON.nginx_config"` — so a finding can be pasted straight into a search.',
+].join(' ');
+
+const meta = {
+  title: 'Data Display/ParameterPath',
+  component: ParameterPath,
+  parameters: {
+    layout: 'centered',
+    docs: { description: { component: DESCRIPTION } },
+  },
+  argTypes: {
+    method: {
+      control: 'select',
+      options: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS', undefined],
+    },
+    attack: { control: 'boolean' },
+    expandable: { control: 'boolean' },
+    defaultExpanded: { control: 'boolean' },
+  },
+} satisfies Meta<typeof ParameterPath>;
+
+export default meta;
+
+/**
+ * Every part at once: a method, two segments, an encoding, and the `attack` bolt on the
+ * parameter that was hit.
+ */
+export const FullPath: StoryFn<typeof meta> = () => (
+  <ParameterPath
+    data-testid='parameter-path'
+    method='POST'
+    segments={['JSON', 'nginx_config']}
+    encoding='BASE64'
+    attack
+  />
+);
+
+/**
+ * With no `encoding` the trailing chip simply goes, and the path ends on the parameter.
+ */
+export const NoEncoding: StoryFn<typeof meta> = () => (
+  <ParameterPath method='GET' segments={['query', 'filter']} attack />
+);
+
+/**
+ * A numeric segment: `path › 2` is the second element of the URL path, which is how a BOLA
+ * finding points at a resource id rather than a named field.
+ */
+export const PathIndexBola: StoryFn<typeof meta> = () => (
+  <ParameterPath method='GET' segments={['path', '2']} attack />
+);
+
+/**
+ * The container need not be a body — here the parameter is a request header, and the first
+ * segment is what says so.
+ */
+export const Header: StoryFn<typeof meta> = () => (
+  <ParameterPath method='GET' segments={['header', 'X-Forwarded-For']} attack />
+);
+
+/**
+ * The same shape for a cookie: first segment names where the value came from, last names
+ * the value.
+ */
+export const Cookie: StoryFn<typeof meta> = () => (
+  <ParameterPath method='POST' segments={['cookie', 'session_id']} attack />
+);
+
+/**
+ * Seven segments in 280px: the middle collapses to an ellipsis and the full path moves into
+ * a tooltip. The truncation is measured, not a CSS clip, so it reacts to the real width.
+ */
+export const DeepNestedTruncated: StoryFn<typeof meta> = () => (
+  <div style={{ width: 280 }}>
+    <ParameterPath
+      data-testid='parameter-path'
+      method='POST'
+      segments={['multipart', 'json_abc', 'json_doc', 'qwerty_doc', 'hash', 'formData', 'get']}
+      attack
+    />
+  </div>
+);
+
+/**
+ * `method` is optional — leave it out where the row around the path already says which
+ * request this belongs to.
+ */
+export const NoMethod: StoryFn<typeof meta> = () => (
+  <ParameterPath segments={['cookie', 'session_id']} attack />
+);
+
+// 600px keeps a wide margin below the path's natural width (~720px), so
+// truncation survives font-metric differences between environments.
+/**
+ * `expandable` makes a truncated path clickable and focusable: it opens inline to show every
+ * segment, and the tooltip stands down while it is open.
+ */
+export const ExpandableTruncated: StoryFn<typeof meta> = () => (
+  <div style={{ width: 600 }}>
+    {/* The root is w-full (it must span the available space to measure it),
+        so centering happens inside the component, not on the container. */}
+    <ParameterPath
+      data-testid='parameter-path'
+      className='justify-center'
+      method='POST'
+      segments={[
+        'multipart',
+        'json_abc',
+        'json_doc',
+        'qwerty_doc',
+        'hash',
+        'formData',
+        'session_token',
+        'nested_payload',
+        'get',
+      ]}
+      attack
+      expandable
+    />
+  </div>
+);
+
+// The same expandable path in a container the full path fits into — the
+// expand affordance stays inert (no ellipsis, not clickable).
+/**
+ * The same path given room to fit. `expandable` leaves no affordance behind when there is
+ * nothing to expand — no ellipsis, no cursor, no focus stop.
+ */
+export const ExpandableFitsInline: StoryFn<typeof meta> = () => (
+  <div style={{ width: 720, display: 'flex', justifyContent: 'center' }}>
+    <ParameterPath
+      data-testid='parameter-path'
+      method='POST'
+      segments={['multipart', 'json_abc', 'json_doc', 'qwerty_doc', 'hash', 'formData', 'get']}
+      attack
+      expandable
+    />
+  </div>
+);
+
+/**
+ * The props on controls, for trying a segment list or a method the stories above skip.
+ */
+export const Playground: StoryFn<typeof ParameterPath> = args => <ParameterPath {...args} />;
+Playground.args = {
+  method: 'POST' satisfies HttpMethodName,
+  segments: ['JSON', 'nginx_config'],
+  encoding: 'BASE64',
+  attack: true,
+};
+
+/**
+ * The shapes together, as they would read down a column of findings — with a narrow cell at
+ * the bottom to show what happens when the column is the constraint.
+ */
+export const Gallery: StoryFn<typeof meta> = () => (
+  <VStack gap={16}>
+    <ParameterPath method='POST' segments={['JSON', 'nginx_config']} encoding='BASE64' attack />
+    <ParameterPath method='GET' segments={['query', 'filter']} attack />
+    <ParameterPath method='GET' segments={['path', '2']} attack />
+    <ParameterPath method='GET' segments={['header', 'X-Forwarded-For']} attack />
+    <ParameterPath method='POST' segments={['cookie', 'session_id']} attack />
+    <div style={{ width: 280 }}>
+      <ParameterPath method='POST' segments={['multipart', 'a', 'b', 'c', 'd', 'get']} attack />
+    </div>
+  </VStack>
+);
+```

package/dist/project/components/ParameterPath/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/ParameterPath/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,c=Object.create,i=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,d=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))f.call(e,a)||a===r||i(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},p={},h={$dispatcherGuard:()=>O,$makeReadOnly:()=>C,$reset:()=>T,$structuralCheck:()=>D,c:()=>R,clearRenderCounterRegistry:()=>M,renderCounterRegistry:()=>P,useRenderCounter:()=>x};for(var y in h)i(p,y,{get:h[y],enumerable:!0});e.exports=d(i({},"__esModule",{value:!0}),p);var _=(a=null!=(n=r("C"))?c(m(n)):{},d(n&&n.__esModule?a:i(a,"default",{value:n,enumerable:!0}),n)),{useRef:g,useEffect:S,isValidElement:b}=_,E=null!=(o=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:_.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,w=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(l=_.__COMPILER_RUNTIME)?void 0:l.c)?_.__COMPILER_RUNTIME.c:function(e){return _.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=w;return t[w]=!0,t},[])},v={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{v[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 k=null;function $(e){return E.ReactCurrentDispatcher.current=e,E.ReactCurrentDispatcher.current}v.useMemoCache=e=>{if(null!=k)return k.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function O(e){let t=E.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&(k=t),t===v)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.");$(v)}else if(1===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===N.length&&(k=null),$(e)}else if(2===e)N.push(t),$(k);else if(3===e){let e=N.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 T(e){for(let t=0;t<e.length;t++)e[t]=w}function C(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var P=new Map;function M(){for(let e of P.values())e.forEach(e=>{e.count=0})}function x(e){let t=g(null);null!=t.current&&(t.current.count+=1),S(()=>{if(null==t.current){let r,n={count:0};null==(r=P.get(e))&&(r=new Set,P.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=P.get(e))&&n.delete(r))}})}var j=new Set;function D(e,t,r,n,a,o){function l(e,t,l,c){let i=`${n}:${o} [${a}] ${r}${l} changed from ${e} to ${t} at depth ${c}`;j.has(i)||(j.add(i),console.error(i))}!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),c=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,c]of t)r.has(o)?e(c,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||c)if(o!==c)l(`type ${o?"array":"object"}`,`type ${c?"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(b(t)||b(r))b(t)!==b(r)?l(`type ${b(t)?"React element":"object"}`,`type ${b(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,...c}=a.props;return e.createElement(a.type,void 0===n?c:{...c,key:n},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function c(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,c=o(e,a.type,{...a.props,ref:l});return c.type===a.type&&"string"!=typeof a.type?a:e.createElement(c.type,{...c.props,key:a.key})}}}r.d(t,{MA:()=>l,YJ:()=>c})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:o,Fragment:l,Profiler:c,PureComponent:i,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:f,cloneElement:d,createContext:p,createElement:h,createFactory:y,createRef:_,forwardRef:g,isValidElement:S,lazy:b,memo:E,startTransition:w,unstable_act:R,useCallback:v,useContext:k,useDebugValue:$,useDeferredValue:N,useEffect:O,useId:T,useImperativeHandle:C,useInsertionEffect:P,useLayoutEffect:M,useMemo:x,useReducer:j,useRef:D,useState:A,useSyncExternalStore:I,useTransition:F,version:z,use:L}=n;r.d(t,{},{Children:a,Component:o,Fragment:l,Profiler:c,PureComponent:i,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:m,act:f,cloneElement:d,createContext:p,createElement:h,createFactory:y,createRef:_,default:n,forwardRef:g,isValidElement:S,lazy:b,memo:E,startTransition:w,unstable_act:R,use:L,useCallback:v,useContext:k,useDebugValue:$,useDeferredValue:N,useEffect:O,useId:T,useImperativeHandle:C,useInsertionEffect:P,useLayoutEffect:M,useMemo:x,useReducer:j,useRef:D,useState:A,useSyncExternalStore:I,useTransition:F,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.VStack,c=window.WallarmDS.ParameterPath,i={title:"Data Display/ParameterPath",component:c,parameters:{layout:"centered",docs:{description:{component:'Shows where in a request a parameter lives — the method, then each container down to the parameter itself, with the last segment highlighted and carrying a bolt when `attack` marks it as the one that was hit. Copying a path yields a `FilterInput` query rather than the text on screen — `method = "POST" AND parameter = "JSON.nginx_config"` — so a finding can be pasted straight into a search.'}}},argTypes:{method:{control:"select",options:["GET","POST","PUT","PATCH","DELETE","HEAD","OPTIONS",void 0]},attack:{control:"boolean"},expandable:{control:"boolean"},defaultExpanded:{control:"boolean"}}},s=t=>{let r,n=(0,o.c)(2);return n[0]!==t?(r=e(c,{...t}),n[0]=t,n[1]=r):r=n[1],r};s.args={method:"POST",segments:["JSON","nginx_config"],encoding:"BASE64",attack:!0};var u=r("C");let m=[{name:"FullPath",story:()=>{let t,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(c,{"data-testid":"parameter-path",method:"POST",segments:["JSON","nginx_config"],encoding:"BASE64",attack:!0}),r[0]=t):t=r[0],t},meta:i},{name:"NoEncoding",story:()=>{let t,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(c,{method:"GET",segments:["query","filter"],attack:!0}),r[0]=t):t=r[0],t},meta:i},{name:"PathIndexBola",story:()=>{let t,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(c,{method:"GET",segments:["path","2"],attack:!0}),r[0]=t):t=r[0],t},meta:i},{name:"Header",story:()=>{let t,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(c,{method:"GET",segments:["header","X-Forwarded-For"],attack:!0}),r[0]=t):t=r[0],t},meta:i},{name:"Cookie",story:()=>{let t,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(c,{method:"POST",segments:["cookie","session_id"],attack:!0}),r[0]=t):t=r[0],t},meta:i},{name:"DeepNestedTruncated",story:()=>{let t,r,n=(0,o.c)(2);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t={width:280},n[0]=t):t=n[0],n[1]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{style:t,children:e(c,{"data-testid":"parameter-path",method:"POST",segments:["multipart","json_abc","json_doc","qwerty_doc","hash","formData","get"],attack:!0})}),n[1]=r):r=n[1],r},meta:i},{name:"NoMethod",story:()=>{let t,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(c,{segments:["cookie","session_id"],attack:!0}),r[0]=t):t=r[0],t},meta:i},{name:"ExpandableTruncated",story:()=>{let t,r,n=(0,o.c)(2);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t={width:600},n[0]=t):t=n[0],n[1]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{style:t,children:e(c,{"data-testid":"parameter-path",className:"justify-center",method:"POST",segments:["multipart","json_abc","json_doc","qwerty_doc","hash","formData","session_token","nested_payload","get"],attack:!0,expandable:!0})}),n[1]=r):r=n[1],r},meta:i},{name:"ExpandableFitsInline",story:()=>{let t,r,n=(0,o.c)(2);return n[0]===Symbol.for("react.memo_cache_sentinel")?(t={width:720,display:"flex",justifyContent:"center"},n[0]=t):t=n[0],n[1]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{style:t,children:e(c,{"data-testid":"parameter-path",method:"POST",segments:["multipart","json_abc","json_doc","qwerty_doc","hash","formData","get"],attack:!0,expandable:!0})}),n[1]=r):r=n[1],r},meta:i},{name:"Playground",story:s,meta:i},{name:"Gallery",story:()=>{let r,n,a,i,s,u,m,f=(0,o.c)(7);return f[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(c,{method:"POST",segments:["JSON","nginx_config"],encoding:"BASE64",attack:!0}),f[0]=r):r=f[0],f[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(c,{method:"GET",segments:["query","filter"],attack:!0}),f[1]=n):n=f[1],f[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(c,{method:"GET",segments:["path","2"],attack:!0}),f[2]=a):a=f[2],f[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(c,{method:"GET",segments:["header","X-Forwarded-For"],attack:!0}),f[3]=i):i=f[3],f[4]===Symbol.for("react.memo_cache_sentinel")?(s=e(c,{method:"POST",segments:["cookie","session_id"],attack:!0}),u={width:280},f[4]=s,f[5]=u):(s=f[4],u=f[5]),f[6]===Symbol.for("react.memo_cache_sentinel")?(m=t(l,{gap:16,children:[r,n,a,i,s,e("div",{style:u,children:e(c,{method:"POST",segments:["multipart","a","b","c","d","get"],attack:!0})})]}),f[6]=m):m=f[6],m},meta:i}];function f({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=()=>u.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 u.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},u.default.createElement("h2",{className:"text-sm mb-12"},e.name),u.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(u.default.createElement(window.WallarmDS.Root,null,m.map((e,t)=>u.default.createElement(f,{key:t,entry:e})))),t}}})();

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

@@ -0,0 +1,171 @@
+The rules a password has to meet, ticked off as it meets them — show them from the moment the field appears rather than after a failed submit, and keep the same set everywhere a password is created. The component only paints: you compute each rule's `met` and pass it in, with `passwordValidators` shipped alongside for that. A satisfied rule is struck through and steps back, so what is left to do is what stands out.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `items` | `complex` | yes | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `spacing` | `ListSpacing \| undefined` | no | `4` |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Stories
+
+### AllUnmet
+
+The opening state — every rule still outstanding, marked with a muted dot and left in
+full-strength type.
+
+Source: PasswordComplexity/PasswordComplexity.stories.tsx#AllUnmet
+
+### AllMet
+
+Everything satisfied: green checks with the labels struck through, which reads as done
+without needing a success message on top.
+
+Source: PasswordComplexity/PasswordComplexity.stories.tsx#AllMet
+
+### PartiallyMet
+
+The state actually seen most of the time. Three rules are struck through and two are not,
+and the two are what the eye goes to.
+
+Source: PasswordComplexity/PasswordComplexity.stories.tsx#PartiallyMet
+
+### Interactive
+
+Two fields wired to `passwordValidators`, `passwordsMatch` included, recomputed on every
+keystroke — the real-time checking the rules are meant to be shown with.
+
+Source: PasswordComplexity/PasswordComplexity.stories.tsx#Interactive
+
+## Story sources
+
+### PasswordComplexity/PasswordComplexity.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { Input } from '../Input';
+import { PasswordComplexity, type PasswordComplexityItem } from './PasswordComplexity';
+import { passwordValidators } from './validators';
+
+const DESCRIPTION = [
+  'The rules a password has to meet, ticked off as it meets them — show them from the moment the field appears rather than after a failed submit, and keep the same set everywhere a password is created.',
+  "The component only paints: you compute each rule's `met` and pass it in, with `passwordValidators` shipped alongside for that. A satisfied rule is struck through and steps back, so what is left to do is what stands out.",
+].join(' ');
+
+const meta = {
+  title: 'Data Display/PasswordComplexity',
+  component: PasswordComplexity,
+  parameters: {
+    layout: 'centered',
+    docs: { description: { component: DESCRIPTION } },
+  },
+} satisfies Meta<typeof PasswordComplexity>;
+
+export default meta;
+
+const defaultItems: PasswordComplexityItem[] = [
+  { id: 'length', label: 'At least 8 characters', met: false },
+  { id: 'uppercase', label: 'Contains an uppercase letter', met: false },
+  { id: 'lowercase', label: 'Contains a lowercase letter', met: false },
+  { id: 'number', label: 'Contains a number', met: false },
+  { id: 'symbol', label: 'Contains a special character', met: false },
+];
+
+/**
+ * The opening state — every rule still outstanding, marked with a muted dot and left in
+ * full-strength type.
+ */
+export const AllUnmet: StoryFn<typeof meta> = () => <PasswordComplexity items={defaultItems} />;
+
+/**
+ * Everything satisfied: green checks with the labels struck through, which reads as done
+ * without needing a success message on top.
+ */
+export const AllMet: StoryFn<typeof meta> = () => (
+  <PasswordComplexity items={defaultItems.map(item => ({ ...item, met: true }))} />
+);
+
+/**
+ * The state actually seen most of the time. Three rules are struck through and two are not,
+ * and the two are what the eye goes to.
+ */
+export const PartiallyMet: StoryFn<typeof meta> = () => (
+  <PasswordComplexity
+    items={[
+      { id: 'length', label: 'At least 8 characters', met: true },
+      { id: 'uppercase', label: 'Contains an uppercase letter', met: true },
+      { id: 'lowercase', label: 'Contains a lowercase letter', met: true },
+      { id: 'number', label: 'Contains a number', met: false },
+      { id: 'symbol', label: 'Contains a special character', met: false },
+    ]}
+  />
+);
+
+/**
+ * Two fields wired to `passwordValidators`, `passwordsMatch` included, recomputed on every
+ * keystroke — the real-time checking the rules are meant to be shown with.
+ */
+export const Interactive: StoryFn<typeof meta> = () => {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+
+  const items: PasswordComplexityItem[] = [
+    {
+      id: 'length',
+      label: 'At least 8 characters',
+      met: passwordValidators.minLength(8)(password),
+    },
+    {
+      id: 'uppercase',
+      label: 'One uppercase letter (A–Z)',
+      met: passwordValidators.hasUppercase(password),
+    },
+    {
+      id: 'lowercase',
+      label: 'One lowercase letter (a–z)',
+      met: passwordValidators.hasLowercase(password),
+    },
+    { id: 'number', label: 'One number (0–9)', met: passwordValidators.hasNumber(password) },
+    {
+      id: 'symbol',
+      label: 'One symbol (e.g. ! ? @ #)',
+      met: passwordValidators.hasSymbol(password),
+    },
+    {
+      id: 'match',
+      label: 'Both passwords match',
+      met: passwordValidators.passwordsMatch(password, confirmPassword),
+    },
+  ];
+
+  return (
+    <div className='flex flex-col gap-16 w-[320px]'>
+      <Input
+        type='password'
+        placeholder='New password...'
+        value={password}
+        onChange={e => setPassword(e.target.value)}
+      />
+      <Input
+        type='password'
+        placeholder='Confirm password...'
+        value={confirmPassword}
+        onChange={e => setConfirmPassword(e.target.value)}
+      />
+      <PasswordComplexity items={items} />
+    </div>
+  );
+};
+```

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let a,n;/**
+ * 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,o,s=Object.create,i=Object.defineProperty,c=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,p=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,m=(e,t,r,a)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let n of u(t))f.call(e,n)||n===r||i(e,n,{get:()=>t[n],enumerable:!(a=c(t,n))||a.enumerable});return e},d={},y={$dispatcherGuard:()=>O,$makeReadOnly:()=>k,$reset:()=>M,$structuralCheck:()=>T,c:()=>E,clearRenderCounterRegistry:()=>D,renderCounterRegistry:()=>x,useRenderCounter:()=>A};for(var h in y)i(d,h,{get:y[h],enumerable:!0});e.exports=m(i({},"__esModule",{value:!0}),d);var b=(n=null!=(a=r("C"))?s(p(a)):{},m(a&&a.__esModule?n:i(n,"default",{value:a,enumerable:!0}),a)),{useRef:w,useEffect:g,isValidElement:_}=b,R=null!=(l=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:b.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,v=Symbol.for("react.memo_cache_sentinel"),E="function"==typeof(null==(o=b.__COMPILER_RUNTIME)?void 0:o.c)?b.__COMPILER_RUNTIME.c:function(e){return b.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=v;return t[v]=!0,t},[])},$={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{$[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var C=null;function S(e){return R.ReactCurrentDispatcher.current=e,R.ReactCurrentDispatcher.current}$.useMemoCache=e=>{if(null!=C)return C.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function O(e){let t=R.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&(C=t),t===$)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");S($)}else if(1===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===N.length&&(C=null),S(e)}else if(2===e)N.push(t),S(C);else if(3===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");S(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function M(e){for(let t=0;t<e.length;t++)e[t]=v}function k(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var x=new Map;function D(){for(let e of x.values())e.forEach(e=>{e.count=0})}function A(e){let t=w(null);null!=t.current&&(t.current.count+=1),g(()=>{if(null==t.current){let r,a={count:0};null==(r=x.get(e))&&(r=new Set,x.set(e,r)),r.add(a),t.current=a}return()=>{var r;let a;null!==t.current&&(r=t.current,null!=(a=x.get(e))&&a.delete(r))}})}var j=new Set;function T(e,t,r,a,n,l){function o(e,t,o,s){let i=`${a}:${l} [${n}] ${r}${o} changed from ${e} to ${t} at depth ${s}`;j.has(i)||(j.add(i),console.error(i))}!function e(t,r,a,n){if(!(n>2)){if(t!==r)if(typeof t!=typeof r)o(`type ${typeof t}`,`type ${typeof r}`,a,n);else if("object"==typeof t){let l=Array.isArray(t),s=Array.isArray(r);if(null===t&&null!==r)o("null",`type ${typeof r}`,a,n);else if(null===r)o(`type ${typeof t}`,"null",a,n);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)o(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,a,n);else for(let[l,s]of t)r.has(l)?e(s,r.get(l),`${a}.get(${l})`,n+1):o(`Map instance with key ${l}`,`Map instance without key ${l}`,a,n);else o("Map instance","other value",a,n);else if(r instanceof Map)o("other value","Map instance",a,n);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)o(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,a,n);else for(let e of r)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,a,n);else o("Set instance","other value",a,n);else if(r instanceof Set)o("other value","Set instance",a,n);else if(l||s)if(l!==s)o(`type ${l?"array":"object"}`,`type ${s?"array":"object"}`,a,n);else if(t.length!==r.length)o(`array with length ${t.length}`,`array with length ${r.length}`,a,n);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${a}[${l}]`,n+1);else if(_(t)||_(r))_(t)!==_(r)?o(`type ${_(t)?"React element":"object"}`,`type ${_(r)?"React element":"object"}`,a,n):t.type!==r.type?o(`React element of type ${t.type}`,`React element of type ${r.type}`,a,n):e(t.props,r.props,`[props of ${a}]`,n+1);else{for(let e in r)e in t||o(`object without key ${e}`,`object with key ${e}`,a,n);for(let l in t)l in r?e(t[l],r[l],`${a}.${l}`,n+1):o(`object with key ${l}`,`object without key ${l}`,a,n)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,a,n):t!==r&&o(t,r,a,n)}}}(e,t,"",0)}},p(e,t,r){let a=new WeakMap,n=new WeakMap;function l(e,t,r){let l=t,o=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!=o.ref&&!l.prototype?.isReactComponent){let t=l,r=a.get(e);r||(r=new WeakMap,a.set(e,r));let n=r.get(t);n||((n=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,n)),l=n}if("string"==typeof l&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in o&&(o={...o,[t]:o[e]},delete o[e]);return"string"==typeof l&&null!=o.ref&&(l=function(e,t){let r=n.get(e);r||(r=new Map,n.set(e,r));let a=r.get(t);if(a)return a;let l=e.forwardRef((r,a)=>{let n=e.useRef(null);if(!n.current||n.current.original!==a){let e;n.current={original:a,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof a){let r=a(t);e="function"==typeof r?r:void 0}else a&&(a.current=t)}}}return e.createElement(t,{...r,ref:n.current.callback})});return l.displayName=`CanvasHost(${t})`,r.set(t,l),l}(e,l)),{type:l,props:o}}function o(e){let t=(t,r,a)=>{let n=l(e,t,r??{});return e.createElement(n.type,void 0===a?n.props:{...n.props,key:a})};return{jsx:t,jsxs:(t,r,a)=>{let n=l(e,t,r??{}),{children:o,...s}=n.props;return e.createElement(n.type,void 0===a?s:{...s,key:a},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function s(e){return{...e,createElement:(t,r,...a)=>{let n=l(e,t,r??{});return e.createElement(n.type,n.props,...a)},cloneElement:(t,r,...a)=>{let n=e.cloneElement(t,r??void 0,...a),o=n.ref,s=l(e,n.type,{...n.props,ref:o});return s.type===n.type&&"string"!=typeof n.type?n:e.createElement(s.type,{...s.props,key:n.key})}}}r.d(t,{MA:()=>o,YJ:()=>s})},C(e,t,r){r.r(t);let a=(0,r("p").YJ)(window.React),{Children:n,Component:l,Fragment:o,Profiler:s,PureComponent:i,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:f,cloneElement:m,createContext:d,createElement:y,createFactory:h,createRef:b,forwardRef:w,isValidElement:g,lazy:_,memo:R,startTransition:v,unstable_act:E,useCallback:$,useContext:C,useDebugValue:S,useDeferredValue:N,useEffect:O,useId:M,useImperativeHandle:k,useInsertionEffect:x,useLayoutEffect:D,useMemo:A,useReducer:j,useRef:T,useState:I,useSyncExternalStore:P,useTransition:z,version:L,use:U}=a;r.d(t,{},{Children:n,Component:l,Fragment:o,Profiler:s,PureComponent:i,StrictMode:c,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:p,act:f,cloneElement:m,createContext:d,createElement:y,createFactory:h,createRef:b,default:a,forwardRef:w,isValidElement:g,lazy:_,memo:R,startTransition:v,unstable_act:E,use:U,useCallback:$,useContext:C,useDebugValue:S,useDeferredValue:N,useEffect:O,useId:M,useImperativeHandle:k,useInsertionEffect:x,useLayoutEffect:D,useMemo:A,useReducer:j,useRef:T,useState:I,useSyncExternalStore:P,useTransition:z,version:L})}},t={};function r(a){var n=t[a];if(void 0!==n)return n.exports;var l=t[a]={exports:{}};return e[a](l,l.exports,r),l.exports}r.d=(e,t,a)=>{var n=(t,a)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,[a]:t[n]})};n(t,"get"),n(a,"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:a,Fragment:n}=(0,r("p").MA)(window.React);var l=r("vD"),o=r("C");let s=window.WallarmDS.Input,i=window.WallarmDS.PasswordComplexity,c=window.WallarmDS.passwordValidators,u={title:"Data Display/PasswordComplexity",component:i,parameters:{layout:"centered",docs:{description:{component:"The rules a password has to meet, ticked off as it meets them — show them from the moment the field appears rather than after a failed submit, and keep the same set everywhere a password is created. The component only paints: you compute each rule's `met` and pass it in, with `passwordValidators` shipped alongside for that. A satisfied rule is struck through and steps back, so what is left to do is what stands out."}}}},p=[{id:"length",label:"At least 8 characters",met:!1},{id:"uppercase",label:"Contains an uppercase letter",met:!1},{id:"lowercase",label:"Contains a lowercase letter",met:!1},{id:"number",label:"Contains a number",met:!1},{id:"symbol",label:"Contains a special character",met:!1}];function f(e){return{...e,met:!0}}let m=[{name:"AllUnmet",story:()=>{let t,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(i,{items:p}),r[0]=t):t=r[0],t},meta:u},{name:"AllMet",story:()=>{let t,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(i,{items:p.map(f)}),r[0]=t):t=r[0],t},meta:u},{name:"PartiallyMet",story:()=>{let t,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(i,{items:[{id:"length",label:"At least 8 characters",met:!0},{id:"uppercase",label:"Contains an uppercase letter",met:!0},{id:"lowercase",label:"Contains a lowercase letter",met:!0},{id:"number",label:"Contains a number",met:!1},{id:"symbol",label:"Contains a special character",met:!1}]}),r[0]=t):t=r[0],t},meta:u},{name:"Interactive",story:()=>{let r,a,n,u,p,f,m,d,y,h,b,w,g,_,R,v,E,$,C,S=(0,l.c)(44),[N,O]=(0,o.useState)(""),[M,k]=(0,o.useState)("");S[0]!==N?(r=c.minLength(8)(N),S[0]=N,S[1]=r):r=S[1],S[2]!==r?(a={id:"length",label:"At least 8 characters",met:r},S[2]=r,S[3]=a):a=S[3],S[4]!==N?(n=c.hasUppercase(N),S[4]=N,S[5]=n):n=S[5],S[6]!==n?(u={id:"uppercase",label:"One uppercase letter (A–Z)",met:n},S[6]=n,S[7]=u):u=S[7],S[8]!==N?(p=c.hasLowercase(N),S[8]=N,S[9]=p):p=S[9],S[10]!==p?(f={id:"lowercase",label:"One lowercase letter (a–z)",met:p},S[10]=p,S[11]=f):f=S[11],S[12]!==N?(m=c.hasNumber(N),S[12]=N,S[13]=m):m=S[13],S[14]!==m?(d={id:"number",label:"One number (0–9)",met:m},S[14]=m,S[15]=d):d=S[15],S[16]!==N?(y=c.hasSymbol(N),S[16]=N,S[17]=y):y=S[17],S[18]!==y?(h={id:"symbol",label:"One symbol (e.g. ! ? @ #)",met:y},S[18]=y,S[19]=h):h=S[19],S[20]!==M||S[21]!==N?(b=c.passwordsMatch(N,M),S[20]=M,S[21]=N,S[22]=b):b=S[22],S[23]!==b?(w={id:"match",label:"Both passwords match",met:b},S[23]=b,S[24]=w):w=S[24],S[25]!==a||S[26]!==w||S[27]!==u||S[28]!==f||S[29]!==d||S[30]!==h?(g=[a,u,f,d,h,w],S[25]=a,S[26]=w,S[27]=u,S[28]=f,S[29]=d,S[30]=h,S[31]=g):g=S[31];let x=g;return S[32]===Symbol.for("react.memo_cache_sentinel")?(_=e=>O(e.target.value),S[32]=_):_=S[32],S[33]!==N?(R=e(s,{type:"password",placeholder:"New password...",value:N,onChange:_}),S[33]=N,S[34]=R):R=S[34],S[35]===Symbol.for("react.memo_cache_sentinel")?(v=e=>k(e.target.value),S[35]=v):v=S[35],S[36]!==M?(E=e(s,{type:"password",placeholder:"Confirm password...",value:M,onChange:v}),S[36]=M,S[37]=E):E=S[37],S[38]!==x?($=e(i,{items:x}),S[38]=x,S[39]=$):$=S[39],S[40]!==R||S[41]!==E||S[42]!==$?(C=t("div",{className:"flex flex-col gap-16 w-[320px]",children:[R,E,$]}),S[40]=R,S[41]=E,S[42]=$,S[43]=C):C=S[43],C},meta:u}];function d({entry:e}){let{story:t,meta:r}=e,a={...r.args,...t.args},n="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,l=()=>o.default.createElement(n,a),s={args:a,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,s)}return o.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},o.default.createElement("h2",{className:"text-sm mb-12"},e.name),o.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(o.default.createElement(window.WallarmDS.Root,null,m.map((e,t)=>o.default.createElement(d,{key:t,entry:e})))),t}}})();