@central-ui/react 0.2.0 → 0.4.0

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

@@ -1,5 +1,6 @@
 import type { StyleProps } from '../../types/Style.ts';
 import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
+import type { ComponentProps } from 'react';
 export type RootProps = Omit<BaseAvatar.Root.Props, 'render' | 'className'> & {
     /** Choose the shared size for the visible parts in this composition. */
     size?: 'big' | 'medium' | 'small';
@@ -33,15 +34,15 @@ export type RootProps = Omit<BaseAvatar.Root.Props, 'render' | 'className'> & {
  * </Avatar.List>
  */
 export declare function Root({ children, size, ...props }: RootProps): import("react").JSX.Element;
-export declare const List: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Image: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AvatarImageProps, "className"> & {
+export declare function List({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Image({ disableStyle, className, ref, ...props }: (Omit<BaseAvatar.Image.Props, 'className' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
-export declare const FallbackNameInitials: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AvatarFallbackProps, "className" | "children"> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function FallbackNameInitials({ disableStyle, color, children, className, style, ref, ...props }: (Omit<BaseAvatar.Fallback.Props, 'className' | 'children' | 'render'> & {
     className?: string;
     /** Choose the initials background. The name-to-initials conversion is automatic. */
     color: string;
     /** Pass the full name; initials are derived automatically. Do not shorten it yourself. */
     children: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-export declare const FallbackImage: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Pick<import("@base-ui/react").AvatarFallbackProps, "delay"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+}) & StyleProps): import("react").JSX.Element;
+export declare function FallbackImage({ disableStyle, className, delay, ref, ...props }: (ComponentProps<'img'> & Pick<BaseAvatar.Fallback.Props, 'delay'>) & StyleProps): import("react").JSX.Element;

package/dist/components/avatar/index.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
-import { createContext, forwardRef, useContext } from 'react';
+import { createContext, useContext } from 'react';
 /**
  * Root supplies sizing and image/fallback coordination. Image loading chooses the fallback automatically; do not implement your own image-error state. Choose initials or an image fallback.
  *
@@ -33,14 +33,14 @@ export function Root({ children, size = 'medium', ...props }) {
     // Native Root renders a span; the fragment preserves our wrapper-free Root contract.
     return (_jsx(SizeContext.Provider, { value: size, children: _jsx(BaseAvatar.Root, { ...props, render: (rootProps) => _jsx(_Fragment, { children: rootProps.children }), children: children }) }));
 }
-export const List = /* @__PURE__ */ forwardRef(function List({ disableStyle, className, ...props }, ref) {
+export function List({ disableStyle, className, ref, ...props }) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "avatar-list", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const Image = /* @__PURE__ */ forwardRef(function Image({ disableStyle, className, ...props }, ref) {
+}
+export function Image({ disableStyle, className, ref, ...props }) {
     const size = useContext(SizeContext);
     return (_jsx(BaseAvatar.Image, { ...props, ref: ref, "data-size": size, "data-component": "avatar-image", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
-export const FallbackNameInitials = /* @__PURE__ */ forwardRef(function FallbackNameInitials({ disableStyle, color, children, className, style, ...props }, ref) {
+}
+export function FallbackNameInitials({ disableStyle, color, children, className, style, ref, ...props }) {
     const size = useContext(SizeContext);
     return (_jsx(BaseAvatar.Fallback, { ...props, ref: ref, "data-size": size, role: "img", "aria-label": children, style: typeof style === 'function'
             ? (state) => ({ backgroundColor: color, ...style(state) })
@@ -51,10 +51,10 @@ export const FallbackNameInitials = /* @__PURE__ */ forwardRef(function Fallback
             .map((word) => word[0].toUpperCase())
             .join('')
             .slice(0, 2) }));
-});
-export const FallbackImage = /* @__PURE__ */ forwardRef(function FallbackImage({ disableStyle, className, delay, ...props }, ref) {
+}
+export function FallbackImage({ disableStyle, className, delay, ref, ...props }) {
     const size = useContext(SizeContext);
     return (_jsx(BaseAvatar.Fallback, { delay: delay, render: _jsx("img", { ...props, ref: ref }), "data-size": size, "data-component": "avatar-fallbackimage", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
-});
+}
 const SizeContext = 
 /* @__PURE__ */ createContext('medium');

package/dist/components/banner/index.js

@@ -104,7 +104,7 @@ export function CloseButtonIcon({ disableStyle, children = _jsx(X, {}), classNam
             'data-style-disabled': disableStyle ? '' : undefined,
         },
         className: twMerge(children.props.className, className),
-        strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 1.5,
+        strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 2,
     });
 }
 export function Body({ disableStyle, className, ...props }) {

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

@@ -0,0 +1,189 @@
+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;
+    /**
+     * How far a drag must move, in pixels, before it counts as a drag instead of a click on the slide's content.
+     * @default 10
+     */
+    dragThreshold?: number;
+    /**
+     * Whether a hard swipe may fly past several slides instead of stopping on the next one.
+     * @default false
+     */
+    skipSnaps?: boolean;
+    /**
+     * How long a move to another slide takes, from 20 (fast) to 60 (slow). Not in milliseconds.
+     * @default 25
+     */
+    duration?: number;
+    /**
+     * Removes the empty space at the start and end when slides are narrower than SlidesList. 'trimSnaps' also drops the positions landing in that space, 'keepSnaps' keeps them, false keeps the space. Ignored with loop.
+     * @default 'trimSnaps'
+     */
+    containScroll?: false | 'trimSnaps' | 'keepSnaps';
+    /**
+     * 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, dragThreshold, skipSnaps, duration, containScroll, 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 function SlidesList({ disableStyle, style, children, ref, ...props }: ComponentProps<'div'> & StyleProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * 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 function Slide({ disableStyle, style, ref, ...props }: ComponentProps<'div'> & StyleProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+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 function PreviousButton({ ref, ...props }: ButtonPartProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** 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 function NextButton({ ref, ...props }: ButtonPartProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * 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 function IndicatorList({ disableStyle, children, ref, ...props }: Omit<ComponentProps<'div'>, 'children'> & StyleProps & {
+    /** Called once per position with its index; return an IndicatorButton. */
+    children: (index: number) => ReactNode;
+}): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * 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 function IndicatorButton({ index, ref, ...props }: ButtonPartProps & {
+    /** The position this button moves to, from IndicatorList's children function. */
+    index: number;
+}): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+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 function PreviousButtonIcon({ ref, ...props }: BuiltInIconProps): import("react").JSX.Element;
+/** 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 function NextButtonIcon({ ref, ...props }: BuiltInIconProps): import("react").JSX.Element;
+export {};

package/dist/components/carousel/index.js

@@ -0,0 +1,303 @@
+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, 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, dragThreshold = 10, skipSnaps = false, duration = 25, containScroll = 'trimSnaps', 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,
+        dragThreshold,
+        skipSnaps,
+        duration,
+        containScroll,
+        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 function SlidesList({ disableStyle, style, children, ref, ...props }) {
+    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 ?? null, 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 function Slide({ disableStyle, style, ref, ...props }) {
+    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 function PreviousButton({ ref, ...props }) {
+    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 function NextButton({ ref, ...props }) {
+    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 function IndicatorList({ disableStyle, children, ref, ...props }) {
+    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 function IndicatorButton({ index, ref, ...props }) {
+    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 function PreviousButtonIcon({ ref, ...props }) {
+    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 function NextButtonIcon({ ref, ...props }) {
+    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
+function BuiltInIcon({ disableStyle, className, strokeWidth, icon: Icon, component, children, ref, ...props }) {
+    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/checkbox/index.d.ts

@@ -1,5 +1,6 @@
 import type { StyleProps } from '../../types/Style.ts';
 import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';
 import type { ComponentProps, ReactNode } from 'react';
 import type { ValidationProps } from '../../types/Validation.ts';
 import type { ValidationMessageChildren } from '../../utils/Validation.ts';
@@ -44,25 +45,25 @@ export type RootProps = Pick<BaseCheckbox.Root.Props, CoreKeys> & ValidationProp
  */
 export declare function Root({ children, id, validation, ...coreProps }: RootProps): import("react").JSX.Element;
 /** Optional: controls multiple checkboxes as a native array of checked values. Put individual Roots inside and give each child a value. For a select-all checkbox, use parent on its Root and provide allValues on this controlled group; Base UI derives checked and indeterminate automatically. */
-export declare const CheckboxGroup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CheckboxGroupProps, "className"> & {
+export declare function CheckboxGroup({ disableStyle, className, ref, ...props }: (Omit<BaseCheckboxGroup.Props, 'className'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Button: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CheckboxRootProps, "className" | "render" | "nativeButton" | CoreKeys> & {
+}) & StyleProps): import("react").JSX.Element;
+export declare function Container({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Button({ disableStyle, className, ref, ...props }: (Omit<BaseCheckbox.Root.Props, CoreKeys | 'className' | 'render' | 'nativeButton'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** 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 Indicator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CheckboxIndicatorProps, "className" | "children" | "render"> & {
+export declare function Indicator({ disableStyle, className, ref, ...props }: (Omit<BaseCheckbox.Indicator.Props, 'className' | 'children' | 'render'> & {
     className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+}) & StyleProps): import("react").JSX.Element;
 /** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
-export declare const Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "htmlFor"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-export declare const Description: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function Label({ disableStyle, className, ref, ...props }: Omit<ComponentProps<'label'>, 'htmlFor'> & StyleProps): import("react").JSX.Element;
+export declare function Description({ disableStyle, className, id, ref, ...props }: ComponentProps<'span'> & StyleProps): import("react").JSX.Element;
 type MessageProps = Omit<ComponentProps<'span'>, 'children'> & StyleProps & {
     children?: ValidationMessageChildren;
 };
 /** Shows itself only while Root's validation is `'error'`: with no children it shows the message from `['error', message]`, a function children formats that message, and other children replace it. */
-export declare const Error: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function Error({ children, ref, ...props }: MessageProps): import("react").JSX.Element | null;
 /** 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<HTMLSpanElement>>;
+export declare function Success({ children, ref, ...props }: MessageProps): import("react").JSX.Element | null;
 export {};