@exotic-holidays/ui 0.1.0

package/src/components/UserMenu.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { LogOut, Sun, Moon, Monitor, ChevronUp } from 'lucide-react';
+import { useTheme, type ThemePreference } from '../base-components/ThemeProvider';
+
+const THEME_OPTIONS: { value: ThemePreference; label: string; icon: React.ReactNode }[] = [
+  { value: 'light', label: 'Light', icon: <Sun size={14} /> },
+  { value: 'dark', label: 'Dark', icon: <Moon size={14} /> },
+  { value: 'system', label: 'System', icon: <Monitor size={14} /> },
+];
+
+export interface UserMenuProps {
+  name: string;
+  role: string;
+  initials: string;
+  collapsed?: boolean;
+  headerMode?: boolean;
+  onLogout: () => void;
+}
+
+/**
+ * Sidebar-footer account menu: the trigger row opens a popover with the user
+ * identity, a Light/Dark/System theme selector and Sign Out. Prop-driven and
+ * auth-agnostic — every portal's DashboardLayout passes its own user + logout.
+ */
+export function UserMenu({ name, role, initials, collapsed = false, headerMode = false, onLogout }: UserMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const { theme, setTheme } = useTheme();
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const onClick = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) setIsOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setIsOpen(false);
+    };
+    document.addEventListener('mousedown', onClick);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onClick);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [isOpen]);
+
+  const avatar = (
+    <div className="w-9 h-9 rounded-full bg-primary-50 border border-primary-200 text-primary-700 flex items-center justify-center font-bold text-[0.7rem] select-none shrink-0">
+      {initials}
+    </div>
+  );
+
+  return (
+    <div ref={menuRef} className="relative">
+      {/* Trigger */}
+      <button
+        type="button"
+        onClick={() => setIsOpen((o) => !o)}
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+        title={collapsed ? `${name} · ${role}` : undefined}
+        className={`w-full flex items-center rounded-[10px] transition-colors cursor-pointer hover:bg-surface-hover ${isOpen ? 'bg-surface-hover' : ''
+          } ${collapsed ? 'justify-center p-1' : 'gap-2.5 px-2 py-1'}`}
+      >
+        {avatar}
+        {!collapsed && (
+          <>
+            <div className="flex-1 min-w-0 text-left leading-tight">
+              <div className="text-[12px] font-semibold text-foreground-0 truncate">{name}</div>
+              <div className="text-[11px] text-foreground-subtle truncate">{role}</div>
+            </div>
+            <ChevronUp
+              size={14}
+              className={`text-foreground-subtle transition-transform duration-200 shrink-0 ${isOpen ? 'rotate-0' : 'rotate-180'}`}
+            />
+          </>
+        )}
+      </button>
+
+      {/* Popover */}
+      {isOpen && (
+        <div
+          className={`absolute z-[60] w-[288px] bg-surface-1 border border-border-subtle rounded-xl shadow-lg py-1.5 ${collapsed
+              ? 'bottom-0 left-full ml-2'
+              : headerMode
+                ? 'top-full right-0 mt-2'
+                : 'bottom-full left-0 mb-2'
+            }`}
+        >
+          <div className="px-3.5 py-2.5 border-b border-border-subtle">
+            <div className="text-[13px] font-semibold text-foreground-0 truncate">{name}</div>
+            <div className="text-[11px] text-foreground-subtle truncate">{role}</div>
+          </div>
+
+          {/* Theme selector */}
+          <div className="px-3.5 py-2.5">
+            <div className="text-[11px] font-medium text-foreground-subtle uppercase tracking-wider mb-2">Theme</div>
+            <div className="flex items-center bg-surface-0 rounded-lg p-1 gap-0.5">
+              {THEME_OPTIONS.map((option) => (
+                <button
+                  key={option.value}
+                  type="button"
+                  onClick={() => setTheme(option.value)}
+                  title={option.label}
+                  className={`flex-1 flex items-center justify-center gap-1 py-1.5 px-1.5 rounded-md text-[11px] font-medium whitespace-nowrap transition-all duration-150 cursor-pointer ${theme === option.value
+                      ? 'bg-surface-1 text-foreground-0 shadow-sm'
+                      : 'text-foreground-muted hover:text-foreground-0'
+                    }`}
+                >
+                  {option.icon}
+                  {option.label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="mx-3 border-t border-border-subtle" />
+
+          {/* Sign out */}
+          <div className="px-1.5 py-1.5">
+            <button
+              type="button"
+              onClick={() => {
+                setIsOpen(false);
+                onLogout();
+              }}
+              className="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-[13px] font-medium text-danger-700 hover:bg-danger-50 transition-colors cursor-pointer"
+            >
+              <LogOut size={15} />
+              Sign Out
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/helpers/bem.ts

@@ -0,0 +1,13 @@
+export function block(prefix: string, name: string): string {
+  return `${prefix}-${name}`;
+}
+
+export function element(prefix: string, blockName: string, elementName: string): string {
+  return `${prefix}-${blockName}__${elementName}`;
+}
+
+export function modifier(prefix: string, name: string, modifier: string | undefined | null | boolean): string {
+  if (!modifier) return "";
+  if (typeof modifier === "boolean") return modifier ? `${prefix}-${name}--active` : "";
+  return `${prefix}-${name}--${modifier}`;
+}

package/src/helpers/cn.ts

@@ -0,0 +1,9 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Utility function to merge tailwind classes safely.
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+/**
+ * @exotic-holidays/ui — EHI Travel Platform design system (AceUI).
+ *
+ * Usage in a portal app:
+ *   import { Button, Input, Card, ListPage } from "@exotic-holidays/ui";
+ *   // globals.css:  @import "@exotic-holidays/ui/theme.css";
+ *
+ * Components are client components; consume via Next `transpilePackages: ["@exotic-holidays/ui"]`.
+ */
+export * from "./base-components";
+export * from "./components/ListPage";
+export * from "./components/UserMenu";
+export * from "./components/DashboardLayout";
+export * from "./components/QuickAccess";
+export { cn } from "./helpers/cn";
+export * as bem from "./helpers/bem";

package/src/theme.css

@@ -0,0 +1,285 @@
+/* AceUI default theme — import after tailwindcss. Customize via aceui.config.ts. */
+
+@theme {
+    /* Typography — wired to the Next font variable set in layout.tsx */
+    --font-sans: var(--font-lexend), ui-sans-serif, system-ui, sans-serif;
+
+    --color-surface-0: #f3f7f5;
+    --color-surface-1: #ffffff;
+    --color-foreground-0: #1a1a2e;
+    --color-foreground-1: #3a3f52;
+    --color-foreground-muted: #6b7588;
+    --color-foreground-subtle: #9ba3b5;
+    --color-foreground-disabled: #b0b8c8;
+
+    --color-surface-hover: #f5f8f9;
+    --color-surface-subtle: #f8fbff;
+    --color-surface-hover-table: #fcfdff;
+
+    --color-border-subtle: #e8edf0;
+    --color-border-table: #eef2f8;
+
+    --color-danger-alt: #f0607a;
+
+    --color-divider: #e3e3e6;
+    --color-focus: #006fee;
+
+    /* Text */
+    --color-text-default: #18181b;
+    --color-text-muted: #71717a;
+    --color-text-subtle: #a1a1aa;
+    --color-text-disabled: #d4d4d8;
+
+    /* Border */
+    --color-border-default: #e3e3e6;
+    --color-border-muted: #ebebec;
+    --color-border-strong: #dcdcdf;
+    --border-width-1.5: 1.5px;
+
+    /* Base semantic (default, primary, secondary, success, warning, danger) */
+    --color-default: #d4d4d8;
+    --color-default-foreground: #e8edf0;
+    --color-default-50: #fafafa;
+    --color-default-100: #f2f2f3;
+    --color-default-200: #ebebec;
+    --color-default-300: #e3e3e6;
+    --color-default-400: #dcdcdf;
+    --color-default-500: #d4d4d8;
+    --color-default-600: #afafb2;
+    --color-default-700: #8a8a8c;
+    --color-default-800: #656567;
+    --color-default-900: #404041;
+
+    /* Brand primary — EHI "Tropical Luxury" red (#C22030, hover #a51825).
+       Solid CTA text is always white (--color-primary-foreground). */
+    --color-primary: #c22030;
+    --color-primary-foreground: #ffffff;
+    --color-primary-50: #fdeaec;
+    --color-primary-100: #f9cdd1;
+    --color-primary-200: #f29aa2;
+    --color-primary-300: #e76573;
+    --color-primary-400: #d83d4e;
+    --color-primary-500: #c22030;
+    --color-primary-600: #a51825;
+    --color-primary-700: #87131e;
+    --color-primary-800: #630e16;
+    --color-primary-900: #42090f;
+
+    /* Brand accent — warm amber/gold (#f0b83f) for ratings, draft badges,
+       highlights. Dark text on solid accent (--color-accent-foreground). */
+    --color-accent: #f0b83f;
+    --color-accent-foreground: #2a1c00;
+    --color-accent-50: #fef7e7;
+    --color-accent-100: #fcebbf;
+    --color-accent-200: #f9dd93;
+    --color-accent-300: #f5cd63;
+    --color-accent-400: #f2c34d;
+    --color-accent-500: #f0b83f;
+    --color-accent-600: #d19e2f;
+    --color-accent-700: #a87c22;
+    --color-accent-800: #7a5917;
+    --color-accent-900: #4d370d;
+
+    --color-secondary: #18181b;
+    --color-secondary-foreground: #ffffff;
+    --color-secondary-50: #09090b;
+    --color-secondary-100: #0d0d10;
+    --color-secondary-200: #111114;
+    --color-secondary-300: #141417;
+    --color-secondary-400: #16161a;
+    --color-secondary-500: #18181b;
+    --color-secondary-600: #3f3f46;
+    --color-secondary-700: #52525b;
+    --color-secondary-800: #71717a;
+    --color-secondary-900: #a1a1aa;
+
+    --color-success: #17c964;
+    --color-success-foreground: #000;
+    --color-success-50: #e2f8ec;
+    --color-success-100: #b9efd1;
+    --color-success-200: #91e5b5;
+    --color-success-300: #68dc9a;
+    --color-success-400: #40d27f;
+    --color-success-500: #17c964;
+    --color-success-600: #13a653;
+    --color-success-700: #0f8341;
+    --color-success-800: #0b5f30;
+    --color-success-900: #073c1e;
+
+    --color-warning: #f5a524;
+    --color-warning-foreground: #000;
+    --color-warning-50: #fef4e4;
+    --color-warning-100: #fce4bd;
+    --color-warning-200: #fad497;
+    --color-warning-300: #f9c571;
+    --color-warning-400: #f7b54a;
+    --color-warning-500: #f5a524;
+    --color-warning-600: #ca881e;
+    --color-warning-700: #9f6b17;
+    --color-warning-800: #744e11;
+    --color-warning-900: #4a320b;
+
+    --color-danger: #f31260;
+    --color-danger-foreground: #fff;
+    --color-danger-50: #fee1eb;
+    --color-danger-100: #fbb8cf;
+    --color-danger-200: #f98eb3;
+    --color-danger-300: #f76598;
+    --color-danger-400: #f53b7c;
+    --color-danger-500: #f31260;
+    --color-danger-600: #c80f4f;
+    --color-danger-700: #9e0c3e;
+    --color-danger-800: #73092e;
+    --color-danger-900: #49051d;
+}
+
+
+/* Component defaults */
+:root {
+    --aceui-color-focus: var(--color-focus);
+    --aceui-disabled-opacity: 0.5;
+    --aceui-shadow-opacity-small: 0.2;
+    --aceui-shadow-opacity-medium: 0.4;
+    --aceui-shadow-opacity-large: 0.6;
+    --aceui-button-shadow-opacity: var(--aceui-shadow-opacity-medium);
+    --aceui-accordion-border-radius: 12px;
+    --aceui-badge-shadow-opacity: var(--aceui-shadow-opacity-medium);
+}
+
+/* Dark theme — scoped to .dark ancestor (applied on DashboardLayout wrapper) */
+.dark {
+    /* Layout surfaces */
+    --color-surface-0: #1C1D25;
+    --color-surface-1: #24252E;
+    --color-surface-hover: #2A2B35;
+    --color-surface-subtle: #21222B;
+    --color-surface-hover-table: #23242D;
+
+    /* Layout foregrounds */
+    --color-foreground-0: #E8E8EC;
+    --color-foreground-1: #BBBCC0;
+    --color-foreground-muted: #9BA3B5;
+    --color-foreground-subtle: #6B7588;
+    --color-foreground-disabled: #4A4E5C;
+
+    /* Layout borders */
+    --color-border-subtle: #2F3040;
+    --color-border-table: #2A2B38;
+
+    /* Danger alt */
+    --color-danger-alt: #f0607a;
+
+    /* Layout */
+    --color-background: #1C1D25;
+    --color-foreground: #bbbcbe;
+    --color-divider: #3b3b42;
+    --color-focus: #338EF7;
+
+    /* Text */
+    --color-text-default: #bbbcbe;
+    --color-text-muted: #a1a1aa;
+    --color-text-subtle: #71717a;
+    --color-text-disabled: #52525b;
+
+    /* Border */
+    --color-border-default: #3b3b42;
+    --color-border-muted: #27272a;
+    --color-border-strong: #52525b;
+
+    /* Base semantic */
+    --color-default: #3F3F46;
+    --color-default-foreground: #E8E8E8;
+    --color-default-50: #0A0A0B;
+    --color-default-100: #18181B;
+    --color-default-200: #27272A;
+    --color-default-300: #333338;
+    --color-default-400: #3B3B42;
+    --color-default-500: #3F3F46;
+    --color-default-600: #52525B;
+    --color-default-700: #71717A;
+    --color-default-800: #A1A1AA;
+    --color-default-900: #D4D4D8;
+
+    /* Brand primary (dark) — red ramp inverted so 900 is lightest. */
+    --color-primary: #c22030;
+    --color-primary-foreground: #ffffff;
+    --color-primary-50: #2a0608;
+    --color-primary-100: #42090f;
+    --color-primary-200: #630e16;
+    --color-primary-300: #87131e;
+    --color-primary-400: #a51825;
+    --color-primary-500: #c22030;
+    --color-primary-600: #d6404e;
+    --color-primary-700: #e36974;
+    --color-primary-800: #ee98a0;
+    --color-primary-900: #f8cace;
+
+    /* Brand accent (dark) — amber ramp inverted so 900 is lightest. */
+    --color-accent: #f0b83f;
+    --color-accent-foreground: #2a1c00;
+    --color-accent-50: #2e2207;
+    --color-accent-100: #4d370d;
+    --color-accent-200: #7a5917;
+    --color-accent-300: #a87c22;
+    --color-accent-400: #d19e2f;
+    --color-accent-500: #f0b83f;
+    --color-accent-600: #f3c662;
+    --color-accent-700: #f6d588;
+    --color-accent-800: #f9e3ae;
+    --color-accent-900: #fcf1d6;
+
+    --color-secondary: #09090b;
+    --color-secondary-foreground: #e4e4e7;
+    --color-secondary-50: #09090b;
+    --color-secondary-100: #111113;
+    --color-secondary-200: #18181b;
+    --color-secondary-300: #27272a;
+    --color-secondary-400: #3f3f46;
+    --color-secondary-500: #09090b;
+    --color-secondary-600: #52525b;
+    --color-secondary-700: #71717a;
+    --color-secondary-800: #a1a1aa;
+    --color-secondary-900: #d4d4d8;
+
+    --color-success: #17C964;
+    --color-success-foreground: #000000;
+    --color-success-50: #052814;
+    --color-success-100: #094527;
+    --color-success-200: #0E623B;
+    --color-success-300: #13804E;
+    --color-success-400: #179D61;
+    --color-success-500: #17C964;
+    --color-success-600: #45D483;
+    --color-success-700: #73DFA2;
+    --color-success-800: #A1EAC1;
+    --color-success-900: #D0F5E0;
+
+    --color-warning: #F5A524;
+    --color-warning-foreground: #000000;
+    --color-warning-50: #312107;
+    --color-warning-100: #51380C;
+    --color-warning-200: #724F11;
+    --color-warning-300: #936616;
+    --color-warning-400: #B47D1B;
+    --color-warning-500: #F5A524;
+    --color-warning-600: #F7B750;
+    --color-warning-700: #F9C97C;
+    --color-warning-800: #FBDBA8;
+    --color-warning-900: #FDEDD3;
+
+    --color-danger: #F31260;
+    --color-danger-foreground: #e3e3e4;
+    --color-danger-50: #310413;
+    --color-danger-100: #510721;
+    --color-danger-200: #720A30;
+    --color-danger-300: #930D3E;
+    --color-danger-400: #B4104D;
+    --color-danger-500: #F31260;
+    --color-danger-600: #F54180;
+    --color-danger-700: #F771A0;
+    --color-danger-800: #F9A0BF;
+    --color-danger-900: #FBD0DF;
+
+    --aceui-button-shadow-opacity: var(--aceui-shadow-opacity-small);
+    --aceui-badge-shadow-opacity: var(--aceui-shadow-opacity-small);
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "noEmit": true,
+    "baseUrl": "."
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}