@almadar/ui 4.56.4 → 4.57.2

package/dist/runtime/index.cjs

@@ -1901,7 +1901,7 @@ var init_Badge = __esm({
       lg: "px-3 py-1.5 text-base"
     };
     Badge = React83__namespace.default.forwardRef(
-      ({ className, variant = "default", size = "sm", amount, label, icon, children, ...props }, ref) => {
+      ({ className, variant = "default", size = "sm", amount, label, icon, children, onRemove, removeLabel, ...props }, ref) => {
         const iconSizes3 = { sm: "w-3 h-3", md: "w-3.5 h-3.5", lg: "w-4 h-4" };
         const resolvedIcon = typeof icon === "string" ? (() => {
           const I = resolveIcon(icon);
@@ -1915,12 +1915,31 @@ var init_Badge = __esm({
               "inline-flex items-center gap-1 font-bold rounded-sm",
               variantStyles3[variant],
               sizeStyles3[size],
+              onRemove && "pr-1",
               className
             ),
             ...props,
             children: [
               resolvedIcon,
-              children || (amount != null ? `${label ? `${label} ` : ""}${amount}` : label)
+              children || (amount != null ? `${label ? `${label} ` : ""}${amount}` : label),
+              onRemove ? /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": removeLabel ?? "Remove",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onRemove();
+                  },
+                  className: cn(
+                    "inline-flex items-center justify-center rounded-sm",
+                    "hover:bg-foreground/10 focus:outline-none focus:ring-1 focus:ring-ring",
+                    "transition-colors",
+                    size === "sm" ? "w-4 h-4 ml-0.5" : size === "md" ? "w-5 h-5 ml-1" : "w-6 h-6 ml-1"
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: iconSizes3[size] })
+                }
+              ) : null
             ]
           }
         );
@@ -9326,7 +9345,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect69, useRef: useRef65, useCallback: useCallback112, useState: useState100 } = React83__namespace.default;
+      const { useEffect: useEffect69, useRef: useRef65, useCallback: useCallback113, useState: useState101 } = React83__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -9371,8 +9390,8 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState100(null);
-        const handleMapClick = useCallback112((lat, lng) => {
+        const [clickedPosition, setClickedPosition] = useState101(null);
+        const handleMapClick = useCallback113((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -9381,7 +9400,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback112((marker) => {
+        const handleMarkerClick = useCallback113((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -29264,6 +29283,98 @@ var init_TagCloud = __esm({
     TagCloud.displayName = "TagCloud";
   }
 });
+var TagInput;
+var init_TagInput = __esm({
+  "components/molecules/TagInput.tsx"() {
+    "use client";
+    init_cn();
+    init_useEventBus();
+    init_Input();
+    init_Badge();
+    init_Stack();
+    init_Typography();
+    TagInput = ({
+      value,
+      onChange,
+      placeholder,
+      disabled = false,
+      variant = "default",
+      unique = true,
+      helperText,
+      className,
+      addEvent,
+      removeEvent
+    }) => {
+      const eventBus = useEventBus();
+      const [draft, setDraft] = React83.useState("");
+      const commit = React83.useCallback(() => {
+        const tag = draft.trim();
+        if (!tag) return;
+        if (unique && value.includes(tag)) {
+          setDraft("");
+          return;
+        }
+        const next = [...value, tag];
+        onChange?.(next);
+        if (addEvent) {
+          eventBus.emit(`UI:${addEvent}`, { tag, value: next });
+        }
+        setDraft("");
+      }, [draft, value, onChange, unique, addEvent, eventBus]);
+      const removeAt = React83.useCallback(
+        (index) => {
+          if (disabled) return;
+          const tag = value[index];
+          const next = value.slice();
+          next.splice(index, 1);
+          onChange?.(next);
+          if (removeEvent) {
+            eventBus.emit(`UI:${removeEvent}`, { tag, index, value: next });
+          }
+        },
+        [value, onChange, disabled, removeEvent, eventBus]
+      );
+      const handleKeyDown = React83.useCallback(
+        (e) => {
+          if (disabled) return;
+          if (e.key === "Enter") {
+            e.preventDefault();
+            commit();
+          } else if (e.key === "Backspace" && draft.length === 0 && value.length > 0) {
+            e.preventDefault();
+            removeAt(value.length - 1);
+          }
+        },
+        [commit, draft.length, value, removeAt, disabled]
+      );
+      return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", className: cn("w-full", className), children: [
+        value.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "xs", className: "flex-wrap", children: value.map((tag, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          Badge,
+          {
+            variant,
+            size: "sm",
+            onRemove: disabled ? void 0 : () => removeAt(index),
+            removeLabel: `Remove ${tag}`,
+            children: tag
+          },
+          `${tag}-${index}`
+        )) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            value: draft,
+            placeholder: placeholder ?? "Type and press Enter\u2026",
+            disabled,
+            onChange: (e) => setDraft(e.target.value),
+            onKeyDown: handleKeyDown
+          }
+        ),
+        helperText ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "muted", children: helperText }) : null
+      ] });
+    };
+    TagInput.displayName = "TagInput";
+  }
+});
 var ShowcaseCard;
 var init_ShowcaseCard = __esm({
   "components/molecules/ShowcaseCard.tsx"() {
@@ -32882,6 +32993,75 @@ var init_GradientDivider = __esm({
     GradientDivider.displayName = "GradientDivider";
   }
 });
+var MarketingFooter;
+var init_MarketingFooter = __esm({
+  "components/molecules/MarketingFooter.tsx"() {
+    "use client";
+    init_cn();
+    init_Box();
+    init_Stack();
+    init_Typography();
+    MarketingFooter = ({
+      columns,
+      copyright,
+      logo,
+      className
+    }) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Box,
+        {
+          as: "footer",
+          className: cn(
+            "bg-surface",
+            "border-t border-border",
+            "pt-12 pb-8 px-4",
+            className
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "lg", className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "lg", align: "start", className: "flex-wrap w-full justify-between", children: [
+              logo && /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "sm", className: "min-w-[140px] mb-4", children: logo.href ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: logo.href, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo.src, alt: logo.alt, className: "h-8 w-auto" }) }) : /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo.src, alt: logo.alt, className: "h-8 w-auto" }) }),
+              columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", className: "min-w-[140px] mb-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Typography,
+                  {
+                    variant: "body2",
+                    className: "font-semibold text-foreground mb-1",
+                    children: col.title
+                  }
+                ),
+                col.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "a",
+                  {
+                    href: item.href,
+                    className: cn(
+                      "text-sm no-underline",
+                      "text-foreground/60",
+                      "hover:text-accent",
+                      "transition-colors duration-150"
+                    ),
+                    target: item.href.startsWith("http") ? "_blank" : void 0,
+                    rel: item.href.startsWith("http") ? "noopener noreferrer" : void 0,
+                    children: item.label
+                  },
+                  item.label
+                ))
+              ] }, col.title))
+            ] }),
+            copyright && /* @__PURE__ */ jsxRuntime.jsx(
+              Typography,
+              {
+                variant: "caption",
+                className: "text-foreground/30 text-center w-full pt-6",
+                children: copyright
+              }
+            )
+          ] })
+        }
+      );
+    };
+    MarketingFooter.displayName = "MarketingFooter";
+  }
+});
 var PullQuote;
 var init_PullQuote = __esm({
   "components/molecules/PullQuote.tsx"() {
@@ -44637,6 +44817,7 @@ var init_component_registry_generated = __esm({
     init_List();
     init_LoadingState();
     init_MarkdownContent();
+    init_MarketingFooter();
     init_MasterDetail();
     init_MasterDetailLayout();
     init_MatrixQuestion();
@@ -44736,6 +44917,7 @@ var init_component_registry_generated = __esm({
     init_Table();
     init_Tabs();
     init_TagCloud();
+    init_TagInput();
     init_TeamCard();
     init_TeamOrganism();
     init_TextHighlight();
@@ -44936,6 +45118,7 @@ var init_component_registry_generated = __esm({
       "MapView": MapViewPattern,
       "MapViewPattern": MapViewPattern,
       "MarkdownContent": MarkdownContent,
+      "MarketingFooter": MarketingFooter,
       "MasterDetail": MasterDetail,
       "MasterDetailLayout": MasterDetailLayout,
       "MatrixQuestion": MatrixQuestion,
@@ -45051,6 +45234,7 @@ var init_component_registry_generated = __esm({
       "Table": Table,
       "Tabs": Tabs,
       "TagCloud": TagCloud,
+      "TagInput": TagInput,
       "TeamCard": TeamCard,
       "TeamOrganism": TeamOrganism,
       "TextHighlight": TextHighlight,

package/dist/runtime/index.js

@@ -1855,7 +1855,7 @@ var init_Badge = __esm({
       lg: "px-3 py-1.5 text-base"
     };
     Badge = React83__default.forwardRef(
-      ({ className, variant = "default", size = "sm", amount, label, icon, children, ...props }, ref) => {
+      ({ className, variant = "default", size = "sm", amount, label, icon, children, onRemove, removeLabel, ...props }, ref) => {
         const iconSizes3 = { sm: "w-3 h-3", md: "w-3.5 h-3.5", lg: "w-4 h-4" };
         const resolvedIcon = typeof icon === "string" ? (() => {
           const I = resolveIcon(icon);
@@ -1869,12 +1869,31 @@ var init_Badge = __esm({
               "inline-flex items-center gap-1 font-bold rounded-sm",
               variantStyles3[variant],
               sizeStyles3[size],
+              onRemove && "pr-1",
               className
             ),
             ...props,
             children: [
               resolvedIcon,
-              children || (amount != null ? `${label ? `${label} ` : ""}${amount}` : label)
+              children || (amount != null ? `${label ? `${label} ` : ""}${amount}` : label),
+              onRemove ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": removeLabel ?? "Remove",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onRemove();
+                  },
+                  className: cn(
+                    "inline-flex items-center justify-center rounded-sm",
+                    "hover:bg-foreground/10 focus:outline-none focus:ring-1 focus:ring-ring",
+                    "transition-colors",
+                    size === "sm" ? "w-4 h-4 ml-0.5" : size === "md" ? "w-5 h-5 ml-1" : "w-6 h-6 ml-1"
+                  ),
+                  children: /* @__PURE__ */ jsx(X, { className: iconSizes3[size] })
+                }
+              ) : null
             ]
           }
         );
@@ -9280,7 +9299,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect69, useRef: useRef65, useCallback: useCallback112, useState: useState100 } = React83__default;
+      const { useEffect: useEffect69, useRef: useRef65, useCallback: useCallback113, useState: useState101 } = React83__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -9325,8 +9344,8 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState100(null);
-        const handleMapClick = useCallback112((lat, lng) => {
+        const [clickedPosition, setClickedPosition] = useState101(null);
+        const handleMapClick = useCallback113((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -9335,7 +9354,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback112((marker) => {
+        const handleMarkerClick = useCallback113((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -29218,6 +29237,98 @@ var init_TagCloud = __esm({
     TagCloud.displayName = "TagCloud";
   }
 });
+var TagInput;
+var init_TagInput = __esm({
+  "components/molecules/TagInput.tsx"() {
+    "use client";
+    init_cn();
+    init_useEventBus();
+    init_Input();
+    init_Badge();
+    init_Stack();
+    init_Typography();
+    TagInput = ({
+      value,
+      onChange,
+      placeholder,
+      disabled = false,
+      variant = "default",
+      unique = true,
+      helperText,
+      className,
+      addEvent,
+      removeEvent
+    }) => {
+      const eventBus = useEventBus();
+      const [draft, setDraft] = useState("");
+      const commit = useCallback(() => {
+        const tag = draft.trim();
+        if (!tag) return;
+        if (unique && value.includes(tag)) {
+          setDraft("");
+          return;
+        }
+        const next = [...value, tag];
+        onChange?.(next);
+        if (addEvent) {
+          eventBus.emit(`UI:${addEvent}`, { tag, value: next });
+        }
+        setDraft("");
+      }, [draft, value, onChange, unique, addEvent, eventBus]);
+      const removeAt = useCallback(
+        (index) => {
+          if (disabled) return;
+          const tag = value[index];
+          const next = value.slice();
+          next.splice(index, 1);
+          onChange?.(next);
+          if (removeEvent) {
+            eventBus.emit(`UI:${removeEvent}`, { tag, index, value: next });
+          }
+        },
+        [value, onChange, disabled, removeEvent, eventBus]
+      );
+      const handleKeyDown = useCallback(
+        (e) => {
+          if (disabled) return;
+          if (e.key === "Enter") {
+            e.preventDefault();
+            commit();
+          } else if (e.key === "Backspace" && draft.length === 0 && value.length > 0) {
+            e.preventDefault();
+            removeAt(value.length - 1);
+          }
+        },
+        [commit, draft.length, value, removeAt, disabled]
+      );
+      return /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: cn("w-full", className), children: [
+        value.length > 0 ? /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-wrap", children: value.map((tag, index) => /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant,
+            size: "sm",
+            onRemove: disabled ? void 0 : () => removeAt(index),
+            removeLabel: `Remove ${tag}`,
+            children: tag
+          },
+          `${tag}-${index}`
+        )) }) : null,
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: draft,
+            placeholder: placeholder ?? "Type and press Enter\u2026",
+            disabled,
+            onChange: (e) => setDraft(e.target.value),
+            onKeyDown: handleKeyDown
+          }
+        ),
+        helperText ? /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: helperText }) : null
+      ] });
+    };
+    TagInput.displayName = "TagInput";
+  }
+});
 var ShowcaseCard;
 var init_ShowcaseCard = __esm({
   "components/molecules/ShowcaseCard.tsx"() {
@@ -32836,6 +32947,75 @@ var init_GradientDivider = __esm({
     GradientDivider.displayName = "GradientDivider";
   }
 });
+var MarketingFooter;
+var init_MarketingFooter = __esm({
+  "components/molecules/MarketingFooter.tsx"() {
+    "use client";
+    init_cn();
+    init_Box();
+    init_Stack();
+    init_Typography();
+    MarketingFooter = ({
+      columns,
+      copyright,
+      logo,
+      className
+    }) => {
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          as: "footer",
+          className: cn(
+            "bg-surface",
+            "border-t border-border",
+            "pt-12 pb-8 px-4",
+            className
+          ),
+          children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
+            /* @__PURE__ */ jsxs(HStack, { gap: "lg", align: "start", className: "flex-wrap w-full justify-between", children: [
+              logo && /* @__PURE__ */ jsx(VStack, { gap: "sm", className: "min-w-[140px] mb-4", children: logo.href ? /* @__PURE__ */ jsx("a", { href: logo.href, children: /* @__PURE__ */ jsx("img", { src: logo.src, alt: logo.alt, className: "h-8 w-auto" }) }) : /* @__PURE__ */ jsx("img", { src: logo.src, alt: logo.alt, className: "h-8 w-auto" }) }),
+              columns.map((col) => /* @__PURE__ */ jsxs(VStack, { gap: "sm", className: "min-w-[140px] mb-4", children: [
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "body2",
+                    className: "font-semibold text-foreground mb-1",
+                    children: col.title
+                  }
+                ),
+                col.items.map((item) => /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: item.href,
+                    className: cn(
+                      "text-sm no-underline",
+                      "text-foreground/60",
+                      "hover:text-accent",
+                      "transition-colors duration-150"
+                    ),
+                    target: item.href.startsWith("http") ? "_blank" : void 0,
+                    rel: item.href.startsWith("http") ? "noopener noreferrer" : void 0,
+                    children: item.label
+                  },
+                  item.label
+                ))
+              ] }, col.title))
+            ] }),
+            copyright && /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "caption",
+                className: "text-foreground/30 text-center w-full pt-6",
+                children: copyright
+              }
+            )
+          ] })
+        }
+      );
+    };
+    MarketingFooter.displayName = "MarketingFooter";
+  }
+});
 var PullQuote;
 var init_PullQuote = __esm({
   "components/molecules/PullQuote.tsx"() {
@@ -44591,6 +44771,7 @@ var init_component_registry_generated = __esm({
     init_List();
     init_LoadingState();
     init_MarkdownContent();
+    init_MarketingFooter();
     init_MasterDetail();
     init_MasterDetailLayout();
     init_MatrixQuestion();
@@ -44690,6 +44871,7 @@ var init_component_registry_generated = __esm({
     init_Table();
     init_Tabs();
     init_TagCloud();
+    init_TagInput();
     init_TeamCard();
     init_TeamOrganism();
     init_TextHighlight();
@@ -44890,6 +45072,7 @@ var init_component_registry_generated = __esm({
       "MapView": MapViewPattern,
       "MapViewPattern": MapViewPattern,
       "MarkdownContent": MarkdownContent,
+      "MarketingFooter": MarketingFooter,
       "MasterDetail": MasterDetail,
       "MasterDetailLayout": MasterDetailLayout,
       "MatrixQuestion": MatrixQuestion,
@@ -45005,6 +45188,7 @@ var init_component_registry_generated = __esm({
       "Table": Table,
       "Tabs": Tabs,
       "TagCloud": TagCloud,
+      "TagInput": TagInput,
       "TeamCard": TeamCard,
       "TeamOrganism": TeamOrganism,
       "TextHighlight": TextHighlight,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "4.56.4",
+  "version": "4.57.2",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [