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

package/src/components/text/Text.tsx

@@ -4,29 +4,16 @@ import {
 } from "react"
 
 import {
-	StyleSheet,
 	Text as Core,
 	type StyleProp,
 	type TextStyle,
 } from "react-native"
 
-import {
-	Typography,
-	type TypeSetsToken,
-} from "@audira/carbon-react-native-elements"
-
 import {
 	GlobalConfigContext,
 } from "../../_internal/contexts"
 
-import {
-	CommonStyleSheet,
-	TextStyleSheet,
-} from "../../_internal/style-sheets"
-
-import {
-	CarbonStyleSheet,
-} from "../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import {
 	ThemeContext,
@@ -65,8 +52,8 @@ export const Text = forwardRef<TextRef, TextProps>(
 				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
 				style={ [
 					carbonStyle.text,
-					getFontStyle(type, italic, weight),
-					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+					getTextStyle(type, italic, weight),
+					globalConfigContext.rtl ? CarbonStyleSheet.g.rtl : undefined,
 					style,
 				] }
 				ref={ ref }
@@ -76,77 +63,89 @@ export const Text = forwardRef<TextRef, TextProps>(
 	},
 )
 
-type TypeSetsStyle = Record<TypeSetsToken, TextStyle>
 type WeightType = NonNullable<TextProps["weight"]>
 
 const
-	mapFamilyStyle: {
-		[Weight in WeightType]: TextStyle
+	mapWeightToFamilyStyle: {
+		[Weight in WeightType]: {
+			fontFamily: string,
+		}
 	} =
 		{
-			100: TextStyleSheet.thin,
-			200: TextStyleSheet.extralight,
-			300: TextStyleSheet.light,
-			400: TextStyleSheet.normal,
-			500: TextStyleSheet.medium,
-			600: TextStyleSheet.semibold,
-			700: TextStyleSheet.bold,
-			800: TextStyleSheet.bold,
-			900: TextStyleSheet.bold,
+			100: CarbonStyleSheet.g.font_thin,
+			200: CarbonStyleSheet.g.font_extralight,
+			300: CarbonStyleSheet.g.font_light,
+			400: CarbonStyleSheet.g.font_regular,
+			500: CarbonStyleSheet.g.font_medium,
+			600: CarbonStyleSheet.g.font_semibold,
+			700: CarbonStyleSheet.g.font_bold,
+			800: CarbonStyleSheet.g.font_bold,
+			900: CarbonStyleSheet.g.font_bold,
 		},
 
-	mapFamilyItalicStyle: {
-		[Weight in WeightType]: TextStyle
+	mapWeightItalicFamilyStyle: {
+		[Weight in WeightType]: {
+			fontFamily: string,
+		}
 	} =
 		{
-			100: TextStyleSheet.thin_italic,
-			200: TextStyleSheet.extralight_italic,
-			300: TextStyleSheet.light_italic,
-			400: TextStyleSheet.normal_italic,
-			500: TextStyleSheet.medium_italic,
-			600: TextStyleSheet.semibold_italic,
-			700: TextStyleSheet.bold_italic,
-			800: TextStyleSheet.bold_italic,
-			900: TextStyleSheet.bold_italic,
+			100: CarbonStyleSheet.g.font_thin_italic,
+			200: CarbonStyleSheet.g.font_extralight_italic,
+			300: CarbonStyleSheet.g.font_light_italic,
+			400: CarbonStyleSheet.g.font_regular_italic,
+			500: CarbonStyleSheet.g.font_medium_italic,
+			600: CarbonStyleSheet.g.font_semibold_italic,
+			700: CarbonStyleSheet.g.font_bold_italic,
+			800: CarbonStyleSheet.g.font_bold_italic,
+			900: CarbonStyleSheet.g.font_bold_italic,
 		},
 
-	createTypeSetsStyle = (italic?: boolean) => {
-		return StyleSheet.create<TypeSetsStyle>(
-			Object.entries(Typography.TypeSets).reduce((
-				accumulator: TypeSetsStyle,
-				[key_, val],
-			) => {
-				const
-					key =
-						key_ as keyof TypeSetsStyle
-
-				accumulator[key] = {
-					...val,
-					...(
-						italic
-							? mapFamilyItalicStyle[val.fontWeight]
-							: mapFamilyStyle[val.fontWeight]
-					),
-				}
-				return accumulator
-			}, {} as TypeSetsStyle),
-		)
-	},
+	mapTypeStyleSheet =
+		{
+			body_01: CarbonStyleSheet.g.text_body_01,
+			body_02: CarbonStyleSheet.g.text_body_02,
+			body_compact_01: CarbonStyleSheet.g.text_body_compact_01,
+			body_compact_02: CarbonStyleSheet.g.text_body_compact_02,
+			code_01: CarbonStyleSheet.g.text_code_01,
+			code_02: CarbonStyleSheet.g.text_code_02,
+			heading_01: CarbonStyleSheet.g.text_heading_01,
+			heading_02: CarbonStyleSheet.g.text_heading_02,
+			heading_03: CarbonStyleSheet.g.text_heading_03,
+			heading_04: CarbonStyleSheet.g.text_heading_04,
+			heading_05: CarbonStyleSheet.g.text_heading_05,
+			heading_06: CarbonStyleSheet.g.text_heading_06,
+			heading_07: CarbonStyleSheet.g.text_heading_07,
+			heading_compact_01: CarbonStyleSheet.g.text_heading_compact_01,
+			heading_compact_02: CarbonStyleSheet.g.text_heading_compact_02,
+			helper_text_01: CarbonStyleSheet.g.text_helper_text_01,
+			helper_text_02: CarbonStyleSheet.g.text_helper_text_02,
+			label_01: CarbonStyleSheet.g.text_label_01,
+			label_02: CarbonStyleSheet.g.text_label_02,
+			legal_01: CarbonStyleSheet.g.text_legal_01,
+			legal_02: CarbonStyleSheet.g.text_legal_02,
+		} as const satisfies {
+			[Type in NonNullable<TextProps["type"]>]: TextStyle
+		},
+
+	mapFontFamilyToWeightNumber: Record<string, NonNullable<TextProps["weight"]>> =
+		{
+			[CarbonStyleSheet.gObject.font_thin.fontFamily]: 100,
+			[CarbonStyleSheet.gObject.font_extralight.fontFamily]: 200,
+			[CarbonStyleSheet.gObject.font_light.fontFamily]: 300,
+			[CarbonStyleSheet.gObject.font_regular.fontFamily]: 400,
+			[CarbonStyleSheet.gObject.font_medium.fontFamily]: 500,
+			[CarbonStyleSheet.gObject.font_semibold.fontFamily]: 600,
+			[CarbonStyleSheet.gObject.font_bold.fontFamily]: 700,
+		},
 
 	carbonStyle =
 		CarbonStyleSheet.create({
 			text: {
 				color: CarbonStyleSheet.color.text_primary,
 			},
-		}),
+		})
 
-	typeSetsStyle =
-		createTypeSetsStyle(),
-
-	typeSetsItalicStyle =
-		createTypeSetsStyle(true)
-
-function getFontStyle(
+function getTextStyle(
 	type?: TextProps["type"],
 	italic?: boolean,
 	overrideWeight?: TextProps["weight"],
@@ -155,17 +154,26 @@ function getFontStyle(
 		return null
 	}
 
+	const
+		typeStyleSheet =
+			mapTypeStyleSheet[type]
+
 	if(italic && overrideWeight) {
-		return [typeSetsItalicStyle[type], mapFamilyItalicStyle[overrideWeight]]
+		return [typeStyleSheet, mapWeightItalicFamilyStyle[overrideWeight]]
 	}
 
 	if(italic) {
-		return typeSetsItalicStyle[type]
+		return [
+			typeStyleSheet,
+			mapWeightItalicFamilyStyle[
+				mapFontFamilyToWeightNumber[typeStyleSheet.fontFamily]!
+			],
+		]
 	}
 
 	if(overrideWeight) {
-		return [typeSetsStyle[type], mapFamilyStyle[overrideWeight]]
+		return [typeStyleSheet, mapWeightToFamilyStyle[overrideWeight]]
 	}
 
-	return typeSetsStyle[type]
+	return typeStyleSheet
 }

package/src/components/text-area/TextArea.tsx

@@ -83,7 +83,6 @@ export const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
 			readOnly,
 			returnKeyType,
 			enterKeyHint,
-			secureTextEntry,
 			selectTextOnFocus,
 			selection,
 			selectionColor,
@@ -201,7 +200,6 @@ export const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
 					readOnly={ readOnly }
 					returnKeyType={ returnKeyType }
 					enterKeyHint={ enterKeyHint }
-					secureTextEntry={ secureTextEntry }
 					selectTextOnFocus={ selectTextOnFocus }
 					selection={ selection }
 					selectionColor={ selectionColor }

package/src/components/text-area-field/TextAreaFieldProps.ts

@@ -2,5 +2,5 @@ import type {
 	TextInputFieldProps,
 } from "../text-input-field/TextInputFieldProps"
 
-export interface TextAreaFieldProps extends Omit<TextInputFieldProps, "size" | "multiline"> {
+export interface TextAreaFieldProps extends Omit<TextInputFieldProps, "size" | "multiline" | "secureTextEntry"> {
 }

package/src/components/text-area-fluid/TextAreaFluid.tsx

@@ -15,9 +15,7 @@ import {
 import IconWarningAltFilled16 from "@carbon/icons/svg/32/warning--alt--filled.svg"
 import IconWarningFilled16 from "@carbon/icons/svg/32/warning--filled.svg"
 
-import {
-	FlexStyleSheet,
-} from "../../_internal/style-sheets"
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import {
 	ThemeContext,
@@ -81,7 +79,7 @@ export const TextAreaFluid = forwardRef<TextAreaFluidRef, TextAreaFluidProps>(
 						<FormHelperText
 							text={ helperText }
 							style={ [
-								FlexStyleSheet.flex_initial,
+								CarbonStyleSheet.g.flex_initial,
 								styleSheet.helperText,
 							] }
 							textTrailing={

package/src/components/text-input/TextInput.tsx

@@ -45,6 +45,8 @@ export const TextInput = forwardRef<TextInputRef, TextInputProps>(
 			helperText,
 
 			// hoist the `TextInputFieldProps`
+			blockStartNode,
+			blockEndNode,
 			size = "medium",
 			interactiveState = "normal",
 			textInputStyle,
@@ -167,6 +169,8 @@ export const TextInput = forwardRef<TextInputRef, TextInputProps>(
 
 				<TextInputField
 					ref={ textInputFieldRef }
+					blockStartNode={ blockStartNode }
+					blockEndNode={ blockEndNode }
 					size={ size }
 					interactiveState={ interactiveState }
 					textInputStyle={ textInputStyle }

package/src/components/text-input/TextInputProps.ts

@@ -5,8 +5,6 @@ import type {
 export interface TextInputProps extends Omit<
 	TextInputFieldProps,
 	| "hideInteractiveStateIcon"
-	| "blockStartNodes"
-	| "blockEndNodes"
 > {
 	label: string,
 	helperText?: string,

package/src/components/text-input-field/TextInputField.tsx

@@ -25,8 +25,10 @@ import IconWarningAltFilled from "@carbon/icons/svg/32/warning--alt--filled.svg"
 import IconWarningFilled from "@carbon/icons/svg/32/warning--filled.svg"
 
 import {
-	CarbonStyleSheet,
-} from "../../carbon-style-sheet"
+	GlobalConfigContext,
+} from "../../_internal/contexts"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import {
 	ThemeContext,
@@ -36,6 +38,10 @@ import type {
 	ThemeType,
 } from "../../types"
 
+import {
+	Box,
+} from "../box"
+
 import {
 	LayerContext,
 } from "../layer"
@@ -152,6 +158,9 @@ export const TextInputField = forwardRef<TextInputFieldRef, TextInputFieldProps>
 	) {
 
 		const
+			globalConfigContext =
+				useContext(GlobalConfigContext),
+
 			themeContext =
 				useContext(ThemeContext),
 
@@ -211,7 +220,7 @@ export const TextInputField = forwardRef<TextInputFieldRef, TextInputFieldProps>
 		}, [])
 
 		return (
-			<Animated.View
+			<AnimatedBox
 				ref={ ref }
 				{ ...viewProps }
 				style={ [
@@ -317,7 +326,9 @@ export const TextInputField = forwardRef<TextInputFieldRef, TextInputFieldProps>
 						height={ 16 }
 						fill={ mapIconInvalidColor[themeContext.colorScheme] }
 						style={ [
+							CarbonStyleSheet.g.absolute,
 							styleSheet.icon,
+							mapStyleSheetIconInteractiveStatePosition[`${globalConfigContext.rtl}`],
 							iconBySizeStyleSheet[size],
 						] }
 					/>
@@ -327,20 +338,25 @@ export const TextInputField = forwardRef<TextInputFieldRef, TextInputFieldProps>
 						height={ 16 }
 						fill={ mapIconWarningColor[themeContext.colorScheme] }
 						style={ [
+							CarbonStyleSheet.g.absolute,
 							styleSheet.icon,
+							mapStyleSheetIconInteractiveStatePosition[`${globalConfigContext.rtl}`],
 							iconBySizeStyleSheet[size],
 						] }
 					/>
 				) : undefined }
 
 				{ blockEndNode }
-			</Animated.View>
+			</AnimatedBox>
 		)
 
 	},
 )
 
 const
+	AnimatedBox =
+		Animated.createAnimatedComponent(Box),
+
 	styleSheet =
 		StyleSheet.create({
 			textInputField: {
@@ -350,11 +366,23 @@ const
 			},
 			icon: {
 				pointerEvents: "none",
-				position: "absolute",
+			},
+			iconLtr: {
 				right: Spacing.spacing_05,
 			},
+			iconRtl: {
+				left: Spacing.spacing_05,
+			},
 		}),
 
+	mapStyleSheetIconInteractiveStatePosition: {
+		[RTL in `${boolean}`]: ViewStyle
+	} =
+		{
+			false: styleSheet.iconLtr,
+			true: styleSheet.iconRtl,
+		},
+
 	textInputFieldSizeStyleSheet =
 		StyleSheet.create<Record<TextInputFieldSize, ViewStyle>>({
 			small: {

package/src/components/text-input-field/_rn-text-input/RNTextInput.tsx

@@ -20,9 +20,7 @@ import {
 	GlobalConfigContext,
 } from "../../../_internal/contexts"
 
-import {
-	CommonStyleSheet,
-} from "../../../_internal/style-sheets"
+import * as CarbonStyleSheet from "../../../carbon-style-sheet"
 
 import {
 	ThemeContext,
@@ -74,7 +72,7 @@ export const RNTextInput = forwardRef<RNTextInputRef, RNTextInputProps>(
 				style={ [
 					styleSheet.rnTextInput as unknown as never, // FIXME: i don't know the correct type
 					mapStateStyleSheet[themeContext.colorScheme][interactiveState],
-					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+					globalConfigContext.rtl ? CarbonStyleSheet.g.rtl : undefined,
 					style,
 				] }
 			/>

package/src/components/text-input-fluid/TextInputFluid.tsx

@@ -15,9 +15,7 @@ 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,
@@ -55,6 +53,8 @@ export const TextInputFluid = forwardRef<TextInputFluidRef, TextInputFluidProps>
 			interactiveState,
 			style,
 			textInputStyle,
+			blockStartNode,
+			blockEndNode,
 			...textInputFieldProps
 		},
 		ref,
@@ -71,18 +71,19 @@ export const TextInputFluid = forwardRef<TextInputFluidRef, TextInputFluidProps>
 				size="medium"
 				interactiveState={ interactiveState }
 				hideInteractiveStateIcon
-				blockStartNode={
+				blockStartNode={ (<>
 					<FormLabel
 						label={ label }
 						style={ styleSheet.label }
 					/>
-				}
-				blockEndNode={
-					!!helperText?.length && (
+					{ blockStartNode }
+				</>) }
+				blockEndNode={ (<>
+					{ !!helperText && (
 						<FormHelperText
 							text={ helperText }
 							style={ [
-								FlexStyleSheet.flex_initial,
+								CarbonStyleSheet.g.flex_initial,
 								styleSheet.helperText,
 							] }
 							textTrailing={
@@ -101,8 +102,9 @@ export const TextInputFluid = forwardRef<TextInputFluidRef, TextInputFluidProps>
 								) : undefined
 							}
 						/>
-					)
-				}
+					) }
+					{ blockEndNode }
+				</>) }
 				style={ [
 					styleSheet.textInputFluid,
 					helperText?.length

package/src/components/text-input-fluid/TextInputFluidProps.ts

@@ -6,8 +6,6 @@ export interface TextInputFluidProps extends Omit<
 	TextInputFieldProps,
 	| "size"
 	| "hideInteractiveStateIcon"
-	| "blockStartNodes"
-	| "blockEndNodes"
 > {
 	label: string,
 	helperText?: string,

package/src/components/toggle/base/Base.tsx

@@ -23,15 +23,16 @@ import {
 	GlobalConfigContext,
 } from "../../../_internal/contexts"
 
-import {
-	CommonStyleSheet,
-	FlexStyleSheet,
-} from "../../../_internal/style-sheets"
+import * as CarbonStyleSheet from "../../../carbon-style-sheet"
 
 import {
 	ThemeContext,
 } from "../../../contexts"
 
+import {
+	Box,
+} from "../../box"
+
 import {
 	FormLabel,
 } from "../../form-label"
@@ -115,14 +116,13 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 		}, [])
 
 		return (
-			<View
+			<Box
 				{ ...viewProps }
 				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
 				style={ [
-					FlexStyleSheet.flex_row,
-					FlexStyleSheet.flex_wrap,
-					FlexStyleSheet.items_center,
-					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+					CarbonStyleSheet.g.flex_row,
+					CarbonStyleSheet.g.flex_wrap,
+					CarbonStyleSheet.g.items_center,
 					style,
 				] }
 				ref={ viewRef }
@@ -135,9 +135,9 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 					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,
 					] }
@@ -155,7 +155,7 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 							],
 						}}
 						style={ [
-							CommonStyleSheet.w_full,
+							CarbonStyleSheet.g.w_full,
 							baseStyle.label,
 							formLabelProps?.style,
 						] }
@@ -194,7 +194,7 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 						{ actionText }
 					</Text>
 				) }
-			</View>
+			</Box>
 		)
 
 	},

package/src/helpers/color/get-color-scheme.ts

@@ -16,4 +16,5 @@ const
 		{
 			light: "gray_10",
 			dark: "gray_100",
+			unspecified: "gray_10",
 		}

package/src/index.ts

@@ -1,5 +1,10 @@
+import * as CarbonStyleSheet from "./carbon-style-sheet"
+
+export {
+	CarbonStyleSheet,
+}
+
 export * from "./carbon-react-native"
-export * from "./carbon-style-sheet"
 export * from "./components"
 export * from "./const"
 export * from "./contexts"