@bytebrand/fe-ui-core-autobahn 1.0.129 → 1.0.131

package/ui/Dropdown.tsx

@@ -40,6 +40,11 @@ export interface DropdownProps {
   placeholder?: string;
   /** leading lucide icon (kebab-case), e.g. 'arrow-up-down'. */
   icon?: string;
+  /** custom leading icon element — takes precedence over `icon` when both are given. For a
+   *  one-off icon that isn't in lucide-react (e.g. a Figma-exported glyph); give it a
+   *  `className="lucide"` so it picks up the same `.mselect-btn .lucide` sizing/color rules
+   *  every named `icon` gets. */
+  iconNode?: React.ReactNode;
   disabled?: boolean;
   /** full-width trigger (default true for form fields; pass false for inline controls). */
   block?: boolean;
@@ -84,6 +89,7 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
   onChange,
   placeholder,
   icon,
+  iconNode,
   disabled = false,
   block = true,
   size = 'md',
@@ -349,7 +355,7 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
         // inside the popover) — a <button> can't legally contain an <input>, so this is a
         // <div> standing in for it, same `.mselect-btn` class for identical chrome.
         <div className="mselect-btn mselect-btn--editing">
-          {icon && <Icon name={icon} />}
+          {iconNode || (icon && <Icon name={icon} />)}
           <input
             ref={searchRef}
             type="text"
@@ -385,7 +391,7 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
           onClick={() => (open ? close(false) : openMenu())}
           onKeyDown={onTriggerKeyDown}
         >
-          {icon && <Icon name={icon} />}
+          {iconNode || (icon && <Icon name={icon} />)}
           <span className={'mselect-label' + (hasValue ? '' : ' mselect-label--ph')}>{label}</span>
           <Icon name="chevron-down" cls="mselect-chev" />
         </button>