@robert-stackflow/oneui 0.0.0-stage → 0.1.0

package/components/AppearanceSettings.js

@@ -0,0 +1,201 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, RotateCcw } from "lucide-react";
+import { ThemeStylePicker } from "./ThemeStylePicker.js";
+import { ThemePicker } from "./ThemePicker.js";
+import { ColorField } from "./ColorField.js";
+import { SettingsCard } from "./SettingsLayout.js";
+import { SettingRow } from "./SettingRow.js";
+import { Select } from "./Select.js";
+import { NumberInput } from "./NumberInput.js";
+import { Switch } from "./Switch.js";
+import { Button } from "./Button.js";
+import { useToast } from "./ToastProvider.js";
+import { appearanceDefaults } from "./appearance.js";
+import s from "./AppearanceSettings.module.css";
+const toastOptions = [
+  { value: "top-left", label: "\u9876\u90E8\u5DE6\u4FA7" },
+  { value: "top-center", label: "\u9876\u90E8\u4E2D\u95F4" },
+  { value: "top-right", label: "\u9876\u90E8\u53F3\u4FA7" },
+  { value: "bottom-left", label: "\u5E95\u90E8\u5DE6\u4FA7" },
+  { value: "bottom-center", label: "\u5E95\u90E8\u4E2D\u95F4" },
+  { value: "bottom-right", label: "\u5E95\u90E8\u53F3\u4FA7" }
+];
+const tooltipOptions = [
+  { value: "top", label: "\u4E0A\u65B9" },
+  { value: "bottom", label: "\u4E0B\u65B9" },
+  { value: "left", label: "\u5DE6\u4FA7" },
+  { value: "right", label: "\u53F3\u4FA7" }
+];
+function AppearanceSettings({
+  settings,
+  dark,
+  onChange: update,
+  onReset
+}) {
+  const notify = useToast();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("h2", { children: "\u5916\u89C2" }),
+    /* @__PURE__ */ jsx(SettingsCard, { children: /* @__PURE__ */ jsx(SettingRow, { title: "\u754C\u9762\u98CE\u683C", children: /* @__PURE__ */ jsx(
+      ThemeStylePicker,
+      {
+        value: settings.designTheme,
+        onChange: (designTheme) => update({
+          ...appearanceDefaults(designTheme),
+          mode: settings.mode,
+          motion: settings.motion
+        })
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(
+      ThemePicker,
+      {
+        value: settings.mode,
+        onChange: (mode) => update({ mode })
+      }
+    ),
+    /* @__PURE__ */ jsxs(SettingsCard, { children: [
+      /* @__PURE__ */ jsx(SettingRow, { title: "\u5F3A\u8C03\u8272", children: /* @__PURE__ */ jsx("div", { className: s.swatches, children: [
+        settings.designTheme === "blue" ? "#5269b6" : "#303030",
+        "#4479d8",
+        "#6d61bd",
+        settings.designTheme === "blue" ? "#397c67" : "#41886c",
+        "#b67838",
+        "#b55875"
+      ].map((color) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-label": color === "#397c67" || color === "#41886c" ? "\u677E\u7EFF" : `\u5F3A\u8C03\u8272 ${color}`,
+          "aria-pressed": settings.accent === color,
+          style: { background: color },
+          onClick: () => update({ accent: color }),
+          children: settings.accent === color && /* @__PURE__ */ jsx(Check, {})
+        },
+        color
+      )) }) }),
+      /* @__PURE__ */ jsx(SettingRow, { title: "\u81EA\u5B9A\u4E49\u5F3A\u8C03\u8272", children: /* @__PURE__ */ jsx(
+        ColorField,
+        {
+          label: "\u81EA\u5B9A\u4E49\u5F3A\u8C03\u8272",
+          value: settings.accent,
+          onChange: (accent) => update({ accent })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(SettingRow, { title: "\u80CC\u666F\u989C\u8272", children: /* @__PURE__ */ jsx(
+        ColorField,
+        {
+          label: "\u80CC\u666F\u989C\u8272",
+          value: dark ? settings.darkBackground : settings.lightBackground,
+          onChange: (color) => update(
+            dark ? { darkBackground: color } : { lightBackground: color }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx(SettingRow, { title: "\u6587\u5B57\u989C\u8272", children: /* @__PURE__ */ jsx(
+        ColorField,
+        {
+          label: "\u6587\u5B57\u989C\u8272",
+          value: dark ? settings.darkForeground : settings.lightForeground,
+          onChange: (color) => update(
+            dark ? { darkForeground: color } : { lightForeground: color }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx(SettingRow, { title: "\u5B57\u4F53", children: /* @__PURE__ */ jsx(
+        Select,
+        {
+          label: "\u5B57\u4F53",
+          value: settings.font,
+          onChange: (font) => update({ font }),
+          options: [
+            { value: "system", label: "\u7CFB\u7EDF\u9ED8\u8BA4" },
+            { value: "Segoe UI", label: "Segoe UI" },
+            { value: "Microsoft YaHei UI", label: "\u5FAE\u8F6F\u96C5\u9ED1 UI" },
+            { value: "sans-serif", label: "\u65E0\u886C\u7EBF" }
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(SettingRow, { title: "\u95F4\u8DDD", children: /* @__PURE__ */ jsx(
+        Select,
+        {
+          label: "\u754C\u9762\u95F4\u8DDD",
+          value: settings.density,
+          onChange: (density) => update({ density }),
+          options: [
+            { value: "comfortable", label: "\u8212\u9002" },
+            { value: "compact", label: "\u7D27\u51D1" }
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(SettingRow, { title: "\u5706\u89D2", children: [
+        /* @__PURE__ */ jsx(
+          NumberInput,
+          {
+            label: "\u5706\u89D2",
+            min: 4,
+            max: 16,
+            value: settings.radius,
+            onChange: (radius) => update({ radius })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: s.muted, children: "px" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("h2", { children: "\u63D0\u793A\u4E0E\u52A8\u6548" }),
+    /* @__PURE__ */ jsxs(SettingsCard, { children: [
+      /* @__PURE__ */ jsx(
+        SettingRow,
+        {
+          title: "Tooltip \u4F4D\u7F6E",
+          description: "\u7A7A\u95F4\u4E0D\u8DB3\u65F6\u81EA\u52A8\u907F\u8BA9\u7A97\u53E3\u8FB9\u7F18\u3002",
+          children: /* @__PURE__ */ jsx(
+            Select,
+            {
+              label: "Tooltip \u4F4D\u7F6E",
+              value: settings.tooltipPlacement,
+              onChange: (tooltipPlacement) => update({
+                tooltipPlacement
+              }),
+              options: tooltipOptions
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(SettingRow, { title: "Toast \u4F4D\u7F6E", children: /* @__PURE__ */ jsx(
+        Select,
+        {
+          label: "Toast \u4F4D\u7F6E",
+          value: settings.toastPosition,
+          onChange: (toastPosition) => update({
+            toastPosition
+          }),
+          options: toastOptions
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        SettingRow,
+        {
+          title: "\u754C\u9762\u52A8\u6548",
+          description: "\u540C\u65F6\u9075\u5FAA\u7CFB\u7EDF\u51CF\u5C11\u52A8\u6001\u6548\u679C\u7684\u504F\u597D\u3002",
+          children: /* @__PURE__ */ jsx(
+            Switch,
+            {
+              label: "\u542F\u7528\u754C\u9762\u52A8\u6548",
+              checked: settings.motion,
+              onChange: (motion) => update({ motion })
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: s.controlRow, children: [
+      /* @__PURE__ */ jsx(Button, { onClick: () => notify("\u63D0\u793A\u663E\u793A\u5728\u4F60\u9009\u62E9\u7684\u4F4D\u7F6E"), children: "\u9884\u89C8\u63D0\u793A" }),
+      /* @__PURE__ */ jsxs(Button, { variant: "ghost", onClick: onReset, children: [
+        /* @__PURE__ */ jsx(RotateCcw, {}),
+        "\u6062\u590D\u9ED8\u8BA4\u5916\u89C2"
+      ] })
+    ] })
+  ] });
+}
+export {
+  AppearanceSettings
+};

package/components/AppearanceSettings.module.css

@@ -0,0 +1,32 @@
+.controlRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.swatches {
+  display: flex;
+  gap: 9px;
+}
+.swatches button {
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  padding: 3px;
+  border: 1px solid #0001;
+  border-radius: 50%;
+  color: white;
+}
+.swatches svg {
+  width: 11px;
+  height: 11px;
+  stroke-width: 2.5;
+}
+.swatches button[aria-pressed="true"] {
+  outline: 1px solid var(--muted);
+  outline-offset: 3px;
+}
+.swatches {
+  flex-wrap: wrap;
+}

package/components/Avatar.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+export type AvatarStatus = "online" | "offline" | "busy" | "away";
+export type AvatarProps = {
+    name: string;
+    src?: string;
+    fallback?: ReactNode;
+    size?: number;
+    shape?: "circle" | "square";
+    status?: AvatarStatus;
+    decorative?: boolean;
+    className?: string;
+};
+export declare const avatarStatusLabels: Record<AvatarStatus, string>;
+export declare function Avatar({ name, src, fallback, size, shape, status, decorative, className, }: AvatarProps): import("react").JSX.Element;

package/components/Avatar.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { User } from "lucide-react";
+import s from "./Avatar.module.css";
+const avatarStatusLabels = {
+  online: "\u5728\u7EBF",
+  offline: "\u79BB\u7EBF",
+  busy: "\u5FD9\u788C",
+  away: "\u79BB\u5F00"
+};
+const segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+const graphemes = (text) => [...segmenter.segment(text)].map((part) => part.segment);
+function AvatarPicture({ src }) {
+  const [state, setState] = useState("loading");
+  if (state === "error") return null;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt: "",
+      "aria-hidden": "true",
+      draggable: false,
+      className: s.picture,
+      "data-loaded": state === "loaded",
+      onLoad: () => setState("loaded"),
+      onError: () => setState("error")
+    }
+  );
+}
+function Avatar({
+  name,
+  src,
+  fallback,
+  size = 32,
+  shape = "circle",
+  status,
+  decorative = false,
+  className = ""
+}) {
+  const length = Number.isFinite(size) ? Math.max(16, Math.min(96, size)) : 32;
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  const derived = words.length > 1 ? words.slice(0, 2).map((word) => graphemes(word)[0]).join("").toLocaleUpperCase() : graphemes(words[0] || "").slice(0, 2).join("").toLocaleUpperCase();
+  const initials = length < 24 ? graphemes(derived)[0] : derived;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `${s.avatar} ${className}`,
+      role: decorative ? void 0 : "img",
+      "aria-hidden": decorative || void 0,
+      "aria-label": decorative ? void 0 : `${name.trim() || "\u672A\u547D\u540D"}${status ? `\uFF0C${avatarStatusLabels[status]}` : ""}`,
+      "data-shape": shape,
+      style: {
+        "--avatar-size": `${length}px`,
+        "--avatar-font": `${Math.max(9, Math.round(length * 0.36))}px`
+      },
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: s.face, "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("span", { className: s.fallback, children: fallback ?? (initials || /* @__PURE__ */ jsx(User, {})) }),
+          src && /* @__PURE__ */ jsx(AvatarPicture, { src }, src)
+        ] }),
+        status && /* @__PURE__ */ jsx("span", { className: s.status, "data-status": status, "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+export {
+  Avatar,
+  avatarStatusLabels
+};

package/components/Avatar.module.css

@@ -0,0 +1,70 @@
+.avatar {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  vertical-align: middle;
+  color: var(--fg);
+}
+.face {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--line);
+  background: var(--soft);
+  border-radius: 50%;
+  overflow: hidden;
+}
+.avatar[data-shape="square"] .face {
+  border-radius: min(var(--radius), calc(var(--avatar-size) * 0.25));
+}
+.fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--avatar-font);
+  font-weight: 500;
+  line-height: 1;
+}
+.fallback > svg {
+  width: calc(var(--avatar-size) * 0.5);
+  height: calc(var(--avatar-size) * 0.5);
+  color: var(--muted);
+}
+.picture {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity var(--motion-hover) var(--ease);
+}
+.picture[data-loaded="true"] {
+  opacity: 1;
+}
+.status {
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  width: max(6px, calc(var(--avatar-size) * 0.24));
+  height: max(6px, calc(var(--avatar-size) * 0.24));
+  border: 2px solid var(--surface);
+  border-radius: 50%;
+  background: var(--muted);
+}
+.status[data-status="online"] {
+  background: var(--success);
+}
+.status[data-status="busy"] {
+  background: var(--danger);
+}
+.status[data-status="away"] {
+  background: var(--warning);
+}

package/components/AvatarGroup.d.ts

@@ -0,0 +1,15 @@
+import { type AvatarProps } from "./Avatar";
+export type AvatarGroupItem = Pick<AvatarProps, "name" | "src" | "fallback" | "status"> & {
+    value: string;
+    disabled?: boolean;
+};
+export type AvatarGroupProps = {
+    items: AvatarGroupItem[];
+    max?: number;
+    size?: number;
+    shape?: AvatarProps["shape"];
+    label?: string;
+    onSelect?(item: AvatarGroupItem): void;
+    className?: string;
+};
+export declare function AvatarGroup({ items, max, size, shape, label, onSelect, className, }: AvatarGroupProps): import("react").JSX.Element;

package/components/AvatarGroup.js

@@ -0,0 +1,115 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { moveMenuFocus } from "./menuFocus.js";
+import { useEffect, useId, useRef } from "react";
+import { Avatar, avatarStatusLabels } from "./Avatar.js";
+import { Tooltip } from "./Tooltip.js";
+import { Popover } from "./Popover.js";
+import { MenuItem } from "./MenuItem.js";
+import { usePopover } from "./usePopover.js";
+import s from "./AvatarGroup.module.css";
+function AvatarGroup({
+  items,
+  max = 4,
+  size = 32,
+  shape = "circle",
+  label = "\u6210\u5458",
+  onSelect,
+  className = ""
+}) {
+  const pop = usePopover(), id = useId(), list = useRef(null);
+  const count = Number.isFinite(max) ? Math.max(0, Math.floor(max)) : items.length;
+  const shown = items.slice(0, count), hidden = items.slice(count);
+  useEffect(() => pop.close(), [items, max, pop.close]);
+  const select = (item) => {
+    if (item.disabled || !onSelect) return;
+    if (pop.open) {
+      pop.closeAndFocus();
+    }
+    onSelect(item);
+  };
+  const length = Number.isFinite(size) ? Math.max(16, Math.min(96, size)) : 32;
+  return /* @__PURE__ */ jsxs("div", { className: `${s.group} ${className}`, role: "group", "aria-label": label, children: [
+    shown.map((item) => /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        content: `${item.name}${item.status ? ` \xB7 ${avatarStatusLabels[item.status]}` : ""}`,
+        children: onSelect ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: s.member,
+            "data-shape": shape,
+            disabled: item.disabled,
+            "aria-label": `${item.name}${item.status ? `\uFF0C${avatarStatusLabels[item.status]}` : ""}`,
+            onClick: () => select(item),
+            children: /* @__PURE__ */ jsx(Avatar, { ...item, size: length, shape, decorative: true })
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: s.member, "data-shape": shape, children: /* @__PURE__ */ jsx(Avatar, { ...item, size: length, shape }) })
+      },
+      item.value
+    )),
+    hidden.length > 0 && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: pop.anchor,
+        type: "button",
+        className: s.more,
+        "data-shape": shape,
+        style: { width: length, height: length },
+        "aria-label": `\u663E\u793A\u5176\u4F59 ${hidden.length} \u4F4D${label}`,
+        "aria-expanded": pop.open,
+        "aria-haspopup": onSelect ? "menu" : "dialog",
+        "aria-controls": id,
+        onClick: pop.toggle,
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown" && !pop.open) {
+            event.preventDefault();
+            pop.toggle();
+          }
+        },
+        children: [
+          "+",
+          hidden.length
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        anchor: pop.anchor,
+        open: pop.open && hidden.length > 0,
+        onClose: pop.close,
+        id,
+        role: onSelect ? "menu" : "dialog",
+        label: `${label}\u5217\u8868`,
+        width: 260,
+        onKeyDown: (event) => moveMenuFocus(event, list.current),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: list,
+            className: s.list,
+            tabIndex: onSelect ? void 0 : -1,
+            "data-autofocus": onSelect ? void 0 : "",
+            children: hidden.map((item) => /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                as: onSelect ? "button" : "div",
+                role: onSelect ? "menuitem" : void 0,
+                label: item.name,
+                description: item.status && avatarStatusLabels[item.status],
+                icon: /* @__PURE__ */ jsx(Avatar, { ...item, size: 16, decorative: true }),
+                disabled: item.disabled,
+                onClick: () => select(item)
+              },
+              item.value
+            ))
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  AvatarGroup
+};

package/components/AvatarGroup.module.css

@@ -0,0 +1,54 @@
+.group {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px 0;
+  isolation: isolate;
+  padding: 2px 10px;
+}
+.group > * {
+  margin-left: -8px;
+}
+.member,
+.more {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 50%;
+  padding: 0;
+  box-shadow: 0 0 0 2px var(--surface);
+  background: var(--soft);
+  color: var(--fg);
+  transition:
+    transform var(--motion-hover) var(--ease),
+    background var(--motion-hover);
+}
+.member[data-shape="square"],
+.more[data-shape="square"] {
+  border-radius: max(4px, calc(var(--radius) - 2px));
+}
+.group > :hover,
+.group > :focus-within {
+  z-index: 1;
+}
+.member:is(button):hover:not(:disabled),
+.more:hover {
+  transform: translateY(-2px);
+  background: var(--hover);
+}
+.more {
+  font-size: 11px;
+  min-width: 0;
+}
+.more[aria-expanded="true"] {
+  background: var(--selected);
+}
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--menu-item-spacing);
+  outline: none;
+}

package/components/Badge.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+export declare function Badge({ children, tone, }: {
+    children: ReactNode;
+    tone?: "neutral" | "success" | "warning" | "accent" | "danger";
+}): import("react").JSX.Element;

package/components/Badge.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import s from "./Badge.module.css";
+function Badge({
+  children,
+  tone = "neutral"
+}) {
+  return /* @__PURE__ */ jsx("span", { className: `${s.badge} ${s[tone]}`, children });
+}
+export {
+  Badge
+};

package/components/Badge.module.css

@@ -0,0 +1,30 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 8px;
+  font-size: 10px;
+  border-radius: 5px;
+  background: var(--soft);
+  color: var(--muted);
+  white-space: nowrap;
+}
+.success {
+  color: var(--success);
+  background: color-mix(in srgb, var(--success) 8%, var(--surface));
+}
+.warning {
+  color: var(--warning);
+  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
+}
+.neutral {
+  color: var(--muted);
+}
+.accent {
+  color: var(--accent);
+  background: var(--accent-soft);
+}
+.danger {
+  color: var(--danger);
+  background: var(--danger-soft);
+}

package/components/BlockedTab.d.ts

@@ -0,0 +1,4 @@
+import { type TabListProps } from "./TabList";
+declare function BlockedTabView<T extends string>(props: TabListProps<T>): import("react").JSX.Element;
+export declare const BlockedTab: typeof BlockedTabView;
+export {};

package/components/BlockedTab.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { TabList } from "./TabList.js";
+function BlockedTabView(props) {
+  return /* @__PURE__ */ jsx(TabList, { ...props, variant: "blocked" });
+}
+const BlockedTab = memo(BlockedTabView);
+export {
+  BlockedTab
+};

package/components/Breadcrumb.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+export type BreadcrumbItem = {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+    href?: string;
+    disabled?: boolean;
+};
+export type BreadcrumbProps = {
+    items: BreadcrumbItem[];
+    onNavigate?(value: string): void;
+    maxItems?: number;
+    label?: string;
+    className?: string;
+};
+export declare function Breadcrumb({ items, onNavigate, maxItems, label, className, }: BreadcrumbProps): import("react").JSX.Element;