@nativetail/ui 0.0.6 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nativetail/ui",
-	"version": "0.0.6",
+	"version": "0.0.8",
 	"description": "",
 	"main": "src/index.ts",
 	"scripts": {},
@@ -40,7 +40,8 @@
 		"react-native-reanimated": "~3.10.1",
 		"react-native-safe-area-context": "4.10.1",
 		"tailwind-merge": "^2.3.0",
-		"zustand": "^4.5.2"
+		"zustand": "^4.5.2",
+		"@hookform/resolvers": "^3.6.0"
 	},
 	"devDependencies": {
 		"metro-react-native-babel-preset": "^0.77.0",

package/src/components/alert-dialog/index.tsx

@@ -39,7 +39,7 @@ export const AlertDialog = forwardRef<DialogMethods, AlertDialogProps>(
 				<View className="flex-row items-center  border-t border-muted/15">
 					<Button
 						variant="link"
-						className="flex-1 active:opacity-75 text-foreground"
+						className="flex-1 active:opacity-75 text-foreground rounded-none"
 						onPress={onCancel}
 					>
 						Cancel

package/src/components/bottom-sheet/index.tsx

@@ -1,4 +1,3 @@
-import { BlurView } from "expo-blur";
 import { cn, useTw, View } from "@nativetail/core";
 import { forwardRef } from "react";
 import ActionSheet, {

package/src/components/button/index.tsx

@@ -1,8 +1,9 @@
 import React, { useMemo } from "react";
 
-import { MotiPressableProps } from "moti/interactions";
 import {
 	ActivityIndicator,
+	cn,
+	ConfigVariants,
 	cva,
 	mergeClasses,
 	Pressable,
@@ -10,6 +11,8 @@ import {
 	useTw,
 	VariantProps,
 } from "@nativetail/core";
+import { MotiPressableProps } from "moti/interactions";
+import { useComponentTheme } from "../../utils/component-theme";
 
 const buttonVariants = cva(
 	"flex-row gap-2 items-center justify-center rounded text-sm font-medium hover:opacity-90 active:opacity-80 opacity-100 select-none",
@@ -18,7 +21,7 @@ const buttonVariants = cva(
 			variant: {
 				default: "bg-primary  text-foreground ",
 				destructive: "bg-red-500 text-foreground  ",
-				outline: "border border-primary text-foreground bg-black/0  ",
+				outline: "border border-muted/15 text-foreground bg-black/0  ",
 				secondary: "bg-secondary text-foreground  ",
 				ghost: "",
 				link: "text-primary ",
@@ -40,6 +43,30 @@ const buttonVariants = cva(
 		},
 	}
 );
+type VariantPropType = (
+	props?: ConfigVariants<{
+		variant: {
+			default: string;
+			destructive: string;
+			outline: string;
+			secondary: string;
+			ghost: string;
+			link: string;
+			card: string;
+		};
+		size: {
+			default: string;
+			sm: string;
+			lg: string;
+			icon: string;
+		};
+		disabled: {
+			true: string;
+		};
+	}> & {
+		className?: string;
+	}
+) => string;
 export type ButtonProps = MotiPressableProps &
 	VariantProps<typeof buttonVariants> & {
 		text?: string;
@@ -51,36 +78,51 @@ export type ButtonProps = MotiPressableProps &
 		className?: string;
 		children?: React.ReactNode;
 		loadingIndicatorClassName?: string;
+		variants?: VariantPropType;
 	};
 
-const Button = ({
-	text,
-	children,
-	isLoading,
-	className,
-	disabled,
-	variant,
-	leftElement,
-	rightElement,
-	size,
-	loadingIndicatorClassName,
-
-	...props
-}: ButtonProps) => {
+const Button = (passedProps: ButtonProps) => {
+	const componentTheme = useComponentTheme();
+	const buttonProps = componentTheme?.Button || {};
+	const {
+		text,
+		children,
+		isLoading,
+		disabled,
+		variant,
+		leftElement,
+		rightElement,
+		size,
+		className: propClassName,
+		loadingIndicatorClassName,
+		variants,
+		...props
+	} = {
+		...buttonProps,
+		...passedProps,
+	};
 	const tw = useTw();
+	const className = cn(buttonProps.className, passedProps.className);
 
 	const loading = isLoading;
 
 	const isDisabled = disabled || loading;
 	const variantClass = useMemo(
 		() =>
-			buttonVariants({
-				variant,
-				size,
-				className,
-				disabled: isDisabled,
-			}),
-		[variant, size, className, isDisabled, tw]
+			variants
+				? variants({
+						variant,
+						size,
+						className,
+						disabled: isDisabled,
+					})
+				: buttonVariants({
+						variant,
+						size,
+						className,
+						disabled: isDisabled,
+					}),
+		[variant, size, className, isDisabled, tw, variants]
 	);
 
 	const { textClasses } = separateClasses(variantClass);

package/src/components/chip/index.tsx

@@ -33,7 +33,7 @@ const chipVariants = cva(
 		},
 	}
 );
-type ChipProps = VariantProps<typeof chipVariants> & {
+export type ChipProps = VariantProps<typeof chipVariants> & {
 	text?: string;
 	textClass?: string;
 	leftElement?: React.ReactNode;

package/src/components/counter/index.tsx

@@ -19,13 +19,13 @@ export function Counter({
 	const tw = useTw();
 	const increment = useCallback(() => {
 		setValue((prev) => {
-			if (max && prev >= max) return;
+			if (max && prev >= max) return prev;
 			return prev + 1;
 		});
 	}, [setValue, max]);
 	const decrement = useCallback(() => {
 		setValue((prev) => {
-			if (min && prev <= min) return;
+			if (min && prev <= min) return prev;
 			return prev - 1;
 		});
 	}, [setValue, min]);
@@ -34,6 +34,7 @@ export function Counter({
 			const number = parseInt(text);
 
 			if (isNaN(number)) return;
+			if (!number) return;
 			setValue(number);
 		},
 		[min, max, setValue]
@@ -57,7 +58,7 @@ export function Counter({
 				<TextInput
 					className="flex-1 items-center text-center justify-center bg-card rounded-xl h-full text-foreground font-medium select-none"
 					onChangeText={onChangeText}
-					value={value.toString()}
+					value={value?.toString?.()}
 				/>
 			</View>
 			<CounterButton disabled={!!(max && value >= max)} onPress={increment}>

package/src/components/dialog/index.tsx

@@ -17,6 +17,8 @@ export type DialogProps = {
 	useBlur?: boolean;
 	children: React.ReactNode;
 	onRequestClose?: () => void;
+	closable?: boolean;
+	backdropClassName?: string;
 };
 let timeout: NodeJS.Timeout;
 export type DialogMethods = {
@@ -29,7 +31,9 @@ export const Dialog = forwardRef<DialogMethods, DialogProps>(function Dialog(
 		contentClassName,
 		useBlur = false,
 		children,
+		closable = true,
 		onRequestClose,
+		backdropClassName,
 	}: DialogProps,
 	ref
 ) {
@@ -70,27 +74,35 @@ export const Dialog = forwardRef<DialogMethods, DialogProps>(function Dialog(
 		}
 	}, [isOpen]);
 
+	const handleOnRequestClose =
+		onRequestClose ?? closable ? getRef().hide : undefined;
 	return (
 		<Modal
 			visible={modalOpen}
 			transparent
-			onRequestClose={onRequestClose}
+			onRequestClose={handleOnRequestClose}
 			animationType="fade"
 			statusBarTranslucent
 		>
-			<Pressable
+			<View
 				className={cn(
-					"flex-1 items-center justify-center p-4 w-full h-full bg-black/35",
+					"flex-1 items-center justify-center p-4 w-full h-full ",
 					containerClassName
 				)}
-				onPress={onRequestClose}
-				disabled={!onRequestClose}
 			>
+				<Pressable
+					onPress={handleOnRequestClose}
+					disabled={!closable && !onRequestClose}
+					className={cn(
+						"flex-1 bg-black/35 -z-10 w-full h-full absolute top-0 left-0",
+						backdropClassName
+					)}
+				/>
 				<AnimatePresence exitBeforeEnter>
 					{isOpen && (
 						<View
 							className={mergeClasses(
-								"absolute overflow-hidden in:opacity-0 opacity-100 out:opacity-0 in:scale-0 scale-100 out:scale-0 z-10 bg-card/95 rounded-xl max-w-sm w-full  border border-muted/10",
+								"absolute overflow-hidden in:opacity-0 opacity-100 out:opacity-0 in:scale-0 scale-100 out:scale-0 z-15 bg-card/95 rounded-xl max-w-sm w-full  border border-muted/10",
 								contentClassName
 							)}
 							onDidAnimate={onDidAnimate}
@@ -105,7 +117,7 @@ export const Dialog = forwardRef<DialogMethods, DialogProps>(function Dialog(
 						</View>
 					)}
 				</AnimatePresence>
-			</Pressable>
+			</View>
 		</Modal>
 	);
 });

package/src/components/dropdown/index.tsx

@@ -215,12 +215,14 @@ const DropdownItem = ({
 	children,
 	last,
 	first,
+	autoClosable = true,
 	...props
 }: {
 	className?: string;
 	last?: boolean;
 	children: ReactNode;
 	first?: boolean;
+	autoClosable?: boolean;
 } & PressableProps) => {
 	const close = useDropdownContext().close;
 	return (
@@ -233,7 +235,7 @@ const DropdownItem = ({
 			)}
 			{...props}
 			onPress={() => {
-				close();
+				if (autoClosable) close();
 				props.onPress && props.onPress();
 			}}
 		>

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

@@ -1,24 +1,52 @@
-import {
-	cn,
-	Text,
-	TextInput,
-	TextInputProps,
-	useTw,
-	View,
-} from "@nativetail/core";
-import { useCallback, useState } from "react";
+import { cn, Text, TextInput, TextInputProps, View } from "@nativetail/core";
+import { LegacyRef, useCallback, useState } from "react";
 import ShowPassword from "./show-password";
+import { Control, Controller, Path } from "react-hook-form";
 
-type FloatingInputProps = Omit<TextInputProps, "placeholder"> & {
+export type FloatingInputProps<T = Record<string, any>> = TextInputProps & {
 	containerClassName?: string;
-	label: string;
+	label?: string;
 	error?: string;
 	helperText?: string;
 	isSecretToggleable?: boolean;
 	leftElement?: React.ReactNode;
 	rightElement?: React.ReactNode;
+	value?: string;
+	control?: Control<T, any>;
+	name?: Path<T>;
+	inputRef?: LegacyRef<typeof TextInput>;
+	labelClassName?: string;
+	activeLabelClassName?: string;
 };
-export function FloatingInput({
+
+export const FloatingInput = <T extends Record<string, any>>({
+	name,
+	control,
+	...props
+}: FloatingInputProps<T>) => {
+	if (control) {
+		return (
+			<Controller
+				name={name}
+				control={control}
+				render={({ field, fieldState }) => {
+					return (
+						<BaseInput
+							{...props}
+							value={field.value}
+							onChangeText={(text) => {
+								field.onChange(text);
+							}}
+							error={fieldState?.error?.message}
+						/>
+					);
+				}}
+			/>
+		);
+	}
+	return <BaseInput {...props} />;
+};
+function BaseInput({
 	value,
 	onChangeText,
 	containerClassName,
@@ -29,6 +57,8 @@ export function FloatingInput({
 	helperText,
 	leftElement,
 	rightElement,
+	labelClassName,
+	activeLabelClassName,
 	...props
 }: FloatingInputProps) {
 	const [isFocused, setIsFocused] = useState(false);
@@ -49,7 +79,13 @@ export function FloatingInput({
 					containerClassName
 				)}
 			>
-				<Label label={label} value={value} isFocused={isFocused} />
+				<Label
+					label={label}
+					value={value}
+					isFocused={isFocused}
+					labelClassName={labelClassName}
+					activeLabelClassName={activeLabelClassName}
+				/>
 
 				{leftElement && (
 					<View className="absolute left-2 bottom-2">{leftElement}</View>
@@ -59,6 +95,7 @@ export function FloatingInput({
 					onBlur={onBlur}
 					value={value}
 					onChangeText={onChangeText}
+					enablesReturnKeyAutomatically
 					className={cn(
 						"flex-1 p-3 bg-card rounded-xl absolute w-full h-full -z-5 pt-5 text-foreground text-[16px]",
 						className,
@@ -91,10 +128,14 @@ const Label = ({
 	label,
 	value,
 	isFocused,
+	activeLabelClassName,
+	labelClassName,
 }: {
 	label?: string;
 	value?: string;
 	isFocused?: boolean;
+	labelClassName?: string;
+	activeLabelClassName?: string;
 }) => {
 	const labelOnTop = isFocused || !!value;
 
@@ -103,8 +144,10 @@ const Label = ({
 			<Text
 				animated
 				className={cn(
-					"text-muted duration-75  ",
-					labelOnTop ? " -translate-y-16 text-xs" : "translate-y-0 text-[16px]"
+					"text-muted duration-75 translate-y-0 text-[16px]",
+					labelClassName,
+					labelOnTop ? " -translate-y-16 text-xs" : "",
+					labelOnTop ? activeLabelClassName : ""
 				)}
 			>
 				{label}

package/src/components/input/input.tsx

@@ -6,19 +6,54 @@ import {
 	useTw,
 	View,
 } from "@nativetail/core";
-import { useState } from "react";
+import React, { LegacyRef, useState } from "react";
+import { Control, Controller, Path } from "react-hook-form";
+import { TextInput as NativeTextInput } from "react-native";
 import ShowPassword from "./show-password";
 
-type InputProps = TextInputProps & {
+export type InputProps<T = Record<string, any>> = TextInputProps & {
 	containerClassName?: string;
-	label: string;
+	label?: string;
 	error?: string;
 	helperText?: string;
 	isSecretToggleable?: boolean;
 	leftElement?: React.ReactNode;
 	rightElement?: React.ReactNode;
+	value?: string;
+	control?: Control<T, any>;
+	name?: Path<T>;
+	inputRef?: LegacyRef<NativeTextInput>;
 };
-export function Input({
+
+export const Input = <T extends Record<string, any>>({
+	name,
+	control,
+	...props
+}: InputProps<T>) => {
+	if (control) {
+		return (
+			<Controller
+				name={name}
+				control={control}
+				render={({ field, fieldState }) => {
+					return (
+						<BaseInput
+							{...props}
+							value={field.value}
+							onChangeText={(text) => {
+								field.onChange(text);
+							}}
+							error={fieldState.error?.message}
+						/>
+					);
+				}}
+			/>
+		);
+	}
+	return <BaseInput {...props} />;
+};
+
+const BaseInput = <T extends Record<string, any>>({
 	value,
 	onChangeText,
 	containerClassName,
@@ -29,8 +64,9 @@ export function Input({
 	rightElement,
 	helperText,
 	leftElement,
+	inputRef,
 	...props
-}: InputProps) {
+}: InputProps<T>) => {
 	const tw = useTw();
 
 	const [showPassword, setShowPassword] = useState(
@@ -38,16 +74,18 @@ export function Input({
 	);
 	return (
 		<View className={cn("w-full gap-1", containerClassName)}>
-			<Text className={cn("text-muted/75 duration-75 ")}>{label}</Text>
+			<Text className={cn("text-muted/75 duration-75 text-sm")}>{label}</Text>
 
 			<TextInput
 				value={value}
 				onChangeText={onChangeText}
+				ref={inputRef}
 				className={cn(
-					"p-3 bg-card rounded-lg w-full border border-muted/15 h-14 text-foreground -z-5 text-[16px]",
+					"p-3 bg-card rounded-lg w-full border border-muted/15 h-12 text-foreground -z-5 text-[16px]",
 					className,
 					isSecretToggleable || rightElement ? "pr-12" : "",
-					leftElement ? "pl-12" : ""
+					leftElement ? "pl-12" : "",
+					error && "border-danger"
 				)}
 				placeholderTextColor={tw.color("muted")}
 				secureTextEntry={!showPassword}
@@ -72,4 +110,4 @@ export function Input({
 			)}
 		</View>
 	);
-}
+};