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

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

@@ -0,0 +1,458 @@
+A date typed segment by segment, for a date the reader knows — pair it with `Calendar` when they need to see the month to choose. It takes React Aria date objects rather than a JavaScript `Date`, and segment order and hour cycle come from `DateFormatProvider` app-wide rather than per input.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `show-icon` | `boolean \| undefined` | no | `true` | Whether to show the leading icon. Default: true. |
+| `error` | `boolean \| undefined` | no | `false` | Whether the input has an error state. Sets `aria-invalid` and error styling. |
+| `disabled` | `boolean \| undefined` | no | `false` | Whether the input is disabled. Prevents user interaction. |
+| `read-only` | `boolean \| undefined` | no | `false` | Whether the input is read-only. Segments are focusable but not editable. |
+| `placeholder` | `string \| undefined` | no | — | Placeholder shown when no value is selected. |
+| `size` | `"small" \| "default" \| "medium" \| "inline-edit"` | no | `default` | Visual size. Default: 'default' (36px). |
+| `title` | `string \| undefined` | no | — |  |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+| `value` | `complex` | no | — |  |
+| `default-value` | `complex` | no | — |  |
+| `on-change` | `complex` | no | — |  |
+| `min-value` | `complex` | no | — |  |
+| `max-value` | `complex` | no | — |  |
+| `placeholder-value` | `complex` | no | — |  |
+| `name` | `string \| undefined` | no | — |  |
+| `is-required` | `boolean \| undefined` | no | — | Marks the field as required in assistive tech and HTML form validation. |
+| `granularity` | `"day" \| undefined` | no | `day` |  |
+| `show-time-dropdown` | `undefined` | no | — |  |
+| `time-step` | `undefined` | no | `30` |  |
+
+## Stories
+
+### Basic
+
+The bare field. Each segment is its own target: arrows step a segment, typing fills it and
+moves on, so the whole date is reachable without a pointer.
+
+Source: DateInput/DateInput.stories.tsx#Basic
+
+### WithIcon
+
+The calendar icon is decoration here, not a trigger — this field opens nothing. Reach for
+`Calendar` when the icon should open a picker.
+
+Source: DateInput/DateInput.stories.tsx#WithIcon
+
+### States
+
+Default, disabled and error side by side. `error` reddens the border and marks the field
+invalid; the reason belongs in `FieldError`.
+
+Source: DateInput/DateInput.stories.tsx#States
+
+### Sizes
+
+The same 36 / 32 / 24px scale as the other fields, so a date sits in a row of inputs without
+breaking the line.
+
+Source: DateInput/DateInput.stories.tsx#Sizes
+
+### Filled
+
+A field holding a value, next to one holding a placeholder. The clear affordance only appears
+once there is something to clear.
+
+Source: DateInput/DateInput.stories.tsx#Filled
+
+### Granularity
+
+`granularity` decides how many segments there are, from a day down to a second. Ask for the
+smallest unit you will actually use — every extra segment is another thing to tab through.
+
+Source: DateInput/DateInput.stories.tsx#Granularity
+
+### WithFieldComponents
+
+Inside `Field`, which supplies the label and description. The field does not read that
+context, so check the labelling rather than assuming it wired itself.
+
+Source: DateInput/DateInput.stories.tsx#WithFieldComponents
+
+### DateOrderComparison
+
+Day-first against month-first, each in its own scoped provider. This is an app-wide decision,
+not a per-field one — the comparison exists to show what the provider changes.
+
+Source: DateInput/DateInput.stories.tsx#DateOrderComparison
+
+### HourCycleByContext
+
+12-hour against 24-hour, again from the provider. There is no per-input escape hatch, which
+is deliberate: a form mixing both would be unreadable.
+
+Source: DateInput/DateInput.stories.tsx#HourCycleByContext
+
+### ReadOnly
+
+`readOnly` keeps the value legible and removes every edit affordance. Different from
+disabled, which says the control exists but is unavailable.
+
+Source: DateInput/DateInput.stories.tsx#ReadOnly
+
+## Story sources
+
+### DateInput/DateInput.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { CalendarDate, CalendarDateTime, getLocalTimeZone, today } from '../../index';
+import { DateFormatProvider } from '../DateFormatProvider';
+import { Field, FieldAction, FieldDescription, FieldError, FieldLabel } from '../Field';
+import { HStack, VStack } from '../Stack';
+import { DateInput } from './DateInput';
+
+const sampleDate = new CalendarDate(2026, 1, 1);
+const sampleDateTime = new CalendarDateTime(2026, 1, 1, 22, 0);
+
+const DESCRIPTION = [
+  'A date typed segment by segment, for a date the reader knows — pair it with `Calendar` when they need to see the month to choose.',
+  'It takes React Aria date objects rather than a JavaScript `Date`, and segment order and hour cycle come from `DateFormatProvider` app-wide rather than per input.',
+].join(' ');
+
+const meta: Meta<typeof DateInput> = {
+  title: 'Inputs Date/DateInput',
+  component: DateInput,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  argTypes: {
+    granularity: {
+      control: 'select',
+      options: ['day', 'hour', 'minute', 'second'],
+      description:
+        'Determines the smallest unit of time that can be edited. `day` shows date only, `hour`/`minute`/`second` add time segments.',
+    },
+    error: {
+      control: 'boolean',
+      description: 'Whether the input has an error state.',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the input is disabled.',
+    },
+    readOnly: {
+      control: 'boolean',
+      description: 'Whether the input is read-only. Displays value but prevents editing.',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text shown when no value is selected.',
+    },
+    showIcon: {
+      control: 'boolean',
+      description: 'Whether to show the leading calendar icon. Default: true.',
+    },
+    showTimeDropdown: {
+      control: 'boolean',
+      description:
+        'Show dropdown for time selection with arrow navigation. Only effective when granularity includes time.',
+    },
+    timeStep: {
+      control: 'number',
+      description: 'Time interval in minutes for dropdown options.',
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'medium', 'small'],
+      description: 'Visual size: default (36px), medium (32px), small (24px).',
+    },
+  },
+  args: {
+    granularity: 'day',
+    error: false,
+    disabled: false,
+    readOnly: false,
+    showIcon: true,
+    size: 'default',
+  },
+};
+
+export default meta;
+
+const dropdownRoom: StoryFn<typeof meta>['decorators'] = [
+  Story => (
+    <div style={{ minHeight: 360, paddingBottom: 280 }}>
+      <Story />
+    </div>
+  ),
+];
+
+/**
+ * The bare field. Each segment is its own target: arrows step a segment, typing fills it and
+ * moves on, so the whole date is reachable without a pointer.
+ */
+export const Basic: StoryFn<typeof meta> = ({ ...args }) => {
+  return <DateInput {...args} />;
+};
+Basic.decorators = dropdownRoom;
+Basic.parameters = { layout: 'padded' };
+
+/**
+ * The calendar icon is decoration here, not a trigger — this field opens nothing. Reach for
+ * `Calendar` when the icon should open a picker.
+ */
+export const WithIcon: StoryFn<typeof meta> = () => (
+  <HStack gap={24}>
+    <VStack gap={12}>
+      <span className='sb-annotation'>Without icon</span>
+      <DateInput showIcon={false} />
+    </VStack>
+    <VStack gap={12}>
+      <span className='sb-annotation'>With icon</span>
+      <DateInput />
+    </VStack>
+  </HStack>
+);
+
+/**
+ * Default, disabled and error side by side. `error` reddens the border and marks the field
+ * invalid; the reason belongs in `FieldError`.
+ */
+export const States: StoryFn<typeof meta> = () => (
+  <HStack gap={24}>
+    <VStack gap={12}>
+      <span className='sb-annotation'>Default</span>
+      <DateInput />
+      <DateInput defaultValue={sampleDate} />
+    </VStack>
+    <VStack gap={12}>
+      <span className='sb-annotation'>Disabled</span>
+      <DateInput disabled />
+      <DateInput disabled defaultValue={sampleDate} />
+    </VStack>
+    <VStack gap={12}>
+      <span className='sb-annotation'>Error</span>
+      <DateInput error />
+      <DateInput error defaultValue={sampleDate} />
+    </VStack>
+  </HStack>
+);
+
+/**
+ * The same 36 / 32 / 24px scale as the other fields, so a date sits in a row of inputs without
+ * breaking the line.
+ */
+export const Sizes: StoryFn<typeof meta> = () => (
+  <HStack gap={24}>
+    <VStack gap={16}>
+      <VStack gap={4}>
+        <span className='sb-annotation'>Default (36px)</span>
+        <DateInput size='default' />
+      </VStack>
+      <VStack gap={4}>
+        <span className='sb-annotation'>Medium (32px)</span>
+        <DateInput size='medium' />
+      </VStack>
+      <VStack gap={4}>
+        <span className='sb-annotation'>Small (24px)</span>
+        <DateInput size='small' />
+      </VStack>
+    </VStack>
+    <VStack gap={16}>
+      <VStack gap={4}>
+        <span className='sb-annotation'>Default filled</span>
+        <DateInput size='default' defaultValue={sampleDate} />
+      </VStack>
+      <VStack gap={4}>
+        <span className='sb-annotation'>Medium filled</span>
+        <DateInput size='medium' defaultValue={sampleDate} />
+      </VStack>
+      <VStack gap={4}>
+        <span className='sb-annotation'>Small filled</span>
+        <DateInput size='small' defaultValue={sampleDate} />
+      </VStack>
+    </VStack>
+  </HStack>
+);
+
+/**
+ * A field holding a value, next to one holding a placeholder. The clear affordance only appears
+ * once there is something to clear.
+ */
+export const Filled: StoryFn<typeof meta> = () => (
+  <VStack gap={16}>
+    <VStack gap={4}>
+      <span className='sb-annotation'>Date</span>
+      <DateInput defaultValue={sampleDate} />
+    </VStack>
+    <DateFormatProvider order='day-first' hourCycle={24}>
+      <VStack gap={4}>
+        <span className='sb-annotation'>Date + time (24h)</span>
+        <DateInput granularity='minute' defaultValue={sampleDateTime} />
+      </VStack>
+    </DateFormatProvider>
+    <DateFormatProvider order='day-first' hourCycle={12}>
+      <VStack gap={4}>
+        <span className='sb-annotation'>Date + time (12h)</span>
+        <DateInput granularity='minute' defaultValue={sampleDateTime} />
+      </VStack>
+    </DateFormatProvider>
+    <VStack gap={4}>
+      <span className='sb-annotation'>Without icon</span>
+      <DateInput showIcon={false} defaultValue={sampleDate} />
+    </VStack>
+  </VStack>
+);
+
+/**
+ * `granularity` decides how many segments there are, from a day down to a second. Ask for the
+ * smallest unit you will actually use — every extra segment is another thing to tab through.
+ */
+export const Granularity: StoryFn<typeof meta> = () => (
+  <HStack gap={24}>
+    <DateFormatProvider order='day-first' hourCycle={12}>
+      <VStack gap={12}>
+        <span className='sb-annotation'>12-hour format</span>
+        <DateInput placeholder='day' granularity='day' />
+        <DateInput placeholder='hour' granularity='hour' />
+        <DateInput placeholder='minute' granularity='minute' />
+        <DateInput placeholder='second' granularity='second' />
+      </VStack>
+    </DateFormatProvider>
+    <DateFormatProvider order='day-first' hourCycle={24}>
+      <VStack gap={12}>
+        <span className='sb-annotation'>24-hour format</span>
+        <DateInput placeholder='day' granularity='day' />
+        <DateInput placeholder='hour' granularity='hour' />
+        <DateInput placeholder='minute' granularity='minute' />
+        <DateInput placeholder='second' granularity='second' />
+      </VStack>
+    </DateFormatProvider>
+  </HStack>
+);
+
+/**
+ * Inside `Field`, which supplies the label and description. The field does not read that
+ * context, so check the labelling rather than assuming it wired itself.
+ */
+export const WithFieldComponents: StoryFn<typeof meta> = () => {
+  // With `granularity='day'` the runtime value is always a CalendarDate —
+  // onChange gets cast on the way in so app state stays narrowly typed.
+  const [value, setValue] = useState<CalendarDate | null>(null);
+  const [errorValue, setErrorValue] = useState<CalendarDate | null>(today(getLocalTimeZone()));
+
+  const handleSetNow = () => {
+    setValue(today(getLocalTimeZone()));
+  };
+
+  return (
+    <VStack gap={24}>
+      <Field>
+        <FieldLabel>
+          Label
+          <FieldAction onClick={handleSetNow}>Set now</FieldAction>
+        </FieldLabel>
+        <DateInput
+          placeholder='Select a date'
+          value={value}
+          onChange={v => setValue(v as CalendarDate | null)}
+        />
+        <FieldDescription>This is an input description.</FieldDescription>
+      </Field>
+
+      <Field invalid>
+        <FieldLabel>Label</FieldLabel>
+        <DateInput
+          error
+          value={errorValue}
+          onChange={v => setErrorValue(v as CalendarDate | null)}
+        />
+        <FieldError>An error message.</FieldError>
+      </Field>
+    </VStack>
+  );
+};
+
+/**
+ * Day-first against month-first, each in its own scoped provider. This is an app-wide decision,
+ * not a per-field one — the comparison exists to show what the provider changes.
+ */
+export const DateOrderComparison: StoryFn<typeof meta> = () => (
+  <HStack gap={32}>
+    <DateFormatProvider order='day-first' hourCycle={24}>
+      <VStack gap={12}>
+        <span className='sb-annotation'>Day first — DD MMM YYYY</span>
+        <DateInput />
+        <DateInput defaultValue={sampleDate} />
+        <DateInput granularity='minute' defaultValue={sampleDateTime} />
+      </VStack>
+    </DateFormatProvider>
+    <DateFormatProvider order='month-first' hourCycle={24}>
+      <VStack gap={12}>
+        <span className='sb-annotation'>Month first — MMM DD YYYY</span>
+        <DateInput />
+        <DateInput defaultValue={sampleDate} />
+        <DateInput granularity='minute' defaultValue={sampleDateTime} />
+      </VStack>
+    </DateFormatProvider>
+  </HStack>
+);
+DateOrderComparison.parameters = { layout: 'padded' };
+
+/**
+ * 12-hour against 24-hour, again from the provider. There is no per-input escape hatch, which
+ * is deliberate: a form mixing both would be unreadable.
+ */
+export const HourCycleByContext: StoryFn<typeof meta> = () => (
+  <HStack gap={32}>
+    <DateFormatProvider order='day-first' hourCycle={12}>
+      <VStack gap={12}>
+        <span className='sb-annotation'>12-hour (AM/PM)</span>
+        <DateInput granularity='minute' defaultValue={sampleDateTime} />
+        <DateInput granularity='second' defaultValue={sampleDateTime} />
+      </VStack>
+    </DateFormatProvider>
+    <DateFormatProvider order='day-first' hourCycle={24}>
+      <VStack gap={12}>
+        <span className='sb-annotation'>24-hour</span>
+        <DateInput granularity='minute' defaultValue={sampleDateTime} />
+        <DateInput granularity='second' defaultValue={sampleDateTime} />
+      </VStack>
+    </DateFormatProvider>
+  </HStack>
+);
+HourCycleByContext.parameters = { layout: 'padded' };
+
+/**
+ * `readOnly` keeps the value legible and removes every edit affordance. Different from
+ * disabled, which says the control exists but is unavailable.
+ */
+export const ReadOnly: StoryFn<typeof meta> = () => (
+  <HStack gap={24}>
+    <VStack gap={12}>
+      <span className='sb-annotation'>Date</span>
+      <DateInput readOnly defaultValue={sampleDate} data-testid='date-input-read-only' />
+    </VStack>
+    <VStack gap={12}>
+      <span className='sb-annotation'>Date + time</span>
+      <DateInput
+        readOnly
+        granularity='minute'
+        defaultValue={sampleDateTime}
+        data-testid='date-input-read-only-datetime'
+      />
+    </VStack>
+  </HStack>
+);
+ReadOnly.parameters = { layout: 'padded' };
+```

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

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Inputs Date" 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/DateInput/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,a){let n,r;/**
+ * 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,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,p=(e,t,a,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let r of u(t))m.call(e,r)||r===a||c(e,r,{get:()=>t[r],enumerable:!(n=s(t,r))||n.enumerable});return e},h={},f={$dispatcherGuard:()=>$,$makeReadOnly:()=>O,$reset:()=>M,$structuralCheck:()=>I,c:()=>v,clearRenderCounterRegistry:()=>W,renderCounterRegistry:()=>k,useRenderCounter:()=>x};for(var y in f)c(h,y,{get:f[y],enumerable:!0});e.exports=p(c({},"__esModule",{value:!0}),h);var g=(r=null!=(n=a("C"))?i(d(n)):{},p(n&&n.__esModule?r:c(r,"default",{value:n,enumerable:!0}),n)),{useRef:b,useEffect:_,isValidElement:w}=g,S=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,N=Symbol.for("react.memo_cache_sentinel"),v="function"==typeof(null==(o=g.__COMPILER_RUNTIME)?void 0:o.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let a=0;a<e;a++)t[a]=N;return t[N]=!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 R=null;function E(e){return S.ReactCurrentDispatcher.current=e,S.ReactCurrentDispatcher.current}D.useMemoCache=e=>{if(null!=R)return R.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function $(e){let t=S.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&(R=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.");E(D)}else if(1===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===C.length&&(R=null),E(e)}else if(2===e)C.push(t),E(R);else if(3===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");E(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function M(e){for(let t=0;t<e.length;t++)e[t]=N}function O(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var k=new Map;function W(){for(let e of k.values())e.forEach(e=>{e.count=0})}function x(e){let t=b(null);null!=t.current&&(t.current.count+=1),_(()=>{if(null==t.current){let a,n={count:0};null==(a=k.get(e))&&(a=new Set,k.set(e,a)),a.add(n),t.current=n}return()=>{var a;let n;null!==t.current&&(a=t.current,null!=(n=k.get(e))&&n.delete(a))}})}var V=new Set;function I(e,t,a,n,r,l){function o(e,t,o,i){let c=`${n}:${l} [${r}] ${a}${o} changed from ${e} to ${t} at depth ${i}`;V.has(c)||(V.add(c),console.error(c))}!function e(t,a,n,r){if(!(r>2)){if(t!==a)if(typeof t!=typeof a)o(`type ${typeof t}`,`type ${typeof a}`,n,r);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(a);if(null===t&&null!==a)o("null",`type ${typeof a}`,n,r);else if(null===a)o(`type ${typeof t}`,"null",n,r);else if(t instanceof Map)if(a instanceof Map)if(t.size!==a.size)o(`Map instance with size ${t.size}`,`Map instance with size ${a.size}`,n,r);else for(let[l,i]of t)a.has(l)?e(i,a.get(l),`${n}.get(${l})`,r+1):o(`Map instance with key ${l}`,`Map instance without key ${l}`,n,r);else o("Map instance","other value",n,r);else if(a instanceof Map)o("other value","Map instance",n,r);else if(t instanceof Set)if(a instanceof Set)if(t.size!==a.size)o(`Set instance with size ${t.size}`,`Set instance with size ${a.size}`,n,r);else for(let e of a)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,n,r);else o("Set instance","other value",n,r);else if(a instanceof Set)o("other value","Set instance",n,r);else if(l||i)if(l!==i)o(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,n,r);else if(t.length!==a.length)o(`array with length ${t.length}`,`array with length ${a.length}`,n,r);else for(let l=0;l<t.length;l++)e(t[l],a[l],`${n}[${l}]`,r+1);else if(w(t)||w(a))w(t)!==w(a)?o(`type ${w(t)?"React element":"object"}`,`type ${w(a)?"React element":"object"}`,n,r):t.type!==a.type?o(`React element of type ${t.type}`,`React element of type ${a.type}`,n,r):e(t.props,a.props,`[props of ${n}]`,r+1);else{for(let e in a)e in t||o(`object without key ${e}`,`object with key ${e}`,n,r);for(let l in t)l in a?e(t[l],a[l],`${n}.${l}`,r+1):o(`object with key ${l}`,`object without key ${l}`,n,r)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(a)?isNaN(t)!==isNaN(a)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(a)?"NaN":"non-NaN value"}`,n,r):t!==a&&o(t,a,n,r)}}}(e,t,"",0)}},p(e,t,a){let n=new WeakMap,r=new WeakMap;function l(e,t,a){let l=t,o=a;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,a=n.get(e);a||(a=new WeakMap,n.set(e,a));let r=a.get(t);r||((r=e.forwardRef((e,a)=>t({...e,ref:a}))).displayName=t.displayName??t.name,a.set(t,r)),l=r}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 a=r.get(e);a||(a=new Map,r.set(e,a));let n=a.get(t);if(n)return n;let l=e.forwardRef((a,n)=>{let r=e.useRef(null);if(!r.current||r.current.original!==n){let e;r.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let a=n(t);e="function"==typeof a?a:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...a,ref:r.current.callback})});return l.displayName=`CanvasHost(${t})`,a.set(t,l),l}(e,l)),{type:l,props:o}}function o(e){let t=(t,a,n)=>{let r=l(e,t,a??{});return e.createElement(r.type,void 0===n?r.props:{...r.props,key:n})};return{jsx:t,jsxs:(t,a,n)=>{let r=l(e,t,a??{}),{children:o,...i}=r.props;return e.createElement(r.type,void 0===n?i:{...i,key:n},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,a,...n)=>{let r=l(e,t,a??{});return e.createElement(r.type,r.props,...n)},cloneElement:(t,a,...n)=>{let r=e.cloneElement(t,a??void 0,...n),o=r.ref,i=l(e,r.type,{...r.props,ref:o});return i.type===r.type&&"string"!=typeof r.type?r:e.createElement(i.type,{...i.props,key:r.key})}}}a.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,a){a.r(t);let n=(0,a("p").YJ)(window.React),{Children:r,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:m,cloneElement:p,createContext:h,createElement:f,createFactory:y,createRef:g,forwardRef:b,isValidElement:_,lazy:w,memo:S,startTransition:N,unstable_act:v,useCallback:D,useContext:R,useDebugValue:E,useDeferredValue:C,useEffect:$,useId:M,useImperativeHandle:O,useInsertionEffect:k,useLayoutEffect:W,useMemo:x,useReducer:V,useRef:I,useState:T,useSyncExternalStore:j,useTransition:z,version:A,use:P}=n;a.d(t,{},{Children:r,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:m,cloneElement:p,createContext:h,createElement:f,createFactory:y,createRef:g,default:n,forwardRef:b,isValidElement:_,lazy:w,memo:S,startTransition:N,unstable_act:v,use:P,useCallback:D,useContext:R,useDebugValue:E,useDeferredValue:C,useEffect:$,useId:M,useImperativeHandle:O,useInsertionEffect:k,useLayoutEffect:W,useMemo:x,useReducer:V,useRef:I,useState:T,useSyncExternalStore:j,useTransition:z,version:A})}},t={};function a(n){var r=t[n];if(void 0!==r)return r.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,a),l.exports}a.d=(e,t,n)=>{var r=(t,n)=>{for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,[n]:t[r]})};r(t,"get"),r(n,"value")},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.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:r}=(0,a("p").MA)(window.React);var l=a("vD"),o=a("C");let i=window.WallarmDS.CalendarDate,c=window.WallarmDS.CalendarDateTime,s=window.WallarmDS.getLocalTimeZone,u=window.WallarmDS.today,d=window.WallarmDS.DateFormatProvider,m=window.WallarmDS.Field,p=window.WallarmDS.FieldAction,h=window.WallarmDS.FieldDescription,f=window.WallarmDS.FieldError,y=window.WallarmDS.FieldLabel,g=window.WallarmDS.HStack,b=window.WallarmDS.VStack,_=window.WallarmDS.DateInput,w=new i(2026,1,1),S=new c(2026,1,1,22,0),N={title:"Inputs Date/DateInput",component:_,parameters:{layout:"centered",docs:{description:{component:"A date typed segment by segment, for a date the reader knows — pair it with `Calendar` when they need to see the month to choose. It takes React Aria date objects rather than a JavaScript `Date`, and segment order and hour cycle come from `DateFormatProvider` app-wide rather than per input."}}},argTypes:{granularity:{control:"select",options:["day","hour","minute","second"],description:"Determines the smallest unit of time that can be edited. `day` shows date only, `hour`/`minute`/`second` add time segments."},error:{control:"boolean",description:"Whether the input has an error state."},disabled:{control:"boolean",description:"Whether the input is disabled."},readOnly:{control:"boolean",description:"Whether the input is read-only. Displays value but prevents editing."},placeholder:{control:"text",description:"Placeholder text shown when no value is selected."},showIcon:{control:"boolean",description:"Whether to show the leading calendar icon. Default: true."},showTimeDropdown:{control:"boolean",description:"Show dropdown for time selection with arrow navigation. Only effective when granularity includes time."},timeStep:{control:"number",description:"Time interval in minutes for dropdown options."},size:{control:"select",options:["default","medium","small"],description:"Visual size: default (36px), medium (32px), small (24px)."}},args:{granularity:"day",error:!1,disabled:!1,readOnly:!1,showIcon:!0,size:"default"}},v=t=>{let a,n,r=(0,l.c)(4);return r[0]!==t?({...a}=t,r[0]=t,r[1]=a):a=r[1],r[2]!==a?(n=e(_,{...a}),r[2]=a,r[3]=n):n=r[3],n};v.decorators=[t=>e("div",{style:{minHeight:360,paddingBottom:280},children:e(t,{})})],v.parameters={layout:"padded"};let D=()=>{let a,n,r=(0,l.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(d,{order:"day-first",hourCycle:24,children:t(b,{gap:12,children:[e("span",{className:"sb-annotation",children:"Day first — DD MMM YYYY"}),e(_,{}),e(_,{defaultValue:w}),e(_,{granularity:"minute",defaultValue:S})]})}),r[0]=a):a=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(g,{gap:32,children:[a,e(d,{order:"month-first",hourCycle:24,children:t(b,{gap:12,children:[e("span",{className:"sb-annotation",children:"Month first — MMM DD YYYY"}),e(_,{}),e(_,{defaultValue:w}),e(_,{granularity:"minute",defaultValue:S})]})})]}),r[1]=n):n=r[1],n};D.parameters={layout:"padded"};let R=()=>{let a,n,r=(0,l.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(d,{order:"day-first",hourCycle:12,children:t(b,{gap:12,children:[e("span",{className:"sb-annotation",children:"12-hour (AM/PM)"}),e(_,{granularity:"minute",defaultValue:S}),e(_,{granularity:"second",defaultValue:S})]})}),r[0]=a):a=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(g,{gap:32,children:[a,e(d,{order:"day-first",hourCycle:24,children:t(b,{gap:12,children:[e("span",{className:"sb-annotation",children:"24-hour"}),e(_,{granularity:"minute",defaultValue:S}),e(_,{granularity:"second",defaultValue:S})]})})]}),r[1]=n):n=r[1],n};R.parameters={layout:"padded"};let E=()=>{let a,n,r=(0,l.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(b,{gap:12,children:[e("span",{className:"sb-annotation",children:"Date"}),e(_,{readOnly:!0,defaultValue:w,"data-testid":"date-input-read-only"})]}),r[0]=a):a=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(g,{gap:24,children:[a,t(b,{gap:12,children:[e("span",{className:"sb-annotation",children:"Date + time"}),e(_,{readOnly:!0,granularity:"minute",defaultValue:S,"data-testid":"date-input-read-only-datetime"})]})]}),r[1]=n):n=r[1],n};E.parameters={layout:"padded"};let C=[{name:"Basic",story:v,meta:N},{name:"WithIcon",story:()=>{let a,n,r=(0,l.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(b,{gap:12,children:[e("span",{className:"sb-annotation",children:"Without icon"}),e(_,{showIcon:!1})]}),r[0]=a):a=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(g,{gap:24,children:[a,t(b,{gap:12,children:[e("span",{className:"sb-annotation",children:"With icon"}),e(_,{})]})]}),r[1]=n):n=r[1],n},meta:N},{name:"States",story:()=>{let a,n,r,o=(0,l.c)(3);return o[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(b,{gap:12,children:[e("span",{className:"sb-annotation",children:"Default"}),e(_,{}),e(_,{defaultValue:w})]}),o[0]=a):a=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(b,{gap:12,children:[e("span",{className:"sb-annotation",children:"Disabled"}),e(_,{disabled:!0}),e(_,{disabled:!0,defaultValue:w})]}),o[1]=n):n=o[1],o[2]===Symbol.for("react.memo_cache_sentinel")?(r=t(g,{gap:24,children:[a,n,t(b,{gap:12,children:[e("span",{className:"sb-annotation",children:"Error"}),e(_,{error:!0}),e(_,{error:!0,defaultValue:w})]})]}),o[2]=r):r=o[2],r},meta:N},{name:"Sizes",story:()=>{let a,n,r,o,i,c,s=(0,l.c)(6);return s[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(b,{gap:4,children:[e("span",{className:"sb-annotation",children:"Default (36px)"}),e(_,{size:"default"})]}),s[0]=a):a=s[0],s[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(b,{gap:4,children:[e("span",{className:"sb-annotation",children:"Medium (32px)"}),e(_,{size:"medium"})]}),s[1]=n):n=s[1],s[2]===Symbol.for("react.memo_cache_sentinel")?(r=t(b,{gap:16,children:[a,n,t(b,{gap:4,children:[e("span",{className:"sb-annotation",children:"Small (24px)"}),e(_,{size:"small"})]})]}),s[2]=r):r=s[2],s[3]===Symbol.for("react.memo_cache_sentinel")?(o=t(b,{gap:4,children:[e("span",{className:"sb-annotation",children:"Default filled"}),e(_,{size:"default",defaultValue:w})]}),s[3]=o):o=s[3],s[4]===Symbol.for("react.memo_cache_sentinel")?(i=t(b,{gap:4,children:[e("span",{className:"sb-annotation",children:"Medium filled"}),e(_,{size:"medium",defaultValue:w})]}),s[4]=i):i=s[4],s[5]===Symbol.for("react.memo_cache_sentinel")?(c=t(g,{gap:24,children:[r,t(b,{gap:16,children:[o,i,t(b,{gap:4,children:[e("span",{className:"sb-annotation",children:"Small filled"}),e(_,{size:"small",defaultValue:w})]})]})]}),s[5]=c):c=s[5],c},meta:N},{name:"Filled",story:()=>{let a,n,r,o,i=(0,l.c)(4);return i[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(b,{gap:4,children:[e("span",{className:"sb-annotation",children:"Date"}),e(_,{defaultValue:w})]}),i[0]=a):a=i[0],i[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(d,{order:"day-first",hourCycle:24,children:t(b,{gap:4,children:[e("span",{className:"sb-annotation",children:"Date + time (24h)"}),e(_,{granularity:"minute",defaultValue:S})]})}),i[1]=n):n=i[1],i[2]===Symbol.for("react.memo_cache_sentinel")?(r=e(d,{order:"day-first",hourCycle:12,children:t(b,{gap:4,children:[e("span",{className:"sb-annotation",children:"Date + time (12h)"}),e(_,{granularity:"minute",defaultValue:S})]})}),i[2]=r):r=i[2],i[3]===Symbol.for("react.memo_cache_sentinel")?(o=t(b,{gap:16,children:[a,n,r,t(b,{gap:4,children:[e("span",{className:"sb-annotation",children:"Without icon"}),e(_,{showIcon:!1,defaultValue:w})]})]}),i[3]=o):o=i[3],o},meta:N},{name:"Granularity",story:()=>{let a,n,r=(0,l.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(d,{order:"day-first",hourCycle:12,children:t(b,{gap:12,children:[e("span",{className:"sb-annotation",children:"12-hour format"}),e(_,{placeholder:"day",granularity:"day"}),e(_,{placeholder:"hour",granularity:"hour"}),e(_,{placeholder:"minute",granularity:"minute"}),e(_,{placeholder:"second",granularity:"second"})]})}),r[0]=a):a=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(g,{gap:24,children:[a,e(d,{order:"day-first",hourCycle:24,children:t(b,{gap:12,children:[e("span",{className:"sb-annotation",children:"24-hour format"}),e(_,{placeholder:"day",granularity:"day"}),e(_,{placeholder:"hour",granularity:"hour"}),e(_,{placeholder:"minute",granularity:"minute"}),e(_,{placeholder:"second",granularity:"second"})]})})]}),r[1]=n):n=r[1],n},meta:N},{name:"WithFieldComponents",story:()=>{let a,n,r,i,c,d,g,w,S,N,v,D,R,E=(0,l.c)(19),[C,$]=(0,o.useState)(null);E[0]===Symbol.for("react.memo_cache_sentinel")?(a=u(s()),E[0]=a):a=E[0];let[M,O]=(0,o.useState)(a);E[1]===Symbol.for("react.memo_cache_sentinel")?(n=()=>{$(u(s()))},E[1]=n):n=E[1];let k=n;return E[2]===Symbol.for("react.memo_cache_sentinel")?(r=t(y,{children:["Label",e(p,{onClick:k,children:"Set now"})]}),E[2]=r):r=E[2],E[3]===Symbol.for("react.memo_cache_sentinel")?(i=e=>$(e),E[3]=i):i=E[3],E[4]!==C?(c=e(_,{placeholder:"Select a date",value:C,onChange:i}),E[4]=C,E[5]=c):c=E[5],E[6]===Symbol.for("react.memo_cache_sentinel")?(d=e(h,{children:"This is an input description."}),E[6]=d):d=E[6],E[7]!==c?(g=t(m,{children:[r,c,d]}),E[7]=c,E[8]=g):g=E[8],E[9]===Symbol.for("react.memo_cache_sentinel")?(w=e(y,{children:"Label"}),E[9]=w):w=E[9],E[10]===Symbol.for("react.memo_cache_sentinel")?(S=e=>O(e),E[10]=S):S=E[10],E[11]!==M?(N=e(_,{error:!0,value:M,onChange:S}),E[11]=M,E[12]=N):N=E[12],E[13]===Symbol.for("react.memo_cache_sentinel")?(v=e(f,{children:"An error message."}),E[13]=v):v=E[13],E[14]!==N?(D=t(m,{invalid:!0,children:[w,N,v]}),E[14]=N,E[15]=D):D=E[15],E[16]!==D||E[17]!==g?(R=t(b,{gap:24,children:[g,D]}),E[16]=D,E[17]=g,E[18]=R):R=E[18],R},meta:N},{name:"DateOrderComparison",story:D,meta:N},{name:"HourCycleByContext",story:R,meta:N},{name:"ReadOnly",story:E,meta:N}];function $({entry:e}){let{story:t,meta:a}=e,n={...a.args,...t.args},r="function"==typeof t||t.$$typeof?t:t.render||a.render||a.component,l=()=>o.default.createElement(r,n),i={args:n,globals:{theme:"light"},parameters:{...a.parameters,...t.parameters},viewMode:"story"};for(let e of[...a.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,i)}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,C.map((e,t)=>o.default.createElement($,{key:t,entry:e})))),t}}})();