@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/MenuItem.module.css

@@ -0,0 +1,172 @@
+.item {
+  display: flex;
+  align-items: center;
+  gap: var(--menu-item-gap);
+  width: 100%;
+  min-width: 0;
+  min-height: var(--menu-item-height);
+  margin: 0;
+  padding: max(
+      4px,
+      calc((var(--menu-item-height) - var(--menu-item-line-height)) / 2)
+    )
+    var(--menu-item-padding-x);
+  border: 0;
+  border-radius: calc(var(--radius) - 4px);
+  background: transparent;
+  color: var(--fg);
+  text-align: left;
+  font-family: var(--ui-font);
+  font-size: var(--menu-item-font-size);
+  font-weight: 400;
+  line-height: var(--menu-item-line-height);
+  cursor: pointer;
+  outline: none;
+  transition:
+    background-color var(--motion-hover),
+    color var(--motion-hover);
+}
+.item + .item {
+  margin-top: var(--menu-item-spacing);
+}
+@media (pointer: coarse) {
+  .item {
+    min-height: 44px;
+  }
+}
+.item[data-selected="true"] {
+  background: var(--selected);
+}
+.item:where(:not(:disabled):not([aria-disabled="true"])):is(
+    :hover,
+    :focus-visible,
+    [data-active="true"],
+    [aria-expanded="true"]
+  ) {
+  background: var(--hover);
+}
+.item[data-selected="true"]:where(
+    :not(:disabled):not([aria-disabled="true"])
+  ):is(:hover, :focus-visible, [data-active="true"]) {
+  background: color-mix(in srgb, var(--selected) 75%, var(--hover));
+}
+.item:where(:not(:disabled):not([aria-disabled="true"])):active {
+  background: var(--selected);
+}
+.item:disabled,
+.item[aria-disabled="true"] {
+  opacity: var(--menu-disabled-opacity);
+  cursor: not-allowed;
+}
+.item[data-tone="danger"] {
+  color: var(--danger);
+}
+.leading,
+.trailing {
+  display: grid;
+  place-items: center;
+  flex: 0 0 var(--menu-item-icon-size);
+  width: var(--menu-item-icon-size);
+  height: var(--menu-item-icon-size);
+}
+.leading {
+  color: inherit;
+  opacity: 0.8;
+}
+.leading svg,
+.trailing > svg {
+  width: var(--menu-item-icon-size);
+  height: var(--menu-item-icon-size);
+  stroke-width: 1.65;
+}
+.copy {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.description {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 14px;
+  color: var(--muted);
+}
+.shortcut {
+  flex-shrink: 0;
+  margin-left: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  font-family: var(--ui-font);
+  font-size: var(--menu-shortcut-font-size);
+  font-weight: 400;
+  line-height: var(--menu-shortcut-line-height);
+  font-variant-numeric: tabular-nums;
+  color: var(--muted);
+  white-space: nowrap;
+  text-align: right;
+}
+.shortcut ~ .trailing:empty {
+  display: none;
+}
+.check {
+  color: var(--accent);
+}
+.checkbox,
+.radio {
+  display: grid;
+  place-items: center;
+  width: var(--menu-item-icon-size);
+  height: var(--menu-item-icon-size);
+  border: 1px solid color-mix(in srgb, var(--fg) 25%, var(--surface));
+  background: var(--field);
+  transition:
+    background var(--motion-hover),
+    border-color var(--motion-hover);
+}
+.checkbox {
+  border-radius: 4px;
+}
+.checkbox[data-checked="true"] {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--on-accent);
+}
+.checkbox svg {
+  width: 12px;
+  height: 12px;
+  stroke-width: 2;
+}
+.radio {
+  border-radius: 50%;
+}
+.radio i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  transform: scale(0);
+  transition: transform var(--motion-press) var(--ease);
+}
+.radio[data-checked="true"] {
+  border-color: var(--accent);
+}
+.radio[data-checked="true"] i {
+  transform: scale(1);
+}
+
+.item:focus-visible {
+  outline: none;
+}

package/components/MenuItemContent.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export type MenuItemContentProps = {
+    label: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    reserveIcon?: boolean;
+};
+export declare function MenuItemContent({ label, description, icon, reserveIcon, }: MenuItemContentProps): import("react").JSX.Element;

package/components/MenuItemContent.js

@@ -0,0 +1,19 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import s from "./MenuItem.module.css";
+function MenuItemContent({
+  label,
+  description,
+  icon,
+  reserveIcon = false
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    (icon || reserveIcon) && /* @__PURE__ */ jsx("span", { className: s.leading, "data-menu-icon": true, "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxs("span", { className: s.copy, children: [
+      /* @__PURE__ */ jsx("span", { className: s.label, "data-menu-label": true, children: label }),
+      description && /* @__PURE__ */ jsx("span", { className: s.description, children: description })
+    ] })
+  ] });
+}
+export {
+  MenuItemContent
+};

package/components/MultiSelect.d.ts

@@ -0,0 +1,13 @@
+import { type FieldOptions } from "./field";
+import type { SelectOption } from "./types";
+export declare function MultiSelect({ value, onChange, options, label, disabled, readOnly, required, name, id: controlId, error, hint, maxSelected, clearable, placeholder, display, ...aria }: FieldOptions & {
+    value: string[];
+    onChange(value: string[]): void;
+    options: SelectOption[];
+    label: string;
+    disabled?: boolean;
+    maxSelected?: number;
+    clearable?: boolean;
+    placeholder?: string;
+    display?: "summary" | "tags";
+}): import("react").JSX.Element;

package/components/MultiSelect.js

@@ -0,0 +1,225 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { moveMenuFocus } from "./menuFocus.js";
+import { fieldTriggerProps, useFieldControl } from "./field.js";
+import { MenuItem } from "./MenuItem.js";
+import { SelectTrigger } from "./SelectTrigger.js";
+import { useEffect, useId, useRef, useState } from "react";
+import { Search } from "lucide-react";
+import { Popover } from "./Popover.js";
+import { usePopover } from "./usePopover.js";
+import { Button } from "./Button.js";
+import s from "./MultiSelect.module.css";
+import { SelectionTag } from "./SelectionTag.js";
+import { DisclosureChevron } from "./DisclosureChevron.js";
+import { joinIds } from "./field.js";
+function MultiSelect({
+  value,
+  onChange,
+  options,
+  label,
+  disabled,
+  readOnly,
+  required,
+  name,
+  id: controlId,
+  error,
+  hint,
+  maxSelected = Infinity,
+  clearable = true,
+  placeholder = "\u8BF7\u9009\u62E9",
+  display = "summary",
+  ...aria
+}) {
+  const field = useFieldControl({
+    id: controlId,
+    name,
+    label,
+    disabled,
+    readOnly,
+    required,
+    error,
+    hint,
+    ...aria
+  });
+  const pop = usePopover(
+    field.disabled || field.readOnly
+  ), [query, setQuery] = useState(""), list = useRef(null), search = useRef(null), id = useId();
+  const { disabled: triggerDisabled, ...tagField } = fieldTriggerProps(field);
+  const reserveIcon = options.some((option) => !!option.icon);
+  const filtered = options.filter(
+    (item) => item.label.toLowerCase().includes(query.toLowerCase())
+  );
+  const toggle = (option) => {
+    if (!field.disabled && !field.readOnly && !option.disabled && (value.includes(option.value) || value.length < maxSelected))
+      onChange(
+        value.includes(option.value) ? value.filter((v) => v !== option.value) : [...value, option.value]
+      );
+  };
+  useEffect(() => {
+    if (pop.open) {
+      setQuery("");
+      search.current?.focus();
+    }
+  }, [pop.open]);
+  const remove = (id2) => {
+    if (field.disabled || field.readOnly || options.find((option) => option.value === id2)?.disabled)
+      return;
+    onChange(value.filter((v) => v !== id2));
+    pop.anchor.current?.focus();
+  };
+  const summary = value.length ? options.filter((item) => value.includes(item.value)).map((item) => item.label).slice(0, 2).join("\u3001") + (value.length > 2 ? ` +${value.length - 2}` : "") : placeholder;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    display === "tags" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...tagField,
+          ref: pop.anchor,
+          role: "combobox",
+          "aria-expanded": pop.open,
+          "aria-controls": id,
+          "aria-haspopup": "dialog",
+          "aria-disabled": field.disabled || void 0,
+          "aria-describedby": joinIds(field.descriptionId, id + "-summary"),
+          "data-disabled": triggerDisabled,
+          "data-readonly": field.readOnly || void 0,
+          className: s.tagTrigger,
+          tabIndex: field.disabled ? -1 : 0,
+          onClick: pop.toggle,
+          onKeyDown: (event) => {
+            if (event.target !== event.currentTarget || field.disabled || field.readOnly)
+              return;
+            if (["ArrowDown", "Enter", " "].includes(event.key)) {
+              event.preventDefault();
+              pop.show();
+            }
+            if (event.key === "Backspace" && value.length) {
+              event.preventDefault();
+              remove(value[value.length - 1]);
+            }
+          },
+          children: [
+            value.map((id2) => {
+              const option = options.find((option2) => option2.value === id2);
+              return /* @__PURE__ */ jsx(
+                SelectionTag,
+                {
+                  label: option?.label || id2,
+                  icon: option?.icon,
+                  disabled: field.disabled || option?.disabled,
+                  onRemove: field.readOnly ? void 0 : () => remove(id2),
+                  removeLabel: "\u79FB\u9664 " + (option?.label || id2)
+                },
+                id2
+              );
+            }),
+            !value.length && /* @__PURE__ */ jsx("span", { className: s.tagPlaceholder, children: placeholder }),
+            /* @__PURE__ */ jsx("span", { className: s.tagChevron, children: /* @__PURE__ */ jsx(DisclosureChevron, { expanded: pop.open }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { id: id + "-summary", className: s.hidden, children: value.length ? "\u5DF2\u9009\u62E9 " + summary : "\u672A\u9009\u62E9" })
+    ] }) : /* @__PURE__ */ jsx(
+      SelectTrigger,
+      {
+        ...fieldTriggerProps(field),
+        expanded: pop.open,
+        ref: pop.anchor,
+        className: s.multiTrigger,
+        "aria-haspopup": "dialog",
+        "aria-controls": id,
+        onClick: pop.toggle,
+        children: /* @__PURE__ */ jsx("span", { children: summary })
+      }
+    ),
+    field.name && value.map((value2) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "hidden",
+        name: field.name,
+        value: value2,
+        disabled: field.disabled
+      },
+      value2
+    )),
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        id,
+        anchor: pop.anchor,
+        open: pop.open,
+        onClose: pop.close,
+        label,
+        width: 270,
+        matchAnchorWidth: display === "tags",
+        onKeyDown: (event) => moveMenuFocus(event, list.current),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: s.multiSearch, children: [
+            /* @__PURE__ */ jsx(Search, {}),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: search,
+                "aria-label": `\u641C\u7D22${label}`,
+                placeholder: "\u641C\u7D22\u9009\u9879\u2026",
+                value: query,
+                onChange: (e) => setQuery(e.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: list,
+              className: s.multiList,
+              role: "listbox",
+              "aria-label": label,
+              "aria-multiselectable": "true",
+              children: [
+                filtered.map((option) => /* @__PURE__ */ jsx(
+                  MenuItem,
+                  {
+                    label: option.label,
+                    description: option.description,
+                    icon: option.icon,
+                    reserveIcon,
+                    shortcut: option.shortcut,
+                    selected: value.includes(option.value),
+                    selection: "checkbox",
+                    role: "option",
+                    "aria-selected": value.includes(option.value),
+                    disabled: option.disabled || !value.includes(option.value) && value.length >= maxSelected,
+                    onClick: () => toggle(option)
+                  },
+                  option.value
+                )),
+                !filtered.length && /* @__PURE__ */ jsx("p", { className: s.noResults, children: "\u6CA1\u6709\u5339\u914D\u7684\u9009\u9879" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("footer", { className: s.multiFooter, children: [
+            clearable && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "small",
+                disabled: !value.length,
+                onClick: () => onChange([]),
+                children: "\u6E05\u7A7A"
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { children: [
+              value.length,
+              Number.isFinite(maxSelected) ? " / " + maxSelected : "",
+              " \u9879"
+            ] }),
+            /* @__PURE__ */ jsx(Button, { size: "small", onClick: pop.closeAndFocus, children: "\u5B8C\u6210" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  MultiSelect
+};

package/components/MultiSelect.module.css

@@ -0,0 +1,99 @@
+.multiTrigger {
+  composes: surface from "./Control.module.css";
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-width: 184px;
+  max-width: 280px;
+  padding: 5px 10px;
+}
+.tagTrigger {
+  composes: surface from "./Control.module.css";
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 5px;
+  width: 100%;
+  min-width: 0;
+  padding: 5px 8px;
+  cursor: pointer;
+}
+.tagTrigger.tagTrigger {
+  height: auto;
+  min-height: var(--control-height);
+}
+.tagPlaceholder {
+  color: var(--placeholder);
+}
+.tagChevron {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  color: var(--muted);
+}
+.tagChevron > svg {
+  width: 16px;
+  height: 16px;
+}
+.hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+.multiTrigger span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.multiTrigger svg {
+  width: 14px;
+  color: var(--muted);
+}
+.multiSearch {
+  composes: surface from "./Control.module.css";
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 3px 3px 6px;
+  padding: 0 8px;
+}
+.multiSearch input {
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  font-size: inherit;
+}
+.multiSearch svg {
+  width: 14px;
+  color: var(--muted);
+}
+.multiList {
+  composes: stack from "./OptionList.module.css";
+  padding: 5px 0;
+  max-height: 220px;
+  overflow: auto;
+}
+.multiFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 2px 1px;
+  border-top: var(--separator-width) var(--separator-style)
+    var(--separator-color);
+}
+.multiFooter span,
+.noResults {
+  color: var(--muted);
+  font-size: 11px;
+}
+.noResults {
+  padding: 15px;
+  text-align: center;
+}

package/components/NumberInput.d.ts

@@ -0,0 +1,12 @@
+import { type FieldOptions } from "./field";
+export declare function NumberInput({ value, onChange, label, min, max, step, disabled, readOnly, invalid, ...options }: FieldOptions & {
+    value: number;
+    onChange(value: number): void;
+    label: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+}): import("react").JSX.Element;

package/components/NumberInput.js

@@ -0,0 +1,114 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { fieldInputProps, useFieldControl } from "./field.js";
+import { useEffect, useRef, useState } from "react";
+import { Minus, Plus } from "lucide-react";
+import s from "./NumberInput.module.css";
+function NumberInput({
+  value,
+  onChange,
+  label,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  disabled,
+  readOnly,
+  invalid = false,
+  ...options
+}) {
+  const field = useFieldControl({ ...options, label, disabled, readOnly });
+  disabled = field.disabled;
+  readOnly = field.readOnly;
+  const [draft, setDraft] = useState(String(value)), input = useRef(null);
+  const safeStep = Number.isFinite(step) && step > 0 ? step : 1;
+  const clamp = (n) => Math.min(max, Math.max(min, n));
+  useEffect(() => setDraft(String(value)), [value]);
+  const parsed = () => draft.trim() && Number.isFinite(Number(draft)) ? Number(draft) : value;
+  const commit = () => {
+    if (readOnly) return;
+    const next = clamp(parsed());
+    setDraft(String(next));
+    if (next !== value) onChange(next);
+  };
+  const change = (direction) => {
+    if (readOnly) return;
+    const next = clamp(Number((parsed() + direction * safeStep).toFixed(10)));
+    setDraft(String(next));
+    if (next !== value) onChange(next);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: s.number,
+      "data-disabled": disabled,
+      "data-readonly": readOnly || void 0,
+      "aria-invalid": field.invalid || invalid,
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `\u51CF\u5C11${label}`,
+            disabled: disabled || readOnly || parsed() <= min,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => change(-1),
+            children: /* @__PURE__ */ jsx(Minus, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...fieldInputProps(field),
+            ref: input,
+            type: "text",
+            inputMode: "decimal",
+            role: "spinbutton",
+            "aria-invalid": field.invalid || invalid,
+            "aria-label": label,
+            "aria-valuenow": value,
+            "aria-valuemin": Number.isFinite(min) ? min : void 0,
+            "aria-valuemax": Number.isFinite(max) ? max : void 0,
+            value: draft,
+            onChange: (e) => {
+              const raw = e.target.value;
+              if (/^-?\d*\.?\d*$/.test(raw)) setDraft(raw);
+            },
+            onBlur: commit,
+            onKeyDown: (e) => {
+              if (readOnly) return;
+              if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+                e.preventDefault();
+                change(e.key === "ArrowUp" ? 1 : -1);
+              } else if (e.key === "Enter") {
+                e.preventDefault();
+                commit();
+              } else if (e.key === "Escape") setDraft(String(value));
+              else if (e.key === "Home" && Number.isFinite(min)) {
+                e.preventDefault();
+                setDraft(String(min));
+                onChange(min);
+              } else if (e.key === "End" && Number.isFinite(max)) {
+                e.preventDefault();
+                setDraft(String(max));
+                onChange(max);
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `\u589E\u52A0${label}`,
+            disabled: disabled || readOnly || parsed() >= max,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => change(1),
+            children: /* @__PURE__ */ jsx(Plus, {})
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  NumberInput
+};

package/components/NumberInput.module.css

@@ -0,0 +1,33 @@
+.number {
+  composes: surface from "./Control.module.css";
+  width: 132px;
+  display: grid;
+  grid-template-columns: 30px minmax(0, 1fr) 30px;
+  overflow: hidden;
+}
+
+.number input {
+  width: 100%;
+  text-align: center;
+  font-size: inherit;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  padding: 0;
+  font-variant-numeric: tabular-nums;
+}
+.number button {
+  display: grid;
+  place-items: center;
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+}
+.number button:hover:not(:disabled) {
+  background: var(--hover);
+  color: var(--fg);
+}
+.number svg {
+  width: 13px;
+  height: 13px;
+}