@mangtre/ui 0.1.0

package/dist/charts.d.ts

@@ -0,0 +1,89 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { T as ThemeMode } from './MangThemeProvider-BqdGKBP2.js';
+import '@mangtre/core';
+
+/** Brand-palette series cycle (no dedicated chart tokens needed). */
+declare const SERIES: readonly ["#37B693", "#E8C547", "#B5793A", "#2E7CB8", "#8FE3B8", "#1F7A5C"];
+interface ThemedProps {
+    theme?: ThemeMode;
+    className?: string;
+}
+interface StatProps extends ThemedProps {
+    label: ReactNode;
+    value: ReactNode;
+    /** Optional delta (e.g. "+12%"); `direction` colors it. */
+    delta?: ReactNode;
+    direction?: "up" | "down";
+}
+declare function Stat({ label, value, delta, direction, theme, className }: StatProps): react.JSX.Element;
+declare function StatGroup({ children, theme, className }: ThemedProps & {
+    children: ReactNode;
+}): react.JSX.Element;
+interface SparklineProps extends ThemedProps {
+    values: number[];
+    width?: number;
+    height?: number;
+    /** Series color index (cycles the brand palette). */
+    colorIndex?: number;
+}
+declare function Sparkline({ values, width, height, colorIndex, theme, className, }: SparklineProps): react.JSX.Element;
+interface BarChartProps extends ThemedProps {
+    values: number[];
+    labels?: string[];
+}
+declare function BarChart({ values, labels, theme, className }: BarChartProps): react.JSX.Element;
+interface LineChartProps extends ThemedProps {
+    values: number[];
+    width?: number;
+    height?: number;
+    colorIndex?: number;
+    /** Fill the area under the line. */
+    area?: boolean;
+}
+declare function LineChart({ values, width, height, colorIndex, area, theme, className, }: LineChartProps): react.JSX.Element;
+/** Area chart = line chart with the under-fill on. */
+declare function AreaChart(props: Omit<LineChartProps, "area">): react.JSX.Element;
+interface DonutChartProps extends ThemedProps {
+    values: number[];
+    size?: number;
+    /** Stroke thickness (donut hole size). */
+    thickness?: number;
+    center?: ReactNode;
+}
+declare function DonutChart({ values, size, thickness, center, theme, className, }: DonutChartProps): react.JSX.Element;
+interface HeatmapProps extends ThemedProps {
+    /** Intensity 0–1 per cell, laid out in columns of 7 (GitHub-style weeks). */
+    values: number[];
+}
+declare function Heatmap({ values, theme, className }: HeatmapProps): react.JSX.Element;
+interface LegendItem {
+    label: ReactNode;
+    colorIndex?: number;
+}
+declare function Legend({ items, theme, className }: ThemedProps & {
+    items: LegendItem[];
+}): react.JSX.Element;
+
+/**
+ * Pure geometry helpers for the lightweight charts (no charting dependency). Unit-tested.
+ * All charts render inline SVG sized to a viewBox, so callers stay resolution-independent.
+ */
+/** Largest value (≥ 1) used as the axis max so a flat all-zero series still renders. */
+declare function axisMax(values: readonly number[]): number;
+/** Map values to SVG polyline points within a `w×h` box (y inverted). */
+declare function linePoints(values: readonly number[], w: number, h: number, pad?: number): string;
+/** Bar heights as a fraction (0–1) of the box, one per value. */
+declare function barFractions(values: readonly number[]): number[];
+interface Segment {
+    /** Start fraction of the circle (0–1). */
+    start: number;
+    /** End fraction of the circle (0–1). */
+    end: number;
+    /** This slice's share of the total (0–1). */
+    frac: number;
+}
+/** Cumulative segments for a donut/pie. Empty/zero total → no segments. */
+declare function pieSegments(values: readonly number[]): Segment[];
+
+export { AreaChart, BarChart, type BarChartProps, DonutChart, type DonutChartProps, Heatmap, type HeatmapProps, Legend, type LegendItem, LineChart, type LineChartProps, SERIES, type Segment, Sparkline, type SparklineProps, Stat, StatGroup, type StatProps, axisMax, barFractions, linePoints, pieSegments };

package/dist/charts.js

@@ -0,0 +1,34 @@
+import {
+  AreaChart,
+  BarChart,
+  DonutChart,
+  Heatmap,
+  Legend,
+  LineChart,
+  SERIES,
+  Sparkline,
+  Stat,
+  StatGroup,
+  axisMax,
+  barFractions,
+  linePoints,
+  pieSegments
+} from "./chunk-BLYAFV45.js";
+import "./chunk-3AL4SUFD.js";
+import "./chunk-PPOYMKV3.js";
+export {
+  AreaChart,
+  BarChart,
+  DonutChart,
+  Heatmap,
+  Legend,
+  LineChart,
+  SERIES,
+  Sparkline,
+  Stat,
+  StatGroup,
+  axisMax,
+  barFractions,
+  linePoints,
+  pieSegments
+};

package/dist/chunk-3AL4SUFD.js

@@ -0,0 +1,301 @@
+import {
+  tokens
+} from "./chunk-PPOYMKV3.js";
+
+// src/scopedStyle.ts
+var scopedStyleRefs = /* @__PURE__ */ new Map();
+function mountScopedStyle(id, css) {
+  let styleEl = document.getElementById(id);
+  if (!styleEl) {
+    styleEl = document.createElement("style");
+    styleEl.id = id;
+    document.head.appendChild(styleEl);
+  }
+  styleEl.textContent = css;
+  scopedStyleRefs.set(id, (scopedStyleRefs.get(id) ?? 0) + 1);
+  let disposed = false;
+  return () => {
+    if (disposed) return;
+    disposed = true;
+    const next = (scopedStyleRefs.get(id) ?? 1) - 1;
+    if (next > 0) {
+      scopedStyleRefs.set(id, next);
+      return;
+    }
+    scopedStyleRefs.delete(id);
+    document.getElementById(id)?.remove();
+  };
+}
+
+// src/theme/MangThemeProvider.tsx
+import { createContext, createElement, useContext, useMemo } from "react";
+var DEFAULTS = { theme: "light", locale: "vi", density: "comfortable" };
+var MangThemeContext = createContext(DEFAULTS);
+function MangThemeProvider({
+  theme = "light",
+  locale = "vi",
+  density = "comfortable",
+  children
+}) {
+  const value = useMemo(
+    () => ({ theme, locale, density }),
+    [theme, locale, density]
+  );
+  return createElement(MangThemeContext.Provider, { value }, children);
+}
+function useMangTheme() {
+  return useContext(MangThemeContext);
+}
+function useResolvedTheme(override) {
+  return override ?? useContext(MangThemeContext).theme;
+}
+function useLocale() {
+  return useContext(MangThemeContext).locale;
+}
+function useDensity() {
+  return useContext(MangThemeContext).density;
+}
+
+// src/theme/useScopedStyle.ts
+import { useEffect } from "react";
+function useScopedStyle(id, css) {
+  useEffect(() => mountScopedStyle(id, css), [id, css]);
+}
+
+// src/theme/kit.ts
+var KIT_STYLE_ID = "mang-ui-kit";
+var { color, semantic, radius, shadow, motion, fontSize, fontWeight, lineHeight, font, z } = tokens;
+var head = `"${font.heading}", system-ui, sans-serif`;
+var body = `"${font.body}", system-ui, sans-serif`;
+var ease = motion.ease.standard;
+var mix = (a, pct, b) => `color-mix(in oklab, ${a} ${pct}%, ${b})`;
+var DARK_VARS = (
+  /* css */
+  `
+  --m-surface: ${mix(color.mangGreen, 8, color.dark)};
+  --m-sunken: ${color.dark};
+  --m-raised: ${mix(color.mangGreen, 13, color.dark)};
+  --m-text: ${color.paper};
+  --m-text-strong: #ffffff;
+  --m-text-muted: ${mix(color.paper, 60, color.dark)};
+  --m-line: ${mix(color.shoot, 22, color.dark)};
+  --m-line-strong: ${mix(color.shoot, 40, color.dark)};
+  --m-accent-hover: ${color.shoot};
+  --m-accent-soft: ${mix(color.mangGreen, 24, color.dark)};
+  --m-success-soft: ${mix(semantic.state.success, 26, color.dark)};
+  --m-success-on: ${mix(semantic.state.success, 52, "#ffffff")};
+  --m-danger-soft: ${mix(semantic.state.danger, 26, color.dark)};
+  --m-danger-on: ${mix(semantic.state.danger, 55, "#ffffff")};
+  --m-warning-soft: ${mix(semantic.state.warning, 26, color.dark)};
+  --m-warning-on: ${mix(semantic.state.warning, 58, "#ffffff")};
+  --m-info-soft: ${mix(semantic.state.info, 26, color.dark)};
+  --m-info-on: ${mix(semantic.state.info, 58, "#ffffff")};
+  --m-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
+`
+);
+var KIT_CSS = (
+  /* css */
+  `
+.mang-ui-scope {
+  --m-surface: ${semantic.surface.base};
+  --m-sunken: ${semantic.surface.sunken};
+  --m-raised: ${semantic.surface.base};
+  --m-text: ${semantic.content.default};
+  --m-text-strong: ${semantic.content.strong};
+  --m-text-muted: ${semantic.content.muted};
+  --m-line: ${semantic.line.default};
+  --m-line-strong: ${semantic.line.strong};
+  --m-accent: ${color.mangGreen};
+  --m-accent-hover: ${semantic.accent.hover};
+  --m-accent-soft: ${semantic.accent.soft};
+  --m-on-accent: ${semantic.content.onAccent};
+  --m-success: ${semantic.state.success}; --m-success-soft: ${semantic.state.successSoft}; --m-success-on: ${semantic.state.success};
+  --m-danger: ${semantic.state.danger}; --m-danger-soft: ${semantic.state.dangerSoft}; --m-danger-on: ${semantic.state.danger};
+  --m-warning: ${semantic.state.warning}; --m-warning-soft: ${semantic.state.warningSoft}; --m-warning-on: ${semantic.state.warning};
+  --m-info: ${semantic.state.info}; --m-info-soft: ${semantic.state.infoSoft}; --m-info-on: ${semantic.state.info};
+  --m-radius: ${radius.lg};
+  --m-radius-sm: ${radius.md};
+  --m-shadow: ${shadow.md};
+  --m-pad: 0.62rem 0.85rem;
+  --m-h: 2.5rem;
+  font-family: ${body};
+  color: var(--m-text);
+}
+.mang-ui-scope[data-density="compact"] { --m-pad: 0.45rem 0.7rem; --m-h: 2.15rem; }
+.mang-ui-scope[data-density="touch"] { --m-pad: 0.8rem 1rem; --m-h: 3rem; }
+.mang-ui-scope[data-theme="dark"] {${DARK_VARS}}
+@media (prefers-color-scheme: dark) { .mang-ui-scope[data-theme="auto"] {${DARK_VARS}} }
+
+/* ---- text ---- */
+.mang-text { margin: 0; font-family: ${body}; color: var(--m-text); line-height: ${lineHeight.normal}; }
+.mang-text[data-tone="muted"] { color: var(--m-text-muted); }
+.mang-text[data-tone="strong"] { color: var(--m-text-strong); }
+.mang-text[data-tone="accent"] { color: var(--m-accent); }
+.mang-heading { margin: 0; font-family: ${head}; font-weight: ${fontWeight.bold}; color: var(--m-text-strong); line-height: ${lineHeight.tight}; letter-spacing: 0.005em; }
+.mang-divider { border: none; border-top: 1px solid var(--m-line); margin: 0; }
+
+/* ---- button ---- */
+.mang-btn {
+  appearance: none; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
+  min-height: var(--m-h); padding: 0 1.05rem; border-radius: ${radius.md}; border: 1.5px solid transparent;
+  font-family: ${head}; font-weight: ${fontWeight.bold}; font-size: ${fontSize.sm}; line-height: 1; text-decoration: none; white-space: nowrap;
+  transition: transform ${motion.duration.fast} ${ease}, background ${motion.duration.fast} ${ease}, border-color ${motion.duration.fast} ${ease}, box-shadow ${motion.duration.fast} ${ease}, color ${motion.duration.fast} ${ease};
+}
+.mang-btn[data-size="sm"] { min-height: 2.05rem; padding: 0 0.8rem; font-size: ${fontSize.xs}; }
+.mang-btn[data-size="lg"] { min-height: 2.95rem; padding: 0 1.4rem; font-size: ${fontSize.base}; }
+.mang-btn[data-block="true"] { display: flex; width: 100%; }
+.mang-btn:focus-visible { outline: 3px solid ${mix(color.mangGreen, 45, "transparent")}; outline-offset: 2px; }
+.mang-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.mang-btn:not(:disabled):active { transform: translateY(0) scale(0.98); }
+.mang-btn[data-variant="primary"] { background: var(--m-accent); color: var(--m-on-accent); box-shadow: 0 10px 22px -12px var(--m-accent); }
+.mang-btn[data-variant="primary"]:not(:disabled):hover { background: var(--m-accent-hover); transform: translateY(-1px); }
+.mang-btn[data-variant="secondary"] { background: var(--m-surface); color: var(--m-text-strong); border-color: var(--m-line-strong); }
+.mang-btn[data-variant="secondary"]:not(:disabled):hover { border-color: var(--m-accent); transform: translateY(-1px); }
+.mang-btn[data-variant="ghost"] { background: transparent; color: var(--m-text-strong); }
+.mang-btn[data-variant="ghost"]:not(:disabled):hover { background: var(--m-accent-soft); }
+.mang-btn[data-variant="danger"] { background: var(--m-danger); color: #fff; }
+.mang-btn[data-variant="danger"]:not(:disabled):hover { filter: brightness(1.06); transform: translateY(-1px); }
+.mang-iconbtn { width: var(--m-h); min-height: var(--m-h); padding: 0; border-radius: ${radius.md}; }
+.mang-iconbtn[data-size="sm"] { width: 2.05rem; min-height: 2.05rem; }
+.mang-btn-group { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }
+
+/* ---- field + controls ---- */
+.mang-field { display: grid; gap: 0.3rem; }
+.mang-field-label { font-family: ${head}; font-weight: ${fontWeight.semibold}; font-size: ${fontSize.sm}; color: var(--m-text-strong); }
+.mang-field-req { color: var(--m-danger); margin-left: 0.15rem; }
+.mang-field-desc { font-size: ${fontSize.xs}; color: var(--m-text-muted); }
+.mang-field-error { font-size: ${fontSize.xs}; color: var(--m-danger-on); font-weight: ${fontWeight.semibold}; }
+.mang-control {
+  box-sizing: border-box; width: 100%; min-height: var(--m-h); padding: var(--m-pad); border-radius: ${radius.md};
+  border: 1.5px solid var(--m-line-strong); background: var(--m-surface); color: var(--m-text);
+  font-family: ${body}; font-size: ${fontSize.base}; line-height: ${lineHeight.normal};
+  transition: border-color ${motion.duration.fast} ${ease}, box-shadow ${motion.duration.fast} ${ease};
+}
+.mang-control::placeholder { color: var(--m-text-muted); }
+.mang-control:focus-visible { outline: none; border-color: var(--m-accent); box-shadow: 0 0 0 3px ${mix(color.mangGreen, 35, "transparent")}; }
+.mang-control:disabled { opacity: 0.55; cursor: not-allowed; }
+.mang-control[aria-invalid="true"] { border-color: var(--m-danger); }
+textarea.mang-control { min-height: 5rem; resize: vertical; }
+select.mang-control { cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--m-text-muted) 50%), linear-gradient(135deg, var(--m-text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
+.mang-checkbox { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: ${fontSize.sm}; color: var(--m-text); }
+.mang-checkbox input { width: 1.15rem; height: 1.15rem; accent-color: var(--m-accent); cursor: pointer; }
+.mang-checkbox[data-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
+.mang-switch { position: relative; display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; font-size: ${fontSize.sm}; color: var(--m-text); }
+.mang-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
+.mang-switch-track { width: 2.5rem; height: 1.45rem; border-radius: ${radius.full}; background: var(--m-line-strong); transition: background ${motion.duration.base} ${ease}; flex: none; }
+.mang-switch-thumb { position: absolute; left: 3px; top: 50%; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #fff; transform: translateY(-50%); transition: transform ${motion.duration.base} ${ease}; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
+.mang-switch input:checked ~ .mang-switch-track { background: var(--m-accent); }
+.mang-switch input:checked ~ .mang-switch-thumb { transform: translate(1.05rem, -50%); }
+.mang-switch input:focus-visible ~ .mang-switch-track { outline: 3px solid ${mix(color.mangGreen, 45, "transparent")}; outline-offset: 2px; }
+.mang-switch[data-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
+
+/* ---- surfaces ---- */
+.mang-card { box-sizing: border-box; background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-radius); box-shadow: var(--m-shadow); color: var(--m-text); overflow: clip; }
+.mang-card[data-interactive="true"] { cursor: pointer; transition: transform ${motion.duration.base} ${ease}, border-color ${motion.duration.base} ${ease}; }
+.mang-card[data-interactive="true"]:hover { transform: translateY(-2px); border-color: ${mix(color.mangGreen, 50, "transparent")}; }
+.mang-card-head { padding: 1rem 1.15rem 0.6rem; }
+.mang-card-body { padding: 0.6rem 1.15rem 1rem; }
+.mang-card-foot { padding: 0.7rem 1.15rem; border-top: 1px solid var(--m-line); display: flex; gap: 0.5rem; align-items: center; }
+.mang-panel { box-sizing: border-box; background: var(--m-sunken); border: 1px solid var(--m-line); border-radius: var(--m-radius); padding: 1rem 1.1rem; color: var(--m-text); }
+
+/* ---- tabs ---- */
+.mang-tablist { display: inline-flex; gap: 0.2rem; padding: 0.25rem; background: var(--m-sunken); border-radius: ${radius.md}; border: 1px solid var(--m-line); }
+.mang-tab { appearance: none; cursor: pointer; border: none; background: transparent; padding: 0.45rem 0.85rem; border-radius: ${radius.sm}; font-family: ${head}; font-weight: ${fontWeight.semibold}; font-size: ${fontSize.sm}; color: var(--m-text-muted); transition: background ${motion.duration.fast} ${ease}, color ${motion.duration.fast} ${ease}; }
+.mang-tab:hover { color: var(--m-text-strong); }
+.mang-tab[aria-selected="true"] { background: var(--m-surface); color: var(--m-accent); box-shadow: var(--m-shadow); }
+.mang-tab:focus-visible { outline: 3px solid ${mix(color.mangGreen, 45, "transparent")}; outline-offset: 2px; }
+.mang-tabpanel { padding-top: 0.85rem; }
+
+/* ---- overlay: dialog + sheet ---- */
+.mang-overlay-backdrop { position: fixed; inset: 0; z-index: ${z.modal}; display: flex; background: rgba(11,20,18,0.5); backdrop-filter: blur(2px); animation: mang-fade ${motion.duration.base} ${ease}; }
+.mang-dialog { margin: auto; width: min(34rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; background: var(--m-surface); color: var(--m-text); border: 1px solid var(--m-line); border-radius: ${radius.xl}; box-shadow: var(--m-shadow); animation: mang-pop ${motion.duration.base} ${ease}; }
+.mang-dialog-head, .mang-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 1.1rem 1.2rem 0.5rem; }
+.mang-dialog-title, .mang-sheet-title { margin: 0; font-family: ${head}; font-weight: ${fontWeight.bold}; font-size: ${fontSize.lg}; color: var(--m-text-strong); }
+.mang-dialog-body, .mang-sheet-body { padding: 0.5rem 1.2rem 1rem; }
+.mang-dialog-foot, .mang-sheet-foot { display: flex; gap: 0.5rem; justify-content: flex-end; padding: 0.5rem 1.2rem 1.1rem; }
+.mang-overlay-backdrop[data-variant="sheet"] { padding: 0; }
+.mang-sheet { background: var(--m-surface); color: var(--m-text); box-shadow: var(--m-shadow); display: flex; flex-direction: column; max-height: 100dvh; }
+.mang-sheet[data-side="right"] { margin-left: auto; height: 100dvh; width: min(28rem, 100vw); border-left: 1px solid var(--m-line); animation: mang-slide-r ${motion.duration.base} ${ease}; }
+.mang-sheet[data-side="left"] { margin-right: auto; height: 100dvh; width: min(28rem, 100vw); border-right: 1px solid var(--m-line); animation: mang-slide-l ${motion.duration.base} ${ease}; }
+.mang-sheet[data-side="bottom"] { margin-top: auto; width: 100%; max-height: 85dvh; border-top: 1px solid var(--m-line); border-radius: ${radius.xl} ${radius.xl} 0 0; animation: mang-slide-b ${motion.duration.base} ${ease}; }
+@keyframes mang-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes mang-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
+@keyframes mang-slide-r { from { transform: translateX(100%); } to { transform: none; } }
+@keyframes mang-slide-l { from { transform: translateX(-100%); } to { transform: none; } }
+@keyframes mang-slide-b { from { transform: translateY(100%); } to { transform: none; } }
+
+/* ---- toast ---- */
+.mang-toast-viewport { position: fixed; z-index: ${z.toast}; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: 0.5rem; max-width: min(24rem, calc(100vw - 2rem)); }
+.mang-toast { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.75rem 0.9rem; border-radius: ${radius.md}; background: var(--m-surface); color: var(--m-text); border: 1px solid var(--m-line); border-left: 4px solid var(--m-accent); box-shadow: var(--m-shadow); animation: mang-pop ${motion.duration.base} ${ease}; }
+.mang-toast[data-tone="success"] { border-left-color: var(--m-success); }
+.mang-toast[data-tone="danger"] { border-left-color: var(--m-danger); }
+.mang-toast[data-tone="warning"] { border-left-color: var(--m-warning); }
+.mang-toast-msg { font-size: ${fontSize.sm}; line-height: ${lineHeight.snug}; }
+
+/* ---- feedback ---- */
+.mang-empty, .mang-error-state { display: grid; gap: 0.5rem; justify-items: center; text-align: center; padding: 2rem 1.25rem; color: var(--m-text-muted); }
+.mang-empty-icon { font-size: 2rem; line-height: 1; }
+.mang-empty-title { font-family: ${head}; font-weight: ${fontWeight.bold}; font-size: ${fontSize.lg}; color: var(--m-text-strong); }
+.mang-error-state { color: var(--m-danger-on); }
+.mang-error-state .mang-empty-title { color: var(--m-danger-on); }
+.mang-skeleton { display: block; border-radius: ${radius.sm}; background: linear-gradient(90deg, var(--m-sunken) 25%, ${mix(color.mangGreen, 8, "transparent")} 50%, var(--m-sunken) 75%); background-size: 200% 100%; animation: mang-shimmer 1.3s linear infinite; }
+@keyframes mang-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+.mang-spinner { display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2.5px solid ${mix(color.mangGreen, 25, "transparent")}; border-top-color: var(--m-accent); animation: mang-spin 0.7s linear infinite; }
+@keyframes mang-spin { to { transform: rotate(360deg); } }
+.mang-progress { width: 100%; height: 0.55rem; border-radius: ${radius.full}; background: var(--m-sunken); overflow: hidden; }
+.mang-progress-bar { height: 100%; border-radius: ${radius.full}; background: var(--m-accent); transition: width ${motion.duration.slow} ${ease}; }
+.mang-progress[data-indeterminate="true"] .mang-progress-bar { width: 40% !important; animation: mang-indet 1.1s ${ease} infinite; }
+@keyframes mang-indet { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
+
+/* ---- badges ---- */
+.mang-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.55rem; border-radius: ${radius.full}; font-family: ${head}; font-weight: ${fontWeight.semibold}; font-size: ${fontSize.xs}; line-height: 1.4; background: var(--m-accent-soft); color: var(--m-accent); }
+.mang-badge[data-tone="neutral"] { background: var(--m-sunken); color: var(--m-text-muted); }
+.mang-badge[data-tone="success"] { background: var(--m-success-soft); color: var(--m-success-on); }
+.mang-badge[data-tone="danger"] { background: var(--m-danger-soft); color: var(--m-danger-on); }
+.mang-badge[data-tone="warning"] { background: var(--m-warning-soft); color: var(--m-warning-on); }
+.mang-badge[data-tone="info"] { background: var(--m-info-soft); color: var(--m-info-on); }
+.mang-badge svg { flex: none; }
+.mang-verified { background: ${mix(color.mangGreen, 15, "transparent")}; color: var(--m-accent); box-shadow: inset 0 0 0 1px ${mix(color.mangGreen, 25, "transparent")}; }
+.mang-money { font-variant-numeric: tabular-nums; font-weight: ${fontWeight.semibold}; color: var(--m-text-strong); }
+.mang-money[data-sign="positive"] { color: var(--m-success); }
+.mang-money[data-sign="negative"] { color: var(--m-danger); }
+
+@media (prefers-reduced-motion: reduce) {
+  .mang-skeleton, .mang-spinner, .mang-progress[data-indeterminate="true"] .mang-progress-bar { animation: none; }
+  .mang-overlay-backdrop, .mang-dialog, .mang-sheet, .mang-toast { animation: none; }
+  .mang-btn, .mang-card, .mang-control, .mang-tab { transition: none; }
+}
+`
+);
+function useKitStyles() {
+  useScopedStyle(KIT_STYLE_ID, KIT_CSS);
+}
+
+// src/theme/scope.ts
+function useAreaStyles(id, css) {
+  useKitStyles();
+  useScopedStyle(id, css);
+}
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function useScope(theme) {
+  const resolved = useResolvedTheme(theme);
+  const density = useDensity();
+  return { className: "mang-ui-scope", "data-theme": resolved, "data-density": density };
+}
+
+export {
+  mountScopedStyle,
+  MangThemeProvider,
+  useMangTheme,
+  useResolvedTheme,
+  useLocale,
+  useDensity,
+  useScopedStyle,
+  KIT_STYLE_ID,
+  useKitStyles,
+  useAreaStyles,
+  cx,
+  useScope
+};

package/dist/chunk-4XNSYKQE.js

@@ -0,0 +1,142 @@
+import {
+  Badge
+} from "./chunk-FZRXVRC7.js";
+import {
+  cx,
+  useAreaStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+import {
+  tokens
+} from "./chunk-PPOYMKV3.js";
+
+// src/learning/Learning.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STYLE_ID = "mang-ui-learning";
+var { fontSize, fontWeight, radius, font, motion } = tokens;
+var CSS = (
+  /* css */
+  `
+.mang-flash { position: relative; width: 100%; min-height: 9rem; perspective: 1000px; cursor: pointer; background: none; border: none; padding: 0; font: inherit; text-align: inherit; }
+.mang-flash-inner { position: relative; width: 100%; min-height: 9rem; transition: transform ${motion.duration.slow} ${motion.ease.standard}; transform-style: preserve-3d; }
+.mang-flash[data-flipped="true"] .mang-flash-inner { transform: rotateY(180deg); }
+.mang-flash-face { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.25rem; border: 1px solid var(--m-line); border-radius: ${radius.lg}; background: var(--m-surface); color: var(--m-text); backface-visibility: hidden; text-align: center; }
+.mang-flash-back { transform: rotateY(180deg); background: var(--m-accent-soft); }
+.mang-flash-hint { position: absolute; bottom: 0.5rem; right: 0.7rem; font-size: ${fontSize.xs}; color: var(--m-text-muted); }
+.mang-quiz { display: grid; gap: 0.7rem; padding: 1rem 1.1rem; border: 1px solid var(--m-line); border-radius: ${radius.lg}; background: var(--m-surface); }
+.mang-quiz-q { font-family: "${font.heading}", system-ui, sans-serif; font-weight: ${fontWeight.bold}; font-size: ${fontSize.lg}; color: var(--m-text-strong); }
+.mang-quiz-opts { display: grid; gap: 0.5rem; }
+.mang-quiz-opt { appearance: none; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.85rem; border: 1.5px solid var(--m-line-strong); border-radius: ${radius.md}; background: var(--m-surface); color: var(--m-text); font: inherit; font-size: ${fontSize.sm}; transition: border-color 140ms, background 140ms; }
+.mang-quiz-opt:hover:not(:disabled) { border-color: var(--m-accent); }
+.mang-quiz-opt[data-state="selected"] { border-color: var(--m-accent); background: var(--m-accent-soft); }
+.mang-quiz-opt[data-state="correct"] { border-color: var(--m-success); background: var(--m-success-soft); color: var(--m-success-on); }
+.mang-quiz-opt[data-state="wrong"] { border-color: var(--m-danger); background: var(--m-danger-soft); color: var(--m-danger-on); }
+.mang-quiz-opt:disabled { cursor: default; }
+.mang-quiz-opt:focus-visible { outline: 3px solid color-mix(in oklab, ${tokens.color.mangGreen} 45%, transparent); outline-offset: 2px; }
+.mang-score { display: grid; gap: 0.25rem; justify-items: center; text-align: center; padding: 1.25rem; border: 1px solid var(--m-line); border-radius: ${radius.lg}; background: var(--m-surface); }
+.mang-score-value { font-family: "${font.heading}", system-ui, sans-serif; font-weight: ${fontWeight.bold}; font-size: ${fontSize["3xl"]}; color: var(--m-accent); font-variant-numeric: tabular-nums; }
+.mang-score-label { font-size: ${fontSize.sm}; color: var(--m-text-muted); }
+`
+);
+function Flashcard({
+  front,
+  back,
+  flipped,
+  onFlip,
+  locale = "vi",
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  const [internal, setInternal] = useState(false);
+  const isFlipped = flipped ?? internal;
+  const toggle = () => {
+    const next = !isFlipped;
+    if (flipped === void 0) setInternal(next);
+    onFlip?.(next);
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      ...scope,
+      className: cx(scope.className, "mang-flash", className),
+      "data-flipped": isFlipped ? "true" : "false",
+      onClick: toggle,
+      "aria-label": locale === "vi" ? "L\u1EADt th\u1EBB" : "Flip card",
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "mang-flash-inner", children: [
+          /* @__PURE__ */ jsx("span", { className: "mang-flash-face", children: front }),
+          /* @__PURE__ */ jsx("span", { className: "mang-flash-face mang-flash-back", children: back })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "mang-flash-hint", children: locale === "vi" ? "b\u1EA5m \u0111\u1EC3 l\u1EADt" : "tap to flip" })
+      ]
+    }
+  );
+}
+function QuizCard({
+  question,
+  options,
+  value,
+  onSelect,
+  correctId,
+  revealed,
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  const stateOf = (id) => {
+    if (revealed && correctId) {
+      if (id === correctId) return "correct";
+      if (id === value) return "wrong";
+      return void 0;
+    }
+    return id === value ? "selected" : void 0;
+  };
+  return /* @__PURE__ */ jsxs("div", { ...scope, className: cx(scope.className, "mang-quiz", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "mang-quiz-q", children: question }),
+    /* @__PURE__ */ jsx("div", { className: "mang-quiz-opts", ...{ role: "radiogroup" }, children: options.map((o) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        ...{ role: "radio" },
+        "aria-checked": value === o.id,
+        className: "mang-quiz-opt",
+        "data-state": stateOf(o.id),
+        disabled: revealed,
+        onClick: () => onSelect?.(o.id),
+        children: o.label
+      },
+      o.id
+    )) })
+  ] });
+}
+function ScoreCard({ score, total, label, theme, className }) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs("div", { ...scope, className: cx(scope.className, "mang-score", className), children: [
+    /* @__PURE__ */ jsxs("span", { className: "mang-score-value", children: [
+      score,
+      "/",
+      total
+    ] }),
+    label != null && /* @__PURE__ */ jsx("span", { className: "mang-score-label", children: label })
+  ] });
+}
+function StreakBadge({ days, locale = "vi", theme, className }) {
+  return /* @__PURE__ */ jsxs(Badge, { tone: "warning", icon: "\u{1F525}", theme, className, children: [
+    days,
+    " ",
+    locale === "vi" ? "ng\xE0y" : "days"
+  ] });
+}
+
+export {
+  Flashcard,
+  QuizCard,
+  ScoreCard,
+  StreakBadge
+};

package/dist/chunk-5Z4VLQKH.js

@@ -0,0 +1,43 @@
+import {
+  cx,
+  useKitStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+
+// src/surface/Card.tsx
+import { jsx } from "react/jsx-runtime";
+function Card({ interactive, theme, className, children, ...rest }) {
+  useKitStyles();
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ...scope,
+      className: cx(scope.className, "mang-card", className),
+      "data-interactive": interactive ? "true" : void 0,
+      children
+    }
+  );
+}
+var sub = (cls) => ({
+  className,
+  children,
+  style
+}) => /* @__PURE__ */ jsx("div", { className: cx(cls, className), style, children });
+var CardHeader = sub("mang-card-head");
+var CardBody = sub("mang-card-body");
+var CardFooter = sub("mang-card-foot");
+function Panel({ theme, className, children, ...rest }) {
+  useKitStyles();
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsx("div", { ...rest, ...scope, className: cx(scope.className, "mang-panel", className), children });
+}
+
+export {
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  Panel
+};

package/dist/chunk-7P2EQZYD.js

@@ -0,0 +1,59 @@
+import {
+  ToastProvider
+} from "./chunk-DTASXPTB.js";
+import {
+  MangThemeProvider,
+  cx,
+  useKitStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+import {
+  defaultTheme
+} from "./chunk-PPOYMKV3.js";
+
+// src/theme/applyThemeVars.ts
+function applyThemeVars(el, theme = defaultTheme) {
+  for (const [name, value] of Object.entries(theme.color)) {
+    el.style.setProperty(`--mang-color-${name}`, value);
+  }
+  el.style.setProperty("--mang-font-heading", `"${theme.font.heading}"`);
+  el.style.setProperty("--mang-font-body", `"${theme.font.body}"`);
+}
+
+// src/app/MangApp.tsx
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+function MangApp({
+  theme = "light",
+  locale = "vi",
+  density = "comfortable",
+  sdkTheme,
+  withToasts = true,
+  className,
+  style,
+  children
+}) {
+  useKitStyles();
+  const scope = useScope(theme);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (sdkTheme && ref.current) applyThemeVars(ref.current, sdkTheme);
+  }, [sdkTheme]);
+  const root = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...scope,
+      "data-density": density,
+      className: cx(scope.className, className),
+      style,
+      children
+    }
+  );
+  return /* @__PURE__ */ jsx(MangThemeProvider, { theme, locale, density, children: withToasts ? /* @__PURE__ */ jsx(ToastProvider, { theme, children: root }) : root });
+}
+
+export {
+  applyThemeVars,
+  MangApp
+};