@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.
- package/dist/automated-config/dist/properties.cjs +1 -1
- package/dist/automated-config/dist/properties.js +1 -1
- 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/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 +308 -317
- package/dist/uds/generated/componentData.js +308 -317
- 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 +458 -489
- 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
|
@@ -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 };
|