@almadar/ui 4.56.4 → 4.57.0

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
             ]
           }
         );

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
             ]
           }
         );

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>>;

package/dist/components/index.cjs

@@ -1770,7 +1770,7 @@ var init_Badge = __esm({
       lg: "px-3 py-1.5 text-base"
     };
     exports.Badge = React78__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);
@@ -1784,12 +1784,31 @@ var init_Badge = __esm({
               "inline-flex items-center gap-1 font-bold rounded-sm",
               variantStyles3[variant],
               sizeStyles2[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
             ]
           }
         );
@@ -7870,7 +7889,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect71, useRef: useRef66, useCallback: useCallback126, useState: useState108 } = React78__namespace.default;
+      const { useEffect: useEffect71, useRef: useRef66, useCallback: useCallback127, useState: useState109 } = React78__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 }) {
@@ -7915,8 +7934,8 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState108(null);
-        const handleMapClick = useCallback126((lat, lng) => {
+        const [clickedPosition, setClickedPosition] = useState109(null);
+        const handleMapClick = useCallback127((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -7925,7 +7944,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback126((marker) => {
+        const handleMarkerClick = useCallback127((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -28744,6 +28763,98 @@ var init_TagCloud = __esm({
     exports.TagCloud.displayName = "TagCloud";
   }
 });
+exports.TagInput = void 0;
+var init_TagInput = __esm({
+  "components/molecules/TagInput.tsx"() {
+    "use client";
+    init_cn();
+    init_useEventBus();
+    init_Input();
+    init_Badge();
+    init_Stack();
+    init_Typography();
+    exports.TagInput = ({
+      value,
+      onChange,
+      placeholder,
+      disabled = false,
+      variant = "default",
+      unique = true,
+      helperText,
+      className,
+      addEvent,
+      removeEvent
+    }) => {
+      const eventBus = useEventBus();
+      const [draft, setDraft] = React78.useState("");
+      const commit = React78.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 = React78.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 = React78.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(exports.VStack, { gap: "xs", className: cn("w-full", className), children: [
+        value.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: "xs", className: "flex-wrap", children: value.map((tag, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          exports.Badge,
+          {
+            variant,
+            size: "sm",
+            onRemove: disabled ? void 0 : () => removeAt(index),
+            removeLabel: `Remove ${tag}`,
+            children: tag
+          },
+          `${tag}-${index}`
+        )) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          exports.Input,
+          {
+            value: draft,
+            placeholder: placeholder ?? "Type and press Enter\u2026",
+            disabled,
+            onChange: (e) => setDraft(e.target.value),
+            onKeyDown: handleKeyDown
+          }
+        ),
+        helperText ? /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", color: "muted", children: helperText }) : null
+      ] });
+    };
+    exports.TagInput.displayName = "TagInput";
+  }
+});
 exports.ShowcaseCard = void 0;
 var init_ShowcaseCard = __esm({
   "components/molecules/ShowcaseCard.tsx"() {
@@ -32879,6 +32990,7 @@ var init_molecules = __esm({
     init_StepFlow();
     init_SplitSection();
     init_TagCloud();
+    init_TagInput();
     init_CommunityLinks();
     init_TeamCard();
     init_ShowcaseCard();

package/dist/components/index.js

@@ -1724,7 +1724,7 @@ var init_Badge = __esm({
       lg: "px-3 py-1.5 text-base"
     };
     Badge = React78__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);
@@ -1738,12 +1738,31 @@ var init_Badge = __esm({
               "inline-flex items-center gap-1 font-bold rounded-sm",
               variantStyles3[variant],
               sizeStyles2[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
             ]
           }
         );
@@ -7824,7 +7843,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect71, useRef: useRef66, useCallback: useCallback126, useState: useState108 } = React78__default;
+      const { useEffect: useEffect71, useRef: useRef66, useCallback: useCallback127, useState: useState109 } = React78__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 }) {
@@ -7869,8 +7888,8 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState108(null);
-        const handleMapClick = useCallback126((lat, lng) => {
+        const [clickedPosition, setClickedPosition] = useState109(null);
+        const handleMapClick = useCallback127((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -7879,7 +7898,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback126((marker) => {
+        const handleMarkerClick = useCallback127((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -28698,6 +28717,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"() {
@@ -32833,6 +32944,7 @@ var init_molecules = __esm({
     init_StepFlow();
     init_SplitSection();
     init_TagCloud();
+    init_TagInput();
     init_CommunityLinks();
     init_TeamCard();
     init_ShowcaseCard();
@@ -49006,4 +49118,4 @@ function useGitHubBranches(owner, repo, enabled = true) {
   });
 }
 
-export { ALL_PRESETS, ALMADAR_DND_MIME, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BehaviorView, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, ClassifierBoard, CodeBlock, CodeExample, CodeView, CodeViewer, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DEFAULT_SLOTS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBox, DialogueBubble, Divider, DocBreadcrumb, DocCodeBlock, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FeatureRenderer2 as FeatureRenderer, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, HStack, Header, Heading, HealthBar, HealthPanel, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingStatCard, MasterDetail, MasterDetailLayout, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NotifyListener, NumberStepper, ObjectRulePanel, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerCanvas, Popover, PositionedCanvas, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PullQuote, PullToRefresh, QrScanner, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, Table, Tabs, TagCloud, TeamCard, TeamOrganism, TerrainPalette, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, clearEntities, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createTranslate, createUnitAnimationState, drawSprite, generateCombatMessage, getAllEntities, getByType, getCurrentFrame, getEntity, getSingleton, getTileDimensions, inferDirection, isoToScreen, mapBookData, parseQueryBinding, pendulum, projectileMotion, removeEntity, resolveFieldMap, resolveFrame, resolveSheetDirection, screenToIso, spawnEntity, springOscillator, tickAnimationState, transitionAnimation, updateEntity, updateSingleton, useAgentChat, useAuthContext, useBattleState, useCamera, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEntities, useEntitiesByType, useEntity as useEntityById, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGameAudioContext, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useInput, useLongPress, useOrbitalHistory, usePhysics, usePhysics2D, usePinchZoom, usePlayer, usePreview, usePullToRefresh, useQuerySingleton, useSingletonEntity, useSpriteAnimations, useSwipeGesture, useTraitListens, useTranslate, useUIEvents, useUISlotManager, useValidation };
+export { ALL_PRESETS, ALMADAR_DND_MIME, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BehaviorView, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, ClassifierBoard, CodeBlock, CodeExample, CodeView, CodeViewer, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DEFAULT_SLOTS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBox, DialogueBubble, Divider, DocBreadcrumb, DocCodeBlock, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FeatureRenderer2 as FeatureRenderer, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, HStack, Header, Heading, HealthBar, HealthPanel, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingStatCard, MasterDetail, MasterDetailLayout, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NotifyListener, NumberStepper, ObjectRulePanel, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerCanvas, Popover, PositionedCanvas, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PullQuote, PullToRefresh, QrScanner, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, Table, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, clearEntities, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createTranslate, createUnitAnimationState, drawSprite, generateCombatMessage, getAllEntities, getByType, getCurrentFrame, getEntity, getSingleton, getTileDimensions, inferDirection, isoToScreen, mapBookData, parseQueryBinding, pendulum, projectileMotion, removeEntity, resolveFieldMap, resolveFrame, resolveSheetDirection, screenToIso, spawnEntity, springOscillator, tickAnimationState, transitionAnimation, updateEntity, updateSingleton, useAgentChat, useAuthContext, useBattleState, useCamera, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEntities, useEntitiesByType, useEntity as useEntityById, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGameAudioContext, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useInput, useLongPress, useOrbitalHistory, usePhysics, usePhysics2D, usePinchZoom, usePlayer, usePreview, usePullToRefresh, useQuerySingleton, useSingletonEntity, useSpriteAnimations, useSwipeGesture, useTraitListens, useTranslate, useUIEvents, useUISlotManager, useValidation };

package/dist/components/molecules/TagInput.d.ts

@@ -0,0 +1,52 @@
+/**
+ * TagInput Molecule Component
+ *
+ * Free-form chip editor for `string[]` values. The user types into an
+ * `Input` and presses Enter to commit; each committed value renders as
+ * a removable `Badge` (`onRemove` X-chip). Backspace on an empty input
+ * deletes the most recently added chip. Optional `unique` flag
+ * (default true) suppresses duplicate entries.
+ *
+ * **Atomic Design**: Composed using `Input`, `Badge`, `Typography`,
+ * `HStack`, `VStack` atoms — no raw HTML. Generic primitive; no entity
+ * binding.
+ *
+ * Event contract (mirrors DataList / FilterGroup):
+ * - Emits `UI:{addEvent}` with `{ tag, value }` when a chip is added.
+ * - Emits `UI:{removeEvent}` with `{ tag, index, value }` when a chip
+ *   is removed.
+ * - `onChange` callback stays as the direct / Storybook contract.
+ *
+ * Used by the studio Questionnaire for the `tagList` input type
+ * (`[string]` config knobs without `enumValues`).
+ */
+import React from 'react';
+import type { EventKey } from '@almadar/core';
+import { type BadgeVariant } from '../atoms/Badge';
+export interface TagInputProps {
+    /** Current list of tags. */
+    value: ReadonlyArray<string>;
+    /** Direct callback emitted on every change. Stays as the
+     *  Storybook / non-trait contract; trait-driven schemas should prefer
+     *  the bus events below. */
+    onChange?: (next: ReadonlyArray<string>) => void;
+    /** Placeholder for the entry input. Default: `"Type and press Enter…"`. */
+    placeholder?: string;
+    /** Disable add + remove interactions. */
+    disabled?: boolean;
+    /** Variant applied to each chip Badge. Default: `'default'`. */
+    variant?: BadgeVariant;
+    /** Suppress duplicate entries. Default: `true`. */
+    unique?: boolean;
+    /** Helper text rendered under the input. */
+    helperText?: string;
+    /** Additional CSS classes applied to the outer container. */
+    className?: string;
+    /** Event emitted when a tag is added: `UI:{addEvent}` with payload
+     *  `{ tag: string, value: string[] }`. */
+    addEvent?: EventKey;
+    /** Event emitted when a tag is removed: `UI:{removeEvent}` with
+     *  payload `{ tag: string, index: number, value: string[] }`. */
+    removeEvent?: EventKey;
+}
+export declare const TagInput: React.FC<TagInputProps>;

package/dist/components/molecules/index.d.ts

@@ -75,6 +75,7 @@ export { SocialProof, type SocialProofProps, type SocialProofItem } from './Soci
 export { StepFlow, type StepFlowProps, type StepItemProps } from './StepFlow';
 export { SplitSection, type SplitSectionProps } from './SplitSection';
 export { TagCloud, type TagCloudProps, type TagCloudItem } from './TagCloud';
+export { TagInput, type TagInputProps } from './TagInput';
 export { CommunityLinks, type CommunityLinksProps } from './CommunityLinks';
 export { TeamCard, type TeamCardProps } from './TeamCard';
 export { ShowcaseCard, type ShowcaseCardProps } from './ShowcaseCard';

package/dist/marketing/index.cjs

@@ -3251,7 +3251,7 @@ var sizeStyles3 = {
   lg: "px-3 py-1.5 text-base"
 };
 var Badge = React6__default.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 iconSizes = { 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);
@@ -3265,12 +3265,31 @@ var Badge = React6__default.default.forwardRef(
           "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: iconSizes[size] })
+            }
+          ) : null
         ]
       }
     );

package/dist/marketing/index.d.cts

@@ -203,6 +203,13 @@ 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;
 }
 declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
 

package/dist/marketing/index.js

@@ -2,7 +2,7 @@ import React6, { createContext, useCallback, useState, useRef, useEffect, useCon
 import { createLogger } from '@almadar/logger';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as LucideIcons from 'lucide-react';
-import { Loader2, Check, User } from 'lucide-react';
+import { Loader2, X, Check, User } from 'lucide-react';
 
 // node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -3227,7 +3227,7 @@ var sizeStyles3 = {
   lg: "px-3 py-1.5 text-base"
 };
 var Badge = React6.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 iconSizes = { 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);
@@ -3241,12 +3241,31 @@ var Badge = React6.forwardRef(
           "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: iconSizes[size] })
+            }
+          ) : null
         ]
       }
     );

package/dist/providers/index.cjs

@@ -1617,7 +1617,7 @@ var init_Badge = __esm({
       lg: "px-3 py-1.5 text-base"
     };
     Badge = React84__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);
@@ -1631,12 +1631,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
             ]
           }
         );

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
             ]
           }
         );

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
             ]
           }
         );

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
             ]
           }
         );

package/package.json

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