@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/Breadcrumb.js

@@ -0,0 +1,157 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { moveMenuFocus } from "./menuFocus.js";
+import {
+  useEffect,
+  useId,
+  useRef
+} from "react";
+import { ChevronRight, Ellipsis } from "lucide-react";
+import { MenuItem } from "./MenuItem.js";
+import { Popover } from "./Popover.js";
+import { usePopover } from "./usePopover.js";
+import s from "./Breadcrumb.module.css";
+function Breadcrumb({
+  items,
+  onNavigate,
+  maxItems = 0,
+  label = "\u9762\u5305\u5C51",
+  className = ""
+}) {
+  const pop = usePopover(), id = useId(), menu = useRef(null);
+  const limit = Number.isFinite(maxItems) && maxItems > 0 ? Math.max(3, Math.floor(maxItems)) : 0;
+  const hidden = limit && items.length > limit ? items.slice(1, -(limit - 2)) : [];
+  const visible = hidden.length ? [items[0], null, ...items.slice(-(limit - 2))] : items;
+  const hasIcons = hidden.some((item) => !!item.icon);
+  const firstAction = hidden.find(
+    (item) => !item.disabled && (item.href || onNavigate)
+  )?.value;
+  useEffect(() => pop.close(), [items, limit, pop.close]);
+  const navigate = (event, item) => {
+    if (item.disabled) {
+      event.preventDefault();
+      return;
+    }
+    if (item.href && (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey))
+      return;
+    if (pop.open) {
+      pop.closeAndFocus();
+    }
+    if (onNavigate) {
+      event.preventDefault();
+      onNavigate(item.value);
+    }
+    pop.close();
+  };
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": label, className: `${s.breadcrumb} ${className}`, children: [
+    /* @__PURE__ */ jsx("ol", { children: visible.map((item, index) => {
+      const current = !!item && item === items.at(-1);
+      return /* @__PURE__ */ jsxs("li", { children: [
+        index > 0 && /* @__PURE__ */ jsx(ChevronRight, { className: s.separator, "aria-hidden": "true" }),
+        !item ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            ref: pop.anchor,
+            className: s.crumb,
+            "aria-label": "\u5C55\u5F00\u8DEF\u5F84",
+            "aria-haspopup": "menu",
+            "aria-expanded": pop.open,
+            "aria-controls": id,
+            onClick: pop.toggle,
+            onKeyDown: (event) => {
+              if (event.key === "ArrowDown") {
+                event.preventDefault();
+                if (!pop.open) pop.toggle();
+              }
+            },
+            children: /* @__PURE__ */ jsx(Ellipsis, {})
+          }
+        ) : current || item.disabled || !item.href && !onNavigate ? /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: s.crumb,
+            "aria-current": current ? "page" : void 0,
+            "aria-disabled": item.disabled || void 0,
+            children: [
+              item.icon && /* @__PURE__ */ jsx("span", { className: s.icon, "aria-hidden": "true", children: item.icon }),
+              /* @__PURE__ */ jsx("span", { className: s.text, children: item.label })
+            ]
+          }
+        ) : item.href ? /* @__PURE__ */ jsxs(
+          "a",
+          {
+            className: s.crumb,
+            href: item.href,
+            onClick: (event) => navigate(event, item),
+            children: [
+              item.icon && /* @__PURE__ */ jsx("span", { className: s.icon, "aria-hidden": "true", children: item.icon }),
+              /* @__PURE__ */ jsx("span", { className: s.text, children: item.label })
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: s.crumb,
+            onClick: (event) => navigate(event, item),
+            children: [
+              item.icon && /* @__PURE__ */ jsx("span", { className: s.icon, "aria-hidden": "true", children: item.icon }),
+              /* @__PURE__ */ jsx("span", { className: s.text, children: item.label })
+            ]
+          }
+        )
+      ] }, item?.value ?? `${id}-overflow`);
+    }) }),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        anchor: pop.anchor,
+        open: pop.open && hidden.length > 0,
+        onClose: pop.close,
+        id,
+        role: "menu",
+        label: `${label}\u5B8C\u6574\u8DEF\u5F84`,
+        width: 250,
+        onKeyDown: (event) => moveMenuFocus(event, menu.current),
+        children: /* @__PURE__ */ jsx("div", { ref: menu, className: s.menu, children: hidden.map(
+          (item) => item.href && !item.disabled ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: item.href,
+              role: "menuitem",
+              "data-autofocus": item.value === firstAction ? "" : void 0,
+              className: s.menuLink,
+              onClick: (event) => navigate(event, item),
+              children: /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  as: "div",
+                  role: "none",
+                  label: item.label,
+                  icon: item.icon,
+                  reserveIcon: hasIcons
+                }
+              )
+            },
+            item.value
+          ) : /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              role: "menuitem",
+              "data-autofocus": item.value === firstAction ? "" : void 0,
+              label: item.label,
+              icon: item.icon,
+              reserveIcon: hasIcons,
+              disabled: item.disabled || !onNavigate,
+              onClick: (event) => navigate(event, item)
+            },
+            item.value
+          )
+        ) })
+      }
+    )
+  ] });
+}
+export {
+  Breadcrumb
+};

package/components/Breadcrumb.module.css

@@ -0,0 +1,97 @@
+.breadcrumb {
+  min-width: 0;
+  max-width: 100%;
+}
+.breadcrumb ol {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+}
+.breadcrumb li {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  max-width: 100%;
+}
+.crumb {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  max-width: min(240px, 100%);
+  min-height: var(--control-small);
+  padding: 4px 6px;
+  border: 0;
+  border-radius: max(4px, calc(var(--radius) - 3px));
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--muted);
+  background: transparent;
+  text-decoration: none;
+  transition:
+    background var(--motion-hover),
+    color var(--motion-hover);
+}
+.crumb:is(a, button):hover {
+  color: var(--fg);
+  background: var(--hover);
+}
+.crumb[aria-expanded="true"] {
+  color: var(--fg);
+  background: var(--selected);
+}
+.crumb[aria-current="page"] {
+  color: var(--fg);
+}
+.crumb[aria-disabled="true"] {
+  opacity: 0.42;
+}
+.crumb:focus-visible {
+  outline-offset: 1px;
+}
+.text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+.icon > svg,
+.crumb > svg {
+  width: 14px;
+  height: 14px;
+}
+.separator {
+  width: 13px;
+  height: 13px;
+  color: var(--muted);
+  opacity: 0.6;
+}
+.menu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--menu-item-spacing);
+}
+.menuLink {
+  display: block;
+  border-radius: max(4px, calc(var(--radius) - 3px));
+  color: inherit;
+  text-decoration: none;
+}
+.menuLink:focus-visible {
+  outline: none;
+}
+.menuLink:focus-visible [data-menu-item] {
+  background: var(--hover);
+  box-shadow: inset 0 0 0 1px var(--accent);
+}

package/components/Button.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentPropsWithRef } from "react";
+type ButtonProps = {
+    variant?: "primary" | "secondary" | "ghost" | "danger";
+    size?: "normal" | "small";
+    loading?: boolean;
+} & ((ComponentPropsWithRef<"button"> & {
+    href?: never;
+}) | (ComponentPropsWithRef<"a"> & {
+    href: string;
+    disabled?: boolean;
+}));
+export declare function Button({ variant, size, loading, children, className, ...props }: ButtonProps): import("react").JSX.Element;
+export {};

package/components/Button.js

@@ -0,0 +1,52 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Spinner } from "./Spinner.js";
+import s from "./Button.module.css";
+function Button({
+  variant = "secondary",
+  size = "normal",
+  loading,
+  children,
+  className = "",
+  ...props
+}) {
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: s.content, style: { opacity: loading ? 0 : 1 }, children }),
+    loading && /* @__PURE__ */ jsx("span", { className: s.loader, children: /* @__PURE__ */ jsx(Spinner, { decorative: true }) })
+  ] });
+  const classes = `${s.button} ${s[variant]} ${size === "small" ? s.small : ""} ${className}`;
+  if (typeof props.href === "string") {
+    const { disabled, onClick, ...link } = props;
+    const blocked = disabled || loading;
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ...link,
+        className: classes,
+        "aria-disabled": blocked || void 0,
+        "aria-busy": loading || void 0,
+        tabIndex: blocked ? -1 : link.tabIndex,
+        onClick: (event) => {
+          if (blocked) {
+            event.preventDefault();
+            event.stopPropagation();
+          } else onClick?.(event);
+        },
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ...props,
+      disabled: props.disabled || loading,
+      "aria-busy": loading || void 0,
+      className: classes,
+      children: content
+    }
+  );
+}
+export {
+  Button
+};

package/components/Button.module.css

@@ -0,0 +1,88 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-height: var(--control-height);
+  padding: 6px 13px;
+  border: 1px solid var(--line);
+  border-radius: calc(var(--radius) - 3px);
+  background: var(--surface);
+  white-space: nowrap;
+  transition:
+    background var(--motion-hover),
+    transform var(--motion-hover),
+    border-color var(--motion-hover);
+  font-size: 12px;
+  text-decoration: none;
+  color: var(--fg);
+}
+.button[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.button:hover:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--hover);
+  border-color: color-mix(in srgb, var(--fg) 18%, var(--surface));
+}
+.button:active:not(:disabled):not([aria-disabled="true"]) {
+  transform: translateY(1px);
+}
+.primary {
+  background: var(--accent-fill, var(--accent));
+  border-color: var(--accent-fill, var(--accent));
+  color: var(--on-accent-fill, var(--on-accent));
+}
+.primary:hover:not(:disabled):not([aria-disabled="true"]) {
+  background: var(
+    --accent-fill-hover,
+    color-mix(in srgb, var(--accent) 86%, var(--surface))
+  );
+  border-color: transparent;
+}
+.secondary {
+  box-shadow: 0 1px 1px #00000003;
+}
+.ghost {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+.danger {
+  color: var(--danger);
+  background: color-mix(in srgb, var(--danger) 5%, var(--surface));
+}
+.small {
+  min-height: var(--control-small);
+  padding: 4px 9px;
+  font-size: 11px;
+}
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+.button {
+  position: relative;
+}
+.content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+}
+.loader {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+}
+.button[aria-busy="true"] {
+  opacity: 0.8;
+  cursor: wait;
+}
+
+.content > svg {
+  width: var(--button-icon-size, 16px);
+  height: var(--button-icon-size, 16px);
+  flex-shrink: 0;
+}

package/components/Calendar.d.ts

@@ -0,0 +1,10 @@
+import { type DateConstraints, type DateRange } from "./dateConstraints";
+export { dateKey, readDate } from "./dateConstraints";
+export type CalendarProps = DateConstraints & {
+    value: string;
+    onChange(value: string): void;
+    range?: DateRange;
+    preview?: string;
+    onHover?(value: string): void;
+};
+export declare function Calendar({ value, onChange, range, preview, onHover, minDate, maxDate, disabledDate, }: CalendarProps): import("react").JSX.Element;

package/components/Calendar.js

@@ -0,0 +1,260 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { IconButton } from "./IconButton.js";
+import {
+  boundedDate,
+  calendarDate,
+  dateKey,
+  isDateAllowed,
+  parseDate,
+  readDate
+} from "./dateConstraints.js";
+import s from "./Calendar.module.css";
+import { dateKey as dateKey2, readDate as readDate2 } from "./dateConstraints.js";
+function Calendar({
+  value,
+  onChange,
+  range,
+  preview,
+  onHover,
+  minDate,
+  maxDate,
+  disabledDate
+}) {
+  const constraints = { minDate, maxDate, disabledDate };
+  const [month, setMonth] = useState(
+    () => readDate(boundedDate(value, constraints))
+  ), [view, setView] = useState("days"), [focused, setFocused] = useState(value);
+  const grid = useRef(null), choices = useRef(null), pending = useRef(null), pendingView = useRef(false);
+  const year = month.getFullYear(), index = month.getMonth(), start = (calendarDate(year, index).getDay() + 6) % 7, base = Math.floor(year / 12) * 12, today = dateKey(/* @__PURE__ */ new Date());
+  const allowed = (key) => isDateAllowed(key, constraints);
+  const monthAllowed = (y, m) => y >= 1 && y <= 9999 && !(minDate && parseDate(minDate) && dateKey(calendarDate(y, m + 1, 0)) < minDate) && !(maxDate && parseDate(maxDate) && dateKey(calendarDate(y, m)) > maxDate);
+  const periodAllowed = (amount) => {
+    if (view === "days") {
+      const next = calendarDate(year, index + amount);
+      return monthAllowed(next.getFullYear(), next.getMonth());
+    }
+    const first = view === "years" ? base + amount * 12 : year + amount, last = view === "years" ? first + 11 : first;
+    return last >= 1 && first <= 9999 && !(minDate && parseDate(minDate) && last < Number(minDate.slice(0, 4))) && !(maxDate && parseDate(maxDate) && first > Number(maxDate.slice(0, 4)));
+  };
+  const move = (amount) => setMonth(
+    calendarDate(
+      year + (view === "years" ? amount * 12 : view === "months" ? amount : 0),
+      index + (view === "days" ? amount : 0)
+    )
+  );
+  const cells = Array.from({ length: 42 }, (_, i) => {
+    const date = calendarDate(year, index, i - start + 1);
+    return { date, key: dateKey(date) };
+  });
+  const tabStop = cells.find((c) => c.key === focused && allowed(c.key))?.key || cells.find((c) => c.key === value && allowed(c.key))?.key || cells.find((c) => c.date.getMonth() === index && allowed(c.key))?.key || cells.find((c) => allowed(c.key))?.key;
+  const openView = (next) => {
+    pendingView.current = true;
+    setView(next);
+  };
+  useEffect(() => {
+    const next = boundedDate(dateKey(month), { minDate, maxDate });
+    if (next.slice(0, 7) !== dateKey(month).slice(0, 7))
+      setMonth(readDate(next));
+  }, [minDate, maxDate]);
+  useLayoutEffect(() => {
+    if (pending.current && view === "days") {
+      grid.current?.querySelector(`[data-date="${pending.current}"]`)?.focus({ preventScroll: true });
+      pending.current = null;
+    } else if (pendingView.current) {
+      pendingView.current = false;
+      const node = choices.current;
+      const target = view === "days" ? grid.current?.querySelector(
+        `[data-date="${tabStop}"]`
+      ) : node?.querySelector(
+        'button[aria-pressed="true"]:not(:disabled)'
+      ) || node?.querySelector("button:not(:disabled)");
+      target?.focus({ preventScroll: true });
+    }
+  }, [month, view, focused]);
+  const rangeEnd = range?.[1] || preview || "", rangeStart = range?.[0] || "", low = rangeStart && rangeEnd ? rangeStart < rangeEnd ? rangeStart : rangeEnd : "", high = rangeStart && rangeEnd ? rangeStart > rangeEnd ? rangeStart : rangeEnd : "";
+  return /* @__PURE__ */ jsxs("div", { className: s.calendar, children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          label: view === "days" ? "\u4E0A\u4E2A\u6708" : view === "months" ? "\u4E0A\u4E00\u5E74" : "\u524D\u5341\u4E8C\u5E74",
+          disabled: !periodAllowed(-1),
+          onClick: () => move(-1),
+          children: /* @__PURE__ */ jsx(ChevronLeft, {})
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: s.heading, children: view === "years" ? /* @__PURE__ */ jsxs("span", { "aria-live": "polite", children: [
+        base,
+        " \u2014 ",
+        base + 11
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-label": "\u9009\u62E9\u5E74\u4EFD",
+            onClick: () => openView("years"),
+            children: [
+              year,
+              " \u5E74"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-label": "\u9009\u62E9\u6708\u4EFD",
+            onClick: () => openView(view === "months" ? "days" : "months"),
+            children: [
+              index + 1,
+              " \u6708"
+            ]
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          label: view === "days" ? "\u4E0B\u4E2A\u6708" : view === "months" ? "\u4E0B\u4E00\u5E74" : "\u540E\u5341\u4E8C\u5E74",
+          disabled: !periodAllowed(1),
+          onClick: () => move(1),
+          children: /* @__PURE__ */ jsx(ChevronRight, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: s.area, children: view === "days" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: s.week, children: ["\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D", "\u65E5"].map((day) => /* @__PURE__ */ jsx("span", { children: day }, day)) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: grid,
+          className: s.days,
+          "data-calendar-days": true,
+          onPointerLeave: () => onHover?.(""),
+          children: cells.map(({ date, key }) => {
+            const enabled = allowed(key), selected = range ? key === rangeStart || key === range[1] : key === value;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-date": key,
+                "data-autofocus": key === tabStop || void 0,
+                "data-outside": date.getMonth() !== index,
+                "data-in-range": !!low && key > low && key < high,
+                "data-range-edge": !!range && selected,
+                "data-preview": !!range && !range[1] && !!preview,
+                "aria-label": key,
+                "aria-pressed": selected,
+                "aria-current": key === today ? "date" : void 0,
+                disabled: !enabled,
+                tabIndex: key === tabStop ? 0 : -1,
+                onFocus: () => {
+                  setFocused(key);
+                  onHover?.(key);
+                },
+                onPointerEnter: () => {
+                  if (enabled) onHover?.(key);
+                },
+                onClick: () => {
+                  if (!enabled) return;
+                  setMonth(
+                    calendarDate(date.getFullYear(), date.getMonth())
+                  );
+                  setFocused(key);
+                  onChange(key);
+                },
+                onKeyDown: (event) => {
+                  const deltas = {
+                    ArrowLeft: -1,
+                    ArrowRight: 1,
+                    ArrowUp: -7,
+                    ArrowDown: 7,
+                    Home: -((date.getDay() + 6) % 7),
+                    End: 6 - (date.getDay() + 6) % 7
+                  };
+                  if (!(event.key in deltas) && event.key !== "PageUp" && event.key !== "PageDown")
+                    return;
+                  event.preventDefault();
+                  let next = new Date(date), direction = event.key === "Home" ? 1 : event.key === "End" ? -1 : event.key === "ArrowLeft" || event.key === "ArrowUp" || event.key === "PageUp" ? -1 : 1;
+                  if (event.key.startsWith("Page")) {
+                    const target = calendarDate(
+                      date.getFullYear(),
+                      date.getMonth() + direction
+                    );
+                    next = calendarDate(
+                      target.getFullYear(),
+                      target.getMonth(),
+                      Math.min(
+                        date.getDate(),
+                        calendarDate(
+                          target.getFullYear(),
+                          target.getMonth() + 1,
+                          0
+                        ).getDate()
+                      )
+                    );
+                  } else next.setDate(next.getDate() + deltas[event.key]);
+                  if (!parseDate(dateKey(next))) return;
+                  const bounded = boundedDate(dateKey(next), constraints);
+                  if (bounded !== dateKey(next)) {
+                    direction = bounded > dateKey(next) ? 1 : -1;
+                    next = readDate(bounded);
+                  }
+                  for (let i = 0; i < 366; i++) {
+                    const candidate = dateKey(next);
+                    if (minDate && parseDate(minDate) && candidate < minDate || maxDate && parseDate(maxDate) && candidate > maxDate || !parseDate(candidate))
+                      return;
+                    if (allowed(candidate)) {
+                      pending.current = candidate;
+                      setFocused(candidate);
+                      setMonth(
+                        calendarDate(next.getFullYear(), next.getMonth())
+                      );
+                      return;
+                    }
+                    next.setDate(next.getDate() + direction);
+                  }
+                },
+                children: date.getDate()
+              },
+              key
+            );
+          })
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx("div", { ref: choices, className: s.choices, children: Array.from({ length: 12 }, (_, i) => {
+      const choice = view === "years" ? base + i : i, enabled = view === "years" ? Array.from(
+        { length: 12 },
+        (_2, m) => monthAllowed(choice, m)
+      ).some(Boolean) : monthAllowed(year, choice);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": view === "years" ? choice + " \u5E74" : choice + 1 + " \u6708",
+          "aria-pressed": choice === (view === "years" ? year : index),
+          disabled: !enabled,
+          onClick: () => {
+            setMonth(
+              calendarDate(
+                view === "years" ? choice : year,
+                view === "months" ? choice : index
+              )
+            );
+            openView(view === "years" ? "months" : "days");
+          },
+          children: view === "years" ? choice : choice + 1 + " \u6708"
+        },
+        choice
+      );
+    }) }) })
+  ] });
+}
+export {
+  Calendar,
+  dateKey2 as dateKey,
+  readDate2 as readDate
+};