@mangtre/ui 0.1.0

package/dist/chunk-RE7OWRA4.js

@@ -0,0 +1,187 @@
+import {
+  cx,
+  useAreaStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+import {
+  tokens
+} from "./chunk-PPOYMKV3.js";
+
+// src/media/Media.tsx
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STYLE_ID = "mang-ui-media";
+var { color, fontSize, fontWeight, radius, font } = tokens;
+var CSS = (
+  /* css */
+  `
+.mang-dropzone { display: grid; gap: 0.35rem; justify-items: center; text-align: center; padding: 1.5rem 1.25rem; border: 2px dashed var(--m-line-strong); border-radius: ${radius.lg}; background: var(--m-sunken); color: var(--m-text-muted); cursor: pointer; transition: border-color 140ms, background 140ms; }
+.mang-dropzone[data-over="true"] { border-color: var(--m-accent); background: var(--m-accent-soft); }
+.mang-dropzone-icon { font-size: 1.6rem; }
+.mang-fileprev { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border: 1px solid var(--m-line); border-radius: ${radius.md}; background: var(--m-surface); }
+.mang-fileprev-icon { font-size: 1.25rem; }
+.mang-fileprev-main { flex: 1; min-width: 0; }
+.mang-fileprev-name { font-weight: ${fontWeight.semibold}; font-size: ${fontSize.sm}; color: var(--m-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mang-fileprev-meta { font-size: ${fontSize.xs}; color: var(--m-text-muted); }
+.mang-imgprev { max-width: 100%; border-radius: ${radius.md}; border: 1px solid var(--m-line); display: block; }
+.mang-avatar { display: inline-grid; place-items: center; border-radius: 50%; background: var(--m-accent); color: #fff; font-family: "${font.heading}", system-ui, sans-serif; font-weight: ${fontWeight.bold}; overflow: hidden; flex: none; }
+.mang-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.mang-avatargroup { display: inline-flex; }
+.mang-avatargroup .mang-avatar { margin-left: -0.5rem; box-shadow: 0 0 0 2px var(--m-surface); }
+.mang-avatargroup .mang-avatar:first-child { margin-left: 0; }
+`
+);
+function Dropzone({
+  onFiles,
+  accept,
+  multiple,
+  label,
+  icon = "\u2B06\uFE0F",
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  const inputRef = useRef(null);
+  const [over, setOver] = useState(false);
+  const emit = (list) => {
+    if (list && list.length > 0) onFiles(Array.from(list));
+  };
+  const onDrop = (e) => {
+    e.preventDefault();
+    setOver(false);
+    emit(e.dataTransfer.files);
+  };
+  const trigger = { role: "button", tabIndex: 0 };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...scope,
+      ...trigger,
+      className: cx(scope.className, "mang-dropzone", className),
+      "data-over": over ? "true" : void 0,
+      onClick: () => inputRef.current?.click(),
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") inputRef.current?.click();
+      },
+      onDragOver: (e) => {
+        e.preventDefault();
+        setOver(true);
+      },
+      onDragLeave: () => setOver(false),
+      onDrop,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "mang-dropzone-icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx("span", { children: label ?? "K\xE9o th\u1EA3 t\u1EC7p v\xE0o \u0111\xE2y" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept,
+            multiple,
+            hidden: true,
+            onChange: (e) => {
+              emit(e.target.files);
+              e.target.value = "";
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function FilePreview({
+  name,
+  size,
+  icon = "\u{1F4C4}",
+  action,
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs("div", { ...scope, className: cx(scope.className, "mang-fileprev", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "mang-fileprev-icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: "mang-fileprev-main", children: [
+      /* @__PURE__ */ jsx("div", { className: "mang-fileprev-name", children: name }),
+      size != null && /* @__PURE__ */ jsxs("div", { className: "mang-fileprev-meta", children: [
+        (size / 1024).toFixed(0),
+        " KB"
+      ] })
+    ] }),
+    action
+  ] });
+}
+function ImagePreview({
+  src,
+  alt,
+  maxHeight = "16rem",
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ...scope,
+      className: cx(scope.className, "mang-imgprev", className),
+      src,
+      alt,
+      style: { maxHeight }
+    }
+  );
+}
+function Avatar({ src, name, size = 36, theme, className }) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  const initials = (name ?? "?").trim().slice(0, 1).toUpperCase();
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...scope,
+      className: cx(scope.className, "mang-avatar", className),
+      style: { width: size, height: size, fontSize: size * 0.42 },
+      "aria-label": name,
+      children: src ? /* @__PURE__ */ jsx("img", { src, alt: name ?? "" }) : initials
+    }
+  );
+}
+function AvatarGroup({ people, max = 4, size = 32, theme, className }) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  const shown = people.slice(0, max);
+  const extra = people.length - shown.length;
+  return /* @__PURE__ */ jsxs("span", { ...scope, className: cx(scope.className, "mang-avatargroup", className), children: [
+    shown.map((p, i) => /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        src: p.src,
+        name: p.name,
+        size,
+        theme
+      },
+      i
+    )),
+    extra > 0 && /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "mang-avatar",
+        style: { width: size, height: size, fontSize: size * 0.36, background: color.bamboo },
+        children: [
+          "+",
+          extra
+        ]
+      }
+    )
+  ] });
+}
+
+export {
+  Dropzone,
+  FilePreview,
+  ImagePreview,
+  Avatar,
+  AvatarGroup
+};

package/dist/chunk-SJF3CHAW.js

@@ -0,0 +1,108 @@
+import {
+  cx,
+  useKitStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+
+// src/navigation/Tabs.tsx
+import {
+  createContext,
+  useContext,
+  useId,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var Ctx = createContext(null);
+var useTabs = () => {
+  const c = useContext(Ctx);
+  if (!c) throw new Error("Tabs subcomponents must be used inside <Tabs>");
+  return c;
+};
+function Tabs({
+  value,
+  defaultValue,
+  onValueChange,
+  theme,
+  className,
+  children
+}) {
+  useKitStyles();
+  const scope = useScope(theme);
+  const baseId = useId();
+  const [internal, setInternal] = useState(defaultValue ?? "");
+  const active = value ?? internal;
+  const setValue = (v) => {
+    if (value === void 0) setInternal(v);
+    onValueChange?.(v);
+  };
+  return /* @__PURE__ */ jsx(Ctx.Provider, { value: { value: active, setValue, baseId }, children: /* @__PURE__ */ jsx("div", { ...scope, className: cx(scope.className, className), children }) });
+}
+function TabList({ label, className, children }) {
+  const onKeyDown = (e) => {
+    const tabs = Array.from(
+      e.currentTarget.querySelectorAll('[role="tab"]:not(:disabled)')
+    );
+    const i = tabs.indexOf(document.activeElement);
+    if (i < 0) return;
+    let next = -1;
+    if (e.key === "ArrowRight") next = (i + 1) % tabs.length;
+    else if (e.key === "ArrowLeft") next = (i - 1 + tabs.length) % tabs.length;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = tabs.length - 1;
+    if (next >= 0) {
+      e.preventDefault();
+      tabs[next]?.focus();
+      tabs[next]?.click();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": label,
+      className: cx("mang-tablist", className),
+      onKeyDown,
+      children
+    }
+  );
+}
+function Tab({ value, disabled, className, children }) {
+  const { value: active, setValue, baseId } = useTabs();
+  const selected = active === value;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      id: `${baseId}-tab-${value}`,
+      "aria-selected": selected,
+      "aria-controls": `${baseId}-panel-${value}`,
+      tabIndex: selected ? 0 : -1,
+      disabled,
+      className: cx("mang-tab", className),
+      onClick: () => setValue(value),
+      children
+    }
+  );
+}
+function TabPanel({ value, className, children }) {
+  const { value: active, baseId } = useTabs();
+  if (active !== value) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tabpanel",
+      id: `${baseId}-panel-${value}`,
+      "aria-labelledby": `${baseId}-tab-${value}`,
+      className: cx("mang-tabpanel", className),
+      children
+    }
+  );
+}
+
+export {
+  Tabs,
+  TabList,
+  Tab,
+  TabPanel
+};

package/dist/chunk-UF6ANDJZ.js

@@ -0,0 +1,112 @@
+import {
+  VndText
+} from "./chunk-IX3DYETF.js";
+import {
+  Badge
+} from "./chunk-FZRXVRC7.js";
+import {
+  Button
+} from "./chunk-YN5O6YL6.js";
+import {
+  cx,
+  useAreaStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+import {
+  tokens
+} from "./chunk-PPOYMKV3.js";
+
+// src/money/MoneyKit.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var STYLE_ID = "mang-ui-money";
+var { fontSize, fontWeight, radius, font } = tokens;
+var CSS = (
+  /* css */
+  `
+.mang-amount { display: grid; gap: 0.15rem; }
+.mang-amount-label { font-size: ${fontSize.xs}; color: var(--m-text-muted); font-weight: ${fontWeight.semibold}; text-transform: uppercase; letter-spacing: 0.07em; }
+.mang-amount-value { font-family: "${font.heading}", system-ui, sans-serif; font-weight: ${fontWeight.bold}; font-size: ${fontSize["3xl"]}; color: var(--m-text-strong); font-variant-numeric: tabular-nums; line-height: 1.05; }
+.mang-explist { display: grid; gap: 0.4rem; }
+.mang-exprow { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem; border: 1px solid var(--m-line); border-radius: ${radius.md}; background: var(--m-surface); }
+.mang-exprow-main { flex: 1; min-width: 0; }
+.mang-exprow-note { font-weight: ${fontWeight.semibold}; color: var(--m-text-strong); font-size: ${fontSize.sm}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mang-exprow-meta { font-size: ${fontSize.xs}; color: var(--m-text-muted); }
+.mang-settle { display: grid; gap: 0.7rem; padding: 0.9rem 1rem; border: 1px solid var(--m-line); border-radius: ${radius.lg}; background: var(--m-surface); }
+.mang-settle-line { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
+.mang-settle-who { font-size: ${fontSize.sm}; color: var(--m-text); }
+.mang-settle-who b { color: var(--m-text-strong); }
+.mang-settle-qr { justify-self: center; padding: 0.5rem; background: #fff; border-radius: ${radius.md}; line-height: 0; }
+`
+);
+function AmountSummary({
+  label,
+  amount,
+  sign = "none",
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs("div", { ...scope, className: cx(scope.className, "mang-amount", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "mang-amount-label", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "mang-amount-value", children: /* @__PURE__ */ jsx(VndText, { amount, sign, theme }) })
+  ] });
+}
+function ExpenseRow({ note, meta, amount, action, theme, className }) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs("div", { ...scope, className: cx(scope.className, "mang-exprow", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "mang-exprow-main", children: [
+      /* @__PURE__ */ jsx("div", { className: "mang-exprow-note", children: note }),
+      meta != null && /* @__PURE__ */ jsx("div", { className: "mang-exprow-meta", children: meta })
+    ] }),
+    /* @__PURE__ */ jsx(VndText, { amount, theme }),
+    action
+  ] });
+}
+function ExpenseList({ children, theme, className }) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsx("div", { ...scope, className: cx(scope.className, "mang-explist", className), children });
+}
+function PaidBadge({ locale = "vi", theme, className }) {
+  return /* @__PURE__ */ jsx(Badge, { tone: "success", icon: "\u2713", theme, className, children: locale === "vi" ? "\u0110\xE3 tr\u1EA3" : "Paid" });
+}
+function UnpaidBadge({ locale = "vi", theme, className }) {
+  return /* @__PURE__ */ jsx(Badge, { tone: "neutral", theme, className, children: locale === "vi" ? "Ch\u01B0a tr\u1EA3" : "Unpaid" });
+}
+function SettlementCard({
+  from,
+  to,
+  amount,
+  qr,
+  paid,
+  onMarkPaid,
+  locale = "vi",
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs("div", { ...scope, className: cx(scope.className, "mang-settle", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "mang-settle-line", children: [
+      /* @__PURE__ */ jsxs("span", { className: "mang-settle-who", children: [
+        /* @__PURE__ */ jsx("b", { children: from }),
+        " \u2192 ",
+        /* @__PURE__ */ jsx("b", { children: to })
+      ] }),
+      paid ? /* @__PURE__ */ jsx(PaidBadge, { locale, theme }) : /* @__PURE__ */ jsx(VndText, { amount, theme })
+    ] }),
+    qr != null && !paid && /* @__PURE__ */ jsx("div", { className: "mang-settle-qr", children: qr }),
+    onMarkPaid && !paid && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", theme, onClick: onMarkPaid, children: locale === "vi" ? "\u0110\xE1nh d\u1EA5u \u0111\xE3 tr\u1EA3" : "Mark as paid" })
+  ] });
+}
+
+export {
+  AmountSummary,
+  ExpenseRow,
+  ExpenseList,
+  PaidBadge,
+  UnpaidBadge,
+  SettlementCard
+};

package/dist/chunk-VGC5DMOM.js

@@ -0,0 +1,107 @@
+import {
+  cx,
+  useKitStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+
+// src/feedback/Feedback.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  theme,
+  className
+}) {
+  useKitStyles();
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs("div", { ...scope, className: cx(scope.className, "mang-empty", className), children: [
+    icon != null && /* @__PURE__ */ jsx("div", { className: "mang-empty-icon", "aria-hidden": "true", children: icon }),
+    title != null && /* @__PURE__ */ jsx("div", { className: "mang-empty-title", children: title }),
+    description != null && /* @__PURE__ */ jsx("div", { children: description }),
+    action
+  ] });
+}
+function ErrorState({
+  icon = "\u26A0\uFE0F",
+  title,
+  description,
+  action,
+  theme,
+  className
+}) {
+  useKitStyles();
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs("div", { ...scope, className: cx(scope.className, "mang-error-state", className), role: "alert", children: [
+    icon != null && /* @__PURE__ */ jsx("div", { className: "mang-empty-icon", "aria-hidden": "true", children: icon }),
+    title != null && /* @__PURE__ */ jsx("div", { className: "mang-empty-title", children: title }),
+    description != null && /* @__PURE__ */ jsx("div", { children: description }),
+    action
+  ] });
+}
+function Skeleton({
+  width,
+  height = "1rem",
+  rounded,
+  theme,
+  className,
+  style
+}) {
+  useKitStyles();
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...scope,
+      className: cx(scope.className, "mang-skeleton", className),
+      style: { width, height, borderRadius: rounded ? "999px" : void 0, ...style },
+      "aria-hidden": "true"
+    }
+  );
+}
+function Spinner({ size, label = "\u0110ang t\u1EA3i\u2026", theme, className }) {
+  useKitStyles();
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...scope,
+      className: cx(scope.className, "mang-spinner", className),
+      style: size != null ? { width: size, height: size } : void 0,
+      role: "status",
+      "aria-label": label
+    }
+  );
+}
+function Progress({ value, theme, className, label }) {
+  useKitStyles();
+  const scope = useScope(theme);
+  const indeterminate = value == null;
+  const pct = indeterminate ? void 0 : Math.max(0, Math.min(100, value));
+  const bar = {
+    role: "progressbar",
+    "aria-label": label,
+    "aria-valuenow": pct,
+    "aria-valuemin": indeterminate ? void 0 : 0,
+    "aria-valuemax": indeterminate ? void 0 : 100
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...scope,
+      ...bar,
+      className: cx(scope.className, "mang-progress", className),
+      "data-indeterminate": indeterminate ? "true" : void 0,
+      children: /* @__PURE__ */ jsx("div", { className: "mang-progress-bar", style: { width: indeterminate ? void 0 : `${pct}%` } })
+    }
+  );
+}
+
+export {
+  EmptyState,
+  ErrorState,
+  Skeleton,
+  Spinner,
+  Progress
+};

package/dist/chunk-VRD66FIA.js

@@ -0,0 +1,77 @@
+import {
+  Switch
+} from "./chunk-PQGUWJG4.js";
+import {
+  cx,
+  useAreaStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+import {
+  tokens
+} from "./chunk-PPOYMKV3.js";
+
+// src/settings/Settings.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var STYLE_ID = "mang-ui-settings";
+var { fontSize, fontWeight, radius, font } = tokens;
+var CSS = (
+  /* css */
+  `
+.mang-set-section { display: grid; gap: 0.1rem; border: 1px solid var(--m-line); border-radius: ${radius.lg}; background: var(--m-surface); overflow: clip; }
+.mang-set-section-title { font-family: "${font.heading}", system-ui, sans-serif; font-weight: ${fontWeight.semibold}; font-size: ${fontSize.sm}; color: var(--m-text-muted); padding: 0.7rem 1rem 0.3rem; text-transform: uppercase; letter-spacing: 0.06em; }
+.mang-set-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 1rem; border-top: 1px solid var(--m-line); }
+.mang-set-row:first-of-type { border-top: none; }
+.mang-set-row-main { flex: 1; min-width: 0; }
+.mang-set-row-label { font-weight: ${fontWeight.semibold}; font-size: ${fontSize.sm}; color: var(--m-text-strong); }
+.mang-set-row-desc { font-size: ${fontSize.xs}; color: var(--m-text-muted); }
+`
+);
+function SettingsSection({
+  title,
+  theme,
+  className,
+  children
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs("div", { ...scope, className: cx(scope.className, "mang-set-section", className), children: [
+    title != null && /* @__PURE__ */ jsx("div", { className: "mang-set-section-title", children: title }),
+    children
+  ] });
+}
+function SettingsRow({ label, description, control, theme, className }) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs("div", { ...scope, className: cx(scope.className, "mang-set-row", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "mang-set-row-main", children: [
+      /* @__PURE__ */ jsx("div", { className: "mang-set-row-label", children: label }),
+      description != null && /* @__PURE__ */ jsx("div", { className: "mang-set-row-desc", children: description })
+    ] }),
+    control
+  ] });
+}
+function SettingsToggle({
+  label,
+  description,
+  checked,
+  onChange,
+  theme,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    SettingsRow,
+    {
+      theme,
+      className,
+      label,
+      description,
+      control: /* @__PURE__ */ jsx(Switch, { theme, checked, onChange: (e) => onChange(e.target.checked) })
+    }
+  );
+}
+
+export {
+  SettingsSection,
+  SettingsRow,
+  SettingsToggle
+};