@instruments/materia-ui 0.1.0

package/dist/components/input.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Simple standalone input field.
+ * For inputs with icons, addons, or buttons, use InputGroup.
+ */
+export type { InputProps } from "./input/input-root.js";
+export { Input } from "./input/input-root.js";
+export type { InputSize } from "./input/input-types.js";
+export { standaloneInputVariants } from "./input/input-variants.js";

package/dist/components/input.js

@@ -0,0 +1,6 @@
+/**
+ * Simple standalone input field.
+ * For inputs with icons, addons, or buttons, use InputGroup.
+ */
+export { Input } from "./input/input-root.js";
+export { standaloneInputVariants } from "./input/input-variants.js";

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

@@ -0,0 +1,6 @@
+import type * as React from "react";
+/**
+ * Trailing slot for an item's action buttons or controls.
+ * Import from "@instruments/materia-ui/components/item".
+ */
+export declare const ItemActions: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from "../flex.js";
+/**
+ * Trailing slot for an item's action buttons or controls.
+ * Import from "@instruments/materia-ui/components/item".
+ */
+export const ItemActions = ({ className, ...props }) => (_jsx(Flex, { align: "center", className: className, "data-component": "item-actions", "data-slot": "item-actions", gap: "xs", ...props }));

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

@@ -0,0 +1,10 @@
+/**
+ * itemAnatomy documents the structure of the Item component.
+ * Import from "@instruments/materia-ui/components/item".
+ */
+export declare const itemAnatomy: import("../../tokens/anatomy.js").ComponentAnatomy;
+/**
+ * itemGroupAnatomy documents the structure of the ItemGroup component.
+ * Import from "@instruments/materia-ui/components/item".
+ */
+export declare const itemGroupAnatomy: import("../../tokens/anatomy.js").ComponentAnatomy;

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

@@ -0,0 +1,70 @@
+import { defineAnatomy } from "../../tokens/anatomy.js";
+/**
+ * itemAnatomy documents the structure of the Item component.
+ * Import from "@instruments/materia-ui/components/item".
+ */
+export const itemAnatomy = defineAnatomy({
+    children: [
+        {
+            description: "Icon, image, or avatar display area",
+            label: "ItemMedia",
+            slot: "item-media",
+        },
+        {
+            description: "Header row spanning full width",
+            label: "ItemHeader",
+            slot: "item-header",
+        },
+        {
+            children: [
+                {
+                    description: "Primary heading",
+                    label: "ItemTitle",
+                    slot: "item-title",
+                },
+                {
+                    description: "Secondary text",
+                    label: "ItemDescription",
+                    slot: "item-description",
+                },
+            ],
+            description: "Main content area with title and description",
+            label: "ItemContent",
+            slot: "item-content",
+        },
+        {
+            description: "Action buttons or controls",
+            label: "ItemActions",
+            slot: "item-actions",
+        },
+        {
+            description: "Footer row spanning full width",
+            label: "ItemFooter",
+            slot: "item-footer",
+        },
+    ],
+    description: "A flexible content container for displaying structured information",
+    label: "Item",
+    slot: "item",
+});
+/**
+ * itemGroupAnatomy documents the structure of the ItemGroup component.
+ * Import from "@instruments/materia-ui/components/item".
+ */
+export const itemGroupAnatomy = defineAnatomy({
+    children: [
+        {
+            description: "Individual item in the group",
+            label: "Item",
+            slot: "item",
+        },
+        {
+            description: "Divider between items",
+            label: "ItemSeparator",
+            slot: "item-separator",
+        },
+    ],
+    description: "Semantic container for grouping related items",
+    label: "ItemGroup",
+    slot: "item-group",
+});

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

@@ -0,0 +1,7 @@
+import type * as React from "react";
+/**
+ * Main content column of an item (title, description); grows to fill available
+ * width between the media and actions.
+ * Import from "@instruments/materia-ui/components/item".
+ */
+export declare const ItemContent: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Stack } from "../stack.js";
+/**
+ * Main content column of an item (title, description); grows to fill available
+ * width between the media and actions.
+ * Import from "@instruments/materia-ui/components/item".
+ */
+export const ItemContent = ({ className, ...props }) => (_jsx(Stack, { className: cn("flex-1 [&+[data-slot=item-content]]:flex-none", className), "data-component": "item-content", "data-slot": "item-content", gap: "2xs", ...props }));

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

@@ -0,0 +1,6 @@
+import type * as React from "react";
+/**
+ * Secondary supporting text for an item; clamps to two lines.
+ * Import from "@instruments/materia-ui/components/item".
+ */
+export declare const ItemDescription: ({ className, ...props }: React.ComponentProps<"p">) => React.JSX.Element;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * Secondary supporting text for an item; clamps to two lines.
+ * Import from "@instruments/materia-ui/components/item".
+ */
+export const ItemDescription = ({ className, ...props }) => (_jsx("p", { className: cn("text-muted-foreground text-paragraph-sm line-clamp-2 font-normal text-balance", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className), "data-component": "item-description", "data-slot": "item-description", ...props }));

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

@@ -0,0 +1,6 @@
+import type * as React from "react";
+/**
+ * Full-width footer row for an item, below the media/content row.
+ * Import from "@instruments/materia-ui/components/item".
+ */
+export declare const ItemFooter: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Flex } from "../flex.js";
+/**
+ * Full-width footer row for an item, below the media/content row.
+ * Import from "@instruments/materia-ui/components/item".
+ */
+export const ItemFooter = ({ className, ...props }) => (_jsx(Flex, { align: "center", className: cn("basis-full", className), "data-component": "item-footer", "data-slot": "item-footer", gap: "xs", justify: "space-between", ...props }));

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

@@ -0,0 +1,43 @@
+import type { VariantProps } from "class-variance-authority";
+import type * as React from "react";
+/**
+ * ItemGroup variants control the overall group style:
+ * - divided: Minimal list with dividers, no card backgrounds
+ * - separated: Individual elevated items with gaps between them (card-like)
+ * - grouped: Items connected together in one card (no gaps, rounded corners on first/last only)
+ */
+declare const itemGroupVariants: (props?: ({
+    variant?: "divided" | "grouped" | "separated" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ItemGroupVariantProps = VariantProps<typeof itemGroupVariants>;
+interface UnorderedItemGroupProps extends React.ComponentProps<"ul">, ItemGroupVariantProps {
+    /** Render as an ordered `<ol>` instead of a `<ul>`. @default false */
+    ordered?: false;
+}
+interface OrderedItemGroupProps extends React.ComponentProps<"ol">, ItemGroupVariantProps {
+    /** Render as an ordered `<ol>` instead of a `<ul>`. @default false */
+    ordered: true;
+}
+export type ItemGroupProps = UnorderedItemGroupProps | OrderedItemGroupProps;
+/**
+ * ItemGroup is a semantic container for grouping related Item components.
+ * Use it to display lists of items with consistent styling and spacing.
+ *
+ * @example
+ * ```tsx
+ * <ItemGroup variant="grouped">
+ *   <Item>
+ *     <ItemContent>
+ *       <ItemTitle>First Item</ItemTitle>
+ *     </ItemContent>
+ *   </Item>
+ *   <Item>
+ *     <ItemContent>
+ *       <ItemTitle>Second Item</ItemTitle>
+ *     </ItemContent>
+ *   </Item>
+ * </ItemGroup>
+ * ```
+ */
+export declare const ItemGroup: (props: ItemGroupProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { cva } from "class-variance-authority";
+/**
+ * ItemGroup variants control the overall group style:
+ * - divided: Minimal list with dividers, no card backgrounds
+ * - separated: Individual elevated items with gaps between them (card-like)
+ * - grouped: Items connected together in one card (no gaps, rounded corners on first/last only)
+ */
+const itemGroupVariants = cva("group/item-group flex flex-col", {
+    defaultVariants: {
+        variant: "divided",
+    },
+    variants: {
+        variant: {
+            divided: "divide-border divide-y",
+            separated: "gap-3",
+            grouped: "border-border bg-card overflow-hidden rounded-3xl border",
+        },
+    },
+});
+/**
+ * ItemGroup is a semantic container for grouping related Item components.
+ * Use it to display lists of items with consistent styling and spacing.
+ *
+ * @example
+ * ```tsx
+ * <ItemGroup variant="grouped">
+ *   <Item>
+ *     <ItemContent>
+ *       <ItemTitle>First Item</ItemTitle>
+ *     </ItemContent>
+ *   </Item>
+ *   <Item>
+ *     <ItemContent>
+ *       <ItemTitle>Second Item</ItemTitle>
+ *     </ItemContent>
+ *   </Item>
+ * </ItemGroup>
+ * ```
+ */
+export const ItemGroup = (props) => {
+    if (props.ordered === true) {
+        const { className, ordered: _ordered, variant = "divided", ...rest } = props;
+        return (_jsx("ol", { className: cn(itemGroupVariants({ className, variant })), "data-component": "item-group", "data-slot": "item-group", "data-variant": variant, ...rest }));
+    }
+    const { className, ordered: _ordered, variant = "divided", ...rest } = props;
+    return (_jsx("ul", { className: cn(itemGroupVariants({ className, variant })), "data-component": "item-group", "data-slot": "item-group", "data-variant": variant, ...rest }));
+};

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

@@ -0,0 +1,6 @@
+import type * as React from "react";
+/**
+ * Full-width header row for an item, above the media/content row.
+ * Import from "@instruments/materia-ui/components/item".
+ */
+export declare const ItemHeader: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Flex } from "../flex.js";
+/**
+ * Full-width header row for an item, above the media/content row.
+ * Import from "@instruments/materia-ui/components/item".
+ */
+export const ItemHeader = ({ className, ...props }) => (_jsx(Flex, { align: "center", className: cn("basis-full", className), "data-component": "item-header", "data-slot": "item-header", gap: "xs", justify: "space-between", ...props }));

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

@@ -0,0 +1,15 @@
+import type { IconBoxProps } from "@instruments/materia-ui/components/icon-box";
+import type { VariantProps } from "class-variance-authority";
+import type * as React from "react";
+declare const itemMediaVariants: (props?: ({
+    variant?: "default" | "icon" | "image" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ItemMediaProps extends Omit<React.ComponentProps<"div">, keyof IconBoxProps>, Omit<Partial<IconBoxProps>, "variant">, VariantProps<typeof itemMediaVariants> {
+}
+/**
+ * Leading media slot for an item - renders an IconBox when `variant="icon"`,
+ * otherwise wraps an image (`variant="image"`) or any custom children.
+ * Import from "@instruments/materia-ui/components/item".
+ */
+export declare const ItemMedia: ({ className, variant, icon, iconSize, iconClassName, ...props }: ItemMediaProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconBox } from "@instruments/materia-ui/components/icon-box";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { cva } from "class-variance-authority";
+const itemMediaVariants = cva("flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start", {
+    defaultVariants: {
+        variant: "default",
+    },
+    variants: {
+        variant: {
+            default: "",
+            icon: "",
+            image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
+        },
+    },
+});
+/**
+ * Leading media slot for an item - renders an IconBox when `variant="icon"`,
+ * otherwise wraps an image (`variant="image"`) or any custom children.
+ * Import from "@instruments/materia-ui/components/item".
+ */
+export const ItemMedia = ({ className, variant = "default", icon, iconSize = "xs", iconClassName, ...props }) => {
+    // If variant is "icon" and an icon is provided, use IconBox
+    if (variant === "icon" && icon) {
+        return (_jsx(IconBox, { className: cn("group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start", className), "data-component": "item-media", "data-slot": "item-media", "data-variant": variant, icon: icon, ...(iconClassName === undefined ? {} : { iconClassName }), ...(iconSize === undefined ? {} : { iconSize }), size: "sm", tone: "neutral" }));
+    }
+    // Otherwise render as a regular div (for image variant or custom children)
+    return (_jsx("div", { className: cn(itemMediaVariants({ className, variant })), "data-component": "item-media", "data-slot": "item-media", "data-variant": variant, ...props }));
+};

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

@@ -0,0 +1,44 @@
+import { useRender } from "@base-ui/react/use-render";
+import type { ComponentSize } from "@instruments/materia-ui/tokens/size";
+import type { VariantProps } from "class-variance-authority";
+/**
+ * Item variants control the item styling:
+ * - default: Transparent background
+ * - outline: Border around the item
+ * - muted: Subtle muted background
+ * - card: Card-like appearance with border and background
+ *
+ * When inside an ItemGroup, Item automatically adapts its styling:
+ * - In "divided" groups: minimal styling, relies on dividers
+ * - In "separated" groups: full card styling with elevation
+ * - In "grouped" groups: borders between items, part of parent card frame
+ */
+declare const itemVariants: (props?: ({
+    variant?: "card" | "default" | "muted" | "outline" | null | undefined;
+    size?: "2xl" | "2xs" | "3xl" | "base" | "lg" | "sm" | "xl" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ItemProps extends useRender.ComponentProps<"div">, Omit<VariantProps<typeof itemVariants>, "size"> {
+    size?: ComponentSize;
+}
+/**
+ * Item is a standalone component for displaying a single piece of content.
+ * Use with ItemContent, ItemTitle, ItemDescription, etc. for structured content.
+ *
+ * @example
+ * ```tsx
+ * <Item variant="card" size="sm">
+ *   <ItemContent>
+ *     <ItemTitle>Title</ItemTitle>
+ *     <ItemDescription>Description</ItemDescription>
+ *   </ItemContent>
+ * </Item>
+ * ```
+ *
+ * @bestPractice Structure content with `ItemContent`/`ItemTitle`/`ItemDescription` (plus `ItemMedia`/`ItemActions`) rather than raw divs - the compound parts carry the gap and truncation rhythm.
+ * @bestPractice Wrap a set of items in `ItemGroup` and set the look via its `variant` (`divided`/`separated`/`grouped`) - `Item` adapts automatically, so avoid re-styling borders/backgrounds per item.
+ * @bestPractice Use `render` to make the whole item a link/button (e.g. `render={<Link href="…" />}`); the item's children become the link's content.
+ * @bestPractice Reach for `Item` for generic single rows; for files/documents use `DocumentList`, and for term/value metadata use `DescriptionList`.
+ * @category data
+ */
+export declare const Item: ({ className, variant, size, ref, render, ...props }: ItemProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export {};

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

@@ -0,0 +1,98 @@
+import { useRender } from "@base-ui/react/use-render";
+import { focusRing } from "@instruments/materia-ui/tokens/focus-ring";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { cva } from "class-variance-authority";
+/**
+ * Item variants control the item styling:
+ * - default: Transparent background
+ * - outline: Border around the item
+ * - muted: Subtle muted background
+ * - card: Card-like appearance with border and background
+ *
+ * When inside an ItemGroup, Item automatically adapts its styling:
+ * - In "divided" groups: minimal styling, relies on dividers
+ * - In "separated" groups: full card styling with elevation
+ * - In "grouped" groups: borders between items, part of parent card frame
+ */
+const itemVariants = cva(cn(focusRing(), "group/item duration-quick text-paragraph-sm flex flex-wrap items-center transition-colors"), {
+    compoundVariants: [
+        // Divided group: minimal styling, no borders/backgrounds
+        {
+            className: "group-data-[variant=divided]/item-group:rounded-none group-data-[variant=divided]/item-group:border-0 group-data-[variant=divided]/item-group:bg-transparent",
+        },
+        // Separated group with default variant: full card styling
+        {
+            className: "group-data-[variant=separated]/item-group:border-border group-data-[variant=separated]/item-group:bg-card group-data-[variant=separated]/item-group:rounded-3xl group-data-[variant=separated]/item-group:border",
+            variant: "default",
+        },
+        // Separated group with outline variant: card with rounded corners
+        {
+            className: "group-data-[variant=separated]/item-group:bg-card group-data-[variant=separated]/item-group:rounded-3xl",
+            variant: "outline",
+        },
+        // Separated group with muted variant: card styling
+        {
+            className: "group-data-[variant=separated]/item-group:border-border group-data-[variant=separated]/item-group:bg-card group-data-[variant=separated]/item-group:rounded-3xl group-data-[variant=separated]/item-group:border",
+            variant: "muted",
+        },
+        // Grouped: borders between items, parent provides card frame
+        {
+            className: "group-data-[variant=grouped]/item-group:border-border group-data-[variant=grouped]/item-group:rounded-none group-data-[variant=grouped]/item-group:border-0 group-data-[variant=grouped]/item-group:border-b group-data-[variant=grouped]/item-group:bg-transparent group-data-[variant=grouped]/item-group:last:border-b-0",
+        },
+    ],
+    defaultVariants: {
+        size: "base",
+        variant: "default",
+    },
+    variants: {
+        variant: {
+            default: "bg-transparent",
+            outline: "border-border border",
+            muted: "bg-muted/50",
+            card: "border-border bg-card rounded-3xl border",
+        },
+        size: {
+            "2xs": "gap-1.5 px-2 py-1.5",
+            xs: "gap-2 px-3 py-2",
+            sm: "gap-2.5 px-4 py-3",
+            base: "gap-4 p-4",
+            lg: "gap-5 p-5",
+            xl: "gap-6 p-6",
+            "2xl": "gap-7 p-7",
+            "3xl": "gap-8 p-8",
+        },
+    },
+});
+/**
+ * Item is a standalone component for displaying a single piece of content.
+ * Use with ItemContent, ItemTitle, ItemDescription, etc. for structured content.
+ *
+ * @example
+ * ```tsx
+ * <Item variant="card" size="sm">
+ *   <ItemContent>
+ *     <ItemTitle>Title</ItemTitle>
+ *     <ItemDescription>Description</ItemDescription>
+ *   </ItemContent>
+ * </Item>
+ * ```
+ *
+ * @bestPractice Structure content with `ItemContent`/`ItemTitle`/`ItemDescription` (plus `ItemMedia`/`ItemActions`) rather than raw divs - the compound parts carry the gap and truncation rhythm.
+ * @bestPractice Wrap a set of items in `ItemGroup` and set the look via its `variant` (`divided`/`separated`/`grouped`) - `Item` adapts automatically, so avoid re-styling borders/backgrounds per item.
+ * @bestPractice Use `render` to make the whole item a link/button (e.g. `render={<Link href="…" />}`); the item's children become the link's content.
+ * @bestPractice Reach for `Item` for generic single rows; for files/documents use `DocumentList`, and for term/value metadata use `DescriptionList`.
+ * @category data
+ */
+export const Item = ({ className, variant = "default", size = "base", ref, render, ...props }) => useRender({
+    defaultTagName: "div",
+    props: {
+        className: cn(itemVariants({ className, size, variant })),
+        "data-component": "item",
+        "data-size": size,
+        "data-slot": "item",
+        "data-variant": variant,
+        ...props,
+    },
+    ref,
+    render,
+});

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

@@ -0,0 +1,7 @@
+import { Separator } from "@instruments/materia-ui/components/separator";
+import type * as React from "react";
+/**
+ * Horizontal divider placed between items in an ItemGroup.
+ * Import from "@instruments/materia-ui/components/item".
+ */
+export declare const ItemSeparator: ({ className, ...props }: React.ComponentProps<typeof Separator>) => React.JSX.Element;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Separator } from "@instruments/materia-ui/components/separator";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * Horizontal divider placed between items in an ItemGroup.
+ * Import from "@instruments/materia-ui/components/item".
+ */
+export const ItemSeparator = ({ className, ...props }) => (_jsx(Separator, { className: cn("my-0", className), "data-component": "item-separator", "data-slot": "item-separator", orientation: "horizontal", ...props }));

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

@@ -0,0 +1,6 @@
+import type * as React from "react";
+/**
+ * Primary heading text for an item.
+ * Import from "@instruments/materia-ui/components/item".
+ */
+export declare const ItemTitle: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Flex } from "../flex.js";
+/**
+ * Primary heading text for an item.
+ * Import from "@instruments/materia-ui/components/item".
+ */
+export const ItemTitle = ({ className, ...props }) => (_jsx(Flex, { align: "center", className: cn("text-paragraph-sm w-fit font-medium", className), "data-component": "item-title", "data-slot": "item-title", gap: "xs", ...props }));

package/dist/components/item.d.ts

@@ -0,0 +1,11 @@
+export { ItemActions } from "./item/item-actions.js";
+export { itemAnatomy, itemGroupAnatomy } from "./item/item-anatomy.js";
+export { ItemContent } from "./item/item-content.js";
+export { ItemDescription } from "./item/item-description.js";
+export { ItemFooter } from "./item/item-footer.js";
+export { ItemGroup, type ItemGroupProps } from "./item/item-group.js";
+export { ItemHeader } from "./item/item-header.js";
+export { ItemMedia, type ItemMediaProps } from "./item/item-media.js";
+export { Item, type ItemProps } from "./item/item-root.js";
+export { ItemSeparator } from "./item/item-separator.js";
+export { ItemTitle } from "./item/item-title.js";

package/dist/components/item.js

@@ -0,0 +1,11 @@
+export { ItemActions } from "./item/item-actions.js";
+export { itemAnatomy, itemGroupAnatomy } from "./item/item-anatomy.js";
+export { ItemContent } from "./item/item-content.js";
+export { ItemDescription } from "./item/item-description.js";
+export { ItemFooter } from "./item/item-footer.js";
+export { ItemGroup } from "./item/item-group.js";
+export { ItemHeader } from "./item/item-header.js";
+export { ItemMedia } from "./item/item-media.js";
+export { Item } from "./item/item-root.js";
+export { ItemSeparator } from "./item/item-separator.js";
+export { ItemTitle } from "./item/item-title.js";

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

@@ -0,0 +1,97 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentSize, ResponsiveSize } from "../../tokens/size.js";
+/** Default Kbd size. */
+declare const DEFAULT_KBD_SIZE: ComponentSize;
+/**
+ * Size classes for kbd - maps component size to dimensions and text.
+ * Applied via `getResponsiveSizeClasses` in the component - NOT as a cva
+ * variant - so `size` can be a single token or a per-breakpoint object.
+ */
+declare const KBD_SIZE_CLASSES: Record<ComponentSize, string>;
+/**
+ * kbdVariants variant class helper for Kbd.
+ * Import from "@instruments/materia-ui/components/kbd".
+ * Uses variant-based styling via class-variance-authority.
+ */
+/**
+ * Kbd tone × emphasis grid. Decomposed from the former single `variant` axis:
+ *   - default     → neutral / solid   (bg-muted text-muted-foreground)
+ *   - secondary   → neutral / soft    (solid grey fill, dark text)
+ *   - outline     → neutral / outline
+ *   - ghost       → neutral / ghost
+ *   - brand       → brand   / solid   (solid brand-yellow chip, dark glyph -
+ *                   restyled from the illegible yellow-on-yellow tint the old
+ *                   `brand` variant carried, per the system-wide brand pairing)
+ *   - destructive → danger  / solid   (tinted danger chip)
+ *   - primary     → COLLAPSED onto neutral / soft (near-duplicate of the former
+ *                   `secondary`; both are dark-text neutral chips, and `primary`
+ *                   was unused outside the Kbd matrix story).
+ *
+ * The `tone`/`emphasis` base variants are empty; every rendered combination is
+ * pinned by an explicit compound so the class output moves verbatim. Undefined
+ * combos (e.g. brand/outline) intentionally fall through to the base string.
+ */
+declare const kbdVariants: (props?: ({
+    tone?: "brand" | "danger" | "neutral" | null | undefined;
+    emphasis?: "ghost" | "outline" | "soft" | "solid" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type KbdProps = Omit<React.ComponentProps<"kbd">, "size"> & VariantProps<typeof kbdVariants> & {
+    /**
+     * Kbd size - a single token or a per-breakpoint object like
+     * `{ base: "sm", md: "lg" }`. @default "sm"
+     */
+    size?: ResponsiveSize;
+};
+/**
+ * Keyboard key indicator for displaying keyboard shortcuts.
+ *
+ * @param props - The kbd props
+ * @param props.size - Kbd size. Options: "2xs", "xs", "sm" (default), "base", "lg", "xl", "2xl", "3xl".
+ * @param props.tone - Semantic colour. Options: "neutral" (default), "brand", "danger".
+ * @param props.emphasis - Fill treatment. Options: "solid" (default), "soft", "outline", "ghost".
+ * @param props.className - Additional CSS classes to apply.
+ * @param props.children - Key text or icon (e.g., "⌘", "K", "Enter").
+ * @param props... - All other standard HTML kbd element props.
+ *
+ * @example
+ * ```tsx
+ * <Kbd>⌘</Kbd>
+ * <Kbd size="xs" emphasis="soft">K</Kbd>
+ * <KbdGroup>
+ *   <Kbd>⌘</Kbd>
+ *   <Kbd>K</Kbd>
+ * </KbdGroup>
+ * ```
+ *
+ * @bestPractice Wrap multi-key chords in `KbdGroup` and set `size` on the group - children inherit it via context, so you size the combo once.
+ * @bestPractice It renders a semantic `<kbd>`; reserve it for keyboard keys/shortcuts, not as a generic small-label chip (that's `Badge`).
+ * @category typography
+ */
+declare const Kbd: ({ className, size, tone, emphasis, ...props }: KbdProps) => import("react").JSX.Element;
+type KbdGroupProps = React.ComponentProps<"div"> & {
+    /**
+     * Size to apply to all child Kbd components - a single token or a
+     * per-breakpoint object like `{ base: "sm", md: "lg" }`.
+     */
+    size?: ResponsiveSize;
+};
+/**
+ * Container for grouping multiple keyboard keys together (e.g., "⌘ + K").
+ *
+ * @param props - The kbd group props
+ * @param props.size - Size to apply to all child Kbd components. Options: "2xs", "xs", "sm", "base", "lg", "xl", "2xl", "3xl".
+ * @param props.className - Additional CSS classes to apply.
+ * @param props.children - Kbd components to group.
+ * @param props... - All other standard HTML div element props.
+ *
+ * @example
+ * ```tsx
+ * <KbdGroup size="xs">
+ *   <Kbd>⌘</Kbd>
+ *   <Kbd>K</Kbd>
+ * </KbdGroup>
+ * ```
+ */
+declare const KbdGroup: ({ className, size, children, ...props }: KbdGroupProps) => import("react").JSX.Element;
+export type { KbdGroupProps, KbdProps };
+export { DEFAULT_KBD_SIZE, KBD_SIZE_CLASSES, Kbd, KbdGroup, kbdVariants };