@robert-stackflow/oneui 0.1.0 → 0.2.0

package/components/TreeGuides.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import s from "./TreeGuides.module.css";
+function TreeGuides({
+  depth,
+  continuations,
+  last,
+  expanded,
+  indent = 24,
+  offset = 12
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: s.guides,
+      style: {
+        "--tree-indent": indent + "px",
+        "--tree-offset": offset + "px"
+      },
+      children: [
+        continuations.map(
+          (visible, i) => visible && /* @__PURE__ */ jsx("i", { className: s.line, style: { left: i * indent } }, i)
+        ),
+        depth > 0 && /* @__PURE__ */ jsx(
+          "i",
+          {
+            className: s.elbow,
+            "data-last": last,
+            style: { left: (depth - 1) * indent }
+          }
+        ),
+        expanded && /* @__PURE__ */ jsx("i", { className: s.stem, style: { left: depth * indent } })
+      ]
+    }
+  );
+}
+export {
+  TreeGuides
+};

package/components/TreeGuides.module.css

@@ -0,0 +1,45 @@
+.guides {
+  position: absolute;
+  inset-block: 0;
+  left: var(--tree-offset);
+  width: 0;
+  pointer-events: none;
+  color: var(--line);
+}
+.line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  border-left: 1px solid currentColor;
+}
+.elbow {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--tree-indent);
+}
+.elbow::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  height: 50%;
+  left: 0;
+  right: var(--tree-elbow-gap, 0px);
+  border-left: 1px solid currentColor;
+  border-bottom: 1px solid currentColor;
+  border-bottom-left-radius: 8px;
+}
+.elbow:not([data-last="true"])::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid currentColor;
+}
+.stem {
+  position: absolute;
+  top: calc(50% + var(--tree-stem-inset, 0px));
+  bottom: 0;
+  border-left: 1px solid currentColor;
+}

package/components/TreeSelect.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 import { type FieldOptions } from "./field";
 import { type HierarchyLoader, type HierarchyOption } from "./hierarchy";
 type Base = FieldOptions & {
@@ -8,6 +9,8 @@ type Base = FieldOptions & {
     placeholder?: string;
     loadChildren?: HierarchyLoader;
     defaultExpanded?: string[];
+    variant?: "tree" | "category";
+    icon?: ReactNode;
 };
 export type TreeSelectProps = Base & ({
     multiple?: false;

package/components/TreeSelect.js

@@ -1,5 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useId, useMemo, useRef, useState } from "react";
+import {
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import { ChevronDown, Minus } from "lucide-react";
 import { SelectTrigger } from "./SelectTrigger.js";
 import { Popover } from "./Popover.js";
@@ -14,6 +19,8 @@ import {
   hierarchyMatches
 } from "./hierarchy.js";
 import s from "./HierarchyPicker.module.css";
+import { Badge } from "./Badge.js";
+import { TreeGuides } from "./TreeGuides.js";
 function TreeSelect(props) {
   const {
     options,
@@ -22,7 +29,8 @@ function TreeSelect(props) {
     clearable = true,
     placeholder = "\u8BF7\u9009\u62E9",
     loadChildren,
-    defaultExpanded = []
+    defaultExpanded = [],
+    variant = "tree"
   } = props;
   const field = useFieldControl(props), pop = usePopover(field.disabled || field.readOnly), id = useId(), list = useRef(null), [query, setQuery] = useState(""), [expanded, setExpanded] = useState(new Set(defaultExpanded)), [focused, setFocused] = useState("");
   const data = useHierarchy(options, loadChildren), selected = props.multiple ? props.value : props.value ? [props.value] : [];
@@ -34,6 +42,8 @@ function TreeSelect(props) {
       (entry) => (!matches || matches.has(entry.node.value)) && (query.trim() || entry.path.slice(0, -1).every((node) => expanded.has(node.value)))
     );
   }, [data.entries, query, expanded]);
+  const siblings = (entry) => entry.parent ? data.children(data.entries.get(entry.parent).node) || [] : options;
+  const last = (entry) => siblings(entry).at(-1)?.value === entry.node.value;
   const close = pop.closeAndFocus;
   const show = () => {
     if (field.disabled || field.readOnly) return;
@@ -115,6 +125,7 @@ function TreeSelect(props) {
         ...fieldTriggerProps(field),
         ref: pop.anchor,
         expanded: pop.open,
+        icon: props.icon,
         className: s.trigger,
         "aria-haspopup": "dialog",
         "aria-controls": id,
@@ -229,11 +240,13 @@ function TreeSelect(props) {
                         "aria-disabled": entry.disabled || void 0,
                         tabIndex: entry.node.value === active ? 0 : -1,
                         "data-value": entry.node.value,
-                        className: `${s.row} ${s.treeRow}`,
+                        className: `${s.row} ${s.treeRow} ${variant === "category" ? s.categoryRow : ""}`,
+                        "data-branch": entry.branch,
                         style: { "--level": entry.path.length - 1 },
                         label: entry.node.label,
                         description: query.trim() ? entry.path.slice(0, -1).map((n) => n.label).join(" / ") : void 0,
                         icon: entry.node.icon,
+                        meta: variant === "category" && entry.branch ? /* @__PURE__ */ jsx(Badge, { children: entry.node.count ?? data.children(entry.node)?.length ?? 0 }) : void 0,
                         selected: state === true,
                         selection: props.multiple ? "checkbox" : "check",
                         disabled: entry.disabled,
@@ -244,23 +257,38 @@ function TreeSelect(props) {
                           focus(entry.node.value);
                           choose(entry);
                         },
-                        prefix: entry.branch ? /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            type: "button",
-                            tabIndex: -1,
-                            className: s.expander,
-                            "data-expanded": isExpanded,
-                            "aria-label": `${isExpanded ? "\u6298\u53E0" : "\u5C55\u5F00"} ${entry.node.label}`,
-                            disabled: entry.disabled || data.loading.has(entry.node.value),
-                            onClick: (event) => {
-                              event.stopPropagation();
-                              focus(entry.node.value);
-                              toggleExpand(entry);
-                            },
-                            children: data.loading.has(entry.node.value) ? /* @__PURE__ */ jsx(Spinner, { size: 12, decorative: true }) : /* @__PURE__ */ jsx(ChevronDown, {})
-                          }
-                        ) : /* @__PURE__ */ jsx("span", { className: s.spacer })
+                        prefix: /* @__PURE__ */ jsxs(Fragment, { children: [
+                          variant === "category" && /* @__PURE__ */ jsx(
+                            TreeGuides,
+                            {
+                              depth: entry.path.length - 1,
+                              indent: 18,
+                              offset: 20,
+                              last: last(entry),
+                              expanded: entry.branch && isExpanded,
+                              continuations: entry.path.slice(1, -1).map(
+                                (node) => !last(data.entries.get(node.value))
+                              )
+                            }
+                          ),
+                          entry.branch ? /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              tabIndex: -1,
+                              className: s.expander,
+                              "data-expanded": isExpanded,
+                              "aria-label": `${isExpanded ? "\u6298\u53E0" : "\u5C55\u5F00"} ${entry.node.label}`,
+                              disabled: entry.disabled || data.loading.has(entry.node.value),
+                              onClick: (event) => {
+                                event.stopPropagation();
+                                focus(entry.node.value);
+                                toggleExpand(entry);
+                              },
+                              children: data.loading.has(entry.node.value) ? /* @__PURE__ */ jsx(Spinner, { size: 12, decorative: true }) : /* @__PURE__ */ jsx(ChevronDown, {})
+                            }
+                          ) : /* @__PURE__ */ jsx("span", { className: s.spacer })
+                        ] })
                       }
                     ),
                     isExpanded && error && /* @__PURE__ */ jsxs("div", { role: "alert", className: s.error, children: [
@@ -282,7 +310,7 @@ function TreeSelect(props) {
           ),
           /* @__PURE__ */ jsxs("div", { className: s.footer, children: [
             /* @__PURE__ */ jsx("span", { children: props.multiple ? `${selected.length} \u9879\u5DF2\u9009` : "" }),
-            /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { className: s.footerActions, children: [
               clearable && /* @__PURE__ */ jsx(
                 Button,
                 {

package/components/TreeTable.d.ts

@@ -0,0 +1,15 @@
+import { type Column } from "./Table";
+export type TreeTableProps<T, K extends string | number> = {
+    rows: T[];
+    columns: Column<T>[];
+    rowKey(row: T): K;
+    getChildren(row: T): T[] | undefined;
+    rowLabel(row: T): string;
+    label?: string;
+    treeColumn?: string;
+    expanded?: K[];
+    defaultExpanded?: K[];
+    defaultExpandAll?: boolean;
+    onExpandedChange?(keys: K[]): void;
+};
+export declare function TreeTable<T, K extends string | number>({ rows, columns, rowKey, getChildren, rowLabel, label, treeColumn, expanded, defaultExpanded, defaultExpandAll, onExpandedChange, }: TreeTableProps<T, K>): import("react").JSX.Element;

package/components/TreeTable.js

@@ -0,0 +1,151 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import { Table } from "./Table.js";
+import { IconButton } from "./IconButton.js";
+import { DisclosureChevron } from "./DisclosureChevron.js";
+import { TreeGuides } from "./TreeGuides.js";
+import s from "./TreeTable.module.css";
+function TreeTable({
+  rows,
+  columns,
+  rowKey,
+  getChildren,
+  rowLabel,
+  label = "\u5C42\u7EA7\u8868\u683C",
+  treeColumn = columns[0]?.key,
+  expanded,
+  defaultExpanded = [],
+  defaultExpandAll = false,
+  onExpandedChange
+}) {
+  const [local, setLocal] = useState(() => {
+    if (!defaultExpandAll) return defaultExpanded;
+    const keys2 = [], seen = /* @__PURE__ */ new Set();
+    const walk = (nodes) => nodes.forEach((row) => {
+      const key = rowKey(row);
+      if (seen.has(key)) return;
+      seen.add(key);
+      const children = getChildren(row);
+      if (children?.length) {
+        keys2.push(key);
+        walk(children);
+      }
+    });
+    walk(rows);
+    return keys2;
+  });
+  const keys = expanded ?? local, open = new Set(keys);
+  const root = useRef(null), [focused, setFocused] = useState();
+  const visible = useMemo(() => {
+    const entries = [], seen = /* @__PURE__ */ new Set();
+    const walk = (nodes, depth, continuations) => nodes.forEach((row, i) => {
+      const key = rowKey(row);
+      if (seen.has(key)) return;
+      seen.add(key);
+      const children = getChildren(row) || [], last = i === nodes.length - 1;
+      entries.push({
+        row,
+        key,
+        depth,
+        last,
+        continuations,
+        children,
+        position: i + 1,
+        size: nodes.length
+      });
+      if (children.length && open.has(key))
+        walk(
+          children,
+          depth + 1,
+          depth === 0 ? [] : [...continuations, !last]
+        );
+    });
+    walk(rows, 0, []);
+    return entries;
+  }, [rows, getChildren, rowKey, keys]);
+  const toggle = (key) => {
+    const next = open.has(key) ? keys.filter((k) => k !== key) : [...keys, key];
+    if (expanded === void 0) setLocal(next);
+    onExpandedChange?.(next);
+  };
+  const focus = (key) => {
+    setFocused(key);
+    const index = visible.findIndex((entry) => entry.key === key);
+    root.current?.querySelectorAll("tbody tr")[index]?.focus();
+  };
+  const active = visible.some((entry) => entry.key === focused) ? focused : visible[0]?.key;
+  return /* @__PURE__ */ jsx("div", { className: s.root, ref: root, children: /* @__PURE__ */ jsx(
+    Table,
+    {
+      label,
+      role: "treegrid",
+      rows: visible,
+      rowKey: (entry) => typeof entry.key + ":" + String(entry.key),
+      rowAttributes: (entry) => ({
+        "aria-level": entry.depth + 1,
+        "aria-posinset": entry.position,
+        "aria-setsize": entry.size,
+        "aria-expanded": entry.children.length ? open.has(entry.key) : void 0,
+        "data-tree-root": entry.depth === 0,
+        tabIndex: entry.key === active ? 0 : -1,
+        onFocus: (event) => {
+          if (event.target === event.currentTarget) setFocused(entry.key);
+        },
+        onKeyDown: (event) => {
+          if (event.target !== event.currentTarget) return;
+          const index = visible.indexOf(entry);
+          let next;
+          if (event.key === "ArrowDown")
+            next = visible[Math.min(visible.length - 1, index + 1)];
+          else if (event.key === "ArrowUp")
+            next = visible[Math.max(0, index - 1)];
+          else if (event.key === "Home") next = visible[0];
+          else if (event.key === "End") next = visible.at(-1);
+          else if (event.key === "ArrowRight") {
+            if (entry.children.length && !open.has(entry.key))
+              toggle(entry.key);
+            else if (visible[index + 1]?.depth > entry.depth)
+              next = visible[index + 1];
+          } else if (event.key === "ArrowLeft") {
+            if (entry.children.length && open.has(entry.key))
+              toggle(entry.key);
+            else
+              next = visible.slice(0, index).reverse().find((parent) => parent.depth < entry.depth);
+          } else return;
+          event.preventDefault();
+          if (next) focus(next.key);
+        }
+      }),
+      columns: columns.map((column) => ({
+        key: column.key,
+        title: column.title,
+        align: column.align,
+        width: column.width,
+        render: (entry) => column.key !== treeColumn ? column.render(entry.row) : /* @__PURE__ */ jsxs("div", { className: s.cell, style: { paddingLeft: entry.depth * 24 }, children: [
+          /* @__PURE__ */ jsx(
+            TreeGuides,
+            {
+              depth: entry.depth,
+              continuations: entry.continuations,
+              last: entry.last
+            }
+          ),
+          entry.children.length ? /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              label: `${open.has(entry.key) ? "\u6298\u53E0" : "\u5C55\u5F00"} ${rowLabel(entry.row)}`,
+              className: s.expander,
+              onClick: () => toggle(entry.key),
+              "aria-expanded": open.has(entry.key),
+              children: /* @__PURE__ */ jsx(DisclosureChevron, { expanded: open.has(entry.key) })
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: s.spacer }),
+          /* @__PURE__ */ jsx("div", { className: s.content, children: column.render(entry.row) })
+        ] })
+      }))
+    }
+  ) });
+}
+export {
+  TreeTable
+};

package/components/TreeTable.module.css

@@ -0,0 +1,53 @@
+.root {
+  border: 1px solid var(--line);
+  border-radius: var(--card-radius);
+  background: var(--surface);
+  overflow: hidden;
+  box-shadow: var(--card-shadow, none);
+}
+.root table td {
+  padding: 0 18px;
+  border-bottom: 0;
+}
+.root table th {
+  padding: 14px 18px;
+}
+.root tr:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: -1px;
+}
+.root table tr[data-tree-root="true"]:not(:first-child) td {
+  border-top: 1px solid var(--line);
+}
+.cell {
+  --tree-elbow-gap: 8px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 72px;
+  padding-block: 14px;
+  min-width: 260px;
+  white-space: normal;
+}
+.expander,
+.spacer {
+  flex: 0 0 24px;
+  width: 24px;
+  height: 26px;
+}
+.content {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+.expander svg {
+  width: 14px;
+  height: 14px;
+}
+.expander[aria-expanded="false"] svg {
+  rotate: -90deg;
+}
+.expander[aria-expanded="true"] svg {
+  rotate: 0deg;
+}

package/components/VirtualPickerList.module.css

@@ -1,4 +1,8 @@
 .body {
+  --blocked-background: transparent;
+  --blocked-border: 0;
+  --blocked-selected: var(--selected);
+  --blocked-shadow: none;
   display: flex;
   gap: 12px;
   min-height: 0;

package/components/appearance.d.ts

@@ -1,6 +1,7 @@
 import type { UITheme, ColorMode } from "./ThemeProvider";
 import type { UIConfig } from "./UIProvider";
 export interface AppearancePreferences {
+    paletteVersion?: 2;
     designTheme: UITheme;
     mode: ColorMode;
     accent: string;

package/components/appearance.js

@@ -1,13 +1,14 @@
 function appearanceDefaults(designTheme = "minimal") {
   const blue = designTheme === "blue";
   return {
+    paletteVersion: 2,
     designTheme,
     mode: "system",
-    accent: blue ? "#5269b6" : "#303030",
+    accent: blue ? "#5067b8" : "#303030",
     lightBackground: "#ffffff",
-    darkBackground: blue ? "#19212e" : "#1e1e1f",
-    lightForeground: blue ? "#263149" : "#202020",
-    darkForeground: blue ? "#e0e7f2" : "#f4f4f5",
+    darkBackground: blue ? "#19212f" : "#1e1e1f",
+    lightForeground: blue ? "#25324a" : "#202020",
+    darkForeground: blue ? "#e1e8f4" : "#f4f4f5",
     font: "system",
     density: "comfortable",
     radius: blue ? 9 : 10,
@@ -21,6 +22,12 @@ function normalizeAppearance(input, fallback = "minimal") {
   const d = appearanceDefaults(
     x.designTheme === "minimal" || x.designTheme === "blue" ? x.designTheme : fallback
   );
+  const legacyBlue = d.designTheme === "blue" && x.paletteVersion !== 2 ? {
+    accent: "#5269b6",
+    darkBackground: "#19212e",
+    lightForeground: "#263149",
+    darkForeground: "#e0e7f2"
+  } : {};
   if (["light", "dark", "system"].includes(String(x.mode)))
     d.mode = x.mode;
   for (const key of [
@@ -30,8 +37,10 @@ function normalizeAppearance(input, fallback = "minimal") {
     "lightForeground",
     "darkForeground"
   ])
-    if (typeof x[key] === "string" && /^#[\da-f]{6}$/i.test(x[key]))
-      d[key] = x[key];
+    if (typeof x[key] === "string" && /^#[\da-f]{6}$/i.test(x[key])) {
+      if (x[key].toLowerCase() !== legacyBlue[key])
+        d[key] = x[key];
+    }
   if (["system", "Segoe UI", "Microsoft YaHei UI", "sans-serif"].includes(
     String(x.font)
   ))

package/components/hierarchy.d.ts

@@ -3,6 +3,7 @@ export type HierarchyOption = {
     value: string;
     label: string;
     icon?: ReactNode;
+    count?: number;
     keywords?: string[];
     children?: HierarchyOption[];
     disabled?: boolean;

package/components/index.d.ts

@@ -84,7 +84,7 @@ export type { FormController, FormRules, FieldRule } from "./useFormState";
 export { PinInput } from "./PinInput";
 export { ContributionCalendar } from "./ContributionCalendar";
 export type { ContributionDay } from "./contribution";
-export { Combobox } from "./Combobox";
+export { Combobox, type ComboboxProps } from "./Combobox";
 export { TagInput } from "./TagInput";
 export { PasswordField } from "./PasswordField";
 export { Alert } from "./Alert";
@@ -148,3 +148,5 @@ export { SettingsLayout, SettingsCard } from "./SettingsLayout";
 export { AppearanceSettings } from "./AppearanceSettings";
 export { appearanceDefaults, normalizeAppearance } from "./appearance";
 export type { AppearancePreferences } from "./appearance";
+export { MessageDialog, ConfirmDialog, FormDialog } from "./DialogVariants";
+export { TreeTable, type TreeTableProps } from "./TreeTable";

package/components/index.js

@@ -104,6 +104,8 @@ import { AppShell, ShellHeader } from "./AppShell.js";
 import { SettingsLayout, SettingsCard } from "./SettingsLayout.js";
 import { AppearanceSettings } from "./AppearanceSettings.js";
 import { appearanceDefaults, normalizeAppearance } from "./appearance.js";
+import { MessageDialog, ConfirmDialog, FormDialog } from "./DialogVariants.js";
+import { TreeTable } from "./TreeTable.js";
 export {
   Accordion,
   Alert,
@@ -125,6 +127,7 @@ export {
   ColorPicker,
   Combobox,
   CommandPalette,
+  ConfirmDialog,
   ContextMenu,
   ContextMenuPanel,
   ContributionCalendar,
@@ -144,6 +147,7 @@ export {
   FilePicker,
   FileTree,
   Form,
+  FormDialog,
   FormErrorSummary,
   FormField,
   FormGroup,
@@ -155,6 +159,7 @@ export {
   LoadingState,
   Menu,
   MenuItem,
+  MessageDialog,
   MultiSelect,
   NumberInput,
   Page,
@@ -204,6 +209,7 @@ export {
   ToastProvider,
   Tooltip,
   TreeSelect,
+  TreeTable,
   UIProvider,
   UnderlinedTab,
   Upload,

package/components/usePopover.d.ts

@@ -1,5 +1,5 @@
-export declare function usePopover(blocked?: boolean): {
-    anchor: import("react").RefObject<HTMLButtonElement | null>;
+export declare function usePopover<T extends HTMLElement = HTMLButtonElement>(blocked?: boolean): {
+    anchor: import("react").RefObject<T | null>;
     open: boolean;
     close: () => void;
     closeAndFocus: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robert-stackflow/oneui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "OneUI React components, application shell and portable visual themes",
   "type": "module",
   "sideEffects": [
@@ -763,13 +763,40 @@
       "types": "./components/appearance.d.ts",
       "import": "./components/appearance.js",
       "default": "./components/appearance.js"
-    }
+    },
+    "./DialogVariants": {
+      "types": "./components/DialogVariants.d.ts",
+      "import": "./components/DialogVariants.js",
+      "default": "./components/DialogVariants.js"
+    },
+    "./MessageDialog": {
+      "types": "./components/DialogVariants.d.ts",
+      "import": "./components/DialogVariants.js",
+      "default": "./components/DialogVariants.js"
+    },
+    "./ConfirmDialog": {
+      "types": "./components/DialogVariants.d.ts",
+      "import": "./components/DialogVariants.js",
+      "default": "./components/DialogVariants.js"
+    },
+    "./FormDialog": {
+      "types": "./components/DialogVariants.d.ts",
+      "import": "./components/DialogVariants.js",
+      "default": "./components/DialogVariants.js"
+    },
+    "./TreeTable": {
+      "types": "./components/TreeTable.d.ts",
+      "import": "./components/TreeTable.js",
+      "default": "./components/TreeTable.js"
+    },
+    "./TreeTable.module.css": "./components/TreeTable.module.css"
   },
   "files": [
     "components",
     "styles",
     "assets",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "peerDependencies": {
     "react": "19.3.1",