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

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

@@ -0,0 +1,43 @@
+import type {
+	ViewStyle,
+} from "react-native"
+
+export const text_center = {
+	textAlign: "center",
+} as const satisfies ViewStyle
+
+export const text_left = {
+	textAlign: "left",
+} as const satisfies ViewStyle
+
+export const text_right = {
+	textAlign: "right",
+} as const satisfies ViewStyle
+
+export const underline = {
+	textDecorationLine: "underline",
+} as const satisfies ViewStyle
+
+export const line_through = {
+	textDecorationLine: "line-through",
+} as const satisfies ViewStyle
+
+export const no_underline = {
+	textDecorationLine: "none",
+} as const satisfies ViewStyle
+
+export const align_auto = {
+	verticalAlign: "auto",
+} as const satisfies ViewStyle
+
+export const align_top = {
+	verticalAlign: "top",
+} as const satisfies ViewStyle
+
+export const align_middle = {
+	verticalAlign: "middle",
+} as const satisfies ViewStyle
+
+export const align_bottom = {
+	verticalAlign: "bottom",
+} as const satisfies ViewStyle

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

@@ -0,0 +1,154 @@
+// Generated
+// Fri, 13 Mar 2026 18:21:07 GMT
+
+import type {
+	TextStyle,
+} from "react-native"
+
+export const text_body_01 = {
+	fontSize: 14,
+	lineHeight: 20,
+	fontFamily: "IBMPlexSans-Regular",
+	letterSpacing: 0.16,
+} as const satisfies TextStyle
+
+export const text_body_02 = {
+	fontSize: 16,
+	lineHeight: 24,
+	fontFamily: "IBMPlexSans-Regular",
+	letterSpacing: 0,
+} as const satisfies TextStyle
+
+export const text_body_compact_01 = {
+	fontSize: 14,
+	lineHeight: 18,
+	fontFamily: "IBMPlexSans-Regular",
+	letterSpacing: 0.16,
+} as const satisfies TextStyle
+
+export const text_body_compact_02 = {
+	fontSize: 16,
+	lineHeight: 22,
+	fontFamily: "IBMPlexSans-Regular",
+	letterSpacing: 0,
+} as const satisfies TextStyle
+
+export const text_code_01 = {
+	fontSize: 12,
+	lineHeight: 16,
+	fontFamily: "IBMPlexSans-Regular",
+	letterSpacing: 0.32,
+} as const satisfies TextStyle
+
+export const text_code_02 = {
+	fontSize: 14,
+	lineHeight: 20,
+	fontFamily: "IBMPlexSans-Regular",
+	letterSpacing: 0.32,
+} as const satisfies TextStyle
+
+export const text_heading_01 = {
+	fontSize: 14,
+	lineHeight: 20,
+	fontFamily: "IBMPlexSans-SemiBold",
+	letterSpacing: 0.16,
+} as const satisfies TextStyle
+
+export const text_heading_02 = {
+	fontSize: 16,
+	lineHeight: 24,
+	fontFamily: "IBMPlexSans-SemiBold",
+	letterSpacing: 0,
+} as const satisfies TextStyle
+
+export const text_heading_03 = {
+	fontSize: 20,
+	lineHeight: 28,
+	fontFamily: "IBMPlexSans-Regular",
+	letterSpacing: 0,
+} as const satisfies TextStyle
+
+export const text_heading_04 = {
+	fontSize: 28,
+	lineHeight: 36,
+	fontFamily: "IBMPlexSans-Regular",
+	letterSpacing: 0,
+} as const satisfies TextStyle
+
+export const text_heading_05 = {
+	fontSize: 32,
+	lineHeight: 40,
+	fontFamily: "IBMPlexSans-Regular",
+	letterSpacing: 0,
+} as const satisfies TextStyle
+
+export const text_heading_06 = {
+	fontSize: 42,
+	lineHeight: 50,
+	fontFamily: "IBMPlexSans-Light",
+	letterSpacing: 0,
+} as const satisfies TextStyle
+
+export const text_heading_07 = {
+	fontSize: 54,
+	lineHeight: 64,
+	fontFamily: "IBMPlexSans-Light",
+	letterSpacing: 0,
+} as const satisfies TextStyle
+
+export const text_heading_compact_01 = {
+	fontSize: 14,
+	lineHeight: 18,
+	fontFamily: "IBMPlexSans-SemiBold",
+	letterSpacing: 0.16,
+} as const satisfies TextStyle
+
+export const text_heading_compact_02 = {
+	fontSize: 16,
+	lineHeight: 22,
+	fontFamily: "IBMPlexSans-SemiBold",
+	letterSpacing: 0,
+} as const satisfies TextStyle
+
+export const text_helper_text_01 = {
+	fontSize: 12,
+	lineHeight: 16,
+	fontFamily: "IBMPlexSans-Regular",
+	letterSpacing: 0.32,
+} as const satisfies TextStyle
+
+export const text_helper_text_02 = {
+	fontSize: 14,
+	lineHeight: 18,
+	fontFamily: "IBMPlexSans-Regular",
+	letterSpacing: 0.16,
+} as const satisfies TextStyle
+
+export const text_label_01 = {
+	fontSize: 12,
+	lineHeight: 16,
+	fontFamily: "IBMPlexSans-Regular",
+	letterSpacing: 0.32,
+} as const satisfies TextStyle
+
+export const text_label_02 = {
+	fontSize: 14,
+	lineHeight: 18,
+	fontFamily: "IBMPlexSans-Regular",
+	letterSpacing: 0.16,
+} as const satisfies TextStyle
+
+export const text_legal_01 = {
+	fontSize: 12,
+	lineHeight: 16,
+	fontFamily: "IBMPlexSans-Regular",
+	letterSpacing: 0.32,
+} as const satisfies TextStyle
+
+export const text_legal_02 = {
+	fontSize: 14,
+	lineHeight: 18,
+	fontFamily: "IBMPlexSans-Regular",
+	letterSpacing: 0.16,
+} as const satisfies TextStyle
+

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

@@ -0,0 +1,19 @@
+import type {
+	ViewStyle,
+} from "react-native"
+
+export const w_auto = {
+	width: "auto",
+} as const satisfies ViewStyle
+
+export const w_full = {
+	width: "100%",
+} as const satisfies ViewStyle
+
+export const max_w_auto = {
+	width: "auto",
+} as const satisfies ViewStyle
+
+export const max_w_full = {
+	width: "100%",
+} as const satisfies ViewStyle

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

@@ -0,0 +1,22 @@
+import {
+	StyleSheet as RNStyleSheet,
+} from "react-native"
+
+import * as g from "./g"
+import * as gObject from "./g-object"
+
+export const absoluteFill = RNStyleSheet.absoluteFill
+export const absoluteFillObject = RNStyleSheet.absoluteFillObject
+export const flatten = RNStyleSheet.flatten
+export const hairlineWidth = RNStyleSheet.hairlineWidth
+export const setStyleAttributePreprocessor = RNStyleSheet.setStyleAttributePreprocessor
+
+export {
+	g,
+	gObject,
+}
+
+export * from "./breakpoint"
+export * from "./color"
+export * from "./create"
+export * from "./use"

package/src/components/accordion/Accordion.tsx

@@ -55,18 +55,20 @@ const Accordion_ = forwardRef<AccordionRef, AccordionProps>(
 					marginRightStyleKey: keyof typeof MarginRightStyle,
 				}>({
 					marginRightStyleKey: getMarginRightStyleKey(windowWidth),
-				}),
+				})
 
+		const
 			[marginRightStyleKey, setMarginRightStyleKey] =
-				useState(ref.current.marginRightStyleKey),
+				// eslint-disable-next-line react-hooks/refs
+				useState(ref.current.marginRightStyleKey)
 
+		const
 			handlerLayout: NonNullable<ViewProps["onLayout"]> =
 				useCallback(event => {
 					onLayout?.(event)
 					/**
 					 * https://carbondesignsystem.com/components/accordion/style/#margin-right
 					 */
-
 					const key = getMarginRightStyleKey(windowWidth)
 
 					if(ref.current.marginRightStyleKey !== key) {

package/src/components/accordion/_Header.tsx

@@ -12,13 +12,7 @@ import {
 	Color,
 } from "@audira/carbon-react-native-elements"
 
-import {
-	FlexStyleSheet,
-} from "../../_internal/style-sheets"
-
-import {
-	CarbonStyleSheet,
-} from "../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import {
 	ThemeContext,
@@ -98,7 +92,7 @@ export function Header({
 					(...params) =>
 						iconNodeRenderer(!!open, ...params)
 				}
-				style={ FlexStyleSheet.self_stretch }
+				style={ CarbonStyleSheet.g.self_stretch }
 			/>
 		</View>
 	)

package/src/components/accordion/_HeaderBorder.tsx

@@ -12,13 +12,7 @@ import {
 	Spacing,
 } from "@audira/carbon-react-native-elements"
 
-import {
-	CommonStyleSheet,
-} from "../../_internal/style-sheets"
-
-import {
-	CarbonStyleSheet,
-} from "../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import {
 	ThemeContext,
@@ -42,7 +36,7 @@ export function HeaderBorder({
 	return (
 		<View
 			style={ [
-				CommonStyleSheet.absolute,
+				CarbonStyleSheet.g.absolute,
 				style.borderBox,
 				carbonStyle.borderBox,
 				flushAlignment
@@ -50,7 +44,7 @@ export function HeaderBorder({
 						left: Spacing.spacing_05,
 						right: Spacing.spacing_05,
 					}
-					: CommonStyleSheet.w_full,
+					: CarbonStyleSheet.g.w_full,
 				styleProp,
 			] }
 		/>

package/src/components/accordion/_Item.tsx

@@ -20,9 +20,7 @@ import {
 	GlobalConfigContext,
 } from "../../_internal/contexts"
 
-import {
-	CommonStyleSheet,
-} from "../../_internal/style-sheets"
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import {
 	Collapsible,
@@ -151,7 +149,7 @@ export const Item = forwardRef<AccordionItemRef, AccordionItemProps>(
 					open={ open }
 					dir={ globalConfigContext.rtl ? "rtl" : undefined }
 					contentContainerStyle={ [
-						globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+						globalConfigContext.rtl ? CarbonStyleSheet.g.rtl : undefined,
 						accordionContext.collapsibleContentContainerStyle,
 						style.panel,
 					] }

package/src/components/accordion/_chevron/Chevron.tsx

@@ -81,6 +81,7 @@ export function Chevron({
 			width={ size }
 			height={ size }
 			style={ [
+				/* eslint-disable react-hooks/refs */
 				{
 					transform: [{
 						rotateZ: rotateZ.current.interpolate({
@@ -89,6 +90,7 @@ export function Chevron({
 						}),
 					}],
 				},
+				/* eslint-enable react-hooks/refs */
 				style,
 			] }
 		/>

package/src/components/box/Box.tsx

@@ -0,0 +1,55 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	View,
+} from "react-native"
+
+import {
+	GlobalConfigContext,
+} from "../../_internal/contexts"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+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" ? CarbonStyleSheet.g.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

@@ -19,9 +19,7 @@ import {
 	GlobalConfigContext,
 } from "../../../_internal/contexts"
 
-import {
-	FlexStyleSheet,
-} from "../../../_internal/style-sheets"
+import * as CarbonStyleSheet from "../../../carbon-style-sheet"
 
 import {
 	Text,
@@ -84,10 +82,10 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 				aria-label={ ariaLabel ?? text }
 				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
 				style={ [
-					FlexStyleSheet.flex_row,
-					FlexStyleSheet.justify_between,
-					baseStyle.container,
-					globalConfigContext.rtl ? baseStyle.containerRtl : undefined,
+					CarbonStyleSheet.g.flex_row,
+					CarbonStyleSheet.g.justify_between,
+					CarbonStyleSheet.g.overflow_hidden,
+					globalConfigContext.rtl ? CarbonStyleSheet.g.rtl : undefined,
 					mapContainerStyle[`${!!text}`][`${!!Icon || !!iconNode}`],
 					sizeStyle[size],
 					mapStyleInButtonGroup[`${!!buttonGroupContext.vertical}`][`${!!buttonGroupContext.fluid}`],
@@ -149,13 +147,6 @@ export const Base = forwardRef<BaseRef, BaseProps>(
 const
 	baseStyle =
 		StyleSheet.create({
-			container: {
-				overflow: "hidden",
-			},
-			containerRtl: {
-				direction: "rtl",
-			},
-
 			/**
 			 * Start Padding
 			 */
@@ -272,12 +263,12 @@ const
 	} =
 		{
 			false: {
-				false: FlexStyleSheet.self_start,
-				true: FlexStyleSheet.flex_1,
+				false: CarbonStyleSheet.g.self_start,
+				true: CarbonStyleSheet.g.flex_1,
 			},
 			true: {
-				false: FlexStyleSheet.self_stretch,
-				true: FlexStyleSheet.self_stretch,
+				false: CarbonStyleSheet.g.self_stretch,
+				true: CarbonStyleSheet.g.self_stretch,
 			},
 		}
 

package/src/components/button/base-color/BaseColor.tsx

@@ -77,15 +77,19 @@ export const BaseColor = forwardRef<BaseColorRef, BaseColorProps>(
 				useContext(GlobalConfigContext),
 
 			themeContext =
-				useContext(ThemeContext),
+				useContext(ThemeContext)
 
+		const
 			[state, setState] =
 				useState({
 					focused: false,
 					hovered: false,
 					pressed: false,
-				}),
+				})
+		// Can't continue from this var.
+		// eslint-plugin-react-hooks will complains
 
+		const
 			blurHandler: NonNullable<BaseProps["onBlur"]> =
 				useCallback(event => {
 					onBlur?.(event)

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

@@ -14,9 +14,7 @@ import {
 	Spacing,
 } from "@audira/carbon-react-native-elements"
 
-import {
-	CarbonStyleSheet,
-} from "../../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../../carbon-style-sheet"
 
 import {
 	ThemeContext,

package/src/components/button/ghost-danger/GhostDanger.tsx

@@ -14,9 +14,7 @@ import {
 	Spacing,
 } from "@audira/carbon-react-native-elements"
 
-import {
-	CarbonStyleSheet,
-} from "../../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../../carbon-style-sheet"
 import {
 	ThemeContext,
 } from "../../../contexts"

package/src/components/button/ghost-icon/GhostIcon.tsx

@@ -12,9 +12,7 @@ import {
 	Color,
 } from "@audira/carbon-react-native-elements"
 
-import {
-	CarbonStyleSheet,
-} from "../../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../../carbon-style-sheet"
 
 import {
 	ThemeContext,

package/src/components/button/primary/Primary.tsx

@@ -12,9 +12,7 @@ import {
 	Color,
 } from "@audira/carbon-react-native-elements"
 
-import {
-	CarbonStyleSheet,
-} from "../../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../../carbon-style-sheet"
 
 import {
 	ThemeContext,

package/src/components/button/primary-danger/PrimaryDanger.tsx

@@ -12,9 +12,7 @@ import {
 	Color,
 } from "@audira/carbon-react-native-elements"
 
-import {
-	CarbonStyleSheet,
-} from "../../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../../carbon-style-sheet"
 
 import {
 	ThemeContext,

package/src/components/button/secondary/Secondary.tsx

@@ -12,9 +12,7 @@ import {
 	Color,
 } from "@audira/carbon-react-native-elements"
 
-import {
-	CarbonStyleSheet,
-} from "../../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../../carbon-style-sheet"
 import {
 	ThemeContext,
 } from "../../../contexts"

package/src/components/button/tertiary/Tertiary.tsx

@@ -13,9 +13,7 @@ import {
 	Color,
 } from "@audira/carbon-react-native-elements"
 
-import {
-	CarbonStyleSheet,
-} from "../../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../../carbon-style-sheet"
 
 import {
 	ThemeContext,

package/src/components/button/tertiary-danger/TertiaryDanger.tsx

@@ -13,9 +13,7 @@ import {
 	Color,
 } from "@audira/carbon-react-native-elements"
 
-import {
-	CarbonStyleSheet,
-} from "../../../carbon-style-sheet"
+import * as CarbonStyleSheet from "../../../carbon-style-sheet"
 
 import {
 	ThemeContext,

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

@@ -18,10 +18,7 @@ import {
 	GlobalConfigContext,
 } from "../../_internal/contexts"
 
-import {
-	CommonStyleSheet,
-	FlexStyleSheet,
-} from "../../_internal/style-sheets"
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
 
 import type {
 	ButtonGroupProps,
@@ -59,7 +56,7 @@ export const ButtonGroup = forwardRef<ButtonGroupRef, ButtonGroupProps>(
 				mapStyleFluid[`${!!fluid}`],
 
 			rtlStyle =
-				globalConfigContext.rtl && !vertical ? CommonStyleSheet.rtl : undefined
+				globalConfigContext.rtl && !vertical ? CarbonStyleSheet.g.rtl : undefined
 
 		return (
 			<ButtonGroupContext.Provider
@@ -76,7 +73,7 @@ export const ButtonGroup = forwardRef<ButtonGroupRef, ButtonGroupProps>(
 					style={ [
 						styleFlexDir,
 						styleFluid,
-						oneAlone ? FlexStyleSheet.justify_between : undefined,
+						oneAlone ? CarbonStyleSheet.g.justify_between : undefined,
 						rtlStyle,
 						style,
 					] }
@@ -98,7 +95,7 @@ export const ButtonGroup = forwardRef<ButtonGroupRef, ButtonGroupProps>(
 								styleFlexDir,
 								styleFluid,
 								styleSheet.lastTwoButttonContainer,
-								FlexStyleSheet.justify_end,
+								CarbonStyleSheet.g.justify_end,
 								rtlStyle,
 							] }
 						>
@@ -134,8 +131,8 @@ const
 		[IsVertical in `${boolean}`]: ViewStyle
 	} =
 		{
-			false: FlexStyleSheet.flex_row,
-			true: FlexStyleSheet.flex_col_reverse,
+			false: CarbonStyleSheet.g.flex_row,
+			true: CarbonStyleSheet.g.flex_col_reverse,
 		},
 
 	mapStyleFluid: { [IsFluid in `${boolean}`]: ViewStyle } =