@instruments/materia-ui 0.1.0

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

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SidepanelDialogRoot } from "./sidepanel-dismiss.js";
+/**
+ * Root component for a sidepanel. Wraps Base UI Dialog.Root.
+ *
+ * @param props.open - Controlled open state (pair with onOpenChange)
+ * @param props.defaultOpen - Uncontrolled initial open state
+ * @param props.onOpenChange - Callback when open state changes, with Base UI's `(open, eventDetails)` signature
+ * @param props.modal - Whether the background is inert (default: true)
+ * @param props.disablePointerDismissal - Keep the panel open on outside presses
+ *
+ * @bestPractice Reach for `Sidepanel` when you need nested sub-panels or a non-modal panel (`modal={false}`) that leaves the page interactive; a single focused edge panel is a `Sheet`.
+ * @bestPractice Compose nested panels with `SidepanelNestedRoot`, and always render a `SidepanelTitle` for the accessible name.
+ * @category overlays
+ */
+const SidepanelRoot = (props) => (_jsx(SidepanelDialogRoot, { "data-component": "sidepanel", "data-slot": "sidepanel", ...props }));
+export { SidepanelRoot };

package/dist/components/sidepanel/sidepanel-title-context.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Lets a visible `SidepanelTitle` tell its `SidepanelContent` it is mounted,
+ * so the content stops naming the panel from its `title` prop. Called with
+ * `true` on mount and `false` on unmount.
+ */
+export declare const SidepanelTitleRegistryContext: import("react").Context<((present: boolean) => void) | null>;

package/dist/components/sidepanel/sidepanel-title-context.js

@@ -0,0 +1,8 @@
+"use client";
+import { createContext } from "react";
+/**
+ * Lets a visible `SidepanelTitle` tell its `SidepanelContent` it is mounted,
+ * so the content stops naming the panel from its `title` prop. Called with
+ * `true` on mount and `false` on unmount.
+ */
+export const SidepanelTitleRegistryContext = createContext(null);

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

@@ -0,0 +1,15 @@
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import type { ComponentProps } from "react";
+type SidepanelTitleProps = ComponentProps<typeof DialogPrimitive.Title>;
+declare const SidepanelTitlePart: ({ className: incoming, ...props }: Omit<Omit<import("@base-ui/react").DialogTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>, "className"> & {
+    className?: string;
+}) => import("react").ReactElement;
+/**
+ * Title element for the sidepanel, and the panel's accessible name. While it
+ * is mounted, `SidepanelContent` drops the name it would otherwise take from
+ * its `title` prop, so the panel is announced with one title.
+ *
+ * @bestPractice Render one visible `SidepanelTitle` per panel; without one, pass `SidepanelContent` a `title` so the panel still has a name.
+ */
+declare const SidepanelTitle: (props: ComponentProps<typeof SidepanelTitlePart>) => import("react").JSX.Element;
+export { SidepanelTitle, type SidepanelTitleProps };

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

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { use, useLayoutEffect } from "react";
+import { OVERLAY_TITLE } from "../../tokens/overlay-styles.js";
+import { makeOverlayTitle } from "../overlay-primitives.js";
+import { SidepanelTitleRegistryContext } from "./sidepanel-title-context.js";
+const SidepanelTitlePart = makeOverlayTitle(DialogPrimitive.Title, {
+    className: OVERLAY_TITLE,
+    slot: "sidepanel-title",
+});
+/**
+ * Title element for the sidepanel, and the panel's accessible name. While it
+ * is mounted, `SidepanelContent` drops the name it would otherwise take from
+ * its `title` prop, so the panel is announced with one title.
+ *
+ * @bestPractice Render one visible `SidepanelTitle` per panel; without one, pass `SidepanelContent` a `title` so the panel still has a name.
+ */
+const SidepanelTitle = (props) => {
+    const register = use(SidepanelTitleRegistryContext);
+    useLayoutEffect(() => {
+        register?.(true);
+        return () => {
+            register?.(false);
+        };
+    }, [register]);
+    return _jsx(SidepanelTitlePart, { ...props });
+};
+export { SidepanelTitle };

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

@@ -0,0 +1,8 @@
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import type { ComponentProps } from "react";
+type SidepanelTriggerProps = ComponentProps<typeof DialogPrimitive.Trigger>;
+/**
+ * Trigger button that opens the sidepanel when clicked.
+ */
+declare const SidepanelTrigger: (props: import("@base-ui/react").DialogTriggerProps<unknown> & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement;
+export { SidepanelTrigger, type SidepanelTriggerProps };

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

@@ -0,0 +1,11 @@
+"use client";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { makeOverlayTrigger } from "../overlay-primitives.js";
+/**
+ * Trigger button that opens the sidepanel when clicked.
+ */
+const SidepanelTrigger = makeOverlayTrigger(DialogPrimitive.Trigger, {
+    component: "sidepanel-trigger",
+    slot: "sidepanel-trigger",
+});
+export { SidepanelTrigger };

package/dist/components/sidepanel.d.ts

@@ -0,0 +1,19 @@
+export { sidepanelAnatomy } from "./sidepanel/sidepanel-anatomy.js";
+export { SidepanelBody, SidepanelScroll } from "./sidepanel/sidepanel-body.js";
+export { SidepanelClose } from "./sidepanel/sidepanel-close.js";
+export type { SidepanelCloseButtonProps } from "./sidepanel/sidepanel-close-button.js";
+export { SidepanelCloseButton } from "./sidepanel/sidepanel-close-button.js";
+export type { SidepanelContentProps, SidepanelWidth, } from "./sidepanel/sidepanel-content.js";
+export { SidepanelContent } from "./sidepanel/sidepanel-content.js";
+export type { SidepanelControlsProps } from "./sidepanel/sidepanel-controls.js";
+export { SidepanelControls } from "./sidepanel/sidepanel-controls.js";
+export { SidepanelDescription } from "./sidepanel/sidepanel-description.js";
+export { SidepanelFooter } from "./sidepanel/sidepanel-footer.js";
+export type { SidepanelHeaderProps, SidepanelHeaderVariant, } from "./sidepanel/sidepanel-header.js";
+export { SidepanelHeader } from "./sidepanel/sidepanel-header.js";
+export type { SidepanelNestedRootProps } from "./sidepanel/sidepanel-nested-root.js";
+export { SidepanelNestedRoot } from "./sidepanel/sidepanel-nested-root.js";
+export type { SidepanelRootProps as SidepanelProps } from "./sidepanel/sidepanel-root.js";
+export { SidepanelRoot as Sidepanel } from "./sidepanel/sidepanel-root.js";
+export { SidepanelTitle } from "./sidepanel/sidepanel-title.js";
+export { SidepanelTrigger } from "./sidepanel/sidepanel-trigger.js";

package/dist/components/sidepanel.js

@@ -0,0 +1,13 @@
+export { sidepanelAnatomy } from "./sidepanel/sidepanel-anatomy.js";
+export { SidepanelBody, SidepanelScroll } from "./sidepanel/sidepanel-body.js";
+export { SidepanelClose } from "./sidepanel/sidepanel-close.js";
+export { SidepanelCloseButton } from "./sidepanel/sidepanel-close-button.js";
+export { SidepanelContent } from "./sidepanel/sidepanel-content.js";
+export { SidepanelControls } from "./sidepanel/sidepanel-controls.js";
+export { SidepanelDescription } from "./sidepanel/sidepanel-description.js";
+export { SidepanelFooter } from "./sidepanel/sidepanel-footer.js";
+export { SidepanelHeader } from "./sidepanel/sidepanel-header.js";
+export { SidepanelNestedRoot } from "./sidepanel/sidepanel-nested-root.js";
+export { SidepanelRoot as Sidepanel } from "./sidepanel/sidepanel-root.js";
+export { SidepanelTitle } from "./sidepanel/sidepanel-title.js";
+export { SidepanelTrigger } from "./sidepanel/sidepanel-trigger.js";

package/dist/components/simple-grid/simple-grid-root.d.ts

@@ -0,0 +1,46 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { LayoutElement, LayoutHostAttributes, LayoutHostKey } from "../../tokens/element.js";
+import type { ResponsiveMode, LayoutResponsiveValue } from "../../tokens/responsive.js";
+import type { GapSize } from "../../tokens/responsive-classes.js";
+export interface SimpleGridProps extends Omit<useRender.ComponentProps<"div">, LayoutHostKey>, LayoutHostAttributes {
+    /**
+     * Render as a different host element from the closed layout vocabulary
+     * ({@link LayoutElement}). The set is deliberately closed: `as="button"` is a
+     * type error, because the design-system answer is the Button component. Event handlers
+     * and the ref accept any host element.
+     *
+     * `as` and `render` are mutually exclusive; if both are passed, `render`
+     * wins (a dev-only warning fires).
+     * @example <SimpleGrid as="ul">
+     */
+    as?: LayoutElement;
+    /** Number of equal-width columns. Accepts a per-breakpoint responsive object. @default 3 */
+    cols?: LayoutResponsiveValue<number>;
+    /** Gap between items, from the spacing scale. Accepts a per-breakpoint responsive object. @default "base" */
+    gap?: LayoutResponsiveValue<GapSize>;
+    /** Whether responsive values resolve against the viewport ("screen") or nearest container ("container"). @default "screen" */
+    responsiveMode?: ResponsiveMode;
+    /** Horizontal gap between columns. Accepts a per-breakpoint responsive object. Overrides `gap` on the inline axis. */
+    xGap?: LayoutResponsiveValue<GapSize>;
+    /** Vertical gap between rows. Accepts a per-breakpoint responsive object. Overrides `gap` on the block axis. */
+    yGap?: LayoutResponsiveValue<GapSize>;
+}
+/**
+ * Equal-width column grid built on CSS Grid.
+ *
+ * `cols` and `gap` accept a single value or a per-breakpoint responsive object like
+ * `{ base: 1, md: 3 }`; set `responsiveMode` to `"container"` to resolve breakpoints
+ * against the nearest container instead of the viewport.
+ *
+ * @example
+ * ```tsx
+ * <SimpleGrid cols={{ base: 1, md: 2, lg: 4 }} gap="lg" />
+ * ```
+ *
+ * @bestPractice `SimpleGrid` lays out equal-width columns - set `cols` (responsive, e.g. `{ base: 1, md: 3 }`); when you need column spans or ordering, step up to `Grid`.
+ * @bestPractice Set `xGap`/`yGap` for different column and row spacing; each overrides the `gap` shorthand on its own axis.
+ * @bestPractice `as` and `render` are mutually exclusive (`render` wins, dev-warned); `as` draws from the closed layout vocabulary, so `as="button"` is a type error (use `Button`).
+ * @bestPractice Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.
+ * @category layout
+ */
+export declare const SimpleGrid: ({ as, className, cols, gap, ref, render, responsiveMode, xGap, yGap, ...props }: SimpleGridProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/simple-grid/simple-grid-root.js

@@ -0,0 +1,55 @@
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { pushResponsiveClasses } from "../../tokens/responsive.js";
+import { GAP_CLASS, GAP_X_CLASS, GAP_Y_CLASS, GRID_COLS_CLASS, } from "../../tokens/responsive-classes.js";
+import { reportDevIssue } from "../../utils/dev-issue.js";
+/**
+ * The grid's own class string, built fresh per call. When either axis gap is
+ * set, `gap` becomes the per-axis fallback for the other axis.
+ */
+const getGridClasses = ({ cols, gap, responsiveMode, xGap, yGap, }) => {
+    const classes = ["grid"];
+    pushResponsiveClasses(classes, cols, GRID_COLS_CLASS, responsiveMode);
+    if (xGap === undefined && yGap === undefined) {
+        pushResponsiveClasses(classes, gap, GAP_CLASS, responsiveMode);
+    }
+    else {
+        pushResponsiveClasses(classes, xGap ?? gap, GAP_X_CLASS, responsiveMode);
+        pushResponsiveClasses(classes, yGap ?? gap, GAP_Y_CLASS, responsiveMode);
+    }
+    return classes.join(" ");
+};
+/**
+ * Equal-width column grid built on CSS Grid.
+ *
+ * `cols` and `gap` accept a single value or a per-breakpoint responsive object like
+ * `{ base: 1, md: 3 }`; set `responsiveMode` to `"container"` to resolve breakpoints
+ * against the nearest container instead of the viewport.
+ *
+ * @example
+ * ```tsx
+ * <SimpleGrid cols={{ base: 1, md: 2, lg: 4 }} gap="lg" />
+ * ```
+ *
+ * @bestPractice `SimpleGrid` lays out equal-width columns - set `cols` (responsive, e.g. `{ base: 1, md: 3 }`); when you need column spans or ordering, step up to `Grid`.
+ * @bestPractice Set `xGap`/`yGap` for different column and row spacing; each overrides the `gap` shorthand on its own axis.
+ * @bestPractice `as` and `render` are mutually exclusive (`render` wins, dev-warned); `as` draws from the closed layout vocabulary, so `as="button"` is a type error (use `Button`).
+ * @bestPractice Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.
+ * @category layout
+ */
+export const SimpleGrid = ({ as, className, cols = 3, gap = "base", ref, render, responsiveMode = "screen", xGap, yGap, ...props }) => {
+    if (render !== undefined && as !== undefined) {
+        reportDevIssue("SimpleGrid: `as` and `render` are mutually exclusive; `render` wins and `as` is ignored.");
+    }
+    return useRender({
+        defaultTagName: as ?? "div",
+        props: {
+            className: cn(getGridClasses({ cols, gap, responsiveMode, xGap, yGap }), className),
+            "data-component": "simple-grid",
+            "data-slot": "simple-grid",
+            ...props,
+        },
+        ref,
+        render,
+    });
+};

package/dist/components/simple-grid/simple-grid.test-d.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Type-level surface guards for SimpleGrid's closed `as` vocabulary and `render` prop.
+ *
+ * Evaluated by `tsc --noEmit` (the `typecheck` gate), not by vitest.
+ */
+import type { ComponentProps, ReactElement } from "react";
+import type { SimpleGrid } from "./simple-grid-root.js";
+/** Passes only when `T` is exactly `true`. */
+type Expect<T extends true> = T;
+/** Boolean negation at the type level. */
+type Not<B extends boolean> = B extends true ? false : true;
+/** `true` iff a value of type `V` is accepted as SimpleGrid props. */
+type Accepts<V> = V extends ComponentProps<typeof SimpleGrid> ? true : false;
+export type NavAccepted = Expect<Accepts<{
+    as: "nav";
+}>>;
+export type ButtonRejected = Expect<Not<Accepts<{
+    as: "button";
+}>>>;
+export type AnchorRejected = Expect<Not<Accepts<{
+    as: "a";
+}>>>;
+export type RenderAccepted = Expect<Accepts<{
+    render: ReactElement;
+}>>;
+export type ArgsNonNever = Expect<Not<[ComponentProps<typeof SimpleGrid>] extends [never] ? true : false>>;
+export type XGapAccepted = Expect<Accepts<{
+    xGap: "lg";
+    yGap: {
+        base: "sm";
+        md: "xl";
+    };
+}>>;
+export type XGapRejected = Expect<Not<Accepts<{
+    xGap: "huge";
+}>>>;
+export type ColsContainerKeyRejected = Expect<Not<Accepts<{
+    cols: {
+        base: 1;
+        "@md": 2;
+    };
+}>>>;
+export type GapContainerKeyRejected = Expect<Not<Accepts<{
+    xGap: {
+        "@sm": "lg";
+    };
+}>>>;
+export {};

package/dist/components/simple-grid/simple-grid.test-d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/simple-grid.d.ts

@@ -0,0 +1 @@
+export { SimpleGrid, type SimpleGridProps, } from "./simple-grid/simple-grid-root.js";

package/dist/components/simple-grid.js

@@ -0,0 +1 @@
+export { SimpleGrid, } from "./simple-grid/simple-grid-root.js";

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

@@ -0,0 +1,27 @@
+type SkeletonVariant = "default" | "light";
+interface SkeletonProps extends React.ComponentProps<"div"> {
+    /** Visual variant - use "light" on white/background surfaces */
+    variant?: SkeletonVariant;
+}
+/**
+ * Skeleton loader component for showing loading states.
+ * Displays animated placeholder with a shimmer gradient sweep.
+ *
+ * @param props - The skeleton props
+ * @param props.variant - Visual variant: "default" (gray-200) or "light" (gray-100 for lighter surfaces)
+ * @param props.className - Additional CSS classes to apply (use for width/height).
+ * @param props... - All other standard HTML div element props.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton className="h-4 w-32" />
+ * <Skeleton className="h-20 w-full rounded-md" variant="light" />
+ * ```
+ *
+ * @bestPractice Prefer `Skeleton` over a spinner for content areas - a layout-stable placeholder that mirrors the final shape avoids reflow when data lands.
+ * @bestPractice Size it with `className` (`h-*` / `w-*`); use `variant="light"` on white / `bg-background` surfaces where the default grey is too dark.
+ * @category feedback
+ */
+declare const Skeleton: ({ className, variant, ...props }: SkeletonProps) => import("react").JSX.Element;
+export type { SkeletonProps, SkeletonVariant };
+export { Skeleton };

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+const variantStyles = {
+    default: "bg-gray-200 dark:bg-surface-2",
+    light: "bg-gray-100 dark:bg-surface-1",
+};
+/**
+ * Skeleton loader component for showing loading states.
+ * Displays animated placeholder with a shimmer gradient sweep.
+ *
+ * @param props - The skeleton props
+ * @param props.variant - Visual variant: "default" (gray-200) or "light" (gray-100 for lighter surfaces)
+ * @param props.className - Additional CSS classes to apply (use for width/height).
+ * @param props... - All other standard HTML div element props.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton className="h-4 w-32" />
+ * <Skeleton className="h-20 w-full rounded-md" variant="light" />
+ * ```
+ *
+ * @bestPractice Prefer `Skeleton` over a spinner for content areas - a layout-stable placeholder that mirrors the final shape avoids reflow when data lands.
+ * @bestPractice Size it with `className` (`h-*` / `w-*`); use `variant="light"` on white / `bg-background` surfaces where the default grey is too dark.
+ * @category feedback
+ */
+const Skeleton = ({ className, variant = "default", ...props }) => (_jsx("div", { className: cn("relative overflow-hidden rounded-md", variantStyles[variant], className), "data-component": "skeleton", "data-slot": "skeleton", ...props, children: _jsx("div", { className: "animate-shimmer absolute inset-0 bg-linear-to-r from-transparent via-white/60 to-transparent dark:via-white/5" }) }));
+export { Skeleton };

package/dist/components/skeleton/skeleton-row.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps } from "react";
+type SkeletonRowMedia = "avatar" | "tile";
+interface SkeletonRowProps extends ComponentProps<"div"> {
+    /** Number of text lines to render alongside the media placeholder. Defaults to 2. */
+    lines?: number;
+    /** Media placeholder shape: a round avatar or a rounded-square tile. Omit for text-only rows. */
+    media?: SkeletonRowMedia;
+}
+/**
+ * Placeholder for a list/table row while content is loading: an optional
+ * media thumbnail (avatar or tile) beside stacked text lines.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonRow media="tile" lines={2} />
+ * ```
+ */
+declare const SkeletonRow: ({ className, lines, media, ...props }: SkeletonRowProps) => import("react").JSX.Element;
+export type { SkeletonRowMedia, SkeletonRowProps };
+export { SkeletonRow };

package/dist/components/skeleton/skeleton-row.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { HStack } from "../stack/stack-root.js";
+import { Skeleton } from "./skeleton-root.js";
+import { SkeletonText } from "./skeleton-text.js";
+const MEDIA_RADIUS_CLASS = {
+    avatar: "rounded-full",
+    tile: "rounded-lg",
+};
+/**
+ * Placeholder for a list/table row while content is loading: an optional
+ * media thumbnail (avatar or tile) beside stacked text lines.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonRow media="tile" lines={2} />
+ * ```
+ */
+const SkeletonRow = ({ className, lines = 2, media, ...props }) => (_jsxs(HStack, { align: "center", className: className, "data-component": "skeleton-row", "data-slot": "skeleton-row", gap: "sm", ...props, children: [media && (_jsx(Skeleton, { className: cn("size-10 shrink-0", MEDIA_RADIUS_CLASS[media]) })), _jsx(SkeletonText, { lines: lines })] }));
+export { SkeletonRow };

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

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import type { ComponentSize } from "../../tokens/size.js";
+interface SkeletonTextProps extends Omit<ComponentProps<"div">, "children"> {
+    /** Number of placeholder lines to render. Defaults to 1. */
+    lines?: number;
+    /** Line height, from the shared `ComponentSize` scale. Defaults to "sm". */
+    size?: ComponentSize;
+}
+/**
+ * Placeholder for a block of text while content is loading.
+ * Renders `lines` skeleton bars; when there is more than one line the
+ * last one is narrower, mimicking a paragraph's natural taper.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonText lines={2} size="base" />
+ * ```
+ */
+declare const SkeletonText: ({ className, lines, size, ...props }: SkeletonTextProps) => import("react").JSX.Element;
+export type { SkeletonTextProps };
+export { SkeletonText };

package/dist/components/skeleton/skeleton-text.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Stack } from "../stack.js";
+import { Skeleton } from "./skeleton-root.js";
+/** Line-height class per `ComponentSize`, for a single skeleton text line. */
+const SKELETON_TEXT_HEIGHT_CLASS = {
+    "2xl": "h-7",
+    "2xs": "h-2.5",
+    "3xl": "h-8",
+    base: "h-4",
+    lg: "h-5",
+    sm: "h-3.5",
+    xl: "h-6",
+    xs: "h-3",
+};
+/**
+ * Placeholder for a block of text while content is loading.
+ * Renders `lines` skeleton bars; when there is more than one line the
+ * last one is narrower, mimicking a paragraph's natural taper.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonText lines={2} size="base" />
+ * ```
+ */
+const SkeletonText = ({ className, lines = 1, size = "sm", ...props }) => {
+    const heightClass = SKELETON_TEXT_HEIGHT_CLASS[size];
+    const lineIds = Array.from({ length: lines }, (_, index) => `line-${index}`);
+    const lastLineId = lineIds.at(-1);
+    return (_jsx(Stack, { className: className, "data-component": "skeleton-text", "data-slot": "skeleton-text", gap: "xs", ...props, children: lineIds.map((id) => (_jsx(Skeleton, { className: cn(heightClass, 
+            // Fixed (not percentage) widths: SkeletonText is often used as a
+            // flex item with no definite container width, where a percentage
+            // width has nothing to resolve against and collapses to 0.
+            id === lastLineId && lines > 1 ? "w-24" : "w-40") }, id))) }));
+};
+export { SkeletonText };

package/dist/components/skeleton.d.ts

@@ -0,0 +1,3 @@
+export { Skeleton } from "./skeleton/skeleton-root.js";
+export { SkeletonRow } from "./skeleton/skeleton-row.js";
+export { SkeletonText } from "./skeleton/skeleton-text.js";

package/dist/components/skeleton.js

@@ -0,0 +1,3 @@
+export { Skeleton } from "./skeleton/skeleton-root.js";
+export { SkeletonRow } from "./skeleton/skeleton-row.js";
+export { SkeletonText } from "./skeleton/skeleton-text.js";

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

@@ -0,0 +1,98 @@
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+import type { ReactNode } from "react";
+/**
+ * Selects a single value or a range from a continuous scale, rendering one draggable thumb per value.
+ * Import from "@instruments/materia-ui/components/slider".
+ * Built on Base UI primitives for accessible behaviour.
+ *
+ * @bestPractice Pass `value`/`defaultValue` as a number for one thumb or an array - one number per thumb; a two-element array renders a range and the thumb count follows the array length.
+ * @bestPractice Set `min`/`max`/`step` to real domain bounds (defaults 0–100) rather than rescaling values yourself after `onValueChange`.
+ * @bestPractice For exact numeric entry use `Input type="number"`; reserve `Slider` for approximate selection along a continuous range.
+ * @bestPractice Name every thumb with `thumbLabels`. `aria-label` on the root labels the group, not the handles, and a handle is what a screen reader lands on.
+ * @bestPractice On `variant="channel"`, give the channel its colour with `trackBackground` and keep the thumb legible against it with `getThumbColor`; the app owns the colour maths, the slider only paints the result.
+ * @bestPractice Use `labelStart`/`labelEnd` for visible end captions and `getValueText` for what a screen reader hears; the captions are hidden from assistive technology.
+ *
+ * Channel affordances adapted from @patternmode/channel.
+ * @category forms
+ */
+interface SliderProps<Value extends number | readonly number[] = number | readonly number[]> extends SliderPrimitive.Root.Props<Value> {
+    /**
+     * Accessible name for each thumb, in thumb order - `["Minimum", "Maximum"]`
+     * for a range.
+     *
+     * The `role="slider"` input lives inside the THUMB, so an `aria-label` on
+     * the root names the group and leaves the handle itself nameless. Anything shorter
+     * than the thumb count falls back to the root's own label.
+     */
+    thumbLabels?: readonly string[];
+    /**
+     * Let the thumb travel to a value it did not receive from the pointer.
+     *
+     * The thumb is positioned from the value, so a change made anywhere but
+     * the track - a keyboard step, a jump button, a URL - teleports it, and the
+     * reader loses where it went and how far. With this on, the thumb travels
+     * and the distance it covers says how far the value moved.
+     *
+     * A DRAG is exempt: the thumb must stay under the finger, so the travel is
+     * switched off for the duration of the gesture and back on when it ends.
+     * Off by default, because a slider that is only ever dragged gains nothing.
+     */
+    travelToValue?: boolean;
+    /**
+     * Told when a drag starts and ends.
+     *
+     * A consumer usually has something else that should behave differently
+     * under the finger - a preview that should stop animating each step, a
+     * readout that should stop settling - and the state is already tracked here
+     * for {@link travelToValue}.
+     */
+    onDraggingChange?: (dragging: boolean) => void;
+    /**
+     * Which instrument this is.
+     *
+     * `"default"` is the 6px line. `"channel"` is the 48px pressed channel with
+     * a 40px glass thumb that Colour Studio's colour controls and the catalogue
+     * reader's page transport both use: same geometry, same grab cursors, same
+     * two-speed press - the glass compresses in 120ms and the thumb's core rises
+     * out of it 80ms later on a gentle overshoot, which is what makes the core
+     * feel like it moves independently of the glass.
+     *
+     * It sets GEOMETRY AND BEHAVIOUR ONLY. The channel's own fill, the thumb's
+     * material and whatever sits at its centre belong to the consumer, because
+     * they are what the two instruments do not share: one carries a colour
+     * ramp, the other the shape of a book.
+     *
+     * @default "default"
+     */
+    variant?: "channel" | "default";
+    /**
+     * A CSS gradient painted on the channel, such as a lightness ramp. It is a
+     * runtime colour value, so it travels as an inline style on the track.
+     * Channel variant only.
+     * @example "linear-gradient(to right, oklch(0.25 0.04 45), oklch(0.95 0.02 85))"
+     */
+    trackBackground?: string;
+    /**
+     * The colour of each thumb's core, given the thumb's live value and index, so
+     * contrast follows the app's own ramp. Channel variant only.
+     */
+    getThumbColor?: (value: number, index: number) => string;
+    /**
+     * A visible caption at the start of the channel. Hidden from assistive
+     * technology, which gets the thumb's own name and value. Channel variant only.
+     */
+    labelStart?: ReactNode;
+    /**
+     * A visible caption at the end of the channel. Hidden from assistive
+     * technology, which gets the thumb's own name and value. Channel variant only.
+     */
+    labelEnd?: ReactNode;
+    /**
+     * Describe a value in domain language ("62% lightness") for screen readers,
+     * instead of the bare number.
+     */
+    getValueText?: (value: number, index: number) => string;
+}
+declare const Slider: <Value extends number | readonly number[]>({ className, defaultValue, value, getThumbColor, getValueText, labelEnd, labelStart, onDraggingChange, thumbLabels, trackBackground, travelToValue, variant, ...props }: SliderProps<Value>) => import("react").JSX.Element;
+export { Slider };
+export type { SliderProps };