@exsto/ds 0.0.1-rc.4 → 0.0.1-rc.6

package/dist/theme.css

@@ -110,7 +110,7 @@
 
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 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);
@@ -126,6 +126,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 {
@@ -184,6 +216,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 {

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

@@ -0,0 +1,30 @@
+import { 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 {
+    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 }: IAnimatedNumberProps) => import('react').JSX.Element;
+export interface INumberTextProps {
+    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 }: 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/date-range-picker/date-range-picker.d.ts

@@ -0,0 +1,26 @@
+/** 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;
+export interface IDateRangePickerProps {
+    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 (BCP 47); en-GB reads 05 Mar 2026. */
+    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;

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,53 @@
+/** 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 {
+    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 }: 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';

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

@@ -0,0 +1,96 @@
+import { 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;
+    label: string;
+    count?: number;
+    leading?: ReactNode;
+};
+/** Every word the component prints, so a product can translate it. */
+export interface IMultiSelectLabels {
+    noMatches: string;
+    loading: string;
+    /** Shown when `error` is `true`; a string `error` replaces it. */
+    error: string;
+    retry: string;
+    loadMore: string;
+    loadingMore: string;
+    clear: string;
+    selectedCount: (count: number) => string;
+}
+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 {
+    /** The trigger's text with nothing picked, which means no filter ("All dealer groups"). */
+    placeholder: string;
+    /** The search field's prompt ("Search dealer groups…"). */
+    searchPlaceholder: string;
+    /** The options to show now: all of a short fixed list, or in async mode the ones for the typed text. */
+    options: readonly TMultiSelectOption[];
+    value: readonly string[];
+    onValueChange: (value: string[]) => void;
+    /**
+     * What the trigger says once something is chosen. `selection` (default) names the one chosen or counts several;
+     * `label` keeps the label and only counts, so a value the page shows elsewhere (as a removable chip, say) is
+     * not repeated here: nothing chosen reads `placeholder`, anything chosen reads `labels.selectedCount(n)`.
+     */
+    summary?: 'selection' | 'label';
+    /** For a Label's htmlFor. */
+    id?: string;
+    'aria-label'?: string;
+    /** Shown but not changeable (a read-only form). */
+    disabled?: boolean;
+    /** Layout only (a width); the look is the kit's. */
+    className?: string;
+    /**
+     * Passing this turns on ASYNC MODE, for lists that grow (people, dealer groups) and must
+     * be searched by the API rather than loaded whole and filtered in the browser. The
+     * component then never filters: it reports the typed text (after `searchDelay`) and shows
+     * whatever `options` the caller supplies for it. It is also called with '' each time the
+     * list opens, so the first page is fetched on demand, not at page load.
+     */
+    onSearchChange?: (text: string) => void;
+    /** How long typing must pause before `onSearchChange` is called. Async mode only. */
+    searchDelay?: number;
+    /**
+     * The options behind the chosen values, for the ones not in the current `options`. A
+     * search that no longer returns a chosen value must not make it vanish from the trigger
+     * or the count, so the caller says what it is called. Without a label a value shows as
+     * itself.
+     */
+    selectedOptions?: readonly TMultiSelectOption[];
+    /** The options for the typed text are on their way. The old ones stay until they arrive. */
+    loading?: boolean;
+    /** The request failed: `true` for the default message, or the message itself. */
+    error?: boolean | string;
+    onRetry?: () => void;
+    /** There is another page after `options`. */
+    hasMore?: boolean;
+    onLoadMore?: () => void;
+    /** The next page is on its way. */
+    loadingMore?: boolean;
+    labels?: Partial<IMultiSelectLabels>;
+}
+/**
+ * The options behind the chosen values, in the order they were chosen. A value with no
+ * known option is kept and shown as itself rather than dropped: a selection must never
+ * change just because a list did.
+ */
+export declare const resolveChosen: (value: readonly string[], options: readonly TMultiSelectOption[], selectedOptions?: readonly TMultiSelectOption[]) => TMultiSelectOption[];
+/** What the trigger says: the placeholder, the one picked, or a count. */
+export declare const summarize: (chosen: readonly TMultiSelectOption[], placeholder: string, labels: IMultiSelectLabels, summary?: "selection" | "label") => string;
+/** Every chosen name, for a tooltip on a trigger whose text is cut. With `label` the names are not shown, so it is the text itself. */
+export declare const fullSelection: (chosen: readonly TMultiSelectOption[], placeholder: string, labels: IMultiSelectLabels, summary?: "selection" | "label") => string;
+/**
+ * A choice of several from a list: a trigger shaped like a Select that says what is picked
+ * (the placeholder, the one picked, or a count), and a popup with a search field and checkbox
+ * options, with the shared popup list style, the ScrollArea's bar and fades, and virtualization
+ * past VIRTUALIZE_FROM options. Nothing chosen means no filter.
+ *
+ * For a short fixed list pass `options` and nothing else: the component filters them as the
+ * user types. For a list that grows, pass `onSearchChange` and it becomes a window onto a
+ * server: the caller fetches the options for the typed text, and says when they are loading,
+ * failed, or have another page.
+ */
+export declare const MultiSelect: ({ placeholder, searchPlaceholder, options, value, onValueChange, id, disabled, className, onSearchChange, searchDelay, selectedOptions, loading, error, onRetry, hasMore, onLoadMore, loadingMore, labels: labelOverrides, summary, ...rest }: IMultiSelectProps) => import('react').JSX.Element;

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

@@ -0,0 +1,9 @@
+/**
+ * MultiSelect: what stays chosen, what the trigger says, and what words it prints.
+ *
+ * PATH TAKEN: the rules that keep a selection stable while the list under it changes
+ * are plain functions, and the closed trigger renders in happy-dom. Opening the popup,
+ * typing, the server round trips and virtualization need a real browser, so
+ * e2e/multi-select.spec.ts drives those against a fake server.
+ */
+export {};

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

@@ -0,0 +1 @@
+export * from './progress-line';

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

@@ -0,0 +1,23 @@
+import { 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 {
+    /** Work is under way. */
+    active: boolean;
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A thin line in the accent (--progress-line, by default --primary) that runs along the top of what is loading (a table's rows
+ * under its header, a page under the top bar). It waits a moment before it shows, so
+ * quick work never flashes it; it eases towards the end without reaching it while the
+ * work runs; when the work is done it runs to the end and only then fades. More work
+ * 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;

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

@@ -0,0 +1,9 @@
+/**
+ * ProgressLine: waits before it shows, eases while the work runs, finishes before it fades.
+ *
+ * PATH TAKEN: the phase machine is timers and state, so happy-dom with the real
+ * clock covers it (the delays are 150, 150 and 200ms, waited out with margin
+ * rather than faked). Carrying on from where the line is after more work arrives
+ * mid-fade needs a real computed transform, so e2e/progress-line.spec.ts covers it.
+ */
+export {};

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

@@ -10,7 +10,7 @@ export declare const Attachment: ({ className, state, size, orientation, ...prop
     state?: "idle" | "uploading" | "processing" | "error" | "done";
 }) => React.JSX.Element;
 declare const attachmentMediaVariants: (props?: ({
-    variant?: "image" | "icon" | null | undefined;
+    variant?: "icon" | "image" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const AttachmentMedia: ({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>) => React.JSX.Element;
 export declare const AttachmentContent: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;

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

@@ -0,0 +1,8 @@
+/**
+ * A Button that renders a link has to stay a link.
+ *
+ * PATH TAKEN: the roles and attributes Base UI emits do not depend on layout, so
+ * happy-dom is enough to assert what assistive technology would be told. The
+ * axe scan over the demo pages covers it again in a real browser.
+ */
+export {};

package/dist/ui/src/components/ui/dropdown-menu/dropdown-menu.d.ts

@@ -4,18 +4,17 @@ export declare const DropdownMenu: ({ ...props }: MenuPrimitive.Root.Props) => R
 export declare const DropdownMenuPortal: ({ ...props }: MenuPrimitive.Portal.Props) => React.JSX.Element;
 export declare const DropdownMenuTrigger: ({ ...props }: MenuPrimitive.Trigger.Props) => React.JSX.Element;
 /**
- * The menu scrolls itself, with the browser's own scrollbar, where the popup
- * lists in Command, Select and Combobox scroll inside a DS ScrollArea.
+ * Scrolls inside a DS ScrollArea like the other popup lists, with the bar shown
+ * for as long as the menu overflows and a fade on whichever end is cut off.
  *
- * That is not an oversight. Base UI puts `role="menu"` on this popup and offers
- * no inner list part to move it onto, and a menu may not contain the
- * presentation wrappers a ScrollArea brings: axe reports it as a critical
- * aria-required-children violation, which is exactly what the palette and the
- * select hit before their scroll container was moved outside the role. Select
- * and Combobox were fixable because their primitives hand the role to a list
- * part (Select.List) and leave the popup as presentation.
+ * Base UI puts `role="menu"` on this popup itself and offers no inner list part
+ * to move it onto, so the ScrollArea sits INSIDE the role. That is only legal
+ * because ScrollArea drops the `role="presentation"` Base UI gives its root,
+ * viewport and content: a menu may not own presentation wrappers (axe reports
+ * a critical aria-required-children violation), but it may own plain divs.
+ * e2e/a11y.spec.ts scans the open menu in both themes to keep it that way.
  */
-export declare const DropdownMenuContent: ({ align, alignOffset, side, sideOffset, className, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) => React.JSX.Element;
+export declare const DropdownMenuContent: ({ align, alignOffset, side, sideOffset, className, children, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) => React.JSX.Element;
 export declare const DropdownMenuGroup: ({ ...props }: MenuPrimitive.Group.Props) => React.JSX.Element;
 export declare const DropdownMenuLabel: ({ className, inset, ...props }: MenuPrimitive.GroupLabel.Props & {
     inset?: boolean;

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-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
+    align?: "inline-end" | "inline-start" | "block-start" | "block-end" | 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/item/item.d.ts

@@ -10,7 +10,7 @@ declare const itemVariants: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const Item: ({ className, variant, size, render, ...props }: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare const itemMediaVariants: (props?: ({
-    variant?: "default" | "image" | "icon" | null | undefined;
+    variant?: "default" | "icon" | "image" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const ItemMedia: ({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) => React.JSX.Element;
 export declare const ItemContent: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;

package/dist/ui/src/components/ui/progress/progress.behavior.test.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Progress tones: a closed set of theme tokens, never a free class string.
+ *
+ * PATH TAKEN: classes and attributes do not depend on layout, so happy-dom is enough. The
+ * tokens' contrast is measured from the real tokens.css below, and the rendered colours in
+ * the browser by e2e/progress-tone.spec.ts.
+ */
+export {};

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

@@ -1,5 +1,47 @@
 import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
+import { VariantProps } from 'class-variance-authority';
+/**
+ * The tones: a closed set of semantic colours rather than a class string, so a bar cannot carry a
+ * colour the theme does not define and dark mode and a re-theme keep working. Each is the theme token
+ * the fill uses; the track is a 20% tint of the same token.
+ */
+declare const TONE_TOKEN: {
+    readonly default: "var(--primary)";
+    readonly info: "var(--info)";
+    readonly success: "var(--success)";
+    readonly warning: "var(--warning)";
+    readonly destructive: "var(--destructive)";
+};
+export type TProgressTone = keyof typeof TONE_TOKEN;
+/**
+ * Colours an app can set without a class string. --progress-color replaces the fill (any colour, such as an
+ * app's own status tokens); --progress-track replaces the track, which does not follow the fill: an app
+ * that wants a neutral track sets it to var(--muted). Both are read where the bar is, so they follow the
+ * theme and can be set on :root or on any ancestor.
+ */
+export declare const progressFill: (tone: TProgressTone) => string;
+export declare const progressTrack: (tone: TProgressTone) => string;
+/**
+ * How the fill eases its width. The defaults are the 300ms ease-in-out it always had; an app retunes them
+ * with --progress-duration and --progress-ease, or turns the easing off with `animated={false}` when the
+ * number it shows is itself animated and the bar is driven from the same clock.
+ */
+export declare const PROGRESS_DURATION = "var(--progress-duration, 300ms)";
+export declare const PROGRESS_EASE = "var(--progress-ease, cubic-bezier(0.4, 0, 0.2, 1))";
+declare const progressTrackVariants: (props?: ({
+    size?: "default" | "sm" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface IProgressProps extends Omit<ProgressPrimitive.Root.Props, 'value'> {
     value?: number | null;
+    /** The bar's colour: a share of a total reads as `warning` when nearly used up, `success` when done. */
+    tone?: TProgressTone;
+    /** 4px (`sm`) or 8px (default) tall. */
+    size?: VariantProps<typeof progressTrackVariants>['size'];
+    /**
+     * Whether the fill eases when `value` changes. Turn it off when the value already moves smoothly
+     * (driven from an animated number's clock), or the bar eases a second time behind it.
+     */
+    animated?: boolean;
 }
-export declare const Progress: ({ value, className, ...props }: IProgressProps) => import('react').JSX.Element;
+export declare const Progress: ({ value, tone, size, animated, className, ...props }: IProgressProps) => import('react').JSX.Element;
+export {};

package/dist/ui/src/components/ui/scroll-area/scroll-area.behavior.test.d.ts

@@ -1,11 +1,12 @@
 /**
  * Edge-fade wiring and the sizing contract for ScrollArea.
  *
- * PATH TAKEN: the fades are revealed by CSS, from the overflow flags Base UI
- * keeps on the root (data-overflow-y-start and friends). happy-dom has neither
- * layout nor a stylesheet, so what is checked here is that each fade is wired to
- * the flag it belongs to and carries the surface it was asked for. That the
- * flags themselves flip at the right moment, and that the fades then land flush
- * on their edges, is measured in a real browser by e2e/scroll-area-fade.spec.ts.
+ * PATH TAKEN: the fades are cut by a mask in scroll-fade.css, keyed off the
+ * overflow flags Base UI keeps on the root (data-overflow-y-start and friends).
+ * happy-dom has neither layout nor a stylesheet, so what is checked here is the
+ * contract the stylesheet reads: which axis the component declares, and that
+ * nothing of the painted version is left behind. The mask itself, and the flags
+ * flipping at the right moment, are measured in a real browser by
+ * e2e/scroll-area-fade.spec.ts.
  */
 export {};

package/dist/ui/src/components/ui/scroll-area/scroll-area.d.ts

@@ -7,7 +7,12 @@ import { ComponentProps, RefObject } from 'react';
  * when there is something to scroll", never a bar on a list that fits.
  */
 export type TScrollbarVisibility = 'hover' | 'scroll' | 'always';
-/** Surface the edge fades blend into. */
+/**
+ * Surface the edge fades blended into, back when they were painted.
+ *
+ * @deprecated The fades are cut into the content by a mask, so they match any
+ * surface without being told which one. Still accepted, and ignored.
+ */
 export type TScrollAreaFadeFrom = 'card' | 'background' | 'sidebar' | 'popover';
 export interface IScrollBarProps extends ComponentProps<typeof BaseScrollArea.Scrollbar> {
     visibility?: TScrollbarVisibility;
@@ -20,7 +25,10 @@ export interface IScrollAreaProps extends ComponentProps<typeof BaseScrollArea.R
     type?: TScrollbarVisibility;
     /** Edge fades hinting at clipped content; each one shows only while its own edge hides something. */
     fade?: boolean;
-    /** Surface the fades blend into: 'card' inside a card (default), 'background' page-level, 'sidebar', 'popover' for popup lists. */
+    /**
+     * @deprecated No longer read. The fades mask the content, so they sit correctly
+     * on any surface; passing this does nothing and is safe to delete.
+     */
     fadeFrom?: TScrollAreaFadeFrom;
     /** Places both bars, for a host that gives them a gutter of their own (a sidebar menu). */
     scrollbarClassName?: string;
@@ -30,6 +38,13 @@ export interface IScrollAreaProps extends ComponentProps<typeof BaseScrollArea.R
     viewportClassName?: string;
     /** Published on the viewport as data-scroll-restoration-id, for a router that restores scroll position. */
     scrollRestorationId?: string;
+    /**
+     * Whether the viewport is a tab stop of its own (default). Turn it off inside a
+     * widget that already owns focus, a menu above all: its items are the tab
+     * stops, and a focusable wrapper between the role and its items is both
+     * redundant and an aria-required-children violation.
+     */
+    focusable?: boolean;
     /** @deprecated Use `viewportId`. */
     viewPortId?: string;
     /** @deprecated Use `viewportRef`. */
@@ -54,13 +69,17 @@ export interface IScrollAreaProps extends ComponentProps<typeof BaseScrollArea.R
  * underneath with no scrollbar, and that reads as a working height right up until the
  * content outgrows it.
  *
- * `fade` draws an edge fade on each side that is currently hiding content, rather than
- * always painting one: a permanent fade is a lie half the time, dimming the last row
- * that fits and promising more below when the reader is already at the end. The static
- * faded-* utilities in @edyn/theme/utilities.css are the other tool, for DECORATIVE
- * edges that do not track scroll position.
+ * `fade` fades out each edge that is currently hiding content, rather than always
+ * fading one: a permanent fade is a lie half the time, dimming the last row that fits
+ * and promising more below when the reader is already at the end. It is cut into the
+ * content by a mask (@edyn/theme/scroll-fade.css), so it needs no surface colour and
+ * reads correctly over a tint, a gradient or a glow. A host that keeps something
+ * unscrolled at the top, such as a sticky table header, exempts that band by setting
+ * --scroll-fade-offset on the ScrollArea. The static faded-* utilities in
+ * @edyn/theme/utilities.css are the other tool, for DECORATIVE edges that do not
+ * track scroll position.
  *
  * The viewport publishes its size as --scroll-area-width/--scroll-area-height CSS vars
  * so children can size against the visible area.
  */
-export declare const ScrollArea: ({ className, children, orientation, type, fade, fadeFrom, scrollbarClassName, viewportId, viewportRef, viewportClassName, scrollRestorationId, viewPortId, viewPortRef, viewPortClassName, scrollVerticalClassName, scrollHorizontalClassName, ...props }: IScrollAreaProps) => import('react').JSX.Element;
+export declare const ScrollArea: ({ className, children, orientation, type, fade, fadeFrom, scrollbarClassName, viewportId, viewportRef, viewportClassName, scrollRestorationId, focusable, viewPortId, viewPortRef, viewPortClassName, scrollVerticalClassName, scrollHorizontalClassName, ...props }: IScrollAreaProps) => import('react').JSX.Element;

package/dist/ui/src/components/ui/table/table.behavior.test.d.ts

@@ -1,10 +1,9 @@
 /**
  * Structure test for the Table primitives.
  *
- * Uses happy-dom (registered by test-setup.ts) and the same React-in-bun-test
- * pattern as packages/dom: render with createRoot + flushSync, then query the
- * real DOM. Guards that the primitives produce a semantic <table> (thead/tbody/
- * th/td/caption) and the shadcn overflow wrapper, so the data-driven edx-table
- * (and the Angular demos that consume it) get a real, accessible table.
+ * Uses happy-dom (registered by test-setup.ts) and the React-in-bun-test
+ * pattern: render with createRoot + flushSync, then query the real DOM. Guards
+ * that the primitives produce a semantic <table> (thead/tbody/th/td/caption) and
+ * the shadcn overflow wrapper, so consumers get a real, accessible table.
  */
 export {};

package/dist/ui/src/index.d.ts

@@ -1,4 +1,9 @@
+export * from './components/edyn/animated-number';
 export * from './components/edyn/audio-player';
+export * from './components/edyn/date-range-picker';
+export * from './components/edyn/initials-avatar';
+export * from './components/edyn/multi-select';
+export * from './components/edyn/progress-line';
 export * from './components/edyn/video-player';
 export * from './components/ui/accordion';
 export * from './components/ui/alert';