@itcase/ui-react-native 1.10.81

package/src/components/Pagination/Pagination.appearance.ts

@@ -0,0 +1,12 @@
+import { paginationAppearanceAccent } from './appearance/paginationAccent'
+import { paginationAppearanceSize } from './appearance/paginationSize'
+import { paginationAppearanceSurface } from './appearance/paginationSurface'
+import type { PaginationAppearance } from './Pagination.interface'
+
+const paginationAppearance = {
+  ...paginationAppearanceAccent,
+  ...paginationAppearanceSize,
+  ...paginationAppearanceSurface,
+} satisfies PaginationAppearance
+
+export { paginationAppearance }

package/src/components/Pagination/Pagination.interface.ts

@@ -0,0 +1,46 @@
+import type { StyleProp, ViewStyle } from 'react-native'
+
+import type {
+  AppearanceConfig,
+  AppearanceKeysDefault,
+  FillActiveProps,
+  FillProps,
+  TextColorProps,
+  TextSizeProps,
+} from '@itcase/types-ui'
+
+import type { paginationSizePropsType } from './styles/paginationSize'
+
+interface PaginationAppearanceProps {
+  fill?: FillProps
+  fillActive?: FillActiveProps
+  size?: paginationSizePropsType
+  textColor?: TextColorProps
+  textColorActive?: TextColorProps
+  textSize?: TextSizeProps
+}
+
+type PaginationAppearanceKey = AppearanceKeysDefault
+type PaginationConfig = AppearanceConfig<
+  AppearanceKeysDefault,
+  PaginationAppearanceProps
+>
+type PaginationAppearance = PaginationConfig['appearance']
+
+interface PaginationProps extends PaginationAppearanceProps {
+  isDisabled?: boolean
+  onPageChange: (page: number) => void
+  appearance?: PaginationAppearanceKey
+  page: number
+  pageCount: number
+  size?: paginationSizePropsType
+  style?: StyleProp<ViewStyle>
+}
+
+export type {
+  PaginationAppearance,
+  PaginationAppearanceKey,
+  PaginationAppearanceProps,
+  PaginationConfig,
+  PaginationProps,
+}

package/src/components/Pagination/Pagination.styles.ts

@@ -0,0 +1,9 @@
+import { paginationStyles as paginationBaseStyles } from './styles/pagination'
+import { paginationSizeStyles } from './styles/paginationSize'
+
+const styles = {
+  ...paginationBaseStyles,
+  ...paginationSizeStyles,
+}
+
+export { styles }

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,107 @@
+import { useMemo } from 'react'
+import { View } from 'react-native'
+
+import { tokens } from '../../styles/tokens'
+import { Button } from '../Button'
+import { Text } from '../Text'
+import { paginationAppearance } from './Pagination.appearance'
+import type { PaginationConfig, PaginationProps } from './Pagination.interface'
+import { styles } from './Pagination.styles'
+
+const DEFAULT_PAGINATION_APPEARANCE = 'surfacePrimary'
+const DEFAULT_PAGINATION_SIZE = 'm'
+
+const paginationConfig: PaginationConfig = {
+  appearance: {},
+  setAppearance: (newComponent) => {
+    paginationConfig.appearance = newComponent
+  },
+}
+
+paginationConfig.setAppearance(paginationAppearance)
+
+function Pagination(props: PaginationProps) {
+  const {
+    appearance = DEFAULT_PAGINATION_APPEARANCE,
+    size,
+    fill,
+    fillActive,
+    textColor,
+    textColorActive,
+    textSize,
+    page,
+    pageCount,
+    style,
+    isDisabled,
+    onPageChange,
+  } = props
+
+  const appearanceConfig = useMemo(() => {
+    if (!appearance || !paginationConfig.appearance) {
+      return undefined
+    }
+
+    return paginationConfig.appearance[appearance]
+  }, [appearance])
+
+  const sizeKey = size || appearanceConfig?.size || DEFAULT_PAGINATION_SIZE
+  const fillKey = fill || appearanceConfig?.fill
+  const fillActiveKey = fillActive || appearanceConfig?.fillActive
+  const textColorKey = textColor || appearanceConfig?.textColor
+  const textColorActiveKey =
+    textColorActive || appearanceConfig?.textColorActive
+  const textSizeKey = textSize || appearanceConfig?.textSize
+  const isPrevDisabled = isDisabled || page <= 1
+  const isNextDisabled = isDisabled || page >= pageCount
+
+  return (
+    <View
+      style={[
+        styles.pagination,
+        styles[`pagination_size_${sizeKey}`],
+        style && style,
+      ]}
+    >
+      <Button
+        appearance="surfaceSecondary"
+        size={sizeKey}
+        label="‹"
+        isDisabled={isPrevDisabled}
+        onPress={() => {
+          onPageChange(page - 1)
+        }}
+      />
+      <View
+        style={[
+          styles.pagination__current,
+          styles[`pagination_size_${sizeKey}__current`],
+          fillActiveKey
+            ? tokens[`fill_${fillActiveKey}`]
+            : fillKey && tokens[`fill_${fillKey}`],
+        ]}
+      >
+        <Text
+          size={textSizeKey}
+          textColor={textColorActiveKey || textColorKey}
+          weight="600"
+        >
+          {page}
+        </Text>
+      </View>
+      <Text size={textSizeKey} textColor={textColorKey}>
+        / {pageCount}
+      </Text>
+      <Button
+        appearance="surfaceSecondary"
+        size={sizeKey}
+        label="›"
+        isDisabled={isNextDisabled}
+        onPress={() => {
+          onPageChange(page + 1)
+        }}
+      />
+    </View>
+  )
+}
+
+export { Pagination, paginationConfig }

package/src/components/Pagination/appearance/paginationAccent.ts

@@ -0,0 +1,12 @@
+import type { PaginationAppearance } from '../Pagination.interface'
+
+const paginationAppearanceAccent = {
+  accentPrimary: {
+    fill: 'accentPrimary',
+    fillActive: 'accentActiveQuaternary',
+    textColor: 'accentTextPrimary',
+    textColorActive: 'accentTextPrimary',
+  },
+} satisfies PaginationAppearance
+
+export { paginationAppearanceAccent }

package/src/components/Pagination/appearance/paginationSize.ts

@@ -0,0 +1,22 @@
+import type { PaginationAppearance } from '../Pagination.interface'
+
+const paginationAppearanceSize = {
+  sizeL: {
+    size: 'l',
+    textSize: 'l',
+  },
+  sizeM: {
+    size: 'm',
+    textSize: 'm',
+  },
+  sizeS: {
+    size: 's',
+    textSize: 's',
+  },
+  sizeXS: {
+    size: 'xs',
+    textSize: 'xs',
+  },
+} satisfies PaginationAppearance
+
+export { paginationAppearanceSize }

package/src/components/Pagination/appearance/paginationSurface.ts

@@ -0,0 +1,12 @@
+import type { PaginationAppearance } from '../Pagination.interface'
+
+const paginationAppearanceSurface = {
+  surfacePrimary: {
+    fill: 'surfacePrimary',
+    fillActive: 'accentPrimary',
+    textColor: 'surfaceTextPrimary',
+    textColorActive: 'accentTextPrimary',
+  },
+} satisfies PaginationAppearance
+
+export { paginationAppearanceSurface }

package/src/components/Pagination/index.ts

@@ -0,0 +1,24 @@
+import { Pagination, paginationConfig } from './Pagination'
+import { paginationAppearance } from './Pagination.appearance'
+import type {
+  PaginationAppearance,
+  PaginationAppearanceKey,
+  PaginationConfig,
+  PaginationProps,
+} from './Pagination.interface'
+import { paginationSizeList } from './styles/paginationSize'
+import type { paginationSizePropsType } from './styles/paginationSize'
+
+export {
+  Pagination,
+  paginationAppearance,
+  paginationConfig,
+  paginationSizeList,
+}
+export type {
+  PaginationAppearance,
+  PaginationAppearanceKey,
+  PaginationConfig,
+  PaginationProps,
+  paginationSizePropsType,
+}

package/src/components/Pagination/stories/Pagination.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Pagination } from '../Pagination'
+
+const PaginationMeta: Meta<typeof Pagination> = {
+  title: 'Molecules / Pagination',
+  component: Pagination,
+  args: {
+    appearance: 'surfacePrimary',
+    size: 'm',
+    page: 2,
+    pageCount: 10,
+    onPageChange: () => undefined,
+  },
+}
+
+export default PaginationMeta
+
+export const Default: StoryObj<typeof Pagination> = {}
+
+export const FirstPage: StoryObj<typeof Pagination> = {
+  args: {
+    page: 1,
+  },
+}
+
+export const LastPage: StoryObj<typeof Pagination> = {
+  args: {
+    page: 10,
+  },
+}
+
+export const Compact: StoryObj<typeof Pagination> = {
+  args: {
+    size: 's',
+  },
+}

package/src/components/Pagination/styles/pagination.ts

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native'
+
+const paginationStyles = StyleSheet.create({
+  pagination: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  pagination__current: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})
+
+export { paginationStyles }

package/src/components/Pagination/styles/paginationSize.ts

@@ -0,0 +1,46 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const paginationSizeStyles = StyleSheet.create({
+  pagination_size_l: {
+    gap: 8,
+  },
+  pagination_size_l__current: {
+    minWidth: 40,
+    minHeight: 40,
+  },
+  pagination_size_m: {
+    gap: 8,
+  },
+  pagination_size_m__current: {
+    minWidth: 32,
+    minHeight: 32,
+  },
+  pagination_size_s: {
+    gap: 4,
+  },
+  pagination_size_s__current: {
+    minWidth: 24,
+    minHeight: 24,
+  },
+  pagination_size_xs: {
+    gap: 4,
+  },
+  pagination_size_xs__current: {
+    minWidth: 20,
+    minHeight: 20,
+  },
+})
+
+const paginationSizeList = ['l', 'm', 's', 'xs'] as const
+
+const paginationSizeStyleList = getVariantsPropsList(
+  paginationSizeStyles,
+  'pagination_size_',
+)
+
+type paginationSizePropsType = (typeof paginationSizeList)[number]
+
+export { paginationSizeList, paginationSizeStyleList, paginationSizeStyles }
+export type { paginationSizePropsType }

package/src/components/Radio/Radio.appearance.ts

@@ -0,0 +1,22 @@
+import { radioAppearanceDefault } from './appearance/radioDefault'
+import { radioAppearanceDisabled } from './appearance/radioDisabled'
+import { radioAppearanceError } from './appearance/radioError'
+import { radioAppearanceRequire } from './appearance/radioRequire'
+import { radioAppearanceShape } from './appearance/radioShape'
+import { radioAppearanceSize } from './appearance/radioSize'
+import { radioAppearanceStyle } from './appearance/radioStyle'
+import { radioAppearanceSuccess } from './appearance/radioSuccess'
+import type { RadioAppearance } from './Radio.interface'
+
+const radioAppearance = {
+  ...radioAppearanceDefault,
+  ...radioAppearanceError,
+  ...radioAppearanceSuccess,
+  ...radioAppearanceRequire,
+  ...radioAppearanceDisabled,
+  ...radioAppearanceSize,
+  ...radioAppearanceShape,
+  ...radioAppearanceStyle,
+} satisfies RadioAppearance
+
+export { radioAppearance }

package/src/components/Radio/Radio.interface.ts

@@ -0,0 +1,83 @@
+import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native'
+
+import type {
+  AppearanceConfig,
+  AppearanceKeysState,
+  AppearancePartialRecord,
+  AppearanceRecord,
+  AppearanceShapeKey,
+  AppearanceSizeKey,
+  AppearanceStyleKey,
+  BorderColorActiveProps,
+  BorderColorProps,
+  CompositeAppearanceKeys,
+  FillActiveProps,
+  FillProps,
+  ShapeProps,
+  TextColorProps,
+  TextSizeProps,
+  TextWeightProps,
+} from '@itcase/types-ui'
+
+import type { radioSizePropsType } from './styles/radioSize'
+
+interface RadioAppearanceProps {
+  borderColor?: BorderColorProps
+  borderRadioColor?: BorderColorProps
+  borderRadioColorActive?: BorderColorActiveProps
+  descTextColor?: TextColorProps
+  descTextSize?: TextSizeProps
+  descTextWeight?: TextWeightProps
+  fill?: FillProps
+  fillCheckmark?: FillProps
+  fillRadio?: FillProps
+  fillRadioActive?: FillActiveProps
+  labelTextColor?: TextColorProps
+  labelTextSize?: TextSizeProps
+  labelTextWeight?: TextWeightProps
+  shape?: ShapeProps
+  size?: radioSizePropsType
+}
+
+type RadioAppearanceKey = AppearanceKeysState | CompositeAppearanceKeys
+type RadioConfig = AppearanceConfig<AppearanceKeysState, RadioAppearanceProps>
+type RadioAppearance = RadioConfig['appearance']
+type RadioAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  RadioAppearanceProps,
+  'borderColor' | 'borderRadioColor' | 'borderRadioColorActive' | 'fill'
+>
+type RadioAppearanceShape = AppearancePartialRecord<
+  AppearanceShapeKey,
+  RadioAppearanceProps,
+  'shape'
+>
+type RadioAppearanceSize = AppearancePartialRecord<
+  AppearanceSizeKey,
+  RadioAppearanceProps,
+  'descTextSize' | 'labelTextSize' | 'size'
+>
+
+interface RadioProps extends RadioAppearanceProps {
+  isActive?: boolean
+  isChecked?: boolean
+  isDisabled?: boolean
+  onPress?: (event: GestureResponderEvent) => void
+  appearance?: RadioAppearanceKey
+  appearanceStyle?: AppearanceStyleKey
+  checked?: boolean
+  desc?: string
+  label?: string
+  style?: StyleProp<ViewStyle>
+}
+
+export type {
+  RadioAppearance,
+  RadioAppearanceKey,
+  RadioAppearanceProps,
+  RadioAppearanceShape,
+  RadioAppearanceSize,
+  RadioAppearanceStyle,
+  RadioConfig,
+  RadioProps,
+}

package/src/components/Radio/Radio.styles.ts

@@ -0,0 +1,11 @@
+import { radioStyles as radioBaseStyles } from './styles/radio'
+import { radioShapeStyles } from './styles/radioShape'
+import { radioSizeStyles } from './styles/radioSize'
+
+const styles = {
+  ...radioBaseStyles,
+  ...radioShapeStyles,
+  ...radioSizeStyles,
+}
+
+export { styles }

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,159 @@
+import { useMemo } from 'react'
+import { Pressable, View } from 'react-native'
+
+import { tokens } from '../../styles/tokens'
+import { Text } from '../Text'
+import { radioAppearance } from './Radio.appearance'
+import type {
+  RadioAppearanceProps,
+  RadioConfig,
+  RadioProps,
+} from './Radio.interface'
+import { styles } from './Radio.styles'
+
+const DEFAULT_RADIO_APPEARANCE = 'defaultPrimary'
+const DEFAULT_RADIO_APPEARANCE_STYLE = 'solid'
+const DEFAULT_RADIO_SIZE = 'm'
+const DEFAULT_RADIO_SHAPE = 'circular'
+
+const radioConfig: RadioConfig = {
+  appearance: {},
+  setAppearance: (newComponent) => {
+    radioConfig.appearance = newComponent
+  },
+}
+
+radioConfig.setAppearance(radioAppearance)
+
+function Radio(props: RadioProps) {
+  const {
+    appearance,
+    size,
+    fill,
+    fillCheckmark,
+    fillRadio,
+    fillRadioActive,
+    label,
+    labelTextColor,
+    labelTextSize,
+    labelTextWeight,
+    desc,
+    descTextColor,
+    descTextSize,
+    descTextWeight,
+    borderColor,
+    borderRadioColor,
+    borderRadioColorActive,
+    appearanceStyle,
+    checked,
+    shape,
+    style,
+    isActive,
+    isChecked,
+    isDisabled,
+    onPress,
+  } = props
+
+  const appearanceConfig = useMemo(() => {
+    const appearanceTokens = (appearance || DEFAULT_RADIO_APPEARANCE).split(' ')
+    const isCompositeAppearance = appearanceTokens.length > 1
+    const sizeAppearanceKey = size && `size${size.toUpperCase()}`
+    const appearanceKeys = isCompositeAppearance
+      ? appearanceTokens
+      : [
+          ...appearanceTokens,
+          appearanceStyle || DEFAULT_RADIO_APPEARANCE_STYLE,
+          sizeAppearanceKey,
+          shape,
+        ]
+
+    return appearanceKeys.reduce<RadioAppearanceProps>(
+      (resultConfig, appearanceKey) => {
+        return Object.assign(
+          resultConfig,
+          appearanceKey &&
+            radioConfig.appearance?.[
+              appearanceKey as keyof NonNullable<typeof radioConfig.appearance>
+            ],
+        )
+      },
+      {},
+    )
+  }, [appearance, appearanceStyle, shape, size])
+
+  const isSelected = Boolean(checked || isActive || isChecked)
+  const sizeKey = size || appearanceConfig.size || DEFAULT_RADIO_SIZE
+  const shapeKey = shape || appearanceConfig.shape || DEFAULT_RADIO_SHAPE
+  const fillKey = fill || appearanceConfig.fill
+  const radioFillKey = isSelected
+    ? fillRadioActive || appearanceConfig.fillRadioActive
+    : fillRadio || appearanceConfig.fillRadio
+  const radioBorderKey = isSelected
+    ? borderRadioColorActive || appearanceConfig.borderRadioColorActive
+    : borderRadioColor ||
+      appearanceConfig.borderRadioColor ||
+      borderColor ||
+      appearanceConfig.borderColor
+  const checkmarkFillKey =
+    fillCheckmark || appearanceConfig.fillCheckmark || 'surfaceQuaternary'
+
+  return (
+    <Pressable
+      disabled={isDisabled}
+      style={[
+        styles.radio,
+        fillKey && tokens[`fill_${fillKey}`],
+        style && style,
+      ]}
+      onPress={onPress}
+    >
+      <View
+        style={[
+          styles.radio__item,
+          sizeKey && styles[`radio__item_size_${sizeKey}`],
+        ]}
+      >
+        <View
+          style={[
+            styles.radio__state,
+            shapeKey && styles[`radio_shape_${shapeKey}`],
+            radioFillKey && tokens[`fill_${radioFillKey}`],
+            radioBorderKey && tokens[`border_color_${radioBorderKey}`],
+          ]}
+        />
+        {isSelected && (
+          <View
+            style={[
+              styles.radio__checkmark,
+              checkmarkFillKey && tokens[`fill_${checkmarkFillKey}`],
+            ]}
+          />
+        )}
+      </View>
+      {(label || desc) && (
+        <View style={styles.radio__text}>
+          {label && (
+            <Text
+              size={labelTextSize || appearanceConfig.labelTextSize}
+              textColor={labelTextColor || appearanceConfig.labelTextColor}
+              weight={labelTextWeight || appearanceConfig.labelTextWeight}
+            >
+              {label}
+            </Text>
+          )}
+          {desc && (
+            <Text
+              size={descTextSize || appearanceConfig.descTextSize}
+              textColor={descTextColor || appearanceConfig.descTextColor}
+              weight={descTextWeight || appearanceConfig.descTextWeight}
+            >
+              {desc}
+            </Text>
+          )}
+        </View>
+      )}
+    </Pressable>
+  )
+}
+
+export { Radio, radioConfig }

package/src/components/Radio/appearance/radioDefault.ts

@@ -0,0 +1,54 @@
+import type { RadioAppearance } from '../Radio.interface'
+
+const radioAppearanceDefault = {
+  defaultPrimary: {
+    fill: 'surfaceSecondary',
+    fillCheckmark: 'surfaceQuaternary',
+    fillRadio: 'surfaceSecondary',
+    fillRadioActive: 'surfaceQuaternary',
+    labelTextColor: 'surfaceTextPrimary',
+    descTextColor: 'surfaceTextPrimary',
+    borderColor: 'surfaceBorderQuaternary',
+    borderRadioColor: 'surfaceBorderQuaternary',
+    borderRadioColorActive: 'surfaceBorderQuaternary',
+    shape: 'circular',
+  },
+  defaultQuaternary: {
+    fill: 'surfaceQuaternary',
+    fillCheckmark: 'surfaceQuaternary',
+    fillRadio: 'surfaceQuaternary',
+    fillRadioActive: 'surfaceQuaternary',
+    labelTextColor: 'surfaceTextPrimary',
+    descTextColor: 'surfaceTextPrimary',
+    borderColor: 'surfaceBorderQuaternary',
+    borderRadioColor: 'surfaceBorderQuaternary',
+    borderRadioColorActive: 'surfaceBorderQuaternary',
+    shape: 'circular',
+  },
+  defaultSecondary: {
+    fill: 'surfaceSecondary',
+    fillCheckmark: 'surfaceQuaternary',
+    fillRadio: 'surfaceSecondary',
+    fillRadioActive: 'surfaceQuaternary',
+    labelTextColor: 'surfaceTextPrimary',
+    descTextColor: 'surfaceTextPrimary',
+    borderColor: 'surfaceBorderQuaternary',
+    borderRadioColor: 'surfaceBorderQuaternary',
+    borderRadioColorActive: 'surfaceBorderQuaternary',
+    shape: 'circular',
+  },
+  defaultTertiary: {
+    fill: 'surfaceTertiary',
+    fillCheckmark: 'surfaceQuaternary',
+    fillRadio: 'surfaceTertiary',
+    fillRadioActive: 'surfaceQuaternary',
+    labelTextColor: 'surfaceTextPrimary',
+    descTextColor: 'surfaceTextPrimary',
+    borderColor: 'surfaceBorderQuaternary',
+    borderRadioColor: 'surfaceBorderQuaternary',
+    borderRadioColorActive: 'surfaceBorderQuaternary',
+    shape: 'circular',
+  },
+} satisfies RadioAppearance
+
+export { radioAppearanceDefault }