@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.
- package/dist/components/client/Checkbox/Checkbox.cjs +118 -0
- package/dist/components/client/{Checkbox.d.cts → Checkbox/Checkbox.d.cts} +5 -18
- package/dist/components/client/{Checkbox.d.ts → Checkbox/Checkbox.d.ts} +5 -18
- package/dist/components/client/Checkbox/Checkbox.js +113 -0
- package/dist/components/client/Checkbox/CheckboxBase.cjs +141 -0
- package/dist/components/client/Checkbox/CheckboxBase.d.cts +48 -0
- package/dist/components/client/Checkbox/CheckboxBase.d.ts +49 -0
- package/dist/components/client/Checkbox/CheckboxBase.js +138 -0
- package/dist/components/client/Checkbox/checkboxConstants.cjs +23 -0
- package/dist/components/client/Checkbox/checkboxConstants.d.cts +25 -0
- package/dist/components/client/Checkbox/checkboxConstants.d.ts +26 -0
- package/dist/components/client/Checkbox/checkboxConstants.js +17 -0
- package/dist/components/client/Checkbox/index.cjs +10 -0
- package/dist/components/client/Checkbox/index.d.cts +6 -0
- package/dist/components/client/Checkbox/index.d.ts +7 -0
- package/dist/components/client/Checkbox/index.js +6 -0
- package/dist/components/client/Checkbox/types.cjs +2 -0
- package/dist/components/client/Checkbox/types.d.cts +22 -0
- package/dist/components/client/Checkbox/types.d.ts +23 -0
- package/dist/components/client/Checkbox/types.js +2 -0
- package/dist/components/client/Menu/Menu.ItemCheckbox.d.cts +1 -1
- package/dist/components/client/Menu/Menu.ItemCheckbox.d.ts +1 -1
- package/dist/components/client/Popover/UDSPopoverConfigProvider.d.cts +1 -1
- package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts +1 -1
- package/dist/components/client/Radio/Radio.cjs +67 -164
- package/dist/components/client/Radio/Radio.d.cts +4 -17
- package/dist/components/client/Radio/Radio.d.ts +4 -17
- package/dist/components/client/Radio/Radio.js +66 -163
- package/dist/components/client/Radio/RadioBase.cjs +133 -0
- package/dist/components/client/Radio/RadioBase.d.cts +45 -0
- package/dist/components/client/Radio/RadioBase.d.ts +46 -0
- package/dist/components/client/Radio/RadioBase.js +130 -0
- package/dist/components/client/Radio/radioConstants.cjs +14 -0
- package/dist/components/client/Radio/radioConstants.d.cts +8 -0
- package/dist/components/client/Radio/radioConstants.d.ts +9 -0
- package/dist/components/client/Radio/radioConstants.js +11 -0
- package/dist/components/client/Radio/types.cjs +2 -0
- package/dist/components/client/Radio/types.d.cts +20 -0
- package/dist/components/client/Radio/types.d.ts +21 -0
- package/dist/components/client/Radio/types.js +2 -0
- package/dist/components/client/Toast/UDSToastConfigProvider.d.cts +1 -1
- package/dist/components/client/Toast/UDSToastConfigProvider.d.ts +1 -1
- package/dist/components/client/index.cjs +2 -2
- package/dist/components/client/index.d.cts +1 -1
- package/dist/components/client/index.d.ts +1 -1
- package/dist/components/client/index.js +1 -1
- package/dist/components/index.cjs +2 -2
- package/dist/components/index.d.cts +1 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.js +1 -1
- package/dist/css-animation/Checkbox/Checkbox.cjs +75 -0
- package/dist/css-animation/Checkbox/Checkbox.d.cts +22 -0
- package/dist/css-animation/Checkbox/Checkbox.d.ts +23 -0
- package/dist/css-animation/Checkbox/Checkbox.js +72 -0
- package/dist/css-animation/Checkbox/index.cjs +5 -0
- package/dist/css-animation/Checkbox/index.d.cts +3 -0
- package/dist/css-animation/Checkbox/index.d.ts +4 -0
- package/dist/css-animation/Checkbox/index.js +4 -0
- package/dist/css-animation/Radio/Radio.cjs +92 -0
- package/dist/css-animation/Radio/Radio.d.cts +22 -0
- package/dist/css-animation/Radio/Radio.d.ts +23 -0
- package/dist/css-animation/Radio/Radio.js +89 -0
- package/dist/css-animation/Radio/index.cjs +5 -0
- package/dist/css-animation/Radio/index.d.cts +3 -0
- package/dist/css-animation/Radio/index.d.ts +4 -0
- package/dist/css-animation/Radio/index.js +4 -0
- package/dist/css-animation/index.cjs +4 -0
- package/dist/css-animation/index.d.cts +3 -1
- package/dist/css-animation/index.d.ts +3 -1
- package/dist/css-animation/index.js +3 -1
- package/dist/index.cjs +2 -2
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/styles/styler.d.cts +43 -43
- package/dist/styles/styler.d.ts +43 -43
- package/dist/uds/generated/componentData.cjs +2501 -2451
- package/dist/uds/generated/componentData.js +2501 -2451
- package/dist/uds/generated/tailwindPurge.cjs +12 -12
- package/dist/uds/generated/tailwindPurge.js +12 -12
- package/generated/componentData.json +3275 -3186
- package/generated/tailwindPurge.ts +2 -2
- package/package.json +1 -1
- package/dist/components/client/Checkbox.cjs +0 -224
- 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,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 };
|
|
@@ -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" | "
|
|
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" | "
|
|
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: ("
|
|
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: ("
|
|
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
|
|
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({
|
|
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
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
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:
|
|
117
|
+
animate: { scale },
|
|
189
118
|
insetShadow: showShadow ? "lg-invert" : "none",
|
|
190
119
|
...radioSlotProps,
|
|
191
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
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
|
-
})
|
|
216
|
-
|
|
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 {
|
|
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
|
|
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 {
|
|
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
|
|
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 };
|