@instruments/materia-ui 0.1.0

package/dist/compositions/delivery-banner/delivery-banner-root.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@instruments/materia-ui/components/button";
+import { Flex } from "@instruments/materia-ui/components/flex";
+import { Grid } from "@instruments/materia-ui/components/grid";
+import { Icon } from "@instruments/materia-ui/components/icon";
+import { Separator } from "@instruments/materia-ui/components/separator";
+import { focusRing } from "@instruments/materia-ui/tokens/focus-ring";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Clock, X } from "lucide-react";
+import { formatRemaining, useRemainingTime } from "./use-remaining-time.js";
+const DEFAULT_URGENT_WITHIN = 15 * 60_000;
+// Figma sets the text in green-600 / red-600 on the soft fill, about 3.2:1 and
+// short of AA, so text takes the darker `*-foreground` and the accent is kept
+// for the border, divider and clock.
+const STATE_CLASSES = {
+    calm: {
+        accent: "text-affirmative-accent",
+        divider: "bg-affirmative-accent",
+        root: "border-affirmative-accent bg-affirmative-soft text-affirmative-foreground",
+    },
+    urgent: {
+        // error-accent is red-300 (1.7:1 on error-soft); destructive matches the
+        // calm state's green-600 weight.
+        accent: "text-destructive",
+        divider: "bg-destructive",
+        root: "border-destructive bg-error-soft text-error-foreground",
+    },
+};
+/**
+ * Full-width strip counting down to today's delivery cut-off and naming where
+ * samples will be delivered. Green while there is time, red once less than
+ * `urgentWithin` remains.
+ *
+ * @bestPractice Pass `deadline` from the server's cut-off; the banner only counts down and never decides when delivery closes.
+ * @bestPractice Give it `onLocationClick` when the address can be changed, so the location becomes a button rather than inert text.
+ * @bestPractice Place it full width directly under the header; it switches to its compact layout from its own width, not the viewport's.
+ * @category catalogue
+ */
+export const DeliveryBanner = ({ className, deadline, dismissLabel = "Dismiss", label = "Add to delivery:", location, locationPrefix = "Samples will be delivered to:", onDismiss, onLocationClick, urgentWithin = DEFAULT_URGENT_WITHIN, ...props }) => {
+    const remaining = useRemainingTime(deadline);
+    const state = remaining <= urgentWithin ? "urgent" : "calm";
+    const tone = STATE_CLASSES[state];
+    return (_jsx("section", { "aria-label": label.replace(/:\s*$/u, ""), className: cn("@container h-12 w-full border-b", tone.root, className), "data-component": "delivery-banner", "data-state": state, ...props, children: _jsxs(Grid, { align: "center", className: "text-caption @[40rem]:text-paragraph-sm h-full grid-cols-[minmax(0,1fr)_auto] px-4 @[40rem]:grid-cols-[1fr_minmax(0,auto)_1fr] @[40rem]:px-8", columns: "none", gap: "base", children: [_jsxs(Flex, { align: "center", className: "min-w-0 @[40rem]:col-start-2", gap: "base", children: [_jsxs(Flex, { align: "center", className: "shrink-0 font-semibold", gap: "xs", children: [_jsx("span", { children: label }), _jsx(Icon, { className: tone.accent, icon: Clock, size: "xs" }), _jsx("time", { className: "tabular-nums", suppressHydrationWarning: true, children: formatRemaining(remaining) })] }), _jsx(Separator, { "aria-hidden": true, className: cn("data-[orientation=vertical]:h-4", tone.divider), orientation: "vertical" }), _jsxs(Flex, { align: "center", className: "min-w-0", gap: "2xs", children: [_jsx("span", { className: "hidden shrink-0 @[40rem]:inline", children: locationPrefix }), onLocationClick === undefined ? (_jsx("span", { className: "min-w-0 truncate", children: location })) : (_jsx("button", { className: cn("min-w-0 cursor-pointer truncate rounded-sm underline underline-offset-2 hover:decoration-2", focusRing()), onClick: onLocationClick, type: "button", children: location }))] })] }), onDismiss === undefined ? null : (_jsx(Button, { "aria-label": dismissLabel, className: "justify-self-end text-inherit hover:bg-current/10 hover:text-inherit", emphasis: "ghost", icon: X, iconClassName: "size-5", onClick: onDismiss, size: "icon-sm", square: true }))] }) }));
+};

package/dist/compositions/delivery-banner/use-remaining-time.d.ts

@@ -0,0 +1,4 @@
+/** Milliseconds left until `deadline`, refreshed every 15 seconds. */
+export declare const useRemainingTime: (deadline: Date | number) => number;
+/** "8h 42m"; never negative. */
+export declare const formatRemaining: (ms: number) => string;

package/dist/compositions/delivery-banner/use-remaining-time.js

@@ -0,0 +1,22 @@
+"use client";
+import { useEffect, useState } from "react";
+const TICK_MS = 15_000;
+/** Milliseconds left until `deadline`, refreshed every 15 seconds. */
+export const useRemainingTime = (deadline) => {
+    const target = new Date(deadline).getTime();
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        const id = window.setInterval(() => {
+            setNow(Date.now());
+        }, TICK_MS);
+        return () => {
+            window.clearInterval(id);
+        };
+    }, []);
+    return target - now;
+};
+/** "8h 42m"; never negative. */
+export const formatRemaining = (ms) => {
+    const totalMinutes = Math.max(0, Math.floor(ms / 60_000));
+    return `${Math.floor(totalMinutes / 60)}h ${totalMinutes % 60}m`;
+};

package/dist/compositions/delivery-banner.d.ts

@@ -0,0 +1 @@
+export { DeliveryBanner, type DeliveryBannerProps, } from "./delivery-banner/delivery-banner-root.js";

package/dist/compositions/delivery-banner.js

@@ -0,0 +1 @@
+export { DeliveryBanner, } from "./delivery-banner/delivery-banner-root.js";

package/dist/compositions/document-list/document-list-action.d.ts

@@ -0,0 +1,6 @@
+import type React from "react";
+/**
+ * Trailing action slot for a document row (buttons, menus).
+ * Import from "@instruments/materia-ui/compositions/document-list".
+ */
+export declare const DocumentListAction: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;

package/dist/compositions/document-list/document-list-action.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Flex } from "../../components/flex.js";
+/**
+ * Trailing action slot for a document row (buttons, menus).
+ * Import from "@instruments/materia-ui/compositions/document-list".
+ */
+export const DocumentListAction = ({ className, ...props }) => (_jsx(Flex, { align: "center", className: cn("shrink-0", className), gap: "xs", "data-component": "document-list-action", "data-slot": "document-list-action", ...props }));

package/dist/compositions/document-list/document-list-checkbox.d.ts

@@ -0,0 +1,12 @@
+import type { CheckboxProps } from "@instruments/materia-ui/components/checkbox";
+export interface DocumentListCheckboxProps extends Omit<CheckboxProps, "checked" | "onCheckedChange"> {
+    /** Override the value from item context */
+    value?: string;
+}
+/**
+ * Checkbox that automatically connects to DocumentList selection.
+ * Must be placed inside a DocumentListItem with a value prop,
+ * or provide a value prop directly.
+ * @bestPractice Give each checkbox an `aria-label` naming its document, or use `aria-labelledby` to reference the visible DocumentListTitle.
+ */
+export declare const DocumentListCheckbox: ({ value: valueProp, ...props }: DocumentListCheckboxProps) => import("react").JSX.Element | null;

package/dist/compositions/document-list/document-list-checkbox.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox } from "@instruments/materia-ui/components/checkbox";
+import { useDocumentListContext } from "../document-list/document-list-context.js";
+import { useDocumentListItemContext } from "../document-list/document-list-item.js";
+/**
+ * Checkbox that automatically connects to DocumentList selection.
+ * Must be placed inside a DocumentListItem with a value prop,
+ * or provide a value prop directly.
+ * @bestPractice Give each checkbox an `aria-label` naming its document, or use `aria-labelledby` to reference the visible DocumentListTitle.
+ */
+export const DocumentListCheckbox = ({ value: valueProp, ...props }) => {
+    const { selectable, isSelected, toggleItem } = useDocumentListContext();
+    const itemContext = useDocumentListItemContext();
+    const value = valueProp ?? itemContext?.value;
+    if (!selectable || value === undefined || value === "") {
+        return null;
+    }
+    return (_jsx(Checkbox, { checked: isSelected(value), "data-component": "document-list-checkbox", "data-slot": "document-list-checkbox", onCheckedChange: () => {
+            toggleItem(value);
+        }, size: "sm", ...props }));
+};

package/dist/compositions/document-list/document-list-content.d.ts

@@ -0,0 +1,7 @@
+import type React from "react";
+/**
+ * Main content column of a document row (title, description); grows to fill
+ * available width.
+ * Import from "@instruments/materia-ui/compositions/document-list".
+ */
+export declare const DocumentListContent: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;

package/dist/compositions/document-list/document-list-content.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Flex } from "../../components/flex.js";
+/**
+ * Main content column of a document row (title, description); grows to fill
+ * available width.
+ * Import from "@instruments/materia-ui/compositions/document-list".
+ */
+export const DocumentListContent = ({ className, ...props }) => (_jsx(Flex, { className: cn("min-w-0 flex-1", className), direction: "column", gap: "3xs", "data-component": "document-list-content", "data-slot": "document-list-content", ...props }));

package/dist/compositions/document-list/document-list-context.d.ts

@@ -0,0 +1,46 @@
+import type { ComponentSize } from "../../tokens/size.js";
+export interface DocumentListContextValue {
+    /** All items are selected */
+    allSelected: boolean;
+    /** Clear all selections */
+    clearSelection: () => void;
+    /** Check if a value is selected */
+    isSelected: (itemValue: string) => boolean;
+    /** Callback when selection changes */
+    onValueChange?: ((value: string[]) => void) | undefined;
+    /** Register an item value (for toggleAll support) */
+    registerItem: (itemValue: string) => void;
+    /** Whether selection is enabled */
+    selectable: boolean;
+    /** Size scale for items */
+    size: ComponentSize;
+    /** Some (but not all) items are selected */
+    someSelected: boolean;
+    /** Toggle all items (requires items to be registered) */
+    toggleAll: () => void;
+    /** Toggle selection for a value */
+    toggleItem: (itemValue: string) => void;
+    /** Unregister an item value */
+    unregisterItem: (itemValue: string) => void;
+    /** Currently selected values (controlled) */
+    value: string[];
+}
+export interface DocumentListProviderProps {
+    children: React.ReactNode;
+    /** Default selection value (uncontrolled) */
+    defaultValue?: string[] | undefined;
+    /** Callback when selection changes */
+    onValueChange?: ((value: string[]) => void) | undefined;
+    selectable?: boolean | undefined;
+    size?: ComponentSize | undefined;
+    /** Controlled selection value */
+    value?: string[] | undefined;
+}
+export declare const DocumentListProvider: ({ children, size, selectable, value: controlledValue, defaultValue, onValueChange, }: DocumentListProviderProps) => import("react").JSX.Element;
+/**
+ * useDocumentListContext React hook.
+ * Import from "@instruments/materia-ui/compositions/document-list".
+ */
+export declare const useDocumentListContext: () => DocumentListContextValue;
+/** Optional hook that returns null if outside provider (for optional checkbox support) */
+export declare const useDocumentListContextOptional: () => DocumentListContextValue | null;

package/dist/compositions/document-list/document-list-context.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, use, useCallback, useMemo, useState } from "react";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+const DocumentListContext = createContext(null);
+/**
+ * DocumentListProvider UI component.
+ * Import from "@instruments/materia-ui/compositions/document-list".
+ */
+const EMPTY_DEFAULT_VALUE = [];
+export const DocumentListProvider = ({ children, size = "base", selectable = false, value: controlledValue, defaultValue = EMPTY_DEFAULT_VALUE, onValueChange, }) => {
+    // Track registered item values for toggleAll
+    const [registeredItems, setRegisteredItems] = useState(new Set());
+    const [value, updateValue] = useControllableState({
+        defaultValue,
+        onChange: onValueChange,
+        value: controlledValue,
+    });
+    const isSelected = useCallback((itemValue) => value.includes(itemValue), [value]);
+    const toggleItem = useCallback((itemValue) => {
+        if (!selectable) {
+            return;
+        }
+        const newValue = value.includes(itemValue)
+            ? value.filter((v) => v !== itemValue)
+            : [...value, itemValue];
+        updateValue(newValue);
+    }, [selectable, value, updateValue]);
+    const clearSelection = useCallback(() => {
+        updateValue([]);
+    }, [updateValue]);
+    const toggleAll = useCallback(() => {
+        if (!selectable) {
+            return;
+        }
+        const allItems = [...registeredItems];
+        if (value.length === allItems.length) {
+            updateValue([]);
+        }
+        else {
+            updateValue(allItems);
+        }
+    }, [selectable, registeredItems, value.length, updateValue]);
+    const registerItem = useCallback((itemValue) => {
+        setRegisteredItems((prev) => {
+            const next = new Set([...prev, itemValue]);
+            return next;
+        });
+    }, []);
+    const unregisterItem = useCallback((itemValue) => {
+        setRegisteredItems((prev) => {
+            const next = new Set(prev);
+            next.delete(itemValue);
+            return next;
+        });
+    }, []);
+    const allSelected = selectable &&
+        registeredItems.size > 0 &&
+        value.length === registeredItems.size;
+    const someSelected = selectable && value.length > 0 && value.length < registeredItems.size;
+    const contextValue = useMemo(() => ({
+        allSelected,
+        clearSelection,
+        isSelected,
+        onValueChange,
+        registerItem,
+        selectable,
+        size,
+        someSelected,
+        toggleAll,
+        toggleItem,
+        unregisterItem,
+        value,
+    }), [
+        size,
+        selectable,
+        value,
+        onValueChange,
+        isSelected,
+        toggleItem,
+        toggleAll,
+        clearSelection,
+        allSelected,
+        someSelected,
+        registerItem,
+        unregisterItem,
+    ]);
+    return (_jsx(DocumentListContext.Provider, { value: contextValue, children: children }));
+};
+/**
+ * useDocumentListContext React hook.
+ * Import from "@instruments/materia-ui/compositions/document-list".
+ */
+export const useDocumentListContext = () => {
+    const ctx = use(DocumentListContext);
+    if (!ctx) {
+        throw new Error("useDocumentListContext must be used within DocumentListProvider");
+    }
+    return ctx;
+};
+/** Optional hook that returns null if outside provider (for optional checkbox support) */
+export const useDocumentListContextOptional = () => use(DocumentListContext);

package/dist/compositions/document-list/document-list-description.d.ts

@@ -0,0 +1,6 @@
+import type React from "react";
+/**
+ * Secondary description text for a document row.
+ * Import from "@instruments/materia-ui/compositions/document-list".
+ */
+export declare const DocumentListDescription: ({ className, ...props }: React.ComponentProps<"p">) => React.JSX.Element;

package/dist/compositions/document-list/document-list-description.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * Secondary description text for a document row.
+ * Import from "@instruments/materia-ui/compositions/document-list".
+ */
+export const DocumentListDescription = ({ className, ...props }) => (_jsx("p", { className: cn("text-muted-foreground text-paragraph-sm", className), "data-component": "document-list-description", "data-slot": "document-list-description", ...props }));

package/dist/compositions/document-list/document-list-icon.d.ts

@@ -0,0 +1,10 @@
+import type { LucideIcon } from "lucide-react";
+import type React from "react";
+export interface DocumentListIconProps extends Omit<React.ComponentProps<"div">, "children"> {
+    icon: LucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>>;
+}
+/**
+ * Leading file-type icon for a document row; scales to the list's size.
+ * Import from "@instruments/materia-ui/compositions/document-list".
+ */
+export declare const DocumentListIcon: ({ className, icon, ...props }: DocumentListIconProps) => React.JSX.Element;

package/dist/compositions/document-list/document-list-icon.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Center } from "../../components/center.js";
+import { Icon } from "../../components/icon.js";
+import { useDocumentListContext } from "../document-list/document-list-context.js";
+const ICON_SIZE_MAP = {
+    "2xl": "xl",
+    "2xs": "2xs",
+    "3xl": "2xl",
+    base: "sm",
+    lg: "base",
+    sm: "xs",
+    xl: "lg",
+    xs: "xs",
+};
+/**
+ * Leading file-type icon for a document row; scales to the list's size.
+ * Import from "@instruments/materia-ui/compositions/document-list".
+ */
+export const DocumentListIcon = ({ className, icon, ...props }) => {
+    const { size } = useDocumentListContext();
+    return (_jsx(Center, { className: cn("text-muted-foreground shrink-0", className), "data-component": "document-list-icon", "data-slot": "document-list-icon", ...props, children: _jsx(Icon, { icon: icon, size: ICON_SIZE_MAP[size] }) }));
+};

package/dist/compositions/document-list/document-list-item.d.ts

@@ -0,0 +1,21 @@
+import { useRender } from "@base-ui/react/use-render";
+/** Item-level context to pass value down to checkbox */
+interface DocumentListItemContextValue {
+    value: string | undefined;
+}
+/**
+ * useDocumentListItemContext React hook.
+ * Import from "@instruments/materia-ui/compositions/document-list".
+ */
+export declare const useDocumentListItemContext: () => DocumentListItemContextValue | null;
+export interface DocumentListItemProps extends useRender.ComponentProps<"li"> {
+    /** Value for selection tracking (required when selectable is enabled on parent) */
+    value?: string;
+}
+/**
+ * A single row within a DocumentList; registers its `value` so the parent's
+ * select-all and selection state can track it.
+ * Import from "@instruments/materia-ui/compositions/document-list".
+ */
+export declare const DocumentListItem: ({ className, render, value, ...props }: DocumentListItemProps) => import("react").JSX.Element;
+export {};

package/dist/compositions/document-list/document-list-item.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { createContext, use, useEffect, useMemo } from "react";
+import { useDocumentListContext } from "../document-list/document-list-context.js";
+const ITEM_SIZE_STYLES = {
+    "2xl": "gap-7 p-7",
+    "2xs": "gap-1.5 px-2 py-1.5",
+    "3xl": "gap-8 p-8",
+    base: "gap-4 p-4",
+    lg: "gap-5 p-5",
+    sm: "gap-2.5 px-4 py-3",
+    xl: "gap-6 p-6",
+    xs: "gap-2 px-3 py-2",
+};
+const DocumentListItemContext = createContext(null);
+/**
+ * useDocumentListItemContext React hook.
+ * Import from "@instruments/materia-ui/compositions/document-list".
+ */
+export const useDocumentListItemContext = () => use(DocumentListItemContext);
+/**
+ * A single row within a DocumentList; registers its `value` so the parent's
+ * select-all and selection state can track it.
+ * Import from "@instruments/materia-ui/compositions/document-list".
+ */
+export const DocumentListItem = ({ className, render, value, ...props }) => {
+    const { size, registerItem, unregisterItem } = useDocumentListContext();
+    const itemContextValue = useMemo(() => ({ value }), [value]);
+    // Register/unregister item for toggleAll support
+    useEffect(() => {
+        if (value !== undefined && value !== null && value !== "") {
+            registerItem(value);
+            return () => {
+                unregisterItem(value);
+            };
+        }
+        return () => {
+            // nothing registered, nothing to clean up
+        };
+    }, [value, registerItem, unregisterItem]);
+    const baseProps = {
+        className: cn("group/item border-border duration-quick text-paragraph-sm flex items-center border-0 border-b transition-colors last:border-b-0", "group-data-[variant=divided]/document-list:rounded-none group-data-[variant=divided]/document-list:border-0 group-data-[variant=divided]/document-list:bg-transparent", "group-data-[variant=separated]/document-list:border-border group-data-[variant=separated]/document-list:bg-card group-data-[variant=separated]/document-list:rounded-xl group-data-[variant=separated]/document-list:border", ITEM_SIZE_STYLES[size], className),
+        "data-component": "document-list-item",
+        "data-slot": "document-list-item",
+        "data-value": value,
+    };
+    const element = useRender({
+        defaultTagName: "li",
+        props: mergeProps(baseProps, props),
+        render,
+    });
+    return (_jsx(DocumentListItemContext.Provider, { value: itemContextValue, children: element }));
+};

package/dist/compositions/document-list/document-list-meta.d.ts

@@ -0,0 +1,6 @@
+import type React from "react";
+/**
+ * Trailing metadata slot for a document row (file size, date, etc.).
+ * Import from "@instruments/materia-ui/compositions/document-list".
+ */
+export declare const DocumentListMeta: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;

package/dist/compositions/document-list/document-list-meta.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Flex } from "../../components/flex.js";
+/**
+ * Trailing metadata slot for a document row (file size, date, etc.).
+ * Import from "@instruments/materia-ui/compositions/document-list".
+ */
+export const DocumentListMeta = ({ className, ...props }) => (_jsx(Flex, { align: "center", className: cn("text-muted-foreground text-caption shrink-0", className), gap: "xs", "data-component": "document-list-meta", "data-slot": "document-list-meta", ...props }));

package/dist/compositions/document-list/document-list-root.d.ts

@@ -0,0 +1,31 @@
+import type { VariantProps } from "class-variance-authority";
+import type React from "react";
+import type { ComponentSize } from "../../tokens/size.js";
+declare const documentListVariants: (props?: ({
+    variant?: "divided" | "grouped" | "separated" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface DocumentListProps extends Omit<React.ComponentProps<"ul">, "ref" | "defaultValue">, VariantProps<typeof documentListVariants> {
+    /** Default selection value (uncontrolled) */
+    defaultValue?: string[] | undefined;
+    /** Callback when selection changes */
+    onValueChange?: ((value: string[]) => void) | undefined;
+    ref?: React.Ref<HTMLUListElement>;
+    /** Enable selection mode; checkboxes appear automatically. @default false */
+    selectable?: boolean | undefined;
+    /** Size scale for items */
+    size?: ComponentSize | undefined;
+    /** Controlled selection value */
+    value?: string[] | undefined;
+}
+/**
+ * Composable list for displaying files and documents with icons, titles,
+ * metadata, and actions; supports optional multi-select via `selectable`.
+ * Import from "@instruments/materia-ui/compositions/document-list".
+ *
+ * @bestPractice Fill it with `DocumentListItem` children - the root is a `<ul>` provider; each item's `value` is what `value`/`defaultValue` selection matches against.
+ * @bestPractice Set `selectable` to reveal per-item checkboxes and drive selection via `value`/`onValueChange` (a `string[]`) - don't add your own checkboxes.
+ * @bestPractice Use this for files/documents with icon + metadata + actions; for a generic single-line row reach for `Item`/`ItemGroup`, and for tabular columns use `Table`.
+ * @category data
+ */
+export declare const DocumentList: ({ className, variant, size, selectable, value, defaultValue, onValueChange, ref, ...props }: DocumentListProps) => React.JSX.Element;
+export {};

package/dist/compositions/document-list/document-list-root.js

@@ -0,0 +1,28 @@
+"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 { DocumentListProvider } from "../document-list/document-list-context.js";
+const documentListVariants = cva("group/document-list flex flex-col", {
+    defaultVariants: {
+        variant: "grouped",
+    },
+    variants: {
+        variant: {
+            divided: "divide-border divide-y",
+            separated: "gap-3",
+            grouped: "border-border bg-card overflow-hidden rounded-3xl border",
+        },
+    },
+});
+/**
+ * Composable list for displaying files and documents with icons, titles,
+ * metadata, and actions; supports optional multi-select via `selectable`.
+ * Import from "@instruments/materia-ui/compositions/document-list".
+ *
+ * @bestPractice Fill it with `DocumentListItem` children - the root is a `<ul>` provider; each item's `value` is what `value`/`defaultValue` selection matches against.
+ * @bestPractice Set `selectable` to reveal per-item checkboxes and drive selection via `value`/`onValueChange` (a `string[]`) - don't add your own checkboxes.
+ * @bestPractice Use this for files/documents with icon + metadata + actions; for a generic single-line row reach for `Item`/`ItemGroup`, and for tabular columns use `Table`.
+ * @category data
+ */
+export const DocumentList = ({ className, variant = "grouped", size = "base", selectable = false, value, defaultValue, onValueChange, ref, ...props }) => (_jsx(DocumentListProvider, { defaultValue: defaultValue, onValueChange: onValueChange, selectable: selectable, size: size, value: value, children: _jsx("ul", { className: cn(documentListVariants({ className, variant })), "data-component": "document-list", "data-selectable": selectable || undefined, "data-variant": variant, ref: ref, ...props }) }));

package/dist/compositions/document-list/document-list-select-all.d.ts

@@ -0,0 +1,10 @@
+import type { CheckboxProps } from "@instruments/materia-ui/components/checkbox";
+export interface DocumentListSelectAllProps extends Omit<CheckboxProps, "checked" | "onCheckedChange" | "indeterminate"> {
+    /** Label to show, defaults to "Select all" */
+    label?: string;
+}
+/**
+ * Select-all checkbox that toggles all items in the list.
+ * Shows indeterminate state when some (but not all) items are selected.
+ */
+export declare const DocumentListSelectAll: ({ label, ...props }: DocumentListSelectAllProps) => import("react").JSX.Element | null;

package/dist/compositions/document-list/document-list-select-all.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from "@instruments/materia-ui/components/checkbox";
+import { Flex } from "../../components/flex.js";
+import { useDocumentListContext } from "../document-list/document-list-context.js";
+/**
+ * Select-all checkbox that toggles all items in the list.
+ * Shows indeterminate state when some (but not all) items are selected.
+ */
+export const DocumentListSelectAll = ({ label = "Select all", ...props }) => {
+    const { selectable, allSelected, someSelected, toggleAll, value } = useDocumentListContext();
+    if (!selectable) {
+        return null;
+    }
+    return (_jsxs(Flex, { as: "li", align: "center", className: "text-paragraph-sm", gap: "xs", children: [_jsx(Checkbox, { "aria-label": label, checked: allSelected, "data-component": "document-list-select-all", "data-slot": "document-list-select-all", indeterminate: someSelected, onCheckedChange: toggleAll, size: "sm", ...props }), _jsx("button", { className: "text-muted-foreground", onClick: toggleAll, type: "button", children: value.length > 0 ? `${value.length} selected` : label })] }));
+};

package/dist/compositions/document-list/document-list-title.d.ts

@@ -0,0 +1,6 @@
+import type React from "react";
+/**
+ * Primary title text for a document row.
+ * Import from "@instruments/materia-ui/compositions/document-list".
+ */
+export declare const DocumentListTitle: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;

package/dist/compositions/document-list/document-list-title.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * Primary title text for a document row.
+ * Import from "@instruments/materia-ui/compositions/document-list".
+ */
+export const DocumentListTitle = ({ className, ...props }) => (_jsx("div", { className: cn("text-paragraph-sm font-medium", className), "data-component": "document-list-title", "data-slot": "document-list-title", ...props }));

package/dist/compositions/document-list.d.ts

@@ -0,0 +1,11 @@
+export { DocumentListAction } from "./document-list/document-list-action.js";
+export { DocumentListCheckbox } from "./document-list/document-list-checkbox.js";
+export { DocumentListContent } from "./document-list/document-list-content.js";
+export { type DocumentListContextValue, useDocumentListContext, } from "./document-list/document-list-context.js";
+export { DocumentListDescription } from "./document-list/document-list-description.js";
+export { DocumentListIcon } from "./document-list/document-list-icon.js";
+export { DocumentListItem, type DocumentListItemProps, } from "./document-list/document-list-item.js";
+export { DocumentListMeta } from "./document-list/document-list-meta.js";
+export { DocumentList, type DocumentListProps, } from "./document-list/document-list-root.js";
+export { DocumentListSelectAll } from "./document-list/document-list-select-all.js";
+export { DocumentListTitle } from "./document-list/document-list-title.js";

package/dist/compositions/document-list.js

@@ -0,0 +1,11 @@
+export { DocumentListAction } from "./document-list/document-list-action.js";
+export { DocumentListCheckbox } from "./document-list/document-list-checkbox.js";
+export { DocumentListContent } from "./document-list/document-list-content.js";
+export { useDocumentListContext, } from "./document-list/document-list-context.js";
+export { DocumentListDescription } from "./document-list/document-list-description.js";
+export { DocumentListIcon } from "./document-list/document-list-icon.js";
+export { DocumentListItem, } from "./document-list/document-list-item.js";
+export { DocumentListMeta } from "./document-list/document-list-meta.js";
+export { DocumentList, } from "./document-list/document-list-root.js";
+export { DocumentListSelectAll } from "./document-list/document-list-select-all.js";
+export { DocumentListTitle } from "./document-list/document-list-title.js";

package/dist/compositions/editorial-card/editorial-card-content.d.ts

@@ -0,0 +1,10 @@
+export interface EditorialCardContentProps {
+    className?: string;
+    subtitle?: string;
+    title: string;
+}
+/**
+ * Content section for EditorialCard displaying title and optional subtitle.
+ * Used internally by EditorialCard variants.
+ */
+export declare const EditorialCardContent: ({ title, subtitle, className, }: EditorialCardContentProps) => import("react").JSX.Element;

package/dist/compositions/editorial-card/editorial-card-content.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex } from "@instruments/materia-ui/components/flex";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * Content section for EditorialCard displaying title and optional subtitle.
+ * Used internally by EditorialCard variants.
+ */
+export const EditorialCardContent = ({ title, subtitle, className, }) => (_jsxs(Flex, { align: "center", className: cn("flex-1 overflow-hidden p-6 text-center", className), "data-slot": "editorial-card-content", direction: "column", gap: "xs", justify: "center", children: [subtitle !== undefined && subtitle !== null && subtitle !== "" && (_jsx("p", { className: "text-muted-foreground text-caption", children: subtitle })), _jsx("p", { className: "text-foreground text-paragraph-lg font-medium", children: title })] }));