@exsto/ds 0.0.1-rc.7 → 0.0.1-rc.9

package/dist/styles.css

@@ -535,6 +535,10 @@
     top: 0;
   }
 
+  .top-0\.5 {
+    top: calc(var(--spacing) * .5);
+  }
+
   .top-1\.5 {
     top: calc(var(--spacing) * 1.5);
   }
@@ -583,6 +587,10 @@
     right: 0;
   }
 
+  .right-0\.5 {
+    right: calc(var(--spacing) * .5);
+  }
+
   .right-1 {
     right: var(--spacing);
   }
@@ -2310,6 +2318,10 @@
     padding-right: calc(var(--spacing) * 8);
   }
 
+  .pr-9 {
+    padding-right: calc(var(--spacing) * 9);
+  }
+
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
@@ -2696,6 +2708,11 @@
     outline-width: 1px;
   }
 
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
   .filter {
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
@@ -4059,6 +4076,10 @@
     cursor: not-allowed;
   }
 
+  .disabled\:border-transparent:disabled {
+    border-color: #0000;
+  }
+
   .disabled\:bg-input\/50:disabled {
     background-color: var(--input);
   }
@@ -4069,14 +4090,38 @@
     }
   }
 
+  .disabled\:bg-muted:disabled {
+    background-color: var(--muted);
+  }
+
   .disabled\:bg-transparent:disabled {
     background-color: #0000;
   }
 
+  .disabled\:text-foreground\/60:disabled {
+    color: var(--foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .disabled\:text-foreground\/60:disabled {
+      color: color-mix(in oklab, var(--foreground) 60%, transparent);
+    }
+  }
+
   .disabled\:opacity-50:disabled {
     opacity: .5;
   }
 
+  .disabled\:shadow-none:disabled {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .disabled\:focus-visible\:ring-0:disabled:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   :where([data-orientation="horizontal"]) .in-data-\[orientation\=horizontal\]\:w-px {
     width: 1px;
   }
@@ -4413,10 +4458,38 @@
     pointer-events: none;
   }
 
+  .aria-disabled\:border-transparent[aria-disabled="true"] {
+    border-color: #0000;
+  }
+
+  .aria-disabled\:bg-muted[aria-disabled="true"] {
+    background-color: var(--muted);
+  }
+
+  .aria-disabled\:text-foreground\/60[aria-disabled="true"] {
+    color: var(--foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .aria-disabled\:text-foreground\/60[aria-disabled="true"] {
+      color: color-mix(in oklab, var(--foreground) 60%, transparent);
+    }
+  }
+
   .aria-disabled\:opacity-50[aria-disabled="true"] {
     opacity: .5;
   }
 
+  .aria-disabled\:shadow-none[aria-disabled="true"] {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .aria-disabled\:focus-visible\:ring-0[aria-disabled="true"]:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .aria-expanded\:bg-muted[aria-expanded="true"] {
     background-color: var(--muted);
   }
@@ -5824,6 +5897,10 @@
     }
   }
 
+  .dark\:disabled\:border-transparent:is(.dark *):disabled {
+    border-color: #0000;
+  }
+
   .dark\:disabled\:bg-input\/80:is(.dark *):disabled {
     background-color: var(--input);
   }
@@ -5834,6 +5911,10 @@
     }
   }
 
+  .dark\:disabled\:bg-muted:is(.dark *):disabled {
+    background-color: var(--muted);
+  }
+
   .dark\:disabled\:bg-transparent:is(.dark *):disabled {
     background-color: #0000;
   }
@@ -5878,6 +5959,14 @@
     }
   }
 
+  .dark\:aria-disabled\:border-transparent:is(.dark *)[aria-disabled="true"] {
+    border-color: #0000;
+  }
+
+  .dark\:aria-disabled\:bg-muted:is(.dark *)[aria-disabled="true"] {
+    background-color: var(--muted);
+  }
+
   .dark\:aria-invalid\:border-destructive\/50:is(.dark *)[aria-invalid="true"] {
     border-color: var(--destructive);
   }
@@ -6163,6 +6252,10 @@
     cursor: not-allowed;
   }
 
+  .data-disabled\:border-transparent:where([data-disabled="true"]), .data-disabled\:border-transparent:where([data-disabled]:not([data-disabled="false"])) {
+    border-color: #0000;
+  }
+
   .data-disabled\:bg-input\/50:where([data-disabled="true"]), .data-disabled\:bg-input\/50:where([data-disabled]:not([data-disabled="false"])) {
     background-color: var(--input);
   }
@@ -6173,10 +6266,38 @@
     }
   }
 
+  .data-disabled\:bg-muted:where([data-disabled="true"]), .data-disabled\:bg-muted:where([data-disabled]:not([data-disabled="false"])) {
+    background-color: var(--muted);
+  }
+
+  .data-disabled\:text-foreground\/60:where([data-disabled="true"]), .data-disabled\:text-foreground\/60:where([data-disabled]:not([data-disabled="false"])) {
+    color: var(--foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .data-disabled\:text-foreground\/60:where([data-disabled="true"]), .data-disabled\:text-foreground\/60:where([data-disabled]:not([data-disabled="false"])) {
+      color: color-mix(in oklab, var(--foreground) 60%, transparent);
+    }
+  }
+
   .data-disabled\:opacity-50:where([data-disabled="true"]), .data-disabled\:opacity-50:where([data-disabled]:not([data-disabled="false"])) {
     opacity: .5;
   }
 
+  .data-disabled\:shadow-none:where([data-disabled="true"]), .data-disabled\:shadow-none:where([data-disabled]:not([data-disabled="false"])) {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  :is(.data-disabled\:focus-visible\:ring-0:where([data-disabled="true"]), .data-disabled\:focus-visible\:ring-0:where([data-disabled]:not([data-disabled="false"]))):focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .dark\:data-disabled\:border-transparent:is(.dark *):where([data-disabled="true"]), .dark\:data-disabled\:border-transparent:is(.dark *):where([data-disabled]:not([data-disabled="false"])) {
+    border-color: #0000;
+  }
+
   .dark\:data-disabled\:bg-input\/80:is(.dark *):where([data-disabled="true"]), .dark\:data-disabled\:bg-input\/80:is(.dark *):where([data-disabled]:not([data-disabled="false"])) {
     background-color: var(--input);
   }
@@ -6187,6 +6308,10 @@
     }
   }
 
+  .dark\:data-disabled\:bg-muted:is(.dark *):where([data-disabled="true"]), .dark\:data-disabled\:bg-muted:is(.dark *):where([data-disabled]:not([data-disabled="false"])) {
+    background-color: var(--muted);
+  }
+
   .data-active\:bg-background:where([data-state="active"]), .data-active\:bg-background:where([data-active]:not([data-active="false"])) {
     background-color: var(--background);
   }

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

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+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;
 /**
@@ -7,7 +7,7 @@ export declare const formatCount: (value: number) => string;
  * been on screen.
  */
 export declare const useAnimatedValues: (targets: number[], element: RefObject<Element | null>) => number[];
-export interface IAnimatedNumberProps {
+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;
@@ -18,8 +18,8 @@ export interface IAnimatedNumberProps {
  * 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 }: IAnimatedNumberProps) => import('react').JSX.Element;
-export interface INumberTextProps {
+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;
@@ -27,4 +27,4 @@ export interface INumberTextProps {
     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 }: INumberTextProps) => import('react').JSX.Element;
+export declare const NumberText: ({ element, shown, value, format, className, ...props }: INumberTextProps) => import('react').JSX.Element;

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,54 @@
+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;
+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. */
+    onValueChange: (value: string | undefined) => 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-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/date-text.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,3 +1,4 @@
+import { ComponentPropsWithoutRef } from 'react';
 /** A range of calendar days as yyyy-mm-dd, either end optional. */
 export type TDateRange = {
     from?: string;
@@ -5,7 +6,8 @@ export type TDateRange = {
 };
 export declare const dayToDate: (value: string | undefined) => Date | undefined;
 export declare const dateToDay: (date: Date | undefined) => string | undefined;
-export interface IDateRangePickerProps {
+/** 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;
@@ -16,11 +18,11 @@ export interface IDateRangePickerProps {
      * `data-set` while either end is set, for a look of its own.
      */
     summary?: 'range' | 'label';
-    /** How the ends are written on the trigger (BCP 47); en-GB reads 05 Mar 2026. */
+    /** 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, }: IDateRangePickerProps) => import('react').JSX.Element;
+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/initials-avatar/initials-avatar.d.ts

@@ -1,3 +1,4 @@
+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;
 /**
@@ -34,7 +35,7 @@ declare const SIZES: {
     };
 };
 export type TInitialsAvatarSize = keyof typeof SIZES;
-export interface IInitialsAvatarProps {
+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. */
@@ -49,5 +50,5 @@ export interface IInitialsAvatarProps {
     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 }: IInitialsAvatarProps) => import('react').JSX.Element;
+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/multi-select/multi-select.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 /** An option: `leading` goes before its label (an avatar, a status dot), `count` after it (how many it would show). */
 export type TMultiSelectOption = {
     value: string;
@@ -21,7 +21,8 @@ export interface IMultiSelectLabels {
 export declare const DEFAULT_MULTI_SELECT_LABELS: IMultiSelectLabels;
 /** Above this many options a list draws only the rows on screen. */
 export declare const VIRTUALIZE_FROM = 100;
-export interface IMultiSelectProps {
+/** Anything else a button takes (data-*, aria-*, title) goes to the trigger. */
+export interface IMultiSelectProps extends Omit<ComponentPropsWithoutRef<'button'>, 'placeholder' | 'value' | 'defaultValue' | 'id' | 'disabled' | 'className' | 'children' | 'onChange'> {
     /** The trigger's text with nothing picked, which means no filter ("All dealer groups"). */
     placeholder: string;
     /** The search field's prompt ("Search dealer groups…"). */
@@ -39,6 +40,15 @@ export interface IMultiSelectProps {
     /** For a Label's htmlFor. */
     id?: string;
     'aria-label'?: string;
+    /**
+     * Marks the trigger invalid: the kit's destructive border, and a screen reader says so. For a form that does not use
+     * Field; inside one, its invalid state already does this.
+     */
+    'aria-invalid'?: boolean | 'true' | 'false';
+    /**
+     * The id of the text that explains it (the error). Added to what a Field names already, never replacing it.
+     */
+    'aria-describedby'?: string;
     /** Shown but not changeable (a read-only form). */
     disabled?: boolean;
     /** Layout only (a width); the look is the kit's. */

package/dist/ui/src/components/edyn/progress-line/progress-line.d.ts

@@ -1,11 +1,11 @@
-import { CSSProperties } from 'react';
+import { ComponentPropsWithoutRef, CSSProperties } from 'react';
 /**
  * The line's colour: an app sets --progress-line (on :root, or on any element above the
  * line) to match its accent. The fallback is read where the line is, so it follows the
  * theme, which a default declared once on :root would not.
  */
 export declare const PROGRESS_LINE_COLOR = "var(--progress-line, var(--primary))";
-export interface IProgressLineProps {
+export interface IProgressLineProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'className' | 'style' | 'role'> {
     /** Work is under way. */
     active: boolean;
     label?: string;
@@ -20,4 +20,4 @@ export interface IProgressLineProps {
  * before it has gone carries on from where it is. With reduced motion it is a
  * full-width line that fades.
  */
-export declare const ProgressLine: ({ active, label, className, style }: IProgressLineProps) => import('react').JSX.Element;
+export declare const ProgressLine: ({ active, label, className, style, ...props }: IProgressLineProps) => import('react').JSX.Element;

package/dist/ui/src/components/edyn/rich-text-editor/sync.d.ts

@@ -0,0 +1,19 @@
+import { Editor } from '@tiptap/core';
+/**
+ * Whether commands may be called on the editor. TipTap builds an editor during the render, mounts its view later, and
+ * destroys one that has not been mounted within a moment (useEditor then makes a new one), so an effect can be handed an
+ * editor that is not there yet or no longer is. `isDestroyed` is true for both: it reads true until the view exists. A
+ * destroyed editor has no command manager, so `editor.commands` throws on it.
+ */
+export declare const isLive: (editor: Editor) => boolean;
+/**
+ * Brings the editor to a value the parent passed in, if it is one the editor did not just report itself.
+ * `known` is the last HTML the editor and the parent agree on (the starting value, then whatever the editor emitted or was
+ * given). The caret stays where it was, kept inside the new content, so a value changed from outside while the writer is
+ * typing does not throw the caret to the start.
+ */
+export declare const syncValue: (editor: Editor, value: string | undefined, known: {
+    current: string | undefined;
+}) => void;
+/** Sets whether the editor can be edited without telling the app something changed (TipTap emits an update by default). */
+export declare const syncEditable: (editor: Editor, editable: boolean) => void;

package/dist/ui/src/components/edyn/rich-text-editor/sync.test.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Keeping the editor in step with the parent's value without ever touching an editor that is not there. A controlled
+ * RichTextEditor crashed on mount in rc.7 ("Cannot read properties of null (reading 'commands')"): TipTap makes the editor
+ * during the render, mounts its view later and destroys one that is not mounted in time, and the value effect ran at the
+ * first commit for every controlled value and called a command on whatever editor it was handed.
+ *
+ * PATH TAKEN: the destroyed editor is reproduced as the state TipTap leaves it in (no command manager, so `commands`
+ * throws), because the timing that produces it in an app cannot be driven from a test. The real behaviour in a browser,
+ * mount order included, is e2e/rich-text-editor-lifecycle.spec.ts.
+ */
+export {};

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

@@ -1,6 +1,6 @@
 import { TCssLength } from '../../../lib/utils';
 import * as React from 'react';
-export interface IVideoPlayerProps {
+export interface IVideoPlayerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'className' | 'title' | 'onPlay' | 'onPause' | 'onEnded' | 'onTimeUpdate'> {
     /** Video source URL. */
     src?: string;
     /** Still frame shown before playback starts. */
@@ -52,4 +52,4 @@ export interface IVideoPlayerProps {
  * both themes. Video is dark, so the letterbox and controls must stay dark and
  * light-on-dark; this re-scopes existing tokens rather than hardcoding a colour.
  */
-export declare const VideoPlayer: ({ src, poster, title, description, muted, loop, disabled, width, height, ratio, className, "aria-label": ariaLabel, onPlay, onPause, onEnded, onTimeUpdate, }: IVideoPlayerProps) => React.JSX.Element;
+export declare const VideoPlayer: ({ src, poster, title, description, muted, loop, disabled, width, height, ratio, className, "aria-label": ariaLabel, style, onPlay, onPause, onEnded, onTimeUpdate, ...props }: IVideoPlayerProps) => React.JSX.Element;

package/dist/ui/src/components/forwarded-props.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Every exported component hands `aria-label`, `id` and `data-testid` to the element it documents as its root or main part.
+ * A component that took a closed list of props dropped the rest (Tabs' tablist had no accessible name even though the app
+ * passed `aria-label`), so this renders each one with the three and finds them again.
+ *
+ * Components that are not covered here, and why, are listed in INTENTIONAL_DROPS.
+ */
+export {};

package/dist/ui/src/components/ui/accordion/accordion.d.ts

@@ -1,5 +1,6 @@
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
 import type * as React from 'react';
-export interface IAccordionProps {
+export interface IAccordionProps extends Omit<BaseAccordion.Root.Props, 'value' | 'defaultValue' | 'onValueChange' | 'multiple' | 'className' | 'children'> {
     value?: string[];
     defaultValue?: string[];
     onValueChange?: (value: string[]) => void;
@@ -7,21 +8,21 @@ export interface IAccordionProps {
     className?: string;
     children: React.ReactNode;
 }
-export declare const Accordion: ({ value, defaultValue, onValueChange, multiple, className, children }: IAccordionProps) => React.JSX.Element;
-export interface IAccordionItemProps {
+export declare const Accordion: ({ value, defaultValue, onValueChange, multiple, className, children, ...props }: IAccordionProps) => React.JSX.Element;
+export interface IAccordionItemProps extends Omit<BaseAccordion.Item.Props, 'value' | 'disabled' | 'className' | 'children'> {
     value: string;
     disabled?: boolean;
     className?: string;
     children: React.ReactNode;
 }
-export declare const AccordionItem: ({ value, disabled, className, children }: IAccordionItemProps) => React.JSX.Element;
-export interface IAccordionTriggerProps {
+export declare const AccordionItem: ({ value, disabled, className, children, ...props }: IAccordionItemProps) => React.JSX.Element;
+export interface IAccordionTriggerProps extends Omit<BaseAccordion.Trigger.Props, 'className' | 'children'> {
     className?: string;
     children: React.ReactNode;
 }
-export declare const AccordionTrigger: ({ className, children }: IAccordionTriggerProps) => React.JSX.Element;
-export interface IAccordionContentProps {
+export declare const AccordionTrigger: ({ className, children, ...props }: IAccordionTriggerProps) => React.JSX.Element;
+export interface IAccordionContentProps extends Omit<BaseAccordion.Panel.Props, 'className' | 'children'> {
     className?: string;
     children: React.ReactNode;
 }
-export declare const AccordionContent: ({ className, children }: IAccordionContentProps) => React.JSX.Element;
+export declare const AccordionContent: ({ className, children, ...props }: IAccordionContentProps) => React.JSX.Element;

package/dist/ui/src/components/ui/badge/badge.d.ts

@@ -1,7 +1,7 @@
 import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 export declare const badgeVariants: (props?: ({
-    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | "success" | "warning" | "info" | null | undefined;
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | "success" | "warning" | "info" | null | undefined;
     size?: "default" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const Badge: ({ className, variant, size, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/ui/src/components/ui/button/button.d.ts

@@ -1,7 +1,7 @@
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
 import { VariantProps } from 'class-variance-authority';
 export declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const Button: ({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) => import('react').JSX.Element;

package/dist/ui/src/components/ui/input-group/input-group.d.ts

@@ -6,7 +6,7 @@ export interface IInputGroupProps extends React.ComponentProps<'div'> {
 export declare const InputGroup: ({ className, ...props }: IInputGroupProps) => React.JSX.Element;
 export type TInputGroupAddonAlign = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';
 declare const inputGroupAddonVariants: (props?: ({
-    align?: "inline-end" | "inline-start" | "block-start" | "block-end" | null | undefined;
+    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface IInputGroupAddonProps extends React.ComponentProps<'div'>, VariantProps<typeof inputGroupAddonVariants> {
 }

package/dist/ui/src/components/ui/pagination/pagination.d.ts

@@ -1,3 +1,4 @@
+import type * as React from 'react';
 export type TPaginationRangeItem = number | 'ellipsis';
 /**
  * Compute the ordered list of page numbers and ellipsis markers to render.
@@ -7,11 +8,11 @@ export type TPaginationRangeItem = number | 'ellipsis';
 export declare const getPaginationRange: (page: number, count: number, siblingCount?: number) => TPaginationRangeItem[];
 /** Clamp a page number to the valid [1, count] range (count <= 0 yields 1). */
 export declare const clampPage: (page: number, count: number) => number;
-export interface IPaginationProps {
+export interface IPaginationProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'className' | 'children'> {
     page: number;
     count: number;
     onPageChange: (page: number) => void;
     siblingCount?: number;
     className?: string;
 }
-export declare const Pagination: ({ page, count, onPageChange, siblingCount, className }: IPaginationProps) => import('react').JSX.Element;
+export declare const Pagination: ({ page, count, onPageChange, siblingCount, className, ...props }: IPaginationProps) => React.JSX.Element;