@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/FormErrorSummary.module.css

@@ -0,0 +1,27 @@
+.summary {
+  padding: 12px 14px;
+  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--surface));
+  border-radius: var(--radius);
+  background: color-mix(in srgb, var(--danger) 5%, var(--surface));
+  color: var(--danger);
+  font-size: 12px;
+  line-height: 1.6;
+}
+.summary strong {
+  font-weight: 550;
+}
+.summary ul {
+  margin: 5px 0 0;
+  padding-left: 18px;
+}
+.summary button {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  padding: 2px 0;
+  font-size: 12px;
+}
+.summary button:hover {
+  text-decoration: underline;
+}

package/components/FormField.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+import type { FieldOptions } from "./field";
+export declare function FormField({ children, pending, requiredIndicator, optional, onBlur, ...options }: FieldOptions & {
+    children: ReactNode;
+    pending?: boolean;
+    requiredIndicator?: "asterisk" | "text" | "none";
+    optional?: boolean;
+    onBlur?(): void;
+}): import("react").JSX.Element;

package/components/FormField.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useUIConfig } from "./UIProvider.js";
+import { FieldMessages } from "./FieldMessages.js";
+import { Spinner } from "./Spinner.js";
+import { useRef } from "react";
+import { FieldContext, useFieldControl } from "./field.js";
+import { FieldLabel } from "./FieldLabel.js";
+import s from "./FormField.module.css";
+function FormField({
+  children,
+  pending = false,
+  requiredIndicator,
+  optional = false,
+  onBlur,
+  ...options
+}) {
+  const config = useUIConfig();
+  const field = useFieldControl(options), root = useRef(null);
+  return /* @__PURE__ */ jsx(FieldContext, { value: field, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: root,
+      className: s.field,
+      "data-invalid": !!field.error,
+      "data-disabled": field.disabled || void 0,
+      onBlur: (event) => {
+        const next = event.relatedTarget, node = root.current;
+        if (next && node.contains(next)) return;
+        const portals = [...node.querySelectorAll("[aria-controls]")].map(
+          (control) => document.getElementById(
+            control.getAttribute("aria-controls") || ""
+          )
+        );
+        if (next && portals.some((portal) => portal?.contains(next))) return;
+        onBlur?.();
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: s.labelRow, children: [
+          /* @__PURE__ */ jsx(
+            FieldLabel,
+            {
+              label: field.label,
+              htmlFor: field.id,
+              required: field.required,
+              indicator: requiredIndicator ?? config.requiredIndicator,
+              optional
+            }
+          ),
+          pending && /* @__PURE__ */ jsx(Spinner, { size: 13, label: "\u6B63\u5728\u6821\u9A8C" + field.label })
+        ] }),
+        children,
+        /* @__PURE__ */ jsx(FieldMessages, { id: field.id, hint: field.hint, error: field.error })
+      ]
+    }
+  ) });
+}
+export {
+  FormField
+};

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,181 @@
+.trigger {
+  width: 280px;
+  max-width: 100%;
+  min-width: 0;
+}
+.search {
+  margin: 3px 3px 8px;
+}
+.tree {
+  composes: stack from "./OptionList.module.css";
+  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);
+}
+.footerActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.columns {
+  display: flex;
+  min-height: 240px;
+  max-height: 300px;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.column {
+  composes: stack from "./OptionList.module.css";
+  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 {
+  position: relative;
+  animation: rowIn 140ms var(--ease);
+}
+.categoryRow {
+  --tree-elbow-gap: 6px;
+  --tree-stem-inset: 12px;
+  min-height: 42px;
+}
+.categoryRow[data-branch="true"] [data-menu-label] {
+  font-weight: 600;
+}
+.categoryRow [data-menu-icon] {
+  width: 26px;
+  height: 26px;
+  flex-basis: 26px;
+  border-radius: 7px;
+  background: var(--field);
+  border: 1px solid var(--line);
+  color: var(--muted);
+}
+.categoryRow[data-branch="true"] [data-menu-icon] {
+  background: var(--selected);
+  color: var(--accent);
+}
+.categoryRow [data-menu-trailing] > span {
+  border-radius: 999px;
+}
+.categoryRow .mixed {
+  border-radius: 999px;
+}
+.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,42 @@
+.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-fill, var(--accent));
+  color: var(--on-accent-fill, var(--on-accent));
+}
+.iconButton[data-variant="primary"]:hover:not(:disabled) {
+  background: var(--accent-fill-hover, var(--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;