@yahoo/uds 3.131.0-beta.2 → 3.132.0

package/dist/components/client/Radio/Radio.cjs

@@ -52,9 +52,13 @@ const pressTransition = {
 *
 * @related [Radio](https://uds.build/docs/components/Radio).
 **/
-const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, value: valueProp = "", checked: checkedProp, defaultChecked, disabled, hasError, onChange, onFocus, onBlur, className, style, layerClassNames, ...radioProps }, parentRef) {
+const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, value: valueProp = "", checked: checkedProp, defaultChecked, disabled, hasError, onChange, onFocus, onBlur, className, style, slotProps, ...radioProps }, parentRef) {
 	const generatedId = (0, react.useId)();
 	const uid = id ?? `uds-radio-${generatedId}`;
+	const rootSlotProps = slotProps?.root ?? {};
+	const radioSlotProps = slotProps?.radio ?? {};
+	const radioIconSlotProps = slotProps?.radioIcon ?? {};
+	const labelSlotProps = slotProps?.label ?? {};
 	const innerRef = (0, react.useRef)(null);
 	/**
 	* State
@@ -125,15 +129,11 @@ const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label,
 			display: "flex",
 			flexDirection: labelPosition === "start" ? "row" : "row-reverse",
 			alignItems: "center",
-			className: require_styles_styler.cx([
-				{
-					"cursor-pointer": !disabled,
-					"cursor-default": disabled,
-					"opacity-50": disabled
-				},
-				className,
-				layerClassNames?.root
-			])
+			className: require_styles_styler.cx([{
+				"cursor-pointer": !disabled,
+				"cursor-default": disabled,
+				"opacity-50": disabled
+			}, className])
 		}),
 		radio: require_styles_styler.getStyles({
 			radioSizeRadio: size,
@@ -145,8 +145,7 @@ const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label,
 				"uds-ring-within",
 				cssAnimationDuration,
 				"transition-[background-color,border-color]",
-				"transition-shadow",
-				layerClassNames?.radio
+				"transition-shadow"
 			])
 		}),
 		radioCircle: require_styles_styler.getStyles({
@@ -162,7 +161,7 @@ const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label,
 			])
 		}),
 		htmlRadio: require_styles_styler.cx("cursor-[inherit]", "absolute", "opacity-0", "top-1/2", "left-1/2", "w-[calc(100%+2px)]", "h-[calc(100%+2px)]", "transform", "translate-x-[-50%]", "translate-y-[-50%]"),
-		label: require_styles_styler.cx(labelPosition === "start" ? "text-start" : "text-end", layerClassNames?.label)
+		label: require_styles_styler.cx(labelPosition === "start" ? "text-start" : "text-end")
 	};
 	const RootElement = label ? motion_react.m.label : motion_react.m.div;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
@@ -178,6 +177,7 @@ const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label,
 			onTap: handleTapEnd,
 			onTapCancel: handleTapEnd,
 			tabIndex: -1,
+			...rootSlotProps,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
 				position: "relative",
 				borderRadius: "full",
@@ -187,6 +187,7 @@ const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label,
 				className: classNames.radio,
 				animate: motionAnimate,
 				insetShadow: showShadow ? "lg-invert" : "none",
+				...radioSlotProps,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					type: "radio",
 					tabIndex: 0,
@@ -208,14 +209,16 @@ const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label,
 					className: classNames.htmlRadio
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
 					borderRadius: "full",
-					className: classNames.radioCircle
+					className: classNames.radioCircle,
+					...radioIconSlotProps
 				})]
 			}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
 				as: "div",
 				variant: "inherit",
 				color: "inherit",
 				label,
-				className: classNames.label
+				className: classNames.label,
+				...labelSlotProps
 			})]
 		})
 	});

package/dist/components/client/Radio/Radio.d.cts

@@ -1,15 +1,20 @@
 
-import { RadioSize, RadioVariant, UniversalRadioProps } from "../../../types/src/index.cjs";
+import { RadioSize, RadioVariant, UniversalRadioProps } from "../../../types/dist/index.cjs";
 import "../../../tokens/index.cjs";
 import React from "react";
 
 //#region src/components/client/Radio/Radio.d.ts
 type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size' | 'height' | 'width' | 'color' | 'required'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface RadioProps extends NativeInputProps, UniversalRadioProps {
-  layerClassNames?: {
-    root?: string;
-    radio?: string;
-    label?: string;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: DataAttributes;
+    radio?: DataAttributes;
+    radioIcon?: DataAttributes;
+    label?: DataAttributes;
   };
 }
 declare const RADIO_VARIANTS: RadioVariant[];

package/dist/components/client/Radio/Radio.d.ts

@@ -1,16 +1,21 @@
 
 "use client";
-import { RadioSize, RadioVariant, UniversalRadioProps } from "../../../types/src/index.js";
+import { RadioSize, RadioVariant, UniversalRadioProps } from "../../../types/dist/index.js";
 import "../../../tokens/index.js";
 import React from "react";
 
 //#region src/components/client/Radio/Radio.d.ts
 type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size' | 'height' | 'width' | 'color' | 'required'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface RadioProps extends NativeInputProps, UniversalRadioProps {
-  layerClassNames?: {
-    root?: string;
-    radio?: string;
-    label?: string;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: DataAttributes;
+    radio?: DataAttributes;
+    radioIcon?: DataAttributes;
+    label?: DataAttributes;
   };
 }
 declare const RADIO_VARIANTS: RadioVariant[];

package/dist/components/client/Radio/Radio.js

@@ -49,9 +49,13 @@ const pressTransition = {
 *
 * @related [Radio](https://uds.build/docs/components/Radio).
 **/
-const Radio = forwardRef(function Radio({ id, name: nameProp, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, value: valueProp = "", checked: checkedProp, defaultChecked, disabled, hasError, onChange, onFocus, onBlur, className, style, layerClassNames, ...radioProps }, parentRef) {
+const Radio = forwardRef(function Radio({ id, name: nameProp, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, value: valueProp = "", checked: checkedProp, defaultChecked, disabled, hasError, onChange, onFocus, onBlur, className, style, slotProps, ...radioProps }, parentRef) {
 	const generatedId = useId();
 	const uid = id ?? `uds-radio-${generatedId}`;
+	const rootSlotProps = slotProps?.root ?? {};
+	const radioSlotProps = slotProps?.radio ?? {};
+	const radioIconSlotProps = slotProps?.radioIcon ?? {};
+	const labelSlotProps = slotProps?.label ?? {};
 	const innerRef = useRef(null);
 	/**
 	* State
@@ -122,15 +126,11 @@ const Radio = forwardRef(function Radio({ id, name: nameProp, label, labelPositi
 			display: "flex",
 			flexDirection: labelPosition === "start" ? "row" : "row-reverse",
 			alignItems: "center",
-			className: cx([
-				{
-					"cursor-pointer": !disabled,
-					"cursor-default": disabled,
-					"opacity-50": disabled
-				},
-				className,
-				layerClassNames?.root
-			])
+			className: cx([{
+				"cursor-pointer": !disabled,
+				"cursor-default": disabled,
+				"opacity-50": disabled
+			}, className])
 		}),
 		radio: getStyles({
 			radioSizeRadio: size,
@@ -142,8 +142,7 @@ const Radio = forwardRef(function Radio({ id, name: nameProp, label, labelPositi
 				"uds-ring-within",
 				cssAnimationDuration,
 				"transition-[background-color,border-color]",
-				"transition-shadow",
-				layerClassNames?.radio
+				"transition-shadow"
 			])
 		}),
 		radioCircle: getStyles({
@@ -159,7 +158,7 @@ const Radio = forwardRef(function Radio({ id, name: nameProp, label, labelPositi
 			])
 		}),
 		htmlRadio: cx("cursor-[inherit]", "absolute", "opacity-0", "top-1/2", "left-1/2", "w-[calc(100%+2px)]", "h-[calc(100%+2px)]", "transform", "translate-x-[-50%]", "translate-y-[-50%]"),
-		label: cx(labelPosition === "start" ? "text-start" : "text-end", layerClassNames?.label)
+		label: cx(labelPosition === "start" ? "text-start" : "text-end")
 	};
 	const RootElement = label ? m.label : m.div;
 	return /* @__PURE__ */ jsx(SpringMotionConfig, {
@@ -175,6 +174,7 @@ const Radio = forwardRef(function Radio({ id, name: nameProp, label, labelPositi
 			onTap: handleTapEnd,
 			onTapCancel: handleTapEnd,
 			tabIndex: -1,
+			...rootSlotProps,
 			children: [/* @__PURE__ */ jsxs(MotionBox, {
 				position: "relative",
 				borderRadius: "full",
@@ -184,6 +184,7 @@ const Radio = forwardRef(function Radio({ id, name: nameProp, label, labelPositi
 				className: classNames.radio,
 				animate: motionAnimate,
 				insetShadow: showShadow ? "lg-invert" : "none",
+				...radioSlotProps,
 				children: [/* @__PURE__ */ jsx("input", {
 					type: "radio",
 					tabIndex: 0,
@@ -205,14 +206,16 @@ const Radio = forwardRef(function Radio({ id, name: nameProp, label, labelPositi
 					className: classNames.htmlRadio
 				}), /* @__PURE__ */ jsx(Box, {
 					borderRadius: "full",
-					className: classNames.radioCircle
+					className: classNames.radioCircle,
+					...radioIconSlotProps
 				})]
 			}), label && /* @__PURE__ */ jsx(FormLabel, {
 				as: "div",
 				variant: "inherit",
 				color: "inherit",
 				label,
-				className: classNames.label
+				className: classNames.label,
+				...labelSlotProps
 			})]
 		})
 	});

package/dist/components/client/Radio/RadioGroupProvider.d.cts

@@ -1,5 +1,5 @@
 
-import { UniversalRadioGroupProps } from "../../../types/src/index.cjs";
+import { UniversalRadioGroupProps } from "../../../types/dist/index.cjs";
 import "../../../tokens/index.cjs";
 import React from "react";
 

package/dist/components/client/Radio/RadioGroupProvider.d.ts

@@ -1,6 +1,6 @@
 
 "use client";
-import { UniversalRadioGroupProps } from "../../../types/src/index.js";
+import { UniversalRadioGroupProps } from "../../../types/dist/index.js";
 import "../../../tokens/index.js";
 import React from "react";
 

package/dist/components/client/SpringMotionConfig.d.cts

@@ -1,5 +1,5 @@
 
-import { MotionVariant, MotionVariantSpeed } from "../../types/src/index.cjs";
+import { MotionVariant, MotionVariantSpeed } from "../../types/dist/index.cjs";
 import "../../tokens/index.cjs";
 import { ReactNode } from "react";
 import { LazyFeatureBundle, MotionConfigProps } from "motion/react";

package/dist/components/client/SpringMotionConfig.d.ts

@@ -1,6 +1,6 @@
 
 "use client";
-import { MotionVariant, MotionVariantSpeed } from "../../types/src/index.js";
+import { MotionVariant, MotionVariantSpeed } from "../../types/dist/index.js";
 import "../../tokens/index.js";
 import { ReactNode } from "react";
 import { LazyFeatureBundle, MotionConfigProps } from "motion/react";

package/dist/components/client/Switch.cjs

@@ -46,9 +46,13 @@ const toggleTransition = {
 *
 * @related [Checkbox](https://uds.build/docs/components/checkbox).
 **/
-const Switch = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, reduceMotion: forceReduceMotion, disabled, required, onFocus, onBlur, className, style, layerClassNames, ...switchProps }, parentRef) {
+const Switch = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, reduceMotion: forceReduceMotion, disabled, required, onFocus, onBlur, className, style, slotProps, ...switchProps }, parentRef) {
 	const generatedId = (0, react.useId)();
 	const uid = id ?? `uds-input-${generatedId}`;
+	const rootSlotProps = slotProps?.root ?? {};
+	const switchSlotProps = slotProps?.switch ?? {};
+	const handleSlotProps = slotProps?.handle ?? {};
+	const labelSlotProps = slotProps?.label ?? {};
 	const innerRef = (0, react.useRef)(null);
 	/**
 	* State
@@ -117,7 +121,7 @@ const Switch = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defau
 				"cursor-pointer": !disabled,
 				"cursor-default": disabled,
 				"opacity-50": disabled
-			}, layerClassNames?.root, className)
+			}, className)
 		}),
 		switch: require_styles_styler.getStyles({
 			switchVariantSwitch: "default",
@@ -126,11 +130,11 @@ const Switch = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defau
 			borderRadius: "full",
 			position: "relative",
 			alignItems: "center",
-			className: require_styles_styler.cx("uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,box-shadow]", layerClassNames?.switch)
+			className: require_styles_styler.cx("uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,box-shadow]")
 		}),
 		handle: require_styles_styler.getStyles({
 			switchSizeHandle: size,
-			className: require_styles_styler.cx("relative", "pointer-events-none", "uds-border-radius-full", "overflow-hidden", layerClassNames?.handle)
+			className: require_styles_styler.cx("relative", "pointer-events-none", "uds-border-radius-full", "overflow-hidden")
 		}),
 		handleCircle: require_styles_styler.getStyles({
 			switchVariantActiveHandle: isOn ? "on" : "off",
@@ -144,7 +148,7 @@ const Switch = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defau
 			className: require_styles_styler.cx("absolute", "opacity-0", "top-1/2", "left-1/2", "transform", "translate-x-[-50%]", "translate-y-[-50%]", cssAnimationDuration, "transition-opacity")
 		}),
 		htmlCheckbox: require_styles_styler.cx("cursor-[inherit]", "absolute", "opacity-0", "top-1/2", "left-1/2", "w-[calc(100%+2px)]", "h-[calc(100%+2px)]", "transform", "translate-x-[-50%]", "translate-y-[-50%]"),
-		label: require_styles_styler.cx(labelPosition === "start" ? "text-start" : "text-end", layerClassNames?.label)
+		label: require_styles_styler.cx(labelPosition === "start" ? "text-start" : "text-end")
 	};
 	const RootElement = label ? motion_react.m.label : motion_react.m.div;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
@@ -157,8 +161,10 @@ const Switch = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defau
 			onHoverStart: handleHoverStart,
 			onHoverEnd: handleHoverEnd,
 			tabIndex: -1,
+			...rootSlotProps,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
 				className: classNames.switch,
+				...switchSlotProps,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					type: "checkbox",
 					tabIndex: 0,
@@ -180,6 +186,7 @@ const Switch = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defau
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
 					className: classNames.handle,
 					...motionInitialAndAnimate,
+					...handleSlotProps,
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, { className: classNames.handleCircle }),
 						onIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
@@ -208,7 +215,8 @@ const Switch = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defau
 				color: "inherit",
 				required,
 				label,
-				className: classNames.label
+				className: classNames.label,
+				...labelSlotProps
 			})]
 		})
 	});

package/dist/components/client/Switch.d.cts

@@ -1,16 +1,20 @@
 
-import { UniversalSwitchProps } from "../../types/src/index.cjs";
+import { UniversalSwitchProps } from "../../types/dist/index.cjs";
 import "../../tokens/index.cjs";
 import React from "react";
 
 //#region src/components/client/Switch.d.ts
 type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface SwitchProps extends NativeInputProps, UniversalSwitchProps {
-  layerClassNames?: {
-    root?: string;
-    switch?: string;
-    handle?: string;
-    label?: string;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: DataAttributes;
+    switch?: DataAttributes;
+    handle?: DataAttributes;
+    label?: DataAttributes;
   };
 }
 /**

package/dist/components/client/Switch.d.ts

@@ -1,17 +1,21 @@
 
 "use client";
-import { UniversalSwitchProps } from "../../types/src/index.js";
+import { UniversalSwitchProps } from "../../types/dist/index.js";
 import "../../tokens/index.js";
 import React from "react";
 
 //#region src/components/client/Switch.d.ts
 type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface SwitchProps extends NativeInputProps, UniversalSwitchProps {
-  layerClassNames?: {
-    root?: string;
-    switch?: string;
-    handle?: string;
-    label?: string;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: DataAttributes;
+    switch?: DataAttributes;
+    handle?: DataAttributes;
+    label?: DataAttributes;
   };
 }
 /**

package/dist/components/client/Switch.js

@@ -43,9 +43,13 @@ const toggleTransition = {
 *
 * @related [Checkbox](https://uds.build/docs/components/checkbox).
 **/
-const Switch = forwardRef(function Switch({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, reduceMotion: forceReduceMotion, disabled, required, onFocus, onBlur, className, style, layerClassNames, ...switchProps }, parentRef) {
+const Switch = forwardRef(function Switch({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, reduceMotion: forceReduceMotion, disabled, required, onFocus, onBlur, className, style, slotProps, ...switchProps }, parentRef) {
 	const generatedId = useId();
 	const uid = id ?? `uds-input-${generatedId}`;
+	const rootSlotProps = slotProps?.root ?? {};
+	const switchSlotProps = slotProps?.switch ?? {};
+	const handleSlotProps = slotProps?.handle ?? {};
+	const labelSlotProps = slotProps?.label ?? {};
 	const innerRef = useRef(null);
 	/**
 	* State
@@ -114,7 +118,7 @@ const Switch = forwardRef(function Switch({ id, isOn: isOnProp, defaultIsOn, onC
 				"cursor-pointer": !disabled,
 				"cursor-default": disabled,
 				"opacity-50": disabled
-			}, layerClassNames?.root, className)
+			}, className)
 		}),
 		switch: getStyles({
 			switchVariantSwitch: "default",
@@ -123,11 +127,11 @@ const Switch = forwardRef(function Switch({ id, isOn: isOnProp, defaultIsOn, onC
 			borderRadius: "full",
 			position: "relative",
 			alignItems: "center",
-			className: cx("uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,box-shadow]", layerClassNames?.switch)
+			className: cx("uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,box-shadow]")
 		}),
 		handle: getStyles({
 			switchSizeHandle: size,
-			className: cx("relative", "pointer-events-none", "uds-border-radius-full", "overflow-hidden", layerClassNames?.handle)
+			className: cx("relative", "pointer-events-none", "uds-border-radius-full", "overflow-hidden")
 		}),
 		handleCircle: getStyles({
 			switchVariantActiveHandle: isOn ? "on" : "off",
@@ -141,7 +145,7 @@ const Switch = forwardRef(function Switch({ id, isOn: isOnProp, defaultIsOn, onC
 			className: cx("absolute", "opacity-0", "top-1/2", "left-1/2", "transform", "translate-x-[-50%]", "translate-y-[-50%]", cssAnimationDuration, "transition-opacity")
 		}),
 		htmlCheckbox: cx("cursor-[inherit]", "absolute", "opacity-0", "top-1/2", "left-1/2", "w-[calc(100%+2px)]", "h-[calc(100%+2px)]", "transform", "translate-x-[-50%]", "translate-y-[-50%]"),
-		label: cx(labelPosition === "start" ? "text-start" : "text-end", layerClassNames?.label)
+		label: cx(labelPosition === "start" ? "text-start" : "text-end")
 	};
 	const RootElement = label ? m.label : m.div;
 	return /* @__PURE__ */ jsx(SpringMotionConfig, {
@@ -154,8 +158,10 @@ const Switch = forwardRef(function Switch({ id, isOn: isOnProp, defaultIsOn, onC
 			onHoverStart: handleHoverStart,
 			onHoverEnd: handleHoverEnd,
 			tabIndex: -1,
+			...rootSlotProps,
 			children: [/* @__PURE__ */ jsxs(MotionBox, {
 				className: classNames.switch,
+				...switchSlotProps,
 				children: [/* @__PURE__ */ jsx("input", {
 					type: "checkbox",
 					tabIndex: 0,
@@ -177,6 +183,7 @@ const Switch = forwardRef(function Switch({ id, isOn: isOnProp, defaultIsOn, onC
 				}), /* @__PURE__ */ jsxs(MotionBox, {
 					className: classNames.handle,
 					...motionInitialAndAnimate,
+					...handleSlotProps,
 					children: [
 						/* @__PURE__ */ jsx(Box, { className: classNames.handleCircle }),
 						onIcon && /* @__PURE__ */ jsx(IconSlot, {
@@ -205,7 +212,8 @@ const Switch = forwardRef(function Switch({ id, isOn: isOnProp, defaultIsOn, onC
 				color: "inherit",
 				required,
 				label,
-				className: classNames.label
+				className: classNames.label,
+				...labelSlotProps
 			})]
 		})
 	});

package/dist/components/client/Tabs/Tab.cjs

@@ -13,7 +13,7 @@ let _ariakit_react = require("@ariakit/react");
 //#region src/components/client/Tabs/Tab.tsx
 /** Matches {@link TabList} sliding-indicator underline (token CSS variables on the tab root). */
 const tabRootUnderlineClassName = require_styles_styler.cx("pointer-events-none absolute bottom-0 left-0 right-0", "h-[var(--uds-tab-underline-width,0px)] bg-[var(--uds-tab-underline-color,transparent)]", "transition-[height,background-color] duration-[240ms] ease-[cubic-bezier(0.2,0,0,1)]");
-function Tab({ value, children, startIcon, endIcon, disabled, asChild = false, className }) {
+function Tab({ value, children, startIcon, endIcon, disabled, asChild = false, className, slotProps }) {
 	const generatedId = (0, react.useId)();
 	const uid = value ?? `uds-tab-${generatedId}`;
 	const { variant, disableMotion } = require_components_client_Tabs_tabsContext.useTabsContext();
@@ -39,13 +39,16 @@ function Tab({ value, children, startIcon, endIcon, disabled, asChild = false, c
 	});
 	const tabClass = require_styles_styler.cx(configClass, "inline-flex items-center shrink-0 box-border relative", !disableMotion && "z-[1]", "cursor-pointer select-none whitespace-nowrap", !disabled && "uds-ring", disabled && "opacity-50 cursor-default pointer-events-none", "border-solid border-b-solid", "transition-colors duration-[240ms] ease-[cubic-bezier(0.2,0,0,1)]", className);
 	const resolvedContent = asChild && (0, react.isValidElement)(children) ? children.props.children ?? null : children;
+	const resolvedRender = asChild && (0, react.isValidElement)(children) ? children : void 0;
+	const showPerTabUnderline = !(activeState === "on" && !disableMotion);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ariakit_react.Tab, {
 		id: uid,
 		disabled,
 		className: tabClass,
-		render: asChild && (0, react.isValidElement)(children) ? children : void 0,
+		render: resolvedRender,
+		...slotProps?.root,
 		children: [
-			!(activeState === "on" && !disableMotion) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			showPerTabUnderline ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				"aria-hidden": true,
 				className: tabRootUnderlineClassName
 			}) : null,
@@ -55,12 +58,14 @@ function Tab({ value, children, startIcon, endIcon, disabled, asChild = false, c
 					size: "sm",
 					color: "current"
 				},
-				className: iconConfigClass
+				className: iconConfigClass,
+				...slotProps?.startIcon
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
 				variant: "inherit",
 				as: "span",
 				color: "current",
+				...slotProps?.content,
 				children: resolvedContent
 			}),
 			endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
@@ -69,7 +74,8 @@ function Tab({ value, children, startIcon, endIcon, disabled, asChild = false, c
 					size: "sm",
 					color: "current"
 				},
-				className: iconConfigClass
+				className: iconConfigClass,
+				...slotProps?.endIcon
 			})
 		]
 	});

package/dist/components/client/Tabs/Tab.d.cts

@@ -1,9 +1,19 @@
 
-import { UniversalTabProps } from "../../../types/src/index.cjs";
+import { IconPropsWithSVGProps, UniversalTabProps } from "../../../types/dist/index.cjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/client/Tabs/Tab.d.ts
-type TabProps = UniversalTabProps;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+type TabProps = UniversalTabProps & {
+  slotProps?: {
+    root?: DataAttributes;
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    content?: Partial<Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+};
 declare function Tab({
   value,
   children,
@@ -11,7 +21,8 @@ declare function Tab({
   endIcon,
   disabled,
   asChild,
-  className
+  className,
+  slotProps
 }: TabProps): react_jsx_runtime0.JSX.Element;
 declare namespace Tab {
   var displayName: string;

package/dist/components/client/Tabs/Tab.d.ts

@@ -1,10 +1,20 @@
 
 "use client";
-import { UniversalTabProps } from "../../../types/src/index.js";
+import { IconPropsWithSVGProps, UniversalTabProps } from "../../../types/dist/index.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/client/Tabs/Tab.d.ts
-type TabProps = UniversalTabProps;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+type TabProps = UniversalTabProps & {
+  slotProps?: {
+    root?: DataAttributes;
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    content?: Partial<Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+};
 declare function Tab({
   value,
   children,
@@ -12,7 +22,8 @@ declare function Tab({
   endIcon,
   disabled,
   asChild,
-  className
+  className,
+  slotProps
 }: TabProps): react_jsx_runtime0.JSX.Element;
 declare namespace Tab {
   var displayName: string;

package/dist/components/client/Tabs/Tab.js

@@ -11,7 +11,7 @@ import { Tab as Tab$1, useStoreState, useTabContext } from "@ariakit/react";
 //#region src/components/client/Tabs/Tab.tsx
 /** Matches {@link TabList} sliding-indicator underline (token CSS variables on the tab root). */
 const tabRootUnderlineClassName = cx("pointer-events-none absolute bottom-0 left-0 right-0", "h-[var(--uds-tab-underline-width,0px)] bg-[var(--uds-tab-underline-color,transparent)]", "transition-[height,background-color] duration-[240ms] ease-[cubic-bezier(0.2,0,0,1)]");
-function Tab({ value, children, startIcon, endIcon, disabled, asChild = false, className }) {
+function Tab({ value, children, startIcon, endIcon, disabled, asChild = false, className, slotProps }) {
 	const generatedId = useId();
 	const uid = value ?? `uds-tab-${generatedId}`;
 	const { variant, disableMotion } = useTabsContext();
@@ -37,13 +37,16 @@ function Tab({ value, children, startIcon, endIcon, disabled, asChild = false, c
 	});
 	const tabClass = cx(configClass, "inline-flex items-center shrink-0 box-border relative", !disableMotion && "z-[1]", "cursor-pointer select-none whitespace-nowrap", !disabled && "uds-ring", disabled && "opacity-50 cursor-default pointer-events-none", "border-solid border-b-solid", "transition-colors duration-[240ms] ease-[cubic-bezier(0.2,0,0,1)]", className);
 	const resolvedContent = asChild && isValidElement(children) ? children.props.children ?? null : children;
+	const resolvedRender = asChild && isValidElement(children) ? children : void 0;
+	const showPerTabUnderline = !(activeState === "on" && !disableMotion);
 	return /* @__PURE__ */ jsxs(Tab$1, {
 		id: uid,
 		disabled,
 		className: tabClass,
-		render: asChild && isValidElement(children) ? children : void 0,
+		render: resolvedRender,
+		...slotProps?.root,
 		children: [
-			!(activeState === "on" && !disableMotion) ? /* @__PURE__ */ jsx("div", {
+			showPerTabUnderline ? /* @__PURE__ */ jsx("div", {
 				"aria-hidden": true,
 				className: tabRootUnderlineClassName
 			}) : null,
@@ -53,12 +56,14 @@ function Tab({ value, children, startIcon, endIcon, disabled, asChild = false, c
 					size: "sm",
 					color: "current"
 				},
-				className: iconConfigClass
+				className: iconConfigClass,
+				...slotProps?.startIcon
 			}),
 			/* @__PURE__ */ jsx(Text, {
 				variant: "inherit",
 				as: "span",
 				color: "current",
+				...slotProps?.content,
 				children: resolvedContent
 			}),
 			endIcon && /* @__PURE__ */ jsx(IconSlot, {
@@ -67,7 +72,8 @@ function Tab({ value, children, startIcon, endIcon, disabled, asChild = false, c
 					size: "sm",
 					color: "current"
 				},
-				className: iconConfigClass
+				className: iconConfigClass,
+				...slotProps?.endIcon
 			})
 		]
 	});