@robert-stackflow/oneui 0.0.0-stage → 0.1.0

package/components/ColorPicker.module.css

@@ -0,0 +1,90 @@
+.panel {
+  padding: 9px;
+}
+.plane {
+  position: relative;
+  height: 150px;
+  border-radius: 10px;
+  background-image: linear-gradient(to top, #000, transparent),
+    linear-gradient(to right, #fff, transparent);
+  touch-action: none;
+  cursor: crosshair;
+}
+.marker {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border: 2px solid white;
+  border-radius: 50%;
+  translate: -50% -50%;
+  box-shadow: 0 0 0 1px #0006;
+  pointer-events: none;
+}
+.hue {
+  display: block;
+  width: 100%;
+  height: 12px;
+  margin: 18px 0;
+  appearance: none;
+  border: 0;
+  padding: 0;
+  border-radius: 999px;
+  background: linear-gradient(
+    to right,
+    #f00,
+    #ff0,
+    #0f0,
+    #0ff,
+    #00f,
+    #f0f,
+    #f00
+  );
+  cursor: pointer;
+}
+.hue::-webkit-slider-thumb {
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border: 2px solid white;
+  border-radius: 50%;
+  background: var(--surface);
+  box-shadow: 0 1px 5px #0005;
+}
+.presets {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 7px;
+  margin-bottom: 14px;
+}
+.presets button {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 1px solid #80808040;
+  border-radius: 50%;
+  transition: scale var(--motion-hover);
+}
+.presets button:hover {
+  scale: 1.12;
+}
+.presets button[aria-pressed="true"] {
+  outline: 2px solid var(--fg);
+  outline-offset: 2px;
+}
+.rgb {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 10px;
+}
+.rgb label {
+  display: grid;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--muted);
+  min-width: 0;
+}
+.rgb label > div {
+  width: 100%;
+  grid-template-columns: 20px minmax(0, 1fr) 20px;
+}

package/components/Combobox.d.ts

@@ -0,0 +1,11 @@
+import { type FieldOptions } from "./field";
+import type { SelectOption } from "./types";
+export declare function Combobox({ value, onChange, options, loadOptions, onCreate, label, placeholder, ...props }: FieldOptions & {
+    value: string;
+    onChange(value: string): void;
+    options?: SelectOption[];
+    loadOptions?(query: string, signal: AbortSignal): Promise<SelectOption[]>;
+    onCreate?(label: string): string | void | Promise<string | void>;
+    label?: string;
+    placeholder?: string;
+}): import("react").JSX.Element;

package/components/Combobox.js

@@ -0,0 +1,252 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { Plus } from "lucide-react";
+import { fieldTriggerProps, useFieldControl } from "./field.js";
+import { SelectTrigger } from "./SelectTrigger.js";
+import { Popover } from "./Popover.js";
+import { SearchField } from "./SearchField.js";
+import { MenuItem } from "./MenuItem.js";
+import { Spinner } from "./Spinner.js";
+import s from "./Combobox.module.css";
+function Combobox({
+  value,
+  onChange,
+  options = [],
+  loadOptions,
+  onCreate,
+  label = "\u641C\u7D22\u9009\u62E9",
+  placeholder = "\u8BF7\u9009\u62E9",
+  ...props
+}) {
+  const field = useFieldControl({ ...props, label }), anchor = useRef(null), list = useRef(null), id = useId(), [open, setOpen] = useState(false), [query, setQuery] = useState(""), [remote, setRemote] = useState([]), [loading, setLoading] = useState(false), [error, setError] = useState(""), [active, setActive] = useState(0), [created, setCreated] = useState(), [chosen, setChosen] = useState(), [creating, setCreating] = useState(false), [retry, setRetry] = useState(0);
+  const generation = useRef(0);
+  const close = useCallback(() => {
+    generation.current++;
+    setOpen(false);
+    setCreating(false);
+  }, []);
+  useEffect(
+    () => () => {
+      generation.current++;
+    },
+    []
+  );
+  const loader = useRef(loadOptions);
+  loader.current = loadOptions;
+  const async = !!loadOptions;
+  useEffect(() => {
+    if (!open || !async) return;
+    const controller = new AbortController();
+    setLoading(true);
+    setError("");
+    const timer = setTimeout(() => {
+      Promise.resolve().then(() => loader.current(query, controller.signal)).then((items) => {
+        if (!controller.signal.aborted) {
+          setRemote(items);
+          setLoading(false);
+          setActive(
+            Math.max(
+              0,
+              items.findIndex((item) => !item.disabled)
+            )
+          );
+        }
+      }).catch(() => {
+        if (!controller.signal.aborted) {
+          setError("\u9009\u9879\u52A0\u8F7D\u5931\u8D25");
+          setLoading(false);
+        }
+      });
+    }, 180);
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [open, query, async, retry]);
+  useEffect(() => {
+    if (field.disabled || field.readOnly) close();
+  }, [field.disabled, field.readOnly]);
+  const terms = query.trim().toLowerCase().split(/\s+/).filter(Boolean), filtered = async ? remote : options.filter(
+    (item) => terms.every(
+      (term) => (item.label + " " + (item.description || "") + " " + item.value).toLowerCase().includes(term)
+    )
+  );
+  const selected = [...options, ...remote, created, chosen].find(
+    (item) => item?.value === value
+  );
+  const choose = (item) => {
+    if (item.disabled || field.disabled || field.readOnly) return;
+    setChosen(item);
+    onChange(item.value);
+    close();
+    anchor.current?.focus();
+  };
+  const show = () => {
+    setQuery("");
+    setActive(0);
+    setError("");
+    setOpen(true);
+  };
+  useEffect(() => {
+    list.current?.querySelector('[data-active="true"]')?.scrollIntoView({ block: "nearest" });
+  }, [active, query]);
+  const canCreate = !!onCreate && !!query.trim() && !filtered.some(
+    (item) => item.label.toLowerCase() === query.trim().toLowerCase()
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SelectTrigger,
+      {
+        ...fieldTriggerProps(field),
+        ref: anchor,
+        expanded: open,
+        disabled: field.disabled || creating,
+        "aria-controls": id,
+        "aria-haspopup": "dialog",
+        icon: creating ? /* @__PURE__ */ jsx(Spinner, { size: 16, decorative: true }) : selected?.icon,
+        onClick: () => {
+          if (!field.readOnly) open ? close() : show();
+        },
+        onKeyDown: (event) => {
+          if (!field.readOnly && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+            event.preventDefault();
+            show();
+          }
+        },
+        children: /* @__PURE__ */ jsx("span", { children: selected?.label || value || placeholder })
+      }
+    ),
+    field.name && /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "hidden",
+        name: field.name,
+        value,
+        disabled: field.disabled
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        id,
+        open,
+        onClose: close,
+        anchor,
+        label: field.label + "\u9009\u9879",
+        width: 300,
+        children: /* @__PURE__ */ jsxs("div", { className: s.panel, children: [
+          /* @__PURE__ */ jsx(
+            SearchField,
+            {
+              label: "\u641C\u7D22" + field.label,
+              placeholder: "\u641C\u7D22\u9009\u9879\u2026",
+              value: query,
+              onChange: (value2) => {
+                setQuery(value2);
+                setActive(0);
+              },
+              loading,
+              "aria-controls": id + "-list",
+              "aria-activedescendant": filtered[active] ? id + "-" + active : void 0,
+              onKeyDown: (event) => {
+                if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                  event.preventDefault();
+                  const direction = event.key === "ArrowDown" ? 1 : -1;
+                  for (let step = 1; step <= filtered.length; step++) {
+                    const next = (active + direction * step + filtered.length * 2) % filtered.length;
+                    if (!filtered[next].disabled) {
+                      setActive(next);
+                      break;
+                    }
+                  }
+                } else if (event.key === "Enter") {
+                  event.preventDefault();
+                  if (!loading && filtered[active]) choose(filtered[active]);
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: list,
+              id: id + "-list",
+              role: "listbox",
+              "aria-label": field.label,
+              className: s.list,
+              "aria-busy": loading,
+              children: error ? /* @__PURE__ */ jsxs("div", { className: s.empty, children: [
+                /* @__PURE__ */ jsx("span", { children: error }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setRetry((value2) => value2 + 1),
+                    children: "\u91CD\u8BD5"
+                  }
+                )
+              ] }) : loading ? /* @__PURE__ */ jsx("div", { className: s.empty, children: /* @__PURE__ */ jsx(Spinner, { label: "\u52A0\u8F7D\u9009\u9879" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                filtered.map((item, index) => /* @__PURE__ */ jsx(
+                  MenuItem,
+                  {
+                    as: "div",
+                    id: id + "-" + index,
+                    role: "option",
+                    label: item.label,
+                    icon: item.icon,
+                    description: item.description,
+                    shortcut: item.shortcut,
+                    reserveIcon: filtered.some((item2) => !!item2.icon),
+                    selected: value === item.value,
+                    active: active === index,
+                    disabled: item.disabled,
+                    "aria-selected": value === item.value,
+                    selection: "check",
+                    onMouseDown: (event) => event.preventDefault(),
+                    onPointerMove: () => {
+                      if (!item.disabled) setActive(index);
+                    },
+                    onClick: () => choose(item)
+                  },
+                  item.value
+                )),
+                !filtered.length && !canCreate && /* @__PURE__ */ jsx("p", { className: s.empty, children: "\u6CA1\u6709\u5339\u914D\u7684\u9009\u9879" })
+              ] })
+            }
+          ),
+          canCreate && !loading && /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              label: "\u521B\u5EFA\u201C" + query.trim() + "\u201D",
+              icon: /* @__PURE__ */ jsx(Plus, {}),
+              disabled: creating,
+              onClick: async () => {
+                const revision = generation.current;
+                setCreating(true);
+                setError("");
+                try {
+                  const result = await onCreate(query.trim());
+                  if (revision !== generation.current) return;
+                  const item = {
+                    value: result || query.trim(),
+                    label: query.trim()
+                  };
+                  setCreated(item);
+                  choose(item);
+                } catch {
+                  if (revision === generation.current)
+                    setError("\u521B\u5EFA\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5\u3002");
+                } finally {
+                  if (revision === generation.current) setCreating(false);
+                }
+              }
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  Combobox
+};

package/components/Combobox.module.css

@@ -0,0 +1,26 @@
+.panel {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+.list {
+  max-height: 240px;
+  min-height: 40px;
+  overflow: auto;
+}
+.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 22px 10px;
+  color: var(--muted);
+  font-size: 12px;
+}
+.empty button {
+  border: 0;
+  background: var(--hover);
+  border-radius: 5px;
+  padding: 4px 8px;
+  color: var(--fg);
+}

package/components/CommandPalette.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from "react";
+export type CommandPaletteItem = {
+    value: string;
+    label: string;
+    description?: string;
+    group?: string;
+    icon?: ReactNode;
+    shortcut?: string;
+    keywords?: string[];
+    disabled?: boolean;
+    onSelect?(signal: AbortSignal): void | Promise<void>;
+};
+export type CommandPaletteProps = {
+    open: boolean;
+    onClose(): void;
+    onOpen?(): void;
+    items: CommandPaletteItem[];
+    onSelect?(item: CommandPaletteItem, signal: AbortSignal): void | Promise<void>;
+    title?: string;
+    placeholder?: string;
+    hotkey?: boolean;
+    closeOnSelect?: boolean;
+    emptyText?: string;
+};
+export declare function CommandPalette({ open, onClose, onOpen, items, onSelect, title, placeholder, hotkey, closeOnSelect, emptyText, }: CommandPaletteProps): import("react").JSX.Element;

package/components/CommandPalette.js

@@ -0,0 +1,269 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Dialog } from "./Dialog.js";
+import { SearchField } from "./SearchField.js";
+import { MenuItem } from "./MenuItem.js";
+import { Spinner } from "./Spinner.js";
+import { Alert } from "./Alert.js";
+import { useSurfacePortal } from "./surfacePortal.js";
+import s from "./CommandPalette.module.css";
+const normalize = (value) => value.normalize("NFKD").replace(/\p{Diacritic}/gu, "").toLocaleLowerCase();
+function CommandPalette({
+  open,
+  onClose,
+  onOpen,
+  items,
+  onSelect,
+  title = "\u547D\u4EE4\u9762\u677F",
+  placeholder = "\u641C\u7D22\u547D\u4EE4\u2026",
+  hotkey = true,
+  closeOnSelect = true,
+  emptyText = "\u6CA1\u6709\u5339\u914D\u7684\u547D\u4EE4"
+}) {
+  const [query, setQuery] = useState(""), [active, setActive] = useState(null), [busy, setBusy] = useState(), [error, setError] = useState("");
+  const root = useRef(null), revision = useRef(0), controller = useRef(null), id = useId(), owner = useSurfacePortal();
+  const results = useMemo(() => {
+    const tokens = normalize(query).trim().split(/\s+/).filter(Boolean);
+    return items.filter((item) => {
+      const text = normalize(
+        [
+          item.label,
+          item.description,
+          item.group,
+          item.shortcut,
+          ...item.keywords || []
+        ].filter(Boolean).join(" ")
+      );
+      return tokens.every((token) => text.includes(token));
+    });
+  }, [items, query]);
+  const actionable = (item) => !item.disabled && !!(item.onSelect || onSelect);
+  const grouped = /* @__PURE__ */ new Map();
+  for (const item of results) {
+    const group = item.group || "";
+    if (!grouped.has(group)) grouped.set(group, []);
+    grouped.get(group).push(item);
+  }
+  const enabled = [...grouped.values()].flat().filter(actionable), selected = enabled.find((item) => item.value === active) || enabled[0];
+  const reserveIcon = results.some((item) => !!item.icon);
+  const optionId = (value) => `${id}-${encodeURIComponent(value)}`;
+  const cancel = () => {
+    revision.current++;
+    controller.current?.abort();
+    controller.current = null;
+  };
+  const close = () => {
+    cancel();
+    onClose();
+  };
+  useLayoutEffect(() => {
+    cancel();
+    if (open) {
+      setQuery("");
+      setActive(null);
+      setBusy(void 0);
+      setError("");
+    }
+  }, [open]);
+  useEffect(
+    () => () => {
+      revision.current++;
+      controller.current?.abort();
+    },
+    []
+  );
+  const focus = () => root.current?.querySelector("input")?.focus({ preventScroll: true });
+  useLayoutEffect(() => {
+    if (open && !busy) focus();
+  }, [open, busy]);
+  useLayoutEffect(() => {
+    if (open && selected)
+      document.getElementById(optionId(selected.value))?.scrollIntoView({ block: "nearest" });
+  }, [open, selected?.value]);
+  const latest = useRef({
+    open,
+    onOpen,
+    close,
+    available: owner?.active !== false
+  });
+  latest.current = { open, onOpen, close, available: owner?.active !== false };
+  useEffect(() => {
+    if (!hotkey || !onOpen) return;
+    const key = (event) => {
+      if (event.defaultPrevented || event.repeat || event.isComposing || event.altKey || event.shiftKey || !(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== "k" || !latest.current.available)
+        return;
+      const target = event.target;
+      if (!latest.current.open && target?.closest('input,textarea,select,[contenteditable="true"]'))
+        return;
+      event.preventDefault();
+      if (latest.current.open) latest.current.close();
+      else latest.current.onOpen?.();
+    };
+    window.addEventListener("keydown", key);
+    return () => window.removeEventListener("keydown", key);
+  }, [hotkey, !!onOpen]);
+  const execute = async (item) => {
+    if (controller.current || busy || !actionable(item)) return;
+    cancel();
+    const token = revision.current, abort = new AbortController();
+    controller.current = abort;
+    setBusy(item.value);
+    setError("");
+    setActive(item.value);
+    try {
+      if (item.onSelect) await item.onSelect(abort.signal);
+      else await onSelect?.(item, abort.signal);
+      if (token !== revision.current || abort.signal.aborted) return;
+      setBusy(void 0);
+      if (closeOnSelect) close();
+    } catch {
+      if (token !== revision.current || abort.signal.aborted) return;
+      setBusy(void 0);
+      setError("\u64CD\u4F5C\u672A\u5B8C\u6210\uFF0C\u8BF7\u91CD\u8BD5\u3002");
+    } finally {
+      if (controller.current === abort) controller.current = null;
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onClose: close,
+      title,
+      wide: true,
+      footer: /* @__PURE__ */ jsxs("div", { className: s.footer, children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx("kbd", { children: "\u2191 \u2193" }),
+          " \u9009\u62E9 ",
+          /* @__PURE__ */ jsx("kbd", { children: "\u21B5" }),
+          " \u6267\u884C ",
+          /* @__PURE__ */ jsx("kbd", { children: "Esc" }),
+          " \u5173\u95ED"
+        ] }),
+        /* @__PURE__ */ jsxs("span", { role: "status", "aria-live": "polite", children: [
+          results.length,
+          " \u9879"
+        ] })
+      ] }),
+      children: /* @__PURE__ */ jsxs("div", { ref: root, className: s.palette, children: [
+        /* @__PURE__ */ jsx(
+          SearchField,
+          {
+            label: "\u641C\u7D22\u547D\u4EE4",
+            placeholder,
+            value: query,
+            onChange: (value) => {
+              setQuery(value);
+              setActive(null);
+              setError("");
+            },
+            disabled: !!busy,
+            loading: !!busy,
+            role: "combobox",
+            "aria-autocomplete": "list",
+            "aria-expanded": open,
+            "aria-controls": id,
+            "aria-activedescendant": selected ? optionId(selected.value) : void 0,
+            onKeyDown: (event) => {
+              if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+              if (event.key === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                close();
+                return;
+              }
+              if (busy) return;
+              if (event.key === "Enter") {
+                event.preventDefault();
+                if (selected) void execute(selected);
+                return;
+              }
+              if (!enabled.length) return;
+              const index = enabled.findIndex(
+                (item) => item.value === selected?.value
+              );
+              const next = event.key === "Home" ? 0 : event.key === "End" ? enabled.length - 1 : event.key === "ArrowDown" ? (index + 1) % enabled.length : event.key === "ArrowUp" ? (index - 1 + enabled.length) % enabled.length : -1;
+              if (next >= 0) {
+                event.preventDefault();
+                setActive(enabled[next].value);
+              }
+            }
+          }
+        ),
+        error && /* @__PURE__ */ jsx(
+          Alert,
+          {
+            tone: "danger",
+            title: "\u547D\u4EE4\u6267\u884C\u5931\u8D25",
+            onClose: () => {
+              setError("");
+              focus();
+            },
+            children: error
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: s.results,
+            role: "listbox",
+            "aria-label": "\u547D\u4EE4\u7ED3\u679C",
+            id,
+            "aria-busy": !!busy,
+            children: [
+              [...grouped].map(([group, commands]) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "group",
+                  "aria-label": group || "\u547D\u4EE4",
+                  className: s.group,
+                  children: [
+                    group && /* @__PURE__ */ jsx("div", { className: s.groupLabel, "aria-hidden": "true", children: group }),
+                    commands.map((item) => /* @__PURE__ */ jsx(
+                      MenuItem,
+                      {
+                        id: optionId(item.value),
+                        as: "div",
+                        role: "option",
+                        tabIndex: -1,
+                        label: item.label,
+                        description: item.description,
+                        icon: item.icon,
+                        reserveIcon,
+                        shortcut: item.shortcut,
+                        active: selected?.value === item.value,
+                        "aria-selected": selected?.value === item.value,
+                        disabled: !!busy || !actionable(item),
+                        trailing: busy === item.value ? /* @__PURE__ */ jsx(Spinner, { size: 14, decorative: true }) : void 0,
+                        onMouseDown: (event) => event.preventDefault(),
+                        onPointerMove: () => {
+                          if (!busy && actionable(item)) setActive(item.value);
+                        },
+                        onClick: () => {
+                          void execute(item);
+                        }
+                      },
+                      item.value
+                    ))
+                  ]
+                },
+                group
+              )),
+              !results.length && /* @__PURE__ */ jsx("div", { className: s.empty, children: emptyText })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  CommandPalette
+};