@yahoo/uds 3.131.0 → 3.132.1

package/dist/components/client/Badge.cjs

@@ -40,7 +40,10 @@ const MAX_WIDTH_DEFAULT = 200;
 *
 * @related [Chip](https://uds.build/docs/components/chip).
 **/
-const Badge = (0, react.forwardRef)(function Badge({ variant = "primary", size = "md", minWidth, maxWidth = MAX_WIDTH_DEFAULT, startIcon, endIcon, backgroundColor, color, iconColor, borderColor, children, className, ...rest }, ref) {
+const Badge = (0, react.forwardRef)(function Badge({ variant = "primary", size = "md", minWidth, maxWidth = MAX_WIDTH_DEFAULT, startIcon, endIcon, backgroundColor, color, iconColor, borderColor, children, className, slotProps, ...rest }, ref) {
+	const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
+	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
+	const { className: textClassName, ...textSlotProps } = slotProps?.text ?? {};
 	const rootStyles = require_styles_styler.getStyles({
 		badgeSizeRoot: size,
 		badgeVariantRoot: variant,
@@ -86,17 +89,20 @@ const Badge = (0, react.forwardRef)(function Badge({ variant = "primary", size =
 				icon: startIcon,
 				iconProps,
 				"data-testid": "start-icon",
-				className: iconStyles
+				className: require_styles_styler.cx(iconStyles, startIconClassName),
+				...startIconSlotProps
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "flex-1 truncate whitespace-nowrap text-center",
+				className: require_styles_styler.cx("flex-1 truncate whitespace-nowrap text-center", textClassName),
+				...textSlotProps,
 				children
 			}),
 			endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
 				icon: endIcon,
 				iconProps,
 				"data-testid": "end-icon",
-				className: iconStyles
+				className: require_styles_styler.cx(iconStyles, endIconClassName),
+				...endIconSlotProps
 			})
 		]
 	});

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

@@ -1,11 +1,22 @@
 
 import { UniversalBadgeProps } from "../../types/dist/index.cjs";
 import "../../tokens/index.cjs";
+import { IconSlotProps } from "../IconSlot.cjs";
 import React from "react";
 
 //#region src/components/client/Badge.d.ts
 type HtmlDivProps = React.HTMLAttributes<HTMLDivElement>;
-interface BadgeProps extends HtmlDivProps, UniversalBadgeProps {}
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface BadgeProps extends HtmlDivProps, UniversalBadgeProps {
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    startIcon?: Partial<IconSlotProps & DataAttributes>;
+    endIcon?: Partial<IconSlotProps & DataAttributes>;
+    text?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
+  };
+}
 /**
  * **⚙️️ A badge.
  *

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

@@ -2,11 +2,22 @@
 "use client";
 import { UniversalBadgeProps } from "../../types/dist/index.js";
 import "../../tokens/index.js";
+import { IconSlotProps } from "../IconSlot.js";
 import React from "react";
 
 //#region src/components/client/Badge.d.ts
 type HtmlDivProps = React.HTMLAttributes<HTMLDivElement>;
-interface BadgeProps extends HtmlDivProps, UniversalBadgeProps {}
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface BadgeProps extends HtmlDivProps, UniversalBadgeProps {
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    startIcon?: Partial<IconSlotProps & DataAttributes>;
+    endIcon?: Partial<IconSlotProps & DataAttributes>;
+    text?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
+  };
+}
 /**
  * **⚙️️ A badge.
  *

package/dist/components/client/Badge.js

@@ -37,7 +37,10 @@ const MAX_WIDTH_DEFAULT = 200;
 *
 * @related [Chip](https://uds.build/docs/components/chip).
 **/
-const Badge = forwardRef(function Badge({ variant = "primary", size = "md", minWidth, maxWidth = MAX_WIDTH_DEFAULT, startIcon, endIcon, backgroundColor, color, iconColor, borderColor, children, className, ...rest }, ref) {
+const Badge = forwardRef(function Badge({ variant = "primary", size = "md", minWidth, maxWidth = MAX_WIDTH_DEFAULT, startIcon, endIcon, backgroundColor, color, iconColor, borderColor, children, className, slotProps, ...rest }, ref) {
+	const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
+	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
+	const { className: textClassName, ...textSlotProps } = slotProps?.text ?? {};
 	const rootStyles = getStyles({
 		badgeSizeRoot: size,
 		badgeVariantRoot: variant,
@@ -83,17 +86,20 @@ const Badge = forwardRef(function Badge({ variant = "primary", size = "md", minW
 				icon: startIcon,
 				iconProps,
 				"data-testid": "start-icon",
-				className: iconStyles
+				className: cx(iconStyles, startIconClassName),
+				...startIconSlotProps
 			}),
 			/* @__PURE__ */ jsx("span", {
-				className: "flex-1 truncate whitespace-nowrap text-center",
+				className: cx("flex-1 truncate whitespace-nowrap text-center", textClassName),
+				...textSlotProps,
 				children
 			}),
 			endIcon && /* @__PURE__ */ jsx(IconSlot, {
 				icon: endIcon,
 				iconProps,
 				"data-testid": "end-icon",
-				className: iconStyles
+				className: cx(iconStyles, endIconClassName),
+				...endIconSlotProps
 			})
 		]
 	});

package/dist/components/client/Button.cjs

@@ -109,9 +109,12 @@ const defaultSizeIconClass = require_generateDefaultClassName.generateDefaultCla
 *
 * @related [Icon](https://uds.build/docs/components/icon), [IconButton](https://uds.build/docs/components/icon-button), [Pressable](https://uds.build/docs/components/pressable)
 **/
-const Button = (0, react.forwardRef)(function Button({ size, variant, startIcon, endIcon, iconVariant, loading, disableEffects, children, asChild = false, type = "button", className, width, ...rest }, forwardedRef) {
+const Button = (0, react.forwardRef)(function Button({ size, variant, startIcon, endIcon, iconVariant, loading, disableEffects, children, asChild = false, slotProps, type = "button", className, width, ...rest }, forwardedRef) {
 	const ref = (0, react.useRef)(null);
 	(0, react.useImperativeHandle)(forwardedRef, () => ref.current);
+	const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
+	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
+	const { className: contentClassName, ...contentSlotProps } = slotProps?.content ?? {};
 	const prefersReducedMotion = (0, motion_react.useReducedMotion)();
 	const disableMotion = !!disableEffects || !!rest?.disabled;
 	const layoutVariant = prefersReducedMotion ? "smooth" : "subtle";
@@ -205,13 +208,14 @@ const Button = (0, react.forwardRef)(function Button({ size, variant, startIcon,
 				animate: "icon",
 				exit: "hide",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
-					className: styles.icon,
+					className: require_styles_styler.cx(styles.icon, startIconClassName),
 					icon: startIcon,
 					iconProps: {
 						size: require_components_client_buttonConstants.buttonIconSvgSize,
 						variant: iconVariant,
 						color: "current"
-					}
+					},
+					...startIconSlotProps
 				})
 			})]
 		})
@@ -220,7 +224,9 @@ const Button = (0, react.forwardRef)(function Button({ size, variant, startIcon,
 		iconVariant,
 		loading,
 		startIcon,
-		startVariant
+		startVariant,
+		startIconClassName,
+		startIconSlotProps
 	]);
 	const endContent = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
 		className: styles.iconContainer,
@@ -236,13 +242,14 @@ const Button = (0, react.forwardRef)(function Button({ size, variant, startIcon,
 				animate: "icon",
 				exit: "hide",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
-					className: styles.icon,
+					className: require_styles_styler.cx(styles.icon, endIconClassName),
 					icon: endIcon,
 					iconProps: {
 						size: require_components_client_buttonConstants.buttonIconSvgSize,
 						variant: iconVariant,
 						color: "current"
-					}
+					},
+					...endIconSlotProps
 				})
 			})
 		})
@@ -250,7 +257,9 @@ const Button = (0, react.forwardRef)(function Button({ size, variant, startIcon,
 		endIcon,
 		styles,
 		iconVariant,
-		endVariant
+		endVariant,
+		endIconClassName,
+		endIconSlotProps
 	]);
 	if (asChild && (0, react.isValidElement)(children)) {
 		const childProps = children.props;
@@ -273,7 +282,8 @@ const Button = (0, react.forwardRef)(function Button({ size, variant, startIcon,
 				children: (0, react.cloneElement)(children, childProps, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 					startContent,
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: styles.content,
+						className: require_styles_styler.cx(styles.content, contentClassName),
+						...contentSlotProps,
 						children: children.props.children
 					}),
 					endContent
@@ -301,7 +311,8 @@ const Button = (0, react.forwardRef)(function Button({ size, variant, startIcon,
 			children: [
 				startContent,
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: styles.content,
+					className: require_styles_styler.cx(styles.content, contentClassName),
+					...contentSlotProps,
 					children
 				}),
 				endContent

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

@@ -1,5 +1,6 @@
 
 import { UniversalButtonProps } from "../../types/dist/index.cjs";
+import { IconPropsWithSVGProps } from "../../tokens/types.cjs";
 import "../../tokens/index.cjs";
 import React, { ForwardRefExoticComponent } from "react";
 import { HTMLMotionProps } from "motion/react";
@@ -40,7 +41,17 @@ declare const loadingMotionVariants: {
   };
 };
 type HtmlButtonProps = Omit<HTMLMotionProps<'button'>, 'color' | 'name'> & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
-interface ButtonProps extends HtmlButtonProps, UniversalButtonProps {}
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface ButtonProps extends HtmlButtonProps, UniversalButtonProps {
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    content?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
+  };
+}
 /**
  * **🖲️ A button element that can be used to trigger an action**
  *

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

@@ -1,6 +1,7 @@
 
 "use client";
 import { UniversalButtonProps } from "../../types/dist/index.js";
+import { IconPropsWithSVGProps } from "../../tokens/types.js";
 import "../../tokens/index.js";
 import React, { ForwardRefExoticComponent } from "react";
 import { HTMLMotionProps } from "motion/react";
@@ -41,7 +42,17 @@ declare const loadingMotionVariants: {
   };
 };
 type HtmlButtonProps = Omit<HTMLMotionProps<'button'>, 'color' | 'name'> & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
-interface ButtonProps extends HtmlButtonProps, UniversalButtonProps {}
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface ButtonProps extends HtmlButtonProps, UniversalButtonProps {
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    content?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
+  };
+}
 /**
  * **🖲️ A button element that can be used to trigger an action**
  *

package/dist/components/client/Button.js

@@ -106,9 +106,12 @@ const defaultSizeIconClass = generateDefaultClassName("button", "size", "icon");
 *
 * @related [Icon](https://uds.build/docs/components/icon), [IconButton](https://uds.build/docs/components/icon-button), [Pressable](https://uds.build/docs/components/pressable)
 **/
-const Button = forwardRef(function Button({ size, variant, startIcon, endIcon, iconVariant, loading, disableEffects, children, asChild = false, type = "button", className, width, ...rest }, forwardedRef) {
+const Button = forwardRef(function Button({ size, variant, startIcon, endIcon, iconVariant, loading, disableEffects, children, asChild = false, slotProps, type = "button", className, width, ...rest }, forwardedRef) {
 	const ref = useRef(null);
 	useImperativeHandle(forwardedRef, () => ref.current);
+	const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
+	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
+	const { className: contentClassName, ...contentSlotProps } = slotProps?.content ?? {};
 	const prefersReducedMotion = useReducedMotion();
 	const disableMotion = !!disableEffects || !!rest?.disabled;
 	const layoutVariant = prefersReducedMotion ? "smooth" : "subtle";
@@ -202,13 +205,14 @@ const Button = forwardRef(function Button({ size, variant, startIcon, endIcon, i
 				animate: "icon",
 				exit: "hide",
 				children: /* @__PURE__ */ jsx(IconSlot, {
-					className: styles.icon,
+					className: cx(styles.icon, startIconClassName),
 					icon: startIcon,
 					iconProps: {
 						size: buttonIconSvgSize,
 						variant: iconVariant,
 						color: "current"
-					}
+					},
+					...startIconSlotProps
 				})
 			})]
 		})
@@ -217,7 +221,9 @@ const Button = forwardRef(function Button({ size, variant, startIcon, endIcon, i
 		iconVariant,
 		loading,
 		startIcon,
-		startVariant
+		startVariant,
+		startIconClassName,
+		startIconSlotProps
 	]);
 	const endContent = useMemo(() => /* @__PURE__ */ jsx(m.span, {
 		className: styles.iconContainer,
@@ -233,13 +239,14 @@ const Button = forwardRef(function Button({ size, variant, startIcon, endIcon, i
 				animate: "icon",
 				exit: "hide",
 				children: /* @__PURE__ */ jsx(IconSlot, {
-					className: styles.icon,
+					className: cx(styles.icon, endIconClassName),
 					icon: endIcon,
 					iconProps: {
 						size: buttonIconSvgSize,
 						variant: iconVariant,
 						color: "current"
-					}
+					},
+					...endIconSlotProps
 				})
 			})
 		})
@@ -247,7 +254,9 @@ const Button = forwardRef(function Button({ size, variant, startIcon, endIcon, i
 		endIcon,
 		styles,
 		iconVariant,
-		endVariant
+		endVariant,
+		endIconClassName,
+		endIconSlotProps
 	]);
 	if (asChild && isValidElement(children)) {
 		const childProps = children.props;
@@ -270,7 +279,8 @@ const Button = forwardRef(function Button({ size, variant, startIcon, endIcon, i
 				children: cloneElement(children, childProps, /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					startContent,
 					/* @__PURE__ */ jsx("span", {
-						className: styles.content,
+						className: cx(styles.content, contentClassName),
+						...contentSlotProps,
 						children: children.props.children
 					}),
 					endContent
@@ -298,7 +308,8 @@ const Button = forwardRef(function Button({ size, variant, startIcon, endIcon, i
 			children: [
 				startContent,
 				/* @__PURE__ */ jsx("span", {
-					className: styles.content,
+					className: cx(styles.content, contentClassName),
+					...contentSlotProps,
 					children
 				}),
 				endContent

package/dist/components/client/Checkbox.cjs

@@ -58,9 +58,13 @@ const pressTransition = {
 *
 * @related [Radio](https://uds.build/docs/components/radio), [Switch](https://uds.build/docs/components/switch), [Input](https://uds.build/docs/components/input).
 **/
-const Checkbox = (0, react.forwardRef)(function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, disabled, required, hasError, className, style, layerClassNames, ...checkboxProps }, parentRef) {
+const Checkbox = (0, react.forwardRef)(function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, disabled, required, hasError, className, style, slotProps, ...checkboxProps }, parentRef) {
 	const generatedId = (0, react.useId)();
 	const uid = id ?? `uds-input-${generatedId}`;
+	const rootSlotProps = slotProps?.root ?? {};
+	const checkboxSlotProps = slotProps?.checkbox ?? {};
+	const iconSlotProps = slotProps?.icon ?? {};
+	const labelSlotProps = slotProps?.label ?? {};
 	const innerRef = (0, react.useRef)(null);
 	/**
 	* State
@@ -138,13 +142,13 @@ const Checkbox = (0, react.forwardRef)(function Checkbox({ id, checked: checkedP
 				"cursor-pointer": !disabled,
 				"cursor-default": disabled,
 				"opacity-50": disabled
-			}, className, layerClassNames?.root)
+			}, className)
 		}),
 		checkbox: require_styles_styler.getStyles({
 			checkboxSizeCheckbox: size,
 			checkboxVariantCheckbox: variant,
 			checkboxVariantValueCheckbox: valueState,
-			className: require_styles_styler.cx("uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,border-color,box-shadow]", layerClassNames?.checkbox)
+			className: require_styles_styler.cx("uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,border-color,box-shadow]")
 		}),
 		check: require_styles_styler.getStyles({
 			checkboxVariantCheckboxIcon: variant,
@@ -152,7 +156,7 @@ const Checkbox = (0, react.forwardRef)(function Checkbox({ id, checked: checkedP
 			className: require_styles_styler.cx("pointer-events-none", checkOpacity, 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, {
@@ -168,6 +172,7 @@ const Checkbox = (0, react.forwardRef)(function Checkbox({ id, checked: checkedP
 			onTap: handleTapEnd,
 			onTapCancel: handleTapEnd,
 			tabIndex: -1,
+			...rootSlotProps,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
 				position: "relative",
 				className: classNames.checkbox,
@@ -175,6 +180,7 @@ const Checkbox = (0, react.forwardRef)(function Checkbox({ id, checked: checkedP
 				justifyContent: "center",
 				flex: "none",
 				animate: motionAnimate,
+				...checkboxSlotProps,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					type: "checkbox",
 					tabIndex: 0,
@@ -196,7 +202,8 @@ const Checkbox = (0, react.forwardRef)(function Checkbox({ id, checked: checkedP
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
 					name: getIcon(checked),
 					size: "sm",
-					className: classNames.check
+					className: classNames.check,
+					...iconSlotProps
 				})]
 			}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
 				as: "div",
@@ -204,7 +211,8 @@ const Checkbox = (0, react.forwardRef)(function Checkbox({ id, checked: checkedP
 				color: "inherit",
 				required,
 				label,
-				className: classNames.label
+				className: classNames.label,
+				...labelSlotProps
 			})]
 		})
 	});

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

@@ -5,11 +5,16 @@ import React from "react";
 
 //#region src/components/client/Checkbox.d.ts
 type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface CheckboxProps extends NativeInputProps, UniversalCheckboxProps {
-  layerClassNames?: {
-    root?: string;
-    checkbox?: string;
-    label?: string;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: DataAttributes;
+    checkbox?: DataAttributes;
+    icon?: DataAttributes;
+    label?: DataAttributes;
   };
 }
 declare const VARIANTS: ("primary" | "secondary")[];

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

@@ -6,11 +6,16 @@ import React from "react";
 
 //#region src/components/client/Checkbox.d.ts
 type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface CheckboxProps extends NativeInputProps, UniversalCheckboxProps {
-  layerClassNames?: {
-    root?: string;
-    checkbox?: string;
-    label?: string;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: DataAttributes;
+    checkbox?: DataAttributes;
+    icon?: DataAttributes;
+    label?: DataAttributes;
   };
 }
 declare const VARIANTS: ("primary" | "secondary")[];

package/dist/components/client/Checkbox.js

@@ -55,9 +55,13 @@ const pressTransition = {
 *
 * @related [Radio](https://uds.build/docs/components/radio), [Switch](https://uds.build/docs/components/switch), [Input](https://uds.build/docs/components/input).
 **/
-const Checkbox = forwardRef(function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, disabled, required, hasError, className, style, layerClassNames, ...checkboxProps }, parentRef) {
+const Checkbox = forwardRef(function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, disabled, required, hasError, className, style, slotProps, ...checkboxProps }, parentRef) {
 	const generatedId = useId();
 	const uid = id ?? `uds-input-${generatedId}`;
+	const rootSlotProps = slotProps?.root ?? {};
+	const checkboxSlotProps = slotProps?.checkbox ?? {};
+	const iconSlotProps = slotProps?.icon ?? {};
+	const labelSlotProps = slotProps?.label ?? {};
 	const innerRef = useRef(null);
 	/**
 	* State
@@ -135,13 +139,13 @@ const Checkbox = forwardRef(function Checkbox({ id, checked: checkedProp, defaul
 				"cursor-pointer": !disabled,
 				"cursor-default": disabled,
 				"opacity-50": disabled
-			}, className, layerClassNames?.root)
+			}, className)
 		}),
 		checkbox: getStyles({
 			checkboxSizeCheckbox: size,
 			checkboxVariantCheckbox: variant,
 			checkboxVariantValueCheckbox: valueState,
-			className: cx("uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,border-color,box-shadow]", layerClassNames?.checkbox)
+			className: cx("uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,border-color,box-shadow]")
 		}),
 		check: getStyles({
 			checkboxVariantCheckboxIcon: variant,
@@ -149,7 +153,7 @@ const Checkbox = forwardRef(function Checkbox({ id, checked: checkedProp, defaul
 			className: cx("pointer-events-none", checkOpacity, 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, {
@@ -165,6 +169,7 @@ const Checkbox = forwardRef(function Checkbox({ id, checked: checkedProp, defaul
 			onTap: handleTapEnd,
 			onTapCancel: handleTapEnd,
 			tabIndex: -1,
+			...rootSlotProps,
 			children: [/* @__PURE__ */ jsxs(MotionBox, {
 				position: "relative",
 				className: classNames.checkbox,
@@ -172,6 +177,7 @@ const Checkbox = forwardRef(function Checkbox({ id, checked: checkedProp, defaul
 				justifyContent: "center",
 				flex: "none",
 				animate: motionAnimate,
+				...checkboxSlotProps,
 				children: [/* @__PURE__ */ jsx("input", {
 					type: "checkbox",
 					tabIndex: 0,
@@ -193,7 +199,8 @@ const Checkbox = forwardRef(function Checkbox({ id, checked: checkedProp, defaul
 				}), /* @__PURE__ */ jsx(Icon, {
 					name: getIcon(checked),
 					size: "sm",
-					className: classNames.check
+					className: classNames.check,
+					...iconSlotProps
 				})]
 			}), label && /* @__PURE__ */ jsx(FormLabel, {
 				as: "div",
@@ -201,7 +208,8 @@ const Checkbox = forwardRef(function Checkbox({ id, checked: checkedProp, defaul
 				color: "inherit",
 				required,
 				label,
-				className: classNames.label
+				className: classNames.label,
+				...labelSlotProps
 			})]
 		})
 	});

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

@@ -8,7 +8,7 @@ import React from "react";
 type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;
 interface ChipProps extends UniversalChipProps, HtmlDivProps {
   slotProps?: ChipBaseProps['slotProps'] & {
-    anchor: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'type'>;
+    anchor?: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'type'>;
   };
 }
 /**

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

@@ -9,7 +9,7 @@ import React from "react";
 type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;
 interface ChipProps extends UniversalChipProps, HtmlDivProps {
   slotProps?: ChipBaseProps['slotProps'] & {
-    anchor: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'type'>;
+    anchor?: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'type'>;
   };
 }
 /**

package/dist/components/client/IconButton.cjs

@@ -45,9 +45,10 @@ const defaultVariantIconClass = require_generateDefaultClassName.generateDefault
 * @related [Icon](https://uds.build/docs/components/icon), [Button](https://uds.build/docs/components/button), and [Pressable](https://uds.build/docs/components/pressable)
 *
 **/
-const IconButton = (0, react.forwardRef)(function IconButton({ variant, size, iconVariant, loading, disableEffects, name, type = "button", htmlName, className, children, ...rest }, forwardedRef) {
+const IconButton = (0, react.forwardRef)(function IconButton({ variant, size, iconVariant, loading, disableEffects, name, slotProps, type = "button", htmlName, className, children, ...rest }, forwardedRef) {
 	const ref = (0, react.useRef)(null);
 	(0, react.useImperativeHandle)(forwardedRef, () => ref.current);
+	const { className: iconSlotClassName, ...iconSlotProps } = slotProps?.icon ?? {};
 	const prefersReducedMotion = (0, motion_react.useReducedMotion)();
 	const disableMotion = !!disableEffects || !!rest?.disabled;
 	const layoutVariant = (0, react.useMemo)(() => prefersReducedMotion ? "smooth" : "subtle", [prefersReducedMotion]);
@@ -117,7 +118,8 @@ const IconButton = (0, react.forwardRef)(function IconButton({ variant, size, ic
 						name,
 						variant: iconVariant,
 						color: "current",
-						className: styles.icon
+						className: require_styles_styler.cx(styles.icon, iconSlotClassName),
+						...iconSlotProps
 					})
 				}, name.name)]
 			})

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

@@ -1,12 +1,20 @@
 
-import { UniversalIconButtonProps } from "../../tokens/types.cjs";
+import { IconPropsWithSVGProps, UniversalIconButtonProps } from "../../tokens/types.cjs";
 import "../../tokens/index.cjs";
 import * as react from "react";
 import { HTMLMotionProps } from "motion/react";
 
 //#region src/components/client/IconButton.d.ts
 type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'> & Omit<HTMLMotionProps<'button'>, 'name'>;
-interface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {}
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    icon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+}
 /**
  * **⚙️️ An icon button element that can be used to trigger an action**
  *

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

@@ -1,13 +1,21 @@
 
 "use client";
-import { UniversalIconButtonProps } from "../../tokens/types.js";
+import { IconPropsWithSVGProps, UniversalIconButtonProps } from "../../tokens/types.js";
 import "../../tokens/index.js";
 import * as react from "react";
 import { HTMLMotionProps } from "motion/react";
 
 //#region src/components/client/IconButton.d.ts
 type HtmlButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'name'> & Omit<HTMLMotionProps<'button'>, 'name'>;
-interface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {}
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface IconButtonProps extends HtmlButtonProps, UniversalIconButtonProps {
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    icon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+}
 /**
  * **⚙️️ An icon button element that can be used to trigger an action**
  *