@audira/carbon-react-native 1.0.4 → 1.0.6

package/package.json

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

package/src/{components/accordion/_chevron/Chevron.tsx → _internal/components/animated-collapsible-chevron/AnimatedCollapsibleChevron.tsx}

@@ -5,29 +5,51 @@ import {
 
 import {
 	Animated as RNAnimated,
+	Easing,
 	type EasingFunction,
 } from "react-native"
 
-import ChevronDown from "@carbon/icons/svg/32/chevron--down.svg"
-
 import {
 	Motion,
-} from "../_motion"
+} from "@audira/carbon-react-native-elements"
+
+import ChevronDown from "@carbon/icons/svg/32/chevron--down.svg"
 
 import type {
-	ChevronProps,
-} from "./ChevronProps"
+	AnimatedCollapsibleChevronProps,
+} from "./AnimatedCollapsibleChevronProps"
 
 const
 	AnimatedSvgChevronDown =
 		RNAnimated.createAnimatedComponent(ChevronDown)
 
-export function Chevron({
+export function AnimatedCollapsibleChevron({
+	motion = {
+		toOpen: {
+			duration: Motion.Duration.fast_02,
+			easing: Easing.bezier(
+				Motion.Easing.entrance.productive.x1,
+				Motion.Easing.entrance.productive.y1,
+				Motion.Easing.entrance.productive.x2,
+				Motion.Easing.entrance.productive.y2,
+			),
+		},
+		toClose: {
+			duration: Motion.Duration.fast_02,
+			easing: Easing.bezier(
+				Motion.Easing.exit.productive.x1,
+				Motion.Easing.exit.productive.y1,
+				Motion.Easing.exit.productive.x2,
+				Motion.Easing.exit.productive.y2,
+			),
+		},
+	},
 	open,
 	color,
 	size,
 	style,
-}: ChevronProps) {
+	...props
+}: AnimatedCollapsibleChevronProps) {
 
 	const
 		isMounted =
@@ -51,8 +73,8 @@ export function Chevron({
 					rotateZ.current,
 					{
 						toValue: 1,
-						duration: Motion.toOpen.duration,
-						easing: Motion.toOpen.easing as EasingFunction,
+						duration: motion.toOpen.duration,
+						easing: motion.toOpen.easing as EasingFunction,
 						useNativeDriver: true,
 					},
 				).start()
@@ -61,8 +83,8 @@ export function Chevron({
 					rotateZ.current,
 					{
 						toValue: 0,
-						duration: Motion.toClose.duration,
-						easing: Motion.toClose.easing as EasingFunction,
+						duration: motion.toClose.duration,
+						easing: motion.toClose.easing as EasingFunction,
 						useNativeDriver: true,
 					},
 				).start()
@@ -71,12 +93,14 @@ export function Chevron({
 			isMounted.current = true
 		}
 	}, [
+		motion,
 		open,
 		rotateZ,
 	])
 
 	return (
 		<AnimatedSvgChevronDown
+			{ ...props }
 			fill={ color }
 			width={ size }
 			height={ size }

package/src/_internal/components/animated-collapsible-chevron/AnimatedCollapsibleChevronProps.ts

@@ -0,0 +1,14 @@
+import type {
+	SvgProps,
+} from "react-native-svg"
+
+import type {
+	CollapsibleProps,
+} from "../../../components/collapsible/CollapsibleProps"
+
+export interface AnimatedCollapsibleChevronProps extends Omit<SvgProps, "fill"> {
+	motion?: NonNullable<CollapsibleProps["motion"]>,
+	open: boolean,
+	color: string,
+	size: number,
+}

package/src/_internal/components/animated-collapsible-chevron/index.ts

@@ -0,0 +1,2 @@
+export * from "./AnimatedCollapsibleChevron"
+export type * from "./AnimatedCollapsibleChevronProps"

package/src/_internal/components/index.ts

@@ -0,0 +1 @@
+export * from "./animated-collapsible-chevron"

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
-// Fri, 03 Apr 2026 19:29:52 GMT
+// Sun, 19 Apr 2026 08:37:05 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/flex.ts

@@ -86,6 +86,12 @@ export const { items_end } = StyleSheet.create({
 	} as const,
 })
 
+export const { items_stretch } = StyleSheet.create({
+	items_stretch: {
+		alignItems: "stretch",
+	} as const,
+})
+
 export const { content_start } = StyleSheet.create({
 	content_start: {
 		alignContent: "flex-start",

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

@@ -1,5 +1,5 @@
 // Generated
-// Fri, 03 Apr 2026 19:29:52 GMT
+// Sun, 19 Apr 2026 08:37:05 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/index.ts

@@ -8,4 +8,5 @@ export * from "./position"
 export * from "./spacing"
 export * from "./text"
 export * from "./typography"
+export * from "./visibility"
 export * from "./width"

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

@@ -1,5 +1,5 @@
 // Generated
-// Fri, 03 Apr 2026 19:29:52 GMT
+// Sun, 19 Apr 2026 08:37:05 GMT
 
 import {
 	StyleSheet,
@@ -1370,3 +1370,108 @@ export const { gap_y_13 } = StyleSheet.create({
 		rowGap: 160,
 	} as const,
 })
+export const { m_00 } = StyleSheet.create({
+	m_00: {
+		margin: 0,
+	} as const,
+})
+export const { mx_00 } = StyleSheet.create({
+	mx_00: {
+		marginHorizontal: 0,
+	} as const,
+})
+export const { my_00 } = StyleSheet.create({
+	my_00: {
+		marginVertical: 0,
+	} as const,
+})
+export const { ms_00 } = StyleSheet.create({
+	ms_00: {
+		marginStart: 0,
+	} as const,
+})
+export const { me_00 } = StyleSheet.create({
+	me_00: {
+		marginEnd: 0,
+	} as const,
+})
+export const { mt_00 } = StyleSheet.create({
+	mt_00: {
+		marginTop: 0,
+	} as const,
+})
+export const { mr_00 } = StyleSheet.create({
+	mr_00: {
+		marginRight: 0,
+	} as const,
+})
+export const { mb_00 } = StyleSheet.create({
+	mb_00: {
+		marginBottom: 0,
+	} as const,
+})
+export const { ml_00 } = StyleSheet.create({
+	ml_00: {
+		marginLeft: 0,
+	} as const,
+})
+export const { p_00 } = StyleSheet.create({
+	p_00: {
+		padding: 0,
+	} as const,
+})
+export const { px_00 } = StyleSheet.create({
+	px_00: {
+		paddingHorizontal: 0,
+	} as const,
+})
+export const { py_00 } = StyleSheet.create({
+	py_00: {
+		paddingVertical: 0,
+	} as const,
+})
+export const { ps_00 } = StyleSheet.create({
+	ps_00: {
+		paddingStart: 0,
+	} as const,
+})
+export const { pe_00 } = StyleSheet.create({
+	pe_00: {
+		paddingEnd: 0,
+	} as const,
+})
+export const { pt_00 } = StyleSheet.create({
+	pt_00: {
+		paddingTop: 0,
+	} as const,
+})
+export const { pr_00 } = StyleSheet.create({
+	pr_00: {
+		paddingRight: 0,
+	} as const,
+})
+export const { pb_00 } = StyleSheet.create({
+	pb_00: {
+		paddingBottom: 0,
+	} as const,
+})
+export const { pl_00 } = StyleSheet.create({
+	pl_00: {
+		paddingLeft: 0,
+	} as const,
+})
+export const { gap_00 } = StyleSheet.create({
+	gap_00: {
+		gap: 0,
+	} as const,
+})
+export const { gap_x_00 } = StyleSheet.create({
+	gap_x_00: {
+		columnGap: 0,
+	} as const,
+})
+export const { gap_y_00 } = StyleSheet.create({
+	gap_y_00: {
+		rowGap: 0,
+	} as const,
+})

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

@@ -1,5 +1,5 @@
 // Generated
-// Fri, 03 Apr 2026 19:29:52 GMT
+// Sun, 19 Apr 2026 08:37:05 GMT
 
 import {
 	StyleSheet,

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

@@ -0,0 +1,32 @@
+import {
+	Platform,
+	StyleSheet,
+} from "react-native"
+
+export const { invisible } = StyleSheet.create({
+	invisible: {
+		...Platform.select({
+			web: {
+				visibility: "hidden",
+			} as const,
+			default: {
+				opacity: 0,
+				pointerEvents: "none",
+			} as const,
+		}),
+	},
+})
+
+export const { visible } = StyleSheet.create({
+	visible: {
+		...Platform.select({
+			web: {
+				visibility: "visible",
+			} as const,
+			default: {
+				opacity: 1,
+				pointerEvents: "auto",
+			} as const,
+		}),
+	},
+})

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

@@ -60,6 +60,10 @@ export const items_end = {
 	alignItems: "flex-end",
 } as const satisfies ViewStyle
 
+export const items_stretch = {
+	alignItems: "stretch",
+} as const satisfies ViewStyle
+
 export const content_start = {
 	alignContent: "flex-start",
 } as const satisfies ViewStyle

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

@@ -1,5 +1,5 @@
 // Generated
-// Fri, 03 Apr 2026 19:29:52 GMT
+// Sun, 19 Apr 2026 08:37:05 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/index.ts

@@ -8,4 +8,5 @@ export * from "./position"
 export * from "./spacing"
 export * from "./text"
 export * from "./typography"
+export * from "./visibility"
 export * from "./width"

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

@@ -1,5 +1,5 @@
 // Generated
-// Fri, 03 Apr 2026 19:29:52 GMT
+// Sun, 19 Apr 2026 08:37:05 GMT
 
 import type {
 	ViewStyle,
@@ -1097,3 +1097,87 @@ export const gap_y_13 = {
 	rowGap: 160,
 } as const satisfies ViewStyle
 
+export const m_00 = {
+	margin: 0,
+} as const satisfies ViewStyle
+
+export const mx_00 = {
+	marginHorizontal: 0,
+} as const satisfies ViewStyle
+
+export const my_00 = {
+	marginVertical: 0,
+} as const satisfies ViewStyle
+
+export const ms_00 = {
+	marginStart: 0,
+} as const satisfies ViewStyle
+
+export const me_00 = {
+	marginEnd: 0,
+} as const satisfies ViewStyle
+
+export const mt_00 = {
+	marginTop: 0,
+} as const satisfies ViewStyle
+
+export const mr_00 = {
+	marginRight: 0,
+} as const satisfies ViewStyle
+
+export const mb_00 = {
+	marginBottom: 0,
+} as const satisfies ViewStyle
+
+export const ml_00 = {
+	marginLeft: 0,
+} as const satisfies ViewStyle
+
+export const p_00 = {
+	padding: 0,
+} as const satisfies ViewStyle
+
+export const px_00 = {
+	paddingHorizontal: 0,
+} as const satisfies ViewStyle
+
+export const py_00 = {
+	paddingVertical: 0,
+} as const satisfies ViewStyle
+
+export const ps_00 = {
+	paddingStart: 0,
+} as const satisfies ViewStyle
+
+export const pe_00 = {
+	paddingEnd: 0,
+} as const satisfies ViewStyle
+
+export const pt_00 = {
+	paddingTop: 0,
+} as const satisfies ViewStyle
+
+export const pr_00 = {
+	paddingRight: 0,
+} as const satisfies ViewStyle
+
+export const pb_00 = {
+	paddingBottom: 0,
+} as const satisfies ViewStyle
+
+export const pl_00 = {
+	paddingLeft: 0,
+} as const satisfies ViewStyle
+
+export const gap_00 = {
+	gap: 0,
+} as const satisfies ViewStyle
+
+export const gap_x_00 = {
+	columnGap: 0,
+} as const satisfies ViewStyle
+
+export const gap_y_00 = {
+	rowGap: 0,
+} as const satisfies ViewStyle
+

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

@@ -1,5 +1,5 @@
 // Generated
-// Fri, 03 Apr 2026 19:29:52 GMT
+// Sun, 19 Apr 2026 08:37:05 GMT
 
 import type {
 	TextStyle,

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

@@ -0,0 +1,23 @@
+import {
+	Platform,
+} from "react-native"
+
+export const invisible = Platform.select({
+	web: {
+		visibility: "hidden",
+	} as const,
+	default: {
+		opacity: 0,
+		pointerEvents: "none",
+	} as const,
+})
+
+export const visible = Platform.select({
+	web: {
+		visibility: "visible",
+	} as const,
+	default: {
+		opacity: 1,
+		pointerEvents: "auto",
+	} as const,
+})

package/src/components/accordion/AccordionItemRef.ts

@@ -3,8 +3,8 @@ import type {
 } from "react-native"
 
 import type {
-	ItemRefBase,
-} from "./_ItemRefBase"
+	AccordionItemRefBase,
+} from "./AccordionItemRefBase"
 
-export interface AccordionItemRef extends View, ItemRefBase {
+export interface AccordionItemRef extends View, AccordionItemRefBase {
 }

package/src/components/accordion/AccordionItemRefBase.ts

@@ -0,0 +1,10 @@
+export interface AccordionItemRefBase {
+	/**
+	 * The current open value.
+	 */
+	readonly open: boolean,
+	/**
+	 * This method does nothing if `open` component prop is defined
+	 */
+	setOpen: (value: boolean | ((value: boolean) => boolean)) => void,
+}

package/src/components/accordion/_Header.tsx

@@ -12,6 +12,10 @@ import {
 	Color,
 } from "@audira/carbon-react-native-elements"
 
+import {
+	AnimatedCollapsibleChevron,
+} from "../../_internal/components"
+
 import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import {
@@ -41,8 +45,8 @@ import {
 } from "./_HeaderBorder"
 
 import {
-	Chevron,
-} from "./_chevron"
+	Motion,
+} from "./_motion"
 
 export function Header({
 	size = "medium",
@@ -185,7 +189,8 @@ const
 	) => React.ReactNode =
 		(open, iconColorState, iconSize, iconStyle) => {
 			return (
-				<Chevron
+				<AnimatedCollapsibleChevron
+					motion={ Motion }
 					open={ open }
 					color={ iconColorState }
 					size={ iconSize }