@robert-stackflow/oneui 0.0.0-stage → 0.2.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,13 @@
+import { type FieldOptions } from "./field";
+import type { SelectOption } from "./types";
+export type ComboboxProps = 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;
+    mode?: "panel" | "input";
+};
+export declare function Combobox({ value, onChange, options, loadOptions, onCreate, label, placeholder, mode, ...props }: ComboboxProps): import("react").JSX.Element;

package/components/Combobox.js

@@ -0,0 +1,338 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { Plus } from "lucide-react";
+import {
+  FieldContext,
+  fieldInputProps,
+  fieldTriggerProps,
+  useFieldControl
+} from "./field.js";
+import { SelectTrigger } from "./SelectTrigger.js";
+import { Popover } from "./Popover.js";
+import { SearchField } from "./SearchField.js";
+import { Input } from "./Input.js";
+import { MenuItem } from "./MenuItem.js";
+import { Spinner } from "./Spinner.js";
+import { Button } from "./Button.js";
+import { DisclosureChevron } from "./DisclosureChevron.js";
+import s from "./Combobox.module.css";
+function Combobox({
+  value,
+  onChange,
+  options = [],
+  loadOptions,
+  onCreate,
+  label = "\u641C\u7D22\u9009\u62E9",
+  placeholder = "\u8BF7\u9009\u62E9",
+  mode = "panel",
+  ...props
+}) {
+  const field = useFieldControl({ ...props, label }), anchor = useRef(null), list = useRef(null), id = useId();
+  const [open, setOpen] = useState(false), [query, setQuery] = useState(""), [editing, setEditing] = useState(false), [remote, setRemote] = useState([]), [loading, setLoading] = useState(false), [error, setError] = useState(""), [failure, setFailure] = useState("load"), [active, setActive] = useState(-1), [created, setCreated] = useState(), [chosen, setChosen] = useState(), [creating, setCreating] = useState(false), [retry, setRetry] = useState(0);
+  const generation = useRef(0), restoring = useRef(false), loader = useRef(loadOptions);
+  loader.current = loadOptions;
+  const inline = mode === "input", async = !!loadOptions;
+  const close = useCallback(() => {
+    generation.current++;
+    setOpen(false);
+    setEditing(false);
+    setCreating(false);
+    setLoading(false);
+    restoring.current = true;
+    queueMicrotask(() => {
+      restoring.current = false;
+    });
+  }, []);
+  useEffect(
+    () => () => {
+      generation.current++;
+    },
+    []
+  );
+  useEffect(() => {
+    if (!open || !async) return;
+    const controller = new AbortController(), revision = generation.current;
+    setLoading(true);
+    setError("");
+    const timer = setTimeout(() => {
+      Promise.resolve().then(() => loader.current(query, controller.signal)).then((items) => {
+        if (!controller.signal.aborted && revision === generation.current) {
+          setRemote(items);
+          setLoading(false);
+          setActive(inline ? -1 : items.findIndex((item) => !item.disabled));
+        }
+      }).catch(() => {
+        if (!controller.signal.aborted && revision === generation.current) {
+          setFailure("load");
+          setError("\u9009\u9879\u52A0\u8F7D\u5931\u8D25");
+          setLoading(false);
+        }
+      });
+    }, 180);
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [open, query, async, retry, inline]);
+  useEffect(() => {
+    if (field.disabled || field.readOnly) close();
+  }, [field.disabled, field.readOnly, close]);
+  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
+  ), first = filtered.findIndex((item) => !item.disabled);
+  const activeIndex = active >= 0 && filtered[active] && !filtered[active].disabled ? active : inline ? -1 : first;
+  const choose = (item) => {
+    if (item.disabled || field.disabled || field.readOnly) return;
+    setChosen(item);
+    onChange(item.value);
+    close();
+    anchor.current?.focus();
+  };
+  const show = () => {
+    if (field.disabled || field.readOnly || creating) return;
+    generation.current++;
+    setLoading(async);
+    setQuery("");
+    setEditing(false);
+    setActive(inline ? -1 : 0);
+    setError("");
+    setOpen(true);
+  };
+  const search = (text) => {
+    if (field.disabled || field.readOnly || creating) return;
+    generation.current++;
+    setLoading(async);
+    setQuery(text);
+    setEditing(true);
+    setActive(inline ? -1 : 0);
+    setError("");
+    setOpen(true);
+  };
+  useEffect(() => {
+    list.current?.querySelector('[data-active="true"]')?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex, query, loading]);
+  const canCreate = !!onCreate && !!query.trim() && !filtered.some(
+    (item) => item.label.toLowerCase() === query.trim().toLowerCase()
+  );
+  const create = async () => {
+    if (!onCreate || creating || loading || !canCreate) return;
+    const revision = generation.current, text = query.trim();
+    setCreating(true);
+    setError("");
+    try {
+      const result = await onCreate(text);
+      if (revision !== generation.current) return;
+      const item = { value: result || text, label: text };
+      setCreated(item);
+      choose(item);
+    } catch {
+      if (revision === generation.current) {
+        setFailure("create");
+        setError("\u521B\u5EFA\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5\u3002");
+      }
+    } finally {
+      if (revision === generation.current) setCreating(false);
+    }
+  };
+  const navigate = (event) => {
+    if (event.nativeEvent.isComposing || event.keyCode === 229 || field.readOnly || field.disabled)
+      return;
+    if (event.key === "Escape" && open) {
+      event.preventDefault();
+      event.stopPropagation();
+      close();
+      anchor.current?.focus();
+      return;
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!open) {
+        show();
+        return;
+      }
+      const direction = event.key === "ArrowDown" ? 1 : -1, start = activeIndex < 0 ? direction === 1 ? -1 : 0 : activeIndex;
+      for (let step = 1; step <= filtered.length; step++) {
+        const next = (start + direction * step + filtered.length * 2) % filtered.length;
+        if (!filtered[next].disabled) {
+          setActive(next);
+          break;
+        }
+      }
+    } else if (event.key === "Enter" && open) {
+      event.preventDefault();
+      if (!loading && !creating && !error) {
+        const item = filtered[activeIndex < 0 ? first : activeIndex];
+        if (item) choose(item);
+        else void create();
+      }
+    }
+  };
+  const activeId = open && !loading && !error && activeIndex >= 0 ? id + "-" + activeIndex : void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    inline ? /* @__PURE__ */ jsx(FieldContext, { value: { ...field, name: void 0 }, children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...fieldInputProps(field),
+        name: void 0,
+        ref: anchor,
+        role: "combobox",
+        "aria-label": field.label,
+        "aria-expanded": open,
+        "aria-busy": loading || creating,
+        "aria-controls": id + "-list",
+        "aria-autocomplete": "list",
+        "aria-activedescendant": activeId,
+        autoComplete: "off",
+        disabled: field.disabled || creating,
+        className: s.inputTrigger,
+        value: open && editing ? query : selected?.label || value,
+        placeholder,
+        leading: selected?.icon,
+        trailing: loading || creating ? /* @__PURE__ */ jsx(Spinner, { size: 16, decorative: true }) : /* @__PURE__ */ jsx(DisclosureChevron, { expanded: open }),
+        onChange: (event) => search(event.target.value),
+        onFocus: () => {
+          if (!restoring.current && !open) show();
+        },
+        onClick: () => {
+          if (!open) show();
+        },
+        onKeyDown: navigate
+      }
+    ) }) : /* @__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: navigate,
+        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,
+        autoFocus: !inline,
+        matchAnchorWidth: inline,
+        children: /* @__PURE__ */ jsxs("div", { className: s.panel, children: [
+          !inline && /* @__PURE__ */ jsx(
+            SearchField,
+            {
+              label: "\u641C\u7D22" + field.label,
+              placeholder: "\u641C\u7D22\u9009\u9879\u2026",
+              value: query,
+              onChange: search,
+              loading,
+              disabled: creating,
+              "aria-controls": id + "-list",
+              "aria-activedescendant": activeId,
+              onKeyDown: navigate
+            }
+          ),
+          /* @__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, role: "alert", children: [
+                /* @__PURE__ */ jsx("span", { children: error }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "small",
+                    variant: "ghost",
+                    onClick: () => {
+                      setError("");
+                      if (failure === "create") void create();
+                      else {
+                        generation.current++;
+                        setLoading(true);
+                        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((option) => !!option.icon),
+                    selected: value === item.value,
+                    active: activeIndex === 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,
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: () => void create()
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  Combobox
+};

package/components/Combobox.module.css

@@ -0,0 +1,24 @@
+.panel {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+.inputTrigger {
+  min-width: 0;
+  width: 100%;
+}
+.list {
+  composes: stack from "./OptionList.module.css";
+  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;
+}

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;