@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/PinInput.js

@@ -0,0 +1,173 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { FormField } from "./FormField.js";
+import { useFieldControl } from "./field.js";
+import s from "./PinInput.module.css";
+function PinInput({
+  value,
+  onChange,
+  onComplete,
+  length = 6,
+  format = "numeric",
+  mask = false,
+  groups,
+  label,
+  error,
+  hint,
+  ref: forwardedRef,
+  ...props
+}) {
+  const field = useFieldControl({ ...props, label, error, hint }), input = useRef(null), root = useRef(null), lastComplete = useRef(""), pendingCaret = useRef(void 0), [focused, setFocused] = useState(false), [active, setActive] = useState(0), size = Math.max(1, Math.min(16, Math.trunc(length) || 6));
+  useEffect(() => {
+    if (value.length < size) lastComplete.current = "";
+  }, [value, size]);
+  useLayoutEffect(() => {
+    if (pendingCaret.current === void 0) return;
+    const caret = Math.min(pendingCaret.current, value.length);
+    input.current?.setSelectionRange(caret, caret);
+    pendingCaret.current = void 0;
+  }, [value]);
+  const clean = (text) => (format === "numeric" ? text.replace(/[^0-9]/g, "") : text.replace(/[^a-z0-9]/gi, "")).slice(0, size);
+  const emit = (next, caret) => {
+    pendingCaret.current = caret;
+    onChange(next);
+    setActive(Math.min(caret, size - 1));
+    if (next === value) {
+      input.current?.setSelectionRange(
+        Math.min(caret, value.length),
+        Math.min(caret, value.length)
+      );
+      pendingCaret.current = void 0;
+    }
+    if (next.length === size && lastComplete.current !== next) {
+      lastComplete.current = next;
+      onComplete?.(next);
+    } else if (next.length < size) lastComplete.current = "";
+  };
+  const boundaries = /* @__PURE__ */ new Set();
+  let offset = 0;
+  for (const group of groups || [size]) {
+    offset += group;
+    boundaries.add(offset);
+  }
+  const control = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: root,
+      className: s.root,
+      "data-disabled": field.disabled,
+      "data-readonly": field.readOnly || void 0,
+      onPointerDown: (event) => {
+        if (event.button !== 0 || field.disabled) return;
+        event.preventDefault();
+        input.current?.focus({ preventScroll: true });
+        const slots = [
+          ...root.current.querySelectorAll("[data-pin-slot]")
+        ];
+        let index = 0, distance = Infinity;
+        slots.forEach((slot, i) => {
+          const rect = slot.getBoundingClientRect(), d = (event.clientX - rect.left - rect.width / 2) ** 2 + (event.clientY - rect.top - rect.height / 2) ** 2;
+          if (d < distance) {
+            distance = d;
+            index = i;
+          }
+        });
+        const caret = Math.min(index < 0 ? size - 1 : index, value.length);
+        input.current?.setSelectionRange(
+          caret,
+          Math.min(caret + 1, value.length)
+        );
+        setActive(Math.min(caret, size - 1));
+      },
+      children: [
+        Array.from({ length: size }, (_, index) => /* @__PURE__ */ jsxs("span", { className: s.unit, "aria-hidden": "true", children: [
+          index > 0 && boundaries.has(index) && /* @__PURE__ */ jsx("span", { className: s.separator, children: "\u2013" }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              "data-pin-slot": true,
+              className: s.slot,
+              "data-focus": focused && active === index,
+              "aria-invalid": field.invalid,
+              children: [
+                mask && value[index] ? "\u2022" : value[index],
+                focused && active === index && !value[index] && /* @__PURE__ */ jsx("i", { className: s.caret })
+              ]
+            }
+          )
+        ] }, index)),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...props,
+            ref: (node) => {
+              input.current = node;
+              if (typeof forwardedRef === "function") forwardedRef(node);
+              else if (forwardedRef) forwardedRef.current = node;
+            },
+            id: field.id,
+            name: field.name,
+            className: s.input,
+            type: "text",
+            autoComplete: props.autoComplete || "one-time-code",
+            inputMode: format === "numeric" ? "numeric" : "text",
+            spellCheck: false,
+            required: field.required,
+            disabled: field.disabled,
+            readOnly: field.readOnly,
+            minLength: size,
+            maxLength: size,
+            pattern: format === "numeric" ? "[0-9]{" + size + "}" : "[a-zA-Z0-9]{" + size + "}",
+            value,
+            "aria-invalid": field.invalid,
+            "aria-describedby": field.descriptionId,
+            onFocus: (event) => {
+              setFocused(true);
+              setActive(
+                Math.min(event.currentTarget.selectionStart || 0, size - 1)
+              );
+              props.onFocus?.(event);
+            },
+            onBlur: (event) => {
+              setFocused(false);
+              props.onBlur?.(event);
+            },
+            onSelect: (event) => {
+              setActive(
+                Math.min(event.currentTarget.selectionStart || 0, size - 1)
+              );
+              props.onSelect?.(event);
+            },
+            onChange: (event) => {
+              if (!field.readOnly)
+                emit(clean(event.target.value), event.target.selectionStart || 0);
+            },
+            onPaste: (event) => {
+              props.onPaste?.(event);
+              if (event.defaultPrevented || field.readOnly) return;
+              event.preventDefault();
+              const text = clean(
+                event.clipboardData.getData("text/plain") || event.clipboardData.getData("text")
+              );
+              if (!text) return;
+              const start = event.currentTarget.selectionStart || 0, end = event.currentTarget.selectionEnd || start;
+              emit(
+                text.length === size ? text : clean(value.slice(0, start) + text + value.slice(end)),
+                text.length === size ? size : start + text.length
+              );
+            }
+          }
+        )
+      ]
+    }
+  );
+  return field.wrapped ? control : /* @__PURE__ */ jsx(FormField, { ...field, children: control });
+}
+export {
+  PinInput
+};

package/components/PinInput.module.css

@@ -0,0 +1,72 @@
+.root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  align-self: flex-start;
+  max-width: 100%;
+  flex-wrap: wrap;
+}
+.unit {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+.slot {
+  composes: surface from "./Control.module.css";
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 39px;
+  height: 44px;
+  font-size: 19px;
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+}
+.separator {
+  color: var(--muted);
+  padding: 0 2px;
+}
+.input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: transparent !important;
+  color: transparent !important;
+  caret-color: transparent !important;
+  letter-spacing: 20px;
+  font-size: 19px;
+  box-shadow: none !important;
+}
+.input::selection {
+  background: transparent;
+  color: transparent;
+}
+.root[data-disabled="true"] .slot {
+  opacity: 0.45;
+}
+.caret {
+  position: absolute;
+  display: block;
+  height: 19px;
+  width: 1.5px;
+  background: var(--fg);
+  animation: pin-caret 1.1s step-end infinite;
+}
+@keyframes pin-caret {
+  50% {
+    opacity: 0;
+  }
+}
+
+.input:focus,
+.input:focus-visible {
+  outline: none !important;
+  outline-offset: 0 !important;
+  box-shadow: none !important;
+  border: 0 !important;
+}

package/components/Placeholder.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+declare const presets: {
+    empty: {
+        icon: import("lucide-react").LucideIcon;
+        title: string;
+    };
+    search: {
+        icon: import("lucide-react").LucideIcon;
+        title: string;
+    };
+    error: {
+        icon: import("lucide-react").LucideIcon;
+        title: string;
+    };
+    offline: {
+        icon: import("lucide-react").LucideIcon;
+        title: string;
+    };
+    folder: {
+        icon: import("lucide-react").LucideIcon;
+        title: string;
+    };
+};
+export type PlaceholderVariant = keyof typeof presets;
+export declare function Placeholder({ variant, title, description, children, }: {
+    variant?: PlaceholderVariant;
+    title?: string;
+    description?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export {};

package/components/Placeholder.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  Inbox,
+  Search,
+  TriangleAlert,
+  WifiOff,
+  FolderOpen
+} from "lucide-react";
+import { EmptyState } from "./EmptyState.js";
+const presets = {
+  empty: { icon: Inbox, title: "\u6682\u65E0\u5185\u5BB9" },
+  search: { icon: Search, title: "\u6CA1\u6709\u5339\u914D\u7684\u7ED3\u679C" },
+  error: { icon: TriangleAlert, title: "\u5185\u5BB9\u52A0\u8F7D\u5931\u8D25" },
+  offline: { icon: WifiOff, title: "\u5F53\u524D\u5904\u4E8E\u79BB\u7EBF\u72B6\u6001" },
+  folder: { icon: FolderOpen, title: "\u6587\u4EF6\u5939\u4E3A\u7A7A" }
+};
+function Placeholder({
+  variant = "empty",
+  title,
+  description,
+  children
+}) {
+  const preset = presets[variant], Icon = preset.icon;
+  return /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      icon: /* @__PURE__ */ jsx(Icon, {}),
+      title: title || preset.title,
+      description,
+      children
+    }
+  );
+}
+export {
+  Placeholder
+};

package/components/Popconfirm.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentPropsWithRef, type ReactElement, type ReactNode } from "react";
+export type PopconfirmProps = {
+    children: ReactElement<ComponentPropsWithRef<"button">>;
+    title: string;
+    description?: ReactNode;
+    onConfirm(signal: AbortSignal): void | Promise<void>;
+    onCancel?(): void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?(open: boolean): void;
+    disabled?: boolean;
+    confirmText?: string;
+    cancelText?: string;
+    tone?: "default" | "danger";
+    icon?: ReactNode | false;
+};
+export declare function Popconfirm({ children, title, description, onConfirm, onCancel, open: controlled, defaultOpen, onOpenChange, disabled, confirmText, cancelText, tone, icon, }: PopconfirmProps): import("react").JSX.Element;

package/components/Popconfirm.js

@@ -0,0 +1,159 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  cloneElement,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { CircleAlert } from "lucide-react";
+import { Popover } from "./Popover.js";
+import { Button } from "./Button.js";
+import s from "./Popconfirm.module.css";
+function Popconfirm({
+  children,
+  title,
+  description,
+  onConfirm,
+  onCancel,
+  open: controlled,
+  defaultOpen = false,
+  onOpenChange,
+  disabled = false,
+  confirmText = "\u786E\u8BA4",
+  cancelText = "\u53D6\u6D88",
+  tone = "default",
+  icon
+}) {
+  const [localOpen, setLocalOpen] = useState(defaultOpen), [pending, setPending] = useState(false), [error, setError] = useState(""), anchor = useRef(null), session = useRef(null), alive = useRef(true), id = useId(), confirm = useRef(null);
+  const blocked = disabled || !!children.props.disabled, open = (controlled ?? localOpen) && !blocked;
+  const change = (next) => {
+    if (controlled === void 0) setLocalOpen(next);
+    onOpenChange?.(next);
+  };
+  const abort = () => {
+    session.current?.abort();
+    session.current = null;
+    setPending(false);
+  };
+  const close = (cancel = true, restoreFocus = true) => {
+    abort();
+    change(false);
+    setError("");
+    if (cancel) onCancel?.();
+    if (restoreFocus) anchor.current?.focus({ preventScroll: true });
+  };
+  useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+      session.current?.abort();
+      session.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    if (!open) {
+      session.current?.abort();
+      session.current = null;
+      setPending(false);
+      setError("");
+    }
+  }, [open]);
+  useEffect(() => {
+    if (error && !pending) confirm.current?.focus({ preventScroll: true });
+  }, [error, pending]);
+  const submit = async () => {
+    if (session.current || !open) return;
+    const controller = new AbortController();
+    session.current = controller;
+    setPending(true);
+    setError("");
+    try {
+      await onConfirm(controller.signal);
+      if (!alive.current || controller.signal.aborted || session.current !== controller)
+        return;
+      session.current = null;
+      setPending(false);
+      change(false);
+      anchor.current?.focus({ preventScroll: true });
+    } catch (reason) {
+      if (!alive.current || controller.signal.aborted || session.current !== controller)
+        return;
+      session.current = null;
+      setPending(false);
+      setError(reason instanceof Error ? reason.message : "\u64CD\u4F5C\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5\u3002");
+      confirm.current?.focus({ preventScroll: true });
+    }
+  };
+  const childRef = children.props.ref;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    cloneElement(children, {
+      ref: (node) => {
+        anchor.current = node;
+        if (typeof childRef === "function") return childRef(node);
+        else if (childRef) childRef.current = node;
+      },
+      disabled: blocked,
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      "aria-controls": id,
+      onClick: (event) => {
+        children.props.onClick?.(event);
+        if (event.defaultPrevented || blocked) return;
+        if (open) close();
+        else {
+          setError("");
+          change(true);
+        }
+      }
+    }),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        anchor,
+        open,
+        onClose: () => close(true, false),
+        label: title,
+        role: "alertdialog",
+        id,
+        descriptionId: description ? id + "-description" : void 0,
+        width: 320,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: s.content,
+            "data-tone": tone,
+            "aria-busy": pending || void 0,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: s.copy, children: [
+                icon !== false && /* @__PURE__ */ jsx("span", { className: s.icon, "aria-hidden": "true", children: icon || /* @__PURE__ */ jsx(CircleAlert, {}) }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("div", { className: s.title, children: title }),
+                  description && /* @__PURE__ */ jsx("div", { className: s.description, id: id + "-description", children: description })
+                ] })
+              ] }),
+              error && /* @__PURE__ */ jsx("div", { role: "alert", className: s.error, children: error }),
+              /* @__PURE__ */ jsxs("div", { className: s.actions, children: [
+                /* @__PURE__ */ jsx(Button, { size: "small", "data-autofocus": true, onClick: () => close(), children: pending ? "\u53D6\u6D88\u64CD\u4F5C" : cancelText }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    ref: confirm,
+                    size: "small",
+                    variant: tone === "danger" ? "danger" : "primary",
+                    loading: pending,
+                    onClick: () => void submit(),
+                    children: confirmText
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  Popconfirm
+};

package/components/Popconfirm.module.css

@@ -0,0 +1,49 @@
+.content {
+  padding: 12px;
+}
+.copy {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+}
+.copy > div {
+  min-width: 0;
+}
+.icon {
+  display: flex;
+  padding-top: 1px;
+  color: var(--warning);
+}
+.icon svg {
+  width: 18px;
+  height: 18px;
+}
+.content[data-tone="danger"] .icon {
+  color: var(--danger);
+}
+.title {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 20px;
+  overflow-wrap: anywhere;
+}
+.description {
+  margin-top: 5px;
+  font-size: 12px;
+  line-height: 1.65;
+  color: var(--muted);
+  overflow-wrap: anywhere;
+}
+.error {
+  margin-top: 10px;
+  color: var(--danger);
+  font-size: 12px;
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 16px;
+}

package/components/Popover.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode, type RefObject } from "react";
+export declare function Popover({ open: requestedOpen, onClose, anchor, children, width, label, role, id, onKeyDown, descriptionId, autoFocus, matchAnchorWidth, className, }: {
+    open: boolean;
+    onClose(): void;
+    anchor: RefObject<HTMLElement | null>;
+    children: ReactNode;
+    width?: number;
+    label: string;
+    role?: string;
+    id?: string;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    descriptionId?: string;
+    autoFocus?: boolean;
+    matchAnchorWidth?: boolean;
+    className?: string;
+}): import("react").ReactPortal;