@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/OptionList.module.css

@@ -0,0 +1,12 @@
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--menu-item-spacing, 1px);
+}
+.stack > * {
+  flex-shrink: 0;
+}
+.stack.stack > [data-menu-item],
+.stack.stack > * > [data-menu-item] {
+  margin: 0;
+}

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,102 @@
+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,
+        "data-readonly": field.readOnly || void 0,
+        "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
+};

package/components/PasswordField.module.css

@@ -0,0 +1,64 @@
+.control {
+  composes: surface from "./Control.module.css";
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0 8px 0 10px;
+}
+.control input {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  font-size: inherit;
+}
+.control button {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+  border: 0;
+  padding: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--muted);
+}
+.control button:hover {
+  background: var(--hover);
+  color: var(--fg);
+}
+.control svg {
+  width: 16px;
+  height: 16px;
+}
+.caps {
+  font-size: 11px;
+  color: var(--warning);
+  margin: 0;
+}
+.strength {
+  display: flex;
+  gap: 4px;
+  height: 4px;
+}
+.strength span {
+  height: 4px;
+  flex: 1;
+  border-radius: 3px;
+  background: var(--line);
+}
+.strength[data-strength="1"] [data-active="true"] {
+  background: var(--danger);
+}
+.strength[data-strength="2"] [data-active="true"] {
+  background: var(--warning);
+}
+.strength[data-strength="3"] [data-active="true"],
+.strength[data-strength="4"] [data-active="true"] {
+  background: var(--success);
+}

package/components/Picker.module.css

@@ -0,0 +1,52 @@
+.panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  max-height: min(540px, 80vh);
+}
+.footer {
+  display: flex;
+  align-items: center;
+  color: var(--muted);
+  font-size: 12px;
+  min-height: 20px;
+}
+.preview {
+  display: grid;
+  place-items: center;
+  font-size: 16px;
+  line-height: 18px;
+  width: 18px;
+  flex-shrink: 0;
+  font-family: "Segoe UI Emoji", "Segoe UI Symbol", var(--ui-font);
+}
+.loading {
+  display: grid;
+  place-items: center;
+  height: 320px;
+}
+.variantPanel {
+  height: 320px;
+  overflow: auto;
+}
+.variantGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
+  gap: 5px;
+  margin-top: 14px;
+}
+.cell {
+  display: grid;
+  place-items: center;
+  height: 38px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  background: transparent;
+  font-size: 23px;
+  font-family: "Segoe UI Emoji", "Segoe UI Symbol", var(--ui-font);
+}
+.cell:hover {
+  background: var(--hover);
+}

package/components/PinInput.d.ts

@@ -0,0 +1,13 @@
+import { type ComponentPropsWithRef } from "react";
+export declare function PinInput({ value, onChange, onComplete, length, format, mask, groups, label, error, hint, ref: forwardedRef, ...props }: Omit<ComponentPropsWithRef<"input">, "value" | "onChange" | "type" | "maxLength" | "pattern" | "size"> & {
+    value: string;
+    onChange(value: string): void;
+    onComplete?(value: string): void;
+    length?: number;
+    format?: "numeric" | "alphanumeric";
+    mask?: boolean;
+    groups?: number[];
+    label?: string;
+    error?: string;
+    hint?: string;
+}): import("react").JSX.Element;