beez-ui 2.7.0 → 3.0.0

package/dist/components/select.js

@@ -1,520 +1,188 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
-/**
-* Arc's Select (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) as beez-ui's composable Radix select:
-* Arc's trigger, whose hover, press and open states answer in color only so the anchored list never shifts, and its
-* raised list with option rows and an end check, on Arc's tokens. It keeps every subcomponent, prop and `data-slot`
-* of the previous API and beez-ui's option entrance, check pop and chevron rotation.
-*/
-import * as React from "react";
-import { Select as SelectPrimitive } from "radix-ui";
-import { SELECT_COLLISION_PADDING_PX } from "../constants/select.js";
-import { GlideSlot } from "../motion/glide-slot.js";
-import { MotionSlot } from "../motion/motion-slot.js";
+import { SELECT_DEFAULT_PLACEHOLDER } from "../constants/select.js";
 import { cn } from "../lib/utils.js";
-import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
+import { Field, useFieldAria } from "./field.js";
+import { Select as SelectRoot, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./primitives/select.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function Select(t0) {
-	const $ = _c(4);
-	let props;
-	if ($[0] !== t0) {
-		({...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-	} else {
-		props = $[1];
-	}
-	let t1;
-	if ($[2] !== props) {
-		t1 = /* @__PURE__ */ _jsx(SelectPrimitive.Root, {
-			"data-slot": "select",
-			...props
-		});
-		$[2] = props;
-		$[3] = t1;
-	} else {
-		t1 = $[3];
-	}
-	return t1;
-}
-function SelectGroup(t0) {
-	const $ = _c(8);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
-	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("scroll-my-1.5", className);
-		$[3] = className;
-		$[4] = t1;
-	} else {
-		t1 = $[4];
-	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(SelectPrimitive.Group, {
-			"data-slot": "select-group",
-			className: t1,
-			...props
-		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
-	} else {
-		t2 = $[7];
-	}
-	return t2;
-}
-function SelectValue(t0) {
-	const $ = _c(4);
-	let props;
-	if ($[0] !== t0) {
-		({...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-	} else {
-		props = $[1];
-	}
-	let t1;
-	if ($[2] !== props) {
-		t1 = /* @__PURE__ */ _jsx(SelectPrimitive.Value, {
-			"data-slot": "select-value",
-			...props
-		});
-		$[2] = props;
-		$[3] = t1;
-	} else {
-		t1 = $[3];
-	}
-	return t1;
-}
-/**
-* Renders Arc's selection control: `default` matches the height of `Input` and `Button`, `sm` their small size.
-* Hover only answers on fine pointers, keyboard focus draws the shared outline, and `aria-invalid` turns the border
-* to the danger color.
-* @param props - Primitive properties, the `size` and optional consumer overrides.
-* @returns The styled primitive with its original interaction contract.
-*/
-function SelectTrigger(t0) {
-	const $ = _c(13);
-	let children;
-	let className;
-	let props;
-	let t1;
-	if ($[0] !== t0) {
-		({className, size: t1, children, ...props} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
-		$[4] = t1;
-	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
-		t1 = $[4];
-	}
-	const size = t1 === undefined ? "default" : t1;
-	let t2;
-	if ($[5] !== className) {
-		t2 = cn("flex w-fit cursor-pointer items-center justify-between gap-3 rounded-(--radius-control) border border-border bg-surface px-3 text-left text-sm whitespace-nowrap text-foreground outline-none select-none transition-[color,background-color,border-color,box-shadow] duration-(--duration-fast) ease-(--ease-standard) motion-reduce:transition-none hover-fine:not-disabled:not-aria-invalid:border-border-strong hover-fine:not-disabled:bg-surface-muted active:not-disabled:not-aria-invalid:border-border-strong active:not-disabled:bg-surface-muted data-[state=open]:not-aria-invalid:border-border-strong data-[state=open]:bg-surface-muted focus-visible:not-aria-invalid:border-border-strong disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger data-placeholder:text-text-muted data-[size=default]:min-h-(--control-height-md) data-[size=sm]:min-h-(--control-height-sm) data-[state=open]:*:data-[slot=select-icon]:rotate-180 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
-		$[5] = className;
-		$[6] = t2;
-	} else {
-		t2 = $[6];
-	}
-	let t3;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ _jsx(SelectPrimitive.Icon, {
-			asChild: true,
-			children: /* @__PURE__ */ _jsx(MotionSlot, {
-				kind: "rotate",
-				children: /* @__PURE__ */ _jsx(ChevronDownIcon, {
-					"data-slot": "select-icon",
-					strokeWidth: 1.75,
-					className: "pointer-events-none size-4 text-text-muted"
-				})
-			})
-		});
-		$[7] = t3;
-	} else {
-		t3 = $[7];
-	}
-	let t4;
-	if ($[8] !== children || $[9] !== props || $[10] !== size || $[11] !== t2) {
-		t4 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "field",
-			children: /* @__PURE__ */ _jsxs(SelectPrimitive.Trigger, {
-				"data-slot": "select-trigger",
-				"data-size": size,
-				className: t2,
-				...props,
-				children: [children, t3]
-			})
-		});
-		$[8] = children;
-		$[9] = props;
-		$[10] = size;
-		$[11] = t2;
-		$[12] = t4;
-	} else {
-		t4 = $[12];
-	}
-	return t4;
-}
 /**
-* Renders Arc's raised option list, at least twelve rem wide so options stay readable. With `position="popper"` it
-* grows from the trigger edge, matches the trigger width, keeps 12px from the viewport edges and caps its height at
-* 20rem.
-* @param props - Primitive properties and optional consumer overrides.
-* @returns The styled primitive with its original interaction contract.
+* A compact choice field with a keyboard friendly list, controlled with `value` and `onValueChange` or uncontrolled
+* with `defaultValue`; pass `name` to submit it with a form.
+* @param props - Label, options, optional copy and layout, and Radix select root properties.
+* @returns The labelled field.
 */
-function SelectContent(t0) {
-	const $ = _c(23);
-	let children;
+function Select(t0) {
+	const $ = _c(49);
+	let ariaDescribedBy;
+	let ariaInvalid;
 	let className;
-	let props;
+	let description;
+	let error;
+	let id;
+	let label;
+	let options;
+	let ref;
+	let rootProps;
+	let size;
 	let t1;
 	let t2;
-	let t3;
+	let triggerClassName;
 	if ($[0] !== t0) {
-		({className, children, position: t1, align: t2, collisionPadding: t3, ...props} = t0);
+		({label, options, placeholder: t1, description, error, id, className, hideLabel: t2, size, triggerClassName, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, ref, ...rootProps} = t0);
 		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
-		$[4] = t1;
-		$[5] = t2;
-		$[6] = t3;
-	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
-		t1 = $[4];
-		t2 = $[5];
-		t3 = $[6];
-	}
-	const position = t1 === undefined ? "item-aligned" : t1;
-	const align = t2 === undefined ? "center" : t2;
-	const collisionPadding = t3 === undefined ? SELECT_COLLISION_PADDING_PX : t3;
-	const t4 = position === "item-aligned";
-	const t5 = position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1";
-	let t6;
-	if ($[7] !== className || $[8] !== t5) {
-		t6 = cn("relative z-50 max-h-[min(20rem,var(--radix-select-content-available-height))] min-w-48 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-[calc(var(--radius-control)+2px)] border border-border bg-surface-raised p-1.5 text-foreground shadow-(--shadow-floating)", t5, className);
-		$[7] = className;
-		$[8] = t5;
-		$[9] = t6;
-	} else {
-		t6 = $[9];
-	}
-	let t7;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = /* @__PURE__ */ _jsx(SelectScrollUpButton, {});
-		$[10] = t7;
-	} else {
-		t7 = $[10];
-	}
+		$[1] = ariaDescribedBy;
+		$[2] = ariaInvalid;
+		$[3] = className;
+		$[4] = description;
+		$[5] = error;
+		$[6] = id;
+		$[7] = label;
+		$[8] = options;
+		$[9] = ref;
+		$[10] = rootProps;
+		$[11] = size;
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = triggerClassName;
+	} else {
+		ariaDescribedBy = $[1];
+		ariaInvalid = $[2];
+		className = $[3];
+		description = $[4];
+		error = $[5];
+		id = $[6];
+		label = $[7];
+		options = $[8];
+		ref = $[9];
+		rootProps = $[10];
+		size = $[11];
+		t1 = $[12];
+		t2 = $[13];
+		triggerClassName = $[14];
+	}
+	const placeholder = t1 === undefined ? SELECT_DEFAULT_PLACEHOLDER : t1;
+	const hideLabel = t2 === undefined ? false : t2;
+	let t3;
+	if ($[15] !== ariaDescribedBy || $[16] !== ariaInvalid || $[17] !== description || $[18] !== error || $[19] !== id) {
+		t3 = {
+			id,
+			description,
+			error,
+			"aria-invalid": ariaInvalid,
+			"aria-describedby": ariaDescribedBy
+		};
+		$[15] = ariaDescribedBy;
+		$[16] = ariaInvalid;
+		$[17] = description;
+		$[18] = error;
+		$[19] = id;
+		$[20] = t3;
+	} else {
+		t3 = $[20];
+	}
+	const aria = useFieldAria(t3);
+	const t4 = aria.controlId;
+	let t5;
+	if ($[21] !== triggerClassName) {
+		t5 = cn("w-full min-w-0", triggerClassName);
+		$[21] = triggerClassName;
+		$[22] = t5;
+	} else {
+		t5 = $[22];
+	}
+	const t6 = aria["aria-describedby"];
+	const t7 = aria["aria-invalid"];
 	let t8;
-	if ($[11] !== children || $[12] !== position) {
-		t8 = /* @__PURE__ */ _jsx(SelectPrimitive.Viewport, {
-			"data-position": position,
-			className: "py-0.5 data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
-			children
-		});
-		$[11] = children;
-		$[12] = position;
-		$[13] = t8;
+	if ($[23] !== placeholder) {
+		t8 = /* @__PURE__ */ _jsx(SelectValue, { placeholder });
+		$[23] = placeholder;
+		$[24] = t8;
 	} else {
-		t8 = $[13];
+		t8 = $[24];
 	}
 	let t9;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = /* @__PURE__ */ _jsx(SelectScrollDownButton, {});
-		$[14] = t9;
-	} else {
-		t9 = $[14];
-	}
-	let t10;
-	if ($[15] !== align || $[16] !== collisionPadding || $[17] !== position || $[18] !== props || $[19] !== t4 || $[20] !== t6 || $[21] !== t8) {
-		t10 = /* @__PURE__ */ _jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "surface",
-			children: /* @__PURE__ */ _jsx(GlideSlot, {
-				preset: "menu",
-				children: /* @__PURE__ */ _jsxs(SelectPrimitive.Content, {
-					"data-slot": "select-content",
-					"data-align-trigger": t4,
-					className: t6,
-					position,
-					align,
-					collisionPadding,
-					...props,
-					children: [
-						t7,
-						t8,
-						t9
-					]
-				})
-			})
-		}) });
-		$[15] = align;
-		$[16] = collisionPadding;
-		$[17] = position;
-		$[18] = props;
-		$[19] = t4;
-		$[20] = t6;
-		$[21] = t8;
-		$[22] = t10;
-	} else {
-		t10 = $[22];
-	}
-	return t10;
-}
-/**
-* Renders a muted option group label aligned with the option text.
-* @param props - Primitive properties and optional consumer overrides.
-* @returns The styled primitive with its original interaction contract.
-*/
-function SelectLabel(t0) {
-	const $ = _c(8);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
-	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("px-[11px] py-1.5 text-xs font-medium text-text-muted", className);
-		$[3] = className;
-		$[4] = t1;
-	} else {
-		t1 = $[4];
-	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(SelectPrimitive.Label, {
-			"data-slot": "select-label",
-			className: t1,
-			...props
+	if ($[25] !== aria.controlId || $[26] !== ref || $[27] !== size || $[28] !== t5 || $[29] !== t6 || $[30] !== t7 || $[31] !== t8) {
+		t9 = /* @__PURE__ */ _jsx(SelectTrigger, {
+			ref,
+			id: t4,
+			size,
+			className: t5,
+			"aria-describedby": t6,
+			"aria-invalid": t7,
+			children: t8
 		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
+		$[25] = aria.controlId;
+		$[26] = ref;
+		$[27] = size;
+		$[28] = t5;
+		$[29] = t6;
+		$[30] = t7;
+		$[31] = t8;
+		$[32] = t9;
 	} else {
-		t2 = $[7];
+		t9 = $[32];
 	}
-	return t2;
-}
-/**
-* Renders Arc's option row: 36px tall, a muted fill when highlighted and the check of the chosen option at the end,
-* while retaining selection and disabled semantics.
-* @param props - Primitive properties and optional consumer overrides.
-* @returns The styled primitive with its original interaction contract.
-*/
-function SelectItem(t0) {
-	const $ = _c(13);
-	let children;
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, children, ...props} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
-	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
-	}
-	let t1;
-	if ($[4] !== className) {
-		t1 = cn("relative flex min-h-9 w-full cursor-default items-center gap-1.5 rounded-[calc(var(--radius-control)-4px)] py-1 pr-[34px] pl-[11px] text-sm text-foreground outline-hidden select-none transition-colors duration-(--duration-instant) ease-(--ease-standard) motion-reduce:transition-none data-highlighted:bg-surface-muted data-disabled:pointer-events-none data-disabled:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className);
-		$[4] = className;
-		$[5] = t1;
-	} else {
-		t1 = $[5];
-	}
-	let t2;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ _jsx("span", {
-			className: "pointer-events-none absolute right-2.5 flex size-4 items-center justify-center text-foreground",
-			children: /* @__PURE__ */ _jsx(MotionSlot, {
-				kind: "item-check",
-				children: /* @__PURE__ */ _jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsx(CheckIcon, {
-					strokeWidth: 1.75,
-					className: "pointer-events-none"
-				}) })
-			})
+	let t10;
+	if ($[33] !== options) {
+		t10 = options.map(_temp);
+		$[33] = options;
+		$[34] = t10;
+	} else {
+		t10 = $[34];
+	}
+	let t11;
+	if ($[35] !== t10) {
+		t11 = /* @__PURE__ */ _jsx(SelectContent, {
+			position: "popper",
+			children: t10
 		});
-		$[6] = t2;
+		$[35] = t10;
+		$[36] = t11;
 	} else {
-		t2 = $[6];
+		t11 = $[36];
 	}
-	let t3;
-	if ($[7] !== children) {
-		t3 = /* @__PURE__ */ _jsx(SelectPrimitive.ItemText, { children });
-		$[7] = children;
-		$[8] = t3;
-	} else {
-		t3 = $[8];
-	}
-	let t4;
-	if ($[9] !== props || $[10] !== t1 || $[11] !== t3) {
-		t4 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "list-item",
-			children: /* @__PURE__ */ _jsxs(SelectPrimitive.Item, {
-				"data-slot": "select-item",
-				className: t1,
-				...props,
-				children: [t2, t3]
-			})
+	let t12;
+	if ($[37] !== rootProps || $[38] !== t11 || $[39] !== t9) {
+		t12 = /* @__PURE__ */ _jsxs(SelectRoot, {
+			...rootProps,
+			children: [t9, t11]
 		});
-		$[9] = props;
-		$[10] = t1;
-		$[11] = t3;
-		$[12] = t4;
-	} else {
-		t4 = $[12];
-	}
-	return t4;
-}
-function SelectSeparator(t0) {
-	const $ = _c(8);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
-	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("pointer-events-none -mx-1.5 my-1 h-px bg-border-subtle", className);
-		$[3] = className;
-		$[4] = t1;
-	} else {
-		t1 = $[4];
-	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(SelectPrimitive.Separator, {
-			"data-slot": "select-separator",
-			className: t1,
-			...props
-		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
-	} else {
-		t2 = $[7];
-	}
-	return t2;
-}
-function SelectScrollUpButton(t0) {
-	const $ = _c(9);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
-	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("z-10 flex h-7 cursor-default items-center justify-center bg-surface-raised text-text-muted [&_svg:not([class*='size-'])]:size-4", className);
-		$[3] = className;
-		$[4] = t1;
-	} else {
-		t1 = $[4];
-	}
-	let t2;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ _jsx(ChevronUpIcon, { strokeWidth: 1.75 });
-		$[5] = t2;
-	} else {
-		t2 = $[5];
-	}
-	let t3;
-	if ($[6] !== props || $[7] !== t1) {
-		t3 = /* @__PURE__ */ _jsx(SelectPrimitive.ScrollUpButton, {
-			"data-slot": "select-scroll-up-button",
-			className: t1,
-			...props,
-			children: t2
+		$[37] = rootProps;
+		$[38] = t11;
+		$[39] = t9;
+		$[40] = t12;
+	} else {
+		t12 = $[40];
+	}
+	let t13;
+	if ($[41] !== aria || $[42] !== className || $[43] !== description || $[44] !== error || $[45] !== hideLabel || $[46] !== label || $[47] !== t12) {
+		t13 = /* @__PURE__ */ _jsx(Field, {
+			label,
+			hideLabel,
+			description,
+			error,
+			aria,
+			className,
+			children: t12
 		});
-		$[6] = props;
-		$[7] = t1;
-		$[8] = t3;
-	} else {
-		t3 = $[8];
-	}
-	return t3;
+		$[41] = aria;
+		$[42] = className;
+		$[43] = description;
+		$[44] = error;
+		$[45] = hideLabel;
+		$[46] = label;
+		$[47] = t12;
+		$[48] = t13;
+	} else {
+		t13 = $[48];
+	}
+	return t13;
 }
-function SelectScrollDownButton(t0) {
-	const $ = _c(9);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
-	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("z-10 flex h-7 cursor-default items-center justify-center bg-surface-raised text-text-muted [&_svg:not([class*='size-'])]:size-4", className);
-		$[3] = className;
-		$[4] = t1;
-	} else {
-		t1 = $[4];
-	}
-	let t2;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ _jsx(ChevronDownIcon, { strokeWidth: 1.75 });
-		$[5] = t2;
-	} else {
-		t2 = $[5];
-	}
-	let t3;
-	if ($[6] !== props || $[7] !== t1) {
-		t3 = /* @__PURE__ */ _jsx(SelectPrimitive.ScrollDownButton, {
-			"data-slot": "select-scroll-down-button",
-			className: t1,
-			...props,
-			children: t2
-		});
-		$[6] = props;
-		$[7] = t1;
-		$[8] = t3;
-	} else {
-		t3 = $[8];
-	}
-	return t3;
+function _temp(option) {
+	return /* @__PURE__ */ _jsx(SelectItem, {
+		value: option.value,
+		disabled: option.disabled,
+		children: option.label
+	}, option.value);
 }
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
+export { Select };