@astra-kit/ui 0.0.0-stage → 1.0.0

package/dist/components/textarea.js

@@ -0,0 +1,111 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { cn } from "../lib/utils.js";
+import { Field, usesFieldCopy, useFieldAria } from "./field.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Same focus language as `Input`: the border answers alone and the box never changes size. */
+const textareaClassName = "flex min-h-[110px] w-full resize-y rounded-(--radius-control) border border-border-strong bg-surface p-(--space-3) font-sans text-base leading-(--leading-body) tracking-(--tracking-body) text-foreground outline-none transition-[color,background-color,border-color] duration-(--duration-fast) ease-(--ease-standard) motion-reduce:transition-none placeholder:text-text-muted hover-fine:not-disabled:not-aria-invalid:border-foreground focus-visible:border-foreground aria-invalid:border-danger disabled:cursor-not-allowed disabled:bg-surface-muted disabled:opacity-60 md:text-sm";
+/**
+* Free-form multi-line text, controlled or uncontrolled like a native textarea.
+* @param textareaProps - Optional field copy plus every native textarea attribute, including `ref`, `rows` and `maxLength`.
+* @returns The labelled field when `label`, `description` or `error` is passed (even as `undefined`), otherwise the
+*   bare control.
+*/
+function Textarea(textareaProps) {
+	const $ = _c(26);
+	let className;
+	let description;
+	let error;
+	let id;
+	let label;
+	let props;
+	if ($[0] !== textareaProps) {
+		({className, label, description, error, id, ...props} = textareaProps);
+		$[0] = textareaProps;
+		$[1] = className;
+		$[2] = description;
+		$[3] = error;
+		$[4] = id;
+		$[5] = label;
+		$[6] = props;
+	} else {
+		className = $[1];
+		description = $[2];
+		error = $[3];
+		id = $[4];
+		label = $[5];
+		props = $[6];
+	}
+	let t0;
+	if ($[7] !== description || $[8] !== error || $[9] !== id || $[10] !== props) {
+		t0 = {
+			id,
+			description,
+			error,
+			...props
+		};
+		$[7] = description;
+		$[8] = error;
+		$[9] = id;
+		$[10] = props;
+		$[11] = t0;
+	} else {
+		t0 = $[11];
+	}
+	const aria = useFieldAria(t0);
+	const isField = usesFieldCopy(textareaProps);
+	let t1;
+	if ($[12] !== className) {
+		t1 = cn(textareaClassName, className);
+		$[12] = className;
+		$[13] = t1;
+	} else {
+		t1 = $[13];
+	}
+	const t2 = isField ? aria.controlId : id;
+	const t3 = aria["aria-describedby"];
+	const t4 = aria["aria-invalid"];
+	let t5;
+	if ($[14] !== props || $[15] !== t1 || $[16] !== t2 || $[17] !== t3 || $[18] !== t4) {
+		t5 = /* @__PURE__ */ _jsx("textarea", {
+			"data-slot": "textarea",
+			className: t1,
+			...props,
+			id: t2,
+			"aria-describedby": t3,
+			"aria-invalid": t4
+		});
+		$[14] = props;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+	} else {
+		t5 = $[19];
+	}
+	const control = t5;
+	if (!isField) {
+		return control;
+	}
+	let t6;
+	if ($[20] !== aria || $[21] !== control || $[22] !== description || $[23] !== error || $[24] !== label) {
+		t6 = /* @__PURE__ */ _jsx(Field, {
+			label,
+			description,
+			error,
+			aria,
+			children: control
+		});
+		$[20] = aria;
+		$[21] = control;
+		$[22] = description;
+		$[23] = error;
+		$[24] = label;
+		$[25] = t6;
+	} else {
+		t6 = $[25];
+	}
+	return t6;
+}
+export { Textarea };

package/dist/components/themed-toaster.d.ts

@@ -0,0 +1,7 @@
+import type { ToasterProps } from "sonner";
+/**
+ * Renders shared notification styling using the consumer's resolved theme, on top of @astra-kit/ui's `Toaster`, so its
+ * toasts stay usable from an open `Dialog` (also in `alert` mode) or `Sheet`.
+ */
+declare const ThemedToaster: ({ theme, className, ...props }: ToasterProps) => import("react").JSX.Element;
+export { ThemedToaster };

package/dist/components/themed-toaster.js

@@ -0,0 +1,86 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { cn } from "../lib/utils.js";
+import { Toaster } from "./toaster.js";
+import { useTheme } from "next-themes";
+import { CircleCheck, Info, TriangleAlert, OctagonAlert, Loader } from "lucide-react";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+* Renders shared notification styling using the consumer's resolved theme, on top of @astra-kit/ui's `Toaster`, so its
+* toasts stay usable from an open `Dialog` (also in `alert` mode) or `Sheet`.
+*/
+const ThemedToaster = (t0) => {
+	const $ = _c(13);
+	let className;
+	let props;
+	let theme;
+	if ($[0] !== t0) {
+		({theme, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = theme;
+	} else {
+		className = $[1];
+		props = $[2];
+		theme = $[3];
+	}
+	const { resolvedTheme } = useTheme();
+	const activeTheme = theme ?? (resolvedTheme === "dark" ? "dark" : "light");
+	let t1;
+	if ($[4] !== className) {
+		t1 = cn("toaster group", className);
+		$[4] = className;
+		$[5] = t1;
+	} else {
+		t1 = $[5];
+	}
+	let t2;
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			success: /* @__PURE__ */ _jsx(CircleCheck, { className: "size-4" }),
+			info: /* @__PURE__ */ _jsx(Info, { className: "size-4" }),
+			warning: /* @__PURE__ */ _jsx(TriangleAlert, { className: "size-4" }),
+			error: /* @__PURE__ */ _jsx(OctagonAlert, { className: "size-4" }),
+			loading: /* @__PURE__ */ _jsx(Loader, { className: "size-4 animate-spin" })
+		};
+		t3 = {
+			"--normal-bg": "var(--popover)",
+			"--normal-text": "var(--popover-foreground)",
+			"--normal-border": "var(--border)",
+			"--border-radius": "var(--radius)"
+		};
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		t2 = $[6];
+		t3 = $[7];
+	}
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = { classNames: { toast: "cn-toast" } };
+		$[8] = t4;
+	} else {
+		t4 = $[8];
+	}
+	let t5;
+	if ($[9] !== activeTheme || $[10] !== props || $[11] !== t1) {
+		t5 = /* @__PURE__ */ _jsx(Toaster, {
+			theme: activeTheme,
+			className: t1,
+			icons: t2,
+			style: t3,
+			toastOptions: t4,
+			...props
+		});
+		$[9] = activeTheme;
+		$[10] = props;
+		$[11] = t1;
+		$[12] = t5;
+	} else {
+		t5 = $[12];
+	}
+	return t5;
+};
+export { ThemedToaster };

package/dist/components/toaster.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentProps } from "react";
+import { Toaster as SonnerToaster } from "sonner";
+/**
+ * Renders Sonner's toaster unchanged in look, but keeps its toasts usable while a modal `Dialog` (also in `alert` mode) or
+ * `Sheet` is open: the toast layer takes pointer input even though the modal disables pointer events on the page,
+ * and Sonner's hotkey moves keyboard focus into the toasts past the modal's focus trap (focus returns to the modal
+ * when the focused toast goes away). Accepts every Sonner prop, including `ref`, and keeps the consumer's `className`.
+ * @param props - Sonner's toaster props.
+ * @returns The toast layer.
+ */
+declare const Toaster: ({ className, ...props }: ComponentProps<typeof SonnerToaster>) => import("react").JSX.Element;
+export { Toaster };

package/dist/components/toaster.js

@@ -0,0 +1,62 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { cn } from "../lib/utils.js";
+import { letFocusReachToastLayer } from "../lib/toast-layer.js";
+import { useEffect } from "react";
+import { Toaster as SonnerToaster } from "sonner";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+* Renders Sonner's toaster unchanged in look, but keeps its toasts usable while a modal `Dialog` (also in `alert` mode) or
+* `Sheet` is open: the toast layer takes pointer input even though the modal disables pointer events on the page,
+* and Sonner's hotkey moves keyboard focus into the toasts past the modal's focus trap (focus returns to the modal
+* when the focused toast goes away). Accepts every Sonner prop, including `ref`, and keeps the consumer's `className`.
+* @param props - Sonner's toaster props.
+* @returns The toast layer.
+*/
+const Toaster = (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] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	useEffect(_temp, t1);
+	let t2;
+	if ($[4] !== className) {
+		t2 = cn("pointer-events-auto", className);
+		$[4] = className;
+		$[5] = t2;
+	} else {
+		t2 = $[5];
+	}
+	let t3;
+	if ($[6] !== props || $[7] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(SonnerToaster, {
+			className: t2,
+			...props
+		});
+		$[6] = props;
+		$[7] = t2;
+		$[8] = t3;
+	} else {
+		t3 = $[8];
+	}
+	return t3;
+};
+export { Toaster };
+function _temp() {
+	return letFocusReachToastLayer(document);
+}

package/dist/components/tooltip.d.ts

@@ -0,0 +1,43 @@
+/**
+ * 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, without any app-level provider: the skip window is shared by every tooltip
+ * on the page. It follows Arc's closed API, `<Tooltip content="...">` around its trigger, plus placement and open
+ * state extensions.
+ */
+import type { ReactElement, ReactNode } from "react";
+/** Side of the trigger a tooltip prefers. Arc offers `top` and `bottom`; @astra-kit/ui adds `left` and `right`. */
+export type TooltipSide = "top" | "bottom" | "left" | "right";
+/** Alignment of the bubble against its trigger. */
+export type TooltipAlign = "start" | "center" | "end";
+export type TooltipProps = {
+    /** Supplemental text of the bubble. Icon-only triggers still need their own `aria-label`. */
+    content: ReactNode;
+    /** The trigger. Rendered with `asChild`, so it must accept a ref and be focusable. */
+    children: ReactElement;
+    /** Preferred side of the trigger. Defaults to `top`. */
+    side?: TooltipSide;
+    /** Alignment against the trigger. Defaults to `center`. */
+    align?: TooltipAlign;
+    /** Gap, in px, between the bubble and its trigger. Defaults to 8. */
+    sideOffset?: number;
+    /** Distance, in px, the bubble keeps from the viewport edges. Defaults to 12. */
+    collisionPadding?: number;
+    /** Class added to the bubble. */
+    contentClassName?: string;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called when the tooltip opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Milliseconds of hover or focus before the first tooltip opens. Defaults to Arc's 250. */
+    delayDuration?: number;
+};
+/**
+ * A short label on hover or focus that opens without delay when moving between tooltips.
+ * @param props - The bubble content, the trigger and optional placement and open state.
+ * @returns The trigger with its tooltip.
+ */
+declare function Tooltip({ content, children, side, align, sideOffset, collisionPadding, contentClassName, open, defaultOpen, onOpenChange, delayDuration, }: TooltipProps): import("react").JSX.Element;
+export { Tooltip };

package/dist/components/tooltip.js

@@ -0,0 +1,65 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { Tooltip as TooltipRoot, TooltipContent, TooltipTrigger } from "./primitives/tooltip.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* A short label on hover or focus that opens without delay when moving between tooltips.
+* @param props - The bubble content, the trigger and optional placement and open state.
+* @returns The trigger with its tooltip.
+*/
+function Tooltip(t0) {
+	const $ = _c(16);
+	const { content, children, side, align, sideOffset, collisionPadding, contentClassName, open, defaultOpen, onOpenChange, delayDuration } = t0;
+	let t1;
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ _jsx(TooltipTrigger, {
+			asChild: true,
+			children
+		});
+		$[0] = children;
+		$[1] = t1;
+	} else {
+		t1 = $[1];
+	}
+	let t2;
+	if ($[2] !== align || $[3] !== collisionPadding || $[4] !== content || $[5] !== contentClassName || $[6] !== side || $[7] !== sideOffset) {
+		t2 = /* @__PURE__ */ _jsx(TooltipContent, {
+			side,
+			align,
+			sideOffset,
+			collisionPadding,
+			className: contentClassName,
+			children: content
+		});
+		$[2] = align;
+		$[3] = collisionPadding;
+		$[4] = content;
+		$[5] = contentClassName;
+		$[6] = side;
+		$[7] = sideOffset;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	let t3;
+	if ($[9] !== defaultOpen || $[10] !== delayDuration || $[11] !== onOpenChange || $[12] !== open || $[13] !== t1 || $[14] !== t2) {
+		t3 = /* @__PURE__ */ _jsxs(TooltipRoot, {
+			open,
+			defaultOpen,
+			onOpenChange,
+			delayDuration,
+			children: [t1, t2]
+		});
+		$[9] = defaultOpen;
+		$[10] = delayDuration;
+		$[11] = onOpenChange;
+		$[12] = open;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+	} else {
+		t3 = $[15];
+	}
+	return t3;
+}
+export { Tooltip };

package/dist/components/typing-animation.d.ts

@@ -0,0 +1,34 @@
+import { type DOMMotionComponents, type HTMLMotionProps, type MotionProps } from "motion/react";
+declare const motionElements: {
+    readonly article: import("motion/react").ForwardRefComponent<HTMLElement, HTMLMotionProps<"article">>;
+    readonly div: import("motion/react").ForwardRefComponent<HTMLDivElement, HTMLMotionProps<"div">>;
+    readonly h1: import("motion/react").ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h1">>;
+    readonly h2: import("motion/react").ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h2">>;
+    readonly h3: import("motion/react").ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h3">>;
+    readonly h4: import("motion/react").ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h4">>;
+    readonly h5: import("motion/react").ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h5">>;
+    readonly h6: import("motion/react").ForwardRefComponent<HTMLHeadingElement, HTMLMotionProps<"h6">>;
+    readonly li: import("motion/react").ForwardRefComponent<HTMLLIElement, HTMLMotionProps<"li">>;
+    readonly p: import("motion/react").ForwardRefComponent<HTMLParagraphElement, HTMLMotionProps<"p">>;
+    readonly section: import("motion/react").ForwardRefComponent<HTMLElement, HTMLMotionProps<"section">>;
+    readonly span: import("motion/react").ForwardRefComponent<HTMLSpanElement, HTMLMotionProps<"span">>;
+};
+type MotionElementType = Extract<keyof DOMMotionComponents, keyof typeof motionElements>;
+interface TypingAnimationProps extends Omit<MotionProps, "children"> {
+    children?: string;
+    words?: string[];
+    className?: string;
+    duration?: number;
+    typeSpeed?: number;
+    deleteSpeed?: number;
+    delay?: number;
+    pauseDelay?: number;
+    loop?: boolean;
+    as?: MotionElementType;
+    startOnView?: boolean;
+    showCursor?: boolean;
+    blinkCursor?: boolean;
+    cursorStyle?: "line" | "block" | "underscore";
+}
+export declare function TypingAnimation({ children, words, className, duration, typeSpeed, deleteSpeed, delay, pauseDelay, loop, as: Component, startOnView, showCursor, blinkCursor, cursorStyle, ...props }: TypingAnimationProps): import("react").JSX.Element;
+export {};