@blerp/design 1.3.16 → 1.4.1

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

@@ -0,0 +1,478 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React, { useId, useState } from 'react';
+import { withSx } from './withSx.js';
+import { useTheme } from './ThemeProvider.js';
+
+const _excluded = ["variant", "label", "placeholder", "helperText", "error", "disabled", "required", "fullWidth", "multiline", "rows", "maxRows", "minRows", "type", "value", "defaultValue", "onChange", "onFocus", "onBlur", "onClick", "onKeyDown", "InputProps", "inputProps", "InputLabelProps", "FormHelperTextProps", "size", "color", "darkMode", "autoFocus", "autoComplete", "name", "id", "inputRef", "startAdornment", "endAdornment", "style", "sx"],
+      _excluded2 = ["position", "children", "disablePointerEvents", "style"],
+      _excluded3 = ["children", "error", "disabled", "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; }
+
+const resolveStyleValue = (value, colors) => {
+  if (typeof value === "string" && value.includes(".main")) {
+    const colorKey = value.replace(".main", "");
+    const color = colors === null || colors === void 0 ? void 0 : colors[colorKey];
+    if (color) return typeof color === "object" ? color.main : color;
+  }
+
+  return value;
+};
+
+const resolveStyles = (styleObj, colors) => {
+  if (!styleObj) return {};
+  const resolved = {};
+
+  for (const [key, value] of Object.entries(styleObj)) {
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      // Skip pseudo-selectors and nested objects for inline styles
+      if (key.startsWith("&") || key.startsWith(":")) continue;
+      resolved[key] = resolveStyles(value, colors);
+    } else {
+      resolved[key] = resolveStyleValue(value, colors);
+    }
+  }
+
+  return resolved;
+};
+/**
+ * Input/TextField - Form input component (replaces MUI TextField)
+ * Supports variants: outlined, filled, standard
+ *
+ * DEFAULTS TO DARK MODE (white text/borders) since most Blerp UI is on dark backgrounds.
+ * Pass darkMode={false} to use light mode styling.
+ */
+
+
+const BaseInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    variant = "outlined",
+    label,
+    placeholder,
+    helperText,
+    error = false,
+    disabled = false,
+    required = false,
+    fullWidth = false,
+    multiline = false,
+    rows,
+    maxRows,
+    minRows,
+    type = "text",
+    value,
+    defaultValue,
+    onChange,
+    onFocus,
+    onBlur,
+    onClick,
+    onKeyDown,
+    InputProps = {},
+    inputProps = {},
+    InputLabelProps = {},
+    FormHelperTextProps = {},
+    size = "medium",
+    color = "primary",
+    darkMode: forceDarkMode,
+    autoFocus,
+    autoComplete,
+    name,
+    id: providedId,
+    inputRef,
+    startAdornment,
+    endAdornment,
+    style,
+    sx
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  const {
+    colors,
+    mode
+  } = useTheme();
+  const generatedId = useId();
+  const id = providedId || generatedId;
+  const [focused, setFocused] = useState(false);
+  const [internalValue, setInternalValue] = useState(defaultValue || ""); // Track actual value for label shrink detection
+
+  const currentValue = value !== undefined ? value : internalValue; // Helper to resolve theme colors
+
+  const getColor = (colorKey, fallback) => {
+    const c = colors === null || colors === void 0 ? void 0 : colors[colorKey];
+    if (!c) return fallback;
+    return typeof c === "object" ? c.main : c;
+  };
+
+  const colorValue = (colors === null || colors === void 0 ? void 0 : colors[color]) || (colors === null || colors === void 0 ? void 0 : colors.primary);
+  const mainColor = typeof colorValue === "object" ? colorValue.main : colorValue || "#21A5A2";
+  const errorColor = getColor("error", "#d32f2f"); // FORCE dark mode styling by default - most Blerp UI is on dark backgrounds
+  // Can be overridden with darkMode={false} prop if needed on light backgrounds
+
+  const isDark = forceDarkMode !== undefined ? forceDarkMode : true; // Colors - defaulting to white/light for dark backgrounds
+
+  const textColor = isDark ? "#FFFFFF" : "#21000C";
+  const labelColor = isDark ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 0.6)";
+  const focusedLabelColor = isDark ? "#FFFFFF" : mainColor;
+  const borderColor = isDark ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.23)";
+  const focusedBorderColor = isDark ? "#FFFFFF" : mainColor;
+  const bgColor = isDark ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.04)";
+  const hoverBgColor = isDark ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.06)";
+  const placeholderColor = isDark ? "rgba(255, 255, 255, 0.35)" : "rgba(0, 0, 0, 0.35)";
+  const labelBgColor = isDark ? "#212121" : "#FFFFFF";
+  const hasValue = currentValue !== undefined && currentValue !== null && currentValue !== "";
+  const hasPlaceholder = Boolean(placeholder); // Label should shrink if: focused, has value, OR has a placeholder (so they don't overlap)
+
+  const isLabelShrunk = focused || hasValue || hasPlaceholder; // Resolve InputProps.sx styles to actual style values
+
+  const inputPropsSx = resolveStyles(InputProps.sx || {}, colors); // Container styles
+
+  const containerStyle = _objectSpread(_objectSpread({
+    display: "inline-flex",
+    flexDirection: "column",
+    position: "relative",
+    minWidth: 0,
+    padding: 0,
+    margin: 0,
+    border: 0,
+    verticalAlign: "top"
+  }, fullWidth && {
+    width: "100%"
+  }), style); // Determine current border color based on state
+
+
+  const getCurrentBorderColor = () => {
+    if (error) return errorColor;
+    if (focused) return focusedBorderColor;
+    return borderColor;
+  }; // Input wrapper styles (the bordered box)
+
+
+  const getWrapperStyles = () => {
+    const activeBorderColor = getCurrentBorderColor(); // Check if InputProps.sx overrides border-related styles
+
+    const hasBorderOverride = inputPropsSx.border !== undefined || inputPropsSx.borderColor !== undefined;
+    const hasRadiusOverride = inputPropsSx.borderRadius !== undefined;
+    const hasBgOverride = inputPropsSx.backgroundColor !== undefined || inputPropsSx.background !== undefined;
+    const hasHeightOverride = inputPropsSx.height !== undefined;
+    const hasPaddingOverride = inputPropsSx.padding !== undefined;
+    const base = {
+      display: "flex",
+      alignItems: "center",
+      position: "relative",
+      borderRadius: hasRadiusOverride ? inputPropsSx.borderRadius : "6px",
+      transition: "border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease",
+      cursor: disabled ? "default" : "text",
+      backgroundColor: hasBgOverride ? inputPropsSx.backgroundColor || inputPropsSx.background : "transparent",
+      minHeight: hasHeightOverride ? undefined : size === "small" ? "32px" : "40px",
+      height: hasHeightOverride ? inputPropsSx.height : undefined,
+      boxSizing: inputPropsSx.boxSizing || "border-box"
+    }; // If there's a complete style override from InputProps.sx, use minimal base styling
+
+    if (hasBorderOverride || inputPropsSx.border === "none") {
+      return _objectSpread(_objectSpread({}, base), {}, {
+        border: inputPropsSx.border !== undefined ? inputPropsSx.border : "none",
+        borderColor: inputPropsSx.borderColor,
+        padding: hasPaddingOverride ? inputPropsSx.padding : undefined
+      }, inputPropsSx);
+    }
+
+    switch (variant) {
+      case "filled":
+        return _objectSpread(_objectSpread({}, base), {}, {
+          backgroundColor: hasBgOverride ? inputPropsSx.backgroundColor || inputPropsSx.background : focused ? hoverBgColor : bgColor,
+          borderBottom: "2px solid ".concat(activeBorderColor),
+          borderRadius: hasRadiusOverride ? inputPropsSx.borderRadius : "8px 8px 0 0",
+          paddingTop: label ? "20px" : "0"
+        }, inputPropsSx);
+
+      case "standard":
+        return _objectSpread(_objectSpread({}, base), {}, {
+          borderBottom: "".concat(focused ? "2px" : "1px", " solid ").concat(activeBorderColor),
+          borderRadius: 0,
+          paddingTop: label ? "16px" : "0",
+          paddingBottom: focused ? "0px" : "1px"
+        }, inputPropsSx);
+
+      case "outlined":
+      default:
+        return _objectSpread(_objectSpread({}, base), {}, {
+          border: "".concat(focused ? "2px" : "1px", " solid ").concat(activeBorderColor),
+          padding: focused ? "0px" : "1px",
+          boxShadow: focused ? "0 0 0 3px ".concat(isDark ? "rgba(255,255,255,0.1)" : "".concat(mainColor, "20")) : "none"
+        }, inputPropsSx);
+    }
+  }; // Input element styles
+
+
+  const getInputStyles = () => {
+    // Check for font/text overrides
+    const fontSize = inputPropsSx.fontSize || (size === "small" ? "14px" : "16px");
+    const caretColor = inputPropsSx.caretColor;
+    return _objectSpread(_objectSpread({
+      fontFamily: "inherit",
+      fontSize: fontSize,
+      fontWeight: 400,
+      letterSpacing: "0.01em",
+      lineHeight: 1.5,
+      color: textColor,
+      // Always use theme text color (white for dark mode)
+      border: 0,
+      boxSizing: "border-box",
+      background: "none",
+      margin: 0,
+      display: "block",
+      minWidth: 0,
+      width: "100%",
+      outline: "none",
+      padding: "4px 8px",
+      resize: multiline ? "vertical" : "none",
+      WebkitTextFillColor: textColor
+    }, caretColor && {
+      caretColor
+    }), disabled && {
+      opacity: 0.5,
+      cursor: "not-allowed"
+    });
+  }; // Label styles
+
+
+  const getLabelStyles = () => {
+    const leftPos = variant === "outlined" ? "11px" : variant === "filled" ? "11px" : "0";
+
+    const getTransform = () => {
+      if (isLabelShrunk) {
+        switch (variant) {
+          case "outlined":
+            return "translate(0, -50%) scale(0.75)";
+
+          case "filled":
+            return "translate(0, -100%) scale(0.75)";
+
+          case "standard":
+            return "translate(0, -100%) scale(0.75)";
+
+          default:
+            return "translate(0, -50%) scale(0.75)";
+        }
+      }
+
+      return "translate(0, -50%) scale(1)";
+    };
+
+    const getTop = () => {
+      if (variant === "outlined") {
+        return isLabelShrunk ? "0" : "50%";
+      }
+
+      if (variant === "filled") {
+        return isLabelShrunk ? "8px" : "50%";
+      }
+
+      return isLabelShrunk ? "0" : "50%";
+    };
+
+    return _objectSpread({
+      position: "absolute",
+      left: leftPos,
+      top: getTop(),
+      transform: getTransform(),
+      transformOrigin: "top left",
+      transition: "transform 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1), top 200ms cubic-bezier(0.4, 0, 0.2, 1)",
+      color: error ? errorColor : focused ? focusedLabelColor : labelColor,
+      pointerEvents: "none",
+      backgroundColor: variant === "outlined" && isLabelShrunk ? labelBgColor : "transparent",
+      padding: variant === "outlined" && isLabelShrunk ? "0 6px" : "4px",
+      marginLeft: variant === "outlined" && isLabelShrunk ? "-4px" : 0,
+      fontSize: "11px",
+      fontWeight: 400,
+      lineHeight: 1.4,
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      maxWidth: isLabelShrunk ? "133%" : "calc(100% - 32px)",
+      zIndex: 1
+    }, InputLabelProps.style);
+  }; // Helper text styles
+
+
+  const helperTextStyle = _objectSpread({
+    fontSize: "12px",
+    fontWeight: 400,
+    lineHeight: 1.4,
+    marginTop: "6px",
+    marginLeft: variant === "standard" ? "0" : "14px",
+    marginRight: "14px",
+    color: error ? errorColor : labelColor
+  }, FormHelperTextProps.style);
+
+  const handleFocus = e => {
+    setFocused(true);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+  };
+
+  const handleBlur = e => {
+    setFocused(false);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+  };
+
+  const handleChange = e => {
+    if (value === undefined) {
+      setInternalValue(e.target.value);
+    }
+
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+  };
+
+  const handleClick = e => {
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+
+    if (!disabled) {
+      const input = document.getElementById(id);
+      input === null || input === void 0 ? void 0 : input.focus();
+    }
+  };
+
+  const InputComponent = multiline ? "textarea" : "input"; // Create a safe CSS ID for the style block
+
+  const safeId = id.replace(/:/g, "\\:"); // Text color is always based on dark/light mode, not InputProps.sx.color
+  // (InputProps.sx.color in MUI is typically for border/accent, not text)
+
+  const resolvedTextColor = textColor; // Combine refs
+
+  const setRefs = el => {
+    if (typeof ref === "function") ref(el);else if (ref) ref.current = el;
+    if (typeof inputRef === "function") inputRef(el);else if (inputRef) inputRef.current = el;
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    style: containerStyle
+  }, props), /*#__PURE__*/React.createElement("style", null, "\n          #".concat(safeId, "::placeholder {\n            color: ").concat(placeholderColor, " !important;\n            opacity: 1 !important;\n            font-style: italic !important;\n            font-weight: 300 !important;\n          }\n          #").concat(safeId, "::-webkit-input-placeholder {\n            color: ").concat(placeholderColor, " !important;\n            font-style: italic !important;\n            font-weight: 300 !important;\n          }\n          #").concat(safeId, "::-moz-placeholder {\n            color: ").concat(placeholderColor, " !important;\n            font-style: italic !important;\n            font-weight: 300 !important;\n          }\n          #").concat(safeId, " {\n            color: ").concat(resolvedTextColor, " !important;\n            -webkit-text-fill-color: ").concat(resolvedTextColor, " !important;\n          }\n        ")), /*#__PURE__*/React.createElement("div", {
+    style: getWrapperStyles(),
+    onClick: handleClick
+  }, label && /*#__PURE__*/React.createElement("label", _extends({
+    htmlFor: id,
+    style: getLabelStyles()
+  }, InputLabelProps), label, required && /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: errorColor,
+      marginLeft: "2px"
+    }
+  }, "*")), (startAdornment || InputProps.startAdornment) && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      paddingLeft: "4px",
+      color: labelColor,
+      flexShrink: 0
+    }
+  }, startAdornment || InputProps.startAdornment), /*#__PURE__*/React.createElement(InputComponent, _extends({
+    ref: setRefs,
+    id: id,
+    type: type,
+    style: getInputStyles(),
+    placeholder: placeholder,
+    disabled: disabled,
+    required: required,
+    value: value,
+    defaultValue: defaultValue,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onKeyDown: onKeyDown,
+    autoFocus: autoFocus,
+    autoComplete: autoComplete,
+    name: name,
+    rows: multiline ? rows || minRows || 3 : undefined,
+    "aria-invalid": error,
+    "aria-describedby": helperText ? "".concat(id, "-helper-text") : undefined
+  }, inputProps, InputProps.inputProps)), (endAdornment || InputProps.endAdornment) && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      paddingRight: "4px",
+      color: labelColor,
+      flexShrink: 0
+    }
+  }, endAdornment || InputProps.endAdornment)), helperText && /*#__PURE__*/React.createElement("p", _extends({
+    id: "".concat(id, "-helper-text"),
+    style: helperTextStyle
+  }, FormHelperTextProps), helperText));
+});
+BaseInput.displayName = "BaseInput";
+const Input = withSx(BaseInput);
+const TextField = Input; // Alias for MUI compatibility
+
+/**
+ * InputAdornment - For adding icons/text to inputs
+ */
+
+const InputAdornment = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    position = "start",
+    children,
+    disablePointerEvents = false,
+    style
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  const adornmentStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    color: "rgba(255, 255, 255, 0.7)",
+    whiteSpace: "nowrap"
+  }, position === "start" && {
+    marginRight: "4px"
+  }), position === "end" && {
+    marginLeft: "4px"
+  }), disablePointerEvents && {
+    pointerEvents: "none"
+  }), style);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    style: adornmentStyle
+  }, props), children);
+});
+InputAdornment.displayName = "InputAdornment";
+/**
+ * FormHelperText - Standalone helper text component
+ */
+
+const FormHelperText = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  var _colors$error;
+
+  let {
+    children,
+    error = false,
+    disabled = false,
+    style
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3);
+
+  const {
+    colors
+  } = useTheme();
+  const errorColor = (colors === null || colors === void 0 ? void 0 : (_colors$error = colors.error) === null || _colors$error === void 0 ? void 0 : _colors$error.main) || "#d32f2f";
+
+  const helperStyle = _objectSpread({
+    fontSize: "12px",
+    fontWeight: 400,
+    lineHeight: 1.4,
+    margin: "6px 14px 0",
+    color: error ? errorColor : "rgba(255, 255, 255, 0.7)",
+    opacity: disabled ? 0.6 : 1
+  }, style);
+
+  return /*#__PURE__*/React.createElement("p", _extends({
+    ref: ref,
+    style: helperStyle
+  }, props), children);
+});
+FormHelperText.displayName = "FormHelperText";
+
+export { FormHelperText, Input, InputAdornment, TextField, Input as default };