@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/SelectTrigger.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DisclosureChevron } from "./DisclosureChevron.js";
+import s from "./Select.module.css";
+import t from "./SelectTrigger.module.css";
+function SelectTrigger({
+  expanded,
+  children,
+  icon,
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "combobox",
+      ...props,
+      "aria-expanded": expanded,
+      className: s.select + " " + t.trigger + " " + className,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: t.value, children: [
+          icon,
+          children
+        ] }),
+        /* @__PURE__ */ jsx(DisclosureChevron, { expanded })
+      ]
+    }
+  );
+}
+export {
+  SelectTrigger
+};

package/components/SelectTrigger.module.css

@@ -0,0 +1,24 @@
+.trigger {
+  height: var(--control-height);
+  min-height: var(--control-height);
+  flex-shrink: 0;
+  max-width: 100%;
+}
+.value {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.value > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.value > svg {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}

package/components/SelectionTag.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export declare function SelectionTag({ label, icon, disabled, onRemove, removeLabel, }: {
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    onRemove?(): void;
+    removeLabel?: string;
+}): import("react").JSX.Element;

package/components/SelectionTag.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import s from "./TagInput.module.css";
+function SelectionTag({
+  label,
+  icon,
+  disabled,
+  onRemove,
+  removeLabel = "\u5220\u9664\u6807\u7B7E " + label
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: s.tag, children: [
+    icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx("span", { children: label }),
+    onRemove && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled,
+        "aria-label": removeLabel,
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: (event) => {
+          event.stopPropagation();
+          onRemove();
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Backspace" || event.key === "Delete") {
+            event.preventDefault();
+            event.stopPropagation();
+            onRemove();
+          }
+        },
+        children: /* @__PURE__ */ jsx(X, {})
+      }
+    )
+  ] });
+}
+export {
+  SelectionTag
+};

package/components/SettingRow.d.ts

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

package/components/SettingRow.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import s from "./SettingRow.module.css";
+function SettingRow({
+  title,
+  description,
+  children,
+  divider = true
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: s.settingRow, "data-divider": divider, children: [
+    /* @__PURE__ */ jsxs("div", { className: s.settingCopy, children: [
+      /* @__PURE__ */ jsx("h3", { children: title }),
+      description && /* @__PURE__ */ jsx("p", { children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: s.settingControl, children })
+  ] });
+}
+export {
+  SettingRow
+};

package/components/SettingRow.module.css

@@ -0,0 +1,44 @@
+.settingRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  min-height: var(--row-height);
+  padding: 15px 0;
+}
+.settingRow + .settingRow[data-divider="true"] {
+  border-top: var(--separator-width) var(--separator-style)
+    var(--separator-color);
+}
+.settingCopy {
+  flex: 1;
+  min-width: 0;
+}
+.settingCopy h3 {
+  font-size: 13px;
+  font-weight: 400;
+}
+.settingCopy p {
+  font-size: 11px;
+  color: var(--muted);
+  margin-top: 4px;
+  max-width: 440px;
+}
+.settingControl {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  flex-shrink: 0;
+  max-width: 55%;
+}
+@media (max-width: 760px) {
+  .settingRow {
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+  .settingControl {
+    margin-left: auto;
+    max-width: 100%;
+  }
+}

package/components/SettingsLayout.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+import { type IndicatorGroup } from "./Indicator";
+export declare function SettingsLayout({ value, onChange, children, groups, }: {
+    value: string;
+    onChange(value: string): void;
+    children: ReactNode;
+    groups?: IndicatorGroup<string>[];
+}): import("react").JSX.Element;
+export declare function SettingsCard({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/components/SettingsLayout.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Settings2, Palette } from "lucide-react";
+import { Indicator } from "./Indicator.js";
+import { Select } from "./Select.js";
+import s from "./SettingsLayout.module.css";
+function SettingsLayout({
+  value,
+  onChange,
+  children,
+  groups
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: s.layout, "data-grouped": groups ? true : void 0, children: [
+    /* @__PURE__ */ jsx(
+      Indicator,
+      {
+        label: "\u8BBE\u7F6E\u5206\u7C7B",
+        value,
+        onChange,
+        groups: groups ?? [
+          {
+            id: "settings",
+            items: [
+              {
+                value: "general",
+                label: "\u901A\u7528",
+                icon: /* @__PURE__ */ jsx(Settings2, { size: 17 })
+              },
+              {
+                value: "appearance",
+                label: "\u5916\u89C2",
+                icon: /* @__PURE__ */ jsx(Palette, { size: 17 })
+              }
+            ]
+          }
+        ]
+      }
+    ),
+    groups && /* @__PURE__ */ jsx("div", { className: s.mobileCategories, children: /* @__PURE__ */ jsx(
+      Select,
+      {
+        label: "\u8BBE\u7F6E\u5206\u7C7B",
+        value,
+        onChange,
+        options: groups.flatMap(
+          (group) => group.items.map((item) => ({
+            value: item.value,
+            label: (group.label ? group.label + " \xB7 " : "") + item.label
+          }))
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: s.panel, children })
+  ] });
+}
+function SettingsCard({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: s.card, children });
+}
+export {
+  SettingsCard,
+  SettingsLayout
+};

package/components/SettingsLayout.module.css

@@ -0,0 +1,68 @@
+.layout {
+  display: grid;
+  grid-template-columns: 140px minmax(0, 1fr);
+  gap: 32px;
+  align-items: start;
+}
+.layout > nav {
+  position: sticky;
+  top: 0;
+}
+.layout[data-grouped] {
+  grid-template-columns: 164px minmax(0, 1fr);
+}
+.mobileCategories {
+  display: none;
+  min-width: 0;
+}
+.panel {
+  min-width: 0;
+}
+.panel > h2 {
+  font-size: 16px;
+  margin: 2px 0 18px;
+  font-weight: 600;
+}
+.card {
+  padding: 0 18px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+  box-shadow: var(--card-shadow, none);
+  margin-bottom: 28px;
+}
+.card > :last-child {
+  border-bottom: 0;
+}
+@media (max-width: 800px) {
+  .layout[data-grouped] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .layout[data-grouped] > nav {
+    display: none;
+  }
+  .mobileCategories {
+    display: block;
+  }
+  .mobileCategories > button {
+    width: 100%;
+  }
+  .layout {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
+  .layout > nav {
+    position: relative;
+  }
+  .layout > nav > div {
+    display: flex;
+    gap: 8px;
+  }
+  .layout > nav button {
+    width: auto;
+    min-width: 100px;
+  }
+  .card {
+    padding: 0 14px;
+  }
+}

package/components/ShortcutInput.d.ts

@@ -0,0 +1,8 @@
+export declare function ShortcutInput({ value, onChange, label, disabled, error, validate, }: {
+    value: string;
+    onChange(value: string): void;
+    label: string;
+    disabled?: boolean;
+    error?: string;
+    validate?: (value: string) => string | undefined;
+}): import("react").JSX.Element;

package/components/ShortcutInput.js

@@ -0,0 +1,131 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FieldMessages } from "./FieldMessages.js";
+import { FieldLabel } from "./FieldLabel.js";
+import { useEffect, useId, useRef, useState } from "react";
+import { X, Keyboard } from "lucide-react";
+import s from "./ShortcutInput.module.css";
+function ShortcutInput({
+  value,
+  onChange,
+  label,
+  disabled = false,
+  error,
+  validate
+}) {
+  const id = useId(), input = useRef(null), [recording, setRecording] = useState(false), [draft, setDraft] = useState(""), [localError, setLocalError] = useState(""), accepted = useRef(false);
+  useEffect(() => {
+    const stop = () => setRecording(false);
+    window.addEventListener("blur", stop);
+    return () => window.removeEventListener("blur", stop);
+  }, []);
+  const message = error || localError;
+  return /* @__PURE__ */ jsxs("div", { className: s.field, children: [
+    /* @__PURE__ */ jsx(FieldLabel, { htmlFor: id, label }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: s.control,
+        "data-disabled": disabled,
+        "aria-invalid": !!message,
+        children: [
+          /* @__PURE__ */ jsx(Keyboard, {}),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: input,
+              id,
+              readOnly: true,
+              disabled,
+              value: recording ? draft : value,
+              placeholder: recording ? "\u6309\u4E0B\u7EC4\u5408\u952E" : "\u70B9\u51FB\u5F55\u5165\u5FEB\u6377\u952E",
+              "aria-invalid": !!message,
+              "aria-describedby": message ? id + "-error" : void 0,
+              onFocus: () => {
+                setRecording(true);
+                setDraft("");
+                accepted.current = false;
+                setLocalError("");
+              },
+              onBlur: () => setRecording(false),
+              onPointerDown: () => {
+                if (document.activeElement === input.current && !recording) {
+                  setRecording(true);
+                  setDraft("");
+                  accepted.current = false;
+                }
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Tab" && !e.ctrlKey && !e.altKey && !e.metaKey)
+                  return;
+                e.preventDefault();
+                e.stopPropagation();
+                if (e.key === "Escape") {
+                  setRecording(false);
+                  input.current?.blur();
+                  return;
+                }
+                if (["Control", "Shift", "Alt", "Meta"].includes(e.key)) {
+                  setDraft(
+                    [
+                      e.ctrlKey ? "Ctrl" : "",
+                      e.altKey ? "Alt" : "",
+                      e.shiftKey ? "Shift" : "",
+                      e.metaKey ? "Win" : ""
+                    ].filter(Boolean).join(" + ")
+                  );
+                  return;
+                }
+                if ((e.key === "Backspace" || e.key === "Delete") && !e.ctrlKey && !e.altKey && !e.metaKey) {
+                  onChange("");
+                  setDraft("");
+                  accepted.current = true;
+                  return;
+                }
+                const key = e.code.startsWith("Key") ? e.code.slice(3) : e.code.startsWith("Digit") ? e.code.slice(5) : e.key === " " ? "Space" : e.key;
+                if (!/^(?:[A-Z0-9]|F(?:[1-9]|1\d|2[0-4])|Space|Tab|Enter|Backspace|Delete|Home|End|PageUp|PageDown|ArrowUp|ArrowDown|ArrowLeft|ArrowRight)$/i.test(
+                  key
+                ))
+                  return;
+                const next = [
+                  e.ctrlKey ? "Ctrl" : "",
+                  e.altKey ? "Alt" : "",
+                  e.shiftKey ? "Shift" : "",
+                  e.metaKey ? "Win" : "",
+                  key
+                ].filter(Boolean).join("+"), problem = validate?.(next);
+                setLocalError(problem || "");
+                if (problem) return;
+                onChange(next);
+                setDraft(next);
+                accepted.current = true;
+              },
+              onKeyUp: () => {
+                if (accepted.current) {
+                  setRecording(false);
+                  input.current?.blur();
+                }
+              }
+            }
+          ),
+          value && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled,
+              "aria-label": "\u6E05\u9664" + label,
+              onClick: () => {
+                onChange("");
+                setLocalError("");
+              },
+              children: /* @__PURE__ */ jsx(X, {})
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(FieldMessages, { id, error: message })
+  ] });
+}
+export {
+  ShortcutInput
+};

package/components/ShortcutInput.module.css

@@ -0,0 +1,39 @@
+.field {
+  composes: field from "./FormField.module.css";
+}
+.control {
+  composes: surface from "./Control.module.css";
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 0 10px;
+}
+.control > svg {
+  width: 16px;
+  height: 16px;
+  color: var(--muted);
+}
+.control input {
+  border: 0;
+  outline: 0;
+  background: transparent;
+  width: 100%;
+  min-width: 0;
+  font-size: inherit;
+}
+.control button {
+  display: grid;
+  place-items: center;
+  border: 0;
+  background: transparent;
+  padding: 3px;
+  border-radius: 4px;
+  color: var(--muted);
+}
+.control button:hover {
+  background: var(--hover);
+}
+.control button svg {
+  width: 13px;
+  height: 13px;
+}

package/components/Skeleton.d.ts

@@ -0,0 +1,5 @@
+export declare function Skeleton({ width, height, rounded, }: {
+    width?: number | string;
+    height?: number | string;
+    rounded?: boolean;
+}): import("react").JSX.Element;

package/components/Skeleton.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import s from "./Skeleton.module.css";
+function Skeleton({
+  width = "100%",
+  height = 12,
+  rounded = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: s.skeleton,
+      style: { width, height, borderRadius: rounded ? "50%" : void 0 }
+    }
+  );
+}
+export {
+  Skeleton
+};

package/components/Skeleton.module.css

@@ -0,0 +1,27 @@
+.skeleton {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  border-radius: 5px;
+  background: var(--soft);
+}
+.skeleton::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--fg) 4%, transparent),
+    transparent
+  );
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+@keyframes shimmer {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}

package/components/SkeletonRows.d.ts

@@ -0,0 +1,4 @@
+export declare function SkeletonRows({ count, label, }: {
+    count?: number;
+    label?: string;
+}): import("react").JSX.Element;

package/components/SkeletonRows.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Skeleton } from "./Skeleton.js";
+import s from "./SkeletonRows.module.css";
+function SkeletonRows({
+  count = 3,
+  label = "\u6B63\u5728\u52A0\u8F7D"
+}) {
+  return /* @__PURE__ */ jsx("div", { role: "status", "aria-label": label, className: s.skeletonRows, children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsxs("div", { className: s.skeletonRow, children: [
+    /* @__PURE__ */ jsx(Skeleton, { width: 38, height: 38 }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Skeleton, { width: `${75 - i * 12}%` }),
+      /* @__PURE__ */ jsx(Skeleton, { width: "38%", height: 9 })
+    ] }),
+    /* @__PURE__ */ jsx(Skeleton, { width: 45 })
+  ] }, i)) });
+}
+export {
+  SkeletonRows
+};

package/components/SkeletonRows.module.css

@@ -0,0 +1,19 @@
+.skeletonRows {
+  width: 100%;
+}
+.skeletonRow {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  padding: 16px 0;
+}
+.skeletonRow + .skeletonRow {
+  border-top: var(--separator-width) var(--separator-style)
+    var(--separator-color);
+}
+.skeletonRow > div {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}

package/components/SkinTonePicker.d.ts

@@ -0,0 +1,4 @@
+export declare function SkinTonePicker({ value, onChange, }: {
+    value: number;
+    onChange(value: number): void;
+}): import("react").JSX.Element;

package/components/SkinTonePicker.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import s from "./SkinTonePicker.module.css";
+const tones = [
+  { value: 0, label: "\u9ED8\u8BA4", color: "#f7c94b" },
+  { value: 1, label: "\u6D45\u8272", color: "#f3d6bc" },
+  { value: 2, label: "\u4E2D\u6D45", color: "#deb496" },
+  { value: 3, label: "\u4E2D\u7B49", color: "#bb8663" },
+  { value: 4, label: "\u4E2D\u6DF1", color: "#966445" },
+  { value: 5, label: "\u6DF1\u8272", color: "#634637" }
+];
+function SkinTonePicker({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: s.bar, children: [
+    /* @__PURE__ */ jsx("span", { children: "\u80A4\u8272" }),
+    /* @__PURE__ */ jsx("div", { className: s.tones, role: "radiogroup", "aria-label": "Emoji \u80A4\u8272", children: tones.map((t) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "radio",
+        "aria-label": t.label + "\u80A4\u8272",
+        "aria-checked": value === t.value,
+        title: t.label,
+        tabIndex: value === t.value ? 0 : -1,
+        onClick: () => onChange(t.value),
+        onKeyDown: (e) => {
+          const delta = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0;
+          if (!delta) return;
+          e.preventDefault();
+          const next = (value + delta + 6) % 6;
+          onChange(next);
+          e.currentTarget.parentElement.children[next].focus();
+        },
+        children: /* @__PURE__ */ jsx("span", { style: { background: t.color } })
+      },
+      t.value
+    )) })
+  ] });
+}
+export {
+  SkinTonePicker
+};