@almadar/ui 4.56.4 → 4.57.2

package/dist/avl/index.cjs

@@ -6432,7 +6432,7 @@ var init_Badge = __esm({
       lg: "px-3 py-1.5 text-base"
     };
     Badge = React96__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);
@@ -6446,12 +6446,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
             ]
           }
         );
@@ -13813,7 +13832,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect88, useRef: useRef88, useCallback: useCallback128, useState: useState122 } = React96__namespace.default;
+      const { useEffect: useEffect88, useRef: useRef88, useCallback: useCallback129, useState: useState123 } = React96__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -13858,8 +13877,8 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus3();
-        const [clickedPosition, setClickedPosition] = useState122(null);
-        const handleMapClick = useCallback128((lat, lng) => {
+        const [clickedPosition, setClickedPosition] = useState123(null);
+        const handleMapClick = useCallback129((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -13868,7 +13887,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback128((marker) => {
+        const handleMarkerClick = useCallback129((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -33285,6 +33304,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] = React96.useState("");
+      const commit = React96.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 = React96.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 = React96.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"() {
@@ -36903,6 +37014,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"() {
@@ -53744,6 +53924,7 @@ var init_component_registry_generated = __esm({
     init_List();
     init_LoadingState();
     init_MarkdownContent();
+    init_MarketingFooter();
     init_MasterDetail();
     init_MasterDetailLayout();
     init_MatrixQuestion();
@@ -53843,6 +54024,7 @@ var init_component_registry_generated = __esm({
     init_Table();
     init_Tabs();
     init_TagCloud();
+    init_TagInput();
     init_TeamCard();
     init_TeamOrganism();
     init_TextHighlight();
@@ -54043,6 +54225,7 @@ var init_component_registry_generated = __esm({
       "MapView": MapViewPattern,
       "MapViewPattern": MapViewPattern,
       "MarkdownContent": MarkdownContent,
+      "MarketingFooter": MarketingFooter,
       "MasterDetail": MasterDetail,
       "MasterDetailLayout": MasterDetailLayout,
       "MatrixQuestion": MatrixQuestion,
@@ -54158,6 +54341,7 @@ var init_component_registry_generated = __esm({
       "Table": Table,
       "Tabs": Tabs,
       "TagCloud": TagCloud,
+      "TagInput": TagInput,
       "TeamCard": TeamCard,
       "TeamOrganism": TeamOrganism,
       "TextHighlight": TextHighlight,

package/dist/avl/index.js

@@ -6,7 +6,7 @@ import { createLogger, isLogLevelEnabled } from '@almadar/logger';
 import ELK from 'elkjs/lib/elk.bundled.js';
 import { MarkerType, Handle, Position, getBezierPath, EdgeLabelRenderer, BaseEdge, ReactFlowProvider, useNodesState, useEdgesState, useReactFlow, ReactFlow, Controls, Background, BackgroundVariant } from '@xyflow/react';
 import * as LucideIcons from 'lucide-react';
-import { Loader2, ChevronDown, X, Check, Copy, AlertTriangle, Info, AlertCircle, CheckCircle, List, Printer, ChevronRight, ChevronLeft, GitBranch, Pencil, Eye, Plus, ArrowRight, Trash, Code, FileText, WrapText, Trash2, Menu as Menu$1, Search, Bell, LogOut, ZoomOut, ZoomIn, Download, FileQuestion, Inbox, XCircle, Filter, Pause, Play, RotateCcw, Package, Calendar, MoreHorizontal, Image as Image$1, Upload, Minus, ArrowLeft, Camera, RefreshCw, HelpCircle, ChevronUp, MessageSquare, Flag, Type, Heading1, Heading2, Heading3, ListOrdered, Quote, Eraser, Star, TrendingUp, TrendingDown, ArrowUp, ArrowDown, MoreVertical, Sun, Moon, Circle, Clock, CheckCircle2, FileWarning, GitCommit, AlignLeft, Columns, SkipForward, Bug, Send, Wrench, User, Tag, DollarSign, Coffee, Users, Zap, Sword, Move, Heart, Shield } from 'lucide-react';
+import { Loader2, X, ChevronDown, Check, Copy, AlertTriangle, Info, AlertCircle, CheckCircle, List, Printer, ChevronRight, ChevronLeft, GitBranch, Pencil, Eye, Plus, ArrowRight, Trash, Code, FileText, WrapText, Trash2, Menu as Menu$1, Search, Bell, LogOut, ZoomOut, ZoomIn, Download, FileQuestion, Inbox, XCircle, Filter, Pause, Play, RotateCcw, Package, Calendar, MoreHorizontal, Image as Image$1, Upload, Minus, ArrowLeft, Camera, RefreshCw, HelpCircle, ChevronUp, MessageSquare, Flag, Type, Heading1, Heading2, Heading3, ListOrdered, Quote, Eraser, Star, TrendingUp, TrendingDown, ArrowUp, ArrowDown, MoreVertical, Sun, Moon, Circle, Clock, CheckCircle2, FileWarning, GitCommit, AlignLeft, Columns, SkipForward, Bug, Send, Wrench, User, Tag, DollarSign, Coffee, Users, Zap, Sword, Move, Heart, Shield } from 'lucide-react';
 import { evaluate, createMinimalContext } from '@almadar/evaluator';
 import { createPortal } from 'react-dom';
 import { Link, Outlet, useLocation } from 'react-router-dom';
@@ -6386,7 +6386,7 @@ var init_Badge = __esm({
       lg: "px-3 py-1.5 text-base"
     };
     Badge = React96__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);
@@ -6400,12 +6400,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
             ]
           }
         );
@@ -13767,7 +13786,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect88, useRef: useRef88, useCallback: useCallback128, useState: useState122 } = React96__default;
+      const { useEffect: useEffect88, useRef: useRef88, useCallback: useCallback129, useState: useState123 } = React96__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -13812,8 +13831,8 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus3();
-        const [clickedPosition, setClickedPosition] = useState122(null);
-        const handleMapClick = useCallback128((lat, lng) => {
+        const [clickedPosition, setClickedPosition] = useState123(null);
+        const handleMapClick = useCallback129((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -13822,7 +13841,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback128((marker) => {
+        const handleMarkerClick = useCallback129((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -33239,6 +33258,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"() {
@@ -36857,6 +36968,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"() {
@@ -53698,6 +53878,7 @@ var init_component_registry_generated = __esm({
     init_List();
     init_LoadingState();
     init_MarkdownContent();
+    init_MarketingFooter();
     init_MasterDetail();
     init_MasterDetailLayout();
     init_MatrixQuestion();
@@ -53797,6 +53978,7 @@ var init_component_registry_generated = __esm({
     init_Table();
     init_Tabs();
     init_TagCloud();
+    init_TagInput();
     init_TeamCard();
     init_TeamOrganism();
     init_TextHighlight();
@@ -53997,6 +54179,7 @@ var init_component_registry_generated = __esm({
       "MapView": MapViewPattern,
       "MapViewPattern": MapViewPattern,
       "MarkdownContent": MarkdownContent,
+      "MarketingFooter": MarketingFooter,
       "MasterDetail": MasterDetail,
       "MasterDetailLayout": MasterDetailLayout,
       "MatrixQuestion": MatrixQuestion,
@@ -54112,6 +54295,7 @@ var init_component_registry_generated = __esm({
       "Table": Table,
       "Tabs": Tabs,
       "TagCloud": TagCloud,
+      "TagInput": TagInput,
       "TeamCard": TeamCard,
       "TeamOrganism": TeamOrganism,
       "TextHighlight": TextHighlight,

package/dist/components/atoms/Badge.d.ts

@@ -12,5 +12,12 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     label?: string | number;
     /** Icon name (Lucide icon string) or React node */
     icon?: React.ReactNode;
+    /** When set, renders a small X button on the right of the badge that
+     *  invokes this handler — turns the badge into a removable chip.
+     *  Used by the TagInput molecule and other "list of removable values"
+     *  surfaces. */
+    onRemove?: () => void;
+    /** Accessible label for the remove button. Defaults to "Remove". */
+    removeLabel?: string;
 }
 export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;