@yahoo/uds 3.159.1 → 3.160.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (149) hide show
  1. package/dist/automated-config/dist/properties.cjs +1 -1
  2. package/dist/automated-config/dist/properties.js +1 -1
  3. package/dist/components/Text.cjs +4 -2
  4. package/dist/components/Text.js +4 -2
  5. package/dist/components/client/Button/Button.cjs +213 -0
  6. package/dist/components/client/Button/Button.d.cts +50 -0
  7. package/dist/components/client/Button/Button.d.ts +51 -0
  8. package/dist/components/client/Button/Button.js +208 -0
  9. package/dist/components/client/Button/ButtonBase.cjs +120 -0
  10. package/dist/components/client/Button/ButtonBase.d.cts +52 -0
  11. package/dist/components/client/Button/ButtonBase.d.ts +53 -0
  12. package/dist/components/client/Button/ButtonBase.js +116 -0
  13. package/dist/components/client/{buttonConstants.cjs → Button/buttonConstants.cjs} +1 -1
  14. package/dist/components/client/Button/buttonConstants.d.cts +7 -0
  15. package/dist/components/client/Button/buttonConstants.d.ts +8 -0
  16. package/dist/components/client/{buttonConstants.js → Button/buttonConstants.js} +1 -1
  17. package/dist/components/client/Button/index.cjs +10 -0
  18. package/dist/components/client/Button/index.d.cts +4 -0
  19. package/dist/components/client/Button/index.d.ts +5 -0
  20. package/dist/components/client/Button/index.js +5 -0
  21. package/dist/components/client/IconButton/IconButton.cjs +104 -0
  22. package/dist/components/client/IconButton/IconButton.d.cts +17 -0
  23. package/dist/components/client/IconButton/IconButton.d.ts +18 -0
  24. package/dist/components/client/IconButton/IconButton.js +102 -0
  25. package/dist/components/client/IconButton/IconButtonBase.cjs +68 -0
  26. package/dist/components/client/IconButton/IconButtonBase.d.cts +45 -0
  27. package/dist/components/client/IconButton/IconButtonBase.d.ts +46 -0
  28. package/dist/components/client/IconButton/IconButtonBase.js +65 -0
  29. package/dist/components/client/IconButton/index.cjs +8 -0
  30. package/dist/components/client/IconButton/index.d.cts +4 -0
  31. package/dist/components/client/IconButton/index.d.ts +5 -0
  32. package/dist/components/client/IconButton/index.js +5 -0
  33. package/dist/components/client/Pressable.cjs +3 -1
  34. package/dist/components/client/Pressable.js +3 -1
  35. package/dist/components/client/SpringMotionConfig.cjs +10 -13
  36. package/dist/components/client/SpringMotionConfig.js +10 -13
  37. package/dist/components/client/Switch/Switch.cjs +119 -0
  38. package/dist/components/client/{Switch.d.cts → Switch/Switch.d.cts} +4 -16
  39. package/dist/components/client/{Switch.d.ts → Switch/Switch.d.ts} +4 -16
  40. package/dist/components/client/Switch/Switch.js +115 -0
  41. package/dist/components/client/Switch/SwitchBase.cjs +129 -0
  42. package/dist/components/client/Switch/SwitchBase.d.cts +29 -0
  43. package/dist/components/client/Switch/SwitchBase.d.ts +30 -0
  44. package/dist/components/client/Switch/SwitchBase.js +126 -0
  45. package/dist/components/client/Switch/index.cjs +5 -0
  46. package/dist/components/client/Switch/index.d.cts +3 -0
  47. package/dist/components/client/Switch/index.d.ts +4 -0
  48. package/dist/components/client/Switch/index.js +4 -0
  49. package/dist/components/client/Switch/switchStyles.cjs +17 -0
  50. package/dist/components/client/Switch/switchStyles.d.cts +9 -0
  51. package/dist/components/client/Switch/switchStyles.d.ts +10 -0
  52. package/dist/components/client/Switch/switchStyles.js +16 -0
  53. package/dist/components/client/Switch/types.cjs +2 -0
  54. package/dist/components/client/Switch/types.d.cts +33 -0
  55. package/dist/components/client/Switch/types.d.ts +34 -0
  56. package/dist/components/client/Switch/types.js +2 -0
  57. package/dist/components/client/Toast/Toast.cjs +2 -2
  58. package/dist/components/client/Toast/Toast.d.cts +1 -1
  59. package/dist/components/client/Toast/Toast.d.ts +1 -1
  60. package/dist/components/client/Toast/Toast.js +1 -1
  61. package/dist/components/client/index.cjs +6 -6
  62. package/dist/components/client/index.d.cts +3 -3
  63. package/dist/components/client/index.d.ts +3 -3
  64. package/dist/components/client/index.js +3 -3
  65. package/dist/components/experimental/client/index.cjs +0 -6
  66. package/dist/components/experimental/client/index.d.cts +1 -3
  67. package/dist/components/experimental/client/index.d.ts +1 -3
  68. package/dist/components/experimental/client/index.js +1 -3
  69. package/dist/components/experimental/index.cjs +0 -5
  70. package/dist/components/experimental/index.d.cts +1 -3
  71. package/dist/components/experimental/index.d.ts +1 -3
  72. package/dist/components/experimental/index.js +1 -3
  73. package/dist/components/index.cjs +6 -6
  74. package/dist/components/index.d.cts +3 -3
  75. package/dist/components/index.d.ts +3 -3
  76. package/dist/components/index.js +3 -3
  77. package/dist/css-animation/Button/Button.cjs +85 -0
  78. package/dist/css-animation/Button/Button.d.cts +13 -0
  79. package/dist/css-animation/Button/Button.d.ts +14 -0
  80. package/dist/css-animation/Button/Button.js +82 -0
  81. package/dist/css-animation/Button/index.cjs +5 -0
  82. package/dist/css-animation/Button/index.d.cts +4 -0
  83. package/dist/css-animation/Button/index.d.ts +5 -0
  84. package/dist/css-animation/Button/index.js +4 -0
  85. package/dist/css-animation/IconButton/IconButton.cjs +55 -0
  86. package/dist/css-animation/IconButton/IconButton.d.cts +13 -0
  87. package/dist/css-animation/IconButton/IconButton.d.ts +14 -0
  88. package/dist/css-animation/IconButton/IconButton.js +53 -0
  89. package/dist/css-animation/IconButton/index.cjs +5 -0
  90. package/dist/css-animation/IconButton/index.d.cts +4 -0
  91. package/dist/css-animation/IconButton/index.d.ts +5 -0
  92. package/dist/css-animation/IconButton/index.js +4 -0
  93. package/dist/css-animation/Switch/Switch.cjs +44 -0
  94. package/dist/css-animation/Switch/Switch.d.cts +22 -0
  95. package/dist/css-animation/Switch/Switch.d.ts +23 -0
  96. package/dist/css-animation/Switch/Switch.js +41 -0
  97. package/dist/css-animation/Switch/SwitchStaticHandle.cjs +56 -0
  98. package/dist/css-animation/Switch/SwitchStaticHandle.d.cts +31 -0
  99. package/dist/css-animation/Switch/SwitchStaticHandle.d.ts +32 -0
  100. package/dist/css-animation/Switch/SwitchStaticHandle.js +54 -0
  101. package/dist/css-animation/Switch/index.cjs +5 -0
  102. package/dist/css-animation/Switch/index.d.cts +3 -0
  103. package/dist/css-animation/Switch/index.d.ts +4 -0
  104. package/dist/css-animation/Switch/index.js +4 -0
  105. package/dist/css-animation/index.cjs +9 -0
  106. package/dist/css-animation/index.d.cts +7 -0
  107. package/dist/css-animation/index.d.ts +8 -0
  108. package/dist/css-animation/index.js +6 -0
  109. package/dist/hooks/usePrefersReducedMotion.cjs +24 -0
  110. package/dist/hooks/usePrefersReducedMotion.d.cts +5 -0
  111. package/dist/hooks/usePrefersReducedMotion.d.ts +5 -0
  112. package/dist/hooks/usePrefersReducedMotion.js +22 -0
  113. package/dist/index.cjs +7 -7
  114. package/dist/index.d.cts +3 -3
  115. package/dist/index.d.ts +3 -3
  116. package/dist/index.js +4 -4
  117. package/dist/styles/styler.d.cts +4 -4
  118. package/dist/styles/styler.d.ts +4 -4
  119. package/dist/tailwind-internal/dist/utils/getShadowStyles.d.cts +2 -2
  120. package/dist/tailwind-internal/dist/utils/getShadowStyles.d.ts +2 -2
  121. package/dist/uds/generated/componentData.cjs +372 -381
  122. package/dist/uds/generated/componentData.js +372 -381
  123. package/dist/uds/generated/tailwindPurge.cjs +8 -21
  124. package/dist/uds/generated/tailwindPurge.js +8 -21
  125. package/dist/uds/package.cjs +12 -2
  126. package/dist/uds/package.js +12 -2
  127. package/generated/componentData.json +572 -603
  128. package/generated/tailwindPurge.ts +3 -3
  129. package/package.json +13 -3
  130. package/dist/components/client/Button.cjs +0 -326
  131. package/dist/components/client/Button.d.cts +0 -86
  132. package/dist/components/client/Button.d.ts +0 -87
  133. package/dist/components/client/Button.js +0 -321
  134. package/dist/components/client/IconButton.cjs +0 -161
  135. package/dist/components/client/IconButton.d.cts +0 -46
  136. package/dist/components/client/IconButton.d.ts +0 -47
  137. package/dist/components/client/IconButton.js +0 -159
  138. package/dist/components/client/Switch.cjs +0 -225
  139. package/dist/components/client/Switch.js +0 -222
  140. package/dist/components/client/buttonConstants.d.cts +0 -7
  141. package/dist/components/client/buttonConstants.d.ts +0 -8
  142. package/dist/components/experimental/client/AvoidMotionLibraryProvider.cjs +0 -14
  143. package/dist/components/experimental/client/AvoidMotionLibraryProvider.d.cts +0 -8
  144. package/dist/components/experimental/client/AvoidMotionLibraryProvider.d.ts +0 -9
  145. package/dist/components/experimental/client/AvoidMotionLibraryProvider.js +0 -11
  146. package/dist/components/experimental/client/SwitchV2.cjs +0 -190
  147. package/dist/components/experimental/client/SwitchV2.d.cts +0 -46
  148. package/dist/components/experimental/client/SwitchV2.d.ts +0 -47
  149. package/dist/components/experimental/client/SwitchV2.js +0 -185
@@ -0,0 +1,115 @@
1
+ /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
+ "use client";
3
+ import { cx, getStyles } from "../../../styles/styler.js";
4
+ import { IconSlot } from "../../IconSlot.js";
5
+ import { Box } from "../../Box.js";
6
+ import { SpringMotionConfig } from "../SpringMotionConfig.js";
7
+ import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
8
+ import { SwitchBase } from "./SwitchBase.js";
9
+ import { forwardRef } from "react";
10
+ import { jsx, jsxs } from "react/jsx-runtime";
11
+ import * as m from "motion/react-m";
12
+ //#region src/components/client/Switch/Switch.tsx
13
+ const MotionBox = m.create(Box);
14
+ MotionBox.displayName = "SwitchMotionBox";
15
+ const toggleTransition = {
16
+ layoutVariant: "bouncy",
17
+ layoutSpeed: "4"
18
+ };
19
+ /**
20
+ * **⚙️️ An switch.
21
+ *
22
+ * @componentType Client component
23
+ *
24
+ * @description
25
+ * A switch (also called a toggle) is a binary on/off input control. It is clickable or touchable on mobile devices allowing users to pick between two clearly opposite choices.
26
+ *
27
+ * @see
28
+ * Check out the {@link https://uds.build/docs/components/switch Switch Docs} for more info
29
+ *
30
+ * @usage
31
+ * - Forms: switch
32
+ *
33
+ * @example
34
+ * ```tsx
35
+ * 'use client';
36
+ * import { Switch } from "@yahoo/uds";
37
+ *
38
+ * <Switch label="Name" required />
39
+ *```
40
+ *
41
+ * @related [Checkbox](https://uds.build/docs/components/checkbox).
42
+ **/
43
+ const Switch = forwardRef(function Switch({ reduceMotion: forceReduceMotion, ...props }, parentRef) {
44
+ const prefersReducedMotion = usePrefersReducedMotion();
45
+ const reduceMotion = forceReduceMotion ? "always" : "user";
46
+ const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
47
+ return /* @__PURE__ */ jsx(SwitchBase, {
48
+ ...props,
49
+ ref: parentRef,
50
+ cssAnimationDuration,
51
+ enableHoverTracking: true,
52
+ renderHandle: ({ size, isOn, isOnX, showHoverEffect, disabled, onIcon, offIcon, cssAnimationDuration, handleSlotProps }) => {
53
+ const motionInitialAndAnimate = {
54
+ initial: {
55
+ scale: 1,
56
+ x: isOn ? isOnX : 0
57
+ },
58
+ animate: {
59
+ scale: showHoverEffect ? 1.05 : 1,
60
+ x: isOn ? isOnX : 0
61
+ }
62
+ };
63
+ const classNames = {
64
+ handle: getStyles({
65
+ switchSizeHandle: size,
66
+ className: cx("relative", "pointer-events-none", "uds-border-radius-full", "overflow-hidden")
67
+ }),
68
+ handleCircle: getStyles({
69
+ switchVariantActiveHandle: isOn ? "on" : "off",
70
+ switchVariantHandle: "default",
71
+ className: cx("absolute", "top-0", "left-0", "right-0", "bottom-0", "opacity-95", !disabled && "group-hover:opacity-100", cssAnimationDuration, "transition-[background-color,box-shadow,opacity]")
72
+ }),
73
+ handleIcon: getStyles({
74
+ switchSizeHandleIcon: size,
75
+ switchVariantHandleIcon: "default",
76
+ switchVariantActiveHandleIcon: isOn ? "on" : "off",
77
+ className: cx("absolute", "opacity-0", "top-1/2", "left-1/2", "transform", "translate-x-[-50%]", "translate-y-[-50%]", cssAnimationDuration, "transition-opacity")
78
+ })
79
+ };
80
+ return /* @__PURE__ */ jsx(SpringMotionConfig, {
81
+ reducedMotion: reduceMotion,
82
+ ...toggleTransition,
83
+ children: /* @__PURE__ */ jsxs(MotionBox, {
84
+ className: classNames.handle,
85
+ ...motionInitialAndAnimate,
86
+ ...handleSlotProps,
87
+ children: [
88
+ /* @__PURE__ */ jsx(Box, { className: classNames.handleCircle }),
89
+ onIcon && /* @__PURE__ */ jsx(IconSlot, {
90
+ icon: onIcon,
91
+ iconProps: {
92
+ variant: "fill",
93
+ size: "sm"
94
+ },
95
+ "data-testid": "on-icon",
96
+ className: cx(classNames.handleIcon, isOn ? "opacity-100" : "opacity-0")
97
+ }),
98
+ offIcon && /* @__PURE__ */ jsx(IconSlot, {
99
+ icon: offIcon,
100
+ iconProps: {
101
+ variant: "fill",
102
+ size: "sm"
103
+ },
104
+ "data-testid": "off-icon",
105
+ className: cx(classNames.handleIcon, !isOn ? "opacity-100" : "opacity-0")
106
+ })
107
+ ]
108
+ })
109
+ });
110
+ }
111
+ });
112
+ });
113
+ Switch.displayName = "Switch";
114
+ //#endregion
115
+ export { Switch };
@@ -0,0 +1,129 @@
1
+ /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
+ "use client";
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
+ const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
5
+ const require_styles_styler = require("../../../styles/styler.cjs");
6
+ const require_components_Box = require("../../Box.cjs");
7
+ const require_components_FormLabel = require("../../FormLabel.cjs");
8
+ const require_components_client_Switch_switchStyles = require("./switchStyles.cjs");
9
+ let react = require("react");
10
+ react = require_runtime.__toESM(react);
11
+ let react_jsx_runtime = require("react/jsx-runtime");
12
+ //#region src/components/client/Switch/SwitchBase.tsx
13
+ const SwitchBase = (0, react.forwardRef)(function SwitchBase({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, disabled, required, onFocus, onBlur, className, style, slotProps, cssAnimationDuration, enableHoverTracking = false, renderHandle, ...switchProps }, parentRef) {
14
+ const generatedId = (0, react.useId)();
15
+ const uid = id ?? `uds-input-${generatedId}`;
16
+ const rootSlotProps = slotProps?.root ?? {};
17
+ const switchSlotProps = slotProps?.switch ?? {};
18
+ const handleSlotProps = slotProps?.handle ?? {};
19
+ const labelSlotProps = slotProps?.label ?? {};
20
+ const innerRef = (0, react.useRef)(null);
21
+ const isControlled = isOnProp !== void 0;
22
+ const [uncontrolledIsOn, setUncontrolledIsOn] = (0, react.useState)(defaultIsOn ?? false);
23
+ const [isHovered, setIsHovered] = (0, react.useState)(false);
24
+ const showHoverEffect = (0, react.useMemo)(() => {
25
+ return enableHoverTracking && !disabled && isHovered;
26
+ }, [
27
+ disabled,
28
+ enableHoverTracking,
29
+ isHovered
30
+ ]);
31
+ const { isOnX, isOnTranslateClass } = require_components_client_Switch_switchStyles.SIZE_MAP[size];
32
+ const isOn = isControlled ? isOnProp ?? false : uncontrolledIsOn;
33
+ const handleChange = (0, react.useCallback)((e) => {
34
+ onChange?.(e);
35
+ if (!isControlled) setUncontrolledIsOn(e.target.checked);
36
+ }, [isControlled, onChange]);
37
+ const handleFocus = (0, react.useCallback)((e) => {
38
+ onFocus?.(e);
39
+ }, [onFocus]);
40
+ const handleBlur = (0, react.useCallback)((e) => {
41
+ onBlur?.(e);
42
+ }, [onBlur]);
43
+ const handleHoverStart = (0, react.useCallback)(() => {
44
+ if (enableHoverTracking) setIsHovered(true);
45
+ }, [enableHoverTracking]);
46
+ const handleHoverEnd = (0, react.useCallback)(() => {
47
+ if (enableHoverTracking) setIsHovered(false);
48
+ }, [enableHoverTracking]);
49
+ const classNames = {
50
+ root: require_styles_styler.getStyles({
51
+ switchSizeRoot: size,
52
+ switchVariantRoot: "default",
53
+ switchVariantActiveRoot: isOn ? "on" : "off",
54
+ display: "flex",
55
+ flexDirection: labelPosition === "start" ? "row" : "row-reverse",
56
+ alignItems: "center",
57
+ className: require_styles_styler.cx("group", {
58
+ "cursor-pointer": !disabled,
59
+ "cursor-default": disabled,
60
+ "opacity-50": disabled
61
+ }, className)
62
+ }),
63
+ switch: require_styles_styler.getStyles({
64
+ switchVariantSwitch: "default",
65
+ switchSizeSwitch: size,
66
+ switchVariantActiveSwitch: isOn ? "on" : "off",
67
+ borderRadius: "full",
68
+ position: "relative",
69
+ alignItems: "center",
70
+ className: require_styles_styler.cx("uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,box-shadow]")
71
+ }),
72
+ 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%]"),
73
+ label: require_styles_styler.cx(labelPosition === "start" ? "text-start" : "text-end")
74
+ };
75
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(label ? "label" : "div", {
76
+ className: classNames.root,
77
+ "data-testid": "container",
78
+ style,
79
+ tabIndex: -1,
80
+ onPointerEnter: handleHoverStart,
81
+ onPointerLeave: handleHoverEnd,
82
+ ...rootSlotProps,
83
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
84
+ className: classNames.switch,
85
+ ...switchSlotProps,
86
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
87
+ type: "checkbox",
88
+ tabIndex: 0,
89
+ ...switchProps,
90
+ ref: (ref) => {
91
+ innerRef.current = ref;
92
+ if (typeof parentRef === "function") parentRef(ref);
93
+ else if (parentRef !== null) parentRef.current = ref;
94
+ },
95
+ onFocus: handleFocus,
96
+ onBlur: handleBlur,
97
+ id: uid,
98
+ disabled,
99
+ required,
100
+ checked: isControlled ? isOn : void 0,
101
+ defaultChecked: isControlled ? void 0 : defaultIsOn,
102
+ onChange: handleChange,
103
+ className: classNames.htmlCheckbox
104
+ }), renderHandle({
105
+ size,
106
+ isOn,
107
+ isOnX,
108
+ isOnTranslateClass,
109
+ showHoverEffect,
110
+ disabled,
111
+ onIcon,
112
+ offIcon,
113
+ cssAnimationDuration,
114
+ handleSlotProps
115
+ })]
116
+ }), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
117
+ as: "div",
118
+ variant: "inherit",
119
+ color: "inherit",
120
+ required,
121
+ label,
122
+ className: classNames.label,
123
+ ...labelSlotProps
124
+ })]
125
+ });
126
+ });
127
+ SwitchBase.displayName = "SwitchBase";
128
+ //#endregion
129
+ exports.SwitchBase = SwitchBase;
@@ -0,0 +1,29 @@
1
+
2
+ import { DataAttributes, SwitchProps } from "./types.cjs";
3
+ import React, { ReactNode } from "react";
4
+
5
+ //#region src/components/client/Switch/SwitchBase.d.ts
6
+ type RenderHandleArgs = {
7
+ size: NonNullable<SwitchProps['size']>;
8
+ isOn: boolean;
9
+ isOnX: string;
10
+ isOnTranslateClass: string;
11
+ showHoverEffect: boolean;
12
+ disabled?: boolean;
13
+ onIcon?: SwitchProps['onIcon'];
14
+ offIcon?: SwitchProps['offIcon'];
15
+ cssAnimationDuration: string;
16
+ handleSlotProps?: DataAttributes;
17
+ };
18
+ type SwitchBaseProps = SwitchProps & {
19
+ cssAnimationDuration: string;
20
+ enableHoverTracking?: boolean;
21
+ renderHandle: (args: RenderHandleArgs) => ReactNode;
22
+ };
23
+ declare const SwitchBase: React.ForwardRefExoticComponent<SwitchProps & {
24
+ cssAnimationDuration: string;
25
+ enableHoverTracking?: boolean;
26
+ renderHandle: (args: RenderHandleArgs) => ReactNode;
27
+ } & React.RefAttributes<HTMLInputElement>>;
28
+ //#endregion
29
+ export { SwitchBase, type SwitchBaseProps };
@@ -0,0 +1,30 @@
1
+
2
+ "use client";
3
+ import { DataAttributes, SwitchProps } from "./types.js";
4
+ import React, { ReactNode } from "react";
5
+
6
+ //#region src/components/client/Switch/SwitchBase.d.ts
7
+ type RenderHandleArgs = {
8
+ size: NonNullable<SwitchProps['size']>;
9
+ isOn: boolean;
10
+ isOnX: string;
11
+ isOnTranslateClass: string;
12
+ showHoverEffect: boolean;
13
+ disabled?: boolean;
14
+ onIcon?: SwitchProps['onIcon'];
15
+ offIcon?: SwitchProps['offIcon'];
16
+ cssAnimationDuration: string;
17
+ handleSlotProps?: DataAttributes;
18
+ };
19
+ type SwitchBaseProps = SwitchProps & {
20
+ cssAnimationDuration: string;
21
+ enableHoverTracking?: boolean;
22
+ renderHandle: (args: RenderHandleArgs) => ReactNode;
23
+ };
24
+ declare const SwitchBase: React.ForwardRefExoticComponent<SwitchProps & {
25
+ cssAnimationDuration: string;
26
+ enableHoverTracking?: boolean;
27
+ renderHandle: (args: RenderHandleArgs) => ReactNode;
28
+ } & React.RefAttributes<HTMLInputElement>>;
29
+ //#endregion
30
+ export { SwitchBase, type SwitchBaseProps };
@@ -0,0 +1,126 @@
1
+ /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
+ "use client";
3
+ import { cx, getStyles } from "../../../styles/styler.js";
4
+ import { Box } from "../../Box.js";
5
+ import { FormLabel } from "../../FormLabel.js";
6
+ import { SIZE_MAP } from "./switchStyles.js";
7
+ import { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react";
8
+ import { jsx, jsxs } from "react/jsx-runtime";
9
+ //#region src/components/client/Switch/SwitchBase.tsx
10
+ const SwitchBase = forwardRef(function SwitchBase({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, disabled, required, onFocus, onBlur, className, style, slotProps, cssAnimationDuration, enableHoverTracking = false, renderHandle, ...switchProps }, parentRef) {
11
+ const generatedId = useId();
12
+ const uid = id ?? `uds-input-${generatedId}`;
13
+ const rootSlotProps = slotProps?.root ?? {};
14
+ const switchSlotProps = slotProps?.switch ?? {};
15
+ const handleSlotProps = slotProps?.handle ?? {};
16
+ const labelSlotProps = slotProps?.label ?? {};
17
+ const innerRef = useRef(null);
18
+ const isControlled = isOnProp !== void 0;
19
+ const [uncontrolledIsOn, setUncontrolledIsOn] = useState(defaultIsOn ?? false);
20
+ const [isHovered, setIsHovered] = useState(false);
21
+ const showHoverEffect = useMemo(() => {
22
+ return enableHoverTracking && !disabled && isHovered;
23
+ }, [
24
+ disabled,
25
+ enableHoverTracking,
26
+ isHovered
27
+ ]);
28
+ const { isOnX, isOnTranslateClass } = SIZE_MAP[size];
29
+ const isOn = isControlled ? isOnProp ?? false : uncontrolledIsOn;
30
+ const handleChange = useCallback((e) => {
31
+ onChange?.(e);
32
+ if (!isControlled) setUncontrolledIsOn(e.target.checked);
33
+ }, [isControlled, onChange]);
34
+ const handleFocus = useCallback((e) => {
35
+ onFocus?.(e);
36
+ }, [onFocus]);
37
+ const handleBlur = useCallback((e) => {
38
+ onBlur?.(e);
39
+ }, [onBlur]);
40
+ const handleHoverStart = useCallback(() => {
41
+ if (enableHoverTracking) setIsHovered(true);
42
+ }, [enableHoverTracking]);
43
+ const handleHoverEnd = useCallback(() => {
44
+ if (enableHoverTracking) setIsHovered(false);
45
+ }, [enableHoverTracking]);
46
+ const classNames = {
47
+ root: getStyles({
48
+ switchSizeRoot: size,
49
+ switchVariantRoot: "default",
50
+ switchVariantActiveRoot: isOn ? "on" : "off",
51
+ display: "flex",
52
+ flexDirection: labelPosition === "start" ? "row" : "row-reverse",
53
+ alignItems: "center",
54
+ className: cx("group", {
55
+ "cursor-pointer": !disabled,
56
+ "cursor-default": disabled,
57
+ "opacity-50": disabled
58
+ }, className)
59
+ }),
60
+ switch: getStyles({
61
+ switchVariantSwitch: "default",
62
+ switchSizeSwitch: size,
63
+ switchVariantActiveSwitch: isOn ? "on" : "off",
64
+ borderRadius: "full",
65
+ position: "relative",
66
+ alignItems: "center",
67
+ className: cx("uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,box-shadow]")
68
+ }),
69
+ 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%]"),
70
+ label: cx(labelPosition === "start" ? "text-start" : "text-end")
71
+ };
72
+ return /* @__PURE__ */ jsxs(label ? "label" : "div", {
73
+ className: classNames.root,
74
+ "data-testid": "container",
75
+ style,
76
+ tabIndex: -1,
77
+ onPointerEnter: handleHoverStart,
78
+ onPointerLeave: handleHoverEnd,
79
+ ...rootSlotProps,
80
+ children: [/* @__PURE__ */ jsxs(Box, {
81
+ className: classNames.switch,
82
+ ...switchSlotProps,
83
+ children: [/* @__PURE__ */ jsx("input", {
84
+ type: "checkbox",
85
+ tabIndex: 0,
86
+ ...switchProps,
87
+ ref: (ref) => {
88
+ innerRef.current = ref;
89
+ if (typeof parentRef === "function") parentRef(ref);
90
+ else if (parentRef !== null) parentRef.current = ref;
91
+ },
92
+ onFocus: handleFocus,
93
+ onBlur: handleBlur,
94
+ id: uid,
95
+ disabled,
96
+ required,
97
+ checked: isControlled ? isOn : void 0,
98
+ defaultChecked: isControlled ? void 0 : defaultIsOn,
99
+ onChange: handleChange,
100
+ className: classNames.htmlCheckbox
101
+ }), renderHandle({
102
+ size,
103
+ isOn,
104
+ isOnX,
105
+ isOnTranslateClass,
106
+ showHoverEffect,
107
+ disabled,
108
+ onIcon,
109
+ offIcon,
110
+ cssAnimationDuration,
111
+ handleSlotProps
112
+ })]
113
+ }), label && /* @__PURE__ */ jsx(FormLabel, {
114
+ as: "div",
115
+ variant: "inherit",
116
+ color: "inherit",
117
+ required,
118
+ label,
119
+ className: classNames.label,
120
+ ...labelSlotProps
121
+ })]
122
+ });
123
+ });
124
+ SwitchBase.displayName = "SwitchBase";
125
+ //#endregion
126
+ export { SwitchBase };
@@ -0,0 +1,5 @@
1
+ /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
+ "use client";
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
+ const require_components_client_Switch_Switch = require("./Switch.cjs");
5
+ exports.Switch = require_components_client_Switch_Switch.Switch;
@@ -0,0 +1,3 @@
1
+
2
+ import { Switch, SwitchProps } from "./Switch.cjs";
3
+ export { Switch, type SwitchProps };
@@ -0,0 +1,4 @@
1
+
2
+ "use client";
3
+ import { Switch, SwitchProps } from "./Switch.js";
4
+ export { Switch, type SwitchProps };
@@ -0,0 +1,4 @@
1
+ /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
+ "use client";
3
+ import { Switch } from "./Switch.js";
4
+ export { Switch };
@@ -0,0 +1,17 @@
1
+ /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
+ "use client";
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
+ const require_styles_styler = require("../../../styles/styler.cjs");
5
+ //#region src/components/client/Switch/switchStyles.ts
6
+ const SIZE_MAP = {
7
+ md: {
8
+ isOnX: "1.25rem",
9
+ isOnTranslateClass: require_styles_styler.cx("translate-x-[1.25rem]")
10
+ },
11
+ sm: {
12
+ isOnX: "0.75rem",
13
+ isOnTranslateClass: require_styles_styler.cx("translate-x-[0.75rem]")
14
+ }
15
+ };
16
+ //#endregion
17
+ exports.SIZE_MAP = SIZE_MAP;
@@ -0,0 +1,9 @@
1
+
2
+ import { SwitchSize } from "../../../types/dist/index.cjs";
3
+ //#region src/components/client/Switch/switchStyles.d.ts
4
+ declare const SIZE_MAP: Record<SwitchSize, {
5
+ isOnX: string;
6
+ isOnTranslateClass: string;
7
+ }>;
8
+ //#endregion
9
+ export { SIZE_MAP };
@@ -0,0 +1,10 @@
1
+
2
+ "use client";
3
+ import { SwitchSize } from "../../../types/dist/index.js";
4
+ //#region src/components/client/Switch/switchStyles.d.ts
5
+ declare const SIZE_MAP: Record<SwitchSize, {
6
+ isOnX: string;
7
+ isOnTranslateClass: string;
8
+ }>;
9
+ //#endregion
10
+ export { SIZE_MAP };
@@ -0,0 +1,16 @@
1
+ /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
+ "use client";
3
+ import { cx } from "../../../styles/styler.js";
4
+ //#region src/components/client/Switch/switchStyles.ts
5
+ const SIZE_MAP = {
6
+ md: {
7
+ isOnX: "1.25rem",
8
+ isOnTranslateClass: cx("translate-x-[1.25rem]")
9
+ },
10
+ sm: {
11
+ isOnX: "0.75rem",
12
+ isOnTranslateClass: cx("translate-x-[0.75rem]")
13
+ }
14
+ };
15
+ //#endregion
16
+ export { SIZE_MAP };
@@ -0,0 +1,2 @@
1
+ /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
+ "use client";
@@ -0,0 +1,33 @@
1
+
2
+ import { SwitchSize, UniversalSwitchProps } from "../../../types/dist/index.cjs";
3
+ import React, { ChangeEvent } from "react";
4
+
5
+ //#region src/components/client/Switch/types.d.ts
6
+ type DataAttributes = {
7
+ [name: `data-${string}`]: string;
8
+ };
9
+ type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'>;
10
+ type SwitchChangeEvent = ChangeEvent<HTMLInputElement>;
11
+ interface SwitchProps extends NativeInputProps, UniversalSwitchProps {
12
+ /** Props to be passed into various slots within the component. */
13
+ slotProps?: {
14
+ root?: DataAttributes;
15
+ switch?: DataAttributes;
16
+ handle?: DataAttributes;
17
+ label?: DataAttributes;
18
+ };
19
+ }
20
+ interface SwitchMotionHandleProps {
21
+ size: SwitchSize;
22
+ isOn: boolean;
23
+ isOnX: string;
24
+ showHoverEffect: boolean;
25
+ disabled?: boolean;
26
+ onIcon?: UniversalSwitchProps['onIcon'];
27
+ offIcon?: UniversalSwitchProps['offIcon'];
28
+ cssAnimationDuration: string;
29
+ reduceMotion: 'always' | 'user';
30
+ handleSlotProps?: DataAttributes;
31
+ }
32
+ //#endregion
33
+ export { type DataAttributes, type NativeInputProps, type SwitchChangeEvent, type SwitchMotionHandleProps, type SwitchProps };
@@ -0,0 +1,34 @@
1
+
2
+ "use client";
3
+ import { SwitchSize, UniversalSwitchProps } from "../../../types/dist/index.js";
4
+ import React, { ChangeEvent } from "react";
5
+
6
+ //#region src/components/client/Switch/types.d.ts
7
+ type DataAttributes = {
8
+ [name: `data-${string}`]: string;
9
+ };
10
+ type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'size' | 'height' | 'width' | 'color' | 'defaultChecked' | 'children'>;
11
+ type SwitchChangeEvent = ChangeEvent<HTMLInputElement>;
12
+ interface SwitchProps extends NativeInputProps, UniversalSwitchProps {
13
+ /** Props to be passed into various slots within the component. */
14
+ slotProps?: {
15
+ root?: DataAttributes;
16
+ switch?: DataAttributes;
17
+ handle?: DataAttributes;
18
+ label?: DataAttributes;
19
+ };
20
+ }
21
+ interface SwitchMotionHandleProps {
22
+ size: SwitchSize;
23
+ isOn: boolean;
24
+ isOnX: string;
25
+ showHoverEffect: boolean;
26
+ disabled?: boolean;
27
+ onIcon?: UniversalSwitchProps['onIcon'];
28
+ offIcon?: UniversalSwitchProps['offIcon'];
29
+ cssAnimationDuration: string;
30
+ reduceMotion: 'always' | 'user';
31
+ handleSlotProps?: DataAttributes;
32
+ }
33
+ //#endregion
34
+ export { type DataAttributes, type NativeInputProps, type SwitchChangeEvent, type SwitchMotionHandleProps, type SwitchProps };
@@ -0,0 +1,2 @@
1
+ /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
+ "use client";
@@ -6,7 +6,7 @@ const require_styles_styler = require("../../../styles/styler.cjs");
6
6
  const require_components_client_Pressable = require("../Pressable.cjs");
7
7
  const require_components_IconSlot = require("../../IconSlot.cjs");
8
8
  const require_components_Text = require("../../Text.cjs");
9
- const require_components_client_Button = require("../Button.cjs");
9
+ const require_components_client_Button_Button = require("../Button/Button.cjs");
10
10
  const require_components_client_Toast_UDSToastConfigProvider = require("./UDSToastConfigProvider.cjs");
11
11
  const require_components_client_Toast_ToastContainer = require("./ToastContainer.cjs");
12
12
  let _yahoo_uds_icons = require("@yahoo/uds-icons");
@@ -101,7 +101,7 @@ const Toast = ({ message, onClickCloseButton, size: sizeProp, variant: variantPr
101
101
  ...slotProps?.label,
102
102
  children: message
103
103
  }),
104
- actionButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Button.Button, {
104
+ actionButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Button_Button.Button, {
105
105
  size: buttonSize,
106
106
  variant: buttonVariant,
107
107
  onClick: onClickActionButton,
@@ -2,7 +2,7 @@
2
2
  import { UniversalToastProps } from "../../../types/dist/index.cjs";
3
3
  import { IconPropsWithSVGProps } from "../../../tokens/types.cjs";
4
4
  import { TextProps } from "../../Text.cjs";
5
- import { ButtonProps } from "../Button.cjs";
5
+ import { ButtonProps } from "../Button/Button.cjs";
6
6
  import { PressableProps } from "../Pressable.cjs";
7
7
  import * as _$react_jsx_runtime0 from "react/jsx-runtime";
8
8
  import { ToastContentProps } from "react-toastify";
@@ -3,7 +3,7 @@
3
3
  import { UniversalToastProps } from "../../../types/dist/index.js";
4
4
  import { IconPropsWithSVGProps } from "../../../tokens/types.js";
5
5
  import { TextProps } from "../../Text.js";
6
- import { ButtonProps } from "../Button.js";
6
+ import { ButtonProps } from "../Button/Button.js";
7
7
  import { PressableProps } from "../Pressable.js";
8
8
  import * as _$react_jsx_runtime0 from "react/jsx-runtime";
9
9
  import { ToastContentProps } from "react-toastify";
@@ -4,7 +4,7 @@ import { cx, getStyles } from "../../../styles/styler.js";
4
4
  import { Pressable } from "../Pressable.js";
5
5
  import { IconSlot } from "../../IconSlot.js";
6
6
  import { Text } from "../../Text.js";
7
- import { Button } from "../Button.js";
7
+ import { Button } from "../Button/Button.js";
8
8
  import { useToastConfig } from "./UDSToastConfigProvider.js";
9
9
  import { ToastContainer } from "./ToastContainer.js";
10
10
  import { CheckCircle, Cross, Error, Info, Progress, Warning } from "@yahoo/uds-icons";