@icen.ai/ui 0.1.0

package/dist/index.mjs

@@ -0,0 +1,280 @@
+// package.json
+var package_default = {
+  name: "@icen.ai/ui",
+  version: "0.1.0",
+  description: "Icen Design System \u2014 \u8BBE\u8BA1 tokens\uFF086 \u9884\u8BBE \xD7 \u660E\u6697\uFF09\u3001\u65E0\u6846\u67B6\u7EC4\u4EF6 CSS \u4E0E\u884C\u4E3A JS",
+  repository: {
+    type: "git",
+    url: "git+https://github.com/icen-ai/ui.git"
+  },
+  homepage: "https://ui.icen.ai",
+  type: "module",
+  exports: {
+    ".": "./dist/index.mjs",
+    "./behaviors/*": "./dist/behaviors/*.mjs",
+    "./tokens.css": "./dist/tokens.css",
+    "./ui.css": "./dist/ui.css",
+    "./base.css": "./dist/base.css",
+    "./tokens/*": "./dist/tokens/*",
+    "./components/*": "./dist/components/*",
+    "./registry.json": "./dist/registry.json"
+  },
+  files: [
+    "dist"
+  ],
+  license: "MIT",
+  publishConfig: {
+    access: "public"
+  },
+  scripts: {
+    build: "tsup && bun scripts/build-css.ts",
+    prepublishOnly: "bun run build"
+  },
+  devDependencies: {
+    "@types/node": "^20.14.0",
+    tsup: "^8.3.0",
+    typescript: "^5.5.0"
+  }
+};
+
+// src/behaviors/theme.ts
+var PRESETS = ["clay", "piano", "art", "vangogh", "ink", "retro"];
+var STYLES = ["modern", "retro", "terminal"];
+var STORAGE_KEY = "icen.ui.theme";
+var FALLBACK = { preset: "clay", dark: false, style: "modern" };
+function isBrowser() {
+  return typeof document !== "undefined";
+}
+function getDefaultTheme() {
+  if (!isBrowser() || typeof window.matchMedia !== "function") {
+    return { ...FALLBACK };
+  }
+  return {
+    preset: "clay",
+    dark: window.matchMedia("(prefers-color-scheme: dark)").matches,
+    style: "modern"
+  };
+}
+function isThemeState(v) {
+  if (typeof v !== "object" || v === null) return false;
+  const t = v;
+  return typeof t.preset === "string" && PRESETS.includes(t.preset) && typeof t.dark === "boolean" && typeof t.style === "string" && STYLES.includes(t.style);
+}
+function getTheme() {
+  if (!isBrowser()) return getDefaultTheme();
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (!raw) return getDefaultTheme();
+    const parsed = JSON.parse(raw);
+    if (!isThemeState(parsed)) return getDefaultTheme();
+    return { preset: parsed.preset, dark: parsed.dark, style: parsed.style };
+  } catch {
+    return getDefaultTheme();
+  }
+}
+function applyTheme(t) {
+  if (!isBrowser()) return;
+  const cls = document.documentElement.classList;
+  for (const p of PRESETS) cls.remove(p);
+  for (const s of STYLES) cls.remove(`style-${s}`);
+  cls.remove("dark");
+  cls.add(t.preset);
+  if (t.dark) cls.add("dark");
+  cls.add(`style-${t.style}`);
+}
+function setTheme(patch) {
+  const merged = { ...getTheme(), ...patch };
+  const next = {
+    preset: PRESETS.includes(merged.preset) ? merged.preset : FALLBACK.preset,
+    dark: merged.dark === true,
+    style: STYLES.includes(merged.style) ? merged.style : FALLBACK.style
+  };
+  applyTheme(next);
+  if (isBrowser()) {
+    try {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+    } catch {
+    }
+  }
+  return next;
+}
+function toggleDark() {
+  return setTheme({ dark: !getTheme().dark });
+}
+function initTheme() {
+  const t = getTheme();
+  applyTheme(t);
+  return t;
+}
+
+// src/behaviors/toast.ts
+function ensureContainer() {
+  const existing = document.body.querySelector(".toast-container");
+  if (existing) return existing;
+  const el = document.createElement("div");
+  el.className = "toast-container";
+  document.body.appendChild(el);
+  return el;
+}
+function show(message, kind = "info", ms = 2600) {
+  if (typeof document === "undefined") return;
+  const el = document.createElement("div");
+  el.className = kind === "info" ? "toast" : `toast ${kind}`;
+  el.textContent = message;
+  ensureContainer().appendChild(el);
+  let removed = false;
+  const remove = () => {
+    if (removed) return;
+    removed = true;
+    el.remove();
+  };
+  window.setTimeout(() => {
+    el.classList.add("leaving");
+    el.addEventListener("transitionend", remove, { once: true });
+    window.setTimeout(remove, 400);
+  }, ms);
+}
+var toast = Object.assign(show, {
+  ok: (message, ms) => show(message, "ok", ms),
+  err: (message, ms) => show(message, "err", ms),
+  warn: (message, ms) => show(message, "warn", ms)
+});
+
+// src/behaviors/tabs.ts
+function tabNames(container) {
+  return Array.from(container.querySelectorAll("[data-tab]")).map((t) => t.getAttribute("data-tab")).filter((n) => n !== null);
+}
+function currentHash() {
+  return window.location.hash.replace(/^#/, "");
+}
+function activate(container, name, writeHash) {
+  let matched = false;
+  container.querySelectorAll("[data-tab]").forEach((t) => {
+    const on = t.getAttribute("data-tab") === name;
+    if (on) matched = true;
+    t.classList.toggle("active", on);
+  });
+  if (!matched) return;
+  container.querySelectorAll("[data-tab-panel]").forEach((p) => {
+    p.hidden = p.getAttribute("data-tab-panel") !== name;
+  });
+  if (writeHash && typeof window !== "undefined") {
+    window.history.replaceState(null, "", `#${name}`);
+  }
+}
+function setup(container) {
+  const el = container;
+  if (el.__icenTabsInit) return;
+  el.__icenTabsInit = true;
+  const useHash = container.hasAttribute("data-tabs-hash");
+  const names = tabNames(container);
+  if (names.length === 0) return;
+  container.addEventListener("click", (ev) => {
+    const target = ev.target;
+    if (!(target instanceof Element)) return;
+    const btn = target.closest("[data-tab]");
+    if (!btn || btn.closest("[data-tabs]") !== container) return;
+    const name = btn.getAttribute("data-tab");
+    if (name) activate(container, name, useHash);
+  });
+  let initial;
+  if (useHash) {
+    const h = currentHash();
+    if (names.includes(h)) initial = h;
+  } else {
+    const n = container.querySelector("[data-tab].active")?.getAttribute("data-tab");
+    if (n && names.includes(n)) initial = n;
+  }
+  activate(container, initial ?? names[0], false);
+  if (useHash && typeof window !== "undefined") {
+    window.addEventListener("hashchange", () => {
+      const h = currentHash();
+      if (names.includes(h)) activate(container, h, false);
+    });
+  }
+}
+function initTabs(root = document) {
+  if (typeof document === "undefined") return;
+  const containers = [];
+  if (root instanceof Element && root.matches("[data-tabs]")) containers.push(root);
+  containers.push(...Array.from(root.querySelectorAll("[data-tabs]")));
+  for (const c of containers) setup(c);
+}
+
+// src/behaviors/copy.ts
+var initialized = /* @__PURE__ */ new WeakSet();
+var flashing = /* @__PURE__ */ new WeakMap();
+function legacyCopy(text) {
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  ta.setAttribute("readonly", "");
+  ta.style.position = "fixed";
+  ta.style.opacity = "0";
+  document.body.appendChild(ta);
+  ta.select();
+  let ok = false;
+  try {
+    ok = document.execCommand("copy");
+  } catch {
+    ok = false;
+  }
+  ta.remove();
+  return ok;
+}
+async function copyText(text) {
+  try {
+    if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+  }
+  return legacyCopy(text);
+}
+function flashDone(btn) {
+  const prev = flashing.get(btn);
+  if (prev) window.clearTimeout(prev.timer);
+  const original = prev ? prev.original : btn.textContent;
+  btn.textContent = "\u5DF2\u590D\u5236";
+  btn.classList.add("done");
+  const timer = window.setTimeout(() => {
+    btn.textContent = original;
+    btn.classList.remove("done");
+    flashing.delete(btn);
+  }, 1400);
+  flashing.set(btn, { original, timer });
+}
+function onClick(root, ev) {
+  const target = ev.target;
+  if (!(target instanceof Element)) return;
+  const btn = target.closest(".copy-btn[data-copy]");
+  if (!btn || !root.contains(btn)) return;
+  const text = btn.getAttribute("data-copy") ?? "";
+  void copyText(text).then((ok) => {
+    if (ok) flashDone(btn);
+  });
+}
+function initCopy(root = document) {
+  if (typeof document === "undefined") return;
+  if (initialized.has(root)) return;
+  initialized.add(root);
+  root.addEventListener("click", (ev) => onClick(root, ev));
+}
+
+// src/index.ts
+var VERSION = package_default.version;
+export {
+  PRESETS,
+  STORAGE_KEY,
+  STYLES,
+  VERSION,
+  applyTheme,
+  getDefaultTheme,
+  getTheme,
+  initCopy,
+  initTabs,
+  initTheme,
+  setTheme,
+  toast,
+  toggleDark
+};

package/dist/registry.json

@@ -0,0 +1,26 @@
+{
+  "name": "@icen.ai/ui",
+  "version": "0.1.0",
+  "tokens": [
+    "colors.css",
+    "style-profiles.css",
+    "typography.css"
+  ],
+  "base": "base.css",
+  "components": [
+    "btn",
+    "form",
+    "panel",
+    "pill",
+    "stat",
+    "table",
+    "tabs",
+    "toast"
+  ],
+  "behaviors": [
+    "tabs",
+    "theme",
+    "toast",
+    "copy"
+  ]
+}