@audira/carbon-react-native 0.0.1-alpha.1

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

@@ -0,0 +1,132 @@
+import {
+	useContext,
+} from 'react'
+
+import {
+	StyleSheet,
+	type TextStyle,
+	type ViewStyle,
+} from 'react-native'
+
+import {
+	SpacingConstant,
+} from '../../../constants'
+
+import {
+	ThemeContext,
+} from '../../../contexts'
+
+import {
+	StyleSheet as StyleSheetColor,
+} from '../../../_style-sheet'
+
+import {
+	BaseColor,
+	type BaseColorProps,
+} from '../base-color'
+
+export interface GhostProps extends Omit<
+	BaseColorProps,
+	| 'android_rippleEffectColor'
+	| 'colorStateStyle'
+> {
+}
+
+export function Ghost({
+	text,
+	iconStyle,
+	...props
+}: GhostProps) {
+
+	const
+		themeContext =
+			useContext(ThemeContext)
+
+	return (
+		<BaseColor
+			{ ...props }
+			text={ text }
+			android_rippleEffectColor={ themeContext.color.background_active }
+			colorStateStyle={{
+				background: {
+					default: colorStyle.background_default,
+					focused: colorStyle.background_pressed,
+					hovered: colorStyle.background_hovered,
+					pressed: colorStyle.background_pressed,
+					disabled: colorStyle.background_disabled,
+				},
+				text: {
+					default: colorStyle.text_default,
+					focused: colorStyle.text_focused,
+					hovered: colorStyle.text_hovered,
+					pressed: colorStyle.text_pressed,
+					disabled: colorStyle.text_disabled,
+				},
+				icon: {
+					default: themeContext.color.link_primary,
+					focused: themeContext.color.link_primary,
+					hovered: themeContext.color.link_primary_hover,
+					pressed: themeContext.color.link_primary,
+					disabled: themeContext.color.icon_disabled,
+				},
+			}}
+			iconStyle={ [ mapIconPLByText[`${!!text}`], iconStyle ] }
+		/>
+	)
+
+}
+
+const
+	colorStyle =
+		StyleSheetColor.create<
+			Record<
+				`${'background' | 'text'}_${keyof BaseColorProps['colorStateStyle']['text']}`,
+				ViewStyle | TextStyle
+			>
+		>(color => ({
+			background_default: {
+				backgroundColor: 'transparent',
+			},
+			background_focused: {
+				borderWidth: 1,
+				borderColor: color.focus,
+			},
+			background_hovered: {
+				backgroundColor: color.background_hover,
+			},
+			background_pressed: {
+				backgroundColor: color.background_active,
+			},
+			background_disabled: {
+				backgroundColor: 'transparent',
+			},
+
+			text_default: {
+				color: color.link_primary,
+			},
+			text_focused: {
+				color: color.link_primary,
+			},
+			text_hovered: {
+				color: color.link_primary_hover,
+			},
+			text_pressed: {
+				color: color.link_primary,
+			},
+			text_disabled: {
+				color: color.text_disabled,
+			},
+		})),
+
+	style =
+		StyleSheet.create({
+			iconPL8: {
+				paddingLeft: SpacingConstant.spacing_03,
+			},
+		}),
+
+	mapIconPLByText: Record<string, typeof style['iconPL8'] | null> =
+		{
+			false: null,
+			true: style.iconPL8,
+		}

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

@@ -0,0 +1,132 @@
+import {
+	useContext,
+} from 'react'
+
+import {
+	StyleSheet,
+	type TextStyle,
+	type ViewStyle,
+} from 'react-native'
+
+import {
+	SpacingConstant,
+} from '../../../constants'
+
+import {
+	ThemeContext,
+} from '../../../contexts'
+
+import {
+	StyleSheet as StyleSheetColor,
+} from '../../../_style-sheet'
+
+import {
+	BaseColor,
+	type BaseColorProps,
+} from '../base-color'
+
+export interface GhostDangerProps extends Omit<
+	BaseColorProps,
+	| 'android_rippleEffectColor'
+	| 'colorStateStyle'
+> {
+}
+
+export function GhostDanger({
+	text,
+	iconStyle,
+	...props
+}: GhostDangerProps) {
+
+	const
+		themeContext =
+			useContext(ThemeContext)
+
+	return (
+		<BaseColor
+			{ ...props }
+			text={ text }
+			android_rippleEffectColor={ themeContext.color.button_danger_active }
+			colorStateStyle={{
+				background: {
+					default: colorStyle.background_default,
+					focused: colorStyle.background_pressed,
+					hovered: colorStyle.background_hovered,
+					pressed: colorStyle.background_pressed,
+					disabled: colorStyle.background_disabled,
+				},
+				text: {
+					default: colorStyle.text_default,
+					focused: colorStyle.text_focused,
+					hovered: colorStyle.text_hovered,
+					pressed: colorStyle.text_pressed,
+					disabled: colorStyle.text_disabled,
+				},
+				icon: {
+					default: themeContext.color.button_danger_secondary,
+					focused: themeContext.color.button_danger_secondary,
+					hovered: themeContext.color.icon_on_color,
+					pressed: themeContext.color.icon_on_color,
+					disabled: themeContext.color.icon_disabled,
+				},
+			}}
+			iconStyle={ [ mapIconPLByText[`${!!text}`], iconStyle ] }
+		/>
+	)
+
+}
+
+const
+	colorStyle =
+		StyleSheetColor.create<
+			Record<
+				`${'background' | 'text'}_${keyof BaseColorProps['colorStateStyle']['text']}`,
+				ViewStyle | TextStyle
+			>
+		>(color => ({
+			background_default: {
+				backgroundColor: 'transparent',
+			},
+			background_focused: {
+				borderWidth: 1,
+				borderColor: color.focus,
+			},
+			background_hovered: {
+				backgroundColor: color.button_danger_hover,
+			},
+			background_pressed: {
+				backgroundColor: color.button_danger_active,
+			},
+			background_disabled: {
+				backgroundColor: color.button_disabled,
+			},
+
+			text_default: {
+				color: color.button_danger_secondary,
+			},
+			text_focused: {
+				color: color.button_danger_secondary,
+			},
+			text_hovered: {
+				color: color.text_on_color,
+			},
+			text_pressed: {
+				color: color.text_on_color,
+			},
+			text_disabled: {
+				color: color.text_disabled,
+			},
+		})),
+
+	style =
+		StyleSheet.create({
+			iconPL8: {
+				paddingLeft: SpacingConstant.spacing_03,
+			},
+		}),
+
+	mapIconPLByText: Record<string, typeof style['iconPL8'] | null> =
+		{
+			false: null,
+			true: style.iconPL8,
+		}

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

@@ -0,0 +1,125 @@
+import {
+	useContext,
+} from 'react'
+
+import type {
+	TextStyle,
+	ViewStyle,
+} from 'react-native'
+
+import {
+	ThemeContext,
+} from '../../../contexts'
+
+import type {
+	SharedType,
+} from '../../../types'
+
+import {
+	StyleSheet,
+} from '../../../_style-sheet'
+
+import {
+	BaseColor,
+	type BaseColorProps,
+} from '../base-color'
+
+export interface GhostIconProps extends Omit<
+	BaseColorProps,
+	| 'android_rippleEffectColor'
+	| 'colorStateStyle'
+	| 'icon'
+	| 'text'
+> {
+	icon: SharedType.CarbonIcon,
+	selected?: boolean,
+}
+
+export function GhostIcon({
+	selected,
+	...props
+}: GhostIconProps) {
+
+	const
+		themeContext =
+			useContext(ThemeContext)
+
+	return (
+		<BaseColor
+			{ ...props }
+			android_rippleEffectColor={ themeContext.color.background_active }
+			colorStateStyle={{
+				background: {
+					default: selected
+						? style.background_default
+						: style.background_default_selected,
+					focused: style.background_focused,
+					hovered: style.background_hovered,
+					pressed: style.background_pressed,
+					disabled: style.background_disabled,
+				},
+				text: {
+					default: style.text_default,
+					focused: style.text_focused,
+					hovered: style.text_hovered,
+					pressed: style.text_pressed,
+					disabled: style.text_disabled,
+				},
+				icon: {
+					default: themeContext.color.icon_primary,
+					focused: themeContext.color.icon_primary,
+					hovered: themeContext.color.icon_primary,
+					pressed: themeContext.color.icon_primary,
+					disabled: themeContext.color.icon_disabled,
+				},
+			}}
+		/>
+	)
+
+}
+
+const
+	style =
+		StyleSheet.create<
+			Record<
+				| `${'background' | 'text'}_${keyof BaseColorProps['colorStateStyle']['text']}`
+				| 'background_default_selected',
+				ViewStyle | TextStyle
+			>
+		>(color => ({
+			background_default: {
+				backgroundColor: 'transparent',
+			},
+			background_default_selected: {
+				backgroundColor: color.background_selected,
+			},
+			background_focused: {
+				borderWidth: 1,
+				borderColor: color.focus,
+			},
+			background_hovered: {
+				backgroundColor: color.background_hover,
+			},
+			background_pressed: {
+				backgroundColor: color.background_active,
+			},
+			background_disabled: {
+				backgroundColor: 'transparent',
+			},
+
+			text_default: {
+				color: 'transparent',
+			},
+			text_focused: {
+				color: 'transparent',
+			},
+			text_hovered: {
+				color: 'transparent',
+			},
+			text_pressed: {
+				color: 'transparent',
+			},
+			text_disabled: {
+				color: 'transparent',
+			},
+		}))

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/index.tsx

@@ -0,0 +1,108 @@
+import {
+	useContext,
+} from 'react'
+
+import type {
+	TextStyle,
+	ViewStyle,
+} from 'react-native'
+
+import {
+	ThemeContext,
+} from '../../../contexts'
+
+import {
+	StyleSheet,
+} from '../../../_style-sheet'
+
+import {
+	BaseColor,
+	type BaseColorProps,
+} from '../base-color'
+
+export interface PrimaryProps extends Omit<
+	BaseColorProps,
+	| 'android_rippleEffectColor'
+	| 'colorStateStyle'
+	| 'iconContainerStyle'
+> {
+}
+
+export function Primary(props: PrimaryProps) {
+
+	const
+		themeContext =
+			useContext(ThemeContext)
+
+	return (
+		<BaseColor
+			{ ...props }
+			android_rippleEffectColor={ themeContext.color.button_primary_active }
+			colorStateStyle={{
+				background: {
+					default: colorStyle.background_default,
+					focused: colorStyle.background_pressed,
+					hovered: colorStyle.background_hovered,
+					pressed: colorStyle.background_pressed,
+					disabled: colorStyle.background_disabled,
+				},
+				text: {
+					default: colorStyle.text_default,
+					focused: colorStyle.text_focused,
+					hovered: colorStyle.text_hovered,
+					pressed: colorStyle.text_pressed,
+					disabled: colorStyle.text_disabled,
+				},
+				icon: {
+					default: themeContext.color.icon_on_color,
+					focused: themeContext.color.icon_on_color,
+					hovered: themeContext.color.icon_on_color,
+					pressed: themeContext.color.icon_on_color,
+					disabled: themeContext.color.icon_on_color_disabled,
+				},
+			}}
+		/>
+	)
+
+}
+
+const
+	colorStyle =
+		StyleSheet.create<
+			Record<
+				`${'background' | 'text'}_${keyof BaseColorProps['colorStateStyle']['text']}`,
+				ViewStyle | TextStyle
+			>
+		>(color => ({
+			background_default: {
+				backgroundColor: color.button_primary,
+			},
+			background_focused: {
+				backgroundColor: color.button_primary,
+			},
+			background_hovered: {
+				backgroundColor: color.button_primary_hover,
+			},
+			background_pressed: {
+				backgroundColor: color.button_primary_active,
+			},
+			background_disabled: {
+				backgroundColor: color.button_disabled,
+			},
+
+			text_default: {
+				color: color.text_on_color,
+			},
+			text_focused: {
+				color: color.text_on_color,
+			},
+			text_hovered: {
+				color: color.text_on_color,
+			},
+			text_pressed: {
+				color: color.text_on_color,
+			},
+			text_disabled: {
+				color: color.text_on_color_disabled,
+			},
+		}))

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

@@ -0,0 +1,108 @@
+import {
+	useContext,
+} from 'react'
+
+import type {
+	TextStyle,
+	ViewStyle,
+} from 'react-native'
+
+import {
+	ThemeContext,
+} from '../../../contexts'
+
+import {
+	StyleSheet,
+} from '../../../_style-sheet'
+
+import {
+	BaseColor,
+	type BaseColorProps,
+} from '../base-color'
+
+export interface PrimaryDangerProps extends Omit<
+	BaseColorProps,
+	| 'android_rippleEffectColor'
+	| 'colorStateStyle'
+	| 'iconContainerStyle'
+> {
+}
+
+export function PrimaryDanger(props: PrimaryDangerProps) {
+
+	const
+		themeContext =
+			useContext(ThemeContext)
+
+	return (
+		<BaseColor
+			{ ...props }
+			android_rippleEffectColor={ themeContext.color.button_danger_active }
+			colorStateStyle={{
+				background: {
+					default: style.background_default,
+					focused: style.background_pressed,
+					hovered: style.background_hovered,
+					pressed: style.background_pressed,
+					disabled: style.background_disabled,
+				},
+				text: {
+					default: style.text_default,
+					focused: style.text_focused,
+					hovered: style.text_hovered,
+					pressed: style.text_pressed,
+					disabled: style.text_disabled,
+				},
+				icon: {
+					default: themeContext.color.icon_on_color,
+					focused: themeContext.color.icon_on_color,
+					hovered: themeContext.color.icon_on_color,
+					pressed: themeContext.color.icon_on_color,
+					disabled: themeContext.color.icon_on_color_disabled,
+				},
+			}}
+		/>
+	)
+
+}
+
+const
+	style =
+		StyleSheet.create<
+			Record<
+				`${'background' | 'text'}_${keyof BaseColorProps['colorStateStyle']['text']}`,
+				ViewStyle | TextStyle
+			>
+		>(color => ({
+			background_default: {
+				backgroundColor: color.button_danger_primary,
+			},
+			background_focused: {
+				backgroundColor: color.button_danger_primary,
+			},
+			background_hovered: {
+				backgroundColor: color.button_danger_hover,
+			},
+			background_pressed: {
+				backgroundColor: color.button_danger_active,
+			},
+			background_disabled: {
+				backgroundColor: color.button_disabled,
+			},
+
+			text_default: {
+				color: color.text_on_color,
+			},
+			text_focused: {
+				color: color.text_on_color,
+			},
+			text_hovered: {
+				color: color.text_on_color,
+			},
+			text_pressed: {
+				color: color.text_on_color,
+			},
+			text_disabled: {
+				color: color.text_on_color_disabled,
+			},
+		}))

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

@@ -0,0 +1,108 @@
+import {
+	useContext,
+} from 'react'
+
+import type {
+	TextStyle,
+	ViewStyle,
+} from 'react-native'
+
+import {
+	ThemeContext,
+} from '../../../contexts'
+
+import {
+	StyleSheet,
+} from '../../../_style-sheet'
+
+import {
+	BaseColor,
+	type BaseColorProps,
+} from '../base-color'
+
+export interface SecondaryProps extends Omit<
+	BaseColorProps,
+	| 'android_rippleEffectColor'
+	| 'colorStateStyle'
+	| 'iconContainerStyle'
+> {
+}
+
+export function Secondary(props: SecondaryProps) {
+
+	const
+		themeContext =
+			useContext(ThemeContext)
+
+	return (
+		<BaseColor
+			{ ...props }
+			android_rippleEffectColor={ themeContext.color.button_secondary_active }
+			colorStateStyle={{
+				background: {
+					default: style.background_default,
+					focused: style.background_pressed,
+					hovered: style.background_hovered,
+					pressed: style.background_pressed,
+					disabled: style.background_disabled,
+				},
+				text: {
+					default: style.text_default,
+					focused: style.text_focused,
+					hovered: style.text_hovered,
+					pressed: style.text_pressed,
+					disabled: style.text_disabled,
+				},
+				icon: {
+					default: themeContext.color.icon_on_color,
+					focused: themeContext.color.icon_on_color,
+					hovered: themeContext.color.icon_on_color,
+					pressed: themeContext.color.icon_on_color,
+					disabled: themeContext.color.icon_on_color_disabled,
+				},
+			}}
+		/>
+	)
+
+}
+
+const
+	style =
+		StyleSheet.create<
+			Record<
+				`${'background' | 'text'}_${keyof BaseColorProps['colorStateStyle']['text']}`,
+				ViewStyle | TextStyle
+			>
+		>(color => ({
+			background_default: {
+				backgroundColor: color.button_secondary,
+			},
+			background_focused: {
+				backgroundColor: color.button_secondary,
+			},
+			background_hovered: {
+				backgroundColor: color.button_secondary_hover,
+			},
+			background_pressed: {
+				backgroundColor: color.button_secondary_active,
+			},
+			background_disabled: {
+				backgroundColor: color.button_disabled,
+			},
+
+			text_default: {
+				color: color.text_on_color,
+			},
+			text_focused: {
+				color: color.text_on_color,
+			},
+			text_hovered: {
+				color: color.text_on_color,
+			},
+			text_pressed: {
+				color: color.text_on_color,
+			},
+			text_disabled: {
+				color: color.text_on_color_disabled,
+			},
+		}))