@assure-one/design-system 0.15.0 → 0.15.1

package/dist/index.d.ts

@@ -1161,8 +1161,16 @@ interface SearchSelectProps {
      */
     onCreateNew?: () => void;
     createNewLabel?: string;
+    /**
+     * How the collapsed single-value display renders the picked option's
+     * `description`. "inline" (default) appends it as muted "· text" after the
+     * label — the existing behaviour. "pill" renders it as a discrete rounded
+     * badge after the label, so dense metadata (e.g. "1040 · 2025", "todo")
+     * reads as a tag instead of running into the label. Single-mode only.
+     */
+    descriptionVariant?: "inline" | "pill";
 }
-declare function SearchSelect({ options, selected: selectedProp, onSelect: onSelectProp, onRemove: onRemoveProp, value, onValueChange, onCreate, placeholder, className, disabled, groupFilter, pinnedGroups, closeOnSelect: closeOnSelectProp, showGroupCounts, onCreateNew, createNewLabel, }: SearchSelectProps): react_jsx_runtime.JSX.Element;
+declare function SearchSelect({ options, selected: selectedProp, onSelect: onSelectProp, onRemove: onRemoveProp, value, onValueChange, onCreate, placeholder, className, disabled, groupFilter, pinnedGroups, closeOnSelect: closeOnSelectProp, showGroupCounts, onCreateNew, createNewLabel, descriptionVariant, }: SearchSelectProps): react_jsx_runtime.JSX.Element;
 declare namespace SearchSelect {
     var displayName: string;
 }

package/dist/index.js

@@ -6062,7 +6062,8 @@ function SearchSelect({
   closeOnSelect: closeOnSelectProp = false,
   showGroupCounts = false,
   onCreateNew,
-  createNewLabel = "Create new"
+  createNewLabel = "Create new",
+  descriptionVariant = "inline"
 }) {
   const isSingleMode = value !== void 0 || onValueChange !== void 0;
   const singleSelectedOption = React36.useMemo(
@@ -6233,7 +6234,7 @@ function SearchSelect({
                     type: "button",
                     onClick: () => !disabled && setOpen(true),
                     disabled,
-                    className: "flex h-full flex-1 items-center gap-2 text-left outline-none disabled:cursor-not-allowed",
+                    className: "flex h-full min-w-0 flex-1 items-center gap-2 text-left outline-none disabled:cursor-not-allowed",
                     children: [
                       singleValue.icon && /* @__PURE__ */ jsx(
                         "span",
@@ -6246,7 +6247,15 @@ function SearchSelect({
                           children: singleValue.icon
                         }
                       ),
-                      /* @__PURE__ */ jsxs("span", { className: "text-fg flex-1 truncate text-[13px]", children: [
+                      descriptionVariant === "pill" && singleValue.description ? (
+                        // Pill variant: label truncates, description rides after it
+                        // as a discrete shrink-0 badge so dense metadata reads as a
+                        // tag instead of running into the label.
+                        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5 text-[13px]", children: [
+                          /* @__PURE__ */ jsx("span", { className: "text-fg truncate", children: singleValue.label }),
+                          /* @__PURE__ */ jsx("span", { className: "rounded-pill border-rule bg-bg-2 text-fg-3 shrink-0 border px-1.5 py-0.5 text-[11px] leading-none", children: singleValue.description })
+                        ] })
+                      ) : /* @__PURE__ */ jsxs("span", { className: "text-fg min-w-0 flex-1 truncate text-[13px]", children: [
                         singleValue.label,
                         singleValue.description && /* @__PURE__ */ jsxs("span", { className: "text-fg-4", children: [
                           " \xB7 ",