@urbicon-ui/blocks 6.1.4

package/dist/translations/en.d.ts

@@ -0,0 +1,169 @@
+declare const _default: {
+    readonly accessibility: {
+        readonly avatar: "Avatar";
+        readonly clearInput: "Clear input";
+        readonly clearSearch: "Clear search";
+        readonly clearSelection: "Clear selection";
+        readonly closeDialog: "Close dialog";
+        readonly closeDrawer: "Close drawer";
+        readonly dismiss: "Dismiss";
+        readonly fileUpload: "File upload";
+        readonly loading: "Loading";
+        readonly maximum: "Maximum";
+        readonly minimum: "Minimum";
+        readonly pagination: "Page navigation";
+        readonly progress: "Progress";
+        readonly slider: "Slider";
+        readonly toggle: "Toggle";
+        readonly removableBadge: "Removable badge";
+        readonly removeBadge: "Remove badge";
+        readonly removeFile: "Remove {{name}}";
+    };
+    readonly button: {
+        readonly close: "Close";
+        readonly apply: "Apply";
+        readonly cancel: "Cancel";
+        readonly confirm: "Confirm";
+    };
+    readonly menu: {
+        readonly placeholder: "Select an option...";
+    };
+    readonly common: {
+        readonly loading: "Loading...";
+    };
+    readonly languages: {
+        readonly de: "Deutsch";
+        readonly en: "English";
+        readonly es: "Español";
+        readonly fr: "Français";
+        readonly it: "Italiano";
+        readonly nl: "Nederlands";
+    };
+    readonly localeSwitcher: {
+        readonly ariaLabel: "Language selection";
+        readonly placeholder: "Select language...";
+    };
+    readonly pagination: {
+        readonly next: "Next";
+        readonly first: "First";
+        readonly last: "Last";
+        readonly page: "Page";
+        readonly previous: "Previous";
+    };
+    readonly calendar: {
+        readonly recurring: "Recurring event";
+        readonly previousMonth: "Previous month";
+        readonly nextMonth: "Next month";
+        readonly previousWeek: "Previous week";
+        readonly nextWeek: "Next week";
+        readonly previousDay: "Previous day";
+        readonly nextDay: "Next day";
+        readonly previousYear: "Previous year";
+        readonly nextYear: "Next year";
+        readonly today: "Today";
+        readonly calendarGrid: "Calendar";
+        readonly weekdays: "Weekdays";
+        readonly weekNumber: "Week number";
+        readonly events: "Events";
+        readonly noEvents: "No events";
+        readonly showMore: "{{count}} more";
+        readonly legend: "Legend";
+        readonly yearView: "Year overview";
+        readonly weekView: "Week view";
+        readonly dayView: "Day view";
+        readonly monthView: "Month view";
+        readonly viewMonth: "Month";
+        readonly viewYear: "Year";
+        readonly viewWeek: "Week";
+        readonly viewDay: "Day";
+        readonly multiDayLabel: "Day {{current}} of {{total}}";
+        readonly agendaView: "Agenda view";
+        readonly viewAgenda: "Agenda";
+        readonly viewSwitcher: "View mode";
+    };
+    readonly planner: {
+        readonly previousWeek: "Previous week";
+        readonly nextWeek: "Next week";
+        readonly previousMonth: "Previous month";
+        readonly nextMonth: "Next month";
+        readonly previousRange: "Previous range";
+        readonly nextRange: "Next range";
+        readonly today: "Today";
+        readonly grid: "Planner";
+        readonly weekNumber: "Week number";
+        readonly itemCount: "{{count}} items";
+    };
+    readonly commandPalette: {
+        readonly noResults: "No results found.";
+        readonly search: "Search...";
+        readonly hints: {
+            readonly navigate: "Navigate";
+            readonly select: "Select";
+            readonly close: "Close";
+        };
+    };
+    readonly compositionBar: {
+        readonly total: "Total";
+        readonly summary: "Composition: {{total}} ({{count}} shares) — {{parts}}";
+        readonly share: "Share";
+        readonly value: "Value";
+        readonly percent: "Percent";
+        readonly remaining: "remaining";
+    };
+    readonly guide: {
+        readonly next: "Next";
+        readonly previous: "Back";
+        readonly skip: "Skip tour";
+        readonly done: "Done";
+        readonly step: "Step {{current}} of {{total}}";
+        readonly tour: "Guided tour";
+        readonly close: "Close";
+        readonly openHelp: "Help";
+        readonly backToList: "All topics";
+        readonly info: "More information";
+        readonly infoAbout: "More information about {{label}}";
+        readonly dismiss: "Dismiss hint";
+        readonly startTour: "Start the guided tour";
+        readonly actionRequired: "Complete the highlighted action to continue";
+    };
+    readonly datepicker: {
+        readonly placeholder: "Select a date...";
+        readonly rangePlaceholder: "Select a date range...";
+        readonly clear: "Clear selection";
+        readonly openCalendar: "Open calendar";
+        readonly invalidDate: "Invalid date";
+        readonly outOfRange: "Date is outside the allowed range";
+        readonly invalidRange: "Invalid date range";
+    };
+    readonly fileUpload: {
+        readonly exists: "File already added";
+        readonly invalidType: "File type {{type}} is not allowed";
+        readonly tooLarge: "File exceeds {{size}} limit";
+        readonly tooMany: "Maximum {{count}} files allowed";
+        readonly tooSmall: "File must be at least {{size}}";
+    };
+    readonly sankey: {
+        readonly summary: "Sankey diagram: {{nodes}} nodes, {{links}} links — {{flows}}";
+        readonly source: "Source";
+        readonly target: "Target";
+        readonly value: "Value";
+    };
+    readonly slider: {
+        readonly rangeStatus: {
+            readonly insideRecommended: "In recommended range";
+            readonly insideValid: "In valid range";
+            readonly insideValidOnly: "Outside recommended range, but valid";
+            readonly outsideValid: "Outside valid range";
+        };
+    };
+    readonly themeSwitcher: {
+        readonly lightMode: "Light mode";
+        readonly darkMode: "Dark mode";
+        readonly systemTheme: "System theme";
+    };
+    readonly time: {
+        readonly ago: "{{value}} {{unit}} ago";
+        readonly now: "now";
+    };
+};
+export default _default;

package/dist/translations/en.js

@@ -0,0 +1,168 @@
+export default {
+    accessibility: {
+        avatar: 'Avatar',
+        clearInput: 'Clear input',
+        clearSearch: 'Clear search',
+        clearSelection: 'Clear selection',
+        closeDialog: 'Close dialog',
+        closeDrawer: 'Close drawer',
+        dismiss: 'Dismiss',
+        fileUpload: 'File upload',
+        loading: 'Loading',
+        maximum: 'Maximum',
+        minimum: 'Minimum',
+        pagination: 'Page navigation',
+        progress: 'Progress',
+        slider: 'Slider',
+        toggle: 'Toggle',
+        removableBadge: 'Removable badge',
+        removeBadge: 'Remove badge',
+        removeFile: 'Remove {{name}}'
+    },
+    button: {
+        close: 'Close',
+        apply: 'Apply',
+        cancel: 'Cancel',
+        confirm: 'Confirm'
+    },
+    menu: {
+        placeholder: 'Select an option...'
+    },
+    common: {
+        loading: 'Loading...'
+    },
+    languages: {
+        de: 'Deutsch',
+        en: 'English',
+        es: 'Español',
+        fr: 'Français',
+        it: 'Italiano',
+        nl: 'Nederlands'
+    },
+    localeSwitcher: {
+        ariaLabel: 'Language selection',
+        placeholder: 'Select language...'
+    },
+    pagination: {
+        next: 'Next',
+        first: 'First',
+        last: 'Last',
+        page: 'Page',
+        previous: 'Previous'
+    },
+    calendar: {
+        recurring: 'Recurring event',
+        previousMonth: 'Previous month',
+        nextMonth: 'Next month',
+        previousWeek: 'Previous week',
+        nextWeek: 'Next week',
+        previousDay: 'Previous day',
+        nextDay: 'Next day',
+        previousYear: 'Previous year',
+        nextYear: 'Next year',
+        today: 'Today',
+        calendarGrid: 'Calendar',
+        weekdays: 'Weekdays',
+        weekNumber: 'Week number',
+        events: 'Events',
+        noEvents: 'No events',
+        showMore: '{{count}} more',
+        legend: 'Legend',
+        yearView: 'Year overview',
+        weekView: 'Week view',
+        dayView: 'Day view',
+        monthView: 'Month view',
+        viewMonth: 'Month',
+        viewYear: 'Year',
+        viewWeek: 'Week',
+        viewDay: 'Day',
+        multiDayLabel: 'Day {{current}} of {{total}}',
+        agendaView: 'Agenda view',
+        viewAgenda: 'Agenda',
+        viewSwitcher: 'View mode'
+    },
+    planner: {
+        previousWeek: 'Previous week',
+        nextWeek: 'Next week',
+        previousMonth: 'Previous month',
+        nextMonth: 'Next month',
+        previousRange: 'Previous range',
+        nextRange: 'Next range',
+        today: 'Today',
+        grid: 'Planner',
+        weekNumber: 'Week number',
+        itemCount: '{{count}} items'
+    },
+    commandPalette: {
+        noResults: 'No results found.',
+        search: 'Search...',
+        hints: {
+            navigate: 'Navigate',
+            select: 'Select',
+            close: 'Close'
+        }
+    },
+    compositionBar: {
+        total: 'Total',
+        summary: 'Composition: {{total}} ({{count}} shares) — {{parts}}',
+        share: 'Share',
+        value: 'Value',
+        percent: 'Percent',
+        remaining: 'remaining'
+    },
+    guide: {
+        next: 'Next',
+        previous: 'Back',
+        skip: 'Skip tour',
+        done: 'Done',
+        step: 'Step {{current}} of {{total}}',
+        tour: 'Guided tour',
+        close: 'Close',
+        openHelp: 'Help',
+        backToList: 'All topics',
+        info: 'More information',
+        infoAbout: 'More information about {{label}}',
+        dismiss: 'Dismiss hint',
+        startTour: 'Start the guided tour',
+        actionRequired: 'Complete the highlighted action to continue'
+    },
+    datepicker: {
+        placeholder: 'Select a date...',
+        rangePlaceholder: 'Select a date range...',
+        clear: 'Clear selection',
+        openCalendar: 'Open calendar',
+        invalidDate: 'Invalid date',
+        outOfRange: 'Date is outside the allowed range',
+        invalidRange: 'Invalid date range'
+    },
+    fileUpload: {
+        exists: 'File already added',
+        invalidType: 'File type {{type}} is not allowed',
+        tooLarge: 'File exceeds {{size}} limit',
+        tooMany: 'Maximum {{count}} files allowed',
+        tooSmall: 'File must be at least {{size}}'
+    },
+    sankey: {
+        summary: 'Sankey diagram: {{nodes}} nodes, {{links}} links — {{flows}}',
+        source: 'Source',
+        target: 'Target',
+        value: 'Value'
+    },
+    slider: {
+        rangeStatus: {
+            insideRecommended: 'In recommended range',
+            insideValid: 'In valid range',
+            insideValidOnly: 'Outside recommended range, but valid',
+            outsideValid: 'Outside valid range'
+        }
+    },
+    themeSwitcher: {
+        lightMode: 'Light mode',
+        darkMode: 'Dark mode',
+        systemTheme: 'System theme'
+    },
+    time: {
+        ago: '{{value}} {{unit}} ago',
+        now: 'now'
+    }
+};

package/dist/types/index.d.ts

@@ -0,0 +1,14 @@
+export * from '../primitives/Avatar/index';
+export * from '../primitives/Badge/index';
+export * from '../primitives/Button/index';
+export * from '../primitives/ButtonGroup/index';
+export * from '../primitives/Card/index';
+export * from '../primitives/Dialog/index';
+export * from '../primitives/Input/index';
+export * from '../primitives/Menu/index';
+export * from '../primitives/Pagination/index';
+export * from '../primitives/Popover/index';
+export * from '../primitives/Spinner/index';
+export * from '../primitives/Tab/index';
+export * from '../primitives/Toolbar/index';
+export * from '../primitives/Tooltip/index';

package/dist/types/index.js

@@ -0,0 +1,15 @@
+// Re-export all component types
+export * from '../primitives/Avatar/index';
+export * from '../primitives/Badge/index';
+export * from '../primitives/Button/index';
+export * from '../primitives/ButtonGroup/index';
+export * from '../primitives/Card/index';
+export * from '../primitives/Dialog/index';
+export * from '../primitives/Input/index';
+export * from '../primitives/Menu/index';
+export * from '../primitives/Pagination/index';
+export * from '../primitives/Popover/index';
+export * from '../primitives/Spinner/index';
+export * from '../primitives/Tab/index';
+export * from '../primitives/Toolbar/index';
+export * from '../primitives/Tooltip/index';

package/dist/utils/date.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Date utilities for bridging form values, ISO strings, and `Date` objects.
+ *
+ * Components like {@link DatePicker} accept either a `Date` or an ISO
+ * timestamp on input. When the surrounding state holds ISO strings (for
+ * example because the database driver serialises timestamps that way),
+ * use these helpers to convert in both directions instead of redoing the
+ * arithmetic at every form site.
+ */
+/** Shared union for utilities that accept any common "date-ish" input. */
+export type DateInput = Date | string | number | null | undefined;
+/** Month index used by `Date#getMonth()`. */
+export type MonthIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
+/** Weekday index used by `Date#getDay()`. */
+export type WeekdayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * Coerce a `Date`, ISO timestamp, epoch-ms number, or empty value into a
+ * `Date`. Returns `undefined` for empty / unparseable inputs.
+ *
+ * Shape rules:
+ * - Strings of the form `YYYY-MM-DD` are parsed in LOCAL timezone
+ *   (matching `<input type="date">` and `toDateInputValue` round-trip).
+ * - Numbers smaller than ~100 s past epoch are rejected as ambiguous
+ *   (programmer error — `2026` passed instead of a real timestamp).
+ *   Legitimate pre-2001 epoch ms (e.g. birthdays) are accepted.
+ * - Invalid `Date` instances and unparseable strings log a warning
+ *   instead of disappearing silently.
+ */
+export declare function coerceToDate(input: DateInput): Date | undefined;
+/**
+ * Format a date as the `YYYY-MM-DD` string accepted by
+ * `<input type="date">` and the DatePicker text rendering. Returns
+ * an empty string for null / invalid inputs so it can be assigned
+ * directly to a form field's `value`.
+ */
+export declare function toDateInputValue(d: Date | string | null | undefined): string;
+/**
+ * Parse a `YYYY-MM-DD` (or any other `Date`-parseable) string into a
+ * `Date`. `YYYY-MM-DD` is interpreted as LOCAL midnight to round-trip
+ * with `toDateInputValue`; full ISO timestamps with timezone are passed
+ * to the native parser unchanged. Returns `null` for empty or malformed
+ * input so the caller decides how to surface the error.
+ */
+export declare function fromDateInputValue(s: string | null | undefined): Date | null;

package/dist/utils/date.js

@@ -0,0 +1,130 @@
+/**
+ * Date utilities for bridging form values, ISO strings, and `Date` objects.
+ *
+ * Components like {@link DatePicker} accept either a `Date` or an ISO
+ * timestamp on input. When the surrounding state holds ISO strings (for
+ * example because the database driver serialises timestamps that way),
+ * use these helpers to convert in both directions instead of redoing the
+ * arithmetic at every form site.
+ */
+/** Detect a finite, valid `Date` instance. */
+function isValidDate(d) {
+    return !Number.isNaN(d.getTime());
+}
+/**
+ * Reject numbers small enough to obviously not be epoch ms — typical
+ * mis-use is passing a year (`2026`), a day index, or `42`. 100 000 ms
+ * (≈ 100 s past 1970) is the smallest value that is still ambiguously a
+ * real timestamp. Anything above this — including pre-2001 legitimate
+ * timestamps like birthdays — is accepted.
+ */
+const AMBIGUOUS_NUMBER_THRESHOLD = 100_000;
+const DATE_ONLY_RE = /^(\d{4})-(\d{1,2})-(\d{1,2})$/;
+/**
+ * Coerce a `Date`, ISO timestamp, epoch-ms number, or empty value into a
+ * `Date`. Returns `undefined` for empty / unparseable inputs.
+ *
+ * Shape rules:
+ * - Strings of the form `YYYY-MM-DD` are parsed in LOCAL timezone
+ *   (matching `<input type="date">` and `toDateInputValue` round-trip).
+ * - Numbers smaller than ~100 s past epoch are rejected as ambiguous
+ *   (programmer error — `2026` passed instead of a real timestamp).
+ *   Legitimate pre-2001 epoch ms (e.g. birthdays) are accepted.
+ * - Invalid `Date` instances and unparseable strings log a warning
+ *   instead of disappearing silently.
+ */
+export function coerceToDate(input) {
+    if (input === null || input === undefined)
+        return undefined;
+    if (input instanceof Date) {
+        if (isValidDate(input))
+            return input;
+        console.warn('[DatePicker] coerceToDate received Invalid Date instance', { input });
+        return undefined;
+    }
+    if (typeof input === 'string') {
+        const trimmed = input.trim();
+        if (trimmed === '')
+            return undefined;
+        const dateOnly = trimmed.match(DATE_ONLY_RE);
+        if (dateOnly) {
+            const year = Number(dateOnly[1]);
+            const month = Number(dateOnly[2]) - 1;
+            const day = Number(dateOnly[3]);
+            const local = new Date(year, month, day);
+            if (local.getFullYear() === year && local.getMonth() === month && local.getDate() === day) {
+                return local;
+            }
+            console.warn('[DatePicker] coerceToDate rejected out-of-range date-only string', { input });
+            return undefined;
+        }
+        const date = new Date(trimmed);
+        if (!isValidDate(date)) {
+            console.warn('[DatePicker] coerceToDate could not parse string', { input });
+            return undefined;
+        }
+        return date;
+    }
+    if (typeof input === 'number') {
+        if (!Number.isFinite(input)) {
+            console.warn('[DatePicker] coerceToDate received non-finite number', { input });
+            return undefined;
+        }
+        if (Math.abs(input) < AMBIGUOUS_NUMBER_THRESHOLD) {
+            console.warn('[DatePicker] coerceToDate received an ambiguously small number — expected epoch ms', { input });
+            return undefined;
+        }
+        const date = new Date(input);
+        return isValidDate(date) ? date : undefined;
+    }
+    return undefined;
+}
+/**
+ * Format a date as the `YYYY-MM-DD` string accepted by
+ * `<input type="date">` and the DatePicker text rendering. Returns
+ * an empty string for null / invalid inputs so it can be assigned
+ * directly to a form field's `value`.
+ */
+export function toDateInputValue(d) {
+    const date = coerceToDate(d);
+    if (!date)
+        return '';
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+/**
+ * Parse a `YYYY-MM-DD` (or any other `Date`-parseable) string into a
+ * `Date`. `YYYY-MM-DD` is interpreted as LOCAL midnight to round-trip
+ * with `toDateInputValue`; full ISO timestamps with timezone are passed
+ * to the native parser unchanged. Returns `null` for empty or malformed
+ * input so the caller decides how to surface the error.
+ */
+export function fromDateInputValue(s) {
+    if (!s)
+        return null;
+    const trimmed = s.trim();
+    if (trimmed === '')
+        return null;
+    const dateOnly = trimmed.match(DATE_ONLY_RE);
+    if (dateOnly) {
+        const year = Number(dateOnly[1]);
+        const month = Number(dateOnly[2]) - 1;
+        const day = Number(dateOnly[3]);
+        const date = new Date(year, month, day);
+        if (date.getFullYear() === year && date.getMonth() === month && date.getDate() === day) {
+            return date;
+        }
+        console.warn('[DatePicker] fromDateInputValue rejected out-of-range date-only string', {
+            input: s
+        });
+        return null;
+    }
+    const date = new Date(trimmed);
+    if (!isValidDate(date)) {
+        console.warn('[DatePicker] fromDateInputValue could not parse', { input: s });
+        return null;
+    }
+    return date;
+}

package/dist/utils/draggable.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Generic draggable utility based on Pointer Events API.
+ * Zero dependencies — replaces ad-hoc pointer event loops across the library.
+ *
+ * Supports: mouse, touch, pen. Uses pointer capture for reliable tracking.
+ *
+ * @example Svelte attachment for horizontal reordering
+ * ```svelte
+ * <script>
+ *   import { createDraggable } from '@urbicon-ui/blocks';
+ * </script>
+ *
+ * <div {@attach createDraggable({
+ *   axis: 'horizontal',
+ *   onDragStart: ({ element }) => { element.style.opacity = '0.4'; },
+ *   onDragMove: ({ clientX, clientY }) => { updateDropIndicator(clientX, clientY); },
+ *   onDragEnd: ({ element }) => { element.style.opacity = ''; finalizeReorder(); },
+ * })}></div>
+ * ```
+ */
+import type { Attachment } from 'svelte/attachments';
+export interface DragStartEvent {
+    /** The element being dragged */
+    element: HTMLElement;
+    /** Initial pointer X */
+    startX: number;
+    /** Initial pointer Y */
+    startY: number;
+    /** Current pointer X */
+    clientX: number;
+    /** Current pointer Y */
+    clientY: number;
+    /** Original PointerEvent */
+    originalEvent: PointerEvent;
+}
+export interface DragMoveEvent {
+    element: HTMLElement;
+    startX: number;
+    startY: number;
+    clientX: number;
+    clientY: number;
+    /** Delta from start X */
+    deltaX: number;
+    /** Delta from start Y */
+    deltaY: number;
+    originalEvent: PointerEvent;
+}
+export interface DragEndEvent {
+    element: HTMLElement;
+    startX: number;
+    startY: number;
+    clientX: number;
+    clientY: number;
+    deltaX: number;
+    deltaY: number;
+    /** Whether the drag exceeded the threshold (true = real drag, false = cancelled/tap) */
+    didDrag: boolean;
+    originalEvent: PointerEvent;
+}
+export interface DraggableOptions {
+    /**
+     * Pixel distance before drag activates (prevents accidental drags on click).
+     * @default 5
+     */
+    threshold?: number;
+    /**
+     * Constrain drag to an axis. `'both'` allows free movement.
+     * @default 'both'
+     */
+    axis?: 'horizontal' | 'vertical' | 'both';
+    /**
+     * Whether dragging is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Cursor to show during drag.
+     * @default 'grabbing'
+     */
+    cursor?: string;
+    /**
+     * Called once when drag threshold is exceeded.
+     */
+    onDragStart?: (event: DragStartEvent) => void;
+    /**
+     * Called on every pointer move during an active drag.
+     */
+    onDragMove?: (event: DragMoveEvent) => void;
+    /**
+     * Called when the pointer is released or cancelled.
+     */
+    onDragEnd?: (event: DragEndEvent) => void;
+}
+/**
+ * Svelte attachment that makes an element draggable via Pointer Events.
+ *
+ * Usage: `<div {@attach createDraggable({ axis: 'horizontal', onDragMove, onDragEnd })}>`
+ */
+export declare function createDraggable(opts: DraggableOptions): Attachment<HTMLElement>;
+/**
+ * Finds the closest element with a specific data attribute under the pointer.
+ * Useful for identifying drop targets during drag.
+ */
+export declare function findDropTarget(clientX: number, clientY: number, attribute: string): HTMLElement | null;