@almadar/ui 5.29.0 → 5.31.0

package/dist/docs/index.d.cts

@@ -291,6 +291,8 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     /** Declarative event key emitted on click for trait dispatch */
     action?: EventKey;
+    /** Shows a skeleton/spinner overlay while true. */
+    loading?: boolean;
 }
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -341,6 +343,8 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
     action?: EventKey;
     /** Input type - supports 'select' and 'textarea' in addition to standard types */
     inputType?: "text" | "email" | "password" | "number" | "tel" | "url" | "search" | "date" | "datetime-local" | "time" | "checkbox" | "select" | "textarea";
+    label?: string;
+    helperText?: string;
     error?: string;
     leftIcon?: IconInput;
     rightIcon?: IconInput;

package/dist/docs/index.js

@@ -1,4 +1,4 @@
-import React7, { useCallback, useState, useRef, useMemo, useEffect, useLayoutEffect, useContext, useSyncExternalStore, createContext } from 'react';
+import React8, { useCallback, useState, useRef, useMemo, useEffect, useLayoutEffect, useContext, useSyncExternalStore, createContext } from 'react';
 import { createLogger } from '@almadar/logger';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as LucideIcons2 from 'lucide-react';
@@ -2771,7 +2771,7 @@ var init_Box = __esm({
       fixed: "fixed",
       sticky: "sticky"
     };
-    Box = React7.forwardRef(
+    Box = React8.forwardRef(
       ({
         padding,
         paddingX,
@@ -2821,7 +2821,7 @@ var init_Box = __esm({
           onMouseLeave?.(e);
         }, [hoverEvent, eventBus, onMouseLeave]);
         const isClickable = action || onClick;
-        return React7.createElement(
+        return React8.createElement(
           Component,
           {
             ref,
@@ -3811,7 +3811,7 @@ var init_Icon = __esm({
       const directIcon = typeof icon === "string" ? void 0 : icon;
       const effectiveName = typeof icon === "string" ? icon : name;
       const family = useIconFamily();
-      const RenderedComponent = React7.useMemo(() => {
+      const RenderedComponent = React8.useMemo(() => {
         if (directIcon) return null;
         return effectiveName ? resolveIconForFamily(effectiveName, family) : null;
       }, [directIcon, effectiveName, family]);
@@ -3870,7 +3870,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
   }
-  if (React7.isValidElement(value)) {
+  if (React8.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && "render" in value) {
@@ -3946,7 +3946,7 @@ var init_Button = __esm({
       md: "h-icon-default w-icon-default",
       lg: "h-icon-default w-icon-default"
     };
-    Button = React7.forwardRef(
+    Button = React8.forwardRef(
       ({
         className,
         variant = "primary",
@@ -4007,11 +4007,54 @@ var init_Button = __esm({
     Button.displayName = "Button";
   }
 });
+var sizeStyles2, Spinner;
+var init_Spinner = __esm({
+  "components/core/atoms/Spinner.tsx"() {
+    init_cn();
+    init_Icon();
+    sizeStyles2 = {
+      xs: "h-3 w-3",
+      sm: "h-icon-default w-icon-default",
+      md: "h-6 w-6",
+      lg: "h-8 w-8"
+    };
+    Spinner = React8.forwardRef(
+      ({ className, size = "md", overlay, ...props }, ref) => {
+        if (overlay) {
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref,
+              className: cn(
+                "absolute inset-0 z-10 flex items-center justify-center",
+                "bg-background/60 backdrop-blur-sm",
+                className
+              ),
+              ...props,
+              children: /* @__PURE__ */ jsx(Icon, { name: "loader", className: cn("animate-spin text-foreground", sizeStyles2[size]) })
+            }
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            className: cn("text-foreground", className),
+            ...props,
+            children: /* @__PURE__ */ jsx(Icon, { name: "loader", className: cn("animate-spin", sizeStyles2[size]) })
+          }
+        );
+      }
+    );
+    Spinner.displayName = "Spinner";
+  }
+});
 var variantStyles3, paddingStyles2, shadowStyles2, lookStyles, Card, CardHeader, CardTitle, CardContent, CardBody, CardFooter;
 var init_Card = __esm({
   "components/core/atoms/Card.tsx"() {
     init_cn();
     init_useEventBus();
+    init_Spinner();
     variantStyles3 = {
       default: [
         "bg-card",
@@ -4065,7 +4108,7 @@ var init_Card = __esm({
       chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
       "tile-image-first": "p-0 overflow-hidden"
     };
-    Card = React7.forwardRef(
+    Card = React8.forwardRef(
       ({
         className,
         variant = "bordered",
@@ -4076,6 +4119,7 @@ var init_Card = __esm({
         look = "elevated",
         children,
         action,
+        loading,
         onClick,
         ...props
       }, ref) => {
@@ -4089,7 +4133,7 @@ var init_Card = __esm({
           {
             ref,
             className: cn(
-              "rounded-container",
+              "rounded-container relative",
               "transition-all duration-[var(--transition-normal)]",
               variantStyles3[variant],
               paddingStyles2[padding],
@@ -4100,6 +4144,7 @@ var init_Card = __esm({
             onClick: handleClick,
             ...props,
             children: [
+              loading && /* @__PURE__ */ jsx(Spinner, { overlay: true, size: "md" }),
               (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
                 title && /* @__PURE__ */ jsx("h3", { className: "text-lg text-card-foreground font-bold", children: title }),
                 subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
@@ -4111,9 +4156,9 @@ var init_Card = __esm({
       }
     );
     Card.displayName = "Card";
-    CardHeader = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
+    CardHeader = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
     CardHeader.displayName = "CardHeader";
-    CardTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "h3",
       {
         ref,
@@ -4126,11 +4171,11 @@ var init_Card = __esm({
       }
     ));
     CardTitle.displayName = "CardTitle";
-    CardContent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+    CardContent = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
     CardContent.displayName = "CardContent";
     CardBody = CardContent;
     CardBody.displayName = "CardBody";
-    CardFooter = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardFooter = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "div",
       {
         ref,
@@ -4729,11 +4774,13 @@ var init_Input = __esm({
     init_Icon();
     init_useTranslate();
     init_useEventBus();
-    Input = React7.forwardRef(
+    Input = React8.forwardRef(
       ({
         className,
         inputType,
         type: htmlType,
+        label,
+        helperText,
         error,
         leftIcon,
         rightIcon,
@@ -4789,82 +4836,95 @@ var init_Input = __esm({
             onClear?.();
           }
         };
+        const wrapField = (field) => /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+          label && /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-foreground mb-1", children: label }),
+          field,
+          (helperText || error) && /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-xs", error ? "text-error" : "text-muted-foreground"), children: error ?? helperText })
+        ] });
         if (type === "select") {
-          return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
-            resolvedLeftIcon && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-muted-foreground", children: resolvedLeftIcon }),
-            /* @__PURE__ */ jsxs(
-              "select",
+          return wrapField(
+            /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+              resolvedLeftIcon && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-muted-foreground", children: resolvedLeftIcon }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  ref,
+                  value,
+                  onChange: handleChange,
+                  className: cn(baseClassName, "appearance-none pr-10", className),
+                  ...props,
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "", children: t("form.selectPlaceholder", { label: "" }) }),
+                    options?.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", className: "h-icon-default w-icon-default" }) })
+            ] })
+          );
+        }
+        if (type === "textarea") {
+          return wrapField(
+            /* @__PURE__ */ jsx("div", { className: "relative w-full", children: /* @__PURE__ */ jsx(
+              "textarea",
               {
                 ref,
                 value,
                 onChange: handleChange,
-                className: cn(baseClassName, "appearance-none pr-10", className),
-                ...props,
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "", children: t("form.selectPlaceholder", { label: "" }) }),
-                  options?.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
-                ]
+                rows,
+                className: baseClassName,
+                ...props
               }
-            ),
-            /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", className: "h-icon-default w-icon-default" }) })
-          ] });
-        }
-        if (type === "textarea") {
-          return /* @__PURE__ */ jsx("div", { className: "relative w-full", children: /* @__PURE__ */ jsx(
-            "textarea",
-            {
-              ref,
-              value,
-              onChange: handleChange,
-              rows,
-              className: baseClassName,
-              ...props
-            }
-          ) });
+            ) })
+          );
         }
         if (type === "checkbox") {
-          return /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref,
-              type: "checkbox",
-              checked: props.checked,
-              onChange: handleChange,
-              className: cn(
-                "h-icon-default w-icon-default rounded-sm",
-                "border-border",
-                "text-primary focus:ring-ring",
-                "disabled:opacity-50 disabled:cursor-not-allowed",
-                className
-              ),
-              ...props
-            }
+          return wrapField(
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref,
+                type: "checkbox",
+                checked: props.checked,
+                onChange: handleChange,
+                className: cn(
+                  "h-icon-default w-icon-default rounded-sm",
+                  "border-border",
+                  "text-primary focus:ring-ring",
+                  "disabled:opacity-50 disabled:cursor-not-allowed",
+                  className
+                ),
+                ...props
+              }
+            )
           );
         }
-        return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
-          resolvedLeftIcon && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-muted-foreground", children: resolvedLeftIcon }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref,
-              type,
-              value,
-              onChange: handleChange,
-              className: baseClassName,
-              ...props
-            }
-          ),
-          showClearButton && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: handleClear,
-              className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground hover:text-foreground",
-              children: /* @__PURE__ */ jsx(Icon, { name: "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: resolveIconNode(rightIcon, iconCls) })
-        ] });
+        return wrapField(
+          /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+            resolvedLeftIcon && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-muted-foreground", children: resolvedLeftIcon }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref,
+                type,
+                value,
+                onChange: handleChange,
+                className: baseClassName,
+                ...props
+              }
+            ),
+            showClearButton && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleClear,
+                className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground hover:text-foreground",
+                children: /* @__PURE__ */ jsx(Icon, { name: "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: resolveIconNode(rightIcon, iconCls) })
+          ] })
+        );
       }
     );
     Input.displayName = "Input";
@@ -5063,7 +5123,7 @@ var init_DocBreadcrumb = __esm({
           "aria-label": t("aria.breadcrumb"),
           children: /* @__PURE__ */ jsx(HStack, { gap: "xs", align: "center", wrap: true, children: items.map((item, idx) => {
             const isLast = idx === items.length - 1;
-            return /* @__PURE__ */ jsxs(React7.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React8.Fragment, { children: [
               idx > 0 && /* @__PURE__ */ jsx(
                 Icon,
                 {
@@ -5121,7 +5181,7 @@ var init_Textarea = __esm({
   "components/core/atoms/Textarea.tsx"() {
     init_cn();
     init_useEventBus();
-    Textarea = React7.forwardRef(
+    Textarea = React8.forwardRef(
       ({ className, error, onChange, ...props }, ref) => {
         const eventBus = useEventBus();
         const handleChange = (e) => {
@@ -5155,7 +5215,7 @@ var init_Textarea = __esm({
     Textarea.displayName = "Textarea";
   }
 });
-var variantStyles5, sizeStyles2, Badge;
+var variantStyles5, sizeStyles3, Badge;
 var init_Badge = __esm({
   "components/core/atoms/Badge.tsx"() {
     init_cn();
@@ -5192,12 +5252,12 @@ var init_Badge = __esm({
         "border-[length:var(--border-width-thin)] border-border"
       ].join(" ")
     };
-    sizeStyles2 = {
+    sizeStyles3 = {
       sm: "px-2 py-0.5 text-xs",
       md: "px-2.5 py-1 text-sm",
       lg: "px-3 py-1.5 text-base"
     };
-    Badge = React7.forwardRef(
+    Badge = React8.forwardRef(
       ({ className, variant = "default", size = "sm", amount, label, icon, children, onRemove, removeLabel, ...props }, ref) => {
         const iconSizes = {
           sm: "h-icon-default w-icon-default",
@@ -5212,7 +5272,7 @@ var init_Badge = __esm({
             className: cn(
               "inline-flex items-center gap-1 font-bold rounded-sm",
               variantStyles5[variant],
-              sizeStyles2[size],
+              sizeStyles3[size],
               onRemove && "pr-1",
               className
             ),
@@ -5246,33 +5306,6 @@ var init_Badge = __esm({
     Badge.displayName = "Badge";
   }
 });
-var sizeStyles3, Spinner;
-var init_Spinner = __esm({
-  "components/core/atoms/Spinner.tsx"() {
-    init_cn();
-    init_Icon();
-    sizeStyles3 = {
-      xs: "h-3 w-3",
-      sm: "h-icon-default w-icon-default",
-      md: "h-6 w-6",
-      lg: "h-8 w-8"
-    };
-    Spinner = React7.forwardRef(
-      ({ className, size = "md", ...props }, ref) => {
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref,
-            className: cn("text-foreground", className),
-            ...props,
-            children: /* @__PURE__ */ jsx(Icon, { name: "loader", className: cn("animate-spin", sizeStyles3[size]) })
-          }
-        );
-      }
-    );
-    Spinner.displayName = "Spinner";
-  }
-});
 
 // components/game/atoms/index.ts
 var init_atoms = __esm({
@@ -5817,7 +5850,7 @@ var init_CodeBlock = __esm({
     };
     LINE_PROPS_FN = (n) => ({ "data-line": String(n - 1) });
     HIDDEN_LINE_NUMBERS = { display: "none" };
-    CodeBlock = React7.memo(
+    CodeBlock = React8.memo(
       ({
         code: rawCode,
         language = "text",