@vobs/ui 0.3.0 → 1.0.0

package/dist/dialog.d.ts

@@ -1,26 +0,0 @@
-/** @license MIT
- * Copyright (c) 2026 vobsjs
- * @vobs/ui
- */
-import { type ComponentProps, type ComponentSlotContract } from '@vobs/runtime-dom';
-import { type OverlayCloseReason } from './overlay.js';
-export type DialogSize = 'lg' | 'md' | 'sm';
-export interface DialogProps {
-    readonly open: boolean;
-    readonly id: string;
-    readonly size?: DialogSize;
-    readonly modal?: boolean;
-    readonly 'title-id'?: string;
-    readonly 'description-id'?: string;
-    readonly 'surface-class'?: string;
-    readonly [key: string]: unknown;
-}
-export interface DialogEvents extends Record<string, (...args: never[]) => unknown> {
-    readonly close: (reason: OverlayCloseReason) => void;
-}
-export interface DialogScope {
-    readonly props: ComponentProps<DialogProps>;
-    readonly emit: <Name extends keyof DialogEvents & string>(name: Name, ...args: Parameters<DialogEvents[Name]>) => void;
-}
-export type DialogSlots = Readonly<ComponentSlotContract>;
-export declare const Dialog: import("@vobs/runtime-core").ComponentDefinition<DialogProps, DialogEvents, DialogScope, Readonly<Readonly<Record<string, Readonly<Record<string, unknown>>>>>>;

package/dist/dialog.js

@@ -1,94 +0,0 @@
-/** @license MIT
- * Copyright (c) 2026 vobsjs
- * @vobs/ui
- */
-import { effect } from '@vobs/reactivity';
-import { COMPONENT_SLOTS, createCompiledTemplate, defineComponent, } from '@vobs/runtime-dom';
-import { createOverlayStack } from './overlay.js';
-export const Dialog = defineComponent({
-    template: createCompiledTemplate({
-        templateId: 'k-dialog',
-        sourceId: '@vobs/ui/dialog',
-        rootTag: 'div',
-        mount(owner, scope, environment) {
-            return mountDialog(owner, scope, environment);
-        },
-    }),
-    props: ['open', 'id', 'size', 'modal', 'title-id', 'description-id', 'surface-class'],
-    emits: ['close'],
-    [COMPONENT_SLOTS]: { default: {} },
-    setup(context) {
-        return {
-            props: context.props,
-            emit: (name, ...args) => context.emit(name, ...args),
-        };
-    },
-});
-function mountDialog(owner, scope, environment) {
-    const root = document.createElement('div');
-    root.className = 'kui-overlay-root';
-    root.setAttribute('data-backdrop', 'true');
-    root.setAttribute('role', 'presentation');
-    const surface = document.createElement('section');
-    surface.className = 'kui-dialog';
-    surface.setAttribute('role', 'dialog');
-    surface.setAttribute('aria-modal', 'true');
-    root.append(surface);
-    environment.slots?.default?.(owner, surface);
-    const stack = createOverlayStack({ document });
-    let handle;
-    let wasOpen = false;
-    const stop = effect(() => {
-        const props = scope.props;
-        const open = props.open.value === true;
-        const id = readString(props.id.value, 'dialog');
-        const size = readSize(props.size?.value);
-        const modal = props.modal?.value !== false;
-        root.hidden = !open;
-        root.setAttribute('data-state', open ? 'open' : 'closed');
-        surface.id = id;
-        surface.setAttribute('data-size', size);
-        surface.setAttribute('aria-modal', String(modal));
-        setOptionalAttribute(surface, 'aria-labelledby', props['title-id']?.value);
-        setOptionalAttribute(surface, 'aria-describedby', props['description-id']?.value);
-        const surfaceClass = readString(props['surface-class']?.value, '');
-        surface.className = `kui-dialog${surfaceClass === '' ? '' : ` ${surfaceClass}`}`;
-        if (open === wasOpen)
-            return;
-        wasOpen = open;
-        if (open) {
-            handle = stack.open({
-                id,
-                kind: 'dialog',
-                modal,
-                element: surface,
-                managedElement: false,
-                closeOnOutside: true,
-                onClose: (reason) => scope.emit('close', reason),
-            });
-        }
-        else {
-            handle?.destroy();
-            handle = undefined;
-        }
-    }, { scheduler: environment.scheduler, flush: 'post' });
-    owner.own(stop);
-    owner.own(() => {
-        handle?.destroy();
-        stack.destroy();
-    });
-    return { root, refs: {} };
-}
-function readString(value, fallback) {
-    return typeof value === 'string' && value.trim() !== '' ? value : fallback;
-}
-function readSize(value) {
-    return value === 'sm' || value === 'lg' ? value : 'md';
-}
-function setOptionalAttribute(element, name, value) {
-    const normalized = typeof value === 'string' ? value.trim() : '';
-    if (normalized === '')
-        element.removeAttribute(name);
-    else
-        element.setAttribute(name, normalized);
-}

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);
-    },
-};