@adecore/ui 0.31.12 → 0.32.0

package/dist/AccentSwatches.js

@@ -1,21 +1,298 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
 import { Ellipsis } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { ColorSwatch } from './ColorSwatch.js';
-import { Icon } from './Icon.js';
-import { MenuPopup, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuTrigger } from './menu/parts.js';
-import { Tooltip } from './Tooltip.js';
+import { ColorSwatch } from "./ColorSwatch.js";
+import { Icon } from "./Icon.js";
+import { MenuPopup, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuTrigger } from "./menu/parts.js";
+import { Tooltip } from "./Tooltip.js";
 /*
  * An accent, a few colors at a time. A palette is more than a settings row can carry, so the list
  * behind them holds all of them, the featured ones included; the trigger wears the chosen color
  * itself whenever that color is not one of the few. A value that is no accent at all picks nothing.
  */
-export function AccentSwatches({ value, onValueChange, label, accents, featured, labelOf, className, ref }) {
-    const { t } = useTranslation('ui');
-    const isFeatured = (id) => featured.some((entry) => entry === id);
-    const colorOf = (id) => accents.find((entry) => entry.id === id)?.color;
-    const shown = accents.filter((entry) => isFeatured(entry.id)).sort((a, b) => featured.indexOf(a.id) - featured.indexOf(b.id));
-    const hidden = value !== undefined && !isFeatured(value) && colorOf(value) !== undefined ? value : null;
-    return (_jsxs("div", { ref: ref, className: clsx('flex items-center gap-2', className), role: "radiogroup", "aria-label": label, children: [shown.map((entry) => (_jsx(Tooltip, { label: labelOf(entry.id), children: _jsx(ColorSwatch, { role: "radio", "aria-checked": value === entry.id, "aria-label": labelOf(entry.id), color: entry.color, picked: value === entry.id, onClick: () => onValueChange(entry.id) }) }, entry.id))), _jsxs(MenuRoot, { children: [_jsx(Tooltip, { label: t('accent.more'), children: _jsx(ColorSwatch, { render: _jsx(MenuTrigger, {}), "aria-label": t('accent.more'), color: hidden === null ? undefined : colorOf(hidden), picked: hidden !== null, children: hidden === null ? _jsx(Icon, { icon: Ellipsis, size: 12 }) : undefined }) }), _jsx(MenuPopup, { align: "end", className: "max-h-96 overflow-y-auto", children: _jsx(MenuRadioGroup, { value: value ?? null, onValueChange: (id) => onValueChange(id), children: accents.map((entry) => (_jsxs(MenuRadioItem, { value: entry.id, children: [_jsx("span", { className: "h-3 w-3 shrink-0 rounded-full", style: { background: entry.color }, "aria-hidden": true }), _jsx("span", { className: "grow", children: labelOf(entry.id) })] }, entry.id))) }) })] })] }));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function AccentSwatches(t0) {
+  const $ = _c(73);
+  const {
+    value,
+    onValueChange,
+    label,
+    accents,
+    featured,
+    labelOf,
+    className,
+    ref
+  } = t0;
+  const {
+    t
+  } = useTranslation("ui");
+  let t1;
+  if ($[0] !== featured) {
+    t1 = id => featured.some(entry => entry === id);
+    $[0] = featured;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const isFeatured = t1;
+  let t2;
+  if ($[2] !== accents) {
+    t2 = id_0 => accents.find(entry_0 => entry_0.id === id_0)?.color;
+    $[2] = accents;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const colorOf = t2;
+  let hidden;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  if ($[4] !== accents || $[5] !== className || $[6] !== colorOf || $[7] !== featured || $[8] !== isFeatured || $[9] !== label || $[10] !== labelOf || $[11] !== onValueChange || $[12] !== ref || $[13] !== value) {
+    let t8;
+    if ($[20] !== isFeatured) {
+      t8 = entry_1 => isFeatured(entry_1.id);
+      $[20] = isFeatured;
+      $[21] = t8;
+    } else {
+      t8 = $[21];
+    }
+    let t9;
+    if ($[22] !== featured) {
+      t9 = (a, b) => featured.indexOf(a.id) - featured.indexOf(b.id);
+      $[22] = featured;
+      $[23] = t9;
+    } else {
+      t9 = $[23];
+    }
+    const shown = accents.filter(t8).sort(t9);
+    let t10;
+    if ($[24] !== colorOf || $[25] !== isFeatured || $[26] !== value) {
+      t10 = value !== undefined && !isFeatured(value) && colorOf(value) !== undefined ? value : null;
+      $[24] = colorOf;
+      $[25] = isFeatured;
+      $[26] = value;
+      $[27] = t10;
+    } else {
+      t10 = $[27];
+    }
+    hidden = t10;
+    t3 = ref;
+    if ($[28] !== className) {
+      t4 = clsx("flex items-center gap-2", className);
+      $[28] = className;
+      $[29] = t4;
+    } else {
+      t4 = $[29];
+    }
+    t5 = "radiogroup";
+    t6 = label;
+    let t11;
+    if ($[30] !== labelOf || $[31] !== onValueChange || $[32] !== value) {
+      t11 = entry_2 => /*#__PURE__*/_jsx(Tooltip, {
+        label: labelOf(entry_2.id),
+        children: /*#__PURE__*/_jsx(ColorSwatch, {
+          role: "radio",
+          "aria-checked": value === entry_2.id,
+          "aria-label": labelOf(entry_2.id),
+          color: entry_2.color,
+          picked: value === entry_2.id,
+          onClick: () => onValueChange(entry_2.id)
+        })
+      }, entry_2.id);
+      $[30] = labelOf;
+      $[31] = onValueChange;
+      $[32] = value;
+      $[33] = t11;
+    } else {
+      t11 = $[33];
+    }
+    t7 = shown.map(t11);
+    $[4] = accents;
+    $[5] = className;
+    $[6] = colorOf;
+    $[7] = featured;
+    $[8] = isFeatured;
+    $[9] = label;
+    $[10] = labelOf;
+    $[11] = onValueChange;
+    $[12] = ref;
+    $[13] = value;
+    $[14] = hidden;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
+    $[18] = t6;
+    $[19] = t7;
+  } else {
+    hidden = $[14];
+    t3 = $[15];
+    t4 = $[16];
+    t5 = $[17];
+    t6 = $[18];
+    t7 = $[19];
+  }
+  let t8;
+  if ($[34] !== t) {
+    t8 = t("accent.more");
+    $[34] = t;
+    $[35] = t8;
+  } else {
+    t8 = $[35];
+  }
+  let t9;
+  if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = /*#__PURE__*/_jsx(MenuTrigger, {});
+    $[36] = t9;
+  } else {
+    t9 = $[36];
+  }
+  let t10;
+  if ($[37] !== t) {
+    t10 = t("accent.more");
+    $[37] = t;
+    $[38] = t10;
+  } else {
+    t10 = $[38];
+  }
+  let t11;
+  if ($[39] !== colorOf || $[40] !== hidden) {
+    t11 = hidden === null ? undefined : colorOf(hidden);
+    $[39] = colorOf;
+    $[40] = hidden;
+    $[41] = t11;
+  } else {
+    t11 = $[41];
+  }
+  const t12 = hidden !== null;
+  let t13;
+  if ($[42] !== hidden) {
+    t13 = hidden === null ? /*#__PURE__*/_jsx(Icon, {
+      icon: Ellipsis,
+      size: 12
+    }) : undefined;
+    $[42] = hidden;
+    $[43] = t13;
+  } else {
+    t13 = $[43];
+  }
+  let t14;
+  if ($[44] !== t10 || $[45] !== t11 || $[46] !== t12 || $[47] !== t13) {
+    t14 = /*#__PURE__*/_jsx(ColorSwatch, {
+      render: t9,
+      "aria-label": t10,
+      color: t11,
+      picked: t12,
+      children: t13
+    });
+    $[44] = t10;
+    $[45] = t11;
+    $[46] = t12;
+    $[47] = t13;
+    $[48] = t14;
+  } else {
+    t14 = $[48];
+  }
+  let t15;
+  if ($[49] !== t14 || $[50] !== t8) {
+    t15 = /*#__PURE__*/_jsx(Tooltip, {
+      label: t8,
+      children: t14
+    });
+    $[49] = t14;
+    $[50] = t8;
+    $[51] = t15;
+  } else {
+    t15 = $[51];
+  }
+  const t16 = value ?? null;
+  let t17;
+  if ($[52] !== onValueChange) {
+    t17 = id_1 => onValueChange(id_1);
+    $[52] = onValueChange;
+    $[53] = t17;
+  } else {
+    t17 = $[53];
+  }
+  let t18;
+  if ($[54] !== accents || $[55] !== labelOf) {
+    let t19;
+    if ($[57] !== labelOf) {
+      t19 = entry_3 => /*#__PURE__*/_jsxs(MenuRadioItem, {
+        value: entry_3.id,
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "h-3 w-3 shrink-0 rounded-full",
+          style: {
+            background: entry_3.color
+          },
+          "aria-hidden": true
+        }), /*#__PURE__*/_jsx("span", {
+          className: "grow",
+          children: labelOf(entry_3.id)
+        })]
+      }, entry_3.id);
+      $[57] = labelOf;
+      $[58] = t19;
+    } else {
+      t19 = $[58];
+    }
+    t18 = accents.map(t19);
+    $[54] = accents;
+    $[55] = labelOf;
+    $[56] = t18;
+  } else {
+    t18 = $[56];
+  }
+  let t19;
+  if ($[59] !== t16 || $[60] !== t17 || $[61] !== t18) {
+    t19 = /*#__PURE__*/_jsx(MenuPopup, {
+      align: "end",
+      className: "max-h-96 overflow-y-auto",
+      children: /*#__PURE__*/_jsx(MenuRadioGroup, {
+        value: t16,
+        onValueChange: t17,
+        children: t18
+      })
+    });
+    $[59] = t16;
+    $[60] = t17;
+    $[61] = t18;
+    $[62] = t19;
+  } else {
+    t19 = $[62];
+  }
+  let t20;
+  if ($[63] !== t15 || $[64] !== t19) {
+    t20 = /*#__PURE__*/_jsxs(MenuRoot, {
+      children: [t15, t19]
+    });
+    $[63] = t15;
+    $[64] = t19;
+    $[65] = t20;
+  } else {
+    t20 = $[65];
+  }
+  let t21;
+  if ($[66] !== t20 || $[67] !== t3 || $[68] !== t4 || $[69] !== t5 || $[70] !== t6 || $[71] !== t7) {
+    t21 = /*#__PURE__*/_jsxs("div", {
+      ref: t3,
+      className: t4,
+      role: t5,
+      "aria-label": t6,
+      children: [t7, t20]
+    });
+    $[66] = t20;
+    $[67] = t3;
+    $[68] = t4;
+    $[69] = t5;
+    $[70] = t6;
+    $[71] = t7;
+    $[72] = t21;
+  } else {
+    t21 = $[72];
+  }
+  return t21;
+}

package/dist/Banner.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
-import { Icon } from './Icon.js';
-import { Surface } from './Surface.js';
+import { Icon } from "./Icon.js";
+import { Surface } from "./Surface.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TONE = {
-    attention: 'text-status-needs-you',
-    error: 'text-status-error',
-    neutral: 'text-text-muted'
+  attention: 'text-status-needs-you',
+  error: 'text-status-error',
+  neutral: 'text-text-muted'
 };
 /*
  * The strip over a view: one line and the buttons that answer it. It is where anything that waits
@@ -13,6 +14,86 @@ const TONE = {
  * and a decision has to be where the eyes already are. One at a time: the slot is one row and the
  * caller picks what stands in it.
  */
-export function Banner({ icon, tone, message, children, className = 'absolute inset-x-0 top-3 z-20', ref }) {
-    return (_jsx("div", { ref: ref, className: clsx('pointer-events-auto flex justify-center px-4', className), role: "status", "aria-live": "polite", children: _jsxs(Surface, { className: "flex max-w-[640px] items-center gap-3 rounded-lg px-3 py-2 text-sm text-text", children: [_jsx(Icon, { icon: icon, size: 16, className: clsx('shrink-0', TONE[tone]) }), _jsx("span", { className: "grow", children: message }), children] }) }));
-}
+export function Banner(t0) {
+  const $ = _c(17);
+  const {
+    icon,
+    tone,
+    message,
+    children,
+    className: t1,
+    ref
+  } = t0;
+  const className = t1 === undefined ? "absolute inset-x-0 top-3 z-20" : t1;
+  let t2;
+  if ($[0] !== className) {
+    t2 = clsx("pointer-events-auto flex justify-center px-4", className);
+    $[0] = className;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const t3 = TONE[tone];
+  let t4;
+  if ($[2] !== t3) {
+    t4 = clsx("shrink-0", t3);
+    $[2] = t3;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  let t5;
+  if ($[4] !== icon || $[5] !== t4) {
+    t5 = /*#__PURE__*/_jsx(Icon, {
+      icon: icon,
+      size: 16,
+      className: t4
+    });
+    $[4] = icon;
+    $[5] = t4;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== message) {
+    t6 = /*#__PURE__*/_jsx("span", {
+      className: "grow",
+      children: message
+    });
+    $[7] = message;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  let t7;
+  if ($[9] !== children || $[10] !== t5 || $[11] !== t6) {
+    t7 = /*#__PURE__*/_jsxs(Surface, {
+      className: "flex max-w-[640px] items-center gap-3 rounded-lg px-3 py-2 text-sm text-text",
+      children: [t5, t6, children]
+    });
+    $[9] = children;
+    $[10] = t5;
+    $[11] = t6;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  let t8;
+  if ($[13] !== ref || $[14] !== t2 || $[15] !== t7) {
+    t8 = /*#__PURE__*/_jsx("div", {
+      ref: ref,
+      className: t2,
+      role: "status",
+      "aria-live": "polite",
+      children: t7
+    });
+    $[13] = ref;
+    $[14] = t2;
+    $[15] = t7;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  return t8;
+}

package/dist/Button.js

@@ -1,33 +1,125 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
+import { jsx as _jsx } from "react/jsx-runtime";
 const VARIANT = {
-    // A filled button darkens under the pointer. Its color is the meaning, so no token of its own for hover.
-    primary: 'bg-accent text-accent-text hover:brightness-90 disabled:hover:brightness-100',
-    secondary: 'border border-border bg-surface-raised text-text hover:bg-surface-hover disabled:hover:bg-surface-raised',
-    ghost: 'text-text-muted hover:bg-surface-hover hover:text-text',
-    danger: 'bg-status-error text-accent-text hover:brightness-90 disabled:hover:brightness-100',
-    // A step that forgets something rather than destroys it: softer than the filled button of a deletion that cannot come back.
-    'danger-outline': 'border border-status-error/35 text-status-error hover:bg-status-error/10 disabled:hover:bg-transparent',
-    positive: 'bg-positive text-positive-text hover:brightness-90 disabled:hover:brightness-100',
-    // Dark on a light theme, light on a dark one, matching what Apple's and GitHub's sign-in buttons ask for.
-    inverse: 'bg-text text-bg hover:opacity-90 disabled:hover:opacity-100'
+  // A filled button darkens under the pointer. Its color is the meaning, so no token of its own for hover.
+  primary: 'bg-accent text-accent-text hover:brightness-90 disabled:hover:brightness-100',
+  secondary: 'border border-border bg-surface-raised text-text hover:bg-surface-hover disabled:hover:bg-surface-raised',
+  ghost: 'text-text-muted hover:bg-surface-hover hover:text-text',
+  danger: 'bg-status-error text-accent-text hover:brightness-90 disabled:hover:brightness-100',
+  // A step that forgets something rather than destroys it: softer than the filled button of a deletion that cannot come back.
+  'danger-outline': 'border border-status-error/35 text-status-error hover:bg-status-error/10 disabled:hover:bg-transparent',
+  positive: 'bg-positive text-positive-text hover:brightness-90 disabled:hover:brightness-100',
+  // Dark on a light theme, light on a dark one, matching what Apple's and GitHub's sign-in buttons ask for.
+  inverse: 'bg-text text-bg hover:opacity-90 disabled:hover:opacity-100'
 };
 /* 28 and 32 pixels are the compact and the normal control; 24 fits a header of 32. */
 const SIZE = {
-    xs: 'h-6 px-2',
-    sm: 'h-7 px-2.5',
-    md: 'h-8 px-3'
+  xs: 'h-6 px-2',
+  sm: 'h-7 px-2.5',
+  md: 'h-8 px-3'
 };
 /* A pill is one size of its own, for a control that sits in a round row, so it takes the place of `size`. */
 const SHAPE = {
-    default: 'rounded-md text-xs',
-    pill: 'h-9 rounded-full px-3.5 text-sm'
+  default: 'rounded-md text-xs',
+  pill: 'h-9 rounded-full px-3.5 text-sm'
 };
 /* Every button with a word in it. A button that is only an icon is an `IconButton`, which is a square, not a label. */
-export function Button({ variant = 'ghost', size = 'md', shape = 'default', className, href, type = 'button', ref, ...rest }) {
-    const classes = clsx('inline-flex shrink-0 items-center justify-center gap-1.5 font-medium disabled:opacity-50', SHAPE[shape], VARIANT[variant], shape === 'default' && SIZE[size], className);
-    if (href) {
-        return (_jsx("a", { ref: ref, className: classes, href: href, target: "_blank", rel: "noreferrer", ...rest }));
+export function Button(t0) {
+  const $ = _c(24);
+  let className;
+  let href;
+  let ref;
+  let rest;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  if ($[0] !== t0) {
+    ({
+      variant: t1,
+      size: t2,
+      shape: t3,
+      className,
+      href,
+      type: t4,
+      ref,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = href;
+    $[3] = ref;
+    $[4] = rest;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    className = $[1];
+    href = $[2];
+    ref = $[3];
+    rest = $[4];
+    t1 = $[5];
+    t2 = $[6];
+    t3 = $[7];
+    t4 = $[8];
+  }
+  const variant = t1 === undefined ? "ghost" : t1;
+  const size = t2 === undefined ? "md" : t2;
+  const shape = t3 === undefined ? "default" : t3;
+  const type = t4 === undefined ? "button" : t4;
+  const t5 = SHAPE[shape];
+  const t6 = VARIANT[variant];
+  const t7 = shape === "default" && SIZE[size];
+  let t8;
+  if ($[9] !== className || $[10] !== t5 || $[11] !== t6 || $[12] !== t7) {
+    t8 = clsx("inline-flex shrink-0 items-center justify-center gap-1.5 font-medium disabled:opacity-50", t5, t6, t7, className);
+    $[9] = className;
+    $[10] = t5;
+    $[11] = t6;
+    $[12] = t7;
+    $[13] = t8;
+  } else {
+    t8 = $[13];
+  }
+  const classes = t8;
+  if (href) {
+    let t9;
+    if ($[14] !== classes || $[15] !== href || $[16] !== ref || $[17] !== rest) {
+      t9 = /*#__PURE__*/_jsx("a", {
+        ref: ref,
+        className: classes,
+        href: href,
+        target: "_blank",
+        rel: "noreferrer",
+        ...rest
+      });
+      $[14] = classes;
+      $[15] = href;
+      $[16] = ref;
+      $[17] = rest;
+      $[18] = t9;
+    } else {
+      t9 = $[18];
     }
-    return _jsx("button", { ref: ref, type: type, className: classes, ...rest });
-}
+    return t9;
+  }
+  let t9;
+  if ($[19] !== classes || $[20] !== ref || $[21] !== rest || $[22] !== type) {
+    t9 = /*#__PURE__*/_jsx("button", {
+      ref: ref,
+      type: type,
+      className: classes,
+      ...rest
+    });
+    $[19] = classes;
+    $[20] = ref;
+    $[21] = rest;
+    $[22] = type;
+    $[23] = t9;
+  } else {
+    t9 = $[23];
+  }
+  return t9;
+}

package/dist/ButtonGroup.js

@@ -1,11 +1,65 @@
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
 /* Icon buttons that belong together sit 1px apart; groups keep the wider gap of their container. */
-export function ButtonGroup({ render, className, ref, ...props }) {
-    return useRender({
-        render,
-        ref,
-        defaultTagName: 'div',
-        props: { ...props, className: clsx('inline-flex items-center gap-px', className) }
-    });
-}
+export function ButtonGroup(t0) {
+  const $ = _c(14);
+  let className;
+  let props;
+  let ref;
+  let render;
+  if ($[0] !== t0) {
+    ({
+      render,
+      className,
+      ref,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = ref;
+    $[4] = render;
+  } else {
+    className = $[1];
+    props = $[2];
+    ref = $[3];
+    render = $[4];
+  }
+  let t1;
+  if ($[5] !== className) {
+    t1 = clsx("inline-flex items-center gap-px", className);
+    $[5] = className;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  let t2;
+  if ($[7] !== props || $[8] !== t1) {
+    t2 = {
+      ...props,
+      className: t1
+    };
+    $[7] = props;
+    $[8] = t1;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  let t3;
+  if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+    t3 = {
+      render,
+      ref,
+      defaultTagName: "div",
+      props: t2
+    };
+    $[10] = ref;
+    $[11] = render;
+    $[12] = t2;
+    $[13] = t3;
+  } else {
+    t3 = $[13];
+  }
+  return useRender(t3);
+}