@almadar/ui 4.56.4 → 4.57.1

package/dist/providers/index.js

@@ -1571,7 +1571,7 @@ var init_Badge = __esm({
       lg: "px-3 py-1.5 text-base"
     };
     Badge = React84__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);
@@ -1585,12 +1585,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
             ]
           }
         );
@@ -9392,7 +9411,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect68, useRef: useRef65, useCallback: useCallback112, useState: useState97 } = React84__default;
+      const { useEffect: useEffect68, useRef: useRef65, useCallback: useCallback113, useState: useState98 } = React84__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 }) {
@@ -9437,8 +9456,8 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState97(null);
-        const handleMapClick = useCallback112((lat, lng) => {
+        const [clickedPosition, setClickedPosition] = useState98(null);
+        const handleMapClick = useCallback113((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -9447,7 +9466,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 });
@@ -29651,6 +29670,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"() {
@@ -45104,6 +45215,7 @@ var init_component_registry_generated = __esm({
     init_Table();
     init_Tabs();
     init_TagCloud();
+    init_TagInput();
     init_TeamCard();
     init_TeamOrganism();
     init_TextHighlight();
@@ -45419,6 +45531,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.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"() {
@@ -44736,6 +44847,7 @@ var init_component_registry_generated = __esm({
     init_Table();
     init_Tabs();
     init_TagCloud();
+    init_TagInput();
     init_TeamCard();
     init_TeamOrganism();
     init_TextHighlight();
@@ -45051,6 +45163,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"() {
@@ -44690,6 +44801,7 @@ var init_component_registry_generated = __esm({
     init_Table();
     init_Tabs();
     init_TagCloud();
+    init_TagInput();
     init_TeamCard();
     init_TeamOrganism();
     init_TextHighlight();
@@ -45005,6 +45117,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.1",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [