@adecore/ui 0.35.5 → 0.37.0

package/dist/Input.d.ts

@@ -1,14 +1,16 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import type { LucideIcon } from 'lucide-react';
 export interface InputProps extends Omit<ComponentProps<'input'>, 'size'> {
     size?: 'md' | 'sm';
     mono?: boolean;
     icon?: LucideIcon;
+    end?: ReactNode;
 }
-export declare function Input({ size, mono, icon, className, id, ...props }: InputProps): import("react").JSX.Element;
+export declare function Input({ size, mono, icon, end, className, id, ...props }: InputProps): import("react").JSX.Element;
 export interface TextAreaProps extends ComponentProps<'textarea'> {
     size?: 'md' | 'sm';
     resize?: 'none' | 'vertical';
     mono?: boolean;
+    variant?: 'field' | 'bare';
 }
-export declare function TextArea({ size, resize, mono, className, id, ...props }: TextAreaProps): import("react").JSX.Element;
+export declare function TextArea({ size, resize, mono, variant, className, id, ...props }: TextAreaProps): import("react").JSX.Element;

package/dist/Input.js

@@ -5,8 +5,9 @@ import { Icon } from "./Icon.js";
 /* The one text input: one border and one focus ring at the one height or the compact one. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Input(t0) {
-  const $ = _c(39);
+  const $ = _c(42);
   let className;
+  let end;
   let icon;
   let id;
   let props;
@@ -17,164 +18,173 @@ export function Input(t0) {
       size: t1,
       mono: t2,
       icon,
+      end,
       className,
       id,
       ...props
     } = t0);
     $[0] = t0;
     $[1] = className;
-    $[2] = icon;
-    $[3] = id;
-    $[4] = props;
-    $[5] = t1;
-    $[6] = t2;
+    $[2] = end;
+    $[3] = icon;
+    $[4] = id;
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
   } else {
     className = $[1];
-    icon = $[2];
-    id = $[3];
-    props = $[4];
-    t1 = $[5];
-    t2 = $[6];
+    end = $[2];
+    icon = $[3];
+    id = $[4];
+    props = $[5];
+    t1 = $[6];
+    t2 = $[7];
   }
   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) {
+  if ($[8] !== field || $[9] !== id) {
     t3 = fieldControlProps(field, id);
-    $[7] = field;
-    $[8] = id;
-    $[9] = t3;
+    $[8] = field;
+    $[9] = id;
+    $[10] = t3;
   } else {
-    t3 = $[9];
+    t3 = $[10];
   }
   let t4;
-  if ($[10] !== props || $[11] !== t3) {
+  if ($[11] !== props || $[12] !== t3) {
     t4 = {
       ...t3,
       ...props
     };
-    $[10] = props;
-    $[11] = t3;
-    $[12] = t4;
+    $[11] = props;
+    $[12] = t3;
+    $[13] = t4;
   } else {
-    t4 = $[12];
+    t4 = $[13];
   }
   const control = t4;
-  if (icon === undefined) {
+  if (icon === undefined && end === undefined) {
     const t5 = small && "field-sm";
     const t6 = mono && "font-mono text-code";
     let t7;
-    if ($[13] !== className || $[14] !== t5 || $[15] !== t6) {
+    if ($[14] !== className || $[15] !== t5 || $[16] !== t6) {
       t7 = clsx("field", t5, t6, className);
-      $[13] = className;
-      $[14] = t5;
-      $[15] = t6;
-      $[16] = t7;
+      $[14] = className;
+      $[15] = t5;
+      $[16] = t6;
+      $[17] = t7;
     } else {
-      t7 = $[16];
+      t7 = $[17];
     }
     let t8;
-    if ($[17] !== control || $[18] !== t7) {
+    if ($[18] !== control || $[19] !== t7) {
       t8 = /*#__PURE__*/_jsx("input", {
         ...control,
         className: t7
       });
-      $[17] = control;
-      $[18] = t7;
-      $[19] = t8;
+      $[18] = control;
+      $[19] = t7;
+      $[20] = t8;
     } else {
-      t8 = $[19];
+      t8 = $[20];
     }
     return t8;
   }
   const t5 = small && "field-sm";
   let t6;
-  if ($[20] !== className || $[21] !== t5) {
+  if ($[21] !== className || $[22] !== t5) {
     t6 = clsx("field relative flex p-0", t5, className);
-    $[20] = className;
-    $[21] = t5;
-    $[22] = t6;
+    $[21] = className;
+    $[22] = t5;
+    $[23] = t6;
   } else {
-    t6 = $[22];
+    t6 = $[23];
   }
-  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, {
+  let t7;
+  if ($[24] !== icon || $[25] !== small) {
+    t7 = icon !== undefined && /*#__PURE__*/_jsx(Icon, {
       icon: icon,
-      size: t7,
-      className: t9
+      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")
     });
-    $[25] = icon;
+    $[24] = icon;
+    $[25] = small;
     $[26] = t7;
-    $[27] = t9;
-    $[28] = t10;
   } else {
-    t10 = $[28];
+    t7 = $[26];
   }
-  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;
+  const t8 = icon === undefined ? small ? "pl-2" : "pl-2.5" : small ? "pl-7" : "pl-8";
+  const t9 = end === undefined ? small ? "pr-2" : "pr-2.5" : "pr-1";
+  const t10 = mono && "font-mono text-code";
+  let t11;
+  if ($[27] !== t10 || $[28] !== t8 || $[29] !== t9) {
+    t11 = clsx("min-w-0 flex-1 bg-transparent outline-none placeholder:text-text-faint", t8, t9, t10);
+    $[27] = t10;
+    $[28] = t8;
+    $[29] = t9;
+    $[30] = t11;
   } else {
-    t13 = $[31];
+    t11 = $[30];
   }
-  let t14;
-  if ($[32] !== control || $[33] !== t13) {
-    t14 = /*#__PURE__*/_jsx("input", {
+  let t12;
+  if ($[31] !== control || $[32] !== t11) {
+    t12 = /*#__PURE__*/_jsx("input", {
       ...control,
-      className: t13
+      className: t11
     });
-    $[32] = control;
-    $[33] = t13;
-    $[34] = t14;
+    $[31] = control;
+    $[32] = t11;
+    $[33] = t12;
   } else {
-    t14 = $[34];
+    t12 = $[33];
   }
-  let t15;
-  if ($[35] !== t10 || $[36] !== t14 || $[37] !== t6) {
-    t15 = /*#__PURE__*/_jsxs("span", {
+  let t13;
+  if ($[34] !== end || $[35] !== small) {
+    t13 = end !== undefined && /*#__PURE__*/_jsx("span", {
+      className: clsx("flex shrink-0 items-center gap-1", small ? "pr-0.5" : "pr-1"),
+      children: end
+    });
+    $[34] = end;
+    $[35] = small;
+    $[36] = t13;
+  } else {
+    t13 = $[36];
+  }
+  let t14;
+  if ($[37] !== t12 || $[38] !== t13 || $[39] !== t6 || $[40] !== t7) {
+    t14 = /*#__PURE__*/_jsxs("span", {
       className: t6,
-      children: [t10, t14]
+      children: [t7, t12, t13]
     });
-    $[35] = t10;
-    $[36] = t14;
-    $[37] = t6;
-    $[38] = t15;
+    $[37] = t12;
+    $[38] = t13;
+    $[39] = t6;
+    $[40] = t7;
+    $[41] = t14;
   } else {
-    t15 = $[38];
+    t14 = $[41];
   }
-  return t15;
+  return t14;
 }
 /* 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(t0) {
-  const $ = _c(19);
+  const $ = _c(21);
   let className;
   let id;
   let props;
   let t1;
   let t2;
   let t3;
+  let t4;
   if ($[0] !== t0) {
     ({
       size: t1,
       resize: t2,
       mono: t3,
+      variant: t4,
       className,
       id,
       ...props
@@ -186,6 +196,7 @@ export function TextArea(t0) {
     $[4] = t1;
     $[5] = t2;
     $[6] = t3;
+    $[7] = t4;
   } else {
     className = $[1];
     id = $[2];
@@ -193,47 +204,51 @@ export function TextArea(t0) {
     t1 = $[4];
     t2 = $[5];
     t3 = $[6];
+    t4 = $[7];
   }
   const size = t1 === undefined ? "md" : t1;
   const resize = t2 === undefined ? "none" : t2;
   const mono = t3 === undefined ? false : t3;
+  const variant = t4 === undefined ? "field" : t4;
   const field = useFieldControl();
-  let t4;
-  if ($[7] !== field || $[8] !== id) {
-    t4 = fieldControlProps(field, id);
-    $[7] = field;
-    $[8] = id;
-    $[9] = t4;
+  let t5;
+  if ($[8] !== field || $[9] !== id) {
+    t5 = fieldControlProps(field, id);
+    $[8] = field;
+    $[9] = id;
+    $[10] = t5;
   } else {
-    t4 = $[9];
+    t5 = $[10];
   }
-  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;
+  const t6 = size === "sm" && "field-sm";
+  const t7 = variant === "bare" && "field-bare";
+  const t8 = resize === "vertical" ? "resize-y" : "resize-none";
+  const t9 = mono && "font-mono text-code";
+  let t10;
+  if ($[11] !== className || $[12] !== t6 || $[13] !== t7 || $[14] !== t8 || $[15] !== t9) {
+    t10 = clsx("field h-auto min-h-16 py-1.5", t6, t7, t8, t9, className);
+    $[11] = className;
     $[12] = t6;
     $[13] = t7;
     $[14] = t8;
+    $[15] = t9;
+    $[16] = t10;
   } else {
-    t8 = $[14];
+    t10 = $[16];
   }
-  let t9;
-  if ($[15] !== props || $[16] !== t4 || $[17] !== t8) {
-    t9 = /*#__PURE__*/_jsx("textarea", {
-      ...t4,
+  let t11;
+  if ($[17] !== props || $[18] !== t10 || $[19] !== t5) {
+    t11 = /*#__PURE__*/_jsx("textarea", {
+      ...t5,
       ...props,
-      className: t8
+      className: t10
     });
-    $[15] = props;
-    $[16] = t4;
-    $[17] = t8;
-    $[18] = t9;
+    $[17] = props;
+    $[18] = t10;
+    $[19] = t5;
+    $[20] = t11;
   } else {
-    t9 = $[18];
+    t11 = $[20];
   }
-  return t9;
+  return t11;
 }

package/dist/Segmented.js

@@ -73,7 +73,7 @@ export function Segmented(t0) {
   const move = t5;
   let t6;
   if ($[6] !== className || $[7] !== sizing.row || $[8] !== sizing.track || $[9] !== vertical) {
-    t6 = clsx("flex bg-surface-sunken p-0.5 text-xs font-medium", sizing.track, vertical ? "w-full flex-col items-stretch gap-0.5" : clsx(sizing.row, "w-fit items-center"), className);
+    t6 = clsx("flex bg-surface-sunken p-0.5 text-xs font-medium dark:bg-surface-idle", sizing.track, vertical ? "w-full flex-col items-stretch gap-0.5" : clsx(sizing.row, "w-fit items-center"), className);
     $[6] = className;
     $[7] = sizing.row;
     $[8] = sizing.track;

package/dist/SplitButton.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type ButtonSize, type ButtonVariant } from './button-class.ts';
+import { type MenuPopupProps } from './menu/parts.tsx';
+export interface SplitButtonProps extends Omit<ComponentProps<'button'>, 'ref'> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    tooltip?: ReactNode;
+    menu: ReactNode;
+    menuLabel: string;
+    menuTooltip?: ReactNode;
+    menuDisabled?: boolean;
+    menuAlign?: MenuPopupProps['align'];
+    menuClassName?: string;
+    className?: string;
+    ref?: ComponentProps<'span'>['ref'];
+}
+export declare function SplitButton({ variant, size, tooltip, menu, menuLabel, menuTooltip, menuDisabled, menuAlign, menuClassName, className, ref, type, ...props }: SplitButtonProps): import("react").JSX.Element;

package/dist/SplitButton.js

@@ -0,0 +1,237 @@
+import { c as _c } from "react/compiler-runtime";
+import { useState } from 'react';
+import clsx from 'clsx';
+import { ChevronDown } from 'lucide-react';
+import { splitFrameClass, splitHalfClass } from './button-class.js';
+import { Icon } from "./Icon.js";
+import { MenuPopup, MenuRoot, MenuTrigger } from "./menu/parts.js";
+import { mergeRefs } from './merge-refs.js';
+import { Tooltip } from "./Tooltip.js";
+/*
+ * A primary action and a chevron that opens a menu of related ones, drawn as one button with a short
+ * line between the halves. Each half is a button of its own, so each takes the focus, can be disabled
+ * and carries its own hint; the menu hangs under the whole control.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function SplitButton(t0) {
+  const $ = _c(56);
+  let className;
+  let menu;
+  let menuClassName;
+  let menuLabel;
+  let menuTooltip;
+  let props;
+  let ref;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let tooltip;
+  if ($[0] !== t0) {
+    ({
+      variant: t1,
+      size: t2,
+      tooltip,
+      menu,
+      menuLabel,
+      menuTooltip,
+      menuDisabled: t3,
+      menuAlign: t4,
+      menuClassName,
+      className,
+      ref,
+      type: t5,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = menu;
+    $[3] = menuClassName;
+    $[4] = menuLabel;
+    $[5] = menuTooltip;
+    $[6] = props;
+    $[7] = ref;
+    $[8] = t1;
+    $[9] = t2;
+    $[10] = t3;
+    $[11] = t4;
+    $[12] = t5;
+    $[13] = tooltip;
+  } else {
+    className = $[1];
+    menu = $[2];
+    menuClassName = $[3];
+    menuLabel = $[4];
+    menuTooltip = $[5];
+    props = $[6];
+    ref = $[7];
+    t1 = $[8];
+    t2 = $[9];
+    t3 = $[10];
+    t4 = $[11];
+    t5 = $[12];
+    tooltip = $[13];
+  }
+  const variant = t1 === undefined ? "secondary" : t1;
+  const size = t2 === undefined ? "md" : t2;
+  const menuDisabled = t3 === undefined ? false : t3;
+  const menuAlign = t4 === undefined ? "end" : t4;
+  const type = t5 === undefined ? "button" : t5;
+  const [box, setBox] = useState(null);
+  let t6;
+  if ($[14] !== size || $[15] !== variant) {
+    t6 = splitHalfClass(variant, size, "action");
+    $[14] = size;
+    $[15] = variant;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  let t7;
+  if ($[17] !== props || $[18] !== t6 || $[19] !== type) {
+    t7 = /*#__PURE__*/_jsx("button", {
+      type: type,
+      className: t6,
+      ...props
+    });
+    $[17] = props;
+    $[18] = t6;
+    $[19] = type;
+    $[20] = t7;
+  } else {
+    t7 = $[20];
+  }
+  const action = t7;
+  let t8;
+  if ($[21] !== ref) {
+    t8 = mergeRefs(ref, setBox);
+    $[21] = ref;
+    $[22] = t8;
+  } else {
+    t8 = $[22];
+  }
+  let t9;
+  if ($[23] !== className || $[24] !== size || $[25] !== variant) {
+    t9 = clsx(splitFrameClass(variant, size), className);
+    $[23] = className;
+    $[24] = size;
+    $[25] = variant;
+    $[26] = t9;
+  } else {
+    t9 = $[26];
+  }
+  let t10;
+  if ($[27] !== action || $[28] !== tooltip) {
+    t10 = tooltip === undefined ? action : /*#__PURE__*/_jsx(Tooltip, {
+      label: tooltip,
+      children: action
+    });
+    $[27] = action;
+    $[28] = tooltip;
+    $[29] = t10;
+  } else {
+    t10 = $[29];
+  }
+  const t11 = menuTooltip ?? menuLabel;
+  let t12;
+  if ($[30] !== size || $[31] !== variant) {
+    t12 = splitHalfClass(variant, size, "menu");
+    $[30] = size;
+    $[31] = variant;
+    $[32] = t12;
+  } else {
+    t12 = $[32];
+  }
+  let t13;
+  if ($[33] !== t12) {
+    t13 = /*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: t12
+    });
+    $[33] = t12;
+    $[34] = t13;
+  } else {
+    t13 = $[34];
+  }
+  let t14;
+  if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = /*#__PURE__*/_jsx(Icon, {
+      icon: ChevronDown,
+      size: 14
+    });
+    $[35] = t14;
+  } else {
+    t14 = $[35];
+  }
+  let t15;
+  if ($[36] !== menuDisabled || $[37] !== menuLabel || $[38] !== t13) {
+    t15 = /*#__PURE__*/_jsx(MenuTrigger, {
+      render: t13,
+      "aria-label": menuLabel,
+      disabled: menuDisabled,
+      children: t14
+    });
+    $[36] = menuDisabled;
+    $[37] = menuLabel;
+    $[38] = t13;
+    $[39] = t15;
+  } else {
+    t15 = $[39];
+  }
+  let t16;
+  if ($[40] !== t11 || $[41] !== t15) {
+    t16 = /*#__PURE__*/_jsx(Tooltip, {
+      label: t11,
+      children: t15
+    });
+    $[40] = t11;
+    $[41] = t15;
+    $[42] = t16;
+  } else {
+    t16 = $[42];
+  }
+  let t17;
+  if ($[43] !== box || $[44] !== menu || $[45] !== menuAlign || $[46] !== menuClassName) {
+    t17 = /*#__PURE__*/_jsx(MenuPopup, {
+      anchor: box,
+      align: menuAlign,
+      className: menuClassName,
+      children: menu
+    });
+    $[43] = box;
+    $[44] = menu;
+    $[45] = menuAlign;
+    $[46] = menuClassName;
+    $[47] = t17;
+  } else {
+    t17 = $[47];
+  }
+  let t18;
+  if ($[48] !== t16 || $[49] !== t17) {
+    t18 = /*#__PURE__*/_jsxs(MenuRoot, {
+      children: [t16, t17]
+    });
+    $[48] = t16;
+    $[49] = t17;
+    $[50] = t18;
+  } else {
+    t18 = $[50];
+  }
+  let t19;
+  if ($[51] !== t10 || $[52] !== t18 || $[53] !== t8 || $[54] !== t9) {
+    t19 = /*#__PURE__*/_jsxs("span", {
+      ref: t8,
+      className: t9,
+      children: [t10, t18]
+    });
+    $[51] = t10;
+    $[52] = t18;
+    $[53] = t8;
+    $[54] = t9;
+    $[55] = t19;
+  } else {
+    t19 = $[55];
+  }
+  return t19;
+}

package/dist/Stepper.js

@@ -68,7 +68,7 @@ export function Stepper(t0) {
   const nudge = t4;
   let t5;
   if ($[12] !== className) {
-    t5 = clsx("shrink-0 rounded-lg bg-surface-sunken p-0.5", className);
+    t5 = clsx("shrink-0 rounded-lg border border-field-border bg-field bg-clip-padding p-px", className);
     $[12] = className;
     $[13] = t5;
   } else {

package/dist/Switch.js

@@ -23,7 +23,7 @@ export function Switch(t0) {
   }
   let t2;
   if ($[2] !== className) {
-    t2 = clsx("relative inline-flex h-5 w-9 shrink-0 rounded-full bg-border-strong p-0.5 transition-colors data-checked:bg-accent data-disabled:opacity-50", className);
+    t2 = clsx("relative inline-flex h-5 w-9 shrink-0 rounded-full bg-border-strong p-0.5 transition-colors data-checked:bg-accent dark:not-data-checked:bg-field dark:not-data-checked:inset-ring dark:not-data-checked:inset-ring-field-border data-disabled:opacity-50", className);
     $[2] = className;
     $[3] = t2;
   } else {

package/dist/Tile.js

@@ -57,7 +57,7 @@ export function Tile(t0) {
   const t5 = primary ? "border-accent" : "border-border";
   let t6;
   if ($[10] !== className || $[11] !== t4 || $[12] !== t5) {
-    t6 = clsx("flex min-w-0 items-center border bg-surface text-left hover:bg-surface-hover disabled:opacity-50 disabled:hover:bg-surface", t4, t5, className);
+    t6 = clsx("flex min-w-0 items-center border bg-surface text-left hover:bg-surface-hover-edged disabled:opacity-50 disabled:hover:bg-surface", t4, t5, className);
     $[10] = className;
     $[11] = t4;
     $[12] = t5;
@@ -65,7 +65,7 @@ export function Tile(t0) {
   } else {
     t6 = $[13];
   }
-  const t7 = primary ? "bg-accent text-accent-text" : "bg-surface-sunken text-text-muted";
+  const t7 = primary ? "bg-accent text-accent-text" : "bg-surface-sunken text-text-muted dark:bg-field dark:inset-ring dark:inset-ring-field-border";
   let t8;
   if ($[14] !== t7) {
     t8 = clsx("grid size-8 shrink-0 place-items-center rounded-lg", t7);

package/dist/button-class.d.ts

@@ -0,0 +1,6 @@
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'danger-outline' | 'positive' | 'inverse';
+export type ButtonSize = 'xs' | 'sm' | 'md';
+export type ButtonShape = 'default' | 'pill';
+export declare function buttonClass(variant: ButtonVariant, size: ButtonSize, shape: ButtonShape): string;
+export declare function splitFrameClass(variant: ButtonVariant, size: ButtonSize): string;
+export declare function splitHalfClass(variant: ButtonVariant, size: ButtonSize, half: 'action' | 'menu'): string;