@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/DateRangePicker.js

@@ -0,0 +1,168 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { CalendarDays, ArrowRight } from "lucide-react";
+import { Calendar } from "./Calendar.js";
+import { Popover } from "./Popover.js";
+import { usePopover } from "./usePopover.js";
+import { Button } from "./Button.js";
+import { fieldTriggerProps, useFieldControl } from "./field.js";
+import {
+  boundedDate,
+  isRangeAllowed
+} from "./dateConstraints.js";
+import s from "./DatePicker.module.css";
+function DateRangePicker({
+  value,
+  onChange,
+  label,
+  clearable = true,
+  minDate,
+  maxDate,
+  disabledDate,
+  ...options
+}) {
+  const field = useFieldControl({ ...options, label }), pop = usePopover(field.disabled || field.readOnly), id = useId(), [draft, setDraft] = useState([...value]), [preview, setPreview] = useState(""), [error, setError] = useState("");
+  const constraints = { minDate, maxDate, disabledDate }, complete = !!draft[0] && !!draft[1] && isRangeAllowed(draft, constraints);
+  const close = pop.closeAndFocus;
+  const show = () => {
+    if (field.disabled || field.readOnly) return;
+    if (pop.open) {
+      pop.close();
+      return;
+    }
+    setDraft([...value]);
+    setPreview("");
+    setError("");
+    pop.show();
+  };
+  const select = (next) => {
+    setError("");
+    setPreview("");
+    if (!draft[0] || draft[1]) {
+      setDraft([next, ""]);
+      return;
+    }
+    const range = next < draft[0] ? [next, draft[0]] : [draft[0], next];
+    if (!isRangeAllowed(range, constraints)) {
+      setError("\u8303\u56F4\u5305\u542B\u4E0D\u53EF\u9009\u65E5\u671F\uFF0C\u8BF7\u91CD\u65B0\u9009\u62E9\u3002");
+      return;
+    }
+    setDraft(range);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ...fieldTriggerProps(field),
+        ref: pop.anchor,
+        type: "button",
+        role: "combobox",
+        className: s.trigger,
+        "aria-expanded": pop.open,
+        "aria-haspopup": "dialog",
+        "aria-controls": id,
+        onClick: show,
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown" && !pop.open) {
+            event.preventDefault();
+            show();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { children: value[0] || value[1] ? `${value[0] || "\u5F00\u59CB\u65E5\u671F"} \u2014 ${value[1] || "\u7ED3\u675F\u65E5\u671F"}` : "\u8BF7\u9009\u62E9\u65E5\u671F\u8303\u56F4" }),
+          /* @__PURE__ */ jsx(CalendarDays, {})
+        ]
+      }
+    ),
+    field.name && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "hidden",
+          name: `${field.name}.start`,
+          value: value[0],
+          disabled: field.disabled
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "hidden",
+          name: `${field.name}.end`,
+          value: value[1],
+          disabled: field.disabled
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        anchor: pop.anchor,
+        open: pop.open,
+        onClose: pop.close,
+        label,
+        id,
+        width: 320,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: s.rangeSummary, children: [
+            /* @__PURE__ */ jsx("span", { children: draft[0] || "\u5F00\u59CB\u65E5\u671F" }),
+            /* @__PURE__ */ jsx(ArrowRight, {}),
+            /* @__PURE__ */ jsx("span", { children: draft[1] || "\u7ED3\u675F\u65E5\u671F" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              ...constraints,
+              value: draft[1] || draft[0] || boundedDate("", constraints),
+              range: draft,
+              preview,
+              onChange: select,
+              onHover: (next) => {
+                if (!draft[0] || draft[1]) return;
+                const range = next < draft[0] ? [next, draft[0]] : [draft[0], next];
+                setPreview(next && isRangeAllowed(range, constraints) ? next : "");
+              }
+            },
+            pop.open ? "open" : "closed"
+          ),
+          /* @__PURE__ */ jsx("div", { className: s.rangeError, role: error ? "alert" : void 0, children: error }),
+          /* @__PURE__ */ jsxs("footer", { className: s.footer, children: [
+            clearable ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled: !draft[0] && !draft[1],
+                onClick: () => {
+                  onChange(["", ""]);
+                  close();
+                },
+                children: "\u6E05\u7A7A"
+              }
+            ) : /* @__PURE__ */ jsx("span", {}),
+            /* @__PURE__ */ jsxs("div", { className: s.rangeActions, children: [
+              /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: close, children: "\u53D6\u6D88" }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  variant: "primary",
+                  disabled: !complete,
+                  onClick: () => {
+                    if (complete) {
+                      onChange([...draft]);
+                      close();
+                    }
+                  },
+                  children: "\u786E\u5B9A\u8303\u56F4"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  DateRangePicker
+};

package/components/Descriptions.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+export type DescriptionItem = {
+    key: string;
+    label: ReactNode;
+    children?: ReactNode;
+    span?: number;
+    copyable?: boolean | string;
+    selectable?: boolean;
+};
+export type DescriptionsProps = {
+    items: DescriptionItem[];
+    label?: string;
+    title?: ReactNode;
+    columns?: 1 | 2 | 3 | 4;
+    layout?: "horizontal" | "vertical";
+    bordered?: boolean;
+    size?: "default" | "small";
+    loading?: boolean;
+    emptyText?: ReactNode;
+};
+export declare function Descriptions({ items, label, title, columns, layout, bordered, size, loading, emptyText, }: DescriptionsProps): import("react").JSX.Element;

package/components/Descriptions.js

@@ -0,0 +1,162 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Fragment,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { Check, Copy } from "lucide-react";
+import { IconButton } from "./IconButton.js";
+import { Skeleton } from "./Skeleton.js";
+import s from "./Descriptions.module.css";
+function Descriptions({
+  items,
+  label = "\u8BE6\u60C5",
+  title,
+  columns = 2,
+  layout = "horizontal",
+  bordered = false,
+  size = "default",
+  loading = false,
+  emptyText = "\u2014"
+}) {
+  const [copied, setCopied] = useState(""), [error, setError] = useState(""), timer = useRef(null), alive = useRef(true), request = useRef(0);
+  useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+      request.current++;
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, []);
+  const copy = async (key, text) => {
+    const revision = ++request.current;
+    setCopied("");
+    setError("");
+    if (timer.current) clearTimeout(timer.current);
+    try {
+      await navigator.clipboard.writeText(text);
+      if (!alive.current || revision !== request.current) return;
+      setError("");
+      setCopied(key);
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(""), 1800);
+    } catch {
+      if (alive.current && revision === request.current) setError(key);
+    }
+  };
+  const columnCount = Math.min(4, Math.max(1, Math.trunc(columns) || 1));
+  const spanOf = (item) => Math.min(columnCount, Math.max(1, Math.floor(item.span || 1)));
+  let occupied = 0;
+  const gaps = items.map((item) => {
+    const span = spanOf(item);
+    const gap = span > columnCount - occupied ? columnCount - occupied : 0;
+    occupied = (gap ? span : occupied + span) % columnCount;
+    return gap;
+  });
+  return /* @__PURE__ */ jsxs("section", { "aria-label": label, className: s.root, children: [
+    title && /* @__PURE__ */ jsx("div", { className: s.title, children: title }),
+    /* @__PURE__ */ jsxs(
+      "dl",
+      {
+        className: s.list,
+        "data-bordered": bordered,
+        "data-layout": layout,
+        "data-size": size,
+        "aria-busy": loading || void 0,
+        style: { "--description-columns": columnCount },
+        children: [
+          items.map((item, index) => {
+            const text = typeof item.copyable === "string" ? item.copyable : item.copyable && (typeof item.children === "string" || typeof item.children === "number") ? String(item.children) : void 0;
+            const span = spanOf(item);
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              bordered && gaps[index] > 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: s.filler,
+                  style: { gridColumn: `span ${gaps[index]}` }
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: s.item,
+                  style: { gridColumn: `span ${span}` },
+                  children: [
+                    /* @__PURE__ */ jsx("dt", { children: item.label }),
+                    /* @__PURE__ */ jsxs("dd", { children: [
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          className: s.value,
+                          "data-selectable": item.selectable || void 0,
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                "data-loading": loading,
+                                "aria-hidden": loading || void 0,
+                                inert: loading,
+                                className: s.valueContent,
+                                children: item.children == null || item.children === "" ? emptyText : typeof item.children === "boolean" ? item.children ? "\u662F" : "\u5426" : item.children
+                              }
+                            ),
+                            loading && /* @__PURE__ */ jsx("span", { className: s.loading, children: /* @__PURE__ */ jsx(Skeleton, { width: "75%", height: 14 }) })
+                          ]
+                        }
+                      ),
+                      text !== void 0 && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "data-loading": loading,
+                          "aria-hidden": loading || void 0,
+                          inert: loading,
+                          className: s.copyTool,
+                          children: /* @__PURE__ */ jsx(
+                            IconButton,
+                            {
+                              className: s.copyButton,
+                              disabled: loading,
+                              label: `${copied === item.key ? "\u5DF2\u590D\u5236" : "\u590D\u5236"} ${typeof item.label === "string" ? item.label : item.key}`,
+                              onClick: () => void copy(item.key, text),
+                              children: copied === item.key ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {})
+                            }
+                          )
+                        }
+                      ),
+                      error === item.key && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          role: "alert",
+                          "aria-hidden": loading || void 0,
+                          "data-loading": loading,
+                          className: s.error,
+                          children: "\u590D\u5236\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5\u3002"
+                        }
+                      )
+                    ] })
+                  ]
+                },
+                item.key
+              )
+            ] }, item.key);
+          }),
+          bordered && occupied > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: s.filler,
+              style: { gridColumn: `span ${columnCount - occupied}` }
+            }
+          )
+        ]
+      }
+    ),
+    !items.length && /* @__PURE__ */ jsx("div", { className: s.empty, children: emptyText }),
+    /* @__PURE__ */ jsx("span", { className: s.sr, role: "status", children: loading ? "\u6B63\u5728\u52A0\u8F7D\u8BE6\u60C5" : copied ? "\u5DF2\u590D\u5236" : "" })
+  ] });
+}
+export {
+  Descriptions
+};

package/components/Descriptions.module.css

@@ -0,0 +1,117 @@
+.root {
+  min-width: 0;
+  container-type: inline-size;
+}
+.title {
+  margin-bottom: 16px;
+  font-size: 14px;
+  font-weight: 600;
+}
+.list {
+  display: grid;
+  grid-template-columns: repeat(var(--description-columns), minmax(0, 1fr));
+  gap: 18px 24px;
+  margin: 0;
+}
+.item {
+  display: grid;
+  grid-template-columns: minmax(70px, 100px) minmax(0, 1fr);
+  gap: 12px;
+  min-width: 0;
+  font-size: 12px;
+  line-height: 22px;
+}
+.item dt {
+  min-height: 24px;
+  color: var(--muted);
+  overflow-wrap: anywhere;
+}
+.item dd {
+  min-height: 24px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 6px;
+  min-width: 0;
+  margin: 0;
+}
+.value {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.item .copyButton {
+  width: 24px;
+  height: 24px;
+  flex: 0 0 24px;
+}
+.item .copyButton svg {
+  width: 13px;
+  height: 13px;
+}
+.list[data-layout="vertical"] .item {
+  grid-template-columns: minmax(0, 1fr);
+  gap: 4px;
+}
+.list[data-bordered="true"] {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  overflow: hidden;
+  gap: var(--separator-width);
+  background: var(--separator-color);
+}
+.list[data-bordered="true"] .item {
+  padding: 16px;
+  background: var(--surface);
+}
+.list[data-bordered="true"][data-size="small"] .item {
+  padding: 10px 12px;
+}
+.list[data-size="small"] {
+  gap: 12px 16px;
+}
+.list[data-bordered="true"][data-size="small"] {
+  gap: var(--separator-width);
+}
+.error {
+  color: var(--danger);
+  font-size: 11px;
+  flex-basis: 100%;
+}
+.valueContent[data-loading="true"],
+.copyTool[data-loading="true"],
+.error[data-loading="true"] {
+  visibility: hidden;
+}
+.copyTool {
+  display: inline-flex;
+}
+.loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+}
+.filler {
+  background: var(--surface);
+}
+.empty {
+  padding: 20px;
+  color: var(--muted);
+  font-size: 12px;
+}
+.sr {
+  composes: visuallyHidden from "./Accessibility.module.css";
+}
+@container (max-width: 640px) {
+  .list {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .item {
+    grid-column: span 1 !important;
+  }
+  .filler {
+    display: none;
+  }
+}

package/components/Dialog.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+export declare function Dialog({ open: requestedOpen, onClose, title, children, footer, wide, size, role, descriptionId, busy, variant, }: {
+    open: boolean;
+    onClose(): void;
+    title: string;
+    children: ReactNode;
+    footer?: ReactNode;
+    wide?: boolean;
+    size?: "small" | "medium" | "large";
+    role?: "dialog" | "alertdialog";
+    descriptionId?: string;
+    busy?: boolean;
+    variant?: "default" | "message" | "confirm" | "form";
+}): import("react").ReactPortal;

package/components/Dialog.js

@@ -0,0 +1,125 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useId,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+import { IconButton } from "./IconButton.js";
+import { surfaceMotion, cancelMotion } from "./motion.js";
+import s from "./Dialog.module.css";
+import { FieldContext } from "./field.js";
+import { useModalScrollLock } from "./useModalScrollLock.js";
+import {
+  SurfacePortalContext,
+  useSurfaceHost,
+  useSurfacePortal
+} from "./surfacePortal.js";
+function Dialog({
+  open: requestedOpen,
+  onClose,
+  title,
+  children,
+  footer,
+  wide = false,
+  size = "medium",
+  role = "dialog",
+  descriptionId,
+  busy = false,
+  variant = "default"
+}) {
+  const owner = useSurfacePortal(), open = requestedOpen && owner?.active !== false;
+  const { ref, host, setRef } = useSurfaceHost();
+  const titleId = useId();
+  const previousFocus = useRef(null);
+  const [closing, setClosing] = useState(false);
+  useModalScrollLock(open || closing);
+  const opened = useRef(open);
+  opened.current = open;
+  useEffect(() => {
+    if (requestedOpen && owner?.active === false) onClose();
+  }, [requestedOpen, owner?.active, onClose]);
+  useEffect(() => {
+    const node = ref.current;
+    return () => cancelMotion(node);
+  }, []);
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (open) {
+      element.inert = false;
+      setClosing(false);
+      if (!element.open) {
+        previousFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        element.showModal();
+        element.querySelector(
+          "[data-dialog-initial-focus]:not(:disabled)"
+        )?.focus({ preventScroll: true });
+        if (!element.querySelector("[data-dialog-initial-focus]:not(:disabled)"))
+          element.querySelector(
+            'input:not([disabled]):not([readonly]):not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),textarea:not([disabled]),[role="combobox"]'
+          )?.focus({ preventScroll: true });
+      }
+      void surfaceMotion(element, "enter", "0 4px");
+      return;
+    }
+    if (!element.open) return;
+    setClosing(true);
+    element.inert = true;
+    void surfaceMotion(element, "exit", "0 4px").then((done) => {
+      if (!done || opened.current) return;
+      element.close();
+      const modal = [
+        ...document.querySelectorAll("dialog:modal")
+      ].at(-1);
+      if (previousFocus.current?.isConnected && (!modal || modal.contains(previousFocus.current)))
+        previousFocus.current.focus({ preventScroll: true });
+      setClosing(false);
+    });
+  }, [open]);
+  const backdropDown = useRef(false);
+  const outside = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return event.target === event.currentTarget && (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom);
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx(SurfacePortalContext, { value: { host, active: open }, children: /* @__PURE__ */ jsx(FieldContext, { value: null, children: /* @__PURE__ */ jsxs(
+      "dialog",
+      {
+        ref: setRef,
+        "aria-labelledby": titleId,
+        "aria-describedby": descriptionId,
+        "aria-busy": busy || void 0,
+        role,
+        "data-variant": variant,
+        className: `${s.dialog} ${wide || size === "large" ? s.wide : ""} ${size === "small" ? s.small : ""} ${closing ? s.closing : ""}`,
+        onCancel: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (!busy) onClose();
+        },
+        onMouseDown: (e) => {
+          backdropDown.current = outside(e);
+        },
+        onClick: (e) => {
+          if (!busy && backdropDown.current && outside(e)) onClose();
+          backdropDown.current = false;
+        },
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: s.dialogHeader, children: [
+            /* @__PURE__ */ jsx("h2", { id: titleId, children: title }),
+            /* @__PURE__ */ jsx(IconButton, { label: "\u5173\u95ED\u5F39\u7A97", onClick: onClose, disabled: busy, children: /* @__PURE__ */ jsx(X, {}) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: s.dialogBody, children }),
+          footer && /* @__PURE__ */ jsx("footer", { className: s.dialogFooter, children: footer })
+        ]
+      }
+    ) }) }),
+    document.body
+  );
+}
+export {
+  Dialog
+};

package/components/Dialog.module.css

@@ -0,0 +1,88 @@
+.dialog {
+  width: min(var(--dialog-width), calc(100vw - 32px));
+  max-height: calc(100dvh - var(--dialog-inset));
+  padding: 0;
+  color: var(--fg);
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: calc(var(--radius) + 3px);
+  box-shadow: var(--shadow-dialog);
+  overflow: auto;
+}
+
+.dialog::backdrop {
+  background: var(--overlay);
+  backdrop-filter: blur(3px);
+  animation: fade-in var(--popup-enter);
+}
+.dialogHeader {
+  border-bottom: var(--dialog-header-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--dialog-header-padding);
+}
+.dialogBody {
+  padding: var(--dialog-body-padding);
+}
+.dialogBody > p {
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.8;
+}
+.dialogFooter {
+  flex-wrap: wrap;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 14px 22px;
+  border-top: var(--separator-width) var(--separator-style)
+    var(--separator-color);
+  background: var(--canvas);
+}
+.wide {
+  width: min(var(--dialog-wide-width), calc(100vw - 32px));
+}
+.small {
+  width: min(420px, calc(100vw - 32px));
+}
+.dialog[data-variant="message"] .dialogHeader {
+  border: 0;
+  padding-bottom: 12px;
+}
+.dialog[data-variant="message"] .dialogBody {
+  padding-top: 0;
+  padding-bottom: 24px;
+}
+.dialog[data-variant="message"] .dialogFooter {
+  border: 0;
+  background: transparent;
+  padding-top: 0;
+  padding-bottom: 18px;
+}
+.closing {
+  pointer-events: none;
+}
+.dialog.closing::backdrop {
+  background: transparent;
+  backdrop-filter: blur(0);
+  transition:
+    background var(--popup-exit),
+    backdrop-filter var(--popup-exit);
+}
+
+.dialogHeader h2 {
+  font-size: var(--dialog-title-size);
+}
+@media (max-width: 600px) {
+  .dialog {
+    max-height: calc(100dvh - 24px);
+  }
+  .dialogBody {
+    padding: 18px;
+  }
+  .dialogHeader,
+  .dialogFooter {
+    padding: 14px 18px;
+  }
+}