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

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

@@ -0,0 +1,412 @@
+Two dates in one field, for a period the reader knows — pair it with `Calendar` in range mode when they need to see the months to choose. Same rules as `DateInput`: React Aria date objects, and order and hour cycle from `DateFormatProvider` 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 | — | Whether to show the leading icon. Default: true. |
+| `error` | `boolean \| undefined` | no | — | Whether the input has an error state. Sets `aria-invalid` and error styling. |
+| `disabled` | `boolean \| undefined` | no | — | Whether the input is disabled. Prevents user interaction. |
+| `read-only` | `boolean \| undefined` | no | — | Whether the input is read-only. Segments are focusable but not editable. |
+| `placeholder` | `string \| undefined` | no | — | Placeholder shown when no value is selected. |
+| `size` | `TemporalInputSize \| undefined` | no | — | 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 | — | Controlled value — range with start and end dates. |
+| `default-value` | `complex` | no | — | Default value for uncontrolled mode. |
+| `on-change` | `complex` | no | — | Callback fired when the range value changes. Receives `null` on clear. |
+| `granularity` | `"day" \| undefined` | no | — |  |
+| `show-time-dropdown` | `undefined` | no | — |  |
+| `time-step` | `undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.DateRangeEndValue` — `DateRangeEndValueProps` in the declaration bundle.
+- `WallarmDS.DateRangeStartValue` — `DateRangeStartValueProps` in the declaration bundle.
+- `WallarmDS.DateRangeSeparator` — `DateRangeSeparatorProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+Start and end in one control, each segmented. The end cannot precede the start, so the field
+cannot produce a range the system would reject.
+
+Source: DateRangeInput/DateRangeInput.stories.tsx#Basic
+
+### WithIcon
+
+Decoration again, not a trigger — reach for `Calendar` when the icon should open a picker.
+
+Source: DateRangeInput/DateRangeInput.stories.tsx#WithIcon
+
+### States
+
+Default, disabled and error. The error applies to the range as a whole, since a start without
+an end is not yet an answer.
+
+Source: DateRangeInput/DateRangeInput.stories.tsx#States
+
+### Sizes
+
+The shared height scale. A range is wider than a single date, so check it against the column
+it lives in.
+
+Source: DateRangeInput/DateRangeInput.stories.tsx#Sizes
+
+### Filled
+
+A complete range beside an empty one, which is the clearest way to see how much width the
+filled state needs.
+
+Source: DateRangeInput/DateRangeInput.stories.tsx#Filled
+
+### Granularity
+
+Both ends share one granularity. Add time only when the period genuinely turns on it — a
+report covering part of a day rather than whole days.
+
+Source: DateRangeInput/DateRangeInput.stories.tsx#Granularity
+
+### DateOrderComparison
+
+Day-first against month-first from the provider, doubly worth seeing here because an
+ambiguous range is twice as easy to misread.
+
+Source: DateRangeInput/DateRangeInput.stories.tsx#DateOrderComparison
+
+### HourCycleByContext
+
+12-hour against 24-hour from the provider, with no per-input override.
+
+Source: DateRangeInput/DateRangeInput.stories.tsx#HourCycleByContext
+
+### ReadOnly
+
+Both ends legible, no edit affordances.
+
+Source: DateRangeInput/DateRangeInput.stories.tsx#ReadOnly
+
+## Story sources
+
+### DateRangeInput/DateRangeInput.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { CalendarDate, CalendarDateTime } from '../../index';
+import { DateFormatProvider } from '../DateFormatProvider';
+import { HStack, VStack } from '../Stack';
+import { DateRangeInput } from './DateRangeInput';
+import type { DateRangeInputProps } from './types';
+
+const DESCRIPTION = [
+  'Two dates in one field, for a period the reader knows — pair it with `Calendar` in range mode when they need to see the months to choose.',
+  'Same rules as `DateInput`: React Aria date objects, and order and hour cycle from `DateFormatProvider` rather than per input.',
+].join(' ');
+
+const meta: Meta<typeof DateRangeInput> = {
+  title: 'Inputs Date/DateRangeInput',
+  component: DateRangeInput,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  tags: ['alpha'],
+  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 to both start and end fields.',
+    },
+    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 in both start and end fields 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 defaultValue = {
+  start: new CalendarDateTime(2024, 3, 15),
+  end: new CalendarDateTime(2024, 3, 22),
+};
+
+const sampleRange = {
+  start: new CalendarDate(2026, 1, 1),
+  end: new CalendarDate(2026, 1, 16),
+};
+
+const sampleRangeDateTime = {
+  start: new CalendarDateTime(2026, 1, 1, 22, 0),
+  end: new CalendarDateTime(2026, 1, 16, 22, 0),
+};
+
+const dropdownRoom: StoryFn<typeof meta>['decorators'] = [
+  Story => (
+    <div style={{ minHeight: 360, paddingBottom: 280 }}>
+      <Story />
+    </div>
+  ),
+];
+
+/**
+ * Start and end in one control, each segmented. The end cannot precede the start, so the field
+ * cannot produce a range the system would reject.
+ */
+export const Basic: StoryFn<typeof meta> = args => {
+  return <DateRangeInput {...(args as DateRangeInputProps)} />;
+};
+Basic.decorators = dropdownRoom;
+Basic.parameters = { layout: 'padded' };
+
+/**
+ * Decoration again, not a trigger — 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>
+      <DateRangeInput showIcon={false} defaultValue={defaultValue} />
+    </VStack>
+    <VStack gap={12}>
+      <span className='sb-annotation'>With icon</span>
+      <DateRangeInput defaultValue={defaultValue} />
+    </VStack>
+  </HStack>
+);
+
+/**
+ * Default, disabled and error. The error applies to the range as a whole, since a start without
+ * an end is not yet an answer.
+ */
+export const States: StoryFn<typeof meta> = () => (
+  <HStack gap={24}>
+    <VStack gap={12}>
+      <span className='sb-annotation'>Default</span>
+      <DateRangeInput />
+      <DateRangeInput defaultValue={sampleRange} />
+    </VStack>
+    <VStack gap={12}>
+      <span className='sb-annotation'>Disabled</span>
+      <DateRangeInput disabled />
+      <DateRangeInput disabled defaultValue={sampleRange} />
+    </VStack>
+    <VStack gap={12}>
+      <span className='sb-annotation'>Error</span>
+      <DateRangeInput error />
+      <DateRangeInput error defaultValue={sampleRange} />
+    </VStack>
+  </HStack>
+);
+
+/**
+ * The shared height scale. A range is wider than a single date, so check it against the column
+ * it lives in.
+ */
+export const Sizes: StoryFn<typeof meta> = () => (
+  <HStack gap={24}>
+    <VStack gap={16}>
+      <VStack gap={4}>
+        <span className='sb-annotation'>Default (36px)</span>
+        <DateRangeInput size='default' />
+      </VStack>
+      <VStack gap={4}>
+        <span className='sb-annotation'>Medium (32px)</span>
+        <DateRangeInput size='medium' />
+      </VStack>
+      <VStack gap={4}>
+        <span className='sb-annotation'>Small (24px)</span>
+        <DateRangeInput size='small' />
+      </VStack>
+    </VStack>
+    <VStack gap={16}>
+      <VStack gap={4}>
+        <span className='sb-annotation'>Default filled</span>
+        <DateRangeInput size='default' defaultValue={sampleRange} />
+      </VStack>
+      <VStack gap={4}>
+        <span className='sb-annotation'>Medium filled</span>
+        <DateRangeInput size='medium' defaultValue={sampleRange} />
+      </VStack>
+      <VStack gap={4}>
+        <span className='sb-annotation'>Small filled</span>
+        <DateRangeInput size='small' defaultValue={sampleRange} />
+      </VStack>
+    </VStack>
+  </HStack>
+);
+
+/**
+ * A complete range beside an empty one, which is the clearest way to see how much width the
+ * filled state needs.
+ */
+export const Filled: StoryFn<typeof meta> = () => (
+  <VStack gap={16}>
+    <VStack gap={4}>
+      <span className='sb-annotation'>Date range</span>
+      <DateRangeInput defaultValue={sampleRange} data-testid='date-range-input-filled' />
+    </VStack>
+    <DateFormatProvider order='day-first' hourCycle={24}>
+      <VStack gap={4}>
+        <span className='sb-annotation'>Date + time range (24h)</span>
+        <DateRangeInput granularity='minute' defaultValue={sampleRangeDateTime} />
+      </VStack>
+    </DateFormatProvider>
+    <VStack gap={4}>
+      <span className='sb-annotation'>Without icon</span>
+      <DateRangeInput showIcon={false} defaultValue={sampleRange} />
+    </VStack>
+  </VStack>
+);
+
+/**
+ * Both ends share one granularity. Add time only when the period genuinely turns on it — a
+ * report covering part of a day rather than whole days.
+ */
+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>
+        <DateRangeInput placeholder='day' granularity='day' />
+        <DateRangeInput placeholder='hour' granularity='hour' />
+        <DateRangeInput placeholder='minute' granularity='minute' />
+        <DateRangeInput placeholder='second' granularity='second' />
+      </VStack>
+    </DateFormatProvider>
+    <DateFormatProvider order='day-first' hourCycle={24}>
+      <VStack gap={12}>
+        <span className='sb-annotation'>24-hour format</span>
+        <DateRangeInput placeholder='day' granularity='day' />
+        <DateRangeInput placeholder='hour' granularity='hour' />
+        <DateRangeInput placeholder='minute' granularity='minute' />
+        <DateRangeInput placeholder='second' granularity='second' />
+      </VStack>
+    </DateFormatProvider>
+  </HStack>
+);
+
+/**
+ * Day-first against month-first from the provider, doubly worth seeing here because an
+ * ambiguous range is twice as easy to misread.
+ */
+export const DateOrderComparison: StoryFn<typeof meta> = () => (
+  <HStack gap={32}>
+    <DateFormatProvider order='day-first'>
+      <VStack gap={12}>
+        <span className='sb-annotation'>Day first — DD MMM YYYY</span>
+        <DateRangeInput />
+        <DateRangeInput defaultValue={sampleRange} />
+        <DateRangeInput granularity='minute' defaultValue={sampleRangeDateTime} />
+      </VStack>
+    </DateFormatProvider>
+    <DateFormatProvider order='month-first'>
+      <VStack gap={12}>
+        <span className='sb-annotation'>Month first — MMM DD YYYY</span>
+        <DateRangeInput />
+        <DateRangeInput defaultValue={sampleRange} />
+        <DateRangeInput granularity='minute' defaultValue={sampleRangeDateTime} />
+      </VStack>
+    </DateFormatProvider>
+  </HStack>
+);
+DateOrderComparison.parameters = { layout: 'padded' };
+
+/**
+ * 12-hour against 24-hour from the provider, with no per-input override.
+ */
+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>
+        <DateRangeInput granularity='minute' defaultValue={sampleRangeDateTime} />
+      </VStack>
+    </DateFormatProvider>
+    <DateFormatProvider order='day-first' hourCycle={24}>
+      <VStack gap={12}>
+        <span className='sb-annotation'>24-hour</span>
+        <DateRangeInput granularity='minute' defaultValue={sampleRangeDateTime} />
+      </VStack>
+    </DateFormatProvider>
+  </HStack>
+);
+HourCycleByContext.parameters = { layout: 'padded' };
+
+/**
+ * Both ends legible, no edit affordances.
+ */
+export const ReadOnly: StoryFn<typeof meta> = () => (
+  <HStack gap={24}>
+    <VStack gap={12}>
+      <span className='sb-annotation'>Date range</span>
+      <DateRangeInput
+        readOnly
+        defaultValue={sampleRange}
+        data-testid='date-range-input-read-only'
+      />
+    </VStack>
+    <VStack gap={12}>
+      <span className='sb-annotation'>Date + time range</span>
+      <DateRangeInput
+        readOnly
+        granularity='minute'
+        defaultValue={sampleRangeDateTime}
+        data-testid='date-range-input-read-only-datetime'
+      />
+    </VStack>
+  </HStack>
+);
+ReadOnly.parameters = { layout: 'padded' };
+```

package/dist/project/components/DateRangeInput/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/DateRangeInput/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,p=Object.prototype.hasOwnProperty,m=(e,t,a,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let r of u(t))p.call(e,r)||r===a||c(e,r,{get:()=>t[r],enumerable:!(n=s(t,r))||n.enumerable});return e},f={},h={$dispatcherGuard:()=>C,$makeReadOnly:()=>O,$reset:()=>M,$structuralCheck:()=>T,c:()=>R,clearRenderCounterRegistry:()=>x,renderCounterRegistry:()=>k,useRenderCounter:()=>I};for(var y in h)c(f,y,{get:h[y],enumerable:!0});e.exports=m(c({},"__esModule",{value:!0}),f);var g=(r=null!=(n=a("C"))?i(d(n)):{},m(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"),R="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},[])},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 E=null;function $(e){return S.ReactCurrentDispatcher.current=e,S.ReactCurrentDispatcher.current}v.useMemoCache=e=>{if(null!=E)return E.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var D=[];function C(e){let t=S.ReactCurrentDispatcher.current;if(0===e){if(D.push(t),1===D.length&&(E=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=D.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===D.length&&(E=null),$(e)}else if(2===e)D.push(t),$(E);else if(3===e){let e=D.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 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 x(){for(let e of k.values())e.forEach(e=>{e.count=0})}function I(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 T(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:p,cloneElement:m,createContext:f,createElement:h,createFactory:y,createRef:g,forwardRef:b,isValidElement:_,lazy:w,memo:S,startTransition:N,unstable_act:R,useCallback:v,useContext:E,useDebugValue:$,useDeferredValue:D,useEffect:C,useId:M,useImperativeHandle:O,useInsertionEffect:k,useLayoutEffect:x,useMemo:I,useReducer:V,useRef:T,useState:j,useSyncExternalStore:z,useTransition:W,version:P,use:A}=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:p,cloneElement:m,createContext:f,createElement:h,createFactory:y,createRef:g,default:n,forwardRef:b,isValidElement:_,lazy:w,memo:S,startTransition:N,unstable_act:R,use:A,useCallback:v,useContext:E,useDebugValue:$,useDeferredValue:D,useEffect:C,useId:M,useImperativeHandle:O,useInsertionEffect:k,useLayoutEffect:x,useMemo:I,useReducer:V,useRef:T,useState:j,useSyncExternalStore:z,useTransition:W,version:P})}},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");let o=window.WallarmDS.CalendarDate,i=window.WallarmDS.CalendarDateTime,c=window.WallarmDS.DateFormatProvider,s=window.WallarmDS.HStack,u=window.WallarmDS.VStack,d=window.WallarmDS.DateRangeInput,p={title:"Inputs Date/DateRangeInput",component:d,parameters:{layout:"centered",docs:{description:{component:"Two dates in one field, for a period the reader knows — pair it with `Calendar` in range mode when they need to see the months to choose. Same rules as `DateInput`: React Aria date objects, and order and hour cycle from `DateFormatProvider` rather than per input."}}},tags:["alpha"],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 to both start and end fields."},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 in both start and end fields 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"}},m={start:new i(2024,3,15),end:new i(2024,3,22)},f={start:new o(2026,1,1),end:new o(2026,1,16)},h={start:new i(2026,1,1,22,0),end:new i(2026,1,16,22,0)},y=t=>{let a,n=(0,l.c)(2);return n[0]!==t?(a=e(d,{...t}),n[0]=t,n[1]=a):a=n[1],a};y.decorators=[t=>e("div",{style:{minHeight:360,paddingBottom:280},children:e(t,{})})],y.parameters={layout:"padded"};let g=()=>{let a,n,r=(0,l.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(c,{order:"day-first",children:t(u,{gap:12,children:[e("span",{className:"sb-annotation",children:"Day first — DD MMM YYYY"}),e(d,{}),e(d,{defaultValue:f}),e(d,{granularity:"minute",defaultValue:h})]})}),r[0]=a):a=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(s,{gap:32,children:[a,e(c,{order:"month-first",children:t(u,{gap:12,children:[e("span",{className:"sb-annotation",children:"Month first — MMM DD YYYY"}),e(d,{}),e(d,{defaultValue:f}),e(d,{granularity:"minute",defaultValue:h})]})})]}),r[1]=n):n=r[1],n};g.parameters={layout:"padded"};let b=()=>{let a,n,r=(0,l.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(c,{order:"day-first",hourCycle:12,children:t(u,{gap:12,children:[e("span",{className:"sb-annotation",children:"12-hour (AM/PM)"}),e(d,{granularity:"minute",defaultValue:h})]})}),r[0]=a):a=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(s,{gap:32,children:[a,e(c,{order:"day-first",hourCycle:24,children:t(u,{gap:12,children:[e("span",{className:"sb-annotation",children:"24-hour"}),e(d,{granularity:"minute",defaultValue:h})]})})]}),r[1]=n):n=r[1],n};b.parameters={layout:"padded"};let _=()=>{let a,n,r=(0,l.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(u,{gap:12,children:[e("span",{className:"sb-annotation",children:"Date range"}),e(d,{readOnly:!0,defaultValue:f,"data-testid":"date-range-input-read-only"})]}),r[0]=a):a=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(s,{gap:24,children:[a,t(u,{gap:12,children:[e("span",{className:"sb-annotation",children:"Date + time range"}),e(d,{readOnly:!0,granularity:"minute",defaultValue:h,"data-testid":"date-range-input-read-only-datetime"})]})]}),r[1]=n):n=r[1],n};_.parameters={layout:"padded"};var w=a("C");let S=[{name:"Basic",story:y,meta:p},{name:"WithIcon",story:()=>{let a,n,r=(0,l.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(u,{gap:12,children:[e("span",{className:"sb-annotation",children:"Without icon"}),e(d,{showIcon:!1,defaultValue:m})]}),r[0]=a):a=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(s,{gap:24,children:[a,t(u,{gap:12,children:[e("span",{className:"sb-annotation",children:"With icon"}),e(d,{defaultValue:m})]})]}),r[1]=n):n=r[1],n},meta:p},{name:"States",story:()=>{let a,n,r,o=(0,l.c)(3);return o[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(u,{gap:12,children:[e("span",{className:"sb-annotation",children:"Default"}),e(d,{}),e(d,{defaultValue:f})]}),o[0]=a):a=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(u,{gap:12,children:[e("span",{className:"sb-annotation",children:"Disabled"}),e(d,{disabled:!0}),e(d,{disabled:!0,defaultValue:f})]}),o[1]=n):n=o[1],o[2]===Symbol.for("react.memo_cache_sentinel")?(r=t(s,{gap:24,children:[a,n,t(u,{gap:12,children:[e("span",{className:"sb-annotation",children:"Error"}),e(d,{error:!0}),e(d,{error:!0,defaultValue:f})]})]}),o[2]=r):r=o[2],r},meta:p},{name:"Sizes",story:()=>{let a,n,r,o,i,c,p=(0,l.c)(6);return p[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(u,{gap:4,children:[e("span",{className:"sb-annotation",children:"Default (36px)"}),e(d,{size:"default"})]}),p[0]=a):a=p[0],p[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(u,{gap:4,children:[e("span",{className:"sb-annotation",children:"Medium (32px)"}),e(d,{size:"medium"})]}),p[1]=n):n=p[1],p[2]===Symbol.for("react.memo_cache_sentinel")?(r=t(u,{gap:16,children:[a,n,t(u,{gap:4,children:[e("span",{className:"sb-annotation",children:"Small (24px)"}),e(d,{size:"small"})]})]}),p[2]=r):r=p[2],p[3]===Symbol.for("react.memo_cache_sentinel")?(o=t(u,{gap:4,children:[e("span",{className:"sb-annotation",children:"Default filled"}),e(d,{size:"default",defaultValue:f})]}),p[3]=o):o=p[3],p[4]===Symbol.for("react.memo_cache_sentinel")?(i=t(u,{gap:4,children:[e("span",{className:"sb-annotation",children:"Medium filled"}),e(d,{size:"medium",defaultValue:f})]}),p[4]=i):i=p[4],p[5]===Symbol.for("react.memo_cache_sentinel")?(c=t(s,{gap:24,children:[r,t(u,{gap:16,children:[o,i,t(u,{gap:4,children:[e("span",{className:"sb-annotation",children:"Small filled"}),e(d,{size:"small",defaultValue:f})]})]})]}),p[5]=c):c=p[5],c},meta:p},{name:"Filled",story:()=>{let a,n,r,o=(0,l.c)(3);return o[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(u,{gap:4,children:[e("span",{className:"sb-annotation",children:"Date range"}),e(d,{defaultValue:f,"data-testid":"date-range-input-filled"})]}),o[0]=a):a=o[0],o[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(c,{order:"day-first",hourCycle:24,children:t(u,{gap:4,children:[e("span",{className:"sb-annotation",children:"Date + time range (24h)"}),e(d,{granularity:"minute",defaultValue:h})]})}),o[1]=n):n=o[1],o[2]===Symbol.for("react.memo_cache_sentinel")?(r=t(u,{gap:16,children:[a,n,t(u,{gap:4,children:[e("span",{className:"sb-annotation",children:"Without icon"}),e(d,{showIcon:!1,defaultValue:f})]})]}),o[2]=r):r=o[2],r},meta:p},{name:"Granularity",story:()=>{let a,n,r=(0,l.c)(2);return r[0]===Symbol.for("react.memo_cache_sentinel")?(a=e(c,{order:"day-first",hourCycle:12,children:t(u,{gap:12,children:[e("span",{className:"sb-annotation",children:"12-hour format"}),e(d,{placeholder:"day",granularity:"day"}),e(d,{placeholder:"hour",granularity:"hour"}),e(d,{placeholder:"minute",granularity:"minute"}),e(d,{placeholder:"second",granularity:"second"})]})}),r[0]=a):a=r[0],r[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(s,{gap:24,children:[a,e(c,{order:"day-first",hourCycle:24,children:t(u,{gap:12,children:[e("span",{className:"sb-annotation",children:"24-hour format"}),e(d,{placeholder:"day",granularity:"day"}),e(d,{placeholder:"hour",granularity:"hour"}),e(d,{placeholder:"minute",granularity:"minute"}),e(d,{placeholder:"second",granularity:"second"})]})})]}),r[1]=n):n=r[1],n},meta:p},{name:"DateOrderComparison",story:g,meta:p},{name:"HourCycleByContext",story:b,meta:p},{name:"ReadOnly",story:_,meta:p}];function N({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=()=>w.default.createElement(r,n),o={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,o)}return w.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},w.default.createElement("h2",{className:"text-sm mb-12"},e.name),w.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(w.default.createElement(window.WallarmDS.Root,null,S.map((e,t)=>w.default.createElement(N,{key:t,entry:e})))),t}}})();