@almadar/ui 4.57.4 → 5.0.0

package/dist/docs/index.js

@@ -3108,7 +3108,7 @@ var sizeStyles2 = {
 };
 var iconSizeStyles = {
   sm: "h-3.5 w-3.5",
-  md: "h-4 w-4",
+  md: "h-icon-default w-icon-default",
   lg: "h-5 w-5"
 };
 function resolveIconProp(value, sizeClass) {
@@ -3180,7 +3180,7 @@ var Button = React5.forwardRef(
         ...props,
         "data-testid": props["data-testid"] ?? (action ? `action-${action}` : void 0),
         children: [
-          isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : resolvedLeftIcon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
+          isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-icon-default w-icon-default animate-spin" }) : resolvedLeftIcon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
           children || label,
           resolvedRightIcon && !isLoading && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: resolvedRightIcon })
         ]
@@ -3193,23 +3193,23 @@ var variantStyles3 = {
   default: [
     "bg-card",
     "border-[length:var(--border-width)] border-border",
-    "shadow-sm",
+    "shadow-elevation-card",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-lg hover:-translate-y-0.5"
+    "hover:shadow-elevation-dialog hover:-translate-y-0.5"
   ].join(" "),
   bordered: [
     "bg-card",
     "border-[length:var(--border-width)] border-border",
-    "shadow-sm",
+    "shadow-elevation-card",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-lg hover:-translate-y-0.5"
+    "hover:shadow-elevation-dialog hover:-translate-y-0.5"
   ].join(" "),
   elevated: [
     "bg-card",
     "border-[length:var(--border-width)] border-border",
     "shadow",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-lg hover:-translate-y-0.5"
+    "hover:shadow-elevation-dialog hover:-translate-y-0.5"
   ].join(" "),
   // Interactive variant with theme-specific hover effects
   interactive: [
@@ -3218,20 +3218,20 @@ var variantStyles3 = {
     "shadow",
     "cursor-pointer",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-lg"
+    "hover:shadow-elevation-dialog"
   ].join(" ")
 };
 var paddingStyles2 = {
   none: "",
-  sm: "p-3",
-  md: "p-4",
-  lg: "p-6"
+  sm: "p-card-sm",
+  md: "p-card-md",
+  lg: "p-card-lg"
 };
 var shadowStyles2 = {
   none: "shadow-none",
-  sm: "shadow-sm",
+  sm: "shadow-elevation-card",
   md: "shadow",
-  lg: "shadow-lg"
+  lg: "shadow-elevation-dialog"
 };
 var Card = React5.forwardRef(
   ({
@@ -3249,7 +3249,7 @@ var Card = React5.forwardRef(
       {
         ref,
         className: cn(
-          "rounded-md",
+          "rounded-container",
           "transition-all duration-[var(--transition-normal)]",
           variantStyles3[variant],
           paddingStyles2[padding],
@@ -3385,7 +3385,7 @@ var Input = React5.forwardRef(
     ...props
   }, ref) => {
     const type = inputType || htmlType || "text";
-    const resolvedLeftIcon = leftIcon || IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: "h-4 w-4" });
+    const resolvedLeftIcon = leftIcon || IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: "h-icon-default w-icon-default" });
     const showClearButton = clearable && value && String(value).length > 0;
     const baseClassName = cn(
       "block w-full rounded-sm transition-all duration-[var(--transition-fast)]",
@@ -3417,7 +3417,7 @@ var Input = React5.forwardRef(
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-muted-foreground", children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) })
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-muted-foreground", children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-icon-default w-icon-default" }) })
       ] });
     }
     if (type === "textarea") {
@@ -3471,7 +3471,7 @@ var Input = React5.forwardRef(
           type: "button",
           onClick: onClear,
           className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground hover:text-foreground",
-          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(X, { className: "h-icon-default w-icon-default" })
         }
       ),
       rightIcon && !showClearButton && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground", children: rightIcon })
@@ -3699,7 +3699,7 @@ function DocCodeBlock({
     Box,
     {
       className: cn(
-        "rounded-md border border-border overflow-hidden",
+        "rounded-container border border-border overflow-hidden",
         className
       ),
       position: "relative",
@@ -3774,11 +3774,11 @@ function DocCodeBlock({
 }
 var linkCardStyles = [
   "border border-border",
-  "rounded-md",
+  "rounded-container",
   "p-4",
   "transition-all",
   "hover:border-primary",
-  "hover:shadow-lg",
+  "hover:shadow-elevation-dialog",
   "no-underline",
   "flex-1",
   "min-w-0",
@@ -3977,7 +3977,7 @@ function DocSearch({
           Box,
           {
             position: "absolute",
-            className: "top-full left-0 right-0 mt-1 z-50 bg-card border border-border rounded-md shadow-lg max-h-80 overflow-y-auto",
+            className: "top-full left-0 right-0 mt-1 z-50 bg-card border border-border rounded-container shadow-elevation-popover max-h-80 overflow-y-auto",
             children: /* @__PURE__ */ jsx(VStack, { gap: "none", children: results.map((result, index) => /* @__PURE__ */ jsx(
               Box,
               {

package/dist/marketing/index.cjs

@@ -3132,7 +3132,7 @@ var sizeStyles2 = {
 };
 var iconSizeStyles = {
   sm: "h-3.5 w-3.5",
-  md: "h-4 w-4",
+  md: "h-icon-default w-icon-default",
   lg: "h-5 w-5"
 };
 function resolveIconProp(value, sizeClass) {
@@ -3204,7 +3204,7 @@ var Button = React6__default.default.forwardRef(
         ...props,
         "data-testid": props["data-testid"] ?? (action ? `action-${action}` : void 0),
         children: [
-          isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "h-4 w-4 animate-spin" }) : resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
+          isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "h-icon-default w-icon-default animate-spin" }) : resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
           children || label,
           resolvedRightIcon && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: resolvedRightIcon })
         ]
@@ -3300,23 +3300,23 @@ var variantStyles4 = {
   default: [
     "bg-card",
     "border-[length:var(--border-width)] border-border",
-    "shadow-sm",
+    "shadow-elevation-card",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-lg hover:-translate-y-0.5"
+    "hover:shadow-elevation-dialog hover:-translate-y-0.5"
   ].join(" "),
   bordered: [
     "bg-card",
     "border-[length:var(--border-width)] border-border",
-    "shadow-sm",
+    "shadow-elevation-card",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-lg hover:-translate-y-0.5"
+    "hover:shadow-elevation-dialog hover:-translate-y-0.5"
   ].join(" "),
   elevated: [
     "bg-card",
     "border-[length:var(--border-width)] border-border",
     "shadow",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-lg hover:-translate-y-0.5"
+    "hover:shadow-elevation-dialog hover:-translate-y-0.5"
   ].join(" "),
   // Interactive variant with theme-specific hover effects
   interactive: [
@@ -3325,20 +3325,20 @@ var variantStyles4 = {
     "shadow",
     "cursor-pointer",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-lg"
+    "hover:shadow-elevation-dialog"
   ].join(" ")
 };
 var paddingStyles2 = {
   none: "",
-  sm: "p-3",
-  md: "p-4",
-  lg: "p-6"
+  sm: "p-card-sm",
+  md: "p-card-md",
+  lg: "p-card-lg"
 };
 var shadowStyles2 = {
   none: "shadow-none",
-  sm: "shadow-sm",
+  sm: "shadow-elevation-card",
   md: "shadow",
-  lg: "shadow-lg"
+  lg: "shadow-elevation-dialog"
 };
 var Card = React6__default.default.forwardRef(
   ({
@@ -3356,7 +3356,7 @@ var Card = React6__default.default.forwardRef(
       {
         ref,
         className: cn(
-          "rounded-md",
+          "rounded-container",
           "transition-all duration-[var(--transition-normal)]",
           variantStyles4[variant],
           paddingStyles2[padding],
@@ -3588,7 +3588,7 @@ var InstallBox = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       Box,
       {
-        className: "bg-surface rounded-md border-[length:var(--border-width)] border-border",
+        className: "bg-surface rounded-container border-[length:var(--border-width)] border-border",
         padding: "md",
         children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -3989,7 +3989,7 @@ var PricingCard = ({
         "hover:-translate-y-1 transition-all",
         highlighted && [
           "border-[length:2px] border-primary",
-          "shadow-lg",
+          "shadow-elevation-dialog",
           "scale-[1.05]",
           "ring-2 ring-primary"
         ],
@@ -4339,8 +4339,8 @@ var statusClasses = {
   busy: "bg-error"
 };
 var badgeSizeClasses = {
-  xs: "w-3 h-3 text-[8px]",
-  sm: "w-4 h-4 text-[10px]",
+  xs: "w-3 h-3 text-xs",
+  sm: "w-4 h-4 text-xs",
   md: "w-5 h-5 text-xs",
   lg: "w-6 h-6 text-sm",
   xl: "w-7 h-7 text-base"

package/dist/marketing/index.js

@@ -3108,7 +3108,7 @@ var sizeStyles2 = {
 };
 var iconSizeStyles = {
   sm: "h-3.5 w-3.5",
-  md: "h-4 w-4",
+  md: "h-icon-default w-icon-default",
   lg: "h-5 w-5"
 };
 function resolveIconProp(value, sizeClass) {
@@ -3180,7 +3180,7 @@ var Button = React6.forwardRef(
         ...props,
         "data-testid": props["data-testid"] ?? (action ? `action-${action}` : void 0),
         children: [
-          isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : resolvedLeftIcon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
+          isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-icon-default w-icon-default animate-spin" }) : resolvedLeftIcon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
           children || label,
           resolvedRightIcon && !isLoading && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: resolvedRightIcon })
         ]
@@ -3276,23 +3276,23 @@ var variantStyles4 = {
   default: [
     "bg-card",
     "border-[length:var(--border-width)] border-border",
-    "shadow-sm",
+    "shadow-elevation-card",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-lg hover:-translate-y-0.5"
+    "hover:shadow-elevation-dialog hover:-translate-y-0.5"
   ].join(" "),
   bordered: [
     "bg-card",
     "border-[length:var(--border-width)] border-border",
-    "shadow-sm",
+    "shadow-elevation-card",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-lg hover:-translate-y-0.5"
+    "hover:shadow-elevation-dialog hover:-translate-y-0.5"
   ].join(" "),
   elevated: [
     "bg-card",
     "border-[length:var(--border-width)] border-border",
     "shadow",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-lg hover:-translate-y-0.5"
+    "hover:shadow-elevation-dialog hover:-translate-y-0.5"
   ].join(" "),
   // Interactive variant with theme-specific hover effects
   interactive: [
@@ -3301,20 +3301,20 @@ var variantStyles4 = {
     "shadow",
     "cursor-pointer",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-lg"
+    "hover:shadow-elevation-dialog"
   ].join(" ")
 };
 var paddingStyles2 = {
   none: "",
-  sm: "p-3",
-  md: "p-4",
-  lg: "p-6"
+  sm: "p-card-sm",
+  md: "p-card-md",
+  lg: "p-card-lg"
 };
 var shadowStyles2 = {
   none: "shadow-none",
-  sm: "shadow-sm",
+  sm: "shadow-elevation-card",
   md: "shadow",
-  lg: "shadow-lg"
+  lg: "shadow-elevation-dialog"
 };
 var Card = React6.forwardRef(
   ({
@@ -3332,7 +3332,7 @@ var Card = React6.forwardRef(
       {
         ref,
         className: cn(
-          "rounded-md",
+          "rounded-container",
           "transition-all duration-[var(--transition-normal)]",
           variantStyles4[variant],
           paddingStyles2[padding],
@@ -3564,7 +3564,7 @@ var InstallBox = ({
     /* @__PURE__ */ jsx(
       Box,
       {
-        className: "bg-surface rounded-md border-[length:var(--border-width)] border-border",
+        className: "bg-surface rounded-container border-[length:var(--border-width)] border-border",
         padding: "md",
         children: /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsx(
@@ -3965,7 +3965,7 @@ var PricingCard = ({
         "hover:-translate-y-1 transition-all",
         highlighted && [
           "border-[length:2px] border-primary",
-          "shadow-lg",
+          "shadow-elevation-dialog",
           "scale-[1.05]",
           "ring-2 ring-primary"
         ],
@@ -4315,8 +4315,8 @@ var statusClasses = {
   busy: "bg-error"
 };
 var badgeSizeClasses = {
-  xs: "w-3 h-3 text-[8px]",
-  sm: "w-4 h-4 text-[10px]",
+  xs: "w-3 h-3 text-xs",
+  sm: "w-4 h-4 text-xs",
   md: "w-5 h-5 text-xs",
   lg: "w-6 h-6 text-sm",
   xl: "w-7 h-7 text-base"