@exsto/ds 0.0.1-rc.2 → 0.0.1-rc.21

package/dist/theme.css

@@ -1,17 +1,70 @@
 /*
  * @exsto/ds design tokens and their Tailwind mapping, uncompiled.
  *
- * Import this from your own Tailwind entry when you want to use the design
- * system vocabulary (bg-card, text-muted-foreground, rounded-lg, ...) in your
- * OWN markup. `@exsto/ds/styles.css` styles the components; this file gives
- * your Tailwind build the tokens behind them.
+ * Import this when you want the design system vocabulary (bg-card,
+ * text-muted-foreground, rounded-lg, font-sans, text-2xs, ...) in your OWN
+ * markup. styles.css styles the components; this gives your Tailwind build the
+ * tokens behind them.
  *
+ * ORDER, for a consumer who runs Tailwind:
+ *
+ *   @import "@exsto/ds/styles.css";
  *   @import "tailwindcss";
  *   @import "@exsto/ds/theme.css";
- *   @import "@exsto/ds/styles.css";
+ *
+ * The @source line below is what makes that order enough. styles.css is a
+ * compiled Tailwind build, so its utilities share the utilities layer with the
+ * ones your build emits, and between two rules of equal weight the later one
+ * wins. Two separate builds cannot agree on a single order: ours put .hidden
+ * after your .md:block, and a sidebar marked `hidden md:block` stayed hidden at
+ * every width. The line points your build at the components' shipped code, so
+ * your build emits their utilities as well, each responsive variant after its
+ * own base, in one consistent order that lands last.
+ *
+ * Importing styles.css after your Tailwind entry puts its compiled utilities
+ * last instead, and they then outrank yours. Keep it first.
  */
 
+@source "./**/*.js";
+
 @custom-variant dark (&:is(.dark *));
+
+/*
+ * Brand layer.
+ *
+ * The colour ramps come from Tailwind v4 unchanged. The design system is built on
+ * the stock palette so the Figma library (Tailwind v4 + shadcn, style Nova) and the
+ * code cannot drift apart: there is no value here to keep in sync, because nothing
+ * here redefines a colour. The exact shadcn neutral semantic theme lives in
+ * tokens.css.
+ *
+ * The legacy Exsto palette this file used to carry was dropped when the design team
+ * moved to Tailwind defaults. It is in git history if a legacy surface ever needs it.
+ */
+
+@theme {
+  /* Inter is the typeface for the whole system. */
+  --font-sans: 'Inter', sans-serif;
+
+  /*
+   * The one step Tailwind's type scale does not have: a 10/14 footnote, used by
+   * badges, chips and dense table headers. Everything else is stock.
+   */
+  --text-2xs: 10px;
+  --text-2xs--line-height: 14px;
+}
+
+@layer base {
+  :root {
+    color-scheme: light;
+  }
+
+  :root.dark,
+  .dark {
+    color-scheme: dark;
+  }
+}
+
 /* Current shadcn Base Nova neutral theme. Product branding belongs in a separate layer. */
 /* Base Nova deliberately uses the same black/10 backdrop in both modes; component-level backdrop blur supplies the remaining separation. */
 
@@ -35,7 +88,8 @@
   --secondary-foreground: oklch(0.205 0 0);
 
   --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
+  /* Muted text: 4.5:1 on the page (white), a card and the muted surface (oklch 0.97). 0.556 was 4.35:1 on the latter. */
+  --muted-foreground: oklch(0.545 0 0);
 
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
@@ -57,7 +111,9 @@
 
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  /* The outline of a control (field, trigger, outline button): 3:1 on the page and on a card (WCAG 1.4.11). --input stays the fill. */
+  --control-border: oklch(0.66 0 0);
+  --ring: oklch(0.6 0 0);
 
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
@@ -73,6 +129,38 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+
+  /*
+   * Avatar palette: twelve hues, each a pair at an even perceived lightness, a
+   * soft tint with strong text of the same hue in the light theme and a deep tint
+   * with light text in the dark one. No yellows, olives or browns: they turn muddy.
+   * InitialsAvatar picks one by hashing the initials; every pair clears 4.5:1
+   * (packages/ui/src/components/edyn/initials-avatar/initials-avatar.test.tsx checks it).
+   */
+  --avatar-1-bg: oklch(0.93 0.045 259); /* blue */
+  --avatar-1-fg: oklch(0.45 0.15 259);
+  --avatar-2-bg: oklch(0.93 0.045 277); /* indigo */
+  --avatar-2-fg: oklch(0.45 0.15 277);
+  --avatar-3-bg: oklch(0.93 0.045 293); /* violet */
+  --avatar-3-fg: oklch(0.45 0.15 293);
+  --avatar-4-bg: oklch(0.93 0.045 322); /* fuchsia */
+  --avatar-4-fg: oklch(0.45 0.15 322);
+  --avatar-5-bg: oklch(0.93 0.045 354); /* pink */
+  --avatar-5-fg: oklch(0.45 0.15 354);
+  --avatar-6-bg: oklch(0.93 0.045 16); /* rose */
+  --avatar-6-fg: oklch(0.45 0.15 16);
+  --avatar-7-bg: oklch(0.93 0.045 27); /* red */
+  --avatar-7-fg: oklch(0.45 0.15 27);
+  --avatar-8-bg: oklch(0.93 0.045 47); /* orange */
+  --avatar-8-fg: oklch(0.45 0.15 47);
+  --avatar-9-bg: oklch(0.93 0.045 163); /* emerald */
+  --avatar-9-fg: oklch(0.45 0.15 163);
+  --avatar-10-bg: oklch(0.93 0.045 183); /* teal */
+  --avatar-10-fg: oklch(0.45 0.15 183);
+  --avatar-11-bg: oklch(0.93 0.045 215); /* cyan */
+  --avatar-11-fg: oklch(0.45 0.15 215);
+  --avatar-12-bg: oklch(0.93 0.045 237); /* sky */
+  --avatar-12-fg: oklch(0.45 0.15 237);
 }
 
 .dark {
@@ -115,6 +203,7 @@
 
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
+  --control-border: oklch(1 0 0 / 35%);
   --ring: oklch(0.556 0 0);
 
   --chart-1: oklch(0.488 0.243 264.376);
@@ -131,6 +220,31 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
+
+  --avatar-1-bg: oklch(0.32 0.07 259); /* blue */
+  --avatar-1-fg: oklch(0.86 0.09 259);
+  --avatar-2-bg: oklch(0.32 0.07 277); /* indigo */
+  --avatar-2-fg: oklch(0.86 0.09 277);
+  --avatar-3-bg: oklch(0.32 0.07 293); /* violet */
+  --avatar-3-fg: oklch(0.86 0.09 293);
+  --avatar-4-bg: oklch(0.32 0.07 322); /* fuchsia */
+  --avatar-4-fg: oklch(0.86 0.09 322);
+  --avatar-5-bg: oklch(0.32 0.07 354); /* pink */
+  --avatar-5-fg: oklch(0.86 0.09 354);
+  --avatar-6-bg: oklch(0.32 0.07 16); /* rose */
+  --avatar-6-fg: oklch(0.86 0.09 16);
+  --avatar-7-bg: oklch(0.32 0.07 27); /* red */
+  --avatar-7-fg: oklch(0.86 0.09 27);
+  --avatar-8-bg: oklch(0.32 0.07 47); /* orange */
+  --avatar-8-fg: oklch(0.86 0.09 47);
+  --avatar-9-bg: oklch(0.32 0.07 163); /* emerald */
+  --avatar-9-fg: oklch(0.86 0.09 163);
+  --avatar-10-bg: oklch(0.32 0.07 183); /* teal */
+  --avatar-10-fg: oklch(0.86 0.09 183);
+  --avatar-11-bg: oklch(0.32 0.07 215); /* cyan */
+  --avatar-11-fg: oklch(0.86 0.09 215);
+  --avatar-12-bg: oklch(0.32 0.07 237); /* sky */
+  --avatar-12-fg: oklch(0.86 0.09 237);
 }
 
 @theme inline {
@@ -169,6 +283,7 @@
   --color-info-ring: var(--info-ring);
   --color-border: var(--border);
   --color-input: var(--input);
+  --color-control: var(--control-border);
   --color-ring: var(--ring);
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);

package/dist/time-field.js

@@ -0,0 +1,2 @@
+import { DEFAULT_TIME_FIELD_LABELS, EMPTY_TIME, TimeField, editSegment, formatTime, localeHourCycle, parseTime, rangeOf, stepValue, typeDigit } from "./ui/src/components/edyn/time-field/time-field.js";
+export { DEFAULT_TIME_FIELD_LABELS, EMPTY_TIME, TimeField, editSegment, formatTime, localeHourCycle, parseTime, rangeOf, stepValue, typeDigit };

package/dist/ui/src/components/edyn/animated-number/animated-number.d.ts

@@ -0,0 +1,30 @@
+import { ComponentPropsWithoutRef, RefObject } from 'react';
+/** Thousands separated, rounded to a whole number: the default way a count reads. */
+export declare const formatCount: (value: number) => string;
+/**
+ * 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.
+ */
+export declare const useAnimatedValues: (targets: number[], element: RefObject<Element | null>) => number[];
+export interface IAnimatedNumberProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children' | 'className'> {
+    value: number;
+    /** What it shows while it moves and once there (formatCount by default; a percentage formatter for shares). */
+    format?: (value: number) => string;
+    className?: string;
+}
+/**
+ * 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.
+ */
+export declare const AnimatedNumber: ({ value, format, className, ...props }: IAnimatedNumberProps) => import('react').JSX.Element;
+export interface INumberTextProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children' | 'className'> {
+    element?: RefObject<HTMLSpanElement | null>;
+    shown: number;
+    value: number;
+    format?: (value: number) => string;
+    className?: string;
+}
+/** The text of a moving number: what it shows now, held at its widest, with the final value for assistive technology. */
+export declare const NumberText: ({ element, shown, value, format, className, ...props }: INumberTextProps) => import('react').JSX.Element;

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/animated-number/animated-number.test.d.ts

@@ -0,0 +1,9 @@
+/**
+ * AnimatedNumber: a number that moves to its new value, announced once.
+ *
+ * PATH TAKEN: the formatting, the markup and the reduced-motion and no-change
+ * paths are plain logic and run in happy-dom. The motion itself (a number really
+ * passing through values, a width that holds) needs a real clock and layout, so
+ * e2e/animated-number.spec.ts measures it in the browser.
+ */
+export {};

package/dist/ui/src/components/edyn/animated-number/index.d.ts

@@ -0,0 +1 @@
+export * from './animated-number';

package/dist/ui/src/components/edyn/audio-player/audio-player.d.ts

@@ -1,5 +1,6 @@
 import { TCssLength } from '../../../lib/utils';
-export interface IAudioPlayerProps {
+import { ComponentPropsWithoutRef } from 'react';
+export interface IAudioPlayerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'className' | 'onPlay' | 'onPause' | 'onEnded' | 'onTimeUpdate' | 'role'> {
     /** Audio source URL. */
     src?: string;
     /** Start muted. The volume control still works from here. */
@@ -26,4 +27,4 @@ export interface IAudioPlayerProps {
  * time, a seekable timeline, and volume. Four elements in one rounded row, per
  * the design-system anatomy.
  */
-export declare const AudioPlayer: ({ src, muted, loop, disabled, width, className, "aria-label": ariaLabel, onPlay, onPause, onEnded, onTimeUpdate, }: IAudioPlayerProps) => import('react').JSX.Element;
+export declare const AudioPlayer: ({ src, muted, loop, disabled, width, className, "aria-label": ariaLabel, style, onPlay, onPause, onEnded, onTimeUpdate, ...props }: IAudioPlayerProps) => import('react').JSX.Element;

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.d.ts

@@ -0,0 +1,86 @@
+import { Locale } from 'react-day-picker';
+import { TDisabledDays } from './date-text';
+/** Every word the component prints, so a product can translate it. */
+export interface IDatePickerLabels {
+    /** The calendar button's accessible name. */
+    choose: string;
+    /** Said when the text is not a date; `pattern` is what to type, written the locale's way (`DD/MM/YYYY`). */
+    format: (pattern: string) => string;
+    notReal: string;
+    /** `min` and `max` are written the locale's way. */
+    beforeMin: (min: string) => string;
+    afterMax: (max: string) => string;
+    unavailable: string;
+}
+export declare const DEFAULT_DATE_PICKER_LABELS: IDatePickerLabels;
+/**
+ * What the field holds when it reports, so a parent can tell apart things that would otherwise look alike:
+ * - `day`: a usable day, typed or picked.
+ * - `empty`: the field was emptied, or nothing has been put in it. A required field is right to ask for a date.
+ * - `refused`: the field holds text that is not a day (not a day, or not a real one). The day reported is `undefined`.
+ *   `text` is what was typed and `problem` the message the picker shows under the field, in the picker's `labels`.
+ * - `out-of-range`: the field holds a real day that `min`, `max` or `disabledDates` refuse. The day IS reported (as the
+ *   first argument and as `day`), so a form's own rule can judge it and show its message; the field is marked invalid.
+ *   Check `kind` before treating the day as a usable one.
+ *
+ * Inside a Field that renders a FieldError, that message is the only one: the picker does not show its own.
+ */
+export type TDatePickerState = {
+    kind: 'day';
+} | {
+    kind: 'empty';
+} | {
+    kind: 'refused';
+    text: string;
+    problem: string;
+} | {
+    kind: 'out-of-range';
+    day: string;
+    text: string;
+    problem: string;
+};
+export interface IDatePickerProps {
+    /** For a Label's htmlFor; inside a Field the Field's label is already wired. */
+    id?: string;
+    /**
+     * The chosen day as `yyyy-mm-dd`, or `undefined` for none (an empty string counts as none, so a value kept for an
+     * `<input type="date">` drops in). A string and not a Date, on purpose: a Date is an instant, and the instant for
+     * "5 March" is another calendar day in another time zone, so a Date serialised for an API drifts a day. The text is
+     * what `<input type="date">`, JSON and a .NET `DateOnly` use, and it compares as a day.
+     */
+    value: string | undefined;
+    /**
+     * Called with a valid day, or with `undefined` when the field is emptied or its text is not a usable day. The second
+     * argument says which of the two it was (see `TDatePickerState`); a caller that has no use for it can ignore it.
+     * Text that is refused is reported each time it changes, also when the field held no day before, so a form that
+     * tracks the state hears about it. Emptying the field after that reports `empty`.
+     */
+    onValueChange: (value: string | undefined, state: TDatePickerState) => void;
+    /** The earliest and latest day that can be chosen, as `yyyy-mm-dd`, both included. */
+    min?: string;
+    max?: string;
+    /** Days that cannot be chosen: a list of `yyyy-mm-dd`, or a function that says so for one (weekends, say). */
+    disabledDates?: TDisabledDays;
+    disabled?: boolean;
+    /** How a day is written and in which order it is typed (BCP 47); en-GB reads 05/03/2026. */
+    locale?: string;
+    /** The calendar's own words (month and weekday names), as a date-fns locale; English by default. The first weekday follows `locale`. */
+    calendarLocale?: Locale;
+    /** What the empty field shows; the pattern for the locale (`DD/MM/YYYY`) by default. */
+    placeholder?: string;
+    /** An accessible name, when there is no visible label to point at. */
+    'aria-label'?: string;
+    /** Marks the field invalid (the kit's destructive border), as a Field's invalid state does. */
+    'aria-invalid'?: boolean | 'true' | 'false';
+    /** The id of the text that explains it. Added to what a Field names already, and to the picker's own error. */
+    'aria-describedby'?: string;
+    labels?: Partial<IDatePickerLabels>;
+    /** Layout only (a width); the look is the kit's. */
+    className?: string;
+}
+/**
+ * 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.
+ * Escape closes the calendar and gives the focus back to whichever of the two opened it; a day picked puts it on the field.
+ */
+export declare const DatePicker: ({ id, value, onValueChange, min, max, disabledDates, disabled, locale, calendarLocale, placeholder, "aria-label": ariaLabel, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, labels: labelOverrides, className, }: IDatePickerProps) => import('react').JSX.Element;