@itcase/ui-react-native 1.10.81

package/src/components/InputNumber/appearance/inputNumberStyle.ts

@@ -0,0 +1,19 @@
+import type { InputNumberAppearance } from '../InputNumber.interface'
+
+const inputNumberAppearanceStyle = {
+  solid: {
+    borderColor: 'none',
+  },
+  outlined: {
+    fill: 'none',
+  },
+  full: {
+    borderColor: 'none',
+  },
+  ghost: {
+    fill: 'none',
+    borderColor: 'none',
+  },
+} satisfies InputNumberAppearance
+
+export { inputNumberAppearanceStyle }

package/src/components/InputNumber/appearance/inputNumberSuccess.ts

@@ -0,0 +1,14 @@
+import type { InputNumberAppearance } from '../InputNumber.interface'
+
+const inputNumberAppearanceSuccess = {
+  successPrimary: {
+    fill: 'successTertiary',
+    borderColor: 'successBorderQuaternary',
+    buttonFill: 'successTertiary',
+    iconFill: 'successTertiary',
+    iconFillIcon: 'successItemQuaternary',
+    inputNumberTextColor: 'surfaceTextQuaternary',
+  },
+} satisfies InputNumberAppearance
+
+export { inputNumberAppearanceSuccess }

package/src/components/InputNumber/index.ts

@@ -0,0 +1,34 @@
+import { InputNumber, inputNumberConfig } from './InputNumber'
+import { inputNumberAppearance } from './InputNumber.appearance'
+import type {
+  InputNumberAppearance,
+  InputNumberAppearanceKey,
+  InputNumberAppearanceProps,
+  InputNumberConfig,
+  InputNumberProps,
+  InputNumberType,
+  OnChangeValueParams,
+} from './InputNumber.interface'
+import { inputNumberShapeList } from './styles/inputNumberShape'
+import type { inputNumberShapePropsType } from './styles/inputNumberShape'
+import { inputNumberSizeList } from './styles/inputNumberSize'
+import type { inputNumberSizePropsType } from './styles/inputNumberSize'
+
+export {
+  InputNumber,
+  inputNumberAppearance,
+  inputNumberConfig,
+  inputNumberShapeList,
+  inputNumberSizeList,
+}
+export type {
+  InputNumberAppearance,
+  InputNumberAppearanceKey,
+  InputNumberAppearanceProps,
+  InputNumberConfig,
+  InputNumberProps,
+  inputNumberShapePropsType,
+  inputNumberSizePropsType,
+  InputNumberType,
+  OnChangeValueParams,
+}

package/src/components/InputNumber/stories/InputNumber.stories.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { InputNumber } from '../InputNumber'
+import type { InputNumberProps } from '../InputNumber.interface'
+
+const InputNumberMeta: Meta<typeof InputNumber> = {
+  title: 'Atoms / InputNumber',
+  component: InputNumber,
+  args: {
+    appearance: 'defaultPrimary',
+    min: 0,
+    max: 10,
+    size: 'm',
+    appearanceStyle: 'solid',
+    shape: 'rounded',
+    step: 1,
+    value: 1,
+  },
+}
+
+export default InputNumberMeta
+
+function ControlledInputNumber(props: InputNumberProps) {
+  const { value: valueProp, onChange, ...restProps } = props
+  const [value, setValue] = useState(valueProp ?? 0)
+
+  return (
+    <InputNumber
+      {...restProps}
+      value={value}
+      onChange={(nextValue) => {
+        setValue(nextValue)
+        if (onChange) {
+          onChange(nextValue)
+        }
+      }}
+    />
+  )
+}
+
+export const Default: StoryObj<typeof InputNumber> = {
+  render: (args) => {
+    return <ControlledInputNumber {...args} />
+  },
+}
+
+export const Native: StoryObj<typeof InputNumber> = {
+  args: {
+    type: 'native',
+  },
+  render: (args) => {
+    return <ControlledInputNumber {...args} />
+  },
+}
+
+export const Error: StoryObj<typeof InputNumber> = {
+  args: {
+    appearance: 'errorPrimary',
+    isError: true,
+  },
+  render: (args) => {
+    return <ControlledInputNumber {...args} />
+  },
+}
+
+export const Success: StoryObj<typeof InputNumber> = {
+  args: {
+    appearance: 'successPrimary',
+  },
+  render: (args) => {
+    return <ControlledInputNumber {...args} />
+  },
+}
+
+export const SizeS: StoryObj<typeof InputNumber> = {
+  args: {
+    size: 's',
+  },
+  render: (args) => {
+    return <ControlledInputNumber {...args} />
+  },
+}
+
+export const SizeXL: StoryObj<typeof InputNumber> = {
+  args: {
+    size: 'xl',
+  },
+  render: (args) => {
+    return <ControlledInputNumber {...args} />
+  },
+}

package/src/components/InputNumber/styles/inputNumber.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native'
+
+const inputNumberStyles = StyleSheet.create({
+  inputNumber: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderColor: 'transparent',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    gap: 4,
+  },
+  inputNumber__field: {
+    maxWidth: 60,
+    flexGrow: 0,
+    margin: 0,
+    padding: 0,
+    textAlign: 'center',
+  },
+  inputNumber__icon: {
+    alignSelf: 'center',
+  },
+})
+
+export { inputNumberStyles }

package/src/components/InputNumber/styles/inputNumberShape.ts

@@ -0,0 +1,34 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const inputNumberShapeStyles = StyleSheet.create({
+  inputNumber_shape_circular: {
+    borderRadius: 100,
+  },
+  inputNumber_shape_rounded: {
+    borderRadius: 8,
+  },
+  inputNumber_shape_roundedL: {
+    borderRadius: 12,
+  },
+  inputNumber_shape_roundedM: {
+    borderRadius: 8,
+  },
+  inputNumber_shape_roundedS: {
+    borderRadius: 4,
+  },
+  inputNumber_shape_roundedXL: {
+    borderRadius: 16,
+  },
+})
+
+const inputNumberShapeList = getVariantsPropsList(
+  inputNumberShapeStyles,
+  'inputNumber_shape_',
+)
+
+type inputNumberShapePropsType = (typeof inputNumberShapeList)[number]
+
+export { inputNumberShapeList, inputNumberShapeStyles }
+export type { inputNumberShapePropsType }

package/src/components/InputNumber/styles/inputNumberSize.ts

@@ -0,0 +1,36 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const inputNumberSizeStyles = StyleSheet.create({
+  inputNumber_size_l: {
+    minHeight: 48,
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+  },
+  inputNumber_size_m: {
+    minHeight: 40,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+  },
+  inputNumber_size_s: {
+    minHeight: 28,
+    paddingVertical: 2,
+    paddingHorizontal: 12,
+  },
+  inputNumber_size_xl: {
+    minHeight: 56,
+    paddingVertical: 16,
+    paddingHorizontal: 12,
+  },
+})
+
+const inputNumberSizeList = getVariantsPropsList(
+  inputNumberSizeStyles,
+  'inputNumber_size_',
+)
+
+type inputNumberSizePropsType = (typeof inputNumberSizeList)[number]
+
+export { inputNumberSizeList, inputNumberSizeStyles }
+export type { inputNumberSizePropsType }

package/src/components/InputPassword/InputPassword.appearance.ts

@@ -0,0 +1,22 @@
+import { inputPasswordAppearanceDefault } from './appearance/inputPasswordDefault'
+import { inputPasswordAppearanceDisabled } from './appearance/inputPasswordDisabled'
+import { inputPasswordAppearanceError } from './appearance/inputPasswordError'
+import { inputPasswordAppearanceRequire } from './appearance/inputPasswordRequire'
+import { inputPasswordAppearanceShape } from './appearance/inputPasswordShape'
+import { inputPasswordAppearanceSize } from './appearance/inputPasswordSize'
+import { inputPasswordAppearanceStyle } from './appearance/inputPasswordStyle'
+import { inputPasswordAppearanceSuccess } from './appearance/inputPasswordSuccess'
+import type { InputPasswordAppearance } from './InputPassword.interface'
+
+const inputPasswordAppearance = {
+  ...inputPasswordAppearanceSize,
+  ...inputPasswordAppearanceDisabled,
+  ...inputPasswordAppearanceRequire,
+  ...inputPasswordAppearanceStyle,
+  ...inputPasswordAppearanceError,
+  ...inputPasswordAppearanceDefault,
+  ...inputPasswordAppearanceSuccess,
+  ...inputPasswordAppearanceShape,
+} satisfies InputPasswordAppearance
+
+export { inputPasswordAppearance }

package/src/components/InputPassword/InputPassword.interface.ts

@@ -0,0 +1,90 @@
+import type { StyleProp, TextInputFocusEvent, ViewStyle } from 'react-native'
+
+import type {
+  AppearanceConfig,
+  AppearanceKeysState,
+  AppearancePartialRecord,
+  AppearanceRecord,
+  AppearanceShapeKey,
+  AppearanceSizeKey,
+  AppearanceStyleKey,
+  BorderColorProps,
+  FillProps,
+  ItemFillActiveProps,
+  TextColorProps,
+  TextSizeProps,
+  TextWeightProps,
+  WidthProps,
+} from '@itcase/types-ui'
+
+import type { SvgIconComponent } from '../Icon/Icon.interface'
+import type { iconSizePropsType } from '../Icon/styles/iconSize'
+import type { inputPasswordShapePropsType } from './styles/inputPasswordShape'
+import type { inputPasswordSizePropsType } from './styles/inputPasswordSize'
+
+interface InputPasswordAppearanceProps {
+  borderColor?: BorderColorProps
+  caret?: ItemFillActiveProps
+  fill?: FillProps
+  iconFill?: ItemFillActiveProps
+  iconRevealableHide?: SvgIconComponent
+  iconRevealableShow?: SvgIconComponent
+  iconSize?: iconSizePropsType
+  placeholderTextColor?: TextColorProps
+  shape?: inputPasswordShapePropsType
+  size?: inputPasswordSizePropsType
+  textColor?: TextColorProps
+  textSize?: TextSizeProps
+  textWeight?: TextWeightProps
+  width?: WidthProps
+}
+
+type InputPasswordAppearanceKey = AppearanceKeysState
+type InputPasswordConfig = AppearanceConfig<
+  AppearanceKeysState,
+  InputPasswordAppearanceProps
+>
+type InputPasswordAppearance = InputPasswordConfig['appearance']
+type InputPasswordAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  InputPasswordAppearanceProps,
+  'borderColor' | 'fill'
+>
+type InputPasswordAppearanceShape = Partial<
+  Record<
+    AppearanceShapeKey,
+    Partial<Pick<InputPasswordAppearanceProps, 'shape'>>
+  >
+>
+type InputPasswordAppearanceSize = AppearancePartialRecord<
+  AppearanceSizeKey,
+  InputPasswordAppearanceProps,
+  'iconSize' | 'size' | 'textSize'
+>
+
+interface InputPasswordProps extends InputPasswordAppearanceProps {
+  isDisabled?: boolean
+  isError?: boolean
+  isReadOnly?: boolean
+  isRevealed?: boolean
+  onBlur?: (event: TextInputFocusEvent) => void
+  onChangeText?: (text: string) => void
+  onFocus?: (event: TextInputFocusEvent) => void
+  appearance?: InputPasswordAppearanceKey
+  appearanceStyle?: AppearanceStyleKey
+  maxLength?: number
+  placeholder?: string
+  style?: StyleProp<ViewStyle>
+  value?: string
+}
+
+export type {
+  InputPasswordAppearance,
+  InputPasswordAppearanceKey,
+  InputPasswordAppearanceProps,
+  InputPasswordAppearanceShape,
+  InputPasswordAppearanceSize,
+  InputPasswordAppearanceStyle,
+  InputPasswordConfig,
+  InputPasswordProps,
+}

package/src/components/InputPassword/InputPassword.styles.ts

@@ -0,0 +1,11 @@
+import { inputPasswordStyles as inputPasswordBaseStyles } from './styles/inputPassword'
+import { inputPasswordShapeStyles } from './styles/inputPasswordShape'
+import { inputPasswordSizeStyles } from './styles/inputPasswordSize'
+
+const styles = {
+  ...inputPasswordBaseStyles,
+  ...inputPasswordShapeStyles,
+  ...inputPasswordSizeStyles,
+}
+
+export { styles }

package/src/components/InputPassword/InputPassword.tsx

@@ -0,0 +1,202 @@
+import { useCallback, useMemo, useState } from 'react'
+import { Pressable, TextInput, View } from 'react-native'
+
+import { icons24 } from '@itcase/icons-default/default/svg'
+
+import { tokens } from '../../styles/tokens'
+import { Icon } from '../Icon'
+import { inputPasswordAppearance } from './InputPassword.appearance'
+import type {
+  InputPasswordAppearanceProps,
+  InputPasswordConfig,
+  InputPasswordProps,
+} from './InputPassword.interface'
+import { styles } from './InputPassword.styles'
+
+const DEFAULT_INPUT_PASSWORD_APPEARANCE = 'defaultPrimary'
+const DEFAULT_INPUT_PASSWORD_APPEARANCE_STYLE = 'solid'
+const DEFAULT_INPUT_PASSWORD_SIZE = 'm'
+const DEFAULT_INPUT_PASSWORD_ICON_SIZE = '24'
+
+const IconRevealableHideDefault = icons24.View.HideValue
+const IconRevealableShowDefault = icons24.View.ShowValue
+
+const inputPasswordConfig: InputPasswordConfig = {
+  appearance: {},
+  setAppearance: (newComponent) => {
+    inputPasswordConfig.appearance = newComponent
+  },
+}
+
+inputPasswordConfig.setAppearance(inputPasswordAppearance)
+
+function getTokenTextColor(
+  textColorKey?: InputPasswordAppearanceProps['textColor'],
+) {
+  if (!textColorKey) {
+    return undefined
+  }
+
+  const colorStyle = tokens[`text_color_${textColorKey}`]
+
+  if (colorStyle && 'color' in colorStyle) {
+    return colorStyle.color
+  }
+
+  return undefined
+}
+
+function getTokenIconFillColor(
+  iconFillKey?: InputPasswordAppearanceProps['caret'],
+) {
+  if (!iconFillKey) {
+    return undefined
+  }
+
+  const iconFillStyle = tokens[`icon_fill_${iconFillKey}`]
+
+  if (iconFillStyle && 'color' in iconFillStyle) {
+    return iconFillStyle.color
+  }
+
+  return undefined
+}
+
+function InputPassword(props: InputPasswordProps) {
+  const {
+    appearance,
+    width,
+    maxLength,
+    size,
+    fill,
+    borderColor,
+    textColor,
+    textSize,
+    textWeight,
+    appearanceStyle,
+    caret,
+    iconFill,
+    iconRevealableHide,
+    iconRevealableShow,
+    iconSize,
+    placeholder,
+    placeholderTextColor,
+    shape,
+    style,
+    value,
+    isDisabled,
+    isError,
+    isReadOnly,
+    isRevealed: isRevealedProp,
+    onBlur,
+    onChangeText,
+    onFocus,
+  } = props
+
+  const [isRevealed, setIsRevealed] = useState(Boolean(isRevealedProp))
+
+  const onPressIconReveal = useCallback(() => {
+    setIsRevealed((previousValue) => {
+      return !previousValue
+    })
+  }, [])
+
+  const appearanceConfig = useMemo(() => {
+    const appearanceKeyList = [
+      appearance || DEFAULT_INPUT_PASSWORD_APPEARANCE,
+      appearanceStyle || DEFAULT_INPUT_PASSWORD_APPEARANCE_STYLE,
+    ]
+
+    if (isError) {
+      appearanceKeyList.push('errorPrimary')
+    }
+
+    if (isDisabled) {
+      appearanceKeyList.push('disabledPrimary')
+    }
+
+    return appearanceKeyList.reduce<InputPasswordAppearanceProps>(
+      (resultConfig, appearanceKey) => {
+        return Object.assign(
+          resultConfig,
+          inputPasswordConfig.appearance?.[appearanceKey],
+        )
+      },
+      {},
+    )
+  }, [appearance, appearanceStyle, isDisabled, isError])
+
+  const fillKey = fill || appearanceConfig.fill
+  const borderColorKey = borderColor || appearanceConfig.borderColor
+  const textColorKey = textColor || appearanceConfig.textColor
+  const textSizeKey = textSize || appearanceConfig.textSize
+  const textWeightKey = textWeight || appearanceConfig.textWeight
+  const placeholderTextColorKey =
+    placeholderTextColor || appearanceConfig.placeholderTextColor
+  const caretKey = caret || appearanceConfig.caret
+  const iconFillKey = iconFill || appearanceConfig.iconFill
+  const iconSizeKey =
+    iconSize || appearanceConfig.iconSize || DEFAULT_INPUT_PASSWORD_ICON_SIZE
+  const shapeKey = shape || appearanceConfig.shape
+  const sizeKey = size || appearanceConfig.size || DEFAULT_INPUT_PASSWORD_SIZE
+  const widthKey = width || appearanceConfig.width
+  const IconRevealableHide =
+    iconRevealableHide ||
+    appearanceConfig.iconRevealableHide ||
+    IconRevealableHideDefault
+  const IconRevealableShow =
+    iconRevealableShow ||
+    appearanceConfig.iconRevealableShow ||
+    IconRevealableShowDefault
+
+  return (
+    <View
+      style={[
+        styles.inputPassword,
+        fillKey && tokens[`fill_${fillKey}`],
+        borderColorKey && tokens[`border_color_${borderColorKey}`],
+        shapeKey && styles[`inputPassword_shape_${shapeKey}`],
+        sizeKey && styles[`inputPassword_size_${sizeKey}`],
+        widthKey && tokens[`width_${widthKey}`],
+        style && style,
+      ]}
+    >
+      <TextInput
+        maxLength={maxLength}
+        autoCapitalize="none"
+        autoCorrect={false}
+        cursorColor={getTokenIconFillColor(caretKey)}
+        editable={!(isDisabled || isReadOnly)}
+        placeholder={placeholder}
+        placeholderTextColor={getTokenTextColor(placeholderTextColorKey)}
+        secureTextEntry={!isRevealed}
+        selectionColor={getTokenIconFillColor(caretKey)}
+        style={[
+          styles.inputPassword__field,
+          textColorKey && tokens[`text_color_${textColorKey}`],
+          textSizeKey && tokens[`text_size_${textSizeKey}`],
+          textWeightKey && tokens[`text_weight_${textWeightKey}`],
+        ]}
+        underlineColorAndroid="transparent"
+        value={value}
+        onBlur={onBlur}
+        onChangeText={onChangeText}
+        onFocus={onFocus}
+      />
+      <Pressable
+        disabled={isDisabled}
+        style={styles.inputPassword__icon}
+        onPress={onPressIconReveal}
+      >
+        <Icon
+          size={iconSizeKey}
+          iconFill={iconFillKey}
+          iconSize={iconSizeKey}
+          SVGIcon={isRevealed ? IconRevealableHide : IconRevealableShow}
+        />
+      </Pressable>
+    </View>
+  )
+}
+
+export { InputPassword, inputPasswordConfig }

package/src/components/InputPassword/appearance/inputPasswordDefault.ts

@@ -0,0 +1,22 @@
+import type { InputPasswordAppearance } from '../InputPassword.interface'
+
+const inputPasswordAppearanceDefault = {
+  defaultPrimary: {
+    fill: 'surfaceSecondary',
+    borderColor: 'surfaceBorderTertiary',
+    textColor: 'surfaceTextPrimary',
+    caret: 'extraItemSecondary',
+    iconFill: 'surfaceItemQuaternary',
+    placeholderTextColor: 'surfaceTextQuaternary',
+  },
+  defaultSecondary: {
+    fill: 'surfacePrimary',
+    borderColor: 'surfaceBorderTertiary',
+    textColor: 'surfaceTextPrimary',
+    caret: 'extraItemSecondary',
+    iconFill: 'surfaceItemQuaternary',
+    placeholderTextColor: 'surfaceTextQuaternary',
+  },
+} satisfies InputPasswordAppearance
+
+export { inputPasswordAppearanceDefault }

package/src/components/InputPassword/appearance/inputPasswordDisabled.ts

@@ -0,0 +1,19 @@
+import type { InputPasswordAppearance } from '../InputPassword.interface'
+
+const inputPasswordAppearanceDisabled = {
+  disabledPrimary: {
+    fill: 'surfaceDisabled',
+    borderColor: 'errorBorderQuaternary',
+    textColor: 'surfaceTextQuaternary',
+    iconFill: 'surfaceItemQuaternary',
+    placeholderTextColor: 'surfaceTextQuaternary',
+  },
+  disabledSecondary: {
+    fill: 'surfaceSecondary',
+    borderColor: 'surfaceBorderTertiary',
+    iconFill: 'surfaceItemQuaternary',
+    placeholderTextColor: 'surfaceTextSecondary',
+  },
+} satisfies InputPasswordAppearance
+
+export { inputPasswordAppearanceDisabled }

package/src/components/InputPassword/appearance/inputPasswordError.ts

@@ -0,0 +1,19 @@
+import type { InputPasswordAppearance } from '../InputPassword.interface'
+
+const inputPasswordAppearanceError = {
+  errorPrimary: {
+    fill: 'errorTertiary',
+    borderColor: 'errorBorderQuaternary',
+    textColor: 'surfaceTextPrimary',
+    iconFill: 'errorItemQuaternary',
+    placeholderTextColor: 'surfaceTextQuaternary',
+  },
+  errorSecondary: {
+    fill: 'errorSecondary',
+    borderColor: 'errorBorderTertiary',
+    iconFill: 'errorItemQuaternary',
+    placeholderTextColor: 'errorTextSecondary',
+  },
+} satisfies InputPasswordAppearance
+
+export { inputPasswordAppearanceError }

package/src/components/InputPassword/appearance/inputPasswordRequire.ts

@@ -0,0 +1,19 @@
+import type { InputPasswordAppearance } from '../InputPassword.interface'
+
+const inputPasswordAppearanceRequire = {
+  requirePrimary: {
+    fill: 'warningTertiary',
+    borderColor: 'warningBorderQuaternary',
+    textColor: 'surfaceTextPrimary',
+    iconFill: 'warningItemSecondary',
+    placeholderTextColor: 'surfaceTextQuaternary',
+  },
+  requireSecondary: {
+    fill: 'surfaceSecondary',
+    borderColor: 'surfaceBorderTertiary',
+    iconFill: 'warningItemSecondary',
+    placeholderTextColor: 'surfaceTextSecondary',
+  },
+} satisfies InputPasswordAppearance
+
+export { inputPasswordAppearanceRequire }