ripal-ui 1.0.17 → 1.0.21

package/components/{BottomSheet.jsx → BottomSheet.tsx}

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, ReactNode } from 'react';
 import {
 	Animated,
 	View,
@@ -15,7 +15,26 @@ import config from '../config';
 
 const { height: screenHeight } = Dimensions.get('window');
 
-const BottomSheet = ({ isVisible, onClose, children, height = 'auto', scroll = false, style, contentContainerStyle }) => {
+// Define props interface
+interface BottomSheetProps {
+	isVisible: boolean;
+	onClose: () => void;
+	children: ReactNode;
+	height?: number | string;
+	scroll?: boolean;
+	style?: object;
+	contentContainerStyle?: object;
+}
+
+const BottomSheet: React.FC<BottomSheetProps> = ({
+	isVisible,
+	onClose,
+	children,
+	height = 'auto',
+	scroll = false,
+	style,
+	contentContainerStyle,
+}) => {
 	const [visible, setVisible] = useState(isVisible);
 	const translateY = useRef(new Animated.Value(screenHeight)).current;
 	const scrollOffset = useRef(0); // Keep track of ScrollView offset
@@ -102,7 +121,7 @@ const BottomSheet = ({ isVisible, onClose, children, height = 'auto', scroll = f
 	return (
 		<View style={StyleSheet.absoluteFill}>
 			{/* Background Overlay */}
-			<TouchableWithoutFeedback onPress={() => onClose()}>
+			<TouchableWithoutFeedback onPress={onClose}>
 				<View style={styles.overlay} />
 			</TouchableWithoutFeedback>
 
@@ -111,7 +130,7 @@ const BottomSheet = ({ isVisible, onClose, children, height = 'auto', scroll = f
 				{...panResponder.panHandlers}
 				style={[
 					styles.sheet,
-					{ height, ...style },
+					{ height: height, ...style },
 					{
 						transform: [
 							{ translateY },
@@ -126,7 +145,7 @@ const BottomSheet = ({ isVisible, onClose, children, height = 'auto', scroll = f
 				{/* Children */}
 				<View style={styles.dragIndicatorContainer}>
 					<TouchableWithoutFeedback {...panResponder.panHandlers}>
-						<Separator height={6} style={{borderRadius: 99}} width='12%' color={config.colors.slate[300]} />
+						<Separator height={6} style={{ borderRadius: 99 }} width='12%' color={config.colors.slate[300]} />
 					</TouchableWithoutFeedback>
 				</View>
 				
@@ -168,11 +187,6 @@ const styles = StyleSheet.create({
 		borderTopRightRadius: 20,
 		elevation: 5,
 	},
-	content: {
-		flex: 1,
-		justifyContent: 'center',
-		alignItems: 'center',
-	},
 	dragIndicatorContainer: {
 		width: '100%',
 		alignItems: 'center',

package/components/Carousel.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Dimensions, Pressable, ScrollView, StyleSheet, View, ViewStyle } from "react-native";
+import { Text } from "../elements";
+
+// Define types for the CarouselItem props
+interface CarouselItemProps {
+    children: React.ReactNode;
+    itemWidth: number;
+    onPress?: () => void;
+    style?: ViewStyle;
+}
+
+// Define the CarouselItem component
+const CarouselItem: React.FC<CarouselItemProps> = ({ children, itemWidth, onPress, style }) => {
+    return (
+        <Pressable style={{ width: itemWidth, ...style }} onPress={onPress}>
+            {children}
+        </Pressable>
+    );
+};
+
+// Define types for the Carousel props
+interface CarouselProps {
+    children: React.ReactNode;
+    itemWidth?: number;
+    showIndicator?: boolean;
+}
+
+// Define the Carousel component
+const Carousel: React.FC<CarouselProps> = ({
+    children,
+    itemWidth = 0.6 * Dimensions.get('window').width,
+    showIndicator = false,
+}) => {
+    return (
+        <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={showIndicator}
+            contentContainerStyle={styles.container}
+        >
+            <View></View>
+            {React.Children.map(children, (child) =>
+                React.cloneElement(child as React.ReactElement<any>, { itemWidth })
+            )}
+            <View></View>
+        </ScrollView>
+    );
+};
+
+// Define styles
+const styles = StyleSheet.create({
+    area: {
+        // Add any specific styles if needed
+    },
+    container: {
+        gap: 20,
+    },
+});
+
+// Export components
+export { Carousel, CarouselItem };

package/components/Circle.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { Pressable, StyleSheet, PressableProps, ViewStyle } from "react-native";
+import config from "../config";
+
+interface CircleProps extends PressableProps {
+	size?: number; // Optional size for the circle
+	color?: string; // Optional color for the circle
+	rounded?: number; // Optional rounded value for the border radius
+	children?: React.ReactNode; // Allows for any valid React node
+	onPress?: () => void; // Optional onPress function
+}
+
+const Circle: React.FC<CircleProps> = ({
+	size = 24,
+	color = config.colors.primary,
+	children,
+	onPress,
+	rounded = 999,
+}) => {
+	return (
+		<Pressable
+			onPress={onPress}
+			style={{
+				...styles.area,
+				backgroundColor: color,
+				height: size,
+				width: size, // Added width to maintain aspect ratio
+				borderRadius: rounded,
+			}}
+		>
+			{children}
+		</Pressable>
+	);
+};
+
+const styles = StyleSheet.create({
+	area: {
+		aspectRatio: 1,
+		alignItems: 'center',
+		justifyContent: 'center',
+	},
+});
+
+export default Circle;

package/components/Tab.tsx

@@ -0,0 +1,90 @@
+import React, { useState, ReactNode } from "react";
+import { Pressable, ScrollView, StyleSheet, View } from "react-native";
+import Text from "../elements/Text";
+import Inline from "../elements/Inline";
+import config from "../config";
+
+// Define the props for the TabScreen component
+interface TabScreenProps {
+    children: ReactNode;
+}
+
+// TabScreen component
+const TabScreen: React.FC<TabScreenProps> = ({ children }) => {
+    return <>{children}</>;
+};
+
+// Define the props for the Tab component
+interface TabProps {
+    children: React.ReactElement<{ title: string }>[];
+}
+
+// Tab component
+const Tab: React.FC<TabProps> = ({ children }) => {
+    const [index, setIndex] = useState(0);
+
+    return (
+        <View>
+            {
+                children.length > 3 ? (
+                    <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.tab_area}>
+                        {children.map((child, c) => {
+                            const isActive = c === index;
+                            return (
+                                <Pressable
+                                    key={c}
+                                    style={{
+                                        ...styles.tab_item,
+                                        borderBottomColor: isActive ? config.colors.primary : config.colors.slate[200],
+                                    }}
+                                    onPress={() => setIndex(c)}
+                                >
+                                    <Text 
+                                        color={isActive ? config.colors.primary : config.colors.slate[500]}
+                                        weight={isActive ? "600SemiBold" : "400Regular"}
+                                    >
+                                        {child.props.title}
+                                    </Text>
+                                </Pressable>
+                            );
+                        })}
+                    </ScrollView>
+                ) : (
+                    <Inline style={styles.tab_area} gap={0}>
+                        {children.map((child, c) => {
+                            const isActive = c === index;
+                            return (
+                                <Inline justifyContent="center" key={c} style={{
+                                    ...styles.tab_item,
+                                    borderBottomColor: isActive ? config.colors.primary : config.colors.slate[200],
+                                }} onPress={() => setIndex(c)}>
+                                    <Text 
+                                        color={isActive ? config.colors.primary : config.colors.slate[500]}
+                                        weight={isActive ? "600SemiBold" : "400Regular"}
+                                    >
+                                        {child.props.title}
+                                    </Text>
+                                </Inline>
+                            );
+                        })}
+                    </Inline>
+                )
+            }
+            {children[index]}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    tab_area: {
+        marginBottom: 10,
+    },
+    tab_item: {
+        paddingHorizontal: 20,
+        paddingVertical: 12,
+        flexGrow: 1,
+        borderBottomWidth: 1,
+    }
+});
+
+export { Tab, TabScreen };

package/components/{Table.jsx → Table.tsx}

@@ -1,10 +1,18 @@
 import React from 'react';
-import { View, ScrollView, StyleSheet } from 'react-native';
+import { View, ScrollView, StyleSheet, ViewStyle } from 'react-native';
 import Text from '../elements/Text';
 import config from '../config';
 
+// Define the types for the Cell component props
+interface CellProps {
+    children: React.ReactNode;
+    isHeader?: boolean;
+    width?: number;
+    flexible?: boolean;
+}
+
 // Cell component
-const Cell = ({ children, isHeader, width, flexible }) => {
+const Cell: React.FC<CellProps> = ({ children, isHeader = false, width, flexible = false }) => {
     return (
         <View style={[styles.cell, { width: flexible ? 'auto' : width, flex: flexible ? 1 : undefined }]}>
             <Text weight={isHeader ? '600SemiBold' : '400Regular'}>
@@ -14,37 +22,51 @@ const Cell = ({ children, isHeader, width, flexible }) => {
     );
 };
 
+// Define the types for the Row component props
+interface RowProps {
+    children: React.ReactNode;
+    isHeader?: boolean;
+    cellWidth?: number;
+    flexible?: boolean;
+}
+
 // Row component
-const Row = ({ children, isHeader, cellWidth, flexible }) => {
+const Row: React.FC<RowProps> = ({ children, isHeader = false, cellWidth, flexible = false }) => {
     return (
         <View style={styles.row}>
             {React.Children.map(children, (child) =>
-                React.cloneElement(child, { isHeader, width: cellWidth, flexible })
+                React.cloneElement(child as React.ReactElement, { isHeader, width: cellWidth, flexible })
             )}
         </View>
     );
 };
 
+// Define the types for the Table component props
+interface TableProps {
+    children: React.ReactNode;
+    cellWidth?: number;
+}
+
 // Table component with dynamic width adjustment and scroll if more than 3 cells
-const Table = ({ children, cellWidth = 100 }) => {
+const Table: React.FC<TableProps> = ({ children, cellWidth = 100 }) => {
     // Determine if any row has more than 3 cells
     const hasManyCells = React.Children.toArray(children).some(child => {
-        return React.Children.count(child.props.children) > 3;
+        return React.Children.count((child as React.ReactElement).props.children) > 3;
     });
 
     return hasManyCells ? (
         <ScrollView horizontal>
-            <View style={styles.table}>
+            <View>
                 {React.Children.map(children, (child, index) => (
                     // Automatically pass `isHeader` for the first row (index 0)
-                    React.cloneElement(child, { isHeader: index === 0, cellWidth, flexible: false })
+                    React.cloneElement(child as React.ReactElement, { isHeader: index === 0, cellWidth, flexible: false })
                 ))}
             </View>
         </ScrollView>
     ) : (
-        <View style={styles.table}>
+        <View>
             {React.Children.map(children, (child, index) => (
-                React.cloneElement(child, { isHeader: index === 0, cellWidth, flexible: true })
+                React.cloneElement(child as React.ReactElement, { isHeader: index === 0, cellWidth, flexible: true })
             ))}
         </View>
     );

package/components/index.ts

@@ -0,0 +1,5 @@
+export { default as Circle } from './Circle';
+export { default as BottomSheet } from './BottomSheet';
+export { Carousel, CarouselItem } from "./Carousel";
+export { Table, Cell, Row } from './Table';
+export { Tab, TabScreen } from "./Tab";

package/config.js

@@ -1,3 +1,4 @@
 import config from "../../ripal-ui.config.js"
+// import config from "../ripal-ui.config.js"
 
 export default config

package/dist/index.js

@@ -3,46 +3,94 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "BottomSheet", {
+Object.defineProperty(exports, "Button", {
   enumerable: true,
   get: function get() {
-    return _BottomSheet["default"];
+    return _Button["default"];
   }
 });
-Object.defineProperty(exports, "Carousel", {
+Object.defineProperty(exports, "Dialog", {
   enumerable: true,
   get: function get() {
-    return _Carousel["default"];
+    return _Dialog.Dialog;
   }
 });
-Object.defineProperty(exports, "Circle", {
+Object.defineProperty(exports, "DialogActions", {
   enumerable: true,
   get: function get() {
-    return _Circle["default"];
+    return _Dialog.DialogActions;
   }
 });
-Object.defineProperty(exports, "DatePicker", {
+Object.defineProperty(exports, "Dropdown", {
   enumerable: true,
   get: function get() {
-    return _DatePicker["default"];
+    return _Dropdown["default"];
   }
 });
-Object.defineProperty(exports, "Tab", {
+Object.defineProperty(exports, "Inline", {
   enumerable: true,
   get: function get() {
-    return _Tab["default"];
+    return _Inline["default"];
   }
 });
-Object.defineProperty(exports, "Table", {
+Object.defineProperty(exports, "Input", {
   enumerable: true,
   get: function get() {
-    return _Table["default"];
+    return _Input["default"];
   }
 });
-var _BottomSheet = _interopRequireDefault(require("./BottomSheet"));
-var _Carousel = _interopRequireDefault(require("./Carousel"));
-var _Circle = _interopRequireDefault(require("./Circle"));
-var _DatePicker = _interopRequireDefault(require("./DatePicker"));
-var _Tab = _interopRequireDefault(require("./Tab"));
-var _Table = _interopRequireDefault(require("./Table"));
+Object.defineProperty(exports, "ProgressBar", {
+  enumerable: true,
+  get: function get() {
+    return _ProgressBar["default"];
+  }
+});
+Object.defineProperty(exports, "Separator", {
+  enumerable: true,
+  get: function get() {
+    return _Separator["default"];
+  }
+});
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function get() {
+    return _Skeleton["default"];
+  }
+});
+Object.defineProperty(exports, "Switch", {
+  enumerable: true,
+  get: function get() {
+    return _Switch["default"];
+  }
+});
+Object.defineProperty(exports, "Text", {
+  enumerable: true,
+  get: function get() {
+    return _Text["default"];
+  }
+});
+Object.defineProperty(exports, "Toast", {
+  enumerable: true,
+  get: function get() {
+    return _Toast["default"];
+  }
+});
+Object.defineProperty(exports, "Toggle", {
+  enumerable: true,
+  get: function get() {
+    return _Toggle["default"];
+  }
+});
+var _Button = _interopRequireDefault(require("./Button"));
+var _Dialog = require("./Dialog");
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));
+var _Inline = _interopRequireDefault(require("./Inline"));
+var _Input = _interopRequireDefault(require("./Input"));
+var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
+var _Separator = _interopRequireDefault(require("./Separator"));
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+var _Switch = _interopRequireDefault(require("./Switch"));
+var _Text = _interopRequireDefault(require("./Text"));
+var _Toast = _interopRequireDefault(require("./Toast"));
+var _Toggle = _interopRequireDefault(require("./Toggle"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/elements/{Button.jsx → Button.tsx}

@@ -1,36 +1,51 @@
-import React from 'react';
-import { TouchableOpacity, StyleSheet } from 'react-native';
+import React, { FC } from 'react';
+import { TouchableOpacity, StyleSheet, ViewStyle } from 'react-native';
 import config from '../config';
 import Text from './Text';
 
-const Button = ({
-    children, 
-    accent = 'primary', 
-    onPress, onLongPress,
-    color = config.colors.primary, 
-    height = 50, 
-    circle = false, 
-    justifyContent = 'center', 
-    style, textProps
+interface ButtonProps {
+    children: React.ReactNode;
+    accent?: 'primary' | 'secondary' | 'tertiary';
+    onPress?: () => void;
+    onLongPress?: () => void;
+    color?: string;
+    height?: number;
+    circle?: boolean;
+    justifyContent?: ViewStyle['justifyContent'];
+    style?: ViewStyle;
+    textProps?: Record<string, unknown>;
+}
+
+const Button: FC<ButtonProps> = ({
+    children,
+    accent = 'primary',
+    onPress,
+    onLongPress,
+    color = config.colors.primary,
+    height = 50,
+    circle = false,
+    justifyContent = 'center',
+    style,
+    textProps
 }) => {
-    const getAccentStyle = () => {
+    const getAccentStyle = (): ViewStyle => {
         switch (accent) {
             case 'primary':
                 return {
                     backgroundColor: color,
                     borderColor: color,
-                    color: '#fff',
+                    // color: '#fff',
                 };
             case 'secondary':
                 return {
                     backgroundColor: '#fff',
                     borderColor: color,
-                    color: color,
+                    // color: color,
                 };
             case 'tertiary':
                 return {
                     backgroundColor: '#fff',
-                    color: color,
+                    // color: color,
                     borderColor: config.colors.transparent
                 };
             default:
@@ -38,7 +53,7 @@ const Button = ({
         }
     };
 
-    const getColorStyle = () => {
+    const getColorStyle = (): ViewStyle => {
         switch (color) {
             case 'red':
                 return { backgroundColor: '#e74c3c', borderColor: '#e74c3c' };
@@ -56,19 +71,26 @@ const Button = ({
             onPress={onPress}
             onLongPress={onLongPress}
             style={[
-                styles.button, 
-                getAccentStyle(), 
+                styles.button,
+                getAccentStyle(),
                 getColorStyle(),
-                { 
-                    height: height, 
-                    aspectRatio: circle ? 1 : 'auto', 
-                    borderRadius: circle ? 999 : 12, 
-                    justifyContent: justifyContent, 
-                    ...style 
+                {
+                    height: height,
+                    aspectRatio: circle ? 1 : undefined,
+                    borderRadius: circle ? 999 : 12,
+                    justifyContent: justifyContent,
+                    ...style,
                 }
             ]}
         >
-            <Text {...textProps} color={accent === "primary" ? "#fff" : color} style={styles.text} weight='600SemiBold'>{children}</Text>
+            <Text
+                {...textProps}
+                color={accent === "primary" ? "#fff" : color}
+                style={styles.text}
+                weight='600SemiBold'
+            >
+                {children}
+            </Text>
         </TouchableOpacity>
     );
 };
@@ -77,7 +99,7 @@ const styles = StyleSheet.create({
     button: {
         paddingHorizontal: 20,
         height: 50,
-        borderRadius: 8,
+        borderRadius: 12,
         fontWeight: '600',
         fontSize: 14,
         display: 'flex',
@@ -86,6 +108,9 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         borderWidth: 1,
     },
+    text: {
+        // Adjust text style here if necessary
+    }
 });
 
 export default Button;