@adecore/ui 0.20.1 → 0.21.0

package/dist/Pill.d.ts

@@ -16,6 +16,7 @@ export interface PillProps {
     children: ReactNode;
     tone?: keyof typeof TONES;
     shape?: keyof typeof SHAPES;
+    size?: 'md' | 'sm';
     mono?: boolean;
     onClick?: () => void;
     pressed?: boolean;
@@ -23,5 +24,5 @@ export interface PillProps {
     className?: string;
     ref?: Ref<HTMLElement>;
 }
-export declare function Pill({ icon, children, tone, shape, mono, onClick, pressed, disabled, className, ref }: PillProps): import("react").JSX.Element;
+export declare function Pill({ icon, children, tone, shape, size, mono, onClick, pressed, disabled, className, ref }: PillProps): import("react").JSX.Element;
 export {};

package/dist/Pill.js

@@ -16,13 +16,18 @@ const TONES = {
 };
 /* The corners of a button, so a pill reads as a small label of the same family and not as a badge. A tag, at the end of a line of prose, is tighter and heavier. */
 const SHAPES = {
-    pill: 'rounded-md px-2 py-0.5',
-    tag: 'rounded-md px-1.5 py-0.5 font-medium'
+    pill: 'rounded-md',
+    tag: 'rounded-md font-medium'
+};
+/* The text stays at the theme's smallest size, so `sm` gives up padding: 20px tall instead of 24. */
+const PADDING = {
+    pill: { md: 'px-2 py-0.5', sm: 'px-1.5' },
+    tag: { md: 'px-1.5 py-0.5', sm: 'px-1' }
 };
 /* The small rounded label in a header, a sidebar row or a settings line: a count, a branch, a status. */
-export function Pill({ icon, children, tone = 'muted', shape = 'pill', mono = false, onClick, pressed, disabled, className, ref }) {
+export function Pill({ icon, children, tone = 'muted', shape = 'pill', size = 'md', mono = false, onClick, pressed, disabled, className, ref }) {
     // Never broken inside itself: in a row that wraps, a pill that does not fit moves to the next line whole.
-    const shared = clsx('inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-2xs', SHAPES[shape], TONES[tone], mono && 'font-mono', className);
+    const shared = clsx('inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-2xs', SHAPES[shape], PADDING[shape][size], TONES[tone], mono && 'font-mono', className);
     if (!onClick) {
         return (_jsxs("span", { ref: ref, className: shared, children: [icon, children] }));
     }

package/dist/Slider.d.ts

@@ -0,0 +1,15 @@
+import { type Ref } from 'react';
+export interface SliderProps {
+    value: number;
+    onValueChange(value: number): void;
+    min: number;
+    max: number;
+    step?: number;
+    decimals?: number;
+    unit?: string;
+    label: string;
+    disabled?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Slider({ value, onValueChange, min, max, step, decimals, unit, label, disabled, className, ref }: SliderProps): import("react").JSX.Element;

package/dist/Slider.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import clsx from 'clsx';
+import { Slider as BaseSlider } from '@base-ui-components/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" })] }) })] }));
+}

package/dist/Stepper.js

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { ButtonGroup } from './ButtonGroup.js';
 import { formatFixed } from './format/number.js';
 import { IconButton } from './IconButton.js';
-const placesOf = (step) => String(step).split('.')[1]?.length ?? 0;
+import { placesOf } from './step-places.js';
 /* A number between minus and plus, in one sunken group so the three read as a single control. */
 export function Stepper({ value, onValueChange, min, max, step, decimals = placesOf(step), unit, label, className, ref }) {
     const { t } = useTranslation('ui');

package/dist/Toasts.js

@@ -42,7 +42,7 @@ function ToastCard({ toast, footer, onDismiss }) {
     const actions = [...(toast.action === undefined ? [] : [toast.action]), ...(toast.actions ?? [])];
     // An offer that runs out shows how long it has left instead.
     const countdown = actions.length > 0 ? toast.deadline : undefined;
-    return (_jsxs(Surface, { className: "group flex items-start gap-3 rounded-[10px] py-2.5 pr-2 pl-3", children: [_jsx("span", { className: clsx(TITLE_LINE, 'w-4 justify-center'), children: toast.kind === 'progress' ? (_jsx(Spinner, { size: 16, className: TONE.progress })) : (_jsx(Icon, { icon: ICON[toast.kind], size: 16, className: TONE[toast.kind] })) }), _jsxs("div", { className: "flex min-w-0 grow flex-col gap-1", children: [_jsx("span", { className: "text-sm text-text", children: toast.title }), toast.description !== undefined && toast.description !== '' && (_jsx("span", { className: "text-xs break-words text-pretty text-text-muted", children: toast.description })), actions.length > 1 && (_jsx("span", { className: "mt-1 flex flex-wrap items-center gap-x-4 gap-y-1", children: actions.map((action) => (_jsx(ActionButton, { action: action }, action.label))) })), footer?.(toast)] }), actions.length === 1 && (_jsx("span", { className: TITLE_LINE, children: _jsx(ActionButton, { action: actions[0] }) })), countdown !== undefined ? (_jsx(TimerRing, { deadline: countdown, onDismiss: onDismiss }, countdown.start)) : (_jsx(IconButton, { icon: X, size: "xs", label: t('action.dismiss'), className: clsx('-my-px', leaves && 'opacity-0 group-focus-within:opacity-100 group-hover:opacity-100'), onClick: onDismiss }))] }));
+    return (_jsxs(Surface, { className: "group flex items-start gap-3 rounded-[10px] py-2.5 pr-2 pl-3", children: [_jsx("span", { className: clsx(TITLE_LINE, 'w-4 justify-center'), children: toast.kind === 'progress' ? (_jsx(Spinner, { size: 16, className: TONE.progress })) : (_jsx(Icon, { icon: ICON[toast.kind], size: 16, className: TONE[toast.kind] })) }), _jsxs("div", { className: "flex min-w-0 grow flex-col gap-1", children: [_jsx("span", { className: "text-sm break-words text-text", children: toast.title }), toast.description !== undefined && toast.description !== '' && (_jsx("span", { className: "text-xs break-words text-pretty text-text-muted", children: toast.description })), actions.length > 1 && (_jsx("span", { className: "mt-1 flex flex-wrap items-center gap-x-4 gap-y-1", children: actions.map((action) => (_jsx(ActionButton, { action: action }, action.label))) })), footer?.(toast)] }), actions.length === 1 && (_jsx("span", { className: TITLE_LINE, children: _jsx(ActionButton, { action: actions[0] }) })), countdown !== undefined ? (_jsx(TimerRing, { deadline: countdown, onDismiss: onDismiss }, countdown.start)) : (_jsx(IconButton, { icon: X, size: "xs", label: t('action.dismiss'), className: clsx('-my-px', leaves && 'opacity-0 group-focus-within:opacity-100 group-hover:opacity-100'), onClick: onDismiss }))] }));
 }
 /*
  * Bottom right, over everything: what an action is doing while it runs and how it went when it is

package/dist/index.d.ts

@@ -46,6 +46,7 @@ export { Select, type SelectGroup, type SelectItem, type SelectProps } from './S
 export { Separator, type SeparatorProps } from './Separator.tsx';
 export { ShortcutHints } from './ShortcutHints.tsx';
 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 { Stepper, type StepperProps } from './Stepper.tsx';

package/dist/index.js

@@ -45,6 +45,7 @@ export { Select } from './Select.js';
 export { Separator } from './Separator.js';
 export { ShortcutHints } from './ShortcutHints.js';
 export { Skeleton } from './Skeleton.js';
+export { Slider } from './Slider.js';
 export { SlidingColumn } from './SlidingColumn.js';
 export { Spinner } from './Spinner.js';
 export { Stepper } from './Stepper.js';

package/dist/step-places.d.ts

@@ -0,0 +1 @@
+export declare const placesOf: (step: number) => number;

package/dist/step-places.js

@@ -0,0 +1,2 @@
+/* The places after the separator that `step` is written with, so a step of 0.1 shows `1,0` and never `1`. */
+export const placesOf = (step) => String(step).split('.')[1]?.length ?? 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.20.1",
+  "version": "0.21.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",
@@ -78,6 +78,7 @@
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "^20.14.5",
     "@types/bun": "^1.4.2",
     "@types/opentype.js": "^1.3.10",
     "@types/react": "^19.3.0",
@@ -88,7 +89,6 @@
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15",
-    "typescript": "^7.0.2",
-    "@happy-dom/global-registrator": "^20.14.5"
+    "typescript": "^7.0.2"
   }
 }

package/src/Pill.tsx

@@ -18,8 +18,14 @@ const TONES = {
 
 /* The corners of a button, so a pill reads as a small label of the same family and not as a badge. A tag, at the end of a line of prose, is tighter and heavier. */
 const SHAPES = {
-    pill: 'rounded-md px-2 py-0.5',
-    tag: 'rounded-md px-1.5 py-0.5 font-medium'
+    pill: 'rounded-md',
+    tag: 'rounded-md font-medium'
+};
+
+/* The text stays at the theme's smallest size, so `sm` gives up padding: 20px tall instead of 24. */
+const PADDING = {
+    pill: { md: 'px-2 py-0.5', sm: 'px-1.5' },
+    tag: { md: 'px-1.5 py-0.5', sm: 'px-1' }
 };
 
 export interface PillProps {
@@ -27,6 +33,7 @@ export interface PillProps {
     children: ReactNode;
     tone?: keyof typeof TONES;
     shape?: keyof typeof SHAPES;
+    size?: 'md' | 'sm';
     /* A branch name or a count reads better in the monospace face. */
     mono?: boolean;
     /* With a handler the pill is a button; without one it is a label. */
@@ -39,9 +46,9 @@ export interface PillProps {
 }
 
 /* The small rounded label in a header, a sidebar row or a settings line: a count, a branch, a status. */
-export function Pill({ icon, children, tone = 'muted', shape = 'pill', mono = false, onClick, pressed, disabled, className, ref }: PillProps) {
+export function Pill({ icon, children, tone = 'muted', shape = 'pill', size = 'md', mono = false, onClick, pressed, disabled, className, ref }: PillProps) {
     // Never broken inside itself: in a row that wraps, a pill that does not fit moves to the next line whole.
-    const shared = clsx('inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-2xs', SHAPES[shape], TONES[tone], mono && 'font-mono', className);
+    const shared = clsx('inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-2xs', SHAPES[shape], PADDING[shape][size], TONES[tone], mono && 'font-mono', className);
     if (!onClick) {
         return (
             <span ref={ref} className={shared}>

package/src/Slider.tsx

@@ -0,0 +1,68 @@
+import { useId, type Ref } from 'react';
+import clsx from 'clsx';
+import { Slider as BaseSlider } from '@base-ui-components/react/slider';
+import { formatFixed } from './format/number.ts';
+import { placesOf } from './step-places.ts';
+
+export interface SliderProps {
+    value: number;
+    onValueChange(value: number): void;
+    min: number;
+    max: number;
+    step?: number;
+    /* Places after the separator, always shown. Defaults to the places `step` is written with. */
+    decimals?: number;
+    /* Printed right after the number, such as `px` or `%`. */
+    unit?: string;
+    /* Shown above the track and read as the slider's name. */
+    label: string;
+    disabled?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+/* 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 }: SliderProps) {
+    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 (
+        <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)}
+        >
+            <div className="flex items-baseline justify-between gap-3 text-xs">
+                <span id={labelId} className="min-w-0 truncate text-text">
+                    {label}
+                </span>
+                {/* The thumb already says the value through `aria-valuetext`. */}
+                <span aria-hidden className="shrink-0 text-text-muted tabular-nums">
+                    {reading}
+                    {unit}
+                </span>
+            </div>
+            {/* The padding gives the thumb room at either end; Base UI leaves it out of the pointer's position. */}
+            <BaseSlider.Control className="flex h-5 touch-none items-center px-2 select-none">
+                <BaseSlider.Track className="relative h-1 w-full rounded-full bg-border-strong">
+                    <BaseSlider.Indicator className="rounded-full bg-accent" />
+                    <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"
+                    />
+                </BaseSlider.Track>
+            </BaseSlider.Control>
+        </BaseSlider.Root>
+    );
+}

package/src/Stepper.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { ButtonGroup } from './ButtonGroup.tsx';
 import { formatFixed } from './format/number.ts';
 import { IconButton } from './IconButton.tsx';
+import { placesOf } from './step-places.ts';
 
 export interface StepperProps {
     value: number;
@@ -21,8 +22,6 @@ export interface StepperProps {
     ref?: Ref<HTMLDivElement>;
 }
 
-const placesOf = (step: number): number => String(step).split('.')[1]?.length ?? 0;
-
 /* A number between minus and plus, in one sunken group so the three read as a single control. */
 export function Stepper({ value, onValueChange, min, max, step, decimals = placesOf(step), unit, label, className, ref }: StepperProps) {
     const { t } = useTranslation('ui');

package/src/Toasts.tsx

@@ -82,7 +82,7 @@ function ToastCard<T extends Toast>({ toast, footer, onDismiss }: { toast: T; fo
                 )}
             </span>
             <div className="flex min-w-0 grow flex-col gap-1">
-                <span className="text-sm text-text">{toast.title}</span>
+                <span className="text-sm break-words text-text">{toast.title}</span>
                 {/* Wraps rather than clips: the line under the title is the one that says what went
                    wrong, and a reason cut off at the card's edge is no reason at all. */}
                 {toast.description !== undefined && toast.description !== '' && (

package/src/index.ts

@@ -61,6 +61,7 @@ export { Select, type SelectGroup, type SelectItem, type SelectProps } from './S
 export { Separator, type SeparatorProps } from './Separator.tsx';
 export { ShortcutHints } from './ShortcutHints.tsx';
 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 { Stepper, type StepperProps } from './Stepper.tsx';

package/src/step-places.ts

@@ -0,0 +1,2 @@
+/* The places after the separator that `step` is written with, so a step of 0.1 shows `1,0` and never `1`. */
+export const placesOf = (step: number): number => String(step).split('.')[1]?.length ?? 0;