@audira/carbon-react-native 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@audira/carbon-react-native",
-  "version": "1.0.5",
+  "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/carbon-style-sheet/color.ts

@@ -1,5 +1,5 @@
 // Generated
-// Sat, 04 Apr 2026 18:25:11 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
-// Sat, 04 Apr 2026 18:25:11 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
-// Sat, 04 Apr 2026 18:25:11 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
-// Sat, 04 Apr 2026 18:25:11 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
-// Sat, 04 Apr 2026 18:25:11 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
-// Sat, 04 Apr 2026 18:25:11 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
-// Sat, 04 Apr 2026 18:25:11 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 }

package/src/components/accordion/_Item.tsx

@@ -38,14 +38,14 @@ import type {
 	AccordionItemRef,
 } from "./AccordionItemRef"
 
+import type {
+	AccordionItemRefBase,
+} from "./AccordionItemRefBase"
+
 import {
 	Header,
 } from "./_Header"
 
-import type {
-	ItemRefBase,
-} from "./_ItemRefBase"
-
 import {
 	Context,
 } from "./_context"
@@ -79,14 +79,13 @@ export const Item = forwardRef<AccordionItemRef, AccordionItemProps>(
 			ref =
 				useRef({
 					allowOnChangeEffect: false,
-					open: !!defaultOpen,
 				}),
 
 			viewRef =
 				useRef<View>(null),
 
 			[openSelf, setOpenSelf] =
-				useState(ref.current.open),
+				useState(!!defaultOpen),
 
 			controlled =
 				typeof openProp !== "undefined",
@@ -107,26 +106,28 @@ export const Item = forwardRef<AccordionItemRef, AccordionItemProps>(
 				])
 
 		useImperativeHandle(forwardedRef, () => {
-			return Object.assign<View, ItemRefBase>(
+			return Object.assign<View, AccordionItemRefBase>(
 				(viewRef.current ?? {
 				}) as View,
 				{
 					get open() {
-						return ref.current.open
+						return open
 					},
 					setOpen(value) {
 						if(!controlled) {
+							let openNext: boolean
 							if(typeof value === "boolean") {
-								ref.current.open = value
+								openNext = value
 							} else {
-								ref.current.open = value(ref.current.open)
+								openNext = value(open)
 							}
-							setOpenSelf(ref.current.open)
+							setOpenSelf(openNext)
 						}
 					},
 				},
 			)
 		}, [
+			open,
 			controlled,
 		])
 
@@ -148,11 +149,13 @@ export const Item = forwardRef<AccordionItemRef, AccordionItemProps>(
 					motion={ Motion }
 					open={ open }
 					dir={ globalConfigContext.rtl ? "rtl" : undefined }
-					contentContainerStyle={ [
-						globalConfigContext.rtl ? CarbonStyleSheet.g.rtl : undefined,
-						accordionContext.collapsibleContentContainerStyle,
-						style.panel,
-					] }
+					contentContainerProps={{
+						style: [
+							globalConfigContext.rtl ? CarbonStyleSheet.g.rtl : undefined,
+							accordionContext.collapsibleContentContainerStyle,
+							style.panel,
+						],
+					}}
 				>
 					{ children }
 				</Collapsible>

package/src/components/accordion/_context.ts

@@ -13,7 +13,7 @@ import type {
 export interface Context {
 	size?: AccordionHeaderProps["size"],
 	flushAlignment?: AccordionHeaderProps["flushAlignment"],
-	collapsibleContentContainerStyle?: CollapsibleProps["contentContainerStyle"],
+	collapsibleContentContainerStyle?: NonNullable<CollapsibleProps["contentContainerProps"]>["style"],
 }
 
 export const Context = createContext<Context>({

package/src/components/accordion/_motion.ts

@@ -10,7 +10,7 @@ import type {
 	CollapsibleProps,
 } from "../collapsible/CollapsibleProps"
 
-export const Motion: NonNullable<CollapsibleProps["motion"]> =
+export const Motion =
 	{
 		toOpen: {
 			duration: Motion_.Duration.fast_02,
@@ -24,4 +24,4 @@ export const Motion: NonNullable<CollapsibleProps["motion"]> =
 		toClose: {
 			duration: 0,
 		},
-	}
+	} as const satisfies NonNullable<CollapsibleProps["motion"]>

package/src/components/accordion/index.ts

@@ -1,7 +1,8 @@
 export * from "./Accordion"
-export * from "./AccordionHeaderProps"
-export * from "./AccordionItemProps"
-export * from "./AccordionItemRef"
-export * from "./AccordionProps"
-export * from "./AccordionRef"
-export * from "./AccordionSize"
+export type * from "./AccordionHeaderProps"
+export type * from "./AccordionItemProps"
+export type * from "./AccordionItemRef"
+export type * from "./AccordionItemRefBase"
+export type * from "./AccordionProps"
+export type * from "./AccordionRef"
+export type * from "./AccordionSize"

package/src/components/checkbox/Checkbox.tsx

@@ -47,9 +47,8 @@ import type {
 } from "./CheckboxRef"
 
 import type {
-	RefBase,
-} from "./_RefBase"
-
+	CheckboxRefBase,
+} from "./CheckboxRefBase"
 
 export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(
 	function Checkbox(
@@ -95,12 +94,12 @@ export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(
 				])
 
 		useImperativeHandle(forwardedRef, () => {
-			return Object.assign<View, RefBase>(
+			return Object.assign<View, CheckboxRefBase>(
 				(viewRef.current ?? {
 				}) as View,
 				{
 					get checked() {
-						return checkboxInputRef.current!.checked
+						return checkboxInputRef.current?.checked ?? false
 					},
 					setChecked(value_) {
 						checkboxInputRef.current?.setChecked(value_)