@nsaa/core 0.1.0-alpha.5 → 0.1.0-alpha.6

package/dist/date-range-picker/date-range-picker.d.ts

@@ -5,9 +5,9 @@ import { Locale, Matcher } from "react-day-picker";
 export type DateRangePickerLabels = {
   /** Trigger text when there is no range. */
   placeholder: string;
-  /** The presetsOnly option that opens the calendar. */
+  /** The radio for a range that matches no preset; in presetsOnly it opens the calendar. */
   custom: string;
-  /** The presets listbox's name. */
+  /** The presets radio group's name. */
   presets: string;
   /** The panel's name (Popover) and the Drawer's title. */
   title: string;

package/dist/date-range-picker/date-range-picker.js

@@ -10,11 +10,13 @@ import { localeWeekStart, matchPreset, presets, todayIn } from "./presets.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useReducedMotion, useReducedMotionConfig } from "motion/react";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
 // src/date-range-picker/date-range-picker.tsx
 const DEFAULT_LABELS = {
 	placeholder: "Pick a date range",
 	custom: "Custom…",
-	presets: "Presets",
+	presets: "Period",
 	title: "Date range"
 };
 const DEFAULT_PRESETS = Object.values(presets);
@@ -90,55 +92,28 @@ function useMedia(query) {
 		return () => list.removeEventListener("change", onChange);
 	}, () => window.matchMedia(query).matches, () => false);
 }
-/** Presets as a listbox: roving focus, arrows (along the orientation, RTL-aware), Home, End, Enter. */
-function PresetList({ options, selectedId, orientation, label, onPick }) {
-	const baseId = React.useId();
-	const refs = React.useRef([]);
-	const selected = options.findIndex((o) => o.id === selectedId);
-	const [active, setActive] = React.useState(Math.max(selected, 0));
-	const move = (index) => {
-		setActive(index);
-		refs.current[index]?.focus();
-	};
-	const onKeyDown = (event) => {
-		const rtl = event.currentTarget.closest("[dir]")?.getAttribute("dir") === "rtl";
-		const vertical = orientation === "vertical";
-		const next = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight";
-		const prev = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
-		const last = options.length - 1;
-		const option = options[active];
-		if (event.key === next) move(Math.min(active + 1, last));
-		else if (event.key === prev) move(Math.max(active - 1, 0));
-		else if (event.key === "Home") move(0);
-		else if (event.key === "End") move(last);
-		else if (event.key === "Enter" || event.key === " ") {
-			if (option && !option.disabled) onPick(option.id);
-		} else return;
-		event.preventDefault();
-	};
-	return /* @__PURE__ */ jsx("div", {
-		role: "listbox",
+/**
+* Presets on Base UI Radio Group (#159): one tab stop, arrows move the checked radio. The checked
+* radio is only a draft (the calendar previews it); a click, Space (Base UI turns it into a click)
+* or Enter applies it.
+*/
+function PresetList({ options, value, orientation, label, onDraft, onPick }) {
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		value: value ?? null,
+		onValueChange: (next) => onDraft(next),
 		"aria-label": label,
-		"aria-orientation": orientation,
 		"data-slot": "date-range-picker-presets",
 		"data-orientation": orientation,
 		className: cn("flex gap-1 p-2", orientation === "vertical" ? "w-40 shrink-0 flex-col" : "overflow-x-auto border-b border-border"),
-		children: options.map((option, index) => /* @__PURE__ */ jsx("div", {
-			ref: (el) => {
-				refs.current[index] = el;
-			},
-			id: `${baseId}-${option.id}`,
-			role: "option",
-			tabIndex: index === active ? 0 : -1,
-			"aria-selected": option.id === selectedId,
-			"aria-disabled": option.disabled || void 0,
+		children: options.map((option) => /* @__PURE__ */ jsx(Radio.Root, {
+			value: option.id,
+			disabled: option.disabled,
 			"data-slot": "date-range-picker-preset",
-			onFocus: () => setActive(index),
-			onKeyDown,
-			onClick: () => {
-				if (!option.disabled) onPick(option.id);
+			onClick: () => onPick(option.id),
+			onKeyDown: (event) => {
+				if (event.key === "Enter") onPick(option.id);
 			},
-			className: cn("flex cursor-default items-center rounded-md text-sm whitespace-nowrap text-foreground outline-hidden select-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-selected:bg-muted aria-selected:font-medium", orientation === "vertical" ? "min-h-8 px-2 pointer-coarse:min-h-11" : "h-7 shrink-0 border border-border px-2.5 pointer-coarse:h-11"),
+			className: cn("flex cursor-default items-center rounded-md text-start text-sm whitespace-nowrap text-foreground outline-hidden select-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 data-checked:bg-muted data-checked:font-medium data-disabled:pointer-events-none data-disabled:opacity-50", orientation === "vertical" ? "min-h-8 px-2 pointer-coarse:min-h-11" : "h-7 shrink-0 border border-border px-2.5 pointer-coarse:h-11"),
 			children: option.label
 		}, option.id))
 	});
@@ -154,6 +129,7 @@ function DateRangePicker({ value: valueProp, defaultValue = null, onValueChange,
 	const [open, setOpen] = React.useState(false);
 	const [view, setView] = React.useState("calendar");
 	const [draft, setDraft] = React.useState(null);
+	const [presetDraft, setPresetDraft] = React.useState();
 	const [axes, setAxes] = React.useState({});
 	const [announcement, setAnnouncement] = React.useState("");
 	const wide = useContainerWide(rootRef);
@@ -197,6 +173,7 @@ function DateRangePicker({ value: valueProp, defaultValue = null, onValueChange,
 			setView(presetsOnly ? "list" : "calendar");
 		}
 		setDraft(null);
+		setPresetDraft(next ? matched?.id ?? CUSTOM : void 0);
 		setOpen(next);
 	};
 	const apply = (range, picked) => {
@@ -214,6 +191,7 @@ function DateRangePicker({ value: valueProp, defaultValue = null, onValueChange,
 	};
 	const onDay = (_range, day) => {
 		clearTimeout(timer.current);
+		setPresetDraft(CUSTOM);
 		if (!draft || draft.to) {
 			setDraft({ from: day });
 			return;
@@ -239,10 +217,20 @@ function DateRangePicker({ value: valueProp, defaultValue = null, onValueChange,
 		};
 	});
 	const pickPreset = (presetId) => {
-		if (presetId === CUSTOM) return setView("calendar");
+		if (presetId === CUSTOM) {
+			if (presetsOnly) return setView("calendar");
+			panelRef.current?.querySelector("button[data-day][tabindex=\"0\"]")?.focus();
+			return;
+		}
 		const preset = presetList.find((p) => p.id === presetId);
 		if (preset) apply(preset.range(today, options), preset);
 	};
+	const presetChoices = [...presetOptions, {
+		id: CUSTOM,
+		label: labels.custom
+	}];
+	const previewPreset = presetList.find((p) => p.id === presetDraft);
+	const previewed = previewPreset ? previewPreset.range(today, options) : void 0;
 	const matchers = [
 		...min ? [{ before: min }] : [],
 		...max ? [{ after: max }] : [],
@@ -252,13 +240,11 @@ function DateRangePicker({ value: valueProp, defaultValue = null, onValueChange,
 	const defaultMonth = months === 2 ? new Date(anchor.getFullYear(), anchor.getMonth() - 1, 1) : anchor;
 	const narrow = months === 1;
 	const panel = view === "list" ? /* @__PURE__ */ jsx(PresetList, {
-		options: [...presetOptions, {
-			id: CUSTOM,
-			label: labels.custom
-		}],
-		selectedId: matched?.id ?? (value ? CUSTOM : void 0),
+		options: presetChoices,
+		value: presetDraft,
 		orientation: "vertical",
 		label: labels.presets,
+		onDraft: setPresetDraft,
 		onPick: pickPreset
 	}) : /* @__PURE__ */ jsxs("div", {
 		ref: panelRef,
@@ -267,16 +253,17 @@ function DateRangePicker({ value: valueProp, defaultValue = null, onValueChange,
 		children: [!presetsOnly && presetOptions.length > 0 && /* @__PURE__ */ jsx("div", {
 			className: cn(!narrow && "border-e border-border"),
 			children: /* @__PURE__ */ jsx(PresetList, {
-				options: presetOptions,
-				selectedId: matched?.id,
+				options: presetChoices,
+				value: presetDraft,
 				orientation: narrow ? "horizontal" : "vertical",
 				label: labels.presets,
+				onDraft: setPresetDraft,
 				onPick: pickPreset
 			})
 		}), /* @__PURE__ */ jsx(Calendar, {
 			mode: "range",
 			locale: calendarLocale,
-			selected: draft ?? value ?? void 0,
+			selected: draft ?? previewed ?? value ?? void 0,
 			onSelect: onDay,
 			numberOfMonths: months,
 			showOutsideDays: months === 1,

package/dist/progress/progress.js

@@ -22,7 +22,7 @@ function ProgressTrack({ className, ...props }) {
 function ProgressIndicator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Progress.Indicator, {
 		"data-slot": "progress-indicator",
-		className: cn("h-full bg-primary transition-all", className),
+		className: cn("h-full bg-(--nsaa-color-brand-foreground) transition-all", className),
 		...props
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nsaa/core",
-  "version": "0.1.0-alpha.5",
+  "version": "0.1.0-alpha.6",
   "description": "Nsaa core components: accessible, token-driven, animated to the Nsaa feel spec.",
   "license": "MIT",
   "type": "module",
@@ -53,7 +53,7 @@
     "tailwind-merge": "^3.7.0",
     "tailwind-variants": "^3.3.1",
     "uisfx": "0.4.0",
-    "@nsaa/tokens": "^0.1.0-alpha.5"
+    "@nsaa/tokens": "^0.1.0-alpha.6"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^7.0.1",