@nativetail/ui 0.0.5 → 0.0.7

package/src/components/select/select.tsx

@@ -0,0 +1,181 @@
+import { cn, PressableProps, Text, useTw, View } from "@nativetail/core";
+import { Dropdown } from "../dropdown";
+import { memo, useCallback, useMemo } from "react";
+import { Iconify } from "react-native-iconify";
+import { Control, Controller, Path } from "react-hook-form";
+
+type SelectProps<T extends Record<string, any>> = PressableProps & {
+	containerClassName?: string;
+	label?: string;
+	error?: string;
+	helperText?: string;
+	value?: string;
+	onChange?: (value: string) => void;
+	placeholder?: string;
+	options: {
+		label: string;
+		value: string;
+		icon?: React.ReactNode;
+	}[];
+	control?: Control<T, any>;
+	name?: Path<T>;
+};
+export const Select = <T extends Record<string, any>>({
+	name,
+	control,
+	...props
+}: SelectProps<T>) => {
+	if (control) {
+		return (
+			<Controller
+				name={name}
+				control={control}
+				render={({ field, fieldState }) => {
+					return (
+						<BaseSelect
+							{...props}
+							value={field.value}
+							onChange={(text) => {
+								field.onChange(text);
+							}}
+							error={fieldState.error?.message}
+						/>
+					);
+				}}
+			/>
+		);
+	}
+	return <BaseSelect {...props} />;
+};
+function BaseSelect<T extends Record<string, any>>({
+	containerClassName,
+	label,
+	error,
+	className,
+	value,
+	onChange,
+	helperText,
+	placeholder,
+	options,
+	...props
+}: SelectProps<T>) {
+	const tw = useTw();
+	const renderOptions = useCallback(() => {
+		return options.map((option, index) => (
+			<SelectItem
+				label={option.label}
+				value={option.value}
+				icon={option.icon}
+				onChange={onChange}
+				isActive={value === option.value}
+				key={option.value}
+				first={index === 0}
+				last={index === options.length - 1}
+			/>
+		));
+	}, [options, value, onChange, tw]);
+	return (
+		<View className={cn("w-full gap-1", containerClassName)}>
+			<Text className={cn("text-muted/75 duration-75 ")}>{label}</Text>
+
+			<Dropdown.Root>
+				<SelectTrigger
+					options={options}
+					value={value}
+					placeholder={placeholder}
+					error={error}
+					{...props}
+				/>
+				<Dropdown.Menu>{renderOptions()}</Dropdown.Menu>
+			</Dropdown.Root>
+		</View>
+	);
+}
+const SelectTrigger = memo(
+	<T extends Record<string, any>>({
+		options,
+		className,
+		value,
+		placeholder,
+		error,
+		...props
+	}: PressableProps & {
+		options: SelectProps<T>["options"];
+		value: SelectProps<T>["value"];
+		placeholder: SelectProps<T>["placeholder"];
+		error: SelectProps<T>["error"];
+	}) => {
+		const selectedOption = useMemo(
+			() => options.find((option) => option.value === value),
+			[value]
+		);
+		const tw = useTw();
+		return (
+			<>
+				<Dropdown.Trigger
+					className={cn(
+						"p-3 bg-card rounded-lg w-full border flex-row items-center justify-between border-muted/15 h-14 text-foreground -z-5 text-[16px]",
+						className
+					)}
+					{...props}
+				>
+					{selectedOption && (
+						<Text className="text-foreground">{selectedOption.label}</Text>
+					)}
+					{!selectedOption && placeholder && (
+						<Text className="text-muted">{placeholder}</Text>
+					)}
+					<Iconify
+						icon="solar:alt-arrow-down-outline"
+						size={20}
+						color={tw.color("foreground")}
+					/>
+				</Dropdown.Trigger>
+				{error && <Text className="text-sm text-danger">{error}</Text>}
+			</>
+		);
+	}
+);
+
+const SelectItem = memo(
+	({
+		label,
+		value,
+		icon,
+		onChange,
+		isActive,
+		first,
+		last,
+	}: {
+		label: string;
+		value: string;
+		icon?: React.ReactNode;
+
+		onChange: (value: string) => void;
+		isActive?: boolean;
+		first?: boolean;
+		last?: boolean;
+	}) => {
+		const tw = useTw();
+		return (
+			<Dropdown.Item
+				key={value}
+				onPress={() => onChange(isActive ? "" : value)}
+				first={first}
+				last={last}
+			>
+				<View className="flex-row items-center gap-2">
+					<Text className="text-sm text-foreground">{label}</Text>
+					{icon}
+				</View>
+				{isActive && (
+					<Iconify
+						icon="lucide:check"
+						size={16}
+						color={tw.color("foreground")}
+					/>
+				)}
+			</Dropdown.Item>
+		);
+	}
+);

package/src/components/toast/index.tsx

@@ -1,17 +1,24 @@
-import { BlurView } from "expo-blur";
 import { cn, Pressable, Text, useTw, View } from "@nativetail/core";
-import { useEffect } from "react";
-import { create } from "zustand";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { AnimatePresence } from "moti";
-import { Blur } from "../blur";
+import { useEffect, useState } from "react";
+import { Iconify } from "react-native-iconify";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { create } from "zustand";
 type ToastType = {
 	message: string;
 	content?: string;
 	id: string;
 	timeout?: number;
-	position?: "top" | "bottom";
+	position?:
+		| "top-center"
+		| "top-left"
+		| "top-right"
+		| "bottom-left"
+		| "bottom-right"
+		| "bottom-center";
+
 	containerClassName?: string;
+	type?: "success" | "danger" | "info" | "warning";
 };
 type InsertToastType = Omit<ToastType, "id">;
 type ToastStore = {
@@ -21,7 +28,17 @@ type ToastStore = {
 };
 const useToastState = create<ToastStore>((set) => ({
 	toasts: [],
-	addToast: (toast) => set((state) => ({ toasts: [...state.toasts, toast] })),
+	addToast: (toast) =>
+		set((state) => ({
+			toasts: [
+				...state.toasts,
+				{
+					type: "info",
+					position: "top-center",
+					...toast,
+				},
+			],
+		})),
 	removeToast: (id) =>
 		set((state) => ({
 			toasts: state.toasts.filter((toast) => toast.id !== id),
@@ -30,16 +47,44 @@ const useToastState = create<ToastStore>((set) => ({
 let timeouts = new Map<string, NodeJS.Timeout>();
 export const showToast = (toast: InsertToastType) => {
 	const id = Math.random().toString(36).substring(7);
+	console.log(id);
 	useToastState.getState().addToast({ ...toast, id });
 	return id;
 };
 export function Toaster() {
 	const toasts = useToastState((state) => state.toasts);
+	const topToasts = toasts.filter((toast) => toast.position.includes("top"));
+	const bottomToasts = toasts.filter((toast) =>
+		toast.position.includes("bottom")
+	);
+
+	const safeInsets = useSafeAreaInsets();
 	return (
-		<AnimatePresence exitBeforeEnter>
-			{toasts.map((toast, index) => (
-				<Toast key={toast.id} index={index} {...toast} />
-			))}
+		<AnimatePresence exitBeforeEnter presenceAffectsLayout>
+			{topToasts.length > 0 && (
+				<View
+					className={cn(
+						"absolute w-full top-0 left-0  justify-center z-50 gap-2",
+						`top-[${safeInsets.top + 10}px]`
+					)}
+				>
+					{topToasts.map((toast, index) => (
+						<Toast index={index} {...toast} key={toast.id} />
+					))}
+				</View>
+			)}
+			{bottomToasts.length > 0 && (
+				<View
+					className={cn(
+						"absolute w-full left-0  justify-center z-50 gap-2",
+						`bottom-[${safeInsets.bottom + 10}px]`
+					)}
+				>
+					{bottomToasts.map((toast, index) => (
+						<Toast key={toast.id} index={index} {...toast} />
+					))}
+				</View>
+			)}
 		</AnimatePresence>
 	);
 }
@@ -49,52 +94,89 @@ const Toast = (
 		index: number;
 	}
 ) => {
+	const [open, setOpen] = useState(true);
 	const tw = useTw();
+	const closeToast = () => {
+		setOpen(false);
+		setTimeout(() => useToastState.getState().removeToast(toast.id), 150);
+	};
 	useEffect(() => {
-		const id = setTimeout(() => {
-			useToastState.getState().removeToast(toast.id);
-		}, toast.timeout || 5000);
+		const id = setTimeout(closeToast, toast.timeout || 5000);
 		timeouts.set(toast.id, id);
 		return () => {
 			clearTimeout(timeouts.get(toast.id)!);
 			timeouts.delete(toast.id);
 		};
 	}, [toast.id]);
-	const safeInsets = useSafeAreaInsets();
+
+	const Icons = {
+		success: (
+			<Iconify
+				icon="lets-icons:check-fill"
+				size={20}
+				color={tw.color("success")}
+			/>
+		),
+		danger: (
+			<Iconify icon="uis:times-circle" size={20} color={tw.color("danger")} />
+		),
+		info: (
+			<Iconify
+				icon="fluent:info-16-filled"
+				size={20}
+				color={tw.color("info")}
+			/>
+		),
+		warning: (
+			<Iconify
+				icon="fluent:warning-16-filled"
+				size={20}
+				color={tw.color("warning")}
+			/>
+		),
+	};
+
+	const Icon = Icons[toast.type];
+	const horizontalPositions = {
+		center: "items-center",
+		left: "items-start",
+		right: "items-end",
+	};
+	const horizontalPosition =
+		horizontalPositions[
+			toast.position.replace("top-", "").replace("bottom-", "")
+		];
 	return (
 		<View
-			className={cn(
-				"absolute w-full top-0 left-0 items-center justify-center z-50 ",
-				toast.position === "top"
-					? `top-[${safeInsets.top + 10}px]`
-					: `bottom-[${safeInsets.bottom + 10}px]`,
-				toast.containerClassName
-			)}
+			className={cn("w-full", horizontalPosition, toast.containerClassName)}
 			animated
 		>
 			<Pressable
 				onPress={() => {
-					useToastState.getState().removeToast(toast.id);
+					if (open) closeToast();
 				}}
 				className="w-full items-center justify-center active:scale-95 scale-100  px-4"
 			>
-				<View
-					className={cn(
-						`bg-card/95 border border-muted/15 px-6 py-3 in:opacity-0 opacity-100 in:-translate-y-16  out:-translate-y-16 out:opacity-0 in:scale-0 scale-100 out:scale-0 rounded-full overflow-hidden max-w-sm w-full `,
-						`translate-y-0`
+				<AnimatePresence presenceAffectsLayout exitBeforeEnter>
+					{open && (
+						<View
+							className={cn(
+								`bg-card/95 border border-muted/15 px-2 py-2  rounded-2xl overflow-hidden flex-row items-center gap-2 in:-translate-y-24  translate-y-0 out:-translate-y-24 in:scale-0 scale-100 out:scale-0`
+							)}
+							animated
+						>
+							<View className="in:scale-0 scale-100">{Icon}</View>
+							<View className="">
+								<Text className="font-medium text-sm text-foreground">
+									{toast.message}
+								</Text>
+								{toast.content && (
+									<Text className="text-xs text-muted">{toast.content}</Text>
+								)}
+							</View>
+						</View>
 					)}
-					animated
-				>
-					<Blur
-						style={tw`absolute top-0 left-0 rounded-xl flex-1 bg-card/50 rounded-full`}
-					/>
-					<Text className="font-medium text-[16px] text-foreground">
-						{toast.message}
-					</Text>
-					{toast.content && (
-						<Text className="text-sm text-muted">{toast.content}</Text>
-					)}
-				</View>
+				</AnimatePresence>
 			</Pressable>
 		</View>
 	);

package/src/index.ts

@@ -1 +1,2 @@
 export * from "./components";
+export * from "./utils/component-theme";

package/src/utils/component-theme.tsx

@@ -0,0 +1,51 @@
+import React, { createContext, useContext } from "react";
+import {
+	ActionSheetProps,
+	AlertDialogProps,
+	BottomSheetProps,
+	ButtonProps,
+	ChipProps,
+	CounterProps,
+	DialogProps,
+	FloatingInputProps,
+	InputProps,
+	PinInputProps,
+	ProgressProps,
+} from "../components";
+type ComponentsType = {
+	Button?: Partial<ButtonProps>;
+	Dialog?: Partial<DialogProps>;
+	AlertDialog?: Partial<AlertDialogProps>;
+	Input?: Partial<InputProps>;
+	FloatingInput?: Partial<FloatingInputProps>;
+	PinInput?: Partial<PinInputProps>;
+	BottomSheet?: Partial<BottomSheetProps>;
+	ActionSheet?: Partial<ActionSheetProps>;
+	Chip?: ChipProps;
+	Progress?: ProgressProps;
+	Counter?: CounterProps;
+};
+type ComponentThemeContextType = {
+	components: ComponentsType;
+};
+
+const ComponentThemeContext = createContext<ComponentThemeContextType>({
+	components: {},
+});
+export const useComponentTheme = () => {
+	const ctx = useContext(ComponentThemeContext);
+	return ctx.components;
+};
+export function ComponentThemeProvider({
+	children,
+	components,
+}: {
+	children: React.ReactNode;
+	components: ComponentsType;
+}) {
+	return (
+		<ComponentThemeContext.Provider value={{ components }}>
+			{children}
+		</ComponentThemeContext.Provider>
+	);
+}

package/tailwind.config.js

@@ -20,6 +20,10 @@ module.exports = {
 				warning: '#FFC107',
 				info: '#00BCD4',
 			},
+			borderRadius: {
+				DEFAULT: '16px',
+				"sm": "24px"
+			}
 		},
 	},
 };