@yahoo/uds-mobile 2.3.1 → 2.3.2
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/Checkbox.cjs +4 -12
- package/dist/components/Checkbox.d.cts.map +1 -1
- package/dist/components/Checkbox.d.ts.map +1 -1
- package/dist/components/Checkbox.js +5 -13
- package/dist/components/Checkbox.js.map +1 -1
- package/dist/components/Radio.cjs +7 -15
- package/dist/components/Radio.d.cts.map +1 -1
- package/dist/components/Radio.d.ts.map +1 -1
- package/dist/components/Radio.js +13 -21
- package/dist/components/Radio.js.map +1 -1
- package/package.json +1 -1
|
@@ -66,12 +66,7 @@ const Checkbox = (0, react.memo)(function Checkbox({ label, labelPosition = "sta
|
|
|
66
66
|
const showIcon = valueState !== "unchecked";
|
|
67
67
|
const shouldAnimate = !reduceMotion;
|
|
68
68
|
const scaleProgress = (0, react_native_reanimated.useDerivedValue)(() => shouldAnimate ? (0, react_native_reanimated.withSpring)(pressed ? require_index.SCALE_EFFECTS.down : require_index.SCALE_EFFECTS.none, require_motion.BUTTON_SPRING_CONFIG) : require_index.SCALE_EFFECTS.none, [pressed, shouldAnimate]);
|
|
69
|
-
const iconProgress = (0, react_native_reanimated.useDerivedValue)(() => shouldAnimate ? (0, react_native_reanimated.withSpring)(showIcon ? 1 : 0, require_motion.BUTTON_SPRING_CONFIG) : showIcon ? 1 : 0, [showIcon, shouldAnimate]);
|
|
70
69
|
const checkboxAnimatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({ transform: [{ scale: scaleProgress.value }] }));
|
|
71
|
-
const iconAnimatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({
|
|
72
|
-
opacity: (0, react_native_reanimated.interpolate)(iconProgress.value, [0, 1], [0, 1]),
|
|
73
|
-
transform: [{ scale: (0, react_native_reanimated.interpolate)(iconProgress.value, [0, 1], [.5, 1]) }]
|
|
74
|
-
}));
|
|
75
70
|
const handlePress = (0, react.useCallback)(() => {
|
|
76
71
|
if (disabled) return;
|
|
77
72
|
const newChecked = checked === "indeterminate" ? true : !checked;
|
|
@@ -149,13 +144,10 @@ const Checkbox = (0, react.memo)(function Checkbox({ label, labelPosition = "sta
|
|
|
149
144
|
style: rootStyle,
|
|
150
145
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
|
|
151
146
|
style: checkboxBoxStyle,
|
|
152
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
size: "sm",
|
|
157
|
-
style: generated_styles.checkboxStyles.checkboxIcon
|
|
158
|
-
})
|
|
147
|
+
children: showIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
|
|
148
|
+
name: iconName,
|
|
149
|
+
size: "sm",
|
|
150
|
+
style: generated_styles.checkboxStyles.checkboxIcon
|
|
159
151
|
})
|
|
160
152
|
}), labelContent]
|
|
161
153
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.cts","names":[],"sources":["../../src/components/Checkbox.tsx"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"Checkbox.d.cts","names":[],"sources":["../../src/components/Checkbox.tsx"],"mappings":";;;;;;;UAoBU,aAAA,SAAsB,IAAA,CAAK,SAAA,YAAqB,sBAAA;;EAExD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,cAAA;;EAEA,QAAA;EAJU;EAMV,QAAA;EAR8B;EAU9B,QAAA,IAAY,OAAA;AAAA;;;;;;;;;;;;;;;AAAgB;;;;;;;;;;;;;;;;;;;;cAqDxB,QAAA,EAAQ,KAAA,CAAA,oBAAA,CAAA,aAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","names":[],"sources":["../../src/components/Checkbox.tsx"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","names":[],"sources":["../../src/components/Checkbox.tsx"],"mappings":";;;;;;;UAoBU,aAAA,SAAsB,IAAA,CAAK,SAAA,YAAqB,sBAAA;;EAExD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,cAAA;;EAEA,QAAA;EAJU;EAMV,QAAA;EAR8B;EAU9B,QAAA,IAAY,OAAA;AAAA;;;;;;;;;;;;;;;AAAgB;;;;;;;;;;;;;;;;;;;;cAqDxB,QAAA,EAAQ,KAAA,CAAA,oBAAA,CAAA,aAAA"}
|
|
@@ -8,7 +8,7 @@ import { Pressable } from "./Pressable.js";
|
|
|
8
8
|
import { isValidElement, memo, useCallback, useId, useMemo, useState } from "react";
|
|
9
9
|
import { checkboxStyles } from "../../generated/styles";
|
|
10
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
-
import Animated, {
|
|
11
|
+
import Animated, { useAnimatedStyle, useDerivedValue, withSpring } from "react-native-reanimated";
|
|
12
12
|
|
|
13
13
|
//#region src/components/Checkbox.tsx
|
|
14
14
|
const VARIANT_ERROR_MAP = {
|
|
@@ -63,12 +63,7 @@ const Checkbox = memo(function Checkbox({ label, labelPosition = "start", varian
|
|
|
63
63
|
const showIcon = valueState !== "unchecked";
|
|
64
64
|
const shouldAnimate = !reduceMotion;
|
|
65
65
|
const scaleProgress = useDerivedValue(() => shouldAnimate ? withSpring(pressed ? SCALE_EFFECTS.down : SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG) : SCALE_EFFECTS.none, [pressed, shouldAnimate]);
|
|
66
|
-
const iconProgress = useDerivedValue(() => shouldAnimate ? withSpring(showIcon ? 1 : 0, BUTTON_SPRING_CONFIG) : showIcon ? 1 : 0, [showIcon, shouldAnimate]);
|
|
67
66
|
const checkboxAnimatedStyle = useAnimatedStyle(() => ({ transform: [{ scale: scaleProgress.value }] }));
|
|
68
|
-
const iconAnimatedStyle = useAnimatedStyle(() => ({
|
|
69
|
-
opacity: interpolate(iconProgress.value, [0, 1], [0, 1]),
|
|
70
|
-
transform: [{ scale: interpolate(iconProgress.value, [0, 1], [.5, 1]) }]
|
|
71
|
-
}));
|
|
72
67
|
const handlePress = useCallback(() => {
|
|
73
68
|
if (disabled) return;
|
|
74
69
|
const newChecked = checked === "indeterminate" ? true : !checked;
|
|
@@ -146,13 +141,10 @@ const Checkbox = memo(function Checkbox({ label, labelPosition = "start", varian
|
|
|
146
141
|
style: rootStyle,
|
|
147
142
|
children: [/* @__PURE__ */ jsx(Animated.View, {
|
|
148
143
|
style: checkboxBoxStyle,
|
|
149
|
-
children: /* @__PURE__ */ jsx(
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
size: "sm",
|
|
154
|
-
style: checkboxStyles.checkboxIcon
|
|
155
|
-
})
|
|
144
|
+
children: showIcon && /* @__PURE__ */ jsx(Icon, {
|
|
145
|
+
name: iconName,
|
|
146
|
+
size: "sm",
|
|
147
|
+
style: checkboxStyles.checkboxIcon
|
|
156
148
|
})
|
|
157
149
|
}), labelContent]
|
|
158
150
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","names":[],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["import type { CheckboxValue, CheckboxVariant, UniversalCheckboxProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport Animated, {\n interpolate,\n useAnimatedStyle,\n useDerivedValue,\n withSpring,\n} from 'react-native-reanimated';\n\nimport { checkboxStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { HStack } from './HStack';\nimport { Icon } from './Icon';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\n\n/* -------------------------------------------------------------------------- */\n/* Types */\n/* -------------------------------------------------------------------------- */\n\n/** Derived from CheckboxValue - maps boolean to 'checked'/'unchecked' string literals */\ntype CheckboxValueState = Exclude<CheckboxValue, boolean> | 'checked' | 'unchecked';\n\ninterface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps {\n /** Ref to the underlying View */\n ref?: Ref<View>;\n /** Default checked state for uncontrolled mode */\n defaultChecked?: boolean;\n /** Whether the checkbox is disabled */\n disabled?: boolean;\n /** Whether the checkbox is required */\n required?: boolean;\n /** Callback fired when the checked state changes */\n onChange?: (checked: boolean) => void;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Variant Mapping */\n/* -------------------------------------------------------------------------- */\n\n/** All style variants available in the generated styles (includes error variants) */\ntype CheckboxStyleVariant = 'primary' | 'secondary' | 'alert' | 'alert-secondary';\n\nconst VARIANT_ERROR_MAP: Record<CheckboxVariant, CheckboxStyleVariant> = {\n primary: 'alert',\n secondary: 'alert-secondary',\n};\n\n/* -------------------------------------------------------------------------- */\n/* Checkbox Component */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **⚙️ A checkbox component**\n *\n * @description\n * A checkbox component allows users to select one or multiple options from a set.\n * It represents a binary state, typically as checked or unchecked, and optionally\n * includes a third \"indeterminate\" state to indicate partial selection.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Checkbox } from '@yahoo/uds-mobile';\n *\n * <Checkbox label=\"Agree to terms\" />\n * <Checkbox label=\"Subscribe\" checked={true} onChange={setChecked} />\n * <Checkbox label=\"Partial\" checked=\"indeterminate\" />\n * ```\n *\n * @usage\n * - Forms: For selecting options\n * - Settings: For toggling preferences\n * - Filters: For multi-select filtering\n *\n * @accessibility\n * - Sets `accessibilityRole=\"checkbox\"` automatically\n * - Announces checked/unchecked/mixed state\n * - Label is used as accessibility label\n * - Supports `reduceMotion` for users who prefer reduced motion\n *\n * @see {@link Radio} for single-select options\n * @see {@link Switch} for binary toggles\n */\nconst Checkbox = memo(function Checkbox({\n // Checkbox props\n label,\n labelPosition = 'start',\n variant: variantProp = 'primary',\n size = 'md',\n checked: checkedProp,\n hasError,\n reduceMotion,\n // Native props\n defaultChecked,\n disabled,\n required,\n onChange,\n ref,\n ...viewProps\n}: CheckboxProps) {\n const generatedId = useId();\n const uid = `uds-checkbox-${generatedId}`;\n\n /* --------------------------------- State ---------------------------------- */\n const isControlled = checkedProp !== undefined;\n const [internalChecked, setInternalChecked] = useState<CheckboxValue>(\n isControlled ? checkedProp : (defaultChecked ?? false),\n );\n const [pressed, setPressed] = useState(false);\n\n // Use controlled value if provided, otherwise use internal state\n const checked = isControlled ? checkedProp : internalChecked;\n\n /* ------------------------------ Derived Values ---------------------------- */\n const valueState: CheckboxValueState = useMemo(() => {\n if (checked === 'indeterminate') {\n return 'indeterminate';\n }\n return checked ? 'checked' : 'unchecked';\n }, [checked]);\n\n const iconName = valueState === 'indeterminate' ? 'Minus' : 'Check';\n const showIcon = valueState !== 'unchecked';\n\n /* -------------------------------- Animation ------------------------------- */\n const shouldAnimate = !reduceMotion;\n\n // Scale animation for press feedback (disabled when reduceMotion is true)\n const scaleProgress = useDerivedValue(\n () =>\n shouldAnimate\n ? withSpring(pressed ? SCALE_EFFECTS.down : SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG)\n : SCALE_EFFECTS.none, // No scale effect when reduceMotion is true\n [pressed, shouldAnimate],\n );\n\n // Icon visibility animation\n // When reduceMotion is true, still show/hide the icon but without animation\n const iconProgress = useDerivedValue(\n () => (shouldAnimate ? withSpring(showIcon ? 1 : 0, BUTTON_SPRING_CONFIG) : showIcon ? 1 : 0),\n [showIcon, shouldAnimate],\n );\n\n const checkboxAnimatedStyle = useAnimatedStyle(() => ({\n transform: [{ scale: scaleProgress.value }],\n }));\n\n const iconAnimatedStyle = useAnimatedStyle(() => ({\n opacity: interpolate(iconProgress.value, [0, 1], [0, 1]),\n transform: [{ scale: interpolate(iconProgress.value, [0, 1], [0.5, 1]) }],\n }));\n\n /* -------------------------------- Handlers -------------------------------- */\n const handlePress = useCallback(() => {\n if (disabled) {\n return;\n }\n\n const newChecked = checked === 'indeterminate' ? true : !checked;\n\n if (!isControlled) {\n setInternalChecked(newChecked);\n }\n\n onChange?.(newChecked);\n }, [disabled, checked, isControlled, onChange]);\n\n const handlePressIn = useCallback(() => {\n setPressed(true);\n }, []);\n\n const handlePressOut = useCallback(() => {\n setPressed(false);\n }, []);\n\n /* --------------------------------- Styles --------------------------------- */\n // Compute the style variant (primary/secondary maps to alert variants when hasError)\n const styleVariant: CheckboxStyleVariant = hasError\n ? VARIANT_ERROR_MAP[variantProp]\n : variantProp;\n\n checkboxStyles.useVariants({\n size,\n variant: styleVariant, // primary, secondary, alert, alert-secondary\n value: valueState, // checked, unchecked, indeterminate\n disabled,\n pressed,\n });\n\n const rootStyle = useMemo(\n () => [checkboxStyles.root, { opacity: disabled ? 0.5 : 1 }],\n [checkboxStyles.root, disabled],\n );\n\n const checkboxBoxStyle = useMemo(\n () => [\n checkboxStyles.checkbox,\n { alignItems: 'center' as const, justifyContent: 'center' as const, borderRadius: 4 },\n checkboxAnimatedStyle,\n ],\n [checkboxStyles.checkbox, checkboxAnimatedStyle],\n );\n\n /* ---------------------------- Render Helpers ------------------------------ */\n const labelContent = useMemo(() => {\n if (!label) {\n return null;\n }\n\n const content =\n typeof label === 'function' ? label() : isValidElement(label) ? label : String(label);\n\n const textContent =\n typeof content === 'string' ? <Text style={checkboxStyles.text}>{content}</Text> : content;\n\n if (required) {\n return (\n <HStack columnGap=\"1\" alignItems=\"flex-start\">\n {textContent}\n <Text style={checkboxStyles.text}>*</Text>\n </HStack>\n );\n }\n\n return textContent;\n }, [label, required, checkboxStyles.text]);\n\n const a11yState = useMemo(\n () => ({\n disabled,\n checked:\n valueState === 'checked'\n ? true\n : valueState === 'indeterminate'\n ? ('mixed' as const)\n : false,\n }),\n [disabled, valueState],\n );\n\n /* --------------------------------- Render --------------------------------- */\n return (\n <Pressable\n ref={ref}\n nativeID={uid}\n onPress={handlePress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n disabled={disabled}\n flexDirection={labelPosition === 'start' ? 'row' : 'row-reverse'}\n alignItems=\"center\"\n alignSelf=\"flex-start\"\n accessibilityRole=\"checkbox\"\n accessibilityState={a11yState}\n accessibilityLabel={typeof label === 'string' ? label : undefined}\n {...viewProps}\n style={rootStyle}\n >\n <Animated.View style={checkboxBoxStyle}>\n <Animated.View style={iconAnimatedStyle}>\n <Icon name={iconName} size=\"sm\" style={checkboxStyles.checkboxIcon} />\n </Animated.View>\n </Animated.View>\n\n {labelContent}\n </Pressable>\n );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox, type CheckboxProps };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Checkbox.js","names":[],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["import type { CheckboxValue, CheckboxVariant, UniversalCheckboxProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withSpring } from 'react-native-reanimated';\n\nimport { checkboxStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { HStack } from './HStack';\nimport { Icon } from './Icon';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\n\n/* -------------------------------------------------------------------------- */\n/* Types */\n/* -------------------------------------------------------------------------- */\n\n/** Derived from CheckboxValue - maps boolean to 'checked'/'unchecked' string literals */\ntype CheckboxValueState = Exclude<CheckboxValue, boolean> | 'checked' | 'unchecked';\n\ninterface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps {\n /** Ref to the underlying View */\n ref?: Ref<View>;\n /** Default checked state for uncontrolled mode */\n defaultChecked?: boolean;\n /** Whether the checkbox is disabled */\n disabled?: boolean;\n /** Whether the checkbox is required */\n required?: boolean;\n /** Callback fired when the checked state changes */\n onChange?: (checked: boolean) => void;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Variant Mapping */\n/* -------------------------------------------------------------------------- */\n\n/** All style variants available in the generated styles (includes error variants) */\ntype CheckboxStyleVariant = 'primary' | 'secondary' | 'alert' | 'alert-secondary';\n\nconst VARIANT_ERROR_MAP: Record<CheckboxVariant, CheckboxStyleVariant> = {\n primary: 'alert',\n secondary: 'alert-secondary',\n};\n\n/* -------------------------------------------------------------------------- */\n/* Checkbox Component */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **⚙️ A checkbox component**\n *\n * @description\n * A checkbox component allows users to select one or multiple options from a set.\n * It represents a binary state, typically as checked or unchecked, and optionally\n * includes a third \"indeterminate\" state to indicate partial selection.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Checkbox } from '@yahoo/uds-mobile';\n *\n * <Checkbox label=\"Agree to terms\" />\n * <Checkbox label=\"Subscribe\" checked={true} onChange={setChecked} />\n * <Checkbox label=\"Partial\" checked=\"indeterminate\" />\n * ```\n *\n * @usage\n * - Forms: For selecting options\n * - Settings: For toggling preferences\n * - Filters: For multi-select filtering\n *\n * @accessibility\n * - Sets `accessibilityRole=\"checkbox\"` automatically\n * - Announces checked/unchecked/mixed state\n * - Label is used as accessibility label\n * - Supports `reduceMotion` for users who prefer reduced motion\n *\n * @see {@link Radio} for single-select options\n * @see {@link Switch} for binary toggles\n */\nconst Checkbox = memo(function Checkbox({\n // Checkbox props\n label,\n labelPosition = 'start',\n variant: variantProp = 'primary',\n size = 'md',\n checked: checkedProp,\n hasError,\n reduceMotion,\n // Native props\n defaultChecked,\n disabled,\n required,\n onChange,\n ref,\n ...viewProps\n}: CheckboxProps) {\n const generatedId = useId();\n const uid = `uds-checkbox-${generatedId}`;\n\n /* --------------------------------- State ---------------------------------- */\n const isControlled = checkedProp !== undefined;\n const [internalChecked, setInternalChecked] = useState<CheckboxValue>(\n isControlled ? checkedProp : (defaultChecked ?? false),\n );\n const [pressed, setPressed] = useState(false);\n\n // Use controlled value if provided, otherwise use internal state\n const checked = isControlled ? checkedProp : internalChecked;\n\n /* ------------------------------ Derived Values ---------------------------- */\n const valueState: CheckboxValueState = useMemo(() => {\n if (checked === 'indeterminate') {\n return 'indeterminate';\n }\n return checked ? 'checked' : 'unchecked';\n }, [checked]);\n\n const iconName = valueState === 'indeterminate' ? 'Minus' : 'Check';\n const showIcon = valueState !== 'unchecked';\n\n /* -------------------------------- Animation ------------------------------- */\n const shouldAnimate = !reduceMotion;\n\n // Scale animation for press feedback (disabled when reduceMotion is true)\n const scaleProgress = useDerivedValue(\n () =>\n shouldAnimate\n ? withSpring(pressed ? SCALE_EFFECTS.down : SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG)\n : SCALE_EFFECTS.none, // No scale effect when reduceMotion is true\n [pressed, shouldAnimate],\n );\n\n const checkboxAnimatedStyle = useAnimatedStyle(() => ({\n transform: [{ scale: scaleProgress.value }],\n }));\n\n /* -------------------------------- Handlers -------------------------------- */\n const handlePress = useCallback(() => {\n if (disabled) {\n return;\n }\n\n const newChecked = checked === 'indeterminate' ? true : !checked;\n\n if (!isControlled) {\n setInternalChecked(newChecked);\n }\n\n onChange?.(newChecked);\n }, [disabled, checked, isControlled, onChange]);\n\n const handlePressIn = useCallback(() => {\n setPressed(true);\n }, []);\n\n const handlePressOut = useCallback(() => {\n setPressed(false);\n }, []);\n\n /* --------------------------------- Styles --------------------------------- */\n // Compute the style variant (primary/secondary maps to alert variants when hasError)\n const styleVariant: CheckboxStyleVariant = hasError\n ? VARIANT_ERROR_MAP[variantProp]\n : variantProp;\n\n checkboxStyles.useVariants({\n size,\n variant: styleVariant, // primary, secondary, alert, alert-secondary\n value: valueState, // checked, unchecked, indeterminate\n disabled,\n pressed,\n });\n\n const rootStyle = useMemo(\n () => [checkboxStyles.root, { opacity: disabled ? 0.5 : 1 }],\n [checkboxStyles.root, disabled],\n );\n\n const checkboxBoxStyle = useMemo(\n () => [\n checkboxStyles.checkbox,\n { alignItems: 'center' as const, justifyContent: 'center' as const, borderRadius: 4 },\n checkboxAnimatedStyle,\n ],\n [checkboxStyles.checkbox, checkboxAnimatedStyle],\n );\n\n /* ---------------------------- Render Helpers ------------------------------ */\n const labelContent = useMemo(() => {\n if (!label) {\n return null;\n }\n\n const content =\n typeof label === 'function' ? label() : isValidElement(label) ? label : String(label);\n\n const textContent =\n typeof content === 'string' ? <Text style={checkboxStyles.text}>{content}</Text> : content;\n\n if (required) {\n return (\n <HStack columnGap=\"1\" alignItems=\"flex-start\">\n {textContent}\n <Text style={checkboxStyles.text}>*</Text>\n </HStack>\n );\n }\n\n return textContent;\n }, [label, required, checkboxStyles.text]);\n\n const a11yState = useMemo(\n () => ({\n disabled,\n checked:\n valueState === 'checked'\n ? true\n : valueState === 'indeterminate'\n ? ('mixed' as const)\n : false,\n }),\n [disabled, valueState],\n );\n\n /* --------------------------------- Render --------------------------------- */\n return (\n <Pressable\n ref={ref}\n nativeID={uid}\n onPress={handlePress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n disabled={disabled}\n flexDirection={labelPosition === 'start' ? 'row' : 'row-reverse'}\n alignItems=\"center\"\n alignSelf=\"flex-start\"\n accessibilityRole=\"checkbox\"\n accessibilityState={a11yState}\n accessibilityLabel={typeof label === 'string' ? label : undefined}\n {...viewProps}\n style={rootStyle}\n >\n <Animated.View style={checkboxBoxStyle}>\n {showIcon && <Icon name={iconName} size=\"sm\" style={checkboxStyles.checkboxIcon} />}\n </Animated.View>\n\n {labelContent}\n </Pressable>\n );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox, type CheckboxProps };\n"],"mappings":"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"}
|
|
@@ -7,6 +7,7 @@ const require_components_Text = require('./Text.cjs');
|
|
|
7
7
|
const require_components_HStack = require('./HStack.cjs');
|
|
8
8
|
const require_components_Pressable = require('./Pressable.cjs');
|
|
9
9
|
let react = require("react");
|
|
10
|
+
let react_native = require("react-native");
|
|
10
11
|
let generated_styles = require("../../generated/styles");
|
|
11
12
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
12
13
|
let react_native_reanimated = require("react-native-reanimated");
|
|
@@ -60,12 +61,7 @@ const Radio = (0, react.memo)(function Radio({ label, labelPosition = "start", v
|
|
|
60
61
|
}, [checked]);
|
|
61
62
|
const shouldAnimate = !reduceMotion;
|
|
62
63
|
const scaleProgress = (0, react_native_reanimated.useDerivedValue)(() => shouldAnimate ? (0, react_native_reanimated.withSpring)(pressed ? require_index.SCALE_EFFECTS.down : require_index.SCALE_EFFECTS.none, require_motion.BUTTON_SPRING_CONFIG) : require_index.SCALE_EFFECTS.none, [pressed, shouldAnimate]);
|
|
63
|
-
const circleProgress = (0, react_native_reanimated.useDerivedValue)(() => shouldAnimate ? (0, react_native_reanimated.withSpring)(checked ? 1 : 0, require_motion.BUTTON_SPRING_CONFIG) : checked ? 1 : 0, [checked, shouldAnimate]);
|
|
64
64
|
const radioAnimatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({ transform: [{ scale: scaleProgress.value }] }));
|
|
65
|
-
const circleAnimatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({
|
|
66
|
-
opacity: (0, react_native_reanimated.interpolate)(circleProgress.value, [0, 1], [0, 1]),
|
|
67
|
-
transform: [{ scale: (0, react_native_reanimated.interpolate)(circleProgress.value, [0, 1], [.5, 1]) }]
|
|
68
|
-
}));
|
|
69
65
|
const handlePress = (0, react.useCallback)(() => {
|
|
70
66
|
if (disabled) return;
|
|
71
67
|
const newChecked = !checked;
|
|
@@ -101,15 +97,11 @@ const Radio = (0, react.memo)(function Radio({ label, labelPosition = "start", v
|
|
|
101
97
|
radioAnimatedStyle
|
|
102
98
|
], [generated_styles.radioStyles.radio, radioAnimatedStyle]);
|
|
103
99
|
const INNER_CIRCLE_SIZE = 8;
|
|
104
|
-
const circleStyle = (0, react.useMemo)(() => [
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
borderRadius: 9999
|
|
110
|
-
},
|
|
111
|
-
circleAnimatedStyle
|
|
112
|
-
], [generated_styles.radioStyles.radioCircle, circleAnimatedStyle]);
|
|
100
|
+
const circleStyle = (0, react.useMemo)(() => [generated_styles.radioStyles.radioCircle, {
|
|
101
|
+
width: INNER_CIRCLE_SIZE,
|
|
102
|
+
height: INNER_CIRCLE_SIZE,
|
|
103
|
+
borderRadius: 9999
|
|
104
|
+
}], [generated_styles.radioStyles.radioCircle]);
|
|
113
105
|
const labelContent = (0, react.useMemo)(() => {
|
|
114
106
|
if (!label) return null;
|
|
115
107
|
const content = typeof label === "function" ? label() : (0, react.isValidElement)(label) ? label : String(label);
|
|
@@ -152,7 +144,7 @@ const Radio = (0, react.memo)(function Radio({ label, labelPosition = "start", v
|
|
|
152
144
|
style: rootStyle,
|
|
153
145
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
|
|
154
146
|
style: radioBoxStyle,
|
|
155
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
147
|
+
children: checked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: circleStyle })
|
|
156
148
|
}), labelContent]
|
|
157
149
|
});
|
|
158
150
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.d.cts","names":[],"sources":["../../src/components/Radio.tsx"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"Radio.d.cts","names":[],"sources":["../../src/components/Radio.tsx"],"mappings":";;;;;;;UAoBU,UAAA,SAAmB,IAAA,CAAK,SAAA,YAAqB,mBAAA;;EAErD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFS;EAInB,cAAA;EAJgC;EAMhC,QAAA;EAJM;EAMN,QAAA;EARqD;EAUrD,QAAA,IAAY,OAAA;AAAA;;;;;;;;;;;;;;AAAgB;;;;;;;;;;;;;;;;;;;cAmDxB,KAAA,EAAK,KAAA,CAAA,oBAAA,CAAA,UAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.d.ts","names":[],"sources":["../../src/components/Radio.tsx"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"Radio.d.ts","names":[],"sources":["../../src/components/Radio.tsx"],"mappings":";;;;;;;UAoBU,UAAA,SAAmB,IAAA,CAAK,SAAA,YAAqB,mBAAA;;EAErD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFS;EAInB,cAAA;EAJgC;EAMhC,QAAA;EAJM;EAMN,QAAA;EARqD;EAUrD,QAAA,IAAY,OAAA;AAAA;;;;;;;;;;;;;;AAAgB;;;;;;;;;;;;;;;;;;;cAmDxB,KAAA,EAAK,KAAA,CAAA,oBAAA,CAAA,UAAA"}
|
package/dist/components/Radio.js
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
|
|
2
2
|
import { SCALE_EFFECTS } from "../motion-tokens/dist/index.js";
|
|
3
3
|
import { BUTTON_SPRING_CONFIG } from "../motion.js";
|
|
4
|
-
import { Text } from "./Text.js";
|
|
4
|
+
import { Text as Text$1 } from "./Text.js";
|
|
5
5
|
import { HStack } from "./HStack.js";
|
|
6
|
-
import { Pressable } from "./Pressable.js";
|
|
6
|
+
import { Pressable as Pressable$1 } from "./Pressable.js";
|
|
7
7
|
import { isValidElement, memo, useCallback, useId, useMemo, useState } from "react";
|
|
8
|
+
import { View } from "react-native";
|
|
8
9
|
import { radioStyles } from "../../generated/styles";
|
|
9
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
|
-
import Animated, {
|
|
11
|
+
import Animated, { useAnimatedStyle, useDerivedValue, withSpring } from "react-native-reanimated";
|
|
11
12
|
|
|
12
13
|
//#region src/components/Radio.tsx
|
|
13
14
|
const VARIANT_ERROR_MAP = {
|
|
@@ -57,12 +58,7 @@ const Radio = memo(function Radio({ label, labelPosition = "start", variant: var
|
|
|
57
58
|
}, [checked]);
|
|
58
59
|
const shouldAnimate = !reduceMotion;
|
|
59
60
|
const scaleProgress = useDerivedValue(() => shouldAnimate ? withSpring(pressed ? SCALE_EFFECTS.down : SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG) : SCALE_EFFECTS.none, [pressed, shouldAnimate]);
|
|
60
|
-
const circleProgress = useDerivedValue(() => shouldAnimate ? withSpring(checked ? 1 : 0, BUTTON_SPRING_CONFIG) : checked ? 1 : 0, [checked, shouldAnimate]);
|
|
61
61
|
const radioAnimatedStyle = useAnimatedStyle(() => ({ transform: [{ scale: scaleProgress.value }] }));
|
|
62
|
-
const circleAnimatedStyle = useAnimatedStyle(() => ({
|
|
63
|
-
opacity: interpolate(circleProgress.value, [0, 1], [0, 1]),
|
|
64
|
-
transform: [{ scale: interpolate(circleProgress.value, [0, 1], [.5, 1]) }]
|
|
65
|
-
}));
|
|
66
62
|
const handlePress = useCallback(() => {
|
|
67
63
|
if (disabled) return;
|
|
68
64
|
const newChecked = !checked;
|
|
@@ -98,26 +94,22 @@ const Radio = memo(function Radio({ label, labelPosition = "start", variant: var
|
|
|
98
94
|
radioAnimatedStyle
|
|
99
95
|
], [radioStyles.radio, radioAnimatedStyle]);
|
|
100
96
|
const INNER_CIRCLE_SIZE = 8;
|
|
101
|
-
const circleStyle = useMemo(() => [
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
borderRadius: 9999
|
|
107
|
-
},
|
|
108
|
-
circleAnimatedStyle
|
|
109
|
-
], [radioStyles.radioCircle, circleAnimatedStyle]);
|
|
97
|
+
const circleStyle = useMemo(() => [radioStyles.radioCircle, {
|
|
98
|
+
width: INNER_CIRCLE_SIZE,
|
|
99
|
+
height: INNER_CIRCLE_SIZE,
|
|
100
|
+
borderRadius: 9999
|
|
101
|
+
}], [radioStyles.radioCircle]);
|
|
110
102
|
const labelContent = useMemo(() => {
|
|
111
103
|
if (!label) return null;
|
|
112
104
|
const content = typeof label === "function" ? label() : isValidElement(label) ? label : String(label);
|
|
113
|
-
const textContent = typeof content === "string" ? /* @__PURE__ */ jsx(Text, {
|
|
105
|
+
const textContent = typeof content === "string" ? /* @__PURE__ */ jsx(Text$1, {
|
|
114
106
|
style: radioStyles.text,
|
|
115
107
|
children: content
|
|
116
108
|
}) : content;
|
|
117
109
|
if (required) return /* @__PURE__ */ jsxs(HStack, {
|
|
118
110
|
columnGap: "1",
|
|
119
111
|
alignItems: "flex-start",
|
|
120
|
-
children: [textContent, /* @__PURE__ */ jsx(Text, {
|
|
112
|
+
children: [textContent, /* @__PURE__ */ jsx(Text$1, {
|
|
121
113
|
style: radioStyles.text,
|
|
122
114
|
children: "*"
|
|
123
115
|
})]
|
|
@@ -132,7 +124,7 @@ const Radio = memo(function Radio({ label, labelPosition = "start", variant: var
|
|
|
132
124
|
disabled,
|
|
133
125
|
checked
|
|
134
126
|
}), [disabled, checked]);
|
|
135
|
-
return /* @__PURE__ */ jsxs(Pressable, {
|
|
127
|
+
return /* @__PURE__ */ jsxs(Pressable$1, {
|
|
136
128
|
ref,
|
|
137
129
|
nativeID: uid,
|
|
138
130
|
onPress: handlePress,
|
|
@@ -149,7 +141,7 @@ const Radio = memo(function Radio({ label, labelPosition = "start", variant: var
|
|
|
149
141
|
style: rootStyle,
|
|
150
142
|
children: [/* @__PURE__ */ jsx(Animated.View, {
|
|
151
143
|
style: radioBoxStyle,
|
|
152
|
-
children: /* @__PURE__ */ jsx(
|
|
144
|
+
children: checked && /* @__PURE__ */ jsx(View, { style: circleStyle })
|
|
153
145
|
}), labelContent]
|
|
154
146
|
});
|
|
155
147
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","names":[],"sources":["../../src/components/Radio.tsx"],"sourcesContent":["import type { RadioVariant, UniversalRadioProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport Animated, {\n interpolate,\n useAnimatedStyle,\n useDerivedValue,\n withSpring,\n} from 'react-native-reanimated';\n\nimport { radioStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { HStack } from './HStack';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\n\n/* -------------------------------------------------------------------------- */\n/* Types */\n/* -------------------------------------------------------------------------- */\n\n/** Derived from RadioValue - maps boolean to 'checked'/'unchecked' string literals */\ntype RadioValueState = 'checked' | 'unchecked';\n\ninterface RadioProps extends Omit<ViewProps, 'style'>, UniversalRadioProps {\n /** Ref to the underlying View */\n ref?: Ref<View>;\n /** Default checked state for uncontrolled mode */\n defaultChecked?: boolean;\n /** Whether the radio is disabled */\n disabled?: boolean;\n /** Whether the radio is required */\n required?: boolean;\n /** Callback fired when the checked state changes */\n onChange?: (checked: boolean) => void;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Variant Mapping */\n/* -------------------------------------------------------------------------- */\n\n/** All style variants available in the generated styles (includes error variants) */\ntype RadioStyleVariant = 'primary' | 'secondary' | 'alert' | 'alert-secondary';\n\nconst VARIANT_ERROR_MAP: Record<RadioVariant, RadioStyleVariant> = {\n primary: 'alert',\n secondary: 'alert-secondary',\n};\n\n/* -------------------------------------------------------------------------- */\n/* Radio Component */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **⚙️ A radio component**\n *\n * @description\n * A radio component allows users to select one option from a set.\n * Unlike checkbox, radio buttons cannot have multiple selected in a group,\n * allowing only one selection at a time.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Radio } from '@yahoo/uds-mobile';\n *\n * <Radio label=\"Option A\" />\n * <Radio label=\"Option B\" checked={true} onChange={setChecked} />\n * ```\n *\n * @usage\n * - Forms: For selecting a single option from multiple choices\n * - Settings: For toggling between mutually exclusive preferences\n *\n * @accessibility\n * - Sets `accessibilityRole=\"radio\"` automatically\n * - Announces checked/unchecked state\n * - Label is used as accessibility label\n * - Supports `reduceMotion` for users who prefer reduced motion\n *\n * @see {@link Checkbox} for multi-select options\n * @see {@link Switch} for binary toggles\n */\nconst Radio = memo(function Radio({\n // Radio props\n label,\n labelPosition = 'start',\n variant: variantProp = 'primary',\n size = 'md',\n checked: checkedProp,\n hasError,\n reduceMotion,\n // Native props\n defaultChecked,\n disabled,\n required,\n onChange,\n ref,\n ...viewProps\n}: RadioProps) {\n const generatedId = useId();\n const uid = `uds-radio-${generatedId}`;\n\n /* --------------------------------- State ---------------------------------- */\n const isControlled = checkedProp !== undefined;\n const [internalChecked, setInternalChecked] = useState<boolean>(\n isControlled ? checkedProp : (defaultChecked ?? false),\n );\n const [pressed, setPressed] = useState(false);\n\n // Use controlled value if provided, otherwise use internal state\n const checked = isControlled ? checkedProp : internalChecked;\n\n /* ------------------------------ Derived Values ---------------------------- */\n const valueState: RadioValueState = useMemo(() => {\n return checked ? 'checked' : 'unchecked';\n }, [checked]);\n\n /* -------------------------------- Animation ------------------------------- */\n const shouldAnimate = !reduceMotion;\n\n // Scale animation for press feedback (disabled when reduceMotion is true)\n const scaleProgress = useDerivedValue(\n () =>\n shouldAnimate\n ? withSpring(pressed ? SCALE_EFFECTS.down : SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG)\n : SCALE_EFFECTS.none, // No scale effect when reduceMotion is true\n [pressed, shouldAnimate],\n );\n\n // Circle visibility animation (for the inner dot)\n // When reduceMotion is true, still show/hide the circle but without animation\n const circleProgress = useDerivedValue(\n () => (shouldAnimate ? withSpring(checked ? 1 : 0, BUTTON_SPRING_CONFIG) : checked ? 1 : 0),\n [checked, shouldAnimate],\n );\n\n const radioAnimatedStyle = useAnimatedStyle(() => ({\n transform: [{ scale: scaleProgress.value }],\n }));\n\n const circleAnimatedStyle = useAnimatedStyle(() => ({\n opacity: interpolate(circleProgress.value, [0, 1], [0, 1]),\n transform: [{ scale: interpolate(circleProgress.value, [0, 1], [0.5, 1]) }],\n }));\n\n /* -------------------------------- Handlers -------------------------------- */\n const handlePress = useCallback(() => {\n if (disabled) {\n return;\n }\n\n const newChecked = !checked;\n\n if (!isControlled) {\n setInternalChecked(newChecked);\n }\n\n onChange?.(newChecked);\n }, [disabled, checked, isControlled, onChange]);\n\n const handlePressIn = useCallback(() => {\n setPressed(true);\n }, []);\n\n const handlePressOut = useCallback(() => {\n setPressed(false);\n }, []);\n\n /* --------------------------------- Styles --------------------------------- */\n // Compute the style variant (primary/secondary maps to alert variants when hasError)\n const styleVariant: RadioStyleVariant = hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp;\n\n radioStyles.useVariants({\n size,\n variant: styleVariant, // primary, secondary, alert, alert-secondary\n value: valueState, // checked, unchecked\n pressed,\n });\n\n const rootStyle = useMemo(\n () => [radioStyles.root, { opacity: disabled ? 0.5 : 1 }],\n [radioStyles.root, disabled],\n );\n\n const radioBoxStyle = useMemo(\n () => [\n radioStyles.radio,\n {\n alignItems: 'center' as const,\n justifyContent: 'center' as const,\n borderRadius: 9999,\n },\n radioAnimatedStyle,\n ],\n [radioStyles.radio, radioAnimatedStyle],\n );\n\n // Inner circle size: fixed 8x8px to match web implementation\n const INNER_CIRCLE_SIZE = 8;\n\n const circleStyle = useMemo(\n () => [\n radioStyles.radioCircle,\n {\n width: INNER_CIRCLE_SIZE,\n height: INNER_CIRCLE_SIZE,\n borderRadius: 9999,\n },\n circleAnimatedStyle,\n ],\n [radioStyles.radioCircle, circleAnimatedStyle],\n );\n\n /* ---------------------------- Render Helpers ------------------------------ */\n const labelContent = useMemo(() => {\n if (!label) {\n return null;\n }\n\n const content =\n typeof label === 'function' ? label() : isValidElement(label) ? label : String(label);\n\n const textContent =\n typeof content === 'string' ? <Text style={radioStyles.text}>{content}</Text> : content;\n\n if (required) {\n return (\n <HStack columnGap=\"1\" alignItems=\"flex-start\">\n {textContent}\n <Text style={radioStyles.text}>*</Text>\n </HStack>\n );\n }\n\n return textContent;\n }, [label, required, radioStyles.text]);\n\n const a11yState = useMemo(\n () => ({\n disabled,\n checked,\n }),\n [disabled, checked],\n );\n\n /* --------------------------------- Render --------------------------------- */\n return (\n <Pressable\n ref={ref}\n nativeID={uid}\n onPress={handlePress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n disabled={disabled}\n flexDirection={labelPosition === 'start' ? 'row' : 'row-reverse'}\n alignItems=\"center\"\n alignSelf=\"flex-start\"\n accessibilityRole=\"radio\"\n accessibilityState={a11yState}\n accessibilityLabel={typeof label === 'string' ? label : undefined}\n {...viewProps}\n style={rootStyle}\n >\n <Animated.View style={radioBoxStyle}>\n <Animated.View style={circleStyle} />\n </Animated.View>\n\n {labelContent}\n </Pressable>\n );\n});\n\nRadio.displayName = 'Radio';\n\nexport { Radio, type RadioProps };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Radio.js","names":["Text","Pressable"],"sources":["../../src/components/Radio.tsx"],"sourcesContent":["import type { RadioVariant, UniversalRadioProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { View } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withSpring } from 'react-native-reanimated';\n\nimport { radioStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { HStack } from './HStack';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\n\n/* -------------------------------------------------------------------------- */\n/* Types */\n/* -------------------------------------------------------------------------- */\n\n/** Derived from RadioValue - maps boolean to 'checked'/'unchecked' string literals */\ntype RadioValueState = 'checked' | 'unchecked';\n\ninterface RadioProps extends Omit<ViewProps, 'style'>, UniversalRadioProps {\n /** Ref to the underlying View */\n ref?: Ref<View>;\n /** Default checked state for uncontrolled mode */\n defaultChecked?: boolean;\n /** Whether the radio is disabled */\n disabled?: boolean;\n /** Whether the radio is required */\n required?: boolean;\n /** Callback fired when the checked state changes */\n onChange?: (checked: boolean) => void;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Variant Mapping */\n/* -------------------------------------------------------------------------- */\n\n/** All style variants available in the generated styles (includes error variants) */\ntype RadioStyleVariant = 'primary' | 'secondary' | 'alert' | 'alert-secondary';\n\nconst VARIANT_ERROR_MAP: Record<RadioVariant, RadioStyleVariant> = {\n primary: 'alert',\n secondary: 'alert-secondary',\n};\n\n/* -------------------------------------------------------------------------- */\n/* Radio Component */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **⚙️ A radio component**\n *\n * @description\n * A radio component allows users to select one option from a set.\n * Unlike checkbox, radio buttons cannot have multiple selected in a group,\n * allowing only one selection at a time.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Radio } from '@yahoo/uds-mobile';\n *\n * <Radio label=\"Option A\" />\n * <Radio label=\"Option B\" checked={true} onChange={setChecked} />\n * ```\n *\n * @usage\n * - Forms: For selecting a single option from multiple choices\n * - Settings: For toggling between mutually exclusive preferences\n *\n * @accessibility\n * - Sets `accessibilityRole=\"radio\"` automatically\n * - Announces checked/unchecked state\n * - Label is used as accessibility label\n * - Supports `reduceMotion` for users who prefer reduced motion\n *\n * @see {@link Checkbox} for multi-select options\n * @see {@link Switch} for binary toggles\n */\nconst Radio = memo(function Radio({\n // Radio props\n label,\n labelPosition = 'start',\n variant: variantProp = 'primary',\n size = 'md',\n checked: checkedProp,\n hasError,\n reduceMotion,\n // Native props\n defaultChecked,\n disabled,\n required,\n onChange,\n ref,\n ...viewProps\n}: RadioProps) {\n const generatedId = useId();\n const uid = `uds-radio-${generatedId}`;\n\n /* --------------------------------- State ---------------------------------- */\n const isControlled = checkedProp !== undefined;\n const [internalChecked, setInternalChecked] = useState<boolean>(\n isControlled ? checkedProp : (defaultChecked ?? false),\n );\n const [pressed, setPressed] = useState(false);\n\n // Use controlled value if provided, otherwise use internal state\n const checked = isControlled ? checkedProp : internalChecked;\n\n /* ------------------------------ Derived Values ---------------------------- */\n const valueState: RadioValueState = useMemo(() => {\n return checked ? 'checked' : 'unchecked';\n }, [checked]);\n\n /* -------------------------------- Animation ------------------------------- */\n const shouldAnimate = !reduceMotion;\n\n // Scale animation for press feedback (disabled when reduceMotion is true)\n const scaleProgress = useDerivedValue(\n () =>\n shouldAnimate\n ? withSpring(pressed ? SCALE_EFFECTS.down : SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG)\n : SCALE_EFFECTS.none, // No scale effect when reduceMotion is true\n [pressed, shouldAnimate],\n );\n\n const radioAnimatedStyle = useAnimatedStyle(() => ({\n transform: [{ scale: scaleProgress.value }],\n }));\n\n /* -------------------------------- Handlers -------------------------------- */\n const handlePress = useCallback(() => {\n if (disabled) {\n return;\n }\n\n const newChecked = !checked;\n\n if (!isControlled) {\n setInternalChecked(newChecked);\n }\n\n onChange?.(newChecked);\n }, [disabled, checked, isControlled, onChange]);\n\n const handlePressIn = useCallback(() => {\n setPressed(true);\n }, []);\n\n const handlePressOut = useCallback(() => {\n setPressed(false);\n }, []);\n\n /* --------------------------------- Styles --------------------------------- */\n // Compute the style variant (primary/secondary maps to alert variants when hasError)\n const styleVariant: RadioStyleVariant = hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp;\n\n radioStyles.useVariants({\n size,\n variant: styleVariant, // primary, secondary, alert, alert-secondary\n value: valueState, // checked, unchecked\n pressed,\n });\n\n const rootStyle = useMemo(\n () => [radioStyles.root, { opacity: disabled ? 0.5 : 1 }],\n [radioStyles.root, disabled],\n );\n\n const radioBoxStyle = useMemo(\n () => [\n radioStyles.radio,\n {\n alignItems: 'center' as const,\n justifyContent: 'center' as const,\n borderRadius: 9999,\n },\n radioAnimatedStyle,\n ],\n [radioStyles.radio, radioAnimatedStyle],\n );\n\n // Inner circle size: fixed 8x8px to match web implementation\n const INNER_CIRCLE_SIZE = 8;\n\n const circleStyle = useMemo(\n () => [\n radioStyles.radioCircle,\n {\n width: INNER_CIRCLE_SIZE,\n height: INNER_CIRCLE_SIZE,\n borderRadius: 9999,\n },\n ],\n [radioStyles.radioCircle],\n );\n\n /* ---------------------------- Render Helpers ------------------------------ */\n const labelContent = useMemo(() => {\n if (!label) {\n return null;\n }\n\n const content =\n typeof label === 'function' ? label() : isValidElement(label) ? label : String(label);\n\n const textContent =\n typeof content === 'string' ? <Text style={radioStyles.text}>{content}</Text> : content;\n\n if (required) {\n return (\n <HStack columnGap=\"1\" alignItems=\"flex-start\">\n {textContent}\n <Text style={radioStyles.text}>*</Text>\n </HStack>\n );\n }\n\n return textContent;\n }, [label, required, radioStyles.text]);\n\n const a11yState = useMemo(\n () => ({\n disabled,\n checked,\n }),\n [disabled, checked],\n );\n\n /* --------------------------------- Render --------------------------------- */\n return (\n <Pressable\n ref={ref}\n nativeID={uid}\n onPress={handlePress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n disabled={disabled}\n flexDirection={labelPosition === 'start' ? 'row' : 'row-reverse'}\n alignItems=\"center\"\n alignSelf=\"flex-start\"\n accessibilityRole=\"radio\"\n accessibilityState={a11yState}\n accessibilityLabel={typeof label === 'string' ? label : undefined}\n {...viewProps}\n style={rootStyle}\n >\n <Animated.View style={radioBoxStyle}>{checked && <View style={circleStyle} />}</Animated.View>\n\n {labelContent}\n </Pressable>\n );\n});\n\nRadio.displayName = 'Radio';\n\nexport { Radio, type RadioProps };\n"],"mappings":"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"}
|