@yahoo/uds 3.159.2 → 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 (145) 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/client/Button/Button.cjs +213 -0
  4. package/dist/components/client/Button/Button.d.cts +50 -0
  5. package/dist/components/client/Button/Button.d.ts +51 -0
  6. package/dist/components/client/Button/Button.js +208 -0
  7. package/dist/components/client/Button/ButtonBase.cjs +120 -0
  8. package/dist/components/client/Button/ButtonBase.d.cts +52 -0
  9. package/dist/components/client/Button/ButtonBase.d.ts +53 -0
  10. package/dist/components/client/Button/ButtonBase.js +116 -0
  11. package/dist/components/client/{buttonConstants.cjs → Button/buttonConstants.cjs} +1 -1
  12. package/dist/components/client/Button/buttonConstants.d.cts +7 -0
  13. package/dist/components/client/Button/buttonConstants.d.ts +8 -0
  14. package/dist/components/client/{buttonConstants.js → Button/buttonConstants.js} +1 -1
  15. package/dist/components/client/Button/index.cjs +10 -0
  16. package/dist/components/client/Button/index.d.cts +4 -0
  17. package/dist/components/client/Button/index.d.ts +5 -0
  18. package/dist/components/client/Button/index.js +5 -0
  19. package/dist/components/client/IconButton/IconButton.cjs +104 -0
  20. package/dist/components/client/IconButton/IconButton.d.cts +17 -0
  21. package/dist/components/client/IconButton/IconButton.d.ts +18 -0
  22. package/dist/components/client/IconButton/IconButton.js +102 -0
  23. package/dist/components/client/IconButton/IconButtonBase.cjs +68 -0
  24. package/dist/components/client/IconButton/IconButtonBase.d.cts +45 -0
  25. package/dist/components/client/IconButton/IconButtonBase.d.ts +46 -0
  26. package/dist/components/client/IconButton/IconButtonBase.js +65 -0
  27. package/dist/components/client/IconButton/index.cjs +8 -0
  28. package/dist/components/client/IconButton/index.d.cts +4 -0
  29. package/dist/components/client/IconButton/index.d.ts +5 -0
  30. package/dist/components/client/IconButton/index.js +5 -0
  31. package/dist/components/client/SpringMotionConfig.cjs +10 -13
  32. package/dist/components/client/SpringMotionConfig.js +10 -13
  33. package/dist/components/client/Switch/Switch.cjs +119 -0
  34. package/dist/components/client/{Switch.d.cts → Switch/Switch.d.cts} +4 -16
  35. package/dist/components/client/{Switch.d.ts → Switch/Switch.d.ts} +4 -16
  36. package/dist/components/client/Switch/Switch.js +115 -0
  37. package/dist/components/client/Switch/SwitchBase.cjs +129 -0
  38. package/dist/components/client/Switch/SwitchBase.d.cts +29 -0
  39. package/dist/components/client/Switch/SwitchBase.d.ts +30 -0
  40. package/dist/components/client/Switch/SwitchBase.js +126 -0
  41. package/dist/components/client/Switch/index.cjs +5 -0
  42. package/dist/components/client/Switch/index.d.cts +3 -0
  43. package/dist/components/client/Switch/index.d.ts +4 -0
  44. package/dist/components/client/Switch/index.js +4 -0
  45. package/dist/components/client/Switch/switchStyles.cjs +17 -0
  46. package/dist/components/client/Switch/switchStyles.d.cts +9 -0
  47. package/dist/components/client/Switch/switchStyles.d.ts +10 -0
  48. package/dist/components/client/Switch/switchStyles.js +16 -0
  49. package/dist/components/client/Switch/types.cjs +2 -0
  50. package/dist/components/client/Switch/types.d.cts +33 -0
  51. package/dist/components/client/Switch/types.d.ts +34 -0
  52. package/dist/components/client/Switch/types.js +2 -0
  53. package/dist/components/client/Toast/Toast.cjs +2 -2
  54. package/dist/components/client/Toast/Toast.d.cts +1 -1
  55. package/dist/components/client/Toast/Toast.d.ts +1 -1
  56. package/dist/components/client/Toast/Toast.js +1 -1
  57. package/dist/components/client/index.cjs +6 -6
  58. package/dist/components/client/index.d.cts +3 -3
  59. package/dist/components/client/index.d.ts +3 -3
  60. package/dist/components/client/index.js +3 -3
  61. package/dist/components/experimental/client/index.cjs +0 -6
  62. package/dist/components/experimental/client/index.d.cts +1 -3
  63. package/dist/components/experimental/client/index.d.ts +1 -3
  64. package/dist/components/experimental/client/index.js +1 -3
  65. package/dist/components/experimental/index.cjs +0 -5
  66. package/dist/components/experimental/index.d.cts +1 -3
  67. package/dist/components/experimental/index.d.ts +1 -3
  68. package/dist/components/experimental/index.js +1 -3
  69. package/dist/components/index.cjs +6 -6
  70. package/dist/components/index.d.cts +3 -3
  71. package/dist/components/index.d.ts +3 -3
  72. package/dist/components/index.js +3 -3
  73. package/dist/css-animation/Button/Button.cjs +85 -0
  74. package/dist/css-animation/Button/Button.d.cts +13 -0
  75. package/dist/css-animation/Button/Button.d.ts +14 -0
  76. package/dist/css-animation/Button/Button.js +82 -0
  77. package/dist/css-animation/Button/index.cjs +5 -0
  78. package/dist/css-animation/Button/index.d.cts +4 -0
  79. package/dist/css-animation/Button/index.d.ts +5 -0
  80. package/dist/css-animation/Button/index.js +4 -0
  81. package/dist/css-animation/IconButton/IconButton.cjs +55 -0
  82. package/dist/css-animation/IconButton/IconButton.d.cts +13 -0
  83. package/dist/css-animation/IconButton/IconButton.d.ts +14 -0
  84. package/dist/css-animation/IconButton/IconButton.js +53 -0
  85. package/dist/css-animation/IconButton/index.cjs +5 -0
  86. package/dist/css-animation/IconButton/index.d.cts +4 -0
  87. package/dist/css-animation/IconButton/index.d.ts +5 -0
  88. package/dist/css-animation/IconButton/index.js +4 -0
  89. package/dist/css-animation/Switch/Switch.cjs +44 -0
  90. package/dist/css-animation/Switch/Switch.d.cts +22 -0
  91. package/dist/css-animation/Switch/Switch.d.ts +23 -0
  92. package/dist/css-animation/Switch/Switch.js +41 -0
  93. package/dist/css-animation/Switch/SwitchStaticHandle.cjs +56 -0
  94. package/dist/css-animation/Switch/SwitchStaticHandle.d.cts +31 -0
  95. package/dist/css-animation/Switch/SwitchStaticHandle.d.ts +32 -0
  96. package/dist/css-animation/Switch/SwitchStaticHandle.js +54 -0
  97. package/dist/css-animation/Switch/index.cjs +5 -0
  98. package/dist/css-animation/Switch/index.d.cts +3 -0
  99. package/dist/css-animation/Switch/index.d.ts +4 -0
  100. package/dist/css-animation/Switch/index.js +4 -0
  101. package/dist/css-animation/index.cjs +9 -0
  102. package/dist/css-animation/index.d.cts +7 -0
  103. package/dist/css-animation/index.d.ts +8 -0
  104. package/dist/css-animation/index.js +6 -0
  105. package/dist/hooks/usePrefersReducedMotion.cjs +24 -0
  106. package/dist/hooks/usePrefersReducedMotion.d.cts +5 -0
  107. package/dist/hooks/usePrefersReducedMotion.d.ts +5 -0
  108. package/dist/hooks/usePrefersReducedMotion.js +22 -0
  109. package/dist/index.cjs +7 -7
  110. package/dist/index.d.cts +3 -3
  111. package/dist/index.d.ts +3 -3
  112. package/dist/index.js +4 -4
  113. package/dist/styles/styler.d.cts +4 -4
  114. package/dist/styles/styler.d.ts +4 -4
  115. package/dist/tailwind-internal/dist/utils/getShadowStyles.d.cts +2 -2
  116. package/dist/tailwind-internal/dist/utils/getShadowStyles.d.ts +2 -2
  117. package/dist/uds/generated/componentData.cjs +308 -317
  118. package/dist/uds/generated/componentData.js +308 -317
  119. package/dist/uds/generated/tailwindPurge.cjs +8 -21
  120. package/dist/uds/generated/tailwindPurge.js +8 -21
  121. package/dist/uds/package.cjs +12 -2
  122. package/dist/uds/package.js +12 -2
  123. package/generated/componentData.json +458 -489
  124. package/generated/tailwindPurge.ts +3 -3
  125. package/package.json +13 -3
  126. package/dist/components/client/Button.cjs +0 -326
  127. package/dist/components/client/Button.d.cts +0 -86
  128. package/dist/components/client/Button.d.ts +0 -87
  129. package/dist/components/client/Button.js +0 -321
  130. package/dist/components/client/IconButton.cjs +0 -161
  131. package/dist/components/client/IconButton.d.cts +0 -46
  132. package/dist/components/client/IconButton.d.ts +0 -47
  133. package/dist/components/client/IconButton.js +0 -159
  134. package/dist/components/client/Switch.cjs +0 -225
  135. package/dist/components/client/Switch.js +0 -222
  136. package/dist/components/client/buttonConstants.d.cts +0 -7
  137. package/dist/components/client/buttonConstants.d.ts +0 -8
  138. package/dist/components/experimental/client/AvoidMotionLibraryProvider.cjs +0 -14
  139. package/dist/components/experimental/client/AvoidMotionLibraryProvider.d.cts +0 -8
  140. package/dist/components/experimental/client/AvoidMotionLibraryProvider.d.ts +0 -9
  141. package/dist/components/experimental/client/AvoidMotionLibraryProvider.js +0 -11
  142. package/dist/components/experimental/client/SwitchV2.cjs +0 -190
  143. package/dist/components/experimental/client/SwitchV2.d.cts +0 -46
  144. package/dist/components/experimental/client/SwitchV2.d.ts +0 -47
  145. package/dist/components/experimental/client/SwitchV2.js +0 -185
@@ -1,159 +0,0 @@
1
- /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
- "use client";
3
- import { BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST } from "../../css-tokens/dist/index.js";
4
- import { cx, getStyles } from "../../styles/styler.js";
5
- import { createSlot } from "../../utils/createSlot.js";
6
- import { Icon } from "../Icon.js";
7
- import { generateDefaultClassName } from "../../automated-config/dist/utils/generateDefaultClassName.js";
8
- import "./buttonConstants.js";
9
- import { SpringMotionConfig } from "./SpringMotionConfig.js";
10
- import { iconMotionVariants, loadingMotionVariants } from "./Button.js";
11
- import { Progress } from "@yahoo/uds-icons";
12
- import { cloneElement, forwardRef, isValidElement, useImperativeHandle, useMemo, useRef } from "react";
13
- import { jsx, jsxs } from "react/jsx-runtime";
14
- import { AnimatePresence, m, useReducedMotion } from "motion/react";
15
- //#region src/components/client/IconButton.tsx
16
- const defaultSizeRootClass = generateDefaultClassName("iconbutton", "size", "root");
17
- const defaultSizeIconClass = generateDefaultClassName("iconbutton", "size", "icon");
18
- const defaultVariantRootClass = generateDefaultClassName("button", "variant", "root");
19
- const defaultVariantIconClass = generateDefaultClassName("button", "variant", "icon");
20
- /**
21
- * **⚙️️ An icon button element that can be used to trigger an action**
22
- *
23
- * @componentType Client component
24
- *
25
- * @description An icon button is essentially an interactive icon. They should be used to display an icon which, when clicked, allows the user to trigger an action. Icon buttons provide additional features such hover states, focus states, and pressable functionality.
26
- *
27
- * @see
28
- * Check out the {@link https://uds.build/docs/components/icon-button IconButton Docs} for more info
29
- *
30
- * @usage
31
- * - When you need a button that is represented by an icon rather than text. This is useful in compact spaces, toolbars, or when the action is commonly understood through a visual symbol.
32
- * - If you need a button that is used to trigger a non-critical action.
33
- *
34
- * @example
35
- * ```tsx
36
- * 'use client';
37
- * import { IconButton } from "@yahoo/uds";
38
- * import { AddFolder } from "@yahoo/uds-icons";
39
- *
40
- * <IconButton name={AddFolder} variant="primary" />
41
- * ```
42
- *
43
- * @related [Icon](https://uds.build/docs/components/icon), [Button](https://uds.build/docs/components/button), and [Pressable](https://uds.build/docs/components/pressable)
44
- *
45
- **/
46
- const IconButton = forwardRef(function IconButton({ variant, size, iconVariant, loading, disableEffects, name, asChild = false, slotProps, type = "button", htmlName, className, children, ...rest }, forwardedRef) {
47
- const ref = useRef(null);
48
- useImperativeHandle(forwardedRef, () => ref.current);
49
- const { className: iconSlotClassName, ...iconSlotProps } = slotProps?.icon ?? {};
50
- const prefersReducedMotion = useReducedMotion();
51
- const disableMotion = !!disableEffects || !!rest?.disabled;
52
- const layoutVariant = useMemo(() => prefersReducedMotion ? "smooth" : "subtle", [prefersReducedMotion]);
53
- const Slot = useMemo(() => createSlot(), []);
54
- const MotionSlot = useMemo(() => m.create(Slot), [Slot]);
55
- const buttonVariants = useMemo(() => ({
56
- rest: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_REST})` },
57
- hover: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_HOVER})` },
58
- pressed: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_PRESSED})` }
59
- }), [disableMotion]);
60
- const rootSizeClass = useMemo(() => size ? getStyles({ iconbuttonSizeRoot: size }) : defaultSizeRootClass, [size]);
61
- const rootVariantClass = useMemo(() => variant ? getStyles({ buttonVariantRoot: variant }) : defaultVariantRootClass, [variant]);
62
- const iconSizeClass = useMemo(() => size ? getStyles({ iconbuttonSizeIcon: size }) : defaultSizeIconClass, [size]);
63
- const iconVariantClass = useMemo(() => variant ? getStyles({ buttonVariantIcon: variant }) : defaultVariantIconClass, [variant]);
64
- const styles = useMemo(() => ({
65
- root: cx("uds-ring", "uds-hit-target", "inline-flex overflow-hidden justify-center items-center", "[transform-origin:center]", "[backface-visibility:hidden]", "[transition-property:color,background-color,border-color,box-shadow,text-decoration-color,fill,stroke]", "[transition-timing-function:cubic-bezier(0,0,0.2,1)]", "[transition-duration:220ms]", rootSizeClass, rootVariantClass, rest?.disabled && "cursor-not-allowed", loading && "uds-button-loading", disableEffects && "uds-button-without-effects", className),
66
- icon: getStyles({ className: cx(iconSizeClass, iconVariantClass) }),
67
- loadingIcon: getStyles({ className: cx([
68
- "animate-spin",
69
- iconSizeClass,
70
- iconVariantClass
71
- ]) })
72
- }), [
73
- className,
74
- disableEffects,
75
- iconSizeClass,
76
- iconVariantClass,
77
- loading,
78
- rest?.disabled,
79
- rootSizeClass,
80
- rootVariantClass
81
- ]);
82
- const iconContent = useMemo(() => /* @__PURE__ */ jsxs(AnimatePresence, {
83
- initial: false,
84
- mode: "popLayout",
85
- children: [loading && /* @__PURE__ */ jsx(m.span, {
86
- variants: loadingMotionVariants,
87
- initial: "loading",
88
- animate: "loading",
89
- exit: "hide",
90
- children: /* @__PURE__ */ jsx(Icon, {
91
- size: "sm",
92
- name: Progress,
93
- variant: iconVariant,
94
- color: "current",
95
- className: styles.loadingIcon
96
- })
97
- }, "loading"), name && !loading && /* @__PURE__ */ jsx(m.span, {
98
- variants: iconMotionVariants,
99
- initial: "icon",
100
- animate: "icon",
101
- exit: "hide",
102
- children: !asChild && children || /* @__PURE__ */ jsx(Icon, {
103
- size: "sm",
104
- name,
105
- variant: iconVariant,
106
- color: "current",
107
- className: cx(styles.icon, iconSlotClassName),
108
- ...iconSlotProps
109
- })
110
- }, name.name)]
111
- }), [
112
- asChild,
113
- children,
114
- iconSlotClassName,
115
- iconSlotProps,
116
- iconVariant,
117
- loading,
118
- name,
119
- styles
120
- ]);
121
- if (asChild && isValidElement(children)) {
122
- const childProps = children.props;
123
- return /* @__PURE__ */ jsx(SpringMotionConfig, {
124
- layoutSpeed: "3",
125
- layoutVariant,
126
- reducedMotion: disableEffects ? "always" : "user",
127
- children: /* @__PURE__ */ jsx(MotionSlot, {
128
- type,
129
- className: styles.root,
130
- initial: "icon",
131
- variants: buttonVariants,
132
- whileHover: "hover",
133
- whileTap: "pressed",
134
- ...rest,
135
- children: cloneElement(children, childProps, iconContent)
136
- })
137
- });
138
- }
139
- return /* @__PURE__ */ jsx(SpringMotionConfig, {
140
- layoutSpeed: "3",
141
- layoutVariant,
142
- reducedMotion: disableEffects ? "always" : "user",
143
- children: /* @__PURE__ */ jsx(m.button, {
144
- ref,
145
- type,
146
- className: styles.root,
147
- name: htmlName,
148
- initial: "icon",
149
- variants: buttonVariants,
150
- whileHover: "hover",
151
- whileTap: "pressed",
152
- ...rest,
153
- children: iconContent
154
- })
155
- });
156
- });
157
- IconButton.displayName = "IconButton";
158
- //#endregion
159
- export { IconButton };
@@ -1,225 +0,0 @@
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_IconSlot = require("../IconSlot.cjs");
7
- const require_components_Box = require("../Box.cjs");
8
- const require_components_FormLabel = require("../FormLabel.cjs");
9
- const require_components_client_SpringMotionConfig = require("./SpringMotionConfig.cjs");
10
- let react = require("react");
11
- react = require_runtime.__toESM(react);
12
- let react_jsx_runtime = require("react/jsx-runtime");
13
- let motion_react = require("motion/react");
14
- //#region src/components/client/Switch.tsx
15
- const SIZE_MAP = {
16
- md: { isOnX: "1.25rem" },
17
- sm: { isOnX: "0.75rem" }
18
- };
19
- const MotionBox = motion_react.m.create(require_components_Box.Box);
20
- const toggleTransition = {
21
- layoutVariant: "bouncy",
22
- layoutSpeed: "4"
23
- };
24
- /**
25
- * **⚙️️ An switch.
26
- *
27
- * @componentType Client component
28
- *
29
- * @description
30
- * 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.
31
- *
32
- * @see
33
- * Check out the {@link https://uds.build/docs/components/switch Switch Docs} for more info
34
- *
35
- * @usage
36
- * - Forms: switch
37
- *
38
- * @example
39
- * ```tsx
40
- * 'use client';
41
- * import { Switch } from "@yahoo/uds";
42
- *
43
- * <Switch label="Name" required />
44
- *```
45
- *
46
- * @related [Checkbox](https://uds.build/docs/components/checkbox).
47
- **/
48
- const Switch = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, reduceMotion: forceReduceMotion, disabled, required, onFocus, onBlur, className, style, slotProps, ...switchProps }, parentRef) {
49
- const generatedId = (0, react.useId)();
50
- const uid = id ?? `uds-input-${generatedId}`;
51
- const rootSlotProps = slotProps?.root ?? {};
52
- const switchSlotProps = slotProps?.switch ?? {};
53
- const handleSlotProps = slotProps?.handle ?? {};
54
- const labelSlotProps = slotProps?.label ?? {};
55
- const innerRef = (0, react.useRef)(null);
56
- /**
57
- * State
58
- */
59
- const isControlled = isOnProp !== void 0;
60
- const [isOn, setIsOn] = (0, react.useState)(isControlled ? isOnProp : defaultIsOn);
61
- const [isHovered, setIsHovered] = (0, react.useState)(false);
62
- /**
63
- * Derived values
64
- */
65
- const showHoverEffect = (0, react.useMemo)(() => {
66
- return !disabled && isHovered;
67
- }, [disabled, isHovered]);
68
- const { isOnX } = SIZE_MAP[size];
69
- const motionInitialAndAnimate = (0, react.useMemo)(() => ({
70
- initial: {
71
- scale: 1,
72
- x: isOn ? isOnX : 0
73
- },
74
- animate: {
75
- scale: showHoverEffect ? 1.05 : 1,
76
- x: isOn ? isOnX : 0
77
- }
78
- }), [
79
- showHoverEffect,
80
- isOn,
81
- isOnX
82
- ]);
83
- /**
84
- * Handlers
85
- */
86
- const handleChange = (0, react.useCallback)((e) => {
87
- onChange?.(e);
88
- if (!isControlled) setIsOn(e.target.checked);
89
- }, [isControlled, onChange]);
90
- const handleFocus = (0, react.useCallback)((e) => {
91
- onFocus?.(e);
92
- }, [onFocus]);
93
- const handleBlur = (0, react.useCallback)((e) => {
94
- onBlur?.(e);
95
- }, [onBlur]);
96
- const handleHoverStart = (0, react.useCallback)(() => {
97
- setIsHovered(true);
98
- }, []);
99
- const handleHoverEnd = (0, react.useCallback)(() => {
100
- setIsHovered(false);
101
- }, []);
102
- const prefersReducedMotion = (0, motion_react.useReducedMotion)();
103
- const reduceMotion = forceReduceMotion ? "always" : "user";
104
- const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
105
- /**
106
- * Effects
107
- */
108
- (0, react.useEffect)(() => {
109
- if (isControlled) setIsOn(isOnProp);
110
- }, [isOnProp, isControlled]);
111
- const classNames = {
112
- root: require_styles_styler.getStyles({
113
- switchSizeRoot: size,
114
- switchVariantRoot: "default",
115
- switchVariantActiveRoot: isOn ? "on" : "off",
116
- display: "flex",
117
- flexDirection: labelPosition === "start" ? "row" : "row-reverse",
118
- alignItems: "center",
119
- className: require_styles_styler.cx("group", {
120
- "cursor-pointer": !disabled,
121
- "cursor-default": disabled,
122
- "opacity-50": disabled
123
- }, className)
124
- }),
125
- switch: require_styles_styler.getStyles({
126
- switchVariantSwitch: "default",
127
- switchSizeSwitch: size,
128
- switchVariantActiveSwitch: isOn ? "on" : "off",
129
- borderRadius: "full",
130
- position: "relative",
131
- alignItems: "center",
132
- className: require_styles_styler.cx("uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,box-shadow]")
133
- }),
134
- handle: require_styles_styler.getStyles({
135
- switchSizeHandle: size,
136
- className: require_styles_styler.cx("relative", "pointer-events-none", "uds-border-radius-full", "overflow-hidden")
137
- }),
138
- handleCircle: require_styles_styler.getStyles({
139
- switchVariantActiveHandle: isOn ? "on" : "off",
140
- switchVariantHandle: "default",
141
- className: require_styles_styler.cx("absolute", "top-0", "left-0", "right-0", "bottom-0", "opacity-95 group-hover:opacity-100", cssAnimationDuration, "transition-[background-color,box-shadow,opacity]")
142
- }),
143
- handleIcon: require_styles_styler.getStyles({
144
- switchSizeHandleIcon: size,
145
- switchVariantHandleIcon: "default",
146
- switchVariantActiveHandleIcon: isOn ? "on" : "off",
147
- className: require_styles_styler.cx("absolute", "opacity-0", "top-1/2", "left-1/2", "transform", "translate-x-[-50%]", "translate-y-[-50%]", cssAnimationDuration, "transition-opacity")
148
- }),
149
- 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%]"),
150
- label: require_styles_styler.cx(labelPosition === "start" ? "text-start" : "text-end")
151
- };
152
- const RootElement = label ? motion_react.m.label : motion_react.m.div;
153
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
154
- reducedMotion: reduceMotion,
155
- ...toggleTransition,
156
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RootElement, {
157
- className: classNames.root,
158
- "data-testid": "container",
159
- style,
160
- onHoverStart: handleHoverStart,
161
- onHoverEnd: handleHoverEnd,
162
- tabIndex: -1,
163
- ...rootSlotProps,
164
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
165
- className: classNames.switch,
166
- ...switchSlotProps,
167
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
168
- type: "checkbox",
169
- tabIndex: 0,
170
- ...switchProps,
171
- ref: (ref) => {
172
- innerRef.current = ref;
173
- if (typeof parentRef === "function") parentRef(ref);
174
- else if (parentRef !== null) parentRef.current = ref;
175
- },
176
- onFocus: handleFocus,
177
- onBlur: handleBlur,
178
- id: uid,
179
- disabled,
180
- required,
181
- checked: isControlled ? isOn : void 0,
182
- defaultChecked: isControlled ? void 0 : defaultIsOn,
183
- onChange: handleChange,
184
- className: classNames.htmlCheckbox
185
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
186
- className: classNames.handle,
187
- ...motionInitialAndAnimate,
188
- ...handleSlotProps,
189
- children: [
190
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, { className: classNames.handleCircle }),
191
- onIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
192
- icon: onIcon,
193
- iconProps: {
194
- variant: "fill",
195
- size: "sm"
196
- },
197
- "data-testid": "on-icon",
198
- className: require_styles_styler.cx(classNames.handleIcon, isOn ? "opacity-100" : "opacity-0")
199
- }),
200
- offIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
201
- icon: offIcon,
202
- iconProps: {
203
- variant: "fill",
204
- size: "sm"
205
- },
206
- "data-testid": "off-icon",
207
- className: require_styles_styler.cx(classNames.handleIcon, !isOn ? "opacity-100" : "opacity-0")
208
- })
209
- ]
210
- })]
211
- }), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
212
- as: "div",
213
- variant: "inherit",
214
- color: "inherit",
215
- required,
216
- label,
217
- className: classNames.label,
218
- ...labelSlotProps
219
- })]
220
- })
221
- });
222
- });
223
- Switch.displayName = "Switch";
224
- //#endregion
225
- exports.Switch = Switch;
@@ -1,222 +0,0 @@
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 { FormLabel } from "../FormLabel.js";
7
- import { SpringMotionConfig } from "./SpringMotionConfig.js";
8
- import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
9
- import { jsx, jsxs } from "react/jsx-runtime";
10
- import { m, useReducedMotion } from "motion/react";
11
- //#region src/components/client/Switch.tsx
12
- const SIZE_MAP = {
13
- md: { isOnX: "1.25rem" },
14
- sm: { isOnX: "0.75rem" }
15
- };
16
- const MotionBox = m.create(Box);
17
- const toggleTransition = {
18
- layoutVariant: "bouncy",
19
- layoutSpeed: "4"
20
- };
21
- /**
22
- * **⚙️️ An switch.
23
- *
24
- * @componentType Client component
25
- *
26
- * @description
27
- * 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.
28
- *
29
- * @see
30
- * Check out the {@link https://uds.build/docs/components/switch Switch Docs} for more info
31
- *
32
- * @usage
33
- * - Forms: switch
34
- *
35
- * @example
36
- * ```tsx
37
- * 'use client';
38
- * import { Switch } from "@yahoo/uds";
39
- *
40
- * <Switch label="Name" required />
41
- *```
42
- *
43
- * @related [Checkbox](https://uds.build/docs/components/checkbox).
44
- **/
45
- const Switch = forwardRef(function Switch({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, reduceMotion: forceReduceMotion, disabled, required, onFocus, onBlur, className, style, slotProps, ...switchProps }, parentRef) {
46
- const generatedId = useId();
47
- const uid = id ?? `uds-input-${generatedId}`;
48
- const rootSlotProps = slotProps?.root ?? {};
49
- const switchSlotProps = slotProps?.switch ?? {};
50
- const handleSlotProps = slotProps?.handle ?? {};
51
- const labelSlotProps = slotProps?.label ?? {};
52
- const innerRef = useRef(null);
53
- /**
54
- * State
55
- */
56
- const isControlled = isOnProp !== void 0;
57
- const [isOn, setIsOn] = useState(isControlled ? isOnProp : defaultIsOn);
58
- const [isHovered, setIsHovered] = useState(false);
59
- /**
60
- * Derived values
61
- */
62
- const showHoverEffect = useMemo(() => {
63
- return !disabled && isHovered;
64
- }, [disabled, isHovered]);
65
- const { isOnX } = SIZE_MAP[size];
66
- const motionInitialAndAnimate = useMemo(() => ({
67
- initial: {
68
- scale: 1,
69
- x: isOn ? isOnX : 0
70
- },
71
- animate: {
72
- scale: showHoverEffect ? 1.05 : 1,
73
- x: isOn ? isOnX : 0
74
- }
75
- }), [
76
- showHoverEffect,
77
- isOn,
78
- isOnX
79
- ]);
80
- /**
81
- * Handlers
82
- */
83
- const handleChange = useCallback((e) => {
84
- onChange?.(e);
85
- if (!isControlled) setIsOn(e.target.checked);
86
- }, [isControlled, onChange]);
87
- const handleFocus = useCallback((e) => {
88
- onFocus?.(e);
89
- }, [onFocus]);
90
- const handleBlur = useCallback((e) => {
91
- onBlur?.(e);
92
- }, [onBlur]);
93
- const handleHoverStart = useCallback(() => {
94
- setIsHovered(true);
95
- }, []);
96
- const handleHoverEnd = useCallback(() => {
97
- setIsHovered(false);
98
- }, []);
99
- const prefersReducedMotion = useReducedMotion();
100
- const reduceMotion = forceReduceMotion ? "always" : "user";
101
- const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
102
- /**
103
- * Effects
104
- */
105
- useEffect(() => {
106
- if (isControlled) setIsOn(isOnProp);
107
- }, [isOnProp, isControlled]);
108
- const classNames = {
109
- root: getStyles({
110
- switchSizeRoot: size,
111
- switchVariantRoot: "default",
112
- switchVariantActiveRoot: isOn ? "on" : "off",
113
- display: "flex",
114
- flexDirection: labelPosition === "start" ? "row" : "row-reverse",
115
- alignItems: "center",
116
- className: cx("group", {
117
- "cursor-pointer": !disabled,
118
- "cursor-default": disabled,
119
- "opacity-50": disabled
120
- }, className)
121
- }),
122
- switch: getStyles({
123
- switchVariantSwitch: "default",
124
- switchSizeSwitch: size,
125
- switchVariantActiveSwitch: isOn ? "on" : "off",
126
- borderRadius: "full",
127
- position: "relative",
128
- alignItems: "center",
129
- className: cx("uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,box-shadow]")
130
- }),
131
- handle: getStyles({
132
- switchSizeHandle: size,
133
- className: cx("relative", "pointer-events-none", "uds-border-radius-full", "overflow-hidden")
134
- }),
135
- handleCircle: getStyles({
136
- switchVariantActiveHandle: isOn ? "on" : "off",
137
- switchVariantHandle: "default",
138
- className: cx("absolute", "top-0", "left-0", "right-0", "bottom-0", "opacity-95 group-hover:opacity-100", cssAnimationDuration, "transition-[background-color,box-shadow,opacity]")
139
- }),
140
- handleIcon: getStyles({
141
- switchSizeHandleIcon: size,
142
- switchVariantHandleIcon: "default",
143
- switchVariantActiveHandleIcon: isOn ? "on" : "off",
144
- className: cx("absolute", "opacity-0", "top-1/2", "left-1/2", "transform", "translate-x-[-50%]", "translate-y-[-50%]", cssAnimationDuration, "transition-opacity")
145
- }),
146
- 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%]"),
147
- label: cx(labelPosition === "start" ? "text-start" : "text-end")
148
- };
149
- const RootElement = label ? m.label : m.div;
150
- return /* @__PURE__ */ jsx(SpringMotionConfig, {
151
- reducedMotion: reduceMotion,
152
- ...toggleTransition,
153
- children: /* @__PURE__ */ jsxs(RootElement, {
154
- className: classNames.root,
155
- "data-testid": "container",
156
- style,
157
- onHoverStart: handleHoverStart,
158
- onHoverEnd: handleHoverEnd,
159
- tabIndex: -1,
160
- ...rootSlotProps,
161
- children: [/* @__PURE__ */ jsxs(MotionBox, {
162
- className: classNames.switch,
163
- ...switchSlotProps,
164
- children: [/* @__PURE__ */ jsx("input", {
165
- type: "checkbox",
166
- tabIndex: 0,
167
- ...switchProps,
168
- ref: (ref) => {
169
- innerRef.current = ref;
170
- if (typeof parentRef === "function") parentRef(ref);
171
- else if (parentRef !== null) parentRef.current = ref;
172
- },
173
- onFocus: handleFocus,
174
- onBlur: handleBlur,
175
- id: uid,
176
- disabled,
177
- required,
178
- checked: isControlled ? isOn : void 0,
179
- defaultChecked: isControlled ? void 0 : defaultIsOn,
180
- onChange: handleChange,
181
- className: classNames.htmlCheckbox
182
- }), /* @__PURE__ */ jsxs(MotionBox, {
183
- className: classNames.handle,
184
- ...motionInitialAndAnimate,
185
- ...handleSlotProps,
186
- children: [
187
- /* @__PURE__ */ jsx(Box, { className: classNames.handleCircle }),
188
- onIcon && /* @__PURE__ */ jsx(IconSlot, {
189
- icon: onIcon,
190
- iconProps: {
191
- variant: "fill",
192
- size: "sm"
193
- },
194
- "data-testid": "on-icon",
195
- className: cx(classNames.handleIcon, isOn ? "opacity-100" : "opacity-0")
196
- }),
197
- offIcon && /* @__PURE__ */ jsx(IconSlot, {
198
- icon: offIcon,
199
- iconProps: {
200
- variant: "fill",
201
- size: "sm"
202
- },
203
- "data-testid": "off-icon",
204
- className: cx(classNames.handleIcon, !isOn ? "opacity-100" : "opacity-0")
205
- })
206
- ]
207
- })]
208
- }), label && /* @__PURE__ */ jsx(FormLabel, {
209
- as: "div",
210
- variant: "inherit",
211
- color: "inherit",
212
- required,
213
- label,
214
- className: classNames.label,
215
- ...labelSlotProps
216
- })]
217
- })
218
- });
219
- });
220
- Switch.displayName = "Switch";
221
- //#endregion
222
- export { Switch };
@@ -1,7 +0,0 @@
1
-
2
- import { ButtonSize } from "../../types/dist/index.cjs";
3
- //#region src/components/client/buttonConstants.d.ts
4
- /** The icon size used for icons in Button and IconButton components */
5
- declare const buttonIconSvgSize: ButtonSize;
6
- //#endregion
7
- export { buttonIconSvgSize };
@@ -1,8 +0,0 @@
1
-
2
- "use client";
3
- import { ButtonSize } from "../../types/dist/index.js";
4
- //#region src/components/client/buttonConstants.d.ts
5
- /** The icon size used for icons in Button and IconButton components */
6
- declare const buttonIconSvgSize: ButtonSize;
7
- //#endregion
8
- export { buttonIconSvgSize };
@@ -1,14 +0,0 @@
1
- /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
- "use client";
3
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
- require("../../../_virtual/_rolldown/runtime.cjs");
5
- let react = require("react");
6
- //#region src/components/experimental/client/AvoidMotionLibraryProvider.tsx
7
- const AvoidMotionLibrary = (0, react.createContext)(false);
8
- const AvoidMotionLibraryProvider = AvoidMotionLibrary.Provider;
9
- const useAvoidMotionLibrary = () => {
10
- return (0, react.useContext)(AvoidMotionLibrary);
11
- };
12
- //#endregion
13
- exports.AvoidMotionLibraryProvider = AvoidMotionLibraryProvider;
14
- exports.useAvoidMotionLibrary = useAvoidMotionLibrary;
@@ -1,8 +0,0 @@
1
-
2
- import * as _$react from "react";
3
-
4
- //#region src/components/experimental/client/AvoidMotionLibraryProvider.d.ts
5
- declare const AvoidMotionLibraryProvider: _$react.Provider<boolean>;
6
- declare const useAvoidMotionLibrary: () => boolean;
7
- //#endregion
8
- export { AvoidMotionLibraryProvider, useAvoidMotionLibrary };
@@ -1,9 +0,0 @@
1
-
2
- "use client";
3
- import * as _$react from "react";
4
-
5
- //#region src/components/experimental/client/AvoidMotionLibraryProvider.d.ts
6
- declare const AvoidMotionLibraryProvider: _$react.Provider<boolean>;
7
- declare const useAvoidMotionLibrary: () => boolean;
8
- //#endregion
9
- export { AvoidMotionLibraryProvider, useAvoidMotionLibrary };
@@ -1,11 +0,0 @@
1
- /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
- "use client";
3
- import { createContext, useContext } from "react";
4
- //#region src/components/experimental/client/AvoidMotionLibraryProvider.tsx
5
- const AvoidMotionLibrary = createContext(false);
6
- const AvoidMotionLibraryProvider = AvoidMotionLibrary.Provider;
7
- const useAvoidMotionLibrary = () => {
8
- return useContext(AvoidMotionLibrary);
9
- };
10
- //#endregion
11
- export { AvoidMotionLibraryProvider, useAvoidMotionLibrary };