@astra-kit/ui 0.0.0-stage → 0.0.0

package/dist/components/form.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import type { Label as LabelPrimitive } from "radix-ui";
+import { Slot } from "radix-ui";
+import { type ControllerProps, type FieldPath, type FieldValues } from "react-hook-form";
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getErrors, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React.JSX.Element;
+/**
+ * Reads the field and item context shared by the form parts.
+ * @returns Accessible ids plus the react-hook-form state of the enclosing field.
+ * @throws When used outside `<FormField>`, where no field name is available.
+ */
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import("react-hook-form").FieldError | undefined;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare function FormItem({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): React.JSX.Element;
+declare function FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>): React.JSX.Element;
+declare function FormDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function FormMessage({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element | null;
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };

package/dist/components/form.js

@@ -0,0 +1,330 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
+import { MotionSlot } from "../motion/motion-slot.js";
+import { cn } from "../lib/utils.js";
+import { Label } from "./label.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Form = FormProvider;
+const FormFieldContext = React.createContext({});
+const FormField = (t0) => {
+	const $ = _c(9);
+	let props;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else {
+		props = $[1];
+	}
+	let t1;
+	if ($[2] !== props.name) {
+		t1 = { name: props.name };
+		$[2] = props.name;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	let t2;
+	if ($[4] !== props) {
+		t2 = /* @__PURE__ */ _jsx(Controller, { ...props });
+		$[4] = props;
+		$[5] = t2;
+	} else {
+		t2 = $[5];
+	}
+	let t3;
+	if ($[6] !== t1 || $[7] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(FormFieldContext.Provider, {
+			value: t1,
+			children: t2
+		});
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+	} else {
+		t3 = $[8];
+	}
+	return t3;
+};
+/**
+* Reads the field and item context shared by the form parts.
+* @returns Accessible ids plus the react-hook-form state of the enclosing field.
+* @throws When used outside `<FormField>`, where no field name is available.
+*/
+const useFormField = () => {
+	const $ = _c(13);
+	const fieldContext = React.useContext(FormFieldContext);
+	const itemContext = React.useContext(FormItemContext);
+	const { getFieldState } = useFormContext();
+	let t0;
+	if ($[0] !== fieldContext.name) {
+		t0 = { name: fieldContext.name };
+		$[0] = fieldContext.name;
+		$[1] = t0;
+	} else {
+		t0 = $[1];
+	}
+	const formState = useFormState(t0);
+	if (!fieldContext.name) {
+		throw new Error("useFormField: must be used within <FormField>, which provides the field name");
+	}
+	let t1;
+	if ($[2] !== fieldContext.name || $[3] !== formState || $[4] !== getFieldState) {
+		t1 = getFieldState(fieldContext.name, formState);
+		$[2] = fieldContext.name;
+		$[3] = formState;
+		$[4] = getFieldState;
+		$[5] = t1;
+	} else {
+		t1 = $[5];
+	}
+	const fieldState = t1;
+	const { id } = itemContext;
+	const t2 = `${id}-form-item`;
+	const t3 = `${id}-form-item-description`;
+	const t4 = `${id}-form-item-message`;
+	let t5;
+	if ($[6] !== fieldContext.name || $[7] !== fieldState || $[8] !== id || $[9] !== t2 || $[10] !== t3 || $[11] !== t4) {
+		t5 = {
+			id,
+			name: fieldContext.name,
+			formItemId: t2,
+			formDescriptionId: t3,
+			formMessageId: t4,
+			...fieldState
+		};
+		$[6] = fieldContext.name;
+		$[7] = fieldState;
+		$[8] = id;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else {
+		t5 = $[12];
+	}
+	return t5;
+};
+const FormItemContext = React.createContext({});
+function FormItem(t0) {
+	const $ = _c(13);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const id = React.useId();
+	let t1;
+	if ($[3] !== id) {
+		t1 = { id };
+		$[3] = id;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== className) {
+		t2 = cn("grid gap-2", className);
+		$[5] = className;
+		$[6] = t2;
+	} else {
+		t2 = $[6];
+	}
+	let t3;
+	if ($[7] !== props || $[8] !== t2) {
+		t3 = /* @__PURE__ */ _jsx("div", {
+			"data-slot": "form-item",
+			className: t2,
+			...props
+		});
+		$[7] = props;
+		$[8] = t2;
+		$[9] = t3;
+	} else {
+		t3 = $[9];
+	}
+	let t4;
+	if ($[10] !== t1 || $[11] !== t3) {
+		t4 = /* @__PURE__ */ _jsx(FormItemContext.Provider, {
+			value: t1,
+			children: t3
+		});
+		$[10] = t1;
+		$[11] = t3;
+		$[12] = t4;
+	} else {
+		t4 = $[12];
+	}
+	return t4;
+}
+function FormLabel(t0) {
+	const $ = _c(10);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const { error, formItemId } = useFormField();
+	const t1 = !!error;
+	let t2;
+	if ($[3] !== className) {
+		t2 = cn("data-[error=true]:text-destructive", className);
+		$[3] = className;
+		$[4] = t2;
+	} else {
+		t2 = $[4];
+	}
+	let t3;
+	if ($[5] !== formItemId || $[6] !== props || $[7] !== t1 || $[8] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(Label, {
+			"data-slot": "form-label",
+			"data-error": t1,
+			className: t2,
+			htmlFor: formItemId,
+			...props
+		});
+		$[5] = formItemId;
+		$[6] = props;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+	} else {
+		t3 = $[9];
+	}
+	return t3;
+}
+function FormControl(t0) {
+	const $ = _c(7);
+	let props;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else {
+		props = $[1];
+	}
+	const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+	const t1 = !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`;
+	const t2 = !!error;
+	let t3;
+	if ($[2] !== formItemId || $[3] !== props || $[4] !== t1 || $[5] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(Slot.Root, {
+			"data-slot": "form-control",
+			id: formItemId,
+			"aria-describedby": t1,
+			"aria-invalid": t2,
+			...props
+		});
+		$[2] = formItemId;
+		$[3] = props;
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else {
+		t3 = $[6];
+	}
+	return t3;
+}
+function FormDescription(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];
+	}
+	const { formDescriptionId } = useFormField();
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("text-sm text-muted-foreground", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== formDescriptionId || $[6] !== props || $[7] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("p", {
+			"data-slot": "form-description",
+			id: formDescriptionId,
+			className: t1,
+			...props
+		});
+		$[5] = formDescriptionId;
+		$[6] = props;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	return t2;
+}
+function FormMessage(t0) {
+	const $ = _c(10);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message ?? "") : props.children;
+	if (!body) {
+		return null;
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("text-sm text-destructive", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== body || $[6] !== formMessageId || $[7] !== props || $[8] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "message",
+			children: /* @__PURE__ */ _jsx("p", {
+				"data-slot": "form-message",
+				id: formMessageId,
+				className: t1,
+				...props,
+				children: body
+			})
+		});
+		$[5] = body;
+		$[6] = formMessageId;
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else {
+		t2 = $[9];
+	}
+	return t2;
+}
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

package/dist/components/highlighter.d.ts

@@ -0,0 +1,15 @@
+import type React from "react";
+type AnnotationAction = "highlight" | "underline" | "box" | "circle" | "strike-through" | "crossed-off" | "bracket";
+interface HighlighterProps {
+    children: React.ReactNode;
+    action?: AnnotationAction;
+    color?: string;
+    strokeWidth?: number;
+    animationDuration?: number;
+    iterations?: number;
+    padding?: number;
+    multiline?: boolean;
+    isView?: boolean;
+}
+export declare function Highlighter({ children, action, color, strokeWidth, animationDuration, iterations, padding, multiline, isView, }: HighlighterProps): React.JSX.Element;
+export {};

package/dist/components/highlighter.js

@@ -0,0 +1,152 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from "react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { annotate } from "rough-notation";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Highlighter(t0) {
+	const $ = _c(18);
+	const { children, action: t1, color: t2, strokeWidth: t3, animationDuration: t4, iterations: t5, padding: t6, multiline: t7, isView: t8 } = t0;
+	const action = t1 === undefined ? "highlight" : t1;
+	const color = t2 === undefined ? "#ffd1dc" : t2;
+	const strokeWidth = t3 === undefined ? 1.5 : t3;
+	const animationDuration = t4 === undefined ? 600 : t4;
+	const iterations = t5 === undefined ? 2 : t5;
+	const padding = t6 === undefined ? 2 : t6;
+	const multiline = t7 === undefined ? true : t7;
+	const isView = t8 === undefined ? false : t8;
+	const shouldReduceMotion = usePrefersReducedMotion();
+	const elementRef = useRef(null);
+	const annotationRef = useRef(null);
+	let t9;
+	if ($[0] !== isView) {
+		t9 = () => !isView || typeof IntersectionObserver === "undefined";
+		$[0] = isView;
+		$[1] = t9;
+	} else {
+		t9 = $[1];
+	}
+	const [isInView, setIsInView] = useState(t9);
+	let t10;
+	let t11;
+	if ($[2] !== isView) {
+		t10 = () => {
+			if (!isView) {
+				return;
+			}
+			const element = elementRef.current;
+			if (!element || typeof IntersectionObserver === "undefined") {
+				return;
+			}
+			const observer = new IntersectionObserver((t12) => {
+				const [entry] = t12;
+				if (entry.isIntersecting) {
+					setIsInView(true);
+					observer.disconnect();
+				}
+			}, { rootMargin: "-10%" });
+			observer.observe(element);
+			return () => {
+				observer.disconnect();
+			};
+		};
+		t11 = [isView];
+		$[2] = isView;
+		$[3] = t10;
+		$[4] = t11;
+	} else {
+		t10 = $[3];
+		t11 = $[4];
+	}
+	useEffect(t10, t11);
+	const shouldShow = !isView || isInView;
+	let t12;
+	let t13;
+	if ($[5] !== action || $[6] !== animationDuration || $[7] !== color || $[8] !== iterations || $[9] !== multiline || $[10] !== padding || $[11] !== shouldReduceMotion || $[12] !== shouldShow || $[13] !== strokeWidth) {
+		t12 = () => {
+			const element_0 = elementRef.current;
+			let resizeObserver = null;
+			let redrawFrameId = null;
+			if (shouldShow && element_0) {
+				const annotationConfig = {
+					type: action,
+					color,
+					strokeWidth,
+					animationDuration,
+					animate: !shouldReduceMotion,
+					iterations,
+					padding,
+					multiline
+				};
+				const annotation = annotate(element_0, annotationConfig);
+				annotationRef.current = annotation;
+				annotation.show();
+				if (typeof ResizeObserver !== "undefined") {
+					resizeObserver = new ResizeObserver(() => {
+						if (redrawFrameId != null) {
+							return;
+						}
+						redrawFrameId = window.requestAnimationFrame(() => {
+							redrawFrameId = null;
+							annotation.hide();
+							annotation.show();
+						});
+					});
+					resizeObserver.observe(element_0);
+				}
+			}
+			return () => {
+				if (redrawFrameId != null) {
+					window.cancelAnimationFrame(redrawFrameId);
+				}
+				if (annotationRef.current) {
+					annotationRef.current.remove();
+					annotationRef.current = null;
+				}
+				if (resizeObserver) {
+					resizeObserver.disconnect();
+				}
+			};
+		};
+		t13 = [
+			shouldShow,
+			shouldReduceMotion,
+			action,
+			color,
+			strokeWidth,
+			animationDuration,
+			iterations,
+			padding,
+			multiline
+		];
+		$[5] = action;
+		$[6] = animationDuration;
+		$[7] = color;
+		$[8] = iterations;
+		$[9] = multiline;
+		$[10] = padding;
+		$[11] = shouldReduceMotion;
+		$[12] = shouldShow;
+		$[13] = strokeWidth;
+		$[14] = t12;
+		$[15] = t13;
+	} else {
+		t12 = $[14];
+		t13 = $[15];
+	}
+	useEffect(t12, t13);
+	let t14;
+	if ($[16] !== children) {
+		t14 = /* @__PURE__ */ _jsx("span", {
+			"data-slot": "highlighter",
+			ref: elementRef,
+			className: "relative inline-block bg-transparent",
+			children
+		});
+		$[16] = children;
+		$[17] = t14;
+	} else {
+		t14 = $[17];
+	}
+	return t14;
+}

package/dist/components/hover-card.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Arc's Hover Card (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a read-only preview of a person or
+ * link that opens after half a second of hover or on keyboard focus, grows from the trigger edge on a smooth spring
+ * and closes fast on leave. While a card is open, and briefly after it closes, moving to another trigger opens its
+ * card almost at once and only fades. It follows Arc's closed API, `<HoverCard content={...}>` around its trigger,
+ * with Arc's `HoverCardProfile` preset and open state and placement extensions.
+ */
+import type { ReactElement, ReactNode } from "react";
+import { HoverCardProfile, type HoverCardProfileProps, type HoverCardStat } from "./primitives/hover-card.js";
+/** Side of the trigger a hover card prefers. */
+export type HoverCardSide = "top" | "bottom" | "left" | "right";
+/** Alignment of the card against its trigger. */
+export type HoverCardAlign = "start" | "center" | "end";
+export type HoverCardProps = {
+    /** The trigger, such as a mention button or link. Rendered with `asChild`, so it must accept a ref and be focusable. */
+    children: ReactElement;
+    /** The preview. `HoverCardProfile` covers people. Keep it read only: focus never moves into the card. */
+    content: ReactNode;
+    /** Preferred side of the trigger. Defaults to `bottom`. */
+    side?: HoverCardSide;
+    /** Alignment against the trigger. Defaults to `start`. */
+    align?: HoverCardAlign;
+    /** Milliseconds of hover before the first card opens. Defaults to 500. */
+    openDelay?: number;
+    /** Grace, in milliseconds, after the pointer leaves. Defaults to 140. */
+    closeDelay?: number;
+    /** Class on the card surface. */
+    className?: string;
+    /** Class on the card surface, merged after `className`. */
+    contentClassName?: string;
+    /** Gap, in px, between the card and its trigger. Defaults to 8. */
+    sideOffset?: number;
+    /** Distance, in px, the card keeps from the viewport edges. Defaults to 12. */
+    collisionPadding?: number;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called when the card opens or closes, for example to load its data on open. */
+    onOpenChange?: (open: boolean) => void;
+};
+/**
+ * A read-only preview that opens after a short hover or keyboard focus and stays open while the pointer travels into
+ * it.
+ * @param props - The trigger, the preview and optional timing, placement and open state.
+ * @returns The trigger with its hover card.
+ */
+declare function HoverCard({ children, content, side, align, openDelay, closeDelay, className, contentClassName, sideOffset, collisionPadding, open, defaultOpen, onOpenChange, }: HoverCardProps): import("react").JSX.Element;
+export { HoverCard, HoverCardProfile };
+export type { HoverCardProfileProps, HoverCardStat };

package/dist/components/hover-card.js

@@ -0,0 +1,80 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { cn } from "../lib/utils.js";
+import { HoverCard as HoverCardRoot, HoverCardContent, HoverCardProfile, HoverCardTrigger } from "./primitives/hover-card.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* A read-only preview that opens after a short hover or keyboard focus and stays open while the pointer travels into
+* it.
+* @param props - The trigger, the preview and optional timing, placement and open state.
+* @returns The trigger with its hover card.
+*/
+function HoverCard(t0) {
+	const $ = _c(20);
+	const { children, content, side: t1, align: t2, openDelay, closeDelay, className, contentClassName, sideOffset, collisionPadding, open, defaultOpen, onOpenChange } = t0;
+	const side = t1 === undefined ? "bottom" : t1;
+	const align = t2 === undefined ? "start" : t2;
+	let t3;
+	if ($[0] !== children) {
+		t3 = /* @__PURE__ */ _jsx(HoverCardTrigger, {
+			asChild: true,
+			children
+		});
+		$[0] = children;
+		$[1] = t3;
+	} else {
+		t3 = $[1];
+	}
+	let t4;
+	if ($[2] !== className || $[3] !== contentClassName) {
+		t4 = cn(className, contentClassName);
+		$[2] = className;
+		$[3] = contentClassName;
+		$[4] = t4;
+	} else {
+		t4 = $[4];
+	}
+	let t5;
+	if ($[5] !== align || $[6] !== collisionPadding || $[7] !== content || $[8] !== side || $[9] !== sideOffset || $[10] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(HoverCardContent, {
+			side,
+			align,
+			sideOffset,
+			collisionPadding,
+			className: t4,
+			children: content
+		});
+		$[5] = align;
+		$[6] = collisionPadding;
+		$[7] = content;
+		$[8] = side;
+		$[9] = sideOffset;
+		$[10] = t4;
+		$[11] = t5;
+	} else {
+		t5 = $[11];
+	}
+	let t6;
+	if ($[12] !== closeDelay || $[13] !== defaultOpen || $[14] !== onOpenChange || $[15] !== open || $[16] !== openDelay || $[17] !== t3 || $[18] !== t5) {
+		t6 = /* @__PURE__ */ _jsxs(HoverCardRoot, {
+			openDelay,
+			closeDelay,
+			open,
+			defaultOpen,
+			onOpenChange,
+			children: [t3, t5]
+		});
+		$[12] = closeDelay;
+		$[13] = defaultOpen;
+		$[14] = onOpenChange;
+		$[15] = open;
+		$[16] = openDelay;
+		$[17] = t3;
+		$[18] = t5;
+		$[19] = t6;
+	} else {
+		t6 = $[19];
+	}
+	return t6;
+}
+export { HoverCard, HoverCardProfile };

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { ControlButton } from "./control-button.js";
+declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+    align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
+declare const inputGroupButtonVariants: (props?: ({
+    size?: "icon-sm" | "icon-xs" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof ControlButton>, "size"> & VariantProps<typeof inputGroupButtonVariants>): React.JSX.Element;
+declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function InputGroupInput({ className, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };