@mangtre/ui 0.1.0

package/dist/chunk-7WHNIEDV.js

@@ -0,0 +1,120 @@
+import {
+  cx,
+  useKitStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+import {
+  tokens
+} from "./chunk-PPOYMKV3.js";
+
+// src/primitives/Stack.tsx
+import { createElement } from "react";
+import { jsx } from "react/jsx-runtime";
+var gapToRem = (g) => g == null ? void 0 : tokens.space[g];
+function Box({ as = "div", className, style, children }) {
+  return createElement(as, { className, style }, children);
+}
+function Stack({
+  as = "div",
+  direction = "column",
+  gap = 4,
+  align,
+  justify,
+  wrap,
+  className,
+  style,
+  children
+}) {
+  const flexStyle = {
+    display: "flex",
+    flexDirection: direction,
+    gap: gapToRem(gap),
+    alignItems: align,
+    justifyContent: justify,
+    flexWrap: wrap ? "wrap" : void 0,
+    ...style
+  };
+  return createElement(as, { className, style: flexStyle }, children);
+}
+function HStack(props) {
+  return /* @__PURE__ */ jsx(Stack, { ...props, direction: "row", align: props.align ?? "center" });
+}
+function VStack(props) {
+  return /* @__PURE__ */ jsx(Stack, { ...props, direction: "column" });
+}
+function Spacer({ size }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: size == null ? { flex: 1 } : { flex: "none", width: gapToRem(size), height: gapToRem(size) }
+    }
+  );
+}
+
+// src/primitives/Text.tsx
+import { createElement as createElement2 } from "react";
+function Text({
+  as = "p",
+  size = "base",
+  tone = "default",
+  weight,
+  theme,
+  className,
+  style,
+  children
+}) {
+  useKitStyles();
+  const scope = useScope(theme);
+  const css = {
+    fontSize: tokens.fontSize[size],
+    fontWeight: weight ? tokens.fontWeight[weight] : void 0,
+    ...style
+  };
+  return createElement2(
+    as,
+    {
+      ...scope,
+      className: cx(scope.className, "mang-text", className),
+      "data-tone": tone,
+      style: css
+    },
+    children
+  );
+}
+var DEFAULT_SIZE = {
+  1: "3xl",
+  2: "2xl",
+  3: "xl",
+  4: "lg",
+  5: "base",
+  6: "sm"
+};
+function Heading({ level = 2, size, theme, className, style, children }) {
+  useKitStyles();
+  const scope = useScope(theme);
+  const css = { fontSize: tokens.fontSize[size ?? DEFAULT_SIZE[level]], ...style };
+  return createElement2(
+    `h${level}`,
+    { ...scope, className: cx(scope.className, "mang-heading", className), style: css },
+    children
+  );
+}
+
+// src/primitives/Divider.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Divider({ theme, className, style }) {
+  useKitStyles();
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsx2("hr", { ...scope, className: cx(scope.className, "mang-divider", className), style });
+}
+
+export {
+  Box,
+  Stack,
+  HStack,
+  VStack,
+  Spacer,
+  Text,
+  Heading,
+  Divider
+};

package/dist/chunk-ASZKHSMG.js

@@ -0,0 +1,82 @@
+import {
+  VndText
+} from "./chunk-IX3DYETF.js";
+import {
+  Badge
+} from "./chunk-FZRXVRC7.js";
+import {
+  cx,
+  useAreaStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+import {
+  tokens
+} from "./chunk-PPOYMKV3.js";
+
+// src/monetization/Monetization.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var STYLE_ID = "mang-ui-monetization";
+var { fontSize, fontWeight, radius, font } = tokens;
+var CSS = (
+  /* css */
+  `
+.mang-soon { display: grid; gap: 0.4rem; padding: 1.1rem 1.2rem; border: 1px dashed var(--m-line-strong); border-radius: ${radius.lg}; background: var(--m-sunken); color: var(--m-text-muted); }
+.mang-soon-title { font-family: "${font.heading}", system-ui, sans-serif; font-weight: ${fontWeight.bold}; color: var(--m-text-strong); font-size: ${fontSize.base}; }
+.mang-ledger { width: 100%; border-collapse: collapse; font-size: ${fontSize.sm}; opacity: 0.85; }
+.mang-ledger th, .mang-ledger td { text-align: left; padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--m-line); }
+.mang-ledger th { color: var(--m-text-muted); font-size: ${fontSize.xs}; text-transform: uppercase; letter-spacing: 0.06em; }
+.mang-ledger td { color: var(--m-text); font-variant-numeric: tabular-nums; }
+`
+);
+function ComingSoonMonetizationCard({
+  title,
+  children,
+  locale = "vi",
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs("div", { ...scope, className: cx(scope.className, "mang-soon", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "mang-soon-title", children: title ?? (locale === "vi" ? "Ki\u1EBFm ti\u1EC1n \u2014 s\u1EAFp c\xF3" : "Monetization \u2014 coming later") }),
+    /* @__PURE__ */ jsx("span", { children: children ?? (locale === "vi" ? "Chia s\u1EBB doanh thu cho ng\u01B0\u1EDDi t\u1EA1o s\u1EBD m\u1EDF sau khi c\xF3 t\xEDn hi\u1EC7u creator." : "Creator rev-share opens once there's a creator signal.") })
+  ] });
+}
+function PayoutStatusBadge({
+  status,
+  locale = "vi",
+  theme,
+  className
+}) {
+  const meta = {
+    none: { tone: "neutral", vi: "Ch\u01B0a c\xF3", en: "None" },
+    pending: { tone: "warning", vi: "\u0110ang ch\u1EDD", en: "Pending" },
+    paid: { tone: "success", vi: "\u0110\xE3 chi", en: "Paid" }
+  }[status];
+  return /* @__PURE__ */ jsx(Badge, { tone: meta.tone, theme, className, children: locale === "vi" ? meta.vi : meta.en });
+}
+function EarningsLedgerTable({
+  rows,
+  locale = "vi",
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs("table", { ...scope, className: cx(scope.className, "mang-ledger", className), children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { children: locale === "vi" ? "K\u1EF3" : "Period" }),
+      /* @__PURE__ */ jsx("th", { children: locale === "vi" ? "S\u1ED1 ti\u1EC1n" : "Amount" })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((r) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { children: r.period }),
+      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(VndText, { amount: r.amount, theme }) })
+    ] }, r.period)) })
+  ] });
+}
+
+export {
+  ComingSoonMonetizationCard,
+  PayoutStatusBadge,
+  EarningsLedgerTable
+};

package/dist/chunk-BCBN2EGH.js

@@ -0,0 +1,216 @@
+import {
+  Button
+} from "./chunk-YN5O6YL6.js";
+import {
+  cx,
+  mountScopedStyle,
+  useAreaStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+import {
+  tokens
+} from "./chunk-PPOYMKV3.js";
+
+// src/PowerPicker.tsx
+import { useEffect, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STYLE_ID = "mang-powerpicker";
+var LABEL = { vi: "N\u0103ng l\u1EF1c AI", en: "AI power" };
+var { color, semantic, font, fontSize, fontWeight, radius, motion } = tokens;
+var head = `"${font.heading}", system-ui, sans-serif`;
+var DARK_VARS = (
+  /* css */
+  `
+  --pp-zone-bg: linear-gradient(180deg, color-mix(in oklab, ${color.mangGreen} 22%, ${color.dark}), ${color.dark} 78%);
+  --pp-border: color-mix(in oklab, ${color.mangGreen} 50%, ${color.dark});
+  --pp-title: ${color.shoot};
+  --pp-chip-bg: color-mix(in oklab, ${color.shoot} 12%, ${color.dark});
+  --pp-chip-border: color-mix(in oklab, ${color.shoot} 32%, ${color.dark});
+  --pp-chip-text: ${color.paper};
+  --pp-glow: color-mix(in oklab, ${color.mangGreen} 60%, transparent);
+  --pp-sheen: color-mix(in oklab, #fff 26%, transparent);
+`
+);
+var CSS = (
+  /* css */
+  `
+.mang-pp {
+  /* light theme (default) */
+  --pp-zone-bg: linear-gradient(180deg, color-mix(in oklab, ${color.shoot} 26%, ${semantic.surface.base}), ${semantic.surface.base} 72%);
+  --pp-border: color-mix(in oklab, ${color.mangGreen} 30%, ${semantic.line.default});
+  --pp-title: ${color.bamboo};
+  --pp-chip-bg: ${semantic.surface.base};
+  --pp-chip-border: ${semantic.line.strong};
+  --pp-chip-text: ${semantic.content.strong};
+  --pp-glow: color-mix(in oklab, ${color.mangGreen} 42%, transparent);
+  --pp-sheen: color-mix(in oklab, #fff 72%, transparent);
+
+  position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 0.7rem; margin: 0; padding: 1rem 1.05rem 1.1rem; min-width: 0; border: 1.5px solid var(--pp-border); border-radius: ${radius.lg}; background: var(--pp-zone-bg);
+}
+.mang-pp[data-theme="dark"] {${DARK_VARS}}
+@media (prefers-color-scheme: dark) { .mang-pp[data-theme="auto"] {${DARK_VARS}} }
+
+/* drifting aurora glow */
+.mang-pp::before { content: ""; position: absolute; z-index: -1; top: -70%; left: -25%; width: 75%; height: 240%; background: radial-gradient(closest-side, var(--pp-glow), transparent); filter: blur(26px); opacity: 0.55; animation: mang-pp-drift 9s ${motion.ease.standard} infinite alternate; }
+/* periodic light sheen sweeping across */
+.mang-pp::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(115deg, transparent 35%, var(--pp-sheen) 49%, transparent 63%); transform: translateX(-130%); animation: mang-pp-sheen 5s ease-in-out infinite; }
+@keyframes mang-pp-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(55%, 14%) scale(1.15); } }
+@keyframes mang-pp-sheen { 0% { transform: translateX(-130%); } 60%, 100% { transform: translateX(130%); } }
+
+.mang-pp-legend { padding: 0; display: inline-flex; align-items: center; gap: 0.45rem; font-family: ${head}; font-weight: ${fontWeight.bold}; font-size: ${fontSize.base}; letter-spacing: 0.01em; color: var(--pp-title); }
+.mang-pp-spark { display: inline-block; font-size: 1.05rem; animation: mang-pp-twinkle 1.9s ${motion.ease.standard} infinite; }
+@keyframes mang-pp-twinkle { 0%, 100% { opacity: 1; transform: scale(1) rotate(0); } 50% { opacity: 0.5; transform: scale(1.3) rotate(14deg); } }
+
+.mang-pp-list { display: flex; flex-wrap: wrap; gap: 0.55rem; }
+.mang-pp-chip { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.62rem 1.05rem; border-radius: ${radius.full}; border: 2px solid var(--pp-chip-border); background: var(--pp-chip-bg); color: var(--pp-chip-text); font-family: ${head}; font-weight: ${fontWeight.bold}; font-size: ${fontSize.sm}; line-height: 1; transition: transform ${motion.duration.fast} ${motion.ease.standard}, background ${motion.duration.fast} ${motion.ease.standard}, border-color ${motion.duration.fast} ${motion.ease.standard}, box-shadow ${motion.duration.fast} ${motion.ease.standard}; }
+.mang-pp-chip:hover:not(:disabled) { border-color: ${color.mangGreen}; transform: translateY(-1px); }
+.mang-pp-chip:active:not(:disabled) { transform: translateY(0) scale(0.98); }
+.mang-pp-chip[aria-pressed="true"] { background: ${color.mangGreen}; border-color: ${color.mangGreen}; color: ${semantic.content.onAccent}; box-shadow: 0 10px 22px -10px ${color.mangGreen}; }
+.mang-pp-chip:focus-visible { outline: 3px solid color-mix(in oklab, ${color.mangGreen} 45%, transparent); outline-offset: 2px; }
+.mang-pp-chip:disabled { opacity: 0.55; cursor: not-allowed; }
+.mang-pp-icon { font-size: 1.05rem; line-height: 1; }
+@media (prefers-reduced-motion: reduce) {
+  .mang-pp::before, .mang-pp-spark { animation: none; }
+  .mang-pp::after { display: none; }
+  .mang-pp-chip { transition: none; }
+}
+`
+);
+function PowerPicker({
+  powers,
+  value,
+  onChange,
+  locale,
+  disabled,
+  theme = "light"
+}) {
+  useEffect(() => mountScopedStyle(STYLE_ID, CSS), []);
+  const titleId = useId();
+  if (powers.length < 2) return null;
+  return (
+    // A <div role="group"> + aria-labelledby (not <fieldset>/<legend>): the native legend renders
+    // ON the top border and notches the zone's rounded outline. This keeps the clean zone + label.
+    // biome-ignore lint/a11y/useSemanticElements: fieldset's legend breaks the zone border outline
+    /* @__PURE__ */ jsxs("div", { className: "mang-pp", "data-theme": theme, role: "group", "aria-labelledby": titleId, children: [
+      /* @__PURE__ */ jsxs("span", { className: "mang-pp-legend", id: titleId, children: [
+        /* @__PURE__ */ jsx("span", { className: "mang-pp-spark", "aria-hidden": "true", children: "\u2728" }),
+        LABEL[locale]
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mang-pp-list", children: powers.map((p) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": value === p.capability,
+          className: "mang-pp-chip",
+          onClick: () => onChange(p.capability),
+          disabled,
+          title: p.description[locale],
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "mang-pp-icon", "aria-hidden": "true", children: p.icon }),
+            p.label[locale]
+          ]
+        },
+        p.capability
+      )) })
+    ] })
+  );
+}
+
+// src/ai/Cards.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var STYLE_ID2 = "mang-ui-ai-cards";
+var { fontSize: fontSize2, fontWeight: fontWeight2, radius: radius2, font: font2 } = tokens;
+var CSS2 = (
+  /* css */
+  `
+.mang-aicard { display: grid; gap: 0.6rem; padding: 1rem 1.1rem; border-radius: ${radius2.lg}; border: 1px solid var(--m-line); background: var(--m-surface); color: var(--m-text); }
+.mang-aicard-head { display: flex; align-items: center; gap: 0.5rem; }
+.mang-aicard-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none; background: var(--m-text-muted); }
+.mang-aicard-dot[data-ready="true"] { background: var(--m-success); box-shadow: 0 0 0 3px var(--m-success-soft); }
+.mang-aicard-title { font-family: "${font2.heading}", system-ui, sans-serif; font-weight: ${fontWeight2.bold}; font-size: ${fontSize2.base}; color: var(--m-text-strong); }
+.mang-aicard-note { font-size: ${fontSize2.sm}; color: var(--m-text-muted); }
+.mang-aicard-models { display: grid; gap: 0.4rem; }
+.mang-aicard-model { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0.7rem; border: 1.5px solid var(--m-line); border-radius: ${radius2.md}; background: var(--m-sunken); }
+.mang-aicard-model-name { font-weight: ${fontWeight2.semibold}; font-size: ${fontSize2.sm}; }
+.mang-aicard-model-meta { font-size: ${fontSize2.xs}; color: var(--m-text-muted); }
+.mang-aicard-privacy { display: inline-flex; align-items: center; gap: 0.35rem; font-size: ${fontSize2.xs}; color: var(--m-success); font-weight: ${fontWeight2.semibold}; }
+`
+);
+var T = {
+  ready: { vi: "AI \u0111\xE3 s\u1EB5n s\xE0ng", en: "AI is ready" },
+  notReady: { vi: "AI ch\u01B0a s\u1EB5n s\xE0ng", en: "AI not ready" },
+  privacy: {
+    vi: "Ch\u1EA1y tr\xEAn m\xE1y b\u1EA1n \u2014 d\u1EEF li\u1EC7u kh\xF4ng r\u1EDDi thi\u1EBFt b\u1ECB",
+    en: "Runs on your device \u2014 nothing leaves it"
+  },
+  install: { vi: "C\xE0i \u0111\u1EB7t", en: "Install" },
+  download: { vi: "T\u1EA3i", en: "Download" }
+};
+function AiStatusCard({
+  ready,
+  detail,
+  locale = "vi",
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID2, CSS2);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs2("div", { ...scope, className: cx(scope.className, "mang-aicard", className), children: [
+    /* @__PURE__ */ jsxs2("div", { className: "mang-aicard-head", children: [
+      /* @__PURE__ */ jsx2(
+        "span",
+        {
+          className: "mang-aicard-dot",
+          "data-ready": ready ? "true" : void 0,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx2("span", { className: "mang-aicard-title", children: ready ? T.ready[locale] : T.notReady[locale] })
+    ] }),
+    detail != null && /* @__PURE__ */ jsx2("span", { className: "mang-aicard-note", children: detail }),
+    /* @__PURE__ */ jsxs2("span", { className: "mang-aicard-privacy", children: [
+      "\u{1F512} ",
+      T.privacy[locale]
+    ] })
+  ] });
+}
+function AiSetupCard({
+  title,
+  description,
+  models = [],
+  onInstall,
+  onPull,
+  progress,
+  locale = "vi",
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID2, CSS2);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs2("div", { ...scope, className: cx(scope.className, "mang-aicard", className), children: [
+    /* @__PURE__ */ jsx2("div", { className: "mang-aicard-head", children: /* @__PURE__ */ jsx2("span", { className: "mang-aicard-title", children: title ?? (locale === "vi" ? "B\u1EADt AI c\u1EE5c b\u1ED9" : "Set up local AI") }) }),
+    description != null && /* @__PURE__ */ jsx2("span", { className: "mang-aicard-note", children: description }),
+    onInstall && /* @__PURE__ */ jsx2(Button, { variant: "secondary", size: "sm", theme, onClick: onInstall, children: T.install[locale] }),
+    models.length > 0 && /* @__PURE__ */ jsx2("div", { className: "mang-aicard-models", children: models.map((m) => /* @__PURE__ */ jsxs2("div", { className: "mang-aicard-model", children: [
+      /* @__PURE__ */ jsxs2("span", { children: [
+        /* @__PURE__ */ jsx2("span", { className: "mang-aicard-model-name", children: m.name }),
+        m.meta && /* @__PURE__ */ jsxs2("span", { className: "mang-aicard-model-meta", children: [
+          " \xB7 ",
+          m.meta
+        ] })
+      ] }),
+      onPull && /* @__PURE__ */ jsx2(Button, { size: "sm", theme, onClick: () => onPull(m.id), children: T.download[locale] })
+    ] }, m.id)) }),
+    progress,
+    /* @__PURE__ */ jsxs2("span", { className: "mang-aicard-privacy", children: [
+      "\u{1F512} ",
+      T.privacy[locale]
+    ] })
+  ] });
+}
+
+export {
+  PowerPicker,
+  AiStatusCard,
+  AiSetupCard
+};