@exotic-holidays/ui 0.1.0

package/src/base-components/Card.tsx

@@ -0,0 +1,250 @@
+'use client';
+
+import React from 'react';
+import { motion, HTMLMotionProps } from 'framer-motion';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { block, modifier } from '../helpers/bem';
+import { cn } from '../helpers/cn';
+
+/**
+ * Card component variants using CVA for consistent styling
+ */
+export const cardVariants = cva(
+  [
+    'flex flex-col relative overflow-hidden h-auto box-border outline-none transition-all duration-250 bg-surface-1',
+    'focus-visible:outline-2 focus-visible:outline-[var(--aceui-color-focus)] focus-visible:outline-offset-2',
+  ],
+  {
+    variants: {
+      variant: {
+        solid: 'border-none',
+        bordered: 'bg-transparent border-2',
+        flat: 'border-none',
+        shadow: 'border-none',
+      },
+      color: {
+        default: '',
+        primary: '',
+        secondary: '',
+        success: '',
+        warning: '',
+        danger: '',
+      },
+      radius: {
+        none: 'rounded-none',
+        small: 'rounded-[8px]',
+        medium: 'rounded-[14px]',
+        large: 'rounded-[20px]',
+      },
+      fullWidth: {
+        true: 'w-full',
+        false: 'w-fit',
+      },
+      isDisabled: {
+        true: 'opacity-[0.5] cursor-not-allowed pointer-events-none',
+        false: '',
+      },
+      isHoverable: {
+        true: 'hover:-translate-y-1',
+        false: '',
+      },
+      isPressable: {
+        true: 'cursor-pointer active:scale-[0.97] tap-highlight-transparent',
+        false: '',
+      },
+    },
+    compoundVariants: [
+      /* Solid */
+      { variant: 'solid', color: 'default', className: 'bg-default-500 text-default-foreground' },
+      { variant: 'solid', color: 'primary', className: 'bg-primary-500 text-primary-foreground' },
+      { variant: 'solid', color: 'secondary', className: 'bg-secondary-500 text-secondary-foreground' },
+      { variant: 'solid', color: 'success', className: 'bg-success-500 text-success-foreground' },
+      { variant: 'solid', color: 'warning', className: 'bg-warning-500 text-warning-foreground' },
+      { variant: 'solid', color: 'danger', className: 'bg-danger-500 text-danger-foreground' },
+      /* Bordered */
+      { variant: 'bordered', color: 'default', className: 'border-default-500 text-default-700' },
+      { variant: 'bordered', color: 'primary', className: 'border-primary-500 text-primary-700' },
+      { variant: 'bordered', color: 'secondary', className: 'border-secondary-500 text-secondary-700' },
+      { variant: 'bordered', color: 'success', className: 'border-success-500 text-success-700' },
+      { variant: 'bordered', color: 'warning', className: 'border-warning-500 text-warning-700' },
+      { variant: 'bordered', color: 'danger', className: 'border-danger-500 text-danger-700' },
+      /* Flat */
+      { variant: 'flat', color: 'default', className: 'bg-default-100 text-default-600' },
+      { variant: 'flat', color: 'primary', className: 'bg-primary-50 text-primary-600' },
+      { variant: 'flat', color: 'secondary', className: 'bg-secondary-50 text-secondary-600' },
+      { variant: 'flat', color: 'success', className: 'bg-success-50 text-success-600' },
+      { variant: 'flat', color: 'warning', className: 'bg-warning-50 text-warning-600' },
+      { variant: 'flat', color: 'danger', className: 'bg-danger-50 text-danger-600' },
+      /* Shadow */
+      { variant: 'shadow', color: 'default', className: 'bg-default-500 text-default-foreground' },
+      { variant: 'shadow', color: 'primary', className: 'bg-primary-500 text-primary-foreground' },
+      { variant: 'shadow', color: 'secondary', className: 'bg-secondary-500 text-secondary-foreground' },
+      { variant: 'shadow', color: 'success', className: 'bg-success-500 text-success-foreground' },
+      { variant: 'shadow', color: 'warning', className: 'bg-warning-500 text-warning-foreground' },
+      { variant: 'shadow', color: 'danger', className: 'bg-danger-500 text-danger-foreground' },
+      /* Default Hoverable styles for specific variants */
+      { isHoverable: true, variant: 'shadow', className: 'hover:shadow-lg' },
+      { isHoverable: true, variant: 'bordered', className: 'hover:bg-default-50' },
+    ],
+    defaultVariants: {
+      variant: 'shadow',
+      radius: 'medium',
+      fullWidth: false,
+      isDisabled: false,
+      isHoverable: false,
+      isPressable: false,
+    },
+  }
+);
+
+export interface CardProps extends Omit<HTMLMotionProps<'div'>, 'color'>, VariantProps<typeof cardVariants> {
+  /** BEM class name prefix (default 'aceui') */
+  prefix?: string;
+  /** Test ID for testing */
+  testId?: string;
+}
+
+/**
+ * Card component for content organization and visual grouping
+ *
+ * Supports various variants, colors, and interactive states.
+ *
+ * @example
+ * ```tsx
+ * <Card isHoverable variant="shadow">
+ *   <CardHeader>Header</CardHeader>
+ *   <CardBody>Body content goes here</CardBody>
+ *   <CardFooter>Footer content</CardFooter>
+ * </Card>
+ * ```
+ */
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  (
+    {
+      children,
+      variant = 'shadow',
+      color,
+      radius = 'medium',
+      fullWidth = false,
+      isDisabled = false,
+      isHoverable = false,
+      isPressable = false,
+      className,
+      prefix = 'aceui',
+      testId,
+      ...props
+    },
+    ref
+  ) => {
+    const blockClass = block(prefix, 'card');
+    const bemClasses = [
+      blockClass,
+      modifier(prefix, 'card', variant!),
+      color && modifier(prefix, 'card', color),
+      modifier(prefix, 'card', radius!),
+      fullWidth && modifier(prefix, 'card', 'full-width'),
+      isDisabled && modifier(prefix, 'card', 'disabled'),
+      isHoverable && modifier(prefix, 'card', 'hoverable'),
+      isPressable && modifier(prefix, 'card', 'pressable'),
+    ].filter(Boolean) as string[];
+
+    const shadowStyle =
+      variant === 'shadow'
+        ? {
+          boxShadow: color
+            ? `0 10px 20px -5px color-mix(in srgb, var(--color-${color}-500) 20%, transparent)`
+            : '0 10px 20px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+        }
+        : undefined;
+
+    return (
+      <motion.div
+        ref={ref as any}
+        className={cn(
+          bemClasses,
+          cardVariants({
+            variant,
+            color,
+            radius,
+            fullWidth,
+            isDisabled,
+            isHoverable,
+            isPressable,
+          }),
+          className
+        )}
+        style={{ ...shadowStyle, ...props.style }}
+        data-testid={testId}
+        whileTap={isPressable ? { scale: 0.98 } : undefined}
+        {...props}
+      >
+        {children}
+      </motion.div>
+    );
+  }
+);
+
+Card.displayName = 'Card';
+
+// --- Card Header ---
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  prefix?: string;
+}
+
+export const CardHeader = ({ children, className, prefix = 'aceui', ...props }: CardHeaderProps) => {
+  return (
+    <div
+      className={cn(
+        block(prefix, 'card-header'),
+        'flex p-4 w-full justify-start items-center shrink-0 overflow-inherit color-inherit subpixel-antialiased z-10',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+CardHeader.displayName = 'CardHeader';
+
+// --- Card Body ---
+export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  prefix?: string;
+}
+
+export const CardBody = ({ children, className, prefix = 'aceui', ...props }: CardBodyProps) => {
+  return (
+    <div
+      className={cn(
+        block(prefix, 'card-body'),
+        'flex flex-auto flex-col place-content-inherit align-items-inherit h-auto break-words text-left overflow-y-auto p-4 z-10',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+CardBody.displayName = 'CardBody';
+
+// --- Card Footer ---
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  prefix?: string;
+}
+
+export const CardFooter = ({ children, className, prefix = 'aceui', ...props }: CardFooterProps) => {
+  return (
+    <div
+      className={cn(
+        block(prefix, 'card-footer'),
+        'flex p-4 h-auto w-full items-center overflow-hidden color-inherit subpixel-antialiased z-10',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+CardFooter.displayName = 'CardFooter';

package/src/base-components/Checkbox.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import React from 'react';
+import { cn } from '../helpers/cn';
+import { Check, Minus } from 'lucide-react';
+
+export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: React.ReactNode;
+    indeterminate?: boolean;
+}
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+    ({ label, className, indeterminate, ...props }, ref) => {
+        return (
+            <label className={cn("flex items-center gap-2.5 cursor-pointer select-none group", className)}>
+                <div className="relative flex items-center justify-center">
+                    <input
+                        ref={ref}
+                        type="checkbox"
+                        className="peer sr-only"
+                        {...props}
+                    />
+                    <div className={cn(
+                        "w-5 h-5 bg-surface-0 border-2 border-border-subtle rounded-md transition-all peer-checked:bg-primary peer-checked:border-primary peer-focus-visible:ring-2 peer-focus-visible:ring-primary/30 group-hover:border-primary/50 peer-disabled:opacity-50 peer-disabled:bg-surface-1 peer-disabled:border-border-default peer-disabled:cursor-not-allowed",
+                        indeterminate && "bg-primary border-primary"
+                    )} />
+                    {indeterminate ? (
+                        <Minus
+                            className="absolute text-white w-3.5 h-3.5 transition-opacity pointer-events-none"
+                            strokeWidth={4}
+                        />
+                    ) : (
+                        <Check
+                            className="absolute text-white w-3.5 h-3.5 opacity-0 peer-checked:opacity-100 transition-opacity pointer-events-none"
+                            strokeWidth={4}
+                        />
+                    )}
+                </div>
+                {label && (
+                    <span className="text-[13px] font-medium text-foreground-1 leading-tight peer-disabled:text-foreground-disabled">
+                        {label}
+                    </span>
+                )}
+            </label>
+        );
+    }
+);
+
+Checkbox.displayName = 'Checkbox';

package/src/base-components/ChipInput.tsx

@@ -0,0 +1,208 @@
+'use client';
+
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { X } from 'lucide-react';
+import { cn } from '../helpers/cn';
+
+export interface ChipInputProps {
+    /** Current list of chips */
+    value: string[];
+    /** Called when the list changes */
+    onChange: (chips: string[]) => void;
+    /** Placeholder for the input */
+    placeholder?: string;
+    /** Async function to fetch suggestions */
+    onSuggest?: (query: string) => Promise<string[]>;
+    /** Label above the input */
+    label?: string;
+    /** Error message */
+    error?: string;
+    /** Whether field is disabled */
+    disabled?: boolean;
+    /** Whether field is required */
+    isRequired?: boolean;
+    /** CSS class name */
+    className?: string;
+}
+
+export const ChipInput = ({
+    value,
+    onChange,
+    placeholder = 'Type and press Enter...',
+    onSuggest,
+    label,
+    error,
+    disabled = false,
+    isRequired = false,
+    className,
+}: ChipInputProps) => {
+    const [inputValue, setInputValue] = useState('');
+    const [suggestions, setSuggestions] = useState<string[]>([]);
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [activeSuggestionIndex, setActiveSuggestionIndex] = useState(-1);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const debounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+    // Fetch suggestions on input change
+    const fetchSuggestions = useCallback(async (query: string) => {
+        if (!onSuggest || query.length === 0) {
+            setSuggestions([]);
+            setShowSuggestions(false);
+            return;
+        }
+
+        try {
+            const results = await onSuggest(query);
+            // Filter out already-selected chips
+            const filtered = results.filter(s => !value.includes(s));
+            setSuggestions(filtered);
+            setShowSuggestions(filtered.length > 0);
+            setActiveSuggestionIndex(-1);
+        } catch {
+            setSuggestions([]);
+            setShowSuggestions(false);
+        }
+    }, [onSuggest, value]);
+
+    useEffect(() => {
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+
+        if (inputValue.trim().length >= 1) {
+            debounceRef.current = setTimeout(() => {
+                fetchSuggestions(inputValue.trim());
+            }, 250);
+        } else {
+            setSuggestions([]);
+            setShowSuggestions(false);
+        }
+
+        return () => {
+            if (debounceRef.current) clearTimeout(debounceRef.current);
+        };
+    }, [inputValue, fetchSuggestions]);
+
+    // Close suggestions on outside click
+    useEffect(() => {
+        const handleClickOutside = (e: MouseEvent) => {
+            if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+                setShowSuggestions(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    const addChip = (text: string) => {
+        const trimmed = text.trim();
+        if (!trimmed || value.includes(trimmed)) return;
+        onChange([...value, trimmed]);
+        setInputValue('');
+        setSuggestions([]);
+        setShowSuggestions(false);
+        setActiveSuggestionIndex(-1);
+    };
+
+    const removeChip = (index: number) => {
+        onChange(value.filter((_, i) => i !== index));
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter' || e.key === ',') {
+            e.preventDefault();
+            if (activeSuggestionIndex >= 0 && activeSuggestionIndex < suggestions.length) {
+                addChip(suggestions[activeSuggestionIndex]);
+            } else if (inputValue.trim()) {
+                addChip(inputValue);
+            }
+        } else if (e.key === 'Backspace' && !inputValue && value.length > 0) {
+            removeChip(value.length - 1);
+        } else if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setActiveSuggestionIndex(prev =>
+                prev < suggestions.length - 1 ? prev + 1 : prev
+            );
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setActiveSuggestionIndex(prev => (prev > 0 ? prev - 1 : -1));
+        } else if (e.key === 'Escape') {
+            setShowSuggestions(false);
+            setActiveSuggestionIndex(-1);
+        }
+    };
+
+    return (
+        <div className={cn('flex flex-col gap-1.5', className)} ref={containerRef}>
+            {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={cn(
+                    'flex flex-wrap items-center gap-1.5 px-3 py-2 rounded-[10px] border bg-surface-0 transition-colors min-h-[42px] cursor-text',
+                    error ? 'border-danger-alt focus-within:border-danger-alt' : 'border-border-default focus-within:border-primary-500',
+                    disabled && 'opacity-50 pointer-events-none'
+                )}
+                onClick={() => inputRef.current?.focus()}
+            >
+                {value.map((chip, index) => (
+                    <span
+                        key={`${chip}-${index}`}
+                        className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-primary-100 text-primary-700 text-[12px] font-medium"
+                    >
+                        {chip}
+                        <button
+                            type="button"
+                            onClick={(e) => { e.stopPropagation(); removeChip(index); }}
+                            className="inline-flex items-center justify-center w-4 h-4 rounded-full hover:bg-primary-200 transition-colors cursor-pointer"
+                            aria-label={`Remove ${chip}`}
+                        >
+                            <X size={10} />
+                        </button>
+                    </span>
+                ))}
+                <input
+                    ref={inputRef}
+                    type="text"
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder={value.length === 0 ? placeholder : ''}
+                    disabled={disabled}
+                    className="flex-1 min-w-[120px] bg-transparent border-none outline-none text-[14px] text-foreground-0 placeholder:text-foreground-disabled"
+                    autoComplete="off"
+                />
+            </div>
+
+            {/* Suggestions dropdown */}
+            {showSuggestions && suggestions.length > 0 && (
+                <div className="relative z-50">
+                    <div className="absolute top-0 left-0 right-0 bg-surface-1 border border-border-default rounded-[10px] shadow-lg max-h-[200px] overflow-y-auto">
+                        {suggestions.map((suggestion, index) => (
+                            <button
+                                key={suggestion}
+                                type="button"
+                                className={cn(
+                                    'w-full text-left px-3 py-2 text-[13px] transition-colors cursor-pointer',
+                                    index === activeSuggestionIndex
+                                        ? 'bg-primary-50 text-primary-700'
+                                        : 'text-foreground-0 hover:bg-surface-hover'
+                                )}
+                                onMouseDown={(e) => { e.preventDefault(); addChip(suggestion); }}
+                            >
+                                {suggestion}
+                            </button>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            {error && (
+                <span className="text-[11px] text-danger-alt font-medium">{error}</span>
+            )}
+        </div>
+    );
+};
+
+ChipInput.displayName = 'ChipInput';

package/src/base-components/CommonButton.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Button, ButtonProps } from './Button';
+
+export interface CommonButtonProps extends Omit<ButtonProps, 'variant' | 'color' | 'type'> {
+  type?: 'primary' | 'secondary' | 'primary-inline';
+  htmlType?: ButtonProps['type'];
+}
+
+export default function CommonButton({
+  type = 'primary',
+  htmlType = 'button',
+  ...props
+}: CommonButtonProps) {
+  let variant: ButtonProps['variant'] = 'solid';
+  let color: ButtonProps['color'] = 'primary';
+
+  switch (type) {
+    case 'primary':
+      variant = 'solid';
+      color = 'primary';
+      break;
+    case 'secondary':
+      variant = 'bordered';
+      color = 'primary';
+      break;
+    case 'primary-inline':
+      variant = 'flat'; // Flat removes background but keeps the primary text color
+      color = 'primary';
+      break;
+  }
+
+  return <Button variant={variant} color={color} type={htmlType} {...props} />;
+}

package/src/base-components/DataTable.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import React from 'react';
+import { Table, THeader, TBody, TRow, TCell, TLoader } from './Table';
+import { EmptyState } from './EmptyState';
+import { cn } from '../helpers/cn';
+
+export interface ColumnDef<T> {
+  /** The header title or element for this column */
+  header: React.ReactNode;
+  /** The cell content renderer. */
+  cell: (row: T) => React.ReactNode;
+  /** Optional class name to apply to the header cell (e.g., text alignment, whitespace-nowrap) */
+  headerClassName?: string;
+  /** Optional class name to apply to the data cell (e.g., text alignment, whitespace-nowrap) */
+  cellClassName?: string;
+}
+
+export interface DataTableProps<T> {
+  /** Column definitions */
+  columns: ColumnDef<T>[];
+  /** Array of data rows */
+  data: T[];
+  /** Function to extract a unique key for each row */
+  keyExtractor: (row: T) => string;
+  /** True if data is currently loading */
+  isLoading?: boolean;
+  /** Message to display when there are no data rows */
+  emptyMessage?: string;
+  /** Number of skeleton rows to show while loading. Defaults to 6. */
+  loadingRows?: number;
+  /** Optional click handler for a row */
+  onRowClick?: (row: T) => void;
+  /** Wrapper class name */
+  className?: string;
+}
+
+export function DataTable<T>({
+  columns,
+  data,
+  keyExtractor,
+  isLoading = false,
+  emptyMessage = 'No results match.',
+  loadingRows = 6,
+  onRowClick,
+  className,
+}: DataTableProps<T>) {
+  return (
+    <Table className={className}>
+      <THeader>
+        <TRow>
+          {columns.map((col, idx) => (
+            <TCell key={idx} isHeader className={col.headerClassName}>
+              {col.header}
+            </TCell>
+          ))}
+        </TRow>
+      </THeader>
+      <TBody>
+        {isLoading ? (
+          <TLoader rows={loadingRows} cols={columns.length} />
+        ) : data.length === 0 ? (
+          <TRow>
+            <TCell colSpan={columns.length} className="py-20 text-center">
+              <EmptyState message={emptyMessage} />
+            </TCell>
+          </TRow>
+        ) : (
+          data.map((row) => (
+            <TRow key={keyExtractor(row)} onClick={onRowClick ? () => onRowClick(row) : undefined}>
+              {columns.map((col, idx) => (
+                <TCell key={idx} className={col.cellClassName}>
+                  {col.cell(row)}
+                </TCell>
+              ))}
+            </TRow>
+          ))
+        )}
+      </TBody>
+    </Table>
+  );
+}