@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.
- package/dist/automated-config/dist/properties.cjs +1 -1
- package/dist/automated-config/dist/properties.js +1 -1
- package/dist/components/Text.cjs +4 -2
- package/dist/components/Text.js +4 -2
- package/dist/components/client/Button/Button.cjs +213 -0
- package/dist/components/client/Button/Button.d.cts +50 -0
- package/dist/components/client/Button/Button.d.ts +51 -0
- package/dist/components/client/Button/Button.js +208 -0
- package/dist/components/client/Button/ButtonBase.cjs +120 -0
- package/dist/components/client/Button/ButtonBase.d.cts +52 -0
- package/dist/components/client/Button/ButtonBase.d.ts +53 -0
- package/dist/components/client/Button/ButtonBase.js +116 -0
- package/dist/components/client/{buttonConstants.cjs → Button/buttonConstants.cjs} +1 -1
- package/dist/components/client/Button/buttonConstants.d.cts +7 -0
- package/dist/components/client/Button/buttonConstants.d.ts +8 -0
- package/dist/components/client/{buttonConstants.js → Button/buttonConstants.js} +1 -1
- package/dist/components/client/Button/index.cjs +10 -0
- package/dist/components/client/Button/index.d.cts +4 -0
- package/dist/components/client/Button/index.d.ts +5 -0
- package/dist/components/client/Button/index.js +5 -0
- package/dist/components/client/IconButton/IconButton.cjs +104 -0
- package/dist/components/client/IconButton/IconButton.d.cts +17 -0
- package/dist/components/client/IconButton/IconButton.d.ts +18 -0
- package/dist/components/client/IconButton/IconButton.js +102 -0
- package/dist/components/client/IconButton/IconButtonBase.cjs +68 -0
- package/dist/components/client/IconButton/IconButtonBase.d.cts +45 -0
- package/dist/components/client/IconButton/IconButtonBase.d.ts +46 -0
- package/dist/components/client/IconButton/IconButtonBase.js +65 -0
- package/dist/components/client/IconButton/index.cjs +8 -0
- package/dist/components/client/IconButton/index.d.cts +4 -0
- package/dist/components/client/IconButton/index.d.ts +5 -0
- package/dist/components/client/IconButton/index.js +5 -0
- package/dist/components/client/Pressable.cjs +3 -1
- package/dist/components/client/Pressable.js +3 -1
- package/dist/components/client/SpringMotionConfig.cjs +10 -13
- package/dist/components/client/SpringMotionConfig.js +10 -13
- package/dist/components/client/Switch/Switch.cjs +119 -0
- package/dist/components/client/{Switch.d.cts → Switch/Switch.d.cts} +4 -16
- package/dist/components/client/{Switch.d.ts → Switch/Switch.d.ts} +4 -16
- package/dist/components/client/Switch/Switch.js +115 -0
- package/dist/components/client/Switch/SwitchBase.cjs +129 -0
- package/dist/components/client/Switch/SwitchBase.d.cts +29 -0
- package/dist/components/client/Switch/SwitchBase.d.ts +30 -0
- package/dist/components/client/Switch/SwitchBase.js +126 -0
- package/dist/components/client/Switch/index.cjs +5 -0
- package/dist/components/client/Switch/index.d.cts +3 -0
- package/dist/components/client/Switch/index.d.ts +4 -0
- package/dist/components/client/Switch/index.js +4 -0
- package/dist/components/client/Switch/switchStyles.cjs +17 -0
- package/dist/components/client/Switch/switchStyles.d.cts +9 -0
- package/dist/components/client/Switch/switchStyles.d.ts +10 -0
- package/dist/components/client/Switch/switchStyles.js +16 -0
- package/dist/components/client/Switch/types.cjs +2 -0
- package/dist/components/client/Switch/types.d.cts +33 -0
- package/dist/components/client/Switch/types.d.ts +34 -0
- package/dist/components/client/Switch/types.js +2 -0
- package/dist/components/client/Toast/Toast.cjs +2 -2
- package/dist/components/client/Toast/Toast.d.cts +1 -1
- package/dist/components/client/Toast/Toast.d.ts +1 -1
- package/dist/components/client/Toast/Toast.js +1 -1
- package/dist/components/client/index.cjs +6 -6
- package/dist/components/client/index.d.cts +3 -3
- package/dist/components/client/index.d.ts +3 -3
- package/dist/components/client/index.js +3 -3
- package/dist/components/experimental/client/index.cjs +0 -6
- package/dist/components/experimental/client/index.d.cts +1 -3
- package/dist/components/experimental/client/index.d.ts +1 -3
- package/dist/components/experimental/client/index.js +1 -3
- package/dist/components/experimental/index.cjs +0 -5
- package/dist/components/experimental/index.d.cts +1 -3
- package/dist/components/experimental/index.d.ts +1 -3
- package/dist/components/experimental/index.js +1 -3
- package/dist/components/index.cjs +6 -6
- package/dist/components/index.d.cts +3 -3
- package/dist/components/index.d.ts +3 -3
- package/dist/components/index.js +3 -3
- package/dist/css-animation/Button/Button.cjs +85 -0
- package/dist/css-animation/Button/Button.d.cts +13 -0
- package/dist/css-animation/Button/Button.d.ts +14 -0
- package/dist/css-animation/Button/Button.js +82 -0
- package/dist/css-animation/Button/index.cjs +5 -0
- package/dist/css-animation/Button/index.d.cts +4 -0
- package/dist/css-animation/Button/index.d.ts +5 -0
- package/dist/css-animation/Button/index.js +4 -0
- package/dist/css-animation/IconButton/IconButton.cjs +55 -0
- package/dist/css-animation/IconButton/IconButton.d.cts +13 -0
- package/dist/css-animation/IconButton/IconButton.d.ts +14 -0
- package/dist/css-animation/IconButton/IconButton.js +53 -0
- package/dist/css-animation/IconButton/index.cjs +5 -0
- package/dist/css-animation/IconButton/index.d.cts +4 -0
- package/dist/css-animation/IconButton/index.d.ts +5 -0
- package/dist/css-animation/IconButton/index.js +4 -0
- package/dist/css-animation/Switch/Switch.cjs +44 -0
- package/dist/css-animation/Switch/Switch.d.cts +22 -0
- package/dist/css-animation/Switch/Switch.d.ts +23 -0
- package/dist/css-animation/Switch/Switch.js +41 -0
- package/dist/css-animation/Switch/SwitchStaticHandle.cjs +56 -0
- package/dist/css-animation/Switch/SwitchStaticHandle.d.cts +31 -0
- package/dist/css-animation/Switch/SwitchStaticHandle.d.ts +32 -0
- package/dist/css-animation/Switch/SwitchStaticHandle.js +54 -0
- package/dist/css-animation/Switch/index.cjs +5 -0
- package/dist/css-animation/Switch/index.d.cts +3 -0
- package/dist/css-animation/Switch/index.d.ts +4 -0
- package/dist/css-animation/Switch/index.js +4 -0
- package/dist/css-animation/index.cjs +9 -0
- package/dist/css-animation/index.d.cts +7 -0
- package/dist/css-animation/index.d.ts +8 -0
- package/dist/css-animation/index.js +6 -0
- package/dist/hooks/usePrefersReducedMotion.cjs +24 -0
- package/dist/hooks/usePrefersReducedMotion.d.cts +5 -0
- package/dist/hooks/usePrefersReducedMotion.d.ts +5 -0
- package/dist/hooks/usePrefersReducedMotion.js +22 -0
- package/dist/index.cjs +7 -7
- package/dist/index.d.cts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +4 -4
- package/dist/styles/styler.d.cts +4 -4
- package/dist/styles/styler.d.ts +4 -4
- package/dist/tailwind-internal/dist/utils/getShadowStyles.d.cts +2 -2
- package/dist/tailwind-internal/dist/utils/getShadowStyles.d.ts +2 -2
- package/dist/uds/generated/componentData.cjs +372 -381
- package/dist/uds/generated/componentData.js +372 -381
- package/dist/uds/generated/tailwindPurge.cjs +8 -21
- package/dist/uds/generated/tailwindPurge.js +8 -21
- package/dist/uds/package.cjs +12 -2
- package/dist/uds/package.js +12 -2
- package/generated/componentData.json +572 -603
- package/generated/tailwindPurge.ts +3 -3
- package/package.json +13 -3
- package/dist/components/client/Button.cjs +0 -326
- package/dist/components/client/Button.d.cts +0 -86
- package/dist/components/client/Button.d.ts +0 -87
- package/dist/components/client/Button.js +0 -321
- package/dist/components/client/IconButton.cjs +0 -161
- package/dist/components/client/IconButton.d.cts +0 -46
- package/dist/components/client/IconButton.d.ts +0 -47
- package/dist/components/client/IconButton.js +0 -159
- package/dist/components/client/Switch.cjs +0 -225
- package/dist/components/client/Switch.js +0 -222
- package/dist/components/client/buttonConstants.d.cts +0 -7
- package/dist/components/client/buttonConstants.d.ts +0 -8
- package/dist/components/experimental/client/AvoidMotionLibraryProvider.cjs +0 -14
- package/dist/components/experimental/client/AvoidMotionLibraryProvider.d.cts +0 -8
- package/dist/components/experimental/client/AvoidMotionLibraryProvider.d.ts +0 -9
- package/dist/components/experimental/client/AvoidMotionLibraryProvider.js +0 -11
- package/dist/components/experimental/client/SwitchV2.cjs +0 -190
- package/dist/components/experimental/client/SwitchV2.d.cts +0 -46
- package/dist/components/experimental/client/SwitchV2.d.ts +0 -47
- 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,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,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,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 };
|
|
@@ -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
|
|
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)(
|
|
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";
|