@yahoo/uds 3.131.0-beta.2 → 3.132.0

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**
  *

package/dist/components/client/IconButton.js

@@ -10,7 +10,6 @@ import { iconMotionVariants, loadingMotionVariants } from "./Button.js";
 import { Progress } from "@yahoo/uds-icons";
 import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { getIconName, isIconDefinition } from "@yahoo/uds-icons/utils";
 import { AnimatePresence, m, useReducedMotion } from "motion/react";
 
 //#region src/components/client/IconButton.tsx
@@ -18,10 +17,6 @@ const defaultSizeRootClass = generateDefaultClassName("iconbutton", "size", "roo
 const defaultSizeIconClass = generateDefaultClassName("iconbutton", "size", "icon");
 const defaultVariantRootClass = generateDefaultClassName("button", "variant", "root");
 const defaultVariantIconClass = generateDefaultClassName("button", "variant", "icon");
-function getIconMotionKey(icon) {
-	if (isIconDefinition(icon)) return getIconName(icon);
-	return "icon";
-}
 /**
 * **⚙️️ An icon button element that can be used to trigger an action**
 *
@@ -48,9 +43,10 @@ function getIconMotionKey(icon) {
 * @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]);
@@ -120,9 +116,10 @@ const IconButton = forwardRef(function IconButton({ variant, size, iconVariant,
 						name,
 						variant: iconVariant,
 						color: "current",
-						className: styles.icon
+						className: cx(styles.icon, iconSlotClassName),
+						...iconSlotProps
 					})
-				}, getIconMotionKey(name))]
+				}, 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
 		})
 	});
@@ -147,6 +151,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 +204,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

@@ -1,5 +1,5 @@
 
-import { UniversalInputProps } from "../../../types/src/index.cjs";
+import { UniversalInputProps } from "../../../types/dist/index.cjs";
 import { IconPropsWithSVGProps } from "../../../tokens/types.cjs";
 import "../../../tokens/index.cjs";
 import { BoxProps } from "../../Box.cjs";
@@ -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

@@ -1,6 +1,6 @@
 
 "use client";
-import { UniversalInputProps } from "../../../types/src/index.js";
+import { UniversalInputProps } from "../../../types/dist/index.js";
 import { IconPropsWithSVGProps } from "../../../tokens/types.js";
 import "../../../tokens/index.js";
 import { BoxProps } from "../../Box.js";
@@ -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

@@ -13,7 +13,7 @@ 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
 		})
 	});
@@ -144,6 +148,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 +201,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/src/index.cjs";
+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/src/index.js";
+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

@@ -1,11 +1,14 @@
 
-import { SpacingAlias } from "../../../types/src/index.cjs";
+import { SpacingAlias } from "../../../types/dist/index.cjs";
 import "../../../tokens/index.cjs";
 import { VStackProps } from "../../VStack.cjs";
 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

@@ -1,12 +1,15 @@
 
 "use client";
-import { SpacingAlias } from "../../../types/src/index.js";
+import { SpacingAlias } from "../../../types/dist/index.js";
 import "../../../tokens/index.js";
 import { VStackProps } from "../../VStack.js";
 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/src/index.cjs";
+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/src/index.js";
+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**