refactor: replace old Checkbox component and Added new TextInput, MaskedInput, and Select components

packages/bruno-app/src/ui/ActionIcon/StyledWrapper.js

@@ -45,7 +45,7 @@ const StyledWrapper = styled.button`
 
   ${(props) => props.$colorOnHover && css`
     &:hover:not(:disabled) {
-      color: ${props.$colorOnHover};
+      color: ${props.theme.colors?.text?.[props.$colorOnHover] || props.$colorOnHover};
     }
   `}
 `;

packages/bruno-app/src/ui/Checkbox/StyledWrapper.js

@@ -0,0 +1,107 @@
+import styled from 'styled-components';
+import { rgba } from 'polished';
+
+const SIZES = {
+  sm: { box: '14px', icon: '10px', gap: '0.375rem' },
+  md: { box: '16px', icon: '12px', gap: '0.5rem' }
+};
+
+const StyledWrapper = styled.div`
+  display: inline-flex;
+  align-items: flex-start;
+  gap: ${(props) => (SIZES[props.$size] || SIZES.md).gap};
+  cursor: ${(props) => (props.$disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${(props) => (props.$disabled ? 0.5 : 1)};
+  flex-direction: ${(props) => (props.$labelPosition === 'left' ? 'row-reverse' : 'row')};
+
+  .checkbox-box {
+    position: relative;
+    flex-shrink: 0;
+    width: ${(props) => (SIZES[props.$size] || SIZES.md).box};
+    height: ${(props) => (SIZES[props.$size] || SIZES.md).box};
+  }
+
+  .checkbox-input {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    border: 1.5px solid ${(props) => props.theme.border.border2};
+    border-radius: ${(props) => {
+      const r = props.$radius;
+      if (typeof r === 'number') return `${r}px`;
+      if (r === 'md') return props.theme.border.radius.md;
+      return props.theme.border.radius.sm;
+    }};
+    background: transparent;
+    cursor: inherit;
+    outline: none;
+    transition: all 0.15s ease;
+
+    &:checked {
+      background-color: ${(props) => props.$color || props.theme.primary.solid};
+      border-color: ${(props) => props.$color || props.theme.primary.solid};
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 2px ${(props) => rgba(props.$color || props.theme.primary.solid, 0.25)};
+    }
+  }
+
+  .checkbox-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    display: none;
+  }
+
+  .checkbox-input:checked + .checkbox-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${(props) => props.$iconColor || props.theme.button2.color.primary.text};
+  }
+
+  /* Indeterminate state */
+  .checkbox-input.checkbox-indeterminate {
+    background-color: ${(props) => props.$color || props.theme.primary.solid};
+    border-color: ${(props) => props.$color || props.theme.primary.solid};
+  }
+
+  .checkbox-input.checkbox-indeterminate + .checkbox-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${(props) => props.$iconColor || props.theme.button2.color.primary.text};
+  }
+
+  .checkbox-label-content {
+    display: flex;
+    flex-direction: column;
+    user-select: none;
+    padding-top: 1px;
+  }
+
+  .checkbox-label {
+    font-size: ${(props) => props.theme.font.size[props.$size === 'sm' ? 'xs' : 'sm']};
+    color: ${(props) => props.theme.colors.text.body};
+    line-height: 1.4;
+  }
+
+  .checkbox-description {
+    font-size: ${(props) => props.theme.font.size.xs};
+    color: ${(props) => props.theme.colors.text.muted};
+    margin-top: 0.125rem;
+  }
+
+  .checkbox-error {
+    font-size: ${(props) => props.theme.font.size.xs};
+    color: ${(props) => props.theme.colors.text.danger};
+    margin-top: 0.25rem;
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/ui/Checkbox/index.js

@@ -0,0 +1,120 @@
+import React, { useRef, useEffect, useId } from 'react';
+import { IconCheck, IconMinus } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+
+const ICON_SIZES = { sm: 10, md: 12 };
+
+/**
+ * Checkbox - A reusable checkbox component
+ *
+ * @param {boolean} props.checked - Controlled checked state
+ * @param {function} props.onChange - Called with the native change event
+ * @param {boolean} props.defaultChecked - Initial state for uncontrolled usage
+ * @param {boolean} props.indeterminate - Indeterminate state (overrides checked visually)
+ * @param {boolean} props.disabled - Disables interaction
+ * @param {string|ReactNode} props.label - Label text
+ * @param {string} props.description - Description below label
+ * @param {'left'|'right'} props.labelPosition - Label placement (default: 'right')
+ * @param {string} props.id - Input id
+ * @param {string} props.name - Input name
+ * @param {string} props.value - Input value for form submission
+ * @param {string} props.error - Error message
+ * @param {string} props.color - Override accent color
+ * @param {string} props.iconColor - Checkmark color (default: white)
+ * @param {ReactNode} props.icon - Custom icon for checked state
+ * @param {'sm'|'md'|number} props.radius - Border radius (default: 'sm')
+ * @param {'sm'|'md'} props.size - Checkbox size (default: 'md')
+ * @param {string} props.className - Additional CSS class
+ */
+const Checkbox = ({
+  checked,
+  onChange,
+  defaultChecked,
+  indeterminate = false,
+  disabled = false,
+  label,
+  description,
+  labelPosition = 'right',
+  id,
+  name,
+  value,
+  error,
+  color,
+  iconColor,
+  icon,
+  radius = 'sm',
+  size = 'md',
+  className,
+  'data-testid': testId
+}) => {
+  const inputRef = useRef(null);
+  const autoId = useId();
+  const inputId = id || autoId;
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+
+  const iconSize = ICON_SIZES[size] || 12;
+  const labelId = label ? `${inputId}-label` : undefined;
+  const descId = description ? `${inputId}-desc` : undefined;
+  const errId = error ? `${inputId}-err` : undefined;
+  const describedBy = [descId, errId].filter(Boolean).join(' ') || undefined;
+
+  const handleClick = (e) => {
+    e.stopPropagation();
+    if (!disabled && inputRef.current) {
+      inputRef.current.click();
+    }
+  };
+
+  const checkedIcon = icon || (
+    indeterminate
+      ? <IconMinus size={iconSize} strokeWidth={3} />
+      : <IconCheck size={iconSize} strokeWidth={3} />
+  );
+
+  return (
+    <StyledWrapper
+      className={className}
+      $size={size}
+      $disabled={disabled}
+      $labelPosition={labelPosition}
+      $color={color}
+      $iconColor={iconColor}
+      $radius={radius}
+      onClick={handleClick}
+    >
+      <div className="checkbox-box">
+        <input
+          ref={inputRef}
+          type="checkbox"
+          className={`checkbox-input ${indeterminate ? 'checkbox-indeterminate' : ''}`}
+          id={inputId}
+          name={name}
+          data-testid={testId}
+          value={value}
+          checked={checked}
+          defaultChecked={defaultChecked}
+          disabled={disabled}
+          onChange={onChange}
+          aria-labelledby={labelId}
+          aria-describedby={describedBy}
+          onClick={(e) => e.stopPropagation()}
+        />
+        <span className="checkbox-icon">{checkedIcon}</span>
+      </div>
+      {(label || description || error) && (
+        <div className="checkbox-label-content">
+          {label && <span id={labelId} className="checkbox-label">{label}</span>}
+          {description && <span id={descId} className="checkbox-description">{description}</span>}
+          {error && <span id={errId} className="checkbox-error">{error}</span>}
+        </div>
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default Checkbox;

packages/bruno-app/src/ui/InputWrapper/StyledWrapper.js

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import { INPUT_SIZES } from './constants';
+
+const StyledWrapper = styled.div`
+  position: relative;
+  width: 100%;
+
+  .input-wrapper-label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: ${(props) => props.theme.font.size[INPUT_SIZES[props.$size || 'md'].labelFontSize]};
+    color: ${(props) => props.theme.colors.text.body};
+  }
+
+  .input-wrapper-required {
+    color: ${(props) => props.theme.colors.text.danger};
+    margin-left: 0.125rem;
+  }
+
+  .input-wrapper-description {
+    font-size: ${(props) => props.theme.font.size.xs};
+    color: ${(props) => props.theme.colors.text.muted};
+    margin-bottom: 0.25rem;
+  }
+
+  .input-wrapper-error {
+    font-size: ${(props) => props.theme.font.size.xs};
+    color: ${(props) => props.theme.colors.text.danger};
+    margin-top: 0.25rem;
+  }
+`;
+
+export default StyledWrapper;