@instruments/materia-ui 0.1.0

package/dist/components/card/card-action.d.ts

@@ -0,0 +1,8 @@
+import type * as React from "react";
+/**
+ * Trailing control (button, menu, link) pinned to the top-right of a
+ * `CardHeader`. The header switches to a two-column grid when a `CardAction` is
+ * present, so the title and description keep their width.
+ */
+declare const CardAction: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
+export { CardAction };

package/dist/components/card/card-action.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * Trailing control (button, menu, link) pinned to the top-right of a
+ * `CardHeader`. The header switches to a two-column grid when a `CardAction` is
+ * present, so the title and description keep their width.
+ */
+const CardAction = ({ className, ...props }) => (_jsx("div", { className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className), "data-component": "card-action", "data-slot": "card-action", ...props }));
+export { CardAction };

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

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

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

@@ -0,0 +1,40 @@
+import { defineAnatomy } from "../../tokens/anatomy.js";
+/**
+ * cardAnatomy helper for Card.
+ * Import from "@instruments/materia-ui/components/card".
+ */
+export const cardAnatomy = defineAnatomy({
+    children: [
+        {
+            children: [
+                { description: "Main heading", label: "CardTitle", slot: "card-title" },
+                {
+                    description: "Subheading or summary",
+                    label: "CardDescription",
+                    slot: "card-description",
+                },
+                {
+                    description: "Action button or link",
+                    label: "CardAction",
+                    slot: "card-action",
+                },
+            ],
+            description: "Header area with title and optional action",
+            label: "CardHeader",
+            slot: "card-header",
+        },
+        {
+            description: "Main content area",
+            label: "CardContent",
+            slot: "card-content",
+        },
+        {
+            description: "Footer with actions or metadata",
+            label: "CardFooter",
+            slot: "card-footer",
+        },
+    ],
+    description: "Container for grouped content",
+    label: "Card",
+    slot: "card",
+});

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

@@ -0,0 +1,20 @@
+import { useRender } from "@base-ui/react/use-render";
+type CardContentProps = useRender.ComponentProps<"div">;
+/**
+ * Main content area of a card. Provides consistent padding for card body content.
+ *
+ * @param props - The card content props
+ * @param props.render - Replace the rendered `div` with another element or component.
+ * @param props.className - Additional CSS classes to apply.
+ * @param props.children - Card body content.
+ * @param props... - All other standard HTML div element props.
+ *
+ * @example
+ * ```tsx
+ * <CardContent>
+ *   <Text>Main card content goes here.</Text>
+ * </CardContent>
+ * ```
+ */
+declare const CardContent: ({ className, ref, render, ...props }: CardContentProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export { CardContent };

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

@@ -0,0 +1,30 @@
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * Main content area of a card. Provides consistent padding for card body content.
+ *
+ * @param props - The card content props
+ * @param props.render - Replace the rendered `div` with another element or component.
+ * @param props.className - Additional CSS classes to apply.
+ * @param props.children - Card body content.
+ * @param props... - All other standard HTML div element props.
+ *
+ * @example
+ * ```tsx
+ * <CardContent>
+ *   <Text>Main card content goes here.</Text>
+ * </CardContent>
+ * ```
+ */
+const CardContent = ({ className, ref, render, ...props }) => useRender({
+    defaultTagName: "div",
+    props: {
+        className: cn("px-(--card-inset)", className),
+        "data-component": "card-content",
+        "data-slot": "card-content",
+        ...props,
+    },
+    ref,
+    render,
+});
+export { CardContent };

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

@@ -0,0 +1,6 @@
+import type * as React from "react";
+/**
+ * Muted subheading or summary line, sits beneath `CardTitle` in a `CardHeader`.
+ */
+declare const CardDescription: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
+export { CardDescription };

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * Muted subheading or summary line, sits beneath `CardTitle` in a `CardHeader`.
+ */
+const CardDescription = ({ className, ...props }) => (_jsx("div", { className: cn("trim-both text-muted-foreground text-paragraph-sm", className), "data-component": "card-description", "data-slot": "card-description", ...props }));
+export { CardDescription };

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

@@ -0,0 +1,8 @@
+import type * as React from "react";
+/**
+ * Bottom bar of a card for actions or metadata; right-aligns its children on a
+ * tinted, rounded footer. Its presence removes the card's bottom padding so the
+ * bar sits flush with the edge.
+ */
+declare const CardFooter: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
+export { CardFooter };

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Flex } from "../flex.js";
+/**
+ * Bottom bar of a card for actions or metadata; right-aligns its children on a
+ * tinted, rounded footer. Its presence removes the card's bottom padding so the
+ * bar sits flush with the edge.
+ */
+const CardFooter = ({ className, ...props }) => (_jsx(Flex, { align: "center", className: cn("bg-muted/30 rounded-b-3xl p-4", className), "data-component": "card-footer", "data-slot": "card-footer", gap: "xs", justify: "flex-end", ...props }));
+export { CardFooter };

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

@@ -0,0 +1,25 @@
+import { useRender } from "@base-ui/react/use-render";
+type CardHeaderProps = useRender.ComponentProps<"div"> & {
+    /** Render a bottom border */
+    border?: boolean;
+};
+/**
+ * Header section of a card. Typically contains title, description, and optional action buttons.
+ *
+ * @param props - The card header props
+ * @param props.render - Replace the rendered `div` with another element or component.
+ * @param props.border - Render a bottom border. Defaults to false.
+ * @param props.className - Additional CSS classes to apply.
+ * @param props.children - Header content (CardTitle, CardDescription, CardAction, etc.).
+ * @param props... - All other standard HTML div element props.
+ *
+ * @example
+ * ```tsx
+ * <CardHeader>
+ *   <CardTitle>Card Title</CardTitle>
+ *   <CardDescription>Card description</CardDescription>
+ * </CardHeader>
+ * ```
+ */
+declare const CardHeader: ({ className, border, ref, render, ...props }: CardHeaderProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export { CardHeader };

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

@@ -0,0 +1,32 @@
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * Header section of a card. Typically contains title, description, and optional action buttons.
+ *
+ * @param props - The card header props
+ * @param props.render - Replace the rendered `div` with another element or component.
+ * @param props.border - Render a bottom border. Defaults to false.
+ * @param props.className - Additional CSS classes to apply.
+ * @param props.children - Header content (CardTitle, CardDescription, CardAction, etc.).
+ * @param props... - All other standard HTML div element props.
+ *
+ * @example
+ * ```tsx
+ * <CardHeader>
+ *   <CardTitle>Card Title</CardTitle>
+ *   <CardDescription>Card description</CardDescription>
+ * </CardHeader>
+ * ```
+ */
+const CardHeader = ({ className, border, ref, render, ...props }) => useRender({
+    defaultTagName: "div",
+    props: {
+        className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-(--card-inset) has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-(--card-inset)", border === true && "border-border border-b", className),
+        "data-component": "card-header",
+        "data-slot": "card-header",
+        ...props,
+    },
+    ref,
+    render,
+});
+export { CardHeader };

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

@@ -0,0 +1,67 @@
+import type { VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import type { BorderStyle } from "../../tokens/border.js";
+import type { ResponsiveMode, LayoutResponsiveValue } from "../../tokens/responsive.js";
+import type { ComponentSize } from "../../tokens/size.js";
+import type { WithTestId } from "../../utils/with-test-id.js";
+declare const cardVariants: (props?: ({
+    variant?: "accent" | "card" | "ghost" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface CardProps extends WithTestId<React.ComponentProps<"div">>, VariantProps<typeof cardVariants> {
+    border?: BorderStyle;
+    /**
+     * Padding around the card's `CardHeader` and `CardContent`, and the gap
+     * between its parts. Parts pick it up from the root, so they need no matching
+     * prop. `CardFooter` is not affected: it keeps its own 16px padding.
+     * `"none"` removes the padding and the gaps, so header and content run to the
+     * card's edges, for tables and code blocks. Accepts a per-breakpoint
+     * responsive object; an object without `base` falls back to the default
+     * rather than inheriting an ancestor card's inset. @default "xl" (24px)
+     */
+    inset?: LayoutResponsiveValue<ComponentSize> | "none";
+    /** Whether responsive values resolve against the viewport ("screen") or nearest container ("container"). @default "screen" */
+    responsiveMode?: ResponsiveMode;
+    /** Whether the card casts a shadow. Defaults to true (each variant's own
+     * shadow). Set to false for flat cards on a shaded canvas - e.g. several
+     * cards stacked on a muted-background page/panel, where the colour
+     * contrast alone separates them and a shadow on every one would be
+     * redundant. */
+    shadow?: boolean;
+}
+/**
+ * Card container with optional border and variant-based background.
+ *
+ * @param props - The card props
+ * @param props.variant - Background variant. Options: "card" (default, white bg), "muted", "accent", "ghost" (no border/bg).
+ * @param props.border - Border style. Options: "solid", "none" (default), "dashed".
+ * @param props.inset - Padding around header and content, and the gap between parts; the footer keeps its own 16px padding. A size, "none" for a flush card, or a responsive object. Defaults to "xl" (24px).
+ * @param props.responsiveMode - "screen" (viewport, default) or "container" for `inset` breakpoints.
+ * @param props.shadow - Whether to cast a shadow. Defaults to true.
+ * @param props.className - Additional CSS classes to apply.
+ * @param props.testId - Test ID for testing purposes.
+ * @param props.children - Card content (typically CardHeader, CardContent, CardFooter).
+ * @param props... - All other standard HTML div element props.
+ *
+ * @example
+ * ```tsx
+ * <Card variant="card" border="solid">
+ *   <CardHeader>Title</CardHeader>
+ *   <CardContent>Content</CardContent>
+ * </Card>
+ * ```
+ *
+ * @example Flat card on a shaded canvas
+ * ```tsx
+ * <Card shadow={false}>
+ *   <CardContent>Content</CardContent>
+ * </Card>
+ * ```
+ *
+ * @bestPractice Compose structure with `CardHeader`/`CardContent`/`CardFooter` rather than raw padded divs - the root supplies the gap rhythm and drops its bottom padding when a footer is present, via `data-slot` selectors.
+ * @bestPractice Set `inset` on the `Card` (not on its parts) to change the padding around header and content; `inset="none"` gives a card with no padding or gaps for a `Table` or code block. "Flush" covers header and content only: `CardFooter` keeps its own 16px padding whatever the inset.
+ * @bestPractice Pass `shadow={false}` when stacking cards on a `muted`/shaded canvas - colour contrast separates them and per-card shadows read as noise.
+ * @bestPractice For a full-bleed media/CTA panel use an editorial composite (`EditorialCard`), not `Card` - `Card` is a neutral padded container, not a marketing surface.
+ * @category data
+ */
+declare const Card: ({ className, border, inset, responsiveMode, variant, shadow, testId, ...props }: CardProps) => React.JSX.Element;
+export { Card };

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { cva } from "class-variance-authority";
+import { borderStyleClasses } from "../../tokens/border.js";
+import { getResponsiveClasses, isResponsiveValue, } from "../../tokens/responsive.js";
+import { CARD_INSET_CLASS } from "../../tokens/responsive-classes.js";
+const cardVariants = cva("text-card-foreground flex flex-col gap-(--card-inset) rounded-3xl py-(--card-inset) has-data-[slot=card-footer]:pb-0", {
+    defaultVariants: {
+        variant: "card",
+    },
+    variants: {
+        variant: {
+            card: "bg-card shadow-sm",
+            muted: "bg-muted shadow-sm",
+            accent: "bg-accent shadow-sm",
+            ghost: "border-0 bg-transparent shadow-none",
+        },
+    },
+});
+const DEFAULT_INSET = "xl";
+/**
+ * A responsive inset with no `base` would emit no base class, so `--card-inset`
+ * would inherit from an ancestor Card. Give it the default base instead.
+ */
+const withBaseInset = (inset) => isResponsiveValue(inset) && inset.base === undefined
+    ? { ...inset, base: DEFAULT_INSET }
+    : inset;
+/**
+ * Card container with optional border and variant-based background.
+ *
+ * @param props - The card props
+ * @param props.variant - Background variant. Options: "card" (default, white bg), "muted", "accent", "ghost" (no border/bg).
+ * @param props.border - Border style. Options: "solid", "none" (default), "dashed".
+ * @param props.inset - Padding around header and content, and the gap between parts; the footer keeps its own 16px padding. A size, "none" for a flush card, or a responsive object. Defaults to "xl" (24px).
+ * @param props.responsiveMode - "screen" (viewport, default) or "container" for `inset` breakpoints.
+ * @param props.shadow - Whether to cast a shadow. Defaults to true.
+ * @param props.className - Additional CSS classes to apply.
+ * @param props.testId - Test ID for testing purposes.
+ * @param props.children - Card content (typically CardHeader, CardContent, CardFooter).
+ * @param props... - All other standard HTML div element props.
+ *
+ * @example
+ * ```tsx
+ * <Card variant="card" border="solid">
+ *   <CardHeader>Title</CardHeader>
+ *   <CardContent>Content</CardContent>
+ * </Card>
+ * ```
+ *
+ * @example Flat card on a shaded canvas
+ * ```tsx
+ * <Card shadow={false}>
+ *   <CardContent>Content</CardContent>
+ * </Card>
+ * ```
+ *
+ * @bestPractice Compose structure with `CardHeader`/`CardContent`/`CardFooter` rather than raw padded divs - the root supplies the gap rhythm and drops its bottom padding when a footer is present, via `data-slot` selectors.
+ * @bestPractice Set `inset` on the `Card` (not on its parts) to change the padding around header and content; `inset="none"` gives a card with no padding or gaps for a `Table` or code block. "Flush" covers header and content only: `CardFooter` keeps its own 16px padding whatever the inset.
+ * @bestPractice Pass `shadow={false}` when stacking cards on a `muted`/shaded canvas - colour contrast separates them and per-card shadows read as noise.
+ * @bestPractice For a full-bleed media/CTA panel use an editorial composite (`EditorialCard`), not `Card` - `Card` is a neutral padded container, not a marketing surface.
+ * @category data
+ */
+const Card = ({ className, border = "none", inset = DEFAULT_INSET, responsiveMode = "screen", variant, shadow = true, testId, ...props }) => (_jsx("div", { className: cn(cardVariants({ variant }), getResponsiveClasses(withBaseInset(inset), CARD_INSET_CLASS, responsiveMode), borderStyleClasses(border), !shadow && "shadow-none", className), "data-component": "card", "data-slot": "card", "data-testid": testId, ...props }));
+export { Card };

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

@@ -0,0 +1,8 @@
+import { useRender } from "@base-ui/react/use-render";
+type CardTitleProps = useRender.ComponentProps<"div">;
+/**
+ * Primary heading inside a `CardHeader`. Pass `render` to render the title as
+ * a semantic heading (`render={<h2 />}`, a link, …) instead of the default `<div>`.
+ */
+declare const CardTitle: ({ className, ref, render, ...props }: CardTitleProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export { CardTitle };

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

@@ -0,0 +1,18 @@
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * Primary heading inside a `CardHeader`. Pass `render` to render the title as
+ * a semantic heading (`render={<h2 />}`, a link, …) instead of the default `<div>`.
+ */
+const CardTitle = ({ className, ref, render, ...props }) => useRender({
+    defaultTagName: "div",
+    props: {
+        className: cn("trim-both text-paragraph-sm font-medium", className),
+        "data-component": "card-title",
+        "data-slot": "card-title",
+        ...props,
+    },
+    ref,
+    render,
+});
+export { CardTitle };

package/dist/components/card/card.test-d.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Type-level surface guards for Card.
+ *
+ * Evaluated by `tsc --noEmit` (the `typecheck` gate), not by vitest or the
+ * Playwright story smoke - a `.test-d.ts` name matches neither runner's globs.
+ *
+ * Card exposes no genuinely-invalid *prop combination* that
+ * can be encoded safely. The one candidate - the frameless `ghost` variant
+ * accepting `border`/`shadow` (a `shadow` on ghost is a silent no-op) - was
+ * considered and rejected: encoding it requires turning `CardProps` into a
+ * discriminated union, which breaks `interface … extends ComponentProps<typeof
+ * Card>` (e.g. SettingsCard) and collapses Storybook's args inference to
+ * `never`. That blast radius is not worth a no-op prop. These guards instead
+ * lock the surface that IS load-bearing: the closed `variant` set and the
+ * framing props, so a later silent widening (`variant: string`) fails here.
+ */
+import type { ComponentProps } from "react";
+import type { Card } from "./card-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 Card props. */
+type Accepts<V> = V extends ComponentProps<typeof Card> ? true : false;
+export type FramedVariantAccepted = Expect<Accepts<{
+    variant: "muted";
+    border: "solid";
+    shadow: false;
+}>>;
+export type GhostVariantAccepted = Expect<Accepts<{
+    variant: "ghost";
+}>>;
+export type DefaultVariantAcceptsFraming = Expect<Accepts<{
+    border: "dashed";
+    shadow: true;
+}>>;
+export type UnknownVariantRejected = Expect<Not<Accepts<{
+    variant: "elevated";
+}>>>;
+export type UnknownBorderRejected = Expect<Not<Accepts<{
+    border: "double";
+}>>>;
+export type InsetSizeAccepted = Expect<Accepts<{
+    inset: "lg";
+}>>;
+export type InsetNoneAccepted = Expect<Accepts<{
+    inset: "none";
+}>>;
+export type InsetResponsiveAccepted = Expect<Accepts<{
+    inset: {
+        base: "sm";
+        md: "xl";
+    };
+    responsiveMode: "container";
+}>>;
+export type InsetUnknownRejected = Expect<Not<Accepts<{
+    inset: "huge";
+}>>>;
+export type InsetBreakpointAccepted = Expect<Accepts<{
+    inset: {
+        base: "sm";
+        md: "2xl";
+    };
+}>>;
+export type InsetContainerKeyRejected = Expect<Not<Accepts<{
+    inset: {
+        "@md": "2xl";
+    };
+}>>>;
+export {};

package/dist/components/card/card.test-d.js

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

package/dist/components/card.d.ts

@@ -0,0 +1,8 @@
+export { CardAction } from "./card/card-action.js";
+export { cardAnatomy } from "./card/card-anatomy.js";
+export { CardContent } from "./card/card-content.js";
+export { CardDescription } from "./card/card-description.js";
+export { CardFooter } from "./card/card-footer.js";
+export { CardHeader } from "./card/card-header.js";
+export { Card } from "./card/card-root.js";
+export { CardTitle } from "./card/card-title.js";

package/dist/components/card.js

@@ -0,0 +1,8 @@
+export { CardAction } from "./card/card-action.js";
+export { cardAnatomy } from "./card/card-anatomy.js";
+export { CardContent } from "./card/card-content.js";
+export { CardDescription } from "./card/card-description.js";
+export { CardFooter } from "./card/card-footer.js";
+export { CardHeader } from "./card/card-header.js";
+export { Card } from "./card/card-root.js";
+export { CardTitle } from "./card/card-title.js";

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

@@ -0,0 +1,86 @@
+import type { UseEmblaCarouselType } from "embla-carousel-react";
+import useEmblaCarousel from "embla-carousel-react";
+import type { Orientation } from "../../tokens/orientation.js";
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+interface CarouselContextValue {
+    api: CarouselApi | undefined;
+    canScrollNext: boolean;
+    canScrollPrev: boolean;
+    carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+    scrollNext: () => void;
+    scrollPrev: () => void;
+    scrollSnaps: number[];
+    selectedIndex: number;
+    slideCount?: number | undefined;
+}
+/**
+ * Reads the nearest Carousel's scroll state and controls; throws if used
+ * outside a Carousel.
+ */
+declare const useCarousel: () => CarouselContextValue;
+interface CarouselProps {
+    /** Accessible name for the carousel region. @default "Carousel" */
+    "aria-label"?: string;
+    children?: React.ReactNode;
+    className?: string;
+    /** Enable free-scroll mode without snap points (useful for mobile galleries) */
+    freeScroll?: boolean;
+    /** Embla options passed through to the underlying carousel. */
+    opts?: CarouselOptions;
+    /** Scroll axis. @default "horizontal" */
+    orientation?: Orientation;
+    /** Embla plugins passed through to the underlying carousel. */
+    plugins?: CarouselPlugin;
+    /** Explicit slide count for dots - use when Embla miscounts due to custom slide sizing */
+    slideCount?: number;
+    /** Slides visible at once; drives each item's flex-basis. @default 1 */
+    slidesToShow?: number;
+    /** Enable mousewheel/trackpad scroll navigation (default: false) */
+    wheelScroll?: boolean;
+}
+/**
+ * Embla-backed carousel that shares scroll state and controls with its parts
+ * (CarouselContent, CarouselPrevious/Next, CarouselDots) via context - they
+ * must render inside it.
+ *
+ * @bestPractice Render `CarouselContent`/`CarouselItem`/`CarouselPrevious`/`CarouselNext`/`CarouselDots` only inside `Carousel` - they read scroll state from context and throw ("must be used within a Carousel") outside it.
+ * @bestPractice Set `slidesToShow` to show multiple items at once (it drives each item's `flex-basis`); don't fake a multi-item view with CSS widths on `CarouselItem`.
+ * @bestPractice Tune scroll behaviour via `opts` (Embla options like `loop`/`align`) and enable `wheelScroll`/`freeScroll` deliberately - free-scroll drops snap points, so pass `slideCount` if the dots miscount.
+ * @bestPractice Give a descriptive `aria-label` when the region isn't self-evidently "Carousel" (e.g. `"Product images"`).
+ * @category data
+ */
+declare const Carousel: ({ "aria-label": ariaLabel, opts, plugins, orientation, slidesToShow, slideCount, freeScroll, wheelScroll, className, children, }: CarouselProps) => import("react").JSX.Element;
+type CarouselContentProps = React.ComponentProps<"div">;
+/**
+ * Scroll viewport wrapping the slide track; attaches the Embla ref and clips
+ * overflow. Holds the CarouselItem children.
+ */
+declare const CarouselContent: ({ className, ...props }: CarouselContentProps) => import("react").JSX.Element;
+type CarouselItemProps = React.ComponentProps<"div">;
+/**
+ * A single slide; its width follows the parent Carousel's `slidesToShow`.
+ */
+declare const CarouselItem: ({ className, ...props }: CarouselItemProps) => import("react").JSX.Element;
+type CarouselPreviousProps = React.ComponentProps<"button">;
+/**
+ * Button that scrolls to the previous slide; auto-disables (and fades out) at
+ * the start of the carousel.
+ */
+declare const CarouselPrevious: ({ className, ...props }: CarouselPreviousProps) => import("react").JSX.Element;
+type CarouselNextProps = React.ComponentProps<"button">;
+/**
+ * Button that scrolls to the next slide; auto-disables (and fades out) at the
+ * end of the carousel.
+ */
+declare const CarouselNext: ({ className, ...props }: CarouselNextProps) => import("react").JSX.Element;
+type CarouselDotsProps = React.ComponentProps<"div">;
+/**
+ * Pagination dots that jump to a slide on click; renders nothing when there is
+ * one slide or fewer.
+ */
+declare const CarouselDots: ({ className, ...props }: CarouselDotsProps) => import("react").JSX.Element | null;
+export type { CarouselApi, CarouselContentProps, CarouselDotsProps, CarouselItemProps, CarouselNextProps, CarouselPreviousProps, CarouselProps, };
+export { Carousel, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious, useCarousel, };