@borisj74/bv-ds 0.1.9 → 0.1.11

package/dist/index.cjs

@@ -29592,6 +29592,156 @@ function CommandShortcut({ keys: keys2, className }) {
     i
   )) });
 }
+var inputSizeClasses = {
+  sm: "px-lg py-md text-sm",
+  md: "px-lg py-md text-md",
+  lg: "px-[14px] py-2.5 text-md"
+};
+function boxClasses(destructive) {
+  return clsx_default(
+    "flex w-full items-center gap-md rounded-md border bg-bg-primary shadow-xs",
+    "transition-shadow focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-bg-primary",
+    destructive ? "border-border-error focus-within:ring-border-error" : "border-border-primary focus-within:border-border-brand focus-within:ring-border-brand"
+  );
+}
+function FieldWrapper({
+  label,
+  required,
+  hint,
+  destructive,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx_default("flex w-full flex-col gap-sm font-body", className), children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex gap-xxs text-sm font-medium text-text-secondary", children: [
+      label,
+      required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-brand-tertiary", children: "*" }) : null
+    ] }) : null,
+    children,
+    hint ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: clsx_default(
+          "text-sm font-normal",
+          destructive ? "text-text-error-primary" : "text-text-tertiary"
+        ),
+        children: hint
+      }
+    ) : null
+  ] });
+}
+function CheckboxBox({ selected, big }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: clsx_default(
+        "flex shrink-0 items-center justify-center rounded-xs border",
+        big ? "size-5" : "size-4",
+        selected ? "border-transparent bg-bg-brand-solid" : "border-border-primary bg-bg-primary"
+      ),
+      children: selected && /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-3 text-fg-white", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.33 4 6 11.33 2.67 8", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) })
+    }
+  );
+}
+function SelectMenuItem({
+  label,
+  supportingText,
+  selected = false,
+  size = "sm",
+  leading,
+  multi = false,
+  disabled,
+  className,
+  ...rest
+}) {
+  const big = size !== "sm";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      role: "option",
+      "aria-selected": selected,
+      disabled,
+      className: clsx_default(
+        "flex w-full items-center gap-md rounded-sm text-left transition-colors",
+        size === "lg" ? "py-2.5 pl-md pr-2.5" : "p-md",
+        disabled ? "opacity-50" : "hover:bg-bg-primary-hover",
+        className
+      ),
+      ...rest,
+      children: [
+        multi && /* @__PURE__ */ jsxRuntime.jsx(CheckboxBox, { selected, big }),
+        !multi && leading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: leading }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx_default("flex min-w-0 flex-1 items-center gap-sm", big ? "text-md" : "text-sm"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium text-text-primary", children: label }),
+          supportingText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-normal text-text-tertiary", children: supportingText })
+        ] }),
+        !multi && selected && /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5 shrink-0 text-fg-brand-primary", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.67 5 7.5 14.17 3.33 10", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) })
+      ]
+    }
+  );
+}
+function ComboBox({
+  options,
+  value,
+  onChange,
+  onInputChange,
+  placeholder = "Search...",
+  disabled = false,
+  error = false,
+  label,
+  hint,
+  required,
+  className
+}) {
+  const selectedLabel = React28.useMemo(
+    () => options.find((o) => o.value === value)?.label ?? "",
+    [options, value]
+  );
+  const [query, setQuery] = React28.useState(selectedLabel);
+  const [open, setOpen] = React28.useState(false);
+  const display = open ? query : selectedLabel;
+  const filtered = options.filter(
+    (o) => o.label.toLowerCase().includes(query.trim().toLowerCase())
+  );
+  const pick = (o) => {
+    onChange?.(o.value);
+    setQuery(o.label);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(FieldWrapper, { label, required, hint, destructive: error, className, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx_default(boxClasses(error), "px-lg py-md", disabled && "cursor-not-allowed bg-bg-secondary opacity-60"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          value: display,
+          disabled,
+          placeholder,
+          onFocus: () => setOpen(true),
+          onBlur: () => setTimeout(() => setOpen(false), 120),
+          onChange: (e) => {
+            setQuery(e.target.value);
+            setOpen(true);
+            onInputChange?.(e.target.value);
+          },
+          className: "min-w-0 flex-1 bg-transparent text-md text-text-primary outline-none placeholder:text-text-placeholder"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx_default("text-fg-quaternary transition-transform", open && "rotate-180"), children: /* @__PURE__ */ jsxRuntime.jsx(IconBox, { size: 16, children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.ChevronDown, {}) }) })
+    ] }),
+    open && !disabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 right-0 top-full z-50 mt-xs flex max-h-[320px] flex-col gap-px overflow-auto rounded-md border border-border-secondary-alt bg-bg-primary p-xs shadow-lg", children: filtered.length ? filtered.map((o) => /* @__PURE__ */ jsxRuntime.jsx(
+      SelectMenuItem,
+      {
+        label: o.label,
+        supportingText: o.supportingText,
+        selected: o.value === value,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => pick(o)
+      },
+      o.value
+    )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-md py-lg text-center text-sm text-text-tertiary", children: "No results" }) })
+  ] }) });
+}
 var isTextType = (t) => t === "heading" || t === "text";
 function ContentDivider({
   type = "heading",
@@ -30770,7 +30920,7 @@ function FilterLines2() {
     }
   ) });
 }
-function ChevronDown() {
+function ChevronDown2() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m4 6 4 4 4-4", stroke: "currentColor", strokeWidth: "1.333", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function FiltersDropdownMenu({
@@ -30804,7 +30954,7 @@ function FiltersDropdownMenu({
           /* @__PURE__ */ jsxRuntime.jsx(FilterLines2, {}),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
           active ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-bg-brand-solid px-1.5 text-xs font-medium text-text-white", children: count }) : null,
-          chevron ? /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {}) : null
+          chevron ? /* @__PURE__ */ jsxRuntime.jsx(ChevronDown2, {}) : null
         ]
       }
     ),
@@ -31020,44 +31170,6 @@ function HelpIcon2({
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100", children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip2, { text, supportingText, arrow }) })
   ] });
 }
-var inputSizeClasses = {
-  sm: "px-lg py-md text-sm",
-  md: "px-lg py-md text-md",
-  lg: "px-[14px] py-2.5 text-md"
-};
-function boxClasses(destructive) {
-  return clsx_default(
-    "flex w-full items-center gap-md rounded-md border bg-bg-primary shadow-xs",
-    "transition-shadow focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-bg-primary",
-    destructive ? "border-border-error focus-within:ring-border-error" : "border-border-primary focus-within:border-border-brand focus-within:ring-border-brand"
-  );
-}
-function FieldWrapper({
-  label,
-  required,
-  hint,
-  destructive,
-  children,
-  className
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx_default("flex w-full flex-col gap-sm font-body", className), children: [
-    label ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex gap-xxs text-sm font-medium text-text-secondary", children: [
-      label,
-      required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-brand-tertiary", children: "*" }) : null
-    ] }) : null,
-    children,
-    hint ? /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: clsx_default(
-          "text-sm font-normal",
-          destructive ? "text-text-error-primary" : "text-text-tertiary"
-        ),
-        children: hint
-      }
-    ) : null
-  ] });
-}
 function CalendarIcon() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5 text-fg-quaternary", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17.5 8.333H2.5M13.333 1.667V5M6.667 1.667V5M6.5 18.333h7c1.4 0 2.1 0 2.635-.272a2.5 2.5 0 0 0 1.093-1.093C17.5 16.433 17.5 15.733 17.5 14.333v-7c0-1.4 0-2.1-.272-2.635a2.5 2.5 0 0 0-1.093-1.093C15.6 3.333 14.9 3.333 13.5 3.333h-7c-1.4 0-2.1 0-2.635.272A2.5 2.5 0 0 0 2.772 4.698C2.5 5.233 2.5 5.933 2.5 7.333v7c0 1.4 0 2.1.272 2.635a2.5 2.5 0 0 0 1.093 1.093c.535.272 1.235.272 2.635.272Z", stroke: "currentColor", strokeWidth: "1.667", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
@@ -31986,57 +32098,6 @@ function ModalActions({
     )
   ] });
 }
-function CheckboxBox({ selected, big }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: clsx_default(
-        "flex shrink-0 items-center justify-center rounded-xs border",
-        big ? "size-5" : "size-4",
-        selected ? "border-transparent bg-bg-brand-solid" : "border-border-primary bg-bg-primary"
-      ),
-      children: selected && /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-3 text-fg-white", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.33 4 6 11.33 2.67 8", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) })
-    }
-  );
-}
-function SelectMenuItem({
-  label,
-  supportingText,
-  selected = false,
-  size = "sm",
-  leading,
-  multi = false,
-  disabled,
-  className,
-  ...rest
-}) {
-  const big = size !== "sm";
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      type: "button",
-      role: "option",
-      "aria-selected": selected,
-      disabled,
-      className: clsx_default(
-        "flex w-full items-center gap-md rounded-sm text-left transition-colors",
-        size === "lg" ? "py-2.5 pl-md pr-2.5" : "p-md",
-        disabled ? "opacity-50" : "hover:bg-bg-primary-hover",
-        className
-      ),
-      ...rest,
-      children: [
-        multi && /* @__PURE__ */ jsxRuntime.jsx(CheckboxBox, { selected, big }),
-        !multi && leading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: leading }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx_default("flex min-w-0 flex-1 items-center gap-sm", big ? "text-md" : "text-sm"), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium text-text-primary", children: label }),
-          supportingText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-normal text-text-tertiary", children: supportingText })
-        ] }),
-        !multi && selected && /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5 shrink-0 text-fg-brand-primary", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.67 5 7.5 14.17 3.33 10", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) })
-      ]
-    }
-  );
-}
 function Tag({
   size = "md",
   children,
@@ -32976,6 +33037,7 @@ function TagChip({ label, onRemove }) {
 function TagsInputField({
   tags = [],
   onRemoveTag,
+  onAddTag,
   variant = "inner",
   size = "md",
   label,
@@ -32986,6 +33048,21 @@ function TagsInputField({
   placeholder = "Add tag",
   ...rest
 }) {
+  const [draft, setDraft] = React28.useState("");
+  const commit = (raw) => {
+    const next = raw.trim();
+    if (!next || tags.includes(next)) return;
+    onAddTag?.(next);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      commit(draft);
+      setDraft("");
+    } else if (e.key === "Backspace" && draft === "" && tags.length) {
+      onRemoveTag?.(tags.length - 1);
+    }
+  };
   const chips = tags.map((t, i) => /* @__PURE__ */ jsxRuntime.jsx(TagChip, { label: t, onRemove: onRemoveTag ? () => onRemoveTag(i) : void 0 }, i));
   const box = (inner) => /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -33002,7 +33079,12 @@ function TagsInputField({
           {
             placeholder,
             className: "min-w-[80px] flex-1 bg-transparent text-md text-text-primary outline-none placeholder:text-text-placeholder",
-            ...rest
+            ...rest,
+            ...onAddTag ? {
+              value: draft,
+              onChange: (e) => setDraft(e.target.value),
+              onKeyDown: handleKeyDown
+            } : {}
           }
         )
       ]
@@ -34447,6 +34529,7 @@ exports.Checkbox = Checkbox;
 exports.CodeSnippet = CodeSnippet;
 exports.CodeSnippetTabs = CodeSnippetTabs;
 exports.ColorBadge = ColorBadge;
+exports.ComboBox = ComboBox;
 exports.CommandBar = CommandBar;
 exports.CommandBarFooter = CommandBarFooter;
 exports.CommandBarMenuSection = CommandBarMenuSection;

package/dist/index.d.cts

@@ -814,6 +814,36 @@ interface CommandShortcutProps {
  */
 declare function CommandShortcut({ keys, className }: CommandShortcutProps): react.JSX.Element;
 
+interface ComboBoxOption {
+    value: string;
+    label: string;
+    supportingText?: ReactNode;
+}
+interface ComboBoxProps {
+    options: ComboBoxOption[];
+    /** Selected option value (controlled). */
+    value?: string;
+    onChange?: (value: string) => void;
+    /** Fires on every keystroke in the input — wire for async/remote filtering. */
+    onInputChange?: (input: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Error styling on the input shell + hint. */
+    error?: boolean;
+    label?: ReactNode;
+    hint?: ReactNode;
+    required?: boolean;
+    className?: string;
+}
+/**
+ * Text input with an autocomplete dropdown. Typing filters `options` by label
+ * (case-insensitive, substring); picking a row commits its `value` via
+ * `onChange` and fills the input with that label. A non-matching query shows a
+ * "No results" row. Controlled selection via `value`/`onChange`; raw keystrokes
+ * surface through `onInputChange` for remote filtering.
+ */
+declare function ComboBox({ options, value, onChange, onInputChange, placeholder, disabled, error, label, hint, required, className, }: ComboBoxProps): react.JSX.Element;
+
 type ContentDividerType = "heading" | "text" | "button" | "button-icon" | "button-group" | "button-group-icon";
 type ContentDividerStyle = "single-line" | "dual-line" | "background-fill";
 interface ContentDividerProps {
@@ -2205,6 +2235,14 @@ interface TagsInputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>
     tags?: string[];
     /** Remove handler (receives the tag index). Renders a close button per chip. */
     onRemoveTag?: (index: number) => void;
+    /**
+     * Add handler. When supplied, the inner input becomes interactive: Enter or
+     * comma commits the trimmed input text as a new tag; Backspace on an empty
+     * input removes the last chip (via `onRemoveTag`). Empty/duplicate adds are
+     * ignored. Without it the field stays display-only (chips controlled by
+     * `tags`/`onRemoveTag`).
+     */
+    onAddTag?: (tag: string) => void;
     /** `inner` keeps chips inside the field; `outer` shows them below it. */
     variant?: TagsInputVariant;
     size?: InputFieldSize;
@@ -2218,7 +2256,7 @@ interface TagsInputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>
  * text input); `outer` renders the field on top with the chips below it.
  * Tag state is controlled by the consumer (`tags` + `onRemoveTag`).
  */
-declare function TagsInputField({ tags, onRemoveTag, variant, size, label, hint, required, destructive, className, placeholder, ...rest }: TagsInputFieldProps): react.JSX.Element;
+declare function TagsInputField({ tags, onRemoveTag, onAddTag, variant, size, label, hint, required, destructive, className, placeholder, ...rest }: TagsInputFieldProps): react.JSX.Element;
 
 interface TrailingInputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
     /**
@@ -2937,4 +2975,4 @@ declare namespace index {
   export { index_BoxIllustration as BoxIllustration, index_CloudIllustration as CloudIllustration, index_CreditCardIllustration as CreditCardIllustration, index_DocumentsIllustration as DocumentsIllustration };
 }
 
-export { ActivityFeed, type ActivityFeedDivider, type ActivityFeedProps, ActivityGauge, type ActivityGaugeLegend, type ActivityGaugeProps, type ActivityGaugeSeries, type ActivityGaugeSize, AdvancedFilterBar, type AdvancedFilterBarProps, Alert, type AlertAction, type AlertColor, type AlertProps, type AlertSize, Avatar, AvatarAddButton, type AvatarAddButtonProps, type AvatarAddButtonSize, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarGroupSize, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarLabelGroupSize, AvatarProfilePhoto, type AvatarProfilePhotoProps, type AvatarProfilePhotoSize, type AvatarProps, type AvatarSize, BadgeCloseX, type BadgeCloseXProps, type BadgeCloseXShape, type BadgeColor, type BadgeCommonProps, BadgeGroup, type BadgeGroupBadgePosition, type BadgeGroupProps, type BadgeGroupSize, type BadgeGroupType, type BadgeSize, BreadcrumbButtonBase, type BreadcrumbButtonBaseProps, type BreadcrumbButtonType, Breadcrumbs, type BreadcrumbsDivider, type BreadcrumbsProps, Button, ButtonCloseX, type ButtonCloseXProps, type ButtonCloseXSize, ButtonDestructive, type ButtonDestructiveHierarchy, type ButtonDestructiveProps, type ButtonDestructiveSize, ButtonGroup, type ButtonGroupProps, ButtonGroupSegment, type ButtonGroupSegmentProps, type ButtonGroupSegmentSize, type ButtonProps, ButtonUtility, type ButtonUtilityProps, type ButtonUtilitySize, type ButtonUtilityVariant, Calendar, type CalendarBreakpoint, CalendarCell, type CalendarCellBreakpoint, CalendarCellDayWeekView, type CalendarCellDayWeekViewProps, type CalendarCellEvent, type CalendarCellProps, CalendarColumnHeader, type CalendarColumnHeaderOrientation, type CalendarColumnHeaderProps, type CalendarColumnHeaderType, CalendarDateIcon, type CalendarDateIconProps, CalendarEvent, type CalendarEventBreakpoint, type CalendarEventColor, type CalendarEventData, CalendarEventDayWeekView, type CalendarEventDayWeekViewProps, type CalendarEventProps, type CalendarEventState, CalendarHeader, type CalendarHeaderProps, type CalendarProps, CalendarRowLabel, type CalendarRowLabelProps, CalendarTimemarker, type CalendarTimemarkerAlign, type CalendarTimemarkerBreakpoint, type CalendarTimemarkerProps, type CalendarTimeslotState, type CalendarTimeslotType, type CalendarView, CalendarViewDropdown, type CalendarViewDropdownProps, type CalendarViewOption, CardHeader, type CardHeaderProps, CarouselArrow, type CarouselArrowDirection, type CarouselArrowProps, type CarouselArrowSize, CarouselImage, type CarouselImageProps, Change, type ChangeProps, type ChangeTrend, type ChangeType, ChartLegend, type ChartLegendItem, type ChartLegendPosition, type ChartLegendProps, ChartMarker, type ChartMarkerLine, type ChartMarkerProps, ChartMini, type ChartMiniDatum, type ChartMiniProps, type ChartMiniTrend, type ChartSeries, type ChartStyle, ChartTooltip, type ChartTooltipPayloadItem, type ChartTooltipProps, type CheckControlSize, Checkbox, type CheckboxProps, CodeSnippet, type CodeSnippetProps, CodeSnippetTabs, type CodeSnippetTabsProps, ColorBadge, type ColorBadgeProps, CommandBar, CommandBarFooter, type CommandBarFooterHint, type CommandBarFooterProps, CommandBarMenuSection, type CommandBarMenuSectionProps, CommandBarNavigationIcon, type CommandBarNavigationIconProps, type CommandBarProps, CommandDropdownMenuItem, type CommandDropdownMenuItemProps, CommandInput, type CommandInputProps, CommandShortcut, type CommandShortcutProps, ContentDivider, type ContentDividerProps, type ContentDividerStyle, type ContentDividerType, ContentFeatureText, type ContentFeatureTextProps, type ContentFeatureTextSize, ContentHeading, type ContentHeadingProps, type ContentHeadingSize, ContentParagraph, type ContentParagraphProps, type ContentParagraphSize, ContentQuote, type ContentQuoteAlign, type ContentQuoteProps, type ContentQuoteSize, ContentRule, type ContentRuleProps, type ContentRuleSize, ContextMenu, type ContextMenuProps, type ContextMenuState, DatePickerCell, type DatePickerCellProps, type DatePickerCellType, DatePickerListItem, type DatePickerListItemProps, DatePickerMenu, type DatePickerMenuProps, DropdownAccountListItem, type DropdownAccountListItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, type DropdownMenuFooterType, DropdownMenuHeader, type DropdownMenuHeaderProps, type DropdownMenuHeaderType, DropdownMenuItemInsetIcon, type DropdownMenuItemInsetIconProps, type DropdownMenuItemInsetIconType, DropdownMenuListItem, type DropdownMenuListItemProps, EmptyState, type EmptyStateProps, type EmptyStateSize, FeaturedIcon, type FeaturedIconColor, type FeaturedIconProps, type FeaturedIconSize, type FeaturedIconTheme, FeedItemBase, type FeedItemBaseProps, type FeedItemSize, FileUpload, FileUploadBase, type FileUploadBaseProps, FileUploadItemBase, type FileUploadItemBaseProps, type FileUploadItemIconType, type FileUploadItemStatus, type FileUploadItemType, type FileUploadProps, FilterBar, type FilterBarProps, FilterTabs, type FilterTabsProps, FiltersDropdownMenu, type FiltersDropdownMenuProps, FiltersSlideoutMenu, type FiltersSlideoutMenuProps, type HeaderNavItem, HeaderNavigation, type HeaderNavigationProps, type HeaderNavigationType, HelpIcon, type HelpIconProps, InputField, type InputFieldProps, type InputFieldSize, type InputFieldType, LeadingInputField, type LeadingInputFieldProps, LineAndBarChart, type LineAndBarChartProps, LinkMessage, type LinkMessageProps, type LinkMessageType, LoadingIndicator, type LoadingIndicatorProps, type LoadingIndicatorSize, type LoadingIndicatorStyle, MediaMessage, type MediaMessageProps, type MediaMessageType, MegaInputFieldBase, type MegaInputFieldBaseProps, type MegaInputFieldBaseSize, Message, MessageAction, MessageActionButton, type MessageActionButtonProps, MessageActionPanel, type MessageActionPanelProps, type MessageActionProps, type MessageActionType, type MessageBubbleTone, type MessageProps, MessageReaction, type MessageReactionProps, type MessageStatus, MessageStatusIcon, type MessageStatusIconProps, type MessageType, MetricItem, type MetricItemProps, Modal, ModalActions, type ModalActionsProps, type ModalActionsType, ModalHeader, type ModalHeaderProps, type ModalHeaderType, type ModalProps, type ModalSize, ModernBadge, type ModernBadgeProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NavAccountCard, type NavAccountCardBreakpoint, NavAccountCardMenuItem, type NavAccountCardMenuItemProps, type NavAccountCardMenuItemType, type NavAccountCardProps, type NavAccountCardVariant, NavButton, type NavButtonProps, NavFeaturedCard, type NavFeaturedCardProps, NavItemBase, type NavItemBaseProps, NavItemDropdownBase, type NavItemDropdownBaseProps, NavMenuButton, type NavMenuButtonProps, Notification, type NotificationProps, type NotificationVariant, NumberInput, type NumberInputLayout, type NumberInputProps, PageHeader, type PageHeaderProps, type PageHeaderStyle, Pagination, PaginationButtonGroupBase, type PaginationButtonGroupBaseProps, type PaginationButtonGroupType, PaginationCards, type PaginationCardsProps, type PaginationCardsVariant, PaginationDotGroup, type PaginationDotGroupProps, PaginationDotIndicator, type PaginationDotIndicatorProps, type PaginationDotSize, type PaginationDotVariant, PaginationNumberBase, type PaginationNumberBaseProps, type PaginationNumberShape, type PaginationProps, type PaginationType, PieChart, type PieChartProps, type PieChartSize, type PieSlice, PillBadge, type PillBadgeProps, ProgressBar, type ProgressBarLabel, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, type ProgressCircleShape, type ProgressCircleSize, RadarChart, type RadarChartProps, type RadarLegendPosition, Radio, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupItemSize, type RadioGroupItemType, type RadioGroupProps, type RadioProps, SectionFooter, type SectionFooterProps, type SectionFooterType, SectionHeader, type SectionHeaderProps, SectionLabel, type SectionLabelProps, type SectionLabelSize, Select, SelectMenuItem, type SelectMenuItemProps, type SelectMenuItemSize, type SelectProps, type SelectSize, type SelectType, SidebarNavigation, type SidebarNavigationProps, type SidebarNavigationType, SlideOutMenuHeader, type SlideOutMenuHeaderProps, SlideoutMenu, type SlideoutMenuProps, type SlideoutMenuSide, type SlideoutMenuSize, Slider, type SliderLabel, type SliderProps, type SocialBrand, SocialButton, type SocialButtonProps, type SocialButtonSize, type SocialButtonTheme, StatusIcon, type StatusIconProps, type StatusIconType, StepBase, type StepBaseProps, StepIconBase, type StepIconBaseProps, type StepIconSize, type StepIconType, type StepOrientation, type StepStatus, TabButtonBase, type TabButtonBaseProps, type TabButtonSize, type TabButtonType, type TabItem, TableCell, type TableCellProps, type TableCellSize, TableHeaderCell, type TableHeaderCellProps, type TableHeaderCellSize, TableHeaderLabel, type TableHeaderLabelArrow, type TableHeaderLabelProps, Tabs, type TabsOrientation, type TabsProps, Tag, type TagProps, type TagSize, TagsInputField, type TagsInputFieldProps, type TagsInputVariant, TextEditor, type TextEditorProps, TextEditorToolbar, TextEditorToolbarDivider, type TextEditorToolbarProps, TextEditorTooltip, type TextEditorTooltipProps, TextareaInputField, type TextareaInputFieldProps, Toggle, type ToggleProps, type ToggleSize, type ToggleType, Tooltip, type TooltipArrow, type TooltipProps, TrailingInputField, type TrailingInputFieldProps, type TreeNode, TreeView, TreeViewConnector, type TreeViewConnectorProps, type TreeViewConnectorSize, type TreeViewConnectorType, TreeViewItem, type TreeViewItemProps, type TreeViewItemSize, type TreeViewProps, type UseContextMenuReturn, type UseTextEditorOptions, type VerificationCodeDigits, VerificationCodeInput, type VerificationCodeInputProps, type VerificationCodeSize, index as illustrations, useContextMenu, useTextEditor };
+export { ActivityFeed, type ActivityFeedDivider, type ActivityFeedProps, ActivityGauge, type ActivityGaugeLegend, type ActivityGaugeProps, type ActivityGaugeSeries, type ActivityGaugeSize, AdvancedFilterBar, type AdvancedFilterBarProps, Alert, type AlertAction, type AlertColor, type AlertProps, type AlertSize, Avatar, AvatarAddButton, type AvatarAddButtonProps, type AvatarAddButtonSize, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarGroupSize, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarLabelGroupSize, AvatarProfilePhoto, type AvatarProfilePhotoProps, type AvatarProfilePhotoSize, type AvatarProps, type AvatarSize, BadgeCloseX, type BadgeCloseXProps, type BadgeCloseXShape, type BadgeColor, type BadgeCommonProps, BadgeGroup, type BadgeGroupBadgePosition, type BadgeGroupProps, type BadgeGroupSize, type BadgeGroupType, type BadgeSize, BreadcrumbButtonBase, type BreadcrumbButtonBaseProps, type BreadcrumbButtonType, Breadcrumbs, type BreadcrumbsDivider, type BreadcrumbsProps, Button, ButtonCloseX, type ButtonCloseXProps, type ButtonCloseXSize, ButtonDestructive, type ButtonDestructiveHierarchy, type ButtonDestructiveProps, type ButtonDestructiveSize, ButtonGroup, type ButtonGroupProps, ButtonGroupSegment, type ButtonGroupSegmentProps, type ButtonGroupSegmentSize, type ButtonProps, ButtonUtility, type ButtonUtilityProps, type ButtonUtilitySize, type ButtonUtilityVariant, Calendar, type CalendarBreakpoint, CalendarCell, type CalendarCellBreakpoint, CalendarCellDayWeekView, type CalendarCellDayWeekViewProps, type CalendarCellEvent, type CalendarCellProps, CalendarColumnHeader, type CalendarColumnHeaderOrientation, type CalendarColumnHeaderProps, type CalendarColumnHeaderType, CalendarDateIcon, type CalendarDateIconProps, CalendarEvent, type CalendarEventBreakpoint, type CalendarEventColor, type CalendarEventData, CalendarEventDayWeekView, type CalendarEventDayWeekViewProps, type CalendarEventProps, type CalendarEventState, CalendarHeader, type CalendarHeaderProps, type CalendarProps, CalendarRowLabel, type CalendarRowLabelProps, CalendarTimemarker, type CalendarTimemarkerAlign, type CalendarTimemarkerBreakpoint, type CalendarTimemarkerProps, type CalendarTimeslotState, type CalendarTimeslotType, type CalendarView, CalendarViewDropdown, type CalendarViewDropdownProps, type CalendarViewOption, CardHeader, type CardHeaderProps, CarouselArrow, type CarouselArrowDirection, type CarouselArrowProps, type CarouselArrowSize, CarouselImage, type CarouselImageProps, Change, type ChangeProps, type ChangeTrend, type ChangeType, ChartLegend, type ChartLegendItem, type ChartLegendPosition, type ChartLegendProps, ChartMarker, type ChartMarkerLine, type ChartMarkerProps, ChartMini, type ChartMiniDatum, type ChartMiniProps, type ChartMiniTrend, type ChartSeries, type ChartStyle, ChartTooltip, type ChartTooltipPayloadItem, type ChartTooltipProps, type CheckControlSize, Checkbox, type CheckboxProps, CodeSnippet, type CodeSnippetProps, CodeSnippetTabs, type CodeSnippetTabsProps, ColorBadge, type ColorBadgeProps, ComboBox, type ComboBoxOption, type ComboBoxProps, CommandBar, CommandBarFooter, type CommandBarFooterHint, type CommandBarFooterProps, CommandBarMenuSection, type CommandBarMenuSectionProps, CommandBarNavigationIcon, type CommandBarNavigationIconProps, type CommandBarProps, CommandDropdownMenuItem, type CommandDropdownMenuItemProps, CommandInput, type CommandInputProps, CommandShortcut, type CommandShortcutProps, ContentDivider, type ContentDividerProps, type ContentDividerStyle, type ContentDividerType, ContentFeatureText, type ContentFeatureTextProps, type ContentFeatureTextSize, ContentHeading, type ContentHeadingProps, type ContentHeadingSize, ContentParagraph, type ContentParagraphProps, type ContentParagraphSize, ContentQuote, type ContentQuoteAlign, type ContentQuoteProps, type ContentQuoteSize, ContentRule, type ContentRuleProps, type ContentRuleSize, ContextMenu, type ContextMenuProps, type ContextMenuState, DatePickerCell, type DatePickerCellProps, type DatePickerCellType, DatePickerListItem, type DatePickerListItemProps, DatePickerMenu, type DatePickerMenuProps, DropdownAccountListItem, type DropdownAccountListItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, type DropdownMenuFooterType, DropdownMenuHeader, type DropdownMenuHeaderProps, type DropdownMenuHeaderType, DropdownMenuItemInsetIcon, type DropdownMenuItemInsetIconProps, type DropdownMenuItemInsetIconType, DropdownMenuListItem, type DropdownMenuListItemProps, EmptyState, type EmptyStateProps, type EmptyStateSize, FeaturedIcon, type FeaturedIconColor, type FeaturedIconProps, type FeaturedIconSize, type FeaturedIconTheme, FeedItemBase, type FeedItemBaseProps, type FeedItemSize, FileUpload, FileUploadBase, type FileUploadBaseProps, FileUploadItemBase, type FileUploadItemBaseProps, type FileUploadItemIconType, type FileUploadItemStatus, type FileUploadItemType, type FileUploadProps, FilterBar, type FilterBarProps, FilterTabs, type FilterTabsProps, FiltersDropdownMenu, type FiltersDropdownMenuProps, FiltersSlideoutMenu, type FiltersSlideoutMenuProps, type HeaderNavItem, HeaderNavigation, type HeaderNavigationProps, type HeaderNavigationType, HelpIcon, type HelpIconProps, InputField, type InputFieldProps, type InputFieldSize, type InputFieldType, LeadingInputField, type LeadingInputFieldProps, LineAndBarChart, type LineAndBarChartProps, LinkMessage, type LinkMessageProps, type LinkMessageType, LoadingIndicator, type LoadingIndicatorProps, type LoadingIndicatorSize, type LoadingIndicatorStyle, MediaMessage, type MediaMessageProps, type MediaMessageType, MegaInputFieldBase, type MegaInputFieldBaseProps, type MegaInputFieldBaseSize, Message, MessageAction, MessageActionButton, type MessageActionButtonProps, MessageActionPanel, type MessageActionPanelProps, type MessageActionProps, type MessageActionType, type MessageBubbleTone, type MessageProps, MessageReaction, type MessageReactionProps, type MessageStatus, MessageStatusIcon, type MessageStatusIconProps, type MessageType, MetricItem, type MetricItemProps, Modal, ModalActions, type ModalActionsProps, type ModalActionsType, ModalHeader, type ModalHeaderProps, type ModalHeaderType, type ModalProps, type ModalSize, ModernBadge, type ModernBadgeProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NavAccountCard, type NavAccountCardBreakpoint, NavAccountCardMenuItem, type NavAccountCardMenuItemProps, type NavAccountCardMenuItemType, type NavAccountCardProps, type NavAccountCardVariant, NavButton, type NavButtonProps, NavFeaturedCard, type NavFeaturedCardProps, NavItemBase, type NavItemBaseProps, NavItemDropdownBase, type NavItemDropdownBaseProps, NavMenuButton, type NavMenuButtonProps, Notification, type NotificationProps, type NotificationVariant, NumberInput, type NumberInputLayout, type NumberInputProps, PageHeader, type PageHeaderProps, type PageHeaderStyle, Pagination, PaginationButtonGroupBase, type PaginationButtonGroupBaseProps, type PaginationButtonGroupType, PaginationCards, type PaginationCardsProps, type PaginationCardsVariant, PaginationDotGroup, type PaginationDotGroupProps, PaginationDotIndicator, type PaginationDotIndicatorProps, type PaginationDotSize, type PaginationDotVariant, PaginationNumberBase, type PaginationNumberBaseProps, type PaginationNumberShape, type PaginationProps, type PaginationType, PieChart, type PieChartProps, type PieChartSize, type PieSlice, PillBadge, type PillBadgeProps, ProgressBar, type ProgressBarLabel, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, type ProgressCircleShape, type ProgressCircleSize, RadarChart, type RadarChartProps, type RadarLegendPosition, Radio, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupItemSize, type RadioGroupItemType, type RadioGroupProps, type RadioProps, SectionFooter, type SectionFooterProps, type SectionFooterType, SectionHeader, type SectionHeaderProps, SectionLabel, type SectionLabelProps, type SectionLabelSize, Select, SelectMenuItem, type SelectMenuItemProps, type SelectMenuItemSize, type SelectProps, type SelectSize, type SelectType, SidebarNavigation, type SidebarNavigationProps, type SidebarNavigationType, SlideOutMenuHeader, type SlideOutMenuHeaderProps, SlideoutMenu, type SlideoutMenuProps, type SlideoutMenuSide, type SlideoutMenuSize, Slider, type SliderLabel, type SliderProps, type SocialBrand, SocialButton, type SocialButtonProps, type SocialButtonSize, type SocialButtonTheme, StatusIcon, type StatusIconProps, type StatusIconType, StepBase, type StepBaseProps, StepIconBase, type StepIconBaseProps, type StepIconSize, type StepIconType, type StepOrientation, type StepStatus, TabButtonBase, type TabButtonBaseProps, type TabButtonSize, type TabButtonType, type TabItem, TableCell, type TableCellProps, type TableCellSize, TableHeaderCell, type TableHeaderCellProps, type TableHeaderCellSize, TableHeaderLabel, type TableHeaderLabelArrow, type TableHeaderLabelProps, Tabs, type TabsOrientation, type TabsProps, Tag, type TagProps, type TagSize, TagsInputField, type TagsInputFieldProps, type TagsInputVariant, TextEditor, type TextEditorProps, TextEditorToolbar, TextEditorToolbarDivider, type TextEditorToolbarProps, TextEditorTooltip, type TextEditorTooltipProps, TextareaInputField, type TextareaInputFieldProps, Toggle, type ToggleProps, type ToggleSize, type ToggleType, Tooltip, type TooltipArrow, type TooltipProps, TrailingInputField, type TrailingInputFieldProps, type TreeNode, TreeView, TreeViewConnector, type TreeViewConnectorProps, type TreeViewConnectorSize, type TreeViewConnectorType, TreeViewItem, type TreeViewItemProps, type TreeViewItemSize, type TreeViewProps, type UseContextMenuReturn, type UseTextEditorOptions, type VerificationCodeDigits, VerificationCodeInput, type VerificationCodeInputProps, type VerificationCodeSize, index as illustrations, useContextMenu, useTextEditor };

package/dist/index.d.ts

@@ -814,6 +814,36 @@ interface CommandShortcutProps {
  */
 declare function CommandShortcut({ keys, className }: CommandShortcutProps): react.JSX.Element;
 
+interface ComboBoxOption {
+    value: string;
+    label: string;
+    supportingText?: ReactNode;
+}
+interface ComboBoxProps {
+    options: ComboBoxOption[];
+    /** Selected option value (controlled). */
+    value?: string;
+    onChange?: (value: string) => void;
+    /** Fires on every keystroke in the input — wire for async/remote filtering. */
+    onInputChange?: (input: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Error styling on the input shell + hint. */
+    error?: boolean;
+    label?: ReactNode;
+    hint?: ReactNode;
+    required?: boolean;
+    className?: string;
+}
+/**
+ * Text input with an autocomplete dropdown. Typing filters `options` by label
+ * (case-insensitive, substring); picking a row commits its `value` via
+ * `onChange` and fills the input with that label. A non-matching query shows a
+ * "No results" row. Controlled selection via `value`/`onChange`; raw keystrokes
+ * surface through `onInputChange` for remote filtering.
+ */
+declare function ComboBox({ options, value, onChange, onInputChange, placeholder, disabled, error, label, hint, required, className, }: ComboBoxProps): react.JSX.Element;
+
 type ContentDividerType = "heading" | "text" | "button" | "button-icon" | "button-group" | "button-group-icon";
 type ContentDividerStyle = "single-line" | "dual-line" | "background-fill";
 interface ContentDividerProps {
@@ -2205,6 +2235,14 @@ interface TagsInputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>
     tags?: string[];
     /** Remove handler (receives the tag index). Renders a close button per chip. */
     onRemoveTag?: (index: number) => void;
+    /**
+     * Add handler. When supplied, the inner input becomes interactive: Enter or
+     * comma commits the trimmed input text as a new tag; Backspace on an empty
+     * input removes the last chip (via `onRemoveTag`). Empty/duplicate adds are
+     * ignored. Without it the field stays display-only (chips controlled by
+     * `tags`/`onRemoveTag`).
+     */
+    onAddTag?: (tag: string) => void;
     /** `inner` keeps chips inside the field; `outer` shows them below it. */
     variant?: TagsInputVariant;
     size?: InputFieldSize;
@@ -2218,7 +2256,7 @@ interface TagsInputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>
  * text input); `outer` renders the field on top with the chips below it.
  * Tag state is controlled by the consumer (`tags` + `onRemoveTag`).
  */
-declare function TagsInputField({ tags, onRemoveTag, variant, size, label, hint, required, destructive, className, placeholder, ...rest }: TagsInputFieldProps): react.JSX.Element;
+declare function TagsInputField({ tags, onRemoveTag, onAddTag, variant, size, label, hint, required, destructive, className, placeholder, ...rest }: TagsInputFieldProps): react.JSX.Element;
 
 interface TrailingInputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
     /**
@@ -2937,4 +2975,4 @@ declare namespace index {
   export { index_BoxIllustration as BoxIllustration, index_CloudIllustration as CloudIllustration, index_CreditCardIllustration as CreditCardIllustration, index_DocumentsIllustration as DocumentsIllustration };
 }
 
-export { ActivityFeed, type ActivityFeedDivider, type ActivityFeedProps, ActivityGauge, type ActivityGaugeLegend, type ActivityGaugeProps, type ActivityGaugeSeries, type ActivityGaugeSize, AdvancedFilterBar, type AdvancedFilterBarProps, Alert, type AlertAction, type AlertColor, type AlertProps, type AlertSize, Avatar, AvatarAddButton, type AvatarAddButtonProps, type AvatarAddButtonSize, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarGroupSize, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarLabelGroupSize, AvatarProfilePhoto, type AvatarProfilePhotoProps, type AvatarProfilePhotoSize, type AvatarProps, type AvatarSize, BadgeCloseX, type BadgeCloseXProps, type BadgeCloseXShape, type BadgeColor, type BadgeCommonProps, BadgeGroup, type BadgeGroupBadgePosition, type BadgeGroupProps, type BadgeGroupSize, type BadgeGroupType, type BadgeSize, BreadcrumbButtonBase, type BreadcrumbButtonBaseProps, type BreadcrumbButtonType, Breadcrumbs, type BreadcrumbsDivider, type BreadcrumbsProps, Button, ButtonCloseX, type ButtonCloseXProps, type ButtonCloseXSize, ButtonDestructive, type ButtonDestructiveHierarchy, type ButtonDestructiveProps, type ButtonDestructiveSize, ButtonGroup, type ButtonGroupProps, ButtonGroupSegment, type ButtonGroupSegmentProps, type ButtonGroupSegmentSize, type ButtonProps, ButtonUtility, type ButtonUtilityProps, type ButtonUtilitySize, type ButtonUtilityVariant, Calendar, type CalendarBreakpoint, CalendarCell, type CalendarCellBreakpoint, CalendarCellDayWeekView, type CalendarCellDayWeekViewProps, type CalendarCellEvent, type CalendarCellProps, CalendarColumnHeader, type CalendarColumnHeaderOrientation, type CalendarColumnHeaderProps, type CalendarColumnHeaderType, CalendarDateIcon, type CalendarDateIconProps, CalendarEvent, type CalendarEventBreakpoint, type CalendarEventColor, type CalendarEventData, CalendarEventDayWeekView, type CalendarEventDayWeekViewProps, type CalendarEventProps, type CalendarEventState, CalendarHeader, type CalendarHeaderProps, type CalendarProps, CalendarRowLabel, type CalendarRowLabelProps, CalendarTimemarker, type CalendarTimemarkerAlign, type CalendarTimemarkerBreakpoint, type CalendarTimemarkerProps, type CalendarTimeslotState, type CalendarTimeslotType, type CalendarView, CalendarViewDropdown, type CalendarViewDropdownProps, type CalendarViewOption, CardHeader, type CardHeaderProps, CarouselArrow, type CarouselArrowDirection, type CarouselArrowProps, type CarouselArrowSize, CarouselImage, type CarouselImageProps, Change, type ChangeProps, type ChangeTrend, type ChangeType, ChartLegend, type ChartLegendItem, type ChartLegendPosition, type ChartLegendProps, ChartMarker, type ChartMarkerLine, type ChartMarkerProps, ChartMini, type ChartMiniDatum, type ChartMiniProps, type ChartMiniTrend, type ChartSeries, type ChartStyle, ChartTooltip, type ChartTooltipPayloadItem, type ChartTooltipProps, type CheckControlSize, Checkbox, type CheckboxProps, CodeSnippet, type CodeSnippetProps, CodeSnippetTabs, type CodeSnippetTabsProps, ColorBadge, type ColorBadgeProps, CommandBar, CommandBarFooter, type CommandBarFooterHint, type CommandBarFooterProps, CommandBarMenuSection, type CommandBarMenuSectionProps, CommandBarNavigationIcon, type CommandBarNavigationIconProps, type CommandBarProps, CommandDropdownMenuItem, type CommandDropdownMenuItemProps, CommandInput, type CommandInputProps, CommandShortcut, type CommandShortcutProps, ContentDivider, type ContentDividerProps, type ContentDividerStyle, type ContentDividerType, ContentFeatureText, type ContentFeatureTextProps, type ContentFeatureTextSize, ContentHeading, type ContentHeadingProps, type ContentHeadingSize, ContentParagraph, type ContentParagraphProps, type ContentParagraphSize, ContentQuote, type ContentQuoteAlign, type ContentQuoteProps, type ContentQuoteSize, ContentRule, type ContentRuleProps, type ContentRuleSize, ContextMenu, type ContextMenuProps, type ContextMenuState, DatePickerCell, type DatePickerCellProps, type DatePickerCellType, DatePickerListItem, type DatePickerListItemProps, DatePickerMenu, type DatePickerMenuProps, DropdownAccountListItem, type DropdownAccountListItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, type DropdownMenuFooterType, DropdownMenuHeader, type DropdownMenuHeaderProps, type DropdownMenuHeaderType, DropdownMenuItemInsetIcon, type DropdownMenuItemInsetIconProps, type DropdownMenuItemInsetIconType, DropdownMenuListItem, type DropdownMenuListItemProps, EmptyState, type EmptyStateProps, type EmptyStateSize, FeaturedIcon, type FeaturedIconColor, type FeaturedIconProps, type FeaturedIconSize, type FeaturedIconTheme, FeedItemBase, type FeedItemBaseProps, type FeedItemSize, FileUpload, FileUploadBase, type FileUploadBaseProps, FileUploadItemBase, type FileUploadItemBaseProps, type FileUploadItemIconType, type FileUploadItemStatus, type FileUploadItemType, type FileUploadProps, FilterBar, type FilterBarProps, FilterTabs, type FilterTabsProps, FiltersDropdownMenu, type FiltersDropdownMenuProps, FiltersSlideoutMenu, type FiltersSlideoutMenuProps, type HeaderNavItem, HeaderNavigation, type HeaderNavigationProps, type HeaderNavigationType, HelpIcon, type HelpIconProps, InputField, type InputFieldProps, type InputFieldSize, type InputFieldType, LeadingInputField, type LeadingInputFieldProps, LineAndBarChart, type LineAndBarChartProps, LinkMessage, type LinkMessageProps, type LinkMessageType, LoadingIndicator, type LoadingIndicatorProps, type LoadingIndicatorSize, type LoadingIndicatorStyle, MediaMessage, type MediaMessageProps, type MediaMessageType, MegaInputFieldBase, type MegaInputFieldBaseProps, type MegaInputFieldBaseSize, Message, MessageAction, MessageActionButton, type MessageActionButtonProps, MessageActionPanel, type MessageActionPanelProps, type MessageActionProps, type MessageActionType, type MessageBubbleTone, type MessageProps, MessageReaction, type MessageReactionProps, type MessageStatus, MessageStatusIcon, type MessageStatusIconProps, type MessageType, MetricItem, type MetricItemProps, Modal, ModalActions, type ModalActionsProps, type ModalActionsType, ModalHeader, type ModalHeaderProps, type ModalHeaderType, type ModalProps, type ModalSize, ModernBadge, type ModernBadgeProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NavAccountCard, type NavAccountCardBreakpoint, NavAccountCardMenuItem, type NavAccountCardMenuItemProps, type NavAccountCardMenuItemType, type NavAccountCardProps, type NavAccountCardVariant, NavButton, type NavButtonProps, NavFeaturedCard, type NavFeaturedCardProps, NavItemBase, type NavItemBaseProps, NavItemDropdownBase, type NavItemDropdownBaseProps, NavMenuButton, type NavMenuButtonProps, Notification, type NotificationProps, type NotificationVariant, NumberInput, type NumberInputLayout, type NumberInputProps, PageHeader, type PageHeaderProps, type PageHeaderStyle, Pagination, PaginationButtonGroupBase, type PaginationButtonGroupBaseProps, type PaginationButtonGroupType, PaginationCards, type PaginationCardsProps, type PaginationCardsVariant, PaginationDotGroup, type PaginationDotGroupProps, PaginationDotIndicator, type PaginationDotIndicatorProps, type PaginationDotSize, type PaginationDotVariant, PaginationNumberBase, type PaginationNumberBaseProps, type PaginationNumberShape, type PaginationProps, type PaginationType, PieChart, type PieChartProps, type PieChartSize, type PieSlice, PillBadge, type PillBadgeProps, ProgressBar, type ProgressBarLabel, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, type ProgressCircleShape, type ProgressCircleSize, RadarChart, type RadarChartProps, type RadarLegendPosition, Radio, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupItemSize, type RadioGroupItemType, type RadioGroupProps, type RadioProps, SectionFooter, type SectionFooterProps, type SectionFooterType, SectionHeader, type SectionHeaderProps, SectionLabel, type SectionLabelProps, type SectionLabelSize, Select, SelectMenuItem, type SelectMenuItemProps, type SelectMenuItemSize, type SelectProps, type SelectSize, type SelectType, SidebarNavigation, type SidebarNavigationProps, type SidebarNavigationType, SlideOutMenuHeader, type SlideOutMenuHeaderProps, SlideoutMenu, type SlideoutMenuProps, type SlideoutMenuSide, type SlideoutMenuSize, Slider, type SliderLabel, type SliderProps, type SocialBrand, SocialButton, type SocialButtonProps, type SocialButtonSize, type SocialButtonTheme, StatusIcon, type StatusIconProps, type StatusIconType, StepBase, type StepBaseProps, StepIconBase, type StepIconBaseProps, type StepIconSize, type StepIconType, type StepOrientation, type StepStatus, TabButtonBase, type TabButtonBaseProps, type TabButtonSize, type TabButtonType, type TabItem, TableCell, type TableCellProps, type TableCellSize, TableHeaderCell, type TableHeaderCellProps, type TableHeaderCellSize, TableHeaderLabel, type TableHeaderLabelArrow, type TableHeaderLabelProps, Tabs, type TabsOrientation, type TabsProps, Tag, type TagProps, type TagSize, TagsInputField, type TagsInputFieldProps, type TagsInputVariant, TextEditor, type TextEditorProps, TextEditorToolbar, TextEditorToolbarDivider, type TextEditorToolbarProps, TextEditorTooltip, type TextEditorTooltipProps, TextareaInputField, type TextareaInputFieldProps, Toggle, type ToggleProps, type ToggleSize, type ToggleType, Tooltip, type TooltipArrow, type TooltipProps, TrailingInputField, type TrailingInputFieldProps, type TreeNode, TreeView, TreeViewConnector, type TreeViewConnectorProps, type TreeViewConnectorSize, type TreeViewConnectorType, TreeViewItem, type TreeViewItemProps, type TreeViewItemSize, type TreeViewProps, type UseContextMenuReturn, type UseTextEditorOptions, type VerificationCodeDigits, VerificationCodeInput, type VerificationCodeInputProps, type VerificationCodeSize, index as illustrations, useContextMenu, useTextEditor };
+export { ActivityFeed, type ActivityFeedDivider, type ActivityFeedProps, ActivityGauge, type ActivityGaugeLegend, type ActivityGaugeProps, type ActivityGaugeSeries, type ActivityGaugeSize, AdvancedFilterBar, type AdvancedFilterBarProps, Alert, type AlertAction, type AlertColor, type AlertProps, type AlertSize, Avatar, AvatarAddButton, type AvatarAddButtonProps, type AvatarAddButtonSize, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarGroupSize, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarLabelGroupSize, AvatarProfilePhoto, type AvatarProfilePhotoProps, type AvatarProfilePhotoSize, type AvatarProps, type AvatarSize, BadgeCloseX, type BadgeCloseXProps, type BadgeCloseXShape, type BadgeColor, type BadgeCommonProps, BadgeGroup, type BadgeGroupBadgePosition, type BadgeGroupProps, type BadgeGroupSize, type BadgeGroupType, type BadgeSize, BreadcrumbButtonBase, type BreadcrumbButtonBaseProps, type BreadcrumbButtonType, Breadcrumbs, type BreadcrumbsDivider, type BreadcrumbsProps, Button, ButtonCloseX, type ButtonCloseXProps, type ButtonCloseXSize, ButtonDestructive, type ButtonDestructiveHierarchy, type ButtonDestructiveProps, type ButtonDestructiveSize, ButtonGroup, type ButtonGroupProps, ButtonGroupSegment, type ButtonGroupSegmentProps, type ButtonGroupSegmentSize, type ButtonProps, ButtonUtility, type ButtonUtilityProps, type ButtonUtilitySize, type ButtonUtilityVariant, Calendar, type CalendarBreakpoint, CalendarCell, type CalendarCellBreakpoint, CalendarCellDayWeekView, type CalendarCellDayWeekViewProps, type CalendarCellEvent, type CalendarCellProps, CalendarColumnHeader, type CalendarColumnHeaderOrientation, type CalendarColumnHeaderProps, type CalendarColumnHeaderType, CalendarDateIcon, type CalendarDateIconProps, CalendarEvent, type CalendarEventBreakpoint, type CalendarEventColor, type CalendarEventData, CalendarEventDayWeekView, type CalendarEventDayWeekViewProps, type CalendarEventProps, type CalendarEventState, CalendarHeader, type CalendarHeaderProps, type CalendarProps, CalendarRowLabel, type CalendarRowLabelProps, CalendarTimemarker, type CalendarTimemarkerAlign, type CalendarTimemarkerBreakpoint, type CalendarTimemarkerProps, type CalendarTimeslotState, type CalendarTimeslotType, type CalendarView, CalendarViewDropdown, type CalendarViewDropdownProps, type CalendarViewOption, CardHeader, type CardHeaderProps, CarouselArrow, type CarouselArrowDirection, type CarouselArrowProps, type CarouselArrowSize, CarouselImage, type CarouselImageProps, Change, type ChangeProps, type ChangeTrend, type ChangeType, ChartLegend, type ChartLegendItem, type ChartLegendPosition, type ChartLegendProps, ChartMarker, type ChartMarkerLine, type ChartMarkerProps, ChartMini, type ChartMiniDatum, type ChartMiniProps, type ChartMiniTrend, type ChartSeries, type ChartStyle, ChartTooltip, type ChartTooltipPayloadItem, type ChartTooltipProps, type CheckControlSize, Checkbox, type CheckboxProps, CodeSnippet, type CodeSnippetProps, CodeSnippetTabs, type CodeSnippetTabsProps, ColorBadge, type ColorBadgeProps, ComboBox, type ComboBoxOption, type ComboBoxProps, CommandBar, CommandBarFooter, type CommandBarFooterHint, type CommandBarFooterProps, CommandBarMenuSection, type CommandBarMenuSectionProps, CommandBarNavigationIcon, type CommandBarNavigationIconProps, type CommandBarProps, CommandDropdownMenuItem, type CommandDropdownMenuItemProps, CommandInput, type CommandInputProps, CommandShortcut, type CommandShortcutProps, ContentDivider, type ContentDividerProps, type ContentDividerStyle, type ContentDividerType, ContentFeatureText, type ContentFeatureTextProps, type ContentFeatureTextSize, ContentHeading, type ContentHeadingProps, type ContentHeadingSize, ContentParagraph, type ContentParagraphProps, type ContentParagraphSize, ContentQuote, type ContentQuoteAlign, type ContentQuoteProps, type ContentQuoteSize, ContentRule, type ContentRuleProps, type ContentRuleSize, ContextMenu, type ContextMenuProps, type ContextMenuState, DatePickerCell, type DatePickerCellProps, type DatePickerCellType, DatePickerListItem, type DatePickerListItemProps, DatePickerMenu, type DatePickerMenuProps, DropdownAccountListItem, type DropdownAccountListItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, type DropdownMenuFooterType, DropdownMenuHeader, type DropdownMenuHeaderProps, type DropdownMenuHeaderType, DropdownMenuItemInsetIcon, type DropdownMenuItemInsetIconProps, type DropdownMenuItemInsetIconType, DropdownMenuListItem, type DropdownMenuListItemProps, EmptyState, type EmptyStateProps, type EmptyStateSize, FeaturedIcon, type FeaturedIconColor, type FeaturedIconProps, type FeaturedIconSize, type FeaturedIconTheme, FeedItemBase, type FeedItemBaseProps, type FeedItemSize, FileUpload, FileUploadBase, type FileUploadBaseProps, FileUploadItemBase, type FileUploadItemBaseProps, type FileUploadItemIconType, type FileUploadItemStatus, type FileUploadItemType, type FileUploadProps, FilterBar, type FilterBarProps, FilterTabs, type FilterTabsProps, FiltersDropdownMenu, type FiltersDropdownMenuProps, FiltersSlideoutMenu, type FiltersSlideoutMenuProps, type HeaderNavItem, HeaderNavigation, type HeaderNavigationProps, type HeaderNavigationType, HelpIcon, type HelpIconProps, InputField, type InputFieldProps, type InputFieldSize, type InputFieldType, LeadingInputField, type LeadingInputFieldProps, LineAndBarChart, type LineAndBarChartProps, LinkMessage, type LinkMessageProps, type LinkMessageType, LoadingIndicator, type LoadingIndicatorProps, type LoadingIndicatorSize, type LoadingIndicatorStyle, MediaMessage, type MediaMessageProps, type MediaMessageType, MegaInputFieldBase, type MegaInputFieldBaseProps, type MegaInputFieldBaseSize, Message, MessageAction, MessageActionButton, type MessageActionButtonProps, MessageActionPanel, type MessageActionPanelProps, type MessageActionProps, type MessageActionType, type MessageBubbleTone, type MessageProps, MessageReaction, type MessageReactionProps, type MessageStatus, MessageStatusIcon, type MessageStatusIconProps, type MessageType, MetricItem, type MetricItemProps, Modal, ModalActions, type ModalActionsProps, type ModalActionsType, ModalHeader, type ModalHeaderProps, type ModalHeaderType, type ModalProps, type ModalSize, ModernBadge, type ModernBadgeProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NavAccountCard, type NavAccountCardBreakpoint, NavAccountCardMenuItem, type NavAccountCardMenuItemProps, type NavAccountCardMenuItemType, type NavAccountCardProps, type NavAccountCardVariant, NavButton, type NavButtonProps, NavFeaturedCard, type NavFeaturedCardProps, NavItemBase, type NavItemBaseProps, NavItemDropdownBase, type NavItemDropdownBaseProps, NavMenuButton, type NavMenuButtonProps, Notification, type NotificationProps, type NotificationVariant, NumberInput, type NumberInputLayout, type NumberInputProps, PageHeader, type PageHeaderProps, type PageHeaderStyle, Pagination, PaginationButtonGroupBase, type PaginationButtonGroupBaseProps, type PaginationButtonGroupType, PaginationCards, type PaginationCardsProps, type PaginationCardsVariant, PaginationDotGroup, type PaginationDotGroupProps, PaginationDotIndicator, type PaginationDotIndicatorProps, type PaginationDotSize, type PaginationDotVariant, PaginationNumberBase, type PaginationNumberBaseProps, type PaginationNumberShape, type PaginationProps, type PaginationType, PieChart, type PieChartProps, type PieChartSize, type PieSlice, PillBadge, type PillBadgeProps, ProgressBar, type ProgressBarLabel, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, type ProgressCircleShape, type ProgressCircleSize, RadarChart, type RadarChartProps, type RadarLegendPosition, Radio, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupItemSize, type RadioGroupItemType, type RadioGroupProps, type RadioProps, SectionFooter, type SectionFooterProps, type SectionFooterType, SectionHeader, type SectionHeaderProps, SectionLabel, type SectionLabelProps, type SectionLabelSize, Select, SelectMenuItem, type SelectMenuItemProps, type SelectMenuItemSize, type SelectProps, type SelectSize, type SelectType, SidebarNavigation, type SidebarNavigationProps, type SidebarNavigationType, SlideOutMenuHeader, type SlideOutMenuHeaderProps, SlideoutMenu, type SlideoutMenuProps, type SlideoutMenuSide, type SlideoutMenuSize, Slider, type SliderLabel, type SliderProps, type SocialBrand, SocialButton, type SocialButtonProps, type SocialButtonSize, type SocialButtonTheme, StatusIcon, type StatusIconProps, type StatusIconType, StepBase, type StepBaseProps, StepIconBase, type StepIconBaseProps, type StepIconSize, type StepIconType, type StepOrientation, type StepStatus, TabButtonBase, type TabButtonBaseProps, type TabButtonSize, type TabButtonType, type TabItem, TableCell, type TableCellProps, type TableCellSize, TableHeaderCell, type TableHeaderCellProps, type TableHeaderCellSize, TableHeaderLabel, type TableHeaderLabelArrow, type TableHeaderLabelProps, Tabs, type TabsOrientation, type TabsProps, Tag, type TagProps, type TagSize, TagsInputField, type TagsInputFieldProps, type TagsInputVariant, TextEditor, type TextEditorProps, TextEditorToolbar, TextEditorToolbarDivider, type TextEditorToolbarProps, TextEditorTooltip, type TextEditorTooltipProps, TextareaInputField, type TextareaInputFieldProps, Toggle, type ToggleProps, type ToggleSize, type ToggleType, Tooltip, type TooltipArrow, type TooltipProps, TrailingInputField, type TrailingInputFieldProps, type TreeNode, TreeView, TreeViewConnector, type TreeViewConnectorProps, type TreeViewConnectorSize, type TreeViewConnectorType, TreeViewItem, type TreeViewItemProps, type TreeViewItemSize, type TreeViewProps, type UseContextMenuReturn, type UseTextEditorOptions, type VerificationCodeDigits, VerificationCodeInput, type VerificationCodeInputProps, type VerificationCodeSize, index as illustrations, useContextMenu, useTextEditor };

package/dist/index.js

@@ -4,7 +4,7 @@ import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { dateFnsLocalizer, Calendar as Calendar$1 } from 'react-big-calendar';
 import { getDay, parse, format, startOfWeek, isSameDay } from 'date-fns';
 import { enUS } from 'date-fns/locale';
-import { Plus, LogOut01, ChevronSelectorVertical, ChevronDown as ChevronDown$1, XClose as XClose$1, Menu02, Bold01, AlignLeft, AlignCenter, AlignRight, Link01, ArrowLeft, ArrowRight } from '@borisj74/bv-ds-icons';
+import { Plus, ChevronDown, LogOut01, ChevronSelectorVertical, XClose as XClose$1, Menu02, Bold01, AlignLeft, AlignCenter, AlignRight, Link01, ArrowLeft, ArrowRight } from '@borisj74/bv-ds-icons';
 import { useEditor, EditorContent } from '@tiptap/react';
 import { StarterKit } from '@tiptap/starter-kit';
 import { TextAlign } from '@tiptap/extension-text-align';
@@ -29571,6 +29571,156 @@ function CommandShortcut({ keys: keys2, className }) {
     i
   )) });
 }
+var inputSizeClasses = {
+  sm: "px-lg py-md text-sm",
+  md: "px-lg py-md text-md",
+  lg: "px-[14px] py-2.5 text-md"
+};
+function boxClasses(destructive) {
+  return clsx_default(
+    "flex w-full items-center gap-md rounded-md border bg-bg-primary shadow-xs",
+    "transition-shadow focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-bg-primary",
+    destructive ? "border-border-error focus-within:ring-border-error" : "border-border-primary focus-within:border-border-brand focus-within:ring-border-brand"
+  );
+}
+function FieldWrapper({
+  label,
+  required,
+  hint,
+  destructive,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("flex w-full flex-col gap-sm font-body", className), children: [
+    label ? /* @__PURE__ */ jsxs("span", { className: "flex gap-xxs text-sm font-medium text-text-secondary", children: [
+      label,
+      required ? /* @__PURE__ */ jsx("span", { className: "text-text-brand-tertiary", children: "*" }) : null
+    ] }) : null,
+    children,
+    hint ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: clsx_default(
+          "text-sm font-normal",
+          destructive ? "text-text-error-primary" : "text-text-tertiary"
+        ),
+        children: hint
+      }
+    ) : null
+  ] });
+}
+function CheckboxBox({ selected, big }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: clsx_default(
+        "flex shrink-0 items-center justify-center rounded-xs border",
+        big ? "size-5" : "size-4",
+        selected ? "border-transparent bg-bg-brand-solid" : "border-border-primary bg-bg-primary"
+      ),
+      children: selected && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-3 text-fg-white", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M13.33 4 6 11.33 2.67 8", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) })
+    }
+  );
+}
+function SelectMenuItem({
+  label,
+  supportingText,
+  selected = false,
+  size = "sm",
+  leading,
+  multi = false,
+  disabled,
+  className,
+  ...rest
+}) {
+  const big = size !== "sm";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "option",
+      "aria-selected": selected,
+      disabled,
+      className: clsx_default(
+        "flex w-full items-center gap-md rounded-sm text-left transition-colors",
+        size === "lg" ? "py-2.5 pl-md pr-2.5" : "p-md",
+        disabled ? "opacity-50" : "hover:bg-bg-primary-hover",
+        className
+      ),
+      ...rest,
+      children: [
+        multi && /* @__PURE__ */ jsx(CheckboxBox, { selected, big }),
+        !multi && leading && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: leading }),
+        /* @__PURE__ */ jsxs("span", { className: clsx_default("flex min-w-0 flex-1 items-center gap-sm", big ? "text-md" : "text-sm"), children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-text-primary", children: label }),
+          supportingText && /* @__PURE__ */ jsx("span", { className: "truncate font-normal text-text-tertiary", children: supportingText })
+        ] }),
+        !multi && selected && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5 shrink-0 text-fg-brand-primary", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M16.67 5 7.5 14.17 3.33 10", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) })
+      ]
+    }
+  );
+}
+function ComboBox({
+  options,
+  value,
+  onChange,
+  onInputChange,
+  placeholder = "Search...",
+  disabled = false,
+  error = false,
+  label,
+  hint,
+  required,
+  className
+}) {
+  const selectedLabel = useMemo(
+    () => options.find((o) => o.value === value)?.label ?? "",
+    [options, value]
+  );
+  const [query, setQuery] = useState(selectedLabel);
+  const [open, setOpen] = useState(false);
+  const display = open ? query : selectedLabel;
+  const filtered = options.filter(
+    (o) => o.label.toLowerCase().includes(query.trim().toLowerCase())
+  );
+  const pick = (o) => {
+    onChange?.(o.value);
+    setQuery(o.label);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsx(FieldWrapper, { label, required, hint, destructive: error, className, children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx_default(boxClasses(error), "px-lg py-md", disabled && "cursor-not-allowed bg-bg-secondary opacity-60"), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: display,
+          disabled,
+          placeholder,
+          onFocus: () => setOpen(true),
+          onBlur: () => setTimeout(() => setOpen(false), 120),
+          onChange: (e) => {
+            setQuery(e.target.value);
+            setOpen(true);
+            onInputChange?.(e.target.value);
+          },
+          className: "min-w-0 flex-1 bg-transparent text-md text-text-primary outline-none placeholder:text-text-placeholder"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: clsx_default("text-fg-quaternary transition-transform", open && "rotate-180"), children: /* @__PURE__ */ jsx(IconBox, { size: 16, children: /* @__PURE__ */ jsx(ChevronDown, {}) }) })
+    ] }),
+    open && !disabled && /* @__PURE__ */ jsx("div", { className: "absolute left-0 right-0 top-full z-50 mt-xs flex max-h-[320px] flex-col gap-px overflow-auto rounded-md border border-border-secondary-alt bg-bg-primary p-xs shadow-lg", children: filtered.length ? filtered.map((o) => /* @__PURE__ */ jsx(
+      SelectMenuItem,
+      {
+        label: o.label,
+        supportingText: o.supportingText,
+        selected: o.value === value,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => pick(o)
+      },
+      o.value
+    )) : /* @__PURE__ */ jsx("div", { className: "px-md py-lg text-center text-sm text-text-tertiary", children: "No results" }) })
+  ] }) });
+}
 var isTextType = (t) => t === "heading" || t === "text";
 function ContentDivider({
   type = "heading",
@@ -30749,7 +30899,7 @@ function FilterLines2() {
     }
   ) });
 }
-function ChevronDown() {
+function ChevronDown2() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "m4 6 4 4 4-4", stroke: "currentColor", strokeWidth: "1.333", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function FiltersDropdownMenu({
@@ -30783,7 +30933,7 @@ function FiltersDropdownMenu({
           /* @__PURE__ */ jsx(FilterLines2, {}),
           /* @__PURE__ */ jsx("span", { children: label }),
           active ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-bg-brand-solid px-1.5 text-xs font-medium text-text-white", children: count }) : null,
-          chevron ? /* @__PURE__ */ jsx(ChevronDown, {}) : null
+          chevron ? /* @__PURE__ */ jsx(ChevronDown2, {}) : null
         ]
       }
     ),
@@ -30999,44 +31149,6 @@ function HelpIcon2({
     /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100", children: /* @__PURE__ */ jsx(Tooltip2, { text, supportingText, arrow }) })
   ] });
 }
-var inputSizeClasses = {
-  sm: "px-lg py-md text-sm",
-  md: "px-lg py-md text-md",
-  lg: "px-[14px] py-2.5 text-md"
-};
-function boxClasses(destructive) {
-  return clsx_default(
-    "flex w-full items-center gap-md rounded-md border bg-bg-primary shadow-xs",
-    "transition-shadow focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-bg-primary",
-    destructive ? "border-border-error focus-within:ring-border-error" : "border-border-primary focus-within:border-border-brand focus-within:ring-border-brand"
-  );
-}
-function FieldWrapper({
-  label,
-  required,
-  hint,
-  destructive,
-  children,
-  className
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: clsx_default("flex w-full flex-col gap-sm font-body", className), children: [
-    label ? /* @__PURE__ */ jsxs("span", { className: "flex gap-xxs text-sm font-medium text-text-secondary", children: [
-      label,
-      required ? /* @__PURE__ */ jsx("span", { className: "text-text-brand-tertiary", children: "*" }) : null
-    ] }) : null,
-    children,
-    hint ? /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: clsx_default(
-          "text-sm font-normal",
-          destructive ? "text-text-error-primary" : "text-text-tertiary"
-        ),
-        children: hint
-      }
-    ) : null
-  ] });
-}
 function CalendarIcon() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5 text-fg-quaternary", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M17.5 8.333H2.5M13.333 1.667V5M6.667 1.667V5M6.5 18.333h7c1.4 0 2.1 0 2.635-.272a2.5 2.5 0 0 0 1.093-1.093C17.5 16.433 17.5 15.733 17.5 14.333v-7c0-1.4 0-2.1-.272-2.635a2.5 2.5 0 0 0-1.093-1.093C15.6 3.333 14.9 3.333 13.5 3.333h-7c-1.4 0-2.1 0-2.635.272A2.5 2.5 0 0 0 2.772 4.698C2.5 5.233 2.5 5.933 2.5 7.333v7c0 1.4 0 2.1.272 2.635a2.5 2.5 0 0 0 1.093 1.093c.535.272 1.235.272 2.635.272Z", stroke: "currentColor", strokeWidth: "1.667", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
@@ -31965,57 +32077,6 @@ function ModalActions({
     )
   ] });
 }
-function CheckboxBox({ selected, big }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: clsx_default(
-        "flex shrink-0 items-center justify-center rounded-xs border",
-        big ? "size-5" : "size-4",
-        selected ? "border-transparent bg-bg-brand-solid" : "border-border-primary bg-bg-primary"
-      ),
-      children: selected && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-3 text-fg-white", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M13.33 4 6 11.33 2.67 8", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) })
-    }
-  );
-}
-function SelectMenuItem({
-  label,
-  supportingText,
-  selected = false,
-  size = "sm",
-  leading,
-  multi = false,
-  disabled,
-  className,
-  ...rest
-}) {
-  const big = size !== "sm";
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      role: "option",
-      "aria-selected": selected,
-      disabled,
-      className: clsx_default(
-        "flex w-full items-center gap-md rounded-sm text-left transition-colors",
-        size === "lg" ? "py-2.5 pl-md pr-2.5" : "p-md",
-        disabled ? "opacity-50" : "hover:bg-bg-primary-hover",
-        className
-      ),
-      ...rest,
-      children: [
-        multi && /* @__PURE__ */ jsx(CheckboxBox, { selected, big }),
-        !multi && leading && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: leading }),
-        /* @__PURE__ */ jsxs("span", { className: clsx_default("flex min-w-0 flex-1 items-center gap-sm", big ? "text-md" : "text-sm"), children: [
-          /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-text-primary", children: label }),
-          supportingText && /* @__PURE__ */ jsx("span", { className: "truncate font-normal text-text-tertiary", children: supportingText })
-        ] }),
-        !multi && selected && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5 shrink-0 text-fg-brand-primary", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M16.67 5 7.5 14.17 3.33 10", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) })
-      ]
-    }
-  );
-}
 function Tag({
   size = "md",
   children,
@@ -32398,7 +32459,7 @@ function NavItemBase({
               /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left text-sm font-semibold text-text-secondary", children: label })
             ] }),
             badge != null && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full border border-utility-neutral-200 bg-utility-neutral-50 px-md py-xxs text-xs font-medium text-utility-neutral-700", children: badge }),
-            trailingChevron && /* @__PURE__ */ jsx(IconBox, { size: 16, className: "text-fg-quaternary", children: /* @__PURE__ */ jsx(ChevronDown$1, {}) })
+            trailingChevron && /* @__PURE__ */ jsx(IconBox, { size: 16, className: "text-fg-quaternary", children: /* @__PURE__ */ jsx(ChevronDown, {}) })
           ]
         }
       )
@@ -32436,7 +32497,7 @@ function NavItemDropdownBase({
                 icon && /* @__PURE__ */ jsx(IconBox, { size: 20, className: "text-fg-quaternary", children: icon }),
                 /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left text-sm font-semibold text-text-secondary", children: label })
               ] }),
-              /* @__PURE__ */ jsx(IconBox, { size: 16, className: "text-fg-quaternary", children: /* @__PURE__ */ jsx(ChevronDown$1, { className: clsx_default("transition-transform", open && "rotate-180") }) })
+              /* @__PURE__ */ jsx(IconBox, { size: 16, className: "text-fg-quaternary", children: /* @__PURE__ */ jsx(ChevronDown, { className: clsx_default("transition-transform", open && "rotate-180") }) })
             ]
           }
         )
@@ -32955,6 +33016,7 @@ function TagChip({ label, onRemove }) {
 function TagsInputField({
   tags = [],
   onRemoveTag,
+  onAddTag,
   variant = "inner",
   size = "md",
   label,
@@ -32965,6 +33027,21 @@ function TagsInputField({
   placeholder = "Add tag",
   ...rest
 }) {
+  const [draft, setDraft] = useState("");
+  const commit = (raw) => {
+    const next = raw.trim();
+    if (!next || tags.includes(next)) return;
+    onAddTag?.(next);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      commit(draft);
+      setDraft("");
+    } else if (e.key === "Backspace" && draft === "" && tags.length) {
+      onRemoveTag?.(tags.length - 1);
+    }
+  };
   const chips = tags.map((t, i) => /* @__PURE__ */ jsx(TagChip, { label: t, onRemove: onRemoveTag ? () => onRemoveTag(i) : void 0 }, i));
   const box = (inner) => /* @__PURE__ */ jsxs(
     "div",
@@ -32981,7 +33058,12 @@ function TagsInputField({
           {
             placeholder,
             className: "min-w-[80px] flex-1 bg-transparent text-md text-text-primary outline-none placeholder:text-text-placeholder",
-            ...rest
+            ...rest,
+            ...onAddTag ? {
+              value: draft,
+              onChange: (e) => setDraft(e.target.value),
+              onKeyDown: handleKeyDown
+            } : {}
           }
         )
       ]
@@ -34384,6 +34466,6 @@ object-assign/index.js:
   *)
 */
 
-export { ActivityFeed, ActivityGauge, AdvancedFilterBar, Alert, Avatar, AvatarAddButton, AvatarGroup, AvatarLabelGroup, AvatarProfilePhoto, BadgeCloseX, BadgeGroup, BreadcrumbButtonBase, Breadcrumbs, Button, ButtonCloseX, ButtonDestructive, ButtonGroup, ButtonGroupSegment, ButtonUtility, Calendar, CalendarCell, CalendarCellDayWeekView, CalendarColumnHeader, CalendarDateIcon, CalendarEvent, CalendarEventDayWeekView, CalendarHeader, CalendarRowLabel, CalendarTimemarker, CalendarViewDropdown, CardHeader, CarouselArrow, CarouselImage, Change, ChartLegend, ChartMarker, ChartMini, ChartTooltip, Checkbox, CodeSnippet, CodeSnippetTabs, ColorBadge, CommandBar, CommandBarFooter, CommandBarMenuSection, CommandBarNavigationIcon, CommandDropdownMenuItem, CommandInput, CommandShortcut, ContentDivider, ContentFeatureText, ContentHeading, ContentParagraph, ContentQuote, ContentRule, ContextMenu, DatePickerCell, DatePickerListItem, DatePickerMenu, DropdownAccountListItem, DropdownMenuFooter, DropdownMenuHeader, DropdownMenuItemInsetIcon, DropdownMenuListItem, EmptyState, FeaturedIcon, FeedItemBase, FileUpload, FileUploadBase, FileUploadItemBase, FilterBar, FilterTabs, FiltersDropdownMenu, FiltersSlideoutMenu, HeaderNavigation, HelpIcon2 as HelpIcon, InputField, LeadingInputField, LineAndBarChart, LinkMessage, LoadingIndicator, MediaMessage, MegaInputFieldBase, Message, MessageAction, MessageActionButton, MessageActionPanel, MessageReaction, MessageStatusIcon, MetricItem, Modal, ModalActions, ModalHeader, ModernBadge, MultiSelect, NavAccountCard, NavAccountCardMenuItem, NavButton2 as NavButton, NavFeaturedCard, NavItemBase, NavItemDropdownBase, NavMenuButton, Notification, NumberInput, PageHeader, Pagination, PaginationButtonGroupBase, PaginationCards, PaginationDotGroup, PaginationDotIndicator, PaginationNumberBase, PieChart2 as PieChart, PillBadge, ProgressBar, ProgressCircle, RadarChart2 as RadarChart, Radio, RadioGroup, RadioGroupItem, SectionFooter, SectionHeader, SectionLabel, Select, SelectMenuItem, SidebarNavigation, SlideOutMenuHeader, SlideoutMenu, Slider, SocialButton, StatusIcon, StepBase, StepIconBase, TabButtonBase, TableCell, TableHeaderCell, TableHeaderLabel, Tabs, Tag, TagsInputField, TextEditor, TextEditorToolbar, TextEditorToolbarDivider, TextEditorTooltip, TextareaInputField, Toggle, Tooltip2 as Tooltip, TrailingInputField, TreeView, TreeViewConnector, TreeViewItem, VerificationCodeInput, illustrations_exports as illustrations, useContextMenu, useTextEditor };
+export { ActivityFeed, ActivityGauge, AdvancedFilterBar, Alert, Avatar, AvatarAddButton, AvatarGroup, AvatarLabelGroup, AvatarProfilePhoto, BadgeCloseX, BadgeGroup, BreadcrumbButtonBase, Breadcrumbs, Button, ButtonCloseX, ButtonDestructive, ButtonGroup, ButtonGroupSegment, ButtonUtility, Calendar, CalendarCell, CalendarCellDayWeekView, CalendarColumnHeader, CalendarDateIcon, CalendarEvent, CalendarEventDayWeekView, CalendarHeader, CalendarRowLabel, CalendarTimemarker, CalendarViewDropdown, CardHeader, CarouselArrow, CarouselImage, Change, ChartLegend, ChartMarker, ChartMini, ChartTooltip, Checkbox, CodeSnippet, CodeSnippetTabs, ColorBadge, ComboBox, CommandBar, CommandBarFooter, CommandBarMenuSection, CommandBarNavigationIcon, CommandDropdownMenuItem, CommandInput, CommandShortcut, ContentDivider, ContentFeatureText, ContentHeading, ContentParagraph, ContentQuote, ContentRule, ContextMenu, DatePickerCell, DatePickerListItem, DatePickerMenu, DropdownAccountListItem, DropdownMenuFooter, DropdownMenuHeader, DropdownMenuItemInsetIcon, DropdownMenuListItem, EmptyState, FeaturedIcon, FeedItemBase, FileUpload, FileUploadBase, FileUploadItemBase, FilterBar, FilterTabs, FiltersDropdownMenu, FiltersSlideoutMenu, HeaderNavigation, HelpIcon2 as HelpIcon, InputField, LeadingInputField, LineAndBarChart, LinkMessage, LoadingIndicator, MediaMessage, MegaInputFieldBase, Message, MessageAction, MessageActionButton, MessageActionPanel, MessageReaction, MessageStatusIcon, MetricItem, Modal, ModalActions, ModalHeader, ModernBadge, MultiSelect, NavAccountCard, NavAccountCardMenuItem, NavButton2 as NavButton, NavFeaturedCard, NavItemBase, NavItemDropdownBase, NavMenuButton, Notification, NumberInput, PageHeader, Pagination, PaginationButtonGroupBase, PaginationCards, PaginationDotGroup, PaginationDotIndicator, PaginationNumberBase, PieChart2 as PieChart, PillBadge, ProgressBar, ProgressCircle, RadarChart2 as RadarChart, Radio, RadioGroup, RadioGroupItem, SectionFooter, SectionHeader, SectionLabel, Select, SelectMenuItem, SidebarNavigation, SlideOutMenuHeader, SlideoutMenu, Slider, SocialButton, StatusIcon, StepBase, StepIconBase, TabButtonBase, TableCell, TableHeaderCell, TableHeaderLabel, Tabs, Tag, TagsInputField, TextEditor, TextEditorToolbar, TextEditorToolbarDivider, TextEditorTooltip, TextareaInputField, Toggle, Tooltip2 as Tooltip, TrailingInputField, TreeView, TreeViewConnector, TreeViewItem, VerificationCodeInput, illustrations_exports as illustrations, useContextMenu, useTextEditor };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@borisj74/bv-ds",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "bv-ds — React component library synced from Figma (Untitled UI v8.0), built on Tailwind CSS",
   "license": "MIT",
   "type": "module",

package/src/components/ComboBox/ComboBox.tsx

@@ -0,0 +1,114 @@
+import { useMemo, useState, type ReactNode } from "react";
+import clsx from "clsx";
+import { ChevronDown } from "@borisj74/bv-ds-icons";
+import { IconBox } from "../../internal/iconBox";
+import { FieldWrapper, boxClasses } from "../InputField/inputFieldShared";
+import { SelectMenuItem } from "../SelectMenuItem";
+
+export interface ComboBoxOption {
+  value: string;
+  label: string;
+  supportingText?: ReactNode;
+}
+
+export interface ComboBoxProps {
+  options: ComboBoxOption[];
+  /** Selected option value (controlled). */
+  value?: string;
+  onChange?: (value: string) => void;
+  /** Fires on every keystroke in the input — wire for async/remote filtering. */
+  onInputChange?: (input: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  /** Error styling on the input shell + hint. */
+  error?: boolean;
+  label?: ReactNode;
+  hint?: ReactNode;
+  required?: boolean;
+  className?: string;
+}
+
+/**
+ * Text input with an autocomplete dropdown. Typing filters `options` by label
+ * (case-insensitive, substring); picking a row commits its `value` via
+ * `onChange` and fills the input with that label. A non-matching query shows a
+ * "No results" row. Controlled selection via `value`/`onChange`; raw keystrokes
+ * surface through `onInputChange` for remote filtering.
+ */
+export function ComboBox({
+  options,
+  value,
+  onChange,
+  onInputChange,
+  placeholder = "Search...",
+  disabled = false,
+  error = false,
+  label,
+  hint,
+  required,
+  className,
+}: ComboBoxProps) {
+  const selectedLabel = useMemo(
+    () => options.find((o) => o.value === value)?.label ?? "",
+    [options, value],
+  );
+  const [query, setQuery] = useState(selectedLabel);
+  const [open, setOpen] = useState(false);
+
+  // Reflect external value changes while the field is closed (not mid-typing).
+  const display = open ? query : selectedLabel;
+
+  const filtered = options.filter((o) =>
+    o.label.toLowerCase().includes(query.trim().toLowerCase()),
+  );
+
+  const pick = (o: ComboBoxOption) => {
+    onChange?.(o.value);
+    setQuery(o.label);
+    setOpen(false);
+  };
+
+  return (
+    <FieldWrapper label={label} required={required} hint={hint} destructive={error} className={className}>
+      <div className="relative">
+        <div className={clsx(boxClasses(error), "px-lg py-md", disabled && "cursor-not-allowed bg-bg-secondary opacity-60")}>
+          <input
+            value={display}
+            disabled={disabled}
+            placeholder={placeholder}
+            onFocus={() => setOpen(true)}
+            onBlur={() => setTimeout(() => setOpen(false), 120)}
+            onChange={(e) => {
+              setQuery(e.target.value);
+              setOpen(true);
+              onInputChange?.(e.target.value);
+            }}
+            className="min-w-0 flex-1 bg-transparent text-md text-text-primary outline-none placeholder:text-text-placeholder"
+          />
+          <span className={clsx("text-fg-quaternary transition-transform", open && "rotate-180")}>
+            <IconBox size={16}><ChevronDown /></IconBox>
+          </span>
+        </div>
+
+        {open && !disabled && (
+          <div className="absolute left-0 right-0 top-full z-50 mt-xs flex max-h-[320px] flex-col gap-px overflow-auto rounded-md border border-border-secondary-alt bg-bg-primary p-xs shadow-lg">
+            {filtered.length ? (
+              filtered.map((o) => (
+                <SelectMenuItem
+                  key={o.value}
+                  label={o.label}
+                  supportingText={o.supportingText}
+                  selected={o.value === value}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onClick={() => pick(o)}
+                />
+              ))
+            ) : (
+              <div className="px-md py-lg text-center text-sm text-text-tertiary">No results</div>
+            )}
+          </div>
+        )}
+      </div>
+    </FieldWrapper>
+  );
+}

package/src/components/ComboBox/index.ts

@@ -0,0 +1,2 @@
+export { ComboBox } from "./ComboBox";
+export type { ComboBoxProps, ComboBoxOption } from "./ComboBox";

package/src/components/TagsInputField/TagsInputField.tsx

@@ -1,4 +1,4 @@
-import type { InputHTMLAttributes, ReactNode } from "react";
+import { useState, type InputHTMLAttributes, type KeyboardEvent, type ReactNode } from "react";
 import clsx from "clsx";
 import { FieldWrapper, type InputFieldSize } from "../InputField/inputFieldShared";
 
@@ -10,6 +10,14 @@ export interface TagsInputFieldProps
   tags?: string[];
   /** Remove handler (receives the tag index). Renders a close button per chip. */
   onRemoveTag?: (index: number) => void;
+  /**
+   * Add handler. When supplied, the inner input becomes interactive: Enter or
+   * comma commits the trimmed input text as a new tag; Backspace on an empty
+   * input removes the last chip (via `onRemoveTag`). Empty/duplicate adds are
+   * ignored. Without it the field stays display-only (chips controlled by
+   * `tags`/`onRemoveTag`).
+   */
+  onAddTag?: (tag: string) => void;
   /** `inner` keeps chips inside the field; `outer` shows them below it. */
   variant?: TagsInputVariant;
   size?: InputFieldSize;
@@ -42,6 +50,7 @@ function TagChip({ label, onRemove }: { label: string; onRemove?: () => void })
 export function TagsInputField({
   tags = [],
   onRemoveTag,
+  onAddTag,
   variant = "inner",
   size = "md",
   label,
@@ -52,6 +61,24 @@ export function TagsInputField({
   placeholder = "Add tag",
   ...rest
 }: TagsInputFieldProps) {
+  const [draft, setDraft] = useState("");
+
+  const commit = (raw: string) => {
+    const next = raw.trim();
+    if (!next || tags.includes(next)) return;
+    onAddTag?.(next);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      commit(draft);
+      setDraft("");
+    } else if (e.key === "Backspace" && draft === "" && tags.length) {
+      onRemoveTag?.(tags.length - 1);
+    }
+  };
+
   const chips = tags.map((t, i) => (
     <TagChip key={i} label={t} onRemove={onRemoveTag ? () => onRemoveTag(i) : undefined} />
   ));
@@ -71,6 +98,13 @@ export function TagsInputField({
         placeholder={placeholder}
         className="min-w-[80px] flex-1 bg-transparent text-md text-text-primary outline-none placeholder:text-text-placeholder"
         {...rest}
+        {...(onAddTag
+          ? {
+              value: draft,
+              onChange: (e) => setDraft(e.target.value),
+              onKeyDown: handleKeyDown,
+            }
+          : {})}
       />
     </div>
   );

package/src/index.ts

@@ -47,6 +47,7 @@ export * from "./components/CommandBarNavigationIcon";
 export * from "./components/CommandDropdownMenuItem";
 export * from "./components/CommandInput";
 export * from "./components/CommandShortcut";
+export * from "./components/ComboBox";
 export * from "./components/ContentDivider";
 export * from "./components/ContentFeatureText";
 export * from "./components/ContentHeading";