@llui/components 0.0.1

package/dist/components/collapsible.d.ts

@@ -0,0 +1,64 @@
+import type { Send } from '@llui/dom';
+/**
+ * Collapsible — a single expandable/collapsible section. Simpler than
+ * accordion (no grouping, no keyboard navigation between siblings).
+ */
+export interface CollapsibleState {
+    open: boolean;
+    disabled: boolean;
+}
+export type CollapsibleMsg = {
+    type: 'toggle';
+} | {
+    type: 'open';
+} | {
+    type: 'close';
+} | {
+    type: 'setOpen';
+    open: boolean;
+};
+export interface CollapsibleInit {
+    open?: boolean;
+    disabled?: boolean;
+}
+export declare function init(opts?: CollapsibleInit): CollapsibleState;
+export declare function update(state: CollapsibleState, msg: CollapsibleMsg): [CollapsibleState, never[]];
+export interface CollapsibleParts<S> {
+    root: {
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-disabled': (s: S) => '' | undefined;
+        'data-scope': 'collapsible';
+        'data-part': 'root';
+    };
+    trigger: {
+        type: 'button';
+        'aria-expanded': (s: S) => boolean;
+        'aria-controls': string;
+        id: string;
+        disabled: (s: S) => boolean;
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-disabled': (s: S) => '' | undefined;
+        'data-scope': 'collapsible';
+        'data-part': 'trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+    content: {
+        role: 'region';
+        id: string;
+        'aria-labelledby': string;
+        hidden: (s: S) => boolean;
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-scope': 'collapsible';
+        'data-part': 'content';
+    };
+}
+export interface ConnectOptions {
+    id: string;
+}
+export declare function connect<S>(get: (s: S) => CollapsibleState, send: Send<CollapsibleMsg>, opts: ConnectOptions): CollapsibleParts<S>;
+export declare const collapsible: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+};
+//# sourceMappingURL=collapsible.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../src/components/collapsible.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAErC;;;GAGG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAA;IACb,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,MAAM,cAAc,GACtB;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAClB;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GACjB;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAE,CAAA;AAEtC,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,IAAI,CAAC,IAAI,GAAE,eAAoB,GAAG,gBAAgB,CAEjE;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,cAAc,GAAG,CAAC,gBAAgB,EAAE,KAAK,EAAE,CAAC,CAYhG;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,IAAI,EAAE;QACJ,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,QAAQ,CAAA;QACzC,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,SAAS,CAAA;QACzC,YAAY,EAAE,aAAa,CAAA;QAC3B,WAAW,EAAE,MAAM,CAAA;KACpB,CAAA;IACD,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ,CAAA;QACd,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QAClC,eAAe,EAAE,MAAM,CAAA;QACvB,EAAE,EAAE,MAAM,CAAA;QACV,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QAC3B,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,QAAQ,CAAA;QACzC,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,SAAS,CAAA;QACzC,YAAY,EAAE,aAAa,CAAA;QAC3B,WAAW,EAAE,SAAS,CAAA;QACtB,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;KACjC,CAAA;IACD,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ,CAAA;QACd,EAAE,EAAE,MAAM,CAAA;QACV,iBAAiB,EAAE,MAAM,CAAA;QACzB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QACzB,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,QAAQ,CAAA;QACzC,YAAY,EAAE,aAAa,CAAA;QAC3B,WAAW,EAAE,SAAS,CAAA;KACvB,CAAA;CACF;AAED,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAA;CACX;AAED,wBAAgB,OAAO,CAAC,CAAC,EACvB,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,gBAAgB,EAC/B,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,EAC1B,IAAI,EAAE,cAAc,GACnB,gBAAgB,CAAC,CAAC,CAAC,CAiCrB;AAED,eAAO,MAAM,WAAW;;;;CAA4B,CAAA"}

package/dist/components/collapsible.js

@@ -0,0 +1,51 @@
+export function init(opts = {}) {
+    return { open: opts.open ?? false, disabled: opts.disabled ?? false };
+}
+export function update(state, msg) {
+    if (state.disabled)
+        return [state, []];
+    switch (msg.type) {
+        case 'toggle':
+            return [{ ...state, open: !state.open }, []];
+        case 'open':
+            return [{ ...state, open: true }, []];
+        case 'close':
+            return [{ ...state, open: false }, []];
+        case 'setOpen':
+            return [{ ...state, open: msg.open }, []];
+    }
+}
+export function connect(get, send, opts) {
+    const triggerId = `${opts.id}:trigger`;
+    const contentId = `${opts.id}:content`;
+    return {
+        root: {
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+            'data-scope': 'collapsible',
+            'data-part': 'root',
+        },
+        trigger: {
+            type: 'button',
+            'aria-expanded': (s) => get(s).open,
+            'aria-controls': contentId,
+            id: triggerId,
+            disabled: (s) => get(s).disabled,
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+            'data-scope': 'collapsible',
+            'data-part': 'trigger',
+            onClick: () => send({ type: 'toggle' }),
+        },
+        content: {
+            role: 'region',
+            id: contentId,
+            'aria-labelledby': triggerId,
+            hidden: (s) => !get(s).open,
+            'data-state': (s) => (get(s).open ? 'open' : 'closed'),
+            'data-scope': 'collapsible',
+            'data-part': 'content',
+        },
+    };
+}
+export const collapsible = { init, update, connect };

package/dist/components/color-picker.d.ts

@@ -0,0 +1,125 @@
+import type { Send } from '@llui/dom';
+/**
+ * Color picker — HSL/HSV color selection. Tracks hue (0-360), saturation
+ * (0-100), and lightness (0-100). Emits hex strings for convenience.
+ */
+export interface Hsl {
+    h: number;
+    s: number;
+    l: number;
+}
+export interface ColorPickerState {
+    hsl: Hsl;
+    /** Alpha channel 0..1. */
+    alpha: number;
+    disabled: boolean;
+}
+export type ColorPickerMsg = {
+    type: 'setHsl';
+    hsl: Hsl;
+} | {
+    type: 'setHue';
+    h: number;
+} | {
+    type: 'setSaturation';
+    s: number;
+} | {
+    type: 'setLightness';
+    l: number;
+} | {
+    type: 'setAlpha';
+    alpha: number;
+} | {
+    type: 'setHex';
+    hex: string;
+};
+export interface ColorPickerInit {
+    hsl?: Hsl;
+    alpha?: number;
+    disabled?: boolean;
+}
+export declare function init(opts?: ColorPickerInit): ColorPickerState;
+export declare function update(state: ColorPickerState, msg: ColorPickerMsg): [ColorPickerState, never[]];
+/** Convert HSL (h 0-360, s/l 0-100) to RGB (0-255 each). */
+export declare function hslToRgb(hsl: Hsl): {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function toHex(hsl: Hsl): string;
+export declare function hexToHsl(hex: string): Hsl | null;
+export interface ColorPickerParts<S> {
+    root: {
+        'data-scope': 'color-picker';
+        'data-part': 'root';
+        'data-disabled': (s: S) => '' | undefined;
+    };
+    hueSlider: {
+        type: 'range';
+        min: 0;
+        max: 360;
+        step: 1;
+        'aria-label': string;
+        disabled: (s: S) => boolean;
+        value: (s: S) => string;
+        'data-scope': 'color-picker';
+        'data-part': 'hue-slider';
+        onInput: (e: Event) => void;
+    };
+    saturationSlider: {
+        type: 'range';
+        min: 0;
+        max: 100;
+        step: 1;
+        'aria-label': string;
+        disabled: (s: S) => boolean;
+        value: (s: S) => string;
+        'data-scope': 'color-picker';
+        'data-part': 'saturation-slider';
+        onInput: (e: Event) => void;
+    };
+    lightnessSlider: {
+        type: 'range';
+        min: 0;
+        max: 100;
+        step: 1;
+        'aria-label': string;
+        disabled: (s: S) => boolean;
+        value: (s: S) => string;
+        'data-scope': 'color-picker';
+        'data-part': 'lightness-slider';
+        onInput: (e: Event) => void;
+    };
+    hexInput: {
+        type: 'text';
+        autoComplete: 'off';
+        'aria-label': string;
+        disabled: (s: S) => boolean;
+        value: (s: S) => string;
+        'data-scope': 'color-picker';
+        'data-part': 'hex-input';
+        onInput: (e: Event) => void;
+    };
+    swatch: {
+        'data-scope': 'color-picker';
+        'data-part': 'swatch';
+        'aria-hidden': 'true';
+        style: (s: S) => string;
+    };
+}
+export interface ConnectOptions {
+    hueLabel?: string;
+    saturationLabel?: string;
+    lightnessLabel?: string;
+    hexLabel?: string;
+}
+export declare function connect<S>(get: (s: S) => ColorPickerState, send: Send<ColorPickerMsg>, opts?: ConnectOptions): ColorPickerParts<S>;
+export declare const colorPicker: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    toHex: typeof toHex;
+    hexToHsl: typeof hexToHsl;
+    hslToRgb: typeof hslToRgb;
+};
+//# sourceMappingURL=color-picker.d.ts.map

package/dist/components/color-picker.d.ts.map

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

package/dist/components/color-picker.js

@@ -0,0 +1,169 @@
+export function init(opts = {}) {
+    return {
+        hsl: opts.hsl ?? { h: 0, s: 100, l: 50 },
+        alpha: opts.alpha ?? 1,
+        disabled: opts.disabled ?? false,
+    };
+}
+function clamp(n, min, max) {
+    return Math.max(min, Math.min(max, n));
+}
+export function update(state, msg) {
+    if (state.disabled)
+        return [state, []];
+    switch (msg.type) {
+        case 'setHsl':
+            return [{ ...state, hsl: msg.hsl }, []];
+        case 'setHue':
+            return [{ ...state, hsl: { ...state.hsl, h: ((msg.h % 360) + 360) % 360 } }, []];
+        case 'setSaturation':
+            return [{ ...state, hsl: { ...state.hsl, s: clamp(msg.s, 0, 100) } }, []];
+        case 'setLightness':
+            return [{ ...state, hsl: { ...state.hsl, l: clamp(msg.l, 0, 100) } }, []];
+        case 'setAlpha':
+            return [{ ...state, alpha: clamp(msg.alpha, 0, 1) }, []];
+        case 'setHex': {
+            const hsl = hexToHsl(msg.hex);
+            return hsl ? [{ ...state, hsl }, []] : [state, []];
+        }
+    }
+}
+/** Convert HSL (h 0-360, s/l 0-100) to RGB (0-255 each). */
+export function hslToRgb(hsl) {
+    const s = hsl.s / 100;
+    const l = hsl.l / 100;
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    const x = c * (1 - Math.abs(((hsl.h / 60) % 2) - 1));
+    const m = l - c / 2;
+    let r;
+    let g;
+    let b;
+    const h = hsl.h;
+    if (h < 60)
+        [r, g, b] = [c, x, 0];
+    else if (h < 120)
+        [r, g, b] = [x, c, 0];
+    else if (h < 180)
+        [r, g, b] = [0, c, x];
+    else if (h < 240)
+        [r, g, b] = [0, x, c];
+    else if (h < 300)
+        [r, g, b] = [x, 0, c];
+    else
+        [r, g, b] = [c, 0, x];
+    return {
+        r: Math.round((r + m) * 255),
+        g: Math.round((g + m) * 255),
+        b: Math.round((b + m) * 255),
+    };
+}
+export function toHex(hsl) {
+    const { r, g, b } = hslToRgb(hsl);
+    const hex = (n) => n.toString(16).padStart(2, '0');
+    return `#${hex(r)}${hex(g)}${hex(b)}`;
+}
+export function hexToHsl(hex) {
+    const normalized = hex.trim().replace(/^#/, '');
+    if (!/^[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/.test(normalized))
+        return null;
+    let r;
+    let g;
+    let b;
+    if (normalized.length === 3) {
+        r = parseInt(normalized[0] + normalized[0], 16);
+        g = parseInt(normalized[1] + normalized[1], 16);
+        b = parseInt(normalized[2] + normalized[2], 16);
+    }
+    else {
+        r = parseInt(normalized.slice(0, 2), 16);
+        g = parseInt(normalized.slice(2, 4), 16);
+        b = parseInt(normalized.slice(4, 6), 16);
+    }
+    const rf = r / 255;
+    const gf = g / 255;
+    const bf = b / 255;
+    const max = Math.max(rf, gf, bf);
+    const min = Math.min(rf, gf, bf);
+    const d = max - min;
+    let h = 0;
+    if (d !== 0) {
+        if (max === rf)
+            h = ((gf - bf) / d) % 6;
+        else if (max === gf)
+            h = (bf - rf) / d + 2;
+        else
+            h = (rf - gf) / d + 4;
+        h *= 60;
+        if (h < 0)
+            h += 360;
+    }
+    const l = (max + min) / 2;
+    const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
+    return {
+        h: Math.round(h),
+        s: Math.round(s * 100),
+        l: Math.round(l * 100),
+    };
+}
+export function connect(get, send, opts = {}) {
+    return {
+        root: {
+            'data-scope': 'color-picker',
+            'data-part': 'root',
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+        },
+        hueSlider: {
+            type: 'range',
+            min: 0,
+            max: 360,
+            step: 1,
+            'aria-label': opts.hueLabel ?? 'Hue',
+            disabled: (s) => get(s).disabled,
+            value: (s) => String(get(s).hsl.h),
+            'data-scope': 'color-picker',
+            'data-part': 'hue-slider',
+            onInput: (e) => send({ type: 'setHue', h: Number(e.target.value) }),
+        },
+        saturationSlider: {
+            type: 'range',
+            min: 0,
+            max: 100,
+            step: 1,
+            'aria-label': opts.saturationLabel ?? 'Saturation',
+            disabled: (s) => get(s).disabled,
+            value: (s) => String(get(s).hsl.s),
+            'data-scope': 'color-picker',
+            'data-part': 'saturation-slider',
+            onInput: (e) => send({ type: 'setSaturation', s: Number(e.target.value) }),
+        },
+        lightnessSlider: {
+            type: 'range',
+            min: 0,
+            max: 100,
+            step: 1,
+            'aria-label': opts.lightnessLabel ?? 'Lightness',
+            disabled: (s) => get(s).disabled,
+            value: (s) => String(get(s).hsl.l),
+            'data-scope': 'color-picker',
+            'data-part': 'lightness-slider',
+            onInput: (e) => send({ type: 'setLightness', l: Number(e.target.value) }),
+        },
+        hexInput: {
+            type: 'text',
+            autoComplete: 'off',
+            'aria-label': opts.hexLabel ?? 'Hex color',
+            disabled: (s) => get(s).disabled,
+            value: (s) => toHex(get(s).hsl),
+            'data-scope': 'color-picker',
+            'data-part': 'hex-input',
+            onInput: (e) => send({ type: 'setHex', hex: e.target.value }),
+        },
+        swatch: {
+            'data-scope': 'color-picker',
+            'data-part': 'swatch',
+            'aria-hidden': 'true',
+            style: (s) => `background-color:${toHex(get(s).hsl)};`,
+        },
+    };
+}
+export const colorPicker = { init, update, connect, toHex, hexToHsl, hslToRgb };

package/dist/components/combobox.d.ts

@@ -0,0 +1,163 @@
+import type { Send, TransitionOptions } from '@llui/dom';
+import { type Placement } from '../utils/floating';
+/**
+ * Combobox — text input paired with a filtered listbox dropdown. User
+ * types to filter items, arrow keys navigate the filtered set, Enter
+ * selects. Supports single and multiple selection.
+ */
+export type SelectionMode = 'single' | 'multiple';
+export interface ComboboxState {
+    open: boolean;
+    value: string[];
+    inputValue: string;
+    items: string[];
+    disabledItems: string[];
+    filteredItems: string[];
+    highlightedIndex: number | null;
+    selectionMode: SelectionMode;
+    disabled: boolean;
+}
+export type ComboboxMsg = {
+    type: 'open';
+} | {
+    type: 'close';
+} | {
+    type: 'setInputValue';
+    value: string;
+} | {
+    type: 'selectOption';
+    value: string;
+} | {
+    type: 'setValue';
+    value: string[];
+} | {
+    type: 'clear';
+} | {
+    type: 'highlightNext';
+} | {
+    type: 'highlightPrev';
+} | {
+    type: 'highlightFirst';
+} | {
+    type: 'highlightLast';
+} | {
+    type: 'highlight';
+    index: number | null;
+} | {
+    type: 'selectHighlighted';
+} | {
+    type: 'setItems';
+    items: string[];
+    disabled?: string[];
+};
+export interface ComboboxInit {
+    value?: string[];
+    inputValue?: string;
+    items?: string[];
+    disabledItems?: string[];
+    selectionMode?: SelectionMode;
+    disabled?: boolean;
+}
+export declare function init(opts?: ComboboxInit): ComboboxState;
+export declare function update(state: ComboboxState, msg: ComboboxMsg): [ComboboxState, never[]];
+export interface ComboboxItemParts<S> {
+    item: {
+        role: 'option';
+        id: string;
+        'aria-selected': (s: S) => boolean;
+        'aria-disabled': (s: S) => 'true' | undefined;
+        'data-state': (s: S) => 'selected' | undefined;
+        'data-highlighted': (s: S) => '' | undefined;
+        'data-disabled': (s: S) => '' | undefined;
+        'data-scope': 'combobox';
+        'data-part': 'item';
+        'data-value': string;
+        'data-index': string;
+        onClick: (e: MouseEvent) => void;
+        onPointerMove: (e: PointerEvent) => void;
+    };
+}
+export interface ComboboxParts<S> {
+    root: {
+        role: 'combobox';
+        'aria-expanded': (s: S) => boolean;
+        'aria-controls': string;
+        'aria-haspopup': 'listbox';
+        'data-scope': 'combobox';
+        'data-part': 'root';
+        'data-state': (s: S) => 'open' | 'closed';
+    };
+    input: {
+        type: 'text';
+        role: 'combobox';
+        autoComplete: 'off';
+        'aria-autocomplete': 'list';
+        'aria-expanded': (s: S) => boolean;
+        'aria-controls': string;
+        'aria-activedescendant': (s: S) => string | undefined;
+        'aria-disabled': (s: S) => 'true' | undefined;
+        id: string;
+        disabled: (s: S) => boolean;
+        value: (s: S) => string;
+        'data-scope': 'combobox';
+        'data-part': 'input';
+        onInput: (e: Event) => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+        onFocus: (e: FocusEvent) => void;
+    };
+    trigger: {
+        type: 'button';
+        'aria-label': string;
+        'aria-expanded': (s: S) => boolean;
+        'aria-controls': string;
+        tabIndex: -1;
+        'data-scope': 'combobox';
+        'data-part': 'trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+    positioner: {
+        'data-scope': 'combobox';
+        'data-part': 'positioner';
+        style: string;
+    };
+    content: {
+        role: 'listbox';
+        id: string;
+        'aria-labelledby': string;
+        tabIndex: -1;
+        'data-state': (s: S) => 'open' | 'closed';
+        'data-scope': 'combobox';
+        'data-part': 'content';
+    };
+    item: (value: string, index: number) => ComboboxItemParts<S>;
+    empty: {
+        'data-scope': 'combobox';
+        'data-part': 'empty';
+    };
+}
+export interface ConnectOptions {
+    id: string;
+    triggerLabel?: string;
+}
+export declare function connect<S>(get: (s: S) => ComboboxState, send: Send<ComboboxMsg>, opts: ConnectOptions): ComboboxParts<S>;
+export interface OverlayOptions<S> {
+    get: (s: S) => ComboboxState;
+    send: Send<ComboboxMsg>;
+    parts: ComboboxParts<S>;
+    content: () => Node[];
+    placement?: Placement;
+    offset?: number;
+    flip?: boolean;
+    shift?: boolean;
+    sameWidth?: boolean;
+    transition?: TransitionOptions;
+    target?: string | HTMLElement;
+}
+export declare function overlay<S>(opts: OverlayOptions<S>): Node[];
+export declare const combobox: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    overlay: typeof overlay;
+};
+//# sourceMappingURL=combobox.d.ts.map

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

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