@homlista-devs/ui 1.6.2 → 1.6.3

package/dist/index.css

@@ -14,6 +14,7 @@
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-purple-500: oklch(62.7% 0.265 303.9);
     --color-gray-50: oklch(98.5% 0.002 247.839);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-900: oklch(21% 0.034 264.665);
@@ -1808,6 +1809,13 @@
       }
     }
   }
+  .hover\:bg-gray-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-100);
+      }
+    }
+  }
   .hover\:bg-primary\/90 {
     &:hover {
       @media (hover: hover) {
@@ -1863,6 +1871,16 @@
       }
     }
   }
+  .hover\:text-white\/80 {
+    &:hover {
+      @media (hover: hover) {
+        color: color-mix(in srgb, #fff 80%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--color-white) 80%, transparent);
+        }
+      }
+    }
+  }
   .hover\:text-zinc-600 {
     &:hover {
       @media (hover: hover) {

package/dist/types/widgets/header/index.d.ts

@@ -2,8 +2,8 @@
  * Header Widget
  * @module widgets/header
  *
- * Minimal pill-navigation header component for web applications.
- * Features centered pill-shaped navigation with dividers.
+ * Multi-variant header component for web applications.
+ * Supports minimal (pill navigation), modern (transparent navigation), and luxury (minimalist) variants.
  *
  * IMPORTANT: Always use Tailwind CSS standard classes instead of hardcoded values.
  *
@@ -11,16 +11,35 @@
  * ```tsx
  * import { Header } from '@homlista-devs/ui';
  *
+ * // Minimal variant (default)
  * <Header
+ *   variant="minimal"
  *   logo="BRAND NAME"
  *   navigationItems={[
- *     { label: "Home", href: "/" },
- *     { label: "About", href: "/about" },
+ *     { id: "home", label: "Home", href: "/" },
+ *     { id: "about", label: "About", href: "/about" },
  *   ]}
  *   loginButtonText="Sign In"
  * />
+ *
+ * // Modern variant
+ * <Header
+ *   variant="modern"
+ *   logo="BRAND NAME"
+ * />
+ *
+ * // Luxury variant
+ * <Header
+ *   variant="luxury"
+ *   logo="YLSE SALGADO"
+ *   navigationItems={[
+ *     { id: "acerca", label: "ACERCA DE", href: "#acerca" },
+ *     { id: "propiedades", label: "PROPIEDADES", href: "#propiedades" },
+ *   ]}
+ * />
  * ```
  */
-export type { HeaderProps } from "./ui/header";
+export type { HeaderModel, HeaderProps, HeaderVariant, NavigationItem, } from "./model";
+export { createHeaderModel } from "./model";
 export { Header } from "./ui/header";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/widgets/header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/widgets/header/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/widgets/header/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,YAAY,EACX,WAAW,EACX,WAAW,EACX,aAAa,EACb,cAAc,GACd,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}

package/dist/types/widgets/header/model/create-header-model.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Header Widget - Model Creation
+ * @module widgets/header/model
+ */
+import type { HeaderModel, HeaderProps } from "./types";
+/**
+ * Creates a normalized header model with defaults applied
+ *
+ * @param props - Header configuration props
+ * @returns Normalized header model
+ */
+export declare function createHeaderModel(props: Pick<HeaderProps, "variant" | "logo" | "navigationItems" | "loginButtonText" | "showMobileMenu">): HeaderModel;
+//# sourceMappingURL=create-header-model.d.ts.map

package/dist/types/widgets/header/model/create-header-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-header-model.d.ts","sourceRoot":"","sources":["../../../../../src/widgets/header/model/create-header-model.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAExD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAChC,KAAK,EAAE,IAAI,CACV,WAAW,EACT,SAAS,GACT,MAAM,GACN,iBAAiB,GACjB,iBAAiB,GACjB,gBAAgB,CAClB,GACC,WAAW,CAQb"}

package/dist/types/widgets/header/model/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Header Widget - Model Layer
+ * @module widgets/header/model
+ */
+export { createHeaderModel } from "./create-header-model";
+export type { HeaderModel, HeaderProps, HeaderVariant, NavigationItem, } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/widgets/header/model/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/widgets/header/model/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,YAAY,EACX,WAAW,EACX,WAAW,EACX,aAAa,EACb,cAAc,GACd,MAAM,SAAS,CAAC"}

package/dist/types/widgets/header/model/types.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Header Widget - Type Definitions
+ * @module widgets/header/model/types
+ */
+import type { ReactNode } from "react";
+/**
+ * Navigation item configuration
+ */
+export interface NavigationItem {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Link URL */
+    href: string;
+}
+/**
+ * Template variant affecting layout and styling
+ */
+export type HeaderVariant = "minimal" | "modern" | "luxury";
+/**
+ * Header component props
+ */
+export interface HeaderProps {
+    /** Template variant */
+    variant?: HeaderVariant;
+    /** Logo text or element */
+    logo?: ReactNode;
+    /** Navigation items array */
+    navigationItems?: NavigationItem[];
+    /** Optional login button text */
+    loginButtonText?: string;
+    /** Show mobile menu */
+    showMobileMenu?: boolean;
+    /** Custom className for header container */
+    className?: string;
+    /** Custom className for logo */
+    logoClassName?: string;
+    /** Custom className for navigation container */
+    navigationClassName?: string;
+    /** Custom className for navigation items */
+    navigationItemClassName?: string;
+    /** Custom className for login button */
+    loginButtonClassName?: string;
+    /** Custom className for mobile menu button */
+    mobileMenuButtonClassName?: string;
+    /** Element ID */
+    id?: string;
+    /** ARIA label */
+    "aria-label"?: string;
+}
+/**
+ * Normalized header model with defaults applied
+ */
+export interface HeaderModel {
+    variant: HeaderVariant;
+    logo?: ReactNode;
+    navigationItems: NavigationItem[];
+    loginButtonText: string;
+    showMobileMenu: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types/widgets/header/model/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/widgets/header/model/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,cAAc;IAC9B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe;IACf,IAAI,EAAE,MAAM,CAAC;CACb;AAED;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE5D;;GAEG;AACH,MAAM,WAAW,WAAW;IAC3B,uBAAuB;IACvB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6BAA6B;IAC7B,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,iCAAiC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uBAAuB;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gDAAgD;IAChD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,4CAA4C;IAC5C,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,wCAAwC;IACxC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,8CAA8C;IAC9C,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,iBAAiB;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC3B,OAAO,EAAE,aAAa,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;CACxB"}

package/dist/types/widgets/header/ui/header.d.ts

@@ -1,52 +1,46 @@
 /**
- * Header - Pill Navigation
+ * Header - Multi-variant Navigation
  * @module widgets/header/ui
  *
- * Pixel-perfect implementation matching Figma template design
- * Features: Centered pill-shaped navigation with dividers
+ * Pixel-perfect implementation matching Figma template designs
+ * Variants: minimal (pill navigation), modern (transparent navigation), luxury (minimalist navigation)
  *
  * IMPORTANT: Always use Tailwind CSS standard classes instead of hardcoded values:
  * ❌ DON'T: px-[24px], text-[14px], bg-[#f4f4f5]
  * ✅ DO: px-6, text-sm, bg-zinc-100
  * This ensures consistency, theme customization, and maintainability.
  */
-export interface HeaderProps {
-    /** Logo text or element */
-    logo?: React.ReactNode;
-    /** Navigation items array */
-    navigationItems?: Array<{
-        id: string;
-        label: string;
-        href: string;
-    }>;
-    /** Optional login button text */
-    loginButtonText?: string;
-    /** Show mobile menu */
-    showMobileMenu?: boolean;
-    /** Custom className for header container */
-    className?: string;
-    /** Custom className for logo */
-    logoClassName?: string;
-    /** Custom className for navigation container */
-    navigationClassName?: string;
-    /** Custom className for navigation items */
-    navigationItemClassName?: string;
-    /** Custom className for login button */
-    loginButtonClassName?: string;
-    /** Custom className for mobile menu button */
-    mobileMenuButtonClassName?: string;
-    /** Element ID */
-    id?: string;
-    /** ARIA label */
-    "aria-label"?: string;
-}
+import type { HeaderProps } from "../model";
 /**
- * Header - Pill-shaped navigation matching Figma template
+ * Header - Multi-variant navigation
  *
- * Pixel-perfect implementation with:
- * - Centered pill navigation with vertical dividers
- * - Responsive typography and spacing
- * - Semantic colors from Tailwind design system
+ * Pixel-perfect implementation supporting multiple design variants:
+ * - Minimal: Centered pill navigation with vertical dividers
+ * - Modern: Transparent navigation with dark logo and CTA
+ * - Luxury: Minimalist navigation with elegant spacing
+ *
+ * @example
+ * ```tsx
+ * // Minimal variant (default)
+ * <Header
+ *   variant="minimal"
+ *   logo="BRAND NAME"
+ *   navigationItems={[
+ *     { id: "home", label: "Home", href: "/" },
+ *     { id: "about", label: "About", href: "/about" },
+ *   ]}
+ * />
+ *
+ * // Luxury variant
+ * <Header
+ *   variant="luxury"
+ *   logo="YLSE SALGADO"
+ *   navigationItems={[
+ *     { id: "acerca", label: "ACERCA DE", href: "#acerca" },
+ *     { id: "propiedades", label: "PROPIEDADES", href: "#propiedades" },
+ *   ]}
+ * />
+ * ```
  */
 export declare const Header: import("react").ForwardRefExoticComponent<HeaderProps & import("react").RefAttributes<HTMLElement>>;
 //# sourceMappingURL=header.d.ts.map

package/dist/types/widgets/header/ui/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../../src/widgets/header/ui/header.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAMH,MAAM,WAAW,WAAW;IAC3B,2BAA2B;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,6BAA6B;IAC7B,eAAe,CAAC,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACrE,iCAAiC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uBAAuB;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gDAAgD;IAChD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,4CAA4C;IAC5C,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,wCAAwC;IACxC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,8CAA8C;IAC9C,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,iBAAiB;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,qGAwLlB,CAAC"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../../src/widgets/header/ui/header.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAKH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,MAAM,qGA6OlB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@homlista-devs/ui",
-	"version": "1.6.2",
+	"version": "1.6.3",
 	"main": "./dist/design-system.cjs.js",
 	"module": "./dist/design-system.es.js",
 	"types": "./dist/types/index.d.ts",