@robert-stackflow/oneui 0.0.0-stage → 0.1.0

package/components/ThemeProvider.js

@@ -0,0 +1,80 @@
+import { jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+import { UIProvider } from "./UIProvider.js";
+import { appearanceDefaults } 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 = appearance ?? appearanceDefaults(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 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 ? rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114 > 155 ? "#141414" : "#fff" : 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
+};

package/components/Timeline.module.css

@@ -0,0 +1,202 @@
+.timeline {
+  container-type: inline-size;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.item {
+  display: grid;
+  grid-template-columns: 24px minmax(0, 1fr);
+  gap: 14px;
+  min-width: 0;
+  animation: timelineIn 140ms var(--ease);
+}
+.marker {
+  position: relative;
+  grid-column: 1;
+  grid-row: 1;
+  min-height: 22px;
+  color: var(--timeline-color, var(--accent));
+}
+.item:not(:last-child) .marker::after {
+  content: "";
+  position: absolute;
+  width: var(--separator-width);
+  background: var(--separator-color);
+  top: 23px;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.dot {
+  position: absolute;
+  top: 1px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+}
+.dot > i {
+  display: block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+}
+.dot > svg {
+  width: 16px;
+  height: 16px;
+}
+.item[data-status="success"] .marker {
+  color: var(--timeline-color, var(--success));
+}
+.item[data-status="error"] .marker {
+  color: var(--timeline-color, var(--danger));
+}
+.item[data-status="warning"] .marker {
+  color: var(--timeline-color, var(--warning));
+}
+.body {
+  grid-column: 2;
+  grid-row: 1;
+  padding-bottom: 28px;
+  min-width: 0;
+  font-size: 12px;
+  line-height: 22px;
+}
+.item:last-child .body {
+  padding-bottom: 0;
+}
+.heading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 22px;
+}
+.title {
+  font-weight: 500;
+  overflow-wrap: anywhere;
+}
+.time {
+  display: block;
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 20px;
+  margin-top: 2px;
+}
+.description {
+  margin-top: 5px;
+  color: var(--muted);
+  overflow-wrap: anywhere;
+}
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.toggle:hover {
+  background: var(--hover);
+}
+.toggle svg {
+  width: 14px;
+  height: 14px;
+}
+.details {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition:
+    grid-template-rows var(--motion-segment) var(--ease),
+    opacity var(--motion-hover);
+}
+.details[data-open="true"] {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+.clip {
+  min-height: 0;
+  overflow: hidden;
+}
+.content {
+  padding-top: 10px;
+  overflow-wrap: anywhere;
+  text-align: start;
+}
+.timeline[data-mode="alternate"] .item {
+  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
+}
+.timeline[data-mode="alternate"] .marker {
+  grid-column: 2;
+}
+.timeline[data-mode="alternate"] .item[data-side="left"] .body {
+  grid-column: 1;
+  text-align: right;
+}
+.timeline[data-mode="alternate"] .item[data-side="left"] .heading {
+  justify-content: flex-end;
+}
+.timeline[data-mode="alternate"] .item[data-side="right"] .body {
+  grid-column: 3;
+}
+.skeleton {
+  margin-top: 10px;
+}
+.empty {
+  font-size: 12px;
+  color: var(--muted);
+  padding: 24px;
+  text-align: center;
+}
+@container (max-width:600px) {
+  .timeline[data-mode="alternate"] .item {
+    grid-template-columns: 24px minmax(0, 1fr);
+  }
+  .timeline[data-mode="alternate"] .marker {
+    grid-column: 1;
+  }
+  .timeline[data-mode="alternate"]
+    .item:is([data-side="left"], [data-side="right"])
+    .body {
+    grid-column: 2;
+    text-align: start;
+  }
+  .timeline[data-mode="alternate"] .item[data-side="left"] .heading {
+    justify-content: flex-start;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .details {
+    transition: none;
+  }
+}
+
+.sr {
+  composes: visuallyHidden from "./Accessibility.module.css";
+}
+
+@keyframes timelineIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .item {
+    animation: none;
+  }
+}

package/components/Toast.d.ts

@@ -0,0 +1,6 @@
+import type { ToastMessage } from "./ToastProvider";
+export declare function Toast({ toast, position, onDismiss, }: {
+    toast: ToastMessage | null;
+    position: string;
+    onDismiss(id: number): void;
+}): import("react").ReactPortal;