@vinhhypc/config-theme 0.1.0

package/dist/components/themed/Pagination.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Build the visible page list with ellipses for large ranges. */
+function pageList(page, total, siblings) {
+    if (total <= siblings + 2) {
+        return Array.from({ length: total }, (_, i) => i + 1);
+    }
+    const pages = new Set([1, total, page]);
+    for (let i = 1; i <= Math.floor(siblings / 2); i++) {
+        pages.add(Math.max(1, page - i));
+        pages.add(Math.min(total, page + i));
+    }
+    const sorted = [...pages].sort((a, b) => a - b);
+    const out = [];
+    let prev = 0;
+    for (const p of sorted) {
+        if (p - prev > 1)
+            out.push("…");
+        out.push(p);
+        prev = p;
+    }
+    return out;
+}
+/**
+ * Token-driven pagination. Emits semantic classes (`tc-pagination`, `tc-page`,
+ * …) styled by the surrounding `<ThemedSurface>`, so it re-themes with the
+ * active design config.
+ */
+export function Pagination({ page, total, onChange, siblings = 5 }) {
+    const go = (p) => onChange(Math.min(total, Math.max(1, p)));
+    return (_jsxs("nav", { className: "tc-pagination", "aria-label": "Ph\u00E2n trang", children: [_jsx("button", { type: "button", className: "tc-page", disabled: page <= 1, onClick: () => go(page - 1), "aria-label": "Trang tr\u01B0\u1EDBc", children: "\u2039" }), pageList(page, total, siblings).map((p, i) => p === "…" ? (_jsx("span", { className: "tc-page", "aria-hidden": "true", style: { border: 0, background: "transparent", cursor: "default" }, children: "\u2026" }, `gap-${i}`)) : (_jsx("button", { type: "button", className: p === page ? "tc-page tc-page--active" : "tc-page", "aria-current": p === page ? "page" : undefined, onClick: () => go(p), children: p }, p))), _jsx("button", { type: "button", className: "tc-page", disabled: page >= total, onClick: () => go(page + 1), "aria-label": "Trang sau", children: "\u203A" })] }));
+}
+Pagination.displayName = "Pagination";
+//# sourceMappingURL=Pagination.js.map

package/dist/components/themed/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../../../components/themed/Pagination.tsx"],"names":[],"mappings":"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"}

package/dist/components/themed/Select.d.ts

@@ -0,0 +1,16 @@
+import React, { type SelectHTMLAttributes } from "react";
+import type { InputVariant } from "./Input.js";
+export interface SelectOption {
+    value: string;
+    label: string;
+}
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    options: SelectOption[];
+    variant?: InputVariant;
+    error?: boolean;
+}
+/**
+ * Token-driven select. Reuses the input classes (`tci`, …) styled by the
+ * surrounding `<ThemedSurface>`, so it re-themes with the active design config.
+ */
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;

package/dist/components/themed/Select.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// `React` imported explicitly so this also renders under Storybook's Vite
+// pipeline (classic JSX runtime); harmless in the Next app.
+import { forwardRef } from "react";
+/**
+ * Token-driven select. Reuses the input classes (`tci`, …) styled by the
+ * surrounding `<ThemedSurface>`, so it re-themes with the active design config.
+ */
+export const Select = forwardRef(({ options, variant = "outline", error, className, ...props }, ref) => {
+    const classes = ["tci"];
+    if (variant !== "outline")
+        classes.push(`tci--${variant}`);
+    if (error)
+        classes.push("tci--error");
+    if (className)
+        classes.push(className);
+    return (_jsx("select", { ref: ref, className: classes.join(" "), ...props, children: options.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) }));
+});
+Select.displayName = "Select";
+//# sourceMappingURL=Select.js.map

package/dist/components/themed/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../../components/themed/Select.tsx"],"names":[],"mappings":";AAAA,0EAA0E;AAC1E,4DAA4D;AAC5D,OAAc,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAcrE;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACpE,MAAM,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC;IACxB,IAAI,OAAO,KAAK,SAAS;QAAE,OAAO,CAAC,IAAI,CAAC,QAAQ,OAAO,EAAE,CAAC,CAAC;IAC3D,IAAI,KAAK;QAAE,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACtC,IAAI,SAAS;QAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACvC,OAAO,CACL,iBAAQ,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,KAAM,KAAK,YACtD,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAClB,iBAAsB,KAAK,EAAE,CAAC,CAAC,KAAK,YACjC,CAAC,CAAC,KAAK,IADG,CAAC,CAAC,KAAK,CAEX,CACV,CAAC,GACK,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

package/dist/components/themed/Sheet.d.ts

@@ -0,0 +1,19 @@
+import React, { type ReactNode } from "react";
+export type SheetSide = "right" | "left";
+export interface SheetProps {
+    open: boolean;
+    onClose: () => void;
+    side?: SheetSide;
+    title?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * Token-driven slide-over sheet (drawer). Emits semantic classes
+ * (`tc-drawer`, `tc-drawer--right`, …) styled by the surrounding
+ * `<ThemedSurface>`, so it re-themes with the active design config. Closes on
+ * overlay click / Escape.
+ */
+export declare function Sheet({ open, onClose, side, title, children }: SheetProps): React.JSX.Element | null;
+export declare namespace Sheet {
+    var displayName: string;
+}

package/dist/components/themed/Sheet.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// `React` imported explicitly so this also renders under Storybook's Vite
+// pipeline (classic JSX runtime); harmless in the Next app.
+import { useEffect } from "react";
+/**
+ * Token-driven slide-over sheet (drawer). Emits semantic classes
+ * (`tc-drawer`, `tc-drawer--right`, …) styled by the surrounding
+ * `<ThemedSurface>`, so it re-themes with the active design config. Closes on
+ * overlay click / Escape.
+ */
+export function Sheet({ open, onClose, side = "right", title, children }) {
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onClose();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, onClose]);
+    if (!open)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "tc-drawer-overlay", onClick: onClose, "aria-hidden": "true" }), _jsxs("aside", { className: `tc-drawer tc-drawer--${side}`, role: "dialog", "aria-modal": "true", "aria-label": typeof title === "string" ? title : "Sheet", children: [title != null && _jsx("h3", { className: "tc-dialog__title", children: title }), children] })] }));
+}
+Sheet.displayName = "Sheet";
+//# sourceMappingURL=Sheet.js.map

package/dist/components/themed/Sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sheet.js","sourceRoot":"","sources":["../../../../../components/themed/Sheet.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,0EAA0E;AAC1E,4DAA4D;AAC5D,OAAc,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AAYzD;;;;;GAKG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,GAAG,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAc;IAClF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,MAAM,KAAK,GAAG,CAAC,CAAgB,EAAE,EAAE;YACjC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;gBAAE,OAAO,EAAE,CAAC;QACpC,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QAC5C,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAC9D,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpB,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,OAAO,CACL,8BACE,cAAK,SAAS,EAAC,mBAAmB,EAAC,OAAO,EAAE,OAAO,iBAAc,MAAM,GAAG,EAC1E,iBAAO,SAAS,EAAE,wBAAwB,IAAI,EAAE,EAAE,IAAI,EAAC,QAAQ,gBAAY,MAAM,gBAAa,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,aACtI,KAAK,IAAI,IAAI,IAAI,aAAI,SAAS,EAAC,kBAAkB,YAAE,KAAK,GAAM,EAC9D,QAAQ,IACH,IACP,CACJ,CAAC;AACJ,CAAC;AAED,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/dist/components/themed/Sidebar.d.ts

@@ -0,0 +1,21 @@
+import React, { type ReactNode } from "react";
+export interface SidebarItem {
+    id: string;
+    label: ReactNode;
+    icon?: ReactNode;
+}
+export interface SidebarProps {
+    items: SidebarItem[];
+    activeId?: string;
+    onSelect?: (id: string) => void;
+    title?: ReactNode;
+}
+/**
+ * Token-driven sidebar nav. Emits semantic classes (`tc-sidebar`, …) styled by
+ * the surrounding `<ThemedSurface>`, so it re-themes with the active design
+ * config.
+ */
+export declare function Sidebar({ items, activeId, onSelect, title }: SidebarProps): React.JSX.Element;
+export declare namespace Sidebar {
+    var displayName: string;
+}

package/dist/components/themed/Sidebar.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Token-driven sidebar nav. Emits semantic classes (`tc-sidebar`, …) styled by
+ * the surrounding `<ThemedSurface>`, so it re-themes with the active design
+ * config.
+ */
+export function Sidebar({ items, activeId, onSelect, title }) {
+    return (_jsxs("nav", { className: "tc-sidebar", "aria-label": "\u0110i\u1EC1u h\u01B0\u1EDBng", children: [title != null && _jsx("p", { className: "tc-sidebar__title", children: title }), items.map((item) => (_jsxs("button", { type: "button", className: item.id === activeId ? "tc-sidebar__item tc-sidebar__item--active" : "tc-sidebar__item", "aria-current": item.id === activeId ? "page" : undefined, onClick: () => onSelect?.(item.id), children: [item.icon, item.label] }, item.id)))] }));
+}
+Sidebar.displayName = "Sidebar";
+//# sourceMappingURL=Sidebar.js.map

package/dist/components/themed/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../../../../components/themed/Sidebar.tsx"],"names":[],"mappings":";AAiBA;;;;GAIG;AACH,MAAM,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAgB;IACxE,OAAO,CACL,eAAK,SAAS,EAAC,YAAY,gBAAY,gCAAY,aAChD,KAAK,IAAI,IAAI,IAAI,YAAG,SAAS,EAAC,mBAAmB,YAAE,KAAK,GAAK,EAC7D,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,kBAEE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,2CAA2C,CAAC,CAAC,CAAC,kBAAkB,kBACpF,IAAI,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACvD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,aAEjC,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,KAAK,KAPN,IAAI,CAAC,EAAE,CAQL,CACV,CAAC,IACE,CACP,CAAC;AACJ,CAAC;AAED,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

package/dist/components/themed/Table.d.ts

@@ -0,0 +1,21 @@
+import React, { type ReactNode } from "react";
+export interface TableColumn<T> {
+    key: keyof T & string;
+    header: ReactNode;
+    /** Custom cell renderer; defaults to the raw value. */
+    render?: (row: T) => ReactNode;
+}
+export interface TableProps<T> {
+    columns: TableColumn<T>[];
+    data: T[];
+    /** Optional key extractor; defaults to the row index. */
+    rowKey?: (row: T, index: number) => string;
+}
+/**
+ * Token-driven table. Emits the semantic `tc-table` class styled by the
+ * surrounding `<ThemedSurface>`, so it re-themes with the active design config.
+ */
+export declare function Table<T>({ columns, data, rowKey }: TableProps<T>): React.JSX.Element;
+export declare namespace Table {
+    var displayName: string;
+}

package/dist/components/themed/Table.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Token-driven table. Emits the semantic `tc-table` class styled by the
+ * surrounding `<ThemedSurface>`, so it re-themes with the active design config.
+ */
+export function Table({ columns, data, rowKey }) {
+    return (_jsxs("table", { className: "tc-table", children: [_jsx("thead", { children: _jsx("tr", { children: columns.map((c) => (_jsx("th", { children: c.header }, c.key))) }) }), _jsx("tbody", { children: data.map((row, i) => (_jsx("tr", { children: columns.map((c) => (_jsx("td", { children: c.render ? c.render(row) : row[c.key] }, c.key))) }, rowKey ? rowKey(row, i) : i))) })] }));
+}
+Table.displayName = "Table";
+//# sourceMappingURL=Table.js.map

package/dist/components/themed/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../../components/themed/Table.tsx"],"names":[],"mappings":";AAkBA;;;GAGG;AACH,MAAM,UAAU,KAAK,CAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAiB;IAC/D,OAAO,CACL,iBAAO,SAAS,EAAC,UAAU,aACzB,0BACE,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAClB,uBAAiB,CAAC,CAAC,MAAM,IAAhB,CAAC,CAAC,GAAG,CAAiB,CAChC,CAAC,GACC,GACC,EACR,0BACG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACpB,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAClB,uBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAe,IAA5D,CAAC,CAAC,GAAG,CAA6D,CAC5E,CAAC,IAHK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAI/B,CACN,CAAC,GACI,IACF,CACT,CAAC;AACJ,CAAC;AAED,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/dist/components/themed/ThemeProvider.d.ts

@@ -0,0 +1,41 @@
+import React, { type CSSProperties, type ReactNode } from "react";
+import type { DesignConfig } from "../../lib/config/types.js";
+import { type Mode } from "./themeCss.js";
+interface ThemeContextValue {
+    config: DesignConfig;
+    mode: Mode;
+}
+/**
+ * Access the active design config / mode from inside a `<ThemeProvider>`.
+ * The themed components don't need this (they are class-driven), but consumer
+ * code can read it to make config-aware decisions.
+ */
+export declare function useTheme(): ThemeContextValue;
+export interface ThemeProviderProps {
+    /** The chosen design tokens. Drives every CSS variable + the component sheet. */
+    config: DesignConfig;
+    /** Light or dark surface vars. Default: "light". */
+    mode?: Mode;
+    /** Paint the configured surface background + padding around children. */
+    surface?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+}
+/**
+ * The config provider for the themed component library.
+ *
+ * Wrap your app (or any subtree) in `<ThemeProvider config={...}>`. It:
+ *  1. sets every design token as a CSS custom property on a scoped wrapper, and
+ *  2. injects the component stylesheet (`.tcb`, `.tc-card`, …) scoped to that
+ *     same wrapper.
+ *
+ * Because the scope is generated per instance, multiple providers with
+ * different configs can coexist on one page. Components emit only semantic
+ * classes, so they re-theme automatically whenever `config`/`mode` change.
+ */
+export declare function ThemeProvider({ config, mode, surface, className, style, children, }: ThemeProviderProps): React.JSX.Element;
+export declare namespace ThemeProvider {
+    var displayName: string;
+}
+export {};

package/dist/components/themed/ThemeProvider.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// `React` imported explicitly so this also renders under non-automatic JSX
+// runtimes (Storybook's Vite pipeline); harmless in the Next app.
+import { createContext, useContext, useId, useMemo, } from "react";
+import { themeVars } from "./themeCss.js";
+import { componentStyles } from "./styles.js";
+const ThemeContext = createContext(null);
+/**
+ * Access the active design config / mode from inside a `<ThemeProvider>`.
+ * The themed components don't need this (they are class-driven), but consumer
+ * code can read it to make config-aware decisions.
+ */
+export function useTheme() {
+    const ctx = useContext(ThemeContext);
+    if (!ctx)
+        throw new Error("useTheme must be used within <ThemeProvider>");
+    return ctx;
+}
+/**
+ * The config provider for the themed component library.
+ *
+ * Wrap your app (or any subtree) in `<ThemeProvider config={...}>`. It:
+ *  1. sets every design token as a CSS custom property on a scoped wrapper, and
+ *  2. injects the component stylesheet (`.tcb`, `.tc-card`, …) scoped to that
+ *     same wrapper.
+ *
+ * Because the scope is generated per instance, multiple providers with
+ * different configs can coexist on one page. Components emit only semantic
+ * classes, so they re-theme automatically whenever `config`/`mode` change.
+ */
+export function ThemeProvider({ config, mode = "light", surface = false, className, style, children, }) {
+    const rawId = useId();
+    const scope = "tc" + rawId.replace(/[^a-zA-Z0-9]/g, "");
+    const vars = useMemo(() => themeVars(config, mode), [config, mode]);
+    const css = useMemo(() => componentStyles(`.${scope} `, config), [scope, config]);
+    const rootStyle = {
+        ...vars,
+        fontFamily: "var(--font-base)",
+        color: "var(--text)",
+        ...(surface
+            ? {
+                background: "var(--surface)",
+                padding: "var(--space-6)",
+                borderRadius: "var(--radius-lg)",
+            }
+            : {}),
+        ...style,
+    };
+    return (_jsx(ThemeContext.Provider, { value: { config, mode }, children: _jsxs("div", { className: [scope, className].filter(Boolean).join(" "), style: rootStyle, children: [_jsx("style", { dangerouslySetInnerHTML: { __html: css } }), children] }) }));
+}
+ThemeProvider.displayName = "ThemeProvider";
+//# sourceMappingURL=ThemeProvider.js.map

package/dist/components/themed/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../../../../components/themed/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,2EAA2E;AAC3E,kEAAkE;AAClE,OAAc,EACZ,aAAa,EACb,UAAU,EACV,KAAK,EACL,OAAO,GAGR,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAa,MAAM,YAAY,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAO3C,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAEnE;;;;GAIG;AACH,MAAM,UAAU,QAAQ;IACtB,MAAM,GAAG,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACrC,IAAI,CAAC,GAAG;QAAE,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAC;IAC1E,OAAO,GAAG,CAAC;AACb,CAAC;AAcD;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,MAAM,EACN,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,KAAK,EACf,SAAS,EACT,KAAK,EACL,QAAQ,GACW;IACnB,MAAM,KAAK,GAAG,KAAK,EAAE,CAAC;IACtB,MAAM,KAAK,GAAG,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;IAExD,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;IACpE,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,KAAK,GAAG,EAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;IAElF,MAAM,SAAS,GAAkB;QAC/B,GAAG,IAAI;QACP,UAAU,EAAE,kBAAkB;QAC9B,KAAK,EAAE,aAAa;QACpB,GAAG,CAAC,OAAO;YACT,CAAC,CAAC;gBACE,UAAU,EAAE,gBAAgB;gBAC5B,OAAO,EAAE,gBAAgB;gBACzB,YAAY,EAAE,kBAAkB;aACjC;YACH,CAAC,CAAC,EAAE,CAAC;QACP,GAAG,KAAK;KACT,CAAC;IAEF,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,YAC5C,eAAK,SAAS,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,aAE5E,gBAAO,uBAAuB,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,GAAI,EAClD,QAAQ,IACL,GACgB,CACzB,CAAC;AACJ,CAAC;AAED,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC"}

package/dist/components/themed/Toast.d.ts

@@ -0,0 +1,19 @@
+import React, { type ReactNode } from "react";
+export type ToastVariant = "info" | "success" | "warning" | "error";
+export interface ToastProps {
+    variant?: ToastVariant;
+    title?: ReactNode;
+    children?: ReactNode;
+    /** When provided, renders a close button. */
+    onClose?: () => void;
+}
+/**
+ * Token-driven toast. Emits semantic classes (`tc-toast`, `tc-toast--success`,
+ * …) styled by the surrounding `<ThemedSurface>`, so it re-themes with the
+ * active design config. Presentational — positioning/lifetime is up to the
+ * caller.
+ */
+export declare function Toast({ variant, title, children, onClose }: ToastProps): React.JSX.Element;
+export declare namespace Toast {
+    var displayName: string;
+}

package/dist/components/themed/Toast.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Token-driven toast. Emits semantic classes (`tc-toast`, `tc-toast--success`,
+ * …) styled by the surrounding `<ThemedSurface>`, so it re-themes with the
+ * active design config. Presentational — positioning/lifetime is up to the
+ * caller.
+ */
+export function Toast({ variant = "info", title, children, onClose }) {
+    const classes = ["tc-toast", `tc-toast--${variant}`];
+    return (_jsxs("div", { className: classes.join(" "), role: "status", children: [_jsxs("div", { className: "tc-toast__body", children: [title != null && _jsx("div", { className: "tc-toast__title", children: title }), children != null && _jsx("div", { className: "tc-toast__msg", children: children })] }), onClose && (_jsx("button", { type: "button", className: "tc-toast__close", "aria-label": "\u0110\u00F3ng", onClick: onClose, children: "\u00D7" }))] }));
+}
+Toast.displayName = "Toast";
+//# sourceMappingURL=Toast.js.map

package/dist/components/themed/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../../../components/themed/Toast.tsx"],"names":[],"mappings":";AAcA;;;;;GAKG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAc;IAC9E,MAAM,OAAO,GAAG,CAAC,UAAU,EAAE,aAAa,OAAO,EAAE,CAAC,CAAC;IACrD,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI,EAAC,QAAQ,aAC9C,eAAK,SAAS,EAAC,gBAAgB,aAC5B,KAAK,IAAI,IAAI,IAAI,cAAK,SAAS,EAAC,iBAAiB,YAAE,KAAK,GAAO,EAC/D,QAAQ,IAAI,IAAI,IAAI,cAAK,SAAS,EAAC,eAAe,YAAE,QAAQ,GAAO,IAChE,EACL,OAAO,IAAI,CACV,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,iBAAiB,gBAAY,gBAAM,EAAC,OAAO,EAAE,OAAO,uBAE3E,CACV,IACG,CACP,CAAC;AACJ,CAAC;AAED,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/dist/components/themed/Tooltip.d.ts

@@ -0,0 +1,15 @@
+import React, { type ReactNode } from "react";
+export interface TooltipProps {
+    /** Text shown in the popover on hover / focus. */
+    text: ReactNode;
+    children: ReactNode;
+}
+/**
+ * Token-driven tooltip. Emits semantic classes (`tc-tooltip`, …) styled by the
+ * surrounding `<ThemedSurface>`, so it re-themes with the active design config.
+ * Pure CSS hover/focus — no JS state.
+ */
+export declare function Tooltip({ text, children }: TooltipProps): React.JSX.Element;
+export declare namespace Tooltip {
+    var displayName: string;
+}

package/dist/components/themed/Tooltip.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Token-driven tooltip. Emits semantic classes (`tc-tooltip`, …) styled by the
+ * surrounding `<ThemedSurface>`, so it re-themes with the active design config.
+ * Pure CSS hover/focus — no JS state.
+ */
+export function Tooltip({ text, children }) {
+    return (_jsxs("span", { className: "tc-tooltip", tabIndex: 0, children: [children, _jsx("span", { role: "tooltip", className: "tc-tooltip__pop", children: text })] }));
+}
+Tooltip.displayName = "Tooltip";
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/themed/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../../components/themed/Tooltip.tsx"],"names":[],"mappings":";AAUA;;;;GAIG;AACH,MAAM,UAAU,OAAO,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAgB;IACtD,OAAO,CACL,gBAAM,SAAS,EAAC,YAAY,EAAC,QAAQ,EAAE,CAAC,aACrC,QAAQ,EACT,eAAM,IAAI,EAAC,SAAS,EAAC,SAAS,EAAC,iBAAiB,YAC7C,IAAI,GACA,IACF,CACR,CAAC;AACJ,CAAC;AAED,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

package/dist/components/themed/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Public entry point for the themed component library.
+ *
+ * Consumers wrap their app in `<ThemeProvider config={...}>` and use any of the
+ * components below; everything re-themes from the provided design tokens.
+ *
+ *   import { ThemeProvider, Button, Card } from "@vinhhypc/config-theme";
+ *   import { presets, applyPreset } from "@vinhhypc/config-theme";
+ */
+export { ThemeProvider, useTheme, type ThemeProviderProps } from "./ThemeProvider.js";
+export { themeVars, type Mode } from "./themeCss.js";
+export { componentStyles } from "./styles.js";
+export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from "./Button.js";
+export { Accordion, type AccordionProps, type AccordionItem } from "./Accordion.js";
+export { Alert, type AlertProps, type AlertVariant } from "./Alert.js";
+export { Avatar, type AvatarProps, type AvatarSize, type AvatarVariant } from "./Avatar.js";
+export { Badge, type BadgeProps, type BadgeVariant } from "./Badge.js";
+export { Calendar, type CalendarProps } from "./Calendar.js";
+export { Card, type CardProps, type CardVariant } from "./Card.js";
+export { Checkbox, type CheckboxProps } from "./Checkbox.js";
+export { DropdownMenu, type DropdownMenuProps, type DropdownMenuItem } from "./DropdownMenu.js";
+export { Input, Field, type InputProps, type InputVariant } from "./Input.js";
+export { Pagination, type PaginationProps } from "./Pagination.js";
+export { Select, type SelectProps, type SelectOption } from "./Select.js";
+export { Sidebar, type SidebarProps, type SidebarItem } from "./Sidebar.js";
+export { Sheet, type SheetProps, type SheetSide } from "./Sheet.js";
+export { Table, type TableProps, type TableColumn } from "./Table.js";
+export { Toast, type ToastProps, type ToastVariant } from "./Toast.js";
+export { Tooltip, type TooltipProps } from "./Tooltip.js";
+export type { DesignConfig, ThemeMode, ThemeStyle } from "../../lib/config/types.js";
+export { defaultConfig, cloneConfig } from "../../lib/config/defaults.js";
+export { presets, applyPreset } from "../../lib/config/presets.js";
+export { resolveTokens, buildCssVars, cssVarsToBlock, cssVarsToStyleObject } from "../../lib/tokens/index.js";

package/dist/components/themed/index.js

@@ -0,0 +1,35 @@
+/**
+ * Public entry point for the themed component library.
+ *
+ * Consumers wrap their app in `<ThemeProvider config={...}>` and use any of the
+ * components below; everything re-themes from the provided design tokens.
+ *
+ *   import { ThemeProvider, Button, Card } from "@vinhhypc/config-theme";
+ *   import { presets, applyPreset } from "@vinhhypc/config-theme";
+ */
+/* Provider + theming primitives */
+export { ThemeProvider, useTheme } from "./ThemeProvider.js";
+export { themeVars } from "./themeCss.js";
+export { componentStyles } from "./styles.js";
+/* Components */
+export { Button } from "./Button.js";
+export { Accordion } from "./Accordion.js";
+export { Alert } from "./Alert.js";
+export { Avatar } from "./Avatar.js";
+export { Badge } from "./Badge.js";
+export { Calendar } from "./Calendar.js";
+export { Card } from "./Card.js";
+export { Checkbox } from "./Checkbox.js";
+export { DropdownMenu } from "./DropdownMenu.js";
+export { Input, Field } from "./Input.js";
+export { Pagination } from "./Pagination.js";
+export { Select } from "./Select.js";
+export { Sidebar } from "./Sidebar.js";
+export { Sheet } from "./Sheet.js";
+export { Table } from "./Table.js";
+export { Toast } from "./Toast.js";
+export { Tooltip } from "./Tooltip.js";
+export { defaultConfig, cloneConfig } from "../../lib/config/defaults.js";
+export { presets, applyPreset } from "../../lib/config/presets.js";
+export { resolveTokens, buildCssVars, cssVarsToBlock, cssVarsToStyleObject } from "../../lib/tokens/index.js";
+//# sourceMappingURL=index.js.map

package/dist/components/themed/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../components/themed/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,mCAAmC;AACnC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAA2B,MAAM,iBAAiB,CAAC;AACnF,OAAO,EAAE,SAAS,EAAa,MAAM,YAAY,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,gBAAgB;AAChB,OAAO,EAAE,MAAM,EAAyD,MAAM,UAAU,CAAC;AACzF,OAAO,EAAE,SAAS,EAA2C,MAAM,aAAa,CAAC;AACjF,OAAO,EAAE,KAAK,EAAsC,MAAM,SAAS,CAAC;AACpE,OAAO,EAAE,MAAM,EAAyD,MAAM,UAAU,CAAC;AACzF,OAAO,EAAE,KAAK,EAAsC,MAAM,SAAS,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAoC,MAAM,QAAQ,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAiD,MAAM,gBAAgB,CAAC;AAC7F,OAAO,EAAE,KAAK,EAAE,KAAK,EAAsC,MAAM,SAAS,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,MAAM,EAAuC,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,OAAO,EAAuC,MAAM,WAAW,CAAC;AACzE,OAAO,EAAE,KAAK,EAAmC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAE,KAAK,EAAqC,MAAM,SAAS,CAAC;AACnE,OAAO,EAAE,KAAK,EAAsC,MAAM,SAAS,CAAC;AACpE,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC;AAIvD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/themed/styles.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Token-driven stylesheet for every showcase component. Each builder prefixes
+ * its selectors with `p` (e.g. ".scope " for a scoped surface, or "" for a
+ * global sheet) and reads values from the design config / CSS vars, so the
+ * components re-theme automatically. `componentStyles` concatenates them all;
+ * `<ThemedSurface>` injects the result.
+ */
+import type { DesignConfig } from "../../lib/config/types.js";
+export declare function buttonStyles(p: string, config: DesignConfig): string;
+export declare function inputStyles(p: string, config: DesignConfig): string;
+export declare function checkboxStyles(p: string, config: DesignConfig): string;
+export declare function badgeStyles(p: string, config: DesignConfig): string;
+export declare function alertStyles(p: string, config: DesignConfig): string;
+export declare function avatarStyles(p: string): string;
+export declare function cardStyles(p: string, config: DesignConfig): string;
+export declare function tableStyles(p: string, config: DesignConfig): string;
+export declare function progressStyles(p: string): string;
+export declare function spinStyles(p: string): string;
+export declare function tabsStyles(p: string, config: DesignConfig): string;
+export declare function tooltipStyles(p: string, config: DesignConfig): string;
+export declare function dropdownStyles(p: string, config: DesignConfig): string;
+export declare function overlayStyles(p: string, config: DesignConfig): string;
+export declare function paginationStyles(p: string, config: DesignConfig): string;
+export declare function calendarStyles(p: string, config: DesignConfig): string;
+export declare function sidebarStyles(p: string, config: DesignConfig): string;
+export declare function toastStyles(p: string, config: DesignConfig): string;
+export declare function accordionStyles(p: string, config: DesignConfig): string;
+/** Concatenate every component stylesheet for the given selector prefix. */
+export declare function componentStyles(prefix: string, config: DesignConfig): string;