@robert-stackflow/oneui 0.1.0 → 0.3.0

package/components/createToaster.d.ts

@@ -0,0 +1,12 @@
+import type { ToastMessage, ToastOptions, ToastTone } from "./ToastProvider";
+export type ToastNotify = (message: string, options?: ToastOptions | ToastTone) => () => void;
+export interface ToastController {
+    readonly id: string;
+    notify: ToastNotify;
+    dismiss(id?: number): void;
+    clear(id?: number): void;
+    subscribe(listener: () => void): () => void;
+    getSnapshot(): ToastMessage | null;
+}
+/** An isolated notification service; no React or document access is required. */
+export declare function createToaster(): ToastController;

package/components/createToaster.js

@@ -0,0 +1,40 @@
+let nextController = 0;
+function createToaster() {
+  let current = null, counter = 0;
+  const listeners = /* @__PURE__ */ new Set();
+  const publish = (message) => {
+    if (current === message) return;
+    current = message;
+    listeners.forEach((listener) => listener());
+  };
+  const dismiss = (id = current?.id) => {
+    if (current && current.id === id && !current.closing)
+      publish({ ...current, closing: true });
+  };
+  return {
+    id: "oneui-toast-" + ++nextController,
+    notify(message, options) {
+      const id = ++counter;
+      publish({
+        message,
+        id,
+        options: typeof options === "string" ? { tone: options } : options
+      });
+      return () => dismiss(id);
+    },
+    dismiss,
+    clear(id = current?.id) {
+      if (current?.id === id) publish(null);
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    getSnapshot: () => current
+  };
+}
+export {
+  createToaster
+};

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

@@ -47,7 +47,7 @@ export { CharacterPicker } from "./CharacterPicker";
 export { DataTable } from "./DataTable";
 export { EmojiPicker } from "./EmojiPicker";
 export { FileTree } from "./FileTree";
-export { IconPicker } from "./IconPicker";
+export { IconPicker, type IconPickerProps, type IconPickerOption, } from "./IconPicker";
 export { LoadingOverlay } from "./LoadingOverlay";
 export { LoadingState } from "./LoadingState";
 export { Pagination } from "./Pagination";
@@ -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";
@@ -143,8 +143,11 @@ export { ThemeProvider } from "./ThemeProvider";
 export type { UITheme, ColorMode } from "./ThemeProvider";
 export { ThemeStylePicker } from "./ThemeStylePicker";
 export { AppShell, ShellHeader } from "./AppShell";
-export type { NavigationItem } from "./AppShell";
+export type { NavigationItem, AppShellProps } from "./AppShell";
 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";
+export { createToaster, type ToastController, type ToastNotify, } from "./createToaster";

package/components/index.js

@@ -43,7 +43,9 @@ import { CharacterPicker } from "./CharacterPicker.js";
 import { DataTable } from "./DataTable.js";
 import { EmojiPicker } from "./EmojiPicker.js";
 import { FileTree } from "./FileTree.js";
-import { IconPicker } from "./IconPicker.js";
+import {
+  IconPicker
+} from "./IconPicker.js";
 import { LoadingOverlay } from "./LoadingOverlay.js";
 import { LoadingState } from "./LoadingState.js";
 import { Pagination } from "./Pagination.js";
@@ -104,6 +106,11 @@ 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";
+import {
+  createToaster
+} from "./createToaster.js";
 export {
   Accordion,
   Alert,
@@ -125,6 +132,7 @@ export {
   ColorPicker,
   Combobox,
   CommandPalette,
+  ConfirmDialog,
   ContextMenu,
   ContextMenuPanel,
   ContributionCalendar,
@@ -144,6 +152,7 @@ export {
   FilePicker,
   FileTree,
   Form,
+  FormDialog,
   FormErrorSummary,
   FormField,
   FormGroup,
@@ -155,6 +164,7 @@ export {
   LoadingState,
   Menu,
   MenuItem,
+  MessageDialog,
   MultiSelect,
   NumberInput,
   Page,
@@ -204,12 +214,14 @@ export {
   ToastProvider,
   Tooltip,
   TreeSelect,
+  TreeTable,
   UIProvider,
   UnderlinedTab,
   Upload,
   UploadList,
   VirtualPickerList,
   appearanceDefaults,
+  createToaster,
   formatFileSize,
   normalizeAppearance,
   useFormState,

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.3.0",
   "description": "OneUI React components, application shell and portable visual themes",
   "type": "module",
   "sideEffects": [
@@ -763,17 +763,49 @@
       "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",
+    "./createToaster": {
+      "types": "./components/createToaster.d.ts",
+      "import": "./components/createToaster.js",
+      "default": "./components/createToaster.js"
     }
   },
   "files": [
     "components",
     "styles",
     "assets",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "peerDependencies": {
-    "react": "19.3.1",
-    "react-dom": "19.3.1"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
   "dependencies": {
     "lucide-react": "1.59.0"

package/styles/base.css

@@ -143,7 +143,11 @@
 
 :where(:root[data-ui-theme] *) {
   scrollbar-width: thin;
-  scrollbar-color: color-mix(in srgb, var(--muted) 35%, transparent) transparent;
+  scrollbar-color: var(
+      --scrollbar-thumb,
+      color-mix(in srgb, var(--muted) 35%, transparent)
+    )
+    transparent;
 }
 
 @supports selector(::-webkit-scrollbar) {
@@ -169,14 +173,20 @@
     )::-webkit-scrollbar-thumb {
     border: 2px solid transparent;
     border-radius: 999px;
-    background: color-mix(in srgb, var(--muted) 42%, transparent);
+    background: var(
+      --scrollbar-thumb,
+      color-mix(in srgb, var(--muted) 42%, transparent)
+    );
     background-clip: padding-box;
   }
   :where(
       :root[data-ui-theme],
       :root[data-ui-theme] *
     )::-webkit-scrollbar-thumb:hover {
-    background-color: color-mix(in srgb, var(--muted) 65%, transparent);
+    background-color: var(
+      --scrollbar-hover,
+      color-mix(in srgb, var(--muted) 65%, transparent)
+    );
   }
   :where(
       :root[data-ui-theme],
@@ -187,3 +197,10 @@
     height: 0;
   }
 }
+
+:root[data-ui-theme] {
+  --on-danger: #fff;
+}
+:root[data-ui-theme][data-theme="dark"] {
+  --on-danger: #141414;
+}

package/styles/blue.css

@@ -1,19 +1,28 @@
 :root[data-ui-theme="blue"] {
   color-scheme: light;
-  --canvas: #f6f7fa;
+  --canvas: #f5f7fb;
   --surface: #fff;
   --elevated: #fff;
-  --sidebar: #fbfcfe;
-  --input: #fff;
-  --hover: #f1f3f8;
-  --text: #263149;
-  --muted: #66748b;
-  --placeholder: #707d91;
-  --border: #e5e9f1;
-  --border-strong: #cdd5e3;
-  --accent: #5269b6;
-  --accent-hover: #43599f;
-  --accent-soft: #edf1fc;
+  --sidebar: var(--surface);
+  --input: #f9fafc;
+  --hover: #edf1f8;
+  --text: #25324a;
+  --muted: #8592a8;
+  --placeholder: color-mix(in srgb, var(--muted) 85%, transparent);
+  --border: #e3e8f1;
+  --border-strong: var(--border);
+  --accent: #5067b8;
+  --accent-hover: #4059aa;
+  --accent-soft: #ebeffb;
+  --accent-fill: #4059aa;
+  --accent-fill-hover: #354b91;
+  --on-accent-fill: #fff;
+  --switch-on: #526edb;
+  --switch-on-hover: #526edb;
+  --switch-thumb-on: #fff;
+  --navigation-active-color: var(--accent);
+  --scrollbar-thumb: #c1cada;
+  --scrollbar-hover: #97a7be;
   --on-accent: #fff;
   --success: #348769;
   --success-soft: #edf7f1;
@@ -25,28 +34,31 @@
   --radius-lg: 14px;
   --control-height: 40px;
   --space: 24px;
-  --shadow: 0 3px 16px #273d6010;
-  --shadow-lg: 0 16px 50px #17243e1c;
+  --shadow: 0 12px 36px rgb(29 44 75 / 4.5%);
+  --shadow-lg: 0 12px 40px #17244315, 0 2px 8px #17244308;
   --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
   --fast: 160ms var(--ease);
   --sidebar-width: 228px;
 }
 :root[data-ui-theme="blue"][data-theme="dark"] {
   color-scheme: dark;
-  --canvas: #10151e;
-  --surface: #19212e;
-  --elevated: #202a39;
-  --sidebar: #141c28;
-  --input: #151e2a;
-  --hover: #243044;
-  --text: #e0e7f2;
-  --muted: #98a6bb;
-  --placeholder: #6f7f96;
-  --border: #2c384a;
-  --border-strong: #41516a;
-  --accent: #a7b9f1;
-  --accent-hover: #c0cdf5;
-  --accent-soft: #283650;
+  --canvas: #10151f;
+  --surface: #19212f;
+  --elevated: #202a3b;
+  --sidebar: var(--surface);
+  --input: #131c29;
+  --hover: #253147;
+  --text: #e1e8f4;
+  --muted: #95a4bd;
+  --border: #2c384d;
+  --border-strong: var(--border);
+  --accent: #afc1ff;
+  --accent-hover: #bdcbee;
+  --accent-soft: #263451;
+  --accent-fill: #2c3f78;
+  --accent-fill-hover: #25355f;
+  --scrollbar-thumb: #43516a;
+  --scrollbar-hover: #657794;
   --on-accent: #192540;
   --success: #87c7a8;
   --success-soft: #1d362e;
@@ -54,8 +66,8 @@
   --warning-soft: #383021;
   --danger: #ee9ba6;
   --danger-soft: #3e2632;
-  --shadow: 0 3px 16px #00000012;
-  --shadow-lg: 0 16px 50px #0005;
+  --shadow: 0 8px 30px #03081214;
+  --shadow-lg: 0 14px 44px #050a1455, 0 2px 8px #050a1430;
 }
 :root[data-ui-theme="blue"][data-accent="neutral"] {
   --accent: #343a46;
@@ -108,7 +120,7 @@
   --selected: var(--accent-soft);
   --navigation: var(--sidebar);
   --disabled: var(--placeholder);
-  --control-border: var(--border-strong);
+  --control-border: var(--border);
   --separator-width: 1px;
   --separator-style: solid;
   --separator-color: var(--border);
@@ -119,7 +131,7 @@
   --menu-item-line-height: 20px;
   --menu-item-padding-x: 11px;
   --menu-item-gap: 10px;
-  --menu-item-spacing: 2px;
+  --menu-item-spacing: 1px;
   --menu-item-icon-size: 16px;
   --menu-item-font-size: 13px;
   --menu-shortcut-font-size: 11px;
@@ -152,7 +164,7 @@
   --shadow-edge: #0004;
   --shadow-modal: #0008;
   --overlay: #050a1466;
-  --control-border: #3b4a60;
+  --control-border: var(--border);
 }
 :root[data-ui-theme="blue"][data-density="compact"] {
   --control-small: 28px;
@@ -186,10 +198,12 @@
   --field-radius: var(--radius);
   --field-font-size: 13px;
   --field-line-height: 1.4;
+  /* Keep the previous token valid for consumers with older composed styles. */
   --field-hover-strength: 38%;
+  --field-hover-border: color-mix(in srgb, var(--accent) 35%, var(--border));
   --field-focus-border: var(--accent);
   --field-focus-width: 3px;
-  --field-focus-strength: 14%;
+  --field-focus-strength: 12%;
   --field-disabled-opacity: 0.55;
   --field-readonly: var(--canvas);
   --field-gap: 8px;
@@ -198,7 +212,7 @@
   --field-message-size: 12px;
   --select-width: 168px;
   --popup-background: var(--elevated);
-  --popup-border: var(--border-strong);
+  --popup-border: var(--border);
   --popup-radius: calc(var(--radius) + 2px);
   --popup-shadow: var(--shadow-lg);
   --dialog-width: 520px;

package/styles/minimal.css

@@ -25,7 +25,7 @@
   --menu-item-line-height: 20px;
   --menu-item-padding-x: 10px;
   --menu-item-gap: 9px;
-  --menu-item-spacing: 2px;
+  --menu-item-spacing: 1px;
   --menu-item-icon-size: 16px;
   --menu-item-font-size: 12px;
   --menu-shortcut-font-size: 11px;
@@ -68,6 +68,7 @@
   --hover: #303030;
   --selected: #3a3a3a;
   --navigation: #181819;
+  --navigation-selected-color: var(--fg);
   --canvas: #202021;
   --field: #252526;
   --disabled: #686868;