@exotic-holidays/ui 0.1.0

package/src/base-components/Pagination.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import React from 'react';
+import { cn } from '../helpers/cn';
+
+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>
+    );
+};

package/src/base-components/PhoneInput.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import React, { useState } from 'react';
+import { usePhoneInput, defaultCountries, FlagImage, parseCountry } from 'react-international-phone';
+import 'react-international-phone/style.css';
+import { cn } from '../helpers/cn';
+import { Dropdown, DropdownItem } from './Dropdown';
+import { Search, ChevronDown } from 'lucide-react';
+
+export interface PhoneInputProps {
+    value?: string;
+    onChange: (value: string) => void;
+    label?: string;
+    error?: string;
+    isRequired?: boolean;
+    defaultCountry?: string;
+    className?: string;
+    placeholder?: string;
+    /** Leave the field empty (showing the placeholder) instead of pre-filling the dial code on mount. */
+    disableDialCodePrefill?: boolean;
+}
+
+export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
+    ({ value, onChange, label, error, isRequired, defaultCountry = 'lk', className, placeholder, disableDialCodePrefill = false, ...props }, ref) => {
+        const {
+            inputValue,
+            handlePhoneValueChange,
+            inputRef,
+            country,
+            setCountry
+        } = usePhoneInput({
+            defaultCountry,
+            value,
+            countries: defaultCountries,
+            disableDialCodePrefill,
+            onChange: (data) => {
+                const dialCode = `+${data.country.dialCode}`;
+                let newPhone = data.phone;
+
+                // If the user types a leading 0 after the dial code and then another digit,
+                // strip the leading 0 (e.g. +9407 -> +947)
+                if (newPhone.startsWith(`${dialCode}0`) && newPhone.length > dialCode.length + 1) {
+                    newPhone = newPhone.replace(`${dialCode}0`, dialCode);
+                }
+
+                onChange(newPhone);
+            }
+        });
+
+        const [searchQuery, setSearchQuery] = useState('');
+
+        const filteredCountries = defaultCountries.filter(c => {
+            const parsed = parseCountry(c);
+            const searchStr = searchQuery.toLowerCase();
+            return parsed.name.toLowerCase().includes(searchStr) ||
+                parsed.dialCode.includes(searchStr);
+        });
+
+        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={cn(
+                    "relative group flex items-center bg-surface-1 border-[1.5px] border-border-subtle rounded-[10px] pl-0 pr-2 focus-within:border-primary focus-within:bg-surface-1 transition-all h-[42px]",
+                    error && "border-danger-alt focus-within:border-danger-alt"
+                )}>
+
+                    <Dropdown
+                        contentClassName="w-[280px] p-0 flex flex-col overflow-hidden"
+                        trigger={
+                            <div className="flex items-center gap-1.5 h-[40px] px-2.5 hover:bg-surface-hover rounded-l-[8px] border-r border-transparent transition-colors cursor-pointer">
+                                <FlagImage iso2={country.iso2} size="24px" className="rounded-sm" />
+                                <ChevronDown size={14} className="text-foreground-subtle" />
+                            </div>
+                        }
+                    >
+                        <div onClick={(e) => e.stopPropagation()} className="relative border-b border-border-subtle p-2 bg-white">
+                            <Search size={14} className="absolute left-4 top-1/2 -translate-y-1/2 text-foreground-subtle" />
+                            <input
+                                type="text"
+                                placeholder="Search country or code..."
+                                value={searchQuery}
+                                onChange={(e) => setSearchQuery(e.target.value)}
+                                className="w-full bg-white border-none outline-none py-1.5 pl-8 pr-3 text-[13px] text-foreground-1 placeholder:text-foreground-disabled focus:ring-0 shadow-none"
+                                autoFocus
+                            />
+                        </div>
+                        <div className="flex-1 overflow-y-auto custom-scrollbar flex flex-col max-h-[160px] py-1 bg-white">
+                            {filteredCountries.map(c => {
+                                const parsed = parseCountry(c);
+                                return (
+                                    <DropdownItem
+                                        key={parsed.iso2}
+                                        isActive={country.iso2 === parsed.iso2}
+                                        onClick={() => {
+                                            setCountry(parsed.iso2);
+                                            setSearchQuery('');
+                                        }}
+                                        className="py-2.5 px-4 rounded-none"
+                                    >
+                                        <FlagImage iso2={parsed.iso2} size="20px" className="shrink-0 rounded-sm" />
+                                        <span className="flex-1 truncate text-[13px]">{parsed.name}</span>
+                                        <span className="text-foreground-subtle text-[12px]">+{parsed.dialCode}</span>
+                                    </DropdownItem>
+                                );
+                            })}
+                            {filteredCountries.length === 0 && (
+                                <div className="text-[13px] text-foreground-muted text-center py-4">
+                                    No countries found.
+                                </div>
+                            )}
+                        </div>
+                    </Dropdown>
+
+                    <input
+                        ref={(node) => {
+                            inputRef.current = node;
+                            if (typeof ref === 'function') ref(node);
+                            else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;
+                        }}
+                        className="flex-1 bg-white border-none outline-none py-2.5 px-2 text-[13.5px] text-foreground-1 placeholder:text-foreground-disabled focus:ring-0 shadow-none min-w-0"
+                        placeholder={placeholder}
+                        value={inputValue}
+                        onChange={handlePhoneValueChange}
+                        type="tel"
+                        {...props}
+                    />
+                </div>
+
+                {error && <span className="text-[11px] text-danger-alt font-medium">{error}</span>}
+            </div>
+        );
+    }
+);
+
+PhoneInput.displayName = 'PhoneInput';
+
+import { isValidPhoneNumber, validatePhoneNumberLength } from 'libphonenumber-js/min';
+export { isValidPhoneNumber, validatePhoneNumberLength };

package/src/base-components/PopConfirm.tsx

@@ -0,0 +1,350 @@
+'use client';
+
+import React, { useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { block, modifier } from '../helpers/bem';
+import { cn } from '../helpers/cn';
+
+export type PopConfirmPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+export interface PopConfirmProps {
+  /** Element that triggers the popover (e.g. Button) */
+  trigger: React.ReactElement<{ onClick?: (e: React.MouseEvent) => void }>;
+
+  /** Called when user confirms. Call callback() to close. setLoading controls confirm button loading state. */
+  onConfirm: (callback: () => void, setLoading: (loading: boolean) => void) => void;
+
+  /** Called when user cancels. Call callback() to close. */
+  onCancel: (callback: () => void) => void;
+
+  /** Text for the confirm button (default: 'Confirm') */
+  confirmText?: string;
+
+  /** Text for the cancel button (default: 'Cancel') */
+  cancelText?: string;
+
+  /** Title shown in the popover */
+  title?: string;
+
+  /** Body/description text shown in the popover */
+  body?: string;
+
+  /** Optional icon shown in the popover */
+  icon?: React.ReactNode;
+
+  /** Placement of the popover relative to the trigger */
+  placement?: PopConfirmPlacement;
+
+  /** BEM class name prefix (default 'aceui') */
+  prefix?: string;
+
+  /** Additional class name for the popover */
+  className?: string;
+
+  /** Additional class name for the trigger wrapper (default: 'inline-block') */
+  triggerClassName?: string;
+}
+
+const defaultConfirmText = 'Yes';
+const defaultTitleText = 'Confirmation';
+const defaultBodyText = 'Are you sure?';
+const defaultCancelText = 'Cancel';
+const defaultIcon = <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path opacity="0.12" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="currentColor"></path><path d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path></svg>
+
+export const PopConfirm = ({
+  trigger,
+  onConfirm,
+  onCancel,
+  confirmText = defaultConfirmText,
+  cancelText = defaultCancelText,
+  title = defaultTitleText,
+  body = defaultBodyText,
+  icon = defaultIcon,
+  placement = 'bottom',
+  prefix = 'aceui',
+  className,
+  triggerClassName,
+}: PopConfirmProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+    setIsLoading(false);
+  }, []);
+
+  const handleConfirm = useCallback(() => {
+    onConfirm(close, setIsLoading);
+  }, [onConfirm, close]);
+
+  const handleCancel = useCallback(() => {
+    onCancel(close);
+  }, [onCancel, close]);
+
+  const handleTriggerClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsOpen((prev) => !prev);
+    },
+    []
+  );
+
+  const triggerWithProps = React.cloneElement(trigger, {
+    onClick: (e: React.MouseEvent) => {
+      trigger.props.onClick?.(e);
+      handleTriggerClick(e);
+    },
+  });
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (
+        popoverRef.current?.contains(target) ||
+        triggerRef.current?.contains(target)
+      ) {
+        return;
+      }
+      close();
+    };
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') close();
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleEscape);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen, close]);
+
+  const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
+  const [resolvedPlacement, setResolvedPlacement] = useState<PopConfirmPlacement>(placement);
+
+  const updatePosition = useCallback(() => {
+    const triggerEl = triggerRef.current;
+    if (!triggerEl) return;
+
+    const rect = triggerEl.getBoundingClientRect();
+    const gap = 8;
+    const popoverWidth = 280;
+    const popoverHeight = 160;
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    const calcPosition = (p: PopConfirmPlacement) => {
+      let top = 0;
+      let left = 0;
+      switch (p) {
+        case 'top':
+          top = rect.top - popoverHeight - gap;
+          left = rect.left + rect.width / 2 - popoverWidth / 2;
+          break;
+        case 'bottom':
+          top = rect.bottom + gap;
+          left = rect.left + rect.width / 2 - popoverWidth / 2;
+          break;
+        case 'left':
+          top = rect.top + rect.height / 2 - popoverHeight / 2;
+          left = rect.left - popoverWidth - gap;
+          break;
+        case 'right':
+          top = rect.top + rect.height / 2 - popoverHeight / 2;
+          left = rect.right + gap;
+          break;
+      }
+      return { top, left };
+    };
+
+    const fitsInViewport = (pos: { top: number; left: number }) => {
+      return (
+        pos.top >= 0 &&
+        pos.left >= 0 &&
+        pos.top + popoverHeight <= viewportHeight &&
+        pos.left + popoverWidth <= viewportWidth
+      );
+    };
+
+    // Try preferred placement first
+    const pos = calcPosition(placement);
+    if (fitsInViewport(pos)) {
+      setResolvedPlacement(placement);
+      // Clamp left to prevent horizontal overflow
+      pos.left = Math.max(8, Math.min(pos.left, viewportWidth - popoverWidth - 8));
+      setPosition(pos);
+      return;
+    }
+
+    // Try opposite placement
+    const opposite: Record<PopConfirmPlacement, PopConfirmPlacement> = {
+      top: 'bottom', bottom: 'top', left: 'right', right: 'left',
+    };
+    const fallbackOrder: PopConfirmPlacement[] = [
+      opposite[placement],
+      ...(['top', 'bottom', 'left', 'right'] as PopConfirmPlacement[]).filter(
+        (p) => p !== placement && p !== opposite[placement]
+      ),
+    ];
+
+    for (const fallback of fallbackOrder) {
+      const fallbackPos = calcPosition(fallback);
+      if (fitsInViewport(fallbackPos)) {
+        setResolvedPlacement(fallback);
+        fallbackPos.left = Math.max(8, Math.min(fallbackPos.left, viewportWidth - popoverWidth - 8));
+        setPosition(fallbackPos);
+        return;
+      }
+    }
+
+    // None fit perfectly — use opposite and clamp
+    const finalPlacement = opposite[placement];
+    const finalPos = calcPosition(finalPlacement);
+    finalPos.top = Math.max(8, Math.min(finalPos.top, viewportHeight - popoverHeight - 8));
+    finalPos.left = Math.max(8, Math.min(finalPos.left, viewportWidth - popoverWidth - 8));
+    setResolvedPlacement(finalPlacement);
+    setPosition(finalPos);
+  }, [placement]);
+
+  useLayoutEffect(() => {
+    if (!isOpen || typeof document === 'undefined') return;
+
+    updatePosition();
+
+    const triggerEl = triggerRef.current;
+    if (!triggerEl) return;
+
+    const resizeObserver = new ResizeObserver(updatePosition);
+    resizeObserver.observe(triggerEl);
+
+    return () => resizeObserver.disconnect();
+  }, [isOpen, placement, updatePosition]);
+
+  useEffect(() => {
+    if (!isOpen) setPosition(null);
+  }, [isOpen]);
+
+  const blockClass = block(prefix, 'pop-confirm');
+  const bemClasses = [
+    blockClass,
+    modifier(prefix, 'pop-confirm', resolvedPlacement),
+  ].filter(Boolean) as string[];
+
+  const popoverContent = (
+    <AnimatePresence>
+      {isOpen && position && (
+        <>
+          <motion.div
+            className="fixed inset-0 z-[9998] bg-transparent"
+            onClick={(e) => e.stopPropagation()}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.15 }}
+            aria-hidden="true"
+          />
+          <motion.div
+            ref={popoverRef}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={title ? `${blockClass}-title` : undefined}
+            aria-describedby={body ? `${blockClass}-body` : undefined}
+            onClick={(e) => e.stopPropagation()}
+            className={cn(
+              bemClasses,
+              'fixed z-[9999] w-[280px] min-h-[80px] rounded-[12px] bg-surface-1 shadow-[0_4px_24px_rgba(0,0,0,0.12)] p-4 flex flex-col gap-3',
+              className
+            )}
+            style={{
+              top: position.top,
+              left: position.left,
+            }}
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            transition={{ duration: 0.15 }}
+          >
+            {/* Arrow pointer */}
+            <div
+              className={cn(
+                'absolute w-3 h-3 bg-surface-1 rotate-45 shadow-[0_4px_24px_rgba(0,0,0,0.12)]',
+                resolvedPlacement === 'bottom' && 'top-[-6px] left-1/2 -translate-x-1/2',
+                resolvedPlacement === 'top' && 'bottom-[-6px] left-1/2 -translate-x-1/2',
+                resolvedPlacement === 'left' && 'right-[-6px] top-1/2 -translate-y-1/2',
+                resolvedPlacement === 'right' && 'left-[-6px] top-1/2 -translate-y-1/2',
+              )}
+            />
+            {(title || body || icon) && (
+              <div className="flex gap-3">
+                {icon && (
+                  <div className="flex-shrink-0 text-primary-500 [&>svg]:w-5 [&>svg]:h-5">
+                    {icon}
+                  </div>
+                )}
+                <div className="flex-1 min-w-0">
+                  {title && (
+                    <h3
+                      id={`${blockClass}-title`}
+                      className="text-sm font-semibold text-foreground-0"
+                    >
+                      {title}
+                    </h3>
+                  )}
+                  {body && (
+                    <p
+                      id={`${blockClass}-body`}
+                      className="text-sm text-muted-foreground mt-0.5"
+                    >
+                      {body}
+                    </p>
+                  )}
+                </div>
+              </div>
+            )}
+            <div className="flex justify-end gap-2 mt-1">
+              <button
+                type="button"
+                onClick={handleCancel}
+                disabled={isLoading}
+                className="px-3 py-1.5 text-sm font-medium rounded-[8px] bg-default-100 text-default-700 hover:bg-default-200 transition-colors disabled:opacity-50 cursor-pointer"
+              >
+                {cancelText}
+              </button>
+              <button
+                type="button"
+                onClick={handleConfirm}
+                disabled={isLoading}
+                className="px-3 py-1.5 text-sm font-medium rounded-[8px] bg-primary-500 text-primary-foreground hover:bg-primary-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer inline-flex items-center gap-2"
+              >
+                {isLoading && (
+                  <span
+                    className="inline-block w-3.5 h-3.5 border-2 border-current border-r-transparent rounded-full animate-spin"
+                    aria-hidden="true"
+                  />
+                )}
+                {confirmText}
+              </button>
+            </div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+
+  return (
+    <div ref={triggerRef} className={triggerClassName || 'inline-block'}>
+      {triggerWithProps}
+      {typeof document !== 'undefined' &&
+        createPortal(popoverContent, document.body)}
+    </div>
+  );
+};
+
+PopConfirm.displayName = 'PopConfirm';

package/src/base-components/SearchPopover.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import React from 'react';
+import { Search, X } from 'lucide-react';
+import { Dropdown } from './Dropdown';
+import { Input } from './Input';
+import { Button } from './Button';
+import { cn } from '../helpers/cn';
+
+export interface SearchPopoverProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+/**
+ * Compact header search: an icon button that opens a small input popover.
+ * Once a query is set, the trigger collapses to a pill showing the term with
+ * an inline clear. Mirrors the jewelry-ui desktop search affordance.
+ */
+export function SearchPopover({ value, onChange, placeholder = 'Search…', className }: SearchPopoverProps) {
+  return (
+    <div className={cn('relative', className)}>
+      <Dropdown
+        align="right"
+        contentClassName="w-[280px] p-2"
+        trigger={
+          value ? (
+            <div className="flex items-center gap-1.5 bg-primary-50 border border-primary-200 pl-3 pr-1.5 py-1.5 rounded-full">
+              <Search size={14} className="text-primary-600 shrink-0" />
+              <span className="text-[12px] font-semibold text-primary-700 max-w-[140px] truncate">{value}</span>
+              <span
+                role="button"
+                tabIndex={0}
+                aria-label="Clear search"
+                title="Clear search"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onChange('');
+                }}
+                className="p-0.5 rounded-full text-primary-600 hover:bg-primary-100 transition-colors cursor-pointer"
+              >
+                <X size={13} />
+              </span>
+            </div>
+          ) : (
+            <Button
+              variant="flat"
+              color="default"
+              size="small"
+              ariaLabel="Search"
+              icon={<Search size={18} />}
+            />
+          )
+        }
+      >
+        <div onClick={(e) => e.stopPropagation()}>
+          <Input
+            autoFocus
+            placeholder={placeholder}
+            icon={<Search size={16} className="text-foreground-disabled" />}
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+          />
+        </div>
+      </Dropdown>
+    </div>
+  );
+}