@yahoo/uds 3.131.0 → 3.132.1

package/dist/components/client/IconButton.js

@@ -43,9 +43,10 @@ const defaultVariantIconClass = generateDefaultClassName("button", "variant", "i
 * @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 = forwardRef(function IconButton({ variant, size, iconVariant, loading, disableEffects, name, type = "button", htmlName, className, children, ...rest }, forwardedRef) {
+const IconButton = forwardRef(function IconButton({ variant, size, iconVariant, loading, disableEffects, name, slotProps, type = "button", htmlName, className, children, ...rest }, forwardedRef) {
 	const ref = useRef(null);
 	useImperativeHandle(forwardedRef, () => ref.current);
+	const { className: iconSlotClassName, ...iconSlotProps } = slotProps?.icon ?? {};
 	const prefersReducedMotion = useReducedMotion();
 	const disableMotion = !!disableEffects || !!rest?.disabled;
 	const layoutVariant = useMemo(() => prefersReducedMotion ? "smooth" : "subtle", [prefersReducedMotion]);
@@ -115,7 +116,8 @@ const IconButton = forwardRef(function IconButton({ variant, size, iconVariant,
 						name,
 						variant: iconVariant,
 						color: "current",
-						className: styles.icon
+						className: cx(styles.icon, iconSlotClassName),
+						...iconSlotProps
 					})
 				}, name.name)]
 			})

package/dist/components/client/Input/Input.cjs

@@ -16,7 +16,7 @@ lodash_isFunction_js = require_runtime.__toESM(lodash_isFunction_js);
 let motion_react = require("motion/react");
 
 //#region src/components/client/Input/Input.tsx
-const HelpTextContent = (0, react.memo)(function HelpTextContentOriginal({ helpText, helperTextIcon, spacingStart, spacingTop, size, isFilled, ...rest }) {
+const HelpTextContent = (0, react.memo)(function HelpTextContentOriginal({ helpText, helperTextIcon, spacingStart, spacingTop, size, isFilled, helperTextSlotProps, ...rest }) {
 	if (!helpText) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
 		spacingTop,
@@ -26,6 +26,10 @@ const HelpTextContent = (0, react.memo)(function HelpTextContentOriginal({ helpT
 			startIcon: helperTextIcon,
 			size,
 			isFilled,
+			slotProps: {
+				startIcon: helperTextSlotProps?.helperTextIcon,
+				text: helperTextSlotProps?.helperText
+			},
 			children: (0, lodash_isFunction_js.default)(helpText) ? helpText() : helpText
 		})
 	});
@@ -79,7 +83,7 @@ const EndIcon = (0, react.memo)(function EndIcon({ icon, className, iconProps })
 *
 * @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).
 **/
-const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, slotProps, style, className, ...otherProps }, forwardedRef) {
+const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, value: valueProp, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, slotProps, style, className, ...otherProps }, forwardedRef) {
 	const generatedId = (0, react.useId)();
 	const uid = id ?? `uds-input-${generatedId}`;
 	const helpTextId = `uds-input-${uid}-help-text`;
@@ -87,11 +91,15 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
 	const { className: inputWrapperClassName, ...inputWrapperProps } = slotProps?.inputWrapper ?? {};
 	const ref = (0, react.useRef)(null);
 	(0, react.useImperativeHandle)(forwardedRef, () => ref.current);
-	const [value, setValue] = (0, react.useState)(defaultValue ?? "");
+	const isControlled = valueProp !== void 0;
+	const [value, setValue] = (0, react.useState)(isControlled ? valueProp : defaultValue ?? "");
+	(0, react.useEffect)(() => {
+		if (isControlled) setValue(valueProp);
+	}, [valueProp, isControlled]);
 	const handleChange = (0, react.useCallback)((e) => {
-		setValue(e.target.value);
+		if (!isControlled) setValue(e.target.value);
 		onChange?.(e);
-	}, [onChange]);
+	}, [isControlled, onChange]);
 	const layoutVariant = (0, motion_react.useReducedMotion)() ? "smooth" : "bouncy";
 	const reduceMotion = forceReduceMotion ? "always" : "user";
 	const isInteractive = !readOnly && !disabled;
@@ -147,6 +155,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
 				className: classNames.label,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 					htmlFor: uid,
+					...slotProps?.label,
 					children: (0, lodash_isFunction_js.default)(label) ? label() : label
 				}), required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: classNames.labelRequired,
@@ -199,7 +208,8 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
 					spacingTop: "2",
 					size,
 					isFilled: !!value,
-					helperTextIcon
+					helperTextIcon,
+					helperTextSlotProps: slotProps
 				})
 			})
 		]

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

@@ -24,6 +24,9 @@ interface InputProps extends NativeInputProps, UniversalInputProps {
     inputWrapper?: Partial<BoxProps & DataAttributes>;
     startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
     endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    label?: Partial<React.LabelHTMLAttributes<HTMLLabelElement> & DataAttributes>;
+    helperText?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
+    helperTextIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
   };
 }
 /**

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

@@ -25,6 +25,9 @@ interface InputProps extends NativeInputProps, UniversalInputProps {
     inputWrapper?: Partial<BoxProps & DataAttributes>;
     startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
     endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    label?: Partial<React.LabelHTMLAttributes<HTMLLabelElement> & DataAttributes>;
+    helperText?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
+    helperTextIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
   };
 }
 /**

package/dist/components/client/Input/Input.js

@@ -7,13 +7,13 @@ import { HStack } from "../../HStack.js";
 import { VStack } from "../../VStack.js";
 import { AnimateHeightChange } from "../AnimateHeightChange.js";
 import { InputHelpTextInternal as InputHelpTextInternalMemo } from "./InputHelpTextInternal.js";
-import { forwardRef, memo, useCallback, useId, useImperativeHandle, useRef, useState } from "react";
+import { forwardRef, memo, useCallback, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { isFunction } from "lodash-es";
 import { useReducedMotion } from "motion/react";
 
 //#region src/components/client/Input/Input.tsx
-const HelpTextContent = memo(function HelpTextContentOriginal({ helpText, helperTextIcon, spacingStart, spacingTop, size, isFilled, ...rest }) {
+const HelpTextContent = memo(function HelpTextContentOriginal({ helpText, helperTextIcon, spacingStart, spacingTop, size, isFilled, helperTextSlotProps, ...rest }) {
 	if (!helpText) return null;
 	return /* @__PURE__ */ jsx(Box, {
 		spacingTop,
@@ -23,6 +23,10 @@ const HelpTextContent = memo(function HelpTextContentOriginal({ helpText, helper
 			startIcon: helperTextIcon,
 			size,
 			isFilled,
+			slotProps: {
+				startIcon: helperTextSlotProps?.helperTextIcon,
+				text: helperTextSlotProps?.helperText
+			},
 			children: isFunction(helpText) ? helpText() : helpText
 		})
 	});
@@ -76,7 +80,7 @@ const EndIcon = memo(function EndIcon({ icon, className, iconProps }) {
 *
 * @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).
 **/
-const Input = forwardRef(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, slotProps, style, className, ...otherProps }, forwardedRef) {
+const Input = forwardRef(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, value: valueProp, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, slotProps, style, className, ...otherProps }, forwardedRef) {
 	const generatedId = useId();
 	const uid = id ?? `uds-input-${generatedId}`;
 	const helpTextId = `uds-input-${uid}-help-text`;
@@ -84,11 +88,15 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
 	const { className: inputWrapperClassName, ...inputWrapperProps } = slotProps?.inputWrapper ?? {};
 	const ref = useRef(null);
 	useImperativeHandle(forwardedRef, () => ref.current);
-	const [value, setValue] = useState(defaultValue ?? "");
+	const isControlled = valueProp !== void 0;
+	const [value, setValue] = useState(isControlled ? valueProp : defaultValue ?? "");
+	useEffect(() => {
+		if (isControlled) setValue(valueProp);
+	}, [valueProp, isControlled]);
 	const handleChange = useCallback((e) => {
-		setValue(e.target.value);
+		if (!isControlled) setValue(e.target.value);
 		onChange?.(e);
-	}, [onChange]);
+	}, [isControlled, onChange]);
 	const layoutVariant = useReducedMotion() ? "smooth" : "bouncy";
 	const reduceMotion = forceReduceMotion ? "always" : "user";
 	const isInteractive = !readOnly && !disabled;
@@ -144,6 +152,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
 				className: classNames.label,
 				children: [/* @__PURE__ */ jsx("label", {
 					htmlFor: uid,
+					...slotProps?.label,
 					children: isFunction(label) ? label() : label
 				}), required && /* @__PURE__ */ jsx("span", {
 					className: classNames.labelRequired,
@@ -196,7 +205,8 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
 					spacingTop: "2",
 					size,
 					isFilled: !!value,
-					helperTextIcon
+					helperTextIcon,
+					helperTextSlotProps: slotProps
 				})
 			})
 		]

package/dist/components/client/Input/InputHelpTextInternal.cjs

@@ -9,7 +9,7 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/client/Input/InputHelpTextInternal.tsx
-const InputHelpTextInternal = (0, react.forwardRef)(function InputHelpTextInternal({ startIcon, endIcon, iconProps, children, size, isFilled, ...rest }, ref) {
+const InputHelpTextInternal = (0, react.forwardRef)(function InputHelpTextInternal({ startIcon, endIcon, iconProps, children, size, isFilled, slotProps, ...rest }, ref) {
 	const defaultIconProps = { variant: "outline" };
 	const classNames = {
 		helperText: require_styles_styler.cx(require_styles_styler.getStyles({
@@ -23,6 +23,9 @@ const InputHelpTextInternal = (0, react.forwardRef)(function InputHelpTextIntern
 			inputVariantValueHelperIcon: !isFilled ? "empty" : "filled"
 		})
 	};
+	const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
+	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
+	const { className: textClassName, ...textSlotProps } = slotProps?.text ?? {};
 	const props = {
 		...defaultIconProps,
 		...iconProps
@@ -36,18 +39,25 @@ const InputHelpTextInternal = (0, react.forwardRef)(function InputHelpTextIntern
 			startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
 				icon: startIcon,
 				...props,
-				iconProps,
-				className: classNames.helperIcon
+				iconProps: {
+					...iconProps,
+					...startIconSlotProps
+				},
+				className: require_styles_styler.cx(classNames.helperIcon, startIconClassName)
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: classNames.helperText,
+				className: require_styles_styler.cx(classNames.helperText, textClassName),
+				...textSlotProps,
 				children
 			}),
 			endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
 				icon: endIcon,
 				...props,
-				iconProps,
-				className: classNames.helperIcon
+				iconProps: {
+					...iconProps,
+					...endIconSlotProps
+				},
+				className: require_styles_styler.cx(classNames.helperIcon, endIconClassName)
 			})
 		]
 	});

package/dist/components/client/Input/InputHelpTextInternal.d.cts

@@ -1,5 +1,6 @@
 
 import { UniversalIconSlot } from "../../../types/dist/index.cjs";
+import { IconPropsWithSVGProps } from "../../../tokens/types.cjs";
 import "../../../tokens/index.cjs";
 import { IconProps } from "../../Icon.cjs";
 import { InputProps } from "./Input.cjs";
@@ -7,6 +8,9 @@ import * as react from "react";
 import { PropsWithChildren } from "react";
 
 //#region src/components/client/Input/InputHelpTextInternal.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface InputHelpTextInternalProps extends PropsWithChildren {
   /** Icon to render at the start of the content */
   startIcon?: UniversalIconSlot;
@@ -19,6 +23,12 @@ interface InputHelpTextInternalProps extends PropsWithChildren {
   iconProps?: Pick<IconProps, 'color' | 'size' | 'variant'>;
   size?: InputProps['size'];
   isFilled?: boolean;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    text?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
+  };
 }
 declare const InputHelpTextInternalMemo: react.NamedExoticComponent<InputHelpTextInternalProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion

package/dist/components/client/Input/InputHelpTextInternal.d.ts

@@ -1,6 +1,7 @@
 
 "use client";
 import { UniversalIconSlot } from "../../../types/dist/index.js";
+import { IconPropsWithSVGProps } from "../../../tokens/types.js";
 import "../../../tokens/index.js";
 import { IconProps } from "../../Icon.js";
 import { InputProps } from "./Input.js";
@@ -8,6 +9,9 @@ import * as react from "react";
 import { PropsWithChildren } from "react";
 
 //#region src/components/client/Input/InputHelpTextInternal.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface InputHelpTextInternalProps extends PropsWithChildren {
   /** Icon to render at the start of the content */
   startIcon?: UniversalIconSlot;
@@ -20,6 +24,12 @@ interface InputHelpTextInternalProps extends PropsWithChildren {
   iconProps?: Pick<IconProps, 'color' | 'size' | 'variant'>;
   size?: InputProps['size'];
   isFilled?: boolean;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    text?: Partial<React.HTMLAttributes<HTMLSpanElement> & DataAttributes>;
+  };
 }
 declare const InputHelpTextInternalMemo: react.NamedExoticComponent<InputHelpTextInternalProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion

package/dist/components/client/Input/InputHelpTextInternal.js

@@ -7,7 +7,7 @@ import { forwardRef, memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/client/Input/InputHelpTextInternal.tsx
-const InputHelpTextInternal = forwardRef(function InputHelpTextInternal({ startIcon, endIcon, iconProps, children, size, isFilled, ...rest }, ref) {
+const InputHelpTextInternal = forwardRef(function InputHelpTextInternal({ startIcon, endIcon, iconProps, children, size, isFilled, slotProps, ...rest }, ref) {
 	const defaultIconProps = { variant: "outline" };
 	const classNames = {
 		helperText: cx(getStyles({
@@ -21,6 +21,9 @@ const InputHelpTextInternal = forwardRef(function InputHelpTextInternal({ startI
 			inputVariantValueHelperIcon: !isFilled ? "empty" : "filled"
 		})
 	};
+	const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
+	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
+	const { className: textClassName, ...textSlotProps } = slotProps?.text ?? {};
 	const props = {
 		...defaultIconProps,
 		...iconProps
@@ -34,18 +37,25 @@ const InputHelpTextInternal = forwardRef(function InputHelpTextInternal({ startI
 			startIcon && /* @__PURE__ */ jsx(IconSlot, {
 				icon: startIcon,
 				...props,
-				iconProps,
-				className: classNames.helperIcon
+				iconProps: {
+					...iconProps,
+					...startIconSlotProps
+				},
+				className: cx(classNames.helperIcon, startIconClassName)
 			}),
 			/* @__PURE__ */ jsx("span", {
-				className: classNames.helperText,
+				className: cx(classNames.helperText, textClassName),
+				...textSlotProps,
 				children
 			}),
 			endIcon && /* @__PURE__ */ jsx(IconSlot, {
 				icon: endIcon,
 				...props,
-				iconProps,
-				className: classNames.helperIcon
+				iconProps: {
+					...iconProps,
+					...endIconSlotProps
+				},
+				className: cx(classNames.helperIcon, endIconClassName)
 			})
 		]
 	});

package/dist/components/client/Menu/Menu.Content.cjs

@@ -94,7 +94,7 @@ const useMenuAnimationVariants = (placement) => {
 *
 * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
 **/
-const MenuContent = (0, react.forwardRef)(function MenuContent({ size = "default", variant = "default", gutter = "1", overflow, className, sameWidth, focusable, children, portalElement, portal = true, disableAutoBorderRadius, nestedBorderRadius = !disableAutoBorderRadius, nestedBorderRadiusSize, nestedBorderRadiusSpacing, nestedBorderRadiusWidth, ...props }, ref) {
+const MenuContent = (0, react.forwardRef)(function MenuContent({ size = "default", variant = "default", gutter = "1", overflow, className, slotProps, sameWidth, focusable, children, portalElement, portal = true, disableAutoBorderRadius, nestedBorderRadius = !disableAutoBorderRadius, nestedBorderRadiusSize, nestedBorderRadiusSpacing, nestedBorderRadiusWidth, ...props }, ref) {
 	const context = (0, _ariakit_react_menu.useMenuContext)();
 	const open = (0, _ariakit_react.useStoreState)(context, "open");
 	const mounted = (0, _ariakit_react.useStoreState)(context, "mounted");
@@ -146,6 +146,7 @@ const MenuContent = (0, react.forwardRef)(function MenuContent({ size = "default
 				nestedBorderRadiusSpacing,
 				nestedBorderRadiusWidth,
 				className: classNames.root,
+				...slotProps?.root,
 				children
 			})
 		})

package/dist/components/client/Menu/Menu.Content.d.cts

@@ -6,6 +6,9 @@ import * as react from "react";
 import { MenuProps } from "@ariakit/react/menu";
 
 //#region src/components/client/Menu/Menu.Content.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface MenuContentProps extends Omit<VStackProps, 'asChild'> {
   /**
    * Controls spacing-related properties (border radius, border width, shadow, spacing, gap)
@@ -18,6 +21,10 @@ interface MenuContentProps extends Omit<VStackProps, 'asChild'> {
    */
   variant?: 'default';
   gutter?: SpacingAlias;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: DataAttributes;
+  };
   /** UDS handles nested border radius for the first and last item for you to prevent clipping and visual jank.
    *  If you need to disable this, set this prop to true.
    *

package/dist/components/client/Menu/Menu.Content.d.ts

@@ -7,6 +7,9 @@ import * as react from "react";
 import { MenuProps } from "@ariakit/react/menu";
 
 //#region src/components/client/Menu/Menu.Content.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface MenuContentProps extends Omit<VStackProps, 'asChild'> {
   /**
    * Controls spacing-related properties (border radius, border width, shadow, spacing, gap)
@@ -19,6 +22,10 @@ interface MenuContentProps extends Omit<VStackProps, 'asChild'> {
    */
   variant?: 'default';
   gutter?: SpacingAlias;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: DataAttributes;
+  };
   /** UDS handles nested border radius for the first and last item for you to prevent clipping and visual jank.
    *  If you need to disable this, set this prop to true.
    *

package/dist/components/client/Menu/Menu.Content.js

@@ -92,7 +92,7 @@ const useMenuAnimationVariants = (placement) => {
 *
 * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
 **/
-const MenuContent = forwardRef(function MenuContent({ size = "default", variant = "default", gutter = "1", overflow, className, sameWidth, focusable, children, portalElement, portal = true, disableAutoBorderRadius, nestedBorderRadius = !disableAutoBorderRadius, nestedBorderRadiusSize, nestedBorderRadiusSpacing, nestedBorderRadiusWidth, ...props }, ref) {
+const MenuContent = forwardRef(function MenuContent({ size = "default", variant = "default", gutter = "1", overflow, className, slotProps, sameWidth, focusable, children, portalElement, portal = true, disableAutoBorderRadius, nestedBorderRadius = !disableAutoBorderRadius, nestedBorderRadiusSize, nestedBorderRadiusSpacing, nestedBorderRadiusWidth, ...props }, ref) {
 	const context = useMenuContext();
 	const open = useStoreState(context, "open");
 	const mounted = useStoreState(context, "mounted");
@@ -144,6 +144,7 @@ const MenuContent = forwardRef(function MenuContent({ size = "default", variant
 				nestedBorderRadiusSpacing,
 				nestedBorderRadiusWidth,
 				className: classNames.root,
+				...slotProps?.root,
 				children
 			})
 		})

package/dist/components/client/Menu/Menu.Divider.cjs

@@ -47,14 +47,6 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item), [Divider](https://uds.build/docs/components/divider)
 **/
 const MenuDivider = (0, react.forwardRef)(function MenuDivider({ role = "separator", contentPosition = "start", gap = "4", children, spacingVertical = children ? "2" : "0", spacingHorizontal = children ? "4" : "0", className, ...props }, ref) {
-	const layerClassNames = {
-		root: require_styles_styler.getStyles({
-			menuitemDividerVariantRoot: "default",
-			className
-		}),
-		text: require_styles_styler.getStyles({ menuitemDividerVariantText: "default" }),
-		line: require_styles_styler.getStyles({ menuitemDividerVariantLine: "default" })
-	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Divider_DividerInternal.DividerInternal, {
 		ref,
 		role,
@@ -63,8 +55,14 @@ const MenuDivider = (0, react.forwardRef)(function MenuDivider({ role = "separat
 		gap,
 		spacingVertical,
 		spacingHorizontal,
-		className: layerClassNames.root,
-		layerClassNames,
+		slotProps: {
+			root: { className: require_styles_styler.getStyles({
+				menuitemDividerVariantRoot: "default",
+				className
+			}) },
+			label: { className: require_styles_styler.getStyles({ menuitemDividerVariantText: "default" }) },
+			line: { className: require_styles_styler.getStyles({ menuitemDividerVariantLine: "default" }) }
+		},
 		...props,
 		children
 	});

package/dist/components/client/Menu/Menu.Divider.js

@@ -45,14 +45,6 @@ import { jsx } from "react/jsx-runtime";
 * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item), [Divider](https://uds.build/docs/components/divider)
 **/
 const MenuDivider = forwardRef(function MenuDivider({ role = "separator", contentPosition = "start", gap = "4", children, spacingVertical = children ? "2" : "0", spacingHorizontal = children ? "4" : "0", className, ...props }, ref) {
-	const layerClassNames = {
-		root: getStyles({
-			menuitemDividerVariantRoot: "default",
-			className
-		}),
-		text: getStyles({ menuitemDividerVariantText: "default" }),
-		line: getStyles({ menuitemDividerVariantLine: "default" })
-	};
 	return /* @__PURE__ */ jsx(DividerInternal, {
 		ref,
 		role,
@@ -61,8 +53,14 @@ const MenuDivider = forwardRef(function MenuDivider({ role = "separator", conten
 		gap,
 		spacingVertical,
 		spacingHorizontal,
-		className: layerClassNames.root,
-		layerClassNames,
+		slotProps: {
+			root: { className: getStyles({
+				menuitemDividerVariantRoot: "default",
+				className
+			}) },
+			label: { className: getStyles({ menuitemDividerVariantText: "default" }) },
+			line: { className: getStyles({ menuitemDividerVariantLine: "default" }) }
+		},
 		...props,
 		children
 	});

package/dist/components/client/Menu/Menu.Item.cjs

@@ -52,24 +52,33 @@ let _ariakit_react_menu = require("@ariakit/react/menu");
 *
 * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
 **/
-const MenuItem = (0, react.forwardRef)(function MenuItem({ active, hideOnClick, ...props }, ref) {
+const MenuItem = (0, react.forwardRef)(function MenuItem({ active, hideOnClick, slotProps, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Menu_Menu_ItemBase.MenuItemBase, {
 		ref,
 		as: _ariakit_react_menu.MenuItem,
 		active,
-		layerClassNames: {
-			root: require_styles_styler.getStyles({
-				menuitemItemVariantRoot: "default",
-				menuitemItemVariantActiveRoot: active ? "on" : "off"
-			}),
-			text: require_styles_styler.getStyles({
-				menuitemItemVariantText: "default",
-				menuitemItemVariantActiveText: active ? "on" : "off"
-			}),
-			startIcon: require_styles_styler.getStyles({
-				menuitemItemVariantIcon: "default",
-				menuitemItemVariantActiveIcon: active ? "on" : "off"
-			})
+		slotProps: {
+			root: {
+				className: require_styles_styler.cx(require_styles_styler.getStyles({
+					menuitemItemVariantRoot: "default",
+					menuitemItemVariantActiveRoot: active ? "on" : "off"
+				}), slotProps?.root?.className),
+				...slotProps?.root
+			},
+			text: {
+				className: require_styles_styler.cx(require_styles_styler.getStyles({
+					menuitemItemVariantText: "default",
+					menuitemItemVariantActiveText: active ? "on" : "off"
+				}), slotProps?.text?.className),
+				...slotProps?.text
+			},
+			startIcon: {
+				className: require_styles_styler.cx(require_styles_styler.getStyles({
+					menuitemItemVariantIcon: "default",
+					menuitemItemVariantActiveIcon: active ? "on" : "off"
+				}), slotProps?.startIcon?.className),
+				...slotProps?.startIcon
+			}
 		},
 		rootProps: { hideOnClick },
 		...props

package/dist/components/client/Menu/Menu.Item.d.cts

@@ -1,5 +1,6 @@
 
 import { UniversalMenuItemProps } from "../../../types/dist/index.cjs";
+import { IconPropsWithSVGProps } from "../../../tokens/types.cjs";
 import "../../../tokens/index.cjs";
 import { PressableProps } from "../Pressable.cjs";
 import * as react from "react";
@@ -7,6 +8,9 @@ import { AriaRole } from "react";
 import { MenuItemProps as MenuItemProps$1 } from "@ariakit/react/menu";
 
 //#region src/components/client/Menu/Menu.Item.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface MenuItemProps extends Omit<PressableProps, 'asChild'>, Omit<UniversalMenuItemProps, 'name'> {
   /**
    * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
@@ -30,6 +34,13 @@ interface MenuItemProps extends Omit<PressableProps, 'asChild'>, Omit<UniversalM
    * @default 'menuitem'
    */
   role?: AriaRole;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    text?: Partial<Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> & DataAttributes>;
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
 }
 /**
  * **📋 A Menu Item component for navigation and actions**

package/dist/components/client/Menu/Menu.Item.d.ts

@@ -1,6 +1,7 @@
 
 "use client";
 import { UniversalMenuItemProps } from "../../../types/dist/index.js";
+import { IconPropsWithSVGProps } from "../../../tokens/types.js";
 import "../../../tokens/index.js";
 import { PressableProps } from "../Pressable.js";
 import * as react from "react";
@@ -8,6 +9,9 @@ import { AriaRole } from "react";
 import { MenuItemProps as MenuItemProps$1 } from "@ariakit/react/menu";
 
 //#region src/components/client/Menu/Menu.Item.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface MenuItemProps extends Omit<PressableProps, 'asChild'>, Omit<UniversalMenuItemProps, 'name'> {
   /**
    * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
@@ -31,6 +35,13 @@ interface MenuItemProps extends Omit<PressableProps, 'asChild'>, Omit<UniversalM
    * @default 'menuitem'
    */
   role?: AriaRole;
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    root?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
+    text?: Partial<Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> & DataAttributes>;
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
 }
 /**
  * **📋 A Menu Item component for navigation and actions**