uiplex 1.0.0 → 1.0.2

package/dist/index.cjs

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var reactDom = require('react-dom');
 
 const Button = ({ children, variant = "primary", size = "md", colorScheme = "", disabled = false, loading = false, leftIcon, rightIcon, onClick, className = "", style, ...props }) => {
     const buttonClasses = [
@@ -388,6 +389,225 @@ const Textarea = ({ size = "md", variant = "outline", isInvalid, isDisabled, isR
     return (jsxRuntime.jsx("textarea", { id: textareaId, className: textareaClasses, disabled: disabled, readOnly: isReadOnly, "aria-invalid": invalid, "aria-describedby": invalid && formControl.id ? `${formControl.id}-error` : undefined, style: style, ...props }));
 };
 
+const Select = ({ size = "md", variant = "outline", isInvalid, isDisabled, isReadOnly, options = [], placeholder = "Select...", value: controlledValue, defaultValue, onChange, mode = "single", searchable = false, allowClear = false, width, className = "", style, id, }) => {
+    const formControl = useFormControlContext();
+    const invalid = isInvalid ?? formControl.isInvalid ?? false;
+    const disabled = isDisabled ?? formControl.isDisabled ?? false;
+    const selectId = id || formControl.id;
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [searchTerm, setSearchTerm] = React.useState("");
+    const [internalValue, setInternalValue] = React.useState(defaultValue || (mode === "multiple" ? [] : ""));
+    const [dropdownPosition, setDropdownPosition] = React.useState(null);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : internalValue;
+    const selectRef = React.useRef(null);
+    const dropdownRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const clickFromTriggerRef = React.useRef(false);
+    // Close dropdown on outside click
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            // If click originated from trigger, ignore it
+            if (clickFromTriggerRef.current) {
+                return;
+            }
+            // Check if refs are available
+            if (!selectRef.current || !dropdownRef.current) {
+                return;
+            }
+            // Check if click is inside select trigger or dropdown
+            const clickedInsideSelect = selectRef.current.contains(target);
+            const clickedInsideDropdown = dropdownRef.current.contains(target);
+            // Close if clicked outside both
+            if (!clickedInsideSelect && !clickedInsideDropdown) {
+                setIsOpen(false);
+                setSearchTerm("");
+                setDropdownPosition(null);
+            }
+        };
+        // Use mousedown in capture phase for more reliable detection
+        // This prevents the double-click issue
+        document.addEventListener("mousedown", handleClickOutside, true);
+        document.addEventListener("touchstart", handleClickOutside, true);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside, true);
+            document.removeEventListener("touchstart", handleClickOutside, true);
+        };
+    }, [isOpen]);
+    // Calculate and update dropdown position
+    const updateDropdownPosition = React.useCallback(() => {
+        if (!triggerRef.current)
+            return;
+        const rect = triggerRef.current.getBoundingClientRect();
+        setDropdownPosition({
+            top: rect.bottom + 4,
+            left: rect.left,
+            width: rect.width,
+        });
+    }, []);
+    // Calculate dropdown position when it opens
+    React.useEffect(() => {
+        if (isOpen) {
+            updateDropdownPosition();
+        }
+        else {
+            setDropdownPosition(null);
+        }
+    }, [isOpen, updateDropdownPosition]);
+    // Update position on scroll/resize
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        // Update position immediately
+        updateDropdownPosition();
+        // Listen to scroll events on all scrollable containers
+        const handleScroll = () => {
+            updateDropdownPosition();
+        };
+        const handleResize = () => {
+            updateDropdownPosition();
+        };
+        // Add listeners to window and all scrollable parents
+        window.addEventListener("scroll", handleScroll, true);
+        window.addEventListener("resize", handleResize);
+        // Also listen to scroll on the document
+        document.addEventListener("scroll", handleScroll, true);
+        return () => {
+            window.removeEventListener("scroll", handleScroll, true);
+            window.removeEventListener("resize", handleResize);
+            document.removeEventListener("scroll", handleScroll, true);
+        };
+    }, [isOpen, updateDropdownPosition]);
+    // Focus search input when dropdown opens
+    React.useEffect(() => {
+        if (isOpen && searchable && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isOpen, searchable]);
+    // Filter options based on search term
+    const filteredOptions = searchable
+        ? options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()))
+        : options;
+    // Get selected option(s)
+    const getSelectedOptions = React.useCallback(() => {
+        if (mode === "multiple") {
+            const values = Array.isArray(value) ? value : [];
+            return options.filter((opt) => values.includes(opt.value));
+        }
+        else {
+            return options.find((opt) => opt.value === value);
+        }
+    }, [value, options, mode]);
+    const selectedOptions = getSelectedOptions();
+    const displayValue = mode === "multiple"
+        ? Array.isArray(selectedOptions) && selectedOptions.length > 0
+            ? `${selectedOptions.length} selected`
+            : placeholder
+        : selectedOptions && !Array.isArray(selectedOptions)
+            ? selectedOptions.label
+            : placeholder;
+    const handleToggle = (e) => {
+        if (disabled || isReadOnly)
+            return;
+        e.stopPropagation();
+        // Set flag to prevent outside click handler from firing
+        clickFromTriggerRef.current = true;
+        setIsOpen((prev) => {
+            const newIsOpen = !prev;
+            if (newIsOpen) {
+                setSearchTerm("");
+            }
+            // Reset flag after state update
+            setTimeout(() => {
+                clickFromTriggerRef.current = false;
+            }, 100);
+            return newIsOpen;
+        });
+    };
+    const handleSelect = (optionValue) => {
+        if (mode === "multiple") {
+            const currentValues = Array.isArray(value) ? value : [];
+            const newValues = currentValues.includes(optionValue)
+                ? currentValues.filter((v) => v !== optionValue)
+                : [...currentValues, optionValue];
+            if (!isControlled) {
+                setInternalValue(newValues);
+            }
+            onChange?.(newValues);
+        }
+        else {
+            if (!isControlled) {
+                setInternalValue(optionValue);
+            }
+            onChange?.(optionValue);
+            setIsOpen(false);
+        }
+    };
+    const handleClear = (e) => {
+        e.stopPropagation();
+        const newValue = mode === "multiple" ? [] : "";
+        if (!isControlled) {
+            setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+    };
+    const isSelected = (optionValue) => {
+        if (mode === "multiple") {
+            return Array.isArray(value) && value.includes(optionValue);
+        }
+        return value === optionValue;
+    };
+    const hasValue = mode === "multiple"
+        ? Array.isArray(value) && value.length > 0
+        : value !== "" && value !== undefined && value !== null;
+    const selectClasses = [
+        "ui-select",
+        `ui-select--${size}`,
+        `ui-select--${variant}`,
+        invalid && "ui-select--invalid",
+        disabled && "ui-select--disabled",
+        isReadOnly && "ui-select--readonly",
+        isOpen && "ui-select--open",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const wrapperStyle = {
+        ...style,
+        ...(width && {
+            width: typeof width === "number" ? `${width}px` : width,
+        }),
+    };
+    return (jsxRuntime.jsxs("div", { ref: selectRef, className: "ui-select-wrapper", style: wrapperStyle, children: [jsxRuntime.jsxs("div", { ref: triggerRef, id: selectId, className: selectClasses, onClick: handleToggle, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, "aria-describedby": invalid && formControl.id ? `${formControl.id}-error` : undefined, role: "combobox", tabIndex: disabled || isReadOnly ? -1 : 0, children: [jsxRuntime.jsx("div", { className: "ui-select__value", children: mode === "multiple" && hasValue && Array.isArray(selectedOptions) && selectedOptions.length > 0 ? (jsxRuntime.jsxs("div", { className: "ui-select__tags", children: [selectedOptions.slice(0, 2).map((option) => (jsxRuntime.jsxs("span", { className: "ui-select__tag", children: [option.label, jsxRuntime.jsx("button", { type: "button", className: "ui-select__tag-close", onClick: (e) => {
+                                                e.stopPropagation();
+                                                handleSelect(option.value);
+                                            }, "aria-label": `Remove ${option.label}`, children: "\u00D7" })] }, option.value))), selectedOptions.length > 2 && (jsxRuntime.jsxs("span", { className: "ui-select__tag-more", children: ["+", selectedOptions.length - 2] }))] })) : (jsxRuntime.jsx("span", { className: `ui-select__text ${!hasValue ? "ui-select__text--placeholder" : ""}`, children: displayValue })) }), jsxRuntime.jsxs("div", { className: "ui-select__actions", children: [allowClear && hasValue && !disabled && !isReadOnly && (jsxRuntime.jsx("button", { type: "button", className: "ui-select__clear", onClick: handleClear, "aria-label": "Clear selection", children: "\u00D7" })), jsxRuntime.jsx("span", { className: "ui-select__arrow", "aria-hidden": "true", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), isOpen &&
+                dropdownPosition &&
+                typeof window !== "undefined" &&
+                reactDom.createPortal(jsxRuntime.jsxs("div", { ref: dropdownRef, className: "ui-select-dropdown", role: "listbox", style: {
+                        position: "fixed",
+                        top: `${dropdownPosition.top}px`,
+                        left: `${dropdownPosition.left}px`,
+                        width: `${dropdownPosition.width}px`,
+                    }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), children: [searchable && (jsxRuntime.jsx("div", { className: "ui-select-dropdown__search", children: jsxRuntime.jsx("input", { ref: inputRef, type: "text", className: "ui-select-dropdown__search-input", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation(), onKeyDown: (e) => {
+                                    if (e.key === "Escape") {
+                                        setIsOpen(false);
+                                    }
+                                } }) })), jsxRuntime.jsx("div", { className: "ui-select-dropdown__options", children: filteredOptions.length === 0 ? (jsxRuntime.jsx("div", { className: "ui-select-dropdown__empty", children: "No options found" })) : (filteredOptions.map((option) => {
+                                const selected = isSelected(option.value);
+                                return (jsxRuntime.jsxs("div", { className: `ui-select-dropdown__option ${selected ? "ui-select-dropdown__option--selected" : ""} ${option.disabled ? "ui-select-dropdown__option--disabled" : ""}`, onClick: (e) => {
+                                        e.stopPropagation();
+                                        if (!option.disabled) {
+                                            handleSelect(option.value);
+                                        }
+                                    }, role: "option", "aria-selected": selected, children: [mode === "multiple" && (jsxRuntime.jsx("span", { className: "ui-select-dropdown__checkbox", children: selected ? "✓" : "" })), jsxRuntime.jsx("span", { className: "ui-select-dropdown__option-label", children: option.label })] }, option.value));
+                            })) })] }), document.body)] }));
+};
+
 const normalizeValue = (value) => {
     if (value === undefined)
         return undefined;
@@ -519,7 +739,7 @@ const useOutsideClick = ({ handler, refs, enabled = true, }) => {
     }, [handler, refs, enabled]);
 };
 
-const Tooltip = ({ children, label, placement = "top", isOpen: controlledIsOpen, defaultIsOpen = false, closeOnClick = false, className = "", style, }) => {
+const Tooltip = ({ children, label, placement = "top", isOpen: controlledIsOpen, defaultIsOpen = false, closeOnClick = false, width, className = "", style, }) => {
     const [internalIsOpen, setInternalIsOpen] = React.useState(defaultIsOpen);
     const tooltipRef = React.useRef(null);
     const triggerRef = React.useRef(null);
@@ -555,7 +775,11 @@ const Tooltip = ({ children, label, placement = "top", isOpen: controlledIsOpen,
         onMouseLeave: handleMouseLeave,
         onClick: handleClick,
     });
-    return (jsxRuntime.jsxs("div", { className: `ui-tooltip-wrapper ${className}`, style: style, children: [clonedChild, isOpen && (jsxRuntime.jsx("div", { ref: tooltipRef, className: `ui-tooltip ui-tooltip--${placement}`, role: "tooltip", children: label }))] }));
+    return (jsxRuntime.jsxs("div", { className: `ui-tooltip-wrapper ${className}`, style: style, children: [clonedChild, isOpen && (jsxRuntime.jsx("div", { ref: tooltipRef, className: `ui-tooltip ui-tooltip--${placement} ${width ? "ui-tooltip--wrappable" : ""}`, role: "tooltip", style: width
+                    ? {
+                        width: typeof width === "number" ? `${width}px` : width,
+                    }
+                    : undefined, children: label }))] }));
 };
 
 const PopoverContent = ({ children, className = "", }) => {
@@ -870,7 +1094,7 @@ const useTheme = () => {
     }
     return context;
 };
-const ThemeProvider = ({ children, defaultTheme = "system", storageKey = "uilab-theme" }) => {
+const ThemeProvider = ({ children, defaultTheme = "system", storageKey = "uiplex-theme" }) => {
     const [theme, setTheme] = React.useState(defaultTheme);
     const [resolvedTheme, setResolvedTheme] = React.useState("light");
     // Get system preference
@@ -1082,6 +1306,7 @@ exports.PopoverFooter = PopoverFooter;
 exports.PopoverHeader = PopoverHeader;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
+exports.Select = Select;
 exports.Text = Text;
 exports.Textarea = Textarea;
 exports.ThemeProvider = ThemeProvider;

package/dist/index.css

@@ -1220,6 +1220,403 @@
 }
 
 
+.ui-select-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  z-index: 1;
+}
+
+.ui-select {
+  width: 100%;
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: var(--text-primary, #111827);
+  background-color: var(--bg-primary, #ffffff);
+  border: 1px solid var(--border-primary, #d1d5db);
+  border-radius: 0.375rem;
+  transition: all 0.2s ease-in-out;
+  outline: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 2.5rem;
+  padding: 0 0.75rem 0 1rem;
+  position: relative;
+}
+
+.ui-select:focus,
+.ui-select--open {
+  border-color: var(--accent-primary, #bb00ed);
+  box-shadow: 0 0 0 3px rgba(187, 0, 237, 0.1);
+}
+
+.ui-select:disabled,
+.ui-select--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--bg-secondary, #f3f4f6);
+}
+
+.ui-select--readonly {
+  cursor: default;
+  background-color: var(--bg-secondary, #f3f4f6);
+}
+
+.ui-select--invalid {
+  border-color: var(--danger, #dc2626);
+}
+
+.ui-select--invalid:focus,
+.ui-select--invalid.ui-select--open {
+  border-color: var(--danger, #dc2626);
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+}
+
+.ui-select__value {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.ui-select__text {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-select__text--placeholder {
+  color: var(--text-secondary, #9ca3af);
+}
+
+.ui-select__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+}
+
+.ui-select__tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.5rem;
+  background-color: var(--bg-secondary, #f3f4f6);
+  border: 1px solid var(--border-primary, #d1d5db);
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  max-width: 100%;
+}
+
+.ui-select__tag-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--text-secondary, #6b7280);
+  padding: 0;
+  line-height: 1;
+  font-size: 1rem;
+  transition: color 0.2s;
+}
+
+.ui-select__tag-close:hover {
+  color: var(--text-primary, #111827);
+}
+
+.ui-select__tag-more {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  background-color: var(--bg-secondary, #f3f4f6);
+  border: 1px solid var(--border-primary, #d1d5db);
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--text-secondary, #6b7280);
+}
+
+.ui-select__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  margin-left: 0.5rem;
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.ui-select__clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--text-secondary, #6b7280);
+  padding: 0;
+  font-size: 1.25rem;
+  line-height: 1;
+  transition: color 0.2s;
+  border-radius: 50%;
+}
+
+.ui-select__clear:hover {
+  color: var(--text-primary, #111827);
+  background-color: var(--bg-secondary, #f3f4f6);
+}
+
+.ui-select__arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary, #6b7280);
+  transition: transform 0.2s;
+  flex-shrink: 0;
+}
+
+.ui-select--open .ui-select__arrow {
+  transform: translateY(-50%) rotate(180deg);
+}
+
+/* Sizes */
+.ui-select--sm {
+  min-height: 2rem;
+  padding: 0 0.75rem 0 0.75rem;
+  font-size: 0.875rem;
+}
+
+.ui-select--sm .ui-select__actions {
+  right: 0.5rem;
+}
+
+.ui-select--md {
+  min-height: 2.5rem;
+  padding: 0 0.75rem 0 1rem;
+  font-size: 1rem;
+}
+
+.ui-select--lg {
+  min-height: 3rem;
+  padding: 0 0.75rem 0 1.25rem;
+  font-size: 1.125rem;
+}
+
+.ui-select--lg .ui-select__actions {
+  right: 1rem;
+}
+
+/* Variants */
+.ui-select--outline {
+  background-color: var(--bg-primary, #ffffff);
+  border: 1px solid var(--border-primary, #d1d5db);
+}
+
+.ui-select--filled {
+  background-color: var(--bg-secondary, #f3f4f6);
+  border: 1px solid transparent;
+}
+
+.ui-select--filled:focus,
+.ui-select--filled.ui-select--open {
+  background-color: var(--bg-primary, #ffffff);
+  border-color: var(--accent-primary, #bb00ed);
+}
+
+.ui-select--unstyled {
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 1.5rem;
+}
+
+.ui-select--unstyled:focus,
+.ui-select--unstyled.ui-select--open {
+  box-shadow: none;
+  border-bottom: 2px solid var(--accent-primary, #bb00ed);
+}
+
+/* Dropdown */
+.ui-select-dropdown {
+  position: fixed;
+  z-index: 9999;
+  background-color: var(--bg-primary, #ffffff);
+  border: 1px solid var(--border-primary, #d1d5db);
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  max-height: 300px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  animation: select-dropdown-fade-in 0.15s ease-out;
+  visibility: visible;
+  opacity: 1;
+}
+
+@keyframes select-dropdown-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.ui-select-dropdown__search {
+  padding: 0.5rem;
+  border-bottom: 1px solid var(--border-primary, #e5e7eb);
+}
+
+.ui-select-dropdown__search-input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  border: 1px solid var(--border-primary, #d1d5db);
+  border-radius: 0.25rem;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.ui-select-dropdown__search-input:focus {
+  border-color: var(--accent-primary, #bb00ed);
+}
+
+.ui-select-dropdown__options {
+  overflow-y: auto;
+  max-height: 250px;
+  padding: 0.25rem;
+}
+
+.ui-select-dropdown__option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  transition: background-color 0.15s;
+  font-size: 0.875rem;
+  color: var(--text-primary, #111827);
+}
+
+.ui-select-dropdown__option:hover:not(.ui-select-dropdown__option--disabled) {
+  background-color: var(--bg-secondary, #f9fafb);
+}
+
+.ui-select-dropdown__option--selected {
+  background-color: rgba(187, 0, 237, 0.1);
+  color: var(--accent-primary, #bb00ed);
+  font-weight: 500;
+}
+
+.ui-select-dropdown__option--selected:hover {
+  background-color: rgba(187, 0, 237, 0.15);
+}
+
+.ui-select-dropdown__option--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ui-select-dropdown__checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--border-primary, #d1d5db);
+  border-radius: 0.25rem;
+  background-color: var(--bg-primary, #ffffff);
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  color: var(--accent-primary, #bb00ed);
+}
+
+.ui-select-dropdown__option--selected .ui-select-dropdown__checkbox {
+  background-color: var(--accent-primary, #bb00ed);
+  border-color: var(--accent-primary, #bb00ed);
+  color: white;
+}
+
+.ui-select-dropdown__option-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-select-dropdown__empty {
+  padding: 1rem;
+  text-align: center;
+  color: var(--text-secondary, #6b7280);
+  font-size: 0.875rem;
+}
+
+/* Dark mode support */
+.dark .ui-select {
+  background-color: var(--bg-primary, #1f2937);
+  border-color: var(--border-primary, #374151);
+  color: var(--text-primary, #f9fafb);
+}
+
+.dark .ui-select:focus,
+.dark .ui-select--open {
+  border-color: var(--accent-primary, #bb00ed);
+}
+
+.dark .ui-select--filled {
+  background-color: var(--bg-secondary, #111827);
+}
+
+.dark .ui-select--filled:focus,
+.dark .ui-select--filled.ui-select--open {
+  background-color: var(--bg-primary, #1f2937);
+}
+
+.dark .ui-select-dropdown {
+  background-color: var(--bg-primary, #1f2937);
+  border-color: var(--border-primary, #374151);
+}
+
+.dark .ui-select-dropdown__option:hover:not(.ui-select-dropdown__option--disabled) {
+  background-color: var(--bg-secondary, #111827);
+}
+
+.dark .ui-select-dropdown__option--selected {
+  background-color: rgba(187, 0, 237, 0.2);
+}
+
+.dark .ui-select__tag {
+  background-color: var(--bg-secondary, #111827);
+  border-color: var(--border-primary, #374151);
+  color: var(--text-primary, #f9fafb);
+}
+
+.dark .ui-select-dropdown__checkbox {
+  background-color: var(--bg-primary, #1f2937);
+  border-color: var(--border-primary, #374151);
+}
+
+
 .ui-link {
   color: var(--accent-primary, #bb00ed);
   text-decoration: none;
@@ -1502,6 +1899,12 @@
   animation: tooltip-fade-in 0.15s ease-out;
 }
 
+.ui-tooltip--wrappable {
+  white-space: normal;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
 .ui-tooltip--top {
   bottom: 100%;
   left: 50%;
@@ -2290,7 +2693,7 @@
 }
 
 
-/* Uilab Theme Variables */
+/* Uiplex Theme Variables */
 
 :root {
   /* Light theme variables */