@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/Calendar.module.css

@@ -0,0 +1,106 @@
+.calendar {
+  width: 100%;
+  min-width: 0;
+  padding: 4px;
+}
+.calendar header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 36px;
+  margin-bottom: 6px;
+}
+.heading {
+  display: flex;
+  gap: 2px;
+  align-items: center;
+  font-size: 12px;
+  font-weight: 500;
+}
+.heading button {
+  background: transparent;
+  border: 0;
+  border-radius: 5px;
+  padding: 4px 6px;
+  font-size: 12px;
+}
+.heading button:hover {
+  background: var(--hover);
+}
+.area {
+  height: 252px;
+}
+.week {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  height: 30px;
+  align-items: center;
+  text-align: center;
+  color: var(--muted);
+  font-size: 11px;
+}
+.days {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  grid-template-rows: repeat(6, 34px);
+  gap: 3px;
+}
+.days button,
+.choices button {
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  font-size: 12px;
+}
+.days button:hover:not(:disabled),
+.choices button:hover:not(:disabled) {
+  background: var(--hover);
+}
+.days button[data-outside="true"] {
+  color: var(--muted);
+  opacity: 0.5;
+}
+.days button[aria-current="date"] {
+  box-shadow: inset 0 0 0 1px var(--line);
+}
+.days button[aria-pressed="true"],
+.choices button[aria-pressed="true"] {
+  background: var(--accent);
+  color: var(--on-accent);
+  opacity: 1;
+}
+.days button:focus-visible,
+.choices button:focus-visible {
+  outline-offset: -2px;
+}
+.choices {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-rows: repeat(4, 1fr);
+  gap: 8px;
+  height: 100%;
+  padding: 8px 0;
+}
+.days button[data-in-range="true"] {
+  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
+  color: var(--fg);
+  opacity: 1;
+}
+.days button[data-preview="true"][data-in-range="true"] {
+  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
+}
+.days button:disabled,
+.choices button:disabled {
+  color: var(--disabled);
+  opacity: 0.42;
+  cursor: not-allowed;
+}
+.days button:disabled[aria-pressed="true"] {
+  background: var(--soft);
+}
+.days button,
+.choices button {
+  transition:
+    background var(--motion-hover),
+    color var(--motion-hover);
+}

package/components/Card.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export declare function Card({ title, action, children, className, onClick, }: {
+    title?: string;
+    action?: ReactNode;
+    children: ReactNode;
+    className?: string;
+    onClick?(): void;
+}): import("react").JSX.Element;

package/components/Card.js

@@ -0,0 +1,29 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import s from "./Card.module.css";
+function Card({
+  title,
+  action,
+  children,
+  className = "",
+  onClick
+}) {
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    (title || action) && /* @__PURE__ */ jsxs("header", { className: s.header, children: [
+      /* @__PURE__ */ jsx("h2", { children: title }),
+      action
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: s.body, "data-card-body": true, children })
+  ] });
+  return onClick ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: `${s.card} ${s.interactive} ${className}`,
+      onClick,
+      children: content
+    }
+  ) : /* @__PURE__ */ jsx("section", { className: s.card + " " + className, children: content });
+}
+export {
+  Card
+};

package/components/Card.module.css

@@ -0,0 +1,47 @@
+.card {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--card-radius);
+  min-width: 0;
+  box-shadow: var(--card-shadow, none);
+}
+.interactive {
+  display: block;
+  width: 100%;
+  padding: 0;
+  color: var(--fg);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    box-shadow var(--motion-hover),
+    transform var(--motion-hover);
+}
+.interactive:hover {
+  box-shadow: var(--shadow);
+  transform: translateY(-2px);
+}
+.interactive:active {
+  transform: none;
+}
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 20px 24px 0;
+}
+.body {
+  padding: var(--card-space);
+}
+.header + .body {
+  padding-top: 20px;
+}
+@media (max-width: 600px) {
+  .header {
+    padding: 18px 18px 0;
+  }
+  .body {
+    padding: 18px;
+  }
+}

package/components/Cascader.d.ts

@@ -0,0 +1,14 @@
+import { type FieldOptions } from "./field";
+import { type HierarchyLoader, type HierarchyOption } from "./hierarchy";
+export type CascaderProps = FieldOptions & {
+    options: HierarchyOption[];
+    value: string[];
+    onChange(path: string[]): void;
+    label: string;
+    searchable?: boolean;
+    clearable?: boolean;
+    changeOnSelect?: boolean;
+    placeholder?: string;
+    loadChildren?: HierarchyLoader;
+};
+export declare function Cascader({ options, value, onChange, label, searchable, clearable, changeOnSelect, placeholder, loadChildren, ...fieldOptions }: CascaderProps): import("react").JSX.Element;

package/components/Cascader.js

@@ -0,0 +1,296 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { ChevronRight } from "lucide-react";
+import { SelectTrigger } from "./SelectTrigger.js";
+import { Popover } from "./Popover.js";
+import { MenuItem } from "./MenuItem.js";
+import { SearchField } from "./SearchField.js";
+import { Spinner } from "./Spinner.js";
+import { Button } from "./Button.js";
+import { usePopover } from "./usePopover.js";
+import { fieldTriggerProps, useFieldControl } from "./field.js";
+import { useHierarchy } from "./useHierarchy.js";
+import {
+  hierarchyMatches
+} from "./hierarchy.js";
+import s from "./HierarchyPicker.module.css";
+function Cascader({
+  options,
+  value,
+  onChange,
+  label,
+  searchable = true,
+  clearable = true,
+  changeOnSelect = false,
+  placeholder = "\u8BF7\u9009\u62E9\u8DEF\u5F84",
+  loadChildren,
+  ...fieldOptions
+}) {
+  const field = useFieldControl({ ...fieldOptions, label }), pop = usePopover(field.disabled || field.readOnly), id = useId(), root = useRef(null), pending = useRef(null), [path, setPath] = useState([]), [query, setQuery] = useState(""), [focused, setFocused] = useState({});
+  const data = useHierarchy(options, loadChildren);
+  const columns = [
+    { nodes: options }
+  ];
+  let parent;
+  for (const key of path) {
+    const entry = data.entries.get(key);
+    if (!entry || entry.parent !== parent) break;
+    const children = data.children(entry.node);
+    if (entry.branch)
+      columns.push({ nodes: children || [], parent: entry.node });
+    parent = key;
+  }
+  const matches = query.trim() ? [...data.entries.values()].filter(
+    (entry) => !entry.disabled && entry.node.selectable !== false && (!entry.branch || changeOnSelect) && hierarchyMatches(entry, query)
+  ) : [];
+  const focus = (column, key) => {
+    const node = root.current?.querySelector(
+      `[data-column="${column}"]`
+    );
+    const target = key ? [
+      ...node?.querySelectorAll('[role="option"]') || []
+    ].find((n) => n.dataset.value === key) : node?.querySelector('[role="option"]:not(:disabled)');
+    target?.focus({ preventScroll: true });
+    target?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  };
+  useLayoutEffect(() => {
+    if (pop.open && pending.current !== null) {
+      const index = pending.current;
+      if (columns[index]?.nodes.length) {
+        pending.current = null;
+        focus(index);
+      }
+    }
+  }, [path, data.entries, pop.open]);
+  const close = () => {
+    pending.current = null;
+    pop.closeAndFocus();
+  };
+  const show = () => {
+    if (field.disabled || field.readOnly) return;
+    if (pop.open) {
+      pop.close();
+      return;
+    }
+    setFocused({});
+    setPath([...value]);
+    setQuery("");
+    pending.current = null;
+    pop.show();
+  };
+  const choose = (entry, keyboard = false) => {
+    if (entry.disabled || field.disabled || field.readOnly) return;
+    pending.current = null;
+    const next = entry.path.map((node) => node.value);
+    setPath(next);
+    if (entry.branch) {
+      if (changeOnSelect && entry.node.selectable !== false) onChange(next);
+      if (keyboard) pending.current = entry.path.length;
+      void data.load(entry.node);
+    } else if (entry.node.selectable !== false) {
+      onChange(next);
+      close();
+    }
+  };
+  const stops = columns.map(({ nodes }, level) => {
+    const enabled = nodes.filter((node) => {
+      const entry = data.entries.get(node.value);
+      return entry && !entry.disabled && (entry.branch || node.selectable !== false);
+    });
+    return [focused[level], path[level], enabled[0]?.value].find(
+      (value2) => enabled.some((node) => node.value === value2)
+    );
+  });
+  const remember = (level, value2) => setFocused(
+    (old) => old[level] === value2 ? old : { ...old, [level]: value2 }
+  );
+  const summary = value.map((key) => data.entries.get(key)?.node.label || key).join(" / ");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SelectTrigger,
+      {
+        ...fieldTriggerProps(field),
+        ref: pop.anchor,
+        expanded: pop.open,
+        className: s.trigger,
+        "aria-haspopup": "dialog",
+        "aria-controls": id,
+        onClick: show,
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown" && !pop.open) {
+            event.preventDefault();
+            show();
+          }
+        },
+        children: summary || placeholder
+      }
+    ),
+    field.name && value.map((key, index) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "hidden",
+        name: field.name,
+        value: key,
+        disabled: field.disabled
+      },
+      index
+    )),
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        anchor: pop.anchor,
+        open: pop.open,
+        onClose: pop.close,
+        label,
+        id,
+        width: 580,
+        children: [
+          searchable && /* @__PURE__ */ jsx("div", { className: s.search, children: /* @__PURE__ */ jsx(
+            SearchField,
+            {
+              label: `\u641C\u7D22${label}`,
+              placeholder: "\u641C\u7D22\u540D\u79F0\u6216\u5B8C\u6574\u8DEF\u5F84",
+              value: query,
+              onChange: setQuery,
+              onKeyDown: (event) => {
+                if (event.key === "ArrowDown") {
+                  event.preventDefault();
+                  if (query.trim())
+                    root.current?.querySelector(
+                      '[role="option"]:not(:disabled)'
+                    )?.focus();
+                  else focus(0);
+                }
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: root,
+              className: s.columns,
+              onKeyDown: (event) => {
+                const target = event.target;
+                if (target.getAttribute("role") !== "option") return;
+                const column = target.closest("[data-column]"), nodes = [
+                  ...column?.querySelectorAll(
+                    '[role="option"]:not(:disabled)'
+                  ) || []
+                ], index = nodes.indexOf(target), level = Number(column?.dataset.column), entry = data.entries.get(target.dataset.value || "");
+                let next;
+                if (event.key === "ArrowDown")
+                  next = nodes[(index + 1) % nodes.length];
+                else if (event.key === "ArrowUp")
+                  next = nodes[(index - 1 + nodes.length) % nodes.length];
+                else if (event.key === "Home") next = nodes[0];
+                else if (event.key === "End") next = nodes.at(-1);
+                else if (!query.trim() && event.key === "ArrowRight" && entry?.branch)
+                  choose(entry, true);
+                else if (!query.trim() && event.key === "ArrowLeft" && level > 0) {
+                  pending.current = null;
+                  focus(level - 1, path[level - 1]);
+                } else return;
+                event.preventDefault();
+                event.stopPropagation();
+                next?.focus();
+              },
+              children: query.trim() ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "listbox",
+                  "aria-label": `${label}\u641C\u7D22\u7ED3\u679C`,
+                  "data-column": "0",
+                  className: s.column,
+                  children: matches.length ? matches.map((entry) => /* @__PURE__ */ jsx(
+                    MenuItem,
+                    {
+                      role: "option",
+                      "data-value": entry.node.value,
+                      label: entry.path.map((n) => n.label).join(" / "),
+                      tabIndex: entry.node.value === (matches.some((item) => item.node.value === focused[0]) ? focused[0] : matches[0]?.node.value) ? 0 : -1,
+                      onFocus: () => remember(0, entry.node.value),
+                      icon: entry.node.icon,
+                      "aria-selected": entry.node.value === value.at(-1),
+                      selected: entry.node.value === value.at(-1),
+                      selection: "check",
+                      onClick: () => choose(entry)
+                    },
+                    entry.node.value
+                  )) : /* @__PURE__ */ jsx("div", { role: "status", className: s.empty, children: "\u6CA1\u6709\u5339\u914D\u9009\u9879" })
+                },
+                "search"
+              ) : columns.map(({ nodes, parent: parent2 }, level) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "listbox",
+                  "aria-label": `${label}\u7B2C ${level + 1} \u7EA7`,
+                  "data-column": level,
+                  "aria-busy": !!parent2 && data.loading.has(parent2.value),
+                  className: s.column,
+                  children: [
+                    nodes.map((node) => {
+                      const entry = data.entries.get(node.value);
+                      if (!entry) return null;
+                      return /* @__PURE__ */ jsx(
+                        MenuItem,
+                        {
+                          role: "option",
+                          "data-value": node.value,
+                          label: node.label,
+                          icon: node.icon,
+                          disabled: entry.disabled || !entry.branch && node.selectable === false,
+                          "aria-selected": path[level] === node.value,
+                          selected: path[level] === node.value,
+                          trailing: data.loading.has(node.value) ? /* @__PURE__ */ jsx(Spinner, { size: 14, decorative: true }) : entry.branch ? /* @__PURE__ */ jsx(ChevronRight, {}) : void 0,
+                          selection: entry.branch ? void 0 : "check",
+                          tabIndex: node.value === stops[level] ? 0 : -1,
+                          onFocus: () => remember(level, node.value),
+                          onClick: () => choose(entry)
+                        },
+                        node.value
+                      );
+                    }),
+                    parent2 && data.loading.has(parent2.value) && /* @__PURE__ */ jsx("div", { role: "status", className: s.status, children: "\u6B63\u5728\u52A0\u8F7D\u2026" }),
+                    parent2 && data.error(parent2) && /* @__PURE__ */ jsxs("div", { role: "alert", className: s.error, children: [
+                      /* @__PURE__ */ jsx("span", { children: data.error(parent2) }),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          size: "small",
+                          variant: "ghost",
+                          onClick: () => void data.load(parent2),
+                          children: "\u91CD\u8BD5"
+                        }
+                      )
+                    ] }),
+                    !nodes.length && (!parent2 || !data.loading.has(parent2.value) && !data.error(parent2)) && /* @__PURE__ */ jsx("div", { role: "status", className: s.empty, children: "\u6CA1\u6709\u53EF\u7528\u9009\u9879" })
+                  ]
+                },
+                parent2?.value || "root"
+              ))
+            }
+          ),
+          clearable && /* @__PURE__ */ jsxs("div", { className: s.footer, children: [
+            /* @__PURE__ */ jsx("span", {}),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                variant: "ghost",
+                disabled: !value.length,
+                onClick: () => {
+                  onChange([]);
+                  setPath([]);
+                },
+                children: "\u6E05\u7A7A"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Cascader
+};

package/components/CatalogIcon.d.ts

@@ -0,0 +1,3 @@
+export declare function CatalogIcon({ name }: {
+    name: string;
+}): import("react").JSX.Element;

package/components/CatalogIcon.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { Icon, Shapes } from "lucide-react";
+import { useIconCatalog } from "./iconCatalog.js";
+function CatalogIcon({ name }) {
+  const { items } = useIconCatalog();
+  const icon = items?.find((x) => x.name === name || x.aliases.includes(name));
+  return icon ? /* @__PURE__ */ jsx(Icon, { icon }) : /* @__PURE__ */ jsx(Shapes, {});
+}
+export {
+  CatalogIcon
+};

package/components/CharacterPicker.d.ts

@@ -0,0 +1,15 @@
+export type CharacterGroup = {
+    name: string;
+    items: [string, string, string?][];
+};
+export declare function CharacterPicker({ value, onChange, label, groups, disabled, loading, error, onRetry, emoji, }: {
+    value: string;
+    onChange(value: string): void;
+    label: string;
+    groups: CharacterGroup[];
+    disabled?: boolean;
+    loading?: boolean;
+    error?: boolean;
+    onRetry?(): void;
+    emoji?: boolean;
+}): import("react").JSX.Element;