@yahoo/uds 3.131.0 → 3.132.0

package/dist/components/client/Tooltip/TooltipContent.js

@@ -19,7 +19,7 @@ import { Tooltip, TooltipArrow, useStoreState, useTooltipContext } from "@ariaki
 const ARROW_HEIGHT = 8;
 const ARROW_WIDTH = 12;
 const ARROW_TIP_RADIUS_FRACTION = .5;
-const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth, startTitleIcon, title, endContent, className, id }, ref) {
+const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth, startTitleIcon, title, endContent, className, id, slotProps }, ref) {
 	const store = useTooltipContext();
 	const open = useStoreState(store, "open");
 	const internalContext = useContext(TooltipInternalContext);
@@ -69,6 +69,7 @@ const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth,
 	return /* @__PURE__ */ jsxs(Tooltip, {
 		ref: mergedRef,
 		className: classNames.root,
+		...slotProps?.root,
 		hideOnHoverOutside: internalContext?.isControlled ? false : void 0,
 		hideOnInteractOutside: internalContext?.isControlled ? false : void 0,
 		portal: internalContext ? internalContext.portal : true,
@@ -94,10 +95,12 @@ const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth,
 					children: [startTitleIcon && /* @__PURE__ */ jsx(IconSlot, {
 						iconProps: { variant: "fill" },
 						icon: startTitleIcon,
-						className: classNames.icon
+						className: classNames.icon,
+						...slotProps?.icon
 					}), /* @__PURE__ */ jsx(Text, {
 						className: classNames.title,
 						color: "inherit",
+						...slotProps?.title,
 						children: title
 					})]
 				}), /* @__PURE__ */ jsxs(Box, {
@@ -106,17 +109,20 @@ const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth,
 					children: [/* @__PURE__ */ jsx(Text, {
 						className: classNames.body,
 						color: "inherit",
+						...slotProps?.body,
 						children
 					}), endContent && !isValidElement(endContent) ? /* @__PURE__ */ jsx(Text, {
 						className: classNames.endContent,
 						color: "inherit",
+						...slotProps?.endContent,
 						children: endContent
 					}) : endContent]
 				})]
 			})
 		}), /* @__PURE__ */ jsx(TooltipArrow, {
 			ref: arrowRef,
-			style: { opacity: 0 }
+			style: { opacity: 0 },
+			...slotProps?.arrow
 		})]
 	});
 });

package/dist/components/experimental/client/SwitchV2.cjs

@@ -41,9 +41,13 @@ const MotionBox = motion_react_m.create(require_components_Box.Box);
 *
 * @related [Checkbox](https://uds.build/docs/components/checkbox).
 **/
-const SwitchV2 = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, reduceMotion: forceReduceMotion, disabled, required, onFocus, onBlur, className, layerClassNames, ...switchProps }, parentRef) {
+const SwitchV2 = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, reduceMotion: forceReduceMotion, disabled, required, onFocus, onBlur, className, 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
@@ -76,18 +80,18 @@ const SwitchV2 = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, def
 			switchSizeRoot: size,
 			switchVariantRoot: "default",
 			switchVariantActiveRoot: isOn ? "on" : "off",
-			className: require_styles_styler.cx("group", "flex", "items-center", labelPosition === "start" ? "flex-row" : "flex-row-reverse", ...disabled ? ["cursor-default", "opacity-50"] : ["cursor-pointer"], layerClassNames?.root, className)
+			className: require_styles_styler.cx("group", "flex", "items-center", labelPosition === "start" ? "flex-row" : "flex-row-reverse", ...disabled ? ["cursor-default", "opacity-50"] : ["cursor-pointer"], className)
 		}),
 		switch: require_styles_styler.getStyles({
 			switchVariantSwitch: "default",
 			switchSizeSwitch: size,
 			switchVariantActiveSwitch: isOn ? "on" : "off",
-			className: require_styles_styler.cx("uds-ring", "uds-ring-within", "relative", "uds-border-radius-full", "items-center", cssAnimationDuration, "transition-[background-color,box-shadow]", layerClassNames?.switch)
+			className: require_styles_styler.cx("uds-ring", "uds-ring-within", "relative", "uds-border-radius-full", "items-center", cssAnimationDuration, "transition-[background-color,box-shadow]")
 		}),
 		handleContainer: require_styles_styler.cx("pointer-events-none", "relative", "w-full", "h-full"),
 		handle: require_styles_styler.getStyles({
 			switchSizeHandle: size,
-			className: require_styles_styler.cx("absolute", "top-0", "bottom-0", isOn ? "right-0" : "left-0", layerClassNames?.handle)
+			className: require_styles_styler.cx("absolute", "top-0", "bottom-0", isOn ? "right-0" : "left-0")
 		}),
 		handleContents: require_styles_styler.cx("relative", "w-full", "h-full", "uds-border-radius-full", "overflow-hidden", !disabled && "group-hover:scale-105", "opacity-95", !disabled && "group-hover:opacity-100", cssAnimationDuration, "transition-[transform,opacity]"),
 		handleCircle: require_styles_styler.getStyles({
@@ -102,7 +106,7 @@ const SwitchV2 = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, def
 			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")
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
 		reducedMotion: reduceMotion,
@@ -113,8 +117,10 @@ const SwitchV2 = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, def
 			className: classNames.root,
 			"data-testid": "switch-root",
 			tabIndex: -1,
+			...rootSlotProps,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
 				className: classNames.switch,
+				...switchSlotProps,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					type: "checkbox",
 					...switchProps,
@@ -139,6 +145,7 @@ const SwitchV2 = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, def
 						className: classNames.handle,
 						layout: "position",
 						layoutDependency: isOn,
+						...handleSlotProps,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
 							className: classNames.handleContents,
 							children: [
@@ -171,7 +178,8 @@ const SwitchV2 = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, def
 				color: "inherit",
 				required,
 				label,
-				className: classNames.label
+				className: classNames.label,
+				...labelSlotProps
 			})]
 		})
 	});

package/dist/components/experimental/client/SwitchV2.d.cts

@@ -5,12 +5,16 @@ import React from "react";
 
 //#region src/components/experimental/client/SwitchV2.d.ts
 type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface SwitchV2Props 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/experimental/client/SwitchV2.d.ts

@@ -6,12 +6,16 @@ import React from "react";
 
 //#region src/components/experimental/client/SwitchV2.d.ts
 type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'>;
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
 interface SwitchV2Props 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/experimental/client/SwitchV2.js

@@ -37,9 +37,13 @@ const MotionBox = m.create(Box);
 *
 * @related [Checkbox](https://uds.build/docs/components/checkbox).
 **/
-const SwitchV2 = forwardRef(function Switch({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, reduceMotion: forceReduceMotion, disabled, required, onFocus, onBlur, className, layerClassNames, ...switchProps }, parentRef) {
+const SwitchV2 = forwardRef(function Switch({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, reduceMotion: forceReduceMotion, disabled, required, onFocus, onBlur, className, 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
@@ -72,18 +76,18 @@ const SwitchV2 = forwardRef(function Switch({ id, isOn: isOnProp, defaultIsOn, o
 			switchSizeRoot: size,
 			switchVariantRoot: "default",
 			switchVariantActiveRoot: isOn ? "on" : "off",
-			className: cx("group", "flex", "items-center", labelPosition === "start" ? "flex-row" : "flex-row-reverse", ...disabled ? ["cursor-default", "opacity-50"] : ["cursor-pointer"], layerClassNames?.root, className)
+			className: cx("group", "flex", "items-center", labelPosition === "start" ? "flex-row" : "flex-row-reverse", ...disabled ? ["cursor-default", "opacity-50"] : ["cursor-pointer"], className)
 		}),
 		switch: getStyles({
 			switchVariantSwitch: "default",
 			switchSizeSwitch: size,
 			switchVariantActiveSwitch: isOn ? "on" : "off",
-			className: cx("uds-ring", "uds-ring-within", "relative", "uds-border-radius-full", "items-center", cssAnimationDuration, "transition-[background-color,box-shadow]", layerClassNames?.switch)
+			className: cx("uds-ring", "uds-ring-within", "relative", "uds-border-radius-full", "items-center", cssAnimationDuration, "transition-[background-color,box-shadow]")
 		}),
 		handleContainer: cx("pointer-events-none", "relative", "w-full", "h-full"),
 		handle: getStyles({
 			switchSizeHandle: size,
-			className: cx("absolute", "top-0", "bottom-0", isOn ? "right-0" : "left-0", layerClassNames?.handle)
+			className: cx("absolute", "top-0", "bottom-0", isOn ? "right-0" : "left-0")
 		}),
 		handleContents: cx("relative", "w-full", "h-full", "uds-border-radius-full", "overflow-hidden", !disabled && "group-hover:scale-105", "opacity-95", !disabled && "group-hover:opacity-100", cssAnimationDuration, "transition-[transform,opacity]"),
 		handleCircle: getStyles({
@@ -98,7 +102,7 @@ const SwitchV2 = forwardRef(function Switch({ id, isOn: isOnProp, defaultIsOn, o
 			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")
 	};
 	return /* @__PURE__ */ jsx(SpringMotionConfig, {
 		reducedMotion: reduceMotion,
@@ -109,8 +113,10 @@ const SwitchV2 = forwardRef(function Switch({ id, isOn: isOnProp, defaultIsOn, o
 			className: classNames.root,
 			"data-testid": "switch-root",
 			tabIndex: -1,
+			...rootSlotProps,
 			children: [/* @__PURE__ */ jsxs(Box, {
 				className: classNames.switch,
+				...switchSlotProps,
 				children: [/* @__PURE__ */ jsx("input", {
 					type: "checkbox",
 					...switchProps,
@@ -135,6 +141,7 @@ const SwitchV2 = forwardRef(function Switch({ id, isOn: isOnProp, defaultIsOn, o
 						className: classNames.handle,
 						layout: "position",
 						layoutDependency: isOn,
+						...handleSlotProps,
 						children: /* @__PURE__ */ jsxs(Box, {
 							className: classNames.handleContents,
 							children: [
@@ -167,7 +174,8 @@ const SwitchV2 = forwardRef(function Switch({ id, isOn: isOnProp, defaultIsOn, o
 				color: "inherit",
 				required,
 				label,
-				className: classNames.label
+				className: classNames.label,
+				...labelSlotProps
 			})]
 		})
 	});

package/dist/components/index.d.cts

@@ -6,6 +6,7 @@ import { BannerDescription, BannerDescriptionProps } from "./Banner/BannerDescri
 import { BannerTitle, BannerTitleProps } from "./Banner/BannerTitle.cjs";
 import "./Banner/index.cjs";
 import { Box, BoxProps } from "./Box.cjs";
+import { Text, TextProps } from "./Text.cjs";
 import { Divider, DividerProps } from "./Divider/Divider.cjs";
 import "./Divider/index.cjs";
 import { FormLabel, FormLabelProps } from "./FormLabel.cjs";
@@ -14,7 +15,6 @@ import { Icon, IconProps } from "./Icon.cjs";
 import { Image, ImageProps } from "./Image.cjs";
 import { Link, LinkProps } from "./Link.cjs";
 import { Scrim, ScrimProps } from "./Scrim.cjs";
-import { Text, TextProps } from "./Text.cjs";
 import { VStack, VStackProps } from "./VStack.cjs";
 import { SpringMotionConfig, SpringMotionConfigProps } from "./client/SpringMotionConfig.cjs";
 import { AvatarIcon, AvatarIconProps } from "./client/Avatar/AvatarIcon.cjs";

package/dist/components/index.d.ts

@@ -6,6 +6,7 @@ import { BannerDescription, BannerDescriptionProps } from "./Banner/BannerDescri
 import { BannerTitle, BannerTitleProps } from "./Banner/BannerTitle.js";
 import "./Banner/index.js";
 import { Box, BoxProps } from "./Box.js";
+import { Text, TextProps } from "./Text.js";
 import { Divider, DividerProps } from "./Divider/Divider.js";
 import "./Divider/index.js";
 import { FormLabel, FormLabelProps } from "./FormLabel.js";
@@ -14,7 +15,6 @@ import { Icon, IconProps } from "./Icon.js";
 import { Image, ImageProps } from "./Image.js";
 import { Link, LinkProps } from "./Link.js";
 import { Scrim, ScrimProps } from "./Scrim.js";
-import { Text, TextProps } from "./Text.js";
 import { VStack, VStackProps } from "./VStack.js";
 import { SpringMotionConfig, SpringMotionConfigProps } from "./client/SpringMotionConfig.js";
 import { AvatarIcon, AvatarIconProps } from "./client/Avatar/AvatarIcon.js";

package/dist/index.d.cts

@@ -38,6 +38,7 @@ import { BannerContent, BannerContentProps } from "./components/Banner/BannerCon
 import { BannerDescription, BannerDescriptionProps } from "./components/Banner/BannerDescription.cjs";
 import { BannerTitle, BannerTitleProps } from "./components/Banner/BannerTitle.cjs";
 import { Box, BoxProps } from "./components/Box.cjs";
+import { Text, TextProps } from "./components/Text.cjs";
 import { Divider, DividerProps } from "./components/Divider/Divider.cjs";
 import { FormLabel, FormLabelProps } from "./components/FormLabel.cjs";
 import { HStack, HStackProps } from "./components/HStack.cjs";
@@ -45,7 +46,6 @@ import { Icon, IconProps } from "./components/Icon.cjs";
 import { Image, ImageProps } from "./components/Image.cjs";
 import { Link, LinkProps } from "./components/Link.cjs";
 import { Scrim, ScrimProps } from "./components/Scrim.cjs";
-import { Text, TextProps } from "./components/Text.cjs";
 import { VStack, VStackProps } from "./components/VStack.cjs";
 import { SpringMotionConfig, SpringMotionConfigProps } from "./components/client/SpringMotionConfig.cjs";
 import { AvatarIcon, AvatarIconProps } from "./components/client/Avatar/AvatarIcon.cjs";

package/dist/index.d.ts

@@ -38,6 +38,7 @@ import { BannerContent, BannerContentProps } from "./components/Banner/BannerCon
 import { BannerDescription, BannerDescriptionProps } from "./components/Banner/BannerDescription.js";
 import { BannerTitle, BannerTitleProps } from "./components/Banner/BannerTitle.js";
 import { Box, BoxProps } from "./components/Box.js";
+import { Text, TextProps } from "./components/Text.js";
 import { Divider, DividerProps } from "./components/Divider/Divider.js";
 import { FormLabel, FormLabelProps } from "./components/FormLabel.js";
 import { HStack, HStackProps } from "./components/HStack.js";
@@ -45,7 +46,6 @@ import { Icon, IconProps } from "./components/Icon.js";
 import { Image, ImageProps } from "./components/Image.js";
 import { Link, LinkProps } from "./components/Link.js";
 import { Scrim, ScrimProps } from "./components/Scrim.js";
-import { Text, TextProps } from "./components/Text.js";
 import { VStack, VStackProps } from "./components/VStack.js";
 import { SpringMotionConfig, SpringMotionConfigProps } from "./components/client/SpringMotionConfig.js";
 import { AvatarIcon, AvatarIconProps } from "./components/client/Avatar/AvatarIcon.js";