@exsto/ds 0.0.1-rc.13 → 0.0.1-rc.14

package/dist/source-hash.txt

@@ -1 +1 @@
-baf2d34d8256d4f9ca45b9a3adab201d955f45d438dc72f74b30fcf41b3dbd6f
+2504fece68d0bff41b5b90bc32becc10bb88aa3a7ffe2fd419071268e0915306

package/dist/styles.css

@@ -2975,14 +2975,6 @@
     color: var(--accent-foreground);
   }
 
-  .group-has-disabled\/field\:pointer-events-none:is(:where(.group\/field):has(:disabled) *) {
-    pointer-events: none;
-  }
-
-  .group-has-disabled\/field\:opacity-50:is(:where(.group\/field):has(:disabled) *) {
-    opacity: .5;
-  }
-
   .group-has-data-\[sidebar\=menu-action\]\/menu-item\:pr-8:is(:where(.group\/menu-item):has([data-sidebar="menu-action"]) *) {
     padding-right: calc(var(--spacing) * 8);
   }
@@ -5810,16 +5802,6 @@
     }
   }
 
-  .dark\:bg-destructive\/20:is(.dark *) {
-    background-color: var(--destructive);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-destructive\/20:is(.dark *) {
-      background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
-    }
-  }
-
   .dark\:bg-info-ring\/30:is(.dark *) {
     background-color: var(--info-ring);
   }
@@ -6326,6 +6308,10 @@
     }
   }
 
+  .data-disabled\:text-muted-foreground:where([data-disabled="true"]), .data-disabled\:text-muted-foreground:where([data-disabled]:not([data-disabled="false"])) {
+    color: var(--muted-foreground);
+  }
+
   .data-disabled\:opacity-50:where([data-disabled="true"]), .data-disabled\:opacity-50:where([data-disabled]:not([data-disabled="false"])) {
     opacity: .5;
   }
@@ -7475,7 +7461,7 @@
   --muted-foreground: oklch(70.8% 0 0);
   --accent: oklch(26.9% 0 0);
   --accent-foreground: oklch(98.5% 0 0);
-  --destructive: oklch(70.4% .191 22.216);
+  --destructive: oklch(76% .145 22.216);
   --destructive-foreground: oklch(98.5% 0 0);
   --success: oklch(79.2% .209 151.711);
   --success-foreground: oklch(26.2% .051 172.552);

package/dist/theme.css

@@ -183,7 +183,8 @@
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
 
-  --destructive: oklch(0.704 0.191 22.216);
+  /* Light enough that text in it, and the destructive Badge's text on its own tint, is 4.5:1 or more on the page, a card and a muted surface. */
+  --destructive: oklch(0.76 0.145 22.216);
   --destructive-foreground: oklch(0.985 0 0);
 
   --success: oklch(0.792 0.209 151.711);

package/dist/ui/src/components/edyn/animated-number/animated-number.js

@@ -0,0 +1,108 @@
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../ui/src/components/edyn/animated-number/animated-number.tsx
+var DURATION = 800;
+var easeInOutCubic = (t) => t < .5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2;
+var reducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+var NUMBER = new Intl.NumberFormat("en-GB");
+/** Thousands separated, rounded to a whole number: the default way a count reads. */
+var formatCount = (value) => NUMBER.format(Math.round(value) || 0);
+var useSeen = (element) => {
+	const [seen, setSeen] = useState(() => typeof IntersectionObserver === "undefined");
+	useEffect(() => {
+		const target = element.current;
+		if (seen || target === null) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) {
+				setSeen(true);
+				observer.disconnect();
+			}
+		});
+		observer.observe(target);
+		return () => observer.disconnect();
+	}, [element, seen]);
+	return seen;
+};
+/**
+* The values to show for `targets` this frame, all on one clock and one curve, so a
+* count and its bar move together. They start from 0 and move once `element` has
+* been on screen.
+*/
+var useAnimatedValues = (targets, element) => {
+	const seen = useSeen(element);
+	const [shown, setShown] = useState(() => targets.map(() => 0));
+	const refCurrent = useRef(shown);
+	const key = targets.join(",");
+	useEffect(() => {
+		if (!seen) return;
+		const goal = key.split(",").map(Number);
+		const from = goal.map((_, index) => refCurrent.current[index] ?? 0);
+		if (from.every((value, index) => value === goal[index])) return;
+		if (reducedMotion()) {
+			refCurrent.current = goal;
+			setShown(goal);
+			return;
+		}
+		const start = performance.now();
+		let frame = 0;
+		const tick = (now) => {
+			const progress = Math.min(1, (now - start) / DURATION);
+			const eased = easeInOutCubic(progress);
+			const next = progress === 1 ? goal : goal.map((value, index) => (from[index] ?? 0) + (value - (from[index] ?? 0)) * eased);
+			refCurrent.current = next;
+			setShown(next);
+			if (progress < 1) frame = requestAnimationFrame(tick);
+		};
+		frame = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(frame);
+	}, [key, seen]);
+	return shown;
+};
+/**
+* A number that moves to its new value. Its width holds the widest of where it starts
+* and where it lands, in tabular figures, so nothing beside it moves while the digits
+* change. Assistive technology reads only the final value.
+*/
+var AnimatedNumber = ({ value, format = formatCount, className, ...props }) => {
+	const refElement = useRef(null);
+	const [shown = 0] = useAnimatedValues([value], refElement);
+	return /* @__PURE__ */ jsx(NumberText, {
+		element: refElement,
+		shown,
+		value,
+		format,
+		className,
+		...props
+	});
+};
+/** The text of a moving number: what it shows now, held at its widest, with the final value for assistive technology. */
+var NumberText = ({ element, shown, value, format = formatCount, className, ...props }) => {
+	const now = format(shown);
+	const final = format(value);
+	const widest = now.length > final.length ? now : final;
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "animated-number",
+		...props,
+		ref: element,
+		className,
+		children: [/* @__PURE__ */ jsxs("span", {
+			"aria-hidden": "true",
+			className: "inline-grid tabular-nums",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-ghost": widest,
+				className: "invisible col-start-1 row-start-1 ghost-text"
+			}), /* @__PURE__ */ jsx("span", {
+				"data-slot": "animated-number-value",
+				className: "col-start-1 row-start-1",
+				children: now
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: final
+		})]
+	});
+};
+//#endregion
+export { AnimatedNumber, NumberText, formatCount, useAnimatedValues };
+
+//# sourceMappingURL=animated-number.js.map

package/dist/ui/src/components/edyn/animated-number/animated-number.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-number.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/animated-number/animated-number.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, type RefObject, useEffect, useRef, useState } from 'react';\n\n// Numbers that move instead of jumping when a tab or a filter changes them: from the\n// value shown to the new one over 800ms, easing in and out; the first time, from 0\n// once it scrolls into view. Interrupted by another change, it carries on from where\n// it is, never back. With reduced motion, or when the value has not changed (a refetch\n// with the same answer), nothing moves.\n\nconst DURATION = 800;\n\nconst easeInOutCubic = (t: number): number => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2);\n\nconst reducedMotion = (): boolean => window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nconst NUMBER = new Intl.NumberFormat('en-GB');\n\n/** Thousands separated, rounded to a whole number: the default way a count reads. */\nexport const formatCount = (value: number): string => NUMBER.format(Math.round(value) || 0);\n\n// Whether the element has been on screen yet; once it has, it stays counted as seen.\nconst useSeen = (element: RefObject<Element | null>): boolean => {\n  const [seen, setSeen] = useState(() => typeof IntersectionObserver === 'undefined');\n  useEffect(() => {\n    const target = element.current;\n    if (seen || target === null) {\n      return;\n    }\n    const observer = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setSeen(true);\n        observer.disconnect();\n      }\n    });\n    observer.observe(target);\n    return () => observer.disconnect();\n  }, [element, seen]);\n  return seen;\n};\n\n/**\n * The values to show for `targets` this frame, all on one clock and one curve, so a\n * count and its bar move together. They start from 0 and move once `element` has\n * been on screen.\n */\nexport const useAnimatedValues = (targets: number[], element: RefObject<Element | null>): number[] => {\n  const seen = useSeen(element);\n  const [shown, setShown] = useState<number[]>(() => targets.map(() => 0));\n  const refCurrent = useRef(shown);\n  const key = targets.join(',');\n  useEffect(() => {\n    if (!seen) {\n      return;\n    }\n    const goal = key.split(',').map(Number);\n    const from = goal.map((_, index) => refCurrent.current[index] ?? 0);\n    if (from.every((value, index) => value === goal[index])) {\n      return;\n    }\n    if (reducedMotion()) {\n      refCurrent.current = goal;\n      setShown(goal);\n      return;\n    }\n    const start = performance.now();\n    let frame = 0;\n    const tick = (now: number): void => {\n      const progress = Math.min(1, (now - start) / DURATION);\n      const eased = easeInOutCubic(progress);\n      // Exactly the goal at the end, never a float a hair beside it.\n      const next = progress === 1 ? goal : goal.map((value, index) => (from[index] ?? 0) + (value - (from[index] ?? 0)) * eased);\n      refCurrent.current = next;\n      setShown(next);\n      if (progress < 1) {\n        frame = requestAnimationFrame(tick);\n      }\n    };\n    frame = requestAnimationFrame(tick);\n    return () => cancelAnimationFrame(frame);\n  }, [key, seen]);\n  return shown;\n};\n\nexport interface IAnimatedNumberProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children' | 'className'> {\n  value: number;\n  /** What it shows while it moves and once there (formatCount by default; a percentage formatter for shares). */\n  format?: (value: number) => string;\n  className?: string;\n}\n\n/**\n * A number that moves to its new value. Its width holds the widest of where it starts\n * and where it lands, in tabular figures, so nothing beside it moves while the digits\n * change. Assistive technology reads only the final value.\n */\nexport const AnimatedNumber = ({ value, format = formatCount, className, ...props }: IAnimatedNumberProps) => {\n  const refElement = useRef<HTMLSpanElement>(null);\n  const [shown = 0] = useAnimatedValues([value], refElement);\n  return <NumberText element={refElement} shown={shown} value={value} format={format} className={className} {...props} />;\n};\n\nexport interface INumberTextProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children' | 'className'> {\n  element?: RefObject<HTMLSpanElement | null>;\n  shown: number;\n  value: number;\n  format?: (value: number) => string;\n  className?: string;\n}\n\n/** The text of a moving number: what it shows now, held at its widest, with the final value for assistive technology. */\nexport const NumberText = ({ element, shown, value, format = formatCount, className, ...props }: INumberTextProps) => {\n  const now = format(shown);\n  const final = format(value);\n  // The widest of the two, laid invisibly under the number: it holds the width of the\n  // real figures (tabular digits are not exactly 1ch), so the number grows or shrinks\n  // only once it has landed.\n  const widest = now.length > final.length ? now : final;\n  return (\n    <span data-slot=\"animated-number\" {...props} ref={element} className={className}>\n      <span aria-hidden=\"true\" className=\"inline-grid tabular-nums\">\n        <span data-ghost={widest} className=\"invisible col-start-1 row-start-1 ghost-text\" />\n        <span data-slot=\"animated-number-value\" className=\"col-start-1 row-start-1\">\n          {now}\n        </span>\n      </span>\n      <span className=\"sr-only\">{final}</span>\n    </span>\n  );\n};\n"],"mappings":"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"}

package/dist/ui/src/components/edyn/audio-player/audio-player.js

@@ -0,0 +1,86 @@
+import { cn, cssLength } from "../../../lib/utils.js";
+import { Button } from "../../ui/button/button.js";
+import { Slider } from "../../ui/slider/slider.js";
+import { formatMediaTime, useMediaPlayer } from "../../../hooks/use-media-player.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconPlayerPauseFilled, IconPlayerPlayFilled, IconVolume, IconVolumeOff } from "@tabler/icons-react";
+//#region ../ui/src/components/edyn/audio-player/audio-player.tsx
+/**
+* Compact inline media control for audio content: play/pause, elapsed and total
+* time, a seekable timeline, and volume. Four elements in one rounded row, per
+* the design-system anatomy.
+*/
+var AudioPlayer = ({ src, muted = false, loop = false, disabled = false, width, className, "aria-label": ariaLabel = "Audio player", style, onPlay, onPause, onEnded, onTimeUpdate, ...props }) => {
+	const { refMedia, playing, currentTime, duration, muted: isMuted, toggle, seek, toggleMute } = useMediaPlayer({
+		onPlay,
+		onPause,
+		onEnded,
+		onTimeUpdate
+	});
+	const PlaybackIcon = playing ? IconPlayerPauseFilled : IconPlayerPlayFilled;
+	const VolumeIcon = isMuted ? IconVolumeOff : IconVolume;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "audio-player",
+		"data-playing": playing || void 0,
+		role: "group",
+		...props,
+		"aria-label": ariaLabel,
+		style: {
+			width: cssLength(width),
+			...style
+		},
+		className: cn("flex h-12 w-full items-center gap-2 rounded-lg bg-muted px-3 py-1.5", className),
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon",
+				disabled,
+				"aria-label": playing ? "Pause" : "Play",
+				onClick: toggle,
+				children: /* @__PURE__ */ jsx(PlaybackIcon, {})
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				"data-slot": "audio-player-time",
+				className: "shrink-0 text-xs tabular-nums text-foreground/70",
+				children: [
+					formatMediaTime(currentTime),
+					" / ",
+					formatMediaTime(duration)
+				]
+			}),
+			/* @__PURE__ */ jsx(Slider, {
+				className: "flex-1 [&_[data-slot=slider-control]]:py-1.5 [&_[data-slot=slider-thumb]]:size-3 [&_[data-slot=slider-track]]:h-1 [&_[data-slot=slider-track]]:bg-foreground/15",
+				value: Math.min(currentTime, duration || 0),
+				min: 0,
+				max: duration || 0,
+				step: 1,
+				disabled: disabled || duration === 0,
+				"aria-label": "Seek",
+				onValueChange: (next) => {
+					seek(next);
+				}
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon",
+				disabled,
+				"aria-label": isMuted ? "Unmute" : "Mute",
+				onClick: toggleMute,
+				children: /* @__PURE__ */ jsx(VolumeIcon, {})
+			}),
+			/* @__PURE__ */ jsx("audio", {
+				ref: refMedia,
+				src,
+				muted,
+				loop,
+				preload: "metadata"
+			})
+		]
+	});
+};
+//#endregion
+export { AudioPlayer };
+
+//# sourceMappingURL=audio-player.js.map

package/dist/ui/src/components/edyn/audio-player/audio-player.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio-player.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/audio-player/audio-player.tsx"],"sourcesContent":["import { Button } from '@edyn/ui/components/ui/button';\nimport { Slider } from '@edyn/ui/components/ui/slider';\nimport { formatMediaTime, useMediaPlayer } from '@edyn/ui/hooks/use-media-player';\nimport type { TCssLength } from '@edyn/ui/lib/utils';\nimport { cn, cssLength } from '@edyn/ui/lib/utils';\nimport { IconPlayerPauseFilled, IconPlayerPlayFilled, IconVolume, IconVolumeOff } from '@tabler/icons-react';\nimport type { ComponentPropsWithoutRef } from 'react';\n\nexport interface IAudioPlayerProps\n  extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'className' | 'onPlay' | 'onPause' | 'onEnded' | 'onTimeUpdate' | 'role'> {\n  /** Audio source URL. */\n  src?: string;\n  /** Start muted. The volume control still works from here. */\n  muted?: boolean;\n  /** Loop playback when the track ends. */\n  loop?: boolean;\n  /** Disable every control without hiding the player. */\n  disabled?: boolean;\n  /**\n   * Bar width. A number is px, a string is any CSS length (`'100%'`, `'34rem'`).\n   * Omitted, the bar fills the width it is given. The height is fixed at 48px by\n   * the design: the row has to line up with the other form-height controls.\n   */\n  width?: TCssLength;\n  className?: string;\n  'aria-label'?: string;\n  onPlay?: () => void;\n  onPause?: () => void;\n  onEnded?: () => void;\n  onTimeUpdate?: (currentTime: number, duration: number) => void;\n}\n\n/**\n * Compact inline media control for audio content: play/pause, elapsed and total\n * time, a seekable timeline, and volume. Four elements in one rounded row, per\n * the design-system anatomy.\n */\nexport const AudioPlayer = ({\n  src,\n  muted = false,\n  loop = false,\n  disabled = false,\n  width,\n  className,\n  'aria-label': ariaLabel = 'Audio player',\n  style,\n  onPlay,\n  onPause,\n  onEnded,\n  onTimeUpdate,\n  ...props\n}: IAudioPlayerProps) => {\n  const {\n    refMedia,\n    playing,\n    currentTime,\n    duration,\n    muted: isMuted,\n    toggle,\n    seek,\n    toggleMute,\n  } = useMediaPlayer<HTMLAudioElement>({\n    onPlay,\n    onPause,\n    onEnded,\n    onTimeUpdate,\n  });\n\n  const PlaybackIcon = playing ? IconPlayerPauseFilled : IconPlayerPlayFilled;\n  const VolumeIcon = isMuted ? IconVolumeOff : IconVolume;\n\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: <fieldset> carries form semantics and UA styling this player does not want; role=\"group\" is the correct ARIA for a labelled set of related controls.\n    <div\n      data-slot=\"audio-player\"\n      data-playing={playing || undefined}\n      role=\"group\"\n      {...props}\n      aria-label={ariaLabel}\n      style={{ width: cssLength(width), ...style }}\n      className={cn('flex h-12 w-full items-center gap-2 rounded-lg bg-muted px-3 py-1.5', className)}\n    >\n      <Button type=\"button\" variant=\"ghost\" size=\"icon\" disabled={disabled} aria-label={playing ? 'Pause' : 'Play'} onClick={toggle}>\n        <PlaybackIcon />\n      </Button>\n\n      {/* `text-foreground/70` not `text-muted-foreground`: the latter on `bg-muted` is only 4.34:1, below AA. */}\n      <span data-slot=\"audio-player-time\" className=\"shrink-0 text-xs tabular-nums text-foreground/70\">\n        {formatMediaTime(currentTime)} / {formatMediaTime(duration)}\n      </span>\n\n      {/* Scope the form-sized Slider down to a timeline: thinner track, smaller thumb, and a track tint that\n          reads against this bar (the Slider's default `bg-muted` track is invisible on a `bg-muted` container). */}\n      <Slider\n        className=\"flex-1 [&_[data-slot=slider-control]]:py-1.5 [&_[data-slot=slider-thumb]]:size-3 [&_[data-slot=slider-track]]:h-1 [&_[data-slot=slider-track]]:bg-foreground/15\"\n        value={Math.min(currentTime, duration || 0)}\n        min={0}\n        max={duration || 0}\n        step={1}\n        disabled={disabled || duration === 0}\n        aria-label=\"Seek\"\n        onValueChange={(next) => {\n          seek(next);\n        }}\n      />\n\n      <Button type=\"button\" variant=\"ghost\" size=\"icon\" disabled={disabled} aria-label={isMuted ? 'Unmute' : 'Mute'} onClick={toggleMute}>\n        <VolumeIcon />\n      </Button>\n\n      {/* Visually hidden: the row above is the entire control surface. */}\n      {/* No class needed: the UA stylesheet already hides `audio:not([controls])`, and that rule is `!important` so author CSS cannot change it either way. */}\n      <audio ref={refMedia} src={src} muted={muted} loop={loop} preload=\"metadata\" />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAqCA,IAAa,eAAe,EAC1B,KACA,QAAQ,OACR,OAAO,OACP,WAAW,OACX,OACA,WACA,cAAc,YAAY,gBAC1B,OACA,QACA,SACA,SACA,cACA,GAAG,YACoB;CACvB,MAAM,EACJ,UACA,SACA,aACA,UACA,OAAO,SACP,QACA,MACA,eACE,eAAiC;EACnC;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,eAAe,UAAU,wBAAwB;CACvD,MAAM,aAAa,UAAU,gBAAgB;CAE7C,OAEE,qBAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW,KAAA;EACzB,MAAK;EACL,GAAI;EACJ,cAAY;EACZ,OAAO;GAAE,OAAO,UAAU,KAAK;GAAG,GAAG;EAAM;EAC3C,WAAW,GAAG,uEAAuE,SAAS;EAPhG,UAAA;GASE,oBAAC,QAAD;IAAQ,MAAK;IAAS,SAAQ;IAAQ,MAAK;IAAiB;IAAU,cAAY,UAAU,UAAU;IAAQ,SAAS;IACrH,UAAA,oBAAC,cAAD,CAAe,CAAA;GACT,CAAA;GAGR,qBAAC,QAAD;IAAM,aAAU;IAAoB,WAAU;IAA9C,UAAA;KACG,gBAAgB,WAAW;KAAE;KAAI,gBAAgB,QAAQ;IACtD;;GAIN,oBAAC,QAAD;IACE,WAAU;IACV,OAAO,KAAK,IAAI,aAAa,YAAY,CAAC;IAC1C,KAAK;IACL,KAAK,YAAY;IACjB,MAAM;IACN,UAAU,YAAY,aAAa;IACnC,cAAW;IACX,gBAAgB,SAAS;KACvB,KAAK,IAAI;IACX;GACD,CAAA;GAED,oBAAC,QAAD;IAAQ,MAAK;IAAS,SAAQ;IAAQ,MAAK;IAAiB;IAAU,cAAY,UAAU,WAAW;IAAQ,SAAS;IACtH,UAAA,oBAAC,YAAD,CAAa,CAAA;GACP,CAAA;GAIR,oBAAC,SAAD;IAAO,KAAK;IAAe;IAAY;IAAa;IAAM,SAAQ;GAAY,CAAA;EAC3E;;AAET"}

package/dist/ui/src/components/edyn/date-picker/date-picker.js

@@ -0,0 +1,250 @@
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../../ui/button/button.js";
+import { Calendar } from "../../ui/calendar/calendar.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover/popover.js";
+import { firstWeekdayOf } from "../../../lib/first-weekday.js";
+import { dateToDay, dayToDate } from "../date-range-picker/date-range-picker.js";
+import { Input } from "../../ui/input/input.js";
+import { datePatternOf, dayProblem, formatDay, parseDateText } from "./date-text.js";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconCalendar } from "@tabler/icons-react";
+//#region ../ui/src/components/edyn/date-picker/date-picker.tsx
+var DEFAULT_DATE_PICKER_LABELS = {
+	choose: "Choose date",
+	format: (pattern) => `Enter a date as ${pattern}.`,
+	notReal: "That date does not exist.",
+	beforeMin: (min) => `Choose ${min} or later.`,
+	afterMax: (max) => `Choose ${max} or earlier.`,
+	unavailable: "That date is not available."
+};
+var problemText = (problem, labels, locale, limits, pattern) => {
+	switch (problem) {
+		case "format": return labels.format(pattern);
+		case "notReal": return labels.notReal;
+		case "beforeMin": return labels.beforeMin(limits.min === void 0 ? "" : formatDay(limits.min, locale));
+		case "afterMax": return labels.afterMax(limits.max === void 0 ? "" : formatDay(limits.max, locale));
+		default: return labels.unavailable;
+	}
+};
+/**
+* One calendar day, typed or picked. The field takes the day in the locale's order (05/03/2026 in en-GB) and reads it
+* when it loses focus, saying inline what is wrong with it; the button, or Alt+ArrowDown in the field, opens a calendar.
+*/
+var DatePicker = ({ id, value, onValueChange, min, max, disabledDates, disabled = false, locale = "en-GB", calendarLocale, placeholder, "aria-label": ariaLabel, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, labels: labelOverrides, className }) => {
+	const labels = useMemo(() => ({
+		...DEFAULT_DATE_PICKER_LABELS,
+		...labelOverrides
+	}), [labelOverrides]);
+	const pattern = useMemo(() => datePatternOf(locale), [locale]);
+	const current = value === "" ? void 0 : value;
+	const errorId = useId();
+	const refField = useRef(null);
+	const refInput = useRef(null);
+	const refPointer = useRef(false);
+	const refKnown = useRef(current);
+	const refRefused = useRef(null);
+	const [text, setText] = useState(current === void 0 ? "" : formatDay(current, locale));
+	const [problem, setProblem] = useState(null);
+	const [open, setOpen] = useState(false);
+	useEffect(() => {
+		if (current !== refKnown.current) {
+			refKnown.current = current;
+			refRefused.current = null;
+			setText(current === void 0 ? "" : formatDay(current, locale));
+			setProblem(null);
+		}
+	}, [current, locale]);
+	const report = (day, state) => {
+		refKnown.current = day;
+		refRefused.current = state.kind === "refused" ? `${state.text}\u0000${state.problem}` : null;
+		onValueChange(day, state);
+	};
+	/**
+	* Reads the text: a day is reported and written back in full, anything else is said inline and reported as no day,
+	* with the state saying whether the field is empty or holds text it refused.
+	*/
+	const commit = (typed) => {
+		const parsed = parseDateText(typed, locale);
+		if (parsed.kind === "empty") {
+			setProblem(null);
+			if (current !== void 0 || refRefused.current !== null) report(void 0, { kind: "empty" });
+			return;
+		}
+		const found = parsed.kind === "problem" ? parsed.problem : dayProblem(parsed.day, {
+			min,
+			max,
+			disabledDates
+		});
+		if (found !== void 0) {
+			setProblem(found);
+			const message = problemText(found, labels, locale, {
+				min,
+				max
+			}, pattern);
+			if (current !== void 0 || refRefused.current !== `${typed}\u0000${message}`) report(void 0, {
+				kind: "refused",
+				text: typed,
+				problem: message
+			});
+			return;
+		}
+		if (parsed.kind === "day") {
+			setProblem(null);
+			setText(formatDay(parsed.day, locale));
+			if (parsed.day !== current || refRefused.current !== null) report(parsed.day, { kind: "day" });
+		}
+	};
+	const pick = (date) => {
+		const day = dateToDay(date);
+		if (day === void 0) return;
+		setProblem(null);
+		setText(formatDay(day, locale));
+		if (day !== current || refRefused.current !== null) report(day, { kind: "day" });
+		setOpen(false);
+	};
+	/**
+	* Text is read as the person leaves the field. A day (or nothing) is taken at once; a message about text that is not a
+	* day is shown too, unless they are only on the way to the calendar: a press of the mouse on the button, or focus
+	* going into the calendar that Alt+ArrowDown opened, with the text half typed. Leaving the picker for anywhere else
+	* reads whatever is typed.
+	*/
+	const handleBlur = (event) => {
+		const next = event.relatedTarget;
+		const intoCalendar = next?.closest("[data-slot=\"popover-content\"]") != null;
+		const intoButton = next?.closest("[data-slot=\"date-picker-trigger\"]") != null;
+		const typed = refInput.current?.value ?? "";
+		if (!(intoCalendar || intoButton || next !== null && refField.current?.contains(next) === true)) {
+			commit(typed);
+			return;
+		}
+		if (event.target !== refInput.current) return;
+		const onTheWay = intoCalendar || intoButton && refPointer.current;
+		const parsed = parseDateText(typed, locale);
+		if (parsed.kind === "empty" || parsed.kind === "day" && dayProblem(parsed.day, {
+			min,
+			max,
+			disabledDates
+		}) === void 0 || !onTheWay) commit(typed);
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "ArrowDown" && event.altKey && !disabled) {
+			event.preventDefault();
+			setOpen(true);
+			return;
+		}
+		if (event.key === "Escape" && open) {
+			event.preventDefault();
+			event.stopPropagation();
+			setOpen(false);
+			return;
+		}
+		if (event.key === "Enter") {
+			const parsed = parseDateText(event.currentTarget.value, locale);
+			if (parsed.kind !== "empty" && (parsed.kind === "problem" || dayProblem(parsed.day, {
+				min,
+				max,
+				disabledDates
+			}) !== void 0)) event.preventDefault();
+			commit(event.currentTarget.value);
+		}
+	};
+	const selected = dayToDate(current);
+	const limits = {
+		min,
+		max
+	};
+	const invalid = problem !== null || ariaInvalid === true || ariaInvalid === "true";
+	const describedBy = [ariaDescribedBy, problem === null ? void 0 : errorId].filter(Boolean).join(" ") || void 0;
+	const isOff = (date) => {
+		const day = dateToDay(date);
+		return day !== void 0 && dayProblem(day, {
+			min,
+			max,
+			disabledDates
+		}) !== void 0;
+	};
+	const today = /* @__PURE__ */ new Date();
+	const start = dayToDate(min);
+	const end = dayToDate(max);
+	const month = selected ?? (start !== void 0 && today < start ? start : end !== void 0 && today > end ? end : today);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "date-picker",
+		className: cn("flex flex-col gap-1.5", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: refField,
+			className: "relative",
+			onPointerDownCapture: () => {
+				refPointer.current = true;
+			},
+			onPointerUpCapture: () => {
+				refPointer.current = false;
+			},
+			children: [/* @__PURE__ */ jsx(Input, {
+				ref: refInput,
+				id,
+				type: "text",
+				inputMode: "numeric",
+				autoComplete: "off",
+				"data-slot": "date-picker-input",
+				value: text,
+				placeholder: placeholder ?? pattern,
+				disabled,
+				"aria-label": ariaLabel,
+				"aria-invalid": invalid ? true : void 0,
+				"aria-describedby": describedBy,
+				className: "pr-9",
+				onChange: (event) => {
+					setText(event.target.value);
+					setProblem(null);
+				},
+				onBlur: handleBlur,
+				onKeyDown: handleKeyDown
+			}), /* @__PURE__ */ jsxs(Popover, {
+				open,
+				onOpenChange: setOpen,
+				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon-sm",
+						"data-slot": "date-picker-trigger",
+						"aria-label": labels.choose,
+						disabled,
+						className: "absolute top-0.5 right-0.5",
+						onBlur: handleBlur
+					}),
+					children: /* @__PURE__ */ jsx(IconCalendar, { "aria-hidden": "true" })
+				}), /* @__PURE__ */ jsx(PopoverContent, {
+					anchor: refField,
+					align: "start",
+					className: "w-auto p-0",
+					finalFocus: refInput,
+					onBlur: handleBlur,
+					children: /* @__PURE__ */ jsx(Calendar, {
+						mode: "single",
+						required: true,
+						autoFocus: true,
+						locale: calendarLocale,
+						weekStartsOn: firstWeekdayOf(locale),
+						defaultMonth: month,
+						startMonth: start,
+						endMonth: end,
+						selected,
+						disabled: isOff,
+						onSelect: pick
+					})
+				})]
+			})]
+		}), problem !== null && /* @__PURE__ */ jsx("p", {
+			id: errorId,
+			"data-slot": "date-picker-error",
+			role: "alert",
+			className: "text-sm text-destructive",
+			children: problemText(problem, labels, locale, limits, pattern)
+		})]
+	});
+};
+//#endregion
+export { DEFAULT_DATE_PICKER_LABELS, DatePicker };
+
+//# sourceMappingURL=date-picker.js.map

package/dist/ui/src/components/edyn/date-picker/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/date-picker/date-picker.tsx"],"sourcesContent":["import { dateToDay, dayToDate } from '@edyn/ui/components/edyn/date-range-picker';\nimport { Button } from '@edyn/ui/components/ui/button';\nimport { Calendar } from '@edyn/ui/components/ui/calendar';\nimport { Input } from '@edyn/ui/components/ui/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '@edyn/ui/components/ui/popover';\nimport { firstWeekdayOf } from '@edyn/ui/lib/first-weekday';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCalendar } from '@tabler/icons-react';\nimport { type ChangeEvent, type FocusEvent, type KeyboardEvent, useEffect, useId, useMemo, useRef, useState } from 'react';\nimport type { Locale } from 'react-day-picker';\nimport { datePatternOf, dayProblem, formatDay, parseDateText, type TDateProblem, type TDisabledDays } from './date-text';\n\n/** Every word the component prints, so a product can translate it. */\nexport interface IDatePickerLabels {\n  /** The calendar button's accessible name. */\n  choose: string;\n  /** Said when the text is not a date; `pattern` is what to type, written the locale's way (`DD/MM/YYYY`). */\n  format: (pattern: string) => string;\n  notReal: string;\n  /** `min` and `max` are written the locale's way. */\n  beforeMin: (min: string) => string;\n  afterMax: (max: string) => string;\n  unavailable: string;\n}\n\nexport const DEFAULT_DATE_PICKER_LABELS: IDatePickerLabels = {\n  choose: 'Choose date',\n  format: (pattern) => `Enter a date as ${pattern}.`,\n  notReal: 'That date does not exist.',\n  beforeMin: (min) => `Choose ${min} or later.`,\n  afterMax: (max) => `Choose ${max} or earlier.`,\n  unavailable: 'That date is not available.',\n};\n\n/**\n * What the field holds when it reports, so a parent can tell three things apart that all arrive as `undefined`:\n * - `day`: a usable day, typed or picked.\n * - `empty`: the field was emptied, or nothing has been put in it. A required field is right to ask for a date.\n * - `refused`: the field holds text it will not take (not a day, not a real one, or outside `min`, `max` or\n *   `disabledDates`). `text` is what was typed and `problem` the message the picker shows under the field, already\n *   in the picker's `labels`. The picker is saying so itself, so the page should not add a second message.\n */\nexport type TDatePickerState = { kind: 'day' } | { kind: 'empty' } | { kind: 'refused'; text: string; problem: string };\n\nexport interface IDatePickerProps {\n  /** For a Label's htmlFor; inside a Field the Field's label is already wired. */\n  id?: string;\n  /**\n   * The chosen day as `yyyy-mm-dd`, or `undefined` for none (an empty string counts as none, so a value kept for an\n   * `<input type=\"date\">` drops in). A string and not a Date, on purpose: a Date is an instant, and the instant for\n   * \"5 March\" is another calendar day in another time zone, so a Date serialised for an API drifts a day. The text is\n   * what `<input type=\"date\">`, JSON and a .NET `DateOnly` use, and it compares as a day.\n   */\n  value: string | undefined;\n  /**\n   * Called with a valid day, or with `undefined` when the field is emptied or its text is not a usable day. The second\n   * argument says which of the two it was (see `TDatePickerState`); a caller that has no use for it can ignore it.\n   * Text that is refused is reported each time it changes, also when the field held no day before, so a form that\n   * tracks the state hears about it. Emptying the field after that reports `empty`.\n   */\n  onValueChange: (value: string | undefined, state: TDatePickerState) => void;\n  /** The earliest and latest day that can be chosen, as `yyyy-mm-dd`, both included. */\n  min?: string;\n  max?: string;\n  /** Days that cannot be chosen: a list of `yyyy-mm-dd`, or a function that says so for one (weekends, say). */\n  disabledDates?: TDisabledDays;\n  disabled?: boolean;\n  /** How a day is written and in which order it is typed (BCP 47); en-GB reads 05/03/2026. */\n  locale?: string;\n  /** The calendar's own words (month and weekday names), as a date-fns locale; English by default. The first weekday follows `locale`. */\n  calendarLocale?: Locale;\n  /** What the empty field shows; the pattern for the locale (`DD/MM/YYYY`) by default. */\n  placeholder?: string;\n  /** An accessible name, when there is no visible label to point at. */\n  'aria-label'?: string;\n  /** Marks the field invalid (the kit's destructive border), as a Field's invalid state does. */\n  'aria-invalid'?: boolean | 'true' | 'false';\n  /** The id of the text that explains it. Added to what a Field names already, and to the picker's own error. */\n  'aria-describedby'?: string;\n  labels?: Partial<IDatePickerLabels>;\n  /** Layout only (a width); the look is the kit's. */\n  className?: string;\n}\n\nconst problemText = (\n  problem: TDateProblem,\n  labels: IDatePickerLabels,\n  locale: string,\n  limits: { min?: string; max?: string },\n  pattern: string,\n): string => {\n  switch (problem) {\n    case 'format':\n      return labels.format(pattern);\n    case 'notReal':\n      return labels.notReal;\n    case 'beforeMin':\n      return labels.beforeMin(limits.min === undefined ? '' : formatDay(limits.min, locale));\n    case 'afterMax':\n      return labels.afterMax(limits.max === undefined ? '' : formatDay(limits.max, locale));\n    default:\n      return labels.unavailable;\n  }\n};\n\n/**\n * One calendar day, typed or picked. The field takes the day in the locale's order (05/03/2026 in en-GB) and reads it\n * when it loses focus, saying inline what is wrong with it; the button, or Alt+ArrowDown in the field, opens a calendar.\n */\nexport const DatePicker = ({\n  id,\n  value,\n  onValueChange,\n  min,\n  max,\n  disabledDates,\n  disabled = false,\n  locale = 'en-GB',\n  calendarLocale,\n  placeholder,\n  'aria-label': ariaLabel,\n  'aria-invalid': ariaInvalid,\n  'aria-describedby': ariaDescribedBy,\n  labels: labelOverrides,\n  className,\n}: IDatePickerProps) => {\n  const labels = useMemo(() => ({ ...DEFAULT_DATE_PICKER_LABELS, ...labelOverrides }), [labelOverrides]);\n  const pattern = useMemo(() => datePatternOf(locale), [locale]);\n  const current = value === '' ? undefined : value;\n  const errorId = useId();\n  const refField = useRef<HTMLDivElement | null>(null);\n  const refInput = useRef<HTMLInputElement | null>(null);\n  // The mouse is down inside the picker, so a blur of the field is a click on something in it, not a Tab.\n  const refPointer = useRef(false);\n  // The day the field last agreed on with the page, so a change from outside is told from our own report of it.\n  const refKnown = useRef<string | undefined>(current);\n  // The refused text last reported (with its message), or null: told apart from a fresh refusal so it is reported once,\n  // and so that emptying a field that held a refused text is reported although it held no day.\n  const refRefused = useRef<string | null>(null);\n  const [text, setText] = useState(current === undefined ? '' : formatDay(current, locale));\n  const [problem, setProblem] = useState<TDateProblem | null>(null);\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    if (current !== refKnown.current) {\n      refKnown.current = current;\n      refRefused.current = null;\n      setText(current === undefined ? '' : formatDay(current, locale));\n      setProblem(null);\n    }\n  }, [current, locale]);\n\n  const report = (day: string | undefined, state: TDatePickerState) => {\n    refKnown.current = day;\n    refRefused.current = state.kind === 'refused' ? `${state.text}\\u0000${state.problem}` : null;\n    onValueChange(day, state);\n  };\n\n  /**\n   * Reads the text: a day is reported and written back in full, anything else is said inline and reported as no day,\n   * with the state saying whether the field is empty or holds text it refused.\n   */\n  const commit = (typed: string) => {\n    const parsed = parseDateText(typed, locale);\n    if (parsed.kind === 'empty') {\n      setProblem(null);\n      if (current !== undefined || refRefused.current !== null) {\n        report(undefined, { kind: 'empty' });\n      }\n      return;\n    }\n    const found = parsed.kind === 'problem' ? parsed.problem : dayProblem(parsed.day, { min, max, disabledDates });\n    if (found !== undefined) {\n      setProblem(found);\n      const message = problemText(found, labels, locale, { min, max }, pattern);\n      if (current !== undefined || refRefused.current !== `${typed}\\u0000${message}`) {\n        report(undefined, { kind: 'refused', text: typed, problem: message });\n      }\n      return;\n    }\n    if (parsed.kind === 'day') {\n      setProblem(null);\n      setText(formatDay(parsed.day, locale));\n      if (parsed.day !== current || refRefused.current !== null) {\n        report(parsed.day, { kind: 'day' });\n      }\n    }\n  };\n\n  const pick = (date: Date | undefined) => {\n    const day = dateToDay(date);\n    if (day === undefined) {\n      return;\n    }\n    setProblem(null);\n    setText(formatDay(day, locale));\n    if (day !== current || refRefused.current !== null) {\n      report(day, { kind: 'day' });\n    }\n    setOpen(false);\n  };\n\n  /**\n   * Text is read as the person leaves the field. A day (or nothing) is taken at once; a message about text that is not a\n   * day is shown too, unless they are only on the way to the calendar: a press of the mouse on the button, or focus\n   * going into the calendar that Alt+ArrowDown opened, with the text half typed. Leaving the picker for anywhere else\n   * reads whatever is typed.\n   */\n  const handleBlur = (event: FocusEvent<HTMLElement>) => {\n    const next = event.relatedTarget as Element | null;\n    const intoCalendar = next?.closest('[data-slot=\"popover-content\"]') != null;\n    const intoButton = next?.closest('[data-slot=\"date-picker-trigger\"]') != null;\n    const typed = refInput.current?.value ?? '';\n    if (!(intoCalendar || intoButton || (next !== null && refField.current?.contains(next) === true))) {\n      commit(typed);\n      return;\n    }\n    if (event.target !== refInput.current) {\n      return;\n    }\n    const onTheWay = intoCalendar || (intoButton && refPointer.current);\n    const parsed = parseDateText(typed, locale);\n    const usable = parsed.kind === 'empty' || (parsed.kind === 'day' && dayProblem(parsed.day, { min, max, disabledDates }) === undefined);\n    if (usable || !onTheWay) {\n      commit(typed);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'ArrowDown' && event.altKey && !disabled) {\n      event.preventDefault();\n      setOpen(true);\n      return;\n    }\n    // The field has no key handler of Base UI's to close the calendar, so the key would reach the Sheet or Dialog around\n    // it and close that too. While the calendar is open it is this field's key; when it is closed it is the page's.\n    if (event.key === 'Escape' && open) {\n      event.preventDefault();\n      event.stopPropagation();\n      setOpen(false);\n      return;\n    }\n    if (event.key === 'Enter') {\n      const parsed = parseDateText(event.currentTarget.value, locale);\n      if (parsed.kind !== 'empty' && (parsed.kind === 'problem' || dayProblem(parsed.day, { min, max, disabledDates }) !== undefined)) {\n        event.preventDefault();\n      }\n      commit(event.currentTarget.value);\n    }\n  };\n\n  const selected = dayToDate(current);\n  const limits = { min, max };\n  const invalid = problem !== null || ariaInvalid === true || ariaInvalid === 'true';\n  const describedBy = [ariaDescribedBy, problem === null ? undefined : errorId].filter(Boolean).join(' ') || undefined;\n  const isOff = (date: Date): boolean => {\n    const day = dateToDay(date);\n    return day !== undefined && dayProblem(day, { min, max, disabledDates }) !== undefined;\n  };\n  const today = new Date();\n  const start = dayToDate(min);\n  const end = dayToDate(max);\n  const month = selected ?? (start !== undefined && today < start ? start : end !== undefined && today > end ? end : today);\n\n  return (\n    <div data-slot=\"date-picker\" className={cn('flex flex-col gap-1.5', className)}>\n      <div\n        ref={refField}\n        className=\"relative\"\n        onPointerDownCapture={() => {\n          refPointer.current = true;\n        }}\n        onPointerUpCapture={() => {\n          refPointer.current = false;\n        }}\n      >\n        <Input\n          ref={refInput}\n          id={id}\n          type=\"text\"\n          inputMode=\"numeric\"\n          autoComplete=\"off\"\n          data-slot=\"date-picker-input\"\n          value={text}\n          placeholder={placeholder ?? pattern}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          aria-invalid={invalid ? true : undefined}\n          aria-describedby={describedBy}\n          className=\"pr-9\"\n          onChange={(event: ChangeEvent<HTMLInputElement>) => {\n            setText(event.target.value);\n            setProblem(null);\n          }}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                data-slot=\"date-picker-trigger\"\n                aria-label={labels.choose}\n                disabled={disabled}\n                className=\"absolute top-0.5 right-0.5\"\n                onBlur={handleBlur}\n              />\n            }\n          >\n            <IconCalendar aria-hidden=\"true\" />\n          </PopoverTrigger>\n          <PopoverContent anchor={refField} align=\"start\" className=\"w-auto p-0\" finalFocus={refInput} onBlur={handleBlur}>\n            <Calendar\n              mode=\"single\"\n              required\n              autoFocus\n              locale={calendarLocale}\n              weekStartsOn={firstWeekdayOf(locale)}\n              defaultMonth={month}\n              startMonth={start}\n              endMonth={end}\n              selected={selected}\n              disabled={isOff}\n              onSelect={pick}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      {problem !== null && (\n        <p id={errorId} data-slot=\"date-picker-error\" role=\"alert\" className=\"text-sm text-destructive\">\n          {problemText(problem, labels, locale, limits, pattern)}\n        </p>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}