@exotic-holidays/ui 0.1.0

package/src/base-components/Select.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import React from 'react';
+import { cn } from '../helpers/cn';
+import { ChevronDown } from 'lucide-react';
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    label?: string;
+    error?: string;
+    isRequired?: boolean;
+    options: { label: string; value: string | number }[];
+}
+
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+    ({ label, error, isRequired, options, className, ...props }, ref) => {
+        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">
+                    <select
+                        ref={ref}
+                        className={cn(
+                            "w-full bg-surface-0 border-[1.5px] border-border-subtle rounded-[10px] px-3.5 py-2.5 text-[13.5px] text-foreground-1 outline-none transition-all focus:bg-surface-1 appearance-none cursor-pointer",
+                            error && "border-danger-alt focus:border-danger-alt"
+                        )}
+                        {...props}
+                    >
+                        <option value="" disabled>Select an option</option>
+                        {options.map((opt) => (
+                            <option key={opt.value} value={opt.value}>
+                                {opt.label}
+                            </option>
+                        ))}
+                    </select>
+                    <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-foreground-disabled group-focus-within:text-primary transition-colors">
+                        <ChevronDown size={16} />
+                    </div>
+                </div>
+                {error && <span className="text-[11px] text-danger-alt font-medium">{error}</span>}
+            </div>
+        );
+    }
+);
+
+Select.displayName = 'Select';

package/src/base-components/Table.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import React from 'react';
+import { cn } from '../helpers/cn';
+
+export interface TableProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+
+export const Table = ({ children, className }: TableProps) => {
+    return (
+        <div className={cn("w-full overflow-x-auto", className)}>
+            <table className="w-full border-separate border-spacing-0 text-left min-w-[600px]">
+                {children}
+            </table>
+        </div>
+    );
+};
+
+export const THeader = ({ children, className }: TableProps) => (
+    <thead className={cn(className)}>
+        {children}
+    </thead>
+);
+
+export const TBody = ({ children, className }: TableProps) => (
+    <tbody className={cn(className)}>
+        {children}
+    </tbody>
+);
+
+export const TRow = ({ children, className, onClick }: TableProps & { onClick?: () => void }) => (
+    <tr
+        className={cn(
+            "group transition-colors",
+            onClick && "cursor-pointer hover:bg-surface-hover-table",
+            className
+        )}
+        onClick={onClick}
+    >
+        {children}
+    </tr>
+);
+
+export const TCell = ({ children, className, isHeader = false, colSpan, rowSpan }: TableProps & { isHeader?: boolean; colSpan?: number; rowSpan?: number }) => {
+    const Tag = isHeader ? 'th' : 'td';
+    return (
+        <Tag
+            colSpan={colSpan}
+            rowSpan={rowSpan}
+            className={cn(
+                "transition-all",
+                isHeader
+                    ? "bg-default-100 py-2.5 px-3 sm:px-4 text-[12px] font-semibold text-foreground-subtle capitalize tracking-wide first:rounded-l-[8px] last:rounded-r-[8px]"
+                    : "py-2.5 px-3 sm:px-4 text-[13px] font-medium text-foreground-1 border-b border-border-table",
+                className
+            )}>
+            {children}
+        </Tag>
+    );
+};
+
+export const TLoader = ({ rows = 8, cols = 4 }: { rows?: number; cols?: number }) => {
+    return (
+        <>
+            {Array.from({ length: rows }).map((_, i) => (
+                <TRow key={i}>
+                    {Array.from({ length: cols }).map((_, j) => (
+                        <TCell key={j}>
+                            <div className="h-4 bg-surface-0 animate-pulse rounded w-full" />
+                        </TCell>
+                    ))}
+                </TRow>
+            ))}
+        </>
+    );
+};

package/src/base-components/Textarea.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import React from 'react';
+import { cn } from '../helpers/cn';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    error?: string;
+    icon?: React.ReactNode;
+    isRequired?: boolean;
+}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+    ({ label, error, icon, isRequired, className, rows = 3, ...props }, ref) => {
+        return (
+            <div className={cn("flex flex-col gap-1.5 w-full", className)}>
+                {label && (
+                    <label className="text-[12px] font-normal text-foreground-subtle tracking-[0.3px] capitalize">
+                        {label} {isRequired && <span className="text-danger-alt ml-0.5">*</span>}
+                    </label>
+                )}
+                <div className="relative group">
+                    {icon && (
+                        <div className="absolute left-3 top-3 w-4 h-4 text-foreground-disabled group-focus-within:text-primary transition-colors">
+                            {icon}
+                        </div>
+                    )}
+                    <textarea
+                        ref={ref}
+                        rows={rows}
+                        className={cn(
+                            "w-full bg-surface-1 border-[1.5px] 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 resize-y",
+                            icon && "pl-10",
+                            error && "border-danger-alt focus:border-danger-alt"
+                        )}
+                        {...props}
+                    />
+                </div>
+                {error && <span className="text-[11px] text-danger-alt font-medium">{error}</span>}
+            </div>
+        );
+    }
+);
+
+Textarea.displayName = 'Textarea';

package/src/base-components/ThemeProvider.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';
+
+export type ThemePreference = 'light' | 'dark' | 'system';
+
+const STORAGE_KEY = 'ehi_theme_preference';
+
+interface ThemeContextType {
+    theme: ThemePreference;
+    resolvedTheme: 'light' | 'dark';
+    setTheme: (theme: ThemePreference) => void;
+    toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+function getSystemTheme(): 'light' | 'dark' {
+    if (typeof window === 'undefined') return 'light';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+export function ThemeProvider({
+    children,
+    defaultTheme = 'light',
+}: {
+    children: React.ReactNode;
+    defaultTheme?: ThemePreference;
+}) {
+    const [theme, setThemeState] = useState<ThemePreference>(defaultTheme);
+    const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('light');
+    const [mounted, setMounted] = useState(false);
+
+    // Initialize from localStorage
+    useEffect(() => {
+        let stored: ThemePreference | null = null;
+        try {
+            stored = localStorage.getItem(STORAGE_KEY) as ThemePreference | null;
+        } catch {
+            stored = null;
+        }
+        const pref = stored || defaultTheme;
+        setThemeState(pref);
+        setResolvedTheme(pref === 'system' ? getSystemTheme() : pref);
+        setMounted(true);
+    }, [defaultTheme]);
+
+    // Listen for system theme changes when preference is 'system'
+    useEffect(() => {
+        if (!mounted) return;
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const handleChange = () => {
+            if (theme === 'system') setResolvedTheme(getSystemTheme());
+        };
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, [theme, mounted]);
+
+    // Sync .dark class on <html> so portalled elements (dropdowns, modals) inherit dark mode
+    useEffect(() => {
+        if (!mounted) return;
+        document.documentElement.classList.toggle('dark', resolvedTheme === 'dark');
+    }, [resolvedTheme, mounted]);
+
+    const setTheme = useCallback((newTheme: ThemePreference) => {
+        setThemeState(newTheme);
+        try {
+            localStorage.setItem(STORAGE_KEY, newTheme);
+        } catch {
+            /* ignore */
+        }
+        setResolvedTheme(newTheme === 'system' ? getSystemTheme() : newTheme);
+    }, []);
+
+    const toggleTheme = useCallback(() => {
+        setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
+    }, [resolvedTheme, setTheme]);
+
+    return (
+        <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme, toggleTheme }}>
+            {children}
+        </ThemeContext.Provider>
+    );
+}
+
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+}

package/src/base-components/Toaster.tsx

@@ -0,0 +1,198 @@
+'use client';
+
+import React, { createContext, useContext, useState, useCallback, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from 'framer-motion';
+import { CheckCircle, XCircle, AlertTriangle, Info, X } from 'lucide-react';
+
+/* ─── Types ─── */
+type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+
+interface Toast {
+    id: string;
+    message: string;
+    variant: ToastVariant;
+    duration: number;
+    action?: ToastAction;
+}
+
+interface ToastContextValue {
+    success: (message: string, duration?: number) => void;
+    error: (message: string, options?: { duration?: number; action?: ToastAction }) => void;
+    warning: (message: string, duration?: number) => void;
+    info: (message: string, duration?: number) => void;
+}
+
+/* ─── Variant config ─── */
+const variantConfig: Record<ToastVariant, {
+    icon: React.ReactNode;
+    bg: string;
+    border: string;
+    text: string;
+    progress: string;
+    iconColor: string;
+    iconBg: string;
+}> = {
+    success: {
+        icon: <CheckCircle size={18} />,
+        bg: 'bg-surface-0',
+        border: 'border-border-subtle',
+        text: 'text-foreground-0',
+        progress: 'bg-success',
+        iconColor: 'text-success-600',
+        iconBg: 'bg-success-50',
+    },
+    error: {
+        icon: <XCircle size={18} />,
+        bg: 'bg-surface-0',
+        border: 'border-border-subtle',
+        text: 'text-foreground-0',
+        progress: 'bg-danger',
+        iconColor: 'text-danger-600',
+        iconBg: 'bg-danger-50',
+    },
+    warning: {
+        icon: <AlertTriangle size={18} />,
+        bg: 'bg-surface-0',
+        border: 'border-border-subtle',
+        text: 'text-foreground-0',
+        progress: 'bg-warning',
+        iconColor: 'text-warning-600',
+        iconBg: 'bg-warning-50',
+    },
+    info: {
+        icon: <Info size={18} />,
+        bg: 'bg-surface-0',
+        border: 'border-border-subtle',
+        text: 'text-foreground-0',
+        progress: 'bg-primary',
+        iconColor: 'text-primary-600',
+        iconBg: 'bg-primary-50',
+    },
+};
+
+/* ─── Context ─── */
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+export function useToast(): ToastContextValue {
+    const ctx = useContext(ToastContext);
+    if (!ctx) throw new Error('useToast must be used within <ToasterProvider>');
+    return ctx;
+}
+
+/* ─── Single toast item ─── */
+function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: (id: string) => void }) {
+    const config = variantConfig[toast.variant];
+    const [progress, setProgress] = useState(100);
+    const startRef = useRef<number>(Date.now());
+    const rafRef = useRef<number>(0);
+
+    useEffect(() => {
+        const animate = () => {
+            const elapsed = Date.now() - startRef.current;
+            const remaining = Math.max(0, 100 - (elapsed / toast.duration) * 100);
+            setProgress(remaining);
+
+            if (remaining <= 0) {
+                onDismiss(toast.id);
+                return;
+            }
+            rafRef.current = requestAnimationFrame(animate);
+        };
+        rafRef.current = requestAnimationFrame(animate);
+        return () => cancelAnimationFrame(rafRef.current);
+    }, [toast.id, toast.duration, onDismiss]);
+
+    return (
+        <motion.div
+            layout
+            initial={{ opacity: 0, y: -15, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95, transition: { duration: 0.2 } }}
+            transition={{ type: 'spring', stiffness: 400, damping: 25 }}
+            className={`relative flex items-center gap-3.5 min-w-[300px] max-w-[480px] px-4 py-3 rounded-[14px] border shadow-[0_8px_30px_rgb(0,0,0,0.06)] overflow-hidden ${config.bg} ${config.border}`}
+        >
+            <div className={`shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${config.iconBg} ${config.iconColor}`}>
+                {config.icon}
+            </div>
+
+            <p className={`text-[13px] font-medium leading-snug flex-1 pr-6 tracking-wide ${config.text}`}>
+                {toast.message}
+            </p>
+
+            {toast.action && (
+                <button
+                    onClick={() => {
+                        toast.action!.onClick();
+                        onDismiss(toast.id);
+                    }}
+                    className="shrink-0 px-3 py-1.5 text-[12px] font-semibold text-primary hover:text-primary-700 bg-primary/8 hover:bg-primary/15 rounded-lg transition-all cursor-pointer mr-5"
+                >
+                    {toast.action.label}
+                </button>
+            )}
+
+            <button
+                onClick={() => onDismiss(toast.id)}
+                className={`absolute top-1/2 -translate-y-1/2 right-3 shrink-0 p-1 rounded-md text-foreground-disabled hover:bg-surface-hover hover:text-foreground-0 transition-colors cursor-pointer`}
+            >
+                <X size={14} />
+            </button>
+
+            {/* Progress bar */}
+            <div className="absolute bottom-0 left-0 right-0 h-[3px] bg-transparent">
+                <motion.div
+                    className={`h-full ${config.progress} opacity-20`}
+                    style={{ width: `${progress}%` }}
+                    transition={{ duration: 0 }}
+                />
+            </div>
+        </motion.div>
+    );
+}
+
+/* ─── Provider ─── */
+export function ToasterProvider({ children }: { children: React.ReactNode }) {
+    const [toasts, setToasts] = useState<Toast[]>([]);
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => setMounted(true), []);
+
+    const dismiss = useCallback((id: string) => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, []);
+
+    const addToast = useCallback((variant: ToastVariant, message: string, duration = 4000, action?: ToastAction) => {
+        const id = `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+        setToasts((prev) => [...prev, { id, message, variant, duration, action }]);
+    }, []);
+
+    const value = React.useMemo(() => ({
+        success: (msg: string, dur?: number) => addToast('success', msg, dur),
+        error: (msg: string, opts?: { duration?: number; action?: ToastAction }) => addToast('error', msg, opts?.duration, opts?.action),
+        warning: (msg: string, dur?: number) => addToast('warning', msg, dur),
+        info: (msg: string, dur?: number) => addToast('info', msg, dur),
+    }), [addToast]);
+
+    return (
+        <ToastContext.Provider value={value}>
+            {children}
+            {mounted &&
+                createPortal(
+                    <div className="fixed bottom-5 right-5 z-[9999] flex flex-col-reverse gap-3 pointer-events-auto">
+                        <AnimatePresence mode="popLayout">
+                            {[...toasts].reverse().map((t) => (
+                                <ToastItem key={t.id} toast={t} onDismiss={dismiss} />
+                            ))}
+                        </AnimatePresence>
+                    </div>,
+                    document.body
+                )}
+        </ToastContext.Provider>
+    );
+}

package/src/base-components/index.ts

@@ -0,0 +1,32 @@
+/**
+ * AceUI base-component library (vendored).
+ * Import design-system primitives from here, e.g.:
+ *   import { Button, Input, Card, EmptyState } from "@/common/components/base-components";
+ */
+export * from "./Accordion";
+export * from "./Badge";
+export * from "./Button";
+export * from "./ButtonGroup";
+export * from "./Card";
+export * from "./Checkbox";
+export * from "./ChipInput";
+export * from "./Divider";
+export * from "./Dropdown";
+export * from "./EmptyState";
+export * from "./FilterPopover";
+export * from "./Input";
+export * from "./Textarea";
+export * from "./SearchPopover";
+export * from "./Modal";
+export * from "./Pagination";
+export * from "./PopConfirm";
+export * from "./SearchableSelect";
+export * from "./Select";
+export * from "./Table";
+export * from "./DataTable";
+export * from "./ThemeProvider";
+export * from "./Toaster";
+export * from "./OtpVerificationModal";
+export * from "./PhoneInput";
+export { default as CommonButton } from "./CommonButton";
+export * from "./CommonButton";