@nativetail/ui 0.0.1

package/README.md

@@ -0,0 +1,5 @@
+# NativeTail
+
+This is the nativetail package
+
+This packages uses the parser from twrnc package

package/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    presets: [`module:metro-react-native-babel-preset`],
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+	"name": "@nativetail/ui",
+	"version": "0.0.1",
+	"description": "",
+	"main": "src/index.ts",
+	"scripts": {},
+	"author": "Imtiaj Bin Aoual <imtiajbinaoual@gmail.com>",
+	"license": "MIT",
+	"keywords": [
+		"react",
+		"react-native",
+		"ui",
+		"nativetail ui",
+		"tailwind ui",
+		"tailwindcss-react-native",
+		"twrnc",
+		"tailwind-react-native",
+		"tailwind-rn",
+		"@nativetail/ui"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Imtiajrex/nativetail.git"
+	},
+	"peerDependencies": {
+		"react-native": ">=0.63.0"
+	},
+	"dependencies": {
+		"@gorhom/bottom-sheet": "^5.0.0-alpha.10",
+		"@shopify/flash-list": "^1.7.0",
+		"expo-blur": "^13.0.2",
+		"expo-linear-gradient": "~13.0.2",
+		"moti": "^0.29.0",
+		"@nativetail/core": "*",
+		"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-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

@@ -0,0 +1,98 @@
+import { cn, useTw, View } from "@nativetail/core";
+import { forwardRef } from "react";
+import { Blur } from "../blur";
+import { Button } from "../button";
+import { Dialog, DialogMethods } from "../dialog";
+
+type OptionType = {
+	text: string;
+	onPress: () => void;
+	className?: string;
+};
+export type ActionSheetProps = {
+	containerClassName?: string;
+	contentClassName?: string;
+	onCancel: () => void;
+	useBlur?: boolean;
+	children?: React.ReactNode;
+	options?: OptionType[];
+};
+export type ActionSheetRef = DialogMethods;
+export const ActionSheet = forwardRef<DialogMethods, ActionSheetProps>(
+	function ActionSheet(
+		{
+			containerClassName,
+			contentClassName,
+			useBlur = true,
+			onCancel,
+			children,
+			options,
+		},
+		ref
+	) {
+		const tw = useTw();
+
+		return (
+			<Dialog
+				containerClassName={cn("justify-end", containerClassName)}
+				contentClassName={cn(
+					"bg-transparent border-transparent gap-2 pb-4",
+					contentClassName
+				)}
+				useBlur={false}
+				ref={ref}
+			>
+				<View className="w-full rounded-xl bg-card/95">
+					{useBlur && (
+						<Blur
+							style={tw`absolute top-0 flex-1 left-0 right-0 bottom-0 rounded-xl bg-card`}
+						/>
+					)}
+					{options?.map((action, index) => (
+						<ActionSheetItem
+							key={index}
+							text={action.text}
+							onPress={action.onPress}
+							className={action.className}
+							last={index == options.length - 1}
+						/>
+					))}
+					{children}
+				</View>
+				<Button
+					variant="link"
+					className="w-full active:opacity-75 opacity-100 text-blue-500 bg-card rounded-xl"
+					onPress={onCancel}
+				>
+					Cancel
+				</Button>
+			</Dialog>
+		);
+	}
+);
+
+const ActionSheetItem = ({
+	className,
+	text,
+	onPress,
+	last = false,
+}: {
+	className?: string;
+	text: string;
+	onPress: () => void;
+	last?: boolean;
+}) => {
+	return (
+		<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 ",
+				last ? "border-transparent" : "border-muted/15",
+				className
+			)}
+			onPress={onPress}
+		>
+			{text}
+		</Button>
+	);
+};

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

@@ -0,0 +1,58 @@
+import { Text, View } from "@nativetail/core";
+import { forwardRef } from "react";
+import { Button } from "../button";
+import { Dialog, DialogMethods } from "../dialog";
+
+export type AlertDialogProps = {
+	containerClassName?: string;
+	onConfirm: () => void;
+	onCancel: () => void;
+	title?: string;
+	description?: string;
+	useBlur?: boolean;
+};
+export type AlertDialogRef = DialogMethods;
+export const AlertDialog = forwardRef<DialogMethods, AlertDialogProps>(
+	function AlertDialog(
+		{ containerClassName, onConfirm, title, description, useBlur, onCancel },
+		ref
+	) {
+		return (
+			<Dialog
+				containerClassName={containerClassName}
+				useBlur={useBlur}
+				ref={ref}
+			>
+				<View className="p-4 py-6">
+					{title && (
+						<Text className="text-foreground text-lg text-center font-semibold">
+							{title}
+						</Text>
+					)}
+					{description && (
+						<Text className="text-muted/75 text-center w-full">
+							{description}
+						</Text>
+					)}
+				</View>
+
+				<View className="flex-row items-center  border-t border-muted/15">
+					<Button
+						variant="link"
+						className="flex-1 active:opacity-75 text-foreground"
+						onPress={onCancel}
+					>
+						Cancel
+					</Button>
+					<Button
+						variant="link"
+						className="flex-1 border active:opacity-75 border-transparent rounded-none border-l-muted/15"
+						onPress={onConfirm}
+					>
+						Confirm
+					</Button>
+				</View>
+			</Dialog>
+		);
+	}
+);

package/src/components/blur/index.tsx

@@ -0,0 +1,15 @@
+import { BlurView, BlurViewProps } from "expo-blur";
+import { useColorScheme } from "@nativetail/core";
+
+export type BlurProps = BlurViewProps;
+export const Blur = (props: BlurProps) => {
+	const [colorScheme] = useColorScheme();
+	return (
+		<BlurView
+			intensity={50}
+			tint={colorScheme === "dark" ? "dark" : "light"}
+			experimentalBlurMethod="dimezisBlurView"
+			{...props}
+		/>
+	);
+};

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

@@ -0,0 +1,46 @@
+import { BlurView } from "expo-blur";
+import { cn, useTw, View } from "@nativetail/core";
+import { forwardRef } from "react";
+import ActionSheet, {
+	ActionSheetProps,
+	ActionSheetRef,
+} from "react-native-actions-sheet";
+import { Blur } from "../blur";
+export type BottomSheetProps = ActionSheetProps & {
+	containerClassName?: string;
+	contentClassName?: string;
+	indicatorClassName?: string;
+	useBlur?: boolean;
+};
+export const BottomSheet = forwardRef<ActionSheetRef, BottomSheetProps>(
+	function BottomSheet(
+		{
+			containerClassName,
+			contentClassName,
+			children,
+			useBlur,
+			indicatorClassName,
+			...props
+		},
+		ref
+	) {
+		const tw = useTw();
+		return (
+			<ActionSheet
+				ref={ref}
+				containerStyle={tw.style("bg-background/75", containerClassName)}
+				gestureEnabled
+				indicatorStyle={tw.style("bg-muted/15", indicatorClassName)}
+				{...props}
+			>
+				{useBlur && (
+					<Blur
+						style={tw`absolute top-0 left-0 right-0 bottom-0 rounded-xl flex-1 bg-card`}
+					/>
+				)}
+				<View className={cn("p-4 ", contentClassName)}>{children}</View>
+			</ActionSheet>
+		);
+	}
+);
+export { ActionSheetRef as BottomSheetRef };

package/src/components/button/index.tsx

@@ -0,0 +1,109 @@
+import React, { useMemo } from "react";
+
+import { MotiPressableProps } from "moti/interactions";
+import {
+	ActivityIndicator,
+	cva,
+	mergeClasses,
+	Pressable,
+	separateClasses,
+	useTw,
+	VariantProps,
+} from "@nativetail/core";
+
+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",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary  text-foreground ",
+				destructive: "bg-red-500 text-foreground  ",
+				outline: "border border-primary text-foreground bg-black/0  ",
+				secondary: "bg-secondary text-foreground  ",
+				ghost: "",
+				link: "text-primary ",
+				card: " bg-card ",
+			},
+			size: {
+				default: "h-12 px-4 py-2",
+				sm: "h-8 px-3 text-xs",
+				lg: "h-10 px-8",
+				icon: "h-9 w-9",
+			},
+			disabled: {
+				true: "opacity-80",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	}
+);
+type ButtonProps = MotiPressableProps &
+	VariantProps<typeof buttonVariants> & {
+		text?: string;
+		disabled?: boolean;
+		isLoading?: boolean;
+		textClass?: string;
+		leftElement?: React.ReactNode;
+		rightElement?: React.ReactNode;
+		className?: string;
+		children?: React.ReactNode;
+		loadingIndicatorClassName?: string;
+	};
+
+const Button = ({
+	text,
+	children,
+	isLoading,
+	className,
+	disabled,
+	variant,
+	leftElement,
+	rightElement,
+	size,
+	loadingIndicatorClassName,
+
+	...props
+}: ButtonProps) => {
+	const tw = useTw();
+
+	const loading = isLoading;
+
+	const isDisabled = disabled || loading;
+	const variantClass = useMemo(
+		() =>
+			buttonVariants({
+				variant,
+				size,
+				className,
+				disabled: isDisabled,
+			}),
+		[variant, size, className, isDisabled, tw]
+	);
+
+	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>
+	);
+};
+export { Button };

package/src/components/chip/index.tsx

@@ -0,0 +1,74 @@
+import React, { useMemo } from "react";
+
+import {
+	cn,
+	cva,
+	separateClasses,
+	Text,
+	VariantProps,
+	View,
+} from "@nativetail/core";
+
+const chipVariants = cva(
+	"items-center justify-center self-start text-foreground rounded-full",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary  ",
+				destructive: "bg-danger  ",
+				success: "bg-success",
+				outline: "border border-primary bg-background  ",
+				secondary: "bg-secondary  ",
+				card: " bg-card ",
+			},
+			size: {
+				default: "px-3 py-2 text-[16px]",
+				sm: " px-2 py-1 text-sm",
+				lg: "px-4 py-3 text-lg",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	}
+);
+type ChipProps = VariantProps<typeof chipVariants> & {
+	text?: string;
+	textClass?: string;
+	leftElement?: React.ReactNode;
+	rightElement?: React.ReactNode;
+	className?: string;
+};
+
+const Chip = ({
+	text,
+	variant,
+	size = "sm",
+	className,
+	leftElement,
+	rightElement,
+
+	...props
+}: ChipProps) => {
+	const variantClass = useMemo(
+		() =>
+			chipVariants({
+				variant,
+				size,
+				className: className,
+			}),
+		[variant, size, className]
+	);
+
+	const { textClasses } = separateClasses(variantClass);
+
+	return (
+		<View className={variantClass} {...props}>
+			{leftElement}
+			<Text className={cn(textClasses, "p-0 pt-0")}>{text}</Text>
+			{rightElement}
+		</View>
+	);
+};
+export { Chip };

package/src/components/counter/index.tsx

@@ -0,0 +1,101 @@
+import { TextInput, View, cn, useTw } from "@nativetail/core";
+import { useCallback, useRef } from "react";
+import { Iconify } from "react-native-iconify";
+import { Button } from "../button";
+export type CounterProps = {
+	value: number;
+	max?: number;
+	min?: number;
+	setValue: React.Dispatch<React.SetStateAction<number>>;
+	containerClassName?: string;
+};
+export function Counter({
+	value,
+	setValue,
+	min,
+	max,
+	containerClassName,
+}: CounterProps) {
+	const tw = useTw();
+	const increment = useCallback(() => {
+		setValue((prev) => {
+			if (max && prev >= max) return;
+			return prev + 1;
+		});
+	}, [setValue, max]);
+	const decrement = useCallback(() => {
+		setValue((prev) => {
+			if (min && prev <= min) return;
+			return prev - 1;
+		});
+	}, [setValue, min]);
+	const onChangeText = useCallback(
+		(text) => {
+			const number = parseInt(text);
+
+			if (isNaN(number)) return;
+			setValue(number);
+		},
+		[min, max, setValue]
+	);
+
+	return (
+		<View
+			className={cn(
+				"flex-row items-center gap-2 select-none w-full",
+				containerClassName
+			)}
+		>
+			<CounterButton disabled={!!(min && value <= min)} onPress={decrement}>
+				<Iconify
+					icon="ic:round-minus"
+					size={15}
+					color={tw.color("foreground")}
+				/>
+			</CounterButton>
+			<View className="flex-1 h-full">
+				<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()}
+				/>
+			</View>
+			<CounterButton disabled={!!(max && value >= max)} onPress={increment}>
+				<Iconify
+					icon="ic:round-plus"
+					size={15}
+					color={tw.color("foreground")}
+				/>
+			</CounterButton>
+		</View>
+	);
+}
+const CounterButton = ({
+	onPress,
+	children,
+	disabled,
+}: {
+	onPress: () => void;
+	children: React.ReactNode;
+	disabled?: boolean;
+}) => {
+	const functionInterval = useRef<NodeJS.Timeout>();
+	const onPressIn = useCallback(() => {
+		onPress();
+		functionInterval.current = setInterval(onPress, 100);
+	}, [onPress]);
+	const onPressOut = useCallback(() => {
+		if (functionInterval.current) clearInterval(functionInterval.current);
+	}, []);
+
+	return (
+		<Button
+			disabled={disabled}
+			onPressIn={onPressIn}
+			onPressOut={onPressOut}
+			size="sm"
+		>
+			{children}
+		</Button>
+	);
+};

package/src/components/dialog/index.tsx

@@ -0,0 +1,111 @@
+import { BlurView } from "expo-blur";
+import { AnimatePresence } from "moti";
+import { cn, mergeClasses, Pressable, useTw, View } from "@nativetail/core";
+import {
+	forwardRef,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useState,
+} from "react";
+import { Modal } from "react-native";
+import { Blur } from "../blur";
+
+export type DialogProps = {
+	containerClassName?: string;
+	contentClassName?: string;
+	useBlur?: boolean;
+	children: React.ReactNode;
+	onRequestClose?: () => void;
+};
+let timeout: NodeJS.Timeout;
+export type DialogMethods = {
+	show: () => void;
+	hide: () => void;
+};
+export const Dialog = forwardRef<DialogMethods, DialogProps>(function Dialog(
+	{
+		containerClassName,
+		contentClassName,
+		useBlur = true,
+		children,
+		onRequestClose,
+	}: DialogProps,
+	ref
+) {
+	const [isOpen, setOpen] = useState(false);
+
+	const getRef = useCallback(() => {
+		return {
+			show: () => {
+				setOpen(true);
+			},
+			hide: () => {
+				setOpen(false);
+			},
+		};
+	}, [setOpen]);
+	useImperativeHandle(ref, getRef, []);
+	const tw = useTw();
+	const [modalOpen, setModalOpen] = useState(isOpen);
+	useEffect(() => {
+		if (isOpen) {
+			setModalOpen(true);
+		} else {
+			timeout = setTimeout(
+				() => {
+					setModalOpen(false);
+				},
+				isOpen ? 0 : 200
+			);
+		}
+		return () => {
+			if (timeout) clearTimeout(timeout);
+		};
+	}, [isOpen]);
+
+	const onDidAnimate = useCallback(() => {
+		if (!isOpen) {
+			setModalOpen(false);
+		}
+	}, [isOpen]);
+
+	return (
+		<Modal
+			visible={modalOpen}
+			transparent
+			onRequestClose={onRequestClose}
+			animationType="fade"
+			statusBarTranslucent
+		>
+			<Pressable
+				className={cn(
+					"flex-1 items-center justify-center p-4 w-full h-full bg-black/35",
+					containerClassName
+				)}
+				onPress={onRequestClose}
+				disabled={!onRequestClose}
+			>
+				<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",
+								contentClassName
+							)}
+							onDidAnimate={onDidAnimate}
+						>
+							{useBlur && (
+								<Blur
+									style={tw`absolute top-0 left-0 right-0 bottom-0 rounded-xl flex-1 bg-card`}
+								/>
+							)}
+
+							{children}
+						</View>
+					)}
+				</AnimatePresence>
+			</Pressable>
+		</Modal>
+	);
+});