@central-ui/react 0.1.1 → 0.2.0

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

@@ -1,12 +1,11 @@
 import type { StyleProps } from '../../types/Style.ts';
 import type { UseStepsProps } from '@ark-ui/react/steps';
 import { Steps } from '@ark-ui/react/steps';
-import type { ReactElement } from 'react';
 export declare function useSteps(props: UseStepsProps): import("@ark-ui/react/steps").UseStepsReturn;
 export { useStepsContext } from '@ark-ui/react/steps';
 export { useStepsItemContext } from '@ark-ui/react/steps';
 /**
- * Root owns the active step. Keep each Item in List with its index, and match Content indices to those items. NextHandler/PreviousHandler supply navigation to your buttons. Indicator reflects progress automatically; CompletedContent is shown after the last step.
+ * Root owns the active step. Keep each Item in List with its index, and match Content indices to those items. NextButton/PreviousButton navigate between steps; pass asChild to give their behavior to your own buttons instead. Indicator reflects progress automatically; CompletedContent is shown after the last step.
  *
  * @example Complete composition
  * import { Button, Stepper } from '@central-ui/react'
@@ -35,16 +34,12 @@ export { useStepsItemContext } from '@ark-ui/react/steps';
  *           <Stepper.Content index={1}>Check everything.</Stepper.Content>
  *           <Stepper.CompletedContent>Done.</Stepper.CompletedContent>
  *           <div className="flex gap-2">
- *             <Stepper.PreviousHandler>
- *               <Button.default variant="secondary" size="small">
- *                 Previous
- *               </Button.default>
- *             </Stepper.PreviousHandler>
- *             <Stepper.NextHandler>
+ *             <Stepper.PreviousButton>Previous</Stepper.PreviousButton>
+ *             <Stepper.NextButton asChild>
  *               <Button.default variant="primary" size="small">
  *                 Next
  *               </Button.default>
- *             </Stepper.NextHandler>
+ *             </Stepper.NextButton>
  *           </div>
  *         </div>
  *       </div>
@@ -61,16 +56,10 @@ export { useStepsItemContext } from '@ark-ui/react/steps';
  * </Stepper.Root>
  */
 export declare function Root({ children, className, orientation, ...props }: Omit<Steps.RootProps, 'asChild'>): import("react").JSX.Element;
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export declare function NextHandler({ children, ...props }: Omit<Steps.NextTriggerProps, 'asChild' | 'children'> & {
-    /** Supply your own accessible control. It receives the behavior; its own className owns the appearance. */
-    children: ReactElement;
-}): import("react").JSX.Element;
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export declare function PreviousHandler({ children, ...props }: Omit<Steps.PrevTriggerProps, 'asChild' | 'children'> & {
-    /** Supply your own accessible control. It receives the behavior; its own className owns the appearance. */
-    children: ReactElement;
-}): import("react").JSX.Element;
+/** Moves to the next step. Pass asChild to give this behavior to your own button, like a "Continue" Button; it keeps the state data attributes but none of this part's styling. */
+export declare function NextButton({ asChild, disableStyle, ...props }: Steps.NextTriggerProps & StyleProps): import("react").JSX.Element;
+/** Moves to the previous step. Pass asChild to give this behavior to your own button, like a "Back" Button; it keeps the state data attributes but none of this part's styling. */
+export declare function PreviousButton({ asChild, disableStyle, ...props }: Steps.PrevTriggerProps & StyleProps): import("react").JSX.Element;
 export declare function List({ disableStyle, className, ...props }: Steps.ListProps & StyleProps): import("react").JSX.Element;
 export declare function Item({ disableStyle, className, ...props }: Steps.ItemProps & 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. */
@@ -79,4 +68,3 @@ export declare function Separator({ disableStyle, className, ...props }: Steps.S
 export declare function Content({ disableStyle, className, ...props }: Steps.ContentProps & StyleProps): import("react").JSX.Element;
 export declare function CompletedContent({ disableStyle, className, ...props }: Steps.CompletedContentProps & StyleProps): import("react").JSX.Element;
 export declare function OpenButton({ disableStyle, className, ...props }: Steps.TriggerProps & StyleProps): import("react").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/stepper/index.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { asChildStyleAttributes } from "../../utils/asChild.js";
 import { Steps, useSteps as useArkSteps } from '@ark-ui/react/steps';
-import { Check } from 'lucide-react';
+import { Check } from "../../utils/icons.js";
 // Creates a controlled steps state machine for RootProvider.
 export function useSteps(props) {
     return useArkSteps({ orientation: 'vertical', ...props });
@@ -10,7 +11,7 @@ export { useStepsContext } from '@ark-ui/react/steps';
 // Reads the state of the nearest Steps item.
 export { useStepsItemContext } from '@ark-ui/react/steps';
 /**
- * Root owns the active step. Keep each Item in List with its index, and match Content indices to those items. NextHandler/PreviousHandler supply navigation to your buttons. Indicator reflects progress automatically; CompletedContent is shown after the last step.
+ * Root owns the active step. Keep each Item in List with its index, and match Content indices to those items. NextButton/PreviousButton navigate between steps; pass asChild to give their behavior to your own buttons instead. Indicator reflects progress automatically; CompletedContent is shown after the last step.
  *
  * @example Complete composition
  * import { Button, Stepper } from '@central-ui/react'
@@ -39,16 +40,12 @@ export { useStepsItemContext } from '@ark-ui/react/steps';
  *           <Stepper.Content index={1}>Check everything.</Stepper.Content>
  *           <Stepper.CompletedContent>Done.</Stepper.CompletedContent>
  *           <div className="flex gap-2">
- *             <Stepper.PreviousHandler>
- *               <Button.default variant="secondary" size="small">
- *                 Previous
- *               </Button.default>
- *             </Stepper.PreviousHandler>
- *             <Stepper.NextHandler>
+ *             <Stepper.PreviousButton>Previous</Stepper.PreviousButton>
+ *             <Stepper.NextButton asChild>
  *               <Button.default variant="primary" size="small">
  *                 Next
  *               </Button.default>
- *             </Stepper.NextHandler>
+ *             </Stepper.NextButton>
  *           </div>
  *         </div>
  *       </div>
@@ -65,15 +62,18 @@ export { useStepsItemContext } from '@ark-ui/react/steps';
  * </Stepper.Root>
  */
 export function Root({ children, className, orientation = 'vertical', ...props }) {
+    // className is left out, since Root renders no element of its own to receive it
     return (_jsx(Steps.Root, { ...props, orientation: orientation, asChild: true, children: _jsx(_Fragment, { children: children }) }));
 }
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export function NextHandler({ children, ...props }) {
-    return (_jsx(Steps.NextTrigger, { ...props, asChild: true, children: children }));
+/** Moves to the next step. Pass asChild to give this behavior to your own button, like a "Continue" Button; it keeps the state data attributes but none of this part's styling. */
+export function NextButton({ asChild, disableStyle, ...props }) {
+    const styleAttributes = asChildStyleAttributes({ asChild, component: 'stepper-nextbutton', disableStyle });
+    return _jsx(Steps.NextTrigger, { ...props, asChild: asChild, ...styleAttributes });
 }
-/** Behavior only: give your child control this action. Style the child itself; this wrapper has no preset appearance or disableStyle prop. */
-export function PreviousHandler({ children, ...props }) {
-    return (_jsx(Steps.PrevTrigger, { ...props, asChild: true, children: children }));
+/** Moves to the previous step. Pass asChild to give this behavior to your own button, like a "Back" Button; it keeps the state data attributes but none of this part's styling. */
+export function PreviousButton({ asChild, disableStyle, ...props }) {
+    const styleAttributes = asChildStyleAttributes({ asChild, component: 'stepper-previousbutton', disableStyle });
+    return _jsx(Steps.PrevTrigger, { ...props, asChild: asChild, ...styleAttributes });
 }
 export function List({ disableStyle, className, ...props }) {
     return (_jsx(Steps.List, { "data-component": "stepper-list", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
@@ -97,4 +97,3 @@ export function CompletedContent({ disableStyle, className, ...props }) {
 export function OpenButton({ disableStyle, className, ...props }) {
     return (_jsx(Steps.Trigger, { "data-component": "stepper-openbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,11 +1,11 @@
 import type { StyleProps } from '../../types/Style.ts';
 import { Switch as BaseSwitch } from '@base-ui/react/switch';
-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' | 'disabled' | 'readOnly' | 'required' | 'name' | 'value' | 'uncheckedValue' | 'form' | 'id' | 'inputRef';
-export type RootProps = Pick<BaseSwitch.Root.Props, CoreKeys> & {
+export type RootProps = Pick<BaseSwitch.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, Indicator, and Label in the same Root. Indicator follows the checked state automatically; do not add a second boolean just for its position.
@@ -37,7 +37,7 @@ export type RootProps = Pick<BaseSwitch.Root.Props, CoreKeys> & {
  *   </Switch.Container>
  * </Switch.Root>
  */
-export declare function Root({ children, tone, checked, defaultChecked, onCheckedChange, id, ...props }: RootProps): import("react").JSX.Element;
+export declare function Root({ children, validation, checked, defaultChecked, onCheckedChange, id, ...props }: RootProps): import("react").JSX.Element;
 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").SwitchRootProps, "className" | "render" | "nativeButton" | CoreKeys> & {
     className?: string;
@@ -49,9 +49,11 @@ export declare const Indicator: import("react").ForwardRefExoticComponent<Omit<O
 /** 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<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** 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<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** 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<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type MessageProps = Omit<ComponentProps<'div'>, '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<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>>;
 export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/components/switch/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Switch as BaseSwitch } from '@base-ui/react/switch';
 import { createContext, forwardRef, useContext, useEffect, useId, useState, } from 'react';
-import { ToneProvider, useToneContext } from "../../utils/Tone.js";
+import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
 /**
  * Keep Button, Indicator, and Label in the same Root. Indicator follows the checked state automatically; do not add a second boolean just for its position.
  *
@@ -32,70 +32,86 @@ import { ToneProvider, useToneContext } from "../../utils/Tone.js";
  *   </Switch.Container>
  * </Switch.Root>
  */
-export function Root({ children, tone = 'neutral', checked, defaultChecked = false, onCheckedChange, id, ...props }) {
-    const generatedId = useId();
-    const [messageIds, setMessageIds] = useState([]);
+export function Root({ children, validation, checked, defaultChecked = false, onCheckedChange, id, ...props }) {
+    //1. Holding the checked state when nothing controls it from outside
     const [checkedInternalState, setCheckedInternalState] = useState(defaultChecked);
+    //2. Holding the ids of Description, Error and Success, so Button announces them to screen readers through aria-describedby
+    const [messageIds, setMessageIds] = useState([]);
+    //3. Sharing Base UI's props with Button, apart from what only the parts need
+    const generatedId = useId();
     return (_jsx(SwitchContext.Provider, { value: {
+            coreProps: {
+                ...props,
+                id: id ?? generatedId,
+                checked: checked ?? checkedInternalState,
+                onCheckedChange: (next, details) => {
+                    onCheckedChange?.(next, details);
+                    if (!details.isCanceled)
+                        setCheckedInternalState(next);
+                },
+            },
             messageIds,
             setMessageIds,
-            ...props,
-            id: id ?? generatedId,
-            checked: checked ?? checkedInternalState,
-            onCheckedChange: (next, details) => {
-                onCheckedChange?.(next, details);
-                if (!details.isCanceled)
-                    setCheckedInternalState(next);
-            },
-        }, children: _jsx(ToneProvider, { value: tone, children: children }) }));
+            validation: readValidation(validation),
+        }, children: children }));
 }
-export const Container = forwardRef(function Container({ disableStyle, className, ...props }, ref) {
+export const Container = /* @__PURE__ */ forwardRef(function Container({ disableStyle, className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, "data-component": "switch-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Button = forwardRef(function Button({ disableStyle, className, ...props }, ref) {
-    const { messageIds, setMessageIds, ...context } = useSwitchContext();
-    const tone = useToneContext();
-    return (_jsx(BaseSwitch.Root, { ...props, ...context, "aria-invalid": tone === 'invalid' || props['aria-invalid'] || undefined, "aria-describedby": [props['aria-describedby'], ...messageIds].filter(Boolean).join(' ') ||
-            undefined, ref: ref, "data-tone": tone, "data-component": "switch-button", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+export const Button = /* @__PURE__ */ forwardRef(function Button({ disableStyle, className, ...props }, ref) {
+    const context = useSwitchContext();
+    return (_jsx(BaseSwitch.Root, { ...props, ...context.coreProps, "aria-invalid": context.validation.state === 'error' || props['aria-invalid'] || undefined, "aria-describedby": [props['aria-describedby'], ...context.messageIds].filter(Boolean).join(' ') ||
+            undefined, ref: ref, ...validationAttributes(context.validation), "data-component": "switch-button", "data-style-disabled": disableStyle ? '' : undefined, 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 Indicator = forwardRef(function Indicator({ disableStyle, className, ...props }, ref) {
+export const Indicator = /* @__PURE__ */ forwardRef(function Indicator({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseSwitch.Thumb, { ...props, ref: ref, "data-component": "switch-indicator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 /** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
-export const Label = forwardRef(function Label({ disableStyle, className, ...props }, ref) {
+export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, ...props }, ref) {
     const context = useSwitchContext();
-    return (_jsx("label", { ...props, ref: ref, htmlFor: context.id, "data-disabled": context.disabled ? '' : undefined, "data-component": "switch-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return (_jsx("label", { ...props, ref: ref, htmlFor: context.coreProps.id, "data-disabled": context.coreProps.disabled ? '' : undefined, "data-component": "switch-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Description = forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
+export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
     const messageId = useMessageId(id);
     return (_jsx("div", { id: messageId, ...props, ref: ref, "data-component": "switch-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 = forwardRef(function Error({ disableStyle, className, id, ...props }, ref) {
-    const messageId = useMessageId(id);
-    return (_jsx("div", { id: messageId, ...props, ref: ref, role: "alert", "aria-atomic": "true", "data-component": "switch-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 = useSwitchContext();
+    const content = validationMessageContent(context.validation, 'error', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, ref: ref, role: "alert", component: "switch-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 = 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 = useSwitchContext();
+    const content = validationMessageContent(context.validation, 'success', children);
+    if (content === undefined)
+        return null;
+    return _jsx(Message, { ...props, ref: ref, role: "status", component: "switch-success", children: content });
+});
+// The shared body of Error and Success, mounted only while they show, so only visible messages describe the switch
+const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, className, id, component, ...props }, ref) {
     const messageId = useMessageId(id);
-    return (_jsx("div", { id: messageId, ...props, ref: ref, role: "status", "aria-atomic": "true", "data-component": "switch-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
+    return _jsx("div", { "aria-atomic": "true", ...props, id: messageId, ref: ref, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
 });
-const SwitchContext = createContext(null);
+const SwitchContext = /* @__PURE__ */ createContext(null);
 function useSwitchContext() {
     const context = useContext(SwitchContext);
     if (!context)
         throw new globalThis.Error('Switch parts must be inside Switch.Root');
     return context;
 }
+// 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 } = useSwitchContext();
+    const context = useSwitchContext();
     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/table/index.d.ts

@@ -94,8 +94,9 @@ export declare function Head({ disableStyle, className, ...props }: ComponentPro
 export declare const Body: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLTableSectionElement> & HTMLAttributes<HTMLTableSectionElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
 export declare const Row: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLTableRowElement> & HTMLAttributes<HTMLTableRowElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;
 export declare function HeadCell({ disableStyle, className, ...props }: ComponentProps<'th'> & StyleProps): import("react").JSX.Element;
+/** Already styled as text: write plain text directly inside it, without a wrapping text element. Add your own elements only when the content needs more than plain text, like an avatar next to a name or a lighter secondary line. */
 export declare function Cell({ disableStyle, className, ...props }: ComponentProps<'td'> & StyleProps): import("react").JSX.Element;
-export declare function Empty({ disableStyle, className, children, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function Empty({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 export declare function EmptyBody({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 export declare function EmptyTitle({ disableStyle, className, ...props }: HTMLAttributes<HTMLParagraphElement> & StyleProps): import("react").JSX.Element;
 export declare function EmptyDescription({ disableStyle, className, ...props }: ComponentProps<'p'> & StyleProps): import("react").JSX.Element;
@@ -105,6 +106,5 @@ export declare function EmptyIcon({ disableStyle, children, className, ...props
     /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
     children: ReactElement<ComponentProps<'svg'>>;
 }) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
-export declare function EmptyActionsList({ disableStyle, className, children, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
+export declare function EmptyActionsList({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
 export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/components/table/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, createContext, forwardRef, useContext, useEffect, useRef, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
-const PinningContext = createContext(null);
+const PinningContext = /* @__PURE__ */ createContext(null);
 function usePinning() {
     return useContext(PinningContext)?.pinning ?? null;
 }
@@ -83,15 +83,16 @@ function usePinning() {
  * </Table.Root>
  */
 export function Root({ pinning, children, }) {
-    const { scrollRef, edges, update } = useScrollEdges();
+    const scrollEdges = useScrollEdges();
+    // Pinning only while the pinned column would otherwise scroll out of view
     const activePinning = (() => {
-        if (pinning === 'first' && edges.passedFirst)
+        if (pinning === 'first' && scrollEdges.edges.passedFirst)
             return 'first';
-        if (pinning === 'last' && edges.hiddenLast)
+        if (pinning === 'last' && scrollEdges.edges.hiddenLast)
             return 'last';
         return null;
     })();
-    return (_jsx(PinningContext.Provider, { value: { pinning: activePinning, scrollRef, update }, children: children }));
+    return (_jsx(PinningContext.Provider, { value: { pinning: activePinning, scrollRef: scrollEdges.scrollRef, update: scrollEdges.update }, children: children }));
 }
 function useScrollEdges() {
     const scrollRef = useRef(null);
@@ -104,6 +105,7 @@ function useScrollEdges() {
                 scrollArea.scrollLeft >
                 1,
         };
+        // Keeping the same state when nothing changed, so scrolling doesn't re-render on every pixel
         setEdges((current) => current.passedFirst === next.passedFirst &&
             current.hiddenLast === next.hiddenLast
             ? current
@@ -133,9 +135,9 @@ export function SurfaceFooter({ disableStyle, className, ...props }) {
     return (_jsx("div", { ...props, "data-component": "table-surfacefooter", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
 export function ScrollArea({ disableStyle, className, onScroll, style, ...props }) {
-    const { scrollRef, update } = useContext(PinningContext);
-    return (_jsx("div", { ...props, ref: scrollRef, style: { ...style, overflowX: 'auto' }, onScroll: (event) => {
-            update(event.currentTarget);
+    const pinning = useContext(PinningContext);
+    return (_jsx("div", { ...props, ref: pinning.scrollRef, style: { ...style, overflowX: 'auto' }, onScroll: (event) => {
+            pinning.update(event.currentTarget);
             onScroll?.(event);
         }, "data-component": "table-scrollarea", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
@@ -163,22 +165,23 @@ export function Col({ disableStyle, className, ...props }) {
 export function Head({ disableStyle, className, ...props }) {
     return (_jsx("thead", { ...props, "data-slot": "table-header", "data-component": "table-head", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
-export const Body = forwardRef(function Body({ disableStyle, className, ...props }, ref) {
+export const Body = /* @__PURE__ */ forwardRef(function Body({ disableStyle, className, ...props }, ref) {
     return (_jsx("tbody", { ...props, ref: ref, "data-component": "table-body", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Row = forwardRef(({ disableStyle, className, ...props }, ref) => {
+export const Row = /* @__PURE__ */ forwardRef(({ disableStyle, className, ...props }, ref) => {
     return (_jsx("tr", { ...props, ref: ref, "data-component": "table-row", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 export function HeadCell({ disableStyle, className, ...props }) {
     const pinning = usePinning();
     return (_jsx("th", { ...props, "data-pinning": pinning, "data-component": "table-headcell", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
+/** Already styled as text: write plain text directly inside it, without a wrapping text element. Add your own elements only when the content needs more than plain text, like an avatar next to a name or a lighter secondary line. */
 export function Cell({ disableStyle, className, ...props }) {
     const pinning = usePinning();
     return (_jsx("td", { ...props, "data-pinning": pinning, "data-component": "table-cell", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 }
-export function Empty({ disableStyle, className, children, ...props }) {
-    return (_jsx("div", { "data-component": "table-empty", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props, children: children }));
+export function Empty({ disableStyle, className, ...props }) {
+    return (_jsx("div", { "data-component": "table-empty", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
 }
 export function EmptyBody({ disableStyle, className, ...props }) {
     return (_jsx("div", { ...props, "data-component": "table-emptybody", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
@@ -195,7 +198,6 @@ export function EmptyImage({ disableStyle, className, ...props }) {
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
 export function EmptyIcon({ disableStyle, children, className, ...props }) {
     return cloneElement(children, {
-        ...children.props,
         ...props,
         ...{
             'data-component': 'table-emptyicon',
@@ -205,7 +207,6 @@ export function EmptyIcon({ disableStyle, children, className, ...props }) {
         strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 1.5,
     });
 }
-export function EmptyActionsList({ disableStyle, className, children, ...props }) {
-    return (_jsx("div", { "data-component": "table-emptyactionslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props, children: children }));
+export function EmptyActionsList({ disableStyle, className, ...props }) {
+    return (_jsx("div", { "data-component": "table-emptyactionslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 import type { StyleProps } from '../../types/Style.ts';
 import { Tabs as BaseTabs } from '@base-ui/react/tabs';
 import type { ReactElement } from 'react';
-import type { LucideProps } from 'lucide-react';
+import type { SVGIconProps } from '../../types/Icon.ts';
 /**
  * Match each Tab value to a Content value in the same Root. Let Tabs handle the active panel and keyboard navigation; do not add separate visibility conditions. Indicator is optional decoration.
  *
@@ -54,9 +54,9 @@ export declare const Tab: import("react").ForwardRefExoticComponent<Omit<Omit<im
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 /** 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<LucideProps & {
+export declare const Icon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & {
     /** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
-    children: ReactElement<LucideProps>;
+    children: ReactElement<SVGIconProps>;
 } & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 export declare const Indicator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsIndicatorProps, "className"> & {
     className?: string;
@@ -64,4 +64,3 @@ export declare const Indicator: import("react").ForwardRefExoticComponent<Omit<O
 export declare const Content: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsPanelProps, "className"> & {
     className?: string;
 } & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/tabs/index.js

@@ -50,14 +50,14 @@ export function Root({ children, ...props }) {
     // Native Root renders a div; the fragment preserves our wrapper-free Root contract.
     return (_jsx(BaseTabs.Root, { ...props, render: (rootProps) => _jsx(_Fragment, { children: rootProps.children }), children: children }));
 }
-export const List = forwardRef(function List({ disableStyle, className, ...props }, ref) {
+export const List = /* @__PURE__ */ forwardRef(function List({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseTabs.List, { ...props, ref: ref, "data-component": "tabs-list", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Tab = forwardRef(function Tab({ disableStyle, className, ...props }, ref) {
+export const Tab = /* @__PURE__ */ forwardRef(function Tab({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseTabs.Tab, { ...props, ref: ref, "data-component": "tabs-tab", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
 /** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
-export const Icon = forwardRef(function Icon({ disableStyle, children, className, ...props }, ref) {
+export const Icon = /* @__PURE__ */ forwardRef(function Icon({ disableStyle, children, className, ...props }, ref) {
     return cloneElement(children, {
         ...props,
         ref,
@@ -66,13 +66,12 @@ export const Icon = forwardRef(function Icon({ disableStyle, children, className
             'data-component': 'tabs-icon',
             'data-style-disabled': disableStyle ? '' : undefined,
         },
-        className: twMerge(children?.props.className, className),
+        className: twMerge(children.props.className, className),
     });
 });
-export const Indicator = forwardRef(function Indicator({ disableStyle, className, ...props }, ref) {
+export const Indicator = /* @__PURE__ */ forwardRef(function Indicator({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseTabs.Indicator, { ...props, ref: ref, "data-component": "tabs-indicator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-export const Content = forwardRef(function Content({ disableStyle, className, ...props }, ref) {
+export const Content = /* @__PURE__ */ forwardRef(function Content({ disableStyle, className, ...props }, ref) {
     return (_jsx(BaseTabs.Panel, { ...props, ref: ref, "data-component": "tabs-content", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
 });
-//# sourceMappingURL=index.js.map

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

@@ -1,11 +1,13 @@
 import type { StyleProps } from '../../types/Style.ts';
 import { Input as BaseInput } from '@base-ui/react/input';
-import type { LucideProps } from 'lucide-react';
+import type { SVGIconProps } from '../../types/Icon.ts';
 import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import type { Validation } from '../../types/Validation.ts';
+import type { ValidationMessageChildren } from '../../utils/Validation.ts';
 export type RootProps = Pick<ComponentProps<'textarea'>, 'id' | 'name' | 'form' | 'value' | 'defaultValue' | 'disabled' | 'readOnly' | 'required'> & Pick<BaseInput.Props, 'onValueChange'> & {
     children?: ReactNode;
-    /** Choose the visual tone. This does not validate data or show/hide feedback messages. */
-    tone?: 'neutral' | 'valid' | 'invalid';
+    /** The field's validation state, with an optional message: `'error'` styles it as invalid, `['error', 'Email is required']` also shows that message in Error. Same for `'success'` and Success. Omit it for a neutral field. */
+    validation?: Validation;
 };
 /**
  * Keep value, name, and validation configuration on Root. Textarea is the editable control inside TextareaGroup. Optional Addon parts hold your supporting text or actions; they do not implement submission.
@@ -40,22 +42,23 @@ export type RootProps = Pick<ComponentProps<'textarea'>, 'id' | 'name' | 'form'
  *   )
  * }
  */
-export declare function Root({ children, id, tone, value, defaultValue, onValueChange, disabled, readOnly, required, ...coreProps }: RootProps): import("react").JSX.Element;
+export declare function Root({ children, id, validation, value, defaultValue, onValueChange, disabled, readOnly, required, ...coreProps }: RootProps): import("react").JSX.Element;
 export type TextareaProps = Omit<ComponentProps<'textarea'>, keyof Pick<RootProps, 'id' | 'name' | 'form' | 'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'readOnly' | 'required'>> & {
     className?: string;
 } & StyleProps;
-export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "form" | "defaultValue" | "id" | "name" | "disabled" | "value" | "onValueChange" | "required" | "readOnly"> & {
-    className?: string;
-} & StyleProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
 export declare const TextareaGroup: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & 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>>;
 /** 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<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** 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<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-/** 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<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type MessageProps = Omit<ComponentProps<'div'>, '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<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>>;
 export declare const Addon: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     /** Choose the preset appearance; this does not add action behavior. */
     variant?: "normal" | "emphasized";
@@ -68,5 +71,5 @@ export declare function AddonIcon({ disableStyle, children, className, ...props
 }) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
 export declare const AddonButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 /** Built-in icon; no children needed. Use it inside its matching control. */
-export declare const AddonLoadingIcon: import("react").ForwardRefExoticComponent<Omit<Omit<LucideProps, "children"> & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-//# sourceMappingURL=index.d.ts.map
+export declare const AddonLoadingIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "children"> & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export {};