@vobs/ui 0.2.0 → 1.0.0

package/dist/feedback.d.ts

@@ -1,88 +0,0 @@
-/** @license MIT
- * Copyright (c) 2026 vobsjs
- * @vobs/ui
- */
-import { type UiDomPlan } from './primitives.js';
-export type FeedbackStatus = 'error' | 'info' | 'success' | 'warning';
-export type ToastPlacement = 'bottom-end' | 'top-center' | 'top-end';
-export type FeedbackActionTone = 'default' | 'primary';
-export type FeedbackSurfaceKind = 'alert' | 'message' | 'notification' | 'toast';
-export interface AlertPlanOptions {
-    readonly id?: string;
-    readonly status?: FeedbackStatus;
-    readonly titleId?: string;
-    readonly descriptionId?: string;
-}
-export interface MessagePlanOptions {
-    readonly id?: string;
-    readonly status?: FeedbackStatus;
-}
-export interface FeedbackAction {
-    readonly id: string;
-    readonly label: string;
-    readonly tone?: FeedbackActionTone;
-    readonly disabled?: boolean;
-}
-export interface FeedbackSurfacePlanOptions {
-    readonly id?: string;
-    readonly status?: FeedbackStatus;
-    readonly titleId?: string;
-    readonly descriptionId?: string;
-    readonly closeLabel?: string;
-    readonly action?: FeedbackAction;
-    readonly icon?: boolean;
-    readonly loading?: boolean;
-}
-export interface FeedbackSurfacePlans {
-    readonly root: UiDomPlan<'div'>;
-    readonly icon?: UiDomPlan<'span'>;
-    readonly content: UiDomPlan<'div'>;
-    readonly title?: UiDomPlan<'strong'>;
-    readonly description?: UiDomPlan<'p'>;
-    readonly actionButton?: UiDomPlan<'button'>;
-    readonly closeButton?: UiDomPlan<'button'>;
-    readonly loadingIndicator?: UiDomPlan<'span'>;
-}
-export interface ToastQueueOptions {
-    readonly timeoutMs?: number;
-    readonly timers?: ToastTimers;
-}
-export interface ToastTimers {
-    setTimeout(callback: () => void, delayMs: number): unknown;
-    clearTimeout(timer: unknown): void;
-}
-export interface ToastInput {
-    readonly id?: string;
-    readonly status?: FeedbackStatus;
-    readonly title: string;
-    readonly description?: string;
-    readonly timeoutMs?: number;
-}
-export interface ToastItem extends Required<Pick<ToastInput, 'id' | 'status' | 'title'>> {
-    readonly description?: string;
-    readonly remainingMs: number;
-    readonly paused: boolean;
-}
-export interface ToastQueue {
-    readonly items: readonly ToastItem[];
-    push(input: ToastInput): ToastItem;
-    dismiss(id: string): void;
-    pause(id: string): void;
-    resume(id: string): void;
-    clear(): void;
-    destroy(): void;
-}
-export interface ToastRegionPlanOptions {
-    readonly placement?: ToastPlacement;
-    readonly label?: string;
-}
-export declare function createAlertPlan(options?: AlertPlanOptions): UiDomPlan<'div'>;
-export declare function createAlertPlans(options?: FeedbackSurfacePlanOptions): FeedbackSurfacePlans;
-export declare function createMessagePlan(options?: MessagePlanOptions): UiDomPlan<'div'>;
-export declare function createMessagePlans(options?: FeedbackSurfacePlanOptions): FeedbackSurfacePlans;
-export declare function createToastRegionPlan(options?: ToastRegionPlanOptions): UiDomPlan<'div'>;
-export declare function createToastPlan(item: ToastItem): UiDomPlan<'div'>;
-export declare function createToastItemPlans(item: ToastItem, options?: Omit<FeedbackSurfacePlanOptions, 'id' | 'status'>): FeedbackSurfacePlans;
-export declare function createNotificationRegionPlan(options?: ToastRegionPlanOptions): UiDomPlan<'div'>;
-export declare function createNotificationPlans(item: ToastItem, options?: Omit<FeedbackSurfacePlanOptions, 'id' | 'status'>): FeedbackSurfacePlans;
-export declare function createToastQueue(options?: ToastQueueOptions): ToastQueue;

package/dist/feedback.js

@@ -1,281 +0,0 @@
-/** @license MIT
- * Copyright (c) 2026 vobsjs
- * @vobs/ui
- */
-import { classNames, createButtonPrimitive, createSpinPrimitive, createUiDomPlan, } from './primitives.js';
-export function createAlertPlan(options = {}) {
-    const status = options.status ?? 'info';
-    return createUiDomPlan('div', 'alert', {
-        state: status,
-        attrs: {
-            id: options.id,
-            role: status === 'error' || status === 'warning' ? 'alert' : 'status',
-            'aria-labelledby': options.titleId,
-            'aria-describedby': options.descriptionId,
-            'data-status': status,
-        },
-    });
-}
-export function createAlertPlans(options = {}) {
-    return createFeedbackSurfacePlans('alert', options);
-}
-export function createMessagePlan(options = {}) {
-    const status = options.status ?? 'info';
-    return createUiDomPlan('div', 'message', {
-        state: status,
-        attrs: {
-            id: options.id,
-            role: status === 'error' ? 'alert' : 'status',
-            'data-status': status,
-        },
-    });
-}
-export function createMessagePlans(options = {}) {
-    return createFeedbackSurfacePlans('message', options);
-}
-export function createToastRegionPlan(options = {}) {
-    const placement = options.placement ?? 'top-end';
-    return createUiDomPlan('div', 'toast-region', {
-        state: 'idle',
-        attrs: {
-            role: 'region',
-            'aria-live': 'polite',
-            'aria-label': options.label ?? 'Notifications',
-            'data-placement': placement,
-        },
-    });
-}
-export function createToastPlan(item) {
-    return createUiDomPlan('div', 'toast', {
-        state: item.paused ? 'paused' : 'open',
-        attrs: {
-            id: item.id,
-            role: item.status === 'error' ? 'alert' : 'status',
-            'data-status': item.status,
-            'data-paused': item.paused ? '' : undefined,
-        },
-    });
-}
-export function createToastItemPlans(item, options = {}) {
-    return createFeedbackSurfacePlans('toast', {
-        ...options,
-        id: item.id,
-        status: item.status,
-        titleId: `${item.id}-title`,
-        ...(item.description === undefined ? {} : { descriptionId: `${item.id}-description` }),
-    });
-}
-export function createNotificationRegionPlan(options = {}) {
-    const region = createToastRegionPlan(options);
-    return {
-        ...region,
-        className: `${region.className} kui-notification-region`,
-        attrs: {
-            ...region.attrs,
-            'data-region-kind': 'notification',
-        },
-    };
-}
-export function createNotificationPlans(item, options = {}) {
-    const plans = createFeedbackSurfacePlans('notification', {
-        ...options,
-        id: item.id,
-        status: item.status,
-        titleId: `${item.id}-title`,
-        ...(item.description === undefined ? {} : { descriptionId: `${item.id}-description` }),
-    });
-    return {
-        ...plans,
-        root: {
-            ...plans.root,
-            attrs: {
-                ...plans.root.attrs,
-                'data-paused': item.paused ? '' : undefined,
-                'data-remaining-ms': item.remainingMs,
-            },
-        },
-    };
-}
-export function createToastQueue(options = {}) {
-    const timeoutMs = options.timeoutMs ?? 5000;
-    const timers = options.timers ?? globalTimers;
-    const entries = [];
-    let nextId = 1;
-    const queue = {
-        get items() {
-            return entries.map((entry) => readToast(entry));
-        },
-        push(input) {
-            const entry = {
-                id: input.id ?? `toast-${nextId++}`,
-                status: input.status ?? 'info',
-                title: input.title,
-                ...(input.description === undefined ? {} : { description: input.description }),
-                remainingMs: input.timeoutMs ?? timeoutMs,
-                startedAt: Date.now(),
-                paused: false,
-            };
-            entries.push(entry);
-            schedule(entry);
-            return readToast(entry);
-        },
-        dismiss(id) {
-            const entry = findEntry(id);
-            if (entry === undefined)
-                return;
-            clear(entry);
-            entries.splice(entries.indexOf(entry), 1);
-        },
-        pause(id) {
-            const entry = findEntry(id);
-            if (entry === undefined || entry.paused)
-                return;
-            entry.remainingMs = Math.max(0, entry.remainingMs - (Date.now() - entry.startedAt));
-            entry.paused = true;
-            clear(entry);
-        },
-        resume(id) {
-            const entry = findEntry(id);
-            if (entry === undefined || !entry.paused)
-                return;
-            entry.paused = false;
-            schedule(entry);
-        },
-        clear() {
-            for (const entry of [...entries])
-                queue.dismiss(entry.id);
-        },
-        destroy() {
-            queue.clear();
-        },
-    };
-    function findEntry(id) {
-        return entries.find((entry) => entry.id === id);
-    }
-    function schedule(entry) {
-        clear(entry);
-        entry.startedAt = Date.now();
-        entry.timer = timers.setTimeout(() => queue.dismiss(entry.id), entry.remainingMs);
-    }
-    function clear(entry) {
-        if (entry.timer === undefined)
-            return;
-        timers.clearTimeout(entry.timer);
-        delete entry.timer;
-    }
-    return queue;
-}
-function readToast(entry) {
-    return {
-        id: entry.id,
-        status: entry.status,
-        title: entry.title,
-        ...(entry.description === undefined ? {} : { description: entry.description }),
-        remainingMs: entry.remainingMs,
-        paused: entry.paused,
-    };
-}
-function createFeedbackSurfacePlans(kind, options) {
-    const status = options.status ?? 'info';
-    const root = createFeedbackRootPlan(kind, options);
-    return {
-        root,
-        ...(options.icon === false
-            ? {}
-            : {
-                icon: createUiDomPlan('span', `${kind}-icon`, {
-                    attrs: {
-                        'aria-hidden': 'true',
-                        'data-status': status,
-                    },
-                }),
-            }),
-        content: createUiDomPlan('div', `${kind}-content`),
-        ...(options.titleId === undefined
-            ? {}
-            : {
-                title: createUiDomPlan('strong', `${kind}-title`, {
-                    attrs: { id: options.titleId },
-                }),
-            }),
-        ...(options.descriptionId === undefined
-            ? {}
-            : {
-                description: createUiDomPlan('p', `${kind}-description`, {
-                    attrs: { id: options.descriptionId },
-                }),
-            }),
-        ...(options.action === undefined
-            ? {}
-            : {
-                actionButton: createButtonPrimitive({
-                    label: options.action.label,
-                    variant: options.action.tone === 'primary' ? 'solid' : 'soft',
-                    size: 'sm',
-                    disabled: options.action.disabled === true,
-                    className: classNames(`kui-${kind}-action`, options.action.tone === undefined
-                        ? undefined
-                        : `kui-${kind}-action--${options.action.tone}`),
-                    attrs: {
-                        id: `${options.id ?? kind}-${options.action.id}-action`,
-                        'data-action-id': options.action.id,
-                        'data-tone': options.action.tone ?? 'default',
-                    },
-                }),
-            }),
-        ...(options.closeLabel === undefined
-            ? {}
-            : {
-                closeButton: createButtonPrimitive({
-                    label: options.closeLabel,
-                    variant: 'ghost',
-                    size: 'sm',
-                    iconOnly: true,
-                    className: `kui-${kind}-close`,
-                    attrs: {
-                        id: `${options.id ?? kind}-close`,
-                        'data-feedback-close': '',
-                    },
-                }),
-            }),
-        ...(options.loading === true
-            ? {
-                loadingIndicator: createSpinPrimitive({
-                    label: 'Loading',
-                    className: `kui-${kind}-loading`,
-                }),
-            }
-            : {}),
-    };
-}
-function createFeedbackRootPlan(kind, options) {
-    const status = options.status ?? 'info';
-    return createUiDomPlan('div', kind, {
-        state: options.loading === true ? 'loading' : status,
-        loading: options.loading === true,
-        attrs: {
-            id: options.id,
-            role: feedbackRole(kind, status),
-            'aria-labelledby': options.titleId,
-            'aria-describedby': options.descriptionId,
-            'data-status': status,
-            'data-dismissible': options.closeLabel === undefined ? undefined : '',
-            'data-actionable': options.action === undefined ? undefined : '',
-        },
-    });
-}
-function feedbackRole(kind, status) {
-    if (status === 'error')
-        return 'alert';
-    if (kind === 'alert' && status === 'warning')
-        return 'alert';
-    return 'status';
-}
-const globalTimers = {
-    setTimeout(callback, delayMs) {
-        return setTimeout(callback, delayMs);
-    },
-    clearTimeout(timer) {
-        clearTimeout(timer);
-    },
-};