@grupalia/rn-ui-kit 0.2.0 → 0.3.0

package/lib/typescript/module/components/BaseHorizontalTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseHorizontalTabs.d.ts","sourceRoot":"","sources":["../../../../src/components/BaseHorizontalTabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAWxC,MAAM,MAAM,OAAO,GAAG,cAAc,GAAG,WAAW,GAAG,aAAa,GAAG,eAAe,GAAG,gBAAgB,CAAC;AAExG,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,UAAU,uBAAuB;IAC/B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;;;;;;;AA4LD,wBAA0C"}

package/lib/typescript/module/components/BaseSelect.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface BaseSelectProps {
+    options: SelectOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    label?: string;
+    helpText?: string;
+    error?: string;
+    touched?: boolean;
+    disabled?: boolean;
+    className?: string;
+    style?: ViewStyle;
+}
+declare const _default: React.ForwardRefExoticComponent<BaseSelectProps & {
+    className?: string | undefined;
+    tw?: string | undefined;
+    baseClassName?: string | undefined;
+    baseTw?: string | undefined;
+} & React.RefAttributes<unknown>>;
+export default _default;
+//# sourceMappingURL=BaseSelect.d.ts.map

package/lib/typescript/module/components/BaseSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/BaseSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAYzC,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,eAAe;IACvB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;;;;;;;AAkID,wBAAkC"}

package/lib/typescript/module/components/BaseStackedList.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
-export interface BaseStackedListProps<T> {
+import { ViewProps } from 'react-native';
+export interface BaseStackedListProps<T> extends ViewProps {
     itemsCount: number;
     items: T[];
     renderItem: (item: T, index: number) => ReactNode;
@@ -13,11 +14,7 @@ export interface BaseStackedListProps<T> {
     emptyStateDescription?: string;
     minHeight?: number;
 }
-declare const _default: React.ForwardRefExoticComponent<BaseStackedListProps<unknown> & {
-    className?: string | undefined;
-    tw?: string | undefined;
-    baseClassName?: string | undefined;
-    baseTw?: string | undefined;
-} & React.RefAttributes<unknown>>;
-export default _default;
+declare function BaseStackedList<T>({ itemsCount, items, renderItem, onNextPage, onPrevPage, header, pageSize, loading, currentPage, keyExtractor, emptyStateDescription, minHeight, ...props }: BaseStackedListProps<T>): React.JSX.Element;
+declare const StackedList: typeof BaseStackedList;
+export default StackedList;
 //# sourceMappingURL=BaseStackedList.d.ts.map

package/lib/typescript/module/components/BaseStackedList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseStackedList.d.ts","sourceRoot":"","sources":["../../../../src/components/BaseStackedList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAUlD,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClD,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;;;;;;;AAgHD,wBAAuC"}
+{"version":3,"file":"BaseStackedList.d.ts","sourceRoot":"","sources":["../../../../src/components/BaseStackedList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AASzC,MAAM,WAAW,oBAAoB,CAAC,CAAC,CAAE,SAAQ,SAAS;IACxD,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClD,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD,iBAAS,eAAe,CAAC,CAAC,EAAE,EAC1B,UAAU,EACV,KAAK,EACL,UAAU,EACV,UAAU,EACV,UAAU,EACV,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAe,EACf,YAAY,EACZ,qBAAqB,EACrB,SAAa,EACb,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,qBA+EzB;AAED,QAAA,MAAM,WAAW,wBAAoD,CAAC;AAEtE,eAAe,WAAW,CAAC"}

package/lib/typescript/module/components/FormikSelect.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { SelectOption } from './BaseSelect';
+export type { SelectOption } from './BaseSelect';
+interface FormikSelectProps {
+    name: string;
+    options: SelectOption[];
+    placeholder?: string;
+    label?: string;
+    helpText?: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare const _default: import("react").ForwardRefExoticComponent<FormikSelectProps & {
+    className?: string | undefined;
+    tw?: string | undefined;
+    baseClassName?: string | undefined;
+    baseTw?: string | undefined;
+} & import("react").RefAttributes<unknown>>;
+export default _default;
+//# sourceMappingURL=FormikSelect.d.ts.map

package/lib/typescript/module/components/FormikSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormikSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/FormikSelect.tsx"],"names":[],"mappings":";AAGA,OAAmB,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAExD,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;;;;;;;AA6BD,wBAAoC"}

package/lib/typescript/module/components/index.d.ts

@@ -4,4 +4,7 @@ export { default as BaseSpinner } from './BaseSpinner';
 export { default as BaseStackedList } from './BaseStackedList';
 export { default as BaseIcon } from './BaseIcon';
 export { default as BaseAlert } from './BaseAlert';
+export { default as BaseSelect, SelectOption } from './BaseSelect';
+export { default as FormikSelect } from './FormikSelect';
+export { default as BaseHorizontalTabs } from './BaseHorizontalTabs';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/typescript/module/styles/text-colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-colors.d.ts","sourceRoot":"","sources":["../../../../src/styles/text-colors.ts"],"names":[],"mappings":"AAGA,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,cAyGjB,CAAC;AASF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"text-colors.d.ts","sourceRoot":"","sources":["../../../../src/styles/text-colors.ts"],"names":[],"mappings":"AAGA,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,cA6FjB,CAAC;AASF,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grupalia/rn-ui-kit",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Grupalia React Native UI Kit",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/module/index.d.ts",
@@ -19,16 +19,19 @@
     "publish-local": "npx yalc publish"
   },
   "peerDependencies": {
+    "@gorhom/bottom-sheet": "^5",
     "clsx": "^2.1.1",
+    "formik": "^2",
     "nativewind": "^2.0.11",
     "react": "*",
     "react-native": "*",
-    "tailwindcss": "3.3.2",
     "react-native-heroicons": "^4.0.0",
-    "react-native-svg": "*"
+    "react-native-svg": "*",
+    "tailwindcss": "3.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
+    "@gorhom/bottom-sheet": "^5",
     "@types/react": "~18.2.45",
     "@typescript-eslint/eslint-plugin": "^7.10.0",
     "@typescript-eslint/parser": "^7.10.0",
@@ -41,14 +44,15 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-tailwindcss": "^3.17.4",
+    "formik": "^2",
     "nativewind": "^2.0.11",
     "react": "18.2.0",
     "react-native": "0.74.5",
     "react-native-builder-bob": "^0.40.6",
+    "react-native-heroicons": "^4.0.0",
     "react-native-svg": "^15.11.2",
     "tailwindcss": "3.3.2",
-    "typescript": "~5.3.3",
-    "react-native-heroicons": "^4.0.0"
+    "typescript": "~5.3.3"
   },
   "exports": {
     ".": {

package/src/components/BaseBottomSheetModal.tsx

@@ -0,0 +1,51 @@
+import {
+  BottomSheetModal,
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModalProps,
+  BottomSheetView,
+} from '@gorhom/bottom-sheet';
+import { styled } from 'nativewind';
+import { forwardRef, ReactNode } from 'react';
+import { StyleSheet } from 'react-native';
+
+function BackdropComponent(props: BottomSheetBackdropProps) {
+  return (
+    <BottomSheetBackdrop
+      {...props}
+      opacity={0.5}
+      enableTouchThrough={false}
+      appearsOnIndex={0}
+      disappearsOnIndex={-1}
+      style={[{ backgroundColor: 'rgba(0, 0, 0, 1)' }, StyleSheet.absoluteFillObject]}
+    />
+  );
+}
+
+interface BaseBottomSheetModalProps extends BottomSheetModalProps {
+  children: ReactNode;
+}
+
+const BaseBottomSheetModal = forwardRef<
+  BottomSheetModal,
+  BaseBottomSheetModalProps
+>(({ children, ...props }, ref) => (
+  <BottomSheetModal
+    ref={ref}
+    backdropComponent={BackdropComponent}
+    style={{
+      shadowColor: 'black',
+      shadowOffset: { width: 0, height: 10 },
+      shadowOpacity: 0.53,
+      shadowRadius: 13.97,
+      elevation: 21,
+    }}
+    {...props}
+  >
+    <BottomSheetView>
+      {children}
+    </BottomSheetView>
+  </BottomSheetModal>
+));
+
+export default styled(BaseBottomSheetModal);

package/src/components/BaseHorizontalTabs.tsx

@@ -0,0 +1,221 @@
+import clsx from 'clsx';
+import { styled } from 'nativewind';
+import React, { useState } from 'react';
+
+import {
+  View,
+  Text,
+  ScrollView,
+  Pressable,
+} from '../hoc-components';
+import BaseBadge from './BaseBadge';
+import BaseSelect, { SelectOption } from './BaseSelect';
+
+export type Variant = 'button-brand' | 'underline' | 'button-gray' | 'button-border' | 'button-minimal';
+
+export interface Tab {
+  id: string;
+  label: string;
+  badge?: string | number;
+  content: React.ReactNode;
+}
+
+interface BaseHorizontalTabsProps {
+  tabs: Tab[];
+  defaultTab?: string;
+  selectedTab?: string;
+  onTabChange?: (tabId: string) => void;
+  variant?: Variant;
+  fullWidth?: boolean;
+  select?: boolean;
+  unmountHiddenTabs?: boolean;
+  className?: string;
+}
+
+function BaseHorizontalTabs({
+  tabs,
+  defaultTab,
+  selectedTab: controlledSelectedTab,
+  onTabChange,
+  variant = 'button-brand',
+  fullWidth = false,
+  select = false,
+  unmountHiddenTabs = false,
+  className,
+}: BaseHorizontalTabsProps) {
+  const [internalSelectedTab, setInternalSelectedTab] = useState(defaultTab || tabs[0]?.id);
+  const selectedTab = controlledSelectedTab || internalSelectedTab;
+
+  const handleTabSelect = (tabId: string) => {
+    if (controlledSelectedTab === undefined) {
+      setInternalSelectedTab(tabId);
+    }
+    onTabChange?.(tabId);
+  };
+
+  const selectedTabContent = tabs.find((tab) => tab.id === selectedTab)?.content;
+
+  const getTabStyles = (isActive: boolean) => {
+    const baseStyles = 'rounded-md px-3 py-2';
+
+    switch (variant) {
+      case 'button-brand':
+        return clsx(
+          baseStyles,
+          isActive ? 'bg-brand-primary_alt' : 'bg-transparent',
+        );
+      case 'underline':
+        return clsx(
+          'px-1 pb-3',
+          isActive ? 'border-b-2 border-brand-primary' : 'border-b-2 border-transparent',
+        );
+      case 'button-gray':
+        return clsx(
+          baseStyles,
+          isActive ? 'bg-active' : 'bg-transparent',
+        );
+      case 'button-border':
+        return clsx(
+          baseStyles,
+          isActive ? 'bg-primary shadow-sm' : 'bg-transparent',
+        );
+      case 'button-minimal':
+        return clsx(
+          baseStyles,
+          'border',
+          isActive ? 'border-secondary bg-primary shadow-sm' : 'border-transparent bg-transparent',
+        );
+      default:
+        return baseStyles;
+    }
+  };
+
+  const getTextStyles = (isActive: boolean) => {
+    const baseStyles = 'text-sm font-semibold';
+
+    switch (variant) {
+      case 'button-brand':
+        return clsx(
+          baseStyles,
+          isActive ? 'text-brand-secondary' : 'text-quaternary',
+        );
+      case 'underline':
+        return clsx(
+          baseStyles,
+          isActive ? 'text-brand-secondary' : 'text-quaternary',
+        );
+      case 'button-gray':
+      case 'button-border':
+      case 'button-minimal':
+        return clsx(
+          baseStyles,
+          isActive ? 'text-secondary' : 'text-quaternary',
+        );
+      default:
+        return baseStyles;
+    }
+  };
+
+  const getContainerStyles = () => {
+    switch (variant) {
+      case 'button-brand':
+      case 'button-gray':
+        return fullWidth ? 'flex-row space-x-1 p-0' : 'flex-row space-x-1';
+      case 'underline':
+        return fullWidth ? 'flex-row space-x-3 border-b border-tertiary' : 'flex-row space-x-3 border-b border-tertiary';
+      case 'button-border':
+        return 'flex-row space-x-0.5 bg-secondary_alt p-1 rounded-lg border border-secondary';
+      case 'button-minimal':
+        return 'flex-row space-x-0.5 bg-secondary_alt rounded-lg border border-secondary';
+      default:
+        return 'flex-row space-x-1';
+    }
+  };
+
+  if (select) {
+    const selectOptions: SelectOption[] = tabs.map((tab) => ({
+      label: tab.badge ? `${tab.label} (${tab.badge})` : tab.label,
+      value: tab.id,
+    }));
+
+    return (
+      <View className={className}>
+        <BaseSelect
+          value={selectedTab}
+          onChange={handleTabSelect}
+          options={selectOptions}
+          placeholder="Select a tab"
+        />
+        <View className="mt-4">
+          {unmountHiddenTabs ? (
+            selectedTabContent
+          ) : (
+            tabs.map((tab) => (
+              <View
+                key={tab.id}
+                className={clsx(tab.id === selectedTab ? 'flex' : 'hidden')}
+              >
+                {tab.content}
+              </View>
+            ))
+          )}
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View className={className}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        className={clsx(
+          'p-0.5',
+          fullWidth && 'w-full',
+        )}
+      >
+        <View className={getContainerStyles()}>
+          {tabs.map((tab) => (
+            <Pressable
+              key={tab.id}
+              onPress={() => handleTabSelect(tab.id)}
+              className={clsx(
+                getTabStyles(tab.id === selectedTab),
+                fullWidth && 'flex-1',
+              )}
+            >
+              <View className="flex-row items-center space-x-2">
+                <Text className={getTextStyles(tab.id === selectedTab)}>
+                  {tab.label}
+                </Text>
+                {tab.badge && (
+                  <BaseBadge
+                    text={String(tab.badge)}
+                    variant="gray"
+                    size="sm"
+                  />
+                )}
+              </View>
+            </Pressable>
+          ))}
+        </View>
+      </ScrollView>
+      <View className="mt-4">
+        {unmountHiddenTabs ? (
+          selectedTabContent
+        ) : (
+          tabs.map((tab) => (
+            <View
+              key={tab.id}
+              className={clsx(tab.id === selectedTab ? 'flex' : 'hidden')}
+            >
+              {tab.content}
+            </View>
+          ))
+        )}
+      </View>
+    </View>
+  );
+}
+
+export default styled(BaseHorizontalTabs);

package/src/components/BaseSelect.tsx

@@ -0,0 +1,165 @@
+import { BottomSheetModal } from '@gorhom/bottom-sheet';
+import clsx from 'clsx';
+import { styled } from 'nativewind';
+import React, { useRef, useState } from 'react';
+import { ViewStyle } from 'react-native';
+import { ChevronDownIcon, CheckIcon } from 'react-native-heroicons/outline';
+
+import {
+  View,
+  Text,
+  Pressable,
+  TouchableOpacity,
+} from '../hoc-components';
+import BaseBottomSheetModal from './BaseBottomSheetModal';
+import BaseIcon from './BaseIcon';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface BaseSelectProps {
+  options: SelectOption[];
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  label?: string;
+  helpText?: string;
+  error?: string;
+  touched?: boolean;
+  disabled?: boolean;
+  className?: string;
+  style?: ViewStyle;
+}
+
+function BaseSelect({
+  options,
+  value = '',
+  onChange,
+  placeholder = 'Select option',
+  label,
+  helpText,
+  error,
+  touched = false,
+  disabled = false,
+  className,
+  style,
+}: BaseSelectProps) {
+  const bottomSheetRef = useRef<BottomSheetModal>(null);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  const handlePress = () => {
+    if (disabled) return;
+    setIsFocused(true);
+    bottomSheetRef.current?.present();
+  };
+
+  const handleOptionPress = (optionValue: string) => {
+    onChange?.(optionValue);
+    bottomSheetRef.current?.dismiss();
+  };
+
+  const hasError = touched && error;
+
+  const selectClasses = clsx(
+    'flex-row items-center justify-between rounded-lg border px-3.5 py-2.5',
+    {
+      'border-gray-300 bg-white': !hasError && !disabled,
+      'border-gray-300 bg-gray-50': disabled,
+      'border-red-300 bg-white': hasError && !disabled,
+      'shadow-sm': !disabled,
+    },
+    className,
+  );
+
+  const textClasses = clsx('text-base', {
+    'text-gray-900': selectedOption && !disabled,
+    'text-gray-500': (!selectedOption && !disabled) || disabled,
+  });
+
+  return (
+    <View style={style}>
+      {label && (
+        <Text className="mb-1.5 text-sm font-medium text-gray-700">{label}</Text>
+      )}
+
+      <Pressable
+        onPress={handlePress}
+        disabled={disabled}
+        className={selectClasses}
+      >
+        <Text
+          className={textClasses}
+          numberOfLines={1}
+        >
+          {selectedOption?.label || placeholder}
+        </Text>
+        <BaseIcon
+          icon={ChevronDownIcon}
+          size={20}
+          color="fg-quaternary"
+          className={clsx('ml-2', isFocused && 'rotate-180')}
+        />
+      </Pressable>
+
+      {helpText && !hasError && (
+        <Text className="mt-1.5 text-sm text-gray-500">{helpText}</Text>
+      )}
+
+      {hasError && (
+        <Text className="mt-1.5 text-sm text-red-600">{error}</Text>
+      )}
+
+      <BaseBottomSheetModal
+        ref={bottomSheetRef}
+        enableDynamicSizing
+        maxDynamicContentSize={400}
+        onDismiss={() => setIsFocused(false)}
+      >
+        <View className="px-4 pb-8 pt-4">
+          <Text className="mb-4 text-center text-lg font-semibold text-gray-900">
+            {label || 'Select an option'}
+          </Text>
+          <View className="mx-2">
+            {options.map((option, index) => (
+              <TouchableOpacity
+                key={option.value}
+                onPress={() => handleOptionPress(option.value)}
+                disabled={option.disabled}
+                className={clsx(
+                  'flex-row items-center justify-between py-4',
+                  {
+                    'border-t border-gray-200': index > 0,
+                    'opacity-50': option.disabled,
+                  },
+                )}
+              >
+                <Text
+                  className={clsx('flex-1 text-base', {
+                    'text-gray-900': !option.disabled,
+                    'text-gray-400': option.disabled,
+                    'font-medium': option.value === value,
+                  })}
+                >
+                  {option.label}
+                </Text>
+                {option.value === value && (
+                  <CheckIcon
+                    size={20}
+                    className="ml-2 text-brand-primary"
+                  />
+                )}
+              </TouchableOpacity>
+            ))}
+          </View>
+        </View>
+      </BaseBottomSheetModal>
+    </View>
+  );
+}
+
+export default styled(BaseSelect);

package/src/components/BaseStackedList.tsx

@@ -9,7 +9,7 @@ import BaseButton from './BaseButton';
 import BaseSpinner from './BaseSpinner';
 import colors from '../styles/colors';
 
-export interface BaseStackedListProps<T> {
+export interface BaseStackedListProps<T> extends ViewProps {
   itemsCount: number;
   items: T[];
   renderItem: (item: T, index: number) => ReactNode;
@@ -58,6 +58,7 @@ function BaseStackedList<T>({
   keyExtractor,
   emptyStateDescription,
   minHeight = 0,
+  ...props
 }: BaseStackedListProps<T>) {
   const totalPages = useMemo(() => Math.ceil(itemsCount / pageSize), [itemsCount, pageSize]);
   const hasNextPage = currentPage < totalPages - 1;
@@ -73,10 +74,15 @@ function BaseStackedList<T>({
   const hasItemsForCurrentPage = currentPageItems.length > pageSize * (currentPage + 1);
 
   return (
-    <View className="flex flex-col rounded-xl border border-secondary bg-primary shadow-sm">
-      <View className="border-b border-secondary p-4">
-        {header}
-      </View>
+    <View
+      className="flex flex-col rounded-xl border border-secondary bg-primary shadow-sm"
+      {...props}
+    >
+      {header && (
+        <View className="border-b border-secondary p-4">
+          {header}
+        </View>
+      )}
       {loading && !hasItemsForCurrentPage && (
         <View
           className="flex items-center justify-center py-12"
@@ -134,4 +140,6 @@ function BaseStackedList<T>({
   );
 }
 
-export default styled(BaseStackedList);
+const StackedList = styled(BaseStackedList) as typeof BaseStackedList;
+
+export default StackedList;