@robert-stackflow/oneui 0.1.0 → 0.2.0

package/components/Combobox.module.css

@@ -3,7 +3,12 @@
   flex-direction: column;
   gap: 7px;
 }
+.inputTrigger {
+  min-width: 0;
+  width: 100%;
+}
 .list {
+  composes: stack from "./OptionList.module.css";
   max-height: 240px;
   min-height: 40px;
   overflow: auto;
@@ -17,10 +22,3 @@
   color: var(--muted);
   font-size: 12px;
 }
-.empty button {
-  border: 0;
-  background: var(--hover);
-  border-radius: 5px;
-  padding: 4px 8px;
-  color: var(--fg);
-}

package/components/Control.module.css

@@ -13,11 +13,24 @@
     box-shadow var(--motion-hover),
     background-color var(--motion-hover);
 }
-.surface:hover:where(:not(:disabled):not([data-disabled="true"])) {
-  border-color: color-mix(
-    in srgb,
-    var(--fg) var(--field-hover-strength),
-    var(--surface)
+.surface:hover:where(
+    :not(
+        :disabled,
+        [data-disabled="true"],
+        [aria-disabled="true"],
+        [readonly],
+        [aria-readonly="true"],
+        [data-readonly="true"],
+        [data-disabled="true"] *,
+        [aria-disabled="true"] *,
+        [data-readonly="true"] *,
+        fieldset:disabled *,
+        :has(input:disabled, textarea:disabled)
+      )
+  ) {
+  border-color: var(
+    --field-hover-border,
+    color-mix(in srgb, var(--fg) var(--field-hover-strength), var(--surface))
   );
 }
 .surface[data-focus="true"],

package/components/Dialog.d.ts

@@ -1,9 +1,14 @@
 import { type ReactNode } from "react";
-export declare function Dialog({ open: requestedOpen, onClose, title, children, footer, wide, }: {
+export declare function Dialog({ open: requestedOpen, onClose, title, children, footer, wide, size, role, descriptionId, busy, variant, }: {
     open: boolean;
     onClose(): void;
     title: string;
     children: ReactNode;
     footer?: ReactNode;
     wide?: boolean;
+    size?: "small" | "medium" | "large";
+    role?: "dialog" | "alertdialog";
+    descriptionId?: string;
+    busy?: boolean;
+    variant?: "default" | "message" | "confirm" | "form";
 }): import("react").ReactPortal;

package/components/Dialog.js

@@ -24,7 +24,12 @@ function Dialog({
   title,
   children,
   footer,
-  wide = false
+  wide = false,
+  size = "medium",
+  role = "dialog",
+  descriptionId,
+  busy = false,
+  variant = "default"
 }) {
   const owner = useSurfacePortal(), open = requestedOpen && owner?.active !== false;
   const { ref, host, setRef } = useSurfaceHost();
@@ -50,8 +55,12 @@ function Dialog({
         previousFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
         element.showModal();
         element.querySelector(
-          'input:not([disabled]):not([readonly]):not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),textarea:not([disabled]),[role="combobox"]'
+          "[data-dialog-initial-focus]:not(:disabled)"
         )?.focus({ preventScroll: true });
+        if (!element.querySelector("[data-dialog-initial-focus]:not(:disabled)"))
+          element.querySelector(
+            'input:not([disabled]):not([readonly]):not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),textarea:not([disabled]),[role="combobox"]'
+          )?.focus({ preventScroll: true });
       }
       void surfaceMotion(element, "enter", "0 4px");
       return;
@@ -81,23 +90,27 @@ function Dialog({
       {
         ref: setRef,
         "aria-labelledby": titleId,
-        className: `${s.dialog} ${wide ? s.wide : ""} ${closing ? s.closing : ""}`,
+        "aria-describedby": descriptionId,
+        "aria-busy": busy || void 0,
+        role,
+        "data-variant": variant,
+        className: `${s.dialog} ${wide || size === "large" ? s.wide : ""} ${size === "small" ? s.small : ""} ${closing ? s.closing : ""}`,
         onCancel: (e) => {
           e.preventDefault();
           e.stopPropagation();
-          onClose();
+          if (!busy) onClose();
         },
         onMouseDown: (e) => {
           backdropDown.current = outside(e);
         },
         onClick: (e) => {
-          if (backdropDown.current && outside(e)) onClose();
+          if (!busy && backdropDown.current && outside(e)) onClose();
           backdropDown.current = false;
         },
         children: [
           /* @__PURE__ */ jsxs("header", { className: s.dialogHeader, children: [
             /* @__PURE__ */ jsx("h2", { id: titleId, children: title }),
-            /* @__PURE__ */ jsx(IconButton, { label: "\u5173\u95ED\u5F39\u7A97", onClick: onClose, children: /* @__PURE__ */ jsx(X, {}) })
+            /* @__PURE__ */ jsx(IconButton, { label: "\u5173\u95ED\u5F39\u7A97", onClick: onClose, disabled: busy, children: /* @__PURE__ */ jsx(X, {}) })
           ] }),
           /* @__PURE__ */ jsx("div", { className: s.dialogBody, children }),
           footer && /* @__PURE__ */ jsx("footer", { className: s.dialogFooter, children: footer })

package/components/Dialog.module.css

@@ -43,6 +43,23 @@
 .wide {
   width: min(var(--dialog-wide-width), calc(100vw - 32px));
 }
+.small {
+  width: min(420px, calc(100vw - 32px));
+}
+.dialog[data-variant="message"] .dialogHeader {
+  border: 0;
+  padding-bottom: 12px;
+}
+.dialog[data-variant="message"] .dialogBody {
+  padding-top: 0;
+  padding-bottom: 24px;
+}
+.dialog[data-variant="message"] .dialogFooter {
+  border: 0;
+  background: transparent;
+  padding-top: 0;
+  padding-bottom: 18px;
+}
 .closing {
   pointer-events: none;
 }

package/components/DialogVariants.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+import type { FormController } from "./useFormState";
+type ShellProps = {
+    open: boolean;
+    onClose(): void;
+    title: string;
+    children: ReactNode;
+};
+type Result = void | boolean;
+export declare function MessageDialog({ open, onClose, title, children, tone, closeLabel, }: ShellProps & {
+    tone?: "info" | "success" | "warning" | "error";
+    closeLabel?: string;
+}): import("react").JSX.Element;
+export declare function ConfirmDialog({ open, onClose, title, children, onConfirm, danger, confirmLabel, cancelLabel, }: ShellProps & {
+    onConfirm(): Result | Promise<Result>;
+    danger?: boolean;
+    confirmLabel?: string;
+    cancelLabel?: string;
+}): import("react").JSX.Element;
+export declare function FormDialog<T extends Record<string, unknown>>({ open, onClose, title, children, onSubmit, controller, submitLabel, cancelLabel, wide, }: ShellProps & {
+    controller: FormController<T>;
+    onSubmit(values: T): Result | Promise<Result>;
+    submitLabel?: string;
+    cancelLabel?: string;
+    wide?: boolean;
+}): import("react").JSX.Element;
+export {};

package/components/DialogVariants.js

@@ -0,0 +1,161 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { Dialog } from "./Dialog.js";
+import { Button } from "./Button.js";
+import { Form } from "./Form.js";
+import { Alert } from "./Alert.js";
+import s from "./DialogVariants.module.css";
+function useDialogAction(open, onClose) {
+  const [busy, setBusy] = useState(false), [error, setError] = useState(""), revision = useRef(0), close = useRef(onClose);
+  close.current = onClose;
+  useLayoutEffect(() => {
+    revision.current++;
+    setBusy(false);
+    setError("");
+    return () => {
+      revision.current++;
+    };
+  }, [open]);
+  const run = async (action) => {
+    if (busy) return;
+    const id = ++revision.current;
+    setBusy(true);
+    setError("");
+    try {
+      const result = await action();
+      if (id === revision.current && result !== false) close.current();
+    } catch (e) {
+      if (id === revision.current)
+        setError(e instanceof Error ? e.message : "\u64CD\u4F5C\u672A\u5B8C\u6210\uFF0C\u8BF7\u91CD\u8BD5");
+    } finally {
+      if (id === revision.current) setBusy(false);
+    }
+  };
+  return { busy, error, run };
+}
+function MessageDialog({
+  open,
+  onClose,
+  title,
+  children,
+  tone = "info",
+  closeLabel = "\u77E5\u9053\u4E86"
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onClose,
+      title,
+      size: "small",
+      variant: "message",
+      role: "alertdialog",
+      descriptionId: id,
+      footer: /* @__PURE__ */ jsx(Button, { variant: "primary", "data-dialog-initial-focus": true, onClick: onClose, children: closeLabel }),
+      children: /* @__PURE__ */ jsx("div", { id, "data-tone": tone, className: s.description, children })
+    }
+  );
+}
+function ConfirmDialog({
+  open,
+  onClose,
+  title,
+  children,
+  onConfirm,
+  danger = false,
+  confirmLabel = "\u786E\u8BA4",
+  cancelLabel = "\u53D6\u6D88"
+}) {
+  const action = useDialogAction(open, onClose), id = useId();
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onClose,
+      title,
+      size: "small",
+      variant: "confirm",
+      role: "alertdialog",
+      descriptionId: id,
+      busy: action.busy,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "data-dialog-initial-focus": true,
+            disabled: action.busy,
+            onClick: onClose,
+            children: cancelLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: danger ? "danger" : "primary",
+            className: danger ? s.destructive : void 0,
+            loading: action.busy,
+            onClick: () => void action.run(onConfirm),
+            children: confirmLabel
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx("div", { id, className: s.description, children }),
+        action.error && /* @__PURE__ */ jsx("div", { className: s.feedback, children: /* @__PURE__ */ jsx(Alert, { tone: "danger", icon: false, children: action.error }) })
+      ]
+    }
+  );
+}
+function FormDialog({
+  open,
+  onClose,
+  title,
+  children,
+  onSubmit,
+  controller,
+  submitLabel = "\u4FDD\u5B58",
+  cancelLabel = "\u53D6\u6D88",
+  wide = false
+}) {
+  const action = useDialogAction(open, onClose), id = useId(), busy = action.busy || controller.isSubmitting;
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onClose,
+      title,
+      variant: "form",
+      wide,
+      busy,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { disabled: busy, onClick: onClose, children: cancelLabel }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", form: id, variant: "primary", loading: busy, children: submitLabel })
+      ] }),
+      children: /* @__PURE__ */ jsxs(
+        Form,
+        {
+          id,
+          "aria-label": title,
+          className: s.fields,
+          controller,
+          onSubmit: (values) => action.run(() => onSubmit(values)),
+          children: [
+            children,
+            action.error && /* @__PURE__ */ jsx(Alert, { tone: "danger", icon: false, children: action.error })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  ConfirmDialog,
+  FormDialog,
+  MessageDialog
+};

package/components/DialogVariants.module.css

@@ -0,0 +1,29 @@
+.description {
+  padding-top: 2px;
+  min-width: 0;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.85;
+  overflow-wrap: anywhere;
+}
+.feedback {
+  margin-top: 16px;
+}
+.destructive {
+  background: var(--danger);
+  border-color: var(--danger);
+  color: var(--on-danger, #fff);
+}
+.destructive:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--danger) 86%, var(--surface));
+  border-color: transparent;
+}
+.fields {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+}

package/components/HierarchyPicker.module.css

@@ -7,6 +7,7 @@
   margin: 3px 3px 8px;
 }
 .tree {
+  composes: stack from "./OptionList.module.css";
   max-height: 292px;
   overflow: auto;
   padding: 2px;
@@ -90,6 +91,11 @@
   font-size: 11px;
   color: var(--muted);
 }
+.footerActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
 .columns {
   display: flex;
   min-height: 240px;
@@ -98,6 +104,7 @@
   overscroll-behavior: contain;
 }
 .column {
+  composes: stack from "./OptionList.module.css";
   flex: 1 0 170px;
   min-width: 170px;
   max-height: 292px;
@@ -110,8 +117,36 @@
     var(--separator-color);
 }
 .treeRow {
+  position: relative;
   animation: rowIn 140ms var(--ease);
 }
+.categoryRow {
+  --tree-elbow-gap: 6px;
+  --tree-stem-inset: 12px;
+  min-height: 42px;
+}
+.categoryRow[data-branch="true"] [data-menu-label] {
+  font-weight: 600;
+}
+.categoryRow [data-menu-icon] {
+  width: 26px;
+  height: 26px;
+  flex-basis: 26px;
+  border-radius: 7px;
+  background: var(--field);
+  border: 1px solid var(--line);
+  color: var(--muted);
+}
+.categoryRow[data-branch="true"] [data-menu-icon] {
+  background: var(--selected);
+  color: var(--accent);
+}
+.categoryRow [data-menu-trailing] > span {
+  border-radius: 999px;
+}
+.categoryRow .mixed {
+  border-radius: 999px;
+}
 .treeRow[aria-disabled="true"] .expander {
   pointer-events: none;
 }

package/components/IconButton.module.css

@@ -26,8 +26,11 @@
   min-width: 30px;
 }
 .iconButton[data-variant="primary"] {
-  background: var(--accent);
-  color: var(--on-accent);
+  background: var(--accent-fill, var(--accent));
+  color: var(--on-accent-fill, var(--on-accent));
+}
+.iconButton[data-variant="primary"]:hover:not(:disabled) {
+  background: var(--accent-fill-hover, var(--accent));
 }
 .iconButton[data-variant="secondary"] {
   border: 1px solid var(--border);

package/components/Indicator.module.css

@@ -42,7 +42,7 @@
   color: var(--fg);
 }
 .indicator button[aria-current="page"] {
-  color: var(--fg);
+  color: var(--navigation-active-color, var(--fg));
 }
 .indicator button:focus-visible {
   outline-offset: -2px;

package/components/Input.d.ts

@@ -1,7 +1,8 @@
 import type { ComponentPropsWithRef, ReactNode } from "react";
-export declare function Input({ label, error, hint, leading, ...props }: ComponentPropsWithRef<"input"> & {
+export declare function Input({ label, error, hint, leading, trailing, ...props }: ComponentPropsWithRef<"input"> & {
     label?: string;
     error?: string;
     hint?: string;
     leading?: ReactNode;
+    trailing?: ReactNode;
 }): import("react").JSX.Element;

package/components/Input.js

@@ -7,6 +7,7 @@ function Input({
   error,
   hint,
   leading,
+  trailing,
   ...props
 }) {
   const field = useFieldControl({ ...props, label, error, hint });
@@ -18,10 +19,17 @@ function Input({
       className: [s.input, props.className].filter(Boolean).join(" ")
     }
   );
-  const content = leading ? /* @__PURE__ */ jsxs("div", { className: s.withIcon, children: [
-    /* @__PURE__ */ jsx("span", { className: s.leading, children: leading }),
-    control
-  ] }) : control;
+  const content = leading || trailing ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${s.withIcon} ${leading ? s.hasLeading : ""} ${trailing ? s.hasTrailing : ""}`,
+      children: [
+        leading && /* @__PURE__ */ jsx("span", { className: s.leading, children: leading }),
+        control,
+        trailing && /* @__PURE__ */ jsx("span", { className: s.trailing, children: trailing })
+      ]
+    }
+  ) : control;
   return field.wrapped ? content : /* @__PURE__ */ jsx(FormField, { ...field, children: content });
 }
 export {

package/components/Input.module.css

@@ -8,9 +8,26 @@
   width: 100%;
   min-width: 0;
 }
-.withIcon .input {
+.hasLeading .input {
   padding-left: 38px;
 }
+.hasTrailing .input {
+  padding-right: 36px;
+}
+.trailing {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  color: var(--muted);
+  pointer-events: none;
+}
+.trailing > svg {
+  width: 16px;
+  height: 16px;
+}
 .leading {
   position: absolute;
   left: 12px;

package/components/LoadingState.d.ts

@@ -1,5 +1,7 @@
-export declare function LoadingState({ variant, label, progress, }: {
+export declare function LoadingState({ variant, label, progress, showLabel, fullPage, }: {
     variant?: "spinner" | "dots" | "skeleton" | "progress";
     label?: string;
     progress?: number;
+    showLabel?: boolean;
+    fullPage?: boolean;
 }): import("react").JSX.Element;

package/components/LoadingState.js

@@ -6,23 +6,34 @@ import s from "./LoadingState.module.css";
 function LoadingState({
   variant = "spinner",
   label = "\u6B63\u5728\u52A0\u8F7D",
-  progress
+  progress,
+  showLabel = true,
+  fullPage = false
 }) {
   if (variant === "skeleton") return /* @__PURE__ */ jsx(SkeletonRows, { label });
-  return /* @__PURE__ */ jsxs("div", { className: s.loading, role: "status", "aria-label": label, children: [
-    variant === "progress" ? /* @__PURE__ */ jsx(Progress, { value: progress ?? 0, label }) : /* @__PURE__ */ jsx(
-      Spinner,
-      {
-        size: 24,
-        variant: variant === "dots" ? "dots" : "ring",
-        decorative: true
-      }
-    ),
-    /* @__PURE__ */ jsxs("span", { children: [
-      label,
-      variant === "progress" && progress !== void 0 ? " " + Math.round(progress) + "%" : ""
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: s.loading,
+      role: "status",
+      "aria-label": label,
+      "data-full-page": fullPage || void 0,
+      children: [
+        variant === "progress" ? /* @__PURE__ */ jsx(Progress, { value: progress ?? 0, label }) : /* @__PURE__ */ jsx(
+          Spinner,
+          {
+            size: 24,
+            variant: variant === "dots" ? "dots" : "ring",
+            decorative: true
+          }
+        ),
+        showLabel && /* @__PURE__ */ jsxs("span", { children: [
+          label,
+          variant === "progress" && progress !== void 0 ? " " + Math.round(progress) + "%" : ""
+        ] })
+      ]
+    }
+  );
 }
 export {
   LoadingState

package/components/LoadingState.module.css

@@ -12,3 +12,6 @@
 .loading > div {
   width: min(260px, 100%);
 }
+.loading[data-full-page="true"] {
+  min-height: calc(100dvh - 200px);
+}

package/components/MenuItem.d.ts

@@ -5,10 +5,11 @@ export type MenuItemProps = Omit<HTMLAttributes<HTMLElement>, "children" | "pref
     prefix?: ReactNode;
     shortcut?: string;
     trailing?: ReactNode;
+    meta?: ReactNode;
     selected?: boolean;
     active?: boolean;
     disabled?: boolean;
     selection?: "check" | "checkbox" | "radio";
     tone?: "default" | "danger";
 };
-export declare function MenuItem({ as, prefix, label, description, icon, reserveIcon, shortcut, trailing, selected, active, disabled, selection, tone, className, ...props }: MenuItemProps): import("react").JSX.Element;
+export declare function MenuItem({ as, prefix, label, description, icon, reserveIcon, shortcut, trailing, meta, selected, active, disabled, selection, tone, className, ...props }: MenuItemProps): import("react").JSX.Element;

package/components/MenuItem.js

@@ -11,6 +11,7 @@ function MenuItem({
   reserveIcon = false,
   shortcut,
   trailing,
+  meta,
   selected = false,
   active = false,
   disabled = false,
@@ -31,6 +32,7 @@ function MenuItem({
       }
     ),
     shortcut && /* @__PURE__ */ jsx("kbd", { className: s.shortcut, children: shortcut }),
+    meta && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: meta }),
     /* @__PURE__ */ jsx("span", { className: s.trailing, "data-menu-trailing": true, "aria-hidden": "true", children: trailing || (selection === "checkbox" ? /* @__PURE__ */ jsx("span", { className: s.checkbox, "data-checked": selected, children: selected && /* @__PURE__ */ jsx(Check, {}) }) : selection === "radio" ? /* @__PURE__ */ jsx("span", { className: s.radio, "data-checked": selected, children: /* @__PURE__ */ jsx("i", {}) }) : selection === "check" && selected ? /* @__PURE__ */ jsx(Check, { className: s.check }) : null) })
   ] });
   const common = {

package/components/MenuItem.module.css

@@ -104,6 +104,11 @@
 .shortcut {
   flex-shrink: 0;
   margin-left: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
   font-family: var(--ui-font);
   font-size: var(--menu-shortcut-font-size);
   font-weight: 400;
@@ -111,6 +116,10 @@
   font-variant-numeric: tabular-nums;
   color: var(--muted);
   white-space: nowrap;
+  text-align: right;
+}
+.shortcut ~ .trailing:empty {
+  display: none;
 }
 .check {
   color: var(--accent);

package/components/MultiSelect.d.ts

@@ -1,6 +1,6 @@
 import { type FieldOptions } from "./field";
 import type { SelectOption } from "./types";
-export declare function MultiSelect({ value, onChange, options, label, disabled, readOnly, required, name, id: controlId, error, hint, maxSelected, clearable, placeholder, ...aria }: FieldOptions & {
+export declare function MultiSelect({ value, onChange, options, label, disabled, readOnly, required, name, id: controlId, error, hint, maxSelected, clearable, placeholder, display, ...aria }: FieldOptions & {
     value: string[];
     onChange(value: string[]): void;
     options: SelectOption[];
@@ -9,4 +9,5 @@ export declare function MultiSelect({ value, onChange, options, label, disabled,
     maxSelected?: number;
     clearable?: boolean;
     placeholder?: string;
+    display?: "summary" | "tags";
 }): import("react").JSX.Element;