@yahoo/uds 3.161.0 → 3.162.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 (85) hide show
  1. package/dist/components/client/Checkbox/Checkbox.cjs +118 -0
  2. package/dist/components/client/{Checkbox.d.cts → Checkbox/Checkbox.d.cts} +5 -18
  3. package/dist/components/client/{Checkbox.d.ts → Checkbox/Checkbox.d.ts} +5 -18
  4. package/dist/components/client/Checkbox/Checkbox.js +113 -0
  5. package/dist/components/client/Checkbox/CheckboxBase.cjs +141 -0
  6. package/dist/components/client/Checkbox/CheckboxBase.d.cts +48 -0
  7. package/dist/components/client/Checkbox/CheckboxBase.d.ts +49 -0
  8. package/dist/components/client/Checkbox/CheckboxBase.js +138 -0
  9. package/dist/components/client/Checkbox/checkboxConstants.cjs +23 -0
  10. package/dist/components/client/Checkbox/checkboxConstants.d.cts +25 -0
  11. package/dist/components/client/Checkbox/checkboxConstants.d.ts +26 -0
  12. package/dist/components/client/Checkbox/checkboxConstants.js +17 -0
  13. package/dist/components/client/Checkbox/index.cjs +10 -0
  14. package/dist/components/client/Checkbox/index.d.cts +6 -0
  15. package/dist/components/client/Checkbox/index.d.ts +7 -0
  16. package/dist/components/client/Checkbox/index.js +6 -0
  17. package/dist/components/client/Checkbox/types.cjs +2 -0
  18. package/dist/components/client/Checkbox/types.d.cts +22 -0
  19. package/dist/components/client/Checkbox/types.d.ts +23 -0
  20. package/dist/components/client/Checkbox/types.js +2 -0
  21. package/dist/components/client/Menu/Menu.ItemCheckbox.d.cts +1 -1
  22. package/dist/components/client/Menu/Menu.ItemCheckbox.d.ts +1 -1
  23. package/dist/components/client/Popover/UDSPopoverConfigProvider.d.cts +1 -1
  24. package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts +1 -1
  25. package/dist/components/client/Radio/Radio.cjs +67 -164
  26. package/dist/components/client/Radio/Radio.d.cts +4 -17
  27. package/dist/components/client/Radio/Radio.d.ts +4 -17
  28. package/dist/components/client/Radio/Radio.js +66 -163
  29. package/dist/components/client/Radio/RadioBase.cjs +133 -0
  30. package/dist/components/client/Radio/RadioBase.d.cts +45 -0
  31. package/dist/components/client/Radio/RadioBase.d.ts +46 -0
  32. package/dist/components/client/Radio/RadioBase.js +130 -0
  33. package/dist/components/client/Radio/radioConstants.cjs +14 -0
  34. package/dist/components/client/Radio/radioConstants.d.cts +8 -0
  35. package/dist/components/client/Radio/radioConstants.d.ts +9 -0
  36. package/dist/components/client/Radio/radioConstants.js +11 -0
  37. package/dist/components/client/Radio/types.cjs +2 -0
  38. package/dist/components/client/Radio/types.d.cts +20 -0
  39. package/dist/components/client/Radio/types.d.ts +21 -0
  40. package/dist/components/client/Radio/types.js +2 -0
  41. package/dist/components/client/Toast/UDSToastConfigProvider.d.cts +1 -1
  42. package/dist/components/client/Toast/UDSToastConfigProvider.d.ts +1 -1
  43. package/dist/components/client/index.cjs +2 -2
  44. package/dist/components/client/index.d.cts +1 -1
  45. package/dist/components/client/index.d.ts +1 -1
  46. package/dist/components/client/index.js +1 -1
  47. package/dist/components/index.cjs +2 -2
  48. package/dist/components/index.d.cts +1 -1
  49. package/dist/components/index.d.ts +1 -1
  50. package/dist/components/index.js +1 -1
  51. package/dist/css-animation/Checkbox/Checkbox.cjs +75 -0
  52. package/dist/css-animation/Checkbox/Checkbox.d.cts +22 -0
  53. package/dist/css-animation/Checkbox/Checkbox.d.ts +23 -0
  54. package/dist/css-animation/Checkbox/Checkbox.js +72 -0
  55. package/dist/css-animation/Checkbox/index.cjs +5 -0
  56. package/dist/css-animation/Checkbox/index.d.cts +3 -0
  57. package/dist/css-animation/Checkbox/index.d.ts +4 -0
  58. package/dist/css-animation/Checkbox/index.js +4 -0
  59. package/dist/css-animation/Radio/Radio.cjs +92 -0
  60. package/dist/css-animation/Radio/Radio.d.cts +22 -0
  61. package/dist/css-animation/Radio/Radio.d.ts +23 -0
  62. package/dist/css-animation/Radio/Radio.js +89 -0
  63. package/dist/css-animation/Radio/index.cjs +5 -0
  64. package/dist/css-animation/Radio/index.d.cts +3 -0
  65. package/dist/css-animation/Radio/index.d.ts +4 -0
  66. package/dist/css-animation/Radio/index.js +4 -0
  67. package/dist/css-animation/index.cjs +4 -0
  68. package/dist/css-animation/index.d.cts +3 -1
  69. package/dist/css-animation/index.d.ts +3 -1
  70. package/dist/css-animation/index.js +3 -1
  71. package/dist/index.cjs +2 -2
  72. package/dist/index.d.cts +1 -1
  73. package/dist/index.d.ts +1 -1
  74. package/dist/index.js +1 -1
  75. package/dist/styles/styler.d.cts +43 -43
  76. package/dist/styles/styler.d.ts +43 -43
  77. package/dist/uds/generated/componentData.cjs +2501 -2451
  78. package/dist/uds/generated/componentData.js +2501 -2451
  79. package/dist/uds/generated/tailwindPurge.cjs +12 -12
  80. package/dist/uds/generated/tailwindPurge.js +12 -12
  81. package/generated/componentData.json +3275 -3186
  82. package/generated/tailwindPurge.ts +2 -2
  83. package/package.json +1 -1
  84. package/dist/components/client/Checkbox.cjs +0 -224
  85. package/dist/components/client/Checkbox.js +0 -219
@@ -0,0 +1,23 @@
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 _yahoo_uds_icons = require("@yahoo/uds-icons");
6
+ //#region src/components/client/Checkbox/checkboxConstants.ts
7
+ const VARIANTS = ["primary", "secondary"];
8
+ const SIZES = ["sm", "md"];
9
+ const VARIANT_ERROR_MAP = {
10
+ primary: "alert",
11
+ secondary: "alert-secondary"
12
+ };
13
+ const isIndeterminate = (checked) => checked === "indeterminate";
14
+ const getIcon = (checked) => {
15
+ if (isIndeterminate(checked)) return _yahoo_uds_icons.Minus;
16
+ return _yahoo_uds_icons.Check;
17
+ };
18
+ //#endregion
19
+ exports.SIZES = SIZES;
20
+ exports.VARIANTS = VARIANTS;
21
+ exports.VARIANT_ERROR_MAP = VARIANT_ERROR_MAP;
22
+ exports.getIcon = getIcon;
23
+ exports.isIndeterminate = isIndeterminate;
@@ -0,0 +1,25 @@
1
+
2
+ import { CheckboxValue, CheckboxVariant } from "../../../types/dist/index.cjs";
3
+ import { IconVariant, SvgIconProps } from "../../../icons/dist/types.cjs";
4
+ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
5
+
6
+ //#region src/components/client/Checkbox/checkboxConstants.d.ts
7
+ declare const VARIANTS: ("primary" | "secondary")[];
8
+ declare const SIZES: ("sm" | "md")[];
9
+ declare const VARIANT_ERROR_MAP: Record<CheckboxVariant, 'alert' | 'alert-secondary'>;
10
+ declare const isIndeterminate: (checked?: CheckboxValue) => checked is "indeterminate";
11
+ declare const getIcon: (checked?: CheckboxValue) => {
12
+ ({
13
+ size,
14
+ variant
15
+ }: SvgIconProps): _$react_jsx_runtime0.JSX.Element;
16
+ metadata: {
17
+ name: string;
18
+ isSvgIcon: boolean;
19
+ variants: IconVariant[];
20
+ category: string;
21
+ tags: string[];
22
+ };
23
+ };
24
+ //#endregion
25
+ export { SIZES, VARIANTS, VARIANT_ERROR_MAP, getIcon, isIndeterminate };
@@ -0,0 +1,26 @@
1
+
2
+ "use client";
3
+ import { CheckboxValue, CheckboxVariant } from "../../../types/dist/index.js";
4
+ import { IconVariant, SvgIconProps } from "../../../icons/dist/types.js";
5
+ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
6
+
7
+ //#region src/components/client/Checkbox/checkboxConstants.d.ts
8
+ declare const VARIANTS: ("primary" | "secondary")[];
9
+ declare const SIZES: ("sm" | "md")[];
10
+ declare const VARIANT_ERROR_MAP: Record<CheckboxVariant, 'alert' | 'alert-secondary'>;
11
+ declare const isIndeterminate: (checked?: CheckboxValue) => checked is "indeterminate";
12
+ declare const getIcon: (checked?: CheckboxValue) => {
13
+ ({
14
+ size,
15
+ variant
16
+ }: SvgIconProps): _$react_jsx_runtime0.JSX.Element;
17
+ metadata: {
18
+ name: string;
19
+ isSvgIcon: boolean;
20
+ variants: IconVariant[];
21
+ category: string;
22
+ tags: string[];
23
+ };
24
+ };
25
+ //#endregion
26
+ export { SIZES, VARIANTS, VARIANT_ERROR_MAP, getIcon, isIndeterminate };
@@ -0,0 +1,17 @@
1
+ /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
+ "use client";
3
+ import { Check, Minus } from "@yahoo/uds-icons";
4
+ //#region src/components/client/Checkbox/checkboxConstants.ts
5
+ const VARIANTS = ["primary", "secondary"];
6
+ const SIZES = ["sm", "md"];
7
+ const VARIANT_ERROR_MAP = {
8
+ primary: "alert",
9
+ secondary: "alert-secondary"
10
+ };
11
+ const isIndeterminate = (checked) => checked === "indeterminate";
12
+ const getIcon = (checked) => {
13
+ if (isIndeterminate(checked)) return Minus;
14
+ return Check;
15
+ };
16
+ //#endregion
17
+ export { SIZES, VARIANTS, VARIANT_ERROR_MAP, getIcon, isIndeterminate };
@@ -0,0 +1,10 @@
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_Checkbox_checkboxConstants = require("./checkboxConstants.cjs");
5
+ const require_components_client_Checkbox_CheckboxBase = require("./CheckboxBase.cjs");
6
+ const require_components_client_Checkbox_Checkbox = require("./Checkbox.cjs");
7
+ exports.Checkbox = require_components_client_Checkbox_Checkbox.Checkbox;
8
+ exports.CheckboxBase = require_components_client_Checkbox_CheckboxBase.CheckboxBase;
9
+ exports.SIZES = require_components_client_Checkbox_checkboxConstants.SIZES;
10
+ exports.VARIANTS = require_components_client_Checkbox_checkboxConstants.VARIANTS;
@@ -0,0 +1,6 @@
1
+
2
+ import { SIZES, VARIANTS } from "./checkboxConstants.cjs";
3
+ import { CheckboxChangeEvent, CheckboxValueState, DataAttributes } from "./types.cjs";
4
+ import { Checkbox, CheckboxProps } from "./Checkbox.cjs";
5
+ import { CheckboxBase, CheckboxBaseProps } from "./CheckboxBase.cjs";
6
+ export { Checkbox, CheckboxBase, type CheckboxBaseProps, type CheckboxChangeEvent, type CheckboxProps, type CheckboxValueState, type DataAttributes, SIZES, VARIANTS };
@@ -0,0 +1,7 @@
1
+
2
+ "use client";
3
+ import { SIZES, VARIANTS } from "./checkboxConstants.js";
4
+ import { CheckboxChangeEvent, CheckboxValueState, DataAttributes } from "./types.js";
5
+ import { Checkbox, CheckboxProps } from "./Checkbox.js";
6
+ import { CheckboxBase, CheckboxBaseProps } from "./CheckboxBase.js";
7
+ export { Checkbox, CheckboxBase, type CheckboxBaseProps, type CheckboxChangeEvent, type CheckboxProps, type CheckboxValueState, type DataAttributes, SIZES, VARIANTS };
@@ -0,0 +1,6 @@
1
+ /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
+ "use client";
3
+ import { SIZES, VARIANTS } from "./checkboxConstants.js";
4
+ import { CheckboxBase } from "./CheckboxBase.js";
5
+ import { Checkbox } from "./Checkbox.js";
6
+ export { Checkbox, CheckboxBase, SIZES, VARIANTS };
@@ -0,0 +1,2 @@
1
+ /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
+ "use client";
@@ -0,0 +1,22 @@
1
+
2
+ import { UniversalCheckboxProps } from "../../../types/dist/index.cjs";
3
+ import React, { ChangeEvent } from "react";
4
+
5
+ //#region src/components/client/Checkbox/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'>;
10
+ type CheckboxChangeEvent = ChangeEvent<HTMLInputElement>;
11
+ type CheckboxValueState = 'checked' | 'unchecked' | 'indeterminate';
12
+ interface CheckboxProps extends NativeInputProps, UniversalCheckboxProps {
13
+ /** Props to be passed into various slots within the component. */
14
+ slotProps?: {
15
+ root?: DataAttributes;
16
+ checkbox?: DataAttributes;
17
+ icon?: DataAttributes;
18
+ label?: DataAttributes;
19
+ };
20
+ }
21
+ //#endregion
22
+ export { type CheckboxChangeEvent, type CheckboxProps, type CheckboxValueState, type DataAttributes, type NativeInputProps };
@@ -0,0 +1,23 @@
1
+
2
+ "use client";
3
+ import { UniversalCheckboxProps } from "../../../types/dist/index.js";
4
+ import React, { ChangeEvent } from "react";
5
+
6
+ //#region src/components/client/Checkbox/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'>;
11
+ type CheckboxChangeEvent = ChangeEvent<HTMLInputElement>;
12
+ type CheckboxValueState = 'checked' | 'unchecked' | 'indeterminate';
13
+ interface CheckboxProps extends NativeInputProps, UniversalCheckboxProps {
14
+ /** Props to be passed into various slots within the component. */
15
+ slotProps?: {
16
+ root?: DataAttributes;
17
+ checkbox?: DataAttributes;
18
+ icon?: DataAttributes;
19
+ label?: DataAttributes;
20
+ };
21
+ }
22
+ //#endregion
23
+ export { type CheckboxChangeEvent, type CheckboxProps, type CheckboxValueState, type DataAttributes, type NativeInputProps };
@@ -0,0 +1,2 @@
1
+ /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
2
+ "use client";
@@ -131,6 +131,6 @@ interface MenuItemCheckboxProps extends Omit<PressableProps, 'asChild'>, HtmlBut
131
131
  *
132
132
  * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
133
133
  **/
134
- declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "hideEndIcon" | "rootProps"> & _$react.RefAttributes<HTMLDivElement>>;
134
+ declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "rootProps" | "hideEndIcon"> & _$react.RefAttributes<HTMLDivElement>>;
135
135
  //#endregion
136
136
  export { MenuItemCheckbox, type MenuItemCheckboxProps };
@@ -132,6 +132,6 @@ interface MenuItemCheckboxProps extends Omit<PressableProps, 'asChild'>, HtmlBut
132
132
  *
133
133
  * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
134
134
  **/
135
- declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "hideEndIcon" | "rootProps"> & _$react.RefAttributes<HTMLDivElement>>;
135
+ declare const MenuItemCheckbox: _$react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "rootProps" | "hideEndIcon"> & _$react.RefAttributes<HTMLDivElement>>;
136
136
  //#endregion
137
137
  export { MenuItemCheckbox, type MenuItemCheckboxProps };
@@ -29,7 +29,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
29
29
  gap: SpacingAlias;
30
30
  dismissButtonSpacing: SpacingAlias;
31
31
  dismissIconSize: number;
32
- ariaKitPlacement: ("bottom-start" | "bottom-end" | "top-start" | "top-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
32
+ ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("top" | "bottom" | "left" | "right") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
33
33
  animationDuration: number;
34
34
  };
35
35
  //#endregion
@@ -30,7 +30,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
30
30
  gap: SpacingAlias;
31
31
  dismissButtonSpacing: SpacingAlias;
32
32
  dismissIconSize: number;
33
- ariaKitPlacement: ("bottom-start" | "bottom-end" | "top-start" | "top-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
33
+ ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("top" | "bottom" | "left" | "right") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
34
34
  animationDuration: number;
35
35
  };
36
36
  //#endregion
@@ -4,22 +4,17 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
4
  const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
5
5
  const require_styles_styler = require("../../../styles/styler.cjs");
6
6
  const require_components_Box = require("../../Box.cjs");
7
- const require_components_FormLabel = require("../../FormLabel.cjs");
8
7
  const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
9
8
  const require_components_client_SpringMotionConfig = require("../SpringMotionConfig.cjs");
10
- const require_components_client_Radio_useRadioGroup = require("./useRadioGroup.cjs");
9
+ const require_components_client_Radio_radioConstants = require("./radioConstants.cjs");
10
+ const require_components_client_Radio_RadioBase = require("./RadioBase.cjs");
11
11
  let react = require("react");
12
12
  react = require_runtime.__toESM(react);
13
13
  let react_jsx_runtime = require("react/jsx-runtime");
14
14
  let motion_react = require("motion/react");
15
15
  //#region src/components/client/Radio/Radio.tsx
16
- const RADIO_VARIANTS = ["primary", "secondary"];
17
- const RADIO_SIZES = ["sm", "md"];
18
- const VARIANT_ERROR_MAP = {
19
- primary: "alert",
20
- secondary: "alert-secondary"
21
- };
22
16
  const MotionBox = motion_react.m.create(require_components_Box.Box);
17
+ MotionBox.displayName = "RadioMotionBox";
23
18
  const hoverTransition = {
24
19
  layoutVariant: "smooth",
25
20
  layoutSpeed: "3"
@@ -52,179 +47,87 @@ const pressTransition = {
52
47
  *
53
48
  * @related [Radio](https://uds.build/docs/components/Radio).
54
49
  **/
55
- const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, value: valueProp = "", checked: checkedProp, defaultChecked, disabled, hasError, onChange, onFocus, onBlur, className, style, slotProps, ...radioProps }, parentRef) {
56
- const generatedId = (0, react.useId)();
57
- const uid = id ?? `uds-radio-${generatedId}`;
58
- const rootSlotProps = slotProps?.root ?? {};
59
- const radioSlotProps = slotProps?.radio ?? {};
60
- const radioIconSlotProps = slotProps?.radioIcon ?? {};
61
- const labelSlotProps = slotProps?.label ?? {};
62
- const innerRef = (0, react.useRef)(null);
63
- /**
64
- * State
65
- */
66
- const { name, isControlled, checked, setGroupValue } = require_components_client_Radio_useRadioGroup.useRadioGroup({
67
- name: nameProp,
68
- value: valueProp,
69
- checked: checkedProp,
70
- defaultChecked
71
- });
72
- const [isHovered, setIsHovered] = (0, react.useState)(false);
73
- const [isPressed, setIsPressed] = (0, react.useState)(false);
74
- /**
75
- * Derived values
76
- */
77
- const variant = (0, react.useMemo)(() => hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp, [hasError, variantProp]);
78
- const showHoverEffect = (0, react.useMemo)(() => !disabled && isHovered, [disabled, isHovered]);
79
- const showPressedEffect = (0, react.useMemo)(() => !disabled && !checked && isPressed, [
80
- checked,
81
- disabled,
82
- isPressed
83
- ]);
84
- const scale = (0, react.useMemo)(() => showPressedEffect ? .9 : showHoverEffect ? 1.1 : 1, [showHoverEffect, showPressedEffect]);
85
- const checkOpacity = (0, react.useMemo)(() => checked ? showPressedEffect ? "opacity-55" : "opacity-100" : "opacity-0", [checked, showPressedEffect]);
86
- const showShadow = (0, react.useMemo)(() => {
87
- return !disabled && (showPressedEffect && !checked || showHoverEffect && checked);
88
- }, [
89
- checked,
90
- disabled,
91
- showHoverEffect,
92
- showPressedEffect
93
- ]);
94
- const motionAnimate = (0, react.useMemo)(() => ({ scale }), [scale]);
95
- const motionTransition = (0, react.useMemo)(() => isPressed ? pressTransition : hoverTransition, [isPressed]);
96
- /**
97
- * Handlers
98
- */
99
- const handleOnChange = (0, react.useCallback)((e) => {
100
- setGroupValue(e.target.value);
101
- onChange?.(e);
102
- }, [onChange, setGroupValue]);
103
- const handleFocus = (0, react.useCallback)((e) => {
104
- onFocus?.(e);
105
- }, [onFocus]);
106
- const handleBlur = (0, react.useCallback)((e) => {
107
- onBlur?.(e);
108
- }, [onBlur]);
109
- const handleHoverStart = (0, react.useCallback)(() => {
110
- setIsHovered(true);
111
- }, []);
112
- const handleHoverEnd = (0, react.useCallback)(() => {
113
- setIsHovered(false);
114
- }, []);
115
- const handleTapStart = (0, react.useCallback)(() => {
116
- setIsPressed(true);
117
- }, []);
118
- const handleTapEnd = (0, react.useCallback)(() => {
119
- setIsPressed(false);
120
- }, []);
50
+ const Radio = (0, react.forwardRef)(function Radio({ reduceMotion: forceReduceMotion, ...props }, parentRef) {
121
51
  const prefersReducedMotion = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion();
122
52
  const reduceMotion = forceReduceMotion ? "always" : "user";
123
53
  const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
124
- const classNames = {
125
- root: require_styles_styler.getStyles({
126
- radioSizeRoot: size,
127
- radioVariantValueRoot: checked ? "checked" : "unchecked",
128
- radioVariantRoot: variant,
129
- display: "flex",
130
- flexDirection: labelPosition === "start" ? "row" : "row-reverse",
131
- alignItems: "center",
132
- className: require_styles_styler.cx([{
133
- "cursor-pointer": !disabled,
134
- "cursor-default": disabled,
135
- "opacity-50": disabled
136
- }, className])
137
- }),
138
- radio: require_styles_styler.getStyles({
139
- radioSizeRadio: size,
140
- radioVariantRadio: variant,
141
- radioVariantValueRadio: checked ? "checked" : "unchecked",
142
- className: require_styles_styler.cx([
143
- "border",
144
- "uds-ring",
145
- "uds-ring-within",
146
- cssAnimationDuration,
147
- "transition-[background-color,border-color]",
148
- "transition-shadow"
149
- ])
150
- }),
151
- radioCircle: require_styles_styler.getStyles({
152
- radioVariantRadioCircle: variant,
153
- radioVariantValueRadioCircle: checked ? "checked" : "unchecked",
154
- className: require_styles_styler.cx([
155
- "pointer-events-none",
156
- "w-[8px]",
157
- "h-[8px]",
158
- checkOpacity,
159
- cssAnimationDuration,
160
- "transition-opacity"
161
- ])
162
- }),
163
- htmlRadio: 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%]"),
164
- label: require_styles_styler.cx(labelPosition === "start" ? "text-start" : "text-end")
165
- };
166
- const RootElement = label ? motion_react.m.label : motion_react.m.div;
167
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
168
- reducedMotion: reduceMotion,
169
- ...motionTransition,
170
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RootElement, {
171
- className: classNames.root,
172
- "data-testid": "container",
173
- style,
174
- onHoverStart: handleHoverStart,
175
- onHoverEnd: handleHoverEnd,
176
- onTapStart: handleTapStart,
177
- onTap: handleTapEnd,
178
- onTapCancel: handleTapEnd,
179
- tabIndex: -1,
180
- ...rootSlotProps,
181
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
54
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Radio_RadioBase.RadioBase, {
55
+ ...props,
56
+ ref: parentRef,
57
+ cssAnimationDuration,
58
+ enableInteractionTracking: true,
59
+ renderRoot: ({ className, style, rootSlotProps, hasLabel, isPressed, onHoverStart, onHoverEnd, onTapStart, onTapEnd, children }) => {
60
+ const RootElement = hasLabel ? motion_react.m.label : motion_react.m.div;
61
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
62
+ reducedMotion: reduceMotion,
63
+ ...isPressed ? pressTransition : hoverTransition,
64
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RootElement, {
65
+ className,
66
+ "data-testid": "container",
67
+ style,
68
+ onHoverStart,
69
+ onHoverEnd,
70
+ onTapStart,
71
+ onTap: onTapEnd,
72
+ onTapCancel: onTapEnd,
73
+ tabIndex: -1,
74
+ ...rootSlotProps,
75
+ children
76
+ })
77
+ });
78
+ },
79
+ renderIndicator: ({ size, variant, checked, disabled, showHoverEffect, showPressedEffect, cssAnimationDuration, radioSlotProps, radioIconSlotProps, children }) => {
80
+ const scale = showPressedEffect ? .9 : showHoverEffect ? 1.1 : 1;
81
+ const checkOpacity = checked ? showPressedEffect ? require_styles_styler.cx("opacity-55") : require_styles_styler.cx("opacity-100") : require_styles_styler.cx("opacity-0");
82
+ const showShadow = !disabled && (showPressedEffect && !checked || showHoverEffect && checked);
83
+ const classNames = {
84
+ radio: require_styles_styler.getStyles({
85
+ radioSizeRadio: size,
86
+ radioVariantRadio: variant,
87
+ radioVariantValueRadio: checked ? "checked" : "unchecked",
88
+ className: require_styles_styler.cx([
89
+ "border",
90
+ "uds-ring",
91
+ "uds-ring-within",
92
+ cssAnimationDuration,
93
+ "transition-[background-color,border-color]",
94
+ "transition-shadow"
95
+ ])
96
+ }),
97
+ radioCircle: require_styles_styler.getStyles({
98
+ radioVariantRadioCircle: variant,
99
+ radioVariantValueRadioCircle: checked ? "checked" : "unchecked",
100
+ className: require_styles_styler.cx([
101
+ "pointer-events-none",
102
+ "w-[8px]",
103
+ "h-[8px]",
104
+ checkOpacity,
105
+ cssAnimationDuration,
106
+ "transition-opacity"
107
+ ])
108
+ })
109
+ };
110
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
182
111
  position: "relative",
183
112
  borderRadius: "full",
184
113
  alignItems: "center",
185
114
  justifyContent: "center",
186
115
  flex: "none",
187
116
  className: classNames.radio,
188
- animate: motionAnimate,
117
+ animate: { scale },
189
118
  insetShadow: showShadow ? "lg-invert" : "none",
190
119
  ...radioSlotProps,
191
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
192
- type: "radio",
193
- tabIndex: 0,
194
- ...radioProps,
195
- ref: (ref) => {
196
- innerRef.current = ref;
197
- if (typeof parentRef === "function") parentRef(ref);
198
- else if (parentRef !== null) parentRef.current = ref;
199
- },
200
- onFocus: handleFocus,
201
- onBlur: handleBlur,
202
- id: uid,
203
- name,
204
- value: valueProp,
205
- disabled,
206
- "aria-invalid": hasError,
207
- onChange: handleOnChange,
208
- ...isControlled ? { checked } : { defaultChecked },
209
- className: classNames.htmlRadio
210
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
120
+ children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
211
121
  borderRadius: "full",
212
122
  className: classNames.radioCircle,
213
123
  ...radioIconSlotProps
214
124
  })]
215
- }), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
216
- as: "div",
217
- variant: "inherit",
218
- color: "inherit",
219
- label,
220
- className: classNames.label,
221
- ...labelSlotProps
222
- })]
223
- })
125
+ });
126
+ }
224
127
  });
225
128
  });
226
129
  Radio.displayName = "Radio";
227
130
  //#endregion
228
- exports.RADIO_SIZES = RADIO_SIZES;
229
- exports.RADIO_VARIANTS = RADIO_VARIANTS;
131
+ exports.RADIO_SIZES = require_components_client_Radio_radioConstants.RADIO_SIZES;
132
+ exports.RADIO_VARIANTS = require_components_client_Radio_radioConstants.RADIO_VARIANTS;
230
133
  exports.Radio = Radio;
@@ -1,23 +1,10 @@
1
1
 
2
- import { RadioSize, RadioVariant, UniversalRadioProps } from "../../../types/dist/index.cjs";
2
+ import { RADIO_SIZES, RADIO_VARIANTS } from "./radioConstants.cjs";
3
+ import { RadioProps as RadioProps$1 } from "./types.cjs";
3
4
  import React from "react";
4
5
 
5
6
  //#region src/components/client/Radio/Radio.d.ts
6
- type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size' | 'height' | 'width' | 'color' | 'required'>;
7
- type DataAttributes = {
8
- [name: `data-${string}`]: string;
9
- };
10
- interface RadioProps extends NativeInputProps, UniversalRadioProps {
11
- /** Props to be passed into various slots within the component. */
12
- slotProps?: {
13
- root?: DataAttributes;
14
- radio?: DataAttributes;
15
- radioIcon?: DataAttributes;
16
- label?: DataAttributes;
17
- };
18
- }
19
- declare const RADIO_VARIANTS: RadioVariant[];
20
- declare const RADIO_SIZES: RadioSize[];
7
+ type RadioProps = RadioProps$1;
21
8
  /**
22
9
  * **⚙️️ A Radio.
23
10
  *
@@ -42,6 +29,6 @@ declare const RADIO_SIZES: RadioSize[];
42
29
  *
43
30
  * @related [Radio](https://uds.build/docs/components/Radio).
44
31
  **/
45
- declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
32
+ declare const Radio: React.ForwardRefExoticComponent<RadioProps$1 & React.RefAttributes<HTMLInputElement>>;
46
33
  //#endregion
47
34
  export { RADIO_SIZES, RADIO_VARIANTS, Radio, type RadioProps };
@@ -1,24 +1,11 @@
1
1
 
2
2
  "use client";
3
- import { RadioSize, RadioVariant, UniversalRadioProps } from "../../../types/dist/index.js";
3
+ import { RADIO_SIZES, RADIO_VARIANTS } from "./radioConstants.js";
4
+ import { RadioProps as RadioProps$1 } from "./types.js";
4
5
  import React from "react";
5
6
 
6
7
  //#region src/components/client/Radio/Radio.d.ts
7
- type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size' | 'height' | 'width' | 'color' | 'required'>;
8
- type DataAttributes = {
9
- [name: `data-${string}`]: string;
10
- };
11
- interface RadioProps extends NativeInputProps, UniversalRadioProps {
12
- /** Props to be passed into various slots within the component. */
13
- slotProps?: {
14
- root?: DataAttributes;
15
- radio?: DataAttributes;
16
- radioIcon?: DataAttributes;
17
- label?: DataAttributes;
18
- };
19
- }
20
- declare const RADIO_VARIANTS: RadioVariant[];
21
- declare const RADIO_SIZES: RadioSize[];
8
+ type RadioProps = RadioProps$1;
22
9
  /**
23
10
  * **⚙️️ A Radio.
24
11
  *
@@ -43,6 +30,6 @@ declare const RADIO_SIZES: RadioSize[];
43
30
  *
44
31
  * @related [Radio](https://uds.build/docs/components/Radio).
45
32
  **/
46
- declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
33
+ declare const Radio: React.ForwardRefExoticComponent<RadioProps$1 & React.RefAttributes<HTMLInputElement>>;
47
34
  //#endregion
48
35
  export { RADIO_SIZES, RADIO_VARIANTS, Radio, type RadioProps };