@instruments/materia-ui 0.1.0

package/dist/components/accordion/accordion-anatomy.d.ts

@@ -0,0 +1,5 @@
+/**
+ * accordionAnatomy helper for Accordion.
+ * Import from "@instruments/materia-ui/components/accordion".
+ */
+export declare const accordionAnatomy: import("../../tokens/anatomy.js").ComponentAnatomy;

package/dist/components/accordion/accordion-anatomy.js

@@ -0,0 +1,29 @@
+import { defineAnatomy } from "../../tokens/anatomy.js";
+/**
+ * accordionAnatomy helper for Accordion.
+ * Import from "@instruments/materia-ui/components/accordion".
+ */
+export const accordionAnatomy = defineAnatomy({
+    children: [
+        {
+            children: [
+                {
+                    description: "Button to toggle content visibility",
+                    label: "AccordionTrigger",
+                    slot: "accordion-trigger",
+                },
+                {
+                    description: "Collapsible content area",
+                    label: "AccordionContent",
+                    slot: "accordion-content",
+                },
+            ],
+            description: "Single collapsible section",
+            label: "AccordionItem",
+            slot: "accordion-item",
+        },
+    ],
+    description: "Expandable content sections",
+    label: "Accordion",
+    slot: "accordion",
+});

package/dist/components/accordion/accordion-content.d.ts

@@ -0,0 +1,6 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+/** Collapsible content panel for accordion items with animated expand/collapse */
+declare const AccordionContent: ({ className, children, ...rest }: Omit<AccordionPrimitive.Panel.Props, "className"> & {
+    className?: string;
+}) => import("react").JSX.Element;
+export { AccordionContent };

package/dist/components/accordion/accordion-content.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { useAccordionContext, useAccordionItem, } from "../accordion/accordion-context.js";
+import { accordionContentVariants } from "../accordion/accordion-variants.js";
+/** Collapsible content panel for accordion items with animated expand/collapse */
+const AccordionContent = ({ className, children, ...rest }) => {
+    const { variant } = useAccordionContext();
+    const { value } = useAccordionItem();
+    return (_jsx(AccordionPrimitive.Panel, { className: cn(accordionContentVariants({ variant }), className), "data-slot": "accordion-content", "data-testid": `accordion-content-${value}`, keepMounted: true, ...rest, children: _jsx("div", { className: "pt-0 pb-5", children: children }) }));
+};
+export { AccordionContent };

package/dist/components/accordion/accordion-context.d.ts

@@ -0,0 +1,28 @@
+/** Context type for accordion styling and behaviour configuration */
+interface AccordionContextType {
+    /** Icon type for expand/collapse indicator */
+    indicator?: "arrow" | "plus" | "none" | undefined;
+    /** Visual style variant */
+    variant?: "default" | "outline" | "solid" | undefined;
+}
+/** Context type for individual accordion item state */
+interface AccordionItemContextType {
+    /** Unique identifier for the item */
+    value: string;
+}
+/**
+ * AccordionContext UI component.
+ * Import from "@instruments/materia-ui/components/accordion".
+ */
+declare const AccordionContext: import("react").Context<AccordionContextType>;
+/**
+ * AccordionItemContext UI component.
+ * Import from "@instruments/materia-ui/components/accordion".
+ */
+declare const AccordionItemContext: import("react").Context<AccordionItemContextType | null>;
+/** Hook to access accordion-level configuration and state */
+declare const useAccordionContext: () => AccordionContextType;
+/** Hook to access individual accordion item state */
+declare const useAccordionItem: () => AccordionItemContextType;
+export type { AccordionContextType, AccordionItemContextType };
+export { AccordionContext, AccordionItemContext, useAccordionContext, useAccordionItem, };

package/dist/components/accordion/accordion-context.js

@@ -0,0 +1,26 @@
+"use client";
+import { createContext, use } from "react";
+/**
+ * AccordionContext UI component.
+ * Import from "@instruments/materia-ui/components/accordion".
+ */
+const AccordionContext = createContext({
+    indicator: "arrow",
+    variant: "default",
+});
+/**
+ * AccordionItemContext UI component.
+ * Import from "@instruments/materia-ui/components/accordion".
+ */
+const AccordionItemContext = createContext(null);
+/** Hook to access accordion-level configuration and state */
+const useAccordionContext = () => use(AccordionContext);
+/** Hook to access individual accordion item state */
+const useAccordionItem = () => {
+    const context = use(AccordionItemContext);
+    if (!context) {
+        throw new Error("AccordionTrigger/Content must be used within AccordionItem");
+    }
+    return context;
+};
+export { AccordionContext, AccordionItemContext, useAccordionContext, useAccordionItem, };

package/dist/components/accordion/accordion-item.d.ts

@@ -0,0 +1,8 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+/** Individual accordion item containing a trigger and collapsible content */
+declare const AccordionItem: ({ className, children, value, ...rest }: Omit<AccordionPrimitive.Item.Props, "className" | "value"> & {
+    className?: string;
+    /** Identifier matched against the root's `value` array. */
+    value: string;
+}) => import("react").JSX.Element;
+export { AccordionItem };

package/dist/components/accordion/accordion-item.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { useMemo } from "react";
+import { AccordionItemContext, useAccordionContext, } from "../accordion/accordion-context.js";
+import { accordionItemVariants } from "../accordion/accordion-variants.js";
+/** Individual accordion item containing a trigger and collapsible content */
+const AccordionItem = ({ className, children, value, ...rest }) => {
+    const { variant } = useAccordionContext();
+    const contextValue = useMemo(() => ({ value }), [value]);
+    return (_jsx(AccordionItemContext.Provider, { value: contextValue, children: _jsx(AccordionPrimitive.Item, { className: cn(accordionItemVariants({ variant }), className), "data-slot": "accordion-item", "data-testid": `accordion-item-${value}`, value: value, ...rest, children: children }) }));
+};
+export { AccordionItem };

package/dist/components/accordion/accordion-root.d.ts

@@ -0,0 +1,23 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import type { VariantProps } from "class-variance-authority";
+import { accordionRootVariants } from "../accordion/accordion-variants.js";
+/**
+ * Collapsible panel container that wraps Base UI Accordion, supporting one
+ * (default) or several (`multiple`) open items. Works controlled (`value`) or
+ * uncontrolled (`defaultValue`); compose with AccordionItem, AccordionTrigger,
+ * and AccordionContent. Values are always arrays of item `value`s.
+ *
+ * @bestPractice Leave `multiple` off for one-at-a-time panels or set it to allow several open at once; `value`/`defaultValue` are arrays either way, and an open item can always be closed again.
+ * @bestPractice Reach for `Collapsible` instead when there is a single expandable region - `Accordion` is for a set of grouped items keyed by `value`.
+ * @bestPractice Children must be `AccordionItem`s (each with `AccordionTrigger`/`AccordionContent`); the item's `value` is what `value`/`defaultValue` match against.
+ * @category data
+ */
+declare const AccordionRoot: <Value = string>({ className, variant, indicator, children, ...rest }: Omit<AccordionPrimitive.Root.Props<Value>, "className"> & VariantProps<typeof accordionRootVariants> & {
+    className?: string;
+    /**
+     * Expand/collapse indicator icon.
+     * @default "arrow"
+     */
+    indicator?: "arrow" | "plus";
+}) => import("react").JSX.Element;
+export { AccordionRoot };

package/dist/components/accordion/accordion-root.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { useMemo } from "react";
+import { AccordionContext } from "../accordion/accordion-context.js";
+import { accordionRootVariants } from "../accordion/accordion-variants.js";
+/**
+ * Collapsible panel container that wraps Base UI Accordion, supporting one
+ * (default) or several (`multiple`) open items. Works controlled (`value`) or
+ * uncontrolled (`defaultValue`); compose with AccordionItem, AccordionTrigger,
+ * and AccordionContent. Values are always arrays of item `value`s.
+ *
+ * @bestPractice Leave `multiple` off for one-at-a-time panels or set it to allow several open at once; `value`/`defaultValue` are arrays either way, and an open item can always be closed again.
+ * @bestPractice Reach for `Collapsible` instead when there is a single expandable region - `Accordion` is for a set of grouped items keyed by `value`.
+ * @bestPractice Children must be `AccordionItem`s (each with `AccordionTrigger`/`AccordionContent`); the item's `value` is what `value`/`defaultValue` match against.
+ * @category data
+ */
+const AccordionRoot = ({ className, variant = "default", indicator = "arrow", children, ...rest }) => {
+    const contextValue = useMemo(() => ({ indicator, variant: variant ?? "default" }), [variant, indicator]);
+    return (_jsx(AccordionContext.Provider, { value: contextValue, children: _jsx(AccordionPrimitive.Root, { className: cn(accordionRootVariants({ variant }), className), "data-slot": "accordion", ...rest, children: children }) }));
+};
+export { AccordionRoot };

package/dist/components/accordion/accordion-trigger.d.ts

@@ -0,0 +1,6 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+/** Clickable trigger button that expands/collapses accordion item content */
+declare const AccordionTrigger: ({ className, children, ...rest }: Omit<AccordionPrimitive.Trigger.Props, "className" | "render"> & {
+    className?: string;
+}) => import("react").JSX.Element;
+export { AccordionTrigger };

package/dist/components/accordion/accordion-trigger.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { durations, easings } from "@instruments/materia-ui/tokens/motion";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { ChevronDown, Plus } from "lucide-react";
+import * as m from "motion/react-m";
+import { useAccordionContext, useAccordionItem, } from "../accordion/accordion-context.js";
+import { accordionTriggerVariants } from "../accordion/accordion-variants.js";
+import { Icon } from "../icon.js";
+/** Clickable trigger button that expands/collapses accordion item content */
+const AccordionTrigger = ({ className, children, ...rest }) => {
+    const { variant, indicator } = useAccordionContext();
+    const { value } = useAccordionItem();
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsx(AccordionPrimitive.Trigger, { className: cn(accordionTriggerVariants({ indicator, variant }), className), "data-slot": "accordion-trigger", "data-testid": `accordion-trigger-${value}`, render: (props, state) => (_jsxs("button", { type: "button", ...props, children: [children, indicator === "plus" && (_jsx(m.div, { animate: { rotate: state.open ? 45 : 0 }, className: "shrink-0", initial: false, transition: {
+                            duration: durations.normal,
+                            ease: easings.out,
+                        }, children: _jsx(Icon, { icon: Plus, size: "xs" }) })), indicator === "arrow" && (_jsx(m.div, { animate: { rotate: state.open ? 180 : 0 }, className: "shrink-0", initial: false, transition: {
+                            duration: durations.normal,
+                            ease: easings.out,
+                        }, children: _jsx(Icon, { icon: ChevronDown, size: "xs" }) }))] })), ...rest }) }));
+};
+export { AccordionTrigger };

package/dist/components/accordion/accordion-variants.d.ts

@@ -0,0 +1,17 @@
+/** Accordion root container style variants */
+export declare const accordionRootVariants: (props?: ({
+    variant?: "default" | "outline" | "solid" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Accordion item style variants */
+export declare const accordionItemVariants: (props?: ({
+    variant?: "default" | "outline" | "solid" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Accordion trigger button style variants */
+export declare const accordionTriggerVariants: (props?: ({
+    variant?: "default" | "outline" | "solid" | null | undefined;
+    indicator?: "arrow" | "none" | "plus" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Accordion content area style variants */
+export declare const accordionContentVariants: (props?: ({
+    variant?: "default" | "outline" | "solid" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/accordion/accordion-variants.js

@@ -0,0 +1,63 @@
+"use client";
+import { cva } from "class-variance-authority";
+import { focusRing } from "../../tokens/focus-ring.js";
+import { DISABLED } from "../../tokens/input-shell.js";
+import { cn } from "../../utils/cn.js";
+/** Accordion root container style variants */
+export const accordionRootVariants = cva("", {
+    defaultVariants: {
+        variant: "default",
+    },
+    variants: {
+        variant: {
+            default: "",
+            outline: "space-y-2",
+            solid: "space-y-2",
+        },
+    },
+});
+/** Accordion item style variants */
+export const accordionItemVariants = cva("", {
+    defaultVariants: {
+        variant: "default",
+    },
+    variants: {
+        variant: {
+            default: "border-border border-b",
+            outline: "border-border rounded-lg border px-4",
+            solid: "bg-accent/70 rounded-lg px-4",
+        },
+    },
+});
+/** Accordion trigger button style variants */
+export const accordionTriggerVariants = cva(cn(focusRing(), "text-paragraph-sm flex flex-1 cursor-pointer items-center justify-between gap-2 rounded-md py-4 text-start font-medium transition-colors hover:underline", DISABLED), {
+    defaultVariants: {
+        indicator: "arrow",
+        variant: "default",
+    },
+    variants: {
+        variant: {
+            default: "",
+            outline: "",
+            solid: "",
+        },
+        indicator: {
+            arrow: "",
+            plus: "",
+            none: "",
+        },
+    },
+});
+/** Accordion content area style variants */
+export const accordionContentVariants = cva("transition-panel text-paragraph-sm h-(--accordion-panel-height) overflow-hidden ease-out data-ending-style:h-0 data-ending-style:opacity-0 data-starting-style:h-0 data-starting-style:opacity-0 motion-reduce:transition-none", {
+    defaultVariants: {
+        variant: "default",
+    },
+    variants: {
+        variant: {
+            default: "",
+            outline: "",
+            solid: "",
+        },
+    },
+});

package/dist/components/accordion.d.ts

@@ -0,0 +1,5 @@
+export { accordionAnatomy } from "./accordion/accordion-anatomy.js";
+export { AccordionContent } from "./accordion/accordion-content.js";
+export { AccordionItem } from "./accordion/accordion-item.js";
+export { AccordionRoot as Accordion } from "./accordion/accordion-root.js";
+export { AccordionTrigger } from "./accordion/accordion-trigger.js";

package/dist/components/accordion.js

@@ -0,0 +1,5 @@
+export { accordionAnatomy } from "./accordion/accordion-anatomy.js";
+export { AccordionContent } from "./accordion/accordion-content.js";
+export { AccordionItem } from "./accordion/accordion-item.js";
+export { AccordionRoot as Accordion } from "./accordion/accordion-root.js";
+export { AccordionTrigger } from "./accordion/accordion-trigger.js";

package/dist/components/alert/alert-anatomy.d.ts

@@ -0,0 +1,5 @@
+/**
+ * alertAnatomy helper for AlertAnatomy.
+ * Import from "@instruments/materia-ui/components/alert-anatomy".
+ */
+export declare const alertAnatomy: import("../../tokens/anatomy.js").ComponentAnatomy;

package/dist/components/alert/alert-anatomy.js

@@ -0,0 +1,19 @@
+import { defineAnatomy } from "../../tokens/anatomy.js";
+/**
+ * alertAnatomy helper for AlertAnatomy.
+ * Import from "@instruments/materia-ui/components/alert-anatomy".
+ */
+export const alertAnatomy = defineAnatomy({
+    children: [
+        { description: "Leading icon", label: "AlertIcon", slot: "alert-icon" },
+        { description: "Alert heading", label: "AlertTitle", slot: "alert-title" },
+        {
+            description: "Alert body text",
+            label: "AlertDescription",
+            slot: "alert-description",
+        },
+    ],
+    description: "Displays a callout for important information",
+    label: "Alert",
+    slot: "alert",
+});

package/dist/components/alert/alert-description.d.ts

@@ -0,0 +1,7 @@
+import type * as React from "react";
+/**
+ * Body copy for an `Alert`. Sits in the alert's text column below the title and
+ * takes muted styling (or the danger tint when the alert is `tone="danger"`).
+ */
+declare const AlertDescription: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
+export { AlertDescription };

package/dist/components/alert/alert-description.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Grid } from "../grid.js";
+/**
+ * Body copy for an `Alert`. Sits in the alert's text column below the title and
+ * takes muted styling (or the danger tint when the alert is `tone="danger"`).
+ */
+const AlertDescription = ({ className, ...props }) => (_jsx(Grid, { className: cn("text-muted-foreground text-paragraph-sm col-start-2 justify-items-start", className), columns: "none", "data-component": "alert-description", "data-slot": "alert-description", gap: "2xs", ...props }));
+export { AlertDescription };

package/dist/components/alert/alert-root.d.ts

@@ -0,0 +1,21 @@
+import type { VariantProps } from "class-variance-authority";
+import type * as React from "react";
+declare const alertVariants: (props?: ({
+    tone?: "danger" | "neutral" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Callout banner for important messages, composed with `AlertTitle` and
+ * `AlertDescription`.
+ *
+ * Lay out as a two-column grid: a direct-child `<svg>` is auto-detected and
+ * given its own icon column, otherwise the text spans full width. Renders
+ * `role="alert"` so screen readers announce it; `tone="danger"` recolours the
+ * text and description for error states.
+ *
+ * @bestPractice Use `Alert` for a persistent inline message block; a transient, auto-dismissing notification is a toast (`Toaster` and `toast()` from `components/toast`).
+ * @bestPractice Compose `AlertTitle` / `AlertDescription` as children and render a direct-child `<svg>` for the auto-detected icon column; `tone="danger"` recolours for errors.
+ * @bestPractice It renders `role="alert"`, so AT announces it on mount - keep it a notice, not a container for heavy interactive UI.
+ * @category feedback
+ */
+declare const Alert: ({ className, tone, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) => React.JSX.Element;
+export { Alert };

package/dist/components/alert/alert-root.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { cva } from "class-variance-authority";
+const alertVariants = cva("text-paragraph-sm relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 shadow-xs has-[>svg]:grid-cols-[--spacing(4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
+    defaultVariants: {
+        tone: "neutral",
+    },
+    variants: {
+        // Lockstep: Alert's tone is the canon subset Extract<Tone, neutral|danger>.
+        tone: {
+            neutral: "bg-card text-card-foreground",
+            danger: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+        },
+    },
+});
+/**
+ * Callout banner for important messages, composed with `AlertTitle` and
+ * `AlertDescription`.
+ *
+ * Lay out as a two-column grid: a direct-child `<svg>` is auto-detected and
+ * given its own icon column, otherwise the text spans full width. Renders
+ * `role="alert"` so screen readers announce it; `tone="danger"` recolours the
+ * text and description for error states.
+ *
+ * @bestPractice Use `Alert` for a persistent inline message block; a transient, auto-dismissing notification is a toast (`Toaster` and `toast()` from `components/toast`).
+ * @bestPractice Compose `AlertTitle` / `AlertDescription` as children and render a direct-child `<svg>` for the auto-detected icon column; `tone="danger"` recolours for errors.
+ * @bestPractice It renders `role="alert"`, so AT announces it on mount - keep it a notice, not a container for heavy interactive UI.
+ * @category feedback
+ */
+const Alert = ({ className, tone, ...props }) => (_jsx("div", { className: cn(alertVariants({ tone }), className), "data-component": "alert", "data-slot": "alert", role: "alert", ...props }));
+export { Alert };

package/dist/components/alert/alert-title.d.ts

@@ -0,0 +1,7 @@
+import type * as React from "react";
+/**
+ * Heading line for an `Alert`. Sits in the alert's text column and clamps to a
+ * single line.
+ */
+declare const AlertTitle: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
+export { AlertTitle };

package/dist/components/alert/alert-title.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * Heading line for an `Alert`. Sits in the alert's text column and clamps to a
+ * single line.
+ */
+const AlertTitle = ({ className, ...props }) => (_jsx("div", { className: cn("col-start-2 line-clamp-1 min-h-4 font-medium", className), "data-component": "alert-title", "data-slot": "alert-title", ...props }));
+export { AlertTitle };

package/dist/components/alert-dialog/alert-dialog-action.d.ts

@@ -0,0 +1,15 @@
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import type { ButtonTone } from "@instruments/materia-ui/components/button";
+import type * as React from "react";
+interface AlertDialogActionProps extends Omit<React.ComponentProps<typeof AlertDialogPrimitive.Close>, "className"> {
+    /** Extra classes merged after the Button styles. */
+    className?: string;
+    /** Button tone; pass `"danger"` to signal a destructive confirmation. */
+    tone?: ButtonTone;
+}
+/**
+ * Confirm button styled as a Button; clicking it closes the dialog and runs the
+ * action. Set `tone="danger"` for destructive confirmations.
+ */
+declare const AlertDialogAction: ({ className, tone, ...props }: AlertDialogActionProps) => React.JSX.Element;
+export { AlertDialogAction };

package/dist/components/alert-dialog/alert-dialog-action.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import { buttonVariants } from "@instruments/materia-ui/components/button";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * Confirm button styled as a Button; clicking it closes the dialog and runs the
+ * action. Set `tone="danger"` for destructive confirmations.
+ */
+const AlertDialogAction = ({ className, tone, ...props }) => (_jsx(AlertDialogPrimitive.Close, { className: cn(buttonVariants({ tone }), className), ...props }));
+export { AlertDialogAction };

package/dist/components/alert-dialog/alert-dialog-cancel-focus.d.ts

@@ -0,0 +1,6 @@
+import type { RefObject } from "react";
+/**
+ * Lets `AlertDialogCancel` register itself with `AlertDialogContent`, which
+ * points the popup's `initialFocus` at it so the safe action is focused on open.
+ */
+export declare const AlertDialogCancelFocusContext: import("react").Context<RefObject<HTMLButtonElement | null> | null>;

package/dist/components/alert-dialog/alert-dialog-cancel-focus.js

@@ -0,0 +1,7 @@
+"use client";
+import { createContext } from "react";
+/**
+ * Lets `AlertDialogCancel` register itself with `AlertDialogContent`, which
+ * points the popup's `initialFocus` at it so the safe action is focused on open.
+ */
+export const AlertDialogCancelFocusContext = createContext(null);

package/dist/components/alert-dialog/alert-dialog-cancel.d.ts

@@ -0,0 +1,10 @@
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import type * as React from "react";
+/**
+ * Dismiss button styled as an outline neutral Button; closing the dialog without
+ * running the action. `AlertDialogContent` focuses it when the dialog opens.
+ */
+declare const AlertDialogCancel: ({ className, ...props }: Omit<React.ComponentProps<typeof AlertDialogPrimitive.Close>, "className" | "ref"> & {
+    className?: string;
+}) => React.JSX.Element;
+export { AlertDialogCancel };

package/dist/components/alert-dialog/alert-dialog-cancel.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import { buttonVariants } from "@instruments/materia-ui/components/button";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { use } from "react";
+import { AlertDialogCancelFocusContext } from "./alert-dialog-cancel-focus.js";
+/**
+ * Dismiss button styled as an outline neutral Button; closing the dialog without
+ * running the action. `AlertDialogContent` focuses it when the dialog opens.
+ */
+const AlertDialogCancel = ({ className, ...props }) => (_jsx(AlertDialogPrimitive.Close, { className: cn(buttonVariants({ emphasis: "outline", tone: "neutral" }), className), ref: use(AlertDialogCancelFocusContext), ...props }));
+export { AlertDialogCancel };

package/dist/components/alert-dialog/alert-dialog-content.d.ts

@@ -0,0 +1,12 @@
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import type * as React from "react";
+/**
+ * Centred dialog panel; renders its own portal and scrim overlay internally,
+ * so place it directly under AlertDialog without wrapping it in a portal.
+ * Focus moves to `AlertDialogCancel` when the dialog opens, unless
+ * `initialFocus` is passed.
+ */
+declare const AlertDialogContent: ({ className, initialFocus, ...props }: Omit<React.ComponentProps<typeof AlertDialogPrimitive.Popup>, "className"> & {
+    className?: string;
+}) => React.JSX.Element;
+export { AlertDialogContent };

package/dist/components/alert-dialog/alert-dialog-content.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { useRef } from "react";
+import { OVERLAY_PANEL_ANIMATION, OVERLAY_PANEL_CENTERED, } from "../../tokens/overlay-styles.js";
+import { AlertDialogCancelFocusContext } from "../alert-dialog/alert-dialog-cancel-focus.js";
+import { AlertDialogOverlay } from "../alert-dialog/alert-dialog-overlay.js";
+import { AlertDialogPortal } from "../alert-dialog/alert-dialog-portal.js";
+/**
+ * Centred dialog panel; renders its own portal and scrim overlay internally,
+ * so place it directly under AlertDialog without wrapping it in a portal.
+ * Focus moves to `AlertDialogCancel` when the dialog opens, unless
+ * `initialFocus` is passed.
+ */
+const AlertDialogContent = ({ className, initialFocus, ...props }) => {
+    const cancelRef = useRef(null);
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogCancelFocusContext, { value: cancelRef, children: _jsx(AlertDialogPrimitive.Popup, { className: cn(OVERLAY_PANEL_ANIMATION, OVERLAY_PANEL_CENTERED, className), "data-component": "alert-dialog-content", "data-slot": "alert-dialog-content", initialFocus: initialFocus ?? cancelRef, ...props }) })] }));
+};
+export { AlertDialogContent };

package/dist/components/alert-dialog/alert-dialog-description.d.ts

@@ -0,0 +1,7 @@
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import type * as React from "react";
+/** Supporting body copy; provides the dialog's accessible description. */
+declare const AlertDialogDescription: ({ className, ...props }: Omit<React.ComponentProps<typeof AlertDialogPrimitive.Description>, "className"> & {
+    className?: string;
+}) => React.JSX.Element;
+export { AlertDialogDescription };

package/dist/components/alert-dialog/alert-dialog-description.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { OVERLAY_DESCRIPTION } from "../../tokens/overlay-styles.js";
+/** Supporting body copy; provides the dialog's accessible description. */
+const AlertDialogDescription = ({ className, ...props }) => (_jsx(AlertDialogPrimitive.Description, { className: cn(OVERLAY_DESCRIPTION, className), "data-component": "alert-dialog-description", "data-slot": "alert-dialog-description", ...props }));
+export { AlertDialogDescription };

package/dist/components/alert-dialog/alert-dialog-footer.d.ts

@@ -0,0 +1,7 @@
+import type * as React from "react";
+/**
+ * Layout wrapper for the action buttons; stacks reversed on mobile and aligns
+ * them to the end in a row on wider screens.
+ */
+declare const AlertDialogFooter: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
+export { AlertDialogFooter };

package/dist/components/alert-dialog/alert-dialog-footer.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Flex } from "../flex.js";
+/**
+ * Layout wrapper for the action buttons; stacks reversed on mobile and aligns
+ * them to the end in a row on wider screens.
+ */
+const AlertDialogFooter = ({ className, ...props }) => (_jsx(Flex, { className: cn("flex-col-reverse gap-2 sm:flex-row sm:justify-end", 
+    // Concentric nesting: the default pill actions (h-9, r 18px) sit 18px
+    // from the dialog's rounded-modal (36px) corner - 36−18 - so their curve
+    // runs parallel to the boundary. Content is p-6 (24px), so pull 6px on
+    // the trailing edges (desktop row only; stacked mobile keeps full padding).
+    "sm:-mr-1.5 sm:-mb-1.5", className), "data-component": "alert-dialog-footer", "data-slot": "alert-dialog-footer", ...props }));
+export { AlertDialogFooter };

package/dist/components/alert-dialog/alert-dialog-header.d.ts

@@ -0,0 +1,4 @@
+import type * as React from "react";
+/** Layout wrapper for the dialog title and description; centred on small screens. */
+declare const AlertDialogHeader: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
+export { AlertDialogHeader };

package/dist/components/alert-dialog/alert-dialog-header.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { OVERLAY_HEADER_CENTERED } from "../../tokens/overlay-styles.js";
+/** Layout wrapper for the dialog title and description; centred on small screens. */
+const AlertDialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn(OVERLAY_HEADER_CENTERED, className), "data-component": "alert-dialog-header", "data-slot": "alert-dialog-header", ...props }));
+export { AlertDialogHeader };

package/dist/components/alert-dialog/alert-dialog-overlay.d.ts

@@ -0,0 +1,7 @@
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import type * as React from "react";
+/** Dimming scrim behind the dialog; rendered automatically by AlertDialogContent. */
+declare const AlertDialogOverlay: ({ className, ...props }: Omit<React.ComponentProps<typeof AlertDialogPrimitive.Backdrop>, "className"> & {
+    className?: string;
+}) => React.JSX.Element;
+export { AlertDialogOverlay };