@llui/components 0.0.1

package/dist/components/pin-input.js

@@ -0,0 +1,139 @@
+export function init(opts = {}) {
+    const length = opts.length ?? 4;
+    const values = opts.values ?? new Array(length).fill('');
+    return {
+        values,
+        length,
+        type: opts.type ?? 'numeric',
+        mask: opts.mask ?? false,
+        disabled: opts.disabled ?? false,
+        focusedIndex: 0,
+    };
+}
+function sanitize(char, type) {
+    if (char.length !== 1)
+        return '';
+    if (type === 'numeric' && !/\d/.test(char))
+        return '';
+    if (type === 'alphabetic' && !/[a-zA-Z]/.test(char))
+        return '';
+    if (type === 'alphanumeric' && !/[a-zA-Z0-9]/.test(char))
+        return '';
+    return char;
+}
+export function update(state, msg) {
+    if (state.disabled)
+        return [state, []];
+    switch (msg.type) {
+        case 'setValue': {
+            const char = sanitize(msg.value.slice(-1), state.type);
+            if (!char && msg.value !== '')
+                return [state, []];
+            const values = [...state.values];
+            values[msg.index] = char;
+            // Auto-advance
+            const nextIndex = char ? Math.min(msg.index + 1, state.length - 1) : msg.index;
+            return [{ ...state, values, focusedIndex: nextIndex }, []];
+        }
+        case 'setAll': {
+            const values = new Array(state.length).fill('');
+            for (let i = 0; i < Math.min(msg.values.length, state.length); i++) {
+                values[i] = sanitize(msg.values[i], state.type);
+            }
+            const lastFilled = values.findIndex((v) => v === '');
+            const focusedIndex = lastFilled === -1 ? state.length - 1 : lastFilled;
+            return [{ ...state, values, focusedIndex }, []];
+        }
+        case 'focus':
+            return [{ ...state, focusedIndex: Math.max(0, Math.min(msg.index, state.length - 1)) }, []];
+        case 'clear':
+            return [{ ...state, values: new Array(state.length).fill(''), focusedIndex: 0 }, []];
+        case 'backspace': {
+            const values = [...state.values];
+            if (values[msg.index]) {
+                values[msg.index] = '';
+                return [{ ...state, values }, []];
+            }
+            // Field is empty — move focus back and clear prior
+            const prev = Math.max(0, msg.index - 1);
+            values[prev] = '';
+            return [{ ...state, values, focusedIndex: prev }, []];
+        }
+    }
+}
+export function isComplete(state) {
+    return state.values.every((v) => v !== '');
+}
+export function getValue(state) {
+    return state.values.join('');
+}
+export function connect(get, send, opts) {
+    const labelId = `${opts.id}:label`;
+    const inputLabel = opts.inputLabel ?? ((i) => `Digit ${i + 1}`);
+    const validate = opts.validate;
+    return {
+        root: {
+            role: 'group',
+            'aria-labelledby': labelId,
+            'data-scope': 'pin-input',
+            'data-part': 'root',
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+        },
+        label: {
+            id: labelId,
+            'data-scope': 'pin-input',
+            'data-part': 'label',
+        },
+        input: (index) => ({
+            type: (s) => (get(s).mask ? 'password' : 'text'),
+            inputMode: (s) => (get(s).type === 'numeric' ? 'numeric' : 'text'),
+            pattern: (s) => {
+                switch (get(s).type) {
+                    case 'numeric':
+                        return '[0-9]*';
+                    case 'alphabetic':
+                        return '[a-zA-Z]*';
+                    case 'alphanumeric':
+                        return '[a-zA-Z0-9]*';
+                }
+            },
+            maxLength: 1,
+            autoComplete: 'off',
+            'aria-label': inputLabel(index),
+            disabled: (s) => get(s).disabled,
+            value: (s) => get(s).values[index] ?? '',
+            'data-scope': 'pin-input',
+            'data-part': 'input',
+            'data-index': String(index),
+            onInput: (e) => {
+                const value = e.target.value;
+                if (validate && value !== '') {
+                    const errors = validate(value.slice(-1));
+                    if (errors && errors.length > 0)
+                        return;
+                }
+                send({ type: 'setValue', index, value });
+            },
+            onKeyDown: (e) => {
+                if (e.key === 'Backspace') {
+                    send({ type: 'backspace', index });
+                }
+                else if (e.key === 'ArrowLeft') {
+                    e.preventDefault();
+                    send({ type: 'focus', index: index - 1 });
+                }
+                else if (e.key === 'ArrowRight') {
+                    e.preventDefault();
+                    send({ type: 'focus', index: index + 1 });
+                }
+            },
+            onFocus: () => send({ type: 'focus', index }),
+            onPaste: (e) => {
+                e.preventDefault();
+                const text = e.clipboardData?.getData('text') ?? '';
+                send({ type: 'setAll', values: text.split('') });
+            },
+        }),
+    };
+}
+export const pinInput = { init, update, connect, isComplete, getValue };

package/dist/components/popover.d.ts

@@ -0,0 +1,116 @@
+import type { Send, TransitionOptions } from '@llui/dom';
+import { type Placement } from '../utils/floating';
+/**
+ * Popover — click-triggered, non-modal floating overlay anchored to its
+ * trigger. Use for menus, date pickers, color pickers, filters, etc.
+ *
+ * Like dialog, has a pure state machine + a view helper (`overlay()`) that
+ * wires floating-ui positioning, dismissable, and optional focus trapping.
+ */
+export interface PopoverState {
+    open: boolean;
+}
+export type PopoverMsg = {
+    type: 'open';
+} | {
+    type: 'close';
+} | {
+    type: 'toggle';
+} | {
+    type: 'setOpen';
+    open: boolean;
+};
+export interface PopoverInit {
+    open?: boolean;
+}
+export declare function init(opts?: PopoverInit): PopoverState;
+export declare function update(state: PopoverState, msg: PopoverMsg): [PopoverState, never[]];
+export interface PopoverParts<S> {
+    trigger: {
+        type: 'button';
+        'aria-haspopup': 'dialog';
+        'aria-expanded': (s: S) => boolean;
+        'aria-controls': string;
+        id: string;
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-scope': 'popover';
+        'data-part': 'trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+    positioner: {
+        'data-scope': 'popover';
+        'data-part': 'positioner';
+        style: string;
+    };
+    content: {
+        role: 'dialog';
+        id: string;
+        'aria-labelledby': string;
+        tabIndex: -1;
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-scope': 'popover';
+        'data-part': 'content';
+    };
+    title: {
+        id: string;
+        'data-scope': 'popover';
+        'data-part': 'title';
+    };
+    description: {
+        id: string;
+        'data-scope': 'popover';
+        'data-part': 'description';
+    };
+    arrow: {
+        'data-scope': 'popover';
+        'data-part': 'arrow';
+    };
+    closeTrigger: {
+        type: 'button';
+        'aria-label': string;
+        'data-scope': 'popover';
+        'data-part': 'close-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+}
+export interface ConnectOptions {
+    id: string;
+    closeLabel?: string;
+}
+export declare function connect<S>(get: (s: S) => PopoverState, send: Send<PopoverMsg>, opts: ConnectOptions): PopoverParts<S>;
+export interface OverlayOptions<S> {
+    get: (s: S) => PopoverState;
+    send: Send<PopoverMsg>;
+    parts: PopoverParts<S>;
+    content: () => Node[];
+    /** Placement preference — bottom | top | right | left with -start/-end variants. */
+    placement?: Placement;
+    /** Offset between trigger and content, px (default: 8). */
+    offset?: number;
+    /** Auto-flip to opposite side (default: true). */
+    flip?: boolean;
+    /** Shift to keep in viewport (default: true). */
+    shift?: boolean;
+    /** Optional transition. */
+    transition?: TransitionOptions;
+    /** Close on Escape (default: true). */
+    closeOnEscape?: boolean;
+    /** Close on outside click (default: true). */
+    closeOnOutsideClick?: boolean;
+    /** Trap focus inside popover while open (default: false — non-modal). */
+    trapFocus?: boolean;
+    /** Restore focus to trigger on close (default: true). */
+    restoreFocus?: boolean;
+    /** Portal target (default: 'body'). */
+    target?: string | HTMLElement;
+    /** Arrow element selector within content (optional). */
+    arrowSelector?: string;
+}
+export declare function overlay<S>(opts: OverlayOptions<S>): Node[];
+export declare const popover: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    overlay: typeof overlay;
+};
+//# sourceMappingURL=popover.d.ts.map

package/dist/components/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/components/popover.ts"],"names":[],"mappings":"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"}

package/dist/components/popover.js

@@ -0,0 +1,146 @@
+import { show, portal, onMount, div } from '@llui/dom';
+import { pushDismissable } from '../utils/dismissable';
+import { pushFocusTrap } from '../utils/focus-trap';
+import { attachFloating } from '../utils/floating';
+export function init(opts = {}) {
+    return { open: opts.open ?? false };
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'open':
+            return [{ ...state, open: true }, []];
+        case 'close':
+            return [{ ...state, open: false }, []];
+        case 'toggle':
+            return [{ ...state, open: !state.open }, []];
+        case 'setOpen':
+            return [{ ...state, open: msg.open }, []];
+    }
+}
+export function connect(get, send, opts) {
+    const base = opts.id;
+    const triggerId = `${base}:trigger`;
+    const contentId = `${base}:content`;
+    const titleId = `${base}:title`;
+    const descId = `${base}:description`;
+    const closeLabel = opts.closeLabel ?? 'Close';
+    return {
+        trigger: {
+            type: 'button',
+            'aria-haspopup': 'dialog',
+            'aria-expanded': (s) => get(s).open,
+            'aria-controls': contentId,
+            id: triggerId,
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+            'data-scope': 'popover',
+            'data-part': 'trigger',
+            onClick: () => send({ type: 'toggle' }),
+        },
+        positioner: {
+            'data-scope': 'popover',
+            'data-part': 'positioner',
+            style: 'position:absolute;top:0;left:0;',
+        },
+        content: {
+            role: 'dialog',
+            id: contentId,
+            'aria-labelledby': titleId,
+            tabIndex: -1,
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+            'data-scope': 'popover',
+            'data-part': 'content',
+        },
+        title: {
+            id: titleId,
+            'data-scope': 'popover',
+            'data-part': 'title',
+        },
+        description: {
+            id: descId,
+            'data-scope': 'popover',
+            'data-part': 'description',
+        },
+        arrow: {
+            'data-scope': 'popover',
+            'data-part': 'arrow',
+        },
+        closeTrigger: {
+            type: 'button',
+            'aria-label': closeLabel,
+            'data-scope': 'popover',
+            'data-part': 'close-trigger',
+            onClick: () => send({ type: 'close' }),
+        },
+    };
+}
+export function overlay(opts) {
+    const target = opts.target ?? 'body';
+    const placement = opts.placement ?? 'bottom';
+    const offset = opts.offset ?? 8;
+    const flip = opts.flip !== false;
+    const shift = opts.shift !== false;
+    const closeOnEscape = opts.closeOnEscape !== false;
+    const closeOnOutsideClick = opts.closeOnOutsideClick !== false;
+    const trapFocus = opts.trapFocus === true;
+    const restoreFocus = opts.restoreFocus !== false;
+    const parts = opts.parts;
+    const contentId = parts.content.id;
+    const triggerId = parts.trigger.id;
+    return show({
+        when: (s) => opts.get(s).open,
+        render: () => portal({
+            target,
+            render: () => {
+                onMount(() => {
+                    const contentEl = document.getElementById(contentId);
+                    const triggerEl = document.getElementById(triggerId);
+                    if (!contentEl || !triggerEl)
+                        return;
+                    const cleanups = [];
+                    // Position content relative to trigger
+                    const positioner = contentEl.closest('[data-part="positioner"]');
+                    const floatingEl = positioner ?? contentEl;
+                    const arrow = opts.arrowSelector
+                        ? contentEl.querySelector(opts.arrowSelector)
+                        : null;
+                    cleanups.push(attachFloating({
+                        anchor: triggerEl,
+                        floating: floatingEl,
+                        placement,
+                        offset,
+                        flip,
+                        shift,
+                        arrow: arrow ?? undefined,
+                    }));
+                    if (trapFocus) {
+                        cleanups.push(pushFocusTrap({
+                            container: contentEl,
+                            restoreFocus,
+                        }));
+                    }
+                    if (closeOnEscape || closeOnOutsideClick) {
+                        cleanups.push(pushDismissable({
+                            element: contentEl,
+                            ignore: () => [triggerEl],
+                            disableEscape: !closeOnEscape,
+                            disableOutside: !closeOnOutsideClick,
+                            onDismiss: () => {
+                                opts.send({ type: 'close' });
+                                if (restoreFocus)
+                                    triggerEl.focus();
+                            },
+                        }));
+                    }
+                    return () => {
+                        for (let i = cleanups.length - 1; i >= 0; i--)
+                            cleanups[i]();
+                    };
+                });
+                return [div(parts.positioner, opts.content())];
+            },
+        }),
+        enter: opts.transition?.enter,
+        leave: opts.transition?.leave,
+    });
+}
+export const popover = { init, update, connect, overlay };

package/dist/components/presence.d.ts

@@ -0,0 +1,71 @@
+import type { Send } from '@llui/dom';
+/**
+ * Presence — track mount/unmount lifecycle with exit-delay support.
+ *
+ * In many components (dialogs, tooltips, menus) the consumer wants to:
+ *   1. close the overlay (fire exit animation)
+ *   2. keep it mounted long enough for the animation to finish
+ *   3. unmount it
+ *
+ * LLui already provides `@llui/transitions` for most of this, but a
+ * presence machine is useful when you want to coordinate multiple
+ * elements or expose state outside the transition primitive.
+ *
+ * State flow:
+ *   closed → (open) → opening → open
+ *   open   → (close) → closing → closed
+ *
+ * The consumer fires `animationEnd` to advance past opening/closing.
+ * If `unmountOnExit` is true, `closed` means "safe to remove from DOM";
+ * otherwise the element stays mounted even when closed (display:none).
+ */
+export type PresenceStatus = 'closed' | 'opening' | 'open' | 'closing';
+export interface PresenceState {
+    status: PresenceStatus;
+    unmountOnExit: boolean;
+}
+export type PresenceMsg = {
+    type: 'open';
+} | {
+    type: 'close';
+} | {
+    type: 'toggle';
+} | {
+    type: 'animationEnd';
+} | {
+    type: 'setPresent';
+    present: boolean;
+};
+export interface PresenceInit {
+    /** Initial presence — true starts in 'open', false starts in 'closed'. */
+    present?: boolean;
+    /** Whether 'closed' means "unmount" (true) or "hidden but mounted" (false). Default: true. */
+    unmountOnExit?: boolean;
+}
+export declare function init(opts?: PresenceInit): PresenceState;
+export declare function update(state: PresenceState, msg: PresenceMsg): [PresenceState, never[]];
+/** Whether the element should be in the DOM (mounted). */
+export declare function isMounted(state: PresenceState): boolean;
+/** Whether the element is visible (not running an exit animation). */
+export declare function isVisible(state: PresenceState): boolean;
+export declare function isAnimating(state: PresenceState): boolean;
+export interface PresenceParts<S> {
+    root: {
+        'data-scope': 'presence';
+        'data-part': 'root';
+        'data-state': (s: S) => PresenceStatus;
+        hidden: (s: S) => boolean;
+        onAnimationEnd: (e: AnimationEvent) => void;
+        onTransitionEnd: (e: TransitionEvent) => void;
+    };
+}
+export declare function connect<S>(get: (s: S) => PresenceState, send: Send<PresenceMsg>): PresenceParts<S>;
+export declare const presence: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    isMounted: typeof isMounted;
+    isVisible: typeof isVisible;
+    isAnimating: typeof isAnimating;
+};
+//# sourceMappingURL=presence.d.ts.map

package/dist/components/presence.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"presence.d.ts","sourceRoot":"","sources":["../../src/components/presence.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAErC;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAA;AAEtE,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,cAAc,CAAA;IACtB,aAAa,EAAE,OAAO,CAAA;CACvB;AAED,MAAM,MAAM,WAAW,GACnB;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GACjB;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAClB;IAAE,IAAI,EAAE,cAAc,CAAA;CAAE,GACxB;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAA;AAE5C,MAAM,WAAW,YAAY;IAC3B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,wBAAgB,IAAI,CAAC,IAAI,GAAE,YAAiB,GAAG,aAAa,CAK3D;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,WAAW,GAAG,CAAC,aAAa,EAAE,KAAK,EAAE,CAAC,CAmBvF;AAED,0DAA0D;AAC1D,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAGvD;AAED,sEAAsE;AACtE,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAEvD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAEzD;AAED,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,IAAI,EAAE;QACJ,YAAY,EAAE,UAAU,CAAA;QACxB,WAAW,EAAE,MAAM,CAAA;QACnB,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,cAAc,CAAA;QACtC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QACzB,cAAc,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAA;QAC3C,eAAe,EAAE,CAAC,CAAC,EAAE,eAAe,KAAK,IAAI,CAAA;KAC9C,CAAA;CACF;AAED,wBAAgB,OAAO,CAAC,CAAC,EACvB,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,aAAa,EAC5B,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,GACtB,aAAa,CAAC,CAAC,CAAC,CAYlB;AAED,eAAO,MAAM,QAAQ;;;;;;;CAA+D,CAAA"}

package/dist/components/presence.js

@@ -0,0 +1,57 @@
+export function init(opts = {}) {
+    return {
+        status: opts.present ? 'open' : 'closed',
+        unmountOnExit: opts.unmountOnExit ?? true,
+    };
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'open':
+            if (state.status === 'open' || state.status === 'opening')
+                return [state, []];
+            return [{ ...state, status: 'opening' }, []];
+        case 'close':
+            if (state.status === 'closed' || state.status === 'closing')
+                return [state, []];
+            return [{ ...state, status: 'closing' }, []];
+        case 'toggle': {
+            const present = state.status === 'open' || state.status === 'opening';
+            return update(state, { type: present ? 'close' : 'open' });
+        }
+        case 'animationEnd':
+            if (state.status === 'opening')
+                return [{ ...state, status: 'open' }, []];
+            if (state.status === 'closing')
+                return [{ ...state, status: 'closed' }, []];
+            return [state, []];
+        case 'setPresent':
+            return [{ ...state, status: msg.present ? 'open' : 'closed' }, []];
+    }
+}
+/** Whether the element should be in the DOM (mounted). */
+export function isMounted(state) {
+    if (!state.unmountOnExit)
+        return true;
+    return state.status !== 'closed';
+}
+/** Whether the element is visible (not running an exit animation). */
+export function isVisible(state) {
+    return state.status === 'open' || state.status === 'opening';
+}
+export function isAnimating(state) {
+    return state.status === 'opening' || state.status === 'closing';
+}
+export function connect(get, send) {
+    const onEnd = () => send({ type: 'animationEnd' });
+    return {
+        root: {
+            'data-scope': 'presence',
+            'data-part': 'root',
+            'data-state': (s) => get(s).status,
+            hidden: (s) => (get(s).status === 'closed' && !get(s).unmountOnExit ? true : false),
+            onAnimationEnd: onEnd,
+            onTransitionEnd: onEnd,
+        },
+    };
+}
+export const presence = { init, update, connect, isMounted, isVisible, isAnimating };

package/dist/components/progress.d.ts

@@ -0,0 +1,74 @@
+import type { Send } from '@llui/dom';
+/**
+ * Progress — linear or circular progress indicator. Determinate (0..max) or
+ * indeterminate (`value: null`).
+ */
+export type ProgressOrientation = 'horizontal' | 'vertical';
+export interface ProgressState {
+    value: number | null;
+    min: number;
+    max: number;
+    orientation: ProgressOrientation;
+}
+export type ProgressMsg = {
+    type: 'setValue';
+    value: number | null;
+} | {
+    type: 'setMax';
+    max: number;
+};
+export interface ProgressInit {
+    value?: number | null;
+    min?: number;
+    max?: number;
+    orientation?: ProgressOrientation;
+}
+export declare function init(opts?: ProgressInit): ProgressState;
+export declare function update(state: ProgressState, msg: ProgressMsg): [ProgressState, never[]];
+export declare function percent(state: ProgressState): number | null;
+export declare function valueState(state: ProgressState): 'indeterminate' | 'complete' | 'loading';
+export interface ProgressParts<S> {
+    root: {
+        role: 'progressbar';
+        'aria-valuemin': (s: S) => number;
+        'aria-valuemax': (s: S) => number;
+        'aria-valuenow': (s: S) => number | undefined;
+        'aria-label': string | undefined;
+        'data-state': (s: S) => 'indeterminate' | 'complete' | 'loading';
+        'data-orientation': (s: S) => ProgressOrientation;
+        'data-scope': 'progress';
+        'data-part': 'root';
+    };
+    track: {
+        'data-state': (s: S) => 'indeterminate' | 'complete' | 'loading';
+        'data-orientation': (s: S) => ProgressOrientation;
+        'data-scope': 'progress';
+        'data-part': 'track';
+    };
+    range: {
+        'data-state': (s: S) => 'indeterminate' | 'complete' | 'loading';
+        'data-orientation': (s: S) => ProgressOrientation;
+        'data-scope': 'progress';
+        'data-part': 'range';
+        style: (s: S) => string;
+    };
+    label: {
+        'data-scope': 'progress';
+        'data-part': 'label';
+    };
+    valueText: (s: S) => string;
+}
+export interface ConnectOptions {
+    label?: string;
+    /** Custom formatter for value text. */
+    format?: (value: number | null, max: number) => string;
+}
+export declare function connect<S>(get: (s: S) => ProgressState, _send: Send<ProgressMsg>, opts?: ConnectOptions): ProgressParts<S>;
+export declare const progress: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    percent: typeof percent;
+    valueState: typeof valueState;
+};
+//# sourceMappingURL=progress.d.ts.map

package/dist/components/progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/components/progress.ts"],"names":[],"mappings":"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"}