@instruments/materia-ui 0.1.0

package/dist/components/dropdown-menu.js

@@ -0,0 +1,16 @@
+export { dropdownMenuAnatomy } from "./dropdown-menu/dropdown-menu-anatomy.js";
+export { DropdownMenuCheckboxItem } from "./dropdown-menu/dropdown-menu-checkbox-item.js";
+export { DropdownMenuContent } from "./dropdown-menu/dropdown-menu-content.js";
+export { DropdownMenuGroup } from "./dropdown-menu/dropdown-menu-group.js";
+export { DropdownMenuItem } from "./dropdown-menu/dropdown-menu-item.js";
+export { DropdownMenuLabel } from "./dropdown-menu/dropdown-menu-label.js";
+export { DropdownMenuPortal } from "./dropdown-menu/dropdown-menu-portal.js";
+export { DropdownMenuRadioGroup } from "./dropdown-menu/dropdown-menu-radio-group.js";
+export { DropdownMenuRadioItem } from "./dropdown-menu/dropdown-menu-radio-item.js";
+export { DropdownMenu } from "./dropdown-menu/dropdown-menu-root.js";
+export { DropdownMenuSeparator } from "./dropdown-menu/dropdown-menu-separator.js";
+export { DropdownMenuShortcut } from "./dropdown-menu/dropdown-menu-shortcut.js";
+export { DropdownMenuSub } from "./dropdown-menu/dropdown-menu-sub.js";
+export { DropdownMenuSubContent } from "./dropdown-menu/dropdown-menu-sub-content.js";
+export { DropdownMenuSubTrigger } from "./dropdown-menu/dropdown-menu-sub-trigger.js";
+export { DropdownMenuTrigger } from "./dropdown-menu/dropdown-menu-trigger.js";

package/dist/components/easing-curve/easing-curve-root.d.ts

@@ -0,0 +1,36 @@
+import type * as React from "react";
+/**
+ * The four cubic-bézier control coordinates `[x1, y1, x2, y2]` - the same
+ * numbers you pass to CSS `cubic-bezier(...)`. X is normalised time (0–1); Y is
+ * normalised progress (0–1, may overshoot for anticipation/back easings).
+ */
+export type EasingCurvePoints = readonly [number, number, number, number];
+export interface EasingCurveProps extends Omit<React.SVGProps<SVGSVGElement>, "points"> {
+    /**
+     * The easing's four cubic-bézier control coordinates, `[x1, y1, x2, y2]`.
+     * Drawn as the solid curve.
+     */
+    points: EasingCurvePoints;
+    /** Accessible label for the curve, rendered as the SVG `<title>`. */
+    title: string;
+    /**
+     * Draw the dotted diagonal (linear `y = x`) reference behind the curve, so its
+     * acceleration reads against a straight baseline. @default true
+     */
+    showReference?: boolean;
+}
+/**
+ * A static visualisation of a cubic-bézier easing curve, drawn as an SVG bézier
+ * inside a unit box - time runs left→right, progress runs bottom→top. The solid
+ * stroke inherits `currentColor` (set the SVG's text colour via `className`);
+ * the optional dotted diagonal is the linear baseline the curve bends away from.
+ * Sizing is entirely `className`-driven, so the same primitive serves a tiny
+ * preview and a full row. The DS home for easing SVGs - the app never draws raw
+ * `<svg>`.
+ *
+ * @bestPractice Render easing previews through `EasingCurve`, never a hand-rolled `<svg>` - it's the design-system home for curve visualisations (consistent unit box, baseline, stroke).
+ * @bestPractice Colour the curve with a `text-*` class (it strokes `currentColor`) and size it purely via `className` - the same primitive scales from a tiny preview to a full row.
+ * @bestPractice Always pass a meaningful `title` - it becomes the SVG `<title>`, the curve's only accessible name.
+ * @category motion
+ */
+export declare const EasingCurve: ({ points, title, showReference, className, ...props }: EasingCurveProps) => React.JSX.Element;

package/dist/components/easing-curve/easing-curve-root.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * A static visualisation of a cubic-bézier easing curve, drawn as an SVG bézier
+ * inside a unit box - time runs left→right, progress runs bottom→top. The solid
+ * stroke inherits `currentColor` (set the SVG's text colour via `className`);
+ * the optional dotted diagonal is the linear baseline the curve bends away from.
+ * Sizing is entirely `className`-driven, so the same primitive serves a tiny
+ * preview and a full row. The DS home for easing SVGs - the app never draws raw
+ * `<svg>`.
+ *
+ * @bestPractice Render easing previews through `EasingCurve`, never a hand-rolled `<svg>` - it's the design-system home for curve visualisations (consistent unit box, baseline, stroke).
+ * @bestPractice Colour the curve with a `text-*` class (it strokes `currentColor`) and size it purely via `className` - the same primitive scales from a tiny preview to a full row.
+ * @bestPractice Always pass a meaningful `title` - it becomes the SVG `<title>`, the curve's only accessible name.
+ * @category motion
+ */
+export const EasingCurve = ({ points, title, showReference = true, className, ...props }) => {
+    const [x1, y1, x2, y2] = points;
+    const path = `M0,100 C ${x1 * 100},${100 - y1 * 100} ${x2 * 100},${100 - y2 * 100} 100,0`;
+    return (_jsxs("svg", { className: cn(className), "data-component": "easing-curve", fill: "none", 
+        // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role, react-doctor/prefer-tag-over-role -- inline <svg> drawing a bézier with currentColor cannot be a self-contained <img>; role="img" + <title> is the correct a11y pattern for a labelled decorative curve
+        role: "img", viewBox: "-6 -6 112 112", ...props, children: [_jsx("title", { children: title }), showReference ? (_jsx("path", { d: "M0,100 L100,0", stroke: "var(--color-border)", strokeDasharray: "4 4", strokeWidth: 1.5 })) : null, _jsx("path", { d: path, stroke: "currentColor", strokeLinecap: "round", strokeWidth: 4 })] }));
+};

package/dist/components/easing-curve.d.ts

@@ -0,0 +1 @@
+export { EasingCurve, type EasingCurvePoints, type EasingCurveProps, } from "./easing-curve/easing-curve-root.js";

package/dist/components/easing-curve.js

@@ -0,0 +1 @@
+export { EasingCurve, } from "./easing-curve/easing-curve-root.js";

package/dist/components/empty/empty-actions.d.ts

@@ -0,0 +1,6 @@
+import type * as React from "react";
+export type EmptyActionsProps = React.ComponentProps<"div">;
+/**
+ * Container for empty state action buttons.
+ */
+export declare const EmptyActions: ({ className, children, ...props }: EmptyActionsProps) => React.JSX.Element;

package/dist/components/empty/empty-actions.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from "../flex.js";
+/**
+ * Container for empty state action buttons.
+ */
+export const EmptyActions = ({ className, children, ...props }) => (_jsx(Flex, { align: "center", className: className, "data-component": "empty-actions", "data-slot": "empty-actions", gap: "xs", justify: "center", wrap: "wrap", ...props, children: children }));

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

@@ -0,0 +1,17 @@
+import type { ComponentSize } from "../../tokens/size.js";
+export type EmptySize = Extract<ComponentSize, "sm" | "base" | "lg">;
+/**
+ * Container layout shared across the empty family (`Empty`, `EmptyState`,
+ * `ErrorState`): `centered` fills its parent, `card` / `card-dashed` wrap the
+ * content in a Card. Family-local vocabulary - not a cross-cutting token.
+ */
+export type EmptyLayout = "centered" | "card" | "card-dashed";
+interface EmptyContextValue {
+    size: EmptySize;
+}
+export declare const EmptyProvider: ({ children, size, }: {
+    children: React.ReactNode;
+    size: EmptySize;
+}) => import("react").JSX.Element;
+export declare const useEmptyContext: () => EmptyContextValue;
+export {};

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

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, use, useMemo } from "react";
+const EmptyContext = createContext(null);
+export const EmptyProvider = ({ children, size, }) => {
+    const value = useMemo(() => ({ size }), [size]);
+    return (_jsx(EmptyContext.Provider, { value: value, children: children }));
+};
+export const useEmptyContext = () => {
+    const context = use(EmptyContext);
+    if (!context) {
+        throw new Error("Empty components must be used within an Empty component");
+    }
+    return context;
+};

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

@@ -0,0 +1,6 @@
+import { useRender } from "@base-ui/react/use-render";
+export type EmptyDescriptionProps = useRender.ComponentProps<"div">;
+/**
+ * Description text for an empty state.
+ */
+export declare const EmptyDescription: ({ className, children, ref, render, ...props }: EmptyDescriptionProps) => import("react").JSX.Element;

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

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { useEmptyContext } from "../empty/empty-context.js";
+import { Text } from "../text.js";
+const SIZE_TEXT = {
+    base: "paragraph-sm",
+    lg: "paragraph-sm",
+    sm: "caption",
+};
+/**
+ * Description text for an empty state.
+ */
+export const EmptyDescription = ({ className, children, ref, render, ...props }) => {
+    const { size } = useEmptyContext();
+    const textSize = SIZE_TEXT[size];
+    // A `render` element replaces the Text entirely; it only gets the slot props.
+    const rendered = useRender({
+        defaultTagName: "div",
+        enabled: render !== undefined,
+        props: {
+            children,
+            className: cn("max-w-sm text-center", className),
+            "data-component": "empty-description",
+            "data-slot": "empty-description",
+            ...props,
+        },
+        ref,
+        render,
+    });
+    if (rendered !== null) {
+        return rendered;
+    }
+    return (_jsx(Text, { className: cn("max-w-sm text-center", className), "data-component": "empty-description", "data-slot": "empty-description", size: textSize, variant: "muted", ...props, children: children }));
+};

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

@@ -0,0 +1,6 @@
+import type * as React from "react";
+export type EmptyHeaderProps = React.ComponentProps<"div">;
+/**
+ * Header section of an empty state. Contains media, title, and description.
+ */
+export declare const EmptyHeader: ({ className, children, ...props }: EmptyHeaderProps) => React.JSX.Element;

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

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { useEmptyContext } from "../empty/empty-context.js";
+import { Stack } from "../stack.js";
+const SIZE_GAP = {
+    base: "xs",
+    lg: "sm",
+    sm: "xs",
+};
+/**
+ * Header section of an empty state. Contains media, title, and description.
+ */
+export const EmptyHeader = ({ className, children, ...props }) => {
+    const { size } = useEmptyContext();
+    const gap = SIZE_GAP[size];
+    return (_jsx(Stack, { align: "center", className: cn(className), "data-component": "empty-header", "data-slot": "empty-header", gap: gap, ...props, children: children }));
+};

package/dist/components/empty/empty-media.d.ts

@@ -0,0 +1,26 @@
+import type { LucideIcon } from "lucide-react";
+import type * as React from "react";
+import type { IconBoxProps } from "../icon-box.js";
+export interface EmptyMediaProps extends React.ComponentProps<"div"> {
+    /** Custom media content, such as an illustration or animated preview. */
+    children?: React.ReactNode;
+    /** Icon to display */
+    icon?: LucideIcon;
+    /**
+     * Render the icon bare (no rounded IconBox surface), per Figma's empty/error
+     * states. The icon is tinted by `variant`.
+     */
+    plain?: boolean;
+    /** Override the icon size */
+    size?: IconBoxProps["size"];
+    /**
+     * Semantic surface tone for the IconBox (also tints the bare icon when
+     * `plain`). Defaults to `neutral`, which renders the muted surface via the
+     * fixed `emphasis="soft"` treatment.
+     */
+    tone?: IconBoxProps["tone"];
+}
+/**
+ * Media container for empty state icons.
+ */
+export declare const EmptyMedia: ({ children, className, icon, plain, tone, size: sizeProp, ...props }: EmptyMediaProps) => React.JSX.Element;

package/dist/components/empty/empty-media.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { useEmptyContext } from "../empty/empty-context.js";
+import { Icon } from "../icon.js";
+import { IconBox } from "../icon-box.js";
+const SIZE_ICON = {
+    base: "xl",
+    lg: "2xl",
+    sm: "lg",
+};
+/** Extra space below the media so the icon reads as its own beat, not crowding the title. */
+const SIZE_MEDIA_MB = {
+    base: "mb-1.5",
+    lg: "mb-2",
+    sm: "mb-1",
+};
+/**
+ * Tone → text colour for the bare (plain) icon. `brand` uses the DS
+ * brand-on-plain pairing (`text-brand-accent`, per Pill's ghost-brand
+ * treatment) - raw `text-brand` yellow fails contrast on light surfaces.
+ */
+const PLAIN_ICON_TONE = {
+    brand: "text-brand-accent",
+    danger: "text-destructive",
+    info: "text-info-accent",
+    neutral: "text-muted-foreground",
+    success: "text-affirmative-accent",
+    warning: "text-amber-500",
+};
+/** Bare-icon size (one step up from the boxed icon so it reads on its own). */
+const PLAIN_ICON_SIZE = {
+    base: "3xl",
+    lg: "3xl",
+    sm: "2xl",
+};
+/**
+ * Media container for empty state icons.
+ */
+export const EmptyMedia = ({ children, className, icon, plain = false, tone = "neutral", size: sizeProp, ...props }) => {
+    const { size: contextSize } = useEmptyContext();
+    const iconSize = sizeProp ?? SIZE_ICON[contextSize];
+    const resolvedTone = tone ?? "neutral";
+    let media = children ?? null;
+    if (media === null && icon) {
+        media = plain ? (_jsx(Icon, { className: PLAIN_ICON_TONE[resolvedTone], icon: icon, size: PLAIN_ICON_SIZE[contextSize] })) : (_jsx(IconBox, { emphasis: "soft", icon: icon, radius: "full", size: iconSize, tone: resolvedTone }));
+    }
+    return (_jsx("div", { className: cn(SIZE_MEDIA_MB[contextSize], className), "data-component": "empty-media", "data-slot": "empty-media", ...props, children: media }));
+};

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

@@ -0,0 +1,44 @@
+import type { VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import type { EmptyLayout } from "../empty/empty-context.js";
+declare const emptyVariants: (props?: ({
+    size?: "base" | "lg" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface EmptyProps extends React.ComponentProps<"div">, VariantProps<typeof emptyVariants> {
+    /**
+     * Layout variant. `card`/`card-dashed` wrap the content in a Card; `centered`
+     * fills its parent up to `minHeight`.
+     * @default "centered"
+     */
+    layout?: EmptyLayout;
+    /**
+     * Tailwind min-height class applied only in the `centered` layout.
+     * @default "min-h-[50vh]"
+     */
+    minHeight?: string;
+}
+/**
+ * Empty state root container.
+ *
+ * @example
+ * ```tsx
+ * <Empty layout="centered" size="base">
+ *   <EmptyHeader>
+ *     <EmptyMedia>
+ *       <Search />
+ *     </EmptyMedia>
+ *     <EmptyTitle>No results found</EmptyTitle>
+ *     <EmptyDescription>Try adjusting your search.</EmptyDescription>
+ *   </EmptyHeader>
+ *   <EmptyActions>
+ *     <Button>Clear search</Button>
+ *   </EmptyActions>
+ * </Empty>
+ * ```
+ *
+ * @bestPractice Use `Empty` for "no data / nothing here"; a failure the user can retry is an `ErrorState` (which composes `Empty`), so don't hand-roll a retry empty.
+ * @bestPractice Compose `EmptyHeader` › `EmptyMedia` + `EmptyTitle` + `EmptyDescription`, and put the call-to-action in `EmptyActions`.
+ * @category feedback
+ */
+export declare const Empty: ({ children, className, layout, size, minHeight, ...props }: EmptyProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { cva } from "class-variance-authority";
+import { Card, CardContent } from "../card.js";
+import { EmptyProvider } from "../empty/empty-context.js";
+import { Stack } from "../stack.js";
+/** Padding class map for card layouts keyed by size */
+const EMPTY_PADDING_MAP = {
+    base: "py-8",
+    lg: "py-12",
+    sm: "py-6",
+};
+/**
+ * Gap between the header (media + title + description) and the actions row,
+ * keyed by size. The empty state is a single vertical axis: actions sit below
+ * the text, never beside it.
+ */
+const EMPTY_OUTER_GAP = {
+    base: "xl",
+    lg: "2xl",
+    sm: "base",
+};
+const emptyVariants = cva("", {
+    defaultVariants: {
+        size: "base",
+    },
+    variants: {
+        size: {
+            sm: "",
+            base: "",
+            lg: "",
+        },
+    },
+});
+/**
+ * Empty state root container.
+ *
+ * @example
+ * ```tsx
+ * <Empty layout="centered" size="base">
+ *   <EmptyHeader>
+ *     <EmptyMedia>
+ *       <Search />
+ *     </EmptyMedia>
+ *     <EmptyTitle>No results found</EmptyTitle>
+ *     <EmptyDescription>Try adjusting your search.</EmptyDescription>
+ *   </EmptyHeader>
+ *   <EmptyActions>
+ *     <Button>Clear search</Button>
+ *   </EmptyActions>
+ * </Empty>
+ * ```
+ *
+ * @bestPractice Use `Empty` for "no data / nothing here"; a failure the user can retry is an `ErrorState` (which composes `Empty`), so don't hand-roll a retry empty.
+ * @bestPractice Compose `EmptyHeader` › `EmptyMedia` + `EmptyTitle` + `EmptyDescription`, and put the call-to-action in `EmptyActions`.
+ * @category feedback
+ */
+export const Empty = ({ children, className, layout = "centered", size = "base", minHeight = "min-h-[50vh]", ...props }) => {
+    const resolvedSize = size ?? "base";
+    const outerGap = EMPTY_OUTER_GAP[resolvedSize];
+    // Single vertical axis: media + title + description, then actions below -
+    // centred on both axes, never laid out in a row.
+    const body = (_jsx(Stack, { align: "center", className: "w-full text-center", gap: outerGap, justify: "center", children: children }));
+    if (layout === "card" || layout === "card-dashed") {
+        const padding = EMPTY_PADDING_MAP[resolvedSize];
+        return (_jsx(EmptyProvider, { size: resolvedSize, children: _jsx(Card, { ...(layout === "card-dashed" ? { border: "dashed" } : {}), className: cn(padding, className), "data-component": "empty", "data-slot": "empty", ...props, children: _jsx(CardContent, { children: body }) }) }));
+    }
+    return (_jsx(EmptyProvider, { size: resolvedSize, children: _jsx(Stack, { align: "center", className: cn("w-full text-center", minHeight, className), "data-component": "empty", "data-slot": "empty", gap: outerGap, justify: "center", ...props, children: children }) }));
+};

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

@@ -0,0 +1,10 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { HeadingLevel } from "../../tokens/heading-level.js";
+export interface EmptyTitleProps extends useRender.ComponentProps<"div"> {
+    /** Heading level for the document outline. @default "3" */
+    level?: HeadingLevel;
+}
+/**
+ * Title text for an empty state.
+ */
+export declare const EmptyTitle: ({ className, children, level, ref, render, ...props }: EmptyTitleProps) => import("react").JSX.Element;

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

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { useEmptyContext } from "../empty/empty-context.js";
+import { Heading } from "../heading.js";
+const SIZE_HEADING = {
+    base: "subheading",
+    lg: "subheading-lg",
+    sm: "paragraph-lg",
+};
+/**
+ * Title text for an empty state.
+ */
+export const EmptyTitle = ({ className, children, level = "3", ref, render, ...props }) => {
+    const { size } = useEmptyContext();
+    const headingSize = SIZE_HEADING[size];
+    // A `render` element replaces the Heading entirely; it only gets the slot props.
+    const rendered = useRender({
+        defaultTagName: "div",
+        enabled: render !== undefined,
+        props: {
+            children,
+            className: cn(className),
+            "data-component": "empty-title",
+            "data-slot": "empty-title",
+            ...props,
+        },
+        ref,
+        render,
+    });
+    if (rendered !== null) {
+        return rendered;
+    }
+    return (_jsx(Heading, { className: cn(className), "data-component": "empty-title", "data-slot": "empty-title", level: level, size: headingSize, ...props, children: children }));
+};

package/dist/components/empty.d.ts

@@ -0,0 +1,6 @@
+export { EmptyActions } from "./empty/empty-actions.js";
+export { EmptyDescription } from "./empty/empty-description.js";
+export { EmptyHeader } from "./empty/empty-header.js";
+export { EmptyMedia } from "./empty/empty-media.js";
+export { Empty } from "./empty/empty-root.js";
+export { EmptyTitle } from "./empty/empty-title.js";

package/dist/components/empty.js

@@ -0,0 +1,7 @@
+"use client";
+export { EmptyActions } from "./empty/empty-actions.js";
+export { EmptyDescription } from "./empty/empty-description.js";
+export { EmptyHeader } from "./empty/empty-header.js";
+export { EmptyMedia } from "./empty/empty-media.js";
+export { Empty } from "./empty/empty-root.js";
+export { EmptyTitle } from "./empty/empty-title.js";

package/dist/components/error-boundary/error-boundary-root.d.ts

@@ -0,0 +1,54 @@
+import type { ErrorInfo, ReactNode } from "react";
+import { Component } from "react";
+export interface ErrorBoundaryFallbackProps {
+    /** The error captured by the boundary. */
+    error: Error;
+    /** Clears the error and re-renders the wrapped subtree. */
+    reset: () => void;
+}
+export interface ErrorBoundaryProps {
+    children: ReactNode;
+    /**
+     * Rendered when the subtree throws. Either a static node or a render prop
+     * receiving the captured error and a `reset` callback. Defaults to nothing.
+     */
+    fallback?: ReactNode | ((props: ErrorBoundaryFallbackProps) => ReactNode);
+    /**
+     * Called when the subtree throws. Receives the error and React's component
+     * stack. Use this to report to logging/telemetry - the boundary itself does
+     * not log.
+     */
+    onError?: (error: Error, info: ErrorInfo) => void;
+    /** Called when the boundary is reset, before the subtree re-renders. */
+    onReset?: () => void;
+}
+interface ErrorBoundaryState {
+    error: Error | null;
+}
+/**
+ * Generic error boundary that prevents a crashing subtree from taking down the
+ * rest of the page. Reporting is delegated to `onError` (no hardcoded logging),
+ * and recovery is available through `reset` on a render-prop `fallback`.
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary
+ *   onError={(error) => reportError(error)}
+ *   fallback={({ reset }) => <RetryPanel onRetry={reset} />}
+ * >
+ *   <FlakyWidget />
+ * </ErrorBoundary>
+ * ```
+ *
+ * @bestPractice `ErrorBoundary` catches render crashes in a subtree - pair it with an `ErrorState` in `fallback` to show the failure; it renders nothing by default.
+ * @bestPractice It logs nothing itself - wire telemetry through `onError`, and offer recovery via the render-prop `fallback`'s `reset` callback.
+ * @category feedback
+ */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    reset: () => void;
+    render(): ReactNode;
+}
+export {};

package/dist/components/error-boundary/error-boundary-root.js

@@ -0,0 +1,51 @@
+"use client";
+import { Component } from "react";
+/** Tells the render-prop form of `fallback` from a static node. */
+const isRenderProp = (fallback) => typeof fallback === "function";
+/**
+ * Generic error boundary that prevents a crashing subtree from taking down the
+ * rest of the page. Reporting is delegated to `onError` (no hardcoded logging),
+ * and recovery is available through `reset` on a render-prop `fallback`.
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary
+ *   onError={(error) => reportError(error)}
+ *   fallback={({ reset }) => <RetryPanel onRetry={reset} />}
+ * >
+ *   <FlakyWidget />
+ * </ErrorBoundary>
+ * ```
+ *
+ * @bestPractice `ErrorBoundary` catches render crashes in a subtree - pair it with an `ErrorState` in `fallback` to show the failure; it renders nothing by default.
+ * @bestPractice It logs nothing itself - wire telemetry through `onError`, and offer recovery via the render-prop `fallback`'s `reset` callback.
+ * @category feedback
+ */
+export class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error, info) {
+        this.props.onError?.(error, info);
+    }
+    reset = () => {
+        this.props.onReset?.();
+        // oxlint-disable-next-line react/no-set-state -- an error boundary must be a class component
+        this.setState({ error: null });
+    };
+    render() {
+        const { error } = this.state;
+        const { children, fallback } = this.props;
+        if (error !== null) {
+            if (isRenderProp(fallback)) {
+                return fallback({ error, reset: this.reset });
+            }
+            return fallback ?? null;
+        }
+        return children;
+    }
+}

package/dist/components/error-boundary.d.ts

@@ -0,0 +1 @@
+export { ErrorBoundary, type ErrorBoundaryFallbackProps, type ErrorBoundaryProps, } from "./error-boundary/error-boundary-root.js";

package/dist/components/error-boundary.js

@@ -0,0 +1 @@
+export { ErrorBoundary, } from "./error-boundary/error-boundary-root.js";

package/dist/components/expand-button/expand-button-root.d.ts

@@ -0,0 +1,32 @@
+import type { VariantProps } from "class-variance-authority";
+import type * as React from "react";
+type ExpandButtonIcon = React.ComponentType<React.SVGProps<SVGSVGElement>>;
+declare const expandButtonVariants: (props?: ({
+    size?: "2xl" | "2xs" | "3xl" | "base" | "lg" | "sm" | "xl" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ExpandButtonProps = Omit<React.ComponentProps<"button">, "children" | "type"> & VariantProps<typeof expandButtonVariants> & {
+    /** Whether the button shows its expanded state; drives the icon and `aria-expanded`. @default false */
+    expanded?: boolean;
+    /** Icon shown while expanded. @default Minus */
+    expandedIcon?: ExpandButtonIcon;
+    /** Icon shown while collapsed. @default Plus */
+    collapsedIcon?: ExpandButtonIcon;
+};
+/**
+ * Small square toggle button for expand/collapse actions; shows Plus when
+ * collapsed and Minus when expanded, and reflects state via `aria-expanded`.
+ * Import from "@instruments/materia-ui/components/expand-button".
+ *
+ * This is an icon-only control, so pass an `aria-label` (or `aria-labelledby`)
+ * describing the action (e.g. "Expand row") - without it screen readers
+ * announce an unlabelled button.
+ *
+ * @example
+ * <ExpandButton aria-label="Expand row" expanded={open} onClick={toggle} />
+ *
+ * @bestPractice Always pass an `aria-label` (e.g. "Expand row") - it's icon-only, so without one screen readers announce an unlabelled button.
+ * @bestPractice Drive the icon and `aria-expanded` with the `expanded` prop; set `expandedIcon`/`collapsedIcon` only to override the default Minus/Plus pair.
+ * @category actions
+ */
+declare const ExpandButton: ({ className, expanded, expandedIcon: ExpandedIcon, collapsedIcon: CollapsedIcon, size, ...props }: ExpandButtonProps) => React.JSX.Element;
+export { ExpandButton };