@adecore/ui 0.31.11 → 0.32.0

package/dist/settings/ConfirmDialog.js

@@ -1,9 +1,56 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { PromptDialog } from '../PromptDialog.js';
+import { c as _c } from "react/compiler-runtime";
+import { PromptDialog } from "../PromptDialog.js";
 /* One destructive step, asked before it happens, over whichever dialog it was opened from. */
-export function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, onConfirm, className, ref }) {
-    return (_jsx(PromptDialog, { ref: ref, className: className, open: open, nested: true, danger: true, title: title, description: description, confirmLabel: confirmLabel, onConfirm: async () => {
-            await onConfirm();
-            onOpenChange(false);
-        }, onOpenChange: onOpenChange }));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ConfirmDialog(t0) {
+  const $ = _c(12);
+  const {
+    open,
+    onOpenChange,
+    title,
+    description,
+    confirmLabel,
+    onConfirm,
+    className,
+    ref
+  } = t0;
+  let t1;
+  if ($[0] !== onConfirm || $[1] !== onOpenChange) {
+    t1 = async () => {
+      await onConfirm();
+      onOpenChange(false);
+    };
+    $[0] = onConfirm;
+    $[1] = onOpenChange;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== className || $[4] !== confirmLabel || $[5] !== description || $[6] !== onOpenChange || $[7] !== open || $[8] !== ref || $[9] !== t1 || $[10] !== title) {
+    t2 = /*#__PURE__*/_jsx(PromptDialog, {
+      ref: ref,
+      className: className,
+      open: open,
+      nested: true,
+      danger: true,
+      title: title,
+      description: description,
+      confirmLabel: confirmLabel,
+      onConfirm: t1,
+      onOpenChange: onOpenChange
+    });
+    $[3] = className;
+    $[4] = confirmLabel;
+    $[5] = description;
+    $[6] = onOpenChange;
+    $[7] = open;
+    $[8] = ref;
+    $[9] = t1;
+    $[10] = title;
+    $[11] = t2;
+  } else {
+    t2 = $[11];
+  }
+  return t2;
+}

package/dist/settings/DetailHeader.js

@@ -1,6 +1,74 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
 /* The head of a detail: a mark, the name, a line under it, and the actions of the thing. */
-export function DetailHeader({ mark, title, subtitle, actions, className, ref }) {
-    return (_jsxs("header", { ref: ref, className: clsx('flex min-w-0 flex-wrap items-start gap-3', className), children: [mark, _jsxs("div", { className: "min-w-0 grow basis-48", children: [_jsx("h3", { className: "truncate text-lg font-semibold text-text", children: title }), _jsx("div", { className: "flex min-w-0 items-center gap-1.5 text-xs break-words text-text-muted", children: subtitle })] }), actions] }));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function DetailHeader(t0) {
+  const $ = _c(15);
+  const {
+    mark,
+    title,
+    subtitle,
+    actions,
+    className,
+    ref
+  } = t0;
+  let t1;
+  if ($[0] !== className) {
+    t1 = clsx("flex min-w-0 flex-wrap items-start gap-3", className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== title) {
+    t2 = /*#__PURE__*/_jsx("h3", {
+      className: "truncate text-lg font-semibold text-text",
+      children: title
+    });
+    $[2] = title;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== subtitle) {
+    t3 = /*#__PURE__*/_jsx("div", {
+      className: "flex min-w-0 items-center gap-1.5 text-xs break-words text-text-muted",
+      children: subtitle
+    });
+    $[4] = subtitle;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== t2 || $[7] !== t3) {
+    t4 = /*#__PURE__*/_jsxs("div", {
+      className: "min-w-0 grow basis-48",
+      children: [t2, t3]
+    });
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== actions || $[10] !== mark || $[11] !== ref || $[12] !== t1 || $[13] !== t4) {
+    t5 = /*#__PURE__*/_jsxs("header", {
+      ref: ref,
+      className: t1,
+      children: [mark, t4, actions]
+    });
+    $[9] = actions;
+    $[10] = mark;
+    $[11] = ref;
+    $[12] = t1;
+    $[13] = t4;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  return t5;
+}

package/dist/settings/MasterDetail.js

@@ -1,16 +1,128 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
-const LIST_WIDTHS = { 280: 'w-70', 320: 'w-80', 340: 'w-85' };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LIST_WIDTHS = {
+  280: 'w-70',
+  320: 'w-80',
+  340: 'w-85'
+};
 /*
  * A list beside the detail of what is picked in it, for a pane of many things of one kind (accounts,
  * devices, shortcut categories). Each side scrolls on its own, and the detail takes the rest of the
  * width, like a single-column pane. Its section must be `split`, so the dialog hands the pane its whole height
  * instead of a padded scrolling column.
  */
-export function MasterDetail({ list, listWidth, listLabel, detail, className, ref }) {
-    return (_jsxs("div", { ref: ref, className: clsx('flex min-h-0 min-w-0 grow border-t border-border max-[640px]:flex-col', className), children: [_jsx("nav", { "aria-label": listLabel, className: clsx('flex shrink-0 flex-col gap-0.5 overflow-y-auto border-r border-border p-2 max-[640px]:max-h-60 max-[640px]:w-auto max-[640px]:border-r-0 max-[640px]:border-b', LIST_WIDTHS[listWidth]), children: list }), _jsx("div", { className: "min-h-0 min-w-0 grow overflow-y-auto", children: _jsx("div", { className: "flex min-w-0 flex-col gap-7 px-8 pt-6 pb-10 max-[960px]:px-4", children: detail }) })] }));
+export function MasterDetail(t0) {
+  const $ = _c(15);
+  const {
+    list,
+    listWidth,
+    listLabel,
+    detail,
+    className,
+    ref
+  } = t0;
+  let t1;
+  if ($[0] !== className) {
+    t1 = clsx("flex min-h-0 min-w-0 grow border-t border-border max-[640px]:flex-col", className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const t2 = LIST_WIDTHS[listWidth];
+  let t3;
+  if ($[2] !== t2) {
+    t3 = clsx("flex shrink-0 flex-col gap-0.5 overflow-y-auto border-r border-border p-2 max-[640px]:max-h-60 max-[640px]:w-auto max-[640px]:border-r-0 max-[640px]:border-b", t2);
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== list || $[5] !== listLabel || $[6] !== t3) {
+    t4 = /*#__PURE__*/_jsx("nav", {
+      "aria-label": listLabel,
+      className: t3,
+      children: list
+    });
+    $[4] = list;
+    $[5] = listLabel;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== detail) {
+    t5 = /*#__PURE__*/_jsx("div", {
+      className: "min-h-0 min-w-0 grow overflow-y-auto",
+      children: /*#__PURE__*/_jsx("div", {
+        className: "flex min-w-0 flex-col gap-7 px-8 pt-6 pb-10 max-[960px]:px-4",
+        children: detail
+      })
+    });
+    $[8] = detail;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] !== ref || $[11] !== t1 || $[12] !== t4 || $[13] !== t5) {
+    t6 = /*#__PURE__*/_jsxs("div", {
+      ref: ref,
+      className: t1,
+      children: [t4, t5]
+    });
+    $[10] = ref;
+    $[11] = t1;
+    $[12] = t4;
+    $[13] = t5;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  return t6;
 }
 /* One row of the list. The picked one is lifted a shade. */
-export function MasterItem({ selected, onSelect, children, className, ref }) {
-    return (_jsx("button", { ref: ref, type: "button", "aria-current": selected ? 'true' : undefined, className: clsx('flex w-full min-w-0 shrink-0 items-center gap-3 rounded-lg px-3 py-2 text-left text-sm text-text focus-visible:-outline-offset-2', selected ? 'bg-text/5' : 'hover:bg-surface-hover', className), onClick: onSelect, children: children }));
-}
+export function MasterItem(t0) {
+  const $ = _c(9);
+  const {
+    selected,
+    onSelect,
+    children,
+    className,
+    ref
+  } = t0;
+  const t1 = selected ? "true" : undefined;
+  const t2 = selected ? "bg-text/5" : "hover:bg-surface-hover";
+  let t3;
+  if ($[0] !== className || $[1] !== t2) {
+    t3 = clsx("flex w-full min-w-0 shrink-0 items-center gap-3 rounded-lg px-3 py-2 text-left text-sm text-text focus-visible:-outline-offset-2", t2, className);
+    $[0] = className;
+    $[1] = t2;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  let t4;
+  if ($[3] !== children || $[4] !== onSelect || $[5] !== ref || $[6] !== t1 || $[7] !== t3) {
+    t4 = /*#__PURE__*/_jsx("button", {
+      ref: ref,
+      type: "button",
+      "aria-current": t1,
+      className: t3,
+      onClick: onSelect,
+      children: children
+    });
+    $[3] = children;
+    $[4] = onSelect;
+    $[5] = ref;
+    $[6] = t1;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  return t4;
+}