@nativetail/ui 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nativetail/ui",
-	"version": "0.1.2",
+	"version": "0.1.3",
 	"description": "",
 	"main": "src/index.ts",
 	"scripts": {},
@@ -27,24 +27,25 @@
 	},
 	"dependencies": {
 		"@hookform/resolvers": "^3.6.0",
-		"@nativetail/core": "^0.0.2",
+		"@nativetail/core": "^0.0.5",
 		"@shopify/flash-list": "^1.7.0",
 		"countries-list": "^3.1.0",
 		"expo-blur": "^13.0.2",
 		"expo-linear-gradient": "~13.0.2",
+		"lucide-react-native": "^0.427.0",
 		"moti": "^0.29.0",
 		"react": "18.2.0",
 		"react-hook-form": "^7.51.0",
 		"react-native": "0.74.3",
 		"react-native-actions-sheet": "^0.9.6",
 		"react-native-gesture-handler": "^2.17.1",
+		"react-native-mask-text": "^0.14.2",
 		"react-native-reanimated": "~3.10.1",
 		"react-native-safe-area-context": "4.10.1",
 		"tailwind-merge": "^2.3.0",
 		"zustand": "^4.5.2"
 	},
 	"devDependencies": {
-		"metro-react-native-babel-preset": "^0.77.0",
 		"tailwindcss": "^3.4.4"
 	},
 	"private": false

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

@@ -86,7 +86,7 @@ const ActionSheetItem = ({
 		<Button
 			variant="link"
 			className={cn(
-				"w-full items-center opacity-100  active:opacity-50 text-[16px] h-14 text-blue-500 rounded-none border-b ",
+				"w-full items-center opacity-100  active:opacity-50 text-sm h-14 text-blue-500 rounded-none border-b ",
 				last ? "border-transparent" : "border-muted/15",
 				className
 			)}

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

@@ -1,4 +1,4 @@
-import { Text, View } from "@nativetail/core";
+import { cn, Text, View } from "@nativetail/core";
 import { forwardRef } from "react";
 import { Button } from "../button";
 import { Dialog, DialogMethods } from "../dialog";
@@ -10,11 +10,26 @@ export type AlertDialogProps = {
 	title?: string;
 	description?: string;
 	useBlur?: boolean;
+	confirmClassName?: string;
+	cancelClassName?: string;
+	confirmText?: string;
+	cancelText?: string;
 };
 export type AlertDialogRef = DialogMethods;
 export const AlertDialog = forwardRef<DialogMethods, AlertDialogProps>(
 	function AlertDialog(
-		{ containerClassName, onConfirm, title, description, useBlur, onCancel },
+		{
+			containerClassName,
+			onConfirm,
+			confirmText = "Confirm",
+			cancelText = "Cancel",
+			cancelClassName,
+			confirmClassName,
+			title,
+			description,
+			useBlur,
+			onCancel,
+		},
 		ref
 	) {
 		return (
@@ -39,17 +54,23 @@ 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 rounded-none"
+						className={cn(
+							"flex-1 active:opacity-75 text-foreground rounded-none",
+							cancelClassName
+						)}
 						onPress={onCancel}
 					>
-						Cancel
+						{cancelText}
 					</Button>
 					<Button
 						variant="link"
-						className="flex-1 border active:opacity-75 border-transparent rounded-none border-l-muted/15"
+						className={cn(
+							"flex-1 border active:opacity-75 border-transparent rounded-none border-l-muted/15",
+							cancelClassName
+						)}
 						onPress={onConfirm}
 					>
-						Confirm
+						{confirmText}
 					</Button>
 				</View>
 			</Dialog>

package/src/components/button/index.tsx

@@ -8,6 +8,7 @@ import {
 	mergeClasses,
 	Pressable,
 	separateClasses,
+	useColor,
 	useTw,
 	VariantProps,
 } from "@nativetail/core";
@@ -15,11 +16,11 @@ 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",
+	"flex-row gap-2 items-center justify-center rounded text-sm font-medium hover:opacity-90 active:opacity-50 duration-30 opacity-100 select-none",
 	{
 		variants: {
 			variant: {
-				default: "bg-primary  text-foreground ",
+				default: "bg-primary text-primary-foreground ",
 				destructive: "bg-red-500 text-foreground  ",
 				outline: "border border-muted/15 text-foreground bg-black/0  ",
 				secondary: "bg-secondary text-foreground  ",
@@ -84,9 +85,10 @@ export type ButtonProps = MotiPressableProps &
 const Button = (passedProps: ButtonProps) => {
 	const componentTheme = useComponentTheme();
 	const buttonProps = componentTheme?.Button || {};
-	const {
+	let {
 		text,
 		children,
+
 		isLoading,
 		disabled,
 		variant,
@@ -101,6 +103,7 @@ const Button = (passedProps: ButtonProps) => {
 		...buttonProps,
 		...passedProps,
 	};
+	children = children || text;
 	const tw = useTw();
 	const className = cn(buttonProps.className, passedProps.className);
 
@@ -128,24 +131,26 @@ const Button = (passedProps: ButtonProps) => {
 	const { textClasses } = separateClasses(variantClass);
 
 	return (
-		<Pressable
-			disabled={disabled || loading}
-			className={variantClass}
-			{...props}
-		>
-			{leftElement}
-			{loading && (
-				<ActivityIndicator
-					className={mergeClasses(
-						"mr-2 h-5 w-5 text-foreground ",
-						textClasses,
-						loadingIndicatorClassName
-					)}
-				/>
-			)}
-			{children}
-			{rightElement}
-		</Pressable>
+		<>
+			<Pressable
+				disabled={disabled || loading}
+				className={variantClass}
+				{...props}
+			>
+				{leftElement}
+				{loading && (
+					<ActivityIndicator
+						className={mergeClasses(
+							"mr-2 h-5 w-5 text-primary-foreground ",
+							textClasses,
+							loadingIndicatorClassName
+						)}
+					/>
+				)}
+				{children}
+				{rightElement}
+			</Pressable>
+		</>
 	);
 };
 export { Button };

package/src/components/card/card.tsx

@@ -0,0 +1,72 @@
+import { cn, Text, useTw, View } from "@nativetail/core";
+import { Pressable } from "react-native";
+import { Button, ButtonProps } from "../button";
+
+type CardProps = {
+	renderHeader?: () => React.ReactNode;
+	title?: string;
+	subtitle?: string;
+	description?: string;
+	titleClassname?: string;
+	subtitleClassName?: string;
+	descriptionClassName?: string;
+	containerClassName?: string;
+	contentClassName?: string;
+	buttonProps?: ButtonProps;
+	onPress?: () => void;
+	renderFooter?: () => React.ReactNode;
+	renderContent?: () => React.ReactNode;
+};
+export function Card({
+	description,
+	descriptionClassName,
+	renderHeader,
+	subtitle,
+	subtitleClassName,
+	title,
+	titleClassname,
+	contentClassName,
+	buttonProps,
+	onPress,
+	renderFooter,
+	containerClassName,
+	...props
+}: CardProps) {
+	const tw = useTw();
+	const renderContent = () => {
+		if (props.renderContent) {
+			return props.renderContent();
+		}
+		return (
+			<View className={cn("p-1 gap-1", contentClassName)}>
+				<Text className={cn("text-lg font-medium", titleClassname)}>
+					{title}
+				</Text>
+				<Text className={cn("text-sm ", subtitleClassName)}>{subtitle}</Text>
+				<Text
+					className={cn(
+						"text-xs text-muted tracking-widest",
+						descriptionClassName
+					)}
+				>
+					{description}
+				</Text>
+				{buttonProps && <Button {...buttonProps} />}
+			</View>
+		);
+	};
+	return (
+		<Pressable
+			style={tw.style(
+				"bg-card p-3 rounded-xl border border-muted/15",
+				containerClassName
+			)}
+			onPress={onPress}
+			disabled={!onPress}
+		>
+			{renderHeader && renderHeader()}
+			{renderContent()}
+			{renderFooter && renderFooter()}
+		</Pressable>
+	);
+}

package/src/components/card/index.ts

@@ -0,0 +1,3 @@
+export * from "./card";
+export * from "./stat-card";
+export * from "./info-card";

package/src/components/card/info-card.tsx

@@ -0,0 +1,113 @@
+import { cn, Pressable, Text, useColor, View } from "@nativetail/core";
+import { EllipsisVertical } from "lucide-react-native";
+import { useRef } from "react";
+import {
+	ActionSheet,
+	ActionSheetProps,
+	ActionSheetRef,
+} from "../actions-sheet";
+
+type InfoCardProps = {
+	containerClassname?: string;
+	renderIcon?: () => React.ReactNode;
+	renderContent?: () => React.ReactNode;
+	contentClassName?: string;
+	title?: string;
+	subtitle?: string;
+	titleClassname?: string;
+	subtitleClassName?: string;
+	description?: string;
+	descriptionClassName?: string;
+	actions?: ActionSheetProps["options"];
+	renderRight?: () => React.ReactNode;
+	onPress?: () => void;
+	dotsClassname?: string;
+	textContentClassname?: string;
+};
+export function InfoCard({
+	containerClassname,
+	renderIcon,
+	subtitle,
+	title,
+	titleClassname,
+	subtitleClassName,
+	description,
+	descriptionClassName,
+	actions,
+	onPress,
+	dotsClassname,
+	contentClassName,
+	textContentClassname,
+	...props
+}: InfoCardProps) {
+	const actionSheetRef = useRef<ActionSheetRef>(null);
+	const renderRight = () => {
+		if (props.renderRight) {
+			return props.renderRight();
+		}
+		if (actions)
+			return (
+				<View className="flex-row gap-1">
+					<>
+						<Pressable
+							className={cn(
+								"p-1.5 w-7 h-7 items-center justify-center border rounded-full border-muted/15 active:scale-95 scale-100",
+								dotsClassname
+							)}
+							onPress={() => {
+								actionSheetRef.current?.show();
+							}}
+						>
+							<EllipsisVertical color={useColor("foreground")} />
+						</Pressable>
+						<ActionSheet
+							onCancel={() => {
+								actionSheetRef.current?.hide();
+							}}
+							options={actions.map((action) => ({
+								...action,
+								onPress: () => {
+									actionSheetRef.current?.hide();
+									action.onPress();
+								},
+							}))}
+							ref={actionSheetRef}
+						/>
+					</>
+				</View>
+			);
+	};
+	const renderContent = () => {
+		if (props.renderContent) {
+			return props.renderContent();
+		}
+		return (
+			<View className={textContentClassname}>
+				<Text className={cn("text-sm font-medium", titleClassname)}>
+					{title}
+				</Text>
+				<Text className={cn("text-[13px] text-muted", subtitleClassName)}>
+					{subtitle}
+				</Text>
+				<Text className={cn("text-xs text-muted/65", descriptionClassName)}>
+					{description}
+				</Text>
+			</View>
+		);
+	};
+	return (
+		<Pressable
+			className={cn(
+				"flex-row items-center w-full justify-between ",
+				containerClassname
+			)}
+			disabled={!onPress}
+		>
+			<View className={cn("flex-row gap-2 items-center p-2", contentClassName)}>
+				{renderIcon && renderIcon()}
+				{renderContent()}
+			</View>
+			{renderRight()}
+		</Pressable>
+	);
+}

package/src/components/card/stat-card.tsx

@@ -0,0 +1,46 @@
+import { cn, View } from "@nativetail/core";
+
+type StatCardProps = {
+	renderIcon?: () => React.ReactNode;
+	renderTitle?: () => React.ReactNode;
+	renderValue?: () => React.ReactNode;
+	title?: string;
+	value?: string;
+	Icon?: React.ReactNode;
+	containerClassName?: string;
+};
+export function StatCard(props: StatCardProps) {
+	const renderIcon = () => {
+		if (props.Icon) return <View className="mb-2">{props.Icon}</View>;
+		if (!props.renderIcon) return null;
+		return props.renderIcon();
+	};
+	const renderTitle = () => {
+		if (!props.renderTitle)
+			return <View className="text-xs text-muted/80">{props.title}</View>;
+		return props.renderTitle();
+	};
+	const renderValue = () => {
+		if (!props.renderValue)
+			return (
+				<View className="text-xl font-medium text-foreground">
+					{props.value}
+				</View>
+			);
+		return props.renderValue();
+	};
+	return (
+		<View
+			className={cn(
+				"p-3 rounded-xl gap-0.5 bg-card border justify-between border-muted/15",
+				props.containerClassName
+			)}
+		>
+			{renderIcon()}
+			<View className="gap-0.5">
+				{renderValue()}
+				{renderTitle()}
+			</View>
+		</View>
+	);
+}

package/src/components/check/index.tsx

@@ -0,0 +1,43 @@
+import { cn, Pressable, useColor } from "@nativetail/core";
+import { CheckIcon } from "lucide-react-native";
+
+type CheckProps = {
+	checked: boolean;
+	onChange: (checked: boolean) => void;
+	className?: string;
+	activeClassName?: string;
+	inactiveCheckColor?: string;
+	activeCheckColor?: string;
+};
+export function Check({
+	checked,
+	onChange,
+	className,
+	activeClassName,
+	inactiveCheckColor,
+	activeCheckColor,
+	...props
+}: CheckProps) {
+	return (
+		<Pressable
+			className={cn(
+				"border w-6 h-6 p-1 items-center justify-center rounded-lg border-muted/15 bg-card",
+				className,
+				checked ? "bg-primary " + activeClassName : ""
+			)}
+			aria-checked={checked}
+			accessibilityRole="switch"
+			aria-label="Check"
+			{...props}
+			onPress={() => onChange(!checked)}
+		>
+			<CheckIcon
+				color={useColor(
+					checked
+						? activeCheckColor || "card"
+						: inactiveCheckColor || "primary/35"
+				)}
+			/>
+		</Pressable>
+	);
+}

package/src/components/collapsible/index.tsx

@@ -0,0 +1,23 @@
+type CollapsibleProps = {
+	onChange: (checked: boolean) => void;
+	className?: string;
+};
+function CollapsibleRoot({ onChange, className, ...props }: CollapsibleProps) {
+	return <></>;
+}
+type CollapsibleTriggerProps = {};
+
+const CollapsibleTrigger = ({ ...props }: CollapsibleTriggerProps) => {
+	return <></>;
+};
+type CollapsibleContentProps = {};
+
+const CollapsibleContent = ({ ...props }: CollapsibleContentProps) => {
+	return <></>;
+};
+
+export const Collapsible = {
+	Trigger: CollapsibleTrigger,
+	Content: CollapsibleContent,
+	Root: CollapsibleRoot,
+};

package/src/components/counter/index.tsx

@@ -1,6 +1,6 @@
-import { TextInput, View, cn, useTw } from "@nativetail/core";
+import { TextInput, View, cn, useColor, useTw } from "@nativetail/core";
+import { Minus, Plus } from "lucide-react-native";
 import { useCallback, useRef } from "react";
-import { Iconify } from "react-native-iconify";
 import { Button } from "../button";
 export type CounterProps = {
 	value: number;
@@ -48,11 +48,7 @@ export function Counter({
 			)}
 		>
 			<CounterButton disabled={!!(min && value <= min)} onPress={decrement}>
-				<Iconify
-					icon="ic:round-minus"
-					size={15}
-					color={tw.color("foreground")}
-				/>
+				<Minus size={15} color={useColor("foreground")} />
 			</CounterButton>
 			<View className="flex-1 h-full">
 				<TextInput
@@ -62,11 +58,7 @@ export function Counter({
 				/>
 			</View>
 			<CounterButton disabled={!!(max && value >= max)} onPress={increment}>
-				<Iconify
-					icon="ic:round-plus"
-					size={15}
-					color={tw.color("foreground")}
-				/>
+				<Plus size={15} color={useColor("foreground")} />
 			</CounterButton>
 		</View>
 	);

package/src/components/index.ts

@@ -14,3 +14,7 @@ export * from "./progress";
 export * from "./counter";
 export * from "./tabs";
 export * from "./form-builder";
+export * from "./check";
+export * from "./card";
+export * from "./indicator";
+export * from "./loader-dialog";

package/src/components/indicator/index.tsx

@@ -0,0 +1,15 @@
+import { cn, View } from "@nativetail/core";
+
+type IndicatorProps = {
+	className?: string;
+	size?: number;
+	color?: string;
+	Icon?: React.ReactNode;
+};
+export function Indicator({ className, size, color, Icon }: IndicatorProps) {
+	return (
+		<View className={cn("w-4 h-4 rounded-full bg-primary", className)}>
+			{Icon}
+		</View>
+	);
+}

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

@@ -8,6 +8,7 @@ import { Input, InputProps } from "./input";
 
 import { countries, ICountry } from "countries-list";
 import { FloatingInput } from "./floating-input";
+import { ChevronDown } from "lucide-react-native";
 type CountryType = ICountry & {
 	code: string;
 };
@@ -97,7 +98,7 @@ const SelectCountry = ({
 				<Text>
 					<Text className="mr-1">{flag}</Text>+{selectedCountry.phone?.[0]}
 				</Text>
-				<Iconify icon="mingcute:down-line" size={24} color="gray" />
+				<ChevronDown size={24} color="gray" />
 			</Pressable>
 			<CountryBottomSheet
 				selectedCountry={selectedCountry}

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

@@ -1,5 +1,5 @@
-import { Pressable, useTw } from "@nativetail/core";
-import { Iconify } from "react-native-iconify";
+import { Pressable, useColor } from "@nativetail/core";
+import { Eye, EyeOff } from "lucide-react-native";
 
 export default function ShowPassword({
 	showPassword,
@@ -8,24 +8,15 @@ export default function ShowPassword({
 	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")}
-				/>
+				<Eye size={20} color={useColor("foreground")} />
 			) : (
-				<Iconify
-					icon="solar:eye-closed-linear"
-					size={20}
-					color={tw.color("foreground")}
-				/>
+				<EyeOff size={20} color={useColor("foreground")} />
 			)}
 		</Pressable>
 	);

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

@@ -0,0 +1,35 @@
+import { ActivityIndicator, cn, useColor } from "@nativetail/core";
+import { forwardRef } from "react";
+import { Dialog, DialogMethods, DialogProps } from "../dialog";
+
+export type LoaderProps = Omit<DialogProps, "children"> & {
+	activityIndicatorProps?: React.ComponentProps<typeof ActivityIndicator>;
+	children?: React.ReactNode;
+};
+
+export const Loader = forwardRef<DialogMethods, LoaderProps>(function Loader(
+	{ ...props },
+	ref
+) {
+	return (
+		<Dialog
+			ref={ref}
+			closable={false}
+			{...props}
+			contentClassName={cn(
+				"items-center justify-center p-4 w-24 h-24",
+				props?.contentClassName
+			)}
+		>
+			{props?.children || (
+				<ActivityIndicator
+					size="large"
+					color={useColor("primary")}
+					{...props?.activityIndicatorProps}
+				/>
+			)}
+		</Dialog>
+	);
+});
+
+export type Loader = DialogMethods;

package/src/components/select/multi-select.tsx

@@ -3,6 +3,7 @@ import {
 	Pressable,
 	PressableProps,
 	Text,
+	useColor,
 	useTw,
 	View,
 } from "@nativetail/core";
@@ -10,6 +11,7 @@ import { Dropdown } from "../dropdown";
 import { memo, useCallback, useMemo } from "react";
 import { Iconify } from "react-native-iconify";
 import { Control, Controller, Path } from "react-hook-form";
+import { CheckCheck, CheckIcon, ChevronDown } from "lucide-react-native";
 
 export type MultiSelectProps<T = Record<string, any>> = PressableProps & {
 	containerClassName?: string;
@@ -150,11 +152,7 @@ const SelectTrigger = memo(
 					{selectedOptions.length == 0 && placeholder && (
 						<Text className="text-muted">{placeholder}</Text>
 					)}
-					<Iconify
-						icon="solar:alt-arrow-down-outline"
-						size={20}
-						color={tw.color("foreground")}
-					/>
+					<ChevronDown size={20} color={useColor("foreground")} />
 				</Dropdown.Trigger>
 
 				{error && <Text className="text-sm text-danger">{error}</Text>}
@@ -195,13 +193,7 @@ const SelectItem = memo(
 					<Text className="text-sm text-foreground">{label}</Text>
 					{icon}
 				</View>
-				{isActive && (
-					<Iconify
-						icon="lucide:check"
-						size={16}
-						color={tw.color("foreground")}
-					/>
-				)}
+				{isActive && <CheckIcon size={16} color={useColor("foreground")} />}
 			</Dropdown.Item>
 		);
 	}

package/src/components/select/select.tsx

@@ -1,8 +1,15 @@
-import { cn, PressableProps, Text, useTw, View } from "@nativetail/core";
-import { Dropdown } from "../dropdown";
+import {
+	cn,
+	PressableProps,
+	Text,
+	useColor,
+	useTw,
+	View,
+} from "@nativetail/core";
+import { CheckCheck, CheckIcon, ChevronDown } from "lucide-react-native";
 import { memo, useCallback, useMemo } from "react";
-import { Iconify } from "react-native-iconify";
 import { Control, Controller, Path } from "react-hook-form";
+import { Dropdown } from "../dropdown";
 
 export type SelectProps<T = Record<string, any>> = PressableProps & {
 	containerClassName?: string;
@@ -124,11 +131,7 @@ const SelectTrigger = memo(
 					{!selectedOption && placeholder && (
 						<Text className="text-muted">{placeholder}</Text>
 					)}
-					<Iconify
-						icon="solar:alt-arrow-down-outline"
-						size={20}
-						color={tw.color("foreground")}
-					/>
+					<ChevronDown size={20} color={useColor("foreground")} />
 				</Dropdown.Trigger>
 				{error && <Text className="text-sm text-danger">{error}</Text>}
 			</>
@@ -167,13 +170,7 @@ const SelectItem = memo(
 					<Text className="text-sm text-foreground">{label}</Text>
 					{icon}
 				</View>
-				{isActive && (
-					<Iconify
-						icon="lucide:check"
-						size={16}
-						color={tw.color("foreground")}
-					/>
-				)}
+				{isActive && <CheckIcon size={16} color={useColor("foreground")} />}
 			</Dropdown.Item>
 		);
 	}

package/src/components/switch/index.tsx

@@ -8,7 +8,7 @@ import {
 } from "@nativetail/core";
 
 const switchVariants = cva(
-	"rounded-full bg-card justify-center border p-0.5 items-start",
+	"rounded-full bg-card justify-center border border-muted/15 p-0.5 items-start",
 	{
 		variants: {
 			size: {
@@ -51,7 +51,7 @@ export function Switch({
 		<Pressable
 			className={cn(
 				className,
-				checked ? "bg-primary/35 " + containerActiveClass : ""
+				checked ? "bg-primary " + containerActiveClass : ""
 			)}
 			aria-checked={checked}
 			accessibilityRole="switch"
@@ -63,6 +63,7 @@ export function Switch({
 				className={cn(
 					`rounded-full bg-primary aspect-square h-full`,
 					indicatorClassName,
+					checked ? "bg-card" : "",
 					x
 				)}
 				animated

package/src/components/toast/index.tsx

@@ -1,8 +1,13 @@
-import { cn, Pressable, Text, useTw, View } from "@nativetail/core";
+import { cn, Pressable, Text, useColor, useTw, View } from "@nativetail/core";
+import {
+	CheckCircle2,
+	Info,
+	OctagonAlert,
+	OctagonX,
+} from "lucide-react-native";
 import { AnimatePresence } from "moti";
 import { useCallback, useEffect, useState } from "react";
 import { Modal } from "react-native";
-import { Iconify } from "react-native-iconify";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { create } from "zustand";
 type ToastType = {
@@ -50,7 +55,6 @@ 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;
 };
@@ -108,8 +112,8 @@ const Toast = (
 					className={cn(
 						"absolute w-full h-full bg-black/15 left-0 justify-start z-50 gap-2",
 						toast.position.includes("top")
-							? `pt-[${safeInsets.top + 10}px]`
-							: `pb-[${safeInsets.bottom + 10}px]`
+							? `pt-[${safeInsets.top + 10}px] top-0`
+							: `pb-[${safeInsets.bottom + 10}px] bottom-0 justify-end`
 					)}
 					onPress={close}
 				>
@@ -140,30 +144,10 @@ const BaseToast = (
 	}, [toast.id]);
 
 	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")}
-			/>
-		),
+		success: <CheckCircle2 size={20} color={useColor("success")} />,
+		danger: <OctagonX size={20} color={useColor("danger")} />,
+		info: <Info size={20} color={useColor("info")} />,
+		warning: <OctagonAlert size={20} color={useColor("warning")} />,
 	};
 
 	const Icon = toast.icon || Icons[toast.type];

package/tailwind.config.js

@@ -1,3 +1,4 @@
+
 module.exports = {
 	theme: {
 		screens: {
@@ -9,7 +10,10 @@ module.exports = {
 		},
 		extend: {
 			colors: {
-				primary: "#43D386",
+				primary: {
+					DEFAULT: "#43D386",
+					foreground: "#000",
+				},
 				secondary: '#EBB461',
 				background: '#F2F2F2',
 				card: '#fff',
@@ -26,4 +30,4 @@ module.exports = {
 			}
 		},
 	},
-};
+};