@astra-kit/ui 0.0.0-stage → 1.0.0

package/dist/components/input-group.js

@@ -0,0 +1,277 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils.js";
+import { ControlButton } from "./control-button.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function InputGroup(t0) {
+	const $ = _c(8);
+	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("group/input-group relative flex min-h-(--control-height-md) w-full min-w-0 items-center rounded-(--radius-control) border border-border-strong bg-surface transition-[color,background-color,border-color] duration-(--duration-fast) ease-(--ease-standard) outline-none motion-reduce:transition-none in-data-[slot=combobox-content]:focus-within:border-inherit has-disabled:bg-surface-muted has-disabled:opacity-50 hover-fine:not-has-disabled:not-has-[[data-slot][aria-invalid=true]]:border-foreground has-[[data-slot=input-group-control]:focus-visible]:border-foreground has-[[data-slot][aria-invalid=true]]:border-danger has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("div", {
+			"data-slot": "input-group",
+			role: "group",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+	variants: { align: {
+		"inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+		"inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+		"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+		"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+function InputGroupAddon(t0) {
+	const $ = _c(11);
+	let className;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({className, align: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+	}
+	const align = t1 === undefined ? "inline-start" : t1;
+	let t2;
+	if ($[4] !== align || $[5] !== className) {
+		t2 = cn(inputGroupAddonVariants({ align }), className);
+		$[4] = align;
+		$[5] = className;
+		$[6] = t2;
+	} else {
+		t2 = $[6];
+	}
+	let t3;
+	if ($[7] !== align || $[8] !== props || $[9] !== t2) {
+		t3 = /* @__PURE__ */ _jsx("div", {
+			role: "group",
+			"data-slot": "input-group-addon",
+			"data-align": align,
+			className: t2,
+			onClick: _temp,
+			...props
+		});
+		$[7] = align;
+		$[8] = props;
+		$[9] = t2;
+		$[10] = t3;
+	} else {
+		t3 = $[10];
+	}
+	return t3;
+}
+function _temp(event) {
+	if (event.target.closest("button")) {
+		return;
+	}
+	event.currentTarget.parentElement?.querySelector("input")?.focus();
+}
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+	variants: { size: {
+		xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+		sm: "",
+		"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
+	} },
+	defaultVariants: { size: "xs" }
+});
+function InputGroupButton(t0) {
+	const $ = _c(15);
+	let className;
+	let props;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({className, type: t1, variant: t2, size: t3, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+		t2 = $[4];
+		t3 = $[5];
+	}
+	const type = t1 === undefined ? "button" : t1;
+	const variant = t2 === undefined ? "ghost" : t2;
+	const size = t3 === undefined ? "xs" : t3;
+	let t4;
+	if ($[6] !== className || $[7] !== size) {
+		t4 = cn(inputGroupButtonVariants({ size }), className);
+		$[6] = className;
+		$[7] = size;
+		$[8] = t4;
+	} else {
+		t4 = $[8];
+	}
+	let t5;
+	if ($[9] !== props || $[10] !== size || $[11] !== t4 || $[12] !== type || $[13] !== variant) {
+		t5 = /* @__PURE__ */ _jsx(ControlButton, {
+			type,
+			"data-size": size,
+			variant,
+			className: t4,
+			...props
+		});
+		$[9] = props;
+		$[10] = size;
+		$[11] = t4;
+		$[12] = type;
+		$[13] = variant;
+		$[14] = t5;
+	} else {
+		t5 = $[14];
+	}
+	return t5;
+}
+function InputGroupText(t0) {
+	const $ = _c(8);
+	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("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("span", {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+function InputGroupInput(t0) {
+	const $ = _c(8);
+	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("min-h-0 flex-1 self-stretch rounded-none border-0 bg-transparent shadow-none disabled:bg-transparent", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(Input, {
+			"data-slot": "input-group-control",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+function InputGroupTextarea(t0) {
+	const $ = _c(8);
+	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("min-h-16 flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none disabled:bg-transparent", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(Textarea, {
+			"data-slot": "input-group-control",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea };

package/dist/components/input.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Arc's Input (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a single-line field on Arc's tokens whose
+ * focus answers with the border colour alone. With a `label`, `description` or `error` it renders Arc's labelled field
+ * with animated helper and error rows; without them it renders the bare control, for input groups, tables and forms
+ * that place their own label.
+ */
+import type { ComponentProps } from "react";
+import type { FieldCopyProps } from "./field.js";
+export type InputProps = ComponentProps<"input"> & FieldCopyProps;
+/**
+ * A single-line text value, controlled or uncontrolled like a native input.
+ * @param inputProps - Optional field copy plus every native input attribute, including `ref`, `name` and `type`.
+ * @returns The labelled field when `label`, `description` or `error` is passed (even as `undefined`), otherwise the
+ *   bare control.
+ */
+declare function Input(inputProps: InputProps): import("react").JSX.Element;
+export { Input };

package/dist/components/input.js

@@ -0,0 +1,120 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { cn } from "../lib/utils.js";
+import { Field, usesFieldCopy, useFieldAria } from "./field.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+* Arc's control recipe. Text stays at 16px on small screens so iOS does not zoom on focus, hover only answers on
+* hover-capable fine pointers, and the field never changes size on focus or error.
+*/
+const inputClassName = "min-h-(--control-height-md) w-full min-w-0 rounded-(--radius-control) border border-border-strong bg-surface px-(--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 file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground 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-50 md:text-sm";
+/**
+* A single-line text value, controlled or uncontrolled like a native input.
+* @param inputProps - Optional field copy plus every native input attribute, including `ref`, `name` and `type`.
+* @returns The labelled field when `label`, `description` or `error` is passed (even as `undefined`), otherwise the
+*   bare control.
+*/
+function Input(inputProps) {
+	const $ = _c(28);
+	let className;
+	let description;
+	let error;
+	let id;
+	let label;
+	let props;
+	let type;
+	if ($[0] !== inputProps) {
+		({className, type, label, description, error, id, ...props} = inputProps);
+		$[0] = inputProps;
+		$[1] = className;
+		$[2] = description;
+		$[3] = error;
+		$[4] = id;
+		$[5] = label;
+		$[6] = props;
+		$[7] = type;
+	} else {
+		className = $[1];
+		description = $[2];
+		error = $[3];
+		id = $[4];
+		label = $[5];
+		props = $[6];
+		type = $[7];
+	}
+	let t0;
+	if ($[8] !== description || $[9] !== error || $[10] !== id || $[11] !== props) {
+		t0 = {
+			id,
+			description,
+			error,
+			...props
+		};
+		$[8] = description;
+		$[9] = error;
+		$[10] = id;
+		$[11] = props;
+		$[12] = t0;
+	} else {
+		t0 = $[12];
+	}
+	const aria = useFieldAria(t0);
+	const isField = usesFieldCopy(inputProps);
+	let t1;
+	if ($[13] !== className) {
+		t1 = cn(inputClassName, className);
+		$[13] = className;
+		$[14] = t1;
+	} else {
+		t1 = $[14];
+	}
+	const t2 = isField ? aria.controlId : id;
+	const t3 = aria["aria-describedby"];
+	const t4 = aria["aria-invalid"];
+	let t5;
+	if ($[15] !== props || $[16] !== t1 || $[17] !== t2 || $[18] !== t3 || $[19] !== t4 || $[20] !== type) {
+		t5 = /* @__PURE__ */ _jsx(InputPrimitive, {
+			type,
+			"data-slot": "input",
+			className: t1,
+			...props,
+			id: t2,
+			"aria-describedby": t3,
+			"aria-invalid": t4
+		});
+		$[15] = props;
+		$[16] = t1;
+		$[17] = t2;
+		$[18] = t3;
+		$[19] = t4;
+		$[20] = type;
+		$[21] = t5;
+	} else {
+		t5 = $[21];
+	}
+	const control = t5;
+	if (!isField) {
+		return control;
+	}
+	let t6;
+	if ($[22] !== aria || $[23] !== control || $[24] !== description || $[25] !== error || $[26] !== label) {
+		t6 = /* @__PURE__ */ _jsx(Field, {
+			label,
+			description,
+			error,
+			aria,
+			children: control
+		});
+		$[22] = aria;
+		$[23] = control;
+		$[24] = description;
+		$[25] = error;
+		$[26] = label;
+		$[27] = t6;
+	} else {
+		t6 = $[27];
+	}
+	return t6;
+}
+export { Input };

package/dist/components/label.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Label as LabelPrimitive } from "radix-ui";
+declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): React.JSX.Element;
+export { Label };

package/dist/components/label.js

@@ -0,0 +1,43 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import * as React from "react";
+import { Label as LabelPrimitive } from "radix-ui";
+import { cn } from "../lib/utils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function Label(t0) {
+	const $ = _c(8);
+	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("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(LabelPrimitive.Root, {
+			"data-slot": "label",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+export { Label };

package/dist/components/link.d.ts

@@ -0,0 +1,9 @@
+/** Selects the configured routing adapter while keeping a native anchor fallback. */
+import type { ComponentType } from "react";
+import { type AstraLinkProps } from "../providers/astra-ui-provider.js";
+/** Shares native link props and explicit per-link navigation overrides. */
+export type LinkProps = AstraLinkProps & {
+    component?: ComponentType<AstraLinkProps> | "a";
+};
+/** Uses the provider's adapter and excludes framework hints from native DOM attributes. */
+export declare function Link({ component, prefetch, ...props }: LinkProps): import("react").JSX.Element;

package/dist/components/link.js

@@ -0,0 +1,43 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { useAstraUIComponents } from "../providers/astra-ui-provider.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Uses the provider's adapter and excludes framework hints from native DOM attributes. */
+export function Link(t0) {
+	const $ = _c(8);
+	let component;
+	let prefetch;
+	let props;
+	if ($[0] !== t0) {
+		({component, prefetch, ...props} = t0);
+		$[0] = t0;
+		$[1] = component;
+		$[2] = prefetch;
+		$[3] = props;
+	} else {
+		component = $[1];
+		prefetch = $[2];
+		props = $[3];
+	}
+	const adapters = useAstraUIComponents();
+	const Component = component ?? adapters.Link;
+	let t1;
+	if ($[4] !== Component || $[5] !== prefetch || $[6] !== props) {
+		t1 = !Component || Component === "a" ? /* @__PURE__ */ _jsx("a", {
+			"data-slot": "link",
+			...props
+		}) : /* @__PURE__ */ _jsx(Component, {
+			"data-slot": "link",
+			...props,
+			prefetch
+		});
+		$[4] = Component;
+		$[5] = prefetch;
+		$[6] = props;
+		$[7] = t1;
+	} else {
+		t1 = $[7];
+	}
+	const link = t1;
+	return link;
+}

package/dist/components/morph-text.d.ts

@@ -0,0 +1,14 @@
+import type { Ref } from "react";
+export type MorphTextProps = {
+    text: string;
+    reduceMotion: boolean;
+    /** Row of glyphs, for a caller that springs its slot to the row's width with `useMorphWidth`. */
+    ref?: Ref<HTMLSpanElement>;
+};
+/**
+ * Morphs one label into the next: kept letters glide into place and new ones rise in from a soft blur. The row
+ * keeps its natural width; callers spring the slot around it.
+ * @param props - Label text, whether the user prefers reduced motion and an optional ref to the row.
+ * @returns The row of animated letters. Callers hide it from assistive tech and name their control otherwise.
+ */
+export declare function MorphText({ text, reduceMotion, ref }: MorphTextProps): import("react").JSX.Element;