@instruments/materia-ui 0.1.0

package/dist/components/country-select/country-flags.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentType, HTMLAttributes, ReactElement, SVGAttributes } from "react";
+type HTMLSVGElement = HTMLElement & SVGElement;
+interface FlagProps extends HTMLAttributes<HTMLSVGElement>, SVGAttributes<HTMLSVGElement> {
+}
+export type FlagComponent = ComponentType<FlagProps>;
+/** Get a flag component by country code, or null when the code is unknown. */
+export declare const getFlag: (code: string) => FlagComponent | null;
+/**
+ * Render a flag by country code, or `null` when the code is unknown. The flag
+ * component comes from the module-level record, so it is resolved here rather
+ * than bound to a capitalised name inside a render.
+ */
+export declare const renderFlag: (code: string, props: FlagProps) => ReactElement | null;
+export {};

package/dist/components/country-select/country-flags.js

@@ -0,0 +1,20 @@
+/**
+ * Country flag component lookup by ISO 3166-1 alpha-2 code.
+ *
+ * country-flag-icons only provides named exports (one per country code), so
+ * the namespace import doubles as a typed record for dynamic access by code.
+ */
+import * as flags from "country-flag-icons/react/1x1";
+import { createElement } from "react";
+const FLAGS = flags;
+/** Get a flag component by country code, or null when the code is unknown. */
+export const getFlag = (code) => FLAGS[code] ?? null;
+/**
+ * Render a flag by country code, or `null` when the code is unknown. The flag
+ * component comes from the module-level record, so it is resolved here rather
+ * than bound to a capitalised name inside a render.
+ */
+export const renderFlag = (code, props) => {
+    const Flag = getFlag(code);
+    return Flag === null ? null : createElement(Flag, props);
+};

package/dist/components/country-select/country-select-context.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Marks a subtree as the inside of a text input that is not an `InputGroup`
+ * (today, `PhoneInput`), so a `CountrySelect` there draws its divider.
+ * `InputGroup` is detected through its own context instead.
+ */
+export declare const InsideInputContext: import("react").Context<boolean>;

package/dist/components/country-select/country-select-context.js

@@ -0,0 +1,8 @@
+"use client";
+import { createContext } from "react";
+/**
+ * Marks a subtree as the inside of a text input that is not an `InputGroup`
+ * (today, `PhoneInput`), so a `CountrySelect` there draws its divider.
+ * `InputGroup` is detected through its own context instead.
+ */
+export const InsideInputContext = createContext(false);

package/dist/components/country-select/country-select-root.d.ts

@@ -0,0 +1,74 @@
+import type { ComponentSize, ResponsiveSize } from "@instruments/materia-ui/tokens/size";
+/** Default CountrySelect size. */
+export declare const DEFAULT_COUNTRY_SELECT_SIZE: ComponentSize;
+/** Per-size wrapper spacing map (resolved responsively in the component). */
+export declare const COUNTRY_SELECT_SIZE_CLASSES: Record<ComponentSize, string>;
+/** Per-size flag dimension map (resolved responsively in the component). */
+export declare const FLAG_SIZE_CLASSES: Record<ComponentSize, string>;
+/**
+ * countrySelectVariants variant class helper for CountrySelect (base styling
+ * only; `size` is resolved responsively in the component).
+ */
+declare const countrySelectVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * flagVariants variant class helper for CountrySelect (base styling only;
+ * `size` is resolved responsively in the component).
+ */
+declare const flagVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** ISO 3166-1 alpha-2 country code */
+type CountryCode = string;
+interface CountryOption<T extends string = string> {
+    /** Display label for the country */
+    label: string;
+    /** Country code (ISO 3166-1 alpha-2) */
+    value: T;
+}
+interface CountrySelectProps<T extends string = string> {
+    /** Accessible label for the select */
+    "aria-label"?: string;
+    /** Additional class name */
+    className?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Callback when country changes */
+    onChange: (value: T) => void;
+    /** Available country options */
+    options: CountryOption<T>[];
+    /**
+     * Component size - a single token or a per-breakpoint object like
+     * `{ base: "sm", md: "lg" }`. `null` falls back to the default.
+     */
+    size?: ResponsiveSize | null;
+    /** Currently selected country code */
+    value?: T;
+}
+/**
+ * Country selector with flag display.
+ *
+ * Controlled: `value` (ISO 3166-1 alpha-2) drives the selection and `onChange`
+ * reports the newly chosen code. A native `<select>` overlays the flag so the
+ * picker keeps native keyboard and mobile behaviour. A divider on its trailing edge
+ * shows only when it sits inside an input (`PhoneInput` or `InputGroup`).
+ *
+ * @bestPractice `CountrySelect` is the flag + native-`<select>` picker for a known country list; when users need type-to-filter, use `CountryCombobox` instead.
+ * @bestPractice It is controlled-only - pass `value` (ISO 3166-1 alpha-2) and an `onChange`; there is no uncontrolled/`defaultValue` mode.
+ * @bestPractice Give each option an alpha-2 `value` (e.g. `"US"`) so the overlaid flag resolves; a globe placeholder shows when the code is empty/unknown.
+ *
+ * @example
+ * ```tsx
+ * const [country, setCountry] = useState("US");
+ *
+ * <CountrySelect
+ *   value={country}
+ *   onChange={setCountry}
+ *   options={[
+ *     { value: "US", label: "United States" },
+ *     { value: "GB", label: "United Kingdom" },
+ *   ]}
+ * />
+ * ```
+ * @category forms
+ */
+declare const CountrySelect: <T extends string = string>({ value, onChange, options, disabled, size, className, "aria-label": ariaLabel, }: CountrySelectProps<T>) => import("react").JSX.Element;
+export type { CountryCode, CountryOption, CountrySelectProps };
+export { CountrySelect, countrySelectVariants, flagVariants };

package/dist/components/country-select/country-select-root.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { cva } from "class-variance-authority";
+import { ChevronDown } from "lucide-react";
+import { use } from "react";
+import { getResponsiveSizeClasses } from "../../tokens/responsive.js";
+import { Center } from "../center.js";
+import { renderFlag } from "../country-select/country-flags.js";
+import { Icon } from "../icon.js";
+import { useOptionalInputGroup } from "../input-group/input-group-context.js";
+import { InsideInputContext } from "./country-select-context.js";
+/** Default CountrySelect size. */
+export const DEFAULT_COUNTRY_SELECT_SIZE = "base";
+/** Per-size wrapper spacing map (resolved responsively in the component). */
+export const COUNTRY_SELECT_SIZE_CLASSES = {
+    "2xl": "mr-4 pr-4 pl-5",
+    "2xs": "mr-1.5 pr-1.5 pl-2",
+    "3xl": "mr-6 pr-6 pl-7",
+    base: "mr-2.5 pr-2.5 pl-3",
+    lg: "mr-3 pr-3 pl-3.5",
+    sm: "mr-2 pr-2 pl-2.5",
+    xl: "mr-3.5 pr-3.5 pl-4",
+    xs: "mr-2 pr-2 pl-2.5",
+};
+/** Per-size flag dimension map (resolved responsively in the component). */
+export const FLAG_SIZE_CLASSES = {
+    "2xl": "size-6",
+    "2xs": "size-2.5",
+    "3xl": "size-7",
+    base: "size-4",
+    lg: "size-5",
+    sm: "size-3.5",
+    xl: "size-5",
+    xs: "size-3",
+};
+/**
+ * countrySelectVariants variant class helper for CountrySelect (base styling
+ * only; `size` is resolved responsively in the component).
+ */
+const countrySelectVariants = cva("border-border text-muted-foreground relative flex items-center gap-1.5 bg-transparent pr-2 pl-3");
+/**
+ * flagVariants variant class helper for CountrySelect (base styling only;
+ * `size` is resolved responsively in the component).
+ */
+const flagVariants = cva("shrink-0 overflow-hidden rounded-full");
+/**
+ * Country selector with flag display.
+ *
+ * Controlled: `value` (ISO 3166-1 alpha-2) drives the selection and `onChange`
+ * reports the newly chosen code. A native `<select>` overlays the flag so the
+ * picker keeps native keyboard and mobile behaviour. A divider on its trailing edge
+ * shows only when it sits inside an input (`PhoneInput` or `InputGroup`).
+ *
+ * @bestPractice `CountrySelect` is the flag + native-`<select>` picker for a known country list; when users need type-to-filter, use `CountryCombobox` instead.
+ * @bestPractice It is controlled-only - pass `value` (ISO 3166-1 alpha-2) and an `onChange`; there is no uncontrolled/`defaultValue` mode.
+ * @bestPractice Give each option an alpha-2 `value` (e.g. `"US"`) so the overlaid flag resolves; a globe placeholder shows when the code is empty/unknown.
+ *
+ * @example
+ * ```tsx
+ * const [country, setCountry] = useState("US");
+ *
+ * <CountrySelect
+ *   value={country}
+ *   onChange={setCountry}
+ *   options={[
+ *     { value: "US", label: "United States" },
+ *     { value: "GB", label: "United Kingdom" },
+ *   ]}
+ * />
+ * ```
+ * @category forms
+ */
+const CountrySelect = ({ value, onChange, options, disabled, size, className, "aria-label": ariaLabel = "Select country", }) => {
+    const insideInputContext = use(InsideInputContext);
+    const inputGroup = useOptionalInputGroup();
+    const insideInput = insideInputContext || inputGroup !== null;
+    const selectedOption = options.find((opt) => opt.value === value);
+    const flag = value !== undefined && value !== null && value !== ""
+        ? renderFlag(value, {
+            className: "size-full object-cover",
+            title: selectedOption?.label ?? value,
+        })
+        : null;
+    return (_jsxs("div", { className: cn(countrySelectVariants(), insideInput && "border-r", getResponsiveSizeClasses(size ?? undefined, COUNTRY_SELECT_SIZE_CLASSES, DEFAULT_COUNTRY_SELECT_SIZE), className), children: [_jsx(Center, { as: "span", className: cn(flagVariants(), getResponsiveSizeClasses(size ?? undefined, FLAG_SIZE_CLASSES, DEFAULT_COUNTRY_SELECT_SIZE), "text-muted-foreground"), inline: true, children: flag ?? _jsx("span", { children: "\uD83C\uDF10" }) }), _jsx("select", { "aria-label": ariaLabel, className: "absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed", disabled: disabled, onChange: (e) => {
+                    const picked = options.find((opt) => opt.value === e.target.value);
+                    if (picked) {
+                        onChange(picked.value);
+                    }
+                }, value: value ?? "", children: options.map((option) => (_jsx("option", { value: option.value ?? "", children: option.label }, option.value || "intl"))) }), _jsx(Icon, { className: "opacity-50", icon: ChevronDown, size: "2xs" })] }));
+};
+export { CountrySelect, countrySelectVariants, flagVariants };

package/dist/components/country-select.d.ts

@@ -0,0 +1 @@
+export { CountrySelect, countrySelectVariants, flagVariants, } from "./country-select/country-select-root.js";

package/dist/components/country-select.js

@@ -0,0 +1 @@
+export { CountrySelect, countrySelectVariants, flagVariants, } from "./country-select/country-select-root.js";

package/dist/components/description-list/description-list-root.d.ts

@@ -0,0 +1,46 @@
+import type { TextAlign } from "../../tokens/alignment.js";
+interface DescriptionListProps extends React.ComponentProps<"dl"> {
+    /** Draw a divider line beneath each item except the last. */
+    showSeparators?: boolean;
+}
+/**
+ * A `<dl>` that lays out term/description pairs in a grid.
+ * Import from "@instruments/materia-ui/components/description-list".
+ *
+ * @bestPractice Fill it with `DescriptionItem` rows (each a `DescriptionTerm` + `DescriptionDetails`) - it renders a real `<dl>`, so keep the `dt`/`dd` semantics rather than nesting raw divs.
+ * @bestPractice Use this for read-only key/value metadata about one entity; for tabular rows of many records reach for `Table` or `DataGrid` instead.
+ * @bestPractice Turn on `showSeparators` when items are visually dense; leave it off inside a bordered `Card` where the container already frames them.
+ * @category data
+ */
+declare const DescriptionList: ({ className, showSeparators, ...props }: DescriptionListProps) => import("react").JSX.Element;
+/**
+ * One row pairing a term with its description, in a 2fr/3fr grid.
+ * Import from "@instruments/materia-ui/components/description-list".
+ */
+declare const DescriptionItem: ({ className, ...props }: React.ComponentProps<"div">) => import("react").JSX.Element;
+/**
+ * The `<dt>` term (label) of a description item.
+ * Import from "@instruments/materia-ui/components/description-list".
+ */
+declare const DescriptionTerm: ({ className, ...props }: React.ComponentProps<"dt">) => import("react").JSX.Element;
+interface DescriptionDetailsProps extends React.ComponentProps<"dd"> {
+    /**
+     * Text alignment of the value. `"end"` right-aligns it (left in RTL).
+     * @default "end"
+     */
+    align?: TextAlign;
+    /**
+     * Number of lines to clamp to; 0 or undefined disables clamping. When the
+     * content actually overflows, a More/Less toggle is shown to expand it.
+     */
+    clampLines?: number;
+}
+/**
+ * The `<dd>` value of a description item; with `clampLines` it truncates and
+ * reveals a More/Less toggle once the content overflows.
+ * Import from "@instruments/materia-ui/components/description-list".
+ *
+ * @bestPractice Values are end-aligned by default so they line up against the terms; set `align="start"` for long prose values, where a ragged left edge is hard to read.
+ */
+declare const DescriptionDetails: ({ align, className, clampLines, children, ...props }: DescriptionDetailsProps) => import("react").JSX.Element;
+export { DescriptionDetails, DescriptionItem, DescriptionList, DescriptionTerm, };

package/dist/components/description-list/description-list-root.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { useCallback, useState } from "react";
+import { TEXT_ALIGN_CLASS } from "../../tokens/alignment.js";
+import { Grid } from "../grid.js";
+/**
+ * A `<dl>` that lays out term/description pairs in a grid.
+ * Import from "@instruments/materia-ui/components/description-list".
+ *
+ * @bestPractice Fill it with `DescriptionItem` rows (each a `DescriptionTerm` + `DescriptionDetails`) - it renders a real `<dl>`, so keep the `dt`/`dd` semantics rather than nesting raw divs.
+ * @bestPractice Use this for read-only key/value metadata about one entity; for tabular rows of many records reach for `Table` or `DataGrid` instead.
+ * @bestPractice Turn on `showSeparators` when items are visually dense; leave it off inside a bordered `Card` where the container already frames them.
+ * @category data
+ */
+const DescriptionList = ({ className, showSeparators = false, ...props }) => (_jsx("dl", { className: cn("text-paragraph-sm grid gap-3", showSeparators &&
+        "[&>*:not(:last-child)]:border-border [&>*:not(:last-child)]:border-b [&>*:not(:last-child)]:pb-3", className), "data-component": "description-list", "data-slot": "description-list", ...props }));
+/**
+ * One row pairing a term with its description, in a 2fr/3fr grid.
+ * Import from "@instruments/materia-ui/components/description-list".
+ */
+const DescriptionItem = ({ className, ...props }) => (_jsx(Grid, { className: cn("grid-cols-[2fr_3fr]", className), columns: "none", "data-component": "description-item", "data-slot": "description-item", gap: "base", ...props }));
+/**
+ * The `<dt>` term (label) of a description item.
+ * Import from "@instruments/materia-ui/components/description-list".
+ */
+const DescriptionTerm = ({ className, ...props }) => (_jsx("dt", { className: cn("text-muted-foreground", className), "data-component": "description-term", "data-slot": "description-term", ...props }));
+/**
+ * The `<dd>` value of a description item; with `clampLines` it truncates and
+ * reveals a More/Less toggle once the content overflows.
+ * Import from "@instruments/materia-ui/components/description-list".
+ *
+ * @bestPractice Values are end-aligned by default so they line up against the terms; set `align="start"` for long prose values, where a ragged left edge is hard to read.
+ */
+const DescriptionDetails = ({ align = "end", className, clampLines = 0, children, ...props }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [isTruncated, setIsTruncated] = useState(false);
+    // Check if content is truncated by comparing scrollHeight to clientHeight.
+    // Measured from the DOM (scrollHeight > clientHeight = clipped), not props, in
+    // a ref callback so it runs when the element mounts or `clampLines` changes.
+    const measureContent = useCallback((el) => {
+        setIsTruncated(clampLines > 0 && el !== null && el.scrollHeight > el.clientHeight + 1);
+    }, [clampLines]);
+    const showClamp = clampLines > 0 && !isExpanded;
+    return (_jsxs("dd", { className: cn(TEXT_ALIGN_CLASS[align], className), "data-component": "description-details", "data-slot": "description-details", ...props, children: [_jsx("span", { className: cn(showClamp &&
+                    "[display:-webkit-box] overflow-hidden [-webkit-box-orient:vertical]"), ref: measureContent, style: showClamp ? { WebkitLineClamp: clampLines } : undefined, children: children }), isTruncated && (_jsx("button", { className: "text-muted-foreground hover:text-foreground ml-1 underline underline-offset-2", onClick: () => {
+                    setIsExpanded(!isExpanded);
+                }, type: "button", children: isExpanded ? "Less" : "More" }))] }));
+};
+export { DescriptionDetails, DescriptionItem, DescriptionList, DescriptionTerm, };

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

@@ -0,0 +1 @@
+export { DescriptionDetails, DescriptionItem, DescriptionList, DescriptionTerm, } from "./description-list/description-list-root.js";

package/dist/components/description-list.js

@@ -0,0 +1 @@
+export { DescriptionDetails, DescriptionItem, DescriptionList, DescriptionTerm, } from "./description-list/description-list-root.js";

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

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

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

@@ -0,0 +1,46 @@
+import { defineAnatomy } from "../../tokens/anatomy.js";
+/**
+ * dialogAnatomy helper for DialogAnatomy.
+ * Import from "@instruments/materia-ui/components/dialog-anatomy".
+ */
+export const dialogAnatomy = defineAnatomy({
+    children: [
+        {
+            description: "Button to open the dialog",
+            label: "DialogTrigger",
+            slot: "dialog-trigger",
+        },
+        {
+            children: [
+                {
+                    children: [
+                        {
+                            description: "Modal heading",
+                            label: "DialogTitle",
+                            slot: "dialog-title",
+                        },
+                        {
+                            description: "Modal description",
+                            label: "DialogDescription",
+                            slot: "dialog-description",
+                        },
+                    ],
+                    description: "Header area",
+                    label: "DialogHeader",
+                    slot: "dialog-header",
+                },
+                {
+                    description: "Footer with action buttons",
+                    label: "DialogFooter",
+                    slot: "dialog-footer",
+                },
+            ],
+            description: "Main modal container",
+            label: "DialogContent",
+            slot: "dialog-content",
+        },
+    ],
+    description: "Modal overlay for focused content",
+    label: "Dialog",
+    slot: "dialog",
+});

package/dist/components/dialog/dialog-close.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Closes the dialog when activated; pass your own button as `render`. Must be
+ * rendered inside `<DialogContent>`. Import from "@instruments/materia-ui/components/dialog".
+ */
+export declare const DialogClose: (props: Omit<import("@base-ui/react").DialogCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement;

package/dist/components/dialog/dialog-close.js

@@ -0,0 +1,10 @@
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { makeOverlayClose } from "../overlay-primitives.js";
+/**
+ * Closes the dialog when activated; pass your own button as `render`. Must be
+ * rendered inside `<DialogContent>`. Import from "@instruments/materia-ui/components/dialog".
+ */
+export const DialogClose = makeOverlayClose(DialogPrimitive.Close, {
+    component: "dialog-close",
+    slot: "dialog-close",
+});

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

@@ -0,0 +1,32 @@
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import type * as React from "react";
+type DialogContentProps = Omit<React.ComponentProps<typeof DialogPrimitive.Popup>, "className"> & {
+    className?: string;
+};
+/**
+ * `"default"` is a 512px panel that grows with its content. `"viewport"` fills
+ * the screen less a margin (8px on phones; 32px left and right and 24px top and
+ * bottom from md), capped at 1224 by 960, for a surface that holds a whole view
+ * such as a product's quick view.
+ */
+export type DialogContentSize = "default" | "viewport";
+export interface DialogContentExtras {
+    /** Extra classes for the overlay behind the dialog. */
+    overlayClassName?: string;
+    /** Show close button in the top-right corner. @default true */
+    showCloseButton?: boolean;
+    /** Panel geometry; see {@link DialogContentSize}. @default "default" */
+    size?: DialogContentSize;
+}
+/**
+ * Centred modal panel. Renders its own portal and scrim overlay, so it does not
+ * need to be wrapped in `<DialogPortal>` or `<DialogOverlay>` - place it directly
+ * inside `<Dialog>`. Outside-press and Escape dismissal are handled on the root:
+ * read `eventDetails.reason` in `Dialog`'s `onOpenChange` and call
+ * `eventDetails.cancel()` to veto one.
+ * Import from "@instruments/materia-ui/components/dialog".
+ *
+ * @bestPractice Use `size="viewport"` for a dialog that holds a whole view (a product quick view, a large preview); it sets only the geometry, so lay the panel out as a column with a scrolling body yourself or compose `QuickView`.
+ */
+export declare const DialogContent: ({ className, children, showCloseButton, overlayClassName, size, ...props }: DialogContentProps & DialogContentExtras) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { XIcon } from "lucide-react";
+import { OVERLAY_PANEL_ANIMATION, OVERLAY_PANEL_CENTERED, } from "../../tokens/overlay-styles.js";
+import { Button } from "../button.js";
+import { DialogOverlay } from "../dialog/dialog-overlay.js";
+import { DialogPortal } from "../dialog/dialog-portal.js";
+const SIZE_CLASSES = {
+    default: undefined,
+    viewport: "h-dialog-viewport w-dialog-viewport max-w-dialog-viewport sm:max-w-dialog-viewport md:h-dialog-viewport-md md:max-h-dialog-viewport md:w-dialog-viewport-md",
+};
+/**
+ * Centred modal panel. Renders its own portal and scrim overlay, so it does not
+ * need to be wrapped in `<DialogPortal>` or `<DialogOverlay>` - place it directly
+ * inside `<Dialog>`. Outside-press and Escape dismissal are handled on the root:
+ * read `eventDetails.reason` in `Dialog`'s `onOpenChange` and call
+ * `eventDetails.cancel()` to veto one.
+ * Import from "@instruments/materia-ui/components/dialog".
+ *
+ * @bestPractice Use `size="viewport"` for a dialog that holds a whole view (a product quick view, a large preview); it sets only the geometry, so lay the panel out as a column with a scrolling body yourself or compose `QuickView`.
+ */
+export const DialogContent = ({ className, children, showCloseButton = true, overlayClassName, size = "default", ...props }) => (_jsxs(DialogPortal, { "data-component": "dialog-portal", "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, { className: overlayClassName }), _jsxs(DialogPrimitive.Popup, { className: cn(OVERLAY_PANEL_ANIMATION, OVERLAY_PANEL_CENTERED, SIZE_CLASSES[size], className), "data-component": "dialog-content", "data-size": size, "data-slot": "dialog-content", ...props, children: [children, showCloseButton ? (_jsx(DialogPrimitive.Close, { render: _jsx(Button, { "aria-label": "Close", className: "absolute top-5 right-5", "data-component": "dialog-close", "data-slot": "dialog-close", emphasis: "soft", icon: XIcon, size: "icon-sm", tone: "neutral" }) })) : null] })] }));

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

@@ -0,0 +1,10 @@
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import type * as React from "react";
+/**
+ * Supporting text that describes the dialog (wired to the panel's
+ * `aria-describedby`). Render inside `<DialogHeader>`.
+ * Import from "@instruments/materia-ui/components/dialog".
+ */
+export declare const DialogDescription: ({ className, ...props }: Omit<React.ComponentProps<typeof DialogPrimitive.Description>, "className"> & {
+    className?: string;
+}) => React.JSX.Element;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { OVERLAY_DESCRIPTION } from "../../tokens/overlay-styles.js";
+/**
+ * Supporting text that describes the dialog (wired to the panel's
+ * `aria-describedby`). Render inside `<DialogHeader>`.
+ * Import from "@instruments/materia-ui/components/dialog".
+ */
+export const DialogDescription = ({ className, ...props }) => (_jsx(DialogPrimitive.Description, { className: cn(OVERLAY_DESCRIPTION, className), "data-component": "dialog-description", "data-slot": "dialog-description", ...props }));

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

@@ -0,0 +1,12 @@
+import type * as React from "react";
+interface DialogFooterProps extends React.ComponentProps<"div"> {
+    /** Button alignment within the footer. @default "end" */
+    justify?: "end" | "between";
+}
+/**
+ * Action row at the bottom of the panel; stacks buttons vertically on mobile and
+ * lays them out horizontally from `sm` up. Render inside `<DialogContent>`.
+ * Import from "@instruments/materia-ui/components/dialog".
+ */
+export declare const DialogFooter: ({ className, justify, ...props }: DialogFooterProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Flex } from "../flex.js";
+/**
+ * Action row at the bottom of the panel; stacks buttons vertically on mobile and
+ * lays them out horizontally from `sm` up. Render inside `<DialogContent>`.
+ * Import from "@instruments/materia-ui/components/dialog".
+ */
+export const DialogFooter = ({ className, justify = "end", ...props }) => (_jsx(Flex, { className: cn("mt-2 flex-col-reverse gap-2 sm:flex-row", justify === "between"
+        ? "sm:-ml-1.5 sm:justify-between"
+        : "sm:justify-end", 
+    // Concentric nesting: pull the actions 6px onto the trailing edges so a
+    // default pill button (h-9, r 18px) sits 18px from the rounded-modal (36px)
+    // corner - 36−18 - its curve parallel to the boundary.
+    // `between` also pulls the leading edge so the left action nestles too.
+    "sm:-mr-1.5 sm:-mb-1.5", className), "data-component": "dialog-footer", "data-slot": "dialog-footer", ...props }));

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

@@ -0,0 +1,7 @@
+import type * as React from "react";
+/**
+ * Groups `DialogTitle` and `DialogDescription` at the top of the panel and
+ * center-aligns them on small screens. Render inside `<DialogContent>`.
+ * Import from "@instruments/materia-ui/components/dialog".
+ */
+export declare const DialogHeader: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;

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

@@ -0,0 +1,9 @@
+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";
+/**
+ * Groups `DialogTitle` and `DialogDescription` at the top of the panel and
+ * center-aligns them on small screens. Render inside `<DialogContent>`.
+ * Import from "@instruments/materia-ui/components/dialog".
+ */
+export const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn(OVERLAY_HEADER_CENTERED, className), "data-component": "dialog-header", "data-slot": "dialog-header", ...props }));

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

@@ -0,0 +1,10 @@
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import type * as React from "react";
+/**
+ * Scrim rendered behind the dialog panel. `DialogContent` includes one
+ * automatically; render this directly only when composing a custom layout.
+ * Import from "@instruments/materia-ui/components/dialog".
+ */
+export declare const DialogOverlay: ({ className, ...props }: Omit<React.ComponentProps<typeof DialogPrimitive.Backdrop>, "className"> & {
+    className?: string | undefined;
+}) => React.JSX.Element;

package/dist/components/dialog/dialog-overlay.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { OVERLAY_SCRIM_GLASS } from "../../tokens/overlay-styles.js";
+/**
+ * Scrim rendered behind the dialog panel. `DialogContent` includes one
+ * automatically; render this directly only when composing a custom layout.
+ * Import from "@instruments/materia-ui/components/dialog".
+ */
+export const DialogOverlay = ({ className, ...props }) => (_jsx(DialogPrimitive.Backdrop, { className: cn(OVERLAY_SCRIM_GLASS, className), "data-component": "dialog-overlay", "data-slot": "dialog-overlay", ...props }));

package/dist/components/dialog/dialog-portal.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Portals its children out to the document body so the dialog escapes parent
+ * `overflow`/stacking contexts. `DialogContent` includes one automatically.
+ * Import from "@instruments/materia-ui/components/dialog".
+ */
+export declare const DialogPortal: (props: Omit<import("@base-ui/react").DialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement;

package/dist/components/dialog/dialog-portal.js

@@ -0,0 +1,11 @@
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { makeOverlayPortal } from "../overlay-primitives.js";
+/**
+ * Portals its children out to the document body so the dialog escapes parent
+ * `overflow`/stacking contexts. `DialogContent` includes one automatically.
+ * Import from "@instruments/materia-ui/components/dialog".
+ */
+export const DialogPortal = makeOverlayPortal(DialogPrimitive.Portal, {
+    component: "dialog-portal",
+    slot: "dialog-portal",
+});

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

@@ -0,0 +1,11 @@
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+/**
+ * Root component for a modal dialog. Manages open/closed state and accessibility.
+ * Import from "@instruments/materia-ui/components/dialog".
+ *
+ * @bestPractice Use `Dialog` for a centred blocking modal (form, details, footer actions); a destructive confirm is `AlertDialog`, an anchored non-blocking panel is `Popover`.
+ * @bestPractice A panel that slides in from a screen edge is a `Sheet` (or `Drawer` for a drag-to-dismiss bottom sheet), not a `Dialog`.
+ * @bestPractice Always render a `DialogTitle` (wrap in `sr-only` if visually hidden) so the modal is announced; `DialogContent` uses the 36px `--radius-modal` corner.
+ * @category overlays
+ */
+export declare const Dialog: (props: DialogPrimitive.Root.Props<unknown>) => import("react").ReactElement;

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

@@ -0,0 +1,15 @@
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { makeOverlayRoot } from "../overlay-primitives.js";
+/**
+ * Root component for a modal dialog. Manages open/closed state and accessibility.
+ * Import from "@instruments/materia-ui/components/dialog".
+ *
+ * @bestPractice Use `Dialog` for a centred blocking modal (form, details, footer actions); a destructive confirm is `AlertDialog`, an anchored non-blocking panel is `Popover`.
+ * @bestPractice A panel that slides in from a screen edge is a `Sheet` (or `Drawer` for a drag-to-dismiss bottom sheet), not a `Dialog`.
+ * @bestPractice Always render a `DialogTitle` (wrap in `sr-only` if visually hidden) so the modal is announced; `DialogContent` uses the 36px `--radius-modal` corner.
+ * @category overlays
+ */
+export const Dialog = makeOverlayRoot(DialogPrimitive.Root, {
+    component: "dialog",
+    slot: "dialog",
+});

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

@@ -0,0 +1,10 @@
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import type * as React from "react";
+/**
+ * Accessible heading that labels the dialog (wired to the panel's
+ * `aria-labelledby`). Render inside `<DialogHeader>`.
+ * Import from "@instruments/materia-ui/components/dialog".
+ */
+export declare const DialogTitle: ({ className, ...props }: Omit<React.ComponentProps<typeof DialogPrimitive.Title>, "className"> & {
+    className?: string;
+}) => React.JSX.Element;