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

package/src/components/button/size.ts

@@ -0,0 +1,7 @@
+export type ButtonSize =
+	| 'small'
+	| 'medium'
+	| 'large_productive'
+	| 'large_expressive'
+	| 'extra_large'
+	| '2xl'

package/src/components/button/tertiary/index.tsx

@@ -0,0 +1,125 @@
+import {
+	useContext,
+} from 'react'
+
+import {
+	StyleSheet,
+	type TextStyle,
+	type ViewStyle,
+} from 'react-native'
+
+import {
+	ThemeContext,
+} from '../../../contexts'
+
+import {
+	StyleSheet as StyleSheetColor,
+} from '../../../_style-sheet'
+
+import {
+	BaseColor,
+	type BaseColorProps,
+} from '../base-color'
+
+export interface TertiaryProps extends Omit<
+	BaseColorProps,
+	| 'android_rippleEffectColor'
+	| 'colorStateStyle'
+	| 'iconContainerStyle'
+> {
+}
+
+export function Tertiary({
+	style,
+	...props
+}: TertiaryProps) {
+
+	const
+		themeContext =
+			useContext(ThemeContext)
+
+	return (
+		<BaseColor
+			{ ...props }
+			android_rippleEffectColor={ themeContext.color.button_tertiary_active }
+			colorStateStyle={{
+				background: {
+					default: colorStyle.background_default,
+					focused: colorStyle.background_pressed,
+					hovered: colorStyle.background_hovered,
+					pressed: colorStyle.background_pressed,
+					disabled: colorStyle.background_disabled,
+				},
+				text: {
+					default: colorStyle.text_default,
+					focused: colorStyle.text_focused,
+					hovered: colorStyle.text_hovered,
+					pressed: colorStyle.text_pressed,
+					disabled: colorStyle.text_disabled,
+				},
+				icon: {
+					default: themeContext.color.button_tertiary,
+					focused: themeContext.color.button_tertiary,
+					hovered: themeContext.color.icon_inverse,
+					pressed: themeContext.color.icon_inverse,
+					disabled: themeContext.color.icon_disabled,
+				},
+			}}
+			style={ [baseStyle.tertiary, style] }
+		/>
+	)
+
+}
+
+const
+	baseStyle =
+		StyleSheet.create({
+			tertiary: {
+				borderWidth: 1,
+			},
+		}),
+
+	colorStyle =
+		StyleSheetColor.create<
+			Record<
+				`${'background' | 'text'}_${keyof BaseColorProps['colorStateStyle']['text']}`,
+				ViewStyle | TextStyle
+			>
+		>(color => ({
+			background_default: {
+				backgroundColor: 'transparent',
+				borderColor: color.button_tertiary,
+			},
+			background_focused: {
+				backgroundColor: color.button_tertiary_hover,
+				borderColor: color.focus,
+			},
+			background_hovered: {
+				backgroundColor: color.button_tertiary_hover,
+				borderColor: color.button_tertiary_hover,
+			},
+			background_pressed: {
+				backgroundColor: color.button_tertiary_active,
+				borderColor: color.button_tertiary_active,
+			},
+			background_disabled: {
+				backgroundColor: 'transparent',
+				borderColor: color.button_disabled,
+			},
+
+			text_default: {
+				color: color.button_tertiary,
+			},
+			text_focused: {
+				color: color.button_tertiary,
+			},
+			text_hovered: {
+				color: color.text_inverse,
+			},
+			text_pressed: {
+				color: color.text_inverse,
+			},
+			text_disabled: {
+				color: color.text_disabled,
+			},
+		}))

package/src/components/button/tertiary-danger/index.tsx

@@ -0,0 +1,125 @@
+import {
+	useContext,
+} from 'react'
+
+import {
+	StyleSheet,
+	type TextStyle,
+	type ViewStyle,
+} from 'react-native'
+
+import {
+	ThemeContext,
+} from '../../../contexts'
+
+import {
+	StyleSheet as StyleSheetColor,
+} from '../../../_style-sheet'
+
+import {
+	BaseColor,
+	type BaseColorProps,
+} from '../base-color'
+
+export interface TertiaryDangerProps extends Omit<
+	BaseColorProps,
+	| 'android_rippleEffectColor'
+	| 'colorStateStyle'
+	| 'iconContainerStyle'
+> {
+}
+
+export function TertiaryDanger({
+	style,
+	...props
+}: TertiaryDangerProps) {
+
+	const
+		themeContext =
+			useContext(ThemeContext)
+
+	return (
+		<BaseColor
+			{ ...props }
+			android_rippleEffectColor={ themeContext.color.button_danger_active }
+			colorStateStyle={{
+				background: {
+					default: colorStyle.background_default,
+					focused: colorStyle.background_pressed,
+					hovered: colorStyle.background_hovered,
+					pressed: colorStyle.background_pressed,
+					disabled: colorStyle.background_disabled,
+				},
+				text: {
+					default: colorStyle.text_default,
+					focused: colorStyle.text_focused,
+					hovered: colorStyle.text_hovered,
+					pressed: colorStyle.text_pressed,
+					disabled: colorStyle.text_disabled,
+				},
+				icon: {
+					default: themeContext.color.button_danger_secondary,
+					focused: themeContext.color.button_danger_secondary,
+					hovered: themeContext.color.icon_on_color,
+					pressed: themeContext.color.icon_on_color,
+					disabled: themeContext.color.icon_disabled,
+				},
+			}}
+			style={ [baseStyle.tertiaryDanger, style] }
+		/>
+	)
+
+}
+
+const
+	baseStyle =
+		StyleSheet.create({
+			tertiaryDanger: {
+				borderWidth: 1,
+			},
+		}),
+
+	colorStyle =
+		StyleSheetColor.create<
+			Record<
+				`${'background' | 'text'}_${keyof BaseColorProps['colorStateStyle']['text']}`,
+				ViewStyle | TextStyle
+			>
+		>(color => ({
+			background_default: {
+				backgroundColor: 'transparent',
+				borderColor: color.button_danger_secondary,
+			},
+			background_focused: {
+				backgroundColor: 'transparent',
+				borderColor: color.focus,
+			},
+			background_hovered: {
+				backgroundColor: color.button_danger_hover,
+				borderColor: color.button_danger_hover,
+			},
+			background_pressed: {
+				backgroundColor: color.button_danger_active,
+				borderColor: color.button_danger_active,
+			},
+			background_disabled: {
+				backgroundColor: 'transparent',
+				borderColor: color.button_disabled,
+			},
+
+			text_default: {
+				color: color.button_danger_secondary,
+			},
+			text_focused: {
+				color: color.button_danger_secondary,
+			},
+			text_hovered: {
+				color: color.text_on_color,
+			},
+			text_pressed: {
+				color: color.text_on_color,
+			},
+			text_disabled: {
+				color: color.text_disabled,
+			},
+		}))

package/src/components/checkbox/index.tsx

@@ -0,0 +1,239 @@
+import {
+	forwardRef,
+	useCallback,
+	useImperativeHandle,
+	useRef,
+} from 'react'
+
+import {
+	Pressable,
+	StyleSheet,
+	View,
+	type PressableProps,
+	type TextStyle,
+	type ViewProps,
+} from 'react-native'
+
+import {
+	StyleSheet as StyleSheetColor,
+} from '../../_style-sheet'
+
+import {
+	SpacingConstant,
+} from '../../constants'
+
+import {
+	CommonStyle,
+	FlexStyle,
+} from '../../styles'
+
+import {
+	CheckboxInput,
+	type CheckboxInputInteractiveState,
+	type CheckboxInputProps,
+	type CheckboxInputRef,
+} from '../checkbox-input'
+
+import {
+	FormLabel,
+	type FormLabelProps,
+} from '../form-label'
+
+export interface CheckboxProps extends Omit<ViewProps, 'children'> {
+	/**
+	 * Control `value` and `indeterminate` prop
+	 */
+	controlled?: boolean,
+	value?: boolean,
+	indeterminate?: CheckboxInputProps['indeterminate'],
+	interactiveState?: CheckboxInputInteractiveState,
+	label: string,
+	onChange?: CheckboxInputProps['onChange'],
+	onPress?: CheckboxInputProps['onPress'],
+	checkboxInputProps?: Omit<
+		CheckboxInputProps,
+		| 'controlled'
+		| 'value'
+		| 'indeterminate'
+		| 'interactiveState'
+		| 'role'
+		| 'onChange'
+	>,
+	formLabelProps?: Omit<FormLabelProps, 'label'>,
+	pressableProps?: Omit<
+		PressableProps,
+		| 'role'
+		| 'style'
+		| 'onPress'
+	> & {
+		style?: ViewProps['style'],
+	},
+}
+
+interface CheckboxRefBase {
+	readonly value: boolean,
+	/**
+	 * This method does nothing when `controlled` prop is true
+	 */
+	setValue: CheckboxInputRef['setValue'],
+}
+
+export interface CheckboxRef extends View, CheckboxRefBase {
+}
+
+export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(
+	function Checkbox(
+		{
+			controlled,
+			value,
+			indeterminate,
+			interactiveState = 'normal',
+			label,
+			role = 'checkbox',
+			'aria-label': ariaLabel,
+			onChange,
+			onPress,
+			checkboxInputProps,
+			formLabelProps,
+			pressableProps,
+			style,
+			...props
+		},
+		forwardedRef,
+	) {
+
+		const
+			checkboxInputRef =
+				useRef<CheckboxInputRef>(null),
+
+			viewRef =
+				useRef<View>(null),
+
+			pressHandler: NonNullable<PressableProps['onPress']> =
+				useCallback(event => {
+					onPress?.(event)
+					checkboxInputRef.current?.setValue(
+						(currentValue, indeterminate_) => {
+							if(indeterminate_ && currentValue) {
+								return true
+							}
+							return !currentValue
+						},
+					)
+				}, [
+					onPress,
+				])
+
+		useImperativeHandle(forwardedRef, () => {
+			return Object.assign<View, CheckboxRefBase>(
+				(viewRef.current ?? {}) as View,
+				{
+					get value() {
+						return checkboxInputRef.current!.value
+					},
+					setValue(value_) {
+						checkboxInputRef.current?.setValue(value_)
+					},
+				},
+			)
+		}, [])
+
+		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,
+					] }
+				/>
+
+				<CheckboxInput
+					{ ...checkboxInputProps }
+					role="none"
+					controlled={ controlled }
+					value={ value }
+					indeterminate={ indeterminate }
+					interactiveState={ interactiveState }
+					onChange={ onChange }
+					onPress={ onPress }
+					style={ [
+						baseStyle.checkboxInput,
+						checkboxInputProps?.style,
+					] }
+					ref={ checkboxInputRef }
+				/>
+
+				<FormLabel
+					{ ...formLabelProps }
+					label={ label }
+					textProps={{
+						...formLabelProps?.textProps,
+						type: formLabelProps?.textProps?.type || 'body_compact_01',
+						style: [
+							textColorStyle[interactiveState],
+							formLabelProps?.textProps?.style,
+						],
+					}}
+					style={ [
+						baseStyle.label,
+						formLabelProps?.style,
+					] }
+				/>
+			</View>
+		)
+
+	},
+)
+
+const
+	baseStyle =
+		StyleSheet.create({
+			pressable: {
+				zIndex: 1,
+			},
+			checkboxInput: {
+				zIndex: 2,
+			},
+			label: {
+				marginLeft: SpacingConstant.spacing_03,
+			},
+		}),
+
+	textColorStyle =
+		StyleSheetColor.create<
+			Record<CheckboxInputInteractiveState, TextStyle>
+		>(color => {
+			return {
+				normal: {
+					color: color.text_primary,
+				},
+				disabled: {
+					color: color.text_disabled,
+				},
+				error: {
+					color: color.text_primary,
+				},
+				read_only: {
+					color: color.text_primary,
+				},
+				warning: {
+					color: color.text_primary,
+				},
+			}
+		})

package/src/components/checkbox-group/index.tsx

@@ -0,0 +1,197 @@
+import {
+	forwardRef,
+	useContext,
+} from 'react'
+
+import {
+	StyleSheet,
+	View,
+	type ViewProps,
+	type ViewStyle,
+} from 'react-native'
+
+import IconWarningAltFilled from '@carbon/icons/es/warning--alt--filled/16'
+import IconWarningFilled from '@carbon/icons/es/warning--filled/16'
+
+import {
+	SpacingConstant,
+} from '../../constants'
+
+import {
+	ThemeContext,
+} from '../../contexts'
+
+import {
+	FlexStyle,
+} from '../../styles'
+
+import {
+	Checkbox,
+} from '../checkbox'
+
+import {
+	FormLabel,
+} from '../form-label'
+
+import {
+	Icon,
+	type IconProps,
+} from '../icon'
+
+import {
+	FormHelperText,
+	type FormHelperTextProps,
+} from '../form-helper-text'
+
+export type CheckboxGroupHelperTextMode =
+	| 'normal'
+	| 'error'
+	| 'warning'
+
+export interface CheckboxGroupProps extends ViewProps {
+	orientation?: 'vertical' | 'horizontal',
+	legend: string,
+	helperText?: string,
+	helperTextMode?: CheckboxGroupHelperTextMode,
+	/**
+	 * Set to false if you only want to show your `textLeading` custom node  
+	 * Default value is true
+	 */
+	helperTextModeIcon?: boolean,
+	formHelperTextProps?: Omit<
+		FormHelperTextProps,
+		| 'text'
+		| 'error'
+	>,
+}
+
+export interface CheckboxGroupRef extends View {
+}
+
+const Component = forwardRef<CheckboxGroupRef, CheckboxGroupProps>(
+	function CheckboxGroup(
+		{
+			orientation = 'vertical',
+			legend,
+			helperText,
+			helperTextMode,
+			helperTextModeIcon = true,
+			formHelperTextProps,
+			children,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		return (
+			<View
+				{ ...props }
+				style={ style }
+				ref={ ref }
+			>
+				<FormLabel
+					label={ legend }
+					style={ baseStyle.legend }
+				/>
+
+				<View
+					style={ [
+						baseStyle.wrapper,
+						wrapperOrientationStyle[orientation],
+					] }
+				>
+					{ children }
+				</View>
+
+				{ !!helperText && (
+					<FormHelperText
+						{ ...formHelperTextProps }
+						error={ helperTextMode === 'error' }
+						text={ helperText }
+						textLeading={
+							helperTextModeIcon && helperTextMode === 'error' ? (
+								<IconErrorRenderer/>
+							) : helperTextModeIcon && helperTextMode === 'warning' ? (
+								<IconWarningRenderer/>
+							) : formHelperTextProps?.textLeading
+						}
+						style={ [
+							baseStyle.formHelperText,
+							formHelperTextProps?.style,
+						] }
+					/>
+				) }
+			</View>
+		)
+
+	},
+)
+
+export const CheckboxGroup = Object.assign(Component, {
+	Item: Checkbox,
+})
+
+const
+	baseStyle =
+		StyleSheet.create({
+			wrapper: {
+				columnGap: SpacingConstant.spacing_05,
+				rowGap: SpacingConstant.spacing_03,
+			},
+			legend: {
+				marginBottom: SpacingConstant.spacing_03,
+			},
+			formHelperText: {
+				marginTop: SpacingConstant.spacing_03,
+			},
+		}),
+
+	wrapperOrientationStyle =
+		StyleSheet.create<Record<NonNullable<CheckboxGroupProps['orientation']>, ViewStyle>>({
+			vertical: {
+				flexDirection: 'column',
+			},
+			horizontal: {
+				...FlexStyle.flex_wrap,
+				flexDirection: 'row',
+			},
+		})
+
+interface IconRendererProps extends Omit<IconProps, 'src' | 'fill' | 'width' | 'height'> {
+}
+
+function IconErrorRenderer(props: IconRendererProps) {
+
+	const themeContext = useContext(ThemeContext)
+
+	return (
+		<Icon
+			{ ...props }
+			src={ IconWarningFilled }
+			fill={ themeContext.color.support_error }
+			stroke={ themeContext.color.background }
+			width={ 18 }
+			height={ 18 }
+		/>
+	)
+
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+IconWarningAltFilled.content[0].attrs.fill = 'black'
+function IconWarningRenderer(props: IconRendererProps) {
+
+	const themeContext = useContext(ThemeContext)
+
+	return (
+		<Icon
+			{ ...props }
+			src={ IconWarningAltFilled }
+			fill={ themeContext.color.support_warning }
+			width={ 18 }
+			height={ 18 }
+		/>
+	)
+
+}