@almadar/ui 2.24.5 → 2.24.9

package/dist/marketing/index.js

@@ -1,4 +1,4 @@
-import React5, { createContext, useCallback, useContext, useState, useRef, useEffect, useId } from 'react';
+import React5, { createContext, useCallback, useState, useRef, useEffect, useContext, useId } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as LucideIcons from 'lucide-react';
 import { Loader2, Check, User } from 'lucide-react';
@@ -2614,28 +2614,28 @@ var marginYStyles = {
 };
 var bgStyles = {
   transparent: "bg-transparent",
-  primary: "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-  secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
-  muted: "bg-[var(--color-muted)] text-[var(--color-foreground)]",
-  accent: "bg-[var(--color-accent)] text-[var(--color-accent-foreground)]",
-  surface: "bg-[var(--color-card)]",
-  overlay: "bg-[var(--color-card)]/80 backdrop-blur-sm"
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  muted: "bg-muted text-foreground",
+  accent: "bg-accent text-accent-foreground",
+  surface: "bg-card",
+  overlay: "bg-card/80 backdrop-blur-sm"
 };
 var roundedStyles = {
   none: "rounded-none",
-  sm: "rounded-[var(--radius-sm)]",
-  md: "rounded-[var(--radius-md)]",
-  lg: "rounded-[var(--radius-lg)]",
-  xl: "rounded-[var(--radius-xl)]",
-  "2xl": "rounded-[var(--radius-xl)]",
-  full: "rounded-[var(--radius-full)]"
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-xl",
+  full: "rounded-full"
 };
 var shadowStyles = {
   none: "shadow-none",
-  sm: "shadow-[var(--shadow-sm)]",
-  md: "shadow-[var(--shadow-main)]",
-  lg: "shadow-[var(--shadow-lg)]",
-  xl: "shadow-[var(--shadow-lg)]"
+  sm: "shadow-sm",
+  md: "shadow",
+  lg: "shadow-lg",
+  xl: "shadow-lg"
 };
 var displayStyles = {
   block: "block",
@@ -2723,7 +2723,7 @@ var Box = React5.forwardRef(
           // Background
           bgStyles[bg],
           // Border - uses theme variables
-          border && "border-[length:var(--border-width)] border-[var(--color-border)]",
+          border && "border-[length:var(--border-width)] border-border",
           // Rounded
           roundedStyles[rounded],
           // Shadow
@@ -2830,30 +2830,30 @@ var Stack = ({
 var VStack = (props) => /* @__PURE__ */ jsx(Stack, { direction: "vertical", ...props });
 var HStack = (props) => /* @__PURE__ */ jsx(Stack, { direction: "horizontal", ...props });
 var variantStyles = {
-  h1: "text-4xl font-bold tracking-tight text-[var(--color-foreground)]",
-  h2: "text-3xl font-bold tracking-tight text-[var(--color-foreground)]",
-  h3: "text-2xl font-bold text-[var(--color-foreground)]",
-  h4: "text-xl font-bold text-[var(--color-foreground)]",
-  h5: "text-lg font-bold text-[var(--color-foreground)]",
-  h6: "text-base font-bold text-[var(--color-foreground)]",
-  heading: "text-2xl font-bold text-[var(--color-foreground)]",
-  subheading: "text-lg font-semibold text-[var(--color-foreground)]",
-  body1: "text-base font-normal text-[var(--color-foreground)]",
-  body2: "text-sm font-normal text-[var(--color-foreground)]",
-  body: "text-base font-normal text-[var(--color-foreground)]",
-  caption: "text-xs font-normal text-[var(--color-muted-foreground)]",
-  overline: "text-xs uppercase tracking-wide font-bold text-[var(--color-muted-foreground)]",
-  small: "text-sm font-normal text-[var(--color-foreground)]",
-  large: "text-lg font-medium text-[var(--color-foreground)]",
-  label: "text-sm font-medium text-[var(--color-foreground)]"
+  h1: "text-4xl font-bold tracking-tight text-foreground",
+  h2: "text-3xl font-bold tracking-tight text-foreground",
+  h3: "text-2xl font-bold text-foreground",
+  h4: "text-xl font-bold text-foreground",
+  h5: "text-lg font-bold text-foreground",
+  h6: "text-base font-bold text-foreground",
+  heading: "text-2xl font-bold text-foreground",
+  subheading: "text-lg font-semibold text-foreground",
+  body1: "text-base font-normal text-foreground",
+  body2: "text-sm font-normal text-foreground",
+  body: "text-base font-normal text-foreground",
+  caption: "text-xs font-normal text-muted-foreground",
+  overline: "text-xs uppercase tracking-wide font-bold text-muted-foreground",
+  small: "text-sm font-normal text-foreground",
+  large: "text-lg font-medium text-foreground",
+  label: "text-sm font-medium text-foreground"
 };
 var colorStyles = {
-  primary: "text-[var(--color-foreground)]",
-  secondary: "text-[var(--color-muted-foreground)]",
-  muted: "text-[var(--color-muted-foreground)]",
-  error: "text-[var(--color-error)]",
-  success: "text-[var(--color-success)]",
-  warning: "text-[var(--color-warning)]",
+  primary: "text-foreground",
+  secondary: "text-muted-foreground",
+  muted: "text-muted-foreground",
+  error: "text-error",
+  success: "text-success",
+  warning: "text-warning",
   inherit: "text-inherit"
 };
 var weightStyles = {
@@ -3016,49 +3016,50 @@ var Icon = ({
 Icon.displayName = "Icon";
 var variantStyles2 = {
   primary: [
-    "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
+    "bg-primary text-primary-foreground",
     "border-none",
-    "shadow-[var(--shadow-sm)]",
-    "hover:bg-[var(--color-primary-hover)] hover:shadow-[var(--shadow-hover)]",
-    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+    "shadow-sm",
+    "hover:bg-primary-hover hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   secondary: [
-    "bg-[var(--color-muted)] text-[var(--color-foreground)]",
-    "border-none",
-    "hover:bg-[var(--color-muted-foreground)]/15 hover:text-[var(--color-foreground)]",
+    "bg-transparent text-accent",
+    "border border-accent",
+    "hover:bg-accent hover:text-white hover:border-accent",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   ghost: [
-    "bg-transparent text-[var(--color-muted-foreground)]",
-    "hover:text-[var(--color-foreground)] hover:bg-[var(--color-muted)]",
+    "bg-transparent text-muted-foreground",
+    "border border-transparent",
+    "hover:text-primary-foreground hover:bg-primary hover:border-primary",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   danger: [
-    "bg-[var(--color-surface)] text-[var(--color-error)]",
-    "border-[length:var(--border-width)] border-[var(--color-error)]",
-    "shadow-[var(--shadow-sm)]",
-    "hover:bg-[var(--color-error)] hover:text-[var(--color-error-foreground)] hover:shadow-[var(--shadow-hover)]",
-    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+    "bg-surface text-error",
+    "border-[length:var(--border-width)] border-error",
+    "shadow-sm",
+    "hover:bg-error hover:text-error-foreground hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   success: [
-    "bg-[var(--color-surface)] text-[var(--color-success)]",
-    "border-[length:var(--border-width)] border-[var(--color-success)]",
-    "shadow-[var(--shadow-sm)]",
-    "hover:bg-[var(--color-success)] hover:text-[var(--color-success-foreground)] hover:shadow-[var(--shadow-hover)]",
-    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+    "bg-surface text-success",
+    "border-[length:var(--border-width)] border-success",
+    "shadow-sm",
+    "hover:bg-success hover:text-success-foreground hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   warning: [
-    "bg-[var(--color-surface)] text-[var(--color-warning)]",
-    "border-[length:var(--border-width)] border-[var(--color-warning)]",
-    "shadow-[var(--shadow-sm)]",
-    "hover:bg-[var(--color-warning)] hover:text-[var(--color-warning-foreground)] hover:shadow-[var(--shadow-hover)]",
-    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+    "bg-surface text-warning",
+    "border-[length:var(--border-width)] border-warning",
+    "shadow-sm",
+    "hover:bg-warning hover:text-warning-foreground hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   // "default" is an alias for secondary
   default: [
-    "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
-    "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
-    "hover:bg-[var(--color-secondary-hover)]",
+    "bg-secondary text-secondary-foreground",
+    "border-[length:var(--border-width-thin)] border-border",
+    "hover:bg-secondary-hover",
     "active:scale-[var(--active-scale)]"
   ].join(" ")
 };
@@ -3129,9 +3130,10 @@ var Button = React5.forwardRef(
         className: cn(
           "inline-flex items-center justify-center gap-2",
           "font-[var(--font-weight-medium)]",
-          "rounded-[var(--radius-sm)]",
+          "rounded-sm",
+          "cursor-pointer",
           "transition-all duration-[var(--transition-normal)]",
-          "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-[var(--color-ring)] focus:ring-offset-[length:var(--focus-ring-offset)]",
+          "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-offset-[length:var(--focus-ring-offset)]",
           "disabled:opacity-50 disabled:cursor-not-allowed",
           variantStyles2[variant],
           sizeStyles2[size],
@@ -3152,34 +3154,34 @@ var Button = React5.forwardRef(
 Button.displayName = "Button";
 var variantStyles3 = {
   default: [
-    "bg-[var(--color-muted)] text-[var(--color-foreground)]",
-    "border-[length:var(--border-width-thin)] border-[var(--color-border)]"
+    "bg-muted text-foreground",
+    "border-[length:var(--border-width-thin)] border-border"
   ].join(" "),
-  primary: "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-  secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
   success: [
-    "bg-[var(--color-surface)] text-[var(--color-success)]",
-    "border-[length:var(--border-width)] border-[var(--color-success)]"
+    "bg-surface text-success",
+    "border-[length:var(--border-width)] border-success"
   ].join(" "),
   warning: [
-    "bg-[var(--color-surface)] text-[var(--color-warning)]",
-    "border-[length:var(--border-width)] border-[var(--color-warning)]"
+    "bg-surface text-warning",
+    "border-[length:var(--border-width)] border-warning"
   ].join(" "),
   danger: [
-    "bg-[var(--color-surface)] text-[var(--color-error)]",
-    "border-[length:var(--border-width)] border-[var(--color-error)]"
+    "bg-surface text-error",
+    "border-[length:var(--border-width)] border-error"
   ].join(" "),
   error: [
-    "bg-[var(--color-surface)] text-[var(--color-error)]",
-    "border-[length:var(--border-width)] border-[var(--color-error)]"
+    "bg-surface text-error",
+    "border-[length:var(--border-width)] border-error"
   ].join(" "),
   info: [
-    "bg-[var(--color-surface)] text-[var(--color-info)]",
-    "border-[length:var(--border-width)] border-[var(--color-info)]"
+    "bg-surface text-info",
+    "border-[length:var(--border-width)] border-info"
   ].join(" "),
   neutral: [
-    "bg-[var(--color-muted)] text-[var(--color-muted-foreground)]",
-    "border-[length:var(--border-width-thin)] border-[var(--color-border)]"
+    "bg-muted text-muted-foreground",
+    "border-[length:var(--border-width-thin)] border-border"
   ].join(" ")
 };
 var sizeStyles3 = {
@@ -3199,7 +3201,7 @@ var Badge = React5.forwardRef(
       {
         ref,
         className: cn(
-          "inline-flex items-center gap-1 font-bold rounded-[var(--radius-sm)]",
+          "inline-flex items-center gap-1 font-bold rounded-sm",
           variantStyles3[variant],
           sizeStyles3[size],
           className
@@ -3216,34 +3218,34 @@ var Badge = React5.forwardRef(
 Badge.displayName = "Badge";
 var variantStyles4 = {
   default: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-sm)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow-sm",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
+    "hover:shadow-lg hover:-translate-y-0.5"
   ].join(" "),
   bordered: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-sm)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow-sm",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
+    "hover:shadow-lg hover:-translate-y-0.5"
   ].join(" "),
   elevated: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-main)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
+    "hover:shadow-lg hover:-translate-y-0.5"
   ].join(" "),
   // Interactive variant with theme-specific hover effects
   interactive: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-main)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow",
     "cursor-pointer",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)]"
+    "hover:shadow-lg"
   ].join(" ")
 };
 var paddingStyles2 = {
@@ -3254,9 +3256,9 @@ var paddingStyles2 = {
 };
 var shadowStyles2 = {
   none: "shadow-none",
-  sm: "shadow-[var(--shadow-sm)]",
-  md: "shadow-[var(--shadow-main)]",
-  lg: "shadow-[var(--shadow-lg)]"
+  sm: "shadow-sm",
+  md: "shadow",
+  lg: "shadow-lg"
 };
 var Card = React5.forwardRef(
   ({
@@ -3274,7 +3276,7 @@ var Card = React5.forwardRef(
       {
         ref,
         className: cn(
-          "rounded-[var(--radius-md)]",
+          "rounded-md",
           "transition-all duration-[var(--transition-normal)]",
           variantStyles4[variant],
           paddingStyles2[padding],
@@ -3284,8 +3286,8 @@ var Card = React5.forwardRef(
         ...props,
         children: [
           (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-            title && /* @__PURE__ */ jsx("h3", { className: "text-lg text-[var(--color-card-foreground)] font-[var(--font-weight-bold)]", children: title }),
-            subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-muted-foreground)] mt-1", children: subtitle })
+            title && /* @__PURE__ */ jsx("h3", { className: "text-lg text-card-foreground font-[var(--font-weight-bold)]", children: title }),
+            subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
           ] }),
           children
         ]
@@ -3301,7 +3303,7 @@ var CardTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "text-lg text-[var(--color-card-foreground)]",
+      "text-lg text-card-foreground",
       "font-[var(--font-weight-bold)]",
       className
     ),
@@ -3338,7 +3340,7 @@ var Divider = ({
       "div",
       {
         className: cn(
-          "w-0 h-full border-l border-[var(--color-border)]",
+          "w-0 h-full border-l border-border",
           variantStyles5[variant],
           className
         ),
@@ -3359,17 +3361,17 @@ var Divider = ({
             "div",
             {
               className: cn(
-                "flex-1 h-0 border-t border-[var(--color-border)]",
+                "flex-1 h-0 border-t border-border",
                 variantStyles5[variant]
               )
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--color-foreground)] font-bold uppercase tracking-wide", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground font-bold uppercase tracking-wide", children: label }),
           /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
-                "flex-1 h-0 border-t border-[var(--color-border)]",
+                "flex-1 h-0 border-t border-border",
                 variantStyles5[variant]
               )
             }
@@ -3382,7 +3384,7 @@ var Divider = ({
     "div",
     {
       className: cn(
-        "w-full h-0 border-t border-[var(--color-border)] my-4",
+        "w-full h-0 border-t border-border my-4",
         variantStyles5[variant],
         className
       ),
@@ -3457,8 +3459,8 @@ var Spacer = ({
 };
 var backgroundClasses = {
   default: "",
-  alt: "bg-[var(--color-surface)]",
-  dark: "bg-[var(--color-foreground)] text-[var(--color-background)]",
+  alt: "bg-surface",
+  dark: "bg-foreground text-background",
   gradient: [
     "bg-gradient-to-b",
     "from-[var(--color-primary)]/5",
@@ -3506,18 +3508,14 @@ var InstallBox = ({
     /* @__PURE__ */ jsx(
       Box,
       {
-        className: cn(
-          "bg-[var(--color-foreground)]",
-          "rounded-[var(--radius-md)]",
-          "border-[length:var(--border-width)] border-[var(--color-border)]"
-        ),
+        className: "bg-surface rounded-md border-[length:var(--border-width)] border-border",
         padding: "md",
-        children: /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "center", children: [
+        children: /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsx(
             Typography,
             {
               variant: "body2",
-              className: "font-mono flex-1 min-w-0 text-[var(--color-background)] select-all",
+              className: "font-mono flex-1 min-w-0 select-all",
               truncate: true,
               children: command
             }
@@ -3526,10 +3524,12 @@ var InstallBox = ({
             Button,
             {
               variant: "ghost",
-              size: "md",
+              size: "sm",
+              leftIcon: copied ? "check" : "copy",
               onClick: handleCopy,
-              className: "flex-shrink-0 text-[var(--color-background)] hover:text-[var(--color-background)]",
-              children: copied ? "Copied!" : "Copy"
+              className: "flex-shrink-0",
+              "aria-label": copied ? "Copied" : "Copy to clipboard",
+              children: copied ? "Copied" : "Copy"
             }
           )
         ] })
@@ -3547,7 +3547,7 @@ var MarketingImage = ({ src, alt, className }) => /* @__PURE__ */ jsx(
   Box,
   {
     className: cn(
-      "overflow-hidden rounded-[var(--radius-lg)] bg-cover bg-center bg-no-repeat",
+      "overflow-hidden rounded-lg bg-cover bg-center bg-no-repeat",
       className
     ),
     style: { backgroundImage: `url(${src})` },
@@ -3582,7 +3582,7 @@ var HeroSection = ({
       align: isCenter ? "center" : "left",
       className: cn(
         "max-w-3xl leading-tight",
-        isDark && "text-[var(--color-background)]"
+        isDark && "text-background"
       ),
       children: [
         title,
@@ -3592,7 +3592,7 @@ var HeroSection = ({
           {
             as: "span",
             variant: "h1",
-            className: "text-[var(--color-primary)]",
+            className: "text-primary",
             children: titleAccent
           }
         )
@@ -3605,7 +3605,7 @@ var HeroSection = ({
       align: isCenter ? "center" : "left",
       className: cn(
         "max-w-3xl leading-tight",
-        isDark && "text-[var(--color-background)]"
+        isDark && "text-background"
       ),
       children: title
     }
@@ -3719,10 +3719,10 @@ var CTABanner = ({
     {
       className: cn(
         "py-16",
-        background === "alt" && "bg-[var(--color-surface)]",
-        background === "dark" && "bg-[var(--color-surface)]",
-        background === "gradient" && "bg-[var(--color-surface)]",
-        background === "primary" && "bg-[var(--color-surface)]",
+        background === "alt" && "bg-surface",
+        background === "dark" && "bg-surface",
+        background === "gradient" && "bg-surface",
+        background === "primary" && "bg-surface",
         className
       ),
       children: /* @__PURE__ */ jsxs(
@@ -3789,7 +3789,7 @@ var FeatureCard = ({
         {
           name: icon,
           size: iconSizeMap[size],
-          className: "text-[var(--color-accent,#06b6d4)]"
+          className: "text-accent"
         }
       );
     }
@@ -3806,7 +3806,7 @@ var FeatureCard = ({
       variant,
       padding: size,
       className: cn(
-        variant === "interactive" && "hover:border-[var(--color-primary)]",
+        variant === "interactive" && "hover:border-primary",
         className
       ),
       onClick: variant === "interactive" && href ? handleLinkClick : void 0,
@@ -3820,7 +3820,7 @@ var FeatureCard = ({
             variant: "ghost",
             size: "sm",
             onClick: handleLinkClick,
-            className: "text-[var(--color-primary)] -ml-2",
+            className: "text-primary -ml-2",
             children: linkLabel
           }
         )
@@ -3908,10 +3908,10 @@ var PricingCard = ({
         "flex flex-col h-full",
         "hover:-translate-y-1 transition-all",
         highlighted && [
-          "border-[length:2px] border-[var(--color-primary)]",
-          "shadow-[var(--shadow-lg)]",
+          "border-[length:2px] border-primary",
+          "shadow-lg",
           "scale-[1.05]",
-          "ring-2 ring-[var(--color-primary)]"
+          "ring-2 ring-primary"
         ],
         className
       ),
@@ -3922,7 +3922,7 @@ var PricingCard = ({
           Typography,
           {
             variant: "h2",
-            className: "text-[var(--color-primary)] font-bold",
+            className: "text-primary font-bold",
             children: price
           }
         ),
@@ -3934,7 +3934,7 @@ var PricingCard = ({
             {
               icon: Check,
               size: "sm",
-              className: "flex-shrink-0 text-[var(--color-success)]"
+              className: "flex-shrink-0 text-success"
             }
           ),
           /* @__PURE__ */ jsx(Typography, { variant: "body2", children: feature })
@@ -3989,7 +3989,7 @@ var SplitSection = ({
         {
           name: "check",
           size: "sm",
-          className: "text-[var(--color-primary)] flex-shrink-0 mt-0.5"
+          className: "text-primary flex-shrink-0 mt-0.5"
         }
       ),
       /* @__PURE__ */ jsx(Typography, { variant: "body2", children: bullet })
@@ -3999,7 +3999,7 @@ var SplitSection = ({
     Box,
     {
       className: cn(
-        "flex-1 min-w-0 min-h-[240px] rounded-[var(--radius-md)]",
+        "flex-1 min-w-0 min-h-[240px] rounded-md",
         "bg-cover bg-center"
       ),
       style: { backgroundImage: `url(${image.src})` },
@@ -4013,7 +4013,7 @@ var SplitSection = ({
     {
       className: cn(
         "w-full",
-        background === "alt" ? "bg-[var(--color-muted)]" : "bg-[var(--color-background)]",
+        background === "alt" ? "bg-muted" : "bg-background",
         className
       ),
       padding: "lg",
@@ -4033,9 +4033,9 @@ var StepCircle = ({ step, index }) => {
         className: cn(
           "w-10 h-10 rounded-full flex-shrink-0",
           "flex items-center justify-center",
-          "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]"
+          "bg-primary text-primary-foreground"
         ),
-        children: /* @__PURE__ */ jsx(Icon, { name: step.icon, size: "sm", className: "text-[var(--color-primary-foreground)]" })
+        children: /* @__PURE__ */ jsx(Icon, { name: step.icon, size: "sm", className: "text-primary-foreground" })
       }
     );
   }
@@ -4045,9 +4045,9 @@ var StepCircle = ({ step, index }) => {
       className: cn(
         "w-10 h-10 rounded-full flex-shrink-0",
         "flex items-center justify-center",
-        "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]"
+        "bg-primary text-primary-foreground"
       ),
-      children: /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm text-[var(--color-primary-foreground)] leading-none", children: step.number ?? index + 1 })
+      children: /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm text-primary-foreground leading-none", children: step.number ?? index + 1 })
     }
   );
 };
@@ -4062,7 +4062,7 @@ var StepFlow = ({
     return /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsx(React5.Fragment, { children: /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
       /* @__PURE__ */ jsxs(VStack, { gap: "none", align: "center", children: [
         /* @__PURE__ */ jsx(StepCircle, { step, index }),
-        showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsx(Box, { className: "w-px h-8 bg-[var(--color-border)]" })
+        showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsx(Box, { className: "w-px h-8 bg-border" })
       ] }),
       /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: "flex-1 pt-1", children: [
         /* @__PURE__ */ jsx(Typography, { variant: "h4", children: step.title }),
@@ -4090,7 +4090,7 @@ var StatsGrid = ({
       Typography,
       {
         variant: "h2",
-        className: "font-bold text-[var(--color-primary)]",
+        className: "font-bold text-primary",
         children: stat.value
       }
     ),
@@ -4205,7 +4205,7 @@ var ShowcaseCard = ({
           {
             className: cn(
               "w-full aspect-video bg-cover bg-center",
-              "rounded-t-[var(--radius-md)]"
+              "rounded-t-md"
             ),
             style: { backgroundImage: `url(${image.src})` },
             role: "img",
@@ -4244,10 +4244,10 @@ var statusSizeClasses = {
   xl: "w-4 h-4"
 };
 var statusClasses = {
-  online: "bg-[var(--color-success)]",
-  offline: "bg-[var(--color-muted-foreground)]",
-  away: "bg-[var(--color-warning)]",
-  busy: "bg-[var(--color-error)]"
+  online: "bg-success",
+  offline: "bg-muted-foreground",
+  away: "bg-warning",
+  busy: "bg-error"
 };
 var badgeSizeClasses = {
   xs: "w-3 h-3 text-[8px]",
@@ -4282,7 +4282,7 @@ var Avatar = ({
   const hasImage = !!src;
   const hasInitials = !!initials;
   const hasIcon = !!Icon2;
-  const getInitialsBackground = () => "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]";
+  const getInitialsBackground = () => "bg-primary text-primary-foreground";
   const isClickable = action || onClick;
   const handleClick = () => {
     if (action) {
@@ -4296,7 +4296,7 @@ var Avatar = ({
       {
         className: cn(
           "relative inline-flex items-center justify-center",
-          "bg-[var(--color-muted)] border-[length:var(--border-width)] border-[var(--color-border)]",
+          "bg-muted border-[length:var(--border-width)] border-border",
           "overflow-hidden",
           sizeClasses2[size],
           isClickable && "cursor-pointer hover:bg-[var(--color-surface-hover)] transition-colors",
@@ -4329,7 +4329,7 @@ var Avatar = ({
           Icon2,
           {
             className: cn(
-              "text-[var(--color-foreground)]",
+              "text-foreground",
               iconSizeClasses[size]
             )
           }
@@ -4337,7 +4337,7 @@ var Avatar = ({
           User,
           {
             className: cn(
-              "text-[var(--color-foreground)]",
+              "text-foreground",
               iconSizeClasses[size]
             )
           }
@@ -4348,7 +4348,7 @@ var Avatar = ({
       "div",
       {
         className: cn(
-          "absolute bottom-0 right-0 border-2 border-[var(--color-card)]",
+          "absolute bottom-0 right-0 border-2 border-card",
           statusClasses[status],
           statusSizeClasses[size]
         ),
@@ -4360,8 +4360,8 @@ var Avatar = ({
       {
         className: cn(
           "absolute -top-1 -right-1 flex items-center justify-center",
-          "bg-[var(--color-primary)] text-[var(--color-primary-foreground)] font-bold",
-          "border-2 border-[var(--color-card)]",
+          "bg-primary text-primary-foreground font-bold",
+          "border-2 border-card",
           badgeSizeClasses[size]
         ),
         "aria-label": `Badge: ${badge}`,
@@ -4427,7 +4427,7 @@ var CaseStudyCard = ({
         variant: "ghost",
         size: "sm",
         onClick: handleClick,
-        className: "text-[var(--color-primary)] -ml-2",
+        className: "text-primary -ml-2",
         children: [
           linkLabel,
           " \u2192"
@@ -4470,8 +4470,8 @@ var MarketingFooter = ({
     {
       as: "footer",
       className: cn(
-        "bg-[var(--color-foreground)] text-[var(--color-background)]",
-        "border-t border-[var(--color-border)]",
+        "bg-surface",
+        "border-t border-border",
         "pt-12 pb-8 px-4",
         className
       ),
@@ -4483,7 +4483,7 @@ var MarketingFooter = ({
               Typography,
               {
                 variant: "body2",
-                className: "font-semibold text-[var(--color-background)] mb-1",
+                className: "font-semibold text-foreground mb-1",
                 children: col.title
               }
             ),
@@ -4493,8 +4493,8 @@ var MarketingFooter = ({
                 href: item.href,
                 className: cn(
                   "text-sm no-underline",
-                  "text-[var(--color-background)]/60",
-                  "hover:text-[var(--color-accent)]",
+                  "text-foreground/60",
+                  "hover:text-accent",
                   "transition-colors duration-150"
                 ),
                 target: item.href.startsWith("http") ? "_blank" : void 0,
@@ -4509,7 +4509,7 @@ var MarketingFooter = ({
           Typography,
           {
             variant: "caption",
-            className: "text-[var(--color-background)]/30 text-center w-full pt-6",
+            className: "text-foreground/30 text-center w-full pt-6",
             children: copyright
           }
         )
@@ -4542,7 +4542,7 @@ var PullQuote = ({
     Box,
     {
       className: cn(
-        "border-l-4 border-l-[var(--color-primary)]",
+        "border-l-4 border-l-primary",
         "pl-6 py-2 my-6",
         className
       ),
@@ -4550,7 +4550,7 @@ var PullQuote = ({
         Typography,
         {
           variant: "large",
-          className: "italic text-[var(--color-foreground)] opacity-90",
+          className: "italic text-foreground opacity-90",
           children
         }
       )
@@ -4626,7 +4626,7 @@ var AnimatedCounter = ({
       Typography,
       {
         variant: "h2",
-        className: "text-[var(--color-primary)] font-bold tabular-nums",
+        className: "text-primary font-bold tabular-nums",
         children: hasAnimated ? displayValue : "0"
       }
     ),
@@ -4634,6 +4634,289 @@ var AnimatedCounter = ({
   ] });
 };
 AnimatedCounter.displayName = "AnimatedCounter";
+var initialStyles = {
+  "fade-up": { opacity: 0, transform: "translateY(24px)" },
+  "fade-down": { opacity: 0, transform: "translateY(-24px)" },
+  "fade-in": { opacity: 0 },
+  "fade-left": { opacity: 0, transform: "translateX(24px)" },
+  "fade-right": { opacity: 0, transform: "translateX(-24px)" },
+  "scale": { opacity: 0, transform: "scale(0.92)" },
+  "scale-up": { opacity: 0, transform: "scale(0.92) translateY(16px)" },
+  "none": {}
+};
+var animatedStyles = {
+  "fade-up": { opacity: 1, transform: "translateY(0)" },
+  "fade-down": { opacity: 1, transform: "translateY(0)" },
+  "fade-in": { opacity: 1 },
+  "fade-left": { opacity: 1, transform: "translateX(0)" },
+  "fade-right": { opacity: 1, transform: "translateX(0)" },
+  "scale": { opacity: 1, transform: "scale(1)" },
+  "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
+  "none": {}
+};
+var AnimatedReveal = React5.forwardRef(
+  ({
+    trigger = "scroll",
+    animation = "fade-up",
+    duration = 600,
+    delay = 0,
+    threshold = 0.15,
+    once = true,
+    animate: manualAnimate,
+    easing = "cubic-bezier(0.16, 1, 0.3, 1)",
+    children,
+    className,
+    style,
+    ...props
+  }, forwardedRef) => {
+    const [isAnimated, setIsAnimated] = useState(false);
+    const internalRef = useRef(null);
+    const hasAnimated = useRef(false);
+    const setRef = useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef]
+    );
+    useEffect(() => {
+      if (trigger !== "scroll") return;
+      const el = internalRef.current;
+      if (!el) return;
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            if (once && hasAnimated.current) return;
+            hasAnimated.current = true;
+            setIsAnimated(true);
+          } else if (!once) {
+            setIsAnimated(false);
+          }
+        },
+        { threshold }
+      );
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, [trigger, threshold, once]);
+    const handleMouseEnter = trigger === "hover" ? () => setIsAnimated(true) : void 0;
+    const handleMouseLeave = trigger === "hover" ? () => {
+      if (!once || !hasAnimated.current) {
+        hasAnimated.current = true;
+        setIsAnimated(false);
+      }
+    } : void 0;
+    useEffect(() => {
+      if (trigger === "manual" && manualAnimate !== void 0) {
+        setIsAnimated(manualAnimate);
+      }
+    }, [trigger, manualAnimate]);
+    const active = isAnimated;
+    const currentStyle = active ? animatedStyles[animation] : initialStyles[animation];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setRef,
+        className: cn("will-change-[opacity,transform]", className),
+        style: {
+          ...currentStyle,
+          transitionProperty: "opacity, transform",
+          transitionDuration: `${duration}ms`,
+          transitionDelay: `${delay}ms`,
+          transitionTimingFunction: easing,
+          ...style
+        },
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        ...props,
+        children: typeof children === "function" ? children(active) : children
+      }
+    );
+  }
+);
+AnimatedReveal.displayName = "AnimatedReveal";
+function useFetchedSvg(src) {
+  const [svg, setSvg] = useState(null);
+  const cache = useRef({});
+  useEffect(() => {
+    if (!src) {
+      setSvg(null);
+      return;
+    }
+    if (cache.current[src]) {
+      setSvg(cache.current[src]);
+      return;
+    }
+    let cancelled = false;
+    fetch(src).then((res) => {
+      if (!res.ok) throw new Error(`Failed to fetch SVG: ${res.status}`);
+      return res.text();
+    }).then((text) => {
+      if (cancelled) return;
+      cache.current[src] = text;
+      setSvg(text);
+    }).catch(() => {
+      if (!cancelled) setSvg(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [src]);
+  return svg;
+}
+function applyDrawAnimation(container, animate, duration, delay, easing) {
+  const paths = container.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
+  paths.forEach((el) => {
+    if ("getTotalLength" in el && typeof el.getTotalLength === "function") {
+      const len = el.getTotalLength();
+      el.style.strokeDasharray = `${len}`;
+      el.style.strokeDashoffset = animate ? "0" : `${len}`;
+      el.style.transition = `stroke-dashoffset ${duration}ms ${easing} ${delay}ms`;
+    }
+  });
+}
+function applyFillAnimation(container, animate, duration, delay, easing, fillColor) {
+  const paths = container.querySelectorAll("path, circle, ellipse, rect, polygon");
+  paths.forEach((el) => {
+    if ("getTotalLength" in el && typeof el.getTotalLength === "function") {
+      const geom = el;
+      const len = geom.getTotalLength();
+      geom.style.strokeDasharray = `${len}`;
+      geom.style.strokeDashoffset = animate ? "0" : `${len}`;
+      geom.style.transition = `stroke-dashoffset ${duration * 0.6}ms ${easing} ${delay}ms, fill-opacity ${duration * 0.4}ms ${easing} ${delay + duration * 0.6}ms`;
+    }
+    if (fillColor) el.style.fill = fillColor;
+    el.style.fillOpacity = animate ? "1" : "0";
+  });
+}
+function applyPulseAnimation(container, animate, duration) {
+  const svg = container.querySelector("svg");
+  if (!svg) return;
+  if (animate) {
+    svg.style.animation = `ag-pulse ${duration}ms ease-in-out infinite`;
+  } else {
+    svg.style.animation = "none";
+  }
+}
+function applyMorphAnimation(container, animate, duration, delay, easing) {
+  const paths = container.querySelectorAll("path, circle, ellipse, rect, polygon");
+  paths.forEach((el) => {
+    el.style.transition = `all ${duration}ms ${easing} ${delay}ms`;
+    el.style.transform = animate ? "scale(1)" : "scale(0)";
+    el.style.transformOrigin = "center";
+    el.style.opacity = animate ? "1" : "0";
+  });
+}
+var AnimatedGraphic = React5.forwardRef(
+  ({
+    src,
+    svgContent,
+    animation = "draw",
+    animate = false,
+    duration = 1200,
+    delay = 0,
+    easing = "cubic-bezier(0.16, 1, 0.3, 1)",
+    width,
+    height,
+    strokeColor,
+    fillColor,
+    alt,
+    className,
+    style,
+    children,
+    ...props
+  }, ref) => {
+    const containerRef = useRef(null);
+    const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
+    const resolvedSvg = svgContent ?? fetchedSvg;
+    const prevAnimateRef = useRef(animate);
+    const setRef = React5.useCallback(
+      (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    useEffect(() => {
+      const el = containerRef.current;
+      if (!el || !strokeColor) return;
+      const paths = el.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
+      paths.forEach((p) => {
+        p.style.stroke = strokeColor;
+      });
+    }, [resolvedSvg, strokeColor]);
+    useEffect(() => {
+      const el = containerRef.current;
+      if (!el || !resolvedSvg) return;
+      if (animation === "draw" || animation === "fill") {
+        const paths = el.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
+        paths.forEach((p) => {
+          if ("getTotalLength" in p && typeof p.getTotalLength === "function") {
+            const len = p.getTotalLength();
+            p.style.strokeDasharray = `${len}`;
+            p.style.strokeDashoffset = `${len}`;
+          }
+          if (animation === "fill") {
+            p.style.fillOpacity = "0";
+          }
+        });
+      }
+      if (animation === "morph") {
+        const paths = el.querySelectorAll("path, circle, ellipse, rect, polygon");
+        paths.forEach((p) => {
+          p.style.transform = "scale(0)";
+          p.style.transformOrigin = "center";
+          p.style.opacity = "0";
+        });
+      }
+    }, [resolvedSvg, animation]);
+    useEffect(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      const id = requestAnimationFrame(() => {
+        switch (animation) {
+          case "draw":
+            applyDrawAnimation(el, animate, duration, delay, easing);
+            break;
+          case "fill":
+            applyFillAnimation(el, animate, duration, delay, easing, fillColor);
+            break;
+          case "pulse":
+            applyPulseAnimation(el, animate, duration);
+            break;
+          case "morph":
+            applyMorphAnimation(el, animate, duration, delay, easing);
+            break;
+        }
+      });
+      prevAnimateRef.current = animate;
+      return () => cancelAnimationFrame(id);
+    }, [animate, animation, duration, delay, easing, fillColor, resolvedSvg]);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("style", { children: `@keyframes ag-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: 0.85; } }` }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: setRef,
+          className: cn("inline-flex items-center justify-center", className),
+          style: { width, height, ...style },
+          role: alt ? "img" : void 0,
+          "aria-label": alt,
+          ...props,
+          children: resolvedSvg ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "w-full h-full [&>svg]:w-full [&>svg]:h-full",
+              dangerouslySetInnerHTML: { __html: resolvedSvg }
+            }
+          ) : children
+        }
+      )
+    ] });
+  }
+);
+AnimatedGraphic.displayName = "AnimatedGraphic";
 var PI = Math.PI;
 function lineIntersection(x1, y1, x2, y2, x3, y3, x4, y4) {
   const denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
@@ -5649,4 +5932,4 @@ var EdgeDecoration = ({
 };
 EdgeDecoration.displayName = "EdgeDecoration";
 
-export { AnimatedCounter, ArticleSection, Badge, Box, Button, CTABanner, Card, CaseStudyCard, Center, CommunityLinks, ContentSection, Divider, EdgeDecoration, FeatureCard, FeatureGrid, GeometricPattern, GradientDivider, HStack, HeroSection, Icon, InstallBox, MarketingFooter, PatternTile, PricingCard, PricingGrid, PullQuote, ServiceCatalog, ShowcaseCard, SimpleGrid, Spacer, SplitSection, StatsGrid, StepFlow, TagCloud, TeamCard, Typography, VStack, getTileDimensions };
+export { AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Badge, Box, Button, CTABanner, Card, CaseStudyCard, Center, CommunityLinks, ContentSection, Divider, EdgeDecoration, FeatureCard, FeatureGrid, GeometricPattern, GradientDivider, HStack, HeroSection, Icon, InstallBox, MarketingFooter, PatternTile, PricingCard, PricingGrid, PullQuote, ServiceCatalog, ShowcaseCard, SimpleGrid, Spacer, SplitSection, StatsGrid, StepFlow, TagCloud, TeamCard, Typography, VStack, getTileDimensions };