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

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

@@ -0,0 +1,315 @@
+Prints a timestamp the way the house date guide says to: `relative` by default for anything recent, `date` when only the day matters, `datetime` when the exact moment does. Relative stops being relative as a date ages — past roughly five months it prints the day and month, past a year it adds the year — and it always carries the full absolute time, timezone included, in a tooltip.
+
+## 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 |
+| --- | --- | --- | --- | --- |
+| `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 | — |  |
+| `value` | `string \| number \| Date \| null \| undefined` | yes | — | ISO string, Date object, or Unix timestamp (ms) |
+| `format` | `FormatDateTimeFormat \| undefined` | no | `relative` | Display format. Default: 'relative' |
+| `layout` | `FormatDateTimeLayout \| undefined` | no | `stacked` | Datetime layout. `stacked` puts date over time; `inline` puts them on one line. Only affects `format='datetime'`. Default: 'stacked' |
+| `show-seconds` | `boolean \| undefined` | no | `true` | Show seconds in the relative-format tooltip. Default: true |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Stories
+
+### Relative
+
+The whole ladder in one frame, from `Just now` up to the age where it gives up and
+prints a date instead. The dashed underline is the cue that the precise value is one
+hover away.
+
+Source: FormatDateTime/FormatDateTime.stories.tsx#Relative
+
+### DateFormat
+
+`format='date'` drops the time — and drops the year too when the date falls in the
+current one, which is why only the 2025 row carries it.
+
+Source: FormatDateTime/FormatDateTime.stories.tsx#DateFormat
+
+### DatetimeFormat
+
+`format='datetime'` shows both, the time in secondary type with its timezone, and no
+tooltip: there is nothing left to reveal.
+
+Source: FormatDateTime/FormatDateTime.stories.tsx#DatetimeFormat
+
+### DatetimeLayout
+
+`stacked` is the default and the table-cell shape; `inline` puts date and time on one
+baseline for a row that cannot grow to two lines.
+
+Source: FormatDateTime/FormatDateTime.stories.tsx#DatetimeLayout
+
+### WithDescription
+
+When, and then who or what — the second line is composed from `Text` rather than being
+a prop, so it can say anything the row needs.
+
+Source: FormatDateTime/FormatDateTime.stories.tsx#WithDescription
+
+### NullValue
+
+`null` and `undefined` both come out as an em dash rather than an empty cell, with 'No
+data' behind it on hover.
+
+Source: FormatDateTime/FormatDateTime.stories.tsx#NullValue
+
+### FutureDate
+
+A timestamp five minutes ahead reads `Just now` rather than counting forwards — the
+component absorbs clock skew between a browser and a server instead of showing it.
+
+Source: FormatDateTime/FormatDateTime.stories.tsx#FutureDate
+
+### DateOrderAndHourCycle
+
+The component respects the app's date order from `DateFormatProvider`. Day-first (the
+default) prints "11 Feb, 2026"; month-first prints "Feb 11, 2026". Both hour cycles
+are shown: 24-hour and 12-hour with AM/PM.
+
+Source: FormatDateTime/FormatDateTime.stories.tsx#DateOrderAndHourCycle
+
+## Story sources
+
+### FormatDateTime/FormatDateTime.stories.tsx
+
+```tsx
+import { subDays, subHours, subMinutes, subMonths, subSeconds, subYears } from 'date-fns';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { DateFormatProvider } from '../DateFormatProvider';
+import { HStack, VStack } from '../Stack';
+import { Text } from '../Text';
+import { FormatDateTime } from './FormatDateTime';
+
+const DESCRIPTION = [
+  'Prints a timestamp the way the house date guide says to: `relative` by default for anything recent, `date` when only the day matters, `datetime` when the exact moment does.',
+  'Relative stops being relative as a date ages — past roughly five months it prints the day and month, past a year it adds the year — and it always carries the full absolute time, timezone included, in a tooltip.',
+].join(' ');
+
+const meta = {
+  title: 'Data Display/FormatDateTime',
+  component: FormatDateTime,
+  parameters: {
+    layout: 'centered',
+    docs: { description: { component: DESCRIPTION } },
+  },
+  argTypes: {
+    format: {
+      control: 'select',
+      options: ['relative', 'date', 'datetime'],
+    },
+    layout: {
+      control: 'radio',
+      options: ['stacked', 'inline'],
+    },
+    showSeconds: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    value: new Date().toISOString(),
+    format: 'relative',
+    layout: 'stacked',
+    showSeconds: true,
+  },
+} satisfies Meta<typeof FormatDateTime>;
+
+export default meta;
+
+const now = new Date();
+
+/**
+ * The whole ladder in one frame, from `Just now` up to the age where it gives up and
+ * prints a date instead. The dashed underline is the cue that the precise value is one
+ * hover away.
+ */
+export const Relative: StoryFn<typeof meta> = () => (
+  <VStack gap={12} align='start'>
+    <HStack gap={16} align='center'>
+      <span className='sb-annotation w-128'>Just now</span>
+      <FormatDateTime value={subSeconds(now, 10)} format='relative' />
+    </HStack>
+    <HStack gap={16} align='center'>
+      <span className='sb-annotation w-128'>Minutes ago</span>
+      <FormatDateTime value={subMinutes(now, 12)} format='relative' />
+    </HStack>
+    <HStack gap={16} align='center'>
+      <span className='sb-annotation w-128'>Hours ago</span>
+      <FormatDateTime value={subHours(now, 3)} format='relative' />
+    </HStack>
+    <HStack gap={16} align='center'>
+      <span className='sb-annotation w-128'>Yesterday</span>
+      <FormatDateTime value={subHours(now, 30)} format='relative' />
+    </HStack>
+    <HStack gap={16} align='center'>
+      <span className='sb-annotation w-128'>Days ago</span>
+      <FormatDateTime value={subDays(now, 5)} format='relative' />
+    </HStack>
+    <HStack gap={16} align='center'>
+      <span className='sb-annotation w-128'>Weeks ago</span>
+      <FormatDateTime value={subDays(now, 21)} format='relative' />
+    </HStack>
+    <HStack gap={16} align='center'>
+      <span className='sb-annotation w-128'>Months ago</span>
+      <FormatDateTime value={subMonths(now, 3)} format='relative' />
+    </HStack>
+    <HStack gap={16} align='center'>
+      <span className='sb-annotation w-128'>Short date</span>
+      <FormatDateTime value={subDays(now, 200)} format='relative' />
+    </HStack>
+    <HStack gap={16} align='center'>
+      <span className='sb-annotation w-128'>Full date</span>
+      <FormatDateTime value={subYears(now, 2)} format='relative' />
+    </HStack>
+  </VStack>
+);
+
+/**
+ * `format='date'` drops the time — and drops the year too when the date falls in the
+ * current one, which is why only the 2025 row carries it.
+ */
+export const DateFormat: StoryFn<typeof meta> = () => (
+  <VStack gap={12} align='start'>
+    <FormatDateTime value='2026-01-01T00:00:00' format='date' />
+    <FormatDateTime value='2026-02-11T14:32:07' format='date' />
+    <FormatDateTime value='2025-06-15T09:00:00' format='date' />
+  </VStack>
+);
+
+/**
+ * `format='datetime'` shows both, the time in secondary type with its timezone, and no
+ * tooltip: there is nothing left to reveal.
+ */
+export const DatetimeFormat: StoryFn<typeof meta> = () => (
+  <VStack gap={12} align='start'>
+    <FormatDateTime value='2026-01-01T11:00:00' format='datetime' />
+    <FormatDateTime value='2026-02-11T14:32:07' format='datetime' />
+    <FormatDateTime value='2025-12-25T23:59:59' format='datetime' />
+  </VStack>
+);
+
+/**
+ * `stacked` is the default and the table-cell shape; `inline` puts date and time on one
+ * baseline for a row that cannot grow to two lines.
+ */
+export const DatetimeLayout: StoryFn<typeof meta> = () => (
+  <HStack gap={64} align='start'>
+    <VStack gap={12} align='start'>
+      <span className='sb-annotation'>Stacked (default)</span>
+      <FormatDateTime value='2026-01-01T11:00:00' format='datetime' layout='stacked' />
+      <FormatDateTime value='2026-02-11T14:32:07' format='datetime' layout='stacked' />
+      <FormatDateTime value='2025-12-25T23:59:59' format='datetime' layout='stacked' />
+    </VStack>
+    <VStack gap={12} align='start'>
+      <span className='sb-annotation'>Inline</span>
+      <FormatDateTime value='2026-01-01T11:00:00' format='datetime' layout='inline' />
+      <FormatDateTime value='2026-02-11T14:32:07' format='datetime' layout='inline' />
+      <FormatDateTime value='2025-12-25T23:59:59' format='datetime' layout='inline' />
+    </VStack>
+  </HStack>
+);
+
+/**
+ * When, and then who or what — the second line is composed from `Text` rather than being
+ * a prop, so it can say anything the row needs.
+ */
+export const WithDescription: StoryFn<typeof meta> = () => (
+  <VStack gap={12} align='start'>
+    <VStack gap={2}>
+      <FormatDateTime value='2026-01-01T00:00:00' format='date' />
+      <Text size='sm' color='secondary'>
+        Created by admin
+      </Text>
+    </VStack>
+    <VStack gap={2}>
+      <FormatDateTime value='2026-02-11T14:32:07' format='date' />
+      <Text size='sm' color='secondary'>
+        Last modified
+      </Text>
+    </VStack>
+  </VStack>
+);
+
+/**
+ * `null` and `undefined` both come out as an em dash rather than an empty cell, with 'No
+ * data' behind it on hover.
+ */
+export const NullValue: StoryFn<typeof meta> = () => (
+  <VStack gap={12} align='start'>
+    <FormatDateTime value={null} />
+    <FormatDateTime value={undefined} />
+  </VStack>
+);
+
+/**
+ * A timestamp five minutes ahead reads `Just now` rather than counting forwards — the
+ * component absorbs clock skew between a browser and a server instead of showing it.
+ */
+export const FutureDate: StoryFn<typeof meta> = () => (
+  <FormatDateTime value={new Date(Date.now() + 5 * 60 * 1000)} format='relative' />
+);
+
+/**
+ * The component respects the app's date order from `DateFormatProvider`. Day-first (the
+ * default) prints "11 Feb, 2026"; month-first prints "Feb 11, 2026". Both hour cycles
+ * are shown: 24-hour and 12-hour with AM/PM.
+ */
+export const DateOrderAndHourCycle: StoryFn<typeof meta> = () => (
+  <VStack gap={24} align='start'>
+    <VStack gap={12} align='start'>
+      <span className='sb-annotation'>Day-first, 24-hour (default)</span>
+      <DateFormatProvider order='day-first' hourCycle={24}>
+        <VStack gap={8} align='start'>
+          <FormatDateTime value='2026-02-11T14:32:07' format='date' />
+          <FormatDateTime value='2026-02-11T14:32:07' format='datetime' />
+          <FormatDateTime value={subDays(now, 200)} format='relative' />
+        </VStack>
+      </DateFormatProvider>
+    </VStack>
+
+    <VStack gap={12} align='start'>
+      <span className='sb-annotation'>Month-first, 12-hour</span>
+      <DateFormatProvider order='month-first' hourCycle={12}>
+        <VStack gap={8} align='start'>
+          <FormatDateTime value='2026-02-11T14:32:07' format='date' />
+          <FormatDateTime value='2026-02-11T14:32:07' format='datetime' />
+          <FormatDateTime value={subDays(now, 200)} format='relative' />
+        </VStack>
+      </DateFormatProvider>
+    </VStack>
+
+    <VStack gap={12} align='start'>
+      <span className='sb-annotation'>Day-first, 12-hour</span>
+      <DateFormatProvider order='day-first' hourCycle={12}>
+        <VStack gap={8} align='start'>
+          <FormatDateTime value='2026-02-11T14:32:07' format='date' />
+          <FormatDateTime value='2026-02-11T14:32:07' format='datetime' />
+          <FormatDateTime value={subDays(now, 200)} format='relative' />
+        </VStack>
+      </DateFormatProvider>
+    </VStack>
+
+    <VStack gap={12} align='start'>
+      <span className='sb-annotation'>Month-first, 24-hour</span>
+      <DateFormatProvider order='month-first' hourCycle={24}>
+        <VStack gap={8} align='start'>
+          <FormatDateTime value='2026-02-11T14:32:07' format='date' />
+          <FormatDateTime value='2026-02-11T14:32:07' format='datetime' />
+          <FormatDateTime value={subDays(now, 200)} format='relative' />
+        </VStack>
+      </DateFormatProvider>
+    </VStack>
+  </VStack>
+);
+```

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

@@ -0,0 +1,12 @@
+var e={vD(e,t,a){let r,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 o,l,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,m=Object.getOwnPropertyNames,u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,d=(e,t,a,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let n of m(t))f.call(e,n)||n===a||c(e,n,{get:()=>t[n],enumerable:!(r=s(t,n))||r.enumerable});return e},p={},h={$dispatcherGuard:()=>T,$makeReadOnly:()=>M,$reset:()=>C,$structuralCheck:()=>I,c:()=>N,clearRenderCounterRegistry:()=>O,renderCounterRegistry:()=>k,useRenderCounter:()=>j};for(var y in h)c(p,y,{get:h[y],enumerable:!0});e.exports=d(c({},"__esModule",{value:!0}),p);var g=(n=null!=(r=a("C"))?i(u(r)):{},d(r&&r.__esModule?n:c(n,"default",{value:r,enumerable:!0}),r)),{useRef:_,useEffect:v,isValidElement:b}=g,S=null!=(o=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,w=Symbol.for("react.memo_cache_sentinel"),N="function"==typeof(null==(l=g.__COMPILER_RUNTIME)?void 0:l.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let a=0;a<e;a++)t[a]=w;return t[w]=!0,t},[])},R={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{R[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}R.useMemoCache=e=>{if(null!=E)return E.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var D=[];function T(e){let t=S.ReactCurrentDispatcher.current;if(0===e){if(D.push(t),1===D.length&&(E=t),t===R)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");$(R)}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 C(e){for(let t=0;t<e.length;t++)e[t]=w}function M(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var k=new Map;function O(){for(let e of k.values())e.forEach(e=>{e.count=0})}function j(e){let t=_(null);null!=t.current&&(t.current.count+=1),v(()=>{if(null==t.current){let a,r={count:0};null==(a=k.get(e))&&(a=new Set,k.set(e,a)),a.add(r),t.current=r}return()=>{var a;let r;null!==t.current&&(a=t.current,null!=(r=k.get(e))&&r.delete(a))}})}var x=new Set;function I(e,t,a,r,n,o){function l(e,t,l,i){let c=`${r}:${o} [${n}] ${a}${l} changed from ${e} to ${t} at depth ${i}`;x.has(c)||(x.add(c),console.error(c))}!function e(t,a,r,n){if(!(n>2)){if(t!==a)if(typeof t!=typeof a)l(`type ${typeof t}`,`type ${typeof a}`,r,n);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(a);if(null===t&&null!==a)l("null",`type ${typeof a}`,r,n);else if(null===a)l(`type ${typeof t}`,"null",r,n);else if(t instanceof Map)if(a instanceof Map)if(t.size!==a.size)l(`Map instance with size ${t.size}`,`Map instance with size ${a.size}`,r,n);else for(let[o,i]of t)a.has(o)?e(i,a.get(o),`${r}.get(${o})`,n+1):l(`Map instance with key ${o}`,`Map instance without key ${o}`,r,n);else l("Map instance","other value",r,n);else if(a instanceof Map)l("other value","Map instance",r,n);else if(t instanceof Set)if(a instanceof Set)if(t.size!==a.size)l(`Set instance with size ${t.size}`,`Set instance with size ${a.size}`,r,n);else for(let e of a)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,r,n);else l("Set instance","other value",r,n);else if(a instanceof Set)l("other value","Set instance",r,n);else if(o||i)if(o!==i)l(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,r,n);else if(t.length!==a.length)l(`array with length ${t.length}`,`array with length ${a.length}`,r,n);else for(let o=0;o<t.length;o++)e(t[o],a[o],`${r}[${o}]`,n+1);else if(b(t)||b(a))b(t)!==b(a)?l(`type ${b(t)?"React element":"object"}`,`type ${b(a)?"React element":"object"}`,r,n):t.type!==a.type?l(`React element of type ${t.type}`,`React element of type ${a.type}`,r,n):e(t.props,a.props,`[props of ${r}]`,n+1);else{for(let e in a)e in t||l(`object without key ${e}`,`object with key ${e}`,r,n);for(let o in t)o in a?e(t[o],a[o],`${r}.${o}`,n+1):l(`object with key ${o}`,`object without key ${o}`,r,n)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(a)?isNaN(t)!==isNaN(a)&&l(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(a)?"NaN":"non-NaN value"}`,r,n):t!==a&&l(t,a,r,n)}}}(e,t,"",0)}},p(e,t,a){let r=new WeakMap,n=new WeakMap;function o(e,t,a){let o=t,l=a;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,a=r.get(e);a||(a=new WeakMap,r.set(e,a));let n=a.get(t);n||((n=e.forwardRef((e,a)=>t({...e,ref:a}))).displayName=t.displayName??t.name,a.set(t,n)),o=n}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 a=n.get(e);a||(a=new Map,n.set(e,a));let r=a.get(t);if(r)return r;let o=e.forwardRef((a,r)=>{let n=e.useRef(null);if(!n.current||n.current.original!==r){let e;n.current={original:r,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof r){let a=r(t);e="function"==typeof a?a:void 0}else r&&(r.current=t)}}}return e.createElement(t,{...a,ref:n.current.callback})});return o.displayName=`CanvasHost(${t})`,a.set(t,o),o}(e,o)),{type:o,props:l}}function l(e){let t=(t,a,r)=>{let n=o(e,t,a??{});return e.createElement(n.type,void 0===r?n.props:{...n.props,key:r})};return{jsx:t,jsxs:(t,a,r)=>{let n=o(e,t,a??{}),{children:l,...i}=n.props;return e.createElement(n.type,void 0===r?i:{...i,key:r},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,a,...r)=>{let n=o(e,t,a??{});return e.createElement(n.type,n.props,...r)},cloneElement:(t,a,...r)=>{let n=e.cloneElement(t,a??void 0,...r),l=n.ref,i=o(e,n.type,{...n.props,ref:l});return i.type===n.type&&"string"!=typeof n.type?n:e.createElement(i.type,{...i.props,key:n.key})}}}a.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,a){a.r(t);let r=(0,a("p").YJ)(window.React),{Children:n,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:f,cloneElement:d,createContext:p,createElement:h,createFactory:y,createRef:g,forwardRef:_,isValidElement:v,lazy:b,memo:S,startTransition:w,unstable_act:N,useCallback:R,useContext:E,useDebugValue:$,useDeferredValue:D,useEffect:T,useId:C,useImperativeHandle:M,useInsertionEffect:k,useLayoutEffect:O,useMemo:j,useReducer:x,useRef:I,useState:P,useSyncExternalStore:A,useTransition:F,version:z,use:W}=r;a.d(t,{},{Children:n,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:f,cloneElement:d,createContext:p,createElement:h,createFactory:y,createRef:g,default:r,forwardRef:_,isValidElement:v,lazy:b,memo:S,startTransition:w,unstable_act:N,use:W,useCallback:R,useContext:E,useDebugValue:$,useDeferredValue:D,useEffect:T,useId:C,useImperativeHandle:M,useInsertionEffect:k,useLayoutEffect:O,useMemo:j,useReducer:x,useRef:I,useState:P,useSyncExternalStore:A,useTransition:F,version:z})}},t={};function a(r){var n=t[r];if(void 0!==n)return n.exports;var o=t[r]={exports:{}};return e[r](o,o.exports,a),o.exports}a.d=(e,t,r)=>{var n=(t,r)=>{for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,[r]:t[n]})};n(t,"get"),n(r,"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:r,Fragment:n}=(0,a("p").MA)(window.React);var o=a("vD");let l=Symbol.for("constructDateFrom");function i(e,t){return"function"==typeof e?e(t):e&&"object"==typeof e&&l in e?e[l](t):e instanceof Date?new e.constructor(t):new Date(t)}function c(e,t,a){return i(a?.in||e,+i(e,e)+t)}function s(e,t,a){return c(e,-(36e5*t),a)}function m(e,t,a){var r;let n;return r=-t,n=i(a?.in||e,e),isNaN(r)?i(a?.in||e,0/0):(r&&n.setDate(n.getDate()+r),n)}function u(e,t,a){let r=i(a?.in||e,e);if(isNaN(t))return i(a?.in||e,0/0);if(!t)return r;let n=r.getDate(),o=i(a?.in||e,r.getTime());return(o.setMonth(r.getMonth()+t+1,0),n>=o.getDate())?o:(r.setFullYear(o.getFullYear(),o.getMonth(),n),r)}let f=window.WallarmDS.DateFormatProvider,d=window.WallarmDS.HStack,p=window.WallarmDS.VStack,h=window.WallarmDS.Text,y=window.WallarmDS.FormatDateTime,g={title:"Data Display/FormatDateTime",component:y,parameters:{layout:"centered",docs:{description:{component:"Prints a timestamp the way the house date guide says to: `relative` by default for anything recent, `date` when only the day matters, `datetime` when the exact moment does. Relative stops being relative as a date ages — past roughly five months it prints the day and month, past a year it adds the year — and it always carries the full absolute time, timezone included, in a tooltip."}}},argTypes:{format:{control:"select",options:["relative","date","datetime"]},layout:{control:"radio",options:["stacked","inline"]},showSeconds:{control:"boolean"}},args:{value:new Date().toISOString(),format:"relative",layout:"stacked",showSeconds:!0}},_=new Date;var v=a("C");let b=[{name:"Relative",story:()=>{let a,r,n,l,f,h,g,v,b,S,w,N,R,E,$,D,T,C,M=(0,o.c)(18);if(M[0]===Symbol.for("react.memo_cache_sentinel")?(a=e("span",{className:"sb-annotation w-128",children:"Just now"}),M[0]=a):a=M[0],M[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(d,{gap:16,align:"center",children:[a,e(y,{value:c(_,-1e4,void 0),format:"relative"})]}),M[1]=r):r=M[1],M[2]===Symbol.for("react.memo_cache_sentinel")?(n=e("span",{className:"sb-annotation w-128",children:"Minutes ago"}),M[2]=n):n=M[2],M[3]===Symbol.for("react.memo_cache_sentinel")){var k;let a;l=t(d,{gap:16,align:"center",children:[n,e(y,{value:(k=void 0,(a=i(k?.in||_,_)).setTime(a.getTime()+-72e4),a),format:"relative"})]}),M[3]=l}else l=M[3];return(M[4]===Symbol.for("react.memo_cache_sentinel")?(f=e("span",{className:"sb-annotation w-128",children:"Hours ago"}),M[4]=f):f=M[4],M[5]===Symbol.for("react.memo_cache_sentinel")?(h=t(d,{gap:16,align:"center",children:[f,e(y,{value:s(_,3),format:"relative"})]}),M[5]=h):h=M[5],M[6]===Symbol.for("react.memo_cache_sentinel")?(g=e("span",{className:"sb-annotation w-128",children:"Yesterday"}),M[6]=g):g=M[6],M[7]===Symbol.for("react.memo_cache_sentinel")?(v=t(d,{gap:16,align:"center",children:[g,e(y,{value:s(_,30),format:"relative"})]}),M[7]=v):v=M[7],M[8]===Symbol.for("react.memo_cache_sentinel")?(b=e("span",{className:"sb-annotation w-128",children:"Days ago"}),M[8]=b):b=M[8],M[9]===Symbol.for("react.memo_cache_sentinel")?(S=t(d,{gap:16,align:"center",children:[b,e(y,{value:m(_,5),format:"relative"})]}),M[9]=S):S=M[9],M[10]===Symbol.for("react.memo_cache_sentinel")?(w=e("span",{className:"sb-annotation w-128",children:"Weeks ago"}),M[10]=w):w=M[10],M[11]===Symbol.for("react.memo_cache_sentinel")?(N=t(d,{gap:16,align:"center",children:[w,e(y,{value:m(_,21),format:"relative"})]}),M[11]=N):N=M[11],M[12]===Symbol.for("react.memo_cache_sentinel")?(R=e("span",{className:"sb-annotation w-128",children:"Months ago"}),M[12]=R):R=M[12],M[13]===Symbol.for("react.memo_cache_sentinel"))?(E=t(d,{gap:16,align:"center",children:[R,e(y,{value:u(_,-3,void 0),format:"relative"})]}),M[13]=E):E=M[13],M[14]===Symbol.for("react.memo_cache_sentinel")?($=e("span",{className:"sb-annotation w-128",children:"Short date"}),M[14]=$):$=M[14],M[15]===Symbol.for("react.memo_cache_sentinel")?(D=t(d,{gap:16,align:"center",children:[$,e(y,{value:m(_,200),format:"relative"})]}),M[15]=D):D=M[15],M[16]===Symbol.for("react.memo_cache_sentinel")?(T=e("span",{className:"sb-annotation w-128",children:"Full date"}),M[16]=T):T=M[16],M[17]===Symbol.for("react.memo_cache_sentinel")?(C=t(p,{gap:12,align:"start",children:[r,l,h,v,S,N,E,D,t(d,{gap:16,align:"center",children:[T,e(y,{value:u(_,-24,void 0),format:"relative"})]})]}),M[17]=C):C=M[17],C},meta:g},{name:"DateFormat",story:()=>{let a,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(p,{gap:12,align:"start",children:[e(y,{value:"2026-01-01T00:00:00",format:"date"}),e(y,{value:"2026-02-11T14:32:07",format:"date"}),e(y,{value:"2025-06-15T09:00:00",format:"date"})]}),r[0]=a):a=r[0],a},meta:g},{name:"DatetimeFormat",story:()=>{let a,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(p,{gap:12,align:"start",children:[e(y,{value:"2026-01-01T11:00:00",format:"datetime"}),e(y,{value:"2026-02-11T14:32:07",format:"datetime"}),e(y,{value:"2025-12-25T23:59:59",format:"datetime"})]}),r[0]=a):a=r[0],a},meta:g},{name:"DatetimeLayout",story:()=>{let a,r,n=(0,o.c)(2);return n[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(p,{gap:12,align:"start",children:[e("span",{className:"sb-annotation",children:"Stacked (default)"}),e(y,{value:"2026-01-01T11:00:00",format:"datetime",layout:"stacked"}),e(y,{value:"2026-02-11T14:32:07",format:"datetime",layout:"stacked"}),e(y,{value:"2025-12-25T23:59:59",format:"datetime",layout:"stacked"})]}),n[0]=a):a=n[0],n[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(d,{gap:64,align:"start",children:[a,t(p,{gap:12,align:"start",children:[e("span",{className:"sb-annotation",children:"Inline"}),e(y,{value:"2026-01-01T11:00:00",format:"datetime",layout:"inline"}),e(y,{value:"2026-02-11T14:32:07",format:"datetime",layout:"inline"}),e(y,{value:"2025-12-25T23:59:59",format:"datetime",layout:"inline"})]})]}),n[1]=r):r=n[1],r},meta:g},{name:"WithDescription",story:()=>{let a,r,n=(0,o.c)(2);return n[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(p,{gap:2,children:[e(y,{value:"2026-01-01T00:00:00",format:"date"}),e(h,{size:"sm",color:"secondary",children:"Created by admin"})]}),n[0]=a):a=n[0],n[1]===Symbol.for("react.memo_cache_sentinel")?(r=t(p,{gap:12,align:"start",children:[a,t(p,{gap:2,children:[e(y,{value:"2026-02-11T14:32:07",format:"date"}),e(h,{size:"sm",color:"secondary",children:"Last modified"})]})]}),n[1]=r):r=n[1],r},meta:g},{name:"NullValue",story:()=>{let a,r=(0,o.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(a=t(p,{gap:12,align:"start",children:[e(y,{value:null}),e(y,{value:void 0})]}),r[0]=a):a=r[0],a},meta:g},{name:"FutureDate",story:()=>{let t,a=(0,o.c)(1);return a[0]===Symbol.for("react.memo_cache_sentinel")?(t=e(y,{value:new Date(Date.now()+3e5),format:"relative"}),a[0]=t):t=a[0],t},meta:g},{name:"DateOrderAndHourCycle",story:()=>{let a,r,n,l,i,c,s,u,d,h,g,v,b,S,w,N,R=(0,o.c)(16);return R[0]===Symbol.for("react.memo_cache_sentinel")?(a=e("span",{className:"sb-annotation",children:"Day-first, 24-hour (default)"}),R[0]=a):a=R[0],R[1]===Symbol.for("react.memo_cache_sentinel")?(r=e(y,{value:"2026-02-11T14:32:07",format:"date"}),n=e(y,{value:"2026-02-11T14:32:07",format:"datetime"}),R[1]=r,R[2]=n):(r=R[1],n=R[2]),R[3]===Symbol.for("react.memo_cache_sentinel")?(l=t(p,{gap:12,align:"start",children:[a,e(f,{order:"day-first",hourCycle:24,children:t(p,{gap:8,align:"start",children:[r,n,e(y,{value:m(_,200),format:"relative"})]})})]}),R[3]=l):l=R[3],R[4]===Symbol.for("react.memo_cache_sentinel")?(i=e("span",{className:"sb-annotation",children:"Month-first, 12-hour"}),R[4]=i):i=R[4],R[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(y,{value:"2026-02-11T14:32:07",format:"date"}),s=e(y,{value:"2026-02-11T14:32:07",format:"datetime"}),R[5]=c,R[6]=s):(c=R[5],s=R[6]),R[7]===Symbol.for("react.memo_cache_sentinel")?(u=t(p,{gap:12,align:"start",children:[i,e(f,{order:"month-first",hourCycle:12,children:t(p,{gap:8,align:"start",children:[c,s,e(y,{value:m(_,200),format:"relative"})]})})]}),R[7]=u):u=R[7],R[8]===Symbol.for("react.memo_cache_sentinel")?(d=e("span",{className:"sb-annotation",children:"Day-first, 12-hour"}),R[8]=d):d=R[8],R[9]===Symbol.for("react.memo_cache_sentinel")?(g=e(y,{value:"2026-02-11T14:32:07",format:"date"}),h=e(y,{value:"2026-02-11T14:32:07",format:"datetime"}),R[9]=h,R[10]=g):(h=R[9],g=R[10]),R[11]===Symbol.for("react.memo_cache_sentinel")?(v=t(p,{gap:12,align:"start",children:[d,e(f,{order:"day-first",hourCycle:12,children:t(p,{gap:8,align:"start",children:[g,h,e(y,{value:m(_,200),format:"relative"})]})})]}),R[11]=v):v=R[11],R[12]===Symbol.for("react.memo_cache_sentinel")?(b=e("span",{className:"sb-annotation",children:"Month-first, 24-hour"}),R[12]=b):b=R[12],R[13]===Symbol.for("react.memo_cache_sentinel")?(S=e(y,{value:"2026-02-11T14:32:07",format:"date"}),w=e(y,{value:"2026-02-11T14:32:07",format:"datetime"}),R[13]=S,R[14]=w):(S=R[13],w=R[14]),R[15]===Symbol.for("react.memo_cache_sentinel")?(N=t(p,{gap:24,align:"start",children:[l,u,v,t(p,{gap:12,align:"start",children:[b,e(f,{order:"month-first",hourCycle:24,children:t(p,{gap:8,align:"start",children:[S,w,e(y,{value:m(_,200),format:"relative"})]})})]})]}),R[15]=N):N=R[15],N},meta:g}];function S({entry:e}){let{story:t,meta:a}=e,r={...a.args,...t.args},n="function"==typeof t||t.$$typeof?t:t.render||a.render||a.component,o=()=>v.default.createElement(n,r),l={args:r,globals:{theme:"light"},parameters:{...a.parameters,...t.parameters},viewMode:"story"};for(let e of[...a.decorators||[],...t.decorators||[]].reverse()){let t=o;o=()=>e(t,l)}return v.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},v.default.createElement("h2",{className:"text-sm mb-12"},e.name),v.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(v.default.createElement(window.WallarmDS.Root,null,b.map((e,t)=>v.default.createElement(S,{key:t,entry:e})))),t}}})();