@nativetail/ui 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nativetail/ui",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"description": "",
 	"main": "src/index.ts",
 	"scripts": {},

package/src/components/index.ts

@@ -12,3 +12,4 @@ export * from "./chip";
 export * from "./blur";
 export * from "./progress";
 export * from "./counter";
+export * from "./tabs";

package/src/components/input/floating-input.tsx

@@ -1,20 +1,23 @@
-import { cn, Text, TextInput, TextInputProps, View } from "@nativetail/core";
+import {
+	cn,
+	Text,
+	TextInput,
+	TextInputProps,
+	useTw,
+	View,
+} from "@nativetail/core";
 import { useCallback, useState } from "react";
-import { create } from "zustand";
+import ShowPassword from "./show-password";
 
-type FloatingInputProps = TextInputProps & {
+type FloatingInputProps = Omit<TextInputProps, "placeholder"> & {
 	containerClassName?: string;
 	label: string;
 	error?: string;
 	helperText?: string;
+	isSecretToggleable?: boolean;
+	leftElement?: React.ReactNode;
+	rightElement?: React.ReactNode;
 };
-const useFocusSate = create<{
-	isFocused: boolean;
-	setIsFocused: (isFocused: boolean) => void;
-}>((set) => ({
-	isFocused: false,
-	setIsFocused: (isFocused: boolean) => set({ isFocused }),
-}));
 export function FloatingInput({
 	value,
 	onChangeText,
@@ -22,40 +25,76 @@ export function FloatingInput({
 	label,
 	error,
 	className,
+	isSecretToggleable,
+	helperText,
+	leftElement,
+	rightElement,
 	...props
 }: FloatingInputProps) {
+	const [isFocused, setIsFocused] = useState(false);
 	const onFocus = useCallback(() => {
-		useFocusSate.getState().setIsFocused(true);
+		setIsFocused(true);
 	}, []);
 	const onBlur = useCallback(() => {
-		useFocusSate.getState().setIsFocused(false);
+		setIsFocused(false);
 	}, []);
+	const tw = useTw();
+	const [showPassword, setShowPassword] = useState(false);
 	return (
-		<View
-			className={cn(
-				"w-full rounded-xl h-16 overflow-hidden  border border-muted/15",
-				containerClassName
-			)}
-		>
-			<Label label={label} value={value} />
-
-			<TextInput
-				onFocus={onFocus}
-				onBlur={onBlur}
-				value={value}
-				onChangeText={onChangeText}
+		<>
+			<View
 				className={cn(
-					"flex-1 p-3 bg-card rounded-xl absolute w-full h-full -z-5 pt-5 text-foreground text-[16px]",
-					className
+					"w-full rounded-xl h-16 overflow-hidden  border border-muted/15",
+					containerClassName
 				)}
-				{...props}
-			/>
-		</View>
+			>
+				<Label label={label} value={value} isFocused={isFocused} />
+
+				{leftElement && (
+					<View className="absolute left-2 bottom-2">{leftElement}</View>
+				)}
+				<TextInput
+					onFocus={onFocus}
+					onBlur={onBlur}
+					value={value}
+					onChangeText={onChangeText}
+					className={cn(
+						"flex-1 p-3 bg-card rounded-xl absolute w-full h-full -z-5 pt-5 text-foreground text-[16px]",
+						className,
+						isSecretToggleable || rightElement ? "pr-12" : "",
+						leftElement ? "pl-12" : ""
+					)}
+					secureTextEntry={!showPassword}
+					{...props}
+					placeholder=""
+				/>
+				{rightElement && (
+					<View className="absolute right-2 bottom-2">{rightElement}</View>
+				)}
+				{isSecretToggleable && (
+					<ShowPassword
+						showPassword={showPassword}
+						setShowPassword={setShowPassword}
+					/>
+				)}
+			</View>
+
+			{helperText && <Text className="text-muted text-sm">{helperText}</Text>}
+
+			{error && <Text className="text-danger text-sm">{error}</Text>}
+		</>
 	);
 }
 
-const Label = ({ label, value }: { label?: string; value?: string }) => {
-	const isFocused = useFocusSate((state) => state.isFocused);
+const Label = ({
+	label,
+	value,
+	isFocused,
+}: {
+	label?: string;
+	value?: string;
+	isFocused?: boolean;
+}) => {
 	const labelOnTop = isFocused || !!value;
 
 	return (

package/src/components/input/index.ts

@@ -1,2 +1,3 @@
 export * from "./floating-input";
 export * from "./input";
+export * from "./pin-input";

package/src/components/input/input.tsx

@@ -6,12 +6,17 @@ import {
 	useTw,
 	View,
 } from "@nativetail/core";
+import { useState } from "react";
+import ShowPassword from "./show-password";
 
 type InputProps = TextInputProps & {
 	containerClassName?: string;
 	label: string;
 	error?: string;
 	helperText?: string;
+	isSecretToggleable?: boolean;
+	leftElement?: React.ReactNode;
+	rightElement?: React.ReactNode;
 };
 export function Input({
 	value,
@@ -20,22 +25,44 @@ export function Input({
 	label,
 	error,
 	className,
+	isSecretToggleable,
+	rightElement,
+	helperText,
+	leftElement,
 	...props
 }: InputProps) {
 	const tw = useTw();
+	const [showPassword, setShowPassword] = useState(false);
 	return (
 		<View className={cn("w-full gap-1", containerClassName)}>
 			<Text className={cn("text-muted/75 duration-75 ")}>{label}</Text>
+
 			<TextInput
 				value={value}
 				onChangeText={onChangeText}
 				className={cn(
 					"p-3 bg-card rounded-lg w-full border border-muted/15 h-14 text-foreground -z-5 text-[16px]",
-					className
+					className,
+					isSecretToggleable || rightElement ? "pr-12" : "",
+					leftElement ? "pl-12" : ""
 				)}
 				placeholderTextColor={tw.color("muted")}
+				secureTextEntry={!showPassword}
 				{...props}
 			/>
+			{helperText && <Text className="text-muted text-sm">{helperText}</Text>}
+
+			{leftElement && (
+				<View className="absolute left-2 bottom-2">{leftElement}</View>
+			)}
+			{error && <Text className="text-danger text-sm">{error}</Text>}
+
+			{isSecretToggleable && (
+				<ShowPassword
+					showPassword={showPassword}
+					setShowPassword={setShowPassword}
+				/>
+			)}
 		</View>
 	);
 }

package/src/components/input/pin-input.tsx

@@ -0,0 +1,75 @@
+import { cn, Pressable, TextInput, View } from "@nativetail/core";
+import { useCallback, useRef, useState } from "react";
+import { TextInput as NativeTextInput } from "react-native";
+
+export type PinInputProps = {
+	value: string;
+	onChangeText: (text: string) => void;
+	length: number;
+	pinBoxClassName?: string;
+	pinBoxFocusedClassName?: string;
+	containerClassName?: string;
+	error?: string;
+	helperText?: string;
+};
+export function PinInput({
+	value,
+	onChangeText,
+	containerClassName,
+	error,
+	pinBoxClassName,
+	pinBoxFocusedClassName,
+	helperText,
+	length,
+	...props
+}: PinInputProps) {
+	const [isFocused, setIsFocused] = useState(false);
+	const activeIndex = value.length == length ? length - 1 : value.length;
+	const textInputRef = useRef<NativeTextInput>();
+	const onFocus = useCallback(() => {
+		setIsFocused(true);
+	}, [setIsFocused]);
+	const onBlur = useCallback(() => {
+		setIsFocused(false);
+	}, [setIsFocused]);
+	const _handleChange = useCallback(
+		(text: string) => {
+			if (text.length <= length) {
+				onChangeText(text);
+			}
+		},
+		[onChangeText]
+	);
+	const onPinBoxPress = useCallback(() => {
+		setIsFocused(true);
+		textInputRef.current?.focus();
+	}, [textInputRef, setIsFocused]);
+	return (
+		<View className={cn(" gap-2 flex-row  w-full", containerClassName)}>
+			{Array.from({ length: length }).map((_, index) => (
+				<Pressable
+					key={`pininput-${index}`}
+					className={cn(
+						"p-2 bg-card rounded-lg items-center justify-center w-full font-medium aspect-sqaure flex-1 border border-muted/15 h-16 text-foreground text-[16px] text-center",
+						pinBoxClassName,
+						isFocused &&
+							activeIndex === index &&
+							"border-foreground" + " " + pinBoxFocusedClassName
+					)}
+					onPress={onPinBoxPress}
+				>
+					{value[index]}
+				</Pressable>
+			))}
+			<TextInput
+				ref={textInputRef}
+				value={value}
+				onChangeText={_handleChange}
+				onFocus={onFocus}
+				onBlur={onBlur}
+				className="opacity-0 scale-0 absolute"
+				{...props}
+			/>
+		</View>
+	);
+}

package/src/components/input/show-password.tsx

@@ -0,0 +1,32 @@
+import { Pressable, useTw } from "@nativetail/core";
+import { Iconify } from "react-native-iconify";
+
+export default function ShowPassword({
+	showPassword,
+	setShowPassword,
+}: {
+	showPassword: boolean;
+	setShowPassword: (showPassword: boolean) => void;
+}) {
+	const tw = useTw();
+	return (
+		<Pressable
+			onPress={() => setShowPassword(!showPassword)}
+			className="absolute right-2 bottom-2"
+		>
+			{showPassword ? (
+				<Iconify
+					icon="solar:eye-linear"
+					size={20}
+					color={tw.color("foreground")}
+				/>
+			) : (
+				<Iconify
+					icon="solar:eye-closed-linear"
+					size={20}
+					color={tw.color("foreground")}
+				/>
+			)}
+		</Pressable>
+	);
+}

package/src/components/tabs/index.tsx

@@ -0,0 +1,48 @@
+import { cn, Pressable, View } from "@nativetail/core";
+
+export type TabsProps = {
+	tabs: {
+		label: string;
+		value: string;
+	}[];
+	activeTab: string;
+	setActiveTab: (value: string) => void;
+	inactiveTabClassName?: string;
+	activeTabClassName?: string;
+	containerClassName?: string;
+};
+export function Tabs({
+	tabs,
+	activeTab,
+	setActiveTab,
+	containerClassName,
+	activeTabClassName,
+	inactiveTabClassName,
+}: TabsProps) {
+	return (
+		<View
+			className={cn(
+				"rounded-xl self-start flex-row border overflow-hidden border-muted/15 bg-background",
+				containerClassName
+			)}
+		>
+			{tabs?.map((tab) => {
+				const isActive = tab.value === activeTab;
+
+				return (
+					<Pressable
+						className={cn(
+							"p-2 text-sm font-medium",
+							isActive ? "bg-primary text-white" : "bg-background text-muted",
+							isActive ? activeTabClassName : inactiveTabClassName
+						)}
+						key={tab.value}
+						onPress={() => setActiveTab(tab.value)}
+					>
+						{tab.label}
+					</Pressable>
+				);
+			})}
+		</View>
+	);
+}