@audira/carbon-react-native 0.0.1-alpha.1

package/src/components/notification/toast/success/index.tsx

@@ -0,0 +1,86 @@
+import {
+	forwardRef,
+} from 'react'
+
+import {
+	useSuccess,
+} from '../../_status-hooks'
+
+import {
+	ToastVariant,
+	type ToastVariantProps,
+	type ToastVariantRef,
+} from '../../_variants'
+
+export interface SuccessProps extends Omit<ToastVariantProps, 'icon'> {
+	iconProps?: Omit<
+		NonNullable<ToastVariantProps['iconProps']>,
+		| 'color'
+	>,
+	iconCloseProps?: Omit<
+		NonNullable<ToastVariantProps['iconCloseProps']>,
+		| 'color'
+	>,
+}
+
+export interface SuccessRef extends ToastVariantRef {
+}
+
+export const Success = forwardRef<SuccessRef, SuccessProps>(
+	function Success(
+		{
+			color,
+			iconProps,
+			iconCloseProps,
+			titleStyle: titleStyleProp,
+			leftBarStyle: leftBarStyleProp,
+			style: styleProp,
+			...props
+		},
+		ref,
+	) {
+
+		const {
+			icon,
+			iconProps: iconPropsData,
+			iconCloseProps: iconClosePropsData,
+			titleStyle,
+			leftBarStyle,
+			style,
+		} =
+			useSuccess({
+				color,
+				transparentBorderColor: false,
+			})
+
+		return (
+			<ToastVariant
+				{ ...props }
+				color={ color }
+				icon={ icon }
+				iconProps={{
+					...iconProps,
+					...iconPropsData,
+				}}
+				iconCloseProps={{
+					...iconCloseProps,
+					...iconClosePropsData,
+				}}
+				titleStyle={ [
+					titleStyle,
+					titleStyleProp,
+				] }
+				leftBarStyle={ [
+					leftBarStyle,
+					leftBarStyleProp,
+				] }
+				style={ [
+					style,
+					styleProp,
+				] }
+				ref={ ref }
+			/>
+		)
+
+	},
+)

package/src/components/notification/toast/warning/index.tsx

@@ -0,0 +1,86 @@
+import {
+	forwardRef,
+} from 'react'
+
+import {
+	useWarning,
+} from '../../_status-hooks'
+
+import {
+	ToastVariant,
+	type ToastVariantProps,
+	type ToastVariantRef,
+} from '../../_variants'
+
+export interface WarningProps extends Omit<ToastVariantProps, 'icon'> {
+	iconProps?: Omit<
+		NonNullable<ToastVariantProps['iconProps']>,
+		| 'color'
+	>,
+	iconCloseProps?: Omit<
+		NonNullable<ToastVariantProps['iconCloseProps']>,
+		| 'color'
+	>,
+}
+
+export interface WarningRef extends ToastVariantRef {
+}
+
+export const Warning = forwardRef<WarningRef, WarningProps>(
+	function Warning(
+		{
+			color,
+			iconProps,
+			iconCloseProps,
+			titleStyle: titleStyleProp,
+			leftBarStyle: leftBarStyleProp,
+			style: styleProp,
+			...props
+		},
+		ref,
+	) {
+
+		const {
+			icon,
+			iconProps: iconPropsData,
+			iconCloseProps: iconClosePropsData,
+			titleStyle,
+			leftBarStyle,
+			style,
+		} =
+			useWarning({
+				color,
+				transparentBorderColor: true,
+			})
+
+		return (
+			<ToastVariant
+				{ ...props }
+				color={ color }
+				icon={ icon }
+				iconProps={{
+					...iconProps,
+					...iconPropsData,
+				}}
+				iconCloseProps={{
+					...iconCloseProps,
+					...iconClosePropsData,
+				}}
+				titleStyle={ [
+					titleStyle,
+					titleStyleProp,
+				] }
+				leftBarStyle={ [
+					leftBarStyle,
+					leftBarStyleProp,
+				] }
+				style={ [
+					style,
+					styleProp,
+				] }
+				ref={ ref }
+			/>
+		)
+
+	},
+)

package/src/components/notification/types.ts

@@ -0,0 +1,3 @@
+export type NotificationColor =
+	| 'low_contrast'
+	| 'high_contrast'

package/src/components/radio-button/index.tsx

@@ -0,0 +1,238 @@
+import {
+	forwardRef,
+	useCallback,
+	useContext,
+	useImperativeHandle,
+	useRef,
+} from 'react'
+
+import {
+	Pressable,
+	StyleSheet,
+	View,
+	type PressableProps,
+	type TextStyle,
+	type ViewProps,
+} from 'react-native'
+
+import {
+	SpacingConstant,
+} from '../../constants'
+
+import {
+	ThemeContext,
+} from '../../contexts'
+
+import {
+	CommonStyle,
+	FlexStyle,
+} from '../../styles'
+
+import type {
+	ThemeType,
+} from '../../types'
+
+import {
+	FormLabel,
+	type FormLabelProps,
+} from '../form-label'
+
+import {
+	RadioButtonInput,
+	type RadioButtonInputProps,
+	type RadioButtonInputInteractiveState,
+	type RadioButtonInputRef,
+} from '../radio-button-input'
+
+export interface RadioButtonProps extends Omit<ViewProps, 'children'> {
+	/**
+	 * Control `checked` prop
+	 */
+	controlled?: boolean,
+	checked?: boolean,
+	value?: RadioButtonInputProps['value'],
+	interactiveState?: RadioButtonInputInteractiveState,
+	label: string,
+	onChange?: RadioButtonInputProps['onChange'],
+	onPress?: RadioButtonInputProps['onPress'],
+	radioButtonInputProps?: Omit<
+		RadioButtonInputProps,
+		| 'controlled'
+		| 'checked'
+		| 'value'
+		| 'interactiveState'
+		| 'role'
+		| 'onChange'
+	>,
+	formLabelProps?: Omit<FormLabelProps, 'label'>,
+	pressableProps?: Omit<
+		PressableProps,
+		| 'role'
+		| 'style'
+		| 'onPress'
+	> & {
+		style?: ViewProps['style'],
+	},
+}
+
+interface RadioButtonRefBase {
+	readonly checked: boolean,
+	/**
+	 * This method does nothing when `controlled` prop is true
+	 */
+	setChecked: RadioButtonInputRef['setChecked'],
+}
+
+export interface RadioButtonRef extends View, RadioButtonRefBase {
+}
+
+export const RadioButton = forwardRef<RadioButtonRef, RadioButtonProps>(
+	function RadioButton(
+		{
+			controlled,
+			checked,
+			value,
+			interactiveState = 'normal',
+			label,
+			role = 'radio',
+			'aria-label': ariaLabel,
+			onChange,
+			onPress,
+			radioButtonInputProps,
+			formLabelProps,
+			pressableProps,
+			style,
+			...props
+		},
+		forwardedRef,
+	) {
+
+		const
+			themeContext =
+				useContext(ThemeContext),
+
+			radioButtonInputRef =
+				useRef<RadioButtonInputRef>(null),
+
+			viewRef =
+				useRef<View>(null),
+
+			pressHandler: NonNullable<PressableProps['onPress']> =
+				useCallback(event => {
+					onPress?.(event)
+					radioButtonInputRef.current?.setChecked(true)
+				}, [
+					onPress,
+				])
+
+		useImperativeHandle(forwardedRef, () => {
+			return Object.assign<View, RadioButtonRefBase>(
+				(viewRef.current ?? {}) as View,
+				{
+					get checked() {
+						return radioButtonInputRef.current!.checked
+					},
+					setChecked(checked_) {
+						radioButtonInputRef.current?.setChecked(checked_)
+					},
+				},
+			)
+		}, [])
+
+		return (
+			<View
+				{ ...props }
+				aria-label={ ariaLabel || label }
+				style={ [
+					FlexStyle.flex_row,
+					style,
+				] }
+				ref={ viewRef }
+			>
+				<Pressable
+					{ ...pressableProps }
+					role={ role }
+					disabled={ interactiveState === 'disabled' }
+					aria-label={ pressableProps?.['aria-label'] ?? label }
+					onPress={ pressHandler }
+					style={ [
+						CommonStyle.absolute,
+						CommonStyle.w_full,
+						CommonStyle.h_full,
+						baseStyle.pressable,
+						pressableProps?.style,
+					] }
+				/>
+
+				<RadioButtonInput
+					{ ...radioButtonInputProps }
+					role="none"
+					controlled={ controlled }
+					checked={ checked }
+					value={ value }
+					interactiveState={ interactiveState }
+					onChange={ onChange }
+					onPress={ onPress }
+					style={ [
+						baseStyle.radioButtonInput,
+						radioButtonInputProps?.style,
+					] }
+					ref={ radioButtonInputRef }
+				/>
+
+				<FormLabel
+					{ ...formLabelProps }
+					label={ label }
+					textProps={{
+						...formLabelProps?.textProps,
+						type: formLabelProps?.textProps?.type || 'body_compact_01',
+						style: [
+							getTextColorStyle(interactiveState, themeContext.color),
+							formLabelProps?.textProps?.style,
+						],
+					}}
+					style={ [
+						baseStyle.label,
+						formLabelProps?.style,
+					] }
+				/>
+			</View>
+		)
+
+	},
+)
+
+const
+	baseStyle =
+		StyleSheet.create({
+			pressable: {
+				zIndex: 1,
+			},
+			radioButtonInput: {
+				zIndex: 2,
+			},
+			label: {
+				marginLeft: SpacingConstant.spacing_03,
+			},
+		}),
+
+	mapTextColor: Record<
+		RadioButtonInputInteractiveState,
+		ThemeType.ColorToken
+	> =
+		{
+			normal: 'text_primary',
+			disabled: 'text_disabled',
+			error: 'text_primary',
+			read_only: 'text_primary',
+			warning: 'text_primary',
+		}
+
+function getTextColorStyle(
+	interactiveState: RadioButtonInputInteractiveState,
+	color: ThemeContext['color'],
+): TextStyle {
+	return {
+		color: color[mapTextColor[interactiveState]],
+	}
+}

package/src/components/radio-button-group/_item-context.tsx

@@ -0,0 +1,15 @@
+import {
+	createContext,
+} from 'react'
+
+import type {
+	RadioButtonGroupProps,
+} from './_types'
+
+export interface RadioButtonGroupItemContext {
+	controlled?: RadioButtonGroupProps['controlled'],
+	value?: RadioButtonGroupProps['selectedValue'],
+	setValue?: (value: RadioButtonGroupProps['selectedValue']) => void,
+}
+
+export const RadioButtonGroupItemContext = createContext<RadioButtonGroupItemContext>({})

package/src/components/radio-button-group/_item.tsx

@@ -0,0 +1,91 @@
+import {
+	forwardRef,
+	useCallback,
+	useContext,
+	useImperativeHandle,
+	useRef,
+} from 'react'
+
+import {
+	RadioButton,
+	type RadioButtonProps,
+	type RadioButtonRef,
+} from '../radio-button'
+
+import {
+	RadioButtonGroupItemContext,
+} from './_item-context'
+
+import type {
+	RadioButtonGroupItemProps,
+	RadioButtonGroupItemRef,
+} from './_types'
+
+export const RadioButtonGroupItem = forwardRef<RadioButtonGroupItemRef, RadioButtonGroupItemProps>(
+	function RadioButtonGroupItem(
+		{
+			value: valueProp,
+			onPress,
+			...props
+		},
+		forwardedRef,
+	) {
+
+		const
+			{ controlled, value, setValue } =
+				useContext(RadioButtonGroupItemContext),
+
+			radioButtonRef =
+				useRef<RadioButtonRef>(null),
+
+			pressHandler: NonNullable<RadioButtonProps['onPress']> =
+				useCallback(event => {
+					onPress?.(event)
+					if(!controlled) {
+						setValue?.(valueProp)
+					}
+				}, [
+					controlled,
+					valueProp,
+					setValue,
+					onPress,
+				])
+
+		useImperativeHandle(forwardedRef, () => {
+			return Object.assign<RadioButtonRef, { setChecked: RadioButtonRef['setChecked'] }>(
+				(radioButtonRef.current ?? {}) as RadioButtonRef,
+				{
+					setChecked(checkedParam) {
+						if(!controlled) {
+							let checked: boolean
+
+							if(typeof checkedParam === 'boolean') {
+								checked = checkedParam
+							} else {
+								checked = checkedParam(!!radioButtonRef.current?.checked)
+							}
+
+							setValue?.(checked ? valueProp : undefined)
+						}
+					},
+				},
+			)
+		}, [
+			controlled,
+			valueProp,
+			setValue,
+		])
+
+		return (
+			<RadioButton
+				{ ...props }
+				value={ value }
+				controlled
+				checked={ value === valueProp }
+				onPress={ pressHandler }
+				ref={ radioButtonRef }
+			/>
+		)
+
+	},
+)

package/src/components/radio-button-group/_types/index.ts

@@ -0,0 +1,55 @@
+import type {
+	View,
+	ViewProps,
+} from 'react-native'
+
+import type {
+	FormHelperTextProps,
+} from '../../form-helper-text'
+
+import type {
+	RadioButtonProps,
+	RadioButtonRef,
+} from '../../radio-button'
+
+import type {
+	RadioButtonGroupRefBase,
+} from './ref-base'
+
+export type RadioButtonGroupHelperTextMode =
+	| 'normal'
+	| 'error'
+	| 'warning'
+
+export interface RadioButtonGroupProps extends ViewProps {
+	controlled?: boolean,
+	selectedValue?: RadioButtonProps['value'],
+	orientation?: 'vertical' | 'horizontal',
+	legend: string,
+	helperText?: string,
+	helperTextMode?: RadioButtonGroupHelperTextMode,
+	/**
+	 * Set to false if you only want to show your `textLeading` custom node  
+	 * Default value is true
+	 */
+	helperTextModeIcon?: boolean,
+	onChange?: (value: RadioButtonGroupProps['selectedValue']) => void,
+	formHelperTextProps?: Omit<
+		FormHelperTextProps,
+		| 'text'
+		| 'error'
+	>,
+}
+
+export interface RadioButtonGroupRef extends View, RadioButtonGroupRefBase {
+}
+
+export interface RadioButtonGroupItemProps extends Omit<
+	RadioButtonProps,
+	| 'controlled'
+	| 'checked'
+> {
+}
+
+export interface RadioButtonGroupItemRef extends RadioButtonRef {
+}

package/src/components/radio-button-group/_types/ref-base.ts

@@ -0,0 +1,11 @@
+import type {
+	RadioButtonProps,
+} from '../../radio-button'
+
+export interface RadioButtonGroupRefBase {
+	readonly selectedValue: RadioButtonProps['value'],
+	/**
+	 * This method does nothing if `controlled` prop is true
+	 */
+	setSelectedValue: (value: RadioButtonProps['value'] | ((value: RadioButtonProps['value']) => RadioButtonProps['value'])) => void,
+}