@audira/carbon-react-native 1.0.3 → 1.0.5

package/package.json

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

package/src/_internal/contexts/global-config/GlobalConfigContext.ts

@@ -2,6 +2,10 @@ import {
 	createContext,
 } from "react"
 
+import {
+	I18nManager,
+} from "react-native"
+
 import type {
 	NotificationColor,
 } from "../../../components/notification/NotificationColor"
@@ -26,5 +30,5 @@ export const GlobalConfigContext = createContext<GlobalConfigContext>({
 	android_buttonRippleEffect: true,
 	notificationColor: "high_contrast",
 	toastDuration: 5000,
-	rtl: false,
+	rtl: I18nManager.isRTL,
 })

package/src/_internal/providers/global-config/GlobalConfigProvider.tsx

@@ -1,3 +1,7 @@
+import {
+	I18nManager,
+} from "react-native"
+
 import {
 	GlobalConfigContext,
 } from "../../contexts/global-config"
@@ -6,14 +10,20 @@ import type {
 	GlobalConfigProviderProps,
 } from "./GlobalConfigProviderProps"
 
+const isRtl = I18nManager.isRTL
+
 export function GlobalConfigProvider({
-	android_buttonRippleEffect,
-	notificationColor,
-	toastDuration,
-	rtl,
+	android_buttonRippleEffect = true,
+	notificationColor = "high_contrast",
+	toastDuration = 5000,
+	rtl: rtlProp,
 	children,
 }: GlobalConfigProviderProps) {
 
+	const
+		rtl =
+			rtlProp ?? isRtl
+
 	return (
 		<GlobalConfigContext.Provider
 			value={{

package/src/_internal/providers/global-config/GlobalConfigProviderProps.ts

@@ -2,6 +2,6 @@ import type {
 	GlobalConfigContext,
 } from "../../contexts"
 
-export interface GlobalConfigProviderProps extends GlobalConfigContext {
+export interface GlobalConfigProviderProps extends Partial<GlobalConfigContext> {
 	children?: React.ReactNode,
 }

package/src/carbon-react-native/CarbonReactNative.tsx

@@ -9,15 +9,15 @@ import type {
 } from "./CarbonReactNativeProps"
 
 export function CarbonReactNative({
-	// GlobalConfigProviderProps
-	android_buttonRippleEffect = true,
-	notificationColor = "high_contrast",
-	toastDuration = 5000,
-	rtl = false,
-
-	// ThemeProviderProps
+	// +++ GlobalConfigProviderProps +++
+	android_buttonRippleEffect,
+	notificationColor,
+	toastDuration,
+	rtl,
+	// --- GlobalConfigProviderProps ---
+	// +++ ThemeProviderProps +++
 	colorScheme,
-
+	// --- ThemeProviderProps ---
 	children,
 }: CarbonReactNativeProps) {
 

package/src/carbon-react-native/CarbonReactNativeProps.ts

@@ -3,5 +3,5 @@ import type {
 	ThemeProviderProps,
 } from "../_internal/providers"
 
-export interface CarbonReactNativeProps extends Partial<GlobalConfigProviderProps>, ThemeProviderProps {
+export interface CarbonReactNativeProps extends GlobalConfigProviderProps, ThemeProviderProps {
 }

package/src/carbon-style-sheet/color.ts

@@ -1,5 +1,5 @@
 // Generated
-// Sun, 29 Mar 2026 10:05:23 GMT
+// Sat, 04 Apr 2026 18:25:11 GMT
 
 export const background = "#f4f4f4|#000000"
 export const background_active = "rgba(141,141,141,0.5)|rgba(141,141,141,0.4)"

package/src/carbon-style-sheet/g/font.ts

@@ -1,5 +1,5 @@
 // Generated
-// Sun, 29 Mar 2026 10:05:23 GMT
+// Sat, 04 Apr 2026 18:25:11 GMT
 
 // To support cross platforms, we are mapping the `fontFamily` value to its PostScript name,
 // instead of the `fontWeight` number with a single font family name like in Web// Giving a `fontWeight` number will not work.

package/src/carbon-style-sheet/g/spacing.ts

@@ -1,5 +1,5 @@
 // Generated
-// Sun, 29 Mar 2026 10:05:23 GMT
+// Sat, 04 Apr 2026 18:25:11 GMT
 
 import {
 	StyleSheet,

package/src/carbon-style-sheet/g/typography.ts

@@ -1,5 +1,5 @@
 // Generated
-// Sun, 29 Mar 2026 10:05:23 GMT
+// Sat, 04 Apr 2026 18:25:11 GMT
 
 import {
 	StyleSheet,

package/src/carbon-style-sheet/g-object/font.ts

@@ -1,5 +1,5 @@
 // Generated
-// Sun, 29 Mar 2026 10:05:23 GMT
+// Sat, 04 Apr 2026 18:25:11 GMT
 
 // To support cross platforms, we are mapping the `fontFamily` value to its PostScript name,
 // instead of the `fontWeight` number with a single font family name like in Web// Giving a `fontWeight` number will not work.

package/src/carbon-style-sheet/g-object/spacing.ts

@@ -1,5 +1,5 @@
 // Generated
-// Sun, 29 Mar 2026 10:05:23 GMT
+// Sat, 04 Apr 2026 18:25:11 GMT
 
 import type {
 	ViewStyle,

package/src/carbon-style-sheet/g-object/typography.ts

@@ -1,5 +1,5 @@
 // Generated
-// Sun, 29 Mar 2026 10:05:23 GMT
+// Sat, 04 Apr 2026 18:25:11 GMT
 
 import type {
 	TextStyle,

package/src/components/box/Box.tsx

@@ -21,6 +21,12 @@ import type {
 	BoxRef,
 } from "./BoxRef"
 
+/**
+ * This component is a basic React Native `View` to solve
+ * RTL support for component level.
+ * 
+ * You may use this if your app provides custom localization options.
+ */
 export const Box = forwardRef<BoxRef, BoxProps>(
 	function Box(
 		{

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

@@ -73,7 +73,7 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 				getIconSize(size),
 
 			iconMarginStyle =
-				mapIconMarginStyle[`${!!globalConfigContext.rtl}`][`${!!text}`]
+				mapIconMarginStyle[`${!!text}`]
 
 		return (
 			<Pressable
@@ -172,11 +172,8 @@ const
 				maxHeight: 48,
 			},
 
-			iconMarginLTR: {
-				marginLeft: Spacing.spacing_07,
-			},
-			iconMarginRTL: {
-				marginRight: Spacing.spacing_07,
+			iconMargin: {
+				marginStart: Spacing.spacing_07,
 			},
 
 			inlineLoading: {
@@ -241,19 +238,11 @@ const
 		},
 
 	mapIconMarginStyle: {
-		[RTL in `${boolean}`]: {
-			[HasText in `${boolean}`]: ViewProps["style"]
-		}
+		[HasText in `${boolean}`]: ViewProps["style"]
 	} =
 		{
-			false: {
-				false: null,
-				true: baseStyle.iconMarginLTR,
-			},
-			true: {
-				false: null,
-				true: baseStyle.iconMarginRTL,
-			},
+			false: null,
+			true: baseStyle.iconMargin,
 		},
 
 	mapStyleInButtonGroup: {

package/src/components/button/ghost/Ghost.tsx

@@ -3,15 +3,13 @@ import {
 	useContext,
 } from "react"
 
-import {
-	StyleSheet,
-	type TextStyle,
-	type ViewStyle,
+import type {
+	TextStyle,
+	ViewStyle,
 } from "react-native"
 
 import {
 	Color,
-	Spacing,
 } from "@audira/carbon-react-native-elements"
 
 import * as CarbonStyleSheet from "../../../carbon-style-sheet"
@@ -38,7 +36,6 @@ export const Ghost = forwardRef<GhostRef, GhostProps>(
 	function Ghost(
 		{
 			text,
-			iconProps,
 			...props
 		},
 		ref,
@@ -71,10 +68,6 @@ export const Ghost = forwardRef<GhostRef, GhostProps>(
 					},
 					icon: mapIconColor[themeContext.colorScheme],
 				}}
-				iconProps={{
-					...iconProps,
-					style: [mapIconPLByText[`${!!text}`], iconProps?.style],
-				}}
 			/>
 		)
 
@@ -125,19 +118,6 @@ const
 			},
 		}),
 
-	style =
-		StyleSheet.create({
-			iconPL8: {
-				paddingLeft: Spacing.spacing_03,
-			},
-		}),
-
-	mapIconPLByText: Record<string, typeof style["iconPL8"] | null> =
-		{
-			false: null,
-			true: style.iconPL8,
-		},
-
 	mapIconColor: Record<ThemeContext["colorScheme"], Record<BaseColorState, string>> =
 		{
 			gray_10: {

package/src/components/index.ts

@@ -1,10 +1,12 @@
 import * as Button from "./button"
 import * as Notification from "./notification"
+import * as TableToolbarButton from "./table-toolbar-button"
 import * as Toggle from "./toggle"
 
 export {
 	Button,
 	Notification,
+	TableToolbarButton,
 	Toggle,
 }
 
@@ -30,6 +32,19 @@ export * from "./radio-button"
 export * from "./radio-button-group"
 export * from "./radio-button-input"
 export * from "./switch"
+export * from "./table"
+export * from "./table-batch-action-bar"
+export * from "./table-batch-action-bar-button"
+export * from "./table-cell"
+export * from "./table-cell-header"
+export * from "./table-cell-icon"
+export * from "./table-cell-text"
+export * from "./table-header"
+export * from "./table-toolbar"
+export * from "./table-toolbar-button"
+export * from "./table-toolbar-switcher"
+export * from "./table-row"
+export * from "./table-row-header"
 export * from "./text"
 export * from "./text-area"
 export * from "./text-area-field"

package/src/components/layer/Layer.tsx

@@ -46,11 +46,10 @@ export const Layer = forwardRef<LayerRef, LayerProps>(
 			layerContextLevel =
 				useContext(LayerContext),
 
-			level =
-				levelProp ?? layerContextLevel,
-
 			value =
-				MathHelper.clamp(level + 1, Color.Layer.MinLevel, Color.Layer.MaxLevel)
+				typeof levelProp != "number"
+					? MathHelper.clamp(layerContextLevel + 1, Color.Layer.MinLevel, Color.Layer.MaxLevel)
+					: levelProp
 
 		return (
 			<LayerContext.Provider value={ value }>

package/src/components/layer/LayerProps.ts

@@ -8,8 +8,11 @@ import type {
 
 export interface LayerProps extends ViewProps {
 	/**
-	 * Specify the layer level and override any existing levels based on hierarchy
-	 * @default 1
+	 * Specify the layer level and override any existing levels based on hierarchy.
+	 * @default
+	 * ```
+	 * level + 1
+	 * ```
 	 */
 	level?: ColorLayerLevel,
 	withBackground?: boolean,

package/src/components/scroll-view/ScrollView.tsx

@@ -0,0 +1,62 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	ScrollView as ReactNativeScrollView,
+} from "react-native"
+
+import {
+	GlobalConfigContext,
+} from "../../_internal/contexts"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import type {
+	ScrollViewProps,
+} from "./ScrollViewProps"
+
+/**
+ * This component is a basic React Native `ScrollView` to solve
+ * RTL support for component level.
+ * 
+ * You may use this if your app provides custom localization options.
+ */
+export const ScrollView = forwardRef<ReactNativeScrollView, ScrollViewProps>(
+	function ScrollView(
+		{
+			dir: dirProp,
+			style,
+			contentContainerStyle,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			globalConfigContext =
+				useContext(GlobalConfigContext),
+
+			dir =
+				dirProp ??
+				globalConfigContext.rtl ? "rtl" : "ltr"
+
+		return (
+			<ReactNativeScrollView
+				ref={ ref }
+				{ ...props }
+				dir={ dir }
+				style={ [
+					dir == "rtl" ? CarbonStyleSheet.g.rtl : undefined,
+					style,
+				] }
+				contentContainerStyle={ [
+					dir == "rtl" ? CarbonStyleSheet.g.rtl : undefined,
+					contentContainerStyle,
+				] }
+			/>
+		)
+
+	},
+) as unknown as typeof ReactNativeScrollView & ReactNativeScrollView

package/src/components/scroll-view/ScrollViewProps.ts

@@ -0,0 +1,6 @@
+import type {
+	ScrollViewProps as Props,
+} from "react-native"
+
+export interface ScrollViewProps extends Props {
+}

package/src/components/scroll-view/index.ts

@@ -0,0 +1,2 @@
+export * from "./ScrollView"
+export type * from "./ScrollViewProps"

package/src/components/table/Table.tsx

@@ -0,0 +1,80 @@
+import {
+	forwardRef,
+} from "react"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import {
+	Box,
+} from "../box/Box"
+
+import {
+	ScrollView,
+} from "../scroll-view/ScrollView"
+
+import type {
+	TableProps,
+} from "./TableProps"
+
+import type {
+	TableRef,
+} from "./TableRef"
+
+import {
+	TableContext,
+} from "./_TableContext"
+
+export const Table = forwardRef<TableRef, TableProps>(
+	function Table(
+		{
+			rowSize = "large",
+			header,
+			footer,
+			horizontalScrollViewProps,
+			verticalScrollViewProps,
+			children,
+			...props
+		},
+		ref,
+	) {
+
+		return (
+			<TableContext.Provider
+				value={{
+					rowSize,
+				}}
+			>
+				<Box
+					ref={ ref }
+					{ ...props }
+				>
+					{ header }
+
+					<ScrollView
+						{ ...horizontalScrollViewProps }
+						horizontal={ horizontalScrollViewProps?.horizontal ?? true }
+						nestedScrollEnabled={ horizontalScrollViewProps?.nestedScrollEnabled ?? true }
+						contentContainerStyle={ [
+							CarbonStyleSheet.g.grow,
+							horizontalScrollViewProps?.contentContainerStyle,
+						] }
+					>
+						<ScrollView
+							{ ...verticalScrollViewProps }
+							style={ [
+								CarbonStyleSheet.g.flex_auto,
+								verticalScrollViewProps?.style,
+							] }
+							role="table"
+						>
+							{ children }
+						</ScrollView>
+					</ScrollView>
+
+					{ footer }
+				</Box>
+			</TableContext.Provider>
+		)
+
+	},
+)

package/src/components/table/TableProps.ts

@@ -0,0 +1,39 @@
+import type {
+	ScrollViewProps,
+} from "react-native"
+
+import type {
+	BoxProps,
+} from "../box/BoxProps"
+
+import type {
+	TableRowSize,
+} from "../table-row/TableRowSize"
+
+export interface TableProps extends BoxProps {
+	/**
+	 * @default "large"
+	 * @see https://carbondesignsystem.com/components/data-table/style/#rows
+	 */
+	rowSize?: TableRowSize,
+	horizontalScrollViewProps?: Omit<
+		ScrollViewProps,
+		| "children"
+	>,
+	verticalScrollViewProps?: Omit<
+		ScrollViewProps,
+		| "children"
+	>,
+	/**
+	 * Add React node after start of the table element.
+	 * 
+	 * You may use this for `TableHeader`, `TableToolbar`, `TableBatchActionBar`, or all of them.
+	 */
+	header?: React.ReactNode,
+	/**
+	 * Add React node before end of the table element
+	 * 
+	 * You may use this for `Pagination` component.
+	 */
+	footer?: React.ReactNode,
+}

package/src/components/table/TableRef.ts

@@ -0,0 +1,6 @@
+import type {
+	BoxRef,
+} from "../box";
+
+export interface TableRef extends BoxRef {
+}

package/src/components/table/_TableContext.ts

@@ -0,0 +1,15 @@
+import {
+	createContext,
+} from "react"
+
+import type {
+	TableRowSize,
+} from "../table-row/TableRowSize"
+
+export interface TableContext {
+	rowSize: TableRowSize,
+}
+
+export const TableContext = createContext<TableContext>({
+	rowSize: "large",
+})

package/src/components/table/index.ts

@@ -0,0 +1,3 @@
+export * from "./Table"
+export type * from "./TableProps"
+export type * from "./TableRef"