@robert-stackflow/oneui 0.0.0-stage → 0.1.0

package/components/FormField.module.css

@@ -0,0 +1,85 @@
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  min-width: 0;
+}
+.label {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 5px;
+  font-size: 12px;
+  color: var(--fg);
+}
+.required {
+  color: var(--danger);
+  font-size: 12px;
+  line-height: 1;
+}
+.optional {
+  color: var(--muted);
+  font-size: 11px;
+}
+.hint,
+.error {
+  font-size: 11px;
+  line-height: 1.5;
+  margin: 0;
+}
+.hint {
+  color: var(--muted);
+}
+.error {
+  color: var(--danger);
+}
+.field[data-disabled="true"] > .labelRow > .label,
+.field:has(
+    > input:disabled,
+    > textarea:disabled,
+    > button:disabled,
+    > div > input:disabled,
+    > label > input:disabled,
+    > fieldset:disabled
+  )
+  > .labelRow
+  > .label {
+  opacity: 0.55;
+}
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+.group > legend {
+  padding: 0;
+  margin-bottom: 10px;
+}
+
+.labelRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--field-gap);
+}
+.field {
+  width: 100%;
+  gap: 8px;
+}
+.field > .labelRow:empty {
+  display: none;
+}
+.field > [role="combobox"] {
+  width: var(--field-trigger-width);
+  max-width: 100%;
+}
+.label {
+  font-size: var(--field-label-size);
+}
+.hint,
+.error {
+  font-size: var(--field-message-size);
+}

package/components/FormGroup.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+export declare function FormGroup({ label, children, disabled, required, hint, error, }: {
+    label: string;
+    children: ReactNode;
+    disabled?: boolean;
+    required?: boolean;
+    hint?: string;
+    error?: string;
+}): import("react").JSX.Element;

package/components/FormGroup.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FieldMessages } from "./FieldMessages.js";
+import { useId } from "react";
+import { FieldLabel } from "./FieldLabel.js";
+import s from "./FormField.module.css";
+function FormGroup({
+  label,
+  children,
+  disabled = false,
+  required = false,
+  hint,
+  error
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      className: s.group,
+      disabled,
+      "aria-invalid": !!error,
+      "aria-describedby": [hint ? id + "-hint" : "", error ? id + "-error" : ""].filter(Boolean).join(" ") || void 0,
+      children: [
+        /* @__PURE__ */ jsx("legend", { children: /* @__PURE__ */ jsx(FieldLabel, { as: "span", label, required }) }),
+        children,
+        /* @__PURE__ */ jsx(FieldMessages, { id, hint, error })
+      ]
+    }
+  );
+}
+export {
+  FormGroup
+};

package/components/HierarchyPicker.module.css

@@ -0,0 +1,146 @@
+.trigger {
+  width: 280px;
+  max-width: 100%;
+  min-width: 0;
+}
+.search {
+  margin: 3px 3px 8px;
+}
+.tree {
+  max-height: 292px;
+  overflow: auto;
+  padding: 2px;
+}
+.row {
+  padding-left: calc(var(--menu-item-padding-x) + var(--level, 0) * 18px);
+}
+.row:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
+}
+.expander,
+.spacer {
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 18px;
+  width: 18px;
+  height: 20px;
+}
+.expander {
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--muted);
+}
+.expander:hover {
+  background: var(--selected);
+}
+.expander svg {
+  width: 13px;
+  height: 13px;
+  transform: rotate(-90deg);
+  transition: transform var(--motion-chevron) var(--ease);
+}
+.expander[data-expanded="true"] svg {
+  transform: rotate(0deg);
+}
+.mixed {
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--accent);
+  border-radius: 4px;
+  background: var(--accent);
+  color: var(--on-accent);
+}
+.mixed svg {
+  width: 12px;
+  height: 12px;
+}
+.empty,
+.status {
+  padding: 16px 10px;
+  color: var(--muted);
+  font-size: 12px;
+}
+.error {
+  color: var(--danger);
+  padding: 6px 10px;
+  font-size: 12px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.error span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 3px 1px;
+  margin-top: 6px;
+  border-top: var(--separator-width) var(--separator-style)
+    var(--separator-color);
+  font-size: 11px;
+  color: var(--muted);
+}
+.columns {
+  display: flex;
+  min-height: 240px;
+  max-height: 300px;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.column {
+  flex: 1 0 170px;
+  min-width: 170px;
+  max-height: 292px;
+  overflow: auto;
+  padding: 2px 5px;
+  animation: columnIn 160ms var(--ease);
+}
+.column + .column {
+  border-left: var(--separator-width) var(--separator-style)
+    var(--separator-color);
+}
+.treeRow {
+  animation: rowIn 140ms var(--ease);
+}
+.treeRow[aria-disabled="true"] .expander {
+  pointer-events: none;
+}
+@keyframes rowIn {
+  from {
+    opacity: 0;
+    transform: translateY(-3px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes columnIn {
+  from {
+    opacity: 0;
+    transform: translateX(6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .column,
+  .treeRow {
+    animation: none;
+  }
+  .expander svg {
+    transition: none;
+  }
+}

package/components/IconButton.d.ts

@@ -0,0 +1,7 @@
+import type { ButtonHTMLAttributes } from "react";
+export declare function IconButton({ label, loading, children, variant, size, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
+    label: string;
+    loading?: boolean;
+    variant?: "primary" | "secondary" | "ghost" | "danger";
+    size?: "small" | "normal";
+}): import("react").JSX.Element;

package/components/IconButton.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { Spinner } from "./Spinner.js";
+import { Tooltip } from "./Tooltip.js";
+import s from "./IconButton.module.css";
+function IconButton({
+  label,
+  loading,
+  children,
+  variant = "ghost",
+  size = "normal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip, { content: label, children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ...props,
+      "aria-label": label,
+      "aria-busy": loading || void 0,
+      "data-variant": variant,
+      "data-size": size,
+      disabled: props.disabled || loading,
+      className: `${s.iconButton} ${props.className || ""}`,
+      children: /* @__PURE__ */ jsx("span", { className: s.icon, children: loading ? /* @__PURE__ */ jsx(Spinner, { decorative: true }) : children })
+    }
+  ) });
+}
+export {
+  IconButton
+};

package/components/IconButton.module.css

@@ -0,0 +1,39 @@
+.iconButton {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  border-radius: calc(var(--radius) - 3px);
+  color: var(--muted);
+  transition:
+    background var(--motion-hover),
+    color var(--motion-hover);
+}
+.iconButton:hover {
+  color: var(--fg);
+  background: var(--hover);
+}
+.icon {
+  display: contents;
+}
+.iconButton[data-size="small"] {
+  width: 30px;
+  height: 30px;
+  min-width: 30px;
+}
+.iconButton[data-variant="primary"] {
+  background: var(--accent);
+  color: var(--on-accent);
+}
+.iconButton[data-variant="secondary"] {
+  border: 1px solid var(--border);
+  background: var(--surface);
+}
+.iconButton[data-variant="danger"] {
+  color: var(--danger);
+  background: var(--danger-soft);
+}

package/components/IconPicker.d.ts

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

package/components/IconPicker.js

@@ -0,0 +1,111 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Popover } from "./Popover.js";
+import { SearchField } from "./SearchField.js";
+import { CatalogIcon } from "./CatalogIcon.js";
+import { Spinner } from "./Spinner.js";
+import { Button } from "./Button.js";
+import { SelectTrigger } from "./SelectTrigger.js";
+import {
+  VirtualPickerList
+} from "./VirtualPickerList.js";
+import { useIconCatalog, iconCategories } from "./iconCatalog.js";
+import s from "./Picker.module.css";
+function IconPicker({
+  value,
+  onChange,
+  label = "\u56FE\u6807",
+  disabled = false
+}) {
+  const anchor = useRef(null), [open, setOpen] = useState(false), [query, setQuery] = useState("");
+  const { items, error, retry } = useIconCatalog(open);
+  const groups = useMemo(() => {
+    if (!items) return [];
+    const indexed = items.map((icon) => ({
+      id: icon.name,
+      label: icon.name,
+      icon,
+      search: [
+        icon.name,
+        ...icon.aliases,
+        ...icon.categories.flatMap((c) => [c, iconCategories[c]])
+      ].join(" ").toLowerCase()
+    }));
+    return Object.entries(iconCategories).map(
+      ([id, label2]) => ({
+        id,
+        label: label2,
+        items: indexed.filter(
+          (entry) => id === "uncategorized" ? !entry.icon.categories.length : entry.icon.categories.includes(id)
+        )
+      })
+    ).filter((group) => group.items.length);
+  }, [items]);
+  const choose = useCallback(
+    (item) => {
+      onChange(item.id);
+      setOpen(false);
+      anchor.current?.focus();
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SelectTrigger,
+      {
+        ref: anchor,
+        expanded: open,
+        disabled,
+        "aria-label": label,
+        "aria-haspopup": "dialog",
+        onClick: () => setOpen((x) => !x),
+        onKeyDown: (e) => {
+          if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            setOpen(true);
+          }
+        },
+        icon: /* @__PURE__ */ jsx(CatalogIcon, { name: value }),
+        children: /* @__PURE__ */ jsx("span", { children: value || "\u9009\u62E9\u56FE\u6807" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open,
+        onClose: () => setOpen(false),
+        anchor,
+        width: 470,
+        label: label + "\u9009\u62E9\u5668",
+        children: /* @__PURE__ */ jsxs("div", { className: s.panel, children: [
+          /* @__PURE__ */ jsx(
+            SearchField,
+            {
+              label: "\u641C\u7D22\u56FE\u6807",
+              placeholder: "\u540D\u79F0\u3001\u5206\u7C7B\uFF08\u4E2D/\u82F1\u6587\uFF09",
+              value: query,
+              onChange: setQuery
+            }
+          ),
+          error ? /* @__PURE__ */ jsx(Button, { onClick: retry, children: "\u91CD\u65B0\u52A0\u8F7D" }) : !items ? /* @__PURE__ */ jsx("div", { className: s.loading, children: /* @__PURE__ */ jsx(Spinner, { label: "\u52A0\u8F7D\u56FE\u6807" }) }) : /* @__PURE__ */ jsx(
+            VirtualPickerList,
+            {
+              groups,
+              query,
+              value,
+              label: "\u56FE\u6807",
+              onChoose: choose
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: s.footer, children: /* @__PURE__ */ jsxs("span", { children: [
+            items?.length || 0,
+            " \u4E2A\u56FE\u6807"
+          ] }) })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  IconPicker
+};

package/components/Indicator.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+export type IndicatorItem<T extends string = string> = {
+    value: T;
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+};
+export type IndicatorGroup<T extends string = string> = {
+    id: string;
+    label?: string;
+    items: IndicatorItem<T>[];
+};
+export declare function Indicator<T extends string>({ value, onChange, groups, label, }: {
+    value: T;
+    onChange(value: T): void;
+    groups: IndicatorGroup<T>[];
+    label?: string;
+}): import("react").JSX.Element;

package/components/Indicator.js

@@ -0,0 +1,97 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+import s from "./Indicator.module.css";
+function Indicator({
+  value,
+  onChange,
+  groups,
+  label = "\u5206\u7C7B\u5BFC\u822A"
+}) {
+  const root = useRef(null);
+  useLayoutEffect(() => {
+    const node = root.current;
+    const measure = () => {
+      const selected = [
+        ...node.querySelectorAll("button[data-value]")
+      ].find((b) => b.dataset.value === value);
+      if (!selected) {
+        node.style.setProperty("--indicator-opacity", "0");
+        return;
+      }
+      node.style.setProperty("--indicator-opacity", "1");
+      node.style.setProperty("--indicator-y", selected.offsetTop + "px");
+      node.style.setProperty(
+        "--indicator-height",
+        selected.offsetHeight + "px"
+      );
+      if (!node.dataset.ready) {
+        node.getBoundingClientRect();
+        node.dataset.ready = "true";
+      }
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    node.querySelectorAll("button").forEach((n) => observer.observe(n));
+    return () => observer.disconnect();
+  }, [value, groups]);
+  const enabled = groups.flatMap((g) => g.items).filter((i) => !i.disabled);
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ref: root,
+      className: s.indicator,
+      "aria-label": label,
+      onKeyDown: (e) => {
+        const active = enabled.findIndex(
+          (i) => i.value === e.target.closest("button")?.dataset.value
+        );
+        let next = active;
+        if (e.key === "ArrowDown") next = (active + 1) % enabled.length;
+        else if (e.key === "ArrowUp")
+          next = (active - 1 + enabled.length) % enabled.length;
+        else if (e.key === "Home") next = 0;
+        else if (e.key === "End") next = enabled.length - 1;
+        else return;
+        if (!enabled[next]) return;
+        e.preventDefault();
+        onChange(enabled[next].value);
+        [...root.current.querySelectorAll("button")].find((b) => b.dataset.value === enabled[next].value)?.focus();
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: s.track, "data-indicator-track": true, "aria-hidden": "true" }),
+        groups.map((group) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: s.group,
+            role: "group",
+            "aria-label": group.label,
+            children: [
+              group.label && /* @__PURE__ */ jsx("div", { className: s.groupLabel, children: group.label }),
+              group.items.map((item) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "data-value": item.value,
+                  disabled: item.disabled,
+                  "aria-current": value === item.value ? "page" : void 0,
+                  tabIndex: value === item.value ? 0 : -1,
+                  onClick: () => onChange(item.value),
+                  children: [
+                    item.icon,
+                    /* @__PURE__ */ jsx("span", { children: item.label })
+                  ]
+                },
+                item.value
+              ))
+            ]
+          },
+          group.id
+        ))
+      ]
+    }
+  );
+}
+export {
+  Indicator
+};

package/components/Indicator.module.css

@@ -0,0 +1,83 @@
+.indicator {
+  position: relative;
+  isolation: isolate;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  align-self: start;
+  min-width: 0;
+}
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.groupLabel {
+  font-size: 11px;
+  color: var(--muted);
+  padding: 4px 12px 6px;
+}
+.indicator button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  text-align: left;
+  border: 0;
+  background: transparent;
+  padding: 10px 12px 10px 16px;
+  min-height: 38px;
+  border-radius: 7px;
+  color: var(--muted);
+  font-size: 12px;
+  transition: color var(--motion-hover);
+}
+.indicator button > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.indicator button:hover:not(:disabled) {
+  color: var(--fg);
+}
+.indicator button[aria-current="page"] {
+  color: var(--fg);
+}
+.indicator button:focus-visible {
+  outline-offset: -2px;
+}
+.indicator svg {
+  width: 15px;
+  height: 15px;
+}
+.track {
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: var(--indicator-height, 38px);
+  transform: translateY(var(--indicator-y, 0px));
+  opacity: var(--indicator-opacity, 0);
+  border-radius: 7px;
+  background: var(--selected);
+}
+.track::before {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 50%;
+  height: 14px;
+  width: 3px;
+  transform: translateY(-50%);
+  border-radius: 3px;
+  background: var(--accent);
+}
+.indicator[data-ready="true"] .track {
+  transition:
+    transform var(--motion-segment) var(--ease),
+    height var(--motion-segment) var(--ease),
+    opacity var(--motion-hover);
+}

package/components/Input.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+export declare function Input({ label, error, hint, leading, ...props }: ComponentPropsWithRef<"input"> & {
+    label?: string;
+    error?: string;
+    hint?: string;
+    leading?: ReactNode;
+}): import("react").JSX.Element;