@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/ThemePicker.module.css

@@ -0,0 +1,178 @@
+.choices {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+  max-width: 680px;
+  margin-bottom: 24px;
+}
+.choice {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  border-radius: 12px;
+}
+.preview {
+  display: block;
+  position: relative;
+  height: 130px;
+  padding: 15px 17px 0;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--soft);
+  transition:
+    border-color var(--motion-hover),
+    box-shadow var(--motion-hover);
+}
+.choice:hover .preview {
+  border-color: color-mix(in srgb, var(--fg) 25%, var(--surface));
+}
+.choice[aria-pressed="true"] .preview {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent);
+}
+.window,
+.second {
+  --mini-bg: #fff;
+  --mini-side: #f5f5f5;
+  --mini-line: #e7e7e7;
+  display: block;
+  height: 112px;
+  overflow: hidden;
+  background: var(--mini-bg);
+  border: 1px solid var(--mini-line);
+  border-radius: 7px;
+  box-shadow: 0 5px 15px #0000000c;
+}
+.preview[data-mode="dark"] .window,
+.second {
+  --mini-bg: #262626;
+  --mini-side: #202020;
+  --mini-line: #3b3b3b;
+}
+.bar {
+  height: 17px;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  padding-left: 7px;
+  border-bottom: 1px solid var(--mini-line);
+}
+.bar i {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--mini-line);
+}
+.body {
+  display: grid;
+  grid-template-columns: 30% 1fr;
+  height: 100%;
+}
+.rail {
+  display: grid;
+  align-content: start;
+  gap: 8px;
+  background: var(--mini-side);
+  padding: 12px 6px;
+  border-right: 1px solid var(--mini-line);
+}
+.rail b {
+  height: 4px;
+  border-radius: 3px;
+  background: var(--mini-line);
+}
+.rail b:first-child {
+  height: 10px;
+}
+.content {
+  padding: 13px 10px;
+  display: grid;
+  align-content: start;
+  gap: 7px;
+}
+.content > i {
+  height: 4px;
+  border-radius: 3px;
+  background: var(--mini-line);
+}
+.content > i:first-child {
+  width: 50%;
+  height: 6px;
+  margin-bottom: 3px;
+}
+.content > span {
+  display: flex;
+  gap: 5px;
+}
+.content b {
+  width: 50%;
+  height: 23px;
+  background: var(--mini-side);
+  border: 1px solid var(--mini-line);
+  border-radius: 3px;
+}
+.preview[data-mode="system"] .window {
+  width: 83%;
+  transform: translate(-4px, -3px);
+}
+.second {
+  position: absolute;
+  left: 30%;
+  right: 10px;
+  top: 42px;
+}
+.caption {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 11px 1px 0;
+  font-size: 12px;
+}
+.caption > svg {
+  width: 14px;
+  height: 14px;
+  color: var(--muted);
+}
+.check {
+  margin-left: auto;
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--line);
+  border-radius: 50%;
+}
+.check svg {
+  width: 11px;
+  height: 11px;
+  opacity: 0;
+}
+.check[data-selected="true"] {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--on-accent);
+}
+.check[data-selected="true"] svg {
+  opacity: 1;
+}
+@media (max-width: 650px) {
+  .choices {
+    gap: 10px;
+  }
+  .preview {
+    height: 100px;
+    padding: 12px 8px 0;
+  }
+  .window {
+    height: 90px;
+  }
+  .caption {
+    font-size: 11px;
+  }
+  .second {
+    left: 25%;
+    top: 36px;
+  }
+}

package/components/ThemeProvider.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import { type AppearancePreferences } from "./appearance";
+export type UITheme = "minimal" | "blue";
+export type ColorMode = "light" | "dark" | "system";
+/** One document-level provider; persistence belongs to the host application. */
+export declare function ThemeProvider({ theme: suppliedTheme, mode: suppliedMode, appearance, children, }: {
+    theme?: UITheme;
+    mode?: ColorMode;
+    appearance?: AppearancePreferences;
+    children: ReactNode;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;

package/components/ThemeProvider.js

@@ -0,0 +1,94 @@
+import { jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+import { UIProvider } from "./UIProvider.js";
+import {
+  appearanceDefaults,
+  normalizeAppearance
+} from "./appearance.js";
+function ThemeProvider({
+  theme: suppliedTheme = "minimal",
+  mode: suppliedMode = "system",
+  appearance,
+  children
+}) {
+  const theme = appearance?.designTheme ?? suppliedTheme, mode = appearance?.mode ?? suppliedMode;
+  const previousPalette = useRef("");
+  useLayoutEffect(() => {
+    const root = document.documentElement, media = matchMedia("(prefers-color-scheme: dark)");
+    let timer;
+    const apply = () => {
+      const dark = mode === "system" ? media.matches : mode === "dark";
+      root.dataset.uiTheme = theme;
+      root.dataset.theme = dark ? "dark" : "light";
+      const prefs = normalizeAppearance(
+        appearance ?? appearanceDefaults(theme),
+        theme
+      ), baseline = appearanceDefaults(theme);
+      const palette = [
+        theme,
+        dark,
+        prefs.accent,
+        prefs.lightBackground,
+        prefs.darkBackground,
+        prefs.lightForeground,
+        prefs.darkForeground
+      ].join("|");
+      if (previousPalette.current && previousPalette.current !== palette)
+        root.dataset.themeChanging = "true";
+      previousPalette.current = palette;
+      root.dataset.themeReady = "true";
+      root.dataset.motion = prefs.motion ? "on" : "off";
+      root.dataset.density = prefs.density;
+      root.dataset.accent = {
+        "#397c67": "green",
+        "#505865": "neutral",
+        "#a9607c": "rose"
+      }[prefs.accent] ?? "indigo";
+      delete root.dataset.radius;
+      const rgb = prefs.accent.slice(1).match(/../g).map((v) => parseInt(v, 16));
+      const customAccent = prefs.accent.toLowerCase() !== baseline.accent.toLowerCase();
+      const onAccent = rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114 > 155 ? "#141414" : "#fff";
+      const background = dark ? "darkBackground" : "lightBackground", foreground = dark ? "darkForeground" : "lightForeground";
+      const overrides = {
+        "--surface": prefs[background] !== baseline[background] ? prefs[background] : void 0,
+        "--fg": prefs[foreground] !== baseline[foreground] ? prefs[foreground] : void 0,
+        "--text": prefs[foreground] !== baseline[foreground] ? prefs[foreground] : void 0,
+        "--accent": customAccent ? prefs.accent : void 0,
+        "--on-accent": customAccent ? onAccent : void 0,
+        "--accent-soft": customAccent ? `color-mix(in srgb, ${prefs.accent} 12%, var(--surface))` : void 0,
+        "--accent-fill": customAccent ? prefs.accent : void 0,
+        "--accent-fill-hover": customAccent ? `color-mix(in srgb, ${prefs.accent} 86%, var(--surface))` : void 0,
+        "--on-accent-fill": customAccent ? onAccent : void 0,
+        "--switch-on": customAccent ? prefs.accent : void 0,
+        "--switch-on-hover": customAccent ? `color-mix(in srgb, ${prefs.accent} 88%, var(--fg))` : void 0,
+        "--switch-thumb-on": customAccent ? onAccent : void 0,
+        "--radius": prefs.radius !== baseline.radius ? prefs.radius + "px" : void 0,
+        "--radius-lg": prefs.radius !== baseline.radius ? "calc(var(--radius) + 4px)" : void 0,
+        "--ui-font": prefs.font === "system" ? void 0 : '"' + prefs.font + '", sans-serif'
+      };
+      for (const [key, value] of Object.entries(overrides)) {
+        if (value) root.style.setProperty(key, value);
+        else root.style.removeProperty(key);
+      }
+      clearTimeout(timer);
+      timer = setTimeout(() => delete root.dataset.themeChanging, 300);
+    };
+    apply();
+    media.addEventListener("change", apply);
+    return () => {
+      media.removeEventListener("change", apply);
+      clearTimeout(timer);
+    };
+  }, [theme, mode, appearance]);
+  return appearance ? /* @__PURE__ */ jsx(
+    UIProvider,
+    {
+      toastPosition: appearance.toastPosition,
+      tooltipPlacement: appearance.tooltipPlacement,
+      children
+    }
+  ) : children;
+}
+export {
+  ThemeProvider
+};

package/components/ThemeStylePicker.d.ts

@@ -0,0 +1,5 @@
+import type { UITheme } from "./ThemeProvider";
+export declare function ThemeStylePicker({ value, onChange, }: {
+    value: UITheme;
+    onChange(value: UITheme): void;
+}): import("react").JSX.Element;

package/components/ThemeStylePicker.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { Segmented } from "./Segmented.js";
+function ThemeStylePicker({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(
+    Segmented,
+    {
+      label: "\u754C\u9762\u98CE\u683C",
+      value,
+      onChange: (value2) => onChange(value2),
+      options: [
+        { value: "minimal", label: "\u6781\u7B80" },
+        { value: "blue", label: "\u84DD\u767D" }
+      ]
+    }
+  );
+}
+export {
+  ThemeStylePicker
+};

package/components/TimeColumns.d.ts

@@ -0,0 +1,6 @@
+export declare function TimeColumns({ value, onChange, seconds, active, }: {
+    value: string;
+    onChange(value: string): void;
+    seconds?: boolean;
+    active?: boolean;
+}): import("react").JSX.Element;

package/components/TimeColumns.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+import s from "./TimeColumns.module.css";
+function TimeColumns({
+  value,
+  onChange,
+  seconds = false,
+  active = true
+}) {
+  const root = useRef(null), parts = value.split(":");
+  useLayoutEffect(() => {
+    if (active)
+      root.current?.querySelectorAll('[aria-selected="true"]').forEach((node) => {
+        const list = node.parentElement;
+        list.scrollTop = node.offsetTop - list.offsetTop - list.clientHeight / 2 + node.clientHeight / 2;
+      });
+  }, [active]);
+  const choose = (part, next) => {
+    const updated = [parts[0] || "00", parts[1] || "00", parts[2] || "00"];
+    updated[part] = String(next).padStart(2, "0");
+    onChange(updated.slice(0, seconds ? 3 : 2).join(":"));
+  };
+  return /* @__PURE__ */ jsx("div", { ref: root, className: s.columns, children: ["\u5C0F\u65F6", "\u5206\u949F", ...seconds ? ["\u79D2"] : []].map((name, part) => /* @__PURE__ */ jsxs("div", { className: s.column, children: [
+    /* @__PURE__ */ jsx("span", { children: name }),
+    /* @__PURE__ */ jsx("div", { role: "listbox", "aria-label": name, children: Array.from({ length: part ? 60 : 24 }, (_, n) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "option",
+        "data-autofocus": part === 0 && n === Number(parts[part] || 0) || void 0,
+        "aria-selected": n === Number(parts[part] || 0),
+        tabIndex: n === Number(parts[part] || 0) ? 0 : -1,
+        onClick: () => choose(part, n),
+        onKeyDown: (e) => {
+          const count = part ? 60 : 24;
+          if (["ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) {
+            e.preventDefault();
+            const next = e.key === "Home" ? 0 : e.key === "End" ? count - 1 : (n + (e.key === "ArrowDown" ? 1 : count - 1)) % count;
+            choose(part, next);
+            e.currentTarget.parentElement?.children[next]?.focus();
+          } else if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+            e.preventDefault();
+            const columns = root.current.querySelectorAll('[role="listbox"]');
+            columns[(part + (e.key === "ArrowRight" ? 1 : columns.length - 1)) % columns.length].querySelector('[aria-selected="true"]')?.focus();
+          }
+        },
+        children: String(n).padStart(2, "0")
+      },
+      n
+    )) })
+  ] }, name)) });
+}
+export {
+  TimeColumns
+};

package/components/TimeColumns.module.css

@@ -0,0 +1,47 @@
+.columns {
+  display: flex;
+  gap: 8px;
+  padding: 4px;
+  min-width: 170px;
+}
+.column {
+  flex: 1;
+  min-width: 0;
+  text-align: center;
+}
+.column > span {
+  display: block;
+  padding: 6px 0 10px;
+  font-size: 11px;
+  color: var(--muted);
+}
+.column > div {
+  position: relative;
+  height: 216px;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  padding: 2px 3px;
+}
+.column button {
+  display: block;
+  width: 100%;
+  padding: 6px;
+  border: 0;
+  border-radius: 5px;
+  margin: 2px 0;
+  background: transparent;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+.column button:hover {
+  background: var(--hover);
+}
+.column button[aria-selected="true"] {
+  background: var(--selected);
+  font-weight: 550;
+}
+.column button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}

package/components/Timeline.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from "react";
+export type TimelineItem = {
+    key: string;
+    title: ReactNode;
+    description?: ReactNode;
+    time?: ReactNode;
+    dateTime?: string;
+    icon?: ReactNode;
+    status?: "default" | "success" | "warning" | "error" | "pending";
+    color?: string;
+    content?: ReactNode;
+    collapsible?: boolean;
+};
+export type TimelineProps = {
+    items: TimelineItem[];
+    label?: string;
+    mode?: "left" | "alternate";
+    reverse?: boolean;
+    loading?: boolean;
+    pending?: ReactNode;
+    emptyText?: ReactNode;
+    expandedKeys?: string[];
+    defaultExpandedKeys?: string[];
+    onExpandedChange?(keys: string[]): void;
+};
+export declare function Timeline({ items, label, mode, reverse, loading, pending, emptyText, expandedKeys, defaultExpandedKeys, onExpandedChange, }: TimelineProps): import("react").JSX.Element;

package/components/Timeline.js

@@ -0,0 +1,131 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Check, CircleAlert } from "lucide-react";
+import { DisclosureChevron } from "./DisclosureChevron.js";
+import { Spinner } from "./Spinner.js";
+import { Skeleton } from "./Skeleton.js";
+import s from "./Timeline.module.css";
+import { SurfacePortalContext, useSurfacePortal } from "./surfacePortal.js";
+function Timeline({
+  items,
+  label = "\u65F6\u95F4\u7EBF",
+  mode = "left",
+  reverse = false,
+  loading = false,
+  pending,
+  emptyText = "\u6682\u65E0\u8BB0\u5F55",
+  expandedKeys,
+  defaultExpandedKeys = [],
+  onExpandedChange
+}) {
+  const owner = useSurfacePortal();
+  const id = useId(), [localExpanded, setLocalExpanded] = useState(defaultExpandedKeys), expanded = expandedKeys ?? localExpanded, ordered = reverse ? [...items].reverse() : items;
+  const toggle = (key) => {
+    const next = expanded.includes(key) ? expanded.filter((value) => value !== key) : [...expanded, key];
+    if (expandedKeys === void 0) setLocalExpanded(next);
+    onExpandedChange?.(next);
+  };
+  const rows = ordered.map((item, index) => {
+    const open = !item.collapsible || expanded.includes(item.key), contentId = id + "-" + encodeURIComponent(item.key);
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: s.item,
+        "data-side": mode === "alternate" && index % 2 === 0 ? "left" : "right",
+        "data-status": item.status || "default",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: s.marker,
+              style: item.color ? { "--timeline-color": item.color } : void 0,
+              children: /* @__PURE__ */ jsx("span", { className: s.dot, "aria-hidden": "true", children: item.icon || (item.status === "pending" ? /* @__PURE__ */ jsx(Spinner, { size: 16, decorative: true }) : item.status === "success" ? /* @__PURE__ */ jsx(Check, {}) : item.status === "error" || item.status === "warning" ? /* @__PURE__ */ jsx(CircleAlert, {}) : /* @__PURE__ */ jsx("i", {})) })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: s.body, children: [
+            /* @__PURE__ */ jsxs("div", { className: s.heading, children: [
+              /* @__PURE__ */ jsx("span", { className: s.title, children: item.title }),
+              item.status && item.status !== "default" && /* @__PURE__ */ jsx("span", { className: s.sr, children: {
+                success: "\u5DF2\u5B8C\u6210",
+                error: "\u5931\u8D25",
+                warning: "\u8B66\u544A",
+                pending: "\u5904\u7406\u4E2D"
+              }[item.status] }),
+              item.collapsible && item.content != null && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: s.toggle,
+                  "aria-label": `${open ? "\u6536\u8D77" : "\u5C55\u5F00"} ${typeof item.title === "string" ? item.title : item.key}`,
+                  "aria-expanded": open,
+                  "aria-controls": contentId,
+                  onClick: () => toggle(item.key),
+                  children: /* @__PURE__ */ jsx(DisclosureChevron, { expanded: open })
+                }
+              )
+            ] }),
+            item.time != null && /* @__PURE__ */ jsx("time", { className: s.time, dateTime: item.dateTime, children: item.time }),
+            item.description != null && /* @__PURE__ */ jsx("div", { className: s.description, children: item.description }),
+            item.content != null && /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: contentId,
+                className: s.details,
+                "data-open": open,
+                "aria-hidden": !open || void 0,
+                inert: !open,
+                children: /* @__PURE__ */ jsx(
+                  SurfacePortalContext,
+                  {
+                    value: {
+                      host: owner?.host || null,
+                      active: owner?.active !== false && open
+                    },
+                    children: /* @__PURE__ */ jsx("div", { className: s.clip, children: /* @__PURE__ */ jsx("div", { className: s.content, children: item.content }) })
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      },
+      item.key
+    );
+  });
+  if (!items.length && !loading && !pending)
+    return /* @__PURE__ */ jsx("div", { role: "status", className: s.empty, children: emptyText });
+  return /* @__PURE__ */ jsxs(
+    "ol",
+    {
+      "aria-label": label,
+      "aria-busy": loading || void 0,
+      className: s.timeline,
+      "data-mode": mode,
+      children: [
+        !items.length && loading ? Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: s.item,
+            "data-side": "right",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: s.marker, children: /* @__PURE__ */ jsx("span", { className: s.dot, children: /* @__PURE__ */ jsx("i", {}) }) }),
+              /* @__PURE__ */ jsxs("div", { className: s.body, children: [
+                /* @__PURE__ */ jsx(Skeleton, { width: "45%" }),
+                /* @__PURE__ */ jsx("div", { className: s.skeleton, children: /* @__PURE__ */ jsx(Skeleton, { width: "25%" }) })
+              ] })
+            ]
+          },
+          index
+        )) : rows,
+        (pending || loading && !!items.length) && /* @__PURE__ */ jsxs("li", { className: s.item, "data-side": "right", children: [
+          /* @__PURE__ */ jsx("div", { className: s.marker, children: /* @__PURE__ */ jsx("span", { className: s.dot, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Spinner, { size: 16, decorative: true }) }) }),
+          /* @__PURE__ */ jsx("div", { className: s.body, role: "status", children: typeof pending === "boolean" || !pending ? "\u6B63\u5728\u52A0\u8F7D\u66F4\u591A\u2026" : pending })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Timeline
+};