@nativetail/ui 0.0.1

package/src/components/dropdown/index.tsx

@@ -0,0 +1,252 @@
+import { BlurView } from "expo-blur";
+import { AnimatePresence } from "moti";
+import {
+	mergeClasses,
+	Pressable,
+	PressableProps,
+	useTw,
+	View,
+} from "@nativetail/core";
+import React, {
+	ReactNode,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+} from "react";
+import {
+	Dimensions,
+	I18nManager,
+	Modal,
+	View as NativeView,
+	StatusBar,
+} from "react-native";
+import { Blur } from "../blur";
+
+type PositionType = {
+	width: number;
+	height: number;
+	top: number;
+	left: number;
+	bottom: number;
+};
+type DropdownState = {
+	isOpen: boolean;
+	toggle: () => void;
+	close: () => void;
+	open: () => void;
+	position: PositionType | null;
+	setPosition: (position: PositionType | null) => void;
+};
+const DropdownContext = React.createContext<DropdownState | null>(null);
+const useDropdownContext = () => {
+	const context = React.useContext(DropdownContext);
+	if (!context) {
+		throw new Error("useDropdownContext must be used within a DropdownRoot");
+	}
+	return context;
+};
+
+const DropdownRoot = ({
+	className,
+	children,
+}: {
+	className?: string;
+	children: ReactNode;
+}) => {
+	const [open, setOpen] = useState(false);
+	const [position, setPosition] = useState<PositionType | null>(null);
+	return (
+		<DropdownContext.Provider
+			value={{
+				isOpen: open,
+				toggle: () => setOpen(!open),
+				close: () => setOpen(false),
+				open: () => setOpen(true),
+				position,
+				setPosition,
+			}}
+		>
+			<View className={className} animated>
+				{children}
+			</View>
+		</DropdownContext.Provider>
+	);
+};
+const DropdownTrigger = ({
+	className,
+	children,
+	containerClassName,
+}: {
+	className?: string;
+	children: ReactNode;
+	containerClassName?: string;
+}) => {
+	const toggle = useDropdownContext().toggle;
+	const ref = useRef<NativeView>(null);
+
+	const statusBarHeight: number = StatusBar.currentHeight || 0;
+	const setPosition = useDropdownContext().setPosition;
+
+	const { width: W, height: H } = Dimensions.get("window");
+	const _measure = useCallback(() => {
+		if (ref && ref?.current) {
+			ref.current.measureInWindow((pageX, pageY, width, height) => {
+				let isFull = false;
+
+				const top = isFull ? 20 : height + pageY + 2;
+				const bottom = H - top + height;
+				const left = I18nManager.isRTL ? W - width - pageX : pageX;
+
+				setPosition({
+					width: Math.floor(width),
+					top: Math.floor(top + statusBarHeight),
+					bottom: Math.floor(bottom - statusBarHeight),
+					left: Math.floor(left),
+					height: Math.floor(height),
+				});
+			});
+		}
+	}, [H, W]);
+	const handlePress = useCallback(() => {
+		if (__DEV__) {
+			_measure();
+		}
+		toggle();
+	}, [toggle, _measure]);
+	return (
+		<Pressable
+			className={className}
+			onPress={handlePress}
+			containerClassName={containerClassName}
+			onLayout={_measure}
+			ref={ref}
+		>
+			{children}
+		</Pressable>
+	);
+};
+let timeout: NodeJS.Timeout;
+const DropdownMenu = ({
+	className,
+	children,
+	useBlur = true,
+}: {
+	className?: string;
+	children: ReactNode;
+	useBlur?: boolean;
+}) => {
+	const { isOpen, close } = useDropdownContext();
+	const position = useDropdownContext().position;
+	const left = position?.left || 0;
+	const top = position?.top || 0;
+	const menuX = left;
+	const menuY = top;
+	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]);
+	const tw = useTw();
+	const renderChildren = useCallback(() => {
+		return React.Children.map(children, (child, index) => {
+			return React.cloneElement(child as any, {
+				key: index,
+				last: index === React.Children.count(children) - 1,
+				first: index === 0,
+			});
+		});
+	}, [children]);
+	return (
+		<Modal
+			visible={modalOpen}
+			transparent
+			onRequestClose={close}
+			statusBarTranslucent
+		>
+			<Pressable className="flex-1 " onPress={close}>
+				<AnimatePresence exitBeforeEnter>
+					{isOpen && (
+						<View
+							className={mergeClasses(
+								"absolute in:scale-0 scale-100 out:scale-0 overflow-hidden z-10 bg-card/95 rounded-xl max-w-xs w-full  border border-muted/15",
+								className
+							)}
+							onDidAnimate={onDidAnimate}
+							style={{
+								top: menuY,
+								left: menuX,
+								transformOrigin: "top left",
+							}}
+							animated
+							print
+							id={"1"}
+						>
+							{useBlur && (
+								<Blur style={tw`absolute top-0 left-0 rounded-xl flex-1 `} />
+							)}
+							{renderChildren()}
+						</View>
+					)}
+				</AnimatePresence>
+			</Pressable>
+		</Modal>
+	);
+};
+const DropdownItem = ({
+	className,
+	children,
+	last,
+	first,
+	...props
+}: {
+	className?: string;
+	last?: boolean;
+	children: ReactNode;
+	first?: boolean;
+} & PressableProps) => {
+	const close = useDropdownContext().close;
+	return (
+		<Pressable
+			className={mergeClasses(
+				"w-full text-[16px] font-medium bg-card/15 active:bg-card py-2.5 px-4 flex-row items-center justify-between border-b border-b-transparent text-foreground",
+				first ? "rounded-t-xl" : "",
+				last ? "rounded-b-xl" : "border-b-muted/15",
+				className
+			)}
+			{...props}
+			onPress={() => {
+				close();
+				props.onPress && props.onPress();
+			}}
+		>
+			{children}
+		</Pressable>
+	);
+};
+
+const Dropdown = {
+	Root: DropdownRoot,
+	Trigger: DropdownTrigger,
+	Menu: DropdownMenu,
+	Item: DropdownItem,
+};
+
+export { Dropdown };

package/src/components/index.ts

@@ -0,0 +1,14 @@
+export * from "./dropdown";
+export * from "./button";
+export * from "./input";
+export * from "./switch";
+export * from "./toast";
+export * from "./select";
+export * from "./dialog";
+export * from "./alert-dialog";
+export * from "./bottom-sheet";
+export * from "./actions-sheet";
+export * from "./chip";
+export * from "./blur";
+export * from "./progress";
+export * from "./counter";

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

@@ -0,0 +1,74 @@
+import { cn, Text, TextInput, TextInputProps, View } from "@nativetail/core";
+import { useCallback, useState } from "react";
+import { create } from "zustand";
+
+type FloatingInputProps = TextInputProps & {
+	containerClassName?: string;
+	label: string;
+	error?: string;
+	helperText?: string;
+};
+const useFocusSate = create<{
+	isFocused: boolean;
+	setIsFocused: (isFocused: boolean) => void;
+}>((set) => ({
+	isFocused: false,
+	setIsFocused: (isFocused: boolean) => set({ isFocused }),
+}));
+export function FloatingInput({
+	value,
+	onChangeText,
+	containerClassName,
+	label,
+	error,
+	className,
+	...props
+}: FloatingInputProps) {
+	const onFocus = useCallback(() => {
+		useFocusSate.getState().setIsFocused(true);
+	}, []);
+	const onBlur = useCallback(() => {
+		useFocusSate.getState().setIsFocused(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}
+				className={cn(
+					"flex-1 p-3 bg-card rounded-xl absolute w-full h-full -z-5 pt-5 text-foreground text-[16px]",
+					className
+				)}
+				{...props}
+			/>
+		</View>
+	);
+}
+
+const Label = ({ label, value }: { label?: string; value?: string }) => {
+	const isFocused = useFocusSate((state) => state.isFocused);
+	const labelOnTop = isFocused || !!value;
+
+	return (
+		<View className="flex-1 p-3 justify-center" pointerEvents="none">
+			<Text
+				animated
+				className={cn(
+					"text-muted duration-75  ",
+					labelOnTop ? " -translate-y-16 text-xs" : "translate-y-0 text-[16px]"
+				)}
+			>
+				{label}
+			</Text>
+		</View>
+	);
+};

package/src/components/input/index.ts

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

package/src/components/input/input.tsx

@@ -0,0 +1,41 @@
+import {
+	cn,
+	Text,
+	TextInput,
+	TextInputProps,
+	useTw,
+	View,
+} from "@nativetail/core";
+
+type InputProps = TextInputProps & {
+	containerClassName?: string;
+	label: string;
+	error?: string;
+	helperText?: string;
+};
+export function Input({
+	value,
+	onChangeText,
+	containerClassName,
+	label,
+	error,
+	className,
+	...props
+}: InputProps) {
+	const tw = useTw();
+	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
+				)}
+				placeholderTextColor={tw.color("muted")}
+				{...props}
+			/>
+		</View>
+	);
+}

package/src/components/progress/index.tsx

@@ -0,0 +1,28 @@
+import { View, cn } from "@nativetail/core";
+import React, { useMemo } from "react";
+export type ProgressProps = {
+	containerClassName?: string;
+	progress: number;
+	max: number;
+};
+export function Progress({ containerClassName, progress, max }: ProgressProps) {
+	const percent = useMemo(() => {
+		return Math.round((progress / max) * 100);
+	}, [progress, max]);
+	return (
+		<View
+			className={cn(
+				"flex-row items-center rounded-full h-4 overflow-hidden bg-primary/15 border border-primary/35 ",
+				containerClassName
+			)}
+		>
+			<View
+				className={cn(
+					"w-full h-full bg-primary rounded-full",
+					`w-[${percent}%]`
+				)}
+				animated
+			/>
+		</View>
+	);
+}

package/src/components/select/index.tsx

@@ -0,0 +1,141 @@
+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";
+
+type SelectProps = 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;
+	}[];
+};
+export function Select({
+	containerClassName,
+	label,
+	error,
+	className,
+	value,
+	onChange,
+	helperText,
+	placeholder,
+	options,
+	...props
+}: SelectProps) {
+	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}
+					{...props}
+				/>
+				<Dropdown.Menu>{renderOptions()}</Dropdown.Menu>
+			</Dropdown.Root>
+		</View>
+	);
+}
+const SelectTrigger = memo(
+	({
+		options,
+		className,
+		value,
+		placeholder,
+		...props
+	}: Partial<SelectProps>) => {
+		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>
+		);
+	}
+);
+
+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/stepper/index.tsx

@@ -0,0 +1,31 @@
+import { cn, View } from "@nativetail/core";
+import { useCallback } from "react";
+
+export type StepperProps = {
+	steps: string[];
+	activeStepIndex: number;
+	setActiveStepIndex?: (index: number) => void;
+};
+export const Stepper = (props: StepperProps) => {
+	const renderSteps = useCallback(() => {
+		return props.steps.map((step, index) => {
+			const isActive = index === props.activeStepIndex;
+			const isCompleted = index < props.activeStepIndex;
+			return (
+				<View key={index} className="flex-row items-center">
+					<View
+						className={cn("w-4 h-4 rounded-full", {
+							"bg-primary": isActive,
+							"bg-gray-300": !isActive && !isCompleted,
+							"bg-success": isCompleted,
+						})}
+					/>
+					{index < props.steps.length - 1 && (
+						<View className="h-0.5 bg-gray-300 w-4" />
+					)}
+				</View>
+			);
+		});
+	}, [props.steps, props.activeStepIndex]);
+	return <View className="flex-row items-center">{renderSteps()}</View>;
+};

package/src/components/switch/index.tsx

@@ -0,0 +1,72 @@
+import {
+	cn,
+	cva,
+	Pressable,
+	useTw,
+	VariantProps,
+	View,
+} from "@nativetail/core";
+
+const switchVariants = cva(
+	"rounded-full bg-card justify-center border p-0.5 items-start",
+	{
+		variants: {
+			size: {
+				small: "w-12 h-6",
+				medium: "w-16 h-8",
+				large: "w-24 h-12",
+			},
+		},
+		defaultVariants: {
+			size: "small",
+		},
+	}
+);
+type SwitchProps = VariantProps<typeof switchVariants> & {
+	checked: boolean;
+	onChange: (checked: boolean) => void;
+	containerClassName?: string;
+	containerActiveClass?: string;
+	indicatorClassName?: string;
+};
+export function Switch({
+	checked,
+	onChange,
+	containerClassName,
+	size,
+	indicatorClassName,
+	containerActiveClass,
+	...props
+}: SwitchProps) {
+	const className = switchVariants({
+		className: containerClassName,
+		size: size,
+	});
+	const tw = useTw();
+	const style = tw.style(className);
+	const containerWidth = Number(style.width) || 0;
+	const indicatorWidth = containerWidth * 0.48;
+	const x = `translate-x-${!checked ? 1 : indicatorWidth}`;
+	return (
+		<Pressable
+			className={cn(
+				className,
+				checked ? "bg-primary/35 " + containerActiveClass : ""
+			)}
+			aria-checked={checked}
+			accessibilityRole="switch"
+			aria-label="Switch"
+			{...props}
+			onPress={() => onChange(!checked)}
+		>
+			<View
+				className={cn(
+					`rounded-full bg-primary aspect-square h-full`,
+					indicatorClassName,
+					x
+				)}
+				animated
+			/>
+		</Pressable>
+	);
+}