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

package/src/components/button/primary/PrimaryProps.ts

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

package/src/components/button/primary/PrimaryRef.ts

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

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

@@ -0,0 +1,3 @@
+export * from "./Primary"
+export * from "./PrimaryProps"
+export * from "./PrimaryRef"

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

@@ -0,0 +1,140 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import type {
+	TextStyle,
+	ViewStyle,
+} from "react-native"
+
+import {
+	Color,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	CarbonStyleSheet,
+} from "../../../carbon-style-sheet"
+
+import {
+	ThemeContext,
+} from "../../../contexts"
+
+import {
+	BaseColor,
+	type BaseColorProps,
+	type BaseColorState,
+} from "../base-color"
+
+import type {
+	PrimaryDangerProps,
+} from "./PrimaryDangerProps"
+
+import type {
+	PrimaryDangerRef,
+} from "./PrimaryDangerRef"
+
+export const PrimaryDanger = forwardRef<PrimaryDangerRef, PrimaryDangerProps>(
+	function PrimaryDanger(
+		props,
+		ref,
+	) {
+
+		const
+			themeContext =
+				useContext(ThemeContext)
+
+		return (
+			<BaseColor
+				{ ...props }
+				ref={ ref }
+				android_rippleEffectColor={ mapAndroidRippleEffectColor[themeContext.colorScheme] }
+				colorStateStyle={{
+					background: {
+						default: backgroundStyleSheet.default,
+						focused: backgroundStyleSheet.focused,
+						hovered: backgroundStyleSheet.hovered,
+						pressed: backgroundStyleSheet.pressed,
+						disabled: backgroundStyleSheet.disabled,
+					},
+					text: {
+						default: textStyleSheet.default,
+						focused: textStyleSheet.focused,
+						hovered: textStyleSheet.hovered,
+						pressed: textStyleSheet.pressed,
+						disabled: textStyleSheet.disabled,
+					},
+					icon: mapIconColor[themeContext.colorScheme],
+				}}
+			/>
+		)
+
+	},
+)
+
+const
+	backgroundStyleSheet =
+		CarbonStyleSheet.create<
+			Record<keyof BaseColorProps["colorStateStyle"]["background"], ViewStyle>
+		>({
+			default: {
+				backgroundColor: CarbonStyleSheet.color.button_danger_primary,
+			},
+			focused: {
+				backgroundColor: CarbonStyleSheet.color.button_danger_primary,
+			},
+			hovered: {
+				backgroundColor: CarbonStyleSheet.color.button_danger_hover,
+			},
+			pressed: {
+				backgroundColor: CarbonStyleSheet.color.button_danger_active,
+			},
+			disabled: {
+				backgroundColor: CarbonStyleSheet.color.button_disabled,
+			},
+		}),
+
+	textStyleSheet =
+		CarbonStyleSheet.create<
+			Record<keyof BaseColorProps["colorStateStyle"]["text"], TextStyle>
+		>({
+			default: {
+				color: CarbonStyleSheet.color.text_on_color,
+			},
+			focused: {
+				color: CarbonStyleSheet.color.text_on_color,
+			},
+			hovered: {
+				color: CarbonStyleSheet.color.text_on_color,
+			},
+			pressed: {
+				color: CarbonStyleSheet.color.text_on_color,
+			},
+			disabled: {
+				color: CarbonStyleSheet.color.text_on_color_disabled,
+			},
+		}),
+
+	mapIconColor: Record<ThemeContext["colorScheme"], Record<BaseColorState, string>> =
+		{
+			gray_10: {
+				default: Color.Token.gray_10.icon_on_color,
+				focused: Color.Token.gray_10.icon_on_color,
+				hovered: Color.Token.gray_10.icon_on_color,
+				pressed: Color.Token.gray_10.icon_on_color,
+				disabled: Color.Token.gray_10.icon_on_color_disabled,
+			},
+			gray_100: {
+				default: Color.Token.gray_100.icon_on_color,
+				focused: Color.Token.gray_100.icon_on_color,
+				hovered: Color.Token.gray_100.icon_on_color,
+				pressed: Color.Token.gray_100.icon_on_color,
+				disabled: Color.Token.gray_100.icon_on_color_disabled,
+			},
+		},
+
+	mapAndroidRippleEffectColor: Record<ThemeContext["colorScheme"], string> =
+		{
+			gray_10: Color.Token.gray_10.button_danger_active,
+			gray_100: Color.Token.gray_100.button_danger_active,
+		}

package/src/components/button/primary-danger/PrimaryDangerProps.ts

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

package/src/components/button/primary-danger/PrimaryDangerRef.ts

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

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

@@ -0,0 +1,3 @@
+export * from "./PrimaryDanger"
+export * from "./PrimaryDangerProps"
+export * from "./PrimaryDangerRef"

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

@@ -0,0 +1,140 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import type {
+	TextStyle,
+	ViewStyle,
+} from "react-native"
+
+import {
+	Color,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	CarbonStyleSheet,
+} from "../../../carbon-style-sheet"
+import {
+	ThemeContext,
+} from "../../../contexts"
+
+
+import {
+	BaseColor,
+	type BaseColorProps,
+	type BaseColorState,
+} from "../base-color"
+
+import type {
+	SecondaryProps,
+} from "./SecondaryProps"
+
+import type {
+	SecondaryRef,
+} from "./SecondaryRef"
+
+export const Secondary = forwardRef<SecondaryRef, SecondaryProps>(
+	function Secondary(
+		props,
+		ref,
+	) {
+
+		const
+			themeContext =
+				useContext(ThemeContext)
+
+		return (
+			<BaseColor
+				{ ...props }
+				ref={ ref }
+				android_rippleEffectColor={ mapAndroidRippleEffectColor[themeContext.colorScheme] }
+				colorStateStyle={{
+					background: {
+						default: backgroundStyleSheet.default,
+						focused: backgroundStyleSheet.focused,
+						hovered: backgroundStyleSheet.hovered,
+						pressed: backgroundStyleSheet.pressed,
+						disabled: backgroundStyleSheet.disabled,
+					},
+					text: {
+						default: textStyleSheet.default,
+						focused: textStyleSheet.focused,
+						hovered: textStyleSheet.hovered,
+						pressed: textStyleSheet.pressed,
+						disabled: textStyleSheet.disabled,
+					},
+					icon: mapIconColor[themeContext.colorScheme],
+				}}
+			/>
+		)
+
+	},
+)
+
+const
+	backgroundStyleSheet =
+		CarbonStyleSheet.create<
+			Record<keyof BaseColorProps["colorStateStyle"]["background"], ViewStyle>
+		>({
+			default: {
+				backgroundColor: CarbonStyleSheet.color.button_secondary,
+			},
+			focused: {
+				backgroundColor: CarbonStyleSheet.color.button_secondary,
+			},
+			hovered: {
+				backgroundColor: CarbonStyleSheet.color.button_secondary_hover,
+			},
+			pressed: {
+				backgroundColor: CarbonStyleSheet.color.button_secondary_active,
+			},
+			disabled: {
+				backgroundColor: CarbonStyleSheet.color.button_disabled,
+			},
+		}),
+
+	textStyleSheet =
+		CarbonStyleSheet.create<
+			Record<keyof BaseColorProps["colorStateStyle"]["text"], TextStyle>
+		>({
+			default: {
+				color: CarbonStyleSheet.color.text_on_color,
+			},
+			focused: {
+				color: CarbonStyleSheet.color.text_on_color,
+			},
+			hovered: {
+				color: CarbonStyleSheet.color.text_on_color,
+			},
+			pressed: {
+				color: CarbonStyleSheet.color.text_on_color,
+			},
+			disabled: {
+				color: CarbonStyleSheet.color.text_on_color_disabled,
+			},
+		}),
+
+	mapIconColor: Record<ThemeContext["colorScheme"], Record<BaseColorState, string>> =
+		{
+			gray_10: {
+				default: Color.Token.gray_10.icon_on_color,
+				focused: Color.Token.gray_10.icon_on_color,
+				hovered: Color.Token.gray_10.icon_on_color,
+				pressed: Color.Token.gray_10.icon_on_color,
+				disabled: Color.Token.gray_10.icon_on_color_disabled,
+			},
+			gray_100: {
+				default: Color.Token.gray_100.icon_on_color,
+				focused: Color.Token.gray_100.icon_on_color,
+				hovered: Color.Token.gray_100.icon_on_color,
+				pressed: Color.Token.gray_100.icon_on_color,
+				disabled: Color.Token.gray_100.icon_on_color_disabled,
+			},
+		},
+
+	mapAndroidRippleEffectColor: Record<ThemeContext["colorScheme"], string> =
+		{
+			gray_10: Color.Token.gray_10.button_secondary_active,
+			gray_100: Color.Token.gray_100.button_secondary_active,
+		}

package/src/components/button/secondary/SecondaryProps.ts

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

package/src/components/button/secondary/SecondaryRef.ts

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

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

@@ -0,0 +1,3 @@
+export * from "./Secondary"
+export * from "./SecondaryProps"
+export * from "./SecondaryRef"

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

@@ -0,0 +1,157 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+	type TextStyle,
+	type ViewStyle,
+} from "react-native"
+
+import {
+	Color,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	CarbonStyleSheet,
+} from "../../../carbon-style-sheet"
+
+import {
+	ThemeContext,
+} from "../../../contexts"
+
+import {
+	BaseColor,
+	type BaseColorProps,
+	type BaseColorState,
+} from "../base-color"
+
+import type {
+	TertiaryProps,
+} from "./TertiaryProps"
+
+import type {
+	TertiaryRef,
+} from "./TertiaryRef"
+
+export const Tertiary = forwardRef<TertiaryRef, TertiaryProps>(
+	function Tertiary(
+		{
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			themeContext =
+				useContext(ThemeContext)
+
+		return (
+			<BaseColor
+				{ ...props }
+				ref={ ref }
+				android_rippleEffectColor={ mapAndroidRippleEffectColor[themeContext.colorScheme] }
+				colorStateStyle={{
+					background: {
+						default: backgroundStyleSheet.default,
+						focused: backgroundStyleSheet.focused,
+						hovered: backgroundStyleSheet.hovered,
+						pressed: backgroundStyleSheet.pressed,
+						disabled: backgroundStyleSheet.disabled,
+					},
+					text: {
+						default: textStyleSheet.default,
+						focused: textStyleSheet.focused,
+						hovered: textStyleSheet.hovered,
+						pressed: textStyleSheet.pressed,
+						disabled: textStyleSheet.disabled,
+					},
+					icon: mapIconColor[themeContext.colorScheme],
+				}}
+				style={ [baseStyle.tertiary, style] }
+			/>
+		)
+
+	},
+)
+
+const
+	baseStyle =
+		StyleSheet.create({
+			tertiary: {
+				borderWidth: 1,
+			},
+		}),
+
+	backgroundStyleSheet =
+		CarbonStyleSheet.create<
+			Record<keyof BaseColorProps["colorStateStyle"]["background"], ViewStyle>
+		>({
+			default: {
+				backgroundColor: "transparent",
+				borderColor: CarbonStyleSheet.color.button_tertiary,
+			},
+			focused: {
+				backgroundColor: CarbonStyleSheet.color.button_tertiary_hover,
+				borderColor: CarbonStyleSheet.color.focus,
+			},
+			hovered: {
+				backgroundColor: CarbonStyleSheet.color.button_tertiary_hover,
+				borderColor: CarbonStyleSheet.color.button_tertiary_hover,
+			},
+			pressed: {
+				backgroundColor: CarbonStyleSheet.color.button_tertiary_active,
+				borderColor: CarbonStyleSheet.color.button_tertiary_active,
+			},
+			disabled: {
+				backgroundColor: "transparent",
+				borderColor: CarbonStyleSheet.color.button_disabled,
+			},
+		}),
+
+	textStyleSheet =
+		CarbonStyleSheet.create<
+			Record<keyof BaseColorProps["colorStateStyle"]["text"], TextStyle>
+		>({
+			default: {
+				color: CarbonStyleSheet.color.button_tertiary,
+			},
+			focused: {
+				color: CarbonStyleSheet.color.button_tertiary,
+			},
+			hovered: {
+				color: CarbonStyleSheet.color.text_inverse,
+			},
+			pressed: {
+				color: CarbonStyleSheet.color.text_inverse,
+			},
+			disabled: {
+				color: CarbonStyleSheet.color.text_disabled,
+			},
+		}),
+
+	mapIconColor: Record<ThemeContext["colorScheme"], Record<BaseColorState, string>> =
+		{
+			gray_10: {
+				default: Color.Token.gray_10.button_tertiary,
+				focused: Color.Token.gray_10.button_tertiary,
+				hovered: Color.Token.gray_10.icon_inverse,
+				pressed: Color.Token.gray_10.icon_inverse,
+				disabled: Color.Token.gray_10.icon_disabled,
+			},
+			gray_100: {
+				default: Color.Token.gray_100.button_tertiary,
+				focused: Color.Token.gray_100.button_tertiary,
+				hovered: Color.Token.gray_100.icon_inverse,
+				pressed: Color.Token.gray_100.icon_inverse,
+				disabled: Color.Token.gray_100.icon_disabled,
+			},
+		},
+
+	mapAndroidRippleEffectColor: Record<ThemeContext["colorScheme"], string> =
+		{
+			gray_10: Color.Token.gray_10.button_tertiary_active,
+			gray_100: Color.Token.gray_100.button_tertiary_active,
+		}

package/src/components/button/tertiary/TertiaryProps.ts

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

package/src/components/button/tertiary/TertiaryRef.ts

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

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

@@ -0,0 +1,3 @@
+export * from "./Tertiary"
+export * from "./TertiaryProps"
+export * from "./TertiaryRef"

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

@@ -0,0 +1,157 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+	type TextStyle,
+	type ViewStyle,
+} from "react-native"
+
+import {
+	Color,
+} from "@audira/carbon-react-native-elements"
+
+import {
+	CarbonStyleSheet,
+} from "../../../carbon-style-sheet"
+
+import {
+	ThemeContext,
+} from "../../../contexts"
+
+import {
+	BaseColor,
+	type BaseColorProps,
+	type BaseColorState,
+} from "../base-color"
+
+import type {
+	TertiaryDangerProps,
+} from "./TertiaryDangerProps"
+
+import type {
+	TertiaryDangerRef,
+} from "./TertiaryDangerRef"
+
+export const TertiaryDanger = forwardRef<TertiaryDangerRef, TertiaryDangerProps>(
+	function TertiaryDanger(
+		{
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			themeContext =
+				useContext(ThemeContext)
+
+		return (
+			<BaseColor
+				{ ...props }
+				ref={ ref }
+				android_rippleEffectColor={ mapAndroidRippleEffectColor[themeContext.colorScheme] }
+				colorStateStyle={{
+					background: {
+						default: backgroundStyleSheet.default,
+						focused: backgroundStyleSheet.focused,
+						hovered: backgroundStyleSheet.hovered,
+						pressed: backgroundStyleSheet.pressed,
+						disabled: backgroundStyleSheet.disabled,
+					},
+					text: {
+						default: textStyleSheet.default,
+						focused: textStyleSheet.focused,
+						hovered: textStyleSheet.hovered,
+						pressed: textStyleSheet.pressed,
+						disabled: textStyleSheet.disabled,
+					},
+					icon: mapIconColor[themeContext.colorScheme],
+				}}
+				style={ [baseStyle.tertiaryDanger, style] }
+			/>
+		)
+
+	},
+)
+
+const
+	baseStyle =
+		StyleSheet.create({
+			tertiaryDanger: {
+				borderWidth: 1,
+			},
+		}),
+
+	backgroundStyleSheet =
+		CarbonStyleSheet.create<
+			Record<keyof BaseColorProps["colorStateStyle"]["background"], ViewStyle>
+		>({
+			default: {
+				backgroundColor: "transparent",
+				borderColor: CarbonStyleSheet.color.button_danger_secondary,
+			},
+			focused: {
+				backgroundColor: "transparent",
+				borderColor: CarbonStyleSheet.color.focus,
+			},
+			hovered: {
+				backgroundColor: CarbonStyleSheet.color.button_danger_hover,
+				borderColor: CarbonStyleSheet.color.button_danger_hover,
+			},
+			pressed: {
+				backgroundColor: CarbonStyleSheet.color.button_danger_active,
+				borderColor: CarbonStyleSheet.color.button_danger_active,
+			},
+			disabled: {
+				backgroundColor: "transparent",
+				borderColor: CarbonStyleSheet.color.button_disabled,
+			},
+		}),
+
+	textStyleSheet =
+		CarbonStyleSheet.create<
+			Record<keyof BaseColorProps["colorStateStyle"]["text"], TextStyle>
+		>({
+			default: {
+				color: CarbonStyleSheet.color.button_danger_secondary,
+			},
+			focused: {
+				color: CarbonStyleSheet.color.button_danger_secondary,
+			},
+			hovered: {
+				color: CarbonStyleSheet.color.text_on_color,
+			},
+			pressed: {
+				color: CarbonStyleSheet.color.text_on_color,
+			},
+			disabled: {
+				color: CarbonStyleSheet.color.text_disabled,
+			},
+		}),
+
+	mapIconColor: Record<ThemeContext["colorScheme"], Record<BaseColorState, string>> =
+		{
+			gray_10: {
+				default: Color.Token.gray_10.button_danger_secondary,
+				focused: Color.Token.gray_10.button_danger_secondary,
+				hovered: Color.Token.gray_10.icon_on_color,
+				pressed: Color.Token.gray_10.icon_on_color,
+				disabled: Color.Token.gray_10.icon_disabled,
+			},
+			gray_100: {
+				default: Color.Token.gray_100.button_danger_secondary,
+				focused: Color.Token.gray_100.button_danger_secondary,
+				hovered: Color.Token.gray_100.icon_on_color,
+				pressed: Color.Token.gray_100.icon_on_color,
+				disabled: Color.Token.gray_100.icon_disabled,
+			},
+		},
+
+	mapAndroidRippleEffectColor: Record<ThemeContext["colorScheme"], string> =
+		{
+			gray_10: Color.Token.gray_10.button_danger_active,
+			gray_100: Color.Token.gray_100.button_danger_active,
+		}