@astra-kit/ui 0.0.0-stage → 1.0.0

package/dist/components/dropdown-menu.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Arc's Dropdown menu (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a labelled trigger that opens a
+ * focused list of actions on Arc's raised panel, with item rows, danger tone, separators, a staggered item entrance
+ * and a highlight that glides between items with the keyboard. It follows Arc's closed API: items are data, not
+ * children. @astra-kit/ui adds a custom trigger, link, checkbox and radio rows, trailing content, and placement and open
+ * state of the menu.
+ */
+import type { ReactElement, ReactNode } from "react";
+import { type DropdownItem, type DropdownItemAttributes, type DropdownMenuSelection } from "./primitives/dropdown-menu-items.js";
+/** Side of the trigger the menu prefers. */
+export type DropdownMenuSide = "top" | "right" | "bottom" | "left";
+/** Alignment of the menu against its trigger. */
+export type DropdownMenuAlign = "start" | "center" | "end";
+export type DropdownMenuProps = {
+    /**
+     * Text of the trigger Arc draws, and the accessible name of the menu. With a custom `trigger`, it only names the
+     * menu.
+     */
+    label: string;
+    /** Rows of the menu, in order. */
+    items: DropdownItem[];
+    /** Leading icon of the trigger Arc draws. */
+    icon?: ReactNode;
+    /**
+     * Your own trigger, rendered with `asChild` instead of Arc's labelled button, such as an icon button with its own
+     * `aria-label`. It must accept a ref and be focusable. While the rendered trigger is disabled (its own `disabled`, an
+     * ancestor `<fieldset disabled>`) or has `aria-disabled="true"`, the menu does not open.
+     */
+    trigger?: ReactElement;
+    /** Single selection: rows with a `value` render as radio items checked against `selection.value`. */
+    selection?: DropdownMenuSelection;
+    /** Preferred side of the trigger. Defaults to `bottom`. */
+    side?: DropdownMenuSide;
+    /** Alignment against the trigger. Defaults to `start`. */
+    align?: DropdownMenuAlign;
+    /** Class added to the menu panel. */
+    contentClassName?: string;
+    /** Accessible name of the menu when it should differ from `label`. */
+    contentLabel?: string;
+    /** Class added to the trigger Arc draws. */
+    className?: string;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called when the menu opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Blocks outside interaction and hides the rest of the page from assistive technology while open. Defaults to `true`. */
+    modal?: boolean;
+};
+/**
+ * A focused list of actions anchored to a trigger.
+ * @param props - The label, the items and optional trigger, selection, placement and open state.
+ * @returns The trigger with its menu.
+ */
+declare function DropdownMenu({ label, items, icon, trigger, selection, side, align, contentClassName, contentLabel, className, open, defaultOpen, onOpenChange, modal, }: DropdownMenuProps): import("react").JSX.Element;
+export { DropdownMenu };
+export type { DropdownItem, DropdownItemAttributes, DropdownMenuSelection };

package/dist/components/dropdown-menu.js

@@ -0,0 +1,135 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { ChevronDownIcon } from "lucide-react";
+import { DROPDOWN_MENU_OPEN_KEYS, DROPDOWN_MENU_UNAVAILABLE_TRIGGER_SELECTOR } from "../constants/dropdown-menu.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { DropdownMenu as DropdownMenuRoot, DropdownMenuContent, DropdownMenuTrigger } from "./primitives/dropdown-menu.js";
+import { DropdownMenuItems } from "./primitives/dropdown-menu-items.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* Tells whether the rendered trigger is unavailable, however it got there: its own `disabled`, an ancestor
+* `<fieldset disabled>`, state derived inside a custom component, or `aria-disabled="true"`.
+* @param trigger - Element the event reached.
+* @returns Whether the menu must stay closed.
+*/
+function isUnavailableTrigger(trigger) {
+	return trigger.matches(DROPDOWN_MENU_UNAVAILABLE_TRIGGER_SELECTOR);
+}
+/**
+* Keeps an unavailable trigger from opening the menu on press. The engine still delivers `pointerdown` to a disabled
+* button, and Radix opens on it unless the event is already default-prevented.
+* @param event - Pointer event on the trigger.
+*/
+function preventPointerOpenWhileUnavailable(event) {
+	if (isUnavailableTrigger(event.currentTarget)) event.preventDefault();
+}
+/**
+* Keeps an `aria-disabled` trigger, which stays focusable, from opening the menu with Enter, Space or ArrowDown. Other
+* keys, such as Tab, keep their default so focus can leave it.
+* @param event - Keyboard event on the trigger.
+*/
+function preventKeyboardOpenWhileUnavailable(event) {
+	if (DROPDOWN_MENU_OPEN_KEYS.includes(event.key) && isUnavailableTrigger(event.currentTarget)) event.preventDefault();
+}
+/**
+* A focused list of actions anchored to a trigger.
+* @param props - The label, the items and optional trigger, selection, placement and open state.
+* @returns The trigger with its menu.
+*/
+function DropdownMenu(t0) {
+	const $ = _c(23);
+	const { label, items, icon, trigger, selection, side, align, contentClassName, contentLabel, className, open, defaultOpen, onOpenChange, modal } = t0;
+	let t1;
+	if ($[0] !== className || $[1] !== icon || $[2] !== label || $[3] !== trigger) {
+		t1 = trigger ?? /* @__PURE__ */ _jsxs(Button, {
+			variant: "secondary",
+			className: cn("max-w-full", className),
+			children: [
+				icon,
+				/* @__PURE__ */ _jsx("span", {
+					className: "min-w-0 truncate",
+					children: label
+				}),
+				/* @__PURE__ */ _jsx(ChevronDownIcon, {
+					"aria-hidden": "true",
+					strokeWidth: 1.75,
+					className: "text-text-muted"
+				})
+			]
+		});
+		$[0] = className;
+		$[1] = icon;
+		$[2] = label;
+		$[3] = trigger;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(DropdownMenuTrigger, {
+			asChild: true,
+			onPointerDown: preventPointerOpenWhileUnavailable,
+			onKeyDown: preventKeyboardOpenWhileUnavailable,
+			children: t1
+		});
+		$[5] = t1;
+		$[6] = t2;
+	} else {
+		t2 = $[6];
+	}
+	const t3 = contentLabel ?? label;
+	let t4;
+	if ($[7] !== items || $[8] !== selection) {
+		t4 = /* @__PURE__ */ _jsx(DropdownMenuItems, {
+			items,
+			selection
+		});
+		$[7] = items;
+		$[8] = selection;
+		$[9] = t4;
+	} else {
+		t4 = $[9];
+	}
+	let t5;
+	if ($[10] !== align || $[11] !== contentClassName || $[12] !== side || $[13] !== t3 || $[14] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(DropdownMenuContent, {
+			side,
+			align,
+			className: contentClassName,
+			"aria-label": t3,
+			"aria-labelledby": undefined,
+			children: t4
+		});
+		$[10] = align;
+		$[11] = contentClassName;
+		$[12] = side;
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = t5;
+	} else {
+		t5 = $[15];
+	}
+	let t6;
+	if ($[16] !== defaultOpen || $[17] !== modal || $[18] !== onOpenChange || $[19] !== open || $[20] !== t2 || $[21] !== t5) {
+		t6 = /* @__PURE__ */ _jsxs(DropdownMenuRoot, {
+			open,
+			defaultOpen,
+			onOpenChange,
+			modal,
+			children: [t2, t5]
+		});
+		$[16] = defaultOpen;
+		$[17] = modal;
+		$[18] = onOpenChange;
+		$[19] = open;
+		$[20] = t2;
+		$[21] = t5;
+		$[22] = t6;
+	} else {
+		t6 = $[22];
+	}
+	return t6;
+}
+export { DropdownMenu };

package/dist/components/field.d.ts

@@ -0,0 +1,53 @@
+import type { AriaAttributes, ReactNode } from "react";
+/** Copy that turns a bare control into a labelled field. */
+export type FieldCopyProps = {
+    /** Visible label, tied to the control with `htmlFor`. */
+    label?: string;
+    /** Helper copy under the control, linked through `aria-describedby`; counts in it roll their digits. */
+    description?: string;
+    /** Error copy: sets `aria-invalid` and renders in a `role="alert"` row that rewords in place. */
+    error?: string;
+};
+type FieldAriaOptions = FieldCopyProps & {
+    id?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: AriaAttributes["aria-invalid"];
+};
+/** Ids and ARIA wiring a labelled field passes to its control. */
+export type FieldAria = {
+    controlId: string;
+    descriptionId: string;
+    errorId: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: AriaAttributes["aria-invalid"];
+};
+/**
+ * Resolves the control id (the caller's or a generated one) and merges the helper and error ids into the caller's
+ * `aria-describedby`. An error always marks the control invalid.
+ * @param options - Field copy and the caller's id and ARIA attributes.
+ * @returns The ids and ARIA attributes for the control.
+ */
+export declare function useFieldAria({ id, description, error, ...aria }: FieldAriaOptions): FieldAria;
+/**
+ * Tells whether a control renders as a labelled field. It looks at which props were passed, not at their values, so a
+ * field whose error or description comes and goes keeps the same tree and its control never remounts (losing an
+ * uncontrolled value or the focus) when validation appears.
+ * @param props - Props passed to the control.
+ * @returns `true` when the caller passed `label`, `description` or `error`, even as `undefined`.
+ */
+export declare function usesFieldCopy(props: FieldCopyProps): boolean;
+type FieldProps = Omit<FieldCopyProps, "label"> & {
+    label?: string;
+    /** Keeps the label for assistive technology only, for layouts that already show their own label. */
+    hideLabel?: boolean;
+    aria: FieldAria;
+    className?: string;
+    children: ReactNode;
+};
+/**
+ * Arc's field layout: label, control, then the helper and error rows. There is no row gap, because grid tracks clamp
+ * a negative margin at zero and a closed row would still pay it; each row carries its own space instead. The wrapper
+ * keeps the bare control's full-width contract, so a field fills a flex row like the control alone does.
+ */
+export declare function Field({ label, hideLabel, description, error, aria, className, children }: FieldProps): import("react").JSX.Element;
+export {};