@audira/carbon-react-native 1.0.0-beta.19 → 1.0.0-beta.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@audira/carbon-react-native",
-  "version": "1.0.0-beta.19",
+  "version": "1.0.0-beta.20",
   "license": "MIT",
   "homepage": "https://rakadoank.github.io/carbon-react-native",
   "repository": "https://github.com/RakaDoank/carbon-react-native",

package/src/components/accordion/_Header.tsx

@@ -12,10 +12,6 @@ import {
 	Color,
 } from "@audira/carbon-react-native-elements"
 
-import {
-	FlexStyleSheet,
-} from "../../_internal/style-sheets"
-
 import {
 	CarbonStyleSheet,
 } from "../../carbon-style-sheet"
@@ -24,6 +20,10 @@ import {
 	ThemeContext,
 } from "../../contexts"
 
+import {
+	FlexStyleSheet,
+} from "../../style-sheets"
+
 import type {
 	Size as ButtonSize,
 } from "../button/Size"

package/src/components/accordion/_HeaderBorder.tsx

@@ -12,10 +12,6 @@ import {
 	Spacing,
 } from "@audira/carbon-react-native-elements"
 
-import {
-	CommonStyleSheet,
-} from "../../_internal/style-sheets"
-
 import {
 	CarbonStyleSheet,
 } from "../../carbon-style-sheet"
@@ -24,6 +20,11 @@ import {
 	ThemeContext,
 } from "../../contexts"
 
+import {
+	PositionStyleSheet,
+	WidthStyleSheet,
+} from "../../style-sheets"
+
 export interface HeaderBorderProps {
 	/**
 	 * https://carbondesignsystem.com/components/accordion/style/#flush-alignment
@@ -42,7 +43,7 @@ export function HeaderBorder({
 	return (
 		<View
 			style={ [
-				CommonStyleSheet.absolute,
+				PositionStyleSheet.absolute,
 				style.borderBox,
 				carbonStyle.borderBox,
 				flushAlignment
@@ -50,7 +51,7 @@ export function HeaderBorder({
 						left: Spacing.spacing_05,
 						right: Spacing.spacing_05,
 					}
-					: CommonStyleSheet.w_full,
+					: WidthStyleSheet.w_full,
 				styleProp,
 			] }
 		/>

package/src/components/accordion/_Item.tsx

@@ -21,8 +21,8 @@ import {
 } from "../../_internal/contexts"
 
 import {
-	CommonStyleSheet,
-} from "../../_internal/style-sheets"
+	DirectionStyleSheet,
+} from "../../style-sheets"
 
 import {
 	Collapsible,
@@ -151,7 +151,7 @@ export const Item = forwardRef<AccordionItemRef, AccordionItemProps>(
 					open={ open }
 					dir={ globalConfigContext.rtl ? "rtl" : undefined }
 					contentContainerStyle={ [
-						globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+						globalConfigContext.rtl ? DirectionStyleSheet.rtl : undefined,
 						accordionContext.collapsibleContentContainerStyle,
 						style.panel,
 					] }

package/src/components/box/Box.tsx

@@ -0,0 +1,57 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	View,
+} from "react-native"
+
+import {
+	GlobalConfigContext,
+} from "../../_internal/contexts"
+
+import {
+	DirectionStyleSheet,
+} from "../../style-sheets"
+
+import type {
+	BoxProps,
+} from "./BoxProps"
+
+import type {
+	BoxRef,
+} from "./BoxRef"
+
+export const Box = forwardRef<BoxRef, BoxProps>(
+	function Box(
+		{
+			dir: dirProp,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			globalConfigContext =
+				useContext(GlobalConfigContext),
+
+			dir =
+				dirProp ??
+				globalConfigContext.rtl ? "rtl" : "ltr"
+
+		return (
+			<View
+				ref={ ref }
+				{ ...props }
+				dir={ dir }
+				style={ [
+					dir == "rtl" ? DirectionStyleSheet.rtl : undefined,
+					style,
+				] }
+			/>
+		)
+
+	},
+)

package/src/components/box/BoxProps.ts

@@ -0,0 +1,6 @@
+import type {
+	ViewProps,
+} from "react-native"
+
+export interface BoxProps extends ViewProps {
+}

package/src/components/box/BoxRef.ts

@@ -0,0 +1,6 @@
+import type {
+	View,
+} from "react-native"
+
+export interface BoxRef extends View {
+}

package/src/components/box/index.ts

@@ -0,0 +1,3 @@
+export * from "./Box"
+export type * from "./BoxProps"
+export type * from "./BoxRef"

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

@@ -20,8 +20,10 @@ import {
 } from "../../../_internal/contexts"
 
 import {
+	DirectionStyleSheet,
 	FlexStyleSheet,
-} from "../../../_internal/style-sheets"
+	OverflowStyleSheet,
+} from "../../../style-sheets"
 
 import {
 	Text,
@@ -86,8 +88,8 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 				style={ [
 					FlexStyleSheet.flex_row,
 					FlexStyleSheet.justify_between,
-					baseStyle.container,
-					globalConfigContext.rtl ? baseStyle.containerRtl : undefined,
+					OverflowStyleSheet.overflow_hidden,
+					globalConfigContext.rtl ? DirectionStyleSheet.rtl : undefined,
 					mapContainerStyle[`${!!text}`][`${!!Icon || !!iconNode}`],
 					sizeStyle[size],
 					mapStyleInButtonGroup[`${!!buttonGroupContext.vertical}`][`${!!buttonGroupContext.fluid}`],
@@ -149,13 +151,6 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 const
 	baseStyle =
 		StyleSheet.create({
-			container: {
-				overflow: "hidden",
-			},
-			containerRtl: {
-				direction: "rtl",
-			},
-
 			/**
 			 * Start Padding
 			 */

package/src/components/button-group/ButtonGroup.tsx

@@ -19,9 +19,9 @@ import {
 } from "../../_internal/contexts"
 
 import {
-	CommonStyleSheet,
+	DirectionStyleSheet,
 	FlexStyleSheet,
-} from "../../_internal/style-sheets"
+} from "../../style-sheets"
 
 import type {
 	ButtonGroupProps,
@@ -59,7 +59,7 @@ export const ButtonGroup = forwardRef<ButtonGroupRef, ButtonGroupProps>(
 				mapStyleFluid[`${!!fluid}`],
 
 			rtlStyle =
-				globalConfigContext.rtl && !vertical ? CommonStyleSheet.rtl : undefined
+				globalConfigContext.rtl && !vertical ? DirectionStyleSheet.rtl : undefined
 
 		return (
 			<ButtonGroupContext.Provider

package/src/components/checkbox/Checkbox.tsx

@@ -18,15 +18,6 @@ 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"
@@ -35,6 +26,17 @@ import {
 	ThemeContext,
 } from "../../contexts"
 
+import {
+	FlexStyleSheet,
+	HeightStyleSheet,
+	PositionStyleSheet,
+	WidthStyleSheet,
+} from "../../style-sheets"
+
+import {
+	Box,
+} from "../box"
+
 import {
 	CheckboxInput,
 	type CheckboxInputInteractiveState,
@@ -73,7 +75,6 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(
 			formLabelProps,
 			pressableProps,
 			style,
-			dir,
 			...props
 		},
 		forwardedRef,
@@ -82,9 +83,6 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(
 		useContext(ThemeContext)
 
 		const
-			globalConfigContext =
-				useContext(GlobalConfigContext),
-
 			checkboxInputRef =
 				useRef<CheckboxInputRef>(null),
 
@@ -121,13 +119,11 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(
 		}, [])
 
 		return (
-			<View
+			<Box
 				{ ...props }
 				aria-label={ ariaLabel || label }
-				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
 				style={ [
 					FlexStyleSheet.flex_row,
-					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
 					style,
 				] }
 				ref={ viewRef }
@@ -139,9 +135,9 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(
 					aria-label={ pressableProps?.["aria-label"] ?? label }
 					onPress={ pressHandler }
 					style={ [
-						CommonStyleSheet.absolute,
-						CommonStyleSheet.w_full,
-						CommonStyleSheet.h_full,
+						PositionStyleSheet.absolute,
+						WidthStyleSheet.w_full,
+						HeightStyleSheet.h_full,
 						baseStyle.pressable,
 						pressableProps?.style,
 					] }
@@ -179,7 +175,7 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(
 						formLabelProps?.style,
 					] }
 				/>
-			</View>
+			</Box>
 		)
 
 	},

package/src/components/checkbox/CheckboxProps.ts

@@ -1,8 +1,11 @@
 import type {
 	PressableProps,
-	ViewProps,
 } from "react-native"
 
+import type {
+	BoxProps,
+} from "../box"
+
 import type {
 	CheckboxInputProps,
 } from "../checkbox-input"
@@ -11,7 +14,7 @@ import type {
 	FormLabelProps,
 } from "../form-label"
 
-export interface CheckboxProps extends Omit<ViewProps, "children"> {
+export interface CheckboxProps extends Omit<BoxProps, "children"> {
 	defaultChecked?: CheckboxInputProps["defaultChecked"],
 	checked?: CheckboxInputProps["checked"],
 	interactiveState?: CheckboxInputProps["interactiveState"],
@@ -33,6 +36,6 @@ export interface CheckboxProps extends Omit<ViewProps, "children"> {
 		| "style"
 		| "onPress"
 	> & {
-		style?: ViewProps["style"],
+		style?: BoxProps["style"],
 	},
 }

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

@@ -5,8 +5,6 @@ import {
 
 import {
 	StyleSheet,
-	View,
-	type ViewStyle,
 } from "react-native"
 
 import {
@@ -22,17 +20,17 @@ import type {
 } from "react-native-svg"
 
 import {
-	GlobalConfigContext,
-} from "../../_internal/contexts"
+	ThemeContext,
+} from "../../contexts"
 
 import {
-	CommonStyleSheet,
 	FlexStyleSheet,
-} from "../../_internal/style-sheets"
+} from "../../style-sheets"
 
 import {
-	ThemeContext,
-} from "../../contexts"
+	Box,
+	type BoxProps,
+} from "../box"
 
 import {
 	Checkbox,
@@ -64,25 +62,14 @@ const Component = forwardRef<CheckboxGroupRef, CheckboxGroupProps>(
 			helperTextModeIcon = true,
 			formHelperTextProps,
 			children,
-			style,
-			dir,
 			...props
 		},
 		ref,
 	) {
 
-		const
-			globalConfigContext =
-				useContext(GlobalConfigContext)
-
 		return (
-			<View
+			<Box
 				{ ...props }
-				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
-				style={ [
-					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
-					style,
-				] }
 				ref={ ref }
 			>
 				<FormLabel
@@ -90,14 +77,14 @@ const Component = forwardRef<CheckboxGroupRef, CheckboxGroupProps>(
 					style={ baseStyle.legend }
 				/>
 
-				<View
+				<Box
 					style={ [
 						baseStyle.wrapper,
 						wrapperOrientationStyle[orientation],
 					] }
 				>
 					{ children }
-				</View>
+				</Box>
 
 				{ !!helperText && (
 					<FormHelperText
@@ -117,7 +104,7 @@ const Component = forwardRef<CheckboxGroupRef, CheckboxGroupProps>(
 						] }
 					/>
 				) }
-			</View>
+			</Box>
 		)
 
 	},
@@ -142,16 +129,11 @@ const
 			},
 		}),
 
-	wrapperOrientationStyle =
-		StyleSheet.create<Record<NonNullable<CheckboxGroupProps["orientation"]>, ViewStyle>>({
-			vertical: {
-				flexDirection: "column",
-			},
-			horizontal: {
-				...FlexStyleSheet.flex_wrap,
-				flexDirection: "row",
-			},
-		}),
+	wrapperOrientationStyle: Record<NonNullable<CheckboxGroupProps["orientation"]>, BoxProps["style"]> =
+		{
+			vertical: FlexStyleSheet.flex_col,
+			horizontal: [FlexStyleSheet.flex_row, FlexStyleSheet.flex_wrap],
+		},
 
 	mapIconErrorFillColor: Record<ThemeContext["colorScheme"], string> =
 		{

package/src/components/checkbox-input/CheckboxInput.tsx

@@ -23,11 +23,6 @@ import {
 import IconCheckmark from "@carbon/icons/svg/32/checkmark.svg"
 import IconSubtract from "@carbon/icons/svg/32/subtract.svg"
 
-import {
-	CommonStyleSheet,
-	FlexStyleSheet,
-} from "../../_internal/style-sheets"
-
 import {
 	CarbonStyleSheet,
 } from "../../carbon-style-sheet"
@@ -36,6 +31,12 @@ import {
 	ThemeContext,
 } from "../../contexts"
 
+import {
+	FlexStyleSheet,
+	OverflowStyleSheet,
+	PositionStyleSheet,
+} from "../../style-sheets"
+
 import type {
 	CheckboxInputInteractiveState,
 } from "./CheckboxInputInteractiveState"
@@ -197,7 +198,7 @@ export const CheckboxInput = forwardRef<CheckboxInputRef, CheckboxInputProps>(
 				style={ [
 					FlexStyleSheet.items_center,
 					FlexStyleSheet.justify_center,
-					CommonStyleSheet.relative,
+					PositionStyleSheet.relative,
 					baseStyle.checkbox,
 					getInteractiveStateStyle(interactiveState, checked),
 					style,
@@ -206,8 +207,8 @@ export const CheckboxInput = forwardRef<CheckboxInputRef, CheckboxInputProps>(
 			>
 				<View
 					style={ [
-						CommonStyleSheet.absolute,
-						CommonStyleSheet.overflow_hidden,
+						PositionStyleSheet.absolute,
+						OverflowStyleSheet.overflow_hidden,
 						baseStyle.focusBox,
 						isFocused
 							? carbonStyle.focusBox

package/src/components/collapsible/Collapsible.tsx

@@ -20,9 +20,10 @@ import {
 } from "@audira/carbon-react-native-elements"
 
 import {
-	CommonStyleSheet,
 	FlexStyleSheet,
-} from "../../_internal/style-sheets"
+	OverflowStyleSheet,
+	WidthStyleSheet,
+} from "../../style-sheets"
 
 import type {
 	CollapsibleProps,
@@ -225,7 +226,7 @@ export const Collapsible = forwardRef<CollapsibleRef, CollapsibleProps>(
 			<Animated.View
 				{ ...props }
 				style={ [
-					CommonStyleSheet.overflow_hidden,
+					OverflowStyleSheet.overflow_hidden,
 					positionView === "absolute"
 						? {
 							height: heightAnimated.current,
@@ -237,7 +238,7 @@ export const Collapsible = forwardRef<CollapsibleRef, CollapsibleProps>(
 			>
 				<View
 					style={ [
-						CommonStyleSheet.w_full,
+						WidthStyleSheet.w_full,
 						{
 							position: positionView,
 						},

package/src/components/form-helper-text/FormHelperText.tsx

@@ -5,18 +5,8 @@ import {
 
 import {
 	StyleSheet,
-	View,
 } from "react-native"
 
-import {
-	GlobalConfigContext,
-} from "../../_internal/contexts"
-
-import {
-	CommonStyleSheet,
-	FlexStyleSheet,
-} from "../../_internal/style-sheets"
-
 import {
 	CarbonStyleSheet,
 } from "../../carbon-style-sheet"
@@ -25,6 +15,14 @@ import {
 	ThemeContext,
 } from "../../contexts"
 
+import {
+	FlexStyleSheet,
+} from "../../style-sheets"
+
+import {
+	Box,
+} from "../box"
+
 import {
 	Text,
 } from "../text"
@@ -46,7 +44,6 @@ export const FormHelperText = forwardRef<FormHelperTextRef, FormHelperTextProps>
 			textTrailing,
 			textProps,
 			style,
-			dir,
 			...props
 		},
 		ref,
@@ -54,19 +51,13 @@ export const FormHelperText = forwardRef<FormHelperTextRef, FormHelperTextProps>
 
 		useContext(ThemeContext)
 
-		const
-			globalConfigContext =
-				useContext(GlobalConfigContext)
-
 		return (
-			<View
+			<Box
 				{ ...props }
 				ref={ ref }
-				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
 				style={ [
 					FlexStyleSheet.flex_row,
 					baseStyle.container,
-					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
 					style,
 				] }
 			>
@@ -84,7 +75,7 @@ export const FormHelperText = forwardRef<FormHelperTextRef, FormHelperTextProps>
 				</Text>
 
 				{ textTrailing }
-			</View>
+			</Box>
 		)
 
 	},

package/src/components/form-helper-text/FormHelperTextProps.ts

@@ -1,12 +1,12 @@
 import type {
-	ViewProps,
-} from "react-native"
+	BoxProps,
+} from "../box"
 
 import type {
 	TextProps,
 } from "../text"
 
-export interface FormHelperTextProps extends Omit<ViewProps, "children"> {
+export interface FormHelperTextProps extends Omit<BoxProps, "children"> {
 	error?: boolean,
 	text: string,
 	textLeading?: React.ReactNode,

package/src/components/form-label/FormLabel.tsx

@@ -1,21 +1,18 @@
 import {
 	forwardRef,
-	useContext,
 } from "react"
 
 import {
 	StyleSheet,
-	View,
 } from "react-native"
 
 import {
-	GlobalConfigContext,
-} from "../../_internal/contexts"
+	FlexStyleSheet,
+} from "../../style-sheets"
 
 import {
-	CommonStyleSheet,
-	FlexStyleSheet,
-} from "../../_internal/style-sheets"
+	Box,
+} from "../box"
 
 import {
 	Text,
@@ -37,25 +34,18 @@ export const FormLabel = forwardRef<FormLabelRef, FormLabelProps>(
 			labelTrailing,
 			textProps,
 			style,
-			dir,
 			...props
 		},
 		ref,
 	) {
 
-		const
-			globalConfigContext =
-				useContext(GlobalConfigContext)
-
 		return (
-			<View
+			<Box
 				{ ...props }
 				ref={ ref }
-				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
 				style={ [
 					FlexStyleSheet.flex_row,
 					baseStyle.gap,
-					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
 					style,
 				] }
 			>
@@ -70,7 +60,7 @@ export const FormLabel = forwardRef<FormLabelRef, FormLabelProps>(
 				</Text>
 
 				{ labelTrailing }
-			</View>
+			</Box>
 		)
 
 	},

package/src/components/form-label/FormLabelProps.ts

@@ -1,12 +1,12 @@
 import type {
-	ViewProps,
-} from "react-native"
+	BoxProps,
+} from "../box"
 
 import type {
 	TextProps,
 } from "../text"
 
-export interface FormLabelProps extends Omit<ViewProps, "children"> {
+export interface FormLabelProps extends Omit<BoxProps, "children"> {
 	label: string,
 	labelLeading?: React.ReactNode,
 	labelTrailing?: React.ReactNode,