@almadar/ui 2.15.10 → 2.15.11

package/dist/components/index.cjs

@@ -7078,11 +7078,11 @@ var gapStyles4 = {
 };
 var colStyles2 = {
   1: "grid-cols-1",
-  2: "grid-cols-2",
-  3: "grid-cols-3",
-  4: "grid-cols-4",
-  5: "grid-cols-5",
-  6: "grid-cols-6"
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+  5: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
+  6: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
 };
 var SimpleGrid = ({
   minChildWidth = 250,
@@ -14945,7 +14945,7 @@ var HeroSection = ({
       className: cn(
         "w-full min-h-[60vh] flex items-center justify-center",
         "px-6 py-20",
-        "relative overflow-hidden",
+        "relative overflow-x-hidden overflow-y-visible",
         className
       ),
       children: [
@@ -15319,13 +15319,13 @@ var StepFlow = ({
       ] })
     ] }) }, index)) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "none", align: "start", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React87__namespace.default.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", align: "center", className: "flex-1", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React87__namespace.default.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", align: "center", className: "flex-1 w-full md:w-auto", children: [
       /* @__PURE__ */ jsxRuntime.jsx(StepCircle, { step, index }),
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: "text-center", children: step.title }),
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", color: "muted", className: "text-center", children: step.description })
     ] }),
-    showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-shrink-0 pt-5 px-2", children: /* @__PURE__ */ jsxRuntime.jsx(Divider, { orientation: "horizontal", className: "w-12" }) })
+    showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-shrink-0 self-center py-2 md:pt-5 md:py-0 md:px-2", children: /* @__PURE__ */ jsxRuntime.jsx(Divider, { orientation: "horizontal", className: "w-12 md:w-12" }) })
   ] }, index)) });
 };
 StepFlow.displayName = "StepFlow";
@@ -15376,13 +15376,10 @@ var SplitSection = ({
         className
       ),
       padding: "lg",
-      children: /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "lg", align: "start", className: "flex-wrap gap-16", children: isImageLeft ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        mediaContent,
-        textContent
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("flex flex-col lg:flex-row gap-10 lg:gap-16 items-start", isImageLeft && "lg:flex-row-reverse"), children: [
         textContent,
         mediaContent
-      ] }) })
+      ] })
     }
   );
 };

package/dist/components/index.js

@@ -7047,11 +7047,11 @@ var gapStyles4 = {
 };
 var colStyles2 = {
   1: "grid-cols-1",
-  2: "grid-cols-2",
-  3: "grid-cols-3",
-  4: "grid-cols-4",
-  5: "grid-cols-5",
-  6: "grid-cols-6"
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+  5: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
+  6: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
 };
 var SimpleGrid = ({
   minChildWidth = 250,
@@ -14914,7 +14914,7 @@ var HeroSection = ({
       className: cn(
         "w-full min-h-[60vh] flex items-center justify-center",
         "px-6 py-20",
-        "relative overflow-hidden",
+        "relative overflow-x-hidden overflow-y-visible",
         className
       ),
       children: [
@@ -15288,13 +15288,13 @@ var StepFlow = ({
       ] })
     ] }) }, index)) });
   }
-  return /* @__PURE__ */ jsx(HStack, { gap: "none", align: "start", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React87__default.Fragment, { children: [
-    /* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "center", className: "flex-1", children: [
+  return /* @__PURE__ */ jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React87__default.Fragment, { children: [
+    /* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "center", className: "flex-1 w-full md:w-auto", children: [
       /* @__PURE__ */ jsx(StepCircle, { step, index }),
       /* @__PURE__ */ jsx(Typography, { variant: "h4", className: "text-center", children: step.title }),
       /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "muted", className: "text-center", children: step.description })
     ] }),
-    showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsx(Box, { className: "flex-shrink-0 pt-5 px-2", children: /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", className: "w-12" }) })
+    showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsx(Box, { className: "flex-shrink-0 self-center py-2 md:pt-5 md:py-0 md:px-2", children: /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", className: "w-12 md:w-12" }) })
   ] }, index)) });
 };
 StepFlow.displayName = "StepFlow";
@@ -15345,13 +15345,10 @@ var SplitSection = ({
         className
       ),
       padding: "lg",
-      children: /* @__PURE__ */ jsx(HStack, { gap: "lg", align: "start", className: "flex-wrap gap-16", children: isImageLeft ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        mediaContent,
-        textContent
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      children: /* @__PURE__ */ jsxs(Box, { className: cn("flex flex-col lg:flex-row gap-10 lg:gap-16 items-start", isImageLeft && "lg:flex-row-reverse"), children: [
         textContent,
         mediaContent
-      ] }) })
+      ] })
     }
   );
 };

package/dist/marketing/index.cjs

@@ -3687,7 +3687,7 @@ var HeroSection = ({
       className: cn(
         "w-full min-h-[60vh] flex items-center justify-center",
         "px-6 py-20",
-        "relative overflow-hidden",
+        "relative overflow-x-hidden overflow-y-visible",
         className
       ),
       children: [
@@ -3843,11 +3843,11 @@ var gapStyles2 = {
 };
 var colStyles = {
   1: "grid-cols-1",
-  2: "grid-cols-2",
-  3: "grid-cols-3",
-  4: "grid-cols-4",
-  5: "grid-cols-5",
-  6: "grid-cols-6"
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+  5: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
+  6: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
 };
 var SimpleGrid = ({
   minChildWidth = 250,
@@ -4021,13 +4021,10 @@ var SplitSection = ({
         className
       ),
       padding: "lg",
-      children: /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "lg", align: "start", className: "flex-wrap gap-16", children: isImageLeft ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        mediaContent,
-        textContent
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("flex flex-col lg:flex-row gap-10 lg:gap-16 items-start", isImageLeft && "lg:flex-row-reverse"), children: [
         textContent,
         mediaContent
-      ] }) })
+      ] })
     }
   );
 };
@@ -4077,13 +4074,13 @@ var StepFlow = ({
       ] })
     ] }) }, index)) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "none", align: "start", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React5__default.default.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", align: "center", className: "flex-1", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React5__default.default.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", align: "center", className: "flex-1 w-full md:w-auto", children: [
       /* @__PURE__ */ jsxRuntime.jsx(StepCircle, { step, index }),
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: "text-center", children: step.title }),
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", color: "muted", className: "text-center", children: step.description })
     ] }),
-    showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-shrink-0 pt-5 px-2", children: /* @__PURE__ */ jsxRuntime.jsx(Divider, { orientation: "horizontal", className: "w-12" }) })
+    showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-shrink-0 self-center py-2 md:pt-5 md:py-0 md:px-2", children: /* @__PURE__ */ jsxRuntime.jsx(Divider, { orientation: "horizontal", className: "w-12 md:w-12" }) })
   ] }, index)) });
 };
 StepFlow.displayName = "StepFlow";

package/dist/marketing/index.js

@@ -1,5 +1,5 @@
 import React5, { createContext, useCallback, useContext, useState, useRef, useEffect } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as LucideIcons from 'lucide-react';
 import { Loader2, Check, User } from 'lucide-react';
 
@@ -3663,7 +3663,7 @@ var HeroSection = ({
       className: cn(
         "w-full min-h-[60vh] flex items-center justify-center",
         "px-6 py-20",
-        "relative overflow-hidden",
+        "relative overflow-x-hidden overflow-y-visible",
         className
       ),
       children: [
@@ -3819,11 +3819,11 @@ var gapStyles2 = {
 };
 var colStyles = {
   1: "grid-cols-1",
-  2: "grid-cols-2",
-  3: "grid-cols-3",
-  4: "grid-cols-4",
-  5: "grid-cols-5",
-  6: "grid-cols-6"
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+  5: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
+  6: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
 };
 var SimpleGrid = ({
   minChildWidth = 250,
@@ -3997,13 +3997,10 @@ var SplitSection = ({
         className
       ),
       padding: "lg",
-      children: /* @__PURE__ */ jsx(HStack, { gap: "lg", align: "start", className: "flex-wrap gap-16", children: isImageLeft ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        mediaContent,
-        textContent
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      children: /* @__PURE__ */ jsxs(Box, { className: cn("flex flex-col lg:flex-row gap-10 lg:gap-16 items-start", isImageLeft && "lg:flex-row-reverse"), children: [
         textContent,
         mediaContent
-      ] }) })
+      ] })
     }
   );
 };
@@ -4053,13 +4050,13 @@ var StepFlow = ({
       ] })
     ] }) }, index)) });
   }
-  return /* @__PURE__ */ jsx(HStack, { gap: "none", align: "start", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React5.Fragment, { children: [
-    /* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "center", className: "flex-1", children: [
+  return /* @__PURE__ */ jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+    /* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "center", className: "flex-1 w-full md:w-auto", children: [
       /* @__PURE__ */ jsx(StepCircle, { step, index }),
       /* @__PURE__ */ jsx(Typography, { variant: "h4", className: "text-center", children: step.title }),
       /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "muted", className: "text-center", children: step.description })
     ] }),
-    showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsx(Box, { className: "flex-shrink-0 pt-5 px-2", children: /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", className: "w-12" }) })
+    showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsx(Box, { className: "flex-shrink-0 self-center py-2 md:pt-5 md:py-0 md:px-2", children: /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", className: "w-12 md:w-12" }) })
   ] }, index)) });
 };
 StepFlow.displayName = "StepFlow";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "2.15.10",
+  "version": "2.15.11",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",

package/themes/almadar-website.css

@@ -0,0 +1,195 @@
+/**
+ * Almadar Website Theme
+ *
+ * Brand-accurate theme for almadar.io based on Almadar Brand Guidelines.
+ * Teal primary, Cyan accent, Sand Gold highlights, Plus Jakarta Sans typography.
+ * Dark hero sections with light content sections (mixed mode).
+ */
+
+/* ==========================================================================
+ * LIGHT MODE (content sections)
+ * ========================================================================== */
+[data-theme="almadar-website-light"] {
+    /* Shadows */
+    --shadow-main: 0 4px 14px rgba(20, 184, 166, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
+    --shadow-lg: 0 8px 30px rgba(20, 184, 166, 0.12), 0 4px 10px rgba(0, 0, 0, 0.04);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.04);
+    --shadow-none: none;
+    --shadow-hover: 0 12px 40px rgba(20, 184, 166, 0.15);
+    --shadow-active: 0 2px 8px rgba(20, 184, 166, 0.1);
+
+    /* Border radius */
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 20px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Teal on parchment */
+    --color-primary: #14b8a6;
+    --color-primary-hover: #0d9488;
+    --color-primary-foreground: #ffffff;
+
+    --color-secondary: #f1f5f9;
+    --color-secondary-hover: #e2e8f0;
+    --color-secondary-foreground: #0f172a;
+
+    --color-accent: #06b6d4;
+    --color-accent-foreground: #ffffff;
+
+    --color-muted: #f1f5f9;
+    --color-muted-foreground: #64748b;
+
+    --color-background: #ffffff;
+    --color-foreground: #0f172a;
+    --color-card: #ffffff;
+    --color-card-foreground: #0f172a;
+    --color-surface: #f8fafc;
+    --color-border: #e2e8f0;
+    --color-input: #e2e8f0;
+    --color-ring: #14b8a6;
+
+    /* Sand Gold for special accents */
+    --color-gold: #c9a227;
+
+    /* Semantic colors */
+    --color-error: #dc2626;
+    --color-error-foreground: #ffffff;
+    --color-success: #22c55e;
+    --color-success-foreground: #ffffff;
+    --color-warning: #f59e0b;
+    --color-warning-foreground: #000000;
+    --color-info: #3b82f6;
+    --color-info-foreground: #ffffff;
+
+    /* Typography - Plus Jakarta Sans per brand guidelines */
+    --font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+    --letter-spacing: -0.02em;
+    --line-height: 1.6;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.75;
+    --icon-color: #14b8a6;
+
+    /* Transitions */
+    --transition-fast: 150ms;
+    --transition-normal: 250ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active */
+    --hover-scale: 1.02;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #14b8a6;
+}
+
+/* ==========================================================================
+ * DARK MODE (hero sections, dark backgrounds)
+ * ========================================================================== */
+[data-theme="almadar-website-dark"] {
+    /* Shadows - Teal glow */
+    --shadow-main: 0 4px 14px rgba(20, 184, 166, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
+    --shadow-sm: 0 2px 4px rgba(20, 184, 166, 0.1);
+    --shadow-lg: 0 8px 30px rgba(20, 184, 166, 0.25), 0 4px 10px rgba(0, 0, 0, 0.1);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    --shadow-none: none;
+    --shadow-hover: 0 12px 40px rgba(20, 184, 166, 0.35), 0 4px 12px rgba(6, 182, 212, 0.2);
+    --shadow-active: 0 2px 8px rgba(20, 184, 166, 0.2);
+
+    /* Border radius */
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 20px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* Colors - Teal/Cyan on Midnight Blue */
+    --color-primary: #14b8a6;
+    --color-primary-hover: #2dd4bf;
+    --color-primary-foreground: #042f2e;
+
+    --color-secondary: #1e293b;
+    --color-secondary-hover: #334155;
+    --color-secondary-foreground: #f1f5f9;
+
+    --color-accent: #06b6d4;
+    --color-accent-foreground: #083344;
+
+    --color-muted: #1e293b;
+    --color-muted-foreground: #94a3b8;
+
+    --color-background: #0f172a;
+    --color-foreground: #f1f5f9;
+    --color-card: #1e293b;
+    --color-card-foreground: #f1f5f9;
+    --color-surface: #1e293b;
+    --color-border: #334155;
+    --color-input: rgba(20, 184, 166, 0.3);
+    --color-ring: #14b8a6;
+
+    /* Sand Gold for special accents */
+    --color-gold: #c9a227;
+
+    /* Semantic colors */
+    --color-error: #f87171;
+    --color-error-foreground: #000000;
+    --color-success: #4ade80;
+    --color-success-foreground: #000000;
+    --color-warning: #fbbf24;
+    --color-warning-foreground: #000000;
+    --color-info: #38bdf8;
+    --color-info-foreground: #000000;
+
+    /* Typography */
+    --font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+    --letter-spacing: -0.02em;
+    --line-height: 1.6;
+
+    /* Icon styling */
+    --icon-stroke-width: 1.75;
+    --icon-color: #14b8a6;
+
+    /* Transitions */
+    --transition-fast: 150ms;
+    --transition-normal: 250ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active */
+    --hover-scale: 1.02;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+
+    /* Focus ring */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #14b8a6;
+}

package/themes/index.css

@@ -12,6 +12,7 @@
 @import "./wireframe.css";
 @import "./minimalist.css";
 @import "./almadar.css";
+@import "./almadar-website.css";
 @import "./trait-wars.css";
 
 /* Extended themes */