@urbicon-ui/blocks 6.35.0 → 6.37.0

package/dist/primitives/SplitPane/index.d.ts

@@ -0,0 +1,88 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { MintProp } from '../../mint/index.js';
+import type { SplitPaneLimit } from './split-pane.utils.js';
+import type { SplitPaneSlots, SplitPaneVariants } from './split-pane.variants.js';
+/**
+ * @description Resizable two-pane layout. A draggable divider (ARIA "window
+ * splitter", role="separator") splits the container into a `start` and an `end`
+ * pane; the first pane's share is controlled by `ratio` (0–1) and supports
+ * `bind:ratio`. Resize by pointer drag or keyboard (Arrow / Home / End), with
+ * optional collapse-to-zero. Panes clip their own overflow so their content
+ * scrolls independently. For an application shell with a permanent nav rail
+ * prefer SidebarLayout / Sidebar; reach for SplitPane when both regions are
+ * primary content the user should be able to rebalance.
+ *
+ * @tag layout
+ * @related SidebarLayout
+ * @related Sidebar
+ * @stability experimental
+ *
+ * @example
+ * ```svelte
+ * <SplitPane bind:ratio={split} min="20%" max="80%">
+ *   {#snippet start()}<nav class="p-4">…</nav>{/snippet}
+ *   {#snippet end()}<main class="p-4">…</main>{/snippet}
+ * </SplitPane>
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <SplitPane orientation="vertical" collapsible defaultRatio={0.3}>
+ *   {#snippet start()}<section class="overflow-auto">Editor</section>{/snippet}
+ *   {#snippet end()}<section class="overflow-auto">Preview</section>{/snippet}
+ * </SplitPane>
+ * ```
+ */
+export interface SplitPaneProps extends Omit<SplitPaneVariants, 'dragging' | 'orientation' | 'disabled'>, Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> {
+    /** First pane. In `horizontal` orientation it is the leading (left) pane; in `vertical` the top pane. Required. */
+    start: Snippet;
+    /** Second pane — fills the space the first pane leaves. Required. */
+    end: Snippet;
+    /** Custom content rendered inside the divider (e.g. a grip icon). Replaces the default line; the divider stays the focusable separator. */
+    handle?: Snippet;
+    /** Layout axis. `horizontal` places panes side by side (vertical divider); `vertical` stacks them (horizontal divider). @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+    /** First pane's share of the container, `0`–`1`. Supports `bind:ratio`. When omitted, starts at `defaultRatio` and is managed internally. */
+    ratio?: number;
+    /** Initial ratio for uncontrolled use; also the target of a double-click reset. @default 0.5 */
+    defaultRatio?: number;
+    /** Lower bound for the first pane — px (`number`) or percentage string (`'20%'`). @default '10%' */
+    min?: SplitPaneLimit;
+    /** Upper bound for the first pane — px (`number`) or percentage string (`'90%'`). @default '90%' */
+    max?: SplitPaneLimit;
+    /** Allow the first pane to collapse to zero: dragging below `collapseThreshold`, or pressing Enter on the divider, snaps it shut. @default false */
+    collapsible?: boolean;
+    /** Pixel width/height of the first pane below which a drag snaps it collapsed. Only used when `collapsible`. @default 48 */
+    collapseThreshold?: number;
+    /** Disable resizing — the divider becomes inert (not focusable, no pointer/keyboard response). Panes stay visible. @default false */
+    disabled?: boolean;
+    /** Fires after a drag/keyboard interaction changes the ratio. Receives the new ratio (`0`–`1`). Does not fire for consumer-driven `bind:ratio` writes. */
+    onRatioChange?: (ratio: number) => void;
+    /** Fires when the first pane collapses (`true`) or re-expands (`false`) via drag or Enter. */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Accessible name for the divider (its `aria-label`). @default 'Resize panes' */
+    handleLabel?: string;
+    /** Micro-interaction preset applied to the divider. @default 'none' */
+    mint?: MintProp;
+    /** Extra classes merged onto the root container (the flex box). */
+    class?: string;
+    /** Remove all default tv() classes; combine with `slotClasses` to rebuild the look. */
+    unstyled?: boolean;
+    /**
+     * Per-slot class overrides merged with tv() styles. Slots: root (the flex
+     * container — what `class` also targets) | startPane | endPane | handle (the
+     * draggable divider / separator).
+     */
+    slotClasses?: Partial<Record<SplitPaneSlots, string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ SplitPane: {...} }}>`.
+     * Prefer this over `class` overrides when the requested look falls outside the
+     * semantic intent palette — presets keep hover/active/dark-mode logic coherent
+     * and make the custom look reusable across the project.
+     */
+    preset?: string;
+}
+export { default as SplitPane } from './SplitPane.svelte';
+export type { SplitPaneLimit, SplitPaneOrientation } from './split-pane.utils.js';
+export { type SplitPaneVariants, splitPaneVariants } from './split-pane.variants.js';

package/dist/primitives/SplitPane/index.js

@@ -0,0 +1,2 @@
+export { default as SplitPane } from './SplitPane.svelte';
+export { splitPaneVariants } from './split-pane.variants.js';

package/dist/primitives/SplitPane/split-pane.utils.d.ts

@@ -0,0 +1,73 @@
+/** Layout axis. `horizontal` = panes side by side; `vertical` = stacked. */
+export type SplitPaneOrientation = 'horizontal' | 'vertical';
+/**
+ * A min/max boundary for the first pane. A raw `number` is pixels; a string
+ * ending in `%` (e.g. `'20%'`) is a percentage of the container. A bare numeric
+ * string (`'200'`) is also treated as pixels.
+ */
+export type SplitPaneLimit = number | string;
+/** The four rect fields the pointer math reads — a structural subset of DOMRect. */
+export interface RectLike {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+/**
+ * Resolve a min/max limit to a ratio in `[0, 1]`.
+ *
+ * - Percentage strings (`'20%'`) convert directly and need no measurement.
+ * - Pixel values (number or bare numeric string) are divided by `containerPx`.
+ *
+ * Returns `null` when a pixel limit cannot be resolved because the container has
+ * not been measured yet (`containerPx <= 0`). Callers treat a `null` minimum as
+ * `0` and a `null` maximum as `1`, so an unmeasured px limit degrades to "no
+ * constraint" until the first layout pass, then clamps at runtime.
+ */
+export declare function parseLimit(limit: SplitPaneLimit, containerPx: number): number | null;
+/**
+ * Clamp a ratio into the `[min, max]` window, resolving px/percent limits
+ * against `containerPx`. Unresolved px limits fall back to `0` (min) / `1`
+ * (max). A reversed window (`min > max`) is tolerated by swapping the bounds so
+ * the result is always well-defined. A non-finite input ratio snaps to the
+ * lower bound.
+ */
+export declare function clampRatio(ratio: number, min: SplitPaneLimit, max: SplitPaneLimit, containerPx: number): number;
+/**
+ * Convert a pointer coordinate to the first-pane ratio (`[0, 1]`), before
+ * min/max clamping.
+ *
+ * - `horizontal`: uses `clientX` against `rect.left` / `rect.width`. When `rtl`
+ *   is true the axis is mirrored (the first pane grows from the right edge).
+ * - `vertical`: uses `clientY` against `rect.top` / `rect.height`; `rtl` has no
+ *   effect on the vertical axis.
+ *
+ * A zero-sized container yields `0` rather than dividing by zero.
+ */
+export declare function ratioFromPointer(clientPos: number, rect: RectLike, orientation: SplitPaneOrientation, rtl?: boolean): number;
+/** Limits + collapse config consumed by {@link resolveDragRatio}. */
+export interface DragResolveOptions {
+    min: SplitPaneLimit;
+    max: SplitPaneLimit;
+    collapsible: boolean;
+    collapseThreshold: number;
+}
+/**
+ * Dead-band added on top of `collapseThreshold` before a collapsed pane
+ * re-expands during a drag. Without it, pointer jitter around the threshold
+ * flip-flops ratio between `0` and `min` and bursts the change callbacks.
+ */
+export declare const COLLAPSE_HYSTERESIS_PX = 12;
+/**
+ * Decide the resting ratio and collapsed flag for a raw pointer ratio.
+ *
+ * Collapse wins over the min clamp: while `collapsible`, dragging the first pane
+ * below `collapseThreshold` px snaps it fully shut (`ratio: 0`, `collapsed:
+ * true`). While `currentlyCollapsed`, re-expanding requires clearing the
+ * threshold plus {@link COLLAPSE_HYSTERESIS_PX} (drag hysteresis). Otherwise the
+ * ratio is clamped into the `[min, max]` window and `collapsed` is `false`.
+ */
+export declare function resolveDragRatio(raw: number, containerPx: number, { min, max, collapsible, collapseThreshold }: DragResolveOptions, currentlyCollapsed?: boolean): {
+    ratio: number;
+    collapsed: boolean;
+};

package/dist/primitives/SplitPane/split-pane.utils.js

@@ -0,0 +1,94 @@
+// Pure geometry for the SplitPane primitive. Every function here is
+// side-effect-free and DOM-free so the resize math can be unit-tested in the
+// node environment (no jsdom) and the `.svelte` file can stay a thin shell over
+// it — exactly the split Slider draws between its keyboard math and its markup.
+const clamp01 = (n) => Math.min(1, Math.max(0, n));
+/**
+ * Resolve a min/max limit to a ratio in `[0, 1]`.
+ *
+ * - Percentage strings (`'20%'`) convert directly and need no measurement.
+ * - Pixel values (number or bare numeric string) are divided by `containerPx`.
+ *
+ * Returns `null` when a pixel limit cannot be resolved because the container has
+ * not been measured yet (`containerPx <= 0`). Callers treat a `null` minimum as
+ * `0` and a `null` maximum as `1`, so an unmeasured px limit degrades to "no
+ * constraint" until the first layout pass, then clamps at runtime.
+ */
+export function parseLimit(limit, containerPx) {
+    if (typeof limit === 'string') {
+        const trimmed = limit.trim();
+        if (trimmed.endsWith('%')) {
+            const pct = Number.parseFloat(trimmed.slice(0, -1));
+            return Number.isFinite(pct) ? clamp01(pct / 100) : null;
+        }
+        const px = Number.parseFloat(trimmed);
+        if (!Number.isFinite(px))
+            return null;
+        return containerPx > 0 ? clamp01(px / containerPx) : null;
+    }
+    if (!Number.isFinite(limit))
+        return null;
+    return containerPx > 0 ? clamp01(limit / containerPx) : null;
+}
+/**
+ * Clamp a ratio into the `[min, max]` window, resolving px/percent limits
+ * against `containerPx`. Unresolved px limits fall back to `0` (min) / `1`
+ * (max). A reversed window (`min > max`) is tolerated by swapping the bounds so
+ * the result is always well-defined. A non-finite input ratio snaps to the
+ * lower bound.
+ */
+export function clampRatio(ratio, min, max, containerPx) {
+    const lo = parseLimit(min, containerPx) ?? 0;
+    const hi = parseLimit(max, containerPx) ?? 1;
+    const low = Math.min(lo, hi);
+    const high = Math.max(lo, hi);
+    const r = Number.isFinite(ratio) ? ratio : low;
+    return Math.min(high, Math.max(low, r));
+}
+/**
+ * Convert a pointer coordinate to the first-pane ratio (`[0, 1]`), before
+ * min/max clamping.
+ *
+ * - `horizontal`: uses `clientX` against `rect.left` / `rect.width`. When `rtl`
+ *   is true the axis is mirrored (the first pane grows from the right edge).
+ * - `vertical`: uses `clientY` against `rect.top` / `rect.height`; `rtl` has no
+ *   effect on the vertical axis.
+ *
+ * A zero-sized container yields `0` rather than dividing by zero.
+ */
+export function ratioFromPointer(clientPos, rect, orientation, rtl = false) {
+    if (orientation === 'vertical') {
+        if (!(rect.height > 0))
+            return 0;
+        return clamp01((clientPos - rect.top) / rect.height);
+    }
+    if (!(rect.width > 0))
+        return 0;
+    const raw = (clientPos - rect.left) / rect.width;
+    return clamp01(rtl ? 1 - raw : raw);
+}
+/**
+ * Dead-band added on top of `collapseThreshold` before a collapsed pane
+ * re-expands during a drag. Without it, pointer jitter around the threshold
+ * flip-flops ratio between `0` and `min` and bursts the change callbacks.
+ */
+export const COLLAPSE_HYSTERESIS_PX = 12;
+/**
+ * Decide the resting ratio and collapsed flag for a raw pointer ratio.
+ *
+ * Collapse wins over the min clamp: while `collapsible`, dragging the first pane
+ * below `collapseThreshold` px snaps it fully shut (`ratio: 0`, `collapsed:
+ * true`). While `currentlyCollapsed`, re-expanding requires clearing the
+ * threshold plus {@link COLLAPSE_HYSTERESIS_PX} (drag hysteresis). Otherwise the
+ * ratio is clamped into the `[min, max]` window and `collapsed` is `false`.
+ */
+export function resolveDragRatio(raw, containerPx, { min, max, collapsible, collapseThreshold }, currentlyCollapsed = false) {
+    if (collapsible && containerPx > 0) {
+        const releasePx = currentlyCollapsed
+            ? collapseThreshold + COLLAPSE_HYSTERESIS_PX
+            : collapseThreshold;
+        if (raw * containerPx < releasePx)
+            return { ratio: 0, collapsed: true };
+    }
+    return { ratio: clampRatio(raw, min, max, containerPx), collapsed: false };
+}

package/dist/primitives/SplitPane/split-pane.variants.d.ts

@@ -0,0 +1,40 @@
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const splitPaneVariants: ((props?: {
+    orientation?: "horizontal" | "vertical" | undefined;
+    dragging?: boolean | undefined;
+    disabled?: boolean | undefined;
+} | undefined) => {
+    root: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        dragging?: boolean | undefined;
+        disabled?: boolean | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    startPane: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        dragging?: boolean | undefined;
+        disabled?: boolean | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    endPane: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        dragging?: boolean | undefined;
+        disabled?: boolean | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    handle: (props?: ({
+        orientation?: "horizontal" | "vertical" | undefined;
+        dragging?: boolean | undefined;
+        disabled?: boolean | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+}) & {
+    readonly config: import("../../utils/variants.js").TVConfig;
+};
+export type SplitPaneVariants = VariantProps<typeof splitPaneVariants>;
+/** Slot names derived from the `tv()` config above — single source of truth for `slotClasses`. */
+export type SplitPaneSlots = SlotNames<typeof splitPaneVariants>;

package/dist/primitives/SplitPane/split-pane.variants.js

@@ -0,0 +1,56 @@
+import { tv } from '../../utils/variants.js';
+export const splitPaneVariants = tv({
+    slots: {
+        // Flex container. `h-full`/`w-full` inherit the consumer's box; the panes
+        // size via flex-basis so the divider can sit at any ratio.
+        root: ['relative flex w-full h-full min-w-0 min-h-0'],
+        // Panes clip their own overflow and let long content scroll internally —
+        // min-w-0/min-h-0 defeats flexbox's default min-content floor so a pane can
+        // actually shrink below its content size.
+        startPane: ['overflow-hidden min-w-0 min-h-0'],
+        endPane: ['overflow-hidden min-w-0 min-h-0'],
+        // The divider is a thin visible line (bg-border-default) that is itself the
+        // role="separator". It is positioned (`relative`) with no z-index, so — like
+        // Slider's rail thumb — it and its transparent `::before` hit-expander paint
+        // above the statically-flowed panes. The `::before` swells the grab target
+        // to ≥24px (WCAG 2.5.8 AA) without widening the visible gutter.
+        handle: [
+            'relative shrink-0 touch-none select-none',
+            'bg-border-default',
+            'transition-[background-color] duration-[var(--blocks-duration-fast)]',
+            'hover:bg-primary',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1 focus-visible:ring-offset-surface-base',
+            "before:content-[''] before:absolute"
+        ]
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                root: 'flex-row',
+                // Vertical rule between side-by-side panes. Hit area: 4px + 2×10px = 24px.
+                handle: 'self-stretch w-1 cursor-col-resize before:inset-y-0 before:-inset-x-2.5'
+            },
+            vertical: {
+                root: 'flex-col',
+                // Horizontal rule between stacked panes.
+                handle: 'w-full h-1 cursor-row-resize before:inset-x-0 before:-inset-y-2.5'
+            }
+        },
+        // State axes last (house order): a state must dominate the resting look.
+        dragging: {
+            true: { handle: 'bg-primary' }
+        },
+        // Declared after `dragging` so its hover-neutralising override wins the
+        // `hover:bg` bucket even if a stale `dragging` were ever set together.
+        disabled: {
+            true: {
+                handle: 'cursor-default pointer-events-none hover:bg-border-default'
+            }
+        }
+    },
+    defaultVariants: {
+        orientation: 'horizontal',
+        dragging: false,
+        disabled: false
+    }
+});

package/dist/primitives/index.d.ts

@@ -55,6 +55,8 @@ export type { SliderMark, SliderProps } from './Slider/index.js';
 export * from './Slider/index.js';
 export type { SpinnerProps } from './Spinner/index.js';
 export * from './Spinner/index.js';
+export type { SplitPaneProps } from './SplitPane/index.js';
+export * from './SplitPane/index.js';
 export type { StepperProps, StepperStepProps } from './Stepper/index.js';
 export * from './Stepper/index.js';
 export type { TabItemProps, TabPanelProps, TabProps } from './Tab/index.js';

package/dist/primitives/index.js

@@ -29,6 +29,7 @@ export * from './Sidebar/index.js';
 export * from './Skeleton/index.js';
 export * from './Slider/index.js';
 export * from './Spinner/index.js';
+export * from './SplitPane/index.js';
 export * from './Stepper/index.js';
 export * from './Tab/index.js';
 export * from './Textarea/index.js';

package/dist/translations/de.d.ts

@@ -14,8 +14,14 @@ declare const _default: {
         readonly maximum: "Maximum";
         readonly minimum: "Minimum";
         readonly pagination: "Seitennavigation";
+        readonly pinInputCell: "Zeichen {{index}} von {{total}}";
         readonly progress: "Fortschritt";
+        readonly qrCode: "QR-Code";
         readonly slider: "Schieberegler";
+        readonly timeHours: "Stunden";
+        readonly timeMinutes: "Minuten";
+        readonly timeSeconds: "Sekunden";
+        readonly timeMeridiem: "AM oder PM";
         readonly toggle: "Umschalter";
         readonly toggleOptions: "Optionen umschalten";
         readonly removableBadge: "Entfernbarer Badge";

package/dist/translations/de.js

@@ -14,8 +14,14 @@ export default {
         maximum: 'Maximum',
         minimum: 'Minimum',
         pagination: 'Seitennavigation',
+        pinInputCell: 'Zeichen {{index}} von {{total}}',
         progress: 'Fortschritt',
+        qrCode: 'QR-Code',
         slider: 'Schieberegler',
+        timeHours: 'Stunden',
+        timeMinutes: 'Minuten',
+        timeSeconds: 'Sekunden',
+        timeMeridiem: 'AM oder PM',
         toggle: 'Umschalter',
         toggleOptions: 'Optionen umschalten',
         removableBadge: 'Entfernbarer Badge',

package/dist/translations/en.d.ts

@@ -14,8 +14,14 @@ declare const _default: {
         readonly maximum: "Maximum";
         readonly minimum: "Minimum";
         readonly pagination: "Page navigation";
+        readonly pinInputCell: "Character {{index}} of {{total}}";
         readonly progress: "Progress";
+        readonly qrCode: "QR code";
         readonly slider: "Slider";
+        readonly timeHours: "Hours";
+        readonly timeMinutes: "Minutes";
+        readonly timeSeconds: "Seconds";
+        readonly timeMeridiem: "AM or PM";
         readonly toggle: "Toggle";
         readonly toggleOptions: "Toggle options";
         readonly removableBadge: "Removable badge";

package/dist/translations/en.js

@@ -14,8 +14,14 @@ export default {
         maximum: 'Maximum',
         minimum: 'Minimum',
         pagination: 'Page navigation',
+        pinInputCell: 'Character {{index}} of {{total}}',
         progress: 'Progress',
+        qrCode: 'QR code',
         slider: 'Slider',
+        timeHours: 'Hours',
+        timeMinutes: 'Minutes',
+        timeSeconds: 'Seconds',
+        timeMeridiem: 'AM or PM',
         toggle: 'Toggle',
         toggleOptions: 'Toggle options',
         removableBadge: 'Removable badge',

package/dist/utils/file-intake.d.ts

@@ -0,0 +1,78 @@
+export type FileIntakeErrorCode = 'FILE_INVALID_TYPE' | 'FILE_TOO_LARGE' | 'FILE_TOO_SMALL' | 'TOO_MANY_FILES' | 'FILE_EXISTS' | 'CUSTOM';
+export interface FileIntakeError {
+    /** Machine-readable error code. */
+    code: FileIntakeErrorCode;
+    /** Human-readable error message. */
+    message: string;
+}
+export type FileIntakeStatus = 'pending' | 'uploading' | 'complete' | 'error';
+export interface FileIntakeEntry {
+    /** Unique identifier for this file entry. */
+    id: string;
+    /** The native File object. */
+    file: File;
+    /** Object URL for image previews (auto-generated, auto-revoked). */
+    preview?: string;
+    /** Upload progress 0–100. Undefined when not tracking. */
+    progress?: number;
+    /** Current lifecycle status. */
+    status: FileIntakeStatus;
+    /** Validation or upload errors. */
+    errors: FileIntakeError[];
+}
+export interface FileIntakeRejection {
+    /** The rejected file. */
+    file: File;
+    /** Why it was rejected. */
+    errors: FileIntakeError[];
+}
+/** Validation limits shared by every intake surface. */
+export interface FileIntakeConstraints {
+    /** Accepted MIME types or file extensions (e.g. 'image/*', '.pdf'). */
+    accept?: string | string[];
+    /** Maximum number of files across the whole list. */
+    maxFiles?: number;
+    /** Maximum file size in bytes. */
+    maxFileSize?: number;
+    /** Minimum file size in bytes. */
+    minFileSize?: number;
+    /** Custom validation function. Return errors array or null. */
+    validate?: (file: File) => FileIntakeError[] | null;
+}
+/** Error-text factories — components inject their i18n/label source here. */
+export interface FileIntakeMessages {
+    invalidType: (type: string) => string;
+    tooLarge: (formattedSize: string) => string;
+    tooSmall: (formattedSize: string) => string;
+    exists: () => string;
+    tooMany: (count: number) => string;
+}
+/** Does a picked/dropped file match the accept spec (`.ext`, `type/*`, exact MIME)? */
+export declare function matchesAccept(file: File, accept: string | string[] | undefined): boolean;
+/**
+ * Dragged-over feedback: do ALL items look acceptable? Extension patterns
+ * (`.pdf`) match permissively — file names are unavailable during dragenter,
+ * so a definitive verdict only exists for MIME patterns.
+ */
+export declare function dragItemsMatchAccept(items: Iterable<DataTransferItem>, accept: string | string[] | undefined): boolean;
+/** Validate one file against the constraints and the existing list (duplicates). */
+export declare function validateIntakeFile(file: File, existing: readonly FileIntakeEntry[], constraints: FileIntakeConstraints, messages: FileIntakeMessages): FileIntakeError[];
+/**
+ * Split incoming files into accepted entries (id + pending status + image
+ * preview object-URL) and rejections. Files beyond the remaining `maxFiles`
+ * budget are rejected with `TOO_MANY_FILES` before any validation runs.
+ * The caller owns the returned entries — including revoking their previews
+ * (`revokeIntakePreviews`) when they leave the list.
+ */
+export declare function partitionIntake(incoming: readonly File[], existing: readonly FileIntakeEntry[], constraints: FileIntakeConstraints, messages: FileIntakeMessages, idPrefix?: string): {
+    accepted: FileIntakeEntry[];
+    rejected: FileIntakeRejection[];
+};
+/** Wrap a (pre-validated) file as a pending entry with id and image preview. */
+export declare function createIntakeEntry(file: File, idPrefix?: string): FileIntakeEntry;
+/** Revoke the preview object-URLs of the given entries (removal/teardown). */
+export declare function revokeIntakePreviews(entries: Iterable<FileIntakeEntry>): void;
+/** Human-readable file size (`1.5 MB`). Empty string for non-finite values. */
+export declare function formatFileSize(bytes: number): string;
+/** Is this file an image (drives preview object-URL creation)? */
+export declare function isImageFile(file: File): boolean;