@adecore/ui 0.31.11 → 0.32.0

package/dist/Checkbox.js

@@ -1,9 +1,78 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
 import { Check, Minus } from 'lucide-react';
 import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
-import { Icon } from './Icon.js';
+import { Icon } from "./Icon.js";
 /* Picked or not, as one item out of a list or an option that waits for a Save button. */
-export function Checkbox({ checked, onCheckedChange, label, indeterminate = false, disabled, className, ref }) {
-    return (_jsx(BaseCheckbox.Root, { ref: ref, checked: checked, indeterminate: indeterminate, onCheckedChange: (next) => onCheckedChange(next), "aria-label": label, disabled: disabled, className: clsx('flex size-4 shrink-0 items-center justify-center rounded-sm border border-border-strong bg-surface text-accent-text transition-colors', 'data-checked:border-accent data-checked:bg-accent data-indeterminate:border-accent data-indeterminate:bg-accent data-disabled:opacity-50', className), children: _jsx(BaseCheckbox.Indicator, { render: (props, state) => (_jsx("span", { ...props, children: _jsx(Icon, { icon: state.indeterminate ? Minus : Check, size: 12 }) })) }) }));
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Checkbox(t0) {
+  const $ = _c(13);
+  const {
+    checked,
+    onCheckedChange,
+    label,
+    indeterminate: t1,
+    disabled,
+    className,
+    ref
+  } = t0;
+  const indeterminate = t1 === undefined ? false : t1;
+  let t2;
+  if ($[0] !== onCheckedChange) {
+    t2 = next => onCheckedChange(next);
+    $[0] = onCheckedChange;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== className) {
+    t3 = clsx("flex size-4 shrink-0 items-center justify-center rounded-sm border border-border-strong bg-surface text-accent-text transition-colors", "data-checked:border-accent data-checked:bg-accent data-indeterminate:border-accent data-indeterminate:bg-accent data-disabled:opacity-50", className);
+    $[2] = className;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = /*#__PURE__*/_jsx(BaseCheckbox.Indicator, {
+      render: _temp
+    });
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== checked || $[6] !== disabled || $[7] !== indeterminate || $[8] !== label || $[9] !== ref || $[10] !== t2 || $[11] !== t3) {
+    t5 = /*#__PURE__*/_jsx(BaseCheckbox.Root, {
+      ref: ref,
+      checked: checked,
+      indeterminate: indeterminate,
+      onCheckedChange: t2,
+      "aria-label": label,
+      disabled: disabled,
+      className: t3,
+      children: t4
+    });
+    $[5] = checked;
+    $[6] = disabled;
+    $[7] = indeterminate;
+    $[8] = label;
+    $[9] = ref;
+    $[10] = t2;
+    $[11] = t3;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  return t5;
 }
+function _temp(props, state) {
+  return /*#__PURE__*/_jsx("span", {
+    ...props,
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: state.indeterminate ? Minus : Check,
+      size: 12
+    })
+  });
+}

package/dist/ChoiceCards.js

@@ -1,21 +1,215 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { Fragment, useId } from 'react';
 import clsx from 'clsx';
 import { Radio } from '@base-ui/react/radio';
 import { RadioGroup } from '@base-ui/react/radio-group';
-import { Icon } from './Icon.js';
-function ChoiceCard({ choice, radio }) {
-    const id = useId();
-    // As tall as the title's line, so the dot centers on it.
-    const dot = (_jsx("span", { className: "flex h-(--text-sm--line-height) shrink-0 items-center", "aria-hidden": true, children: _jsx("span", { className: "size-4 rounded-full border border-border-strong group-data-checked:border-5 group-data-checked:border-accent group-data-checked:bg-accent-text" }) }));
-    return (_jsxs(Radio.Root, { value: choice.value, disabled: choice.disabled, "aria-labelledby": `${id}-title`, "aria-describedby": `${id}-description`, className: "group focus-ring flex min-w-0 items-start gap-3 rounded-xl border border-border bg-surface p-3 text-left hover:bg-surface-hover data-checked:border-accent data-disabled:opacity-50 data-disabled:hover:bg-surface", children: [radio === 'start' && dot, choice.icon && (_jsx("span", { className: "grid size-8 shrink-0 place-items-center rounded-lg bg-surface-sunken text-text-muted group-data-checked:text-accent", children: _jsx(Icon, { icon: choice.icon, size: 16 }) })), _jsxs("span", { className: "flex min-w-0 grow flex-col gap-0.5", children: [_jsx("span", { id: `${id}-title`, className: "text-sm font-medium text-text", children: choice.title }), _jsx("span", { id: `${id}-description`, className: "text-xs text-pretty text-text-muted", children: choice.description })] }), radio === 'end' && dot] }));
+import { Icon } from "./Icon.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function ChoiceCard(t0) {
+  const $ = _c(21);
+  const {
+    choice,
+    radio
+  } = t0;
+  const id = useId();
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = /*#__PURE__*/_jsx("span", {
+      className: "flex h-(--text-sm--line-height) shrink-0 items-center",
+      "aria-hidden": true,
+      children: /*#__PURE__*/_jsx("span", {
+        className: "size-4 rounded-full border border-border-strong group-data-checked:border-5 group-data-checked:border-accent group-data-checked:bg-accent-text"
+      })
+    });
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const dot = t1;
+  const t2 = `${id}-title`;
+  const t3 = `${id}-description`;
+  const t4 = radio === "start" && dot;
+  let t5;
+  if ($[1] !== choice.icon) {
+    t5 = choice.icon && /*#__PURE__*/_jsx("span", {
+      className: "grid size-8 shrink-0 place-items-center rounded-lg bg-surface-sunken text-text-muted group-data-checked:text-accent",
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: choice.icon,
+        size: 16
+      })
+    });
+    $[1] = choice.icon;
+    $[2] = t5;
+  } else {
+    t5 = $[2];
+  }
+  const t6 = `${id}-title`;
+  let t7;
+  if ($[3] !== choice.title || $[4] !== t6) {
+    t7 = /*#__PURE__*/_jsx("span", {
+      id: t6,
+      className: "text-sm font-medium text-text",
+      children: choice.title
+    });
+    $[3] = choice.title;
+    $[4] = t6;
+    $[5] = t7;
+  } else {
+    t7 = $[5];
+  }
+  const t8 = `${id}-description`;
+  let t9;
+  if ($[6] !== choice.description || $[7] !== t8) {
+    t9 = /*#__PURE__*/_jsx("span", {
+      id: t8,
+      className: "text-xs text-pretty text-text-muted",
+      children: choice.description
+    });
+    $[6] = choice.description;
+    $[7] = t8;
+    $[8] = t9;
+  } else {
+    t9 = $[8];
+  }
+  let t10;
+  if ($[9] !== t7 || $[10] !== t9) {
+    t10 = /*#__PURE__*/_jsxs("span", {
+      className: "flex min-w-0 grow flex-col gap-0.5",
+      children: [t7, t9]
+    });
+    $[9] = t7;
+    $[10] = t9;
+    $[11] = t10;
+  } else {
+    t10 = $[11];
+  }
+  const t11 = radio === "end" && dot;
+  let t12;
+  if ($[12] !== choice.disabled || $[13] !== choice.value || $[14] !== t10 || $[15] !== t11 || $[16] !== t2 || $[17] !== t3 || $[18] !== t4 || $[19] !== t5) {
+    t12 = /*#__PURE__*/_jsxs(Radio.Root, {
+      value: choice.value,
+      disabled: choice.disabled,
+      "aria-labelledby": t2,
+      "aria-describedby": t3,
+      className: "group focus-ring flex min-w-0 items-start gap-3 rounded-xl border border-border bg-surface p-3 text-left hover:bg-surface-hover data-checked:border-accent data-disabled:opacity-50 data-disabled:hover:bg-surface",
+      children: [t4, t5, t10, t11]
+    });
+    $[12] = choice.disabled;
+    $[13] = choice.value;
+    $[14] = t10;
+    $[15] = t11;
+    $[16] = t2;
+    $[17] = t3;
+    $[18] = t4;
+    $[19] = t5;
+    $[20] = t12;
+  } else {
+    t12 = $[20];
+  }
+  return t12;
 }
 /*
  * One of a few options, each a card that says what it means, for a choice that deserves more than a
  * select: the cards stand side by side at the same width, one under the other or in a set number of
  * columns, and the arrow keys move between them.
  */
-export function ChoiceCards({ value, onValueChange, choices, label, orientation = 'horizontal', columns, radio = 'end', detail, disabled, className, ref }) {
-    const vertical = columns === undefined && orientation === 'vertical';
-    return (_jsx(RadioGroup, { ref: ref, value: value, onValueChange: (next) => onValueChange(next), disabled: disabled, "aria-label": label, className: clsx('grid gap-2', columns !== undefined || vertical ? 'grid-flow-row' : 'auto-cols-fr grid-flow-col', className), style: columns !== undefined ? { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` } : undefined, children: choices.map((choice) => (_jsxs(Fragment, { children: [_jsx(ChoiceCard, { choice: choice, radio: radio }), vertical && choice.value === value && detail] }, choice.value))) }));
-}
+export function ChoiceCards(t0) {
+  const $ = _c(27);
+  const {
+    value,
+    onValueChange,
+    choices,
+    label,
+    orientation: t1,
+    columns,
+    radio: t2,
+    detail,
+    disabled,
+    className,
+    ref
+  } = t0;
+  const orientation = t1 === undefined ? "horizontal" : t1;
+  const radio = t2 === undefined ? "end" : t2;
+  const vertical = columns === undefined && orientation === "vertical";
+  let t3;
+  if ($[0] !== onValueChange) {
+    t3 = next => onValueChange(next);
+    $[0] = onValueChange;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const t4 = columns !== undefined || vertical ? "grid-flow-row" : "auto-cols-fr grid-flow-col";
+  let t5;
+  if ($[2] !== className || $[3] !== t4) {
+    t5 = clsx("grid gap-2", t4, className);
+    $[2] = className;
+    $[3] = t4;
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  let t6;
+  if ($[5] !== columns) {
+    t6 = columns !== undefined ? {
+      gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
+    } : undefined;
+    $[5] = columns;
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  let t7;
+  if ($[7] !== choices || $[8] !== detail || $[9] !== radio || $[10] !== value || $[11] !== vertical) {
+    let t8;
+    if ($[13] !== detail || $[14] !== radio || $[15] !== value || $[16] !== vertical) {
+      t8 = choice => /*#__PURE__*/_jsxs(Fragment, {
+        children: [/*#__PURE__*/_jsx(ChoiceCard, {
+          choice: choice,
+          radio: radio
+        }), vertical && choice.value === value && detail]
+      }, choice.value);
+      $[13] = detail;
+      $[14] = radio;
+      $[15] = value;
+      $[16] = vertical;
+      $[17] = t8;
+    } else {
+      t8 = $[17];
+    }
+    t7 = choices.map(t8);
+    $[7] = choices;
+    $[8] = detail;
+    $[9] = radio;
+    $[10] = value;
+    $[11] = vertical;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  let t8;
+  if ($[18] !== disabled || $[19] !== label || $[20] !== ref || $[21] !== t3 || $[22] !== t5 || $[23] !== t6 || $[24] !== t7 || $[25] !== value) {
+    t8 = /*#__PURE__*/_jsx(RadioGroup, {
+      ref: ref,
+      value: value,
+      onValueChange: t3,
+      disabled: disabled,
+      "aria-label": label,
+      className: t5,
+      style: t6,
+      children: t7
+    });
+    $[18] = disabled;
+    $[19] = label;
+    $[20] = ref;
+    $[21] = t3;
+    $[22] = t5;
+    $[23] = t6;
+    $[24] = t7;
+    $[25] = value;
+    $[26] = t8;
+  } else {
+    t8 = $[26];
+  }
+  return t8;
+}

package/dist/CloseButton.js

@@ -1,11 +1,91 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { X } from 'lucide-react';
 import { Dialog } from '@base-ui/react/dialog';
-import { IconButton } from './IconButton.js';
+import { IconButton } from "./IconButton.js";
 /* The close button in the header of every panel and dialog. In a dialog it is that dialog's own close part. */
-export function CloseButton({ label, kbd, size, className, ref, ...closes }) {
-    if ('dialog' in closes) {
-        return _jsx(IconButton, { ref: ref, icon: X, label: label, kbd: kbd, size: size, className: className, render: _jsx(Dialog.Close, {}) });
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CloseButton(t0) {
+  const $ = _c(21);
+  let className;
+  let closes;
+  let kbd;
+  let label;
+  let ref;
+  let size;
+  if ($[0] !== t0) {
+    ({
+      label,
+      kbd,
+      size,
+      className,
+      ref,
+      ...closes
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = closes;
+    $[3] = kbd;
+    $[4] = label;
+    $[5] = ref;
+    $[6] = size;
+  } else {
+    className = $[1];
+    closes = $[2];
+    kbd = $[3];
+    label = $[4];
+    ref = $[5];
+    size = $[6];
+  }
+  if ("dialog" in closes) {
+    let t1;
+    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = /*#__PURE__*/_jsx(Dialog.Close, {});
+      $[7] = t1;
+    } else {
+      t1 = $[7];
+    }
+    let t2;
+    if ($[8] !== className || $[9] !== kbd || $[10] !== label || $[11] !== ref || $[12] !== size) {
+      t2 = /*#__PURE__*/_jsx(IconButton, {
+        ref: ref,
+        icon: X,
+        label: label,
+        kbd: kbd,
+        size: size,
+        className: className,
+        render: t1
+      });
+      $[8] = className;
+      $[9] = kbd;
+      $[10] = label;
+      $[11] = ref;
+      $[12] = size;
+      $[13] = t2;
+    } else {
+      t2 = $[13];
     }
-    return _jsx(IconButton, { ref: ref, icon: X, label: label, kbd: kbd, size: size, className: className, onClick: closes.onClick });
-}
+    return t2;
+  }
+  let t1;
+  if ($[14] !== className || $[15] !== closes.onClick || $[16] !== kbd || $[17] !== label || $[18] !== ref || $[19] !== size) {
+    t1 = /*#__PURE__*/_jsx(IconButton, {
+      ref: ref,
+      icon: X,
+      label: label,
+      kbd: kbd,
+      size: size,
+      className: className,
+      onClick: closes.onClick
+    });
+    $[14] = className;
+    $[15] = closes.onClick;
+    $[16] = kbd;
+    $[17] = label;
+    $[18] = ref;
+    $[19] = size;
+    $[20] = t1;
+  } else {
+    t1 = $[20];
+  }
+  return t1;
+}

package/dist/ColorSwatch.js

@@ -1,28 +1,145 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
 import { Check } from 'lucide-react';
 import { useRender } from '@base-ui/react/use-render';
-import { Icon } from './Icon.js';
+import { Icon } from "./Icon.js";
 /* `focus-ring` for the swatch that is a menu item rather than a button, which the keyboard reaches all the same. */
+import { jsx as _jsx } from "react/jsx-runtime";
 const SWATCH = 'focus-ring grid h-6 w-6 place-items-center rounded-full text-accent-text';
 /* The ring of the picked color is offset against whatever the swatch stands on. */
 const PICKED_RING = {
-    surface: 'ring-2 ring-accent ring-offset-2 ring-offset-surface',
-    popup: 'ring-2 ring-accent ring-offset-1 ring-offset-surface-raised'
+  surface: 'ring-2 ring-accent ring-offset-2 ring-offset-surface',
+  popup: 'ring-2 ring-accent ring-offset-1 ring-offset-surface-raised'
 };
 /*
  * One color, drawn as the color itself. Its name belongs in a tooltip, so the circle carries a tick
  * alone when it is picked. Children replace the tick, such as the ellipsis of a "more colors" swatch.
  */
-export function ColorSwatch({ color, picked = false, on = 'surface', tick = true, render, className, style, ref, children, ...props }) {
-    return useRender({
-        render: render ?? _jsx("button", { type: "button" }),
-        ref,
-        props: {
-            ...props,
-            className: clsx(SWATCH, color === undefined ? 'border border-border-strong text-text-muted' : picked && PICKED_RING[on], className),
-            style: color === undefined ? style : { ...style, background: color },
-            children: children ?? (picked && tick && _jsx(Icon, { icon: Check, size: 12 }))
-        }
+export function ColorSwatch(t0) {
+  const $ = _c(32);
+  let children;
+  let className;
+  let color;
+  let props;
+  let ref;
+  let render;
+  let style;
+  let t1;
+  let t2;
+  let t3;
+  if ($[0] !== t0) {
+    ({
+      color,
+      picked: t1,
+      on: t2,
+      tick: t3,
+      render,
+      className,
+      style,
+      ref,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = color;
+    $[4] = props;
+    $[5] = ref;
+    $[6] = render;
+    $[7] = style;
+    $[8] = t1;
+    $[9] = t2;
+    $[10] = t3;
+  } else {
+    children = $[1];
+    className = $[2];
+    color = $[3];
+    props = $[4];
+    ref = $[5];
+    render = $[6];
+    style = $[7];
+    t1 = $[8];
+    t2 = $[9];
+    t3 = $[10];
+  }
+  const picked = t1 === undefined ? false : t1;
+  const on = t2 === undefined ? "surface" : t2;
+  const tick = t3 === undefined ? true : t3;
+  let t4;
+  if ($[11] !== render) {
+    t4 = render ?? /*#__PURE__*/_jsx("button", {
+      type: "button"
     });
-}
+    $[11] = render;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  const t5 = color === undefined ? "border border-border-strong text-text-muted" : picked && PICKED_RING[on];
+  let t6;
+  if ($[13] !== className || $[14] !== t5) {
+    t6 = clsx(SWATCH, t5, className);
+    $[13] = className;
+    $[14] = t5;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  let t7;
+  if ($[16] !== color || $[17] !== style) {
+    t7 = color === undefined ? style : {
+      ...style,
+      background: color
+    };
+    $[16] = color;
+    $[17] = style;
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+  let t8;
+  if ($[19] !== children || $[20] !== picked || $[21] !== tick) {
+    t8 = children ?? (picked && tick && /*#__PURE__*/_jsx(Icon, {
+      icon: Check,
+      size: 12
+    }));
+    $[19] = children;
+    $[20] = picked;
+    $[21] = tick;
+    $[22] = t8;
+  } else {
+    t8 = $[22];
+  }
+  let t9;
+  if ($[23] !== props || $[24] !== t6 || $[25] !== t7 || $[26] !== t8) {
+    t9 = {
+      ...props,
+      className: t6,
+      style: t7,
+      children: t8
+    };
+    $[23] = props;
+    $[24] = t6;
+    $[25] = t7;
+    $[26] = t8;
+    $[27] = t9;
+  } else {
+    t9 = $[27];
+  }
+  let t10;
+  if ($[28] !== ref || $[29] !== t4 || $[30] !== t9) {
+    t10 = {
+      render: t4,
+      ref,
+      props: t9
+    };
+    $[28] = ref;
+    $[29] = t4;
+    $[30] = t9;
+    $[31] = t10;
+  } else {
+    t10 = $[31];
+  }
+  return useRender(t10);
+}