@adecore/ui 0.31.11 → 0.32.0

package/dist/Skeleton.js

@@ -1,6 +1,33 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
 /* A bar where a value will be, while the answer is still on its way. */
-export function Skeleton({ className, ref }) {
-    return _jsx("span", { ref: ref, className: clsx('block h-4 animate-pulse rounded bg-surface-sunken', className), "aria-hidden": true });
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Skeleton(t0) {
+  const $ = _c(5);
+  const {
+    className,
+    ref
+  } = t0;
+  let t1;
+  if ($[0] !== className) {
+    t1 = clsx("block h-4 animate-pulse rounded bg-surface-sunken", className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== ref || $[3] !== t1) {
+    t2 = /*#__PURE__*/_jsx("span", {
+      ref: ref,
+      className: t1,
+      "aria-hidden": true
+    });
+    $[2] = ref;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}

package/dist/Slider.js

@@ -1,16 +1,178 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useId } from 'react';
 import clsx from 'clsx';
 import { Slider as BaseSlider } from '@base-ui/react/slider';
 import { formatFixed } from './format/number.js';
 import { placesOf } from './step-places.js';
 /* A number picked along a range: the label and the value on one line, the track under them. */
-export function Slider({ value, onValueChange, min, max, step = 1, decimals = placesOf(step), unit, label, disabled, className, ref }) {
-    const labelId = useId();
-    const reading = formatFixed(value, decimals);
-    // Base UI adds steps in floating point, so 0.2 plus 0.1 would arrive as 0.30000000000000004.
-    const places = Math.max(placesOf(step), placesOf(min));
-    // Base UI's Page Up jumps 10 whatever the range; a tenth of the range suits 0 to 1 as well as 0 to 1000.
-    const largeStep = Math.max(step, Math.round((max - min) / 10 / step) * step);
-    return (_jsxs(BaseSlider.Root, { ref: ref, value: value, onValueChange: (next) => onValueChange(Number(next.toFixed(places))), min: min, max: max, step: step, largeStep: largeStep, disabled: disabled, "aria-labelledby": labelId, className: clsx('flex flex-col gap-1 data-disabled:opacity-50', className), children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3 text-xs", children: [_jsx("span", { id: labelId, className: "min-w-0 truncate text-text", children: label }), _jsxs("span", { "aria-hidden": true, className: "shrink-0 text-text-muted tabular-nums", children: [reading, unit] })] }), _jsx(BaseSlider.Control, { className: "flex h-5 touch-none items-center px-2 select-none", children: _jsxs(BaseSlider.Track, { className: "relative h-1 w-full rounded-full bg-border-strong", children: [_jsx(BaseSlider.Indicator, { className: "rounded-full bg-accent" }), _jsx(BaseSlider.Thumb, { getAriaValueText: () => `${reading}${unit ?? ''}`, className: "block size-4 rounded-full bg-surface-raised shadow-raised outline-offset-2 outline-accent has-focus-visible:outline-2" })] }) })] }));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Slider(t0) {
+  const $ = _c(41);
+  const {
+    value,
+    onValueChange,
+    min,
+    max,
+    step: t1,
+    decimals: t2,
+    unit,
+    label,
+    disabled,
+    className,
+    ref
+  } = t0;
+  const step = t1 === undefined ? 1 : t1;
+  let t3;
+  if ($[0] !== step || $[1] !== t2) {
+    t3 = t2 === undefined ? placesOf(step) : t2;
+    $[0] = step;
+    $[1] = t2;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const decimals = t3;
+  const labelId = useId();
+  let t4;
+  if ($[3] !== decimals || $[4] !== value) {
+    t4 = formatFixed(value, decimals);
+    $[3] = decimals;
+    $[4] = value;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const reading = t4;
+  let t5;
+  if ($[6] !== step) {
+    t5 = placesOf(step);
+    $[6] = step;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== min) {
+    t6 = placesOf(min);
+    $[8] = min;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  const places = Math.max(t5, t6);
+  const largeStep = Math.max(step, Math.round((max - min) / 10 / step) * step);
+  let t7;
+  if ($[10] !== onValueChange || $[11] !== places) {
+    t7 = next => onValueChange(Number(next.toFixed(places)));
+    $[10] = onValueChange;
+    $[11] = places;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  let t8;
+  if ($[13] !== className) {
+    t8 = clsx("flex flex-col gap-1 data-disabled:opacity-50", className);
+    $[13] = className;
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+  let t9;
+  if ($[15] !== label || $[16] !== labelId) {
+    t9 = /*#__PURE__*/_jsx("span", {
+      id: labelId,
+      className: "min-w-0 truncate text-text",
+      children: label
+    });
+    $[15] = label;
+    $[16] = labelId;
+    $[17] = t9;
+  } else {
+    t9 = $[17];
+  }
+  let t10;
+  if ($[18] !== reading || $[19] !== unit) {
+    t10 = /*#__PURE__*/_jsxs("span", {
+      "aria-hidden": true,
+      className: "shrink-0 text-text-muted tabular-nums",
+      children: [reading, unit]
+    });
+    $[18] = reading;
+    $[19] = unit;
+    $[20] = t10;
+  } else {
+    t10 = $[20];
+  }
+  let t11;
+  if ($[21] !== t10 || $[22] !== t9) {
+    t11 = /*#__PURE__*/_jsxs("div", {
+      className: "flex items-baseline justify-between gap-3 text-xs",
+      children: [t9, t10]
+    });
+    $[21] = t10;
+    $[22] = t9;
+    $[23] = t11;
+  } else {
+    t11 = $[23];
+  }
+  let t12;
+  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = /*#__PURE__*/_jsx(BaseSlider.Indicator, {
+      className: "rounded-full bg-accent"
+    });
+    $[24] = t12;
+  } else {
+    t12 = $[24];
+  }
+  let t13;
+  if ($[25] !== reading || $[26] !== unit) {
+    t13 = /*#__PURE__*/_jsx(BaseSlider.Control, {
+      className: "flex h-5 touch-none items-center px-2 select-none",
+      children: /*#__PURE__*/_jsxs(BaseSlider.Track, {
+        className: "relative h-1 w-full rounded-full bg-border-strong",
+        children: [t12, /*#__PURE__*/_jsx(BaseSlider.Thumb, {
+          getAriaValueText: () => `${reading}${unit ?? ""}`,
+          className: "block size-4 rounded-full bg-surface-raised shadow-raised outline-offset-2 outline-accent has-focus-visible:outline-2"
+        })]
+      })
+    });
+    $[25] = reading;
+    $[26] = unit;
+    $[27] = t13;
+  } else {
+    t13 = $[27];
+  }
+  let t14;
+  if ($[28] !== disabled || $[29] !== labelId || $[30] !== largeStep || $[31] !== max || $[32] !== min || $[33] !== ref || $[34] !== step || $[35] !== t11 || $[36] !== t13 || $[37] !== t7 || $[38] !== t8 || $[39] !== value) {
+    t14 = /*#__PURE__*/_jsxs(BaseSlider.Root, {
+      ref: ref,
+      value: value,
+      onValueChange: t7,
+      min: min,
+      max: max,
+      step: step,
+      largeStep: largeStep,
+      disabled: disabled,
+      "aria-labelledby": labelId,
+      className: t8,
+      children: [t11, t13]
+    });
+    $[28] = disabled;
+    $[29] = labelId;
+    $[30] = largeStep;
+    $[31] = max;
+    $[32] = min;
+    $[33] = ref;
+    $[34] = step;
+    $[35] = t11;
+    $[36] = t13;
+    $[37] = t7;
+    $[38] = t8;
+    $[39] = value;
+    $[40] = t14;
+  } else {
+    t14 = $[40];
+  }
+  return t14;
+}

package/dist/SlidingColumn.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { ColumnResizeHandle } from './ColumnResizeHandle.js';
+import { ColumnResizeHandle } from "./ColumnResizeHandle.js";
 import { mergeRefs } from './merge-refs.js';
 import { useColumnResize } from './useColumnResize.js';
 // How long the open and close motion takes; the same number as `.sliding-column` in `theme.css`.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TRANSITION_MS = 200;
 /*
  * A panel that slides in and out along the right edge. The outer column is 0 wide and inert while
@@ -12,37 +13,196 @@ const TRANSITION_MS = 200;
  * moves, and they stay mounted until the slide is over, so a close plays out. The left edge is the
  * drag handle.
  */
-export function SlidingColumn({ open, width, gap = 0, bounds, onWidthChange, instant = false, body, className, ref, children }) {
-    /* Closed and done animating. */
-    const [settled, setSettled] = useState(!open);
-    /* A width that lands without a transition fires no `transitionend`, so the motion it would have
-       ended is over in the same commit that starts it. */
-    if (instant && settled !== !open) {
+export function SlidingColumn(t0) {
+  const $ = _c(42);
+  const {
+    open,
+    width,
+    gap: t1,
+    bounds,
+    onWidthChange,
+    instant: t2,
+    body,
+    className,
+    ref,
+    children
+  } = t0;
+  const gap = t1 === undefined ? 0 : t1;
+  const instant = t2 === undefined ? false : t2;
+  const [settled, setSettled] = useState(!open);
+  if (instant && settled !== !open) {
+    setSettled(!open);
+  }
+  const present = open || !settled;
+  const column = useRef(null);
+  let t3;
+  if ($[0] !== gap) {
+    t3 = Math.round(gap);
+    $[0] = gap;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const spacing = Math.max(0, t3);
+  const t4 = bounds.min + spacing;
+  let t5;
+  if ($[2] !== bounds || $[3] !== spacing) {
+    t5 = () => bounds.max() + spacing;
+    $[2] = bounds;
+    $[3] = spacing;
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  const t6 = width + spacing;
+  let t7;
+  if ($[5] !== onWidthChange || $[6] !== spacing) {
+    t7 = next => onWidthChange(next - spacing);
+    $[5] = onWidthChange;
+    $[6] = spacing;
+    $[7] = t7;
+  } else {
+    t7 = $[7];
+  }
+  let t8;
+  if ($[8] !== t4 || $[9] !== t5 || $[10] !== t6 || $[11] !== t7) {
+    t8 = {
+      min: t4,
+      max: t5,
+      size: t6,
+      from: "right",
+      onSize: t7
+    };
+    $[8] = t4;
+    $[9] = t5;
+    $[10] = t6;
+    $[11] = t7;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  const {
+    startResize
+  } = useColumnResize(column, t8);
+  let t10;
+  let t9;
+  if ($[13] !== open || $[14] !== settled) {
+    t9 = () => {
+      if (open || settled) {
+        return;
+      }
+      const timer = window.setTimeout(() => setSettled(true), TRANSITION_MS + 50);
+      return () => {
+        window.clearTimeout(timer);
+      };
+    };
+    t10 = [open, settled];
+    $[13] = open;
+    $[14] = settled;
+    $[15] = t10;
+    $[16] = t9;
+  } else {
+    t10 = $[15];
+    t9 = $[16];
+  }
+  useEffect(t9, t10);
+  let t11;
+  if ($[17] !== ref) {
+    t11 = mergeRefs(column, ref);
+    $[17] = ref;
+    $[18] = t11;
+  } else {
+    t11 = $[18];
+  }
+  const t12 = !open;
+  const t13 = instant ? "" : undefined;
+  const t14 = spacing > 0 ? "" : undefined;
+  let t15;
+  if ($[19] !== className) {
+    t15 = clsx("sliding-column flex h-full shrink-0 justify-end overflow-hidden", className);
+    $[19] = className;
+    $[20] = t15;
+  } else {
+    t15 = $[20];
+  }
+  const t16 = open ? width + spacing : 0;
+  let t17;
+  if ($[21] !== t16) {
+    t17 = {
+      width: t16
+    };
+    $[21] = t16;
+    $[22] = t17;
+  } else {
+    t17 = $[22];
+  }
+  let t18;
+  if ($[23] !== open) {
+    t18 = event => {
+      if (event.propertyName === "width" && event.target === event.currentTarget) {
         setSettled(!open);
-    }
-    const present = open || !settled;
-    const column = useRef(null);
-    const spacing = Math.max(0, Math.round(gap));
-    const { startResize } = useColumnResize(column, {
-        min: bounds.min + spacing,
-        max: () => bounds.max() + spacing,
-        size: width + spacing,
-        from: 'right',
-        onSize: (next) => onWidthChange(next - spacing)
+      }
+    };
+    $[23] = open;
+    $[24] = t18;
+  } else {
+    t18 = $[24];
+  }
+  let t19;
+  if ($[25] !== body || $[26] !== children || $[27] !== open || $[28] !== present || $[29] !== spacing || $[30] !== startResize || $[31] !== width) {
+    t19 = present && /*#__PURE__*/_jsxs("div", {
+      ref: body?.ref,
+      tabIndex: body ? -1 : undefined,
+      className: clsx("relative flex h-full shrink-0 flex-col bg-surface outline-none", spacing === 0 && "border-l border-border"),
+      style: {
+        width,
+        marginLeft: spacing
+      },
+      onKeyDown: body?.onKeyDown,
+      children: [open && /*#__PURE__*/_jsx(ColumnResizeHandle, {
+        from: "right",
+        className: "sliding-column-resize",
+        style: spacing > 0 ? {
+          left: -spacing,
+          width: spacing
+        } : undefined,
+        onPointerDown: startResize
+      }), children]
+    });
+    $[25] = body;
+    $[26] = children;
+    $[27] = open;
+    $[28] = present;
+    $[29] = spacing;
+    $[30] = startResize;
+    $[31] = width;
+    $[32] = t19;
+  } else {
+    t19 = $[32];
+  }
+  let t20;
+  if ($[33] !== t11 || $[34] !== t12 || $[35] !== t13 || $[36] !== t14 || $[37] !== t15 || $[38] !== t17 || $[39] !== t18 || $[40] !== t19) {
+    t20 = /*#__PURE__*/_jsx("aside", {
+      ref: t11,
+      inert: t12,
+      "data-instant": t13,
+      "data-gap": t14,
+      className: t15,
+      style: t17,
+      onTransitionEnd: t18,
+      children: t19
     });
-    useEffect(() => {
-        if (open || settled) {
-            return;
-        }
-        // Reduced motion and a hidden tab paint no width change, so no `transitionend` arrives.
-        const timer = window.setTimeout(() => setSettled(true), TRANSITION_MS + 50);
-        return () => {
-            window.clearTimeout(timer);
-        };
-    }, [open, settled]);
-    return (_jsx("aside", { ref: mergeRefs(column, ref), inert: !open, "data-instant": instant ? '' : undefined, "data-gap": spacing > 0 ? '' : undefined, className: clsx('sliding-column flex h-full shrink-0 justify-end overflow-hidden', className), style: { width: open ? width + spacing : 0 }, onTransitionEnd: (event) => {
-            if (event.propertyName === 'width' && event.target === event.currentTarget) {
-                setSettled(!open);
-            }
-        }, children: present && (_jsxs("div", { ref: body?.ref, tabIndex: body ? -1 : undefined, className: clsx('relative flex h-full shrink-0 flex-col bg-surface outline-none', spacing === 0 && 'border-l border-border'), style: { width, marginLeft: spacing }, onKeyDown: body?.onKeyDown, children: [open && (_jsx(ColumnResizeHandle, { from: "right", className: "sliding-column-resize", style: spacing > 0 ? { left: -spacing, width: spacing } : undefined, onPointerDown: startResize })), children] })) }));
-}
+    $[33] = t11;
+    $[34] = t12;
+    $[35] = t13;
+    $[36] = t14;
+    $[37] = t15;
+    $[38] = t17;
+    $[39] = t18;
+    $[40] = t19;
+    $[41] = t20;
+  } else {
+    t20 = $[41];
+  }
+  return t20;
+}

package/dist/Spinner.js

@@ -1,7 +1,104 @@
-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 DOTS = [0, 1, 2];
 /* Work in progress: three dots that leap over each other in the color of the text around them. With reduced motion they stand still. */
-export function Spinner({ size = 16, label, className, style, ref, ...props }) {
-    return (_jsx("span", { ref: ref, role: label === undefined ? undefined : 'img', "aria-label": label, "aria-hidden": label === undefined ? true : undefined, ...props, className: clsx('spinner', className), style: { ...style, '--spinner-size': `${size}px` }, children: DOTS.map((dot) => (_jsx("span", { className: "spinner-hop", style: { '--spinner-step': dot }, children: _jsx("span", { className: "spinner-dot" }) }, dot))) }));
+export function Spinner(t0) {
+  const $ = _c(21);
+  let className;
+  let label;
+  let props;
+  let ref;
+  let style;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      size: t1,
+      label,
+      className,
+      style,
+      ref,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = label;
+    $[3] = props;
+    $[4] = ref;
+    $[5] = style;
+    $[6] = t1;
+  } else {
+    className = $[1];
+    label = $[2];
+    props = $[3];
+    ref = $[4];
+    style = $[5];
+    t1 = $[6];
+  }
+  const size = t1 === undefined ? 16 : t1;
+  const t2 = label === undefined ? undefined : "img";
+  const t3 = label === undefined ? true : undefined;
+  let t4;
+  if ($[7] !== className) {
+    t4 = clsx("spinner", className);
+    $[7] = className;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  const t5 = `${size}px`;
+  let t6;
+  if ($[9] !== style || $[10] !== t5) {
+    t6 = {
+      ...style,
+      "--spinner-size": t5
+    };
+    $[9] = style;
+    $[10] = t5;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  let t7;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = DOTS.map(_temp);
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  let t8;
+  if ($[13] !== label || $[14] !== props || $[15] !== ref || $[16] !== t2 || $[17] !== t3 || $[18] !== t4 || $[19] !== t6) {
+    t8 = /*#__PURE__*/_jsx("span", {
+      ref: ref,
+      role: t2,
+      "aria-label": label,
+      "aria-hidden": t3,
+      ...props,
+      className: t4,
+      style: t6,
+      children: t7
+    });
+    $[13] = label;
+    $[14] = props;
+    $[15] = ref;
+    $[16] = t2;
+    $[17] = t3;
+    $[18] = t4;
+    $[19] = t6;
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
+  return t8;
 }
+function _temp(dot) {
+  return /*#__PURE__*/_jsx("span", {
+    className: "spinner-hop",
+    style: {
+      "--spinner-step": dot
+    },
+    children: /*#__PURE__*/_jsx("span", {
+      className: "spinner-dot"
+    })
+  }, dot);
+}