@adecore/ui 0.31.12 → 0.32.0

package/dist/Input.js

@@ -1,20 +1,239 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
 import { fieldControlProps, useFieldControl } from './field-context.js';
-import { Icon } from './Icon.js';
+import { Icon } from "./Icon.js";
 /* The one text input: one border and one focus ring at the one height or the compact one. */
-export function Input({ size = 'md', mono = false, icon, className, id, ...props }) {
-    const field = useFieldControl();
-    const small = size === 'sm';
-    const control = { ...fieldControlProps(field, id), ...props };
-    if (icon === undefined) {
-        return _jsx("input", { ...control, className: clsx('field', small && 'field-sm', mono && 'font-mono text-code', className) });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Input(t0) {
+  const $ = _c(39);
+  let className;
+  let icon;
+  let id;
+  let props;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      size: t1,
+      mono: t2,
+      icon,
+      className,
+      id,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = icon;
+    $[3] = id;
+    $[4] = props;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    className = $[1];
+    icon = $[2];
+    id = $[3];
+    props = $[4];
+    t1 = $[5];
+    t2 = $[6];
+  }
+  const size = t1 === undefined ? "md" : t1;
+  const mono = t2 === undefined ? false : t2;
+  const field = useFieldControl();
+  const small = size === "sm";
+  let t3;
+  if ($[7] !== field || $[8] !== id) {
+    t3 = fieldControlProps(field, id);
+    $[7] = field;
+    $[8] = id;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== props || $[11] !== t3) {
+    t4 = {
+      ...t3,
+      ...props
+    };
+    $[10] = props;
+    $[11] = t3;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  const control = t4;
+  if (icon === undefined) {
+    const t5 = small && "field-sm";
+    const t6 = mono && "font-mono text-code";
+    let t7;
+    if ($[13] !== className || $[14] !== t5 || $[15] !== t6) {
+      t7 = clsx("field", t5, t6, className);
+      $[13] = className;
+      $[14] = t5;
+      $[15] = t6;
+      $[16] = t7;
+    } else {
+      t7 = $[16];
     }
-    // The input fills the whole box and the icon lets clicks through, so a click on the icon still lands in the input.
-    return (_jsxs("span", { className: clsx('field relative flex p-0', small && 'field-sm', className), children: [_jsx(Icon, { icon: icon, size: small ? 12 : 14, className: clsx('pointer-events-none absolute top-1/2 -translate-y-1/2 text-text-faint', small ? 'left-2' : 'left-2.5') }), _jsx("input", { ...control, className: clsx('min-w-0 flex-1 bg-transparent outline-none placeholder:text-text-faint', small ? 'pr-2 pl-7' : 'pr-2.5 pl-8', mono && 'font-mono text-code') })] }));
+    let t8;
+    if ($[17] !== control || $[18] !== t7) {
+      t8 = /*#__PURE__*/_jsx("input", {
+        ...control,
+        className: t7
+      });
+      $[17] = control;
+      $[18] = t7;
+      $[19] = t8;
+    } else {
+      t8 = $[19];
+    }
+    return t8;
+  }
+  const t5 = small && "field-sm";
+  let t6;
+  if ($[20] !== className || $[21] !== t5) {
+    t6 = clsx("field relative flex p-0", t5, className);
+    $[20] = className;
+    $[21] = t5;
+    $[22] = t6;
+  } else {
+    t6 = $[22];
+  }
+  const t7 = small ? 12 : 14;
+  const t8 = small ? "left-2" : "left-2.5";
+  let t9;
+  if ($[23] !== t8) {
+    t9 = clsx("pointer-events-none absolute top-1/2 -translate-y-1/2 text-text-faint", t8);
+    $[23] = t8;
+    $[24] = t9;
+  } else {
+    t9 = $[24];
+  }
+  let t10;
+  if ($[25] !== icon || $[26] !== t7 || $[27] !== t9) {
+    t10 = /*#__PURE__*/_jsx(Icon, {
+      icon: icon,
+      size: t7,
+      className: t9
+    });
+    $[25] = icon;
+    $[26] = t7;
+    $[27] = t9;
+    $[28] = t10;
+  } else {
+    t10 = $[28];
+  }
+  const t11 = small ? "pr-2 pl-7" : "pr-2.5 pl-8";
+  const t12 = mono && "font-mono text-code";
+  let t13;
+  if ($[29] !== t11 || $[30] !== t12) {
+    t13 = clsx("min-w-0 flex-1 bg-transparent outline-none placeholder:text-text-faint", t11, t12);
+    $[29] = t11;
+    $[30] = t12;
+    $[31] = t13;
+  } else {
+    t13 = $[31];
+  }
+  let t14;
+  if ($[32] !== control || $[33] !== t13) {
+    t14 = /*#__PURE__*/_jsx("input", {
+      ...control,
+      className: t13
+    });
+    $[32] = control;
+    $[33] = t13;
+    $[34] = t14;
+  } else {
+    t14 = $[34];
+  }
+  let t15;
+  if ($[35] !== t10 || $[36] !== t14 || $[37] !== t6) {
+    t15 = /*#__PURE__*/_jsxs("span", {
+      className: t6,
+      children: [t10, t14]
+    });
+    $[35] = t10;
+    $[36] = t14;
+    $[37] = t6;
+    $[38] = t15;
+  } else {
+    t15 = $[38];
+  }
+  return t15;
 }
 /* A field of a few lines: a commit message, the body of a pull request, a note. At least 64px tall; `rows` makes it taller. */
-export function TextArea({ size = 'md', resize = 'none', mono = false, className, id, ...props }) {
-    const field = useFieldControl();
-    return (_jsx("textarea", { ...fieldControlProps(field, id), ...props, className: clsx('field h-auto min-h-16 py-1.5', size === 'sm' && 'field-sm', resize === 'vertical' ? 'resize-y' : 'resize-none', mono && 'font-mono text-code', className) }));
-}
+export function TextArea(t0) {
+  const $ = _c(19);
+  let className;
+  let id;
+  let props;
+  let t1;
+  let t2;
+  let t3;
+  if ($[0] !== t0) {
+    ({
+      size: t1,
+      resize: t2,
+      mono: t3,
+      className,
+      id,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = id;
+    $[3] = props;
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    className = $[1];
+    id = $[2];
+    props = $[3];
+    t1 = $[4];
+    t2 = $[5];
+    t3 = $[6];
+  }
+  const size = t1 === undefined ? "md" : t1;
+  const resize = t2 === undefined ? "none" : t2;
+  const mono = t3 === undefined ? false : t3;
+  const field = useFieldControl();
+  let t4;
+  if ($[7] !== field || $[8] !== id) {
+    t4 = fieldControlProps(field, id);
+    $[7] = field;
+    $[8] = id;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  const t5 = size === "sm" && "field-sm";
+  const t6 = resize === "vertical" ? "resize-y" : "resize-none";
+  const t7 = mono && "font-mono text-code";
+  let t8;
+  if ($[10] !== className || $[11] !== t5 || $[12] !== t6 || $[13] !== t7) {
+    t8 = clsx("field h-auto min-h-16 py-1.5", t5, t6, t7, className);
+    $[10] = className;
+    $[11] = t5;
+    $[12] = t6;
+    $[13] = t7;
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+  let t9;
+  if ($[15] !== props || $[16] !== t4 || $[17] !== t8) {
+    t9 = /*#__PURE__*/_jsx("textarea", {
+      ...t4,
+      ...props,
+      className: t8
+    });
+    $[15] = props;
+    $[16] = t4;
+    $[17] = t8;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  return t9;
+}

package/dist/Kbd.js

@@ -1,22 +1,162 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
 import { isApplePlatform } from './platform.js';
 import { formatShortcut, shortcutParts } from './shortcut.js';
 /* A shortcut chip on the surface it sits on: in a tooltip, in a palette's footer, in a line of help. */
+import { jsx as _jsx } from "react/jsx-runtime";
 const INLINE_KBD = 'rounded-sm bg-surface-sunken px-[5px] py-px font-sans text-xs/[inherit] text-text-muted';
 /* One key, drawn as a cap. A settings page prints a shortcut key by key, so a gesture can stand beside it. */
 const KEY_CAP = 'inline-grid place-items-center rounded-md border border-b-2 border-border-strong bg-surface-hover bg-clip-padding font-sans text-text';
 /* `sm` fits inside a small field, as the hint of the key that focuses it. */
-const KEY_CAP_SIZES = { md: 'h-6 min-w-6 px-1.5 text-xs', sm: 'h-5 min-w-5 px-1 text-2xs' };
+const KEY_CAP_SIZES = {
+  md: 'h-6 min-w-6 px-1.5 text-xs',
+  sm: 'h-5 min-w-5 px-1 text-2xs'
+};
 /* A shortcut as this platform prints it: `⌘K` on macOS, `Ctrl+K` elsewhere. */
-export function Kbd({ shortcut, children, variant = 'menu', className, ref }) {
-    return (_jsx("kbd", { ref: ref, className: clsx(variant === 'inline' && INLINE_KBD, className), children: shortcut !== undefined ? formatShortcut(shortcut, isApplePlatform()) : children }));
+export function Kbd(t0) {
+  const $ = _c(10);
+  const {
+    shortcut,
+    children,
+    variant: t1,
+    className,
+    ref
+  } = t0;
+  const variant = t1 === undefined ? "menu" : t1;
+  const t2 = variant === "inline" && INLINE_KBD;
+  let t3;
+  if ($[0] !== className || $[1] !== t2) {
+    t3 = clsx(t2, className);
+    $[0] = className;
+    $[1] = t2;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  let t4;
+  if ($[3] !== children || $[4] !== shortcut) {
+    t4 = shortcut !== undefined ? formatShortcut(shortcut, isApplePlatform()) : children;
+    $[3] = children;
+    $[4] = shortcut;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  let t5;
+  if ($[6] !== ref || $[7] !== t3 || $[8] !== t4) {
+    t5 = /*#__PURE__*/_jsx("kbd", {
+      ref: ref,
+      className: t3,
+      children: t4
+    });
+    $[6] = ref;
+    $[7] = t3;
+    $[8] = t4;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  return t5;
 }
-export function KeyCap({ children, size = 'md', className, ref }) {
-    return (_jsx("kbd", { ref: ref, className: clsx(KEY_CAP, KEY_CAP_SIZES[size], className), children: children }));
+export function KeyCap(t0) {
+  const $ = _c(7);
+  const {
+    children,
+    size: t1,
+    className,
+    ref
+  } = t0;
+  const size = t1 === undefined ? "md" : t1;
+  const t2 = KEY_CAP_SIZES[size];
+  let t3;
+  if ($[0] !== className || $[1] !== t2) {
+    t3 = clsx(KEY_CAP, t2, className);
+    $[0] = className;
+    $[1] = t2;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  let t4;
+  if ($[3] !== children || $[4] !== ref || $[5] !== t3) {
+    t4 = /*#__PURE__*/_jsx("kbd", {
+      ref: ref,
+      className: t3,
+      children: children
+    });
+    $[3] = children;
+    $[4] = ref;
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  return t4;
 }
 /* A shortcut as one cap per key, `⌘` and `K`, plus the pointer gesture it goes with. */
-export function Keys({ shortcut, then, size = 'md', className, ref }) {
-    const parts = [...shortcutParts(shortcut, isApplePlatform()), ...(then ? [then] : [])];
-    return (_jsx("span", { ref: ref, className: clsx('flex items-center', size === 'sm' ? 'gap-0.5' : 'gap-1', className), children: parts.map((part, index) => (_jsx(KeyCap, { size: size, children: part }, `${part}-${index}`))) }));
-}
+export function Keys(t0) {
+  const $ = _c(15);
+  const {
+    shortcut,
+    then,
+    size: t1,
+    className,
+    ref
+  } = t0;
+  const size = t1 === undefined ? "md" : t1;
+  let t2;
+  if ($[0] !== shortcut || $[1] !== then) {
+    let t3;
+    if ($[3] !== then) {
+      t3 = then ? [then] : [];
+      $[3] = then;
+      $[4] = t3;
+    } else {
+      t3 = $[4];
+    }
+    t2 = [...shortcutParts(shortcut, isApplePlatform()), ...t3];
+    $[0] = shortcut;
+    $[1] = then;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const parts = t2;
+  const t3 = size === "sm" ? "gap-0.5" : "gap-1";
+  let t4;
+  if ($[5] !== className || $[6] !== t3) {
+    t4 = clsx("flex items-center", t3, className);
+    $[5] = className;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== parts || $[9] !== size) {
+    t5 = parts.map((part, index) => /*#__PURE__*/_jsx(KeyCap, {
+      size: size,
+      children: part
+    }, `${part}-${index}`));
+    $[8] = parts;
+    $[9] = size;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== ref || $[12] !== t4 || $[13] !== t5) {
+    t6 = /*#__PURE__*/_jsx("span", {
+      ref: ref,
+      className: t4,
+      children: t5
+    });
+    $[11] = ref;
+    $[12] = t4;
+    $[13] = t5;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  return t6;
+}

package/dist/LazyBoundary.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Suspense, useSyncExternalStore } from 'react';
 import { readLandings, subscribeLandings } from './lazy-landings.js';
 /*
@@ -6,7 +5,17 @@ import { readLandings, subscribeLandings } from './lazy-landings.js';
  * 300 ms after its fallback showed; this boundary draws again as an ordinary update once a module
  * lands, so a chunk that takes 20 ms shows after 20 ms.
  */
-export function LazyBoundary({ fallback = null, children }) {
-    useSyncExternalStore(subscribeLandings, readLandings, readLandings);
-    return _jsx(Suspense, { fallback: fallback, children: children });
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+export function LazyBoundary({
+  fallback = null,
+  children
+}) {
+  // Compiled, the same boundary would come back and the landing would wait for React's own retry after all.
+  'use no memo';
+
+  useSyncExternalStore(subscribeLandings, readLandings, readLandings);
+  return /*#__PURE__*/_jsx(Suspense, {
+    fallback: fallback,
+    children: children
+  });
+}

package/dist/ListRow.js

@@ -1,20 +1,80 @@
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
 const VARIANT = {
-    /* A row of a list that reads as a table and fills the width of its panel: commits, processes,
-       branches. Square, so the rows stack into one block. It carries no padding; the caller pads 12px
-       beside text and 4px beside a button. */
-    flat: 'flex h-7 items-center',
-    /* A row of a list a person finds their way through: a sidebar, devices, recent files. Inset from
-       the edge and rounded, so each row reads as a place of its own. */
-    inset: 'flex h-8 items-center rounded-md px-2'
+  /* A row of a list that reads as a table and fills the width of its panel: commits, processes,
+     branches. Square, so the rows stack into one block. It carries no padding; the caller pads 12px
+     beside text and 4px beside a button. */
+  flat: 'flex h-7 items-center',
+  /* A row of a list a person finds their way through: a sidebar, devices, recent files. Inset from
+     the edge and rounded, so each row reads as a place of its own. */
+  inset: 'flex h-8 items-center rounded-md px-2'
 };
 /* The height and the shape of one row of a list. What it does (a button, a link, a menu trigger) comes from `render`. */
-export function ListRow({ variant, render, className, ref, ...props }) {
-    return useRender({
-        render,
-        ref,
-        defaultTagName: 'div',
-        props: { ...props, className: clsx(VARIANT[variant], className) }
-    });
-}
+export function ListRow(t0) {
+  const $ = _c(16);
+  let className;
+  let props;
+  let ref;
+  let render;
+  let variant;
+  if ($[0] !== t0) {
+    ({
+      variant,
+      render,
+      className,
+      ref,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = ref;
+    $[4] = render;
+    $[5] = variant;
+  } else {
+    className = $[1];
+    props = $[2];
+    ref = $[3];
+    render = $[4];
+    variant = $[5];
+  }
+  const t1 = VARIANT[variant];
+  let t2;
+  if ($[6] !== className || $[7] !== t1) {
+    t2 = clsx(t1, className);
+    $[6] = className;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  let t3;
+  if ($[9] !== props || $[10] !== t2) {
+    t3 = {
+      ...props,
+      className: t2
+    };
+    $[9] = props;
+    $[10] = t2;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  let t4;
+  if ($[12] !== ref || $[13] !== render || $[14] !== t3) {
+    t4 = {
+      render,
+      ref,
+      defaultTagName: "div",
+      props: t3
+    };
+    $[12] = ref;
+    $[13] = render;
+    $[14] = t3;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  return useRender(t4);
+}

package/dist/Meter.js

@@ -1,7 +1,110 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
 /* A level against a scale: how full it is, and where a target or a limit sits on the same scale. */
-export function Meter({ value, min = 0, max = 100, marks = [], label, valueText, className, ref }) {
-    const fractionOf = (level) => (max > min ? Math.min(1, Math.max(0, (level - min) / (max - min))) : 0);
-    return (_jsxs("div", { ref: ref, role: "meter", "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value === null ? min : Math.min(max, Math.max(min, value)), "aria-valuetext": valueText, className: clsx('relative h-1.5 rounded-full bg-surface-sunken', className), children: [value !== null && _jsx("span", { className: "absolute inset-y-0 left-0 rounded-full bg-accent", style: { width: `${fractionOf(value) * 100}%` } }), marks.map((mark) => (_jsx("span", { className: "absolute -inset-y-0.5 w-px bg-text-muted", style: { left: `${fractionOf(mark) * 100}%` } }, mark)))] }));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Meter(t0) {
+  const $ = _c(25);
+  const {
+    value,
+    min: t1,
+    max: t2,
+    marks: t3,
+    label,
+    valueText,
+    className,
+    ref
+  } = t0;
+  const min = t1 === undefined ? 0 : t1;
+  const max = t2 === undefined ? 100 : t2;
+  let t4;
+  if ($[0] !== t3) {
+    t4 = t3 === undefined ? [] : t3;
+    $[0] = t3;
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  const marks = t4;
+  let t5;
+  if ($[2] !== max || $[3] !== min) {
+    t5 = level => max > min ? Math.min(1, Math.max(0, (level - min) / (max - min))) : 0;
+    $[2] = max;
+    $[3] = min;
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  const fractionOf = t5;
+  const t6 = value === null ? min : Math.min(max, Math.max(min, value));
+  let t7;
+  if ($[5] !== className) {
+    t7 = clsx("relative h-1.5 rounded-full bg-surface-sunken", className);
+    $[5] = className;
+    $[6] = t7;
+  } else {
+    t7 = $[6];
+  }
+  let t8;
+  if ($[7] !== fractionOf || $[8] !== value) {
+    t8 = value !== null && /*#__PURE__*/_jsx("span", {
+      className: "absolute inset-y-0 left-0 rounded-full bg-accent",
+      style: {
+        width: `${fractionOf(value) * 100}%`
+      }
+    });
+    $[7] = fractionOf;
+    $[8] = value;
+    $[9] = t8;
+  } else {
+    t8 = $[9];
+  }
+  let t9;
+  if ($[10] !== fractionOf || $[11] !== marks) {
+    let t10;
+    if ($[13] !== fractionOf) {
+      t10 = mark => /*#__PURE__*/_jsx("span", {
+        className: "absolute -inset-y-0.5 w-px bg-text-muted",
+        style: {
+          left: `${fractionOf(mark) * 100}%`
+        }
+      }, mark);
+      $[13] = fractionOf;
+      $[14] = t10;
+    } else {
+      t10 = $[14];
+    }
+    t9 = marks.map(t10);
+    $[10] = fractionOf;
+    $[11] = marks;
+    $[12] = t9;
+  } else {
+    t9 = $[12];
+  }
+  let t10;
+  if ($[15] !== label || $[16] !== max || $[17] !== min || $[18] !== ref || $[19] !== t6 || $[20] !== t7 || $[21] !== t8 || $[22] !== t9 || $[23] !== valueText) {
+    t10 = /*#__PURE__*/_jsxs("div", {
+      ref: ref,
+      role: "meter",
+      "aria-label": label,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": t6,
+      "aria-valuetext": valueText,
+      className: t7,
+      children: [t8, t9]
+    });
+    $[15] = label;
+    $[16] = max;
+    $[17] = min;
+    $[18] = ref;
+    $[19] = t6;
+    $[20] = t7;
+    $[21] = t8;
+    $[22] = t9;
+    $[23] = valueText;
+    $[24] = t10;
+  } else {
+    t10 = $[24];
+  }
+  return t10;
+}