@central-ui/react 0.1.2 → 0.3.0

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/checkbox/index.d.ts

@@ -1,11 +1,11 @@
 import type { StyleProps } from '../../types/Style.ts';
 import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
-import type { ReactNode } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
+import type { ValidationProps } from '../../types/Validation.ts';
+import type { ValidationMessageChildren } from '../../utils/Validation.ts';
 type CoreKeys = 'checked' | 'defaultChecked' | 'onCheckedChange' | 'indeterminate' | 'disabled' | 'readOnly' | 'required' | 'name' | 'form' | 'value' | 'uncheckedValue' | 'id' | 'inputRef' | 'parent';
-export type RootProps = Pick<BaseCheckbox.Root.Props, CoreKeys> & {
+export type RootProps = Pick<BaseCheckbox.Root.Props, CoreKeys> & ValidationProps & {
     children: ReactNode;
-    /** Choose the visual tone. This does not validate data or show/hide feedback messages. */
-    tone?: 'neutral' | 'valid' | 'invalid';
 };
 /**
  * Keep Button and Indicator inside the same Root as Label. Indicator tracks checked and indeterminate state automatically; no conditional checkmark needed. Use CheckboxGroup only when coordinating several checkbox roots.
@@ -42,7 +42,7 @@ export type RootProps = Pick<BaseCheckbox.Root.Props, CoreKeys> & {
  *   )
  * }
  */
-export declare function Root({ children, id, tone, ...coreProps }: RootProps): import("react").JSX.Element;
+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"> & {
     className?: string;
@@ -52,15 +52,17 @@ export declare const Button: import("react").ForwardRefExoticComponent<Omit<Omit
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
 /** 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, "children" | "className" | "render"> & {
+export declare const Indicator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CheckboxIndicatorProps, "className" | "children" | "render"> & {
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 /** 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>>;
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export declare const Error: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export declare const Success: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+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>>;
+/** 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 {};
-//# sourceMappingURL=index.d.ts.map

package/dist/components/checkbox/index.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
 import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';
 import { createContext, forwardRef, useContext, useEffect, useId, useState, } from 'react';
-import { Check, Minus } from 'lucide-react';
-import { ToneProvider, useToneContext } from "../../utils/Tone.js";
+import { Check, Minus } from "../../utils/icons.js";
+import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
  * Keep Button and Indicator inside the same Root as Label. Indicator tracks checked and indeterminate state automatically; no conditional checkmark needed. Use CheckboxGroup only when coordinating several checkbox roots.
  *
@@ -39,9 +39,10 @@ import { ToneProvider, useToneContext } from "../../utils/Tone.js";
  *   )
  * }
  */
-export function Root({ children, id, tone = 'neutral', ...coreProps }) {
-    const generatedId = useId();
+export function Root({ children, id, validation, ...coreProps }) {
+    //1. Holding the ids of Description, Error and Success, so Button announces them to screen readers through aria-describedby
     const [messageIds, setMessageIds] = useState([]);
+    //2. Mirroring Base UI's live state, so parts outside Button (Label, Description…) can carry its data attributes
     const [state, setState] = useState({
         checked: coreProps.checked ?? coreProps.defaultChecked ?? false,
         indeterminate: coreProps.indeterminate ?? false,
@@ -49,13 +50,16 @@ export function Root({ children, id, tone = 'neutral', ...coreProps }) {
         readOnly: coreProps.readOnly ?? false,
         required: coreProps.required ?? false,
     });
+    //3. Sharing everything with the parts
+    const generatedId = useId();
     return (_jsx(CheckboxContext.Provider, { value: {
             coreProps: { ...coreProps, id: id ?? generatedId },
             state,
             setState,
             messageIds,
             setMessageIds,
-        }, children: _jsx(ToneProvider, { value: tone, children: children }) }));
+            validation: readValidation(validation),
+        }, children: children }));
 }
 /** 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 const CheckboxGroup = /* @__PURE__ */ forwardRef(function CheckboxGroup({ disableStyle, className, ...props }, ref) {
@@ -66,14 +70,19 @@ export const Container = /* @__PURE__ */ forwardRef(function Container({ disable
 });
 export const Button = /* @__PURE__ */ forwardRef(function Button({ disableStyle, className, ...props }, ref) {
     const context = useCheckboxContext();
-    const tone = useToneContext();
-    return (_jsx(BaseCheckbox.Root, { ...props, ...context.coreProps, ref: ref, "data-tone": tone, "aria-invalid": tone === 'invalid' || props['aria-invalid'] || undefined, "aria-describedby": [props['aria-describedby'], ...context.messageIds]
+    return (_jsx(BaseCheckbox.Root, { ...props, ...context.coreProps, ref: ref, ...validationAttributes(context.validation), "aria-invalid": context.validation.state === 'error' || props['aria-invalid'] || undefined, "aria-describedby": [props['aria-describedby'], ...context.messageIds]
             .filter(Boolean)
             .join(' ') || undefined, "data-component": "checkbox-button", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (buttonProps, state) => (_jsx(CheckboxButtonSurface, { ...buttonProps, state: state })) }));
 });
 /** 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 Indicator = /* @__PURE__ */ forwardRef(function Indicator({ disableStyle, className, ...props }, ref) {
-    return (_jsx(BaseCheckbox.Indicator, { ...props, ref: ref, "data-component": "checkbox-indicator", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (indicatorProps, state) => (_jsx("span", { ...indicatorProps, children: state.indeterminate ? (_jsx(Minus, { "aria-hidden": true, strokeWidth: 3.5, "data-component": "checkbox-indicator-1" })) : state.checked ? (_jsx(Check, { "aria-hidden": true, strokeWidth: 3.5, "data-component": "checkbox-indicator-2" })) : null })) }));
+    return (_jsx(BaseCheckbox.Indicator, { ...props, ref: ref, "data-component": "checkbox-indicator", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (indicatorProps, state) => (_jsx("span", { ...indicatorProps, children: (() => {
+                if (state.indeterminate)
+                    return _jsx(Minus, { "aria-hidden": true, strokeWidth: 3.5, "data-component": "checkbox-indicator-1" });
+                if (state.checked)
+                    return _jsx(Check, { "aria-hidden": true, strokeWidth: 3.5, "data-component": "checkbox-indicator-2" });
+                return null;
+            })() })) }));
 });
 /** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
 export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, ...props }, ref) {
@@ -84,15 +93,26 @@ export const Description = /* @__PURE__ */ forwardRef(function Description({ dis
     const messageId = useMessageId(id);
     return (_jsx("span", { ...usePartAttributes(), ...props, ref: ref, id: messageId, "data-component": "checkbox-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export const Error = /* @__PURE__ */ forwardRef(function Error({ disableStyle, className, id, ...props }, ref) {
-    const messageId = useMessageId(id);
-    return (_jsx("span", { role: "alert", "aria-atomic": "true", ...usePartAttributes(), ...props, ref: ref, id: messageId, "data-component": "checkbox-error", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+/** 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 const Error = /* @__PURE__ */ forwardRef(function Error({ children, ...props }, ref) {
+    const context = useCheckboxContext();
+    const content = validationMessageContent(context.validation, 'error', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, ref: ref, role: "alert", component: "checkbox-error", children: content });
 });
-/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
-export const Success = /* @__PURE__ */ forwardRef(function Success({ disableStyle, className, id, ...props }, ref) {
+/** 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 const Success = /* @__PURE__ */ forwardRef(function Success({ children, ...props }, ref) {
+    const context = useCheckboxContext();
+    const content = validationMessageContent(context.validation, 'success', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, ref: ref, role: "status", component: "checkbox-success", children: content });
+});
+// The shared body of Error and Success, mounted only while they show, so only visible messages describe the checkbox
+const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, className, id, component, ...props }, ref) {
     const messageId = useMessageId(id);
-    return (_jsx("span", { role: "status", "aria-atomic": "true", ...usePartAttributes(), ...props, ref: ref, id: messageId, "data-component": "checkbox-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("span", { "aria-atomic": "true", ...usePartAttributes(), ...props, ref: ref, id: messageId, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
 const CheckboxContext = /* @__PURE__ */ createContext(null);
 function useCheckboxContext() {
@@ -102,21 +122,21 @@ function useCheckboxContext() {
     return context;
 }
 function usePartAttributes() {
-    const { state } = useCheckboxContext();
-    const tone = useToneContext();
+    const context = useCheckboxContext();
     return {
-        'data-checked': state.checked ? '' : undefined,
-        'data-indeterminate': state.indeterminate ? '' : undefined,
-        'data-disabled': state.disabled ? '' : undefined,
-        'data-readonly': state.readOnly ? '' : undefined,
-        'data-required': state.required ? '' : undefined,
-        'data-tone': tone,
+        'data-checked': context.state.checked ? '' : undefined,
+        'data-indeterminate': context.state.indeterminate ? '' : undefined,
+        'data-disabled': context.state.disabled ? '' : undefined,
+        'data-readonly': context.state.readOnly ? '' : undefined,
+        'data-required': context.state.required ? '' : undefined,
+        ...validationAttributes(context.validation),
     };
 }
+// Rendered by Base UI as the checkbox element, it reports Base UI's live state back to Root's mirror
 const CheckboxButtonSurface = /* @__PURE__ */ forwardRef(function CheckboxButtonSurface({ state, ...props }, ref) {
-    const { setState } = useCheckboxContext();
+    const context = useCheckboxContext();
     useEffect(() => {
-        setState({
+        context.setState({
             checked: state.checked,
             indeterminate: state.indeterminate,
             disabled: state.disabled,
@@ -129,18 +149,18 @@ const CheckboxButtonSurface = /* @__PURE__ */ forwardRef(function CheckboxButton
         state.disabled,
         state.readOnly,
         state.required,
-        setState,
+        context.setState,
     ]);
     return _jsx("span", { ...props, ref: ref });
 });
+// Registering a message part's id in Button's aria-describedby while the part is mounted
 function useMessageId(id) {
     const generatedId = useId();
     const messageId = id ?? generatedId;
-    const { setMessageIds } = useCheckboxContext();
+    const context = useCheckboxContext();
     useEffect(() => {
-        setMessageIds((current) => [...current, messageId]);
-        return () => setMessageIds((current) => current.filter((value) => value !== messageId));
-    }, [messageId, setMessageIds]);
+        context.setMessageIds((current) => [...current, messageId]);
+        return () => context.setMessageIds((current) => current.filter((value) => value !== messageId));
+    }, [messageId, context.setMessageIds]);
     return messageId;
 }
-//# sourceMappingURL=index.js.map

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

@@ -17,10 +17,10 @@ import type { ComponentProps, ReactElement } from 'react';
  * }
  */
 export declare function Chip({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+/** Icon-only: put just a CloseButtonIcon inside, never text like "Remove". Name it for screen readers with aria-label instead, e.g. aria-label="Remove tag". */
 export declare function CloseButton({ disableStyle, type, className, ...props }: ComponentProps<'button'> & StyleProps): import("react").JSX.Element;
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export declare function CloseButtonIcon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
     /** Omit for the supplied default icon; pass a child only to replace it. */
     children?: ReactElement<ComponentProps<'svg'>>;
 }) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/chip/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { X } from 'lucide-react';
+import { X } from "../../utils/icons.js";
 import { cloneElement } from 'react';
 import { twMerge } from 'tailwind-merge';
 /**
@@ -21,13 +21,13 @@ import { twMerge } from 'tailwind-merge';
 export function Chip({ disableStyle, className, ...props }) {
     return (_jsx("div", { ...props, "data-component": "chip-chip", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
+/** Icon-only: put just a CloseButtonIcon inside, never text like "Remove". Name it for screen readers with aria-label instead, e.g. aria-label="Remove tag". */
 export function CloseButton({ disableStyle, type = 'button', className, ...props }) {
     return (_jsx("button", { ...props, type: type, "data-component": "chip-closebutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
 /** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
 export function CloseButtonIcon({ disableStyle, children = _jsx(X, {}), className, ...props }) {
     return cloneElement(children, {
-        ...children.props,
         ...props,
         ...{
             'data-component': 'chip-closebuttonicon',
@@ -37,4 +37,3 @@ export function CloseButtonIcon({ disableStyle, children = _jsx(X, {}), classNam
         strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 1.5,
     });
 }
-//# sourceMappingURL=index.js.map