@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/Accordion.module.css

@@ -0,0 +1,38 @@
+.accordion {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 0 14px;
+}
+.accordion > button {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 0;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  font-size: 12px;
+}
+.grid {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition:
+    grid-template-rows var(--motion-panel) var(--ease),
+    opacity var(--motion-panel) var(--ease);
+}
+.grid[data-open="true"] {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+.grid > div {
+  overflow: hidden;
+  min-height: 0;
+}
+.content {
+  padding-bottom: 14px;
+  color: var(--muted);
+  font-size: 12px;
+}

package/components/Alert.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+export declare function Alert({ tone, title, children, icon, action, onClose, }: {
+    tone?: "info" | "success" | "warning" | "danger" | "neutral";
+    title?: string;
+    children?: ReactNode;
+    icon?: boolean | ReactNode;
+    action?: ReactNode;
+    onClose?(): void;
+}): import("react").JSX.Element;

package/components/Alert.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Info, CircleCheck, TriangleAlert, CircleX, X } from "lucide-react";
+import s from "./Alert.module.css";
+function Alert({
+  tone = "info",
+  title,
+  children,
+  icon = true,
+  action,
+  onClose
+}) {
+  const Icon = tone === "success" ? CircleCheck : tone === "warning" ? TriangleAlert : tone === "danger" ? CircleX : Info, color = tone === "success" ? "var(--success)" : tone === "warning" ? "var(--warning)" : tone === "danger" ? "var(--danger)" : tone === "neutral" ? "var(--muted)" : "var(--accent)";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: s.alert,
+      style: { "--alert-color": color },
+      role: tone === "danger" ? "alert" : "status",
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: s.icon, children: icon === true ? /* @__PURE__ */ jsx(Icon, {}) : icon }),
+        /* @__PURE__ */ jsxs("div", { className: s.copy, children: [
+          title && /* @__PURE__ */ jsx("strong", { children: title }),
+          children && /* @__PURE__ */ jsx("div", { children })
+        ] }),
+        action && /* @__PURE__ */ jsx("div", { className: s.action, children: action }),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: s.close,
+            "aria-label": "\u5173\u95ED\u63D0\u793A",
+            onClick: onClose,
+            children: /* @__PURE__ */ jsx(X, {})
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Alert
+};

package/components/Alert.module.css

@@ -0,0 +1,56 @@
+.alert {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  padding: 13px 15px;
+  border: 1px solid color-mix(in srgb, var(--alert-color) 24%, var(--surface));
+  border-radius: var(--radius);
+  background: color-mix(in srgb, var(--alert-color) 5%, var(--surface));
+}
+.icon {
+  display: grid;
+  place-items: center;
+  color: var(--alert-color);
+  flex-shrink: 0;
+}
+.icon svg {
+  width: 19px;
+  height: 19px;
+}
+.copy {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  font-size: 12px;
+  line-height: 1.55;
+}
+.copy strong {
+  font-weight: 550;
+}
+.action {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+.close {
+  display: grid;
+  place-items: center;
+  width: 25px;
+  height: 25px;
+  border: 0;
+  border-radius: 5px;
+  padding: 0;
+  background: transparent;
+  color: var(--muted);
+}
+.close:hover {
+  background: var(--hover);
+  color: var(--fg);
+}
+.close svg {
+  width: 14px;
+  height: 14px;
+}

package/components/AppShell.d.ts

@@ -0,0 +1,30 @@
+import { type ReactNode } from "react";
+export interface NavigationItem {
+    id: string;
+    path: string;
+    label: string;
+    icon: ReactNode;
+}
+export declare function ShellHeader({ title, collapsed, onToggle, onMenu, actions, windowControls, draggable, }: {
+    title: string;
+    collapsed?: boolean;
+    onToggle?(): void;
+    onMenu?(): void;
+    actions?: ReactNode;
+    windowControls?: ReactNode;
+    draggable?: boolean;
+}): import("react").JSX.Element;
+export declare function AppShell({ navigation, settingsItem, active, title, collapsed, onCollapsedChange, onNavigate, children, headerActions, sidebarFooter, windowControls, draggable, }: {
+    navigation: readonly NavigationItem[];
+    settingsItem: NavigationItem;
+    active: string;
+    title: string;
+    collapsed?: boolean;
+    onCollapsedChange(value: boolean): void;
+    onNavigate(path: string): void;
+    children: ReactNode;
+    headerActions?: ReactNode;
+    sidebarFooter?: ReactNode;
+    windowControls?: ReactNode;
+    draggable?: boolean;
+}): import("react").JSX.Element;

package/components/AppShell.js

@@ -0,0 +1,152 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Layers2, Menu, PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { Drawer } from "./Drawer.js";
+import { IconButton } from "./IconButton.js";
+import s from "./AppShell.module.css";
+function ShellHeader({
+  title,
+  collapsed,
+  onToggle,
+  onMenu,
+  actions,
+  windowControls,
+  draggable = false
+}) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: s.header,
+      "data-draggable": draggable || void 0,
+      "data-window-controls": windowControls ? true : void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: s.headerStart, children: [
+          onMenu && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              className: s.mobileToggle,
+              label: "\u6253\u5F00\u5BFC\u822A",
+              variant: "ghost",
+              onClick: onMenu,
+              children: /* @__PURE__ */ jsx(Menu, { size: 18 })
+            }
+          ),
+          onToggle && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              className: s.desktopToggle,
+              label: collapsed ? "\u5C55\u5F00\u4FA7\u680F" : "\u6298\u53E0\u4FA7\u680F",
+              variant: "ghost",
+              onClick: onToggle,
+              children: collapsed ? /* @__PURE__ */ jsx(PanelLeftOpen, { size: 18 }) : /* @__PURE__ */ jsx(PanelLeftClose, { size: 18 })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: s.title, children: title })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: s.headerEnd, children: [
+          actions,
+          windowControls
+        ] })
+      ]
+    }
+  );
+}
+function AppShell({
+  navigation,
+  settingsItem,
+  active,
+  title,
+  collapsed = false,
+  onCollapsedChange,
+  onNavigate,
+  children,
+  headerActions,
+  sidebarFooter,
+  windowControls,
+  draggable = false
+}) {
+  const [mobile, setMobile] = useState(false);
+  const scroll = useRef(null);
+  useEffect(() => {
+    setMobile(false);
+    scroll.current?.scrollTo({ top: 0 });
+  }, [active]);
+  const item = (n) => /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: n.path,
+      "aria-current": active === n.id ? "page" : void 0,
+      title: collapsed ? n.label : void 0,
+      onClick: (e) => {
+        if (e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey) {
+          e.preventDefault();
+          onNavigate(n.path);
+          setMobile(false);
+        }
+      },
+      children: [
+        n.icon,
+        /* @__PURE__ */ jsx("span", { children: n.label })
+      ]
+    },
+    n.id
+  );
+  const nav = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: "/",
+        className: s.brand,
+        "aria-label": "OneUI \u9996\u9875",
+        onClick: (e) => {
+          e.preventDefault();
+          onNavigate("/");
+          setMobile(false);
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: s.mark, children: /* @__PURE__ */ jsx(Layers2, { size: 20 }) }),
+          /* @__PURE__ */ jsx("strong", { children: "OneUI" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("nav", { "aria-label": "\u4E3B\u5BFC\u822A", className: s.navigation, children: navigation.map(item) }),
+    /* @__PURE__ */ jsxs("div", { className: s.bottom, children: [
+      /* @__PURE__ */ jsx("nav", { "aria-label": "\u8BBE\u7F6E", className: s.navigation, children: item(settingsItem) }),
+      sidebarFooter
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: s.shell, "data-collapsed": collapsed, children: [
+    /* @__PURE__ */ jsx("a", { className: s.skip, href: "#main", children: "\u8DF3\u8F6C\u5230\u5185\u5BB9" }),
+    /* @__PURE__ */ jsx("aside", { className: s.sidebar, children: nav }),
+    /* @__PURE__ */ jsx(
+      Drawer,
+      {
+        placement: "left",
+        size: 280,
+        open: mobile,
+        onClose: () => setMobile(false),
+        title: "\u5BFC\u822A",
+        children: /* @__PURE__ */ jsx("div", { className: s.mobileNav, children: nav })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: s.workspace, children: [
+      /* @__PURE__ */ jsx(
+        ShellHeader,
+        {
+          title,
+          collapsed,
+          onToggle: () => onCollapsedChange(!collapsed),
+          onMenu: () => setMobile(true),
+          actions: headerActions,
+          windowControls,
+          draggable
+        }
+      ),
+      /* @__PURE__ */ jsx("main", { ref: scroll, id: "main", tabIndex: -1, className: s.main, children: /* @__PURE__ */ jsx("div", { className: s.page, children }) })
+    ] })
+  ] });
+}
+export {
+  AppShell,
+  ShellHeader
+};

package/components/AppShell.module.css

@@ -0,0 +1,239 @@
+.shell {
+  height: 100dvh;
+  display: grid;
+  grid-template-columns: 228px minmax(0, 1fr);
+  overflow: hidden;
+  color: var(--fg);
+  background: var(--app-background, var(--canvas));
+  font: 14px/1.6 var(--ui-font, "Segoe UI", "Microsoft YaHei", sans-serif);
+  transition: grid-template-columns var(--motion-panel) var(--ease);
+}
+.shell[data-collapsed="true"] {
+  grid-template-columns: 76px minmax(0, 1fr);
+}
+.sidebar {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 24px 16px 18px;
+  background: var(--navigation);
+  border-right: 1px solid var(--line);
+  overflow: hidden;
+}
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 38px;
+  padding: 0 10px;
+  color: var(--fg);
+  text-decoration: none;
+  flex-shrink: 0;
+}
+.brand strong {
+  font-size: 16px;
+  letter-spacing: -0.4px;
+}
+.mark {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border-radius: 10px;
+  background: var(--accent);
+  color: var(--on-accent);
+}
+.navigation {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-height: 0;
+  overflow: auto;
+}
+.navigation a {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  min-height: 40px;
+  padding: 9px 12px;
+  border-radius: 8px;
+  color: var(--muted);
+  font-size: 13px;
+  text-decoration: none;
+  white-space: nowrap;
+  transition:
+    background var(--motion-hover),
+    color var(--motion-hover);
+}
+.navigation a > svg {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+.navigation a:hover {
+  background: var(--hover);
+  color: var(--fg);
+}
+.navigation a[aria-current="page"] {
+  background: var(--selected);
+  color: var(--accent);
+}
+.bottom {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: auto;
+  flex-shrink: 0;
+}
+.workspace {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+.header {
+  height: 60px;
+  min-height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 0 8px;
+  border-bottom: 1px solid var(--line);
+  background: var(--surface);
+  color: var(--fg);
+}
+.header[data-draggable="true"] {
+  -webkit-app-region: drag;
+}
+.header button,
+.header a,
+.headerEnd {
+  -webkit-app-region: no-drag;
+}
+.headerStart,
+.headerEnd {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+.headerEnd {
+  flex-shrink: 0;
+}
+.title {
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.main {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  outline: none;
+  scrollbar-gutter: stable;
+  overscroll-behavior: contain;
+}
+.page {
+  width: 100%;
+  max-width: 1390px;
+  margin: 0 auto;
+  padding: 42px 40px 52px;
+  --page-max-width: none;
+  --page-margin: 0;
+  --page-inset: 0;
+  --page-wide-top: 0;
+  --page-title-size: 28px;
+  --page-title-line-height: 1.3;
+}
+.page h1 {
+  margin: 0;
+  font-size: 28px;
+  line-height: 1.3;
+}
+.shell[data-collapsed="true"] > .sidebar .brand strong,
+.shell[data-collapsed="true"] > .sidebar .navigation a span {
+  display: none;
+}
+.shell[data-collapsed="true"] > .sidebar {
+  padding-inline: 12px;
+}
+.shell[data-collapsed="true"] > .sidebar .brand {
+  padding: 0;
+  justify-content: center;
+}
+.shell[data-collapsed="true"] > .sidebar .navigation a {
+  justify-content: center;
+  padding-inline: 0;
+}
+.mobileToggle {
+  display: none;
+}
+.mobileNav {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  min-height: 100%;
+  padding: 8px 0;
+}
+.mobileNav .bottom {
+  margin-top: 24px;
+}
+.skip {
+  position: fixed;
+  top: -60px;
+  left: 12px;
+  z-index: 5000;
+  padding: 10px 16px;
+  background: var(--surface);
+  color: var(--fg);
+}
+.skip:focus {
+  top: 12px;
+}
+@media (max-width: 800px) {
+  .shell,
+  .shell[data-collapsed="true"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .sidebar {
+    display: none;
+  }
+  .desktopToggle {
+    display: none;
+  }
+  .mobileToggle {
+    display: inline-flex;
+  }
+  .header {
+    padding-inline: 8px;
+    gap: 8px;
+  }
+  .headerStart,
+  .headerEnd {
+    gap: 8px;
+  }
+  .page {
+    padding: 28px 24px 40px;
+  }
+}
+@media (max-width: 540px) {
+  .page {
+    padding: 24px 16px 36px;
+  }
+  .page h1 {
+    font-size: 25px;
+  }
+}
+
+.page {
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.header[data-window-controls="true"] {
+  padding-right: 8px;
+}

package/components/AppearanceSettings.d.ts

@@ -0,0 +1,7 @@
+import { type AppearancePreferences } from "./appearance";
+export declare function AppearanceSettings({ settings, dark, onChange: update, onReset, }: {
+    settings: AppearancePreferences;
+    dark: boolean;
+    onChange(patch: Partial<AppearancePreferences>): void;
+    onReset(): void;
+}): import("react").JSX.Element;