@astra-kit/ui 0.0.0-stage → 1.0.0

package/dist/components/svgs/whatsappIcon.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const WhatsappIcon = (props) => /* @__PURE__ */ _jsx("svg", {
+	"data-slot": "whatsapp-icon",
+	...props,
+	fill: "none",
+	viewBox: "0 0 360 362",
+	children: /* @__PURE__ */ _jsx("path", {
+		fill: "#25D366",
+		fillRule: "evenodd",
+		d: "M307.546 52.566C273.709 18.684 228.706.017 180.756 0 81.951 0 1.538 80.404 1.504 179.235c-.017 31.594 8.242 62.432 23.928 89.609L0 361.736l95.024-24.925c26.179 14.285 55.659 21.805 85.655 21.814h.077c98.788 0 179.21-80.413 179.244-179.244.017-47.898-18.608-92.926-52.454-126.807v-.008Zm-126.79 275.788h-.06c-26.73-.008-52.952-7.194-75.831-20.765l-5.44-3.231-56.391 14.791 15.05-54.981-3.542-5.638c-14.912-23.721-22.793-51.139-22.776-79.286.035-82.14 66.867-148.973 149.051-148.973 39.793.017 77.198 15.53 105.328 43.695 28.131 28.157 43.61 65.596 43.593 105.398-.035 82.149-66.867 148.982-148.982 148.982v.008Zm81.719-111.577c-4.478-2.243-26.497-13.073-30.606-14.568-4.108-1.496-7.09-2.243-10.073 2.243-2.982 4.487-11.568 14.577-14.181 17.559-2.613 2.991-5.226 3.361-9.704 1.117-4.477-2.243-18.908-6.97-36.02-22.226-13.313-11.878-22.304-26.54-24.916-31.027-2.613-4.486-.275-6.91 1.959-9.136 2.011-2.011 4.478-5.234 6.721-7.847 2.244-2.613 2.983-4.486 4.478-7.469 1.496-2.991.748-5.603-.369-7.847-1.118-2.243-10.073-24.289-13.812-33.253-3.636-8.732-7.331-7.546-10.073-7.692-2.613-.13-5.595-.155-8.586-.155-2.991 0-7.839 1.118-11.947 5.604-4.108 4.486-15.677 15.324-15.677 37.361s16.047 43.344 18.29 46.335c2.243 2.991 31.585 48.225 76.51 67.632 10.684 4.615 19.029 7.374 25.535 9.437 10.727 3.412 20.49 2.931 28.208 1.779 8.604-1.289 26.498-10.838 30.228-21.298 3.73-10.46 3.73-19.433 2.613-21.298-1.117-1.865-4.108-2.991-8.586-5.234l.008-.017Z",
+		clipRule: "evenodd"
+	})
+});
+export { WhatsappIcon };

package/dist/components/switch.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+export type SwitchProps = ComponentProps<typeof SwitchPrimitive.Root> & {
+    /** Visible text rendered inside the control, after the track; also its `aria-label` when none is passed. */
+    label?: string;
+};
+/**
+ * A binary setting that applies at once, controlled or uncontrolled like Radix's switch.
+ * @param switchProps - Every Radix switch prop, including `ref`, plus Arc's `label`.
+ * @returns The switch button, with its label inside when one is passed.
+ */
+declare function Switch({ className, label, checked, defaultChecked, onCheckedChange, onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, onKeyDown, onKeyUp, onBlur, disabled, "aria-label": ariaLabel, ...props }: SwitchProps): import("react").JSX.Element;
+export { Switch };

package/dist/components/switch.js

@@ -0,0 +1,444 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's Switch (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a pill track that crossfades between its
+* two fills while the thumb glides on a critically damped spring. Held down, the thumb widens toward the other side
+* with its far edge anchored, like a finger on it. With a `label` the text sits inside the control; without it the
+* switch renders the bare track, for rows that place their own label.
+*/
+import { useEffect, useRef, useState } from "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+import { animate, frameData, motion, useMotionValue } from "motion/react";
+import { SWITCH_CHANGE_STRETCH, SWITCH_PRESS_RELEASE_WINDOW_MS, SWITCH_PRESS_STRETCH_PX, SWITCH_PRIMARY_POINTER_BUTTON, SWITCH_THUMB_GEOMETRY_PX, SWITCH_THUMB_GLIDE_SPRING, SWITCH_TOGGLE_KEY } from "../constants/switch.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { ARC_SPRING_SNAPPY } from "../motion/arc-tokens.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* Arc's control recipe. The bare switch keeps the track's own box and widens its hit area with a pseudo-element, so
+* rows that already lay it out do not grow; with a label it takes Arc's full control height. Hover only answers on
+* hover-capable fine pointers, and keyboard focus uses the theme's focus outline.
+*/
+const switchClassName = "peer group/switch relative inline-flex shrink-0 cursor-pointer items-center gap-(--space-3) rounded-(--radius-pill) border-0 bg-transparent p-0 font-sans text-sm text-foreground [-webkit-tap-highlight-color:transparent] after:absolute after:-inset-x-2 after:-inset-y-2.5 disabled:cursor-not-allowed disabled:opacity-50 data-[labelled]:min-h-(--control-height-md) data-[labelled]:rounded-(--radius-control) data-[labelled]:after:hidden hover-fine:data-[state=unchecked]:not-disabled:[&_[data-slot=switch-track]]:bg-(--control-track-hover)";
+/** Fixed box: the thumb moves inside it with transforms, so nothing around the switch shifts. */
+const trackClassName = "relative isolate box-border flex flex-none items-center rounded-(--radius-pill) bg-(--control-track) transition-[background-color] duration-(--duration-fast) ease-(--ease-standard) before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:bg-(--control-on) before:opacity-0 before:transition-opacity before:duration-(--duration-standard) before:ease-(--ease-standard) group-data-[state=checked]/switch:before:opacity-100 group-aria-invalid/switch:shadow-[0_0_0_1px_var(--danger)] h-6 w-[42px] p-[3px] motion-reduce:transition-none motion-reduce:before:transition-none";
+const thumbClassName = "pointer-events-none block flex-none rounded-(--radius-pill) bg-(--control-thumb) shadow-(--control-thumb-shadow) will-change-transform transition-[background-color] duration-(--duration-standard) ease-(--ease-standard) group-data-[state=checked]/switch:bg-(--control-thumb-on) h-[18px] motion-reduce:transition-none";
+/**
+* Springs a thumb value to its target from where it was last painted, carrying its velocity. Motion samples a stopped
+* animation at the current time, ahead of the last painted frame, and renders that sample right after the commit, so
+* a reversed glide would otherwise jump by up to a frame of travel, more when frames run long.
+* @param value - The motion value to animate.
+* @param paintedValue - The value last written to the screen.
+* @param target - Where the value should settle.
+* @param transition - Spring to travel on.
+* @returns The running animation, or `undefined` when the value already rests on its target.
+*/
+function glideFromPainted(value, paintedValue, target, transition) {
+	if (!value.isAnimating() && value.get() === target) return undefined;
+	const velocity = value.getVelocity();
+	value.jump(paintedValue);
+	return animate(value, [paintedValue, target], {
+		...transition,
+		velocity
+	});
+}
+/**
+* A binary setting that applies at once, controlled or uncontrolled like Radix's switch.
+* @param switchProps - Every Radix switch prop, including `ref`, plus Arc's `label`.
+* @returns The switch button, with its label inside when one is passed.
+*/
+function Switch(t0) {
+	const $ = _c(83);
+	let ariaLabel;
+	let checked;
+	let className;
+	let defaultChecked;
+	let disabled;
+	let label;
+	let onBlur;
+	let onCheckedChange;
+	let onKeyDown;
+	let onKeyUp;
+	let onPointerCancel;
+	let onPointerDown;
+	let onPointerLeave;
+	let onPointerUp;
+	let props;
+	if ($[0] !== t0) {
+		({className, label, checked, defaultChecked, onCheckedChange, onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, onKeyDown, onKeyUp, onBlur, disabled, "aria-label": ariaLabel, ...props} = t0);
+		$[0] = t0;
+		$[1] = ariaLabel;
+		$[2] = checked;
+		$[3] = className;
+		$[4] = defaultChecked;
+		$[5] = disabled;
+		$[6] = label;
+		$[7] = onBlur;
+		$[8] = onCheckedChange;
+		$[9] = onKeyDown;
+		$[10] = onKeyUp;
+		$[11] = onPointerCancel;
+		$[12] = onPointerDown;
+		$[13] = onPointerLeave;
+		$[14] = onPointerUp;
+		$[15] = props;
+	} else {
+		ariaLabel = $[1];
+		checked = $[2];
+		className = $[3];
+		defaultChecked = $[4];
+		disabled = $[5];
+		label = $[6];
+		onBlur = $[7];
+		onCheckedChange = $[8];
+		onKeyDown = $[9];
+		onKeyUp = $[10];
+		onPointerCancel = $[11];
+		onPointerDown = $[12];
+		onPointerLeave = $[13];
+		onPointerUp = $[14];
+		props = $[15];
+	}
+	const reduceMotion = usePrefersReducedMotion();
+	const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked ?? false);
+	const [isPressed, setIsPressed] = useState(false);
+	const isChecked = checked ?? uncontrolledChecked;
+	const stretch = isPressed && !reduceMotion && !disabled ? SWITCH_PRESS_STRETCH_PX : 0;
+	const targetX = isChecked ? SWITCH_THUMB_GEOMETRY_PX.travel - stretch : 0;
+	const targetWidth = SWITCH_THUMB_GEOMETRY_PX.size + stretch;
+	const x = useMotionValue(targetX);
+	const width = useMotionValue(targetWidth);
+	const scaleX = useMotionValue(1);
+	let t1;
+	if ($[16] !== targetWidth || $[17] !== targetX) {
+		t1 = {
+			x: targetX,
+			width: targetWidth,
+			scaleX: 1
+		};
+		$[16] = targetWidth;
+		$[17] = targetX;
+		$[18] = t1;
+	} else {
+		t1 = $[18];
+	}
+	const painted = useRef(t1);
+	const shownChecked = useRef(isChecked);
+	const releasedAt = useRef(-Infinity);
+	let t2;
+	let t3;
+	if ($[19] !== scaleX || $[20] !== width || $[21] !== x) {
+		t2 = () => {
+			const trackPainted = (key) => (value) => {
+				if (frameData.isProcessing) {
+					painted.current[key] = value;
+				}
+			};
+			const unsubscribes = [
+				x.on("change", trackPainted("x")),
+				width.on("change", trackPainted("width")),
+				scaleX.on("change", trackPainted("scaleX"))
+			];
+			return () => unsubscribes.forEach(_temp);
+		};
+		t3 = [
+			x,
+			width,
+			scaleX
+		];
+		$[19] = scaleX;
+		$[20] = width;
+		$[21] = x;
+		$[22] = t2;
+		$[23] = t3;
+	} else {
+		t2 = $[22];
+		t3 = $[23];
+	}
+	useEffect(t2, t3);
+	let t4;
+	let t5;
+	if ($[24] !== reduceMotion || $[25] !== targetWidth || $[26] !== targetX || $[27] !== width || $[28] !== x) {
+		t4 = () => {
+			if (reduceMotion) {
+				x.jump(targetX);
+				width.jump(targetWidth);
+				painted.current = {
+					...painted.current,
+					x: targetX,
+					width: targetWidth
+				};
+				return;
+			}
+			const xControls = glideFromPainted(x, painted.current.x, targetX, SWITCH_THUMB_GLIDE_SPRING);
+			const widthControls = glideFromPainted(width, painted.current.width, targetWidth, ARC_SPRING_SNAPPY);
+			return () => {
+				xControls?.stop();
+				widthControls?.stop();
+			};
+		};
+		t5 = [
+			targetX,
+			targetWidth,
+			reduceMotion,
+			x,
+			width
+		];
+		$[24] = reduceMotion;
+		$[25] = targetWidth;
+		$[26] = targetX;
+		$[27] = width;
+		$[28] = x;
+		$[29] = t4;
+		$[30] = t5;
+	} else {
+		t4 = $[29];
+		t5 = $[30];
+	}
+	useEffect(t4, t5);
+	let t6;
+	let t7;
+	if ($[31] !== isChecked || $[32] !== reduceMotion || $[33] !== scaleX) {
+		t6 = () => {
+			if (shownChecked.current === isChecked) {
+				return;
+			}
+			shownChecked.current = isChecked;
+			const isFromPress = performance.now() - releasedAt.current < SWITCH_PRESS_RELEASE_WINDOW_MS;
+			if (reduceMotion || isFromPress) {
+				return;
+			}
+			const { scaleX: keyframes, ...transition } = SWITCH_CHANGE_STRETCH;
+			const [, peakScale, restingScale] = keyframes;
+			scaleX.jump(painted.current.scaleX);
+			const controls = animate(scaleX, [
+				painted.current.scaleX,
+				peakScale,
+				restingScale
+			], {
+				...transition,
+				times: [...transition.times],
+				ease: [...transition.ease]
+			});
+			return () => controls.stop();
+		};
+		t7 = [
+			isChecked,
+			reduceMotion,
+			scaleX
+		];
+		$[31] = isChecked;
+		$[32] = reduceMotion;
+		$[33] = scaleX;
+		$[34] = t6;
+		$[35] = t7;
+	} else {
+		t6 = $[34];
+		t7 = $[35];
+	}
+	useEffect(t6, t7);
+	let t8;
+	if ($[36] !== disabled || $[37] !== isPressed) {
+		t8 = () => {
+			if (isPressed && !disabled) {
+				releasedAt.current = performance.now();
+			}
+			setIsPressed(false);
+		};
+		$[36] = disabled;
+		$[37] = isPressed;
+		$[38] = t8;
+	} else {
+		t8 = $[38];
+	}
+	const release = t8;
+	const t9 = label ? "" : undefined;
+	let t10;
+	if ($[39] !== className) {
+		t10 = cn(switchClassName, className);
+		$[39] = className;
+		$[40] = t10;
+	} else {
+		t10 = $[40];
+	}
+	const t11 = ariaLabel ?? label;
+	let t12;
+	if ($[41] !== checked || $[42] !== onCheckedChange) {
+		t12 = (nextChecked) => {
+			if (checked === undefined) {
+				setUncontrolledChecked(nextChecked);
+			}
+			onCheckedChange?.(nextChecked);
+		};
+		$[41] = checked;
+		$[42] = onCheckedChange;
+		$[43] = t12;
+	} else {
+		t12 = $[43];
+	}
+	let t13;
+	if ($[44] !== onPointerDown) {
+		t13 = (event) => {
+			onPointerDown?.(event);
+			if (event.button === SWITCH_PRIMARY_POINTER_BUTTON) {
+				setIsPressed(true);
+			}
+		};
+		$[44] = onPointerDown;
+		$[45] = t13;
+	} else {
+		t13 = $[45];
+	}
+	let t14;
+	if ($[46] !== onPointerUp || $[47] !== release) {
+		t14 = (event_0) => {
+			onPointerUp?.(event_0);
+			release();
+		};
+		$[46] = onPointerUp;
+		$[47] = release;
+		$[48] = t14;
+	} else {
+		t14 = $[48];
+	}
+	let t15;
+	if ($[49] !== onPointerLeave) {
+		t15 = (event_1) => {
+			onPointerLeave?.(event_1);
+			setIsPressed(false);
+		};
+		$[49] = onPointerLeave;
+		$[50] = t15;
+	} else {
+		t15 = $[50];
+	}
+	let t16;
+	if ($[51] !== onPointerCancel) {
+		t16 = (event_2) => {
+			onPointerCancel?.(event_2);
+			setIsPressed(false);
+		};
+		$[51] = onPointerCancel;
+		$[52] = t16;
+	} else {
+		t16 = $[52];
+	}
+	let t17;
+	if ($[53] !== onKeyDown) {
+		t17 = (event_3) => {
+			onKeyDown?.(event_3);
+			if (event_3.key === SWITCH_TOGGLE_KEY) {
+				setIsPressed(true);
+			}
+		};
+		$[53] = onKeyDown;
+		$[54] = t17;
+	} else {
+		t17 = $[54];
+	}
+	let t18;
+	if ($[55] !== onKeyUp || $[56] !== release) {
+		t18 = (event_4) => {
+			onKeyUp?.(event_4);
+			release();
+		};
+		$[55] = onKeyUp;
+		$[56] = release;
+		$[57] = t18;
+	} else {
+		t18 = $[57];
+	}
+	let t19;
+	if ($[58] !== onBlur) {
+		t19 = (event_5) => {
+			onBlur?.(event_5);
+			setIsPressed(false);
+		};
+		$[58] = onBlur;
+		$[59] = t19;
+	} else {
+		t19 = $[59];
+	}
+	let t20;
+	if ($[60] !== scaleX || $[61] !== width || $[62] !== x) {
+		t20 = /* @__PURE__ */ _jsx("span", {
+			"data-slot": "switch-track",
+			className: trackClassName,
+			children: /* @__PURE__ */ _jsx(SwitchPrimitive.Thumb, {
+				asChild: true,
+				children: /* @__PURE__ */ _jsx(motion.span, {
+					"data-slot": "switch-thumb",
+					className: thumbClassName,
+					style: {
+						x,
+						width,
+						scaleX
+					}
+				})
+			})
+		});
+		$[60] = scaleX;
+		$[61] = width;
+		$[62] = x;
+		$[63] = t20;
+	} else {
+		t20 = $[63];
+	}
+	let t21;
+	if ($[64] !== label) {
+		t21 = label ? /* @__PURE__ */ _jsx("span", {
+			"data-slot": "switch-label",
+			className: "leading-(--leading-body)",
+			children: label
+		}) : null;
+		$[64] = label;
+		$[65] = t21;
+	} else {
+		t21 = $[65];
+	}
+	let t22;
+	if ($[66] !== disabled || $[67] !== isChecked || $[68] !== props || $[69] !== t10 || $[70] !== t11 || $[71] !== t12 || $[72] !== t13 || $[73] !== t14 || $[74] !== t15 || $[75] !== t16 || $[76] !== t17 || $[77] !== t18 || $[78] !== t19 || $[79] !== t20 || $[80] !== t21 || $[81] !== t9) {
+		t22 = /* @__PURE__ */ _jsxs(SwitchPrimitive.Root, {
+			"data-slot": "switch",
+			"data-labelled": t9,
+			className: t10,
+			...props,
+			disabled,
+			checked: isChecked,
+			"aria-label": t11,
+			onCheckedChange: t12,
+			onPointerDown: t13,
+			onPointerUp: t14,
+			onPointerLeave: t15,
+			onPointerCancel: t16,
+			onKeyDown: t17,
+			onKeyUp: t18,
+			onBlur: t19,
+			children: [t20, t21]
+		});
+		$[66] = disabled;
+		$[67] = isChecked;
+		$[68] = props;
+		$[69] = t10;
+		$[70] = t11;
+		$[71] = t12;
+		$[72] = t13;
+		$[73] = t14;
+		$[74] = t15;
+		$[75] = t16;
+		$[76] = t17;
+		$[77] = t18;
+		$[78] = t19;
+		$[79] = t20;
+		$[80] = t21;
+		$[81] = t9;
+		$[82] = t22;
+	} else {
+		t22 = $[82];
+	}
+	return t22;
+}
+function _temp(unsubscribe) {
+	return unsubscribe();
+}
+export { Switch };

package/dist/components/table.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+declare function Table({ className, ...props }: React.ComponentProps<"table">): React.JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
+declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): React.JSX.Element;
+declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): React.JSX.Element;
+declare function TableHead({ className, ...props }: React.ComponentProps<"th">): React.JSX.Element;
+declare function TableCell({ className, ...props }: React.ComponentProps<"td">): React.JSX.Element;
+declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): React.JSX.Element;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };