@thl-ui/core 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 thl-ui contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,42 @@
-# Temporary Holding Version
+# @thl-ui/core
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+thl-ui headless core: global config, i18n and framework-free state machines for UI components.
+
+Part of [thl-ui](https://thl.tandd.dev): one UI kit for React, Vue and Angular with a headless TypeScript core, global config, 12 skins, dark mode and i18n (en, ja, vi, zh).
+
+Framework-free TypeScript used by `@thl-ui/react`, `@thl-ui/vue` and `@thl-ui/angular`. You normally get it through one of those; install it directly to share one config between frameworks or to build your own adapter.
+
+```bash
+npm i @thl-ui/core
+```
+
+```ts
+import { createThl, createI18n } from '@thl-ui/core';
+
+const thl = createThl({ locale: 'ja', theme: 'purple-dark', layout: 'horizontal', persist: true });
+thl.t('common.save'); // 保存
+thl.set({ colorMode: 'dark' });
+```
+
+- **Config:** theme (12 skins), color mode, layout, size, radius, z-index and per-component defaults, optionally saved to `localStorage`.
+- **i18n:** plural rules, fallback locale, lazy-loaded locales, `Intl` date and number formatting.
+- **Headless state machines:** table, select, tabs, toast, upload, calendar, validation, pagination, carousel, sidebar.
+
+## Live demos
+
+| Framework | Package | Live demo |
+|---|---|---|
+| React ≥ 18 | [`@thl-ui/react`](https://www.npmjs.com/package/@thl-ui/react) | [thl-react.tandd.dev](https://thl-react.tandd.dev) |
+| Vue ≥ 3.5 | [`@thl-ui/vue`](https://www.npmjs.com/package/@thl-ui/vue) | [thl-vue.tandd.dev](https://thl-vue.tandd.dev) |
+| Angular ≥ 20 | [`@thl-ui/angular`](https://www.npmjs.com/package/@thl-ui/angular) | [thl-angular.tandd.dev](https://thl-angular.tandd.dev) |
+
+Each demo is the full 74-page admin template, built with the packages installed from npm. Open the ⚙ panel to switch skin, layout, dark mode and language.
+
+## Links
+
+- Docs: [thl.tandd.dev/guide/config](https://thl.tandd.dev/guide/config) (English, 日本語, Tiếng Việt, 简体中文)
+- Source and issues: [GitLab](https://gitlab.com/tandd.packages/thl-ui)
+
+## License
+
+MIT

package/dist/config.d.ts

@@ -0,0 +1,132 @@
+import { type Store } from './store.js';
+import { type I18n } from './i18n.js';
+import { type Messages } from '@thl-ui/locales';
+import type { ThlSkin } from '@thl-ui/tokens';
+export type ColorMode = 'light' | 'dark' | 'auto';
+export type LayoutMode = 'vertical' | 'mini' | 'horizontal';
+export type Size = 'sm' | 'md' | 'lg';
+/** Per-component default props. Extend via declaration merging: `declare module '@thl-ui/core' { interface ThlComponentDefaults { MyComp: {...} } }` */
+export interface ThlComponentDefaults {
+    Button: {
+        variant?: string;
+        size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+        rounded?: boolean;
+        outline?: boolean;
+    };
+    Card: {
+        bordered?: boolean;
+        shadow?: boolean;
+    };
+    Modal: {
+        size?: 'sm' | 'md' | 'lg';
+        closeOnBackdrop?: boolean;
+        closeOnEsc?: boolean;
+        centered?: boolean;
+    };
+    Toast: {
+        position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+        duration?: number;
+        max?: number;
+    };
+    Table: {
+        striped?: boolean;
+        hover?: boolean;
+        bordered?: boolean;
+        pageSize?: number;
+        pageSizes?: number[];
+    };
+    Pagination: {
+        maxPages?: number;
+        showTotal?: boolean;
+    };
+    Input: {
+        size?: Size;
+        variant?: 'default' | 'material' | 'line';
+    };
+    Select: {
+        searchable?: boolean;
+        clearable?: boolean;
+    };
+    DatePicker: {
+        format?: Intl.DateTimeFormatOptions;
+        weekStartsOn?: 0 | 1;
+    };
+    Upload: {
+        maxSize?: number;
+        accept?: string;
+        multiple?: boolean;
+    };
+    Tooltip: {
+        placement?: string;
+        delay?: number;
+    };
+    Progress: {
+        size?: 'sm' | 'md' | 'lg';
+        striped?: boolean;
+        animated?: boolean;
+    };
+    Tabs: {
+        variant?: 'default' | 'underline' | 'filled' | 'pills' | 'vertical';
+    };
+    Sidebar: {
+        breakpoint?: number;
+    };
+    [component: string]: Record<string, unknown> | undefined;
+}
+export interface ThlConfig {
+    /** CSS class & custom property prefix. */
+    prefix: string;
+    theme: ThlSkin;
+    colorMode: ColorMode;
+    layout: LayoutMode;
+    fixedHeader: boolean;
+    fixedSidebar: boolean;
+    size: Size;
+    radius: 'sharp' | 'rounded';
+    /** Base z-index for overlays (dropdown = base, modal = base + 50, toast = base + 80). */
+    zIndex: number;
+    locale: string;
+    fallbackLocale: string;
+    /** Extra / override messages, keyed by locale. Merged deeply with built-ins. */
+    messages: Record<string, Messages>;
+    /** Locales offered in the language switcher. */
+    locales: string[];
+    components: Partial<ThlComponentDefaults>;
+    /** Persist theme/colorMode/locale/layout/fixed* to localStorage. */
+    persist: boolean | {
+        key: string;
+    };
+    /** Element receiving data-* attributes. Defaults to <html>. */
+    root?: HTMLElement | null;
+}
+export type ThlUserConfig = Partial<Omit<ThlConfig, 'components' | 'messages'>> & {
+    components?: Partial<ThlComponentDefaults>;
+    messages?: Record<string, Messages>;
+    loadLocale?: (locale: string) => Promise<Messages | {
+        default: Messages;
+    }>;
+};
+export declare const defaultConfig: ThlConfig;
+/** Keys persisted between sessions when `persist` is on. */
+export declare const PERSIST_KEYS: readonly ["theme", "colorMode", "locale", "layout", "fixedHeader", "fixedSidebar", "size", "radius"];
+export interface ThlInstance {
+    config: Store<ThlConfig>;
+    i18n: I18n;
+    get(): ThlConfig;
+    set(patch: Partial<ThlConfig> | ((c: ThlConfig) => Partial<ThlConfig>)): void;
+    subscribe(fn: (c: ThlConfig, prev: ThlConfig) => void): () => void;
+    /** Merged defaults for a component: built-in < config.components[name] < props (undefined props ignored). */
+    defaults<K extends keyof ThlComponentDefaults>(name: K, props?: Partial<NonNullable<ThlComponentDefaults[K]>>): NonNullable<ThlComponentDefaults[K]>;
+    t: I18n['t'];
+    setLocale(locale: string): Promise<void>;
+    /** Resolved color mode ('auto' resolved against prefers-color-scheme). */
+    resolvedColorMode(): 'light' | 'dark';
+    /** Apply data attributes / lang / dir to the root element. Called automatically in browsers. */
+    applyToDocument(): void;
+    /** Re-attach listeners after destroy() (idempotent). */
+    attach(): void;
+    /** Stop listening (persistence, document sync, media queries). Reversible via attach(). */
+    destroy(): void;
+}
+/** Create the global thl-ui instance (config + i18n). One per app; adapters provide it via context/DI. */
+export declare function createThl(user?: ThlUserConfig): ThlInstance;

package/dist/config.js

@@ -0,0 +1,159 @@
+import { createStore } from './store.js';
+import { createI18n, deepMerge } from './i18n.js';
+import { en, ja, vi, zh, localeInfo } from '@thl-ui/locales';
+import { isBrowser } from './utils/dom.js';
+export const defaultConfig = {
+    prefix: 'thl',
+    theme: 'default',
+    colorMode: 'light',
+    layout: 'vertical',
+    fixedHeader: true,
+    fixedSidebar: true,
+    size: 'md',
+    radius: 'rounded',
+    zIndex: 1000,
+    locale: 'en',
+    fallbackLocale: 'en',
+    messages: {},
+    locales: ['en', 'ja', 'vi', 'zh'],
+    components: {
+        Toast: { position: 'top-right', duration: 3500, max: 5 },
+        Table: { pageSize: 10, pageSizes: [10, 25, 50, 100], hover: true },
+        Modal: { closeOnBackdrop: true, closeOnEsc: true },
+        Pagination: { maxPages: 7 },
+        Sidebar: { breakpoint: 1170 },
+    },
+    persist: false,
+};
+/** Keys persisted between sessions when `persist` is on. */
+export const PERSIST_KEYS = ['theme', 'colorMode', 'locale', 'layout', 'fixedHeader', 'fixedSidebar', 'size', 'radius'];
+function storageKey(c) {
+    return typeof c.persist === 'object' ? c.persist.key : `${c.prefix}-ui-config`;
+}
+function readPersisted(key) {
+    if (!isBrowser)
+        return {};
+    try {
+        const raw = window.localStorage.getItem(key);
+        return raw ? JSON.parse(raw) : {};
+    }
+    catch {
+        return {};
+    }
+}
+function writePersisted(c) {
+    if (!isBrowser || !c.persist)
+        return;
+    try {
+        const data = {};
+        for (const k of PERSIST_KEYS)
+            data[k] = c[k];
+        window.localStorage.setItem(storageKey(c), JSON.stringify(data));
+    }
+    catch {
+        /* storage unavailable (private mode, quota) */
+    }
+}
+const builtinMessages = { en, ja, vi, zh };
+/** Create the global thl-ui instance (config + i18n). One per app; adapters provide it via context/DI. */
+export function createThl(user = {}) {
+    const { loadLocale, ...rest } = user;
+    let initial = deepMerge(defaultConfig, rest);
+    if (initial.persist)
+        initial = { ...initial, ...pick(readPersisted(storageKey(initial))) };
+    const config = createStore(initial);
+    const messages = { ...builtinMessages };
+    for (const [l, m] of Object.entries(initial.messages))
+        messages[l] = deepMerge(messages[l] ?? {}, m);
+    const i18n = createI18n({
+        locale: initial.locale,
+        fallbackLocale: initial.fallbackLocale,
+        messages,
+        loadLocale,
+        intlLocale: Object.fromEntries(Object.entries(localeInfo).map(([k, v]) => [k, v.intl])),
+    });
+    const mql = isBrowser && window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
+    const resolvedColorMode = () => {
+        const m = config.get().colorMode;
+        return m === 'auto' ? (mql?.matches ? 'dark' : 'light') : m;
+    };
+    function applyToDocument() {
+        if (!isBrowser)
+            return;
+        const c = config.get();
+        const root = c.root ?? document.documentElement;
+        const p = c.prefix;
+        root.setAttribute(`data-${p}-theme`, c.theme);
+        root.setAttribute(`data-${p}-color-mode`, resolvedColorMode());
+        root.setAttribute(`data-${p}-layout`, c.layout);
+        root.setAttribute(`data-${p}-size`, c.size);
+        root.setAttribute(`data-${p}-radius`, c.radius);
+        root.toggleAttribute(`data-${p}-fixed-header`, c.fixedHeader);
+        root.toggleAttribute(`data-${p}-fixed-sidebar`, c.fixedSidebar);
+        root.style.setProperty(`--${p}-z-base`, String(c.zIndex));
+        if (root === document.documentElement) {
+            root.lang = i18n.getLocale();
+            root.dir = i18n.dir();
+        }
+    }
+    // Listeners are (re)attachable so frameworks that mount → unmount → remount (React StrictMode, HMR)
+    // can call destroy() then attach() again without losing persistence / document sync.
+    let unsubs = [];
+    function attach() {
+        if (unsubs.length)
+            return;
+        unsubs.push(config.subscribe((c, prev) => {
+            if (c.locale !== prev.locale && c.locale !== i18n.getLocale())
+                void i18n.setLocale(c.locale);
+            writePersisted(c);
+            applyToDocument();
+        }));
+        unsubs.push(i18n.locale.subscribe((l) => {
+            if (config.get().locale !== l)
+                config.set((c) => ({ ...c, locale: l }));
+            applyToDocument();
+        }));
+        if (mql) {
+            const onChange = () => config.get().colorMode === 'auto' && applyToDocument();
+            mql.addEventListener?.('change', onChange);
+            unsubs.push(() => mql.removeEventListener?.('change', onChange));
+        }
+        applyToDocument();
+    }
+    attach();
+    const instance = {
+        config,
+        i18n,
+        get: () => config.get(),
+        set(patch) {
+            config.set((c) => ({ ...c, ...(typeof patch === 'function' ? patch(c) : patch) }));
+        },
+        subscribe: (fn) => config.subscribe(fn),
+        defaults(name, props) {
+            const base = (config.get().components[name] ?? {});
+            const out = { ...base };
+            if (props)
+                for (const k in props)
+                    if (props[k] !== undefined)
+                        out[k] = props[k];
+            return out;
+        },
+        t: (k, p) => i18n.t(k, p),
+        setLocale: (l) => i18n.setLocale(l),
+        resolvedColorMode,
+        applyToDocument,
+        attach,
+        destroy() {
+            unsubs.forEach((u) => u());
+            unsubs = [];
+        },
+    };
+    return instance;
+}
+function pick(o) {
+    const out = {};
+    for (const k of PERSIST_KEYS)
+        if (o[k] !== undefined)
+            out[k] = o[k];
+    return out;
+}

package/dist/contracts.d.ts

@@ -0,0 +1,151 @@
+/**
+ * Shared prop contracts — every adapter (React/Vue/Angular) implements these names
+ * so the API is identical across frameworks.
+ */
+import type { ThlSemanticColor } from '@thl-ui/tokens';
+export type Variant = ThlSemanticColor | 'link';
+export type ControlSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SocialBrand = 'facebook' | 'twitter' | 'googleplus' | 'linkedin' | 'dribbble' | 'instagram' | 'pinterest' | 'youtube' | 'github' | 'skype' | 'dropbox' | 'tumblr';
+export interface ButtonProps {
+    variant?: Variant | SocialBrand;
+    size?: ControlSize;
+    outline?: boolean;
+    rounded?: boolean;
+    circle?: boolean;
+    block?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    icon?: string;
+    iconRight?: string;
+    type?: 'button' | 'submit' | 'reset';
+    href?: string;
+}
+export interface BadgeProps {
+    color?: ThlSemanticColor;
+    size?: 'xs' | 'sm' | 'md';
+    dot?: boolean;
+    pill?: boolean;
+}
+export interface LabelProps {
+    color?: ThlSemanticColor | 'white';
+    rounded?: boolean;
+    outline?: boolean;
+}
+export interface AlertProps {
+    type?: ThlSemanticColor;
+    title?: string;
+    icon?: string;
+    dismissible?: boolean;
+}
+export interface CardProps {
+    title?: string;
+    subtitle?: string;
+    bordered?: boolean;
+    shadow?: boolean;
+    padding?: boolean;
+}
+export interface PanelProps {
+    title?: string;
+    color?: ThlSemanticColor;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    dismissible?: boolean;
+    loading?: boolean;
+    fullscreen?: boolean;
+}
+export interface ProgressProps {
+    value: number;
+    max?: number;
+    color?: ThlSemanticColor;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    striped?: boolean;
+    animated?: boolean;
+    vertical?: boolean;
+    label?: boolean | string;
+}
+export interface RibbonProps {
+    text: string;
+    color?: ThlSemanticColor;
+    variant?: 'default' | 'bookmark' | 'corner' | 'vertical-left' | 'vertical-right' | 'badge';
+    position?: 'left' | 'right';
+    placement?: 'top' | 'bottom';
+}
+export interface ModalProps {
+    open: boolean;
+    title?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    closeOnBackdrop?: boolean;
+    closeOnEsc?: boolean;
+    centered?: boolean;
+    scrollable?: boolean;
+    hideClose?: boolean;
+}
+export interface TabsItem {
+    key: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    badge?: string | number;
+}
+export interface TabsProps {
+    items: TabsItem[];
+    active?: string;
+    variant?: 'default' | 'underline' | 'filled' | 'pills' | 'pills-rounded' | 'vertical' | 'line';
+    justified?: boolean;
+}
+export interface StepItem {
+    title: string;
+    description?: string;
+    icon?: string;
+}
+export interface StepsProps {
+    items: StepItem[];
+    current?: number;
+    variant?: 'default' | 'no-bg' | 'thin' | 'line' | 'numbered';
+    clickable?: boolean;
+}
+export interface PaginationProps {
+    page: number;
+    total: number;
+    pageSize?: number;
+    maxPages?: number;
+    size?: 'sm' | 'md' | 'lg';
+    showTotal?: boolean;
+    showFirstLast?: boolean;
+    split?: boolean;
+    /** accessible name of the <nav> (needed when a page has several paginations) */ ariaLabel?: string;
+}
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    icon?: string;
+}
+export interface TimelineItem {
+    title: string;
+    content?: string;
+    time?: string;
+    color?: ThlSemanticColor;
+    icon?: string;
+    image?: string;
+}
+export interface TimelineProps {
+    items: TimelineItem[];
+    variant?: 'default' | 'alternate' | 'left' | 'activity-feed' | 'horizontal';
+}
+export interface StatBoxProps {
+    title: string;
+    value: string | number;
+    icon?: string;
+    color?: ThlSemanticColor;
+    trend?: 'up' | 'down';
+    delta?: string;
+    progress?: number;
+    variant?: 'default' | 'filled' | 'icon-left' | 'soft';
+}
+export interface AvatarProps {
+    src?: string;
+    name?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+    status?: 'online' | 'offline' | 'away' | 'busy';
+    shape?: 'circle' | 'rounded' | 'square';
+}

package/dist/contracts.js

@@ -0,0 +1 @@
+export {};

package/dist/headless/calendar.d.ts

@@ -0,0 +1,21 @@
+/** Date helpers for DatePicker / DateRangePicker / Calendar. */
+export declare const startOfDay: (d: Date) => Date;
+export declare const addDays: (d: Date, n: number) => Date;
+export declare const addMonths: (d: Date, n: number) => Date;
+export declare const isSameDay: (a?: Date | null, b?: Date | null) => boolean;
+export declare const isBetween: (d: Date, a?: Date | null, b?: Date | null) => boolean;
+export interface DayCell {
+    date: Date;
+    inMonth: boolean;
+    today: boolean;
+    key: string;
+}
+/** 6x7 grid for a month view. */
+export declare function monthGrid(year: number, month: number, weekStartsOn?: 0 | 1): DayCell[][];
+/** Localised weekday names using Intl. */
+export declare function weekdayNames(locale: string, weekStartsOn?: 0 | 1, style?: 'narrow' | 'short' | 'long'): string[];
+export declare function monthNames(locale: string, style?: 'short' | 'long'): string[];
+export declare const toISODate: (d: Date) => string;
+export declare function parseISODate(s?: string | null): Date | null;
+/** Preset ranges for DateRangePicker (labels resolved via i18n `datepicker.ranges.*`). */
+export declare function presetRanges(now?: Date): Record<string, [Date, Date]>;

package/dist/headless/calendar.js

@@ -0,0 +1,56 @@
+/** Date helpers for DatePicker / DateRangePicker / Calendar. */
+export const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+export const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+export const addMonths = (d, n) => {
+    const r = new Date(d.getFullYear(), d.getMonth() + n, 1);
+    const last = new Date(r.getFullYear(), r.getMonth() + 1, 0).getDate();
+    r.setDate(Math.min(d.getDate(), last));
+    return r;
+};
+export const isSameDay = (a, b) => !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+export const isBetween = (d, a, b) => !!a && !!b && startOfDay(d) >= startOfDay(a < b ? a : b) && startOfDay(d) <= startOfDay(a < b ? b : a);
+/** 6x7 grid for a month view. */
+export function monthGrid(year, month, weekStartsOn = 1) {
+    const first = new Date(year, month, 1);
+    const offset = (first.getDay() - weekStartsOn + 7) % 7;
+    const start = addDays(first, -offset);
+    const today = startOfDay(new Date());
+    const weeks = [];
+    for (let w = 0; w < 6; w++) {
+        const row = [];
+        for (let i = 0; i < 7; i++) {
+            const date = addDays(start, w * 7 + i);
+            row.push({ date, inMonth: date.getMonth() === month, today: isSameDay(date, today), key: `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}` });
+        }
+        weeks.push(row);
+    }
+    return weeks;
+}
+/** Localised weekday names using Intl. */
+export function weekdayNames(locale, weekStartsOn = 1, style = 'short') {
+    const fmt = new Intl.DateTimeFormat(locale, { weekday: style });
+    return Array.from({ length: 7 }, (_, i) => fmt.format(new Date(2024, 0, 7 + ((i + weekStartsOn) % 7)))); // 2024-01-07 is Sunday
+}
+export function monthNames(locale, style = 'long') {
+    const fmt = new Intl.DateTimeFormat(locale, { month: style });
+    return Array.from({ length: 12 }, (_, i) => fmt.format(new Date(2024, i, 1)));
+}
+export const toISODate = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+export function parseISODate(s) {
+    if (!s)
+        return null;
+    const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(s);
+    return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null;
+}
+/** Preset ranges for DateRangePicker (labels resolved via i18n `datepicker.ranges.*`). */
+export function presetRanges(now = new Date()) {
+    const t = startOfDay(now);
+    return {
+        today: [t, t],
+        yesterday: [addDays(t, -1), addDays(t, -1)],
+        last7: [addDays(t, -6), t],
+        last30: [addDays(t, -29), t],
+        thisMonth: [new Date(t.getFullYear(), t.getMonth(), 1), new Date(t.getFullYear(), t.getMonth() + 1, 0)],
+        lastMonth: [new Date(t.getFullYear(), t.getMonth() - 1, 1), new Date(t.getFullYear(), t.getMonth(), 0)],
+    };
+}

package/dist/headless/carousel.d.ts

@@ -0,0 +1,17 @@
+export declare function createCarousel(opts: {
+    count: number;
+    index?: number;
+    loop?: boolean;
+    interval?: number;
+    onChange?: (i: number) => void;
+}): {
+    state: import("../store.js").Store<number>;
+    index: () => number;
+    next: () => void;
+    prev: () => void;
+    goTo: (i: number) => void;
+    setCount: (n: number) => void;
+    play(): void;
+    pause(): void;
+    destroy(): void;
+};

package/dist/headless/carousel.js

@@ -0,0 +1,39 @@
+import { createStore } from '../store.js';
+export function createCarousel(opts) {
+    let count = opts.count;
+    const state = createStore(opts.index ?? 0);
+    state.subscribe((v) => opts.onChange?.(v));
+    let timer;
+    const go = (i) => {
+        if (count <= 0)
+            return;
+        const loop = opts.loop ?? true;
+        state.set(loop ? (i + count) % count : Math.max(0, Math.min(count - 1, i)));
+    };
+    const api = {
+        state,
+        index: () => state.get(),
+        next: () => go(state.get() + 1),
+        prev: () => go(state.get() - 1),
+        goTo: go,
+        setCount: (n) => {
+            count = n;
+            if (state.get() >= n)
+                state.set(Math.max(0, n - 1));
+        },
+        play() {
+            api.pause();
+            if (opts.interval)
+                timer = setInterval(api.next, opts.interval);
+        },
+        pause() {
+            if (timer)
+                clearInterval(timer);
+            timer = undefined;
+        },
+        destroy() {
+            api.pause();
+        },
+    };
+    return api;
+}

package/dist/headless/disclosure.d.ts

@@ -0,0 +1,22 @@
+export interface DisclosureOptions {
+    open?: boolean;
+    onChange?: (open: boolean) => void;
+}
+/** Open/close state — collapse, panel, accordion item, sidebar submenu, dropdown, modal. */
+export declare function createDisclosure(opts?: DisclosureOptions): {
+    state: import("../store.js").Store<boolean>;
+    isOpen: () => boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    set: (v: boolean) => void;
+};
+/** Accordion: a group of disclosures, optionally only one open at a time. */
+export declare function createAccordion(opts?: {
+    multiple?: boolean;
+    open?: string[];
+}): {
+    state: import("../store.js").Store<string[]>;
+    isOpen: (id: string) => boolean;
+    toggle(id: string): void;
+};