@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/CharacterPicker.js

@@ -0,0 +1,200 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { ArrowLeft } from "lucide-react";
+import { Popover } from "./Popover.js";
+import { SearchField } from "./SearchField.js";
+import { SelectTrigger } from "./SelectTrigger.js";
+import { Spinner } from "./Spinner.js";
+import { Button } from "./Button.js";
+import { SkinTonePicker } from "./SkinTonePicker.js";
+import {
+  VirtualPickerList
+} from "./VirtualPickerList.js";
+import s from "./Picker.module.css";
+function CharacterPicker({
+  value,
+  onChange,
+  label,
+  groups,
+  disabled,
+  loading,
+  error,
+  onRetry,
+  emoji = false
+}) {
+  const anchor = useRef(null), [open, setOpen] = useState(false), [query, setQuery] = useState(""), [tone, setTone] = useState(0), [variants, setVariants] = useState();
+  const indexed = useMemo(
+    () => groups.map((group) => {
+      const families = /* @__PURE__ */ new Map();
+      for (const [glyph, title, detail = ""] of group.items) {
+        const id = emoji ? glyph.replace(/[\u{1F3FB}-\u{1F3FF}\uFE0F]/gu, "") : glyph;
+        let item = families.get(id);
+        if (!item) {
+          item = {
+            id,
+            label: title,
+            glyph,
+            search: "",
+            variants: emoji ? [] : void 0
+          };
+          families.set(id, item);
+        }
+        if (emoji) {
+          item.variants.push({ glyph, label: title });
+          if (!/[\u{1F3FB}-\u{1F3FF}]/u.test(glyph)) {
+            item.glyph = glyph;
+            item.label = title;
+          }
+        }
+        item.search += " " + [glyph, title, group.name, detail].join(" ").toLowerCase();
+      }
+      return {
+        id: group.name,
+        label: group.name,
+        items: [...families.values()]
+      };
+    }),
+    [groups, emoji]
+  );
+  const catalog = useMemo(
+    () => !emoji || !tone ? indexed : indexed.map((group) => ({
+      ...group,
+      items: group.items.map((item) => {
+        const variant = item.variants?.find((v) => {
+          const tones = [...v.glyph].filter(
+            (c) => /[\u{1F3FB}-\u{1F3FF}]/u.test(c)
+          );
+          return tones.length && tones.every((c) => c.codePointAt(0) === 127994 + tone);
+        });
+        return variant ? { ...item, glyph: variant.glyph, label: variant.label } : item;
+      })
+    })),
+    [indexed, tone, emoji]
+  );
+  const current = useMemo(
+    () => groups.flatMap((g) => g.items).find((i) => i[0] === value),
+    [groups, value]
+  ), count = useMemo(
+    () => groups.reduce((n, g) => n + g.items.length, 0),
+    [groups]
+  );
+  const choose = useCallback(
+    (item) => {
+      onChange(item.glyph || item.id);
+      setOpen(false);
+      setVariants(void 0);
+      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((v) => !v);
+          setVariants(void 0);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            setOpen(true);
+          }
+        },
+        icon: /* @__PURE__ */ jsx("span", { className: s.preview, children: value }),
+        children: /* @__PURE__ */ jsx("span", { children: current?.[1] || label })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open,
+        onClose: () => {
+          setOpen(false);
+          setVariants(void 0);
+        },
+        anchor,
+        width: 470,
+        label: label + "\u9009\u62E9\u5668",
+        children: /* @__PURE__ */ jsxs("div", { className: s.panel, children: [
+          /* @__PURE__ */ jsx(
+            SearchField,
+            {
+              label: "\u641C\u7D22" + label,
+              value: query,
+              onChange: (v) => {
+                setQuery(v);
+                setVariants(void 0);
+              },
+              placeholder: "\u641C\u7D22\u540D\u79F0\u3001\u5206\u7C7B\u6216\u5B57\u7B26"
+            }
+          ),
+          emoji && /* @__PURE__ */ jsx(SkinTonePicker, { value: tone, onChange: setTone }),
+          loading ? /* @__PURE__ */ jsx("div", { className: s.loading, children: /* @__PURE__ */ jsx(Spinner, { label: "\u52A0\u8F7D\u5B57\u7B26" }) }) : error ? /* @__PURE__ */ jsx(Button, { onClick: onRetry, children: "\u91CD\u65B0\u52A0\u8F7D" }) : variants ? /* @__PURE__ */ jsxs("div", { className: s.variantPanel, children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "ghost",
+                size: "small",
+                onClick: () => setVariants(void 0),
+                children: [
+                  /* @__PURE__ */ jsx(ArrowLeft, {}),
+                  "\u8FD4\u56DE"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: s.variantGrid,
+                role: "group",
+                "aria-label": "Emoji \u53D8\u4F53",
+                children: variants.variants?.map((item) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-character": item.glyph,
+                    className: s.cell,
+                    "aria-label": item.label,
+                    title: item.label,
+                    onClick: () => choose({
+                      id: item.glyph,
+                      label: item.label,
+                      glyph: item.glyph,
+                      search: ""
+                    }),
+                    children: item.glyph
+                  },
+                  item.glyph
+                ))
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(
+            VirtualPickerList,
+            {
+              groups: catalog,
+              query,
+              value,
+              label,
+              onChoose: choose,
+              onVariants: emoji ? setVariants : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: s.footer, children: /* @__PURE__ */ jsxs("span", { children: [
+            count,
+            " \u4E2A",
+            emoji ? "Emoji" : "\u7B26\u53F7"
+          ] }) })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  CharacterPicker
+};

package/components/Checkbox.d.ts

@@ -0,0 +1,12 @@
+import { type FieldOptions } from "./field";
+export declare function Checkbox({ label, checked, onChange, disabled, indeterminate, name, value, required, readOnly, id, error, hint, }: FieldOptions & {
+    label: string;
+    checked: boolean;
+    onChange(value: boolean): void;
+    disabled?: boolean;
+    name?: string;
+    value?: string;
+    required?: boolean;
+    readOnly?: boolean;
+    indeterminate?: boolean;
+}): import("react").JSX.Element;

package/components/Checkbox.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FieldLabel } from "./FieldLabel.js";
+import { useFieldControl } from "./field.js";
+import { useEffect, useRef } from "react";
+import s from "./Checkbox.module.css";
+function Checkbox({
+  label,
+  checked,
+  onChange,
+  disabled,
+  indeterminate = false,
+  name,
+  value,
+  required,
+  readOnly,
+  id,
+  error,
+  hint
+}) {
+  const field = useFieldControl({
+    id,
+    name,
+    label,
+    disabled,
+    required,
+    readOnly,
+    error,
+    hint
+  });
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: s.checkbox,
+      "data-disabled": field.disabled,
+      "data-indeterminate": indeterminate,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: field.id,
+            "aria-invalid": field.invalid,
+            "aria-describedby": field.descriptionId,
+            ref,
+            "aria-checked": indeterminate ? "mixed" : checked,
+            type: "checkbox",
+            name: field.name,
+            value,
+            required: field.required,
+            "aria-readonly": field.readOnly || void 0,
+            checked,
+            onChange: (e) => {
+              if (!field.readOnly) onChange(e.target.checked);
+            },
+            disabled: field.disabled
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: s.checkMark, "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: indeterminate ? "M4 8h8" : "m3.5 8 3 3 6-6",
+            pathLength: "1"
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(
+          FieldLabel,
+          {
+            as: "span",
+            label,
+            required: !field.wrapped && field.required
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Checkbox
+};

package/components/Checkbox.module.css

@@ -0,0 +1,95 @@
+.checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  cursor: pointer;
+  position: relative;
+  user-select: none;
+}
+.checkbox input[type="checkbox"] {
+  position: absolute;
+  left: 0;
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  opacity: 0;
+}
+.checkMark {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  border: 1px solid color-mix(in srgb, var(--fg) 25%, var(--surface));
+  border-radius: 5px;
+  background: var(--field);
+  display: grid;
+  place-items: center;
+  pointer-events: none;
+  transition:
+    background-color var(--motion-hover),
+    border-color var(--motion-hover),
+    box-shadow var(--motion-hover),
+    transform var(--motion-press);
+}
+.checkMark svg {
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.checkMark path {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  opacity: 0;
+  transition:
+    stroke-dashoffset var(--motion-panel) var(--ease),
+    opacity var(--motion-hover);
+}
+.checkbox:hover input:not(:disabled) + .checkMark {
+  border-color: var(--muted);
+}
+.checkbox:active input:not(:disabled) + .checkMark {
+  transform: scale(0.92);
+}
+.checkbox input:checked + .checkMark {
+  background: var(--accent-fill, var(--accent));
+  color: var(--on-accent-fill, var(--on-accent));
+  border-color: var(--accent-fill, var(--accent));
+}
+.checkbox input:checked + .checkMark path {
+  stroke-dashoffset: 0;
+  opacity: 1;
+}
+.checkbox input:focus-visible + .checkMark {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
+  border-color: var(--accent);
+}
+.checkbox[data-disabled="true"] {
+  cursor: not-allowed;
+}
+.checkbox input:disabled ~ span {
+  opacity: 0.4;
+}
+
+.checkbox[data-indeterminate="true"] .checkMark {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--on-accent);
+}
+.checkbox[data-indeterminate="true"] .checkMark svg {
+  opacity: 1;
+  transform: scale(1);
+}
+.checkbox[data-indeterminate="true"] .checkMark path {
+  stroke-dashoffset: 0;
+  opacity: 1;
+}
+
+.checkbox input[aria-invalid="true"] + .checkMark {
+  border-color: var(--danger);
+}
+.checkbox input[aria-invalid="true"]:focus-visible + .checkMark {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 12%, transparent);
+}

package/components/ColorField.d.ts

@@ -0,0 +1,6 @@
+import { type FieldOptions } from "./field";
+export declare function ColorField({ value, onChange, label, ...options }: FieldOptions & {
+    value: string;
+    onChange(value: string): void;
+    label: string;
+}): import("react").JSX.Element;

package/components/ColorField.js

@@ -0,0 +1,61 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { fieldTriggerProps, useFieldControl } from "./field.js";
+import { useId } from "react";
+import { Popover } from "./Popover.js";
+import { usePopover } from "./usePopover.js";
+import { ColorPicker } from "./ColorPicker.js";
+import s from "./ColorField.module.css";
+function ColorField({
+  value,
+  onChange,
+  label,
+  ...options
+}) {
+  const field = useFieldControl({ ...options, label });
+  const pop = usePopover(field.disabled || field.readOnly), id = useId();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ...fieldTriggerProps(field),
+        role: "combobox",
+        ref: pop.anchor,
+        type: "button",
+        className: s.trigger,
+        "aria-label": "\u9009\u62E9\u989C\u8272 \xB7 " + label,
+        "aria-haspopup": "dialog",
+        "aria-controls": id,
+        "aria-expanded": pop.open,
+        onClick: pop.toggle,
+        children: [
+          /* @__PURE__ */ jsx("i", { style: { background: value }, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { children: value.toUpperCase() })
+        ]
+      }
+    ),
+    field.name && /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "hidden",
+        name: field.name,
+        value,
+        disabled: field.disabled
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open: pop.open,
+        onClose: pop.close,
+        anchor: pop.anchor,
+        width: 280,
+        label: label + " \u989C\u8272\u9009\u62E9\u5668",
+        id,
+        children: /* @__PURE__ */ jsx(ColorPicker, { value, onChange, label })
+      }
+    )
+  ] });
+}
+export {
+  ColorField
+};

package/components/ColorField.module.css

@@ -0,0 +1,15 @@
+.trigger {
+  composes: surface from "./Control.module.css";
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 9px;
+  min-width: 118px;
+  font-variant-numeric: tabular-nums;
+}
+.trigger i {
+  width: 16px;
+  height: 16px;
+  border-radius: 5px;
+  border: 1px solid #80808040;
+}

package/components/ColorPicker.d.ts

@@ -0,0 +1,5 @@
+export declare function ColorPicker({ value, onChange, label, }: {
+    value: string;
+    onChange(value: string): void;
+    label: string;
+}): import("react").JSX.Element;

package/components/ColorPicker.js

@@ -0,0 +1,188 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Input } from "./Input.js";
+import { NumberInput } from "./NumberInput.js";
+import { toHSV, toHex } from "./color.js";
+import s from "./ColorPicker.module.css";
+const presets = [
+  "#ffffff",
+  "#202020",
+  "#808080",
+  "#e5484d",
+  "#e79230",
+  "#f5d90a",
+  "#46a758",
+  "#12a594",
+  "#0090ff",
+  "#6e56cf",
+  "#ab4aba",
+  "#e93d82",
+  "#4479d8",
+  "#6d61bd",
+  "#41886c",
+  "#b67838"
+];
+function ColorPicker({
+  value,
+  onChange,
+  label
+}) {
+  const [hsv, setHSV] = useState(() => toHSV(value)), [draft, setDraft] = useState(value.toUpperCase()), [invalid, setInvalid] = useState(false);
+  const last = useRef(value), pointer = useRef(void 0);
+  useEffect(() => {
+    setDraft(value.toUpperCase());
+    setInvalid(false);
+    if (value !== last.current) setHSV(toHSV(value));
+    last.current = value;
+  }, [value]);
+  const apply = (next) => {
+    setHSV(next);
+    const hex = toHex(next);
+    last.current = hex;
+    setDraft(hex.toUpperCase());
+    setInvalid(false);
+    onChange(hex);
+  };
+  const pick = (event) => {
+    const box = event.currentTarget.getBoundingClientRect();
+    apply({
+      ...hsv,
+      s: Math.max(0, Math.min(1, (event.clientX - box.left) / box.width)),
+      v: 1 - Math.max(0, Math.min(1, (event.clientY - box.top) / box.height))
+    });
+  };
+  const commit = () => {
+    const hex = draft.startsWith("#") ? draft : "#" + draft;
+    if (/^#[\da-f]{6}$/i.test(hex)) apply(toHSV(hex));
+    else setInvalid(true);
+  };
+  const channels = [1, 3, 5].map((i) => parseInt(value.slice(i, i + 2), 16));
+  return /* @__PURE__ */ jsxs("div", { className: s.panel, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: s.plane,
+        tabIndex: 0,
+        role: "slider",
+        "data-autofocus": true,
+        "aria-label": label + " \u8272\u5F69",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": Math.round(hsv.s * 100),
+        "aria-valuetext": value,
+        style: { backgroundColor: toHex({ h: hsv.h, s: 1, v: 1 }) },
+        onPointerDown: (e) => {
+          if (e.button !== 0) return;
+          e.preventDefault();
+          e.currentTarget.focus();
+          pointer.current = e.pointerId;
+          e.currentTarget.setPointerCapture(e.pointerId);
+          pick(e);
+        },
+        onPointerMove: (e) => {
+          if (pointer.current === e.pointerId) pick(e);
+        },
+        onPointerUp: (e) => {
+          if (e.currentTarget.hasPointerCapture(e.pointerId))
+            e.currentTarget.releasePointerCapture(e.pointerId);
+          pointer.current = void 0;
+        },
+        onPointerCancel: () => {
+          pointer.current = void 0;
+        },
+        onKeyDown: (e) => {
+          if (!e.key.startsWith("Arrow")) return;
+          e.preventDefault();
+          const step = e.shiftKey ? 0.1 : 0.02;
+          apply({
+            ...hsv,
+            s: Math.max(
+              0,
+              Math.min(
+                1,
+                hsv.s + (e.key === "ArrowRight" ? step : e.key === "ArrowLeft" ? -step : 0)
+              )
+            ),
+            v: Math.max(
+              0,
+              Math.min(
+                1,
+                hsv.v + (e.key === "ArrowUp" ? step : e.key === "ArrowDown" ? -step : 0)
+              )
+            )
+          });
+        },
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: s.marker,
+            style: { left: hsv.s * 100 + "%", top: (1 - hsv.v) * 100 + "%" }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: s.hue,
+        type: "range",
+        min: 0,
+        max: 359,
+        value: hsv.h,
+        "aria-label": label + " \u8272\u8C03",
+        onChange: (e) => apply({ ...hsv, h: Number(e.target.value) })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: s.presets, children: presets.map((color) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "\u9884\u8BBE\u8272 " + color,
+        "aria-pressed": value.toLowerCase() === color,
+        style: { background: color },
+        onClick: () => apply(toHSV(color))
+      },
+      color
+    )) }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        label: "HEX",
+        "aria-label": label + " HEX",
+        value: draft,
+        maxLength: 7,
+        spellCheck: false,
+        error: invalid ? "\u4F7F\u7528 #RRGGBB \u683C\u5F0F" : void 0,
+        onChange: (e) => setDraft(e.target.value),
+        onBlur: commit,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") commit();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: s.rgb, children: ["R", "G", "B"].map((channel, index) => /* @__PURE__ */ jsxs("label", { children: [
+      /* @__PURE__ */ jsx("span", { children: channel }),
+      /* @__PURE__ */ jsx(
+        NumberInput,
+        {
+          label: label + " RGB " + channel,
+          min: 0,
+          max: 255,
+          value: channels[index],
+          onChange: (next) => {
+            const values = [...channels];
+            values[index] = next;
+            apply(
+              toHSV(
+                "#" + values.map((v) => v.toString(16).padStart(2, "0")).join("")
+              )
+            );
+          }
+        }
+      )
+    ] }, channel)) })
+  ] });
+}
+export {
+  ColorPicker
+};