@alpic-ai/ui 0.0.0-dev.gaee339a → 0.0.0-dev.gb4dddaa

package/dist/components/combobox.d.mts

@@ -11,6 +11,8 @@ interface ComboboxBaseProps {
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
+  /** Resolves a selected value to a display label (e.g. for multi-select tags). Defaults to the value. */
+  getOptionLabel?: (value: string) => string;
 }
 interface ComboboxSingleProps extends ComboboxBaseProps {
   multiple?: false;

package/dist/components/combobox.mjs

@@ -15,7 +15,7 @@ function useComboboxContext() {
 	return context;
 }
 function Combobox(props) {
-	const { children, multiple = false, open: controlledOpen, defaultOpen = false, onOpenChange: controlledOnOpenChange } = props;
+	const { children, multiple = false, open: controlledOpen, defaultOpen = false, onOpenChange: controlledOnOpenChange, getOptionLabel } = props;
 	const [uncontrolledSingleValue, setUncontrolledSingleValue] = useState(!multiple ? props.defaultValue ?? null : null);
 	const [uncontrolledMultiValue, setUncontrolledMultiValue] = useState(multiple ? props.defaultValue ?? [] : []);
 	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
@@ -77,7 +77,8 @@ function Combobox(props) {
 		onDeselect,
 		isSelected,
 		open,
-		onOpenChange
+		onOpenChange,
+		getOptionLabel
 	}), [
 		multiple,
 		singleValue,
@@ -86,7 +87,8 @@ function Combobox(props) {
 		onDeselect,
 		isSelected,
 		open,
-		onOpenChange
+		onOpenChange,
+		getOptionLabel
 	]);
 	return /* @__PURE__ */ jsx(ComboboxContext.Provider, {
 		value: contextValue,
@@ -120,10 +122,11 @@ function ComboboxTrigger({ className, size, placeholder, children, ...props }) {
 	});
 }
 function ComboboxTags({ values, onDeselect }) {
+	const { getOptionLabel } = useComboboxContext();
 	return /* @__PURE__ */ jsx(Fragment, { children: values.map((tagValue) => /* @__PURE__ */ jsx(TagDismissible, {
 		onClick: (event) => event.stopPropagation(),
 		onDismiss: () => onDeselect(tagValue),
-		children: tagValue
+		children: getOptionLabel ? getOptionLabel(tagValue) : tagValue
 	}, tagValue)) });
 }
 function ComboboxContent({ className, children, filter, ...props }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "0.0.0-dev.gaee339a",
+  "version": "0.0.0-dev.gb4dddaa",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {

package/src/components/combobox.tsx

@@ -21,6 +21,8 @@ interface ComboboxContextValue {
   isSelected: (itemValue: string) => boolean;
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  /** Resolves a selected value to a display label (e.g. for multi-select tags). Defaults to the value. */
+  getOptionLabel?: (value: string) => string;
 }
 
 const ComboboxContext = createContext<ComboboxContextValue | null>(null);
@@ -40,6 +42,8 @@ interface ComboboxBaseProps {
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
+  /** Resolves a selected value to a display label (e.g. for multi-select tags). Defaults to the value. */
+  getOptionLabel?: (value: string) => string;
 }
 
 interface ComboboxSingleProps extends ComboboxBaseProps {
@@ -65,6 +69,7 @@ function Combobox(props: ComboboxProps) {
     open: controlledOpen,
     defaultOpen = false,
     onOpenChange: controlledOnOpenChange,
+    getOptionLabel,
   } = props;
 
   // Single mode state
@@ -175,8 +180,9 @@ function Combobox(props: ComboboxProps) {
       isSelected,
       open,
       onOpenChange,
+      getOptionLabel,
     }),
-    [multiple, singleValue, multiValues, onSelect, onDeselect, isSelected, open, onOpenChange],
+    [multiple, singleValue, multiValues, onSelect, onDeselect, isSelected, open, onOpenChange, getOptionLabel],
   );
 
   return (
@@ -229,6 +235,7 @@ function ComboboxTrigger({ className, size, placeholder, children, ...props }: C
 /* ── Tags (internal, for multi-select trigger) ────────────────────────────── */
 
 function ComboboxTags({ values, onDeselect }: { values: string[]; onDeselect: (value: string) => void }) {
+  const { getOptionLabel } = useComboboxContext();
   return (
     <>
       {values.map((tagValue) => (
@@ -237,7 +244,7 @@ function ComboboxTags({ values, onDeselect }: { values: string[]; onDeselect: (v
           onClick={(event) => event.stopPropagation()}
           onDismiss={() => onDeselect(tagValue)}
         >
-          {tagValue}
+          {getOptionLabel ? getOptionLabel(tagValue) : tagValue}
         </TagDismissible>
       ))}
     </>