@robert-stackflow/oneui 0.1.0 → 0.3.0

package/components/Combobox.js

@@ -1,12 +1,26 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
 import { Plus } from "lucide-react";
-import { fieldTriggerProps, useFieldControl } from "./field.js";
+import {
+  FieldContext,
+  fieldInputProps,
+  fieldTriggerProps,
+  useFieldControl
+} from "./field.js";
 import { SelectTrigger } from "./SelectTrigger.js";
 import { Popover } from "./Popover.js";
 import { SearchField } from "./SearchField.js";
+import { Input } from "./Input.js";
 import { MenuItem } from "./MenuItem.js";
 import { Spinner } from "./Spinner.js";
+import { Button } from "./Button.js";
+import { DisclosureChevron } from "./DisclosureChevron.js";
 import s from "./Combobox.module.css";
 function Combobox({
   value,
@@ -16,14 +30,24 @@ function Combobox({
   onCreate,
   label = "\u641C\u7D22\u9009\u62E9",
   placeholder = "\u8BF7\u9009\u62E9",
+  mode = "panel",
   ...props
 }) {
-  const field = useFieldControl({ ...props, label }), anchor = useRef(null), list = useRef(null), id = useId(), [open, setOpen] = useState(false), [query, setQuery] = useState(""), [remote, setRemote] = useState([]), [loading, setLoading] = useState(false), [error, setError] = useState(""), [active, setActive] = useState(0), [created, setCreated] = useState(), [chosen, setChosen] = useState(), [creating, setCreating] = useState(false), [retry, setRetry] = useState(0);
-  const generation = useRef(0);
+  const field = useFieldControl({ ...props, label }), anchor = useRef(null), list = useRef(null), id = useId();
+  const [open, setOpen] = useState(false), [query, setQuery] = useState(""), [editing, setEditing] = useState(false), [remote, setRemote] = useState([]), [loading, setLoading] = useState(false), [error, setError] = useState(""), [failure, setFailure] = useState("load"), [active, setActive] = useState(-1), [created, setCreated] = useState(), [chosen, setChosen] = useState(), [creating, setCreating] = useState(false), [retry, setRetry] = useState(0);
+  const generation = useRef(0), restoring = useRef(false), loader = useRef(loadOptions);
+  loader.current = loadOptions;
+  const inline = mode === "input", async = !!loadOptions;
   const close = useCallback(() => {
     generation.current++;
     setOpen(false);
+    setEditing(false);
     setCreating(false);
+    setLoading(false);
+    restoring.current = true;
+    queueMicrotask(() => {
+      restoring.current = false;
+    });
   }, []);
   useEffect(
     () => () => {
@@ -31,28 +55,21 @@ function Combobox({
     },
     []
   );
-  const loader = useRef(loadOptions);
-  loader.current = loadOptions;
-  const async = !!loadOptions;
   useEffect(() => {
     if (!open || !async) return;
-    const controller = new AbortController();
+    const controller = new AbortController(), revision = generation.current;
     setLoading(true);
     setError("");
     const timer = setTimeout(() => {
       Promise.resolve().then(() => loader.current(query, controller.signal)).then((items) => {
-        if (!controller.signal.aborted) {
+        if (!controller.signal.aborted && revision === generation.current) {
           setRemote(items);
           setLoading(false);
-          setActive(
-            Math.max(
-              0,
-              items.findIndex((item) => !item.disabled)
-            )
-          );
+          setActive(inline ? -1 : items.findIndex((item) => !item.disabled));
         }
       }).catch(() => {
-        if (!controller.signal.aborted) {
+        if (!controller.signal.aborted && revision === generation.current) {
+          setFailure("load");
           setError("\u9009\u9879\u52A0\u8F7D\u5931\u8D25");
           setLoading(false);
         }
@@ -62,10 +79,10 @@ function Combobox({
       clearTimeout(timer);
       controller.abort();
     };
-  }, [open, query, async, retry]);
+  }, [open, query, async, retry, inline]);
   useEffect(() => {
     if (field.disabled || field.readOnly) close();
-  }, [field.disabled, field.readOnly]);
+  }, [field.disabled, field.readOnly, close]);
   const terms = query.trim().toLowerCase().split(/\s+/).filter(Boolean), filtered = async ? remote : options.filter(
     (item) => terms.every(
       (term) => (item.label + " " + (item.description || "") + " " + item.value).toLowerCase().includes(term)
@@ -73,7 +90,8 @@ function Combobox({
   );
   const selected = [...options, ...remote, created, chosen].find(
     (item) => item?.value === value
-  );
+  ), first = filtered.findIndex((item) => !item.disabled);
+  const activeIndex = active >= 0 && filtered[active] && !filtered[active].disabled ? active : inline ? -1 : first;
   const choose = (item) => {
     if (item.disabled || field.disabled || field.readOnly) return;
     setChosen(item);
@@ -82,19 +100,116 @@ function Combobox({
     anchor.current?.focus();
   };
   const show = () => {
+    if (field.disabled || field.readOnly || creating) return;
+    generation.current++;
+    setLoading(async);
     setQuery("");
-    setActive(0);
+    setEditing(false);
+    setActive(inline ? -1 : 0);
+    setError("");
+    setOpen(true);
+  };
+  const search = (text) => {
+    if (field.disabled || field.readOnly || creating) return;
+    generation.current++;
+    setLoading(async);
+    setQuery(text);
+    setEditing(true);
+    setActive(inline ? -1 : 0);
     setError("");
     setOpen(true);
   };
   useEffect(() => {
     list.current?.querySelector('[data-active="true"]')?.scrollIntoView({ block: "nearest" });
-  }, [active, query]);
+  }, [activeIndex, query, loading]);
   const canCreate = !!onCreate && !!query.trim() && !filtered.some(
     (item) => item.label.toLowerCase() === query.trim().toLowerCase()
   );
+  const create = async () => {
+    if (!onCreate || creating || loading || !canCreate) return;
+    const revision = generation.current, text = query.trim();
+    setCreating(true);
+    setError("");
+    try {
+      const result = await onCreate(text);
+      if (revision !== generation.current) return;
+      const item = { value: result || text, label: text };
+      setCreated(item);
+      choose(item);
+    } catch {
+      if (revision === generation.current) {
+        setFailure("create");
+        setError("\u521B\u5EFA\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5\u3002");
+      }
+    } finally {
+      if (revision === generation.current) setCreating(false);
+    }
+  };
+  const navigate = (event) => {
+    if (event.nativeEvent.isComposing || event.keyCode === 229 || field.readOnly || field.disabled)
+      return;
+    if (event.key === "Escape" && open) {
+      event.preventDefault();
+      event.stopPropagation();
+      close();
+      anchor.current?.focus();
+      return;
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!open) {
+        show();
+        return;
+      }
+      const direction = event.key === "ArrowDown" ? 1 : -1, start = activeIndex < 0 ? direction === 1 ? -1 : 0 : activeIndex;
+      for (let step = 1; step <= filtered.length; step++) {
+        const next = (start + direction * step + filtered.length * 2) % filtered.length;
+        if (!filtered[next].disabled) {
+          setActive(next);
+          break;
+        }
+      }
+    } else if (event.key === "Enter" && open) {
+      event.preventDefault();
+      if (!loading && !creating && !error) {
+        const item = filtered[activeIndex < 0 ? first : activeIndex];
+        if (item) choose(item);
+        else void create();
+      }
+    }
+  };
+  const activeId = open && !loading && !error && activeIndex >= 0 ? id + "-" + activeIndex : void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+    inline ? /* @__PURE__ */ jsx(FieldContext, { value: { ...field, name: void 0 }, children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...fieldInputProps(field),
+        name: void 0,
+        ref: anchor,
+        role: "combobox",
+        "aria-label": field.label,
+        "aria-expanded": open,
+        "aria-busy": loading || creating,
+        "aria-controls": id + "-list",
+        "aria-autocomplete": "list",
+        "aria-activedescendant": activeId,
+        autoComplete: "off",
+        disabled: field.disabled || creating,
+        className: s.inputTrigger,
+        value: open && editing ? query : selected?.label || value,
+        placeholder,
+        leading: selected?.icon,
+        trailing: loading || creating ? /* @__PURE__ */ jsx(Spinner, { size: 16, decorative: true }) : /* @__PURE__ */ jsx(DisclosureChevron, { expanded: open }),
+        onChange: (event) => search(event.target.value),
+        onFocus: () => {
+          if (!restoring.current && !open) show();
+        },
+        onClick: () => {
+          if (!open) show();
+        },
+        onKeyDown: navigate
+      }
+    ) }) : /* @__PURE__ */ jsx(
       SelectTrigger,
       {
         ...fieldTriggerProps(field),
@@ -107,12 +222,7 @@ function Combobox({
         onClick: () => {
           if (!field.readOnly) open ? close() : show();
         },
-        onKeyDown: (event) => {
-          if (!field.readOnly && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
-            event.preventDefault();
-            show();
-          }
-        },
+        onKeyDown: navigate,
         children: /* @__PURE__ */ jsx("span", { children: selected?.label || value || placeholder })
       }
     ),
@@ -134,36 +244,21 @@ function Combobox({
         anchor,
         label: field.label + "\u9009\u9879",
         width: 300,
+        autoFocus: !inline,
+        matchAnchorWidth: inline,
         children: /* @__PURE__ */ jsxs("div", { className: s.panel, children: [
-          /* @__PURE__ */ jsx(
+          !inline && /* @__PURE__ */ jsx(
             SearchField,
             {
               label: "\u641C\u7D22" + field.label,
               placeholder: "\u641C\u7D22\u9009\u9879\u2026",
               value: query,
-              onChange: (value2) => {
-                setQuery(value2);
-                setActive(0);
-              },
+              onChange: search,
               loading,
+              disabled: creating,
               "aria-controls": id + "-list",
-              "aria-activedescendant": filtered[active] ? id + "-" + active : void 0,
-              onKeyDown: (event) => {
-                if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-                  event.preventDefault();
-                  const direction = event.key === "ArrowDown" ? 1 : -1;
-                  for (let step = 1; step <= filtered.length; step++) {
-                    const next = (active + direction * step + filtered.length * 2) % filtered.length;
-                    if (!filtered[next].disabled) {
-                      setActive(next);
-                      break;
-                    }
-                  }
-                } else if (event.key === "Enter") {
-                  event.preventDefault();
-                  if (!loading && filtered[active]) choose(filtered[active]);
-                }
-              }
+              "aria-activedescendant": activeId,
+              onKeyDown: navigate
             }
           ),
           /* @__PURE__ */ jsx(
@@ -175,13 +270,22 @@ function Combobox({
               "aria-label": field.label,
               className: s.list,
               "aria-busy": loading,
-              children: error ? /* @__PURE__ */ jsxs("div", { className: s.empty, children: [
+              children: error ? /* @__PURE__ */ jsxs("div", { className: s.empty, role: "alert", children: [
                 /* @__PURE__ */ jsx("span", { children: error }),
                 /* @__PURE__ */ jsx(
-                  "button",
+                  Button,
                   {
-                    type: "button",
-                    onClick: () => setRetry((value2) => value2 + 1),
+                    size: "small",
+                    variant: "ghost",
+                    onClick: () => {
+                      setError("");
+                      if (failure === "create") void create();
+                      else {
+                        generation.current++;
+                        setLoading(true);
+                        setRetry((value2) => value2 + 1);
+                      }
+                    },
                     children: "\u91CD\u8BD5"
                   }
                 )
@@ -196,9 +300,9 @@ function Combobox({
                     icon: item.icon,
                     description: item.description,
                     shortcut: item.shortcut,
-                    reserveIcon: filtered.some((item2) => !!item2.icon),
+                    reserveIcon: filtered.some((option) => !!option.icon),
                     selected: value === item.value,
-                    active: active === index,
+                    active: activeIndex === index,
                     disabled: item.disabled,
                     "aria-selected": value === item.value,
                     selection: "check",
@@ -220,26 +324,8 @@ function Combobox({
               label: "\u521B\u5EFA\u201C" + query.trim() + "\u201D",
               icon: /* @__PURE__ */ jsx(Plus, {}),
               disabled: creating,
-              onClick: async () => {
-                const revision = generation.current;
-                setCreating(true);
-                setError("");
-                try {
-                  const result = await onCreate(query.trim());
-                  if (revision !== generation.current) return;
-                  const item = {
-                    value: result || query.trim(),
-                    label: query.trim()
-                  };
-                  setCreated(item);
-                  choose(item);
-                } catch {
-                  if (revision === generation.current)
-                    setError("\u521B\u5EFA\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5\u3002");
-                } finally {
-                  if (revision === generation.current) setCreating(false);
-                }
-              }
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: () => void create()
             }
           )
         ] })

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/DatePicker.d.ts

@@ -8,6 +8,9 @@ export type SingleDatePickerProps = FieldOptions & DateConstraints & {
     label: string;
     mode?: Exclude<DatePickerMode, "range">;
     seconds?: boolean;
+    timeZone?: string;
+    clearable?: boolean;
+    placeholder?: string;
 };
 export type DatePickerProps = SingleDatePickerProps | (DateRangePickerProps & {
     mode: "range";

package/components/DatePicker.js

@@ -5,7 +5,7 @@ import { useId, useState } from "react";
 import { CalendarDays, Clock3 } from "lucide-react";
 import { Popover } from "./Popover.js";
 import { usePopover } from "./usePopover.js";
-import { Calendar, dateKey } from "./Calendar.js";
+import { Calendar } from "./Calendar.js";
 import { TimeColumns } from "./TimeColumns.js";
 import { Button } from "./Button.js";
 import s from "./DatePicker.module.css";
@@ -14,6 +14,7 @@ import {
   isDateAllowed
 } from "./dateConstraints.js";
 import { DateRangePicker } from "./DateRangePicker.js";
+import { calendarNow } from "./calendarNow.js";
 function DatePicker(props) {
   return props.mode === "range" ? /* @__PURE__ */ jsx(DateRangePicker, { ...props }) : /* @__PURE__ */ jsx(SingleDatePicker, { ...props });
 }
@@ -23,6 +24,9 @@ function SingleDatePicker({
   label,
   mode = "date",
   seconds = false,
+  timeZone,
+  clearable = false,
+  placeholder = "\u8BF7\u9009\u62E9",
   disabled,
   readOnly,
   name,
@@ -47,7 +51,8 @@ function SingleDatePicker({
     hint,
     ...aria
   });
-  const pop = usePopover(field.disabled || field.readOnly), id = useId(), [date, setDate] = useState(value.slice(0, 10) || dateKey(/* @__PURE__ */ new Date())), [time, setTime] = useState("00:00");
+  const now = () => calendarNow(timeZone), today = now().date;
+  const pop = usePopover(field.disabled || field.readOnly), id = useId(), [date, setDate] = useState(value.slice(0, 10) || today), [time, setTime] = useState("00:00");
   const close = pop.closeAndFocus;
   const show = () => {
     if (field.disabled || field.readOnly) return;
@@ -56,7 +61,7 @@ function SingleDatePicker({
       return;
     }
     setDate(
-      mode === "time" ? dateKey(/* @__PURE__ */ new Date()) : boundedDate(value.slice(0, 10), constraints)
+      mode === "time" ? now().date : boundedDate(value.slice(0, 10) || now().date, constraints)
     );
     setTime(
       (mode === "time" ? value : value.split(/[T ]/)[1]) || (seconds ? "00:00:00" : "00:00")
@@ -82,6 +87,7 @@ function SingleDatePicker({
         "aria-expanded": pop.open,
         "aria-haspopup": "dialog",
         "aria-controls": id,
+        "data-placeholder": !value || void 0,
         onClick: show,
         onKeyDown: (e) => {
           if (e.key === "ArrowDown" && !pop.open) {
@@ -90,7 +96,7 @@ function SingleDatePicker({
           }
         },
         children: [
-          /* @__PURE__ */ jsx("span", { children: value.replace("T", " ") || "\u8BF7\u9009\u62E9" }),
+          /* @__PURE__ */ jsx("span", { children: value.replace("T", " ") || placeholder }),
           mode === "time" ? /* @__PURE__ */ jsx(Clock3, {}) : /* @__PURE__ */ jsx(CalendarDays, {})
         ]
       }
@@ -119,6 +125,7 @@ function SingleDatePicker({
               Calendar,
               {
                 ...constraints,
+                today,
                 key: pop.open ? "open" : "closed",
                 value: date,
                 onChange: (next) => {
@@ -143,16 +150,14 @@ function SingleDatePicker({
           ] }),
           /* @__PURE__ */ jsxs("footer", { className: s.footer, children: [
             /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
+                variant: "ghost",
+                size: "small",
                 type: "button",
-                disabled: mode !== "time" && !isDateAllowed(dateKey(/* @__PURE__ */ new Date()), constraints),
+                disabled: mode !== "time" && !isDateAllowed(today, constraints),
                 onClick: () => {
-                  const now = /* @__PURE__ */ new Date(), nextDate = dateKey(now), nextTime = [
-                    now.getHours(),
-                    now.getMinutes(),
-                    ...seconds ? [now.getSeconds()] : []
-                  ].map((v) => String(v).padStart(2, "0")).join(":");
+                  const current = now(), nextDate = current.date, nextTime = current.time.slice(0, seconds ? 8 : 5);
                   if (mode !== "time" && !isDateAllowed(nextDate, constraints))
                     return;
                   setDate(nextDate);
@@ -165,16 +170,31 @@ function SingleDatePicker({
                 children: mode === "date" ? "\u4ECA\u5929" : "\u6B64\u523B"
               }
             ),
-            mode !== "date" && /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "primary",
-                size: "small",
-                onClick: commit,
-                disabled: mode !== "time" && !isDateAllowed(date, constraints),
-                children: "\u786E\u5B9A"
-              }
-            )
+            (clearable || mode !== "date") && /* @__PURE__ */ jsxs("div", { className: s.rangeActions, children: [
+              clearable && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  variant: "ghost",
+                  disabled: !value,
+                  onClick: () => {
+                    onChange("");
+                    close();
+                  },
+                  children: "\u6E05\u7A7A"
+                }
+              ),
+              mode !== "date" && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "primary",
+                  size: "small",
+                  onClick: commit,
+                  disabled: mode !== "time" && !isDateAllowed(date, constraints),
+                  children: "\u786E\u5B9A"
+                }
+              )
+            ] })
           ] })
         ]
       }

package/components/DatePicker.module.css

@@ -12,6 +12,9 @@
   height: 15px;
   color: var(--muted);
 }
+.trigger[data-placeholder="true"] > span {
+  color: var(--placeholder);
+}
 .body {
   display: flex;
 }

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;
 }