@robert-stackflow/oneui 0.0.0-stage → 0.1.0

package/components/Slider.module.css

@@ -0,0 +1,19 @@
+.field {
+  display: grid;
+  gap: 12px;
+}
+.field label {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+}
+.field label span {
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+.field input {
+  width: 100%;
+  margin: 6px 0;
+  accent-color: var(--accent);
+  cursor: pointer;
+}

package/components/Spinner.d.ts

@@ -0,0 +1,6 @@
+export declare function Spinner({ size, variant, label, decorative, }: {
+    size?: number;
+    variant?: "ring" | "dots";
+    label?: string;
+    decorative?: boolean;
+}): import("react").JSX.Element;

package/components/Spinner.js

@@ -0,0 +1,31 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import s from "./Spinner.module.css";
+function Spinner({
+  size = 18,
+  variant = "ring",
+  label = "\u6B63\u5728\u52A0\u8F7D",
+  decorative = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: s.spinner,
+      "data-variant": variant,
+      role: decorative ? void 0 : "status",
+      "aria-label": decorative ? void 0 : label,
+      "aria-hidden": decorative || void 0,
+      style: { "--spinner-size": size + "px" },
+      children: variant === "dots" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("i", {}),
+        /* @__PURE__ */ jsx("i", {}),
+        /* @__PURE__ */ jsx("i", {})
+      ] }) : /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 3a9 9 0 0 1 9 9" })
+      ] })
+    }
+  );
+}
+export {
+  Spinner
+};

package/components/Spinner.module.css

@@ -0,0 +1,57 @@
+.spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  vertical-align: middle;
+  width: var(--spinner-size);
+  height: var(--spinner-size);
+}
+.spinner svg {
+  width: 100%;
+  height: 100%;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  animation: turn 800ms linear infinite;
+}
+.spinner circle {
+  opacity: 0.18;
+}
+.spinner path {
+  stroke-linecap: round;
+}
+.spinner[data-variant="dots"] {
+  gap: 3px;
+  width: calc(var(--spinner-size) * 1.8);
+}
+.spinner i {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: currentColor;
+  animation: pulse 1000ms ease-in-out infinite;
+}
+.spinner i:nth-child(2) {
+  animation-delay: 120ms;
+}
+.spinner i:nth-child(3) {
+  animation-delay: 240ms;
+}
+@keyframes turn {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes pulse {
+  0%,
+  80%,
+  100% {
+    opacity: 0.3;
+    transform: translateY(0);
+  }
+  40% {
+    opacity: 1;
+    transform: translateY(-3px);
+  }
+}

package/components/SplitButton.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+export type SplitButtonItem = {
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    shortcut?: string;
+    description?: string;
+    onSelect(): void;
+};
+export declare function SplitButton({ children, onClick, items, menuLabel, variant, disabled, }: {
+    children: ReactNode;
+    onClick(): void;
+    items: SplitButtonItem[];
+    menuLabel: string;
+    variant?: "primary" | "secondary";
+    disabled?: boolean;
+}): import("react").JSX.Element;

package/components/SplitButton.js

@@ -0,0 +1,102 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { MenuItem } from "./MenuItem.js";
+import { useId, useRef, useState } from "react";
+import { Popover } from "./Popover.js";
+import { DisclosureChevron } from "./DisclosureChevron.js";
+import s from "./SplitButton.module.css";
+function SplitButton({
+  children,
+  onClick,
+  items,
+  menuLabel,
+  variant = "secondary",
+  disabled = false
+}) {
+  const [open, setOpen] = useState(false), anchor = useRef(null), root = useRef(null), id = useId();
+  const reserveIcon = items.some((item) => !!item.icon);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: s.split, "data-variant": variant, "data-disabled": disabled, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled,
+          onClick: () => {
+            setOpen(false);
+            onClick();
+          },
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: anchor,
+          type: "button",
+          className: s.arrow,
+          disabled,
+          "aria-label": menuLabel,
+          "aria-haspopup": "menu",
+          "aria-controls": id,
+          "aria-expanded": open,
+          onClick: () => setOpen((v) => !v),
+          onKeyDown: (e) => {
+            if (e.key === "ArrowDown") {
+              e.preventDefault();
+              setOpen(true);
+            }
+          },
+          children: /* @__PURE__ */ jsx(DisclosureChevron, { expanded: open })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        anchor,
+        open: open && !disabled,
+        onClose: () => setOpen(false),
+        id,
+        role: "menu",
+        label: menuLabel,
+        width: 235,
+        onKeyDown: (e) => {
+          const buttons = Array.from(
+            root.current?.querySelectorAll(
+              "button:not(:disabled)"
+            ) || []
+          );
+          if (!buttons.length) return;
+          const index = buttons.indexOf(
+            document.activeElement
+          );
+          if (["ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) {
+            e.preventDefault();
+            buttons[e.key === "Home" ? 0 : e.key === "End" ? buttons.length - 1 : (index + (e.key === "ArrowDown" ? 1 : buttons.length - 1)) % buttons.length].focus();
+          }
+        },
+        children: /* @__PURE__ */ jsx("div", { ref: root, className: s.menu, children: items.map((item, index) => /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            label: item.label,
+            description: item.description,
+            icon: item.icon,
+            reserveIcon,
+            shortcut: item.shortcut,
+            role: "menuitem",
+            disabled: item.disabled,
+            onClick: () => {
+              setOpen(false);
+              anchor.current?.focus();
+              item.onSelect();
+            }
+          },
+          index
+        )) })
+      }
+    )
+  ] });
+}
+export {
+  SplitButton
+};

package/components/SplitButton.module.css

@@ -0,0 +1,56 @@
+.split {
+  display: inline-flex;
+  flex-shrink: 0;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  overflow: hidden;
+  background: var(--surface);
+}
+.split > button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-height: var(--control-height);
+  padding: 6px 13px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  font-size: 12px;
+  transition: background var(--motion-hover);
+}
+.split > .arrow {
+  width: 30px;
+  min-width: 30px;
+  padding: 0;
+  border-left: var(--separator-width) var(--separator-style)
+    var(--separator-color);
+}
+.split > button:hover:not(:disabled),
+.split > button[aria-expanded="true"] {
+  background: var(--hover);
+}
+.split > button:active:not(:disabled) > svg {
+  scale: 0.94;
+}
+.split > button:focus-visible {
+  outline-offset: -3px;
+}
+.split[data-variant="primary"] {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+.split[data-variant="primary"] > button {
+  color: var(--on-accent);
+}
+.split[data-variant="primary"] > .arrow {
+  border-left-color: color-mix(in srgb, var(--on-accent) 24%, transparent);
+}
+.split[data-variant="primary"] > button:hover:not(:disabled),
+.split[data-variant="primary"] > button[aria-expanded="true"] {
+  background: color-mix(in srgb, var(--on-accent) 14%, transparent);
+}
+.menu {
+  display: block;
+}

package/components/Statistic.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+export type StatisticProps = {
+    title: ReactNode;
+    label?: string;
+    value: number | string | null | undefined;
+    precision?: number;
+    locale?: string;
+    grouping?: boolean;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    formatter?(value: number | string): ReactNode;
+    valueLabel?: string;
+    loading?: boolean;
+    animate?: boolean;
+    emptyText?: ReactNode;
+    trend?: {
+        direction: "up" | "down" | "flat";
+        value: ReactNode;
+        tone?: "success" | "danger" | "neutral";
+    };
+};
+export declare function Statistic({ title, label, value, precision, locale, grouping, prefix, suffix, formatter, valueLabel, loading, animate, emptyText, trend, }: StatisticProps): import("react").JSX.Element;

package/components/Statistic.js

@@ -0,0 +1,102 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ArrowDownRight, ArrowUpRight, Minus } from "lucide-react";
+import { Skeleton } from "./Skeleton.js";
+import s from "./Statistic.module.css";
+function Statistic({
+  title,
+  label,
+  value,
+  precision = 0,
+  locale = "zh-CN",
+  grouping = true,
+  prefix,
+  suffix,
+  formatter,
+  valueLabel,
+  loading = false,
+  animate = true,
+  emptyText = "\u2014",
+  trend
+}) {
+  const valid = typeof value === "number" && Number.isFinite(value), target = valid ? value : 0, [display, setDisplay] = useState(target), current = useRef(target);
+  useEffect(() => {
+    if (!valid) return;
+    const media = matchMedia("(prefers-reduced-motion: reduce)"), start = current.current, startTime = performance.now();
+    let frame = 0;
+    const finish = () => {
+      cancelAnimationFrame(frame);
+      current.current = target;
+      setDisplay(target);
+    };
+    const change = () => {
+      if (media.matches) finish();
+    };
+    if (!animate || loading || media.matches || start === target) finish();
+    else {
+      const tick = (now) => {
+        const progress = Math.min(1, (now - startTime) / 320), next = start + (target - start) * (1 - Math.pow(1 - progress, 3));
+        current.current = next;
+        setDisplay(next);
+        if (progress < 1) frame = requestAnimationFrame(tick);
+      };
+      frame = requestAnimationFrame(tick);
+    }
+    media.addEventListener("change", change);
+    return () => {
+      cancelAnimationFrame(frame);
+      media.removeEventListener("change", change);
+    };
+  }, [target, valid, animate, loading]);
+  const digits = Number.isFinite(precision) ? Math.min(20, Math.max(0, Math.trunc(precision))) : 0;
+  const numberFormat = useMemo(() => {
+    const options = {
+      minimumFractionDigits: digits,
+      maximumFractionDigits: digits,
+      useGrouping: grouping
+    };
+    try {
+      return new Intl.NumberFormat(locale, options);
+    } catch {
+      return new Intl.NumberFormat("zh-CN", options);
+    }
+  }, [locale, digits, grouping]);
+  const format = (n) => numberFormat.format(n);
+  const empty = value == null || value === "" || typeof value === "number" && !valid;
+  const formatted = empty ? emptyText : formatter ? formatter(valid ? display : value) : valid ? format(display) : value;
+  const accessible = valueLabel || (empty ? "\u65E0\u6570\u636E" : `${typeof prefix === "string" || typeof prefix === "number" ? prefix : ""}${valid ? format(target) : value}${typeof suffix === "string" || typeof suffix === "number" ? suffix : ""}`);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: s.statistic,
+      role: "group",
+      "aria-label": label || (typeof title === "string" ? title : "\u7EDF\u8BA1"),
+      "aria-busy": loading || void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: s.title, children: title }),
+        /* @__PURE__ */ jsx("div", { className: s.number, "aria-hidden": "true", children: loading ? /* @__PURE__ */ jsx(Skeleton, { width: 140, height: 28 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          prefix != null && /* @__PURE__ */ jsx("span", { className: s.affix, children: prefix }),
+          /* @__PURE__ */ jsx("span", { children: formatted }),
+          suffix != null && /* @__PURE__ */ jsx("span", { className: s.affix, children: suffix })
+        ] }) }),
+        /* @__PURE__ */ jsx("output", { className: s.sr, "aria-live": "polite", children: loading ? "\u6B63\u5728\u52A0\u8F7D" : accessible }),
+        trend && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: s.trend,
+            "data-tone": trend.tone || "neutral",
+            "aria-hidden": loading || void 0,
+            style: { visibility: loading ? "hidden" : void 0 },
+            children: [
+              trend.direction === "up" ? /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": "true" }) : trend.direction === "down" ? /* @__PURE__ */ jsx(ArrowDownRight, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Minus, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { children: trend.value })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Statistic
+};

package/components/Statistic.module.css

@@ -0,0 +1,55 @@
+.statistic {
+  min-width: 0;
+}
+.title {
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 20px;
+}
+.number {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-height: 42px;
+  margin-top: 6px;
+  font-size: 30px;
+  font-weight: 600;
+  line-height: 1.35;
+  font-variant-numeric: tabular-nums;
+}
+.number > span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.affix {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--muted);
+}
+.affix svg {
+  width: 18px;
+  height: 18px;
+}
+.trend {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 6px;
+  font-size: 11px;
+  color: var(--muted);
+  line-height: 18px;
+}
+.trend svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+.trend[data-tone="success"] {
+  color: var(--success);
+}
+.trend[data-tone="danger"] {
+  color: var(--danger);
+}
+.sr {
+  composes: visuallyHidden from "./Accessibility.module.css";
+}

package/components/Steps.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+export type StepStatus = "waiting" | "current" | "complete" | "error" | "loading";
+export type StepItem = {
+    value: string;
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    status?: StepStatus;
+    disabled?: boolean;
+};
+export type StepsProps = {
+    items: StepItem[];
+    value?: string;
+    onChange?(value: string): void;
+    orientation?: "horizontal" | "vertical";
+    label?: string;
+    className?: string;
+};
+export declare function Steps({ items, value, onChange, orientation, label, className, }: StepsProps): import("react").JSX.Element;

package/components/Steps.js

@@ -0,0 +1,102 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useState } from "react";
+import { Check, CircleAlert } from "lucide-react";
+import { Spinner } from "./Spinner.js";
+import s from "./Steps.module.css";
+const statusNames = {
+  waiting: "\u672A\u5F00\u59CB",
+  current: "\u5F53\u524D\u6B65\u9AA4",
+  complete: "\u5DF2\u5B8C\u6210",
+  error: "\u53D1\u751F\u9519\u8BEF",
+  loading: "\u8FDB\u884C\u4E2D"
+};
+function Steps({
+  items,
+  value,
+  onChange,
+  orientation = "horizontal",
+  label = "\u6B65\u9AA4",
+  className = ""
+}) {
+  const current = items.findIndex((item) => item.value === value), id = useId();
+  const [focused, setFocused] = useState(null);
+  useEffect(() => setFocused(null), [value]);
+  const enabled = items.filter((item) => !item.disabled);
+  const tabStop = enabled.find((item) => item.value === focused)?.value ?? enabled.find((item) => item.value === value)?.value ?? enabled[0]?.value;
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      className: `${s.steps} ${className}`,
+      "aria-label": label,
+      "data-orientation": orientation,
+      onKeyDown: (event) => {
+        if (!onChange || !enabled.length) return;
+        const active = enabled.findIndex(
+          (item) => item.value === event.target.closest(
+            "[data-step-value]"
+          )?.dataset.stepValue
+        );
+        if (active < 0) return;
+        const previous = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp", next = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+        const index = event.key === "Home" ? 0 : event.key === "End" ? enabled.length - 1 : event.key === previous ? (active - 1 + enabled.length) % enabled.length : event.key === next ? (active + 1) % enabled.length : -1;
+        if (index < 0) return;
+        event.preventDefault();
+        setFocused(enabled[index].value);
+        [
+          ...event.currentTarget.querySelectorAll(
+            "[data-step-value]"
+          )
+        ].find((node) => node.dataset.stepValue === enabled[index].value)?.focus();
+      },
+      children: items.map((item, index) => {
+        const status = item.status ?? (current < 0 || index > current ? "waiting" : index < current ? "complete" : "current");
+        const descriptionId = `${id}-${index}`;
+        const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: s.marker, "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: s.mark, children: status === "loading" ? /* @__PURE__ */ jsx(Spinner, { decorative: true }) : status === "complete" ? /* @__PURE__ */ jsx(Check, {}) : status === "error" ? /* @__PURE__ */ jsx(CircleAlert, {}) : item.icon || index + 1 }, status) }),
+          /* @__PURE__ */ jsxs("span", { className: s.copy, children: [
+            /* @__PURE__ */ jsx("span", { className: s.label, children: item.label }),
+            item.description && /* @__PURE__ */ jsx("span", { id: descriptionId, className: s.description, children: item.description })
+          ] })
+        ] });
+        return /* @__PURE__ */ jsx(
+          "li",
+          {
+            className: s.item,
+            "data-status": status,
+            "data-disabled": item.disabled || void 0,
+            children: onChange ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: s.control,
+                "data-step-value": item.value,
+                disabled: item.disabled,
+                tabIndex: item.value === tabStop ? 0 : -1,
+                "aria-current": index === current ? "step" : void 0,
+                "aria-label": `${item.label}\uFF0C${statusNames[status]}`,
+                "aria-describedby": item.description ? descriptionId : void 0,
+                onFocus: () => setFocused(item.value),
+                onClick: () => onChange(item.value),
+                children: content
+              }
+            ) : /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: s.control,
+                "aria-current": index === current ? "step" : void 0,
+                children: [
+                  content,
+                  /* @__PURE__ */ jsx("span", { className: s.srOnly, children: statusNames[status] })
+                ]
+              }
+            )
+          },
+          item.value
+        );
+      })
+    }
+  );
+}
+export {
+  Steps
+};