@audira/carbon-react-native 1.0.0-beta.9 → 1.0.0

package/src/components/notification/callout/informational/InformationalProps.ts

@@ -2,7 +2,7 @@ import type {
 	CalloutVariantProps,
 } from "../../_variants/callout"
 
-export interface InformationalProps extends Omit<CalloutVariantProps, "icon"> {
+export interface InformationalProps extends Omit<CalloutVariantProps, "Icon"> {
 	iconProps?: Omit<
 		NonNullable<CalloutVariantProps["iconProps"]>,
 		| "color"

package/src/components/notification/callout/success/SuccessProps.ts

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

package/src/components/notification/callout/warning/WarningProps.ts

@@ -2,7 +2,7 @@ import type {
 	CalloutVariantProps,
 } from "../../_variants/callout"
 
-export interface WarningProps extends Omit<CalloutVariantProps, "icon"> {
+export interface WarningProps extends Omit<CalloutVariantProps, "Icon"> {
 	iconProps?: Omit<
 		NonNullable<CalloutVariantProps["iconProps"]>,
 		| "color"

package/src/components/notification/index.ts

@@ -0,0 +1,14 @@
+import * as Actionable from "./actionable"
+import * as Callout from "./callout"
+import * as Toast from "./toast"
+
+export {
+	Actionable,
+	Callout,
+	Toast,
+}
+
+export * from "./base"
+export * from "./NotificationColor"
+export * from "./subtitle"
+export * from "./subtitle-link"

package/src/components/notification/subtitle/Subtitle.tsx

@@ -3,9 +3,7 @@ import {
 	useContext,
 } from "react"
 
-import {
-	CarbonStyleSheet,
-} from "../../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../../carbon-style-sheet"
 
 import {
 	ThemeContext,

package/src/components/notification/subtitle-link/SubtitleLink.tsx

@@ -3,9 +3,7 @@ import {
 	useContext,
 } from "react"
 
-import {
-	CarbonStyleSheet,
-} from "../../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../../carbon-style-sheet"
 
 import {
 	ThemeContext,

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

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

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

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

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,69 @@
+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 * as CarbonStyleSheet from "../../../carbon-style-sheet"
+
+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={ [
+					CarbonStyleSheet.g.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

@@ -22,19 +22,16 @@ import {
 	GlobalConfigContext,
 } from "../../_internal/contexts"
 
-import {
-	CommonStyleSheet,
-	FlexStyleSheet,
-} from "../../_internal/style-sheets"
-
-import {
-	CarbonStyleSheet,
-} from "../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import {
 	ThemeContext,
 } from "../../contexts"
 
+import {
+	Box,
+} from "../box"
+
 import {
 	FormLabel,
 } from "../form-label"
@@ -115,13 +112,12 @@ export const RadioButton = forwardRef<RadioButtonRef, RadioButtonProps>(
 		}, [])
 
 		return (
-			<View
+			<Box
 				{ ...props }
 				aria-label={ ariaLabel || label }
 				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
 				style={ [
-					FlexStyleSheet.flex_row,
-					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+					CarbonStyleSheet.g.flex_row,
 					style,
 				] }
 				ref={ viewRef }
@@ -133,9 +129,9 @@ export const RadioButton = forwardRef<RadioButtonRef, RadioButtonProps>(
 					aria-label={ pressableProps?.["aria-label"] ?? label }
 					onPress={ pressHandler }
 					style={ [
-						CommonStyleSheet.absolute,
-						CommonStyleSheet.w_full,
-						CommonStyleSheet.h_full,
+						CarbonStyleSheet.g.absolute,
+						CarbonStyleSheet.g.w_full,
+						CarbonStyleSheet.g.h_full,
 						baseStyle.pressable,
 						pressableProps?.style,
 					] }
@@ -169,12 +165,12 @@ export const RadioButton = forwardRef<RadioButtonRef, RadioButtonProps>(
 						],
 					}}
 					style={ [
-						FlexStyleSheet.flex_1,
+						CarbonStyleSheet.g.flex_1,
 						baseStyle.label,
 						formLabelProps?.style,
 					] }
 				/>
-			</View>
+			</Box>
 		)
 
 	},

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

@@ -22,14 +22,16 @@ import {
 import IconWarningAltFilled from "@carbon/icons/svg/32/warning--alt--filled.svg"
 import IconWarningFilled from "@carbon/icons/svg/32/warning--filled.svg"
 
-import {
-	FlexStyleSheet,
-} from "../../_internal/style-sheets"
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import {
 	ThemeContext,
 } from "../../contexts"
 
+import {
+	Box,
+} from "../box"
+
 import {
 	FormHelperText,
 } from "../form-helper-text"
@@ -141,7 +143,7 @@ const Component = forwardRef<RadioButtonGroupRef, RadioButtonGroupProps>(
 		])
 
 		return (
-			<View
+			<Box
 				{ ...props }
 				role={ role }
 				style={ style }
@@ -197,7 +199,7 @@ const Component = forwardRef<RadioButtonGroupRef, RadioButtonGroupProps>(
 						] }
 					/>
 				) }
-			</View>
+			</Box>
 		)
 
 	},
@@ -228,7 +230,7 @@ const
 				flexDirection: "column",
 			},
 			horizontal: {
-				...FlexStyleSheet.flex_wrap,
+				...CarbonStyleSheet.gObject.flex_wrap,
 				flexDirection: "row",
 			},
 		}),

package/src/components/radio-button-input/RadioButtonInput.tsx

@@ -16,14 +16,7 @@ import {
 	type ViewStyle,
 } from "react-native"
 
-import {
-	CommonStyleSheet,
-	FlexStyleSheet,
-} from "../../_internal/style-sheets"
-
-import {
-	CarbonStyleSheet,
-} from "../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import {
 	ThemeContext,
@@ -166,9 +159,9 @@ export const RadioButtonInput = forwardRef<RadioButtonInputRef, RadioButtonInput
 				onFocus={ focusHandler }
 				onPress={ pressHandler }
 				style={ [
-					FlexStyleSheet.items_center,
-					FlexStyleSheet.justify_center,
-					CommonStyleSheet.relative,
+					CarbonStyleSheet.g.items_center,
+					CarbonStyleSheet.g.justify_center,
+					CarbonStyleSheet.g.relative,
 					baseStyle.radioButton,
 					mapInteractiveStateStyle_[`${interactiveState}_${checked}_container`],
 					style,
@@ -177,8 +170,8 @@ export const RadioButtonInput = forwardRef<RadioButtonInputRef, RadioButtonInput
 			>
 				<View
 					style={ [
-						CommonStyleSheet.absolute,
-						CommonStyleSheet.overflow_hidden,
+						CarbonStyleSheet.g.absolute,
+						CarbonStyleSheet.g.overflow_hidden,
 						baseStyle.focusBox,
 						isFocused
 							? carbonStyle.focusBox
@@ -188,7 +181,7 @@ export const RadioButtonInput = forwardRef<RadioButtonInputRef, RadioButtonInput
 
 				<View
 					style={ [
-						FlexStyleSheet.flex_initial,
+						CarbonStyleSheet.g.flex_initial,
 						baseStyle.marker,
 						checked
 							? mapInteractiveStateStyle_[`${interactiveState}_true_marker`]

package/src/components/switch/Switch.tsx

@@ -30,14 +30,7 @@ import {
 	GlobalConfigContext,
 } from "../../_internal/contexts"
 
-import {
-	CommonStyleSheet,
-	FlexStyleSheet,
-} from "../../_internal/style-sheets"
-
-import {
-	CarbonStyleSheet,
-} from "../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import {
 	ThemeContext,
@@ -275,7 +268,7 @@ export const Switch = forwardRef<SwitchRef, SwitchProps>(
 				role={ role }
 				aria-checked={ ariaChecked ?? value }
 				style={ [
-					FlexStyleSheet.justify_center,
+					CarbonStyleSheet.g.justify_center,
 					baseStyle.container,
 					sizeStyle[size],
 					{
@@ -294,8 +287,8 @@ export const Switch = forwardRef<SwitchRef, SwitchProps>(
 			>
 				<Animated.View
 					style={ [
-						FlexStyleSheet.items_center,
-						FlexStyleSheet.justify_center,
+						CarbonStyleSheet.g.items_center,
+						CarbonStyleSheet.g.justify_center,
 						baseStyle.thumb,
 						thumbSizeStyle[size],
 						// thumbAnimatedStyle,
@@ -326,7 +319,7 @@ export const Switch = forwardRef<SwitchRef, SwitchProps>(
 				{ isFocused && (
 					<View
 						style={ [
-							CommonStyleSheet.absolute,
+							CarbonStyleSheet.g.absolute,
 							focusBoxSizeStyle[size],
 							baseStyle.focusBox,
 							baseStyleCarbon.focusBoxBorderColor,