@astra-kit/ui 0.0.0-stage → 0.0.0

package/dist/components/primitives/tooltip.js

@@ -0,0 +1,277 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* 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";
+import { ArcFloatingSlot } from "../../motion/arc-floating-slot.js";
+import { createOverlayWarmth, useOpenedWhileWarm } from "../../motion/overlay-warmth.js";
+import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../../motion/presence.js";
+import { cn } from "../../lib/utils.js";
+import { TOOLTIP_COLLISION_PADDING_PX, TOOLTIP_INSTANT_MOTION, TOOLTIP_MOTION, TOOLTIP_OPEN_DELAY_MS, TOOLTIP_SIDE_OFFSET_PX, TOOLTIP_SKIP_WINDOW_MS } from "../../constants/tooltip.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Every tooltip on the page shares one skip window, whichever provider it belongs to. */
+const tooltipWarmth = createOverlayWarmth(TOOLTIP_SKIP_WINDOW_MS);
+/** Whether the page was already warm when the surrounding layer opened, so its entrance only fades. */
+const TooltipOpenedWhileWarmContext = React.createContext(false);
+/** Tells a `Tooltip` whether a `TooltipProvider` already wraps it. */
+const TooltipProviderPresenceContext = React.createContext(false);
+/**
+* Shares the open delay among the tooltips it wraps.
+* @param props - Radix provider properties. `delayDuration` defaults to Arc's 250ms.
+* @returns The provider.
+*/
+function TooltipProvider(t0) {
+	const $ = _c(6);
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({delayDuration: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+	} else {
+		props = $[1];
+		t1 = $[2];
+	}
+	const delayDuration = t1 === undefined ? TOOLTIP_OPEN_DELAY_MS : t1;
+	let t2;
+	if ($[3] !== delayDuration || $[4] !== props) {
+		t2 = /* @__PURE__ */ _jsx(TooltipProviderPresenceContext.Provider, {
+			value: true,
+			children: /* @__PURE__ */ _jsx(TooltipPrimitive.Provider, {
+				"data-slot": "tooltip-provider",
+				delayDuration,
+				...props
+			})
+		});
+		$[3] = delayDuration;
+		$[4] = props;
+		$[5] = t2;
+	} else {
+		t2 = $[5];
+	}
+	return t2;
+}
+/**
+* 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.
+*/
+function Tooltip(t0) {
+	const $ = _c(20);
+	let delayDuration;
+	let props;
+	if ($[0] !== t0) {
+		({delayDuration, ...props} = t0);
+		$[0] = t0;
+		$[1] = delayDuration;
+		$[2] = props;
+	} else {
+		delayDuration = $[1];
+		props = $[2];
+	}
+	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
+	const isWarm = React.useSyncExternalStore(tooltipWarmth.subscribe, tooltipWarmth.isWarm, tooltipWarmth.isWarmOnServer);
+	const openedWhileWarm = useOpenedWhileWarm(motionOpen, isWarm);
+	const hasProvider = React.useContext(TooltipProviderPresenceContext);
+	let t1;
+	let t2;
+	if ($[3] !== motionOpen) {
+		t1 = () => {
+			if (!motionOpen) {
+				return;
+			}
+			return tooltipWarmth.open();
+		};
+		t2 = [motionOpen];
+		$[3] = motionOpen;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+	}
+	React.useEffect(t1, t2);
+	const t3 = isWarm ? 0 : delayDuration;
+	let t4;
+	if ($[6] !== motionOpen || $[7] !== props || $[8] !== setMotionOpen || $[9] !== t3) {
+		t4 = /* @__PURE__ */ _jsx(TooltipPrimitive.Root, {
+			"data-slot": "tooltip",
+			...props,
+			delayDuration: t3,
+			open: motionOpen,
+			onOpenChange: setMotionOpen
+		});
+		$[6] = motionOpen;
+		$[7] = props;
+		$[8] = setMotionOpen;
+		$[9] = t3;
+		$[10] = t4;
+	} else {
+		t4 = $[10];
+	}
+	let t5;
+	if ($[11] !== openedWhileWarm || $[12] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(TooltipOpenedWhileWarmContext.Provider, {
+			value: openedWhileWarm,
+			children: t4
+		});
+		$[11] = openedWhileWarm;
+		$[12] = t4;
+		$[13] = t5;
+	} else {
+		t5 = $[13];
+	}
+	let t6;
+	if ($[14] !== motionOpen || $[15] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(MotionOpenProvider, {
+			scope: "tooltip",
+			open: motionOpen,
+			children: t5
+		});
+		$[14] = motionOpen;
+		$[15] = t5;
+		$[16] = t6;
+	} else {
+		t6 = $[16];
+	}
+	const root = t6;
+	let t7;
+	if ($[17] !== hasProvider || $[18] !== root) {
+		t7 = hasProvider ? root : /* @__PURE__ */ _jsx(TooltipProvider, { children: root });
+		$[17] = hasProvider;
+		$[18] = root;
+		$[19] = t7;
+	} else {
+		t7 = $[19];
+	}
+	return t7;
+}
+function TooltipTrigger(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(TooltipPrimitive.Trigger, {
+			"data-slot": "tooltip-trigger",
+			...props
+		});
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	return t1;
+}
+/**
+* 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.
+*/
+function TooltipContent(t0) {
+	const $ = _c(22);
+	let children;
+	let className;
+	let props;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({className, sideOffset: t1, collisionPadding: t2, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		t1 = $[4];
+		t2 = $[5];
+	}
+	const sideOffset = t1 === undefined ? TOOLTIP_SIDE_OFFSET_PX : t1;
+	const collisionPadding = t2 === undefined ? TOOLTIP_COLLISION_PADDING_PX : t2;
+	const openedWhileWarm = React.useContext(TooltipOpenedWhileWarmContext);
+	const t3 = props.forceMount;
+	let t4;
+	if ($[6] !== openedWhileWarm) {
+		t4 = () => openedWhileWarm ? TOOLTIP_INSTANT_MOTION : TOOLTIP_MOTION;
+		$[6] = openedWhileWarm;
+		$[7] = t4;
+	} else {
+		t4 = $[7];
+	}
+	let t5;
+	if ($[8] !== className) {
+		t5 = cn("z-50 inline-flex w-fit max-w-60 origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-(--radius-control) border border-[color-mix(in_oklab,var(--background)_14%,var(--foreground))] bg-foreground px-(--space-4) py-(--space-3) font-sans text-sm leading-(--leading-body) font-normal tracking-(--tracking-body) text-background shadow-(--shadow-raised) has-data-[slot=kbd]:pr-(--space-3) **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm", className);
+		$[8] = className;
+		$[9] = t5;
+	} else {
+		t5 = $[9];
+	}
+	let t6;
+	if ($[10] !== children || $[11] !== collisionPadding || $[12] !== props || $[13] !== sideOffset || $[14] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(TooltipPrimitive.Content, {
+			forceMount: true,
+			"data-slot": "tooltip-content",
+			sideOffset,
+			collisionPadding,
+			className: t5,
+			...props,
+			children
+		});
+		$[10] = children;
+		$[11] = collisionPadding;
+		$[12] = props;
+		$[13] = sideOffset;
+		$[14] = t5;
+		$[15] = t6;
+	} else {
+		t6 = $[15];
+	}
+	let t7;
+	if ($[16] !== t4 || $[17] !== t6) {
+		t7 = /* @__PURE__ */ _jsx(ArcFloatingSlot, {
+			motion: t4,
+			children: t6
+		});
+		$[16] = t4;
+		$[17] = t6;
+		$[18] = t7;
+	} else {
+		t7 = $[18];
+	}
+	let t8;
+	if ($[19] !== props.forceMount || $[20] !== t7) {
+		t8 = /* @__PURE__ */ _jsx(TooltipPrimitive.Portal, {
+			forceMount: true,
+			children: /* @__PURE__ */ _jsx(MotionPresence, {
+				scope: "tooltip",
+				forceMount: t3,
+				children: t7
+			})
+		});
+		$[19] = props.forceMount;
+		$[20] = t7;
+		$[21] = t8;
+	} else {
+		t8 = $[21];
+	}
+	return t8;
+}
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/components/progress-ring.d.ts

@@ -0,0 +1,20 @@
+/** Compact circular progress indicator whose arc inherits the surrounding text color. */
+import type { ComponentProps } from "react";
+export interface ProgressRingProps extends Omit<ComponentProps<"svg">, "children"> {
+    /** Completion ratio in the `[0, 1]` range; values outside are clamped. */
+    fraction: number;
+    /** Rendered width and height in pixels. */
+    size?: number;
+    /**
+     * Accessible name. Without it the ring is decorative (`aria-hidden`), which fits when an
+     * adjacent label such as `3 / 4` already conveys the value.
+     */
+    label?: string;
+}
+/**
+ * Draws a ring whose arc covers `fraction` of the circle. The arc uses `currentColor`, so the
+ * parent's text color (for example success or warning) styles it without extra props.
+ * @param props - Fraction, size, optional accessible name and SVG attributes.
+ * @returns The progress ring.
+ */
+export declare function ProgressRing({ fraction, size, label, className, ...svgProps }: ProgressRingProps): import("react").JSX.Element;

package/dist/components/progress-ring.js

@@ -0,0 +1,53 @@
+import { cn } from "../lib/utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PROGRESS_RING_VIEWBOX_SIZE = 18;
+const PROGRESS_RING_CENTER = PROGRESS_RING_VIEWBOX_SIZE / 2;
+const PROGRESS_RING_RADIUS = 7;
+const PROGRESS_RING_STROKE_WIDTH = 2.5;
+const PROGRESS_RING_CIRCUMFERENCE = 2 * Math.PI * PROGRESS_RING_RADIUS;
+const DEFAULT_PROGRESS_RING_SIZE_PX = 18;
+/**
+* Draws a ring whose arc covers `fraction` of the circle. The arc uses `currentColor`, so the
+* parent's text color (for example success or warning) styles it without extra props.
+* @param props - Fraction, size, optional accessible name and SVG attributes.
+* @returns The progress ring.
+*/
+export function ProgressRing({ fraction, size = DEFAULT_PROGRESS_RING_SIZE_PX, label, className, ...svgProps }) {
+	const clampedFraction = Math.min(Math.max(Number.isFinite(fraction) ? fraction : 0, 0), 1);
+	const dashOffset = PROGRESS_RING_CIRCUMFERENCE * (1 - clampedFraction);
+	const accessibilityProps = label ? {
+		role: "progressbar",
+		"aria-label": label,
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": Math.round(clampedFraction * 100)
+	} : { "aria-hidden": true };
+	return /* @__PURE__ */ _jsxs("svg", {
+		"data-slot": "progress-ring",
+		...accessibilityProps,
+		...svgProps,
+		className: cn("shrink-0 -rotate-90", className),
+		height: size,
+		viewBox: `0 0 ${PROGRESS_RING_VIEWBOX_SIZE} ${PROGRESS_RING_VIEWBOX_SIZE}`,
+		width: size,
+		children: [/* @__PURE__ */ _jsx("circle", {
+			className: "stroke-border/70",
+			cx: PROGRESS_RING_CENTER,
+			cy: PROGRESS_RING_CENTER,
+			fill: "none",
+			r: PROGRESS_RING_RADIUS,
+			strokeWidth: PROGRESS_RING_STROKE_WIDTH
+		}), clampedFraction > 0 ? /* @__PURE__ */ _jsx("circle", {
+			"data-slot": "progress-ring-indicator",
+			cx: PROGRESS_RING_CENTER,
+			cy: PROGRESS_RING_CENTER,
+			fill: "none",
+			r: PROGRESS_RING_RADIUS,
+			stroke: "currentColor",
+			strokeDasharray: PROGRESS_RING_CIRCUMFERENCE,
+			strokeDashoffset: dashOffset,
+			strokeLinecap: "round",
+			strokeWidth: PROGRESS_RING_STROKE_WIDTH
+		}) : null]
+	});
+}

package/dist/components/radio-group.d.ts

@@ -0,0 +1,34 @@
+/** One choice of a radio group. */
+export type RadioGroupOption = {
+    /** Value reported to `onValueChange` and submitted with the form. */
+    value: string;
+    /** Visible option label, which also names the radio. */
+    label: string;
+    /** Helper copy under the label, linked through `aria-describedby`. */
+    description?: string;
+    /** Keeps the option visible but not selectable. */
+    disabled?: boolean;
+};
+export type RadioGroupProps = {
+    /** Visible legend of the fieldset, which names the group. */
+    label: string;
+    /** Rows in order. Values double as keys, so keep them unique. */
+    options: RadioGroupOption[];
+    /** Selected value when controlled. */
+    value?: string;
+    /** Initial value when uncontrolled; a form reset restores it. */
+    defaultValue?: string;
+    /** Called with the chosen value. */
+    onValueChange?: (value: string) => void;
+    /** Name the chosen value is submitted under. Generated when omitted. */
+    name?: string;
+    /** Classes for the fieldset. */
+    className?: string;
+};
+/**
+ * A choice of one option from a visible set, controlled with `value` or uncontrolled with `defaultValue`.
+ * @param props - Legend, options, value, change handler, form name and classes.
+ * @returns The fieldset with its legend and option rows.
+ */
+declare function RadioGroup({ label, options, value, defaultValue, onValueChange, name, className }: RadioGroupProps): import("react").JSX.Element;
+export { RadioGroup };