@apptimate/ui 1.0.0

package/src/Dropdown.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import React, { useState, useRef, useEffect, ReactNode, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '@apptimate/core-lib';
+
+interface DropdownProps {
+    trigger: ReactNode;
+    children: ReactNode;
+    align?: 'left' | 'right';
+    className?: string;
+    contentClassName?: string;
+}
+
+export function Dropdown({ trigger, children, align = 'left', className, contentClassName }: DropdownProps) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [coords, setCoords] = useState({ top: 0, left: 0, right: 0 });
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const contentRef = useRef<HTMLDivElement>(null);
+
+    const updatePosition = useCallback(() => {
+        if (dropdownRef.current) {
+            const rect = dropdownRef.current.getBoundingClientRect();
+            setCoords({
+                top: rect.bottom + window.scrollY,
+                left: rect.left + window.scrollX,
+                right: window.innerWidth - rect.right - window.scrollX
+            });
+        }
+    }, []);
+
+    const toggleDropdown = () => {
+        if (!isOpen) {
+            updatePosition();
+        }
+        setIsOpen((prev) => !prev);
+    };
+
+    const closeDropdown = () => setIsOpen(false);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            const target = event.target as Element;
+            if (target?.closest?.('.aceui-pop-confirm') || target?.closest?.('[role="dialog"]')) {
+                return;
+            }
+
+            const clickedTrigger = dropdownRef.current && dropdownRef.current.contains(target as Node);
+            const clickedContent = contentRef.current && contentRef.current.contains(target as Node);
+
+            if (!clickedTrigger && !clickedContent) {
+                setIsOpen(false);
+            }
+        };
+
+        const handleScroll = () => {
+            if (isOpen) updatePosition();
+        };
+
+        const handleResize = () => {
+            if (isOpen) updatePosition();
+        };
+
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            window.addEventListener('scroll', handleScroll, true);
+            window.addEventListener('resize', handleResize);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+            window.removeEventListener('scroll', handleScroll, true);
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [isOpen, updatePosition]);
+
+    return (
+        <>
+            <div ref={dropdownRef} className={cn("relative inline-block text-left", className)}>
+                <div onClick={toggleDropdown} className="cursor-pointer">
+                    {trigger}
+                </div>
+            </div>
+
+            {isOpen && typeof document !== 'undefined' && createPortal(
+                <div
+                    ref={contentRef}
+                    style={{
+                        position: 'absolute',
+                        top: `${coords.top}px`,
+                        ...(align === 'left' ? { left: `${coords.left}px` } : { right: `${coords.right}px` })
+                    }}
+                    className={cn(
+                        "z-[9999] mt-1.5 min-w-[160px] rounded-[10px] bg-surface-0 border border-border-default shadow-[0_4px_12px_rgba(0,0,0,0.05)] p-1.5 animate-in fade-in zoom-in-95 duration-200",
+                        contentClassName
+                    )}
+                    onClick={closeDropdown}
+                >
+                    {children}
+                </div>,
+                document.body
+            )}
+        </>
+    );
+}
+
+interface DropdownItemProps {
+    children: ReactNode;
+    onClick?: () => void;
+    className?: string;
+    isActive?: boolean;
+}
+
+export function DropdownItem({ children, onClick, className, isActive }: DropdownItemProps) {
+    return (
+        <div
+            onClick={onClick}
+            className={cn(
+                "px-3 py-2 text-[13px] rounded-[6px] cursor-pointer transition-colors flex items-center gap-2",
+                isActive
+                    ? "bg-primary-100 text-primary-700 font-medium"
+                    : "text-foreground-1 hover:bg-surface-hover hover:text-foreground-0",
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
+}

package/src/EmptyState.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import React from 'react';
+import { Inbox } from 'lucide-react';
+
+export interface EmptyStateProps {
+    message?: string;
+    icon?: React.ReactNode;
+}
+
+export const EmptyState = ({ message = "No records found.", icon }: EmptyStateProps) => {
+    return (
+        <div className="flex flex-col items-center justify-center opacity-40">
+            {icon || <Inbox size={42} strokeWidth={1.5} className="mb-3 text-foreground-disabled" />}
+            <p className="text-[14px] font-medium text-foreground-disabled">{message}</p>
+        </div>
+    );
+};

package/src/HintIcon.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Info } from 'lucide-react';
+
+interface HintIconProps {
+    text: string;
+}
+
+export function HintIcon({ text }: HintIconProps) {
+    const [show, setShow] = useState(false);
+    const [pos, setPos] = useState({ top: 0, left: 0 });
+    const iconRef = React.useRef<HTMLSpanElement>(null);
+
+    const handleMouseEnter = () => {
+        if (iconRef.current) {
+            const rect = iconRef.current.getBoundingClientRect();
+            // Try to keep tooltip within upper bounds if possible
+            const y = rect.top - 6;
+            setPos({ top: y, left: rect.left + rect.width / 2 });
+        }
+        setShow(true);
+    };
+
+    if (!text) return null;
+
+    return (
+        <>
+            <span
+                ref={iconRef}
+                className="inline-flex ml-1 align-middle"
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={() => setShow(false)}
+            >
+                <Info size={14} className="text-foreground-muted hover:text-foreground-1 transition-colors cursor-help" />
+            </span>
+            {show && typeof document !== 'undefined' && ReactDOM.createPortal(
+                <div
+                    className="fixed z-[9999] px-3 py-2 text-[12px] leading-relaxed text-white bg-foreground-0 rounded-[6px] shadow-lg max-w-[320px] whitespace-pre-wrap pointer-events-none"
+                    style={{ top: pos.top, left: pos.left, transform: 'translate(-50%, -100%)' }}
+                >
+                    {text}
+                </div>,
+                document.body
+            )}
+        </>
+    );
+}

package/src/Input.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import React, { useState } from 'react';
+import { cn } from '@apptimate/core-lib';
+import { Eye, EyeOff } from 'lucide-react';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    icon?: React.ReactNode;
+    isRequired?: boolean;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+    ({ label, error, icon, isRequired, className, type, ...props }, ref) => {
+        const [showPassword, setShowPassword] = useState(false);
+        const isPassword = type === 'password';
+        const inputType = isPassword ? (showPassword ? 'text' : 'password') : type;
+
+        return (
+            <div className={cn("flex flex-col gap-1.5 w-full", className)}>
+                {label && (
+                    <label className="text-[12px] font-semibold text-foreground-subtle tracking-[0.3px] uppercase">
+                        {label} {isRequired && <span className="text-danger-alt ml-0.5">*</span>}
+                    </label>
+                )}
+                <div className="relative group">
+                    {icon && (
+                        <div className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-disabled group-focus-within:text-primary transition-colors">
+                            {icon}
+                        </div>
+                    )}
+                    <input
+                        ref={ref}
+                        type={inputType}
+                        className={cn(
+                             "w-full bg-surface-0 border-1.5 border-border-subtle rounded-[10px] px-3.5 py-2.5 text-[13.5px] text-foreground-1 outline-none transition-all focus:border-primary focus:bg-surface-1 placeholder:text-foreground-disabled",
+                            icon && "pl-10",
+                            isPassword && "pr-10",
+                            error && "border-danger-alt focus:border-danger-alt"
+                        )}
+                        {...props}
+                    />
+                    {isPassword && (
+                        <button
+                            type="button"
+                            onClick={() => setShowPassword(!showPassword)}
+                            className="absolute right-3 top-1/2 -translate-y-1/2 text-foreground-disabled hover:text-primary transition-colors"
+                        >
+                            {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                        </button>
+                    )}
+                </div>
+                {error && <span className="text-[11px] text-danger-alt font-medium">{error}</span>}
+            </div>
+        );
+    }
+);
+
+Input.displayName = 'Input';

package/src/Modal.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import React, { useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X } from 'lucide-react';
+import { cn } from '@apptimate/core-lib';
+
+export interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string | React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+    footer?: React.ReactNode;
+    backdrop?: 'transparent' | 'opaque' | 'blur';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+}
+
+export const Modal = ({ isOpen, onClose, title, children, className, footer, backdrop = 'opaque', size = 'sm' }: ModalProps) => {
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = 'unset';
+        }
+        return () => { document.body.style.overflow = 'unset'; };
+    }, [isOpen]);
+
+    const backdropClasses = cn(
+        "absolute inset-0 transition-all duration-300",
+        backdrop === 'transparent' && "bg-transparent",
+        backdrop === 'opaque' && "bg-foreground-0/60",
+        backdrop === 'blur' && "bg-foreground-0/40 backdrop-blur-sm"
+    );
+
+    const sizeClasses = {
+        xs: 'max-w-[400px]',
+        sm: 'max-w-[480px]',
+        md: 'max-w-[600px]',
+        lg: 'max-w-[800px]',
+        xl: 'max-w-[1140px]',
+        '2xl': 'max-w-[1400px]',
+        full: 'max-w-[100vw]',
+    };
+
+    return (
+        <AnimatePresence>
+            {isOpen && (
+                <div className={cn("fixed inset-0 z-50 flex items-center justify-center", size === 'full' ? 'p-0' : 'p-2 sm:p-4')}>
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        onClick={onClose}
+                        className={backdropClasses}
+                    />
+                    <motion.div
+                        initial={{ opacity: 0, scale: 0.95, y: 20 }}
+                        animate={{ opacity: 1, scale: 1, y: 0 }}
+                        exit={{ opacity: 0, scale: 0.95, y: 20 }}
+                        className={cn(
+                            "relative w-full bg-surface-1 shadow-[0_8px_40px_rgba(0,0,0,0.2)] flex flex-col overflow-hidden",
+                            size === 'full' ? "rounded-none h-screen max-h-screen" : "rounded-[16px] sm:rounded-[24px] max-h-[90vh]",
+                            sizeClasses[size],
+                            className
+                        )}
+                    >
+                        {/* Header */}
+                        <div className="flex items-center justify-between px-5 sm:px-8 py-4 border-b border-surface-0">
+                            <h3 className="text-[16px] sm:text-[18px] font-bold text-foreground-0 tracking-tight">{title}</h3>
+                            <button
+                                onClick={onClose}
+                                className="w-8 h-8 rounded-full flex items-center justify-center text-foreground-disabled hover:bg-surface-0 hover:text-foreground-0 transition-all"
+                            >
+                                <X size={20} />
+                            </button>
+                        </div>
+
+                        {/* Body */}
+                        <div className={cn(
+                            "flex-1",
+                            size === 'full' ? "overflow-hidden p-0" : "overflow-y-auto px-5 sm:px-8 py-5 sm:py-7"
+                        )}>
+                            {children}
+                        </div>
+
+                        {/* Footer */}
+                        {footer && (
+                            <div className="px-5 sm:px-8 py-4 sm:py-6 bg-surface-subtle border-t border-surface-0 flex flex-col-reverse sm:flex-row justify-end gap-2 sm:gap-3">
+                                {footer}
+                            </div>
+                        )}
+                    </motion.div>
+                </div>
+            )}
+        </AnimatePresence>
+    );
+};

package/src/Pagination.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import React from 'react';
+import { cn } from '@apptimate/core-lib';
+
+export interface PaginationProps {
+    currentPage: number;
+    totalItems: number;
+    itemsPerPage: number;
+    onPageChange: (page: number) => void;
+    className?: string;
+}
+
+export const Pagination = ({
+    currentPage,
+    totalItems,
+    itemsPerPage,
+    onPageChange,
+    className
+}: PaginationProps) => {
+    const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+    if (totalPages === 0) {
+        return null;
+    }
+
+    const startItem = totalItems === 0 ? 0 : (currentPage - 1) * itemsPerPage + 1;
+    const endItem = Math.min(startItem + itemsPerPage - 1, totalItems);
+
+    return (
+        <div className={cn("px-4 sm:px-6 py-3 sm:py-4 flex items-center justify-end gap-2", className)}>
+            <span className="text-[12px] sm:text-[13px] font-semibold text-primary mr-1 sm:mr-2">
+                {totalItems > 0 ? `${startItem}–${endItem} of ${totalItems}` : '0 of 0'}
+            </span>
+            <button
+                className={`w-8 h-8 rounded-full border border-border-subtle flex items-center justify-center text-foreground-muted transition-colors ${currentPage <= 1 || totalPages === 0 ? 'cursor-not-allowed' : 'cursor-pointer bg-primary text-white hover:bg-primary/90'}`}
+                disabled={currentPage <= 1 || totalPages === 0}
+                onClick={() => onPageChange(currentPage - 1)}
+            >
+                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6" /></svg>
+            </button>
+            <button
+                className={`w-8 h-8 rounded-full border border-border-subtle flex items-center justify-center text-foreground-muted transition-colors ${currentPage >= totalPages || totalPages === 0 ? 'cursor-not-allowed' : 'cursor-pointer bg-primary text-white hover:bg-primary/90'}`}
+                disabled={currentPage >= totalPages || totalPages === 0}
+                onClick={() => onPageChange(currentPage + 1)}
+            >
+                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6" /></svg>
+            </button>
+        </div>
+    );
+};