@central-ui/react 0.2.0 → 0.3.0

package/dist/components/autocomplete/index.d.ts

@@ -337,12 +337,16 @@ type MessageProps = Omit<ComponentProps<'div'>, 'children'> & StyleProps & {
 export declare const Error: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /** Shows itself only while Root's validation is `'success'`: with no children it shows the message from `['success', message]`, a function children formats that message, and other children replace it. */
 export declare const Success: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** Built-in decorative open-button icon. Place inside AddonOpenButton; no children needed. Defaults to strokeWidth 1.5. */
-export declare const AddonOpenButtonIcon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** Built-in decorative clear icon. Place inside AddonClearButton; no children needed. Defaults to strokeWidth 1.5. */
-export declare const AddonClearButtonIcon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+type BuiltInIconProps = Omit<SVGIconProps, 'children'> & StyleProps & {
+    /** Omit for the supplied default icon; pass a child icon only to replace it. */
+    children?: ReactElement<SVGIconProps>;
+};
+/** Built-in decorative open-button icon. Place inside AddonOpenButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
+export declare const AddonOpenButtonIcon: import("react").ForwardRefExoticComponent<Omit<BuiltInIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Built-in decorative clear icon. Place inside AddonClearButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
+export declare const AddonClearButtonIcon: import("react").ForwardRefExoticComponent<Omit<BuiltInIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Optional spinner inside Addon. Does not detect requests: you decide when to render it. Defaults to strokeWidth 1.5. */
-export declare const AddonLoadingIcon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const AddonLoadingIcon: import("react").ForwardRefExoticComponent<Omit<BuiltInIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Optional async status inside Popup, below Empty and above ScrollArea. Omit entirely for synchronous items. For async items, keep Loading mounted and conditionally render only LoadingIcon and LoadingText from your request state. Does not detect requests or manage visibility. */
 export declare const Loading: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteStatusProps, "className"> & {
     className?: string;

package/dist/components/autocomplete/index.js

@@ -326,11 +326,11 @@ const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, clas
     const attributes = usePartAttributes();
     return _jsx("div", { "aria-atomic": "true", ...attributes, ...props, id: describedById, ref: ref, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
-/** Built-in decorative open-button icon. Place inside AddonOpenButton; no children needed. Defaults to strokeWidth 1.5. */
+/** Built-in decorative open-button icon. Place inside AddonOpenButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
 export const AddonOpenButtonIcon = /* @__PURE__ */ forwardRef(function AddonOpenButtonIcon(props, ref) {
     return _jsx(BuiltInIcon, { ...props, ref: ref, icon: ChevronsUpDown, component: "autocomplete-addonopenbuttonicon" });
 });
-/** Built-in decorative clear icon. Place inside AddonClearButton; no children needed. Defaults to strokeWidth 1.5. */
+/** Built-in decorative clear icon. Place inside AddonClearButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
 export const AddonClearButtonIcon = /* @__PURE__ */ forwardRef(function AddonClearButtonIcon(props, ref) {
     return _jsx(BuiltInIcon, { ...props, ref: ref, icon: X, component: "autocomplete-addonclearbuttonicon" });
 });
@@ -339,9 +339,18 @@ export const AddonLoadingIcon = /* @__PURE__ */ forwardRef(function AddonLoading
     return _jsx(BuiltInIcon, { ...props, ref: ref, icon: LoaderCircle, component: "autocomplete-addonloadingicon" });
 });
 // The shared body of the built-in decorative icons above, which only differ by their icon and component name
-const BuiltInIcon = /* @__PURE__ */ forwardRef(function BuiltInIcon({ disableStyle, className, strokeWidth = 1.5, icon: Icon, component, ...props }, ref) {
+const BuiltInIcon = /* @__PURE__ */ forwardRef(function BuiltInIcon({ disableStyle, className, strokeWidth, icon: Icon, component, children, ...props }, ref) {
     const attributes = usePartAttributes();
-    return _jsx(Icon, { ...attributes, "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
+    return cloneElement(children ?? _jsx(Icon, {}), {
+        ...attributes,
+        'aria-hidden': true,
+        ...props,
+        ref,
+        strokeWidth: strokeWidth ?? children?.props.strokeWidth ?? 1.5,
+        'data-component': component,
+        'data-style-disabled': disableStyle ? '' : undefined,
+        className: twMerge(children?.props.className, className),
+    });
 });
 /** Optional async status inside Popup, below Empty and above ScrollArea. Omit entirely for synchronous items. For async items, keep Loading mounted and conditionally render only LoadingIcon and LoadingText from your request state. Does not detect requests or manage visibility. */
 export const Loading = /* @__PURE__ */ forwardRef(function Loading({ disableStyle, className, ...props }, ref) {

package/dist/components/carousel/index.d.ts

@@ -0,0 +1,169 @@
+import type { StyleProps } from '../../types/Style.ts';
+import type { SVGIconProps } from '../../types/Icon.ts';
+import type { AsChildProps } from '../../utils/asChild.ts';
+import type { AutoplayOptionsType } from 'embla-carousel-autoplay';
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
+type IconProps = Omit<SVGIconProps, 'strokeWidth'> & {
+    /** @default 1.5 */
+    strokeWidth?: SVGIconProps['strokeWidth'];
+};
+type Orientation = 'horizontal' | 'vertical';
+export type RootProps = {
+    /** The carousel parts, like SlidesList, the buttons and IndicatorList. */
+    children: ReactNode;
+    /**
+     * The direction slides move in. A vertical carousel needs a height on SlidesList.
+     * @default 'horizontal'
+     */
+    orientation?: Orientation;
+    /**
+     * Whether the last slide leads back to the first, and the first back to the last.
+     * @default false
+     */
+    loop?: boolean;
+    /**
+     * Where the selected slide sits inside SlidesList, when slides are narrower than it.
+     * @default 'center'
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * How many slides one Previous/Next press moves. 'auto' moves by as many slides as are fully visible.
+     * @default 1
+     */
+    slidesToScroll?: number | 'auto';
+    /**
+     * Whether a drag glides freely with momentum instead of stopping on a slide.
+     * @default false
+     */
+    dragFree?: boolean;
+    /**
+     * Space between slides, as a number of pixels or any CSS length. Size slides with a className on Slide, like `basis-1/3`; the gap is already subtracted from it.
+     * @default 0
+     */
+    gap?: number | string;
+    /**
+     * Turns off dragging and every button.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Moves to the next slide on its own. Pass true for the defaults, or an object to change them:
+     * - delay: milliseconds between slides (default 4000)
+     * - jump: jump instead of animating (default false)
+     * - playOnInit: start playing as soon as the carousel mounts (default true)
+     * - stopOnInteraction: whether a drag, hover or focus stops it for good; set false to resume once the user lets go, moves the mouse away, or moves focus out (default true)
+     * - stopOnMouseEnter: stop while the mouse is over SlidesList; it resumes on mouse leave only with stopOnInteraction false (default false)
+     * - stopOnFocusIn: stop when focus moves inside SlidesList; it resumes on focus out only with stopOnInteraction false (default true)
+     * - stopOnLastSnap: stop on the last slide (default false)
+     * @default false
+     */
+    autoplay?: boolean | Omit<AutoplayOptionsType, 'active' | 'breakpoints' | 'rootNode'>;
+    /** The selected slide's position, from 0. Use with onIndexChange to control it yourself. */
+    index?: number;
+    /**
+     * The slide the carousel starts on, when `index` isn't controlled.
+     * @default 0
+     */
+    defaultIndex?: number;
+    /** Called with the new position whenever another slide gets selected, by a drag, a button, or autoplay. */
+    onIndexChange?: (index: number) => void;
+};
+/**
+ * A row of slides users swipe through, built on Embla Carousel. Root holds the carousel's state and renders no element;
+ * SlidesList is the visible window and Slide is one item, written by hand so each can hold different content.
+ * Previous/Next and Indicator buttons work on their own: no click handlers needed.
+ * Every part carries data-orientation, data-disabled, and data-playing (while autoplay runs), so any part can be styled by the carousel's state.
+ *
+ * @example Complete composition
+ * import { Carousel } from '@central-ui/react'
+ *
+ * function Example() {
+ *   return (
+ *     <Carousel.Root loop>
+ *       <Carousel.SlidesList>
+ *         {products.map((product) => (
+ *           <Carousel.Slide key={product.id}>
+ *             <img src={product.image} alt={product.title} />
+ *           </Carousel.Slide>
+ *         ))}
+ *       </Carousel.SlidesList>
+ *       <Carousel.PreviousButton aria-label="Previous slide">
+ *         <Carousel.PreviousButtonIcon />
+ *       </Carousel.PreviousButton>
+ *       <Carousel.NextButton aria-label="Next slide">
+ *         <Carousel.NextButtonIcon />
+ *       </Carousel.NextButton>
+ *       <Carousel.IndicatorList>
+ *         {(index) => <Carousel.IndicatorButton index={index} />}
+ *       </Carousel.IndicatorList>
+ *     </Carousel.Root>
+ *   )
+ * }
+ *
+ * @example Several slides at once
+ * // Size slides with Tailwind (responsive classes work); gap is subtracted from that size.
+ * ;<Carousel.Root gap={12} align="start" slidesToScroll="auto">
+ *   <Carousel.SlidesList>
+ *     <Carousel.Slide className="basis-full md:basis-1/3">…</Carousel.Slide>
+ *   </Carousel.SlidesList>
+ * </Carousel.Root>
+ *
+ * @example Autoplay, pausing while hovered and resuming on mouse leave
+ * ;<Carousel.Root loop autoplay={{ delay: 5000, stopOnMouseEnter: true, stopOnInteraction: false }}>
+ *
+ * @example Controlled position
+ * const [index, setIndex] = useState(0)
+ * ;<Carousel.Root index={index} onIndexChange={setIndex}>
+ */
+export declare function Root({ orientation, loop, align, slidesToScroll, dragFree, gap, disabled, autoplay, index, defaultIndex, onIndexChange, children, }: RootProps): import("react").JSX.Element;
+/** The visible window the slides move inside, announced to screen readers as the carousel. Style it freely (background, border, radius); a vertical carousel needs a height here. Put only Slides inside. */
+export declare const SlidesList: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * One slide; each can hold different content. Size it with a className, like `basis-1/3`; it fills SlidesList by default.
+ * Its padding makes the gap between slides, so put backgrounds, borders and radius on its content, not on the Slide itself.
+ */
+export declare const Slide: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type ButtonPartProps = ComponentProps<'button'> & AsChildProps & StyleProps;
+/** Moves to the previous slide; no click handler needed. Disabled when there's no slide before (never with loop). Supply its content, normally PreviousButtonIcon, and an accessible label. Pass asChild to give this behavior to your own button instead. */
+export declare const PreviousButton: import("react").ForwardRefExoticComponent<Omit<ButtonPartProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/** Moves to the next slide; no click handler needed. Disabled when there's no slide after (never with loop). Supply its content, normally NextButtonIcon, and an accessible label. Pass asChild to give this behavior to your own button instead. */
+export declare const NextButton: import("react").ForwardRefExoticComponent<Omit<ButtonPartProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * Renders one IndicatorButton per position through its children function, which receives that position's index.
+ * The count comes from the carousel itself: with several slides per view, it counts positions, not slides.
+ *
+ * @example Dots
+ * ;<Carousel.IndicatorList>
+ *   {(index) => <Carousel.IndicatorButton index={index} />}
+ * </Carousel.IndicatorList>
+ */
+export declare const IndicatorList: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & StyleProps & {
+    /** Called once per position with its index; return an IndicatorButton. */
+    children: (index: number) => ReactNode;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Moves to its position when clicked, and carries data-selected while that position is shown. Shows as a dot when empty.
+ * Pass asChild to give this behavior to your own button instead.
+ *
+ * @example Thumbnails instead of dots
+ * ;<Carousel.IndicatorList>
+ *   {(index) => (
+ *     <Carousel.IndicatorButton index={index}>
+ *       <img src={images[index].thumbnail} alt="" />
+ *     </Carousel.IndicatorButton>
+ *   )}
+ * </Carousel.IndicatorList>
+ */
+export declare const IndicatorButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & AsChildProps & StyleProps & {
+    /** The position this button moves to, from IndicatorList's children function. */
+    index: number;
+}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+type BuiltInIconProps = Omit<IconProps, 'children'> & StyleProps & {
+    /** Omit for the supplied default icon; pass a child icon only to replace it. */
+    children?: ReactElement<SVGIconProps>;
+};
+/** Built-in decorative previous icon. Place inside PreviousButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
+export declare const PreviousButtonIcon: import("react").ForwardRefExoticComponent<Omit<BuiltInIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Built-in decorative next icon. Place inside NextButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
+export declare const NextButtonIcon: import("react").ForwardRefExoticComponent<Omit<BuiltInIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export {};

package/dist/components/carousel/index.js

@@ -0,0 +1,299 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { asChildStyleAttributes } from "../../utils/asChild.js";
+import { ChevronLeft, ChevronRight } from "../../utils/icons.js";
+import { useDirection } from '@base-ui/react/direction-provider';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import useEmblaCarousel from 'embla-carousel-react';
+import Autoplay from 'embla-carousel-autoplay';
+import { Fragment, cloneElement, createContext, forwardRef, useContext, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+const CarouselContext = /* @__PURE__ */ createContext(null);
+/**
+ * A row of slides users swipe through, built on Embla Carousel. Root holds the carousel's state and renders no element;
+ * SlidesList is the visible window and Slide is one item, written by hand so each can hold different content.
+ * Previous/Next and Indicator buttons work on their own: no click handlers needed.
+ * Every part carries data-orientation, data-disabled, and data-playing (while autoplay runs), so any part can be styled by the carousel's state.
+ *
+ * @example Complete composition
+ * import { Carousel } from '@central-ui/react'
+ *
+ * function Example() {
+ *   return (
+ *     <Carousel.Root loop>
+ *       <Carousel.SlidesList>
+ *         {products.map((product) => (
+ *           <Carousel.Slide key={product.id}>
+ *             <img src={product.image} alt={product.title} />
+ *           </Carousel.Slide>
+ *         ))}
+ *       </Carousel.SlidesList>
+ *       <Carousel.PreviousButton aria-label="Previous slide">
+ *         <Carousel.PreviousButtonIcon />
+ *       </Carousel.PreviousButton>
+ *       <Carousel.NextButton aria-label="Next slide">
+ *         <Carousel.NextButtonIcon />
+ *       </Carousel.NextButton>
+ *       <Carousel.IndicatorList>
+ *         {(index) => <Carousel.IndicatorButton index={index} />}
+ *       </Carousel.IndicatorList>
+ *     </Carousel.Root>
+ *   )
+ * }
+ *
+ * @example Several slides at once
+ * // Size slides with Tailwind (responsive classes work); gap is subtracted from that size.
+ * ;<Carousel.Root gap={12} align="start" slidesToScroll="auto">
+ *   <Carousel.SlidesList>
+ *     <Carousel.Slide className="basis-full md:basis-1/3">…</Carousel.Slide>
+ *   </Carousel.SlidesList>
+ * </Carousel.Root>
+ *
+ * @example Autoplay, pausing while hovered and resuming on mouse leave
+ * ;<Carousel.Root loop autoplay={{ delay: 5000, stopOnMouseEnter: true, stopOnInteraction: false }}>
+ *
+ * @example Controlled position
+ * const [index, setIndex] = useState(0)
+ * ;<Carousel.Root index={index} onIndexChange={setIndex}>
+ */
+export function Root({ orientation = 'horizontal', loop = false, align = 'center', slidesToScroll = 1, dragFree = false, gap = 0, disabled = false, autoplay = false, index, defaultIndex = 0, onIndexChange, children, }) {
+    const direction = useDirection();
+    // Embla reads the start only once; keeping it fixed stops a controlled index from restarting the carousel
+    const [startIndex] = useState(index ?? defaultIndex);
+    const [emblaRef, api] = useEmblaCarousel({
+        axis: orientation === 'vertical' ? 'y' : 'x',
+        direction,
+        loop,
+        align,
+        slidesToScroll,
+        dragFree,
+        startIndex,
+        active: !disabled,
+    }, autoplay ? [Autoplay(autoplay === true ? {} : autoplay)] : []);
+    const [snapshot, setSnapshot] = useState({
+        selectedIndex: startIndex,
+        snapCount: 0,
+        canScrollPrevious: false,
+        canScrollNext: false,
+        playing: false,
+    });
+    //1. Mirroring Embla's state, so the parts re-render when it changes
+    useEffect(() => {
+        if (!api)
+            return;
+        function sync(carousel, event) {
+            setSnapshot({
+                selectedIndex: carousel.selectedScrollSnap(),
+                snapCount: carousel.scrollSnapList().length,
+                canScrollPrevious: carousel.canScrollPrev(),
+                canScrollNext: carousel.canScrollNext(),
+                playing: readPlaying(carousel, event),
+            });
+        }
+        // The plugin fires play/stop before updating isPlaying(), so those events decide it themselves
+        function readPlaying(carousel, event) {
+            if (event === 'autoplay:play')
+                return true;
+            if (event === 'autoplay:stop')
+                return false;
+            // Embla starts no plugins while disabled, so plugins() is undefined then
+            return carousel.plugins()?.autoplay?.isPlaying() ?? false;
+        }
+        sync(api);
+        api.on('select', sync).on('reInit', sync).on('autoplay:play', sync).on('autoplay:stop', sync);
+        return () => {
+            api.off('select', sync).off('reInit', sync).off('autoplay:play', sync).off('autoplay:stop', sync);
+        };
+    }, [api]);
+    //2. Reporting every newly selected slide
+    useEffect(() => {
+        if (!api || !onIndexChange)
+            return;
+        function handleSelect(carousel) {
+            onIndexChange?.(carousel.selectedScrollSnap());
+        }
+        api.on('select', handleSelect);
+        return () => {
+            api.off('select', handleSelect);
+        };
+    }, [api, onIndexChange]);
+    //3. Moving to a controlled index set from outside
+    useEffect(() => {
+        if (!api || index === undefined || index === api.selectedScrollSnap())
+            return;
+        api.scrollTo(index);
+    }, [api, index]);
+    const context = { emblaRef, api, orientation, disabled, gap, ...snapshot };
+    return _jsx(CarouselContext.Provider, { value: context, children: children });
+}
+/** The visible window the slides move inside, announced to screen readers as the carousel. Style it freely (background, border, radius); a vertical carousel needs a height here. Put only Slides inside. */
+export const SlidesList = /* @__PURE__ */ forwardRef(function SlidesList({ disableStyle, style, children, ...props }, ref) {
+    const context = useCarouselContext('SlidesList');
+    const vertical = context.orientation === 'vertical';
+    // The track Embla moves; its negative margin cancels the first slide's gap
+    const track = (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: vertical ? 'column' : 'row',
+            height: vertical ? '100%' : undefined,
+            touchAction: vertical ? 'pan-x pinch-zoom' : 'pan-y pinch-zoom',
+            [vertical ? 'marginBlockStart' : 'marginInlineStart']: negativeLength(context.gap),
+        }, children: children }));
+    return useRender({
+        ref: [ref, context.emblaRef],
+        state: partState(context),
+        props: {
+            role: 'region',
+            'aria-roledescription': 'carousel',
+            ...props,
+            style: { overflow: 'hidden', ...style },
+            'data-component': 'carousel-slideslist',
+            'data-style-disabled': disableStyle ? '' : undefined,
+            children: track,
+        },
+    });
+});
+/**
+ * One slide; each can hold different content. Size it with a className, like `basis-1/3`; it fills SlidesList by default.
+ * Its padding makes the gap between slides, so put backgrounds, borders and radius on its content, not on the Slide itself.
+ */
+export const Slide = /* @__PURE__ */ forwardRef(function Slide({ disableStyle, style, ...props }, ref) {
+    const context = useCarouselContext('Slide');
+    const vertical = context.orientation === 'vertical';
+    return useRender({
+        ref,
+        state: partState(context),
+        props: {
+            role: 'group',
+            'aria-roledescription': 'slide',
+            ...props,
+            style: {
+                flexShrink: 0,
+                minWidth: 0,
+                minHeight: 0,
+                boxSizing: 'border-box',
+                [vertical ? 'paddingBlockStart' : 'paddingInlineStart']: context.gap,
+                ...style,
+            },
+            'data-component': 'carousel-slide',
+            'data-style-disabled': disableStyle ? '' : undefined,
+        },
+    });
+});
+/** Moves to the previous slide; no click handler needed. Disabled when there's no slide before (never with loop). Supply its content, normally PreviousButtonIcon, and an accessible label. Pass asChild to give this behavior to your own button instead. */
+export const PreviousButton = /* @__PURE__ */ forwardRef(function PreviousButton(props, ref) {
+    const context = useCarouselContext('PreviousButton');
+    return useActionButton(props, ref, context, {
+        component: 'carousel-previousbutton',
+        disabled: context.disabled || !context.canScrollPrevious,
+        onClick: () => context.api?.scrollPrev(),
+    });
+});
+/** Moves to the next slide; no click handler needed. Disabled when there's no slide after (never with loop). Supply its content, normally NextButtonIcon, and an accessible label. Pass asChild to give this behavior to your own button instead. */
+export const NextButton = /* @__PURE__ */ forwardRef(function NextButton(props, ref) {
+    const context = useCarouselContext('NextButton');
+    return useActionButton(props, ref, context, {
+        component: 'carousel-nextbutton',
+        disabled: context.disabled || !context.canScrollNext,
+        onClick: () => context.api?.scrollNext(),
+    });
+});
+/**
+ * Renders one IndicatorButton per position through its children function, which receives that position's index.
+ * The count comes from the carousel itself: with several slides per view, it counts positions, not slides.
+ *
+ * @example Dots
+ * ;<Carousel.IndicatorList>
+ *   {(index) => <Carousel.IndicatorButton index={index} />}
+ * </Carousel.IndicatorList>
+ */
+export const IndicatorList = /* @__PURE__ */ forwardRef(function IndicatorList({ disableStyle, children, ...props }, ref) {
+    const context = useCarouselContext('IndicatorList');
+    return useRender({
+        ref,
+        state: partState(context),
+        props: {
+            ...props,
+            'data-component': 'carousel-indicatorlist',
+            'data-style-disabled': disableStyle ? '' : undefined,
+            children: Array.from({ length: context.snapCount }, (_, index) => _jsx(Fragment, { children: children(index) }, index)),
+        },
+    });
+});
+/**
+ * Moves to its position when clicked, and carries data-selected while that position is shown. Shows as a dot when empty.
+ * Pass asChild to give this behavior to your own button instead.
+ *
+ * @example Thumbnails instead of dots
+ * ;<Carousel.IndicatorList>
+ *   {(index) => (
+ *     <Carousel.IndicatorButton index={index}>
+ *       <img src={images[index].thumbnail} alt="" />
+ *     </Carousel.IndicatorButton>
+ *   )}
+ * </Carousel.IndicatorList>
+ */
+export const IndicatorButton = /* @__PURE__ */ forwardRef(function IndicatorButton({ index, ...props }, ref) {
+    const context = useCarouselContext('IndicatorButton');
+    const selected = context.selectedIndex === index;
+    return useActionButton(props, ref, context, {
+        component: 'carousel-indicatorbutton',
+        disabled: context.disabled,
+        selected,
+        attributes: { 'aria-label': `Go to slide ${index + 1}`, 'aria-current': selected ? 'true' : undefined },
+        onClick: () => context.api?.scrollTo(index),
+    });
+});
+/** Built-in decorative previous icon. Place inside PreviousButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
+export const PreviousButtonIcon = /* @__PURE__ */ forwardRef(function PreviousButtonIcon(props, ref) {
+    return _jsx(BuiltInIcon, { ...props, ref: ref, icon: ChevronLeft, component: "carousel-previousbuttonicon" });
+});
+/** Built-in decorative next icon. Place inside NextButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
+export const NextButtonIcon = /* @__PURE__ */ forwardRef(function NextButtonIcon(props, ref) {
+    return _jsx(BuiltInIcon, { ...props, ref: ref, icon: ChevronRight, component: "carousel-nextbuttonicon" });
+});
+// The shared body of the built-in decorative icons above, which only differ by their icon and component name
+const BuiltInIcon = /* @__PURE__ */ forwardRef(function BuiltInIcon({ disableStyle, className, strokeWidth, icon: Icon, component, children, ...props }, ref) {
+    const attributes = partAttributes(useCarouselContext('Icon'));
+    return cloneElement(children ?? _jsx(Icon, {}), {
+        ...attributes,
+        'aria-hidden': true,
+        ...props,
+        ref,
+        strokeWidth: strokeWidth ?? children?.props.strokeWidth ?? 1.5,
+        'data-component': component,
+        'data-style-disabled': disableStyle ? '' : undefined,
+        className: twMerge(children?.props.className, className),
+    });
+});
+// The shared body of the action buttons: the part's own styled button, or the consumer's child with asChild
+function useActionButton({ asChild, disableStyle, children, ...props }, ref, context, internal) {
+    return useRender({
+        render: asChild ? children : undefined,
+        defaultTagName: 'button',
+        ref,
+        state: { ...partState(context), disabled: internal.disabled, selected: internal.selected ?? false },
+        props: mergeProps({ type: 'button', disabled: internal.disabled, onClick: internal.onClick, ...internal.attributes }, props, asChild ? {} : { children, ...asChildStyleAttributes({ asChild, component: internal.component, disableStyle }) }),
+    });
+}
+// The carousel's state every part exposes as data attributes
+function partState(context) {
+    return { orientation: context.orientation, disabled: context.disabled, playing: context.playing };
+}
+// The same data attributes, for the icons, which render without useRender
+function partAttributes(context) {
+    return {
+        'data-orientation': context.orientation,
+        'data-disabled': context.disabled ? '' : undefined,
+        'data-playing': context.playing ? '' : undefined,
+    };
+}
+// Turning the gap into the track's offset, whether it's a number of pixels or a CSS length
+function negativeLength(length) {
+    return typeof length === 'number' ? -length : `calc(${length} * -1)`;
+}
+function useCarouselContext(part) {
+    const context = useContext(CarouselContext);
+    if (!context)
+        throw new Error(`Carousel.${part} must be placed inside Carousel.Root.`);
+    return context;
+}

package/dist/components/combobox/index.d.ts

@@ -3,6 +3,10 @@ import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
 import type { ValidationProps } from '../../types/Validation.ts';
 import type { ComponentProps, ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
 import type { ValidationMessageChildren } from '../../utils/Validation.ts';
+type IconProps = Omit<SVGIconProps, 'strokeWidth'> & {
+    /** @default 1.5 */
+    strokeWidth?: SVGIconProps['strokeWidth'];
+};
 type StyleProps = {
     /**
      * Disables preset styling for this element.
@@ -379,26 +383,18 @@ type MessageProps = Omit<ComponentProps<'div'>, 'children'> & StyleProps & {
 export declare const Error: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /** Shows itself only while Root's validation is `'success'`: with no children it shows the message from `['success', message]`, a function children formats that message, and other children replace it. */
 export declare const Success: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** Built-in decorative open-button icon. Place inside AddonOpenButton; no children needed. Defaults to strokeWidth 1.5. */
-export declare const AddonOpenButtonIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "strokeWidth"> & {
-    /** @default 1.5 */
-    strokeWidth?: SVGIconProps["strokeWidth"];
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** Built-in decorative clear icon. Place inside AddonClearButton; no children needed. Defaults to strokeWidth 1.5. */
-export declare const AddonClearButtonIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "strokeWidth"> & {
-    /** @default 1.5 */
-    strokeWidth?: SVGIconProps["strokeWidth"];
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-/** Built-in decorative removal icon. Place inside ChipRemoveButton; no children needed. Defaults to strokeWidth 1.5. */
-export declare const ChipRemoveButtonIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "strokeWidth"> & {
-    /** @default 1.5 */
-    strokeWidth?: SVGIconProps["strokeWidth"];
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+type BuiltInIconProps = Omit<IconProps, 'children'> & StyleProps & {
+    /** Omit for the supplied default icon; pass a child icon only to replace it. */
+    children?: ReactElement<SVGIconProps>;
+};
+/** Built-in decorative open-button icon. Place inside AddonOpenButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
+export declare const AddonOpenButtonIcon: import("react").ForwardRefExoticComponent<Omit<BuiltInIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Built-in decorative clear icon. Place inside AddonClearButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
+export declare const AddonClearButtonIcon: import("react").ForwardRefExoticComponent<Omit<BuiltInIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Built-in decorative removal icon. Place inside ChipRemoveButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
+export declare const ChipRemoveButtonIcon: import("react").ForwardRefExoticComponent<Omit<BuiltInIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Optional spinner inside Addon. Does not detect requests: you decide when to render it. Defaults to strokeWidth 1.5. */
-export declare const AddonLoadingIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "strokeWidth"> & {
-    /** @default 1.5 */
-    strokeWidth?: SVGIconProps["strokeWidth"];
-} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const AddonLoadingIcon: import("react").ForwardRefExoticComponent<Omit<BuiltInIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Required selection indicator inside Item. Visibility is automatic and a checkmark is supplied: no children or selection condition needed. Pass children only to replace the built-in checkmark. */
 export declare const ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "children"> & Pick<import("@base-ui/react").ComboboxItemIndicatorProps, "keepMounted"> & {
     /** Optional replacement SVG icon. It receives this indicator's props and ref. */

package/dist/components/combobox/index.js

@@ -362,15 +362,15 @@ const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, clas
     const attributes = usePartAttributes();
     return _jsx("div", { "aria-atomic": "true", ...attributes, ...props, id: describedById, ref: ref, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
-/** Built-in decorative open-button icon. Place inside AddonOpenButton; no children needed. Defaults to strokeWidth 1.5. */
+/** Built-in decorative open-button icon. Place inside AddonOpenButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
 export const AddonOpenButtonIcon = /* @__PURE__ */ forwardRef(function AddonOpenButtonIcon(props, ref) {
     return _jsx(BuiltInIcon, { ...props, ref: ref, icon: ChevronsUpDown, component: "combobox-addonopenbuttonicon" });
 });
-/** Built-in decorative clear icon. Place inside AddonClearButton; no children needed. Defaults to strokeWidth 1.5. */
+/** Built-in decorative clear icon. Place inside AddonClearButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
 export const AddonClearButtonIcon = /* @__PURE__ */ forwardRef(function AddonClearButtonIcon(props, ref) {
     return _jsx(BuiltInIcon, { ...props, ref: ref, icon: X, component: "combobox-addonclearbuttonicon" });
 });
-/** Built-in decorative removal icon. Place inside ChipRemoveButton; no children needed. Defaults to strokeWidth 1.5. */
+/** Built-in decorative removal icon. Place inside ChipRemoveButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
 export const ChipRemoveButtonIcon = /* @__PURE__ */ forwardRef(function ChipRemoveButtonIcon(props, ref) {
     return _jsx(BuiltInIcon, { ...props, ref: ref, icon: X, component: "combobox-chipremovebuttonicon" });
 });
@@ -379,9 +379,18 @@ export const AddonLoadingIcon = /* @__PURE__ */ forwardRef(function AddonLoading
     return _jsx(BuiltInIcon, { ...props, ref: ref, icon: LoaderCircle, component: "combobox-addonloadingicon" });
 });
 // The shared body of the built-in decorative icons above, which only differ by their icon and component name
-const BuiltInIcon = /* @__PURE__ */ forwardRef(function BuiltInIcon({ disableStyle, className, strokeWidth = 1.5, icon: Icon, component, ...props }, ref) {
+const BuiltInIcon = /* @__PURE__ */ forwardRef(function BuiltInIcon({ disableStyle, className, strokeWidth, icon: Icon, component, children, ...props }, ref) {
     const attributes = usePartAttributes();
-    return _jsx(Icon, { ...attributes, "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
+    return cloneElement(children ?? _jsx(Icon, {}), {
+        ...attributes,
+        'aria-hidden': true,
+        ...props,
+        ref,
+        strokeWidth: strokeWidth ?? children?.props.strokeWidth ?? 1.5,
+        'data-component': component,
+        'data-style-disabled': disableStyle ? '' : undefined,
+        className: twMerge(children?.props.className, className),
+    });
 });
 /** Required selection indicator inside Item. Visibility is automatic and a checkmark is supplied: no children or selection condition needed. Pass children only to replace the built-in checkmark. */
 export const ItemIndicator = /* @__PURE__ */ forwardRef(function ItemIndicator({ disableStyle, children, keepMounted, ...props }, ref) {

package/dist/components/empty/index.d.ts

@@ -28,7 +28,8 @@ import type { ComponentProps, HTMLAttributes, ImgHTMLAttributes, ReactElement }
  */
 export declare function Surface({ disableStyle, className, ...props }: HTMLAttributes<HTMLDivElement> & StyleProps): import("react").JSX.Element;
 export declare function Body({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
-export declare function Title({ disableStyle, className, ...props }: HTMLAttributes<HTMLParagraphElement> & StyleProps): import("react").JSX.Element;
+/** Renders an h2, so screen-reader users find it when jumping between headings, whether the panel fills a page or one section of it. */
+export declare function Title({ disableStyle, className, ...props }: HTMLAttributes<HTMLHeadingElement> & StyleProps): import("react").JSX.Element;
 export declare function Description({ disableStyle, className, ...props }: HTMLAttributes<HTMLParagraphElement> & StyleProps): import("react").JSX.Element;
 export declare function Image({ disableStyle, className, ...props }: ImgHTMLAttributes<HTMLImageElement> & StyleProps): import("react").JSX.Element;
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */

package/dist/components/empty/index.js

@@ -33,8 +33,9 @@ export function Surface({ disableStyle, className, ...props }) {
 export function Body({ disableStyle, className, ...props }) {
     return (_jsx("div", { ...props, "data-component": "empty-body", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
+/** Renders an h2, so screen-reader users find it when jumping between headings, whether the panel fills a page or one section of it. */
 export function Title({ disableStyle, className, ...props }) {
-    return (_jsx("p", { "data-component": "empty-title", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
+    return (_jsx("h2", { "data-component": "empty-title", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
 }
 export function Description({ disableStyle, className, ...props }) {
     return (_jsx("p", { "data-component": "empty-description", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));

package/dist/components/exception/index.d.ts

@@ -0,0 +1,86 @@
+import type { StyleProps } from '../../types/Style.ts';
+import type { ComponentProps, HTMLAttributes, ImgHTMLAttributes, ReactElement, ReactNode } from 'react';
+type Tone = 'neutral' | 'critical';
+/**
+ * Explains why something can't be shown, like a page that doesn't exist or a section the user isn't allowed to see. It isn't an error, just a normal state of the app.
+ * Root holds the tone and renders nothing itself; Surface and Body render the panel. You decide when it appears. It's a section: put it where the missing content would have been, and it fills that container's height.
+ * Image/Icon, ActionsList and HelpText are optional. ActionsList takes your own buttons, since the actions belong to your app.
+ *
+ * @example A page the user can't access
+ * import { Button, Exception, TextLink } from '@central-ui/react'
+ * import { Link } from '@tanstack/react-router'
+ * import { Lock } from 'lucide-react'
+ *
+ * function Example() {
+ *   return (
+ *     // Inside the body of some page. That page's header shows no title or back button,
+ *     // since they would describe something the user can't see.
+ *     <Exception.Root>
+ *       <Exception.Surface>
+ *         <Exception.Body>
+ *           <Exception.Icon>
+ *             <Lock aria-hidden="true" />
+ *           </Exception.Icon>
+ *           <Exception.Title>You don't have access to this page</Exception.Title>
+ *           <Exception.Description>Ask a store owner to give your account the Orders permission.</Exception.Description>
+ *           <Exception.ActionsList>
+ *             <Button.default variant="primary">Go to dashboard</Button.default>
+ *           </Exception.ActionsList>
+ *           <Exception.HelpText>
+ *             Still stuck?{' '}
+ *             <TextLink.default>
+ *               <Link to="/support">Contact support</Link>
+ *             </TextLink.default>
+ *           </Exception.HelpText>
+ *         </Exception.Body>
+ *       </Exception.Surface>
+ *     </Exception.Root>
+ *   )
+ * }
+ *
+ * @example A page that doesn't exist
+ * // Also inside the body of some page with no title in its header; the code goes in the Title.
+ * ;<Exception.Root>
+ *   <Exception.Surface>
+ *     <Exception.Body>
+ *       <Exception.Title>404 · Page not found</Exception.Title>
+ *       <Exception.Description>The page may have moved, or the link is wrong.</Exception.Description>
+ *     </Exception.Body>
+ *   </Exception.Surface>
+ * </Exception.Root>
+ *
+ * @example A section that failed to load, inside a page that otherwise works
+ * // In place of that section only; the rest of the page stays.
+ * ;<Exception.Root tone="critical">
+ *   {
+ *     // Rest of components here
+ *   }
+ * </Exception.Root>
+ */
+export declare function Root({ tone, children, }: {
+    /**
+     * Neutral for expected situations, like no access or a missing page. Critical for failures, like a section that couldn't load; it turns the Title red.
+     * Every part carries it as data-tone.
+     * @default 'neutral'
+     */
+    tone?: Tone;
+    /** The Surface. */
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Centers the panel and fills its container's height. */
+export declare const Surface: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & StyleProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Body: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** Renders an h2, so screen-reader users find it when jumping between headings, whether the panel fills a page or one section of it. */
+export declare const Title: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & StyleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const Description: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & StyleProps & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare const Image: import("react").ForwardRefExoticComponent<ImgHTMLAttributes<HTMLImageElement> & StyleProps & import("react").RefAttributes<HTMLImageElement>>;
+/** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
+export declare const Icon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "children"> & {
+    /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
+    children: ReactElement<ComponentProps<"svg">>;
+} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Takes your own buttons, like a primary "Go to dashboard"; it creates no actions itself. */
+export declare const ActionsList: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & StyleProps & import("react").RefAttributes<HTMLDivElement>>;
+/** A small footnote below the actions, like "Still stuck? Contact support" with a link. */
+export declare const HelpText: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & StyleProps & import("react").RefAttributes<HTMLParagraphElement>>;
+export {};

package/dist/components/exception/index.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, createContext, forwardRef, useContext } from 'react';
+import { twMerge } from 'tailwind-merge';
+const ToneContext = /* @__PURE__ */ createContext(null);
+/**
+ * Explains why something can't be shown, like a page that doesn't exist or a section the user isn't allowed to see. It isn't an error, just a normal state of the app.
+ * Root holds the tone and renders nothing itself; Surface and Body render the panel. You decide when it appears. It's a section: put it where the missing content would have been, and it fills that container's height.
+ * Image/Icon, ActionsList and HelpText are optional. ActionsList takes your own buttons, since the actions belong to your app.
+ *
+ * @example A page the user can't access
+ * import { Button, Exception, TextLink } from '@central-ui/react'
+ * import { Link } from '@tanstack/react-router'
+ * import { Lock } from 'lucide-react'
+ *
+ * function Example() {
+ *   return (
+ *     // Inside the body of some page. That page's header shows no title or back button,
+ *     // since they would describe something the user can't see.
+ *     <Exception.Root>
+ *       <Exception.Surface>
+ *         <Exception.Body>
+ *           <Exception.Icon>
+ *             <Lock aria-hidden="true" />
+ *           </Exception.Icon>
+ *           <Exception.Title>You don't have access to this page</Exception.Title>
+ *           <Exception.Description>Ask a store owner to give your account the Orders permission.</Exception.Description>
+ *           <Exception.ActionsList>
+ *             <Button.default variant="primary">Go to dashboard</Button.default>
+ *           </Exception.ActionsList>
+ *           <Exception.HelpText>
+ *             Still stuck?{' '}
+ *             <TextLink.default>
+ *               <Link to="/support">Contact support</Link>
+ *             </TextLink.default>
+ *           </Exception.HelpText>
+ *         </Exception.Body>
+ *       </Exception.Surface>
+ *     </Exception.Root>
+ *   )
+ * }
+ *
+ * @example A page that doesn't exist
+ * // Also inside the body of some page with no title in its header; the code goes in the Title.
+ * ;<Exception.Root>
+ *   <Exception.Surface>
+ *     <Exception.Body>
+ *       <Exception.Title>404 · Page not found</Exception.Title>
+ *       <Exception.Description>The page may have moved, or the link is wrong.</Exception.Description>
+ *     </Exception.Body>
+ *   </Exception.Surface>
+ * </Exception.Root>
+ *
+ * @example A section that failed to load, inside a page that otherwise works
+ * // In place of that section only; the rest of the page stays.
+ * ;<Exception.Root tone="critical">
+ *   {
+ *     // Rest of components here
+ *   }
+ * </Exception.Root>
+ */
+export function Root({ tone = 'neutral', children, }) {
+    return _jsx(ToneContext.Provider, { value: tone, children: children });
+}
+/** Centers the panel and fills its container's height. */
+export const Surface = /* @__PURE__ */ forwardRef(function Surface({ disableStyle, className, ...props }, ref) {
+    const tone = useTone('Surface');
+    return (_jsx("div", { ...props, ref: ref, "data-component": "exception-surface", "data-style-disabled": disableStyle ? '' : undefined, "data-tone": tone, className: className }));
+});
+export const Body = /* @__PURE__ */ forwardRef(function Body({ disableStyle, className, ...props }, ref) {
+    const tone = useTone('Body');
+    return (_jsx("div", { ...props, ref: ref, "data-component": "exception-body", "data-style-disabled": disableStyle ? '' : undefined, "data-tone": tone, className: className }));
+});
+/** Renders an h2, so screen-reader users find it when jumping between headings, whether the panel fills a page or one section of it. */
+export const Title = /* @__PURE__ */ forwardRef(function Title({ disableStyle, className, ...props }, ref) {
+    const tone = useTone('Title');
+    return (_jsx("h2", { ...props, ref: ref, "data-component": "exception-title", "data-style-disabled": disableStyle ? '' : undefined, "data-tone": tone, className: className }));
+});
+export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, ...props }, ref) {
+    const tone = useTone('Description');
+    return (_jsx("p", { ...props, ref: ref, "data-component": "exception-description", "data-style-disabled": disableStyle ? '' : undefined, "data-tone": tone, className: className }));
+});
+export const Image = /* @__PURE__ */ forwardRef(function Image({ disableStyle, className, ...props }, ref) {
+    const tone = useTone('Image');
+    return (_jsx("img", { alt: "", ...props, ref: ref, "data-component": "exception-image", "data-style-disabled": disableStyle ? '' : undefined, "data-tone": tone, className: className }));
+});
+/** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
+export const Icon = /* @__PURE__ */ forwardRef(function Icon({ disableStyle, children, className, ...props }, ref) {
+    const tone = useTone('Icon');
+    return cloneElement(children, {
+        ...props,
+        ref,
+        ...{
+            'data-component': 'exception-icon',
+            'data-style-disabled': disableStyle ? '' : undefined,
+            'data-tone': tone,
+        },
+        className: twMerge(children.props.className, className),
+        strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 1.5,
+    });
+});
+/** Takes your own buttons, like a primary "Go to dashboard"; it creates no actions itself. */
+export const ActionsList = /* @__PURE__ */ forwardRef(function ActionsList({ disableStyle, className, ...props }, ref) {
+    const tone = useTone('ActionsList');
+    return (_jsx("div", { ...props, ref: ref, "data-component": "exception-actionslist", "data-style-disabled": disableStyle ? '' : undefined, "data-tone": tone, className: className }));
+});
+/** A small footnote below the actions, like "Still stuck? Contact support" with a link. */
+export const HelpText = /* @__PURE__ */ forwardRef(function HelpText({ disableStyle, className, ...props }, ref) {
+    const tone = useTone('HelpText');
+    return (_jsx("p", { ...props, ref: ref, "data-component": "exception-helptext", "data-style-disabled": disableStyle ? '' : undefined, "data-tone": tone, className: className }));
+});
+function useTone(part) {
+    const tone = useContext(ToneContext);
+    if (!tone)
+        throw new Error(`Exception.${part} must be placed inside Exception.Root.`);
+    return tone;
+}

package/dist/components/select/index.d.ts

@@ -186,8 +186,11 @@ type MessageProps = Omit<ComponentProps<'div'>, 'children'> & StyleProps & {
 export declare const Error: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /** Shows itself only while Root's validation is `'success'`: with no children it shows the message from `['success', message]`, a function children formats that message, and other children replace it. */
 export declare const Success: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** Built-in icon; no children needed. Use it inside its matching control. */
-export declare const OpenButtonIcon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/** Built-in icon. Use it inside its matching control. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
+export declare const OpenButtonIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "children"> & StyleProps & {
+    /** Omit for the supplied default icon; pass a child icon only to replace it. */
+    children?: ReactElement<SVGIconProps>;
+}, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 /** Tracks the surrounding item state automatically. Keep it mounted; do not add your own visibility condition. Use the supplied default visual unless customization is needed. */
 export declare const ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "children"> & Pick<import("@base-ui/react").SelectItemIndicatorProps, "keepMounted"> & {
     /** Optional replacement SVG icon. It receives this indicator's props and ref. */

package/dist/components/select/index.js

@@ -3,6 +3,7 @@ import { asChildRendering } from "../../utils/asChild.js";
 import { Select as BaseSelect } from '@base-ui/react/select';
 import { Check, ChevronDown, ChevronUp, ChevronsUpDown } from "../../utils/icons.js";
 import { cloneElement, createContext, forwardRef, useContext, useEffect, useId, useState, } from 'react';
+import { twMerge } from 'tailwind-merge';
 import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
  * Prepare groups in items. A flat-looking list is one group with an empty label and no GroupLabel; keep Group around ItemsList. OpenButtonValue already formats the selection: omit children unless a custom display is needed. Keep ScrollArea → GroupsList → Group → ItemsList → Item in Popup.
@@ -202,10 +203,19 @@ const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, clas
     const attributes = usePartAttributes();
     return _jsx("div", { "aria-atomic": "true", ...attributes, ...props, id: describedById, ref: ref, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
-/** Built-in icon; no children needed. Use it inside its matching control. */
-export const OpenButtonIcon = /* @__PURE__ */ forwardRef(function OpenButtonIcon({ disableStyle, className, strokeWidth = 1.5, ...props }, ref) {
+/** Built-in icon. Use it inside its matching control. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
+export const OpenButtonIcon = /* @__PURE__ */ forwardRef(function OpenButtonIcon({ disableStyle, className, strokeWidth, children, ...props }, ref) {
     const attributes = usePartAttributes();
-    return (_jsx(ChevronsUpDown, { ...attributes, "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": "select-openbuttonicon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return cloneElement(children ?? _jsx(ChevronsUpDown, {}), {
+        ...attributes,
+        'aria-hidden': true,
+        ...props,
+        ref,
+        strokeWidth: strokeWidth ?? children?.props.strokeWidth ?? 1.5,
+        'data-component': 'select-openbuttonicon',
+        'data-style-disabled': disableStyle ? '' : undefined,
+        className: twMerge(children?.props.className, className),
+    });
 });
 /** Tracks the surrounding item state automatically. Keep it mounted; do not add your own visibility condition. Use the supplied default visual unless customization is needed. */
 export const ItemIndicator = /* @__PURE__ */ forwardRef(function ItemIndicator({ disableStyle, children, keepMounted, ...props }, ref) {

package/dist/index.d.ts

@@ -30,8 +30,10 @@ export * as Badge from './components/badge/index.tsx';
 export * as Breadcrumb from './components/breadcrumb/index.tsx';
 export * as Button from './components/button/index.tsx';
 export * as Card from './components/card/index.tsx';
+export * as Carousel from './components/carousel/index.tsx';
 export * as Divider from './components/divider/index.tsx';
 export * as Empty from './components/empty/index.tsx';
+export * as Exception from './components/exception/index.tsx';
 export * as Form from './components/form/index.tsx';
 export * as Metric from './components/metric/index.tsx';
 export * as Page from './components/page/index.tsx';

package/dist/index.js

@@ -30,8 +30,10 @@ export * as Badge from "./components/badge/index.js";
 export * as Breadcrumb from "./components/breadcrumb/index.js";
 export * as Button from "./components/button/index.js";
 export * as Card from "./components/card/index.js";
+export * as Carousel from "./components/carousel/index.js";
 export * as Divider from "./components/divider/index.js";
 export * as Empty from "./components/empty/index.js";
+export * as Exception from "./components/exception/index.js";
 export * as Form from "./components/form/index.js";
 export * as Metric from "./components/metric/index.js";
 export * as Page from "./components/page/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@central-ui/react",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Accessible React components with optional Tailwind CSS style presets",
   "license": "MIT",
   "keywords": [
@@ -57,6 +57,8 @@
     "@internationalized/date": "^3.12.4",
     "@radix-ui/react-password-toggle-field": "^0.2.1",
     "@tanstack/react-virtual": "^3.14.20",
+    "embla-carousel-autoplay": "8.6.0",
+    "embla-carousel-react": "8.6.0",
     "react-aria": "^3.53.1",
     "react-aria-components": "^1.22.1",
     "react-joyride": "^3.2.0",

package/src/presets/shopify-polaris/shopify-polaris-carousel.css

@@ -0,0 +1,62 @@
+/* carousel */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='carousel-slideslist']) {
+      @apply w-full rounded-xl;
+      &[data-orientation='vertical'] {
+        @apply h-72;
+      }
+    }
+
+    &:where([data-component='carousel-slide']) {
+      @apply basis-full;
+    }
+
+    &:where([data-component='carousel-previousbutton']),
+    &:where([data-component='carousel-nextbutton']) {
+      @apply flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-full p-0 outline-none focus-visible:outline-2 focus-visible:outline-blue-500 enabled:active:scale-97 transition-[background-color,transform] duration-400 ease-[cubic-bezier(0.2,0.8,0,1)] motion-reduce:transition-none disabled:pointer-events-none disabled:cursor-default;
+
+      &:not(:disabled) {
+        @apply bg-neutral-200 text-neutral-950 hover:bg-neutral-300 focus-visible:bg-neutral-300 active:bg-neutral-300;
+      }
+      &:disabled {
+        @apply bg-black/3 text-neutral-400;
+      }
+    }
+
+    &:where([data-component='carousel-previousbuttonicon']),
+    &:where([data-component='carousel-nextbuttonicon']) {
+      @apply h-4 w-fit shrink-0;
+      &[data-orientation='vertical'] {
+        @apply rotate-90;
+      }
+    }
+
+    &:where([data-component='carousel-indicatorlist']) {
+      @apply flex items-center justify-center gap-1.5;
+      &[data-orientation='vertical'] {
+        @apply flex-col;
+      }
+    }
+
+    &:where([data-component='carousel-indicatorbutton']) {
+      @apply flex shrink-0 cursor-pointer items-center justify-center p-0 outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 transition-[width,height,background-color,opacity] duration-300 motion-reduce:transition-none disabled:pointer-events-none disabled:opacity-50;
+
+      /* A dot when empty, stretching into a pill while selected */
+      &:empty {
+        @apply size-2 rounded-full bg-neutral-300 hover:bg-neutral-400 data-selected:bg-neutral-950;
+        &[data-selected][data-orientation='horizontal'] {
+          @apply w-5;
+        }
+        &[data-selected][data-orientation='vertical'] {
+          @apply h-5;
+        }
+      }
+
+      /* Custom content, like a thumbnail, faded until selected */
+      &:not(:empty) {
+        @apply overflow-hidden rounded-lg opacity-50 hover:opacity-80 data-selected:opacity-100;
+      }
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris-exception.css

@@ -0,0 +1,40 @@
+/* exception */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='exception-surface']) {
+      @apply flex h-full w-full flex-1 flex-col items-center justify-center p-4;
+    }
+
+    &:where([data-component='exception-body']) {
+      @apply flex h-fit w-full max-w-150 flex-col items-center justify-center gap-1;
+    }
+
+    &:where([data-component='exception-title']) {
+      @apply text-sm font-semibold text-center text-neutral-950;
+    }
+
+    &:where([data-component='exception-title'][data-tone='critical']) {
+      @apply text-red-700;
+    }
+
+    &:where([data-component='exception-description']) {
+      @apply text-sm font-normal text-center text-neutral-600;
+    }
+
+    &:where([data-component='exception-image']) {
+      @apply mb-4 h-16 w-fit;
+    }
+
+    &:where([data-component='exception-icon']) {
+      @apply mb-2 h-8 w-fit text-neutral-950;
+    }
+
+    &:where([data-component='exception-actionslist']) {
+      @apply mt-3 flex w-fit items-center gap-4;
+    }
+
+    &:where([data-component='exception-helptext']) {
+      @apply mt-3 text-xs text-center text-neutral-500;
+    }
+  }
+}

package/src/presets/shopify-polaris/shopify-polaris.css

@@ -29,10 +29,12 @@
 @import './shopify-polaris-chip.css';
 @import './shopify-polaris-textlink.css';
 @import './shopify-polaris-empty.css';
+@import './shopify-polaris-exception.css';
 @import './shopify-polaris-spinner.css';
 @import './shopify-polaris-popover.css';
 @import './shopify-polaris-table.css';
 @import './shopify-polaris-card.css';
+@import './shopify-polaris-carousel.css';
 @import './shopify-polaris-skeleton.css';
 @import './shopify-polaris-avatar.css';
 @import './shopify-polaris-metric.css';

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-carousel.css

@@ -0,0 +1,55 @@
+/* carousel */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='carousel-slideslist']) {
+      @apply w-full rounded-lg;
+      &[data-orientation='vertical'] {
+        @apply h-72;
+      }
+    }
+
+    &:where([data-component='carousel-slide']) {
+      @apply basis-full;
+    }
+
+    &:where([data-component='carousel-previousbutton']),
+    &:where([data-component='carousel-nextbutton']) {
+      @apply flex size-7.5 shrink-0 cursor-pointer items-center justify-center rounded-lg p-0 bg-white text-neutral-700 outline-none focus-visible:outline-2 focus-visible:outline-blue-500 shadow-[0_-1px_0_0_#b5b5b5_inset,0_0_0_1px_rgba(0,0,0,0.1)_inset,0_0.5px_0_1.5px_#fff_inset] hover:bg-neutral-50 active:pt-[0.1rem] active:shadow-[0px_2px_1px_0px_rgba(0,0,0,0.19)_inset,0px_0px_0px_50px_rgba(0,0,0,0.025)_inset,0px_-1px_1px_0px_rgba(0,0,0,0.1)_inset] disabled:pointer-events-none disabled:opacity-50;
+    }
+
+    &:where([data-component='carousel-previousbuttonicon']),
+    &:where([data-component='carousel-nextbuttonicon']) {
+      @apply h-4 w-fit shrink-0;
+      &[data-orientation='vertical'] {
+        @apply rotate-90;
+      }
+    }
+
+    &:where([data-component='carousel-indicatorlist']) {
+      @apply flex items-center justify-center gap-1.5;
+      &[data-orientation='vertical'] {
+        @apply flex-col;
+      }
+    }
+
+    &:where([data-component='carousel-indicatorbutton']) {
+      @apply flex shrink-0 cursor-pointer items-center justify-center p-0 outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 transition-[width,height,background-color,opacity] duration-300 motion-reduce:transition-none disabled:pointer-events-none disabled:opacity-50;
+
+      /* A dot when empty, stretching into a pill while selected */
+      &:empty {
+        @apply size-2 rounded-full bg-neutral-300 hover:bg-neutral-400 data-selected:bg-neutral-800;
+        &[data-selected][data-orientation='horizontal'] {
+          @apply w-5;
+        }
+        &[data-selected][data-orientation='vertical'] {
+          @apply h-5;
+        }
+      }
+
+      /* Custom content, like a thumbnail, faded until selected */
+      &:not(:empty) {
+        @apply overflow-hidden rounded-md opacity-50 hover:opacity-80 data-selected:opacity-100;
+      }
+    }
+  }
+}

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-exception.css

@@ -0,0 +1,40 @@
+/* exception */
+@layer components {
+  :where(:not([data-style-disabled])) {
+    &:where([data-component='exception-surface']) {
+      @apply flex h-full w-full flex-1 flex-col items-center justify-center p-4;
+    }
+
+    &:where([data-component='exception-body']) {
+      @apply flex h-fit w-full max-w-150 flex-col items-center justify-center gap-1;
+    }
+
+    &:where([data-component='exception-title']) {
+      @apply text-base font-semibold text-neutral-900;
+    }
+
+    &:where([data-component='exception-title'][data-tone='critical']) {
+      @apply text-red-700;
+    }
+
+    &:where([data-component='exception-description']) {
+      @apply text-sm font-medium text-neutral-600;
+    }
+
+    &:where([data-component='exception-image']) {
+      @apply mb-4 h-16 w-fit;
+    }
+
+    &:where([data-component='exception-icon']) {
+      @apply mb-2 h-8 w-fit text-neutral-900;
+    }
+
+    &:where([data-component='exception-actionslist']) {
+      @apply mt-3 flex w-fit items-center gap-4;
+    }
+
+    &:where([data-component='exception-helptext']) {
+      @apply mt-3 text-xs text-center text-neutral-500;
+    }
+  }
+}

package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy.css

@@ -6,6 +6,7 @@
 @import './shopify-polaris-legacy-breadcrumb.css';
 @import './shopify-polaris-legacy-button.css';
 @import './shopify-polaris-legacy-card.css';
+@import './shopify-polaris-legacy-carousel.css';
 @import './shopify-polaris-legacy-checkbox.css';
 @import './shopify-polaris-legacy-combobox.css';
 @import './shopify-polaris-legacy-datepicker.css';
@@ -13,6 +14,7 @@
 @import './shopify-polaris-legacy-divider.css';
 @import './shopify-polaris-legacy-drawer.css';
 @import './shopify-polaris-legacy-empty.css';
+@import './shopify-polaris-legacy-exception.css';
 @import './shopify-polaris-legacy-fileupload.css';
 @import './shopify-polaris-legacy-form.css';
 @import './shopify-polaris-legacy-input.css';

package/dist/types/Tone.d.ts

@@ -1,3 +0,0 @@
-export type ToneProps = {
-    tone?: 'neutral' | 'valid' | 'invalid';
-};

package/dist/types/Tone.js

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

package/dist/utils/Tone.d.ts

@@ -1,2 +0,0 @@
-export declare const ToneProvider: import("react").Provider<"neutral" | "valid" | "invalid" | undefined>;
-export declare function useToneContext(): "neutral" | "valid" | "invalid" | undefined;

package/dist/utils/Tone.js

@@ -1,6 +0,0 @@
-import { createContext, useContext } from 'react';
-const ToneContext = /* @__PURE__ */ createContext('neutral');
-export const ToneProvider = ToneContext.Provider;
-export function useToneContext() {
-    return useContext(ToneContext);
-}