@datum-cloud/datum-ui 3.7.1 → 3.10.0

package/dist/multi-select/index.mjs

@@ -1 +1 @@
-export { t as MultiSelect } from "../multi-select-BUgx6VZF.mjs";
+export { t as MultiSelect } from "../multi-select-DwcsJdHt.mjs";

package/dist/{multi-select-BUgx6VZF.mjs → multi-select-DwcsJdHt.mjs}

@@ -1,14 +1,17 @@
 import { t as cn } from "./utils-CTIuhCOs.mjs";
+import { n as fieldPlaceholderClassName, r as fieldTriggerClassName, t as fieldIconClassName } from "./field-styles-D-FJatHt.mjs";
 import { t as useControllableState } from "./use-controllable-state-DLeVgbAb.mjs";
-import { n as OptionList, t as useOptionPicker } from "./use-option-picker-CBMU72LU.mjs";
-import { t as ResponsivePopover } from "./responsive-popover-DJYd8lOK.mjs";
+import { n as OptionList, t as useOptionPicker } from "./use-option-picker-DXY2SNnT.mjs";
+import { t as ResponsivePopover } from "./responsive-popover-B_pUxrZ1.mjs";
 import { t as Separator } from "./separator-DNiiN2BN.mjs";
-import { t as LoaderOverlay } from "./loader-overlay-JvB8IQo3.mjs";
-import { t as Badge } from "./badge-D7A6GfWn.mjs";
+import { t as Icon } from "./icon-wrapper-CIk2th6R.mjs";
+import { t as LoaderOverlay } from "./loader-overlay-DP0pvHuG.mjs";
+import { n as useChipMotion, t as MotionBadge } from "./motion-chip-BczV7spP.mjs";
 import { cva } from "class-variance-authority";
 import { CheckIcon, ChevronDown, WandSparkles, XCircle, XIcon } from "lucide-react";
 import * as React from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence } from "motion/react";
 // src/components/features/multi-select/multi-select-options.tsx
 /**
 * Presentational popover command list for the multi-select: the searchable
@@ -88,70 +91,84 @@ function IconAction({ label, onActivate, className, children }) {
 function SelectedBadgeList({ selectedOptions, maxCount, variant, badgeClassName, clickableBadges, isAnimating, animation, onRemove, onClearExtra, onClearAll, onBadgeClick }) {
 	const visibleOptions = selectedOptions.slice(0, maxCount === -1 ? void 0 : maxCount);
 	const overflowCount = maxCount === -1 ? 0 : selectedOptions.length - maxCount;
+	const chipMotion = useChipMotion();
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex w-full items-center justify-between",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-wrap items-center gap-2",
-			children: [visibleOptions.map((option) => {
-				const IconComponent = option.icon;
-				return /* @__PURE__ */ jsxs(Badge, {
-					className: cn(multiSelectVariants({ variant }), "truncate", isAnimating && "animate-bounce", clickableBadges && "cursor-pointer", badgeClassName),
-					style: { animationDuration: `${animation}s` },
-					onClick: (event) => {
-						if (clickableBadges) {
-							event.stopPropagation();
-							event.preventDefault();
-							onBadgeClick?.(option);
-						}
-					},
-					children: [
-						IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: "text-muted-foreground size-3" }),
-						/* @__PURE__ */ jsx("span", {
-							className: "max-w-[120px] truncate",
-							children: option.label
-						}),
-						/* @__PURE__ */ jsx(IconAction, {
-							label: `Remove ${option.label}`,
-							onActivate: () => onRemove(option.value),
-							className: "text-muted-foreground ml-1",
-							children: /* @__PURE__ */ jsx(XCircle, {
-								className: "size-3",
-								"aria-hidden": "true"
+		className: "flex w-full items-center justify-between gap-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "relative flex min-w-0 flex-wrap items-center gap-2",
+			children: /* @__PURE__ */ jsxs(AnimatePresence, {
+				initial: false,
+				mode: "popLayout",
+				children: [visibleOptions.map((option) => {
+					const IconComponent = option.icon;
+					return /* @__PURE__ */ jsxs(MotionBadge, {
+						...chipMotion,
+						className: cn(multiSelectVariants({ variant }), "truncate", isAnimating && "animate-bounce", clickableBadges && "cursor-pointer", badgeClassName),
+						style: { animationDuration: `${animation}s` },
+						onClick: (event) => {
+							if (clickableBadges) {
+								event.stopPropagation();
+								event.preventDefault();
+								onBadgeClick?.(option);
+							}
+						},
+						children: [
+							IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: "text-muted-foreground size-3" }),
+							/* @__PURE__ */ jsx("span", {
+								className: "max-w-[120px] truncate",
+								children: option.label
+							}),
+							/* @__PURE__ */ jsx(IconAction, {
+								label: `Remove ${option.label}`,
+								onActivate: () => onRemove(option.value),
+								className: "text-muted-foreground ml-1",
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: XCircle,
+									size: 12,
+									className: "size-3",
+									"aria-hidden": "true"
+								})
 							})
+						]
+					}, option.value);
+				}), overflowCount > 0 && /* @__PURE__ */ jsxs(MotionBadge, {
+					...chipMotion,
+					className: cn(multiSelectVariants({ variant }), "text-muted-foreground", isAnimating && "animate-bounce"),
+					style: { animationDuration: `${animation}s` },
+					children: [`+ ${overflowCount} more`, /* @__PURE__ */ jsx(IconAction, {
+						label: "Clear extra selected",
+						onActivate: onClearExtra,
+						className: "text-muted-foreground ml-1",
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: XCircle,
+							size: 12,
+							className: "size-3",
+							"aria-hidden": "true"
 						})
-					]
-				}, option.value);
-			}), overflowCount > 0 && /* @__PURE__ */ jsxs(Badge, {
-				className: cn(multiSelectVariants({ variant }), "text-muted-foreground", isAnimating && "animate-bounce"),
-				style: { animationDuration: `${animation}s` },
-				children: [`+ ${overflowCount} more`, /* @__PURE__ */ jsx(IconAction, {
-					label: "Clear extra selected",
-					onActivate: onClearExtra,
-					className: "text-muted-foreground ml-1",
-					children: /* @__PURE__ */ jsx(XCircle, {
-						className: "size-3",
-						"aria-hidden": "true"
-					})
-				})]
-			})]
+					})]
+				}, "overflow")]
+			})
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center justify-between",
+			className: "flex shrink-0 items-center gap-2",
 			children: [
 				/* @__PURE__ */ jsx(IconAction, {
 					label: "Clear all",
 					onActivate: onClearAll,
-					className: "text-muted-foreground mx-2",
-					children: /* @__PURE__ */ jsx(XIcon, {
-						className: "h-4",
+					className: "text-muted-foreground hover:text-foreground rounded-sm",
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: XIcon,
+						size: 14,
+						className: "size-3.5 shrink-0",
 						"aria-hidden": "true"
 					})
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: "bg-border flex h-full min-h-6 w-px",
+					className: "bg-border h-4 w-px",
 					"aria-hidden": "true"
 				}),
-				/* @__PURE__ */ jsx(ChevronDown, {
-					className: "text-muted-foreground mx-2 h-4",
+				/* @__PURE__ */ jsx(Icon, {
+					icon: ChevronDown,
+					className: fieldIconClassName,
 					"aria-hidden": "true"
 				})
 			]
@@ -230,6 +247,7 @@ function MultiSelect({ options, onValueChange, variant, defaultValue = EMPTY_ARR
 			]
 		})]
 	})] }) : void 0;
+	const showBadges = hasSelection && !isLoading && options.length > 0;
 	const triggerJSX = /* @__PURE__ */ jsxs("button", {
 		...rest,
 		type: "button",
@@ -239,8 +257,8 @@ function MultiSelect({ options, onValueChange, variant, defaultValue = EMPTY_ARR
 			onTriggerClick?.(event);
 			setIsPopoverOpen((prev) => !prev);
 		},
-		className: cn("text-input-foreground placeholder:text-input-placeholder", "border-input-border bg-input-background/50 relative flex min-h-10 w-full items-center justify-between rounded-lg border px-2 py-1 text-left text-sm transition-all", "focus-visible:border-input-focus-border focus-visible:shadow-(--input-focus-shadow)", "focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-hidden", (disabled || isLoading) && "cursor-not-allowed opacity-50", className),
-		children: [hasSelection && !isLoading && options.length > 0 ? /* @__PURE__ */ jsx(SelectedBadgeList, {
+		className: cn(fieldTriggerClassName, "relative min-h-10 justify-between py-1", (disabled || isLoading) && "cursor-not-allowed opacity-50", className),
+		children: [showBadges ? /* @__PURE__ */ jsx(SelectedBadgeList, {
 			selectedOptions,
 			maxCount,
 			variant,
@@ -252,16 +270,14 @@ function MultiSelect({ options, onValueChange, variant, defaultValue = EMPTY_ARR
 			onClearExtra: clearExtraOptions,
 			onClearAll: handleClear,
 			onBadgeClick
-		}) : /* @__PURE__ */ jsxs("div", {
-			className: "flex w-full items-center justify-between px-2",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "text-muted-foreground text-sm",
-				children: placeholder
-			}), /* @__PURE__ */ jsx(ChevronDown, {
-				className: "text-muted-foreground mx-1 h-4",
-				"aria-hidden": "true"
-			})]
-		}), isLoading && /* @__PURE__ */ jsx(LoaderOverlay, { className: "rounded-lg" })]
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: cn("min-w-0 flex-1 truncate", fieldPlaceholderClassName),
+			children: placeholder
+		}), /* @__PURE__ */ jsx(Icon, {
+			icon: ChevronDown,
+			className: fieldIconClassName,
+			"aria-hidden": "true"
+		})] }), isLoading && /* @__PURE__ */ jsx(LoaderOverlay, { className: "rounded-lg" })]
 	});
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(ResponsivePopover, {

package/dist/picker/index.mjs

@@ -1,3 +1,3 @@
-import { A as formatInTimezone, B as isDateBearingMode, C as PickerClear, D as PickerCalendar, E as PickerContent, F as zonedDateToIso, H as isTimeBearingMode, I as ALLOWED_STEPS, L as DATE_BEARING_MODES, M as getBrowserTimezone, N as getTimezoneOffset, O as PickerContext, P as isoToZonedDate, R as RANGE_MODES, S as PickerCancel, T as PickerReset, V as isRangeMode, _ as parseTimeString, a as PickerTimezoneIndicator, b as PickerPresets, d as DATE_PRESETS, f as getDefaultPresets, g as isValidTimeString, h as formatTimeLabel, i as PickerTrigger, j as formatTimezoneLabel, k as usePickerContext, l as usePresets, m as dateToYYYYMMDD, o as PickerTimeInput, p as usePickerState, r as formatPickerValue, s as useTimeSlots, t as DateTimeRangePicker, u as DATETIME_PRESETS, v as resolveCommit, w as PickerFooter, x as PickerApply, y as useKeyboardShortcuts, z as TIME_BEARING_MODES } from "../date-time-range-picker-RZX4CS4b.mjs";
-import { a as DateRangePicker, c as getDaysDifference, d as isSameDateRange, f as isSameStringRange, i as DateRangeTimePicker, l as isRangeValid, m as PickerTimezoneSelect, n as TimePicker, o as DatePicker, p as Picker, r as DateTimePicker, s as clampRange, t as TimeRangePicker, u as isSameDate } from "../picker-C0h30DHf.mjs";
+import { A as formatInTimezone, B as isDateBearingMode, C as PickerClear, D as PickerCalendar, E as PickerContent, F as zonedDateToIso, H as isTimeBearingMode, I as ALLOWED_STEPS, L as DATE_BEARING_MODES, M as getBrowserTimezone, N as getTimezoneOffset, O as PickerContext, P as isoToZonedDate, R as RANGE_MODES, S as PickerCancel, T as PickerReset, V as isRangeMode, _ as parseTimeString, a as PickerTimezoneIndicator, b as PickerPresets, d as DATE_PRESETS, f as getDefaultPresets, g as isValidTimeString, h as formatTimeLabel, i as PickerTrigger, j as formatTimezoneLabel, k as usePickerContext, l as usePresets, m as dateToYYYYMMDD, o as PickerTimeInput, p as usePickerState, r as formatPickerValue, s as useTimeSlots, t as DateTimeRangePicker, u as DATETIME_PRESETS, v as resolveCommit, w as PickerFooter, x as PickerApply, y as useKeyboardShortcuts, z as TIME_BEARING_MODES } from "../date-time-range-picker-CqGGJTLS.mjs";
+import { a as DateRangePicker, c as getDaysDifference, d as isSameDateRange, f as isSameStringRange, i as DateRangeTimePicker, l as isRangeValid, m as PickerTimezoneSelect, n as TimePicker, o as DatePicker, p as Picker, r as DateTimePicker, s as clampRange, t as TimeRangePicker, u as isSameDate } from "../picker-BHPtncpv.mjs";
 export { ALLOWED_STEPS, DATETIME_PRESETS, DATE_BEARING_MODES, DATE_PRESETS, DatePicker, DateRangePicker, DateRangeTimePicker, DateTimePicker, DateTimeRangePicker, Picker, PickerApply, PickerCalendar, PickerCancel, PickerClear, PickerContent, PickerContext, PickerFooter, PickerPresets, PickerReset, PickerTimeInput, PickerTimezoneIndicator, PickerTimezoneSelect, PickerTrigger, RANGE_MODES, TIME_BEARING_MODES, TimePicker, TimeRangePicker, clampRange, dateToYYYYMMDD, formatInTimezone, formatPickerValue, formatTimeLabel, formatTimezoneLabel, getBrowserTimezone, getDaysDifference, getDefaultPresets, getTimezoneOffset, isDateBearingMode, isRangeMode, isRangeValid, isSameDate, isSameDateRange, isSameStringRange, isTimeBearingMode, isValidTimeString, isoToZonedDate, parseTimeString, resolveCommit, useKeyboardShortcuts, usePickerContext, usePickerState, usePresets, useTimeSlots, zonedDateToIso };

package/dist/{picker-C0h30DHf.mjs → picker-BHPtncpv.mjs}

@@ -1,6 +1,6 @@
 import { t as cn } from "./utils-CTIuhCOs.mjs";
-import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "./select-jgK6wyXj.mjs";
-import { C as PickerClear, D as PickerCalendar, E as PickerContent, F as zonedDateToIso, H as isTimeBearingMode, P as isoToZonedDate, S as PickerCancel, T as PickerReset, _ as parseTimeString, a as PickerTimezoneIndicator, b as PickerPresets, c as Picker$1, i as PickerTrigger, k as usePickerContext, n as DefaultFooter, o as PickerTimeInput, r as formatPickerValue, w as PickerFooter, x as PickerApply } from "./date-time-range-picker-RZX4CS4b.mjs";
+import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "./select-CGsHf70u.mjs";
+import { C as PickerClear, D as PickerCalendar, E as PickerContent, F as zonedDateToIso, H as isTimeBearingMode, P as isoToZonedDate, S as PickerCancel, T as PickerReset, _ as parseTimeString, a as PickerTimezoneIndicator, b as PickerPresets, c as Picker$1, i as PickerTrigger, k as usePickerContext, n as DefaultFooter, o as PickerTimeInput, r as formatPickerValue, w as PickerFooter, x as PickerApply } from "./date-time-range-picker-CqGGJTLS.mjs";
 import { Clock, Globe } from "lucide-react";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/radio-group/index.mjs

@@ -1 +1 @@
-export { t as RadioGroup, n as RadioGroupItem } from "../radio-group-0RxTmRnF.mjs";
+export { t as RadioGroup, n as RadioGroupItem } from "../radio-group-Boxi2hm0.mjs";

package/dist/radio-group-Boxi2hm0.mjs

@@ -0,0 +1,83 @@
+import { t as cn } from "./utils-CTIuhCOs.mjs";
+import { n as EASE } from "./motion-DOrRbLmy.mjs";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { motion, useReducedMotion } from "motion/react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+// src/components/base/radio-group/radio-group.tsx
+/**
+* The selected value, mirrored from Radix so each item can animate its dot in
+* and out. `null` means there is no datum `RadioGroup` above the item (it was
+* placed in a bare Radix root), in which case the item falls back to Radix's
+* own mount/unmount and does not animate.
+*/
+const RadioGroupValueContext = React.createContext(null);
+function RadioGroup({ ref, className, value: valueProp, defaultValue, onValueChange, ...props }) {
+	const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
+	const value = valueProp ?? uncontrolled;
+	const handleValueChange = React.useCallback((next) => {
+		if (valueProp === void 0) setUncontrolled(next);
+		onValueChange?.(next);
+	}, [onValueChange, valueProp]);
+	return /* @__PURE__ */ jsx(RadioGroupValueContext, {
+		value,
+		children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, {
+			ref,
+			"data-slot": "radio-group",
+			className: cn("grid gap-3", className),
+			value: valueProp,
+			defaultValue,
+			onValueChange: handleValueChange,
+			...props
+		})
+	});
+}
+RadioGroup.displayName = "RadioGroup";
+const DOT_IN = {
+	type: "spring",
+	visualDuration: .2,
+	bounce: .35
+};
+const DOT_OUT = {
+	duration: .1,
+	ease: EASE.out
+};
+/**
+* RadioGroupItem renders the Radix primitive directly (not the shadcn wrapper)
+* so the dot can stay mounted and animate out as well as in. The dot pops in
+* from half size with a small spring and fades out quickly when another option
+* takes the selection. Under reduced motion it only fades.
+*/
+function RadioGroupItem({ ref, className, value, ...props }) {
+	const groupValue = React.use(RadioGroupValueContext);
+	const reduceMotion = Boolean(useReducedMotion());
+	const animated = groupValue !== null;
+	const visible = animated ? groupValue === value : true;
+	return /* @__PURE__ */ jsx(RadioGroupPrimitive.Item, {
+		ref,
+		value,
+		"data-slot": "radio-group-item",
+		className: cn("border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", "transition-[color,box-shadow,transform] duration-[var(--duration-fast)] ease-out active:scale-[0.92] disabled:active:scale-100", className),
+		...props,
+		children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, {
+			forceMount: animated ? true : void 0,
+			"data-slot": "radio-group-indicator",
+			className: "flex size-full items-center justify-center",
+			children: /* @__PURE__ */ jsx(motion.span, {
+				"aria-hidden": true,
+				className: "bg-primary size-2 rounded-full",
+				initial: false,
+				animate: visible ? {
+					scale: 1,
+					opacity: 1
+				} : {
+					scale: reduceMotion ? 1 : .5,
+					opacity: 0
+				},
+				transition: visible && !reduceMotion ? DOT_IN : DOT_OUT
+			})
+		})
+	});
+}
+RadioGroupItem.displayName = "RadioGroupItem";
+export { RadioGroupItem as n, RadioGroup as t };

package/dist/responsive-dropdown/index.mjs

@@ -1 +1 @@
-export { t as ResponsiveDropdown } from "../responsive-dropdown-DsWgpE_i.mjs";
+export { t as ResponsiveDropdown } from "../responsive-dropdown-B9cDUeHt.mjs";

package/dist/{responsive-dropdown-DsWgpE_i.mjs → responsive-dropdown-B9cDUeHt.mjs}

@@ -1,4 +1,4 @@
-import { t as useBreakpoint } from "./use-breakpoint-zY_JYINK.mjs";
+import { t as useBreakpoint } from "./use-breakpoint-Ce5tS4cU.mjs";
 import { t as cn } from "./utils-CTIuhCOs.mjs";
 import { i as useInSheet, t as ResponsiveSheetTrigger } from "./mobile-sheet-1995HYY_.mjs";
 import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "./popover-7YxyP_W0.mjs";

package/dist/responsive-popover/index.mjs

@@ -1 +1 @@
-export { t as ResponsivePopover } from "../responsive-popover-DJYd8lOK.mjs";
+export { t as ResponsivePopover } from "../responsive-popover-B_pUxrZ1.mjs";

package/dist/{responsive-popover-DJYd8lOK.mjs → responsive-popover-B_pUxrZ1.mjs}

@@ -1,4 +1,4 @@
-import { t as useBreakpoint } from "./use-breakpoint-zY_JYINK.mjs";
+import { t as useBreakpoint } from "./use-breakpoint-Ce5tS4cU.mjs";
 import { t as cn } from "./utils-CTIuhCOs.mjs";
 import { i as useInSheet, t as ResponsiveSheetTrigger } from "./mobile-sheet-1995HYY_.mjs";
 import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "./popover-7YxyP_W0.mjs";

package/dist/rich-text-editor/index.mjs

@@ -1,3 +1,3 @@
 import { t as RichTextContent } from "../rich-text-content-BiIIowBU.mjs";
-import { n as useRichTextEditor, t as RichTextEditor } from "../rich-text-editor-ibngjhQV.mjs";
+import { n as useRichTextEditor, t as RichTextEditor } from "../rich-text-editor-CPd_6vdZ.mjs";
 export { RichTextContent, RichTextEditor, useRichTextEditor };

package/dist/{rich-text-editor-ibngjhQV.mjs → rich-text-editor-CPd_6vdZ.mjs}

@@ -1,8 +1,8 @@
 import { t as cn } from "./utils-CTIuhCOs.mjs";
 import { t as Tooltip } from "./tooltip-OIySjJWW.mjs";
-import { t as Button } from "./button-Dj6cKrWj.mjs";
+import { t as Button } from "./button-Cn4KagBO.mjs";
 import { t as Input } from "./input-DsT5qkJn.mjs";
-import { t as ResponsivePopover } from "./responsive-popover-DJYd8lOK.mjs";
+import { t as ResponsivePopover } from "./responsive-popover-B_pUxrZ1.mjs";
 import { t as Icon } from "./icon-wrapper-CIk2th6R.mjs";
 import { BoldIcon, ItalicIcon, LinkIcon, StrikethroughIcon, UnderlineIcon, UnlinkIcon } from "lucide-react";
 import { createContext, use, useCallback, useEffect, useState } from "react";

package/dist/select/index.mjs

@@ -1 +1 @@
-export { t as Select, n as SelectContent, r as SelectGroup, i as SelectItem, a as SelectLabel, o as SelectScrollDownButton, s as SelectScrollUpButton, c as SelectSeparator, l as SelectTrigger, u as SelectValue } from "../select-DemYhwnG.mjs";
+export { t as Select, n as SelectContent, r as SelectGroup, i as SelectItem, a as SelectLabel, o as SelectScrollDownButton, s as SelectScrollUpButton, c as SelectSeparator, l as SelectTrigger, u as SelectValue } from "../select-B0Xlz-wD.mjs";

package/dist/{select-DemYhwnG.mjs → select-B0Xlz-wD.mjs}

@@ -1,5 +1,6 @@
-import { a as SelectLabel$1, c as SelectSeparator$1, i as SelectItem$1, l as SelectTrigger$1, n as SelectContent$1, o as SelectScrollDownButton$1, r as SelectGroup$1, s as SelectScrollUpButton$1, t as Select$1, u as SelectValue$1 } from "./select-jgK6wyXj.mjs";
+import { a as SelectLabel$1, c as SelectSeparator$1, i as SelectItem$1, l as SelectTrigger$1, n as SelectContent$1, o as SelectScrollDownButton$1, r as SelectGroup$1, s as SelectScrollUpButton$1, t as Select$1, u as SelectValue$1 } from "./select-CGsHf70u.mjs";
 import { t as cn } from "./utils-CTIuhCOs.mjs";
+import { r as fieldTriggerClassName } from "./field-styles-D-FJatHt.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 // src/components/base/select/select.tsx
@@ -16,7 +17,7 @@ SelectGroup.displayName = "SelectGroup";
 function SelectTrigger({ ref, className, ...props }) {
 	return /* @__PURE__ */ jsx(SelectTrigger$1, {
 		ref,
-		className: cn("rounded-lg", "bg-input-background/50", "text-input-foreground", "border-input-border", "placeholder:text-input-placeholder", "shadow-none", "focus-visible:ring-0 focus-visible:ring-offset-0", "focus-visible:border-input-focus-border", "focus-visible:shadow-(--input-focus-shadow)", "aria-invalid:border-destructive", className),
+		className: cn(fieldTriggerClassName, "data-[placeholder]:text-input-placeholder", className),
 		...props
 	});
 }

package/dist/{select-jgK6wyXj.mjs → select-CGsHf70u.mjs}

@@ -25,11 +25,16 @@ function SelectValue({ ...props }) {
 function SelectTrigger({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
 		"data-slot": "select-trigger",
-		className: cn("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive rounded-md border bg-transparent py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "flex h-auto min-h-10 w-full items-center justify-between px-3 text-sm font-medium", className),
+		className: cn("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive rounded-md border bg-transparent py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "flex h-auto min-h-10 w-full items-center justify-between gap-2 px-3 text-sm font-normal", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
 			asChild: true,
-			children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" })
+			children: /* @__PURE__ */ jsx(ChevronDownIcon, {
+				className: "text-muted-foreground size-4 shrink-0",
+				size: 16,
+				strokeWidth: 1,
+				absoluteStrokeWidth: true
+			})
 		})]
 	});
 }

package/dist/spinner/index.mjs

@@ -1 +1 @@
-export { t as Spinner } from "../spinner-DjEpx6Q3.mjs";
+export { t as Spinner } from "../spinner-DSlDJdWl.mjs";

package/dist/spinner-DSlDJdWl.mjs

@@ -0,0 +1,23 @@
+import { t as cn } from "./utils-CTIuhCOs.mjs";
+import { t as SpinnerIcon } from "./spinner.icon-BiUnMAxw.mjs";
+import { jsx } from "react/jsx-runtime";
+// src/components/base/spinner/spinner.tsx
+/**
+* Standalone loading indicator, announced to assistive tech as a status.
+*
+* Built on `SpinnerIcon`. It differs in three ways: it is `size-4` unless a
+* size class is passed, it carries `role="status"`, and its colour comes from
+* `className` (default `text-primary`), so `<Spinner className="text-white" />`
+* recolours the arc and its track together.
+*/
+function Spinner({ className, ...props }) {
+	return /* @__PURE__ */ jsx(SpinnerIcon, {
+		role: "status",
+		"aria-label": "Loading",
+		size: null,
+		indicatorClassName: "",
+		className: cn("text-primary size-4", className),
+		...props
+	});
+}
+export { Spinner as t };

package/dist/spinner.icon-BiUnMAxw.mjs

@@ -0,0 +1,104 @@
+import { t as cn } from "./utils-CTIuhCOs.mjs";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+// src/components/icons/spinner.icon.tsx
+const spinnerVariants = cva("shrink-0", {
+	variants: { size: {
+		"xs": "size-3",
+		"sm": "size-4",
+		"md": "size-6",
+		"lg": "size-8",
+		"xl": "size-10",
+		"2xl": "size-12",
+		"3xl": "size-14",
+		"4xl": "size-16",
+		"5xl": "size-18",
+		"6xl": "size-20",
+		"7xl": "size-22",
+		"8xl": "size-24",
+		"9xl": "size-26"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** Seconds per full turn. Quick enough that waiting feels shorter. */
+const REVOLUTION = .8;
+const CENTER = 32;
+const RADIUS = 29;
+/**
+* The indicator: an arc running clockwise from 12 o'clock. Its tail sits at
+* the top and its head at the far end, so the head leads as the spinner turns.
+*/
+const ARC_DEGREES = 150;
+const ARC_END = {
+	x: CENTER + RADIUS * Math.sin(ARC_DEGREES * Math.PI / 180),
+	y: CENTER - RADIUS * Math.cos(ARC_DEGREES * Math.PI / 180)
+};
+const ARC_PATH = `M ${CENTER} 3 A ${RADIUS} ${RADIUS} 0 0 1 ${ARC_END.x} ${ARC_END.y}`;
+/** Track opacity when it follows the indicator colour. */
+const TRACK_OPACITY = .18;
+/**
+* A loading spinner: a faint full-circle track with an arc that fades from a
+* transparent tail to a solid, rounded head, turning clockwise.
+*
+* The rotation runs through Motion as a full `transform` keyframe animation,
+* which Motion hands to the Web Animations API. That keeps it on the
+* compositor, so the spinner stays smooth while the main thread is busy doing
+* whatever the user is waiting for. It keeps spinning under reduced motion:
+* it is essential loading feedback, not decoration.
+*/
+function SpinnerIcon({ size, className, trackClassName, indicatorClassName = "text-primary", ...props }) {
+	const gradientId = `spinner-tail-${React.useId().replace(/[^\w-]/g, "")}`;
+	return /* @__PURE__ */ jsx(motion.svg, {
+		viewBox: "0 0 64 64",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		"data-slot": "spinner",
+		className: cn(spinnerVariants({ size }), className),
+		animate: { transform: ["rotate(0deg)", "rotate(360deg)"] },
+		transition: {
+			duration: REVOLUTION,
+			ease: "linear",
+			repeat: Infinity
+		},
+		...props,
+		children: /* @__PURE__ */ jsxs("g", {
+			className: indicatorClassName,
+			children: [
+				/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+					id: gradientId,
+					gradientUnits: "userSpaceOnUse",
+					x1: CENTER,
+					y1: 3,
+					x2: ARC_END.x,
+					y2: ARC_END.y,
+					children: [/* @__PURE__ */ jsx("stop", {
+						offset: "0",
+						stopColor: "currentColor",
+						stopOpacity: "0"
+					}), /* @__PURE__ */ jsx("stop", {
+						offset: "1",
+						stopColor: "currentColor"
+					})]
+				}) }),
+				/* @__PURE__ */ jsx("circle", {
+					cx: CENTER,
+					cy: CENTER,
+					r: RADIUS,
+					stroke: "currentColor",
+					strokeWidth: "5",
+					opacity: trackClassName ? void 0 : TRACK_OPACITY,
+					className: trackClassName
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: ARC_PATH,
+					stroke: `url(#${gradientId})`,
+					strokeWidth: "5",
+					strokeLinecap: "round"
+				})
+			]
+		})
+	});
+}
+export { SpinnerIcon as t };

package/dist/switch/index.mjs

@@ -1 +1 @@
-export { t as Switch } from "../switch-CWvVN9ea.mjs";
+export { t as Switch } from "../switch-IduVwiPZ.mjs";