@adecore/ui 0.21.2 → 0.22.1

package/dist/Segmented.d.ts

@@ -11,7 +11,8 @@ export interface SegmentedProps<T extends string> {
     options: readonly SegmentedOption<T>[];
     label: string;
     disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
-export declare function Segmented<T extends string>({ value, onValueChange, options, label, disabled, className, ref }: SegmentedProps<T>): import("react").JSX.Element;
+export declare function Segmented<T extends string>({ value, onValueChange, options, label, disabled, orientation, className, ref }: SegmentedProps<T>): import("react").JSX.Element;

package/dist/Segmented.js

@@ -1,7 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { Icon } from './Icon.js';
-/* One of a few options side by side in one sunken track, the picked one lifted out of it. */
-export function Segmented({ value, onValueChange, options, label, disabled, className, ref }) {
-    return (_jsx("div", { ref: ref, className: clsx('flex h-8 w-fit items-center rounded-lg bg-surface-sunken p-0.5 text-xs font-medium', className), role: "radiogroup", "aria-label": label, children: options.map((option) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": value === option.id, disabled: disabled, className: clsx('flex h-7 items-center gap-1.5 rounded-md px-3 transition-colors disabled:opacity-50', value === option.id ? 'bg-surface-raised text-text shadow-raised' : 'text-text-muted hover:text-text'), onClick: () => onValueChange(option.id), children: [option.icon && _jsx(Icon, { icon: option.icon, size: 14 }), option.label] }, option.id))) }));
+const STEPS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+/*
+ * One of a few options side by side in one sunken track, the picked one lifted out of it. A radio
+ * group: one tab stop, and the arrows pick and focus the next option, around the ends.
+ */
+export function Segmented({ value, onValueChange, options, label, disabled, orientation = 'horizontal', className, ref }) {
+    const vertical = orientation === 'vertical';
+    const picked = options.findIndex((option) => option.id === value);
+    const stop = picked === -1 ? 0 : picked;
+    function move(event, index) {
+        const next = event.key in STEPS
+            ? (index + STEPS[event.key] + options.length) % options.length
+            : event.key === 'Home'
+                ? 0
+                : event.key === 'End'
+                    ? options.length - 1
+                    : null;
+        if (next === null) {
+            return;
+        }
+        event.preventDefault();
+        onValueChange(options[next].id);
+        event.currentTarget.parentElement?.querySelectorAll('[role="radio"]')[next]?.focus();
+    }
+    return (_jsx("div", { ref: ref, className: clsx('flex rounded-lg bg-surface-sunken p-0.5 text-xs font-medium', vertical ? 'w-full flex-col items-stretch gap-0.5' : 'min-h-8 w-fit items-center', className), role: "radiogroup", "aria-label": label, "aria-orientation": vertical ? 'vertical' : undefined, children: options.map((option, index) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": value === option.id, tabIndex: index === stop ? 0 : -1, disabled: disabled, className: clsx('flex min-h-7 items-center gap-1.5 rounded-md px-3 py-1 text-left transition-colors disabled:opacity-50', value === option.id ? 'bg-surface-raised text-text shadow-raised' : 'text-text-muted hover:text-text'), onClick: () => onValueChange(option.id), onKeyDown: (event) => move(event, index), children: [option.icon && _jsx(Icon, { icon: option.icon, size: 14, className: "shrink-0" }), option.label] }, option.id))) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.21.2",
+  "version": "0.22.1",
   "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",
@@ -85,7 +85,6 @@
     "@types/react-dom": "^19.3.0",
     "i18next": "^26.4.2",
     "opentype.js": "2.0.0",
-    "oxc-parser": "^0.151.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15",

package/src/Segmented.tsx

@@ -1,4 +1,4 @@
-import type { Ref } from 'react';
+import type { KeyboardEvent, Ref } from 'react';
 import clsx from 'clsx';
 import type { LucideIcon } from 'lucide-react';
 import { Icon } from './Icon.tsx';
@@ -16,33 +16,68 @@ export interface SegmentedProps<T extends string> {
     /* The accessible name of the group. */
     label: string;
     disabled?: boolean;
+    /* `vertical` stacks the options in a column as wide as its container, for labels too long to stand side by side. */
+    orientation?: 'horizontal' | 'vertical';
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
 
-/* One of a few options side by side in one sunken track, the picked one lifted out of it. */
-export function Segmented<T extends string>({ value, onValueChange, options, label, disabled, className, ref }: SegmentedProps<T>) {
+const STEPS: Readonly<Record<string, number>> = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+
+/*
+ * One of a few options side by side in one sunken track, the picked one lifted out of it. A radio
+ * group: one tab stop, and the arrows pick and focus the next option, around the ends.
+ */
+export function Segmented<T extends string>({ value, onValueChange, options, label, disabled, orientation = 'horizontal', className, ref }: SegmentedProps<T>) {
+    const vertical = orientation === 'vertical';
+    const picked = options.findIndex((option) => option.id === value);
+    const stop = picked === -1 ? 0 : picked;
+
+    function move(event: KeyboardEvent<HTMLButtonElement>, index: number) {
+        const next =
+            event.key in STEPS
+                ? (index + STEPS[event.key]! + options.length) % options.length
+                : event.key === 'Home'
+                  ? 0
+                  : event.key === 'End'
+                    ? options.length - 1
+                    : null;
+        if (next === null) {
+            return;
+        }
+        event.preventDefault();
+        onValueChange(options[next]!.id);
+        event.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>('[role="radio"]')[next]?.focus();
+    }
+
     return (
         <div
             ref={ref}
-            className={clsx('flex h-8 w-fit items-center rounded-lg bg-surface-sunken p-0.5 text-xs font-medium', className)}
+            className={clsx(
+                'flex rounded-lg bg-surface-sunken p-0.5 text-xs font-medium',
+                vertical ? 'w-full flex-col items-stretch gap-0.5' : 'min-h-8 w-fit items-center',
+                className
+            )}
             role="radiogroup"
             aria-label={label}
+            aria-orientation={vertical ? 'vertical' : undefined}
         >
-            {options.map((option) => (
+            {options.map((option, index) => (
                 <button
                     key={option.id}
                     type="button"
                     role="radio"
                     aria-checked={value === option.id}
+                    tabIndex={index === stop ? 0 : -1}
                     disabled={disabled}
                     className={clsx(
-                        'flex h-7 items-center gap-1.5 rounded-md px-3 transition-colors disabled:opacity-50',
+                        'flex min-h-7 items-center gap-1.5 rounded-md px-3 py-1 text-left transition-colors disabled:opacity-50',
                         value === option.id ? 'bg-surface-raised text-text shadow-raised' : 'text-text-muted hover:text-text'
                     )}
                     onClick={() => onValueChange(option.id)}
+                    onKeyDown={(event) => move(event, index)}
                 >
-                    {option.icon && <Icon icon={option.icon} size={14} />}
+                    {option.icon && <Icon icon={option.icon} size={14} className="shrink-0" />}
                     {option.label}
                 </button>
             ))}