@ahrowe/ui 0.35.0 → 0.37.0

package/dist/cjs-types/common/themeProvider/theme.types.d.ts

@@ -0,0 +1,272 @@
+/**
+ * All CSS custom properties used by the component library.
+ * Every key is optional so a theme only needs to declare the variables it overrides.
+ * You may also add arbitrary custom variables via the index signature.
+ */
+export interface ThemeVariables {
+    '--grey'?: string;
+    '--lightgrey'?: string;
+    '--lightergrey'?: string;
+    '--white'?: string;
+    '--red'?: string;
+    '--lighter-red'?: string;
+    '--green'?: string;
+    '--lighter-green'?: string;
+    '--blue'?: string;
+    '--lighter-blue'?: string;
+    '--black'?: string;
+    '--primary-color'?: string;
+    /** Optional gradient layered over --primary-color on large filled surfaces (Button, Chip, ProgressBar, Switch, Slider, Pagination, OptionPicker, Badge). --primary-color stays the solid and stays required: borders, outlines, strokes, shadows and text read it, and a gradient is invalid in all of them. Unset means a flat --primary-color everywhere. */
+    '--primary-gradient'?: string;
+    '--primary-accent'?: string;
+    '--primary-lighter'?: string;
+    '--accent-color'?: string;
+    '--accent-color-light'?: string;
+    '--text-color'?: string;
+    '--text-dark'?: string;
+    '--text-light'?: string;
+    '--text-on-primary'?: string;
+    '--text-on-delete'?: string;
+    '--border-color'?: string;
+    /** Focus ring/border colour used across interactive components. Falls back to --primary-color when unset. */
+    '--focus-border-color'?: string;
+    '--background'?: string;
+    '--background-accent'?: string;
+    '--background-accent-dark'?: string;
+    '--background-accent-light'?: string;
+    '--background-modal'?: string;
+    /** Pale surface behind a checkbox and similar low-emphasis fills. */
+    '--light-background-color'?: string;
+    '--success-color'?: string;
+    '--success-lighter'?: string;
+    '--error-color'?: string;
+    '--error-lighter'?: string;
+    '--required-mark-color'?: string;
+    '--info-color'?: string;
+    '--info-lighter'?: string;
+    '--warn-color'?: string;
+    '--warn-lighter'?: string;
+    '--default-font-size'?: string;
+    '--text-small-font-size'?: string;
+    '--header-font-size'?: string;
+    '--header-medium-font-size'?: string;
+    '--header-small-font-size'?: string;
+    '--default-font-weight'?: string;
+    '--header-font-weight'?: string;
+    '--default-font'?: string;
+    '--themed-font'?: string;
+    /** Font for code and stack traces. Falls back to `monospace`. */
+    '--monospace-font'?: string;
+    '--disabled-input-color'?: string;
+    '--disabled-font-color'?: string;
+    '--input-background'?: string;
+    '--input-icon-color'?: string;
+    '--error-border-color'?: string;
+    '--input-label-resting-color'?: string;
+    '--input-label-floating-color'?: string;
+    '--search-input-color'?: string;
+    /** Colour of an input's error message. */
+    '--error-font-color'?: string;
+    '--default-border-radius'?: string;
+    '--padding-sides'?: string;
+    '--margin-top'?: string;
+    '--spacing-s'?: string;
+    '--spacing-m'?: string;
+    '--spacing-l'?: string;
+    /** Falls back to 4px. */
+    '--spacing-xs'?: string;
+    /** Avatar corner radius. Falls back to --default-border-radius when unset. */
+    '--avatar-radius'?: string;
+    /** Padding around the modal panel's content. Falls back to --spacing-l when unset. */
+    '--modal-padding'?: string;
+    /** Gap between the modal's header, body and footer. Falls back to --spacing-l when unset. */
+    '--modal-gap'?: string;
+    /** How far the modal body bleeds past its own edge so a focus ring isn't clipped by the
+     * scroll container. Falls back to half of --modal-gap when unset. */
+    '--modal-body-bleed'?: string;
+    /** How far the modal body's content fades into the header and footer while there is more to
+     * scroll. Set to 0px to switch the fade off. Falls back to --modal-gap plus --modal-body-bleed. */
+    '--modal-scroll-fade'?: string;
+    /** Widest the modal panel gets. Falls back to the width left once its own padding is kept
+     * clear on both sides. */
+    '--modal-max-width'?: string;
+    /** Tallest the modal panel gets. Falls back to the height left once its own padding is kept
+     * clear above and below. */
+    '--modal-max-height'?: string;
+    /** How far the fade runs from each edge. Falls back to 24px. Modal and Carousel set their own
+     * instead, through --modal-scroll-fade and a value tuned to the dot strip. */
+    '--scroll-fade-length'?: string;
+    /** Widest a bottom sheet gets before it stops growing and centres. Falls back to 560px. */
+    '--sheet-max-width'?: string;
+    /** Tallest a bottom sheet gets, as a ceiling on top of the space actually visible. Falls back
+     * to 70dvh. Modal sets 90dvh on its own panel, so this does not reach a Modal sheet. */
+    '--sheet-max-height'?: string;
+    /** Padding below a sheet's content, clearing a phone's home indicator. Falls back to 8px, or
+     * the device's own safe-area inset where that is larger. Modal sets --modal-padding on its own
+     * panel, so this does not reach a Modal sheet. */
+    '--sheet-safe-padding'?: string;
+    /** Default-style button background. Falls back to transparent when unset. */
+    '--button-default-background'?: string;
+    /** Default-style button text colour. Falls back to --text-color when unset. */
+    '--button-default-color'?: string;
+    /** Default-style button border (full `border` shorthand, e.g. `1px solid var(--border-color)`). Falls back to a transparent 1px border when unset. */
+    '--button-default-border'?: string;
+    '--card-shadow'?: string;
+    '--background-card-elevated'?: string;
+    '--background-card-outlined'?: string;
+    '--background-card-filled'?: string;
+    /** Slider track (unfilled) colour. Falls back to --background-accent-light. */
+    '--slider-track-color'?: string;
+    /** Slider filled-range colour. Falls back to --primary-color. */
+    '--slider-range-color'?: string;
+    /** Slider thumb colour. Falls back to --primary-color. */
+    '--slider-thumb-color'?: string;
+    /** Slider thumb diameter. Falls back to 1.125x --default-font-size, i.e. 18px at a 16px base (also settable per instance via the `size` prop). */
+    '--slider-thumb-size'?: string;
+    /** Slider track thickness. Falls back to 0.375x --default-font-size, i.e. 6px at a 16px base. */
+    '--slider-track-height'?: string;
+    /** Step marker diameter. Falls back to 40px. */
+    '--stepper-marker-size'?: string;
+    /** Step marker corner radius. Falls back to --default-border-radius. */
+    '--stepper-marker-radius'?: string;
+    /** Idle (upcoming) marker/connector colour. Falls back to --primary-lighter. */
+    '--stepper-idle-color'?: string;
+    /** Current-step marker colour. Falls back to --primary-color. */
+    '--stepper-active-color'?: string;
+    /** Completed-step marker fill/colour. Falls back to --primary-color. */
+    '--stepper-done-color'?: string;
+    /** Errored-step marker colour. Falls back to --error-color. */
+    '--stepper-error-color'?: string;
+    /** Completed connector colour. Falls back to --primary-color. */
+    '--stepper-connector-color'?: string;
+    /** Completed connector thickness. Falls back to 3px. */
+    '--stepper-connector-thickness'?: string;
+    /** Not-yet-reached connector thickness. Falls back to 1px. */
+    '--stepper-connector-idle-thickness'?: string;
+    /** Gap between marker and label, and grid column gap. Falls back to 12px. */
+    '--stepper-gap'?: string;
+    /** Text/check colour on a filled marker. Falls back to --text-on-primary. */
+    '--stepper-text-on-marker'?: string;
+    /** Timer ring track (unfilled) colour. Falls back to --background-accent-light. */
+    '--timer-track-color'?: string;
+    /** Timer ring progress (remaining time) colour. Falls back to --primary-color. */
+    '--timer-progress-color'?: string;
+    /** Timer ring colour once inside the urgent threshold. Falls back to --error-color. */
+    '--timer-urgent-color'?: string;
+    /** Timer ring diameter. Falls back to 10em, i.e. 160px at a 16px base (also settable per instance via the `size` prop). */
+    '--timer-size'?: string;
+    /** Timer ring stroke thickness. Falls back to 10px (also settable per instance via `strokeWidth`). */
+    '--timer-stroke-width'?: string;
+    /** Timer MM:SS readout text colour. Falls back to --text-color. */
+    '--timer-text-color'?: string;
+    /** Timer label (below the readout) text colour. Falls back to --text-dark. */
+    '--timer-label-color'?: string;
+    /** Ripple shown as the timer runs out. Falls back to --timer-progress-color. */
+    '--timer-ripple-color'?: string;
+    /** Tooltip bubble and details badge. Falls back to an inverse of the page: --text-color mixed 82% into --background. */
+    '--tooltip-background'?: string;
+    /** Text on that bubble. Falls back to --background. */
+    '--tooltip-color'?: string;
+    /** Size of the checkmark box. Falls back to 1.375em, i.e. 22px at a 16px base. */
+    '--checkbox-size'?: string;
+    /** Gap between the box and its label. Falls back to 0.5em, i.e. 8px at a 16px base. */
+    '--checkbox-gap'?: string;
+    /** Size of the inline colour swatch. Falls back to 2em, i.e. 32px at a 16px base. */
+    '--swatch-size'?: string;
+    /** Diameter of a radio. Falls back to 1.125em, i.e. 18px at a 16px base. */
+    '--radio-size'?: string;
+    /** Gap between a radio and its label. Falls back to 0.625em, i.e. 10px at a 16px base. */
+    '--radio-gap'?: string;
+    /** Diameter of the main button. Falls back to 56px. */
+    '--fab-size'?: string;
+    /** Diameter of a speed-dial entry's button. Falls back to 40px. */
+    '--fab-mini-size'?: string;
+    /** Icon box inside either. Falls back to 18px, and does not follow --fab-size. */
+    '--fab-icon-size'?: string;
+    /** Dot colour. Falls back to --primary-color. */
+    '--timeline-dot-color'?: string;
+    /** Ring drawn around a dot, separating it from the line. Falls back to --background. */
+    '--timeline-dot-border'?: string;
+    /** Dot diameter. Falls back to 14px. */
+    '--timeline-dot-size'?: string;
+    /** Diameter of a dot carrying an icon. Falls back to 28px. */
+    '--timeline-icon-dot-size'?: string;
+    /** Connector colour. Falls back to --border-color. */
+    '--timeline-line-color'?: string;
+    /** Connector thickness. Falls back to 2px. */
+    '--timeline-line-thickness'?: string;
+    /** Gap between the dot column and the content. Falls back to 16px. */
+    '--timeline-gap'?: string;
+    /** Vertical gap between items. Falls back to 20px. */
+    '--timeline-item-gap'?: string;
+    /** Row height. Falls back to 32px. */
+    '--tree-node-height'?: string;
+    /** Selected row background. Falls back to --primary-color. */
+    '--tree-selected-background'?: string;
+    /** Selected row text. Falls back to --text-on-primary. */
+    '--tree-selected-color'?: string;
+    /** Page button size. Falls back to 36px. */
+    '--pagination-size'?: string;
+    /** Gap between page buttons. Falls back to 4px. */
+    '--pagination-gap'?: string;
+    /** Current page background. Falls back to --primary-color. */
+    '--pagination-active-background'?: string;
+    /** Current page text. Falls back to --text-on-primary. */
+    '--pagination-active-color'?: string;
+    /** Filled symbol. Falls back to --primary-color. */
+    '--rating-filled-color'?: string;
+    /** Empty symbol. Falls back to --background-accent-light. */
+    '--rating-empty-color'?: string;
+    /** Symbol size. Falls back to 1.25x --default-font-size, i.e. 20px at a 16px base. */
+    '--rating-size'?: string;
+    /** Minimum height of the control. Falls back to `calc(1.25em + 14px)`. */
+    '--multi-select-min-height'?: string;
+    /** Maximum height of the open option panel. Falls back to 260px. */
+    '--multi-select-panel-height'?: string;
+    /** Width a column collapses to once it has no cards (see `collapseEmptyColumns`). Falls back to 140px. */
+    '--kanban-empty-column-width'?: string;
+    '--option-picker-padding'?: string;
+    /** Track (unfilled) background colour. Falls back to --background-accent. */
+    '--progress-bar-track-color'?: string;
+    /** Canvas behind the plan. Falls back to --background. */
+    '--plan-canvas-background'?: string;
+    /** Grid lines, drawn at low opacity. Falls back to --text-color. */
+    '--plan-grid-color'?: string;
+    /** The storey below, traced under the current one. Falls back to --text-dark. */
+    '--plan-underlay-color'?: string;
+    /** Room floor. Falls back to --background-accent. */
+    '--plan-room-fill'?: string;
+    /** Room floor under the pointer. Falls back to --background-accent-light. */
+    '--plan-room-fill-hover'?: string;
+    /** Edge of the walls bounding a selected room. Falls back to --primary-color. */
+    '--plan-room-edge-selected'?: string;
+    /** Body of those same walls. Falls back to --primary-lighter. */
+    '--plan-room-edge-selected-fill'?: string;
+    /** Wall body. Falls back to --text-color mixed 58% into the canvas. */
+    '--plan-wall-fill'?: string;
+    /** Wall edge, its caps and the jamb faces. Falls back to --text-color mixed 38% in. */
+    '--plan-wall-outline'?: string;
+    /** Wall corner treatment, any `stroke-linejoin` value. Falls back to `round`. */
+    '--plan-wall-join'?: string;
+    /** How far a mitred corner may run, when --plan-wall-join is `miter`. Falls back to `4`. */
+    '--plan-wall-miter-limit'?: string;
+    /** Door leaf and swing arc. Falls back to --text-dark. */
+    '--plan-door-color'?: string;
+    /** Window pane line. Falls back to --info-color. */
+    '--plan-window-color'?: string;
+    /** RoomDrawer's snap construction lines. Falls back to --info-color. */
+    '--plan-guide-color'?: string;
+    /** RoomDrawer's ruler. Falls back to --primary-color. */
+    '--plan-measure-color'?: string;
+    [key: string]: string | undefined;
+}
+export interface Theme {
+    /** Unique identifier used to select this theme via `currentThemeId`. */
+    id: string;
+    /**
+     * ID of another theme whose variables are applied before this theme's own
+     * variables, enabling lightweight inheritance / layering.
+     */
+    baseThemeId?: string;
+    variables: ThemeVariables;
+}

package/dist/cjs-types/common/themeProvider/themeProvider.d.ts

@@ -0,0 +1,38 @@
+import { default as React, Component } from 'react';
+import { Theme } from './theme.types.js';
+interface Props {
+    children: React.ReactNode;
+    themes?: Theme[];
+    currentThemeId?: string;
+}
+interface State {
+    resolvedVariables: Record<string, string>;
+    colorFadeActive: boolean;
+    currentThemeColor: string | null;
+}
+declare class ThemeProvider extends Component<Props, State> {
+    state: State;
+    private colorFadeTimeout;
+    private wrapperRef;
+    private themeColorMeta;
+    private createdThemeColorMeta;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Props, prevState: State): void;
+    componentWillUnmount(): void;
+    /**
+     * Replaces the former react-helmet usage: keep a single
+     * <meta name="theme-color"> in sync with the active theme's primary colour.
+     * Reuses a tag the host app already declares; otherwise creates its own
+     * (and removes it again on unmount).
+     */
+    private syncThemeColorMeta;
+    /**
+     * Resolves the full variable set for a given theme ID by walking up the
+     * baseThemeId chain.  Returns variables ordered from deepest ancestor to
+     * the requested theme so callers can merge in order (later entries win).
+     */
+    private resolveChain;
+    private applyTheme;
+    render(): React.JSX.Element;
+}
+export default ThemeProvider;

package/dist/cjs-types/common/themeProvider/themeVariablesContext.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The nearest ThemeProvider's resolved variables, for content that renders outside its DOM
+ * subtree. Theme variables reach a component by CSS inheritance, which a portal breaks: a
+ * `BodyEnd` child lands wherever `#bodyEnd` happens to be, so it picks up whatever provider
+ * wraps *that* node rather than the one it was written under.
+ *
+ * Deliberately its own module rather than a member of `themeProvider.tsx`: BodyEnd needs the
+ * context and nothing else, and importing the component for it would pull the whole
+ * ThemeProvider into every bundle that uses a portal.
+ */
+export declare const ThemeVariablesContext: import('react').Context<Record<string, string> | null>;

package/dist/cjs-types/common/themeProvider/useTheme.d.ts

@@ -0,0 +1,4 @@
+export declare function useTheme(defaultThemeId?: string): {
+    currentThemeId: string;
+    setCurrentThemeId: (themeId: string) => void;
+};

package/dist/cjs-types/common/tilt/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './tilt.js';
+export * from './tilt.types.js';
+export { defaultTiltEasing } from './tiltMath.js';
+export type { TiltAxisLock } from './tiltMath.js';

package/dist/cjs-types/common/tilt/tilt.d.ts

@@ -0,0 +1,3 @@
+import { TiltProps } from './tilt.types.js';
+declare function Tilt(props: TiltProps): import("react").JSX.Element;
+export default Tilt;

package/dist/cjs-types/common/tilt/tilt.types.d.ts

@@ -0,0 +1,40 @@
+import { CSSProperties, ReactNode, Ref } from 'react';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+import { TiltAxisLock } from './tiltMath.js';
+export type TiltTrackingMode = 'self' | 'group';
+export type TiltSlots = 'root' | 'perspective' | 'surface';
+export interface TiltHandle {
+    /** Directly drives the tilt rotation, clamped to `maxTilt`/`maxTiltX`/`maxTiltY`. For custom choreography (e.g. shuffling). */
+    setTilt: (rotateX: number, rotateY: number) => void;
+    /** Returns to flat. */
+    reset: () => void;
+}
+export interface TiltProps extends HtmlProps {
+    children?: ReactNode;
+    /** Shared clamp for both tilt axes, in degrees. @default 15 */
+    maxTilt?: number;
+    /** Overrides `maxTilt` for the X axis (tilts top/bottom edges, driven by vertical cursor position). */
+    maxTiltX?: number;
+    /** Overrides `maxTilt` for the Y axis (tilts left/right edges, driven by horizontal cursor position). */
+    maxTiltY?: number;
+    /** CSS `perspective` in px, applied to the perspective wrapper. @default 800 */
+    perspective?: number;
+    /** Easing curve applied to the normalized cursor offset (range roughly [-1, 1]) before scaling by `maxTilt`. @default defaultTiltEasing */
+    easing?: (t: number) => number;
+    /** Disables tilt on one axis entirely. @default 'none' */
+    lockAxis?: TiltAxisLock;
+    /** Cosmetic `scale()` applied together with the tilt while tracking. @default 1 */
+    scaleOnHover?: number;
+    /** `'self'` tracks the pointer over this element's own bounding box; `'group'` reads a shared pointer position from an ancestor `TiltGroup`, falling back to `'self'` if none exists. @default 'self' */
+    trackingMode?: TiltTrackingMode;
+    /** Disables tilt tracking entirely. @default false */
+    disabled?: boolean;
+    /** Fires on every applied tilt update. */
+    onTiltChange?: (rotateX: number, rotateY: number) => void;
+    /** Imperative handle for driving the tilt directly. */
+    ref?: Ref<TiltHandle>;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<TiltSlots>;
+    styles?: SlotStyles<TiltSlots>;
+}

package/dist/cjs-types/common/tilt/tiltMath.d.ts

@@ -0,0 +1,24 @@
+export type TiltAxisLock = 'x' | 'y' | 'none';
+export interface ComputeTiltOptions {
+    maxTiltX: number;
+    maxTiltY: number;
+    easing: (t: number) => number;
+    lockAxis: TiltAxisLock;
+}
+export interface TiltResult {
+    rotateX: number;
+    rotateY: number;
+}
+/**
+ * Eases faster near the edges (|t| close to 1) and flatter near the center (|t| close to 0),
+ * while staying odd-symmetric so tilt direction always matches cursor direction.
+ */
+export declare function defaultTiltEasing(t: number): number;
+/**
+ * Computes the tilt rotation for a pointer at (x, y) relative to `rect`'s top-left corner.
+ * Vertical cursor position drives rotateX (tilts top/bottom edges), horizontal drives rotateY.
+ */
+export declare function computeTilt(x: number, y: number, rect: {
+    width: number;
+    height: number;
+}, { maxTiltX, maxTiltY, easing, lockAxis }: ComputeTiltOptions): TiltResult;

package/dist/cjs-types/common/tiltGroup/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './tiltGroup.js';
+export { useTiltGroup, TiltGroupContext } from './tiltGroup.js';
+export * from './tiltGroup.types.js';

package/dist/cjs-types/common/tiltGroup/tiltGroup.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from 'react';
+import { TiltGroupContextValue, TiltGroupProps } from './tiltGroup.types.js';
+export declare const TiltGroupContext: import('react').Context<TiltGroupContextValue | null>;
+export declare function useTiltGroup(): TiltGroupContextValue | null;
+declare function TiltGroup({ children, className, style, ...rest }: TiltGroupProps): ReactElement;
+export default TiltGroup;

package/dist/cjs-types/common/tiltGroup/tiltGroup.types.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, ReactNode } from 'react';
+import { HtmlProps } from '../types/slots.types.js';
+export interface TiltGroupContextValue {
+    /** Last known pointer position, in coordinates relative to the group container's top-left corner. `null` once the pointer has left. */
+    pointer: {
+        x: number;
+        y: number;
+    } | null;
+    /** The group container's bounding rect, refreshed on pointer enter/move. */
+    rect: DOMRect | null;
+}
+export interface TiltGroupProps extends HtmlProps {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}

package/dist/cjs-types/common/timeInput/components/clockDial/clockDial.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { ClockDialProps } from './clockDial.types.js';
+export default function ClockDial({ time, mode, use24Hour, minuteStep, onChange, onCommit, classNames, styles: slotStyles, }: ClockDialProps): React.JSX.Element;

package/dist/cjs-types/common/timeInput/components/clockDial/clockDial.types.d.ts

@@ -0,0 +1,24 @@
+import { TimeValue } from '../../timeFunctions.js';
+import { SlotClassNames, SlotStyles } from '../../../types/slots.types.js';
+import { TimeInputSlots } from '../../timeInput.types.js';
+export type ClockMode = 'hours' | 'minutes';
+export interface ClockDialProps {
+    time: TimeValue;
+    mode: ClockMode;
+    use24Hour: boolean;
+    minuteStep: number;
+    /** Live update while clicking/dragging. */
+    onChange: (time: TimeValue) => void;
+    /** Pointer released on a value — parent decides whether to advance mode or close. */
+    onCommit: (time: TimeValue) => void;
+    classNames?: SlotClassNames<TimeInputSlots>;
+    styles?: SlotStyles<TimeInputSlots>;
+}
+export interface DialNumber {
+    label: string;
+    /** Step index from the top, clockwise. */
+    slot: number;
+    /** Resolved hour (0–23) or minute (0–59) this number represents. */
+    value: number;
+    ring: 'outer' | 'inner';
+}

package/dist/cjs-types/common/timeInput/components/clockDial/index.d.ts

@@ -0,0 +1 @@
+export { default } from './clockDial.js';

package/dist/cjs-types/common/timeInput/index.d.ts

@@ -0,0 +1 @@
+export { default } from './timeInput.js';

package/dist/cjs-types/common/timeInput/timeFunctions.d.ts

@@ -0,0 +1,36 @@
+export interface TimeValue {
+    hours: number;
+    minutes: number;
+}
+export declare const clampHour: (h: number) => number;
+export declare const clampMinute: (m: number) => number;
+/** Parse a "HH:MM" (24-hour) string. Returns null for anything that isn't a valid time. */
+export declare function parseTimeString(value: string | null | undefined): TimeValue | null;
+/** Format a TimeValue as a zero-padded "HH:MM" string. */
+export declare function formatTime(time: TimeValue | null | undefined): string;
+/** Snap a minute value to the nearest multiple of `step` (step <= 1 is a no-op). */
+export declare function snapMinute(minute: number, step: number): number;
+export declare const timeToMinutes: (time: TimeValue) => number;
+/** Clamp a time into [min, max] (both "HH:MM" strings, either optional). */
+export declare function clampToRange(time: TimeValue, min?: string | null, max?: string | null): TimeValue;
+export declare function isWithinRange(time: TimeValue, min?: string | null, max?: string | null): boolean;
+/**
+ * Auto-correct a masked "HH:MM" value as the user types: clamp the hour segment to 23
+ * and the minute segment to 59 so the field can never hold an impossible time.
+ */
+export declare function correctTimeMaskValue(value: string): string;
+export interface DialPoint {
+    x: number;
+    y: number;
+}
+/**
+ * Cartesian coordinates for a point on the dial. `slot` is the step index from the
+ * top of the clock, going clockwise; `stepDegrees` is the angle between steps
+ * (30° for hours, 6° for minutes). Returns coordinates relative to (cx, cy).
+ */
+export declare function polarPoint(cx: number, cy: number, radius: number, slot: number, stepDegrees: number): DialPoint;
+/** Rotation (deg) of a hand pointing at `slot`. A 3-o'clock-default hand points up at slot 0. */
+export declare const handAngle: (slot: number, stepDegrees: number) => number;
+/** Angle (0–360, clockwise from top) of a pointer at (dx, dy) relative to the dial centre. */
+export declare function pointerAngle(dx: number, dy: number): number;
+export declare const pointerRadius: (dx: number, dy: number) => number;

package/dist/cjs-types/common/timeInput/timeInput.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { TimeInputProps } from './timeInput.types.js';
+export default function TimeInput({ value, selected, onChange, onSelect, formValidator, isInline, isModal, noInput, noHeader, showClearButton, showNowButton, minuteStep, use24Hour, minTime, maxTime, label, isValid, errorMessage, isRequired, disabled, className, style, classNames, styles: slotStyles, ...rest }: TimeInputProps): React.JSX.Element;

package/dist/cjs-types/common/timeInput/timeInput.types.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+import { FormValidator } from '../../services/formValidation/index.js';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+export type TimeInputSlots = 'root' | 'clock' | 'clockHeader' | 'headerSegment' | 'meridiem' | 'clockFace' | 'clockHand' | 'clockNumber' | 'footer';
+export interface TimeInputProps extends Omit<HtmlProps, 'onChange' | 'onSelect'> {
+    /** Current time as a "HH:MM" (24-hour) string. */
+    value?: string | null;
+    /** Alias for `value`, to mirror DatePicker. */
+    selected?: string | null;
+    /** Fired on every change (typing or dial interaction). Emits null when cleared/invalid. */
+    onChange?: ((time: string | null) => void) | null;
+    /** Fired when a time is committed via the dial (and the popover closes). */
+    onSelect?: ((time: string | null) => void) | null;
+    formValidator?: FormValidator | null;
+    /** Render the dial inline instead of in a popover. */
+    isInline?: boolean;
+    /** Open the dial inside a Modal overlay. */
+    isModal?: boolean;
+    /** Hide the text input entirely (dial only). */
+    noInput?: boolean;
+    /** Hide the big HH:MM header above the dial. */
+    noHeader?: boolean;
+    /** Show a "clear" action in the footer. */
+    showClearButton?: boolean;
+    /** Show a "now" quick-select action in the footer. */
+    showNowButton?: boolean;
+    /** Snap minutes to this step on the dial (e.g. 5, 15). Default 1. */
+    minuteStep?: number;
+    /** 24-hour dial (double ring) when true (default); 12-hour dial + AM/PM when false. */
+    use24Hour?: boolean;
+    /** Lower bound, inclusive, as "HH:MM". */
+    minTime?: string | null;
+    /** Upper bound, inclusive, as "HH:MM". */
+    maxTime?: string | null;
+    label?: string;
+    isValid?: boolean;
+    errorMessage?: string;
+    isRequired?: boolean;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    classNames?: SlotClassNames<TimeInputSlots>;
+    styles?: SlotStyles<TimeInputSlots>;
+}

package/dist/cjs-types/common/timeline/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './timeline.js';
+export * from './timeline.types.js';

package/dist/cjs-types/common/timeline/timeline.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { TimelineProps } from './timeline.types.js';
+export default function Timeline({ items, alignment, className, style, classNames, styles: slotStyles, ...rest }: TimelineProps): React.JSX.Element;

package/dist/cjs-types/common/timeline/timeline.types.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+import { IconContent } from '../types/icon.types.js';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+/** Layout of entries relative to the connecting line. */
+export declare enum TimelineAlignment {
+    /** Line and markers on the left, content to the right (the default). */
+    Left = "left",
+    /** Line and markers on the right, content to the left. */
+    Right = "right",
+    /** Line down the center, entries alternating left/right. */
+    Alternate = "alternate"
+}
+/** Semantic colour for an entry's marker, matching the theme's status colours. */
+export declare enum TimelineItemStatus {
+    Default = "default",
+    Primary = "primary",
+    Success = "success",
+    Warn = "warn",
+    Error = "error"
+}
+export type TimelineSlots = 'root' | 'item' | 'marker' | 'dot' | 'connector' | 'content' | 'title' | 'description' | 'timestamp';
+export interface TimelineItem {
+    /** Stable identity for the entry, used as its React key. Falls back to its array index when omitted; pass one whenever `items` can be reordered or have entries prepended (e.g. a live "newest first" audit log), so React doesn't misattribute row state across the shift. */
+    id?: string | number;
+    /** Primary label for the entry. */
+    title: React.ReactNode;
+    /** Secondary line under the title. */
+    description?: React.ReactNode;
+    /** Rendered next to the title, e.g. a date or relative time ("2 hours ago"). */
+    timestamp?: React.ReactNode;
+    /** Icon shown in the marker instead of a plain dot — a FontAwesome icon or any node. */
+    icon?: IconContent;
+    /** Semantic marker colour (default `Default`). */
+    status?: TimelineItemStatus;
+    /** Extra content rendered under the description, e.g. a diff, an attachment, an actor avatar. */
+    content?: React.ReactNode;
+    /** Makes the whole entry clickable (e.g. to open the full record), rendering it as an accessible button. */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /** Disables the entry: never clickable, dimmed. Only relevant alongside `onClick`. */
+    disabled?: boolean;
+}
+export interface TimelineProps extends HtmlProps {
+    /** The entries to render, in display order (typically newest first for an audit log). */
+    items?: TimelineItem[];
+    /** Layout of entries relative to the connecting line (default `Left`). */
+    alignment?: TimelineAlignment;
+    className?: string;
+    style?: React.CSSProperties;
+    classNames?: SlotClassNames<TimelineSlots>;
+    styles?: SlotStyles<TimelineSlots>;
+}

package/dist/cjs-types/common/timer/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './timer.js';
+export * from './timer.types.js';