@blerp/design 1.3.17 → 1.4.2

package/dist/esm/neo-components/FormControls.js

@@ -0,0 +1,1041 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React, { useState, useRef, useEffect } from 'react';
+import { withSx } from './withSx.js';
+import { useTheme } from './ThemeProvider.js';
+import { createPortal } from 'react-dom';
+
+const _excluded = ["checked", "defaultChecked", "disabled", "onChange", "color", "size", "indeterminate", "icon", "checkedIcon", "name", "value", "inputProps", "style"],
+      _excluded2 = ["checked", "defaultChecked", "disabled", "onChange", "color", "size", "name", "value", "inputProps", "style"],
+      _excluded3 = ["checked", "defaultChecked", "disabled", "onChange", "color", "size", "name", "value", "inputProps", "style"],
+      _excluded4 = ["value", "defaultValue", "onChange", "children", "disabled", "multiple", "native", "variant", "label", "fullWidth", "size", "error", "displayEmpty", "renderValue", "MenuProps", "inputProps", "style", "IconComponent", "disableBorder", "color"],
+      _excluded5 = ["value", "defaultValue", "onChange", "onChangeCommitted", "min", "max", "step", "marks", "disabled", "orientation", "color", "size", "valueLabelDisplay", "valueLabelFormat", "getAriaValueText", "track", "style"],
+      _excluded6 = ["value", "defaultValue", "onChange", "max", "precision", "disabled", "readOnly", "size", "emptyIcon", "icon", "name", "style"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+/**
+ * Checkbox - Checkbox input (replaces MUI Checkbox)
+ */
+
+const BaseCheckbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    checked,
+    defaultChecked,
+    disabled = false,
+    onChange,
+    color = "whiteOverride",
+    size = "medium",
+    indeterminate = false,
+    icon,
+    checkedIcon,
+    name,
+    value,
+    inputProps,
+    style
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  const {
+    colors
+  } = useTheme();
+  const [internalChecked, setInternalChecked] = useState(defaultChecked || false);
+  const isChecked = checked !== undefined ? checked : internalChecked;
+  const colorValue = colors[color] || colors.whiteOverride;
+  const mainColor = typeof colorValue === "object" ? colorValue.main : colorValue;
+  const sizeMap = {
+    small: "18px",
+    medium: "24px",
+    large: "28px"
+  };
+  const checkSize = sizeMap[size] || sizeMap.medium;
+
+  const handleChange = e => {
+    if (checked === undefined) {
+      setInternalChecked(e.target.checked);
+    }
+
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+  };
+
+  const containerStyle = _objectSpread({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    padding: "9px",
+    cursor: disabled ? "default" : "pointer",
+    borderRadius: "4px"
+  }, style);
+
+  const inputStyle = {
+    position: "absolute",
+    opacity: 0,
+    width: "100%",
+    height: "100%",
+    margin: 0,
+    padding: 0,
+    cursor: "inherit"
+  };
+
+  const checkboxStyle = _objectSpread({
+    width: checkSize,
+    height: checkSize,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "4px",
+    border: "2px solid ".concat(isChecked ? mainColor : "var(--border-color, rgba(255, 255, 255, 0.54))"),
+    backgroundColor: isChecked ? mainColor : "transparent",
+    transition: "background-color 150ms, border-color 150ms"
+  }, disabled && {
+    opacity: 0.5
+  });
+
+  const checkmarkStyle = {
+    width: "70%",
+    height: "70%",
+    display: isChecked ? "block" : "none",
+    color: "black"
+  };
+  return /*#__PURE__*/React.createElement("span", _extends({
+    ref: ref,
+    style: containerStyle
+  }, props), /*#__PURE__*/React.createElement("input", _extends({
+    type: "checkbox",
+    checked: isChecked,
+    disabled: disabled,
+    onChange: handleChange,
+    name: name,
+    value: value,
+    style: inputStyle
+  }, inputProps)), /*#__PURE__*/React.createElement("span", {
+    style: checkboxStyle
+  }, isChecked && /*#__PURE__*/React.createElement("svg", {
+    style: checkmarkStyle,
+    viewBox: "0 0 24 24",
+    fill: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+  })), indeterminate && !isChecked && /*#__PURE__*/React.createElement("svg", {
+    style: checkmarkStyle,
+    viewBox: "0 0 24 24",
+    fill: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19 13H5v-2h14v2z"
+  }))));
+});
+BaseCheckbox.displayName = "BaseCheckbox";
+const Checkbox = withSx(BaseCheckbox);
+/**
+ * Radio - Radio button (replaces MUI Radio)
+ */
+
+const BaseRadio = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    checked,
+    defaultChecked,
+    disabled = false,
+    onChange,
+    color = "whiteOverride",
+    size = "medium",
+    name,
+    value,
+    inputProps,
+    style
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  const {
+    colors
+  } = useTheme();
+  const colorValue = colors[color] || colors.whiteOverride;
+  const mainColor = typeof colorValue === "object" ? colorValue.main : colorValue;
+  const sizeMap = {
+    small: "18px",
+    medium: "24px",
+    large: "28px"
+  };
+  const radioSize = sizeMap[size] || sizeMap.medium;
+
+  const containerStyle = _objectSpread({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    padding: "9px",
+    cursor: disabled ? "default" : "pointer",
+    borderRadius: "50%"
+  }, style);
+
+  const inputStyle = {
+    position: "absolute",
+    opacity: 0,
+    width: "100%",
+    height: "100%",
+    margin: 0,
+    padding: 0,
+    cursor: "inherit"
+  };
+
+  const radioStyle = _objectSpread({
+    width: radioSize,
+    height: radioSize,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "50%",
+    border: "2px solid ".concat(checked ? mainColor : "var(--border-color, rgba(255, 255, 255, 0.54))"),
+    backgroundColor: "transparent",
+    transition: "border-color 150ms"
+  }, disabled && {
+    opacity: 0.5
+  });
+
+  const dotStyle = {
+    width: "50%",
+    height: "50%",
+    borderRadius: "50%",
+    backgroundColor: mainColor,
+    display: checked ? "block" : "none",
+    transition: "transform 150ms"
+  };
+  return /*#__PURE__*/React.createElement("span", _extends({
+    ref: ref,
+    style: containerStyle
+  }, props), /*#__PURE__*/React.createElement("input", _extends({
+    type: "radio",
+    checked: checked,
+    defaultChecked: defaultChecked,
+    disabled: disabled,
+    onChange: onChange,
+    name: name,
+    value: value,
+    style: inputStyle
+  }, inputProps)), /*#__PURE__*/React.createElement("span", {
+    style: radioStyle
+  }, /*#__PURE__*/React.createElement("span", {
+    style: dotStyle
+  })));
+});
+BaseRadio.displayName = "BaseRadio";
+const Radio = withSx(BaseRadio);
+/**
+ * Switch - Toggle switch (replaces MUI Switch)
+ */
+
+const BaseSwitch = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+    checked,
+    defaultChecked,
+    disabled = false,
+    onChange,
+    color = "primary",
+    size = "medium",
+    name,
+    value,
+    inputProps,
+    style
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3);
+
+  const {
+    colors
+  } = useTheme();
+  const [internalChecked, setInternalChecked] = useState(defaultChecked || false);
+  const isChecked = checked !== undefined ? checked : internalChecked;
+  const colorValue = colors[color] || colors.primary;
+  const mainColor = typeof colorValue === "object" ? colorValue.main : colorValue; // Size configurations
+
+  const isSmall = size === "small";
+  const trackWidth = isSmall ? 34 : 42;
+  const trackHeight = isSmall ? 14 : 20;
+  const thumbSize = isSmall ? 20 : 26; // Calculate thumb position
+
+  const thumbOffset = isChecked ? trackWidth - thumbSize + 4 : -4;
+
+  const toggle = () => {
+    if (disabled) return;
+    const newChecked = !isChecked; // Always update internal state for uncontrolled usage
+
+    if (checked === undefined) {
+      setInternalChecked(newChecked);
+    } // Call onChange with synthetic event
+
+
+    if (onChange) {
+      onChange({
+        target: {
+          checked: newChecked,
+          name,
+          value,
+          type: "checkbox"
+        }
+      });
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    role: "switch",
+    "aria-checked": isChecked,
+    "aria-disabled": disabled,
+    tabIndex: disabled ? -1 : 0,
+    style: _objectSpread({
+      display: "inline-flex",
+      alignItems: "center",
+      position: "relative",
+      padding: "9px",
+      cursor: disabled ? "default" : "pointer",
+      opacity: disabled ? 0.5 : 1,
+      userSelect: "none",
+      WebkitTapHighlightColor: "transparent"
+    }, style),
+    onMouseDown: e => {
+      // Prevent text selection on double click
+      e.preventDefault();
+    },
+    onClick: e => {
+      e.stopPropagation();
+      toggle();
+    },
+    onKeyDown: e => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggle();
+      }
+    }
+  }, props), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: trackWidth,
+      height: trackHeight,
+      borderRadius: trackHeight,
+      backgroundColor: isChecked ? "".concat(mainColor, "80") : "rgba(0, 0, 0, 0.38)",
+      transition: "background-color 150ms",
+      position: "relative",
+      pointerEvents: "none"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: thumbSize,
+      height: thumbSize,
+      borderRadius: "50%",
+      backgroundColor: isChecked ? mainColor : "#fafafa",
+      boxShadow: "0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)",
+      position: "absolute",
+      top: "50%",
+      left: thumbOffset,
+      transform: "translateY(-50%)",
+      transition: "left 150ms, background-color 150ms",
+      pointerEvents: "none"
+    }
+  })), /*#__PURE__*/React.createElement("input", _extends({
+    type: "checkbox",
+    checked: isChecked,
+    name: name,
+    value: value,
+    disabled: disabled,
+    readOnly: true,
+    tabIndex: -1,
+    style: {
+      position: "absolute",
+      width: 1,
+      height: 1,
+      margin: -1,
+      padding: 0,
+      overflow: "hidden",
+      clip: "rect(0, 0, 0, 0)",
+      border: 0
+    }
+  }, inputProps)));
+});
+BaseSwitch.displayName = "BaseSwitch";
+const Switch = withSx(BaseSwitch);
+/**
+ * Enhanced Select - Drop-in replacement that supports MUI-style MenuProps
+ */
+
+const BaseSelect = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+  var _MenuProps$sx, _propsSx$Svg, _PaperProps$style, _PaperProps$style2;
+
+  let {
+    value,
+    defaultValue,
+    onChange,
+    children,
+    disabled = false,
+    multiple = false,
+    native = false,
+    variant = "outlined",
+    label,
+    fullWidth = false,
+    size = "medium",
+    error = false,
+    displayEmpty = false,
+    renderValue,
+    MenuProps = {},
+    inputProps,
+    style,
+    IconComponent,
+    disableBorder = true,
+    // Default to no border on select box
+    color = "notBlack"
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded4);
+
+  const {
+    colors
+  } = useTheme();
+  const [open, setOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState(defaultValue || (multiple ? [] : ""));
+  const [menuPosition, setMenuPosition] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+    bottom: 0
+  });
+  const selectRef = useRef(null);
+  const menuRef = useRef(null);
+  const currentValue = value !== undefined ? value : internalValue; // Extract color from theme
+
+  const colorValue = colors[color] || colors.notBlack || colors.primary;
+  const mainColor = typeof colorValue === "object" ? colorValue.main : colorValue;
+
+  const handleChange = newValue => {
+    if (value === undefined) {
+      setInternalValue(newValue);
+    }
+
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      target: {
+        value: newValue,
+        name: props.name
+      }
+    });
+
+    if (!multiple) {
+      setOpen(false);
+    }
+  }; // Extract MenuProps configuration
+
+
+  const {
+    keepMounted = false,
+    disablePortal = false,
+    anchorOrigin = {
+      vertical: "top",
+      horizontal: "left"
+    },
+    transformOrigin = {
+      vertical: "bottom",
+      horizontal: "left"
+    },
+    sx: menuSx = {},
+    PaperProps = {}
+  } = MenuProps; // Extract paper/menu styling from MUI-style sx prop
+
+  const paperSx = (MenuProps === null || MenuProps === void 0 ? void 0 : (_MenuProps$sx = MenuProps.sx) === null || _MenuProps$sx === void 0 ? void 0 : _MenuProps$sx["& .MuiPaper-root"]) || {}; // Resolve sx color values (e.g., "extensionColor9.main" -> actual color)
+
+  const resolveColor = colorPath => {
+    if (!colorPath || typeof colorPath !== "string") return colorPath;
+    const parts = colorPath.split(".");
+    let result = colors[parts[0]];
+
+    for (let i = 1; i < parts.length && result; i++) {
+      result = result[parts[i]];
+    }
+
+    return result || colorPath;
+  }; // Update menu position when opened
+
+
+  useEffect(() => {
+    if (open && selectRef.current) {
+      const rect = selectRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight; // Calculate position based on anchorOrigin/transformOrigin
+
+      let top, bottom;
+
+      if (anchorOrigin.vertical === "top" && transformOrigin.vertical === "bottom") {
+        // Menu opens above the select
+        bottom = viewportHeight - rect.top + 4;
+        top = "auto";
+      } else {
+        // Menu opens below the select (default)
+        top = rect.bottom + window.scrollY + 4;
+        bottom = "auto";
+      }
+
+      setMenuPosition({
+        top,
+        bottom,
+        left: rect.left + window.scrollX,
+        width: rect.width
+      });
+    }
+  }, [open, anchorOrigin.vertical, transformOrigin.vertical]); // Handle click outside
+
+  useEffect(() => {
+    const handleClickOutside = e => {
+      if (selectRef.current && !selectRef.current.contains(e.target) && menuRef.current && !menuRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [open]);
+
+  const containerStyle = _objectSpread(_objectSpread({
+    position: "relative",
+    display: "inline-flex"
+  }, fullWidth && {
+    width: "100%"
+  }), style); // Build select box styles - NO BORDER by default
+
+
+  const propsSx = props.sx || {};
+  const selectHeight = propsSx.height || (size === "small" ? "40px" : "48px");
+  const selectFontSize = propsSx.fontSize || "16px";
+
+  const selectStyle = _objectSpread({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    height: selectHeight,
+    padding: "4px 12px",
+    border: "none",
+    // No border on select box
+    borderRadius: "4px",
+    backgroundColor: "transparent",
+    color: resolveColor(propsSx.color) || mainColor || "#fff",
+    cursor: disabled ? "default" : "pointer",
+    minWidth: "120px",
+    width: propsSx.width || "100%",
+    fontSize: selectFontSize,
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    transition: "border-color 200ms"
+  }, disabled && {
+    opacity: 0.5
+  }); // Arrow icon styles
+
+
+  const arrowStyle = {
+    marginLeft: "8px",
+    transform: "rotate(".concat(open ? "180deg" : "0deg", ")"),
+    transition: "transform 200ms",
+    pointerEvents: "none",
+    color: resolveColor((_propsSx$Svg = propsSx["& svg"]) === null || _propsSx$Svg === void 0 ? void 0 : _propsSx$Svg.color) || "inherit",
+    fontSize: "10px",
+    flexShrink: 0
+  }; // Build menu styles from MenuProps
+
+  const menuBackgroundColor = resolveColor(paperSx.backgroundColor) || (PaperProps === null || PaperProps === void 0 ? void 0 : (_PaperProps$style = PaperProps.style) === null || _PaperProps$style === void 0 ? void 0 : _PaperProps$style.backgroundColor) || "#2C2E32";
+  const menuTextColor = resolveColor(paperSx.color) || (PaperProps === null || PaperProps === void 0 ? void 0 : (_PaperProps$style2 = PaperProps.style) === null || _PaperProps$style2 === void 0 ? void 0 : _PaperProps$style2.color) || "#fff";
+  const menuZIndex = paperSx.zIndex || 9999;
+
+  const menuStyle = _objectSpread(_objectSpread(_objectSpread({
+    position: "fixed"
+  }, menuPosition.top !== "auto" && {
+    top: "".concat(menuPosition.top, "px")
+  }), menuPosition.bottom !== "auto" && {
+    bottom: "".concat(menuPosition.bottom, "px")
+  }), {}, {
+    left: "".concat(menuPosition.left, "px"),
+    width: "".concat(menuPosition.width, "px"),
+    backgroundColor: menuBackgroundColor,
+    border: "none",
+    borderRadius: "12px",
+    boxShadow: "0px 5px 15px rgba(0,0,0,0.3), 0px 10px 30px rgba(0,0,0,0.25)",
+    zIndex: menuZIndex,
+    maxHeight: "350px",
+    overflowY: "auto",
+    padding: "8px 0",
+    opacity: open ? 1 : 0,
+    visibility: open ? "visible" : "hidden",
+    transform: open ? "scaleY(1)" : "scaleY(0.95)",
+    transformOrigin: transformOrigin.vertical === "bottom" ? "bottom" : "top",
+    transition: "opacity 150ms, transform 150ms, visibility 150ms"
+  }, PaperProps === null || PaperProps === void 0 ? void 0 : PaperProps.style);
+
+  const menuItemStyle = isSelected => ({
+    padding: "4px 12px",
+    cursor: "pointer",
+    backgroundColor: isSelected ? "rgba(255, 255, 255, 0.08)" : "transparent",
+    color: menuTextColor,
+    transition: "background-color 150ms",
+    userSelect: "none",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    gap: "2px"
+  }); // Get display text - ONLY show the name, not the balance
+
+
+  const getDisplayText = () => {
+    if (renderValue) {
+      return renderValue(currentValue);
+    }
+
+    if (multiple && Array.isArray(currentValue)) {
+      return currentValue.join(", ") || (displayEmpty ? "" : "\u00A0");
+    } // Find the selected child and extract just the name (first text content)
+
+
+    let displayText = currentValue;
+    React.Children.forEach(children, child => {
+      var _child$props;
+
+      if ((child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.value) === currentValue) {
+        // Try to get just the name from the child
+        const childContent = child.props.children; // If children is an array, get the first meaningful text
+
+        if (Array.isArray(childContent)) {
+          const firstChild = childContent[0];
+
+          if ( /*#__PURE__*/React.isValidElement(firstChild)) {
+            // Extract text from nested elements
+            displayText = extractTextFromElement(firstChild) || child.props.value;
+          } else if (typeof firstChild === 'string') {
+            displayText = firstChild;
+          }
+        } else if ( /*#__PURE__*/React.isValidElement(childContent)) {
+          displayText = extractTextFromElement(childContent) || child.props.value;
+        } else if (typeof childContent === 'string') {
+          displayText = childContent;
+        }
+      }
+    });
+    return displayText || (displayEmpty ? "" : "\u00A0");
+  }; // Helper to extract text from React elements
+
+
+  const extractTextFromElement = element => {
+    if (! /*#__PURE__*/React.isValidElement(element)) return null;
+    const children = element.props.children;
+
+    if (typeof children === 'string') {
+      return children;
+    }
+
+    if (Array.isArray(children)) {
+      for (const child of children) {
+        if (typeof child === 'string') return child;
+
+        if ( /*#__PURE__*/React.isValidElement(child)) {
+          const text = extractTextFromElement(child);
+          if (text) return text;
+        }
+      }
+    }
+
+    return null;
+  };
+
+  if (native) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      ref: ref,
+      style: containerStyle
+    }, props), /*#__PURE__*/React.createElement("select", _extends({
+      value: currentValue,
+      onChange: e => handleChange(e.target.value),
+      disabled: disabled,
+      multiple: multiple,
+      style: _objectSpread(_objectSpread({}, selectStyle), {}, {
+        appearance: "none"
+      })
+    }, inputProps), children), /*#__PURE__*/React.createElement("span", {
+      style: arrowStyle
+    }, "\u25BC"));
+  }
+
+  const menuContent = /*#__PURE__*/React.createElement("div", _extends({
+    ref: menuRef,
+    style: menuStyle,
+    role: "listbox"
+  }, MenuProps), React.Children.map(children, child => {
+    if (! /*#__PURE__*/React.isValidElement(child)) return child;
+    const isSelected = multiple ? currentValue.includes(child.props.value) : currentValue === child.props.value;
+    return /*#__PURE__*/React.createElement("div", {
+      key: child.props.value,
+      onClick: e => {
+        var _child$props$onClick, _child$props2;
+
+        e.stopPropagation(); // Call the child's onClick if it exists
+
+        (_child$props$onClick = (_child$props2 = child.props).onClick) === null || _child$props$onClick === void 0 ? void 0 : _child$props$onClick.call(_child$props2);
+
+        if (multiple) {
+          const newValue = isSelected ? currentValue.filter(v => v !== child.props.value) : [...currentValue, child.props.value];
+          handleChange(newValue);
+        } else {
+          handleChange(child.props.value);
+        }
+      },
+      onMouseEnter: e => {
+        e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.12)";
+      },
+      onMouseLeave: e => {
+        e.currentTarget.style.backgroundColor = isSelected ? "rgba(255, 255, 255, 0.08)" : "transparent";
+      },
+      style: menuItemStyle(isSelected),
+      role: "option",
+      "aria-selected": isSelected
+    }, child.props.children);
+  }));
+  const menu = (open || keepMounted) && (disablePortal ? menuContent : /*#__PURE__*/createPortal(menuContent, document.body));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    style: containerStyle
+  }, props), /*#__PURE__*/React.createElement("div", {
+    ref: selectRef,
+    style: selectStyle,
+    onClick: () => !disabled && setOpen(!open),
+    role: "button",
+    "aria-haspopup": "listbox",
+    "aria-expanded": open,
+    tabIndex: disabled ? -1 : 0,
+    onKeyDown: e => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        !disabled && setOpen(!open);
+      }
+
+      if (e.key === "Escape") {
+        setOpen(false);
+      }
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 1,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      minWidth: 0,
+      fontSize: "inherit"
+    }
+  }, getDisplayText()), IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
+    style: {
+      marginLeft: "8px",
+      color: arrowStyle.color
+    }
+  }) : /*#__PURE__*/React.createElement("span", {
+    style: arrowStyle
+  }, "\u25B2"))), menu);
+});
+BaseSelect.displayName = "BaseSelect";
+const Select = withSx(BaseSelect);
+/**
+ * Slider - Range slider (replaces MUI Slider)
+ */
+
+const BaseSlider = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+  let {
+    value,
+    defaultValue = 0,
+    onChange,
+    onChangeCommitted,
+    min = 0,
+    max = 100,
+    step = 1,
+    marks = false,
+    disabled = false,
+    orientation = "horizontal",
+    color = "primary",
+    size = "medium",
+    valueLabelDisplay = "off",
+    valueLabelFormat,
+    getAriaValueText,
+    track = "normal",
+    style
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded5);
+
+  const {
+    colors
+  } = useTheme();
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [isDragging, setIsDragging] = useState(false);
+  const sliderRef = useRef(null);
+  const currentValue = value !== undefined ? value : internalValue;
+  const colorValue = colors[color] || colors.primary;
+  const mainColor = typeof colorValue === "object" ? colorValue.main : colorValue;
+  const trackThickness = 4;
+  const thumbSize = 20;
+  const percentage = (currentValue - min) / (max - min) * 100;
+
+  const handleChange = newValue => {
+    const clampedValue = Math.min(max, Math.max(min, newValue));
+    const steppedValue = Math.round(clampedValue / step) * step;
+
+    if (value === undefined) {
+      setInternalValue(steppedValue);
+    }
+
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      target: {
+        value: steppedValue
+      }
+    }, steppedValue);
+  };
+
+  const updateValue = e => {
+    if (!sliderRef.current) return;
+    const rect = sliderRef.current.getBoundingClientRect();
+    const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    const newValue = min + percent * (max - min);
+    handleChange(newValue);
+  };
+
+  const handleMouseDown = e => {
+    if (disabled) return;
+    e.preventDefault();
+    setIsDragging(true);
+    updateValue(e);
+  };
+
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const handleMouseMove = e => {
+      updateValue(e);
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted({
+        target: {
+          value: currentValue
+        }
+      }, currentValue);
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, currentValue, min, max, step]);
+
+  const containerStyle = _objectSpread(_objectSpread({
+    position: "relative",
+    display: "inline-block",
+    width: "100%",
+    height: "40px",
+    cursor: disabled ? "default" : "pointer",
+    touchAction: "none"
+  }, disabled && {
+    opacity: 0.38
+  }), style);
+
+  const railStyle = {
+    position: "absolute",
+    width: "100%",
+    height: "".concat(trackThickness, "px"),
+    top: "50%",
+    transform: "translateY(-50%)",
+    borderRadius: "".concat(trackThickness / 2, "px"),
+    backgroundColor: "rgba(255, 255, 255, 0.3)"
+  };
+  const trackStyle = {
+    position: "absolute",
+    width: "".concat(percentage, "%"),
+    height: "".concat(trackThickness, "px"),
+    top: "50%",
+    transform: "translateY(-50%)",
+    borderRadius: "".concat(trackThickness / 2, "px"),
+    backgroundColor: mainColor,
+    transition: isDragging ? "none" : "width 150ms"
+  };
+
+  const thumbStyle = _objectSpread({
+    position: "absolute",
+    width: "".concat(thumbSize, "px"),
+    height: "".concat(thumbSize, "px"),
+    borderRadius: "50%",
+    backgroundColor: mainColor,
+    boxShadow: "0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)",
+    left: "calc(".concat(percentage, "% - ").concat(thumbSize / 2, "px)"),
+    top: "50%",
+    transform: "translateY(-50%)",
+    transition: isDragging ? "none" : "left 150ms",
+    cursor: "grab"
+  }, isDragging && {
+    cursor: "grabbing"
+  }); // Render marks if provided
+
+
+  const renderMarks = () => {
+    if (!marks) return null;
+    const markArray = Array.isArray(marks) ? marks : Array.from({
+      length: Math.floor((max - min) / step) + 1
+    }, (_, i) => ({
+      value: min + i * step
+    }));
+    return markArray.map(mark => {
+      const markPercent = (mark.value - min) / (max - min) * 100;
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: mark.value
+      }, /*#__PURE__*/React.createElement("span", {
+        style: {
+          position: "absolute",
+          width: "2px",
+          height: "2px",
+          borderRadius: "50%",
+          backgroundColor: "rgba(255, 255, 255, 0.7)",
+          left: "".concat(markPercent, "%"),
+          top: "50%",
+          transform: "translate(-50%, -50%)"
+        }
+      }), mark.label && /*#__PURE__*/React.createElement("span", {
+        style: {
+          position: "absolute",
+          left: "".concat(markPercent, "%"),
+          top: "calc(50% + 16px)",
+          transform: "translateX(-50%)",
+          fontSize: "12px",
+          color: "rgba(255, 255, 255, 0.7)",
+          whiteSpace: "nowrap"
+        }
+      }, mark.label));
+    });
+  };
+
+  const displayValue = valueLabelFormat ? valueLabelFormat(currentValue) : getAriaValueText ? getAriaValueText(currentValue) : currentValue;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: node => {
+      sliderRef.current = node;
+
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    style: containerStyle,
+    onMouseDown: handleMouseDown,
+    role: "slider",
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    "aria-valuenow": currentValue,
+    "aria-valuetext": getAriaValueText === null || getAriaValueText === void 0 ? void 0 : getAriaValueText(currentValue),
+    tabIndex: disabled ? -1 : 0
+  }, props), /*#__PURE__*/React.createElement("span", {
+    style: railStyle
+  }), track !== false && /*#__PURE__*/React.createElement("span", {
+    style: trackStyle
+  }), /*#__PURE__*/React.createElement("span", {
+    style: thumbStyle
+  }, valueLabelDisplay === "on" && /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "absolute",
+      bottom: "calc(100% + 8px)",
+      left: "50%",
+      transform: "translateX(-50%)",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      backgroundColor: "rgba(0, 0, 0, 0.87)",
+      color: "#fff",
+      fontSize: "12px",
+      whiteSpace: "nowrap"
+    }
+  }, displayValue)), renderMarks());
+});
+BaseSlider.displayName = "BaseSlider";
+const Slider = withSx(BaseSlider);
+/**
+ * Rating - Star rating (replaces MUI Rating)
+ */
+
+const BaseRating = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  let {
+    value,
+    defaultValue = 0,
+    onChange,
+    max = 5,
+    precision = 1,
+    disabled = false,
+    readOnly = false,
+    size = "medium",
+    emptyIcon,
+    icon,
+    name,
+    style
+  } = _ref6,
+      props = _objectWithoutProperties(_ref6, _excluded6);
+
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [hoverValue, setHoverValue] = useState(-1);
+  const currentValue = value !== undefined ? value : internalValue;
+  const displayValue = hoverValue !== -1 ? hoverValue : currentValue;
+  const sizeMap = {
+    small: "18px",
+    medium: "24px",
+    large: "32px"
+  };
+  const starSize = sizeMap[size] || sizeMap.medium;
+
+  const handleClick = newValue => {
+    if (disabled || readOnly) return;
+
+    if (value === undefined) {
+      setInternalValue(newValue);
+    }
+
+    onChange === null || onChange === void 0 ? void 0 : onChange({}, newValue);
+  };
+
+  const containerStyle = _objectSpread(_objectSpread({
+    display: "inline-flex",
+    cursor: disabled || readOnly ? "default" : "pointer"
+  }, disabled && {
+    opacity: 0.5
+  }), style);
+
+  const starStyle = filled => ({
+    width: starSize,
+    height: starSize,
+    color: filled ? "#faaf00" : "rgba(0, 0, 0, 0.26)",
+    transition: "color 150ms"
+  });
+
+  const Star = _ref7 => {
+    let {
+      filled
+    } = _ref7;
+    return /*#__PURE__*/React.createElement("svg", {
+      style: starStyle(filled),
+      viewBox: "0 0 24 24",
+      fill: "currentColor"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    style: containerStyle,
+    onMouseLeave: () => setHoverValue(-1)
+  }, props), Array.from({
+    length: max
+  }, (_, i) => i + 1).map(star => /*#__PURE__*/React.createElement("span", {
+    key: star,
+    onClick: () => handleClick(star),
+    onMouseEnter: () => !disabled && !readOnly && setHoverValue(star)
+  }, icon ? /*#__PURE__*/React.cloneElement(icon, {
+    filled: star <= displayValue
+  }) : /*#__PURE__*/React.createElement(Star, {
+    filled: star <= displayValue
+  }))));
+});
+BaseRating.displayName = "BaseRating";
+const Rating = withSx(BaseRating);
+
+export { Checkbox, Radio, Rating, Select, Slider, Switch };