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

package/src/components/button/tertiary-danger/TertiaryDangerProps.ts

@@ -0,0 +1,12 @@
+import type {
+	BaseColorProps,
+} from "../base-color/BaseColorProps"
+
+export interface TertiaryDangerProps extends Omit<
+	BaseColorProps,
+	| "android_rippleEffectColor"
+	| "colorStateStyle"
+	| "iconContainerStyle"
+> {
+}
+

package/src/components/button/tertiary-danger/TertiaryDangerRef.ts

@@ -0,0 +1,6 @@
+import type {
+	BaseColorRef,
+} from "../base-color/BaseColorRef"
+
+export interface TertiaryDangerRef extends BaseColorRef {
+}

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

@@ -0,0 +1,3 @@
+export * from "./TertiaryDanger"
+export * from "./TertiaryDangerProps"
+export * from "./TertiaryDangerRef"

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

@@ -0,0 +1,145 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+	View,
+	type ViewStyle,
+} from "react-native"
+
+import {
+	Spacing,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	ButtonGroupContext,
+	GlobalConfigContext,
+} from "../../_internal/contexts"
+
+import {
+	CommonStyleSheet,
+	FlexStyleSheet,
+} from "../../_internal/style-sheets"
+
+import type {
+	ButtonGroupProps,
+} from "./ButtonGroupProps"
+
+import type {
+	ButtonGroupRef,
+} from "./ButtonGroupRef"
+
+export const ButtonGroup = forwardRef<ButtonGroupRef, ButtonGroupProps>(
+	function ButtonGroup(
+		{
+			button1,
+			button2,
+			button3,
+			oneAlone,
+			size = "large_productive",
+			fluid,
+			vertical,
+			style,
+			dir,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			globalConfigContext =
+				useContext(GlobalConfigContext),
+
+			styleFlexDir =
+				mapStyleFlexDir[`${!!vertical}`],
+
+			styleFluid =
+				mapStyleFluid[`${!!fluid}`],
+
+			rtlStyle =
+				globalConfigContext.rtl && !vertical ? CommonStyleSheet.rtl : undefined
+
+		return (
+			<ButtonGroupContext.Provider
+				value={{
+					size,
+					fluid,
+					vertical,
+				}}
+			>
+				<View
+					ref={ ref }
+					{ ...props }
+					dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
+					style={ [
+						styleFlexDir,
+						styleFluid,
+						oneAlone ? FlexStyleSheet.justify_between : undefined,
+						rtlStyle,
+						style,
+					] }
+				>
+					{ !oneAlone || vertical ? (<>
+						{ button1 }
+						{ button2 }
+						{ button3 }
+					</>) : (<>
+						<View
+							style={ [
+								styleSheet.firstButtonContainer,
+							] }
+						>
+							{ button1 }
+						</View>
+						<View
+							style={ [
+								styleFlexDir,
+								styleFluid,
+								styleSheet.lastTwoButttonContainer,
+								FlexStyleSheet.justify_end,
+								rtlStyle,
+							] }
+						>
+							{ button2 }
+							{ button3 }
+						</View>
+					</>) }
+				</View>
+			</ButtonGroupContext.Provider>
+		)
+
+	},
+)
+
+const
+	styleSheet =
+		StyleSheet.create({
+			fixedGroup: {
+				gap: Spacing.spacing_05,
+			},
+			fluidGroup: {
+				gap: 1,
+			},
+			firstButtonContainer: {
+				width: "25%",
+			},
+			lastTwoButttonContainer: {
+				width: "50%",
+			},
+		}),
+
+	mapStyleFlexDir: {
+		[IsVertical in `${boolean}`]: ViewStyle
+	} =
+		{
+			false: FlexStyleSheet.flex_row,
+			true: FlexStyleSheet.flex_col_reverse,
+		},
+
+	mapStyleFluid: { [IsFluid in `${boolean}`]: ViewStyle } =
+		{
+			false: styleSheet.fixedGroup,
+			true: styleSheet.fluidGroup,
+		}

package/src/components/button-group/ButtonGroupProps.ts

@@ -0,0 +1,37 @@
+import type {
+	ViewProps,
+} from "react-native"
+
+import type {
+	Size as ButtonSize,
+} from "../button/Size"
+
+export interface ButtonGroupProps extends Omit<ViewProps, "children"> {
+	button1: React.ReactElement,
+	button2: React.ReactElement,
+	button3?: React.ReactElement,
+	/**
+	 * Make the `button1` "alone" at container's start and the last two is placed closely at container's end
+	 * 
+	 * Based on IBM, this is intended for the Ghost button (in `button1`) that should be placed alone at container's start
+	 * 
+	 * Does nothing if `vertical` prop is true
+	 */
+	oneAlone?: boolean,
+	/**
+	 * @default 'large_productive'
+	 */
+	size?: ButtonSize,
+	/**
+	 * When we say “fluid,” we mean that the button becomes a part of a larger, compound component by bleeding to two or more edges of its container. Rather than defining the fluid button in columns or mini units, its width is defined as a percentage (often 50%) of the container’s width.
+	 *
+	 * Fluid on 3 buttons, will make each button have 25% width of the container's width
+	 *
+	 * @see https://carbondesignsystem.com/components/button/usage/#button-groups
+	 */
+	fluid?: boolean,
+	/**
+	 * Specify the button arrangement of the set (vertically stacked or horizontal)
+	 */
+	vertical?: boolean,
+}

package/src/components/button-group/ButtonGroupRef.ts

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

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

@@ -0,0 +1,3 @@
+export * from "./ButtonGroup"
+export type * from "./ButtonGroupProps"
+export type * from "./ButtonGroupRef"

package/src/components/checkbox/Checkbox.tsx

@@ -0,0 +1,221 @@
+import {
+	forwardRef,
+	useCallback,
+	useContext,
+	useImperativeHandle,
+	useRef,
+} from "react"
+
+import {
+	Pressable,
+	StyleSheet,
+	View,
+	type PressableProps,
+	type TextStyle,
+} from "react-native"
+
+import {
+	Spacing,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	GlobalConfigContext,
+} from "../../_internal/contexts"
+
+import {
+	CommonStyleSheet,
+	FlexStyleSheet,
+} from "../../_internal/style-sheets"
+
+import {
+	CarbonStyleSheet,
+} from "../../carbon-style-sheet"
+
+import {
+	ThemeContext,
+} from "../../contexts"
+
+import {
+	CheckboxInput,
+	type CheckboxInputInteractiveState,
+	type CheckboxInputRef,
+} from "../checkbox-input"
+
+import {
+	FormLabel,
+} from "../form-label"
+
+import type {
+	CheckboxProps,
+} from "./CheckboxProps"
+
+import type {
+	CheckboxRef,
+} from "./CheckboxRef"
+
+import type {
+	RefBase,
+} from "./_RefBase"
+
+
+export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>(
+	function Checkbox(
+		{
+			defaultValue,
+			value,
+			interactiveState = "normal",
+			label,
+			role = "checkbox",
+			"aria-label": ariaLabel,
+			onChange,
+			onPress,
+			checkboxInputProps,
+			formLabelProps,
+			pressableProps,
+			style,
+			dir,
+			...props
+		},
+		forwardedRef,
+	) {
+
+		useContext(ThemeContext)
+
+		const
+			globalConfigContext =
+				useContext(GlobalConfigContext),
+
+			checkboxInputRef =
+				useRef<CheckboxInputRef>(null),
+
+			viewRef =
+				useRef<View>(null),
+
+			pressHandler: NonNullable<PressableProps["onPress"]> =
+				useCallback(event => {
+					onPress?.(event)
+					if(checkboxInputRef.current) {
+						checkboxInputRef.current.setValue(
+							checkboxInputRef.current.value === null
+								? true
+								: !checkboxInputRef.current.value,
+						)
+					}
+				}, [
+					onPress,
+				])
+
+		useImperativeHandle(forwardedRef, () => {
+			return Object.assign<View, RefBase>(
+				(viewRef.current ?? {
+				}) as View,
+				{
+					get value() {
+						return checkboxInputRef.current!.value
+					},
+					setValue(value_) {
+						checkboxInputRef.current?.setValue(value_)
+					},
+				},
+			)
+		}, [])
+
+		return (
+			<View
+				{ ...props }
+				aria-label={ ariaLabel || label }
+				dir={ dir ?? globalConfigContext.rtl ? "rtl" : undefined }
+				style={ [
+					FlexStyleSheet.flex_row,
+					globalConfigContext.rtl ? CommonStyleSheet.rtl : undefined,
+					style,
+				] }
+				ref={ viewRef }
+			>
+				<Pressable
+					{ ...pressableProps }
+					role={ role }
+					disabled={ interactiveState === "disabled" }
+					aria-label={ pressableProps?.["aria-label"] ?? label }
+					onPress={ pressHandler }
+					style={ [
+						CommonStyleSheet.absolute,
+						CommonStyleSheet.w_full,
+						CommonStyleSheet.h_full,
+						baseStyle.pressable,
+						pressableProps?.style,
+					] }
+				/>
+
+				<CheckboxInput
+					{ ...checkboxInputProps }
+					role="none"
+					defaultValue={ defaultValue }
+					value={ value }
+					interactiveState={ interactiveState }
+					onChange={ onChange }
+					onPress={ onPress }
+					style={ [
+						baseStyle.checkboxInput,
+						checkboxInputProps?.style,
+					] }
+					ref={ checkboxInputRef }
+				/>
+
+				<FormLabel
+					{ ...formLabelProps }
+					label={ label }
+					textProps={{
+						...formLabelProps?.textProps,
+						type: formLabelProps?.textProps?.type || "body_compact_01",
+						style: [
+							textColorStyle[interactiveState],
+							formLabelProps?.textProps?.style,
+						],
+					}}
+					style={ [
+						FlexStyleSheet.flex_1,
+						baseStyle.label,
+						formLabelProps?.style,
+					] }
+				/>
+			</View>
+		)
+
+	},
+)
+
+const
+	baseStyle =
+		StyleSheet.create({
+			pressable: {
+				zIndex: 1,
+			},
+			checkboxInput: {
+				zIndex: 2,
+			},
+			label: {
+				marginStart: Spacing.spacing_03,
+			},
+		}),
+
+	textColorStyle =
+		CarbonStyleSheet.create<
+			Record<CheckboxInputInteractiveState, TextStyle>
+		>({
+			normal: {
+				color: CarbonStyleSheet.color.text_primary,
+			},
+			disabled: {
+				color: CarbonStyleSheet.color.text_disabled,
+			},
+			error: {
+				color: CarbonStyleSheet.color.text_primary,
+			},
+			read_only: {
+				color: CarbonStyleSheet.color.text_primary,
+			},
+			warning: {
+				color: CarbonStyleSheet.color.text_primary,
+			},
+		})

package/src/components/checkbox/CheckboxProps.ts

@@ -0,0 +1,39 @@
+import type {
+	PressableProps,
+	ViewProps,
+} from "react-native"
+
+import type {
+	CheckboxInputProps,
+} from "../checkbox-input"
+
+import type {
+	FormLabelProps,
+} from "../form-label"
+
+export interface CheckboxProps extends Omit<ViewProps, "children"> {
+	defaultValue?: CheckboxInputProps["defaultValue"],
+	value?: CheckboxInputProps["value"],
+	interactiveState?: CheckboxInputProps["interactiveState"],
+	label: string,
+	onChange?: CheckboxInputProps["onChange"],
+	onPress?: CheckboxInputProps["onPress"],
+	checkboxInputProps?: Omit<
+		CheckboxInputProps,
+		| "defaultValue"
+		| "value"
+		| "indeterminate"
+		| "interactiveState"
+		| "role"
+		| "onChange"
+	>,
+	formLabelProps?: Omit<FormLabelProps, "label">,
+	pressableProps?: Omit<
+		PressableProps,
+		| "role"
+		| "style"
+		| "onPress"
+	> & {
+		style?: ViewProps["style"],
+	},
+}

package/src/components/checkbox/CheckboxRef.ts

@@ -0,0 +1,10 @@
+import type {
+	View,
+} from "react-native"
+
+import type {
+	RefBase,
+} from "./_RefBase"
+
+export interface CheckboxRef extends View, RefBase {
+}

package/src/components/checkbox/_RefBase.ts

@@ -0,0 +1,11 @@
+import type {
+	CheckboxInputRef,
+} from "../checkbox-input/CheckboxInputRef"
+
+export interface RefBase {
+	readonly value: CheckboxInputRef["value"],
+	/**
+	 * This method does nothing when `controlled` prop is true
+	 */
+	setValue: CheckboxInputRef["setValue"],
+}

package/src/components/checkbox/index.tsx

@@ -0,0 +1,3 @@
+export * from "./Checkbox"
+export * from "./CheckboxProps"
+export * from "./CheckboxRef"