@audira/carbon-react-native 1.0.3 → 1.0.4

package/package.json

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

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

@@ -1,5 +1,5 @@
 // Generated
-// Sun, 29 Mar 2026 10:05:23 GMT
+// Fri, 03 Apr 2026 19:29:52 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
+// Fri, 03 Apr 2026 19:29:52 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
+// Fri, 03 Apr 2026 19:29:52 GMT
 
 import {
 	StyleSheet,

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

@@ -1,5 +1,5 @@
 // Generated
-// Sun, 29 Mar 2026 10:05:23 GMT
+// Fri, 03 Apr 2026 19:29:52 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
+// Fri, 03 Apr 2026 19:29:52 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
+// Fri, 03 Apr 2026 19:29:52 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
+// Fri, 03 Apr 2026 19:29:52 GMT
 
 import type {
 	TextStyle,

package/src/components/index.ts

@@ -30,6 +30,13 @@ export * from "./radio-button"
 export * from "./radio-button-group"
 export * from "./radio-button-input"
 export * from "./switch"
+export * from "./table"
+export * from "./table-cell"
+export * from "./table-cell-header"
+export * from "./table-cell-icon"
+export * from "./table-cell-text"
+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/table/Table.tsx

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

package/src/components/table/TableProps.ts

@@ -0,0 +1,15 @@
+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,
+}

package/src/components/table/TableRef.ts

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

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"

package/src/components/table-cell/TableCell.tsx

@@ -0,0 +1,93 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	View,
+} from "react-native"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import {
+	TableCellText,
+} from "../table-cell-text/TableCellText"
+
+import {
+	TableRowHeaderContext,
+} from "../table-row-header/_TableRowHeaderContext"
+
+import type {
+	TableCellProps,
+} from "./TableCellProps"
+
+import type {
+	TableCellRef,
+} from "./TableCellRef"
+
+/**
+ * `TableCell` is a pure React Native View to render
+ * container with a correct horizontal padding.
+ * 
+ * To ensure consistent column alignment across rows,
+ * you need to provide fixed `width` of the cell.
+ * Sets an explicit width for the cell (in pixels) and
+ * acts as a column constraint. This helps simulate
+ * table-like behavior, since React Native relies on
+ * flexbox and does not provide native table layout.
+ * Without this, cells in the same column may render
+ * with inconsistent widths across different rows.
+ */
+export const TableCell = forwardRef<TableCellRef, TableCellProps>(
+	function TableCell(
+		{
+			children,
+			text,
+			textProps,
+			width,
+			role = "cell",
+			accessibilityLabel,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			tableRowHeaderContext =
+				useContext(TableRowHeaderContext)
+
+		return (
+			<View
+				ref={ ref }
+				{ ...props }
+				role={ role }
+				accessibilityLabel={ accessibilityLabel || text }
+				style={ [
+					CarbonStyleSheet.g.flex_auto,
+					CarbonStyleSheet.g.px_05,
+
+					tableRowHeaderContext.inRowHeader
+						? tableRowHeaderContext.size == "extra_large"
+							? CarbonStyleSheet.g.pt_05
+							: CarbonStyleSheet.g.self_center
+						: undefined,
+
+					typeof width === "number" ? {
+						width,
+					} : undefined,
+					style,
+				] }
+			>
+				{ typeof children === "undefined" && !!text ? (
+					<TableCellText
+						{ ...textProps }
+					>
+						{ text }
+					</TableCellText>
+				) : children }
+			</View>
+		)
+
+	},
+)

package/src/components/table-cell/TableCellProps.ts

@@ -0,0 +1,33 @@
+import type {
+	ViewProps,
+} from "react-native"
+
+import type {
+	TableCellTextProps,
+} from "../table-cell-text/TableCellTextProps"
+
+export interface TableCellProps extends ViewProps {
+	/**
+	 * Fixed width of the cell used to ensure consistent column alignment across rows.
+	 * 
+	 * Sets an explicit width for the cell (in pixels) and
+	 * acts as a column constraint. This helps simulate
+	 * table-like behavior, since React Native relies on
+	 * flexbox and does not provide native table layout.
+	 * Without this, cells in the same column may render
+	 * with inconsistent widths across different rows.
+	 */
+	width?: number,
+	/**
+	 * Provide text to the cell.
+	 * 
+	 * As an alternative, you can use `TableCellText` as a child of this component.
+	 * 
+	 * `children` prop takes over precedence over this prop.
+	 */
+	text?: string,
+	/**
+	 * Only applies if you use the `text` prop instead of `children`
+	 */
+	textProps?: Omit<TableCellTextProps, "children">,
+}

package/src/components/table-cell/TableCellRef.ts

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

package/src/components/table-cell/index.ts

@@ -0,0 +1,3 @@
+export * from "./TableCell"
+export type * from "./TableCellProps"
+export type * from "./TableCellRef"

package/src/components/table-cell-header/TableCellHeader.tsx

@@ -0,0 +1,274 @@
+import {
+	forwardRef,
+	useCallback,
+	useContext,
+	useEffect,
+	useRef,
+	useState,
+} from "react"
+
+import {
+	Pressable,
+	type ViewStyle,
+} from "react-native"
+
+import type {
+	ColorLayerLevel,
+} from "@audira/carbon-react-native-elements"
+
+import * as CarbonStyleSheet from "../../carbon-style-sheet"
+
+import {
+	LayerContext,
+} from "../layer/LayerContext"
+
+import {
+	TableCellText,
+} from "../table-cell-text/TableCellText"
+
+import {
+	TableRowHeaderContext,
+} from "../table-row-header/_TableRowHeaderContext"
+
+import type {
+	TableCellHeaderProps,
+} from "./TableCellHeaderProps"
+
+import type {
+	TableCellHeaderRef,
+} from "./TableCellHeaderRef"
+
+import {
+	SortIcon,
+	type SortIconRef,
+} from "./_sort-icon"
+
+/**
+ * Similar as the `TableCell`. `TableCellHeader` is also a View to render
+ * container with a correct horizontal padding, with additional
+ * sorting icon option and its coloring.
+ * 
+ * It's better to use the `TableCell` instead of `TableCellHeader`
+ * if a header cell is not using the sorting icon at all to save a bit of memory
+ * because `TableCellHeader` has bunch of Pressable logics and two icons loaded.
+ * 
+ * To ensure consistent column alignment across rows,
+ * you need to provide fixed `width` of the cell.
+ * Sets an explicit width for the cell (in pixels) and
+ * acts as a column constraint. This helps simulate
+ * table-like behavior, since React Native relies on
+ * flexbox and does not provide native table layout.
+ * Without this, cells in the same column may render
+ * with inconsistent widths across different rows.
+ */
+export const TableCellHeader = forwardRef<TableCellHeaderRef, TableCellHeaderProps>(
+	function TableCellHeader(
+		{
+			defaultSort,
+			sort: sortProp,
+			width,
+			children,
+			text,
+			textProps,
+			accessibilityLabel,
+			onChangeSort,
+			disabled,
+			onHoverIn: onHoverInProp,
+			onHoverOut: onHoverOutProp,
+			onPress: onPressProp,
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			layerContext =
+				useContext(LayerContext),
+
+			tableRowHeaderContext =
+				useContext(TableRowHeaderContext),
+
+			sortIconRef =
+				useRef<SortIconRef>(null),
+
+			allowOnChangeSortSelfEffect =
+				useRef(false),
+
+			[sortSelf, setSortSelf] =
+				useState(defaultSort),
+
+			sort =
+				sortProp ?? sortSelf,
+
+			[hovered, setHovered] =
+				useState(false)
+
+		const
+			onHoverIn: NonNullable<typeof onHoverInProp> =
+				useCallback(event => {
+					if(sortIconRef.current) {
+						setHovered(true)
+					}
+
+					onHoverInProp?.(event)
+				}, [
+					onHoverInProp,
+				]),
+
+			onHoverOut: NonNullable<typeof onHoverOutProp> =
+				useCallback(event => {
+					if(sortIconRef.current) {
+						setHovered(false)
+					}
+
+					onHoverOutProp?.(event)
+				}, [
+					onHoverOutProp,
+				]),
+
+			onPress: NonNullable<typeof onPressProp> =
+				useCallback(event => {
+					onPressProp?.(event)
+
+					if(defaultSort) {
+						allowOnChangeSortSelfEffect.current = true
+						setSortSelf(s => {
+							if(s == "none") {
+								return "asc"
+							} else if(s == "asc") {
+								return "desc"
+							} else {
+								return "none"
+							}
+						})
+					} else if(sortProp && onChangeSort) {
+						let nextSort: NonNullable<typeof sort> = "none"
+						if(sortProp == "none") {
+							nextSort = "asc"
+						} else if(sortProp == "asc") {
+							nextSort = "desc"
+						} else {
+							nextSort = "none"
+						}
+						onChangeSort(nextSort)
+					}
+				}, [
+					sortProp,
+					defaultSort,
+					onChangeSort,
+					onPressProp,
+				])
+
+		useEffect(() => {
+			if(sort) {
+				if(sort == "none") {
+					if(hovered) {
+						sortIconRef.current?.setOpacity(1)
+					} else {
+						sortIconRef.current?.setOpacity(0)
+					}
+				} else {
+					sortIconRef.current?.setOpacity(1)
+				}
+			}
+		}, [
+			hovered,
+			sort,
+		])
+
+		useEffect(() => {
+			if(allowOnChangeSortSelfEffect.current && sort) {
+				allowOnChangeSortSelfEffect.current = false
+				onChangeSort?.(sort)
+			}
+		}, [
+			sort,
+			onChangeSort,
+		])
+
+		CarbonStyleSheet.use()
+
+		return (
+			<Pressable
+				ref={ ref }
+				{ ...props }
+				accessibilityLabel={ accessibilityLabel || text }
+				disabled={ disabled ?? !sort }
+				onHoverIn={ onHoverIn }
+				onHoverOut={ onHoverOut }
+				onPress={ onPress }
+				style={ [
+					CarbonStyleSheet.g.flex_auto,
+					CarbonStyleSheet.g.px_05,
+
+					typeof width === "number" ? {
+						width,
+					} : undefined,
+
+					hovered || sort === "asc" || sort === "desc"
+						? styleSheetBG[`hovered_${layerContext}`]
+						: styleSheetBG[`normal_${layerContext}`],
+
+					tableRowHeaderContext.size == "extra_large"
+						? CarbonStyleSheet.g.pt_05
+						: sort
+							? CarbonStyleSheet.g.items_center
+							: CarbonStyleSheet.g.justify_center,
+					sort
+						? [
+							CarbonStyleSheet.g.flex_row,
+							CarbonStyleSheet.g.justify_between,
+						]
+						: undefined,
+					style,
+				] }
+			>
+				{ typeof children === "undefined" && !!text ? (
+					<TableCellText
+						{ ...textProps }
+					>
+						{ text }
+					</TableCellText>
+				) : children }
+
+				{ !!sort && (
+					<SortIcon
+						type={ sort }
+						ref={ sortIconRef }
+					/>
+				) }
+			</Pressable>
+		)
+
+	},
+)
+
+const
+	styleSheetBG =
+		CarbonStyleSheet.create({
+			normal_1: {
+				backgroundColor: CarbonStyleSheet.color.layer_accent_01,
+			},
+			normal_2: {
+				backgroundColor: CarbonStyleSheet.color.layer_accent_02,
+			},
+			normal_3: {
+				backgroundColor: CarbonStyleSheet.color.layer_accent_03,
+			},
+			hovered_1: {
+				backgroundColor: CarbonStyleSheet.color.layer_accent_hover_01,
+			},
+			hovered_2: {
+				backgroundColor: CarbonStyleSheet.color.layer_accent_hover_02,
+			},
+			hovered_3: {
+				backgroundColor: CarbonStyleSheet.color.layer_accent_hover_03,
+			},
+		} as const satisfies {
+			[Level in `${StateColor}_${ColorLayerLevel}`]: NonNullable<Pick<ViewStyle, "backgroundColor">>
+		})
+
+type StateColor =
+	| "normal"
+	| "hovered"

package/src/components/table-cell-header/TableCellHeaderProps.ts

@@ -0,0 +1,34 @@
+import type {
+	PressableProps,
+} from "react-native"
+
+import type {
+	TableCellProps,
+} from "../table-cell/TableCellProps"
+
+import type {
+	TableCellHeaderSort,
+} from "./TableCellHeaderSort"
+
+export interface TableCellHeaderProps extends
+	Omit<
+		PressableProps,
+		| "children"
+		| "style"
+	>,
+	TableCellProps
+{
+	/**
+	 * Render the sort icon either ascending (arrow up), or descending (arrow up rotated), or none (arrows vertical).
+	 * 
+	 * This is just an icon rendering, you have to sort your actual data manually.
+	 */
+	defaultSort?: TableCellHeaderSort,
+	/**
+	 * Render the sort icon either ascending (arrow up), or descending (arrow up rotated), or none (arrows vertical).
+	 * 
+	 * This is just an icon rendering, you have to sort your actual data manually.
+	 */
+	sort?: TableCellHeaderSort,
+	onChangeSort?: (sort: TableCellHeaderSort) => void,
+}

package/src/components/table-cell-header/TableCellHeaderRef.ts

@@ -0,0 +1,6 @@
+import type {
+	TableCellRef,
+} from "../table-cell/TableCellRef"
+
+export interface TableCellHeaderRef extends TableCellRef {
+}

package/src/components/table-cell-header/TableCellHeaderSort.ts

@@ -0,0 +1,4 @@
+export type TableCellHeaderSort =
+	| "none"
+	| "asc"
+	| "desc"