@audira/carbon-react-native 1.0.0-beta.7 → 1.0.0-beta.8

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

@@ -0,0 +1,78 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	useSuccess,
+} from "../../_status-hooks"
+
+import {
+	ToastVariant,
+} from "../../_variants"
+
+import type {
+	SuccessProps,
+} from "./SuccessProps"
+
+import type {
+	SuccessRef,
+} from "./SuccessRef"
+
+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/success/SuccessProps.ts

@@ -0,0 +1,14 @@
+import type {
+	CalloutInlineVariantProps,
+} from "../../_variants/callout-inline"
+
+export interface SuccessProps extends Omit<CalloutInlineVariantProps, "Icon"> {
+	iconProps?: Omit<
+		NonNullable<CalloutInlineVariantProps["iconProps"]>,
+		| "color"
+	>,
+	iconCloseProps?: Omit<
+		NonNullable<CalloutInlineVariantProps["iconCloseProps"]>,
+		| "color"
+	>,
+}

package/src/components/notification/toast/success/SuccessRef.ts

@@ -0,0 +1,6 @@
+import type {
+	CalloutInlineVariantRef,
+} from "../../_variants/callout-inline"
+
+export interface SuccessRef extends CalloutInlineVariantRef {
+}

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

@@ -0,0 +1,3 @@
+export * from "./Success"
+export * from "./SuccessProps"
+export * from "./SuccessRef"

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

@@ -0,0 +1,78 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	useWarning,
+} from "../../_status-hooks"
+
+import {
+	ToastVariant,
+} from "../../_variants"
+
+import type {
+	WarningProps,
+} from "./WarningProps"
+
+import type {
+	WarningRef,
+} from "./WarningRef"
+
+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/toast/warning/WarningProps.ts

@@ -0,0 +1,14 @@
+import type {
+	ToastVariantProps,
+} from "../../_variants/toast"
+
+export interface WarningProps extends Omit<ToastVariantProps, "Icon"> {
+	iconProps?: Omit<
+		NonNullable<ToastVariantProps["iconProps"]>,
+		| "color"
+	>,
+	iconCloseProps?: Omit<
+		NonNullable<ToastVariantProps["iconCloseProps"]>,
+		| "color"
+	>,
+}

package/src/components/notification/toast/warning/WarningRef.ts

@@ -0,0 +1,6 @@
+import type {
+	ToastVariantRef,
+} from "../../_variants/toast"
+
+export interface WarningRef extends ToastVariantRef {
+}

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

@@ -0,0 +1,3 @@
+export * from "./Warning"
+export * from "./WarningProps"
+export * from "./WarningRef"

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

@@ -0,0 +1,216 @@
+import {
+	forwardRef,
+	useCallback,
+	useContext,
+	useImperativeHandle,
+	useRef,
+} from "react"
+
+import {
+	Pressable,
+	StyleSheet,
+	View,
+	type PressableProps,
+	type TextStyle,
+} from "react-native"
+
+import {
+	Spacing,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	GlobalConfigContext,
+} from "../../_internal/contexts"
+
+import {
+	CommonStyleSheet,
+	FlexStyleSheet,
+} from "../../_internal/style-sheets"
+
+import {
+	CarbonStyleSheet,
+} from "../../carbon-style-sheet"
+
+import {
+	ThemeContext,
+} from "../../contexts"
+
+import {
+	FormLabel,
+} from "../form-label"
+
+import {
+	RadioButtonInput,
+	type RadioButtonInputInteractiveState,
+	type RadioButtonInputRef,
+} from "../radio-button-input"
+
+import type {
+	RadioButtonProps,
+} from "./RadioButtonProps"
+
+import type {
+	RadioButtonRef,
+} from "./RadioButtonRef"
+
+import type {
+	RefBase,
+} from "./_RefBase"
+
+export const RadioButton = forwardRef<RadioButtonRef, RadioButtonProps>(
+	function RadioButton(
+		{
+			defaultChecked,
+			checked,
+			value,
+			interactiveState = "normal",
+			label,
+			role = "radio",
+			"aria-label": ariaLabel,
+			onChange,
+			onPress,
+			radioButtonInputProps,
+			formLabelProps,
+			pressableProps,
+			style,
+			dir,
+			...props
+		},
+		forwardedRef,
+	) {
+
+		useContext(ThemeContext)
+
+		const
+			radioButtonInputRef =
+				useRef<RadioButtonInputRef>(null),
+
+			globalConfigContext =
+				useContext(GlobalConfigContext),
+
+			viewRef =
+				useRef<View>(null),
+
+			pressHandler: NonNullable<PressableProps["onPress"]> =
+				useCallback(event => {
+					onPress?.(event)
+					radioButtonInputRef.current?.setChecked(true)
+				}, [
+					onPress,
+				])
+
+		useImperativeHandle(forwardedRef, () => {
+			return Object.assign<View, RefBase>(
+				(viewRef.current ?? {
+				}) as View,
+				{
+					get checked() {
+						return radioButtonInputRef.current!.checked
+					},
+					setChecked(checked_) {
+						radioButtonInputRef.current?.setChecked(checked_)
+					},
+				},
+			)
+		}, [])
+
+		return (
+			<View
+				{ ...props }
+				aria-label={ ariaLabel || label }
+				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
+				style={ [
+					FlexStyleSheet.flex_row,
+					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+					style,
+				] }
+				ref={ viewRef }
+			>
+				<Pressable
+					{ ...pressableProps }
+					role={ role }
+					disabled={ interactiveState === "disabled" }
+					aria-label={ pressableProps?.["aria-label"] ?? label }
+					onPress={ pressHandler }
+					style={ [
+						CommonStyleSheet.absolute,
+						CommonStyleSheet.w_full,
+						CommonStyleSheet.h_full,
+						baseStyle.pressable,
+						pressableProps?.style,
+					] }
+				/>
+
+				<RadioButtonInput
+					{ ...radioButtonInputProps }
+					role="none"
+					defaultChecked={ defaultChecked }
+					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: [
+							textColorStyle[interactiveState],
+							formLabelProps?.textProps?.style,
+						],
+					}}
+					style={ [
+						FlexStyleSheet.flex_1,
+						baseStyle.label,
+						formLabelProps?.style,
+					] }
+				/>
+			</View>
+		)
+
+	},
+)
+
+const
+	baseStyle =
+		StyleSheet.create({
+			pressable: {
+				zIndex: 1,
+			},
+			radioButtonInput: {
+				zIndex: 2,
+			},
+			label: {
+				marginStart: Spacing.spacing_03,
+			},
+		}),
+
+	textColorStyle =
+		CarbonStyleSheet.create<
+			Record<RadioButtonInputInteractiveState, TextStyle>
+		>({
+			normal: {
+				color: CarbonStyleSheet.color.text_primary,
+			},
+			disabled: {
+				color: CarbonStyleSheet.color.text_disabled,
+			},
+			error: {
+				color: CarbonStyleSheet.color.text_primary,
+			},
+			read_only: {
+				color: CarbonStyleSheet.color.text_primary,
+			},
+			warning: {
+				color: CarbonStyleSheet.color.text_primary,
+			},
+		})

package/src/components/radio-button/RadioButtonProps.ts

@@ -0,0 +1,44 @@
+import type {
+	PressableProps,
+	ViewProps,
+} from "react-native"
+
+import type {
+	FormLabelProps,
+} from "../form-label/FormLabelProps"
+
+import type {
+	RadioButtonInputInteractiveState,
+} from "../radio-button-input/RadioButtonInputInteractiveState"
+
+import type {
+	RadioButtonInputProps,
+} from "../radio-button-input/RadioButtonInputProps"
+
+export interface RadioButtonProps extends Omit<ViewProps, "children"> {
+	defaultChecked?: 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"],
+	},
+}

package/src/components/radio-button/RadioButtonRef.ts

@@ -0,0 +1,10 @@
+import type {
+	View,
+} from "react-native"
+
+import type {
+	RefBase,
+} from "./_RefBase"
+
+export interface RadioButtonRef extends View, RefBase {
+}

package/src/components/radio-button/_RefBase.ts

@@ -0,0 +1,11 @@
+import type {
+	RadioButtonInputRef,
+} from "../radio-button-input/RadioButtonInputRef"
+
+export interface RefBase {
+	readonly checked: boolean,
+	/**
+	 * This method does nothing when `controlled` prop is true
+	 */
+	setChecked: RadioButtonInputRef["setChecked"],
+}

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

@@ -0,0 +1,3 @@
+export * from "./RadioButton"
+export * from "./RadioButtonProps"
+export * from "./RadioButtonRef"