@adecore/ui 0.35.5 → 0.37.0

package/dist/index.d.ts

@@ -57,6 +57,7 @@ export { Skeleton, type SkeletonProps } from './Skeleton.tsx';
 export { Slider, type SliderProps } from './Slider.tsx';
 export { SlidingColumn, type SlidingColumnProps } from './SlidingColumn.tsx';
 export { Spinner, type SpinnerProps } from './Spinner.tsx';
+export { SplitButton, type SplitButtonProps } from './SplitButton.tsx';
 export { Stepper, type StepperProps } from './Stepper.tsx';
 export { Surface, type SurfaceProps } from './Surface.tsx';
 export { Switch, type SwitchProps } from './Switch.tsx';
@@ -102,3 +103,4 @@ export { DropPreview, type DropPreviewProps } from './workspace/DropPreview.tsx'
 export { rectDropPreview, sameDropPreview, tabDropPreview, type DropPreviewShape, type TabDrop } from './workspace/preview.ts';
 export { createSplitLayout, updateSplitLayout, splitPanes, type SplitAxis, type SplitSide, type SplitPane, type SplitBranch, type SplitNode, type SplitLayout, type SplitCommand } from './workspace/model.ts';
 export { tabGapAt, type SplitRect, type SplitEdges, type SplitMinimum } from './workspace/geometry.ts';
+export type { CommandPaletteVirtualListProps, CommandPaletteVirtualItemProps } from './command-palette/virtual.tsx';

package/dist/index.js

@@ -54,6 +54,7 @@ export { Skeleton } from "./Skeleton.js";
 export { Slider } from "./Slider.js";
 export { SlidingColumn } from "./SlidingColumn.js";
 export { Spinner } from "./Spinner.js";
+export { SplitButton } from "./SplitButton.js";
 export { Stepper } from "./Stepper.js";
 export { Surface } from "./Surface.js";
 export { Switch } from "./Switch.js";

package/dist/locales/en.d.ts

@@ -49,6 +49,7 @@ declare const _default: {
     iconPicker: {
         label: string;
         none: string;
+        placeholder: string;
         search: string;
         clear: string;
         noMatch: string;

package/dist/locales/en.js

@@ -49,6 +49,7 @@ export default {
   iconPicker: {
     label: 'Icon',
     none: 'No icon',
+    placeholder: 'None',
     search: 'Search icons',
     clear: 'Clear search',
     noMatch: 'No icon matches “{{query}}”'

package/dist/locales/nl.d.ts

@@ -49,6 +49,7 @@ declare const _default: {
     iconPicker: {
         label: string;
         none: string;
+        placeholder: string;
         search: string;
         clear: string;
         noMatch: string;

package/dist/locales/nl.js

@@ -49,6 +49,7 @@ export default {
   iconPicker: {
     label: 'Icoon',
     none: 'Geen icoon',
+    placeholder: 'Geen',
     search: 'Iconen zoeken',
     clear: 'Zoekopdracht wissen',
     noMatch: 'Geen icoon past bij “{{query}}”'

package/dist/select-shared.d.ts

@@ -16,7 +16,7 @@ export declare const TRIGGER_SIZE: {
     readonly md: 'h-8 gap-1.5 px-2';
 };
 export declare const TRIGGER_VARIANT: {
-    readonly outlined: 'max-w-56 rounded-lg border border-border bg-surface-raised text-text';
+    readonly outlined: 'max-w-56 rounded-lg border border-field-border bg-field text-text hover:bg-surface-hover data-[popup-open]:bg-surface-hover data-disabled:hover:bg-field';
     readonly ghost: 'rounded-md text-text-muted hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text data-disabled:hover:bg-transparent data-disabled:hover:text-text-muted';
 };
 export declare const TRIGGER_DISABLED = "data-disabled:cursor-default data-disabled:opacity-50";

package/dist/select-shared.js

@@ -5,7 +5,7 @@ export const TRIGGER_SIZE = {
   md: 'h-8 gap-1.5 px-2'
 };
 export const TRIGGER_VARIANT = {
-  outlined: 'max-w-56 rounded-lg border border-border bg-surface-raised text-text',
+  outlined: 'max-w-56 rounded-lg border border-field-border bg-field text-text hover:bg-surface-hover data-[popup-open]:bg-surface-hover data-disabled:hover:bg-field',
   ghost: 'rounded-md text-text-muted hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text data-disabled:hover:bg-transparent data-disabled:hover:text-text-muted'
 };
 /* The dimmed look `Switch` and `Button` wear when disabled, so a select that cannot open reads as such. */

package/dist/settings/SettingsDialog.js

@@ -241,7 +241,7 @@ function SearchField(t0) {
   if ($[15] !== query || $[16] !== t4 || $[17] !== t5 || $[18] !== t6 || $[19] !== t7) {
     t8 = /*#__PURE__*/_jsx(Input, {
       ref: input,
-      className: "bg-surface-sunken pr-12 pl-8 text-xs",
+      className: "pr-12 pl-8 text-xs",
       placeholder: t4,
       "aria-label": t5,
       value: query,

package/dist/theme.css

@@ -17,9 +17,16 @@
        than the pressed step, so hover reads as a lift and pressed as the heavier state. A white
        popup cannot go lighter, so in this theme the step is the softest gray there is. */
     --surface-hover: #f3f3f5;
+    /* The hover of something that draws its own border: a smaller step, so the ground never passes
+       its edge and the outline stays visible under the pointer. */
+    --surface-hover-edged: color-mix(in srgb, var(--surface-raised) 60%, var(--surface-hover));
     /* The pressed step of a toggle. It cannot be `--surface-raised`, which equals `--surface` in the
        light theme, and it has to sit a shade past `--surface-hover` so pressed outranks hover. */
     --surface-active: #dcdce2;
+    /* What a person types or picks in: a step lighter than the ground it stands on in the dark theme, the raised white here. */
+    --field: var(--surface-raised);
+    /* An edge of its own, since an app may set `--border` to a solid separator that vanishes against a field. */
+    --field-border: rgb(0 0 0 / 0.11);
     /* Borders carry an alpha rather than a gray of their own, so a line takes the color of whatever
        it is drawn over instead of fighting it. A gray hairline over a tinted surface reads as a
        smudge; the same line in black at a low alpha stays a line. Everything with a surface of its
@@ -41,6 +48,9 @@
     --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface));
     --accent-text: #ffffff;
     --selection: rgb(var(--accent-rgb) / 0.55);
+    /* The part of a name that answers a filter or a search. A tint of its own rather than the
+       selection's, so a selected row that matches still shows both. */
+    --match: color-mix(in srgb, var(--status-needs-you) 30%, transparent);
     --float-shadow:
         0 1px 2px -1px rgb(0 0 0 / 0.08),
         0 3px 6px -2px rgb(0 0 0 / 0.07),
@@ -106,9 +116,12 @@
     --bg: #0d0d10;
     --surface: #131316;
     --surface-raised: #18181c;
-    --surface-sunken: #08080a;
+    --surface-sunken: #0b0b0e;
     --surface-hover: #202024;
     --surface-active: #28282e;
+    /* Derived, so an app that tints its surfaces tints its fields along. */
+    --field: color-mix(in srgb, var(--surface) 40%, var(--surface-hover));
+    --field-border: rgb(255 255 255 / 0.1);
     /* White at a low alpha, which is what gives a dark surface its lifted edge. */
     --border: rgb(255 255 255 / 0.07);
     --separator: oklch(0.236 0.006 285.956);
@@ -118,6 +131,7 @@
     --text-muted: #9a9aa6;
     --text-faint: #5f5f6b;
     --selection: rgb(var(--accent-rgb) / 0.6);
+    --match: color-mix(in srgb, var(--status-needs-you) 28%, transparent);
     --float-shadow:
         0 1px 2px -1px rgb(0 0 0 / 0.3),
         0 2px 4px rgb(0 0 0 / 0.24),
@@ -233,7 +247,10 @@
     --color-surface-sunken: var(--surface-sunken);
     --color-surface-idle: var(--surface-idle);
     --color-surface-hover: var(--surface-hover);
+    --color-surface-hover-edged: var(--surface-hover-edged);
     --color-surface-active: var(--surface-active);
+    --color-field: var(--field);
+    --color-field-border: var(--field-border);
     --color-border: var(--border);
     --color-separator: var(--separator);
     --color-border-strong: var(--border-strong);
@@ -261,6 +278,10 @@
 }
 
 @layer base {
+    /* Whatever a click acts on shows the hand; a disabled one shows that nothing will. Menu rows keep the arrow (`.menu-item`). */
+    :where(button, a[href], summary, label[for], [role="button"], [role="checkbox"], [role="switch"], [role="radio"], [role="tab"], [role="option"]):not(:disabled, [aria-disabled="true"], [data-disabled]) {
+        cursor: pointer;
+    }
     /*
      * A border with an alpha has to mix with what is behind the element, not with the element's own
      * background: by default a background runs on under the border and a node's white surface would
@@ -326,8 +347,8 @@
         width: 100%;
         padding: 0 10px;
         border-radius: 8px;
-        border: 1px solid var(--border);
-        background: var(--surface);
+        border: 1px solid var(--field-border);
+        background-color: var(--field);
         color: var(--text);
         font-size: var(--text-sm);
         outline: none;
@@ -345,6 +366,10 @@
         border-radius: 6px;
         font-size: var(--text-xs);
     }
+    /* A field inside a card that draws the edge and the focus for it. The border stays as a transparent
+       line, so the text sits where it would in a field of its own. */
+    .field-bare { border-color: transparent; background: transparent; }
+    .field-bare:focus-visible { outline: none; }
     /* Keyboard focus is visible on every control; pointer focus stays quiet. `.focus-ring` is the
        same outline for something that takes focus without being a button, such as a row in a list. */
     .icon-btn:focus-visible, .menu-item:focus-visible, button:focus-visible, .focus-ring:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@@ -683,6 +708,11 @@
     .adecore-tree-decoration {
         font-variant-numeric: tabular-nums;
     }
+    /* A row's own icon in place of the tree's glyph, in the glyph's color. */
+    .adecore-tree-icon {
+        display: inline-flex;
+        color: var(--text-muted);
+    }
     /* A tree whose rows slide sideways: every part of a row keeps its width and moves with the shift. */
     .adecore-tree[data-overflow="scroll"] .adecore-tree-row {
         overflow: clip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.35.5",
+  "version": "0.37.0",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",
@@ -67,6 +67,7 @@
   "dependencies": {
     "@base-ui/react": "^1.9.0",
     "@pierre/trees": "1.0.0-beta.6",
+    "@tanstack/react-virtual": "^3.14.13",
     "clsx": "^2.1.1",
     "lucide-react": "^1.47.0",
     "zustand": "^5.0.15"

package/src/Button.tsx

@@ -1,35 +1,8 @@
 import type { AnchorHTMLAttributes, ComponentProps, Ref } from 'react';
 import clsx from 'clsx';
+import { buttonClass, type ButtonShape, type ButtonSize, type ButtonVariant } from './button-class.ts';
 
-export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'danger-outline' | 'positive' | 'inverse';
-export type ButtonSize = 'xs' | 'sm' | 'md';
-export type ButtonShape = 'default' | 'pill';
-
-const VARIANT: Record<ButtonVariant, string> = {
-    // 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: Record<ButtonSize, string> = {
-    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: Record<ButtonShape, string> = {
-    default: 'rounded-md text-xs',
-    pill: 'h-9 rounded-full px-3.5 text-sm'
-};
+export type { ButtonShape, ButtonSize, ButtonVariant } from './button-class.ts';
 
 export interface ButtonProps extends ComponentProps<'button'> {
     variant?: ButtonVariant;
@@ -42,13 +15,7 @@ export interface ButtonProps extends ComponentProps<'button'> {
 
 /* 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 }: ButtonProps) {
-    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
-    );
+    const classes = clsx(buttonClass(variant, size, shape), className);
     if (href) {
         return (
             <a

package/src/Checkbox.tsx

@@ -27,7 +27,7 @@ export function Checkbox({ checked, onCheckedChange, label, indeterminate = fals
             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',
+                'flex size-4 shrink-0 items-center justify-center rounded-sm border border-field-border bg-field 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
             )}

package/src/ChoiceCards.tsx

@@ -47,11 +47,11 @@ function ChoiceCard<Value extends string | number>({ choice, radio }: { choice:
             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"
+            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-edged data-checked:border-accent data-disabled:opacity-50 data-disabled:hover:bg-surface"
         >
             {radio === 'start' && dot}
             {choice.icon && (
-                <span className="grid size-8 shrink-0 place-items-center rounded-lg bg-surface-sunken text-text-muted group-data-checked:text-accent">
+                <span className="grid size-8 shrink-0 place-items-center rounded-lg bg-surface-sunken text-text-muted group-data-checked:text-accent dark:bg-field dark:inset-ring dark:inset-ring-field-border">
                     <Icon icon={choice.icon} size={16} />
                 </span>
             )}