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

package/src/components/button/base-color/BaseColorState.ts

@@ -0,0 +1,6 @@
+export type BaseColorState =
+	| "default"
+	| "focused"
+	| "hovered"
+	| "pressed"
+	| "disabled"

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

@@ -0,0 +1,4 @@
+export * from "./BaseColor"
+export * from "./BaseColorProps"
+export * from "./BaseColorRef"
+export * from "./BaseColorState"

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

@@ -0,0 +1,165 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+	type TextStyle,
+	type ViewStyle,
+} from "react-native"
+
+import {
+	Color,
+	Spacing,
+} 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 {
+	GhostProps,
+} from "./GhostProps"
+
+import type {
+	GhostRef,
+} from "./GhostRef"
+
+export const Ghost = forwardRef<GhostRef, GhostProps>(
+	function Ghost(
+		{
+			text,
+			iconProps,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			themeContext =
+				useContext(ThemeContext)
+
+		return (
+			<BaseColor
+				{ ...props }
+				ref={ ref }
+				text={ text }
+				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],
+				}}
+				iconProps={{
+					...iconProps,
+					style: [mapIconPLByText[`${!!text}`], iconProps?.style],
+				}}
+			/>
+		)
+
+	},
+)
+
+const
+	backgroundStyleSheet =
+		CarbonStyleSheet.create<
+			Record<keyof BaseColorProps["colorStateStyle"]["background"], ViewStyle>
+		>({
+			default: {
+				backgroundColor: "transparent",
+			},
+			focused: {
+				borderWidth: 1,
+				borderColor: CarbonStyleSheet.color.focus,
+			},
+			hovered: {
+				backgroundColor: CarbonStyleSheet.color.background_hover,
+			},
+			pressed: {
+				backgroundColor: CarbonStyleSheet.color.background_active,
+			},
+			disabled: {
+				backgroundColor: "transparent",
+			},
+		}),
+
+	textStyleSheet =
+		CarbonStyleSheet.create<
+			Record<keyof BaseColorProps["colorStateStyle"]["text"], TextStyle>
+		>({
+			default: {
+				color: CarbonStyleSheet.color.link_primary,
+			},
+			focused: {
+				color: CarbonStyleSheet.color.link_primary,
+			},
+			hovered: {
+				color: CarbonStyleSheet.color.link_primary_hover,
+			},
+			pressed: {
+				color: CarbonStyleSheet.color.link_primary,
+			},
+			disabled: {
+				color: CarbonStyleSheet.color.text_disabled,
+			},
+		}),
+
+	style =
+		StyleSheet.create({
+			iconPL8: {
+				paddingLeft: Spacing.spacing_03,
+			},
+		}),
+
+	mapIconPLByText: Record<string, typeof style["iconPL8"] | null> =
+		{
+			false: null,
+			true: style.iconPL8,
+		},
+
+	mapIconColor: Record<ThemeContext["colorScheme"], Record<BaseColorState, string>> =
+		{
+			gray_10: {
+				default: Color.Token.gray_10.link_primary,
+				focused: Color.Token.gray_10.link_primary,
+				hovered: Color.Token.gray_10.link_primary_hover,
+				pressed: Color.Token.gray_10.link_primary,
+				disabled: Color.Token.gray_10.icon_disabled,
+			},
+			gray_100: {
+				default: Color.Token.gray_100.link_primary,
+				focused: Color.Token.gray_100.link_primary,
+				hovered: Color.Token.gray_100.link_primary_hover,
+				pressed: Color.Token.gray_100.link_primary,
+				disabled: Color.Token.gray_100.icon_disabled,
+			},
+		},
+
+	mapAndroidRippleEffectColor: Record<ThemeContext["colorScheme"], string> =
+		{
+			gray_10: Color.Token.gray_10.background_active,
+			gray_100: Color.Token.gray_100.background_active,
+		}

package/src/components/button/ghost/GhostProps.ts

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

package/src/components/button/ghost/GhostRef.ts

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

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

@@ -0,0 +1,3 @@
+export * from "./Ghost"
+export * from "./GhostProps"
+export * from "./GhostRef"

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

@@ -0,0 +1,165 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+	type TextStyle,
+	type ViewStyle,
+} from "react-native"
+
+import {
+	Color,
+	Spacing,
+} 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 {
+	GhostDangerProps,
+} from "./GhostDangerProps"
+
+import type {
+	GhostDangerRef,
+} from "./GhostDangerRef"
+
+export const GhostDanger = forwardRef<GhostDangerRef, GhostDangerProps>(
+	function GhostDanger(
+		{
+			text,
+			iconProps,
+			...props
+		},
+		ref,
+	) {
+
+		const
+			themeContext =
+				useContext(ThemeContext)
+
+		return (
+			<BaseColor
+				{ ...props }
+				ref={ ref }
+				text={ text }
+				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],
+				}}
+				iconProps={{
+					...iconProps,
+					style: [mapIconPLByText[`${!!text}`], iconProps?.style],
+				}}
+			/>
+		)
+
+	},
+)
+
+const
+	backgroundStyleSheet =
+		CarbonStyleSheet.create<
+			Record<keyof BaseColorProps["colorStateStyle"]["background"], ViewStyle>
+		>({
+			default: {
+				backgroundColor: "transparent",
+			},
+			focused: {
+				borderWidth: 1,
+				borderColor: CarbonStyleSheet.color.focus,
+			},
+			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.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,
+			},
+		}),
+
+	style =
+		StyleSheet.create({
+			iconPL8: {
+				paddingLeft: Spacing.spacing_03,
+			},
+		}),
+
+	mapIconPLByText: Record<string, typeof style["iconPL8"] | null> =
+		{
+			false: null,
+			true: style.iconPL8,
+		},
+
+	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,
+		}

package/src/components/button/ghost-danger/GhostDangerProps.ts

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

package/src/components/button/ghost-danger/GhostDangerRef.ts

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

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

@@ -0,0 +1,3 @@
+export * from "./GhostDanger"
+export * from "./GhostDangerProps"
+export * from "./GhostDangerRef"

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

@@ -0,0 +1,127 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	StyleSheet,
+	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 {
+	GhostIconProps,
+} from "./GhostIconProps"
+
+import type {
+	GhostIconRef,
+} from "./GhostIconRef"
+
+export const GhostIcon = forwardRef<GhostIconRef, GhostIconProps>(
+	function GhostIcon(
+		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: style.text,
+						focused: style.text,
+						hovered: style.text,
+						pressed: style.text,
+						disabled: style.text,
+					},
+					icon: mapIconColor[themeContext.colorScheme],
+				}}
+			/>
+		)
+
+	},
+)
+
+const
+	backgroundStyleSheet =
+		CarbonStyleSheet.create<
+			Record<keyof BaseColorProps["colorStateStyle"]["background"], ViewStyle>
+		>({
+			default: {
+				backgroundColor: "transparent",
+			},
+			focused: {
+				borderWidth: 1,
+				borderColor: CarbonStyleSheet.color.focus,
+			},
+			hovered: {
+				backgroundColor: CarbonStyleSheet.color.background_hover,
+			},
+			pressed: {
+				backgroundColor: CarbonStyleSheet.color.background_active,
+			},
+			disabled: {
+				backgroundColor: "transparent",
+			},
+		}),
+
+	style =
+		StyleSheet.create({
+			text: {
+				color: "transparent",
+			},
+		}),
+
+	mapIconColor: Record<ThemeContext["colorScheme"], Record<BaseColorState, string>> =
+		{
+			gray_10: {
+				default: Color.Token.gray_10.icon_primary,
+				focused: Color.Token.gray_10.icon_primary,
+				hovered: Color.Token.gray_10.icon_primary,
+				pressed: Color.Token.gray_10.icon_primary,
+				disabled: Color.Token.gray_10.icon_disabled,
+			},
+			gray_100: {
+				default: Color.Token.gray_100.icon_primary,
+				focused: Color.Token.gray_100.icon_primary,
+				hovered: Color.Token.gray_100.icon_primary,
+				pressed: Color.Token.gray_100.icon_primary,
+				disabled: Color.Token.gray_100.icon_disabled,
+			},
+		},
+
+	mapAndroidRippleEffectColor: Record<ThemeContext["colorScheme"], string> =
+		{
+			gray_10: Color.Token.gray_10.background_active,
+			gray_100: Color.Token.gray_100.background_active,
+		}

package/src/components/button/ghost-icon/GhostIconProps.ts

@@ -0,0 +1,17 @@
+import type {
+	InlineLoadingProps,
+} from "../../inline-loading/InlineLoadingProps"
+
+import type {
+	BaseColorProps,
+} from "../base-color/BaseColorProps"
+
+export interface GhostIconProps extends Omit<
+	BaseColorProps,
+	| "android_rippleEffectColor"
+	| "colorStateStyle"
+	| "text"
+	| "inlineLoadingProps"
+> {
+	inlineLoadingProps?: Omit<InlineLoadingProps, "text">,
+}

package/src/components/button/ghost-icon/GhostIconRef.ts

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

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

@@ -0,0 +1,3 @@
+export * from "./GhostIcon"
+export * from "./GhostIconProps"
+export * from "./GhostIconRef"

package/src/components/button/index.tsx

@@ -0,0 +1,11 @@
+export * from "./base"
+export * from "./base-color"
+export * from "./ghost"
+export * from "./ghost-danger"
+export * from "./ghost-icon"
+export * from "./primary"
+export * from "./primary-danger"
+export * from "./secondary"
+export * from "./Size"
+export * from "./tertiary"
+export * from "./tertiary-danger"

package/src/components/button/primary/Primary.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 {
+	PrimaryProps,
+} from "./PrimaryProps"
+
+import type {
+	PrimaryRef,
+} from "./PrimaryRef"
+
+export const Primary = forwardRef<PrimaryRef, PrimaryProps>(
+	function Primary(
+		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_primary,
+			},
+			focused: {
+				backgroundColor: CarbonStyleSheet.color.button_primary,
+			},
+			hovered: {
+				backgroundColor: CarbonStyleSheet.color.button_primary_hover,
+			},
+			pressed: {
+				backgroundColor: CarbonStyleSheet.color.button_primary_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_primary_active,
+			gray_100: Color.Token.gray_100.button_primary_active,
+		}