@astra-kit/ui 0.0.0-stage → 1.0.0

package/dist/components/primitives/select.js

@@ -0,0 +1,428 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Internal primitive of Arc's Select (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): 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 and Arc's motion: the list grows from the trigger edge, the check
+* of the chosen option sharpens in, and the chevron turns on the CSS spring.
+* Internal: the Radix composition behind the public closed `Select`; the package does not export it.
+*/
+import * as React from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+import { SELECT_COLLISION_PADDING_PX, SELECT_MOTION } from "../../constants/select.js";
+import { ArcFloatingSlot } from "../../motion/arc-floating-slot.js";
+import { MotionSlot } from "../../motion/motion-slot.js";
+import { MotionOpenProvider, useMotionOpen, useMotionOpenState } from "../../motion/presence.js";
+import { cn } from "../../lib/utils.js";
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Arc's option list always enters and leaves the same way. */
+const resolveSelectMotion = () => SELECT_MOTION;
+function Select(t0) {
+	const $ = _c(9);
+	let props;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else {
+		props = $[1];
+	}
+	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
+	let t1;
+	if ($[2] !== motionOpen || $[3] !== props || $[4] !== setMotionOpen) {
+		t1 = /* @__PURE__ */ _jsx(SelectPrimitive.Root, {
+			"data-slot": "select",
+			...props,
+			open: motionOpen,
+			onOpenChange: setMotionOpen
+		});
+		$[2] = motionOpen;
+		$[3] = props;
+		$[4] = setMotionOpen;
+		$[5] = t1;
+	} else {
+		t1 = $[5];
+	}
+	let t2;
+	if ($[6] !== motionOpen || $[7] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(MotionOpenProvider, {
+			scope: "select",
+			open: motionOpen,
+			children: t1
+		});
+		$[6] = motionOpen;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	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(ChevronDownIcon, {
+				"data-slot": "select-icon",
+				strokeWidth: 1.75,
+				className: "pointer-events-none size-4 text-text-muted transition-[rotate] duration-(--duration-spring) ease-(--ease-spring) motion-reduce:transition-none"
+			})
+		});
+		$[7] = t3;
+	} else {
+		t3 = $[7];
+	}
+	let t4;
+	if ($[8] !== children || $[9] !== props || $[10] !== size || $[11] !== t2) {
+		t4 = /* @__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 up to min(24rem, 100vw minus 20px), 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.
+*/
+function SelectContent(t0) {
+	const $ = _c(26);
+	let children;
+	let className;
+	let props;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({className, children, position: t1, align: t2, collisionPadding: t3, ...props} = 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 open = useMotionOpen("select");
+	const t4 = open ? "open" : "closed";
+	const t5 = position === "item-aligned";
+	const t6 = position === "popper" && "w-(--radix-select-trigger-width) max-w-[min(24rem,calc(100vw-20px))] 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 t7;
+	if ($[7] !== className || $[8] !== t6) {
+		t7 = 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)", t6, className);
+		$[7] = className;
+		$[8] = t6;
+		$[9] = t7;
+	} else {
+		t7 = $[9];
+	}
+	let t8;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ _jsx(SelectScrollUpButton, {});
+		$[10] = t8;
+	} else {
+		t8 = $[10];
+	}
+	let t9;
+	if ($[11] !== children || $[12] !== position) {
+		t9 = /* @__PURE__ */ _jsx(SelectPrimitive.Viewport, {
+			"data-position": position,
+			className: "py-0.5 data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full",
+			children
+		});
+		$[11] = children;
+		$[12] = position;
+		$[13] = t9;
+	} else {
+		t9 = $[13];
+	}
+	let t10;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ _jsx(SelectScrollDownButton, {});
+		$[14] = t10;
+	} else {
+		t10 = $[14];
+	}
+	let t11;
+	if ($[15] !== align || $[16] !== collisionPadding || $[17] !== position || $[18] !== props || $[19] !== t5 || $[20] !== t7 || $[21] !== t9) {
+		t11 = /* @__PURE__ */ _jsxs(SelectPrimitive.Content, {
+			"data-slot": "select-content",
+			"data-align-trigger": t5,
+			className: t7,
+			position,
+			align,
+			collisionPadding,
+			...props,
+			children: [
+				t8,
+				t9,
+				t10
+			]
+		});
+		$[15] = align;
+		$[16] = collisionPadding;
+		$[17] = position;
+		$[18] = props;
+		$[19] = t5;
+		$[20] = t7;
+		$[21] = t9;
+		$[22] = t11;
+	} else {
+		t11 = $[22];
+	}
+	let t12;
+	if ($[23] !== t11 || $[24] !== t4) {
+		t12 = /* @__PURE__ */ _jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ _jsx(ArcFloatingSlot, {
+			motion: resolveSelectMotion,
+			children: t11
+		}, t4) });
+		$[23] = t11;
+		$[24] = t4;
+		$[25] = t12;
+	} else {
+		t12 = $[25];
+	}
+	return t12;
+}
+/**
+* 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"
+				}) })
+			})
+		});
+		$[6] = t2;
+	} else {
+		t2 = $[6];
+	}
+	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__ */ _jsxs(SelectPrimitive.Item, {
+			"data-slot": "select-item",
+			className: t1,
+			...props,
+			children: [t2, t3]
+		});
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t3;
+		$[12] = t4;
+	} else {
+		t4 = $[12];
+	}
+	return t4;
+}
+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
+		});
+		$[6] = props;
+		$[7] = t1;
+		$[8] = t3;
+	} else {
+		t3 = $[8];
+	}
+	return t3;
+}
+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;
+}
+export { Select, SelectContent, SelectItem, SelectTrigger, SelectValue };

package/dist/components/primitives/tooltip.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Internal primitive of Arc's Tooltip (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a short dark
+ * bubble on Arc's tokens that waits a moment, then rises a few pixels from its trigger. While a tooltip is open, and
+ * briefly after it closes, the next one opens at once and only fades. Internal: the Radix composition (`Tooltip`,
+ * `TooltipTrigger`, `TooltipContent`, `TooltipProvider`) behind the public closed `Tooltip` and @astra-kit/ui's composite
+ * components; the package does not export it.
+ */
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+/**
+ * Shares the open delay among the tooltips it wraps.
+ * @param props - Radix provider properties. `delayDuration` defaults to Arc's 250ms.
+ * @returns The provider.
+ */
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
+/**
+ * Owns the open state of one tooltip. It works with or without a `TooltipProvider`: without one it brings its own,
+ * as Arc's Tooltip does. Within the shared skip window it opens without delay.
+ * @param props - Radix root properties.
+ * @returns The tooltip root.
+ */
+declare function Tooltip({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element;
+/**
+ * Renders Arc's bubble: inverted colors, a hairline border, the raised shadow and 15rem of maximum width.
+ * @param props - Radix content properties. `sideOffset` defaults to 8px and `collisionPadding` to 12px.
+ * @returns The portaled bubble.
+ */
+declare function TooltipContent({ className, sideOffset, collisionPadding, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): React.JSX.Element;
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };