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

package/dist/theme.css

@@ -0,0 +1,308 @@
+/*
+ * @exsto/ds design tokens and their Tailwind mapping, uncompiled.
+ *
+ * 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";
+ *
+ * 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. */
+
+:root {
+  --radius: 0.625rem;
+
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --overlay: oklch(0 0 0 / 10%);
+
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+
+  --destructive: oklch(0.505 0.213 27.518);
+  --destructive-foreground: oklch(0.985 0 0);
+
+  --success: oklch(0.448 0.119 151.328);
+  --success-foreground: oklch(0.979 0.021 166.113);
+  --success-ring: oklch(0.905 0.093 164.15);
+
+  --warning: oklch(0.473 0.137 46.201);
+  --warning-foreground: oklch(0.987 0.022 95.277);
+  --warning-ring: oklch(0.924 0.12 95.746);
+
+  --info: oklch(0.5 0.134 242.749);
+  --info-foreground: oklch(0.977 0.013 236.62);
+  --info-ring: oklch(0.901 0.058 230.902);
+
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 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);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --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 {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --overlay: oklch(0 0 0 / 10%);
+
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+
+  --success: oklch(0.792 0.209 151.711);
+  --success-foreground: oklch(0.262 0.051 172.552);
+  --success-ring: oklch(0.432 0.095 166.913);
+
+  --warning: oklch(0.879 0.169 91.605);
+  --warning-foreground: oklch(0.279 0.077 45.635);
+  --warning-ring: oklch(0.473 0.137 46.201);
+
+  --info: oklch(0.828 0.111 230.318);
+  --info-foreground: oklch(0.293 0.066 243.157);
+  --info-ring: oklch(0.443 0.11 240.79);
+
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --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 {
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-overlay: var(--overlay);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-success-ring: var(--success-ring);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning-ring: var(--warning-ring);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-info-ring: var(--info-ring);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+/* Indeterminate progress: a one-third-width bar sweeping the track.
+   Percentages are relative to the indicator's own width (w-1/3 of the track),
+   so -100% starts fully off the left edge and 300% exits the right edge. */
+@keyframes progress-indeterminate {
+  from {
+    translate: -100% 0;
+  }
+  to {
+    translate: 300% 0;
+  }
+}

package/dist/theme.css.d.ts

@@ -0,0 +1,2 @@
+// Side-effect stylesheet; importing it has no type surface.
+export {};

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.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/date-picker/date-picker.d.ts

@@ -0,0 +1,76 @@
+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 three things apart that all arrive as `undefined`:
+ * - `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 it will not take (not a day, not a real one, or outside `min`, `max` or
+ *   `disabledDates`). `text` is what was typed and `problem` the message the picker shows under the field, already
+ *   in the picker's `labels`. The picker is saying so itself, so the page should not add a second message.
+ */
+export type TDatePickerState = {
+    kind: 'day';
+} | {
+    kind: 'empty';
+} | {
+    kind: 'refused';
+    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.
+ */
+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;

package/dist/ui/src/components/edyn/date-picker/date-picker.state.test.d.ts

@@ -0,0 +1,9 @@
+/**
+ * What a DatePicker tells the page. `undefined` alone cannot say whether the field was emptied or holds text the picker
+ * refused, so a required field would add "Enter the date" under the picker's own message. The second argument of
+ * `onValueChange` says which, and these tests hold it.
+ *
+ * PATH TAKEN: the report and the attributes do not depend on layout, so happy-dom is enough. The Playwright spec
+ * (`e2e/date-picker.spec.ts`) covers it again in a browser, through a required Field.
+ */
+export {};

package/dist/ui/src/components/edyn/date-picker/date-text.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Reading and writing a calendar day as the text a person types.
+ *
+ * A day is the string `yyyy-mm-dd` everywhere here, never a Date: a Date is an instant, and the instant for "5 March" is a
+ * different calendar day in another time zone (local midnight serialised as UTC lands on the 4th east of Greenwich). The
+ * string is also what `<input type="date">`, JSON and a .NET `DateOnly` use. Strings of that shape sort and compare as
+ * days, so min, max and disabled days are compared as plain strings with no Date involved.
+ */
+export type TDatePart = 'day' | 'month' | 'year';
+/** Why a typed text is not a day the picker can use. */
+export type TDateProblem = 'format' | 'notReal' | 'beforeMin' | 'afterMax' | 'unavailable';
+export type TParsedDay = {
+    kind: 'empty';
+} | {
+    kind: 'day';
+    day: string;
+} | {
+    kind: 'problem';
+    problem: 'format' | 'notReal';
+};
+/** The order a locale writes day, month and year in: en-GB is day, month, year; en-US month, day, year; sv year first. */
+export declare const datePartsOf: (locale: string) => TDatePart[];
+/** What to type, written the locale's way: `DD/MM/YYYY` for en-GB. */
+export declare const datePatternOf: (locale: string) => string;
+/** A day written the locale's way: `05/03/2026` for en-GB. */
+export declare const formatDay: (day: string, locale: string) => string;
+/**
+ * Reads typed text as a day. The locale's order decides which number is the day; a first number of four digits is always
+ * a year (so `2026-03-05` is read the same everywhere); the separator can be anything that is not a digit, and eight
+ * digits with none (`05032026`) are split by the order. A year must have four digits: `5/3/26` is refused, not guessed.
+ */
+export declare const parseDateText: (text: string, locale: string) => TParsedDay;
+export type TDisabledDays = readonly string[] | ((day: string) => boolean);
+export interface IDayLimits {
+    min?: string;
+    max?: string;
+    disabledDates?: TDisabledDays;
+}
+/** Whether a day is allowed, and if not, which limit it breaks. */
+export declare const dayProblem: (day: string, { min, max, disabledDates }: IDayLimits) => TDateProblem | undefined;

package/dist/ui/src/components/edyn/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './date-picker';
+export type { TDisabledDays } from './date-text';

package/dist/ui/src/components/edyn/date-range-picker/date-range-picker.d.ts

@@ -0,0 +1,28 @@
+import { ComponentPropsWithoutRef } from 'react';
+/** A range of calendar days as yyyy-mm-dd, either end optional. */
+export type TDateRange = {
+    from?: string;
+    to?: string;
+};
+export declare const dayToDate: (value: string | undefined) => Date | undefined;
+export declare const dateToDay: (date: Date | undefined) => string | undefined;
+/** Anything else a button takes (data-*, aria-*, title) goes to the trigger. */
+export interface IDateRangePickerProps extends Omit<ComponentPropsWithoutRef<'button'>, 'value' | 'defaultValue' | 'placeholder' | 'id' | 'className' | 'children' | 'onChange' | 'type'> {
+    id?: string;
+    value: TDateRange;
+    onValueChange: (value: TDateRange) => void;
+    placeholder?: string;
+    /**
+     * What the trigger says once a range is set. `range` (default) writes the ends; `label` keeps the label, so a
+     * range the page shows elsewhere (as a removable chip, say) is not repeated here. In both, the trigger carries
+     * `data-set` while either end is set, for a look of its own.
+     */
+    summary?: 'range' | 'label';
+    /** How the ends are written on the trigger, and which weekday the calendar starts on (BCP 47); en-GB reads 05 Mar 2026 and starts on Monday. */
+    locale?: string;
+    /** An accessible name for the trigger, when there is no visible label to point at. */
+    'aria-label'?: string;
+    className?: string;
+}
+/** A range of calendar days, either end optional; two months side by side, one on a phone. */
+export declare const DateRangePicker: ({ id, value, onValueChange, placeholder, locale, summary, "aria-label": ariaLabel, className, ...props }: IDateRangePickerProps) => import('react').JSX.Element;

package/dist/ui/src/components/edyn/date-range-picker/date-range-picker.test.d.ts

@@ -0,0 +1,9 @@
+/**
+ * DateRangePicker: the day arithmetic and the trigger's text.
+ *
+ * PATH TAKEN: converting a calendar day to a Date and back, and how the ends are
+ * written, are plain logic and run in happy-dom. Opening the calendar, picking two
+ * days and the one-month layout on a phone need a real browser and layout, so
+ * e2e/date-range-picker.spec.ts covers those.
+ */
+export {};

package/dist/ui/src/components/edyn/date-range-picker/index.d.ts

@@ -0,0 +1 @@
+export * from './date-range-picker';

package/dist/ui/src/components/edyn/initials-avatar/index.d.ts

@@ -0,0 +1 @@
+export * from './initials-avatar';

package/dist/ui/src/components/edyn/initials-avatar/initials-avatar.d.ts

@@ -0,0 +1,54 @@
+import { ComponentPropsWithoutRef } from 'react';
+/** How many colour pairs the theme defines (--avatar-1-bg, --avatar-1-fg ... in @edyn/theme tokens.css). */
+export declare const AVATAR_TONES = 12;
+/**
+ * The palette entry the text gets, from 1: the same text always gets the same one.
+ * FNV-1a, because a plain multiply-and-add hash puts two letters on a few entries
+ * only (it reduces to 7 x first + second, modulo 12).
+ */
+export declare const avatarTone: (text: string) => number;
+/** Up to two initials, upper-cased: the first letter of the first two words. */
+export declare const initialsOf: (name: string) => string;
+/**
+ * The circle and its letters together, so the initials always fit. The font size
+ * is inline rather than a class on purpose: 9px and 15px are not on Tailwind's
+ * type scale, a custom `text-*` token would be read by tailwind-merge as a colour
+ * and could drop the wrong class, and an inline size cannot be fought by the
+ * fallback's own `text-sm`.
+ */
+declare const SIZES: {
+    readonly xs: {
+        readonly box: "size-5";
+        readonly fontSize: 9;
+    };
+    readonly sm: {
+        readonly box: "size-6";
+        readonly fontSize: 10;
+    };
+    readonly md: {
+        readonly box: "size-8";
+        readonly fontSize: 12;
+    };
+    readonly lg: {
+        readonly box: "size-10";
+        readonly fontSize: 15;
+    };
+};
+export type TInitialsAvatarSize = keyof typeof SIZES;
+export interface IInitialsAvatarProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children' | 'className' | 'role'> {
+    name: string;
+    photoUrl?: string | null;
+    /** xs 20px, sm 24px in table rows, md 32px in a sidebar, lg 40px in a menu's header. */
+    size?: TInitialsAvatarSize;
+    className?: string;
+    /** Colour the initials from the palette (on by default); off, they take the muted look. */
+    autoColor?: boolean;
+    /**
+     * An accessible name. Left out, the avatar is decoration, which is right beside
+     * the person's name; give one when it stands alone.
+     */
+    label?: string;
+}
+/** A person's photo, or their initials on a circle in the palette colour they pick; both themes switch by themselves. */
+export declare const InitialsAvatar: ({ name, photoUrl, size, className, autoColor, label, "aria-label": ariaLabel, ...props }: IInitialsAvatarProps) => import('react').JSX.Element;
+export {};

package/dist/ui/src/components/edyn/initials-avatar/initials-avatar.test.d.ts

@@ -0,0 +1,10 @@
+/**
+ * InitialsAvatar: a stable colour per person, initials that fit, and a palette
+ * that stays readable.
+ *
+ * PATH TAKEN: the hash, the initials and the markup are plain logic, so happy-dom
+ * covers them. The palette claim ("every pair is readable") is checked against
+ * the real tokens.css, converting OKLCH to sRGB and measuring WCAG contrast, so
+ * the numbers cannot drift from the file.
+ */
+export {};

package/dist/ui/src/components/edyn/multi-select/index.d.ts

@@ -0,0 +1 @@
+export * from './multi-select';