@robert-stackflow/oneui 0.0.0-stage → 0.1.0

package/components/TableColumnVisibility.js

@@ -0,0 +1,76 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { moveMenuFocus } from "./menuFocus.js";
+import { useId, useRef } from "react";
+import { Columns3 } from "lucide-react";
+import { Button } from "./Button.js";
+import { MenuItem } from "./MenuItem.js";
+import { Popover } from "./Popover.js";
+import { usePopover } from "./usePopover.js";
+import s from "./DataTable.module.css";
+function TableColumnVisibility({
+  columns,
+  value,
+  onChange,
+  label = "\u663E\u793A\u5217"
+}) {
+  const pop = usePopover(), id = useId(), root = useRef(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref: pop.anchor,
+        "aria-label": label,
+        "aria-haspopup": "menu",
+        "aria-expanded": pop.open,
+        "aria-controls": id,
+        onClick: pop.toggle,
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown" && !pop.open) {
+            event.preventDefault();
+            pop.toggle();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(Columns3, {}),
+          "\u663E\u793A\u5217"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        anchor: pop.anchor,
+        open: pop.open,
+        onClose: pop.close,
+        id,
+        role: "menu",
+        label,
+        width: 230,
+        onKeyDown: (event) => moveMenuFocus(event, root.current),
+        children: /* @__PURE__ */ jsx("div", { ref: root, className: s.columnMenu, children: columns.map((column) => {
+          const selected = value.includes(column.key);
+          return /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              role: "menuitemcheckbox",
+              "aria-checked": selected,
+              label: column.label,
+              selected,
+              selection: "checkbox",
+              disabled: column.hideable === false || selected && value.length === 1,
+              onClick: () => onChange(
+                selected ? value.filter((key) => key !== column.key) : columns.filter(
+                  (item) => value.includes(item.key) || item.key === column.key
+                ).map((item) => item.key)
+              )
+            },
+            column.key
+          );
+        }) })
+      }
+    )
+  ] });
+}
+export {
+  TableColumnVisibility
+};

package/components/Tabs.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+export declare function Tabs({ tabs, value, onChange, label, variant, }: {
+    tabs: {
+        id: string;
+        label: string;
+        content?: ReactNode;
+        disabled?: boolean;
+    }[];
+    value: string;
+    onChange: (v: string) => void;
+    label?: string;
+    variant?: "underline" | "segment";
+}): import("react").JSX.Element;

package/components/Tabs.js

@@ -0,0 +1,49 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import s from "./Tabs.module.css";
+import { useId } from "react";
+import { TabList } from "./TabList.js";
+function Tabs({
+  tabs,
+  value,
+  onChange,
+  label = "\u9009\u9879",
+  variant = "underline"
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TabList,
+      {
+        value,
+        onChange,
+        label,
+        variant: variant === "segment" ? "blocked" : "underlined",
+        options: tabs.map((t) => ({
+          value: t.id,
+          label: t.label,
+          disabled: t.disabled,
+          id: id + t.id,
+          panelId: t.content ? id + "panel" + t.id : void 0
+        }))
+      }
+    ),
+    tabs.map(
+      (t) => t.content && /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "tabpanel",
+          id: id + "panel" + t.id,
+          "aria-labelledby": id + t.id,
+          hidden: value !== t.id,
+          tabIndex: 0,
+          className: s.panel,
+          children: t.content
+        },
+        t.id
+      )
+    )
+  ] });
+}
+export {
+  Tabs
+};

package/components/Tabs.module.css

@@ -0,0 +1,3 @@
+.panel {
+  padding: 20px 0;
+}

package/components/TagInput.d.ts

@@ -0,0 +1,11 @@
+import { type FieldOptions } from "./field";
+export declare function TagInput({ value, onChange, label, placeholder, maxTags, maxTagLength, caseSensitive, validateTag, ...props }: FieldOptions & {
+    value: string[];
+    onChange(value: string[]): void;
+    label?: string;
+    placeholder?: string;
+    maxTags?: number;
+    maxTagLength?: number;
+    caseSensitive?: boolean;
+    validateTag?(tag: string): string | undefined;
+}): import("react").JSX.Element;

package/components/TagInput.js

@@ -0,0 +1,154 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { X } from "lucide-react";
+import { FormField } from "./FormField.js";
+import { joinIds, useFieldControl } from "./field.js";
+import s from "./TagInput.module.css";
+function TagInput({
+  value,
+  onChange,
+  label,
+  placeholder = "\u8F93\u5165\u540E\u6309\u56DE\u8F66",
+  maxTags = Infinity,
+  maxTagLength = 32,
+  caseSensitive = false,
+  validateTag,
+  ...props
+}) {
+  const field = useFieldControl({ ...props, label }), input = useRef(null), root = useRef(null), [draft, setDraft] = useState(""), [error, setError] = useState("");
+  const add = (texts) => {
+    if (field.disabled || field.readOnly) return;
+    const next = [...value];
+    let problem = "";
+    for (const raw of texts) {
+      const tag = raw.trim();
+      if (!tag) continue;
+      if (tag.length > maxTagLength) {
+        problem = "\u5355\u4E2A\u6807\u7B7E\u6700\u591A " + maxTagLength + " \u4E2A\u5B57\u7B26\u3002";
+        continue;
+      }
+      const custom = validateTag?.(tag);
+      if (custom) {
+        problem = custom;
+        continue;
+      }
+      if (next.some(
+        (item) => caseSensitive ? item === tag : item.toLowerCase() === tag.toLowerCase()
+      )) {
+        problem = "\u8BE5\u6807\u7B7E\u5DF2\u5B58\u5728\u3002";
+        continue;
+      }
+      if (next.length >= maxTags) {
+        problem = "\u6700\u591A\u53EF\u6DFB\u52A0 " + maxTags + " \u4E2A\u6807\u7B7E\u3002";
+        continue;
+      }
+      next.push(tag);
+    }
+    if (next.length !== value.length) {
+      onChange(next);
+      setDraft("");
+    }
+    setError(problem);
+  };
+  const remove = (index) => {
+    if (field.disabled || field.readOnly) return;
+    onChange(value.filter((_, i) => i !== index));
+    setError("");
+    input.current?.focus();
+  };
+  const control = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: root,
+        className: s.control,
+        "data-disabled": field.disabled,
+        "aria-invalid": field.invalid || !!error,
+        onClick: () => input.current?.focus(),
+        children: [
+          value.map((tag, index) => /* @__PURE__ */ jsxs("span", { className: s.tag, children: [
+            /* @__PURE__ */ jsx("span", { children: tag }),
+            !field.readOnly && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled: field.disabled,
+                "aria-label": "\u5220\u9664\u6807\u7B7E " + tag,
+                onClick: (event) => {
+                  event.stopPropagation();
+                  remove(index);
+                },
+                onKeyDown: (event) => {
+                  if (event.key === "Backspace" || event.key === "Delete") {
+                    event.preventDefault();
+                    remove(index);
+                  }
+                },
+                children: /* @__PURE__ */ jsx(X, {})
+              }
+            )
+          ] }, tag)),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: input,
+              id: field.id,
+              "aria-label": field.label || void 0,
+              disabled: field.disabled,
+              readOnly: field.readOnly,
+              "aria-required": field.required || void 0,
+              "aria-invalid": field.invalid || !!error,
+              "aria-describedby": joinIds(
+                field.descriptionId,
+                error ? field.id + "-tag-error" : void 0
+              ),
+              value: draft,
+              placeholder: field.readOnly ? void 0 : placeholder,
+              maxLength: maxTagLength + 1,
+              onChange: (event) => {
+                setDraft(event.target.value);
+                setError("");
+              },
+              onKeyDown: (event) => {
+                if (event.nativeEvent.isComposing) return;
+                if (event.key === "Enter" || event.key === "," || event.key === ";") {
+                  event.preventDefault();
+                  add([draft]);
+                } else if (event.key === "Backspace" && !draft && value.length)
+                  root.current?.querySelectorAll("button")[value.length - 1]?.focus();
+                else if (event.key === "Escape") {
+                  event.preventDefault();
+                  setDraft("");
+                  setError("");
+                }
+              },
+              onPaste: (event) => {
+                if (field.readOnly) return;
+                const text = event.clipboardData.getData("text/plain");
+                if (/[\n,;，；]/.test(text)) {
+                  event.preventDefault();
+                  add(text.split(/[\n,;，；]+/));
+                }
+              }
+            }
+          ),
+          field.name && value.map((tag) => /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "hidden",
+              name: field.name,
+              value: tag,
+              disabled: field.disabled
+            },
+            tag
+          ))
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx("p", { id: field.id + "-tag-error", className: s.error, role: "alert", children: error })
+  ] });
+  return field.wrapped ? control : /* @__PURE__ */ jsx(FormField, { ...field, children: control });
+}
+export {
+  TagInput
+};

package/components/TagInput.module.css

@@ -0,0 +1,64 @@
+.control {
+  composes: surface from "./Control.module.css";
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 5px;
+  padding: 4px 6px;
+}
+.control.control {
+  height: auto;
+  min-height: var(--control-height);
+}
+.control > input:not([type="hidden"]) {
+  flex: 1;
+  min-width: 90px;
+  width: 90px;
+  height: 24px;
+  padding: 0 4px;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  font-size: inherit;
+}
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  min-height: 23px;
+  padding: 2px 5px 2px 8px;
+  background: var(--selected);
+  border-radius: 5px;
+  font-size: 11px;
+  line-height: 17px;
+}
+.tag > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tag button {
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  border-radius: 3px;
+  color: var(--muted);
+}
+.tag button:hover {
+  background: var(--hover);
+  color: var(--fg);
+}
+.tag svg {
+  width: 12px;
+  height: 12px;
+}
+.error {
+  font-size: 11px;
+  color: var(--danger);
+  margin: 0;
+}

package/components/Textarea.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithRef } from "react";
+export declare function Textarea({ label, error, hint, ...props }: ComponentPropsWithRef<"textarea"> & {
+    label?: string;
+    error?: string;
+    hint?: string;
+}): import("react").JSX.Element;

package/components/Textarea.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { FormField } from "./FormField.js";
+import { fieldInputProps, useFieldControl } from "./field.js";
+import s from "./Textarea.module.css";
+function Textarea({
+  label,
+  error,
+  hint,
+  ...props
+}) {
+  const field = useFieldControl({ ...props, label, error, hint });
+  const control = /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ...props,
+      ...fieldInputProps(field),
+      className: [s.textarea, props.className].filter(Boolean).join(" ")
+    }
+  );
+  return field.wrapped ? control : /* @__PURE__ */ jsx(FormField, { ...field, children: control });
+}
+export {
+  Textarea
+};

package/components/Textarea.module.css

@@ -0,0 +1,9 @@
+.textarea {
+  composes: surface from "./Control.module.css";
+  width: 100%;
+  height: auto;
+  min-height: 88px;
+  resize: vertical;
+  padding: 8px 10px;
+  line-height: 1.6;
+}

package/components/ThemePicker.d.ts

@@ -0,0 +1,6 @@
+type Mode = "system" | "light" | "dark";
+export declare function ThemePicker({ value, onChange, }: {
+    value: Mode;
+    onChange(value: Mode): void;
+}): import("react").JSX.Element;
+export {};

package/components/ThemePicker.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Monitor, Sun, Moon } from "lucide-react";
+import s from "./ThemePicker.module.css";
+function ThemePicker({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx("div", { className: s.choices, role: "group", "aria-label": "\u989C\u8272\u6A21\u5F0F", children: [
+    { id: "system", label: "\u8DDF\u968F\u7CFB\u7EDF", Icon: Monitor },
+    { id: "light", label: "\u6D45\u8272", Icon: Sun },
+    { id: "dark", label: "\u6DF1\u8272", Icon: Moon }
+  ].map(({ id, label, Icon }) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: s.choice,
+      "aria-pressed": value === id,
+      onClick: () => onChange(id),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: s.preview, "data-mode": id, "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxs("span", { className: s.window, children: [
+            /* @__PURE__ */ jsxs("span", { className: s.bar, children: [
+              /* @__PURE__ */ jsx("i", {}),
+              /* @__PURE__ */ jsx("i", {}),
+              /* @__PURE__ */ jsx("i", {})
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: s.body, children: [
+              /* @__PURE__ */ jsxs("span", { className: s.rail, children: [
+                /* @__PURE__ */ jsx("b", {}),
+                /* @__PURE__ */ jsx("b", {}),
+                /* @__PURE__ */ jsx("b", {})
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: s.content, children: [
+                /* @__PURE__ */ jsx("i", {}),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("b", {}),
+                  /* @__PURE__ */ jsx("b", {})
+                ] }),
+                /* @__PURE__ */ jsx("i", {}),
+                /* @__PURE__ */ jsx("i", {})
+              ] })
+            ] })
+          ] }),
+          id === "system" && /* @__PURE__ */ jsxs("span", { className: s.second, children: [
+            /* @__PURE__ */ jsxs("span", { className: s.bar, children: [
+              /* @__PURE__ */ jsx("i", {}),
+              /* @__PURE__ */ jsx("i", {}),
+              /* @__PURE__ */ jsx("i", {})
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: s.body, children: [
+              /* @__PURE__ */ jsxs("span", { className: s.rail, children: [
+                /* @__PURE__ */ jsx("b", {}),
+                /* @__PURE__ */ jsx("b", {})
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: s.content, children: [
+                /* @__PURE__ */ jsx("i", {}),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("b", {}),
+                  /* @__PURE__ */ jsx("b", {})
+                ] }),
+                /* @__PURE__ */ jsx("i", {})
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: s.caption, children: [
+          /* @__PURE__ */ jsx(Icon, {}),
+          label,
+          /* @__PURE__ */ jsx("span", { className: s.check, "data-selected": value === id, children: /* @__PURE__ */ jsx(Check, {}) })
+        ] })
+      ]
+    },
+    id
+  )) });
+}
+export {
+  ThemePicker
+};

package/components/ThemePicker.module.css

@@ -0,0 +1,178 @@
+.choices {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+  max-width: 680px;
+  margin-bottom: 24px;
+}
+.choice {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  border-radius: 12px;
+}
+.preview {
+  display: block;
+  position: relative;
+  height: 130px;
+  padding: 15px 17px 0;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--soft);
+  transition:
+    border-color var(--motion-hover),
+    box-shadow var(--motion-hover);
+}
+.choice:hover .preview {
+  border-color: color-mix(in srgb, var(--fg) 25%, var(--surface));
+}
+.choice[aria-pressed="true"] .preview {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent);
+}
+.window,
+.second {
+  --mini-bg: #fff;
+  --mini-side: #f5f5f5;
+  --mini-line: #e7e7e7;
+  display: block;
+  height: 112px;
+  overflow: hidden;
+  background: var(--mini-bg);
+  border: 1px solid var(--mini-line);
+  border-radius: 7px;
+  box-shadow: 0 5px 15px #0000000c;
+}
+.preview[data-mode="dark"] .window,
+.second {
+  --mini-bg: #262626;
+  --mini-side: #202020;
+  --mini-line: #3b3b3b;
+}
+.bar {
+  height: 17px;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  padding-left: 7px;
+  border-bottom: 1px solid var(--mini-line);
+}
+.bar i {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--mini-line);
+}
+.body {
+  display: grid;
+  grid-template-columns: 30% 1fr;
+  height: 100%;
+}
+.rail {
+  display: grid;
+  align-content: start;
+  gap: 8px;
+  background: var(--mini-side);
+  padding: 12px 6px;
+  border-right: 1px solid var(--mini-line);
+}
+.rail b {
+  height: 4px;
+  border-radius: 3px;
+  background: var(--mini-line);
+}
+.rail b:first-child {
+  height: 10px;
+}
+.content {
+  padding: 13px 10px;
+  display: grid;
+  align-content: start;
+  gap: 7px;
+}
+.content > i {
+  height: 4px;
+  border-radius: 3px;
+  background: var(--mini-line);
+}
+.content > i:first-child {
+  width: 50%;
+  height: 6px;
+  margin-bottom: 3px;
+}
+.content > span {
+  display: flex;
+  gap: 5px;
+}
+.content b {
+  width: 50%;
+  height: 23px;
+  background: var(--mini-side);
+  border: 1px solid var(--mini-line);
+  border-radius: 3px;
+}
+.preview[data-mode="system"] .window {
+  width: 83%;
+  transform: translate(-4px, -3px);
+}
+.second {
+  position: absolute;
+  left: 30%;
+  right: 10px;
+  top: 42px;
+}
+.caption {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 11px 1px 0;
+  font-size: 12px;
+}
+.caption > svg {
+  width: 14px;
+  height: 14px;
+  color: var(--muted);
+}
+.check {
+  margin-left: auto;
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--line);
+  border-radius: 50%;
+}
+.check svg {
+  width: 11px;
+  height: 11px;
+  opacity: 0;
+}
+.check[data-selected="true"] {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--on-accent);
+}
+.check[data-selected="true"] svg {
+  opacity: 1;
+}
+@media (max-width: 650px) {
+  .choices {
+    gap: 10px;
+  }
+  .preview {
+    height: 100px;
+    padding: 12px 8px 0;
+  }
+  .window {
+    height: 90px;
+  }
+  .caption {
+    font-size: 11px;
+  }
+  .second {
+    left: 25%;
+    top: 36px;
+  }
+}

package/components/ThemeProvider.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import { type AppearancePreferences } from "./appearance";
+export type UITheme = "minimal" | "blue";
+export type ColorMode = "light" | "dark" | "system";
+/** One document-level provider; persistence belongs to the host application. */
+export declare function ThemeProvider({ theme: suppliedTheme, mode: suppliedMode, appearance, children, }: {
+    theme?: UITheme;
+    mode?: ColorMode;
+    appearance?: AppearancePreferences;
+    children: ReactNode;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;