@audira/carbon-react-native 1.0.0-beta.2 → 1.0.0-beta.21

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.ts

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

package/src/components/password-input/PasswordInput.tsx

@@ -0,0 +1,61 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	SecureTextEntryControlHook,
+} from "../../_internal/hooks"
+
+import {
+	GhostIcon,
+} from "../password-input-field/_ghost-icon"
+
+import {
+	TextInput,
+} from "../text-input"
+
+import type {
+	PasswordInputProps,
+} from "./PasswordInputProps"
+
+import type {
+	PasswordInputRef,
+} from "./PasswordInputRef"
+
+export const PasswordInput = forwardRef<PasswordInputRef, PasswordInputProps>(
+	function PasswordInput(
+		{
+			autoComplete = "current-password",
+			size = "medium",
+			secureTextEntry: secureTextEntryProp,
+			blockEndNode,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			[secureTextEntry, toggleSecureTextEntrySelf] =
+				SecureTextEntryControlHook.use(secureTextEntryProp)
+
+		return (
+			<TextInput
+				ref={ ref }
+				{ ...props }
+				autoComplete={ autoComplete }
+				size={ size }
+				secureTextEntry={ secureTextEntry }
+				blockEndNode={ (<>
+					<GhostIcon
+						inputSize={ size }
+						secureTextEntry={ secureTextEntry }
+						onPress={ toggleSecureTextEntrySelf }
+					/>
+
+					{ blockEndNode }
+				</>) }
+			/>
+		)
+
+	},
+)

package/src/components/password-input/PasswordInputProps.ts

@@ -0,0 +1,6 @@
+import type {
+	TextInputProps,
+} from "../text-input/TextInputProps"
+
+export interface PasswordInputProps extends TextInputProps {
+}

package/src/components/password-input/PasswordInputRef.ts

@@ -0,0 +1,6 @@
+import type {
+	TextInputRef,
+} from "../text-input/TextInputRef"
+
+export interface PasswordInputRef extends TextInputRef {
+}

package/src/components/password-input/index.ts

@@ -0,0 +1,3 @@
+export * from "./PasswordInput"
+export type * from "./PasswordInputProps"
+export type * from "./PasswordInputRef"

package/src/components/password-input-field/PasswordInputField.tsx

@@ -0,0 +1,61 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	SecureTextEntryControlHook,
+} from "../../_internal/hooks"
+
+import {
+	TextInputField,
+} from "../text-input-field"
+
+import type {
+	PasswordInputFieldProps,
+} from "./PasswordInputFieldProps"
+
+import type {
+	PasswordInputFieldRef,
+} from "./PasswordInputFieldRef"
+
+import {
+	GhostIcon,
+} from "./_ghost-icon"
+
+export const PasswordInputField = forwardRef<PasswordInputFieldRef, PasswordInputFieldProps>(
+	function PasswordInputField(
+		{
+			autoComplete = "current-password",
+			size = "medium",
+			secureTextEntry: secureTextEntryProp,
+			blockEndNode,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			[secureTextEntry, toggleSecureTextEntrySelf] =
+				SecureTextEntryControlHook.use(secureTextEntryProp)
+
+		return (
+			<TextInputField
+				ref={ ref }
+				{ ...props }
+				autoComplete={ autoComplete }
+				size={ size }
+				secureTextEntry={ secureTextEntry }
+				blockEndNode={ (<>
+					<GhostIcon
+						inputSize={ size }
+						secureTextEntry={ secureTextEntry }
+						onPress={ toggleSecureTextEntrySelf }
+					/>
+
+					{ blockEndNode }
+				</>) }
+			/>
+		)
+
+	},
+)

package/src/components/password-input-field/PasswordInputFieldProps.ts

@@ -0,0 +1,6 @@
+import type {
+	TextInputFieldProps,
+} from "../text-input-field/TextInputFieldProps"
+
+export interface PasswordInputFieldProps extends TextInputFieldProps {
+}

package/src/components/password-input-field/PasswordInputFieldRef.tsx

@@ -0,0 +1,6 @@
+import type {
+	TextInputFieldRef,
+} from "../text-input-field/TextInputFieldRef"
+
+export interface PasswordInputFieldRef extends TextInputFieldRef {
+}

package/src/components/password-input-field/_ghost-icon/GhostIcon.tsx

@@ -0,0 +1,71 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	StyleSheet,
+} from "react-native"
+
+import IconViewOff from "@carbon/icons/svg/32/view--off.svg"
+import IconView from "@carbon/icons/svg/32/view.svg"
+
+import {
+	PositionStyleSheet,
+} from "../../../style-sheets"
+
+import {
+	GhostIcon as ButtonGhostIcon,
+	type GhostIconProps as ButtonGhostIconProps,
+} from "../../button/ghost-icon"
+
+import type {
+	GhostIconProps,
+} from "./GhostIconProps"
+
+import type {
+	GhostIconRef,
+} from "./GhostIconRef"
+
+export const GhostIcon = forwardRef<GhostIconRef, GhostIconProps>(
+	function GhostIcon(
+		{
+			inputSize,
+			secureTextEntry,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		return (
+			<ButtonGhostIcon
+				ref={ ref }
+				{ ...props }
+				size={ mapInputSizeToButtonSize[inputSize] }
+				Icon={ secureTextEntry ? IconView : IconViewOff }
+				style={ [
+					PositionStyleSheet.absolute,
+					styleSheet.ghostIcon,
+					style,
+				] }
+			/>
+		)
+
+	},
+)
+
+const
+	styleSheet =
+		StyleSheet.create({
+			ghostIcon: {
+				top: 0,
+				end: 0,
+			},
+		}),
+
+	mapInputSizeToButtonSize: Record<GhostIconProps["inputSize"], ButtonGhostIconProps["size"]> =
+		{
+			small: "small",
+			medium: "medium",
+			large: "large_productive",
+		}

package/src/components/password-input-field/_ghost-icon/GhostIconProps.ts

@@ -0,0 +1,12 @@
+import type {
+	GhostIconProps as Props,
+} from "../../button/ghost-icon/GhostIconProps"
+
+import type {
+	PasswordInputFieldProps,
+} from "../PasswordInputFieldProps"
+
+export interface GhostIconProps extends Omit<Props, "Icon" | "size"> {
+	inputSize: NonNullable<PasswordInputFieldProps["size"]>,
+	secureTextEntry: boolean,
+}

package/src/components/password-input-field/_ghost-icon/GhostIconRef.ts

@@ -0,0 +1,6 @@
+import type {
+	GhostIconRef as Ref,
+} from "../../button/ghost-icon/GhostIconRef"
+
+export interface GhostIconRef extends Ref {
+}

package/src/components/password-input-field/_ghost-icon/index.ts

@@ -0,0 +1,3 @@
+export * from "./GhostIcon"
+export type * from "./GhostIconProps"
+export type * from "./GhostIconRef"

package/src/components/password-input-field/index.ts

@@ -0,0 +1,3 @@
+export * from "./PasswordInputField"
+export type * from "./PasswordInputFieldProps"
+export type * from "./PasswordInputFieldRef"

package/src/components/password-input-fluid/PasswordInputFluid.tsx

@@ -0,0 +1,59 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	SecureTextEntryControlHook,
+} from "../../_internal/hooks"
+
+import {
+	GhostIcon,
+} from "../password-input-field/_ghost-icon"
+
+import {
+	TextInputFluid,
+} from "../text-input-fluid"
+
+import type {
+	PasswordInputFluidProps,
+} from "./PasswordInputFluidProps"
+
+import type {
+	PasswordInputFluidRef,
+} from "./PasswordInputFluidRef"
+
+export const PasswordInputFluid = forwardRef<PasswordInputFluidRef, PasswordInputFluidProps>(
+	function PasswordInputFluid(
+		{
+			autoComplete = "current-password",
+			secureTextEntry: secureTextEntryProp,
+			blockEndNode,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			[secureTextEntry, toggleSecureTextEntrySelf] =
+				SecureTextEntryControlHook.use(secureTextEntryProp)
+
+		return (
+			<TextInputFluid
+				ref={ ref }
+				{ ...props }
+				autoComplete={ autoComplete }
+				secureTextEntry={ secureTextEntry }
+				blockEndNode={ (<>
+					<GhostIcon
+						inputSize="medium"
+						secureTextEntry={ secureTextEntry }
+						onPress={ toggleSecureTextEntrySelf }
+					/>
+
+					{ blockEndNode }
+				</>) }
+			/>
+		)
+
+	},
+)

package/src/components/password-input-fluid/PasswordInputFluidProps.ts

@@ -0,0 +1,6 @@
+import type {
+	TextInputFluidProps,
+} from "../text-input-fluid/TextInputFluidProps"
+
+export interface PasswordInputFluidProps extends TextInputFluidProps {
+}

package/src/components/password-input-fluid/PasswordInputFluidRef.ts

@@ -0,0 +1,6 @@
+import type {
+	TextInputFluidRef,
+} from "../text-input-fluid/TextInputFluidRef"
+
+export interface PasswordInputFluidRef extends TextInputFluidRef {
+}

package/src/components/password-input-fluid/index.ts

@@ -0,0 +1,3 @@
+export * from "./PasswordInputFluid"
+export type * from "./PasswordInputFluidProps"
+export type * from "./PasswordInputFluidRef"

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

@@ -0,0 +1,221 @@
+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 {
+	CarbonStyleSheet,
+} from "../../carbon-style-sheet"
+
+import {
+	ThemeContext,
+} from "../../contexts"
+
+import {
+	FlexStyleSheet,
+	HeightStyleSheet,
+	PositionStyleSheet,
+	WidthStyleSheet,
+} from "../../style-sheets"
+
+import {
+	Box,
+} from "../box"
+
+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 (
+			<Box
+				{ ...props }
+				aria-label={ ariaLabel || label }
+				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
+				style={ [
+					FlexStyleSheet.flex_row,
+					style,
+				] }
+				ref={ viewRef }
+			>
+				<Pressable
+					{ ...pressableProps }
+					role={ role }
+					disabled={ interactiveState === "disabled" }
+					aria-label={ pressableProps?.["aria-label"] ?? label }
+					onPress={ pressHandler }
+					style={ [
+						PositionStyleSheet.absolute,
+						WidthStyleSheet.w_full,
+						HeightStyleSheet.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,
+					] }
+				/>
+			</Box>
+		)
+
+	},
+)
+
+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,
+			},
+		})