@vinhhypc/config-theme 0.1.0

package/README.md

@@ -0,0 +1,57 @@
+# @vinhhypc/config-theme
+
+Token-driven React components. Every component is styled by a `<ThemeProvider>`
+that receives a `DesignConfig` (your chosen design tokens) and injects the CSS
+variables + stylesheet — so the whole tree re-themes from one config.
+
+📖 **Live docs / playground:** https://storybook-config-theme.vercel.app
+
+## Install
+
+```bash
+npm i @vinhhypc/config-theme react react-dom
+```
+
+## Usage
+
+Wrap your app (or any subtree) in `<ThemeProvider>` and use any component.
+You import only what you need — unused components are tree-shaken out.
+
+```tsx
+import { ThemeProvider, Button, Card, applyPreset } from "@vinhhypc/config-theme";
+
+// Tokens: a built-in preset, or your own DesignConfig (e.g. saved JSON).
+const config = applyPreset("modern");
+
+export default function App() {
+  return (
+    <ThemeProvider config={config} mode="light">
+      <Card title="Hello" footer={<Button>OK</Button>}>
+        This card themes itself from the config.
+      </Card>
+    </ThemeProvider>
+  );
+}
+```
+
+`<ThemeProvider>` is required — without it components render unstyled.
+
+## Components
+
+`Accordion`, `Alert`, `Avatar`, `Badge`, `Button`, `Calendar`, `Card`,
+`Checkbox`, `DropdownMenu`, `Input` / `Field`, `Pagination`, `Select`,
+`Sheet`, `Sidebar`, `Table`, `Toast`, `Tooltip`.
+
+Also exported: `useTheme()`, the token layer (`presets`, `applyPreset`,
+`defaultConfig`, `resolveTokens`) and the `DesignConfig` type.
+
+## Notes
+
+- **Fonts**: the tokens only declare `font-family`. Load the matching web fonts
+  yourself (e.g. Google Fonts / `next/font`).
+- **Next.js App Router**: components are client components (the published bundle
+  carries the `"use client"` directive).
+
+## License
+
+MIT

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

@@ -0,0 +1,23 @@
+import React, { type ReactNode } from "react";
+export interface AccordionItem {
+    id: string;
+    title: ReactNode;
+    content: ReactNode;
+}
+export interface AccordionProps {
+    items: AccordionItem[];
+    /** Allow multiple panels open at once. Default: single (closes others). */
+    multiple?: boolean;
+    /** Ids of panels open initially. */
+    defaultOpen?: string[];
+    className?: string;
+}
+/**
+ * Token-driven accordion. Emits semantic classes (`tc-accordion`, …) styled by
+ * the surrounding `<ThemedSurface>`, so it re-themes with the active design
+ * config. Open state is managed internally.
+ */
+export declare function Accordion({ items, multiple, defaultOpen, className, }: AccordionProps): React.JSX.Element;
+export declare namespace Accordion {
+    var displayName: string;
+}

package/dist/components/themed/Accordion.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } 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 { useState } from "react";
+/** Caret icon, rotated via CSS when its item is open. */
+function Caret() {
+    return (_jsx("svg", { className: "tc-accordion__icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+/**
+ * Token-driven accordion. Emits semantic classes (`tc-accordion`, …) styled by
+ * the surrounding `<ThemedSurface>`, so it re-themes with the active design
+ * config. Open state is managed internally.
+ */
+export function Accordion({ items, multiple = false, defaultOpen = [], className, }) {
+    const [open, setOpen] = useState(defaultOpen);
+    const toggle = (id) => {
+        setOpen((prev) => {
+            const isOpen = prev.includes(id);
+            if (multiple) {
+                return isOpen ? prev.filter((x) => x !== id) : [...prev, id];
+            }
+            return isOpen ? [] : [id];
+        });
+    };
+    const classes = ["tc-accordion"];
+    if (className)
+        classes.push(className);
+    return (_jsx("div", { className: classes.join(" "), children: items.map((item) => {
+            const isOpen = open.includes(item.id);
+            const panelId = `tc-acc-panel-${item.id}`;
+            const headerId = `tc-acc-header-${item.id}`;
+            return (_jsxs("div", { className: "tc-accordion__item", "data-open": isOpen, children: [_jsxs("button", { type: "button", id: headerId, className: "tc-accordion__header", "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(item.id), children: [_jsx("span", { children: item.title }), _jsx(Caret, {})] }), isOpen && (_jsx("div", { id: panelId, role: "region", "aria-labelledby": headerId, className: "tc-accordion__panel", children: item.content }))] }, item.id));
+        }) }));
+}
+Accordion.displayName = "Accordion";
+//# sourceMappingURL=Accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../../../components/themed/Accordion.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,0EAA0E;AAC1E,4DAA4D;AAC5D,OAAc,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAiBxD,yDAAyD;AACzD,SAAS,KAAK;IACZ,OAAO,CACL,cAAK,SAAS,EAAC,oBAAoB,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,YACpF,eACE,CAAC,EAAC,cAAc,EAChB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,EAAE,EAChB,SAAS,GACM;IACf,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAW,WAAW,CAAC,CAAC;IAExD,MAAM,MAAM,GAAG,CAAC,EAAU,EAAE,EAAE;QAC5B,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACf,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;YACjC,IAAI,QAAQ,EAAE,CAAC;gBACb,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,CAAC;YAC/D,CAAC;YACD,OAAO,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAC5B,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,CAAC,cAAc,CAAC,CAAC;IACjC,IAAI,SAAS;QAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEvC,OAAO,CACL,cAAK,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,YAC9B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAClB,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACtC,MAAM,OAAO,GAAG,gBAAgB,IAAI,CAAC,EAAE,EAAE,CAAC;YAC1C,MAAM,QAAQ,GAAG,iBAAiB,IAAI,CAAC,EAAE,EAAE,CAAC;YAC5C,OAAO,CACL,eAAmB,SAAS,EAAC,oBAAoB,eAAY,MAAM,aACjE,kBACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,QAAQ,EACZ,SAAS,EAAC,sBAAsB,mBACjB,MAAM,mBACN,OAAO,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,aAE9B,yBAAO,IAAI,CAAC,KAAK,GAAQ,EACzB,KAAC,KAAK,KAAG,IACF,EACR,MAAM,IAAI,CACT,cAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,qBAAkB,QAAQ,EAAE,SAAS,EAAC,qBAAqB,YACvF,IAAI,CAAC,OAAO,GACT,CACP,KAhBO,IAAI,CAAC,EAAE,CAiBX,CACP,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

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

@@ -0,0 +1,13 @@
+import React, { type HTMLAttributes, type ReactNode } from "react";
+export type AlertVariant = "success" | "warning" | "error" | "info";
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    variant?: AlertVariant;
+    /** Optional bold title rendered above the body. */
+    title?: ReactNode;
+}
+/**
+ * Token-driven alert. Emits semantic classes (`tc-alert`, `tc-alert--info`, …)
+ * styled by the surrounding `<ThemedSurface>`, so it re-themes with the active
+ * design config.
+ */
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/themed/Alert.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 alert. Emits semantic classes (`tc-alert`, `tc-alert--info`, …)
+ * styled by the surrounding `<ThemedSurface>`, so it re-themes with the active
+ * design config.
+ */
+export const Alert = forwardRef(({ variant = "info", title, className, children, ...props }, ref) => {
+    const classes = ["tc-alert", `tc-alert--${variant}`];
+    if (className)
+        classes.push(className);
+    return (_jsxs("div", { ref: ref, role: "alert", className: classes.join(" "), ...props, children: [title != null && _jsx("div", { className: "tc-alert__title", children: title }), children != null && _jsx("div", { className: "tc-alert__body", children: children })] }));
+});
+Alert.displayName = "Alert";
+//# sourceMappingURL=Alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../../../components/themed/Alert.tsx"],"names":[],"mappings":";AAAA,0EAA0E;AAC1E,4DAA4D;AAC5D,OAAc,EAAE,UAAU,EAAuC,MAAM,OAAO,CAAC;AAU/E;;;;GAIG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAClE,MAAM,OAAO,GAAG,CAAC,UAAU,EAAE,aAAa,OAAO,EAAE,CAAC,CAAC;IACrD,IAAI,SAAS;QAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACvC,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,KAAM,KAAK,aAChE,KAAK,IAAI,IAAI,IAAI,cAAK,SAAS,EAAC,iBAAiB,YAAE,KAAK,GAAO,EAC/D,QAAQ,IAAI,IAAI,IAAI,cAAK,SAAS,EAAC,gBAAgB,YAAE,QAAQ,GAAO,IACjE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

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

@@ -0,0 +1,19 @@
+import React, { type HTMLAttributes } from "react";
+export type AvatarSize = "sm" | "md" | "lg";
+export type AvatarVariant = "primary" | "accent" | "soft";
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: AvatarSize;
+    variant?: AvatarVariant;
+    /** Image source. When set, the image fills the avatar; otherwise initials show. */
+    src?: string;
+    /** Accessible alt / image description (also used as the title). */
+    alt?: string;
+    /** Initials / fallback content shown when no `src` is provided. */
+    name?: string;
+}
+/**
+ * Token-driven avatar. Emits semantic classes (`tc-avatar`, `tc-avatar--lg`,
+ * …) styled by the surrounding `<ThemedSurface>`, so it re-themes with the
+ * active design config. Renders an image when `src` is set, else initials.
+ */
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/themed/Avatar.js

@@ -0,0 +1,30 @@
+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";
+/** Derive up to two uppercase initials from a name. */
+function initials(name) {
+    if (!name)
+        return "";
+    const parts = name.trim().split(/\s+/).slice(0, 2);
+    return parts.map((p) => p[0]?.toUpperCase() ?? "").join("");
+}
+/**
+ * Token-driven avatar. Emits semantic classes (`tc-avatar`, `tc-avatar--lg`,
+ * …) styled by the surrounding `<ThemedSurface>`, so it re-themes with the
+ * active design config. Renders an image when `src` is set, else initials.
+ */
+export const Avatar = forwardRef(({ size = "md", variant = "primary", src, alt, name, className, children, ...props }, ref) => {
+    const classes = ["tc-avatar"];
+    if (size !== "md")
+        classes.push(`tc-avatar--${size}`);
+    if (variant !== "primary")
+        classes.push(`tc-avatar--${variant}`);
+    if (className)
+        classes.push(className);
+    return (_jsx("span", { ref: ref, className: classes.join(" "), title: alt ?? name, ...props, children: src ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        _jsx("img", { src: src, alt: alt ?? name ?? "" })) : (children ?? initials(name)) }));
+});
+Avatar.displayName = "Avatar";
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../../components/themed/Avatar.tsx"],"names":[],"mappings":";AAAA,0EAA0E;AAC1E,4DAA4D;AAC5D,OAAc,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAgB/D,uDAAuD;AACvD,SAAS,QAAQ,CAAC,IAAa;IAC7B,IAAI,CAAC,IAAI;QAAE,OAAO,EAAE,CAAC;IACrB,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACnD,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9D,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC3F,MAAM,OAAO,GAAG,CAAC,WAAW,CAAC,CAAC;IAC9B,IAAI,IAAI,KAAK,IAAI;QAAE,OAAO,CAAC,IAAI,CAAC,cAAc,IAAI,EAAE,CAAC,CAAC;IACtD,IAAI,OAAO,KAAK,SAAS;QAAE,OAAO,CAAC,IAAI,CAAC,cAAc,OAAO,EAAE,CAAC,CAAC;IACjE,IAAI,SAAS;QAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACvC,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,IAAI,IAAI,KAAM,KAAK,YACxE,GAAG,CAAC,CAAC,CAAC;QACL,qDAAqD;QACrD,cAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,IAAI,IAAI,EAAE,GAAI,CAC1C,CAAC,CAAC,CAAC,CACF,QAAQ,IAAI,QAAQ,CAAC,IAAI,CAAC,CAC3B,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

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

@@ -0,0 +1,11 @@
+import React, { type HTMLAttributes } from "react";
+export type BadgeVariant = "solid" | "neutral" | "success" | "warning" | "error" | "info";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+}
+/**
+ * Token-driven badge. Emits semantic classes (`tc-badge`, `tc-badge--success`,
+ * …) styled by the surrounding `<ThemedSurface>`, so it re-themes with the
+ * active design config.
+ */
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/themed/Badge.js

@@ -0,0 +1,17 @@
+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 badge. Emits semantic classes (`tc-badge`, `tc-badge--success`,
+ * …) styled by the surrounding `<ThemedSurface>`, so it re-themes with the
+ * active design config.
+ */
+export const Badge = forwardRef(({ variant = "solid", className, ...props }, ref) => {
+    const classes = ["tc-badge", `tc-badge--${variant}`];
+    if (className)
+        classes.push(className);
+    return _jsx("span", { ref: ref, className: classes.join(" "), ...props });
+});
+Badge.displayName = "Badge";
+//# sourceMappingURL=Badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../../components/themed/Badge.tsx"],"names":[],"mappings":";AAAA,0EAA0E;AAC1E,4DAA4D;AAC5D,OAAc,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAc/D;;;;GAIG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAClD,MAAM,OAAO,GAAG,CAAC,UAAU,EAAE,aAAa,OAAO,EAAE,CAAC,CAAC;IACrD,IAAI,SAAS;QAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACvC,OAAO,eAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,KAAM,KAAK,GAAI,CAAC;AACrE,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

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

@@ -0,0 +1,14 @@
+import React, { type ButtonHTMLAttributes } from "react";
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "outline" | "destructive";
+export type ButtonSize = "sm" | "md" | "lg";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+}
+/**
+ * Token-driven button. Carries no colours/spacing of its own — it only emits
+ * semantic classes (`tcb`, `tcb--primary`, …) whose visual style comes from the
+ * surrounding `<ThemedSurface>` for the active design config. The same button
+ * therefore re-themes automatically when the config changes.
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/themed/Button.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 button. Carries no colours/spacing of its own — it only emits
+ * semantic classes (`tcb`, `tcb--primary`, …) whose visual style comes from the
+ * surrounding `<ThemedSurface>` for the active design config. The same button
+ * therefore re-themes automatically when the config changes.
+ */
+export const Button = forwardRef(({ variant = "primary", size = "md", className, type = "button", ...props }, ref) => {
+    const classes = ["tcb", `tcb--${variant}`];
+    if (size !== "md")
+        classes.push(`tcb--${size}`);
+    if (className)
+        classes.push(className);
+    return _jsx("button", { ref: ref, type: type, className: classes.join(" "), ...props });
+});
+Button.displayName = "Button";
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../components/themed/Button.tsx"],"names":[],"mappings":";AAAA,0EAA0E;AAC1E,4DAA4D;AAC5D,OAAc,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAgBrE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAClF,MAAM,OAAO,GAAG,CAAC,KAAK,EAAE,QAAQ,OAAO,EAAE,CAAC,CAAC;IAC3C,IAAI,IAAI,KAAK,IAAI;QAAE,OAAO,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC;IAChD,IAAI,SAAS;QAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACvC,OAAO,iBAAQ,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,KAAM,KAAK,GAAI,CAAC;AACnF,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

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

@@ -0,0 +1,18 @@
+import React from "react";
+export interface CalendarProps {
+    /** Currently selected date (controlled). */
+    value?: Date;
+    /** Fired when a day is clicked. */
+    onChange?: (date: Date) => void;
+    /** Month to display initially (defaults to today, or `value`'s month). */
+    defaultMonth?: Date;
+}
+/**
+ * Token-driven month calendar. Emits semantic classes (`tc-cal`, …) styled by
+ * the surrounding `<ThemedSurface>`, so it re-themes with the active design
+ * config. Selection/month navigation is managed internally.
+ */
+export declare function Calendar({ value, onChange, defaultMonth }: CalendarProps): React.JSX.Element;
+export declare namespace Calendar {
+    var displayName: string;
+}

package/dist/components/themed/Calendar.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } 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 { useMemo, useState } from "react";
+const DOW = ["T2", "T3", "T4", "T5", "T6", "T7", "CN"]; // Monday-first
+const MONTHS = [
+    "Tháng 1", "Tháng 2", "Tháng 3", "Tháng 4", "Tháng 5", "Tháng 6",
+    "Tháng 7", "Tháng 8", "Tháng 9", "Tháng 10", "Tháng 11", "Tháng 12",
+];
+const sameDay = (a, b) => a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate();
+/** Days to render for a month grid, padded to whole weeks (Monday-first). */
+function buildGrid(year, month) {
+    const first = new Date(year, month, 1);
+    // JS getDay(): 0=Sun … 6=Sat. Convert to Monday-first offset (0=Mon … 6=Sun).
+    const lead = (first.getDay() + 6) % 7;
+    const start = new Date(year, month, 1 - lead);
+    return Array.from({ length: 42 }, (_, i) => {
+        const d = new Date(start);
+        d.setDate(start.getDate() + i);
+        return d;
+    });
+}
+/**
+ * Token-driven month calendar. Emits semantic classes (`tc-cal`, …) styled by
+ * the surrounding `<ThemedSurface>`, so it re-themes with the active design
+ * config. Selection/month navigation is managed internally.
+ */
+export function Calendar({ value, onChange, defaultMonth }) {
+    const today = useMemo(() => new Date(), []);
+    const initial = defaultMonth ?? value ?? today;
+    const [view, setView] = useState({ y: initial.getFullYear(), m: initial.getMonth() });
+    const [internal, setInternal] = useState(value);
+    const selected = value ?? internal;
+    const days = useMemo(() => buildGrid(view.y, view.m), [view]);
+    const shift = (delta) => {
+        const d = new Date(view.y, view.m + delta, 1);
+        setView({ y: d.getFullYear(), m: d.getMonth() });
+    };
+    const pick = (d) => {
+        setInternal(d);
+        onChange?.(d);
+    };
+    return (_jsxs("div", { className: "tc-cal", children: [_jsxs("div", { className: "tc-cal__head", children: [_jsx("button", { type: "button", className: "tc-cal__nav", "aria-label": "Th\u00E1ng tr\u01B0\u1EDBc", onClick: () => shift(-1), children: "\u2039" }), _jsxs("span", { className: "tc-cal__title", children: [MONTHS[view.m], " ", view.y] }), _jsx("button", { type: "button", className: "tc-cal__nav", "aria-label": "Th\u00E1ng sau", onClick: () => shift(1), children: "\u203A" })] }), _jsxs("div", { className: "tc-cal__grid", children: [DOW.map((d) => (_jsx("div", { className: "tc-cal__dow", children: d }, d))), days.map((d) => {
+                        const muted = d.getMonth() !== view.m;
+                        const classes = ["tc-cal__day"];
+                        if (muted)
+                            classes.push("tc-cal__day--muted");
+                        if (sameDay(d, today))
+                            classes.push("tc-cal__day--today");
+                        if (selected && sameDay(d, selected))
+                            classes.push("tc-cal__day--selected");
+                        return (_jsx("button", { type: "button", className: classes.join(" "), "aria-pressed": selected ? sameDay(d, selected) : false, onClick: () => pick(d), children: d.getDate() }, d.toISOString()));
+                    })] })] }));
+}
+Calendar.displayName = "Calendar";
+//# sourceMappingURL=Calendar.js.map

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

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

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

@@ -0,0 +1,17 @@
+import React, { type HTMLAttributes, type ReactNode } from "react";
+export type CardVariant = "elevated" | "outlined" | "flat";
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    variant?: CardVariant;
+    title?: ReactNode;
+    /** Footer content (e.g. action buttons). */
+    footer?: ReactNode;
+}
+/**
+ * Token-driven card. Emits semantic classes (`tc-card`, `tc-card--outlined`,
+ * …) styled by the surrounding `<ThemedSurface>`, so it re-themes with the
+ * active design config.
+ */
+export declare function Card({ variant, title, footer, className, children, ...props }: CardProps): React.JSX.Element;
+export declare namespace Card {
+    var displayName: string;
+}

package/dist/components/themed/Card.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Token-driven card. Emits semantic classes (`tc-card`, `tc-card--outlined`,
+ * …) styled by the surrounding `<ThemedSurface>`, so it re-themes with the
+ * active design config.
+ */
+export function Card({ variant = "elevated", title, footer, className, children, ...props }) {
+    const classes = ["tc-card", `tc-card--${variant}`];
+    if (className)
+        classes.push(className);
+    return (_jsxs("div", { className: classes.join(" "), ...props, children: [title != null && _jsx("h3", { className: "tc-card__title", children: title }), children != null && _jsx("div", { className: "tc-card__body", children: children }), footer != null && _jsx("div", { className: "tc-card__foot", children: footer })] }));
+}
+Card.displayName = "Card";
+//# sourceMappingURL=Card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../../components/themed/Card.tsx"],"names":[],"mappings":";AAaA;;;;GAIG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa;IACpG,MAAM,OAAO,GAAG,CAAC,SAAS,EAAE,YAAY,OAAO,EAAE,CAAC,CAAC;IACnD,IAAI,SAAS;QAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACvC,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,KAAM,KAAK,aACzC,KAAK,IAAI,IAAI,IAAI,aAAI,SAAS,EAAC,gBAAgB,YAAE,KAAK,GAAM,EAC5D,QAAQ,IAAI,IAAI,IAAI,cAAK,SAAS,EAAC,eAAe,YAAE,QAAQ,GAAO,EACnE,MAAM,IAAI,IAAI,IAAI,cAAK,SAAS,EAAC,eAAe,YAAE,MAAM,GAAO,IAC5D,CACP,CAAC;AACJ,CAAC;AAED,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

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

@@ -0,0 +1,16 @@
+import React, { type ReactNode } from "react";
+export interface CheckboxProps {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    disabled?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Token-driven checkbox. Emits semantic classes (`tc-checkbox`, …) styled by
+ * the surrounding `<ThemedSurface>`, so it re-themes with the active design
+ * config. The native input is visually hidden but keeps keyboard/a11y support.
+ */
+export declare function Checkbox({ checked, onCheckedChange, disabled, children }: CheckboxProps): React.JSX.Element;
+export declare namespace Checkbox {
+    var displayName: string;
+}

package/dist/components/themed/Checkbox.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Tick icon shown when checked (revealed via CSS). */
+function Tick() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M3.5 8.5l3 3 6-7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+/**
+ * Token-driven checkbox. Emits semantic classes (`tc-checkbox`, …) styled by
+ * the surrounding `<ThemedSurface>`, so it re-themes with the active design
+ * config. The native input is visually hidden but keeps keyboard/a11y support.
+ */
+export function Checkbox({ checked, onCheckedChange, disabled, children }) {
+    return (_jsxs("label", { className: "tc-checkbox", "data-checked": checked, "data-disabled": disabled, children: [_jsx("input", { type: "checkbox", checked: checked, disabled: disabled, onChange: (e) => onCheckedChange(e.target.checked) }), _jsx("span", { className: "tc-checkbox__box", children: _jsx(Tick, {}) }), children] }));
+}
+Checkbox.displayName = "Checkbox";
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../../components/themed/Checkbox.tsx"],"names":[],"mappings":";AAWA,uDAAuD;AACvD,SAAS,IAAI;IACX,OAAO,CACL,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,YACrD,eACE,CAAC,EAAC,kBAAkB,EACpB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,CACP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAiB;IACtF,OAAO,CACL,iBAAO,SAAS,EAAC,aAAa,kBAAe,OAAO,mBAAiB,QAAQ,aAC3E,gBACE,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GAClD,EACF,eAAM,SAAS,EAAC,kBAAkB,YAChC,KAAC,IAAI,KAAG,GACH,EACN,QAAQ,IACH,CACT,CAAC;AACJ,CAAC;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

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

@@ -0,0 +1,20 @@
+import React, { type ReactNode } from "react";
+export interface DropdownMenuItem {
+    id: string;
+    label: ReactNode;
+    onSelect?: () => void;
+}
+export interface DropdownMenuProps {
+    /** Trigger button label. */
+    trigger: ReactNode;
+    items: DropdownMenuItem[];
+}
+/**
+ * Token-driven dropdown menu. Emits semantic classes (`tc-dropdown`, …) styled
+ * by the surrounding `<ThemedSurface>`, so it re-themes with the active design
+ * config. Closes on outside-click / Escape.
+ */
+export declare function DropdownMenu({ trigger, items }: DropdownMenuProps): React.JSX.Element;
+export declare namespace DropdownMenu {
+    var displayName: string;
+}

package/dist/components/themed/DropdownMenu.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } 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, useRef, useState } from "react";
+import { Button } from "./Button.js";
+/**
+ * Token-driven dropdown menu. Emits semantic classes (`tc-dropdown`, …) styled
+ * by the surrounding `<ThemedSurface>`, so it re-themes with the active design
+ * config. Closes on outside-click / Escape.
+ */
+export function DropdownMenu({ trigger, items }) {
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onDocClick = (e) => {
+            if (ref.current && !ref.current.contains(e.target))
+                setOpen(false);
+        };
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", onDocClick);
+        document.addEventListener("keydown", onKey);
+        return () => {
+            document.removeEventListener("mousedown", onDocClick);
+            document.removeEventListener("keydown", onKey);
+        };
+    }, [open]);
+    return (_jsxs("div", { className: "tc-dropdown", ref: ref, children: [_jsx(Button, { variant: "outline", "aria-haspopup": "menu", "aria-expanded": open, onClick: () => setOpen((o) => !o), children: trigger }), open && (_jsx("div", { className: "tc-dropdown__menu", role: "menu", children: items.map((item) => (_jsx("button", { type: "button", role: "menuitem", className: "tc-dropdown__item", onClick: () => {
+                        item.onSelect?.();
+                        setOpen(false);
+                    }, children: item.label }, item.id))) }))] }));
+}
+DropdownMenu.displayName = "DropdownMenu";
+//# sourceMappingURL=DropdownMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.js","sourceRoot":"","sources":["../../../../../components/themed/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,0EAA0E;AAC1E,4DAA4D;AAC5D,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAclC;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,OAAO,EAAE,KAAK,EAAqB;IAChE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,MAAM,UAAU,GAAG,CAAC,CAAa,EAAE,EAAE;YACnC,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC;gBAAE,OAAO,CAAC,KAAK,CAAC,CAAC;QAC7E,CAAC,CAAC;QACF,MAAM,KAAK,GAAG,CAAC,CAAgB,EAAE,EAAE;YACjC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;gBAAE,OAAO,CAAC,KAAK,CAAC,CAAC;QACzC,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;QACnD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QAC5C,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;YACtD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QACjD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,eAAK,SAAS,EAAC,aAAa,EAAC,GAAG,EAAE,GAAG,aACnC,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,mBAAe,MAAM,mBAAgB,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,YAClG,OAAO,GACD,EACR,IAAI,IAAI,CACP,cAAK,SAAS,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM,YAC3C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,iBAEE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,mBAAmB,EAC7B,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;wBAClB,OAAO,CAAC,KAAK,CAAC,CAAC;oBACjB,CAAC,YAEA,IAAI,CAAC,KAAK,IATN,IAAI,CAAC,EAAE,CAUL,CACV,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}

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

@@ -0,0 +1,18 @@
+import React, { type InputHTMLAttributes, type ReactNode } from "react";
+export type InputVariant = "outline" | "filled" | "underline";
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    variant?: InputVariant;
+    /** Renders the error styling. */
+    error?: boolean;
+}
+/**
+ * Token-driven input. Emits semantic classes (`tci`, `tci--filled`, …) styled
+ * by the surrounding `<ThemedSurface>`, so it re-themes with the active design
+ * config.
+ */
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+/** Labelled field wrapper using the themed `tc-field` styles. */
+export declare function Field({ label, children, }: {
+    label: ReactNode;
+    children: ReactNode;
+}): React.JSX.Element;

package/dist/components/themed/Input.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 input. Emits semantic classes (`tci`, `tci--filled`, …) styled
+ * by the surrounding `<ThemedSurface>`, so it re-themes with the active design
+ * config.
+ */
+export const Input = forwardRef(({ 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("input", { ref: ref, className: classes.join(" "), ...props });
+});
+Input.displayName = "Input";
+/** Labelled field wrapper using the themed `tc-field` styles. */
+export function Field({ label, children, }) {
+    return (_jsxs("label", { className: "tc-field", children: [_jsx("span", { children: label }), children] }));
+}
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../../components/themed/Input.tsx"],"names":[],"mappings":";AAAA,0EAA0E;AAC1E,4DAA4D;AAC5D,OAAc,EAAE,UAAU,EAA4C,MAAM,OAAO,CAAC;AAUpF;;;;GAIG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC3D,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,gBAAO,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,KAAM,KAAK,GAAI,CAAC;AACtE,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,iEAAiE;AACjE,MAAM,UAAU,KAAK,CAAC,EACpB,KAAK,EACL,QAAQ,GAIT;IACC,OAAO,CACL,iBAAO,SAAS,EAAC,UAAU,aACzB,yBAAO,KAAK,GAAQ,EACnB,QAAQ,IACH,CACT,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,17 @@
+import React from "react";
+export interface PaginationProps {
+    page: number;
+    total: number;
+    onChange: (page: number) => void;
+    /** Max number of page buttons to show (excluding prev/next). */
+    siblings?: number;
+}
+/**
+ * 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 declare function Pagination({ page, total, onChange, siblings }: PaginationProps): React.JSX.Element;
+export declare namespace Pagination {
+    var displayName: string;
+}