@exotic-holidays/ui 0.1.0

package/src/base-components/Divider.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { block, modifier } from '../helpers/bem';
+import { cn } from '../helpers/cn';
+
+/**
+ * Divider component props interface
+ */
+export interface DividerProps {
+  /** Orientation of the divider */
+  orientation?: 'horizontal' | 'vertical';
+
+  /** Additional CSS class names */
+  className?: string;
+
+  /** BEM class name prefix (default 'aceui'). Usually set via AceUIProvider when using @aceuidev/core. */
+  prefix?: string;
+
+  /** Accessible label for screen readers */
+  ariaLabel?: string;
+
+  /** Test ID for testing */
+  testId?: string;
+}
+
+const orientationStyles = {
+  horizontal: 'w-full h-0 border-t border-solid border-border-default',
+  vertical: 'w-0 min-h-4 h-full border-l border-solid border-border-default self-stretch',
+} as const;
+
+/**
+ * Divider component for separating content with horizontal or vertical lines
+ *
+ * @example
+ * ```tsx
+ * <Divider />
+ * <Divider orientation="vertical" />
+ * ```
+ */
+export const Divider = ({
+  orientation = 'horizontal',
+  className,
+  prefix = 'aceui',
+  ariaLabel,
+  testId,
+}: DividerProps) => {
+  const blockClass = block(prefix, 'divider');
+  const bemClasses = [
+    blockClass,
+    modifier(prefix, 'divider', orientation),
+  ].filter(Boolean) as string[];
+
+  const classes = cn(
+    bemClasses,
+    'border-none m-0 shrink-0 box-border',
+    orientationStyles[orientation],
+    className,
+  );
+
+  if (orientation === 'horizontal') {
+    return (
+      <hr
+        role="separator"
+        className={classes}
+        aria-label={ariaLabel}
+        data-testid={testId}
+      />
+    );
+  }
+
+  return (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      className={classes}
+      aria-label={ariaLabel}
+      data-testid={testId}
+    />
+  );
+};
+
+Divider.displayName = 'Divider';

package/src/base-components/Dropdown.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import React, { useState, useRef, useEffect, ReactNode } from 'react';
+import { cn } from '../helpers/cn';
+
+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 dropdownRef = useRef<HTMLDivElement>(null);
+
+    const toggleDropdown = () => 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;
+            }
+
+            if (dropdownRef.current && !dropdownRef.current.contains(target as Node)) {
+                setIsOpen(false);
+            }
+        };
+
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+
+    return (
+        <div ref={dropdownRef} className={cn("relative inline-block text-left", className)}>
+            <div onClick={toggleDropdown} className="cursor-pointer">
+                {trigger}
+            </div>
+
+            {isOpen && (
+                <div
+                    className={cn(
+                        "absolute z-50 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",
+                        align === 'right' ? 'right-0' : 'left-0',
+                        contentClassName
+                    )}
+                    onClick={closeDropdown}
+                >
+                    {children}
+                </div>
+            )}
+        </div>
+    );
+}
+
+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/base-components/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/base-components/FilterPopover.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import React from 'react';
+import { SlidersHorizontal } from 'lucide-react';
+import { Dropdown } from './Dropdown';
+import { Button } from './Button';
+import { cn } from '../helpers/cn';
+
+export interface FilterPopoverProps {
+  /** Filter controls (typically Select components). */
+  children: React.ReactNode;
+  /** Show the active-filter indicator dot. */
+  active?: boolean;
+  label?: string;
+  className?: string;
+}
+
+/**
+ * Compact header filter: an icon button that opens a popover of filter
+ * controls, with a dot indicator when any filter is applied. Mirrors the
+ * jewelry-ui desktop filter affordance.
+ */
+export function FilterPopover({ children, active = false, label = 'Filters', className }: FilterPopoverProps) {
+  return (
+    <div className={cn('relative', className)}>
+      <Dropdown
+        align="right"
+        contentClassName="w-[264px] p-3"
+        trigger={
+          <div className="relative">
+            <Button
+              variant="flat"
+              color="default"
+              size="small"
+              ariaLabel={label}
+              icon={<SlidersHorizontal size={18} />}
+            />
+            {active && (
+              <span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-primary-500 rounded-full ring-2 ring-surface-1" />
+            )}
+          </div>
+        }
+      >
+        <div onClick={(e) => e.stopPropagation()} className="flex flex-col gap-3">
+          {children}
+        </div>
+      </Dropdown>
+    </div>
+  );
+}

package/src/base-components/Input.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import React, { useState } from 'react';
+import { cn } from '../helpers/cn';
+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-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-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-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",
+                            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/base-components/Modal.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X } from 'lucide-react';
+import { cn } from '../helpers/cn';
+
+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';
+    hideHeader?: boolean;
+    closeOnBackdropClick?: boolean;
+}
+
+export const Modal = ({ isOpen, onClose, title, children, className, footer, backdrop = 'opaque', size = 'sm', hideHeader = false, closeOnBackdropClick = true }: 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]',
+    };
+
+    if (typeof document === 'undefined') return null;
+
+    return createPortal(
+        <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={closeOnBackdropClick ? onClose : undefined}
+                        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 }}
+                        onClick={(e) => e.stopPropagation()}
+                        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] max-h-[90vh]",
+                            sizeClasses[size],
+                            className
+                        )}
+                    >
+                        {/* Header */}
+                        {!hideHeader && (
+                            <div className="flex items-center justify-between px-5 py-4">
+                                <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 py-5"
+                        )}>
+                            {children}
+                        </div>
+
+                        {/* Footer */}
+                        {footer && (
+                            <div className="px-5 py-6 bg-surface-1 flex flex-col-reverse sm:flex-row justify-end gap-2 sm:gap-3">
+                                {footer}
+                            </div>
+                        )}
+                    </motion.div>
+                </div>
+            )}
+        </AnimatePresence>,
+        document.body
+    );
+};

package/src/base-components/OtpVerificationModal.tsx

@@ -0,0 +1,251 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { Modal } from './Modal';
+import { Button } from './Button';
+import { cn } from '../helpers/cn';
+import { Mail, MessageCircle } from 'lucide-react';
+
+export interface OtpVerificationModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    target: string;
+    onVerify: (otp: string) => Promise<boolean | string>;
+    targetType?: 'email' | 'whatsapp' | 'phone';
+    className?: string;
+    backdrop?: 'transparent' | 'opaque' | 'blur';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+    /** Minutes the OTP stays valid for; drives the countdown shown below the input. */
+    expiryMinutes?: number;
+    /** Overrides the default "Check your email" / "Check your WhatsApp" heading. */
+    title?: string;
+    /** Overrides the default description paragraph below the heading. */
+    description?: React.ReactNode;
+    /** Called when the user clicks "resend" after the OTP has expired. */
+    onResend?: () => void;
+    /** Epoch ms when the current OTP was sent. Used so the countdown survives the modal being closed and reopened. Defaults to the moment the modal opens. */
+    sentAt?: number;
+    /** Brand color driving the digit boxes, resend link and verify button. Defaults to 'warning' (the hotel back-office theme). */
+    color?: 'warning' | 'primary';
+    /** Short status text shown above the OTP boxes, e.g. "An OTP was already sent. Please check your inbox." */
+    infoMessage?: React.ReactNode;
+    /** Externally-controlled error (e.g. a failed send/resend call) shown in the same slot as the verify error, below the OTP boxes. */
+    errorMessage?: string | null;
+}
+
+const COLOR_CLASSES = {
+    warning: {
+        inputBorder: 'border-warning-100 focus:border-warning',
+        resendText: 'text-warning-400',
+        verifyButton: '!bg-warning hover:!bg-warning !border-none !shadow-none font-semibold text-[15px]',
+    },
+    primary: {
+        inputBorder: 'border-primary-100 focus:border-primary',
+        resendText: 'text-primary-400',
+        verifyButton: '!bg-primary hover:!bg-primary-600 !border-none !shadow-none font-semibold text-[15px]',
+    },
+} as const;
+
+export const OtpVerificationModal = ({ isOpen, onClose, target, onVerify, targetType = 'email', className, backdrop = 'opaque', size = 'xs', expiryMinutes = 5, title, description, onResend, sentAt, color = 'warning', infoMessage, errorMessage }: OtpVerificationModalProps) => {
+    const [otp, setOtp] = useState<string[]>(Array(6).fill(''));
+    const [error, setError] = useState('');
+    const displayError = error || errorMessage || '';
+    const [isVerifying, setIsVerifying] = useState(false);
+    const [secondsLeft, setSecondsLeft] = useState(expiryMinutes * 60);
+    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+    useEffect(() => {
+        if (!isOpen) return;
+
+        const computeSecondsLeft = () => {
+            const startedAt = sentAt ?? Date.now();
+            const elapsed = Math.floor((Date.now() - startedAt) / 1000);
+            return Math.max(0, expiryMinutes * 60 - elapsed);
+        };
+
+        setSecondsLeft(computeSecondsLeft());
+        const interval = setInterval(() => {
+            setSecondsLeft(computeSecondsLeft());
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }, [isOpen, expiryMinutes, sentAt]);
+
+    const isExpired = secondsLeft <= 0;
+    const countdownLabel = `${Math.floor(secondsLeft / 60)}:${String(secondsLeft % 60).padStart(2, '0')}`;
+
+    const handleOtpChange = (index: number, value: string) => {
+        if (value && !/^[0-9]+$/.test(value)) return;
+
+        if (value.length > 1) {
+            const pastedDigits = value.slice(0, 6).split('');
+            const newOtp = [...otp];
+            pastedDigits.forEach((digit, i) => {
+                if (index + i < 6) {
+                    newOtp[index + i] = digit;
+                }
+            });
+            setOtp(newOtp);
+            setError('');
+
+            const nextIndex = Math.min(index + pastedDigits.length, 5);
+            inputRefs.current[nextIndex]?.focus();
+            return;
+        }
+
+        const newOtp = [...otp];
+        newOtp[index] = value;
+        setOtp(newOtp);
+        setError('');
+
+        if (value && index < 5) {
+            inputRefs.current[index + 1]?.focus();
+        }
+    };
+
+    const handleKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Backspace' && !otp[index] && index > 0) {
+            inputRefs.current[index - 1]?.focus();
+        }
+    };
+
+    const handleVerify = async () => {
+        const otpString = otp.join('');
+        if (otpString.length < 6) {
+            setError('Please enter a valid 6-digit OTP');
+            return;
+        }
+
+        setIsVerifying(true);
+        setError('');
+
+        try {
+            const result = await onVerify(otpString);
+            if (result === true) {
+                setOtp(Array(6).fill(''));
+                onClose();
+            } else if (typeof result === 'string') {
+                setError(result);
+            } else {
+                setError('Verification failed. Please try again.');
+            }
+        } catch (err) {
+            setError('An error occurred during verification.');
+        } finally {
+            setIsVerifying(false);
+        }
+    };
+
+    const handleClose = () => {
+        setOtp(Array(6).fill(''));
+        setError('');
+        onClose();
+    };
+
+    const isWhatsApp = targetType === 'whatsapp' || targetType === 'phone';
+    const titleText = title ?? (isWhatsApp ? 'Check your WhatsApp' : 'Check your email');
+    const verifyButtonText = isWhatsApp ? 'Verify' : 'Verify';
+    const IconComponent = isWhatsApp ? MessageCircle : Mail;
+
+    const handleResend = () => {
+        setSecondsLeft(expiryMinutes * 60);
+        onResend?.();
+    };
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            onClose={handleClose}
+            size={size}
+            backdrop={backdrop}
+            className={className}
+            hideHeader={true}
+            closeOnBackdropClick={false}
+        >
+            <div className="flex flex-col items-center text-center pt-4 pb-0 px-2">
+                {/* <div className="w-14 h-14 rounded-full bg-primary-50 text-focus flex items-center justify-center mb-5">
+                    <IconComponent size={28} strokeWidth={2.5} />
+                </div> */}
+
+                <h3 className="text-[22px] font-bold text-foreground-0 mb-2 tracking-tight">
+                    {titleText}
+                </h3>
+
+                <p className="text-[14px] text-foreground-subtle leading-relaxed mb-6">
+                    {description ?? (
+                        <>
+                            Enter the verification code sent to <br />
+                            <strong className="text-foreground-0 font-semibold">{target}</strong>
+                        </>
+                    )}
+                </p>
+
+                {infoMessage && (
+                    <p className="text-[12.5px] font-medium -mt-4 mb-5 text-warning-600">
+                        {infoMessage}
+                    </p>
+                )}
+
+                <div className="flex gap-2 justify-center mb-3 w-full">
+                    {otp.map((digit, index) => (
+                        <input
+                            key={index}
+                            ref={(el) => {
+                                inputRefs.current[index] = el;
+                            }}
+                            type="text"
+                            inputMode="numeric"
+                            maxLength={6}
+                            value={digit}
+                            onChange={(e) => handleOtpChange(index, e.target.value)}
+                            onKeyDown={(e) => handleKeyDown(index, e)}
+                            className={cn(
+                                "w-11 h-14 bg-surface-1 border-[1.5px] rounded-[10px] text-center text-[22px] font-semibold text-foreground-0 outline-none transition-all focus:bg-surface-1",
+                                displayError ? "border-danger-alt focus:border-danger-alt" : COLOR_CLASSES[color].inputBorder
+                            )}
+                            placeholder={digit === '' ? '·' : ''}
+                        />
+                    ))}
+                </div>
+
+                {displayError && <span className="text-[12px] text-danger-alt font-medium mb-2">{displayError}</span>}
+
+                <div className="text-[13.5px] text-foreground-subtle font-medium mb-4">
+                    Didn't get a code?{' '}
+                    {isExpired ? (
+                        <button type="button" onClick={handleResend} className={cn(COLOR_CLASSES[color].resendText, "hover:underline font-semibold transition-all")}>
+                            resend
+                        </button>
+                    ) : (
+                        <span className={cn(COLOR_CLASSES[color].resendText, "font-semibold opacity-70 cursor-not-allowed")}>
+                            resend in {countdownLabel}
+                        </span>
+                    )}
+                </div>
+
+                <Button
+                    color={color}
+                    size="large"
+                    width="100%"
+                    isLoading={isVerifying}
+                    isDisabled={isExpired || otp.join('').length < 6}
+                    onClick={handleVerify}
+                    className={COLOR_CLASSES[color].verifyButton + ' ' + 'rounded-xl'}
+                >
+                    {verifyButtonText}
+                </Button>
+                <Button
+                    variant="flat"
+                    size="large"
+                    type="button"
+                    onClick={handleClose}
+                    isDisabled={false}
+                    color={color}
+                    className="!bg-transparent hover:!bg-transparent hover:underline !border-none !shadow-none !py-0 !font-light !text-[13.5px]"
+                >
+                    Cancel
+                </Button>
+            </div>
+        </Modal>
+    );
+};