@robert-stackflow/oneui 0.0.0-stage → 0.1.0

package/components/MultiSelect.module.css

@@ -0,0 +1,61 @@
+.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;
+}
+.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 {
+  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,113 @@
+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,
+      "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;
+}

package/components/Page.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+export declare function Page({ title, description, actions, children, }: {
+    title: string;
+    description?: string;
+    actions?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/components/Page.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import s from "./Page.module.css";
+function Page({
+  title,
+  description,
+  actions,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: s.page, children: [
+    /* @__PURE__ */ jsxs("header", { className: s.heading, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { children: title }),
+        description && /* @__PURE__ */ jsx("p", { children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: s.actions, children: actions })
+    ] }),
+    children
+  ] });
+}
+export {
+  Page
+};

package/components/Page.module.css

@@ -0,0 +1,44 @@
+.page {
+  max-width: var(--page-max-width);
+  margin: var(--page-margin);
+  padding: var(--page-inset);
+  animation: page-enter var(--motion-page) var(--ease-page);
+}
+.heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: var(--page-heading-align);
+  gap: 20px;
+  margin-bottom: 30px;
+}
+.heading p {
+  color: var(--muted);
+  font-size: 12px;
+  margin-top: 8px;
+}
+.actions {
+  display: flex;
+  gap: 8px;
+}
+
+.heading h1 {
+  font-size: var(--page-title-size);
+  line-height: var(--page-title-line-height);
+}
+@media (min-width: 1450px) {
+  .page {
+    padding-top: var(--page-wide-top);
+  }
+}
+@media (max-width: 600px) {
+  .heading {
+    gap: 14px;
+    flex-wrap: wrap;
+  }
+  .heading h1 {
+    font-size: var(--page-small-title);
+  }
+  .actions {
+    flex-wrap: wrap;
+  }
+}

package/components/Pagination.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+export declare function Pagination({ page, pageSize, total, onPageChange, onPageSizeChange, pageSizes, summary, resetPageOnSizeChange, }: {
+    page: number;
+    pageSize: number;
+    total: number;
+    onPageChange(page: number): void;
+    onPageSizeChange?(size: number): void;
+    pageSizes?: number[];
+    summary?: ReactNode;
+    resetPageOnSizeChange?: boolean;
+}): import("react").JSX.Element;

package/components/Pagination.js

@@ -0,0 +1,160 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useState } from "react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight
+} from "lucide-react";
+import { Button } from "./Button.js";
+import { Select } from "./Select.js";
+import control from "./Control.module.css";
+import s from "./Pagination.module.css";
+function Pagination({
+  page,
+  pageSize,
+  total,
+  onPageChange,
+  onPageSizeChange,
+  pageSizes = [5, 10, 20, 50],
+  summary,
+  resetPageOnSizeChange = true
+}) {
+  const size = Math.max(1, pageSize), pages = Math.max(1, Math.ceil(total / size)), current = Math.min(pages, Math.max(1, page)), id = useId(), [draft, setDraft] = useState(String(current));
+  useEffect(() => setDraft(String(current)), [current]);
+  const jump = () => {
+    const parsed = Number(draft);
+    if (!draft.trim() || !Number.isFinite(parsed)) {
+      setDraft(String(current));
+      return;
+    }
+    const target = Math.min(pages, Math.max(1, Math.trunc(parsed)));
+    setDraft(String(target));
+    onPageChange(target);
+  };
+  const visible = [
+    .../* @__PURE__ */ new Set([
+      1,
+      ...Array.from({ length: 3 }, (_, i) => current - 1 + i).filter(
+        (n) => n > 1 && n < pages
+      ),
+      pages
+    ])
+  ].sort((a, b) => a - b);
+  return /* @__PURE__ */ jsxs("nav", { className: s.pagination, "aria-label": "\u5206\u9875", children: [
+    /* @__PURE__ */ jsxs("span", { className: s.summary, children: [
+      total ? (current - 1) * size + 1 + "\u2013" + Math.min(current * size, total) : 0,
+      " ",
+      "/ ",
+      total,
+      " \u9879",
+      summary
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: s.controls, children: [
+      onPageSizeChange && /* @__PURE__ */ jsx(
+        Select,
+        {
+          label: "\u6BCF\u9875\u6761\u6570",
+          value: String(size),
+          onChange: (v) => {
+            onPageSizeChange(Number(v));
+            if (resetPageOnSizeChange) onPageChange(1);
+          },
+          options: [.../* @__PURE__ */ new Set([...pageSizes, size])].sort((a, b) => a - b).map((n) => ({ value: String(n), label: n + " / \u9875" }))
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: s.pages, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: s.arrow,
+            "aria-label": "\u7B2C\u4E00\u9875",
+            disabled: current === 1,
+            onClick: () => onPageChange(1),
+            children: /* @__PURE__ */ jsx(ChevronsLeft, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: s.arrow,
+            "aria-label": "\u4E0A\u4E00\u9875",
+            disabled: current === 1,
+            onClick: () => onPageChange(current - 1),
+            children: /* @__PURE__ */ jsx(ChevronLeft, {})
+          }
+        ),
+        visible.map((n, i) => /* @__PURE__ */ jsxs("span", { className: s.number, children: [
+          i > 0 && n - visible[i - 1] > 1 && /* @__PURE__ */ jsx("span", { className: s.ellipsis, children: "\u2026" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: s.page,
+              "aria-label": "\u7B2C " + n + " \u9875",
+              "aria-current": n === current ? "page" : void 0,
+              variant: n === current ? "primary" : "ghost",
+              onClick: () => onPageChange(n),
+              children: n
+            }
+          )
+        ] }, n)),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: s.arrow,
+            "aria-label": "\u4E0B\u4E00\u9875",
+            disabled: current === pages,
+            onClick: () => onPageChange(current + 1),
+            children: /* @__PURE__ */ jsx(ChevronRight, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: s.arrow,
+            "aria-label": "\u6700\u540E\u4E00\u9875",
+            disabled: current === pages,
+            onClick: () => onPageChange(pages),
+            children: /* @__PURE__ */ jsx(ChevronsRight, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "form",
+        {
+          className: s.jump,
+          onSubmit: (e) => {
+            e.preventDefault();
+            jump();
+          },
+          children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: id, children: "\u8DF3\u81F3" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id,
+                className: control.surface,
+                "aria-label": "\u8DF3\u8F6C\u9875\u7801",
+                "aria-description": "\u8F93\u5165\u9875\u7801\u540E\u6309\u56DE\u8F66\u786E\u8BA4",
+                inputMode: "numeric",
+                value: draft,
+                onChange: (e) => setDraft(e.target.value),
+                onBlur: jump,
+                onKeyDown: (e) => {
+                  if (e.key === "Escape") {
+                    e.preventDefault();
+                    setDraft(String(current));
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: "\u9875" })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  Pagination
+};

package/components/Pagination.module.css

@@ -0,0 +1,70 @@
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+  padding: 16px 0;
+}
+.summary {
+  color: var(--muted);
+  white-space: nowrap;
+  font-size: 12px;
+}
+.controls {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+.controls > [role="combobox"] {
+  min-width: 90px;
+}
+.pages,
+.number {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+.pages .arrow,
+.pages .page {
+  height: var(--control-height);
+  min-height: var(--control-height);
+  min-width: var(--control-height);
+  padding: 0 7px;
+}
+.arrow svg {
+  width: 14px;
+  height: 14px;
+}
+.ellipsis {
+  padding: 0 3px;
+  color: var(--muted);
+}
+.jump {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--muted);
+  font-size: 12px;
+}
+.jump input {
+  width: 48px;
+  text-align: center;
+  padding: 0 5px;
+  color: var(--fg);
+}
+@media (max-width: 650px) {
+  .controls {
+    gap: 10px;
+    width: 100%;
+    justify-content: flex-start;
+  }
+  .pagination {
+    gap: 10px;
+  }
+  .pages {
+    gap: 2px;
+  }
+}

package/components/PasswordField.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithoutRef } from "react";
+export declare function PasswordField({ value, onChange, label, strength, error, hint, ...props }: Omit<ComponentPropsWithoutRef<"input">, "value" | "onChange" | "type"> & {
+    value: string;
+    onChange(value: string): void;
+    label?: string;
+    strength?: 0 | 1 | 2 | 3 | 4;
+    error?: string;
+    hint?: string;
+}): import("react").JSX.Element;

package/components/PasswordField.js

@@ -0,0 +1,101 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { FormField } from "./FormField.js";
+import { joinIds, useFieldControl } from "./field.js";
+import s from "./PasswordField.module.css";
+function PasswordField({
+  value,
+  onChange,
+  label,
+  strength,
+  error,
+  hint,
+  ...props
+}) {
+  const field = useFieldControl({ ...props, label, error, hint }), input = useRef(null), [visible, setVisible] = useState(false), [caps, setCaps] = useState(false), strengthLabels = ["\u672A\u8BC4\u4F30", "\u5F31", "\u4E00\u822C", "\u8F83\u5F3A", "\u5F3A"];
+  const control = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: s.control,
+        "data-disabled": field.disabled,
+        "aria-invalid": field.invalid,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...props,
+              ref: input,
+              id: field.id,
+              name: field.name,
+              type: visible ? "text" : "password",
+              value,
+              required: field.required,
+              disabled: field.disabled,
+              readOnly: field.readOnly,
+              autoComplete: props.autoComplete || "current-password",
+              "aria-invalid": field.invalid,
+              "aria-describedby": joinIds(
+                field.descriptionId,
+                caps ? field.id + "-caps" : void 0
+              ),
+              onChange: (event) => onChange(event.target.value),
+              onKeyDown: (event) => {
+                setCaps(event.getModifierState("CapsLock"));
+                props.onKeyDown?.(event);
+              },
+              onKeyUp: (event) => {
+                setCaps(event.getModifierState("CapsLock"));
+                props.onKeyUp?.(event);
+              },
+              onBlur: (event) => {
+                setCaps(false);
+                props.onBlur?.(event);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: field.disabled,
+              "aria-label": visible ? "\u9690\u85CF\u5BC6\u7801" : "\u663E\u793A\u5BC6\u7801",
+              "aria-pressed": visible,
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: () => {
+                const start = input.current?.selectionStart, end = input.current?.selectionEnd;
+                setVisible((value2) => !value2);
+                requestAnimationFrame(() => {
+                  input.current?.focus({ preventScroll: true });
+                  if (start != null && end != null)
+                    input.current?.setSelectionRange(start, end);
+                });
+              },
+              children: visible ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {})
+            }
+          )
+        ]
+      }
+    ),
+    caps && /* @__PURE__ */ jsx("p", { className: s.caps, id: field.id + "-caps", role: "status", children: "\u5927\u5199\u9501\u5B9A\u5DF2\u5F00\u542F" }),
+    strength !== void 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: s.strength,
+        role: "meter",
+        "aria-label": "\u5BC6\u7801\u5F3A\u5EA6",
+        "aria-valuemin": 0,
+        "aria-valuemax": 4,
+        "aria-valuenow": strength,
+        "aria-valuetext": strengthLabels[strength],
+        "data-strength": strength,
+        children: [1, 2, 3, 4].map((level) => /* @__PURE__ */ jsx("span", { "data-active": level <= strength }, level))
+      }
+    )
+  ] });
+  return field.wrapped ? control : /* @__PURE__ */ jsx(FormField, { ...field, children: control });
+}
+export {
+  PasswordField
+};