@campxdev/react-blueprint 2.3.11 → 3.0.0-alpha.1

package/src/components/Input/PasswordField/PasswordField.tsx

@@ -1,20 +1,24 @@
-import {
-  IconButton,
-  InputAdornment,
-  TextField as MuiTextField,
-  TextFieldProps as MuiTextFieldProps,
-  StackProps,
-} from '@mui/material';
+import { cn } from '@/lib/utils';
+import { Input } from '@/shadcn-components/Input/Input/Input';
+import { Eye, EyeOff } from 'lucide-react';
 import { useState } from 'react';
-import { VisibilityOffIcon } from '../../Assets/Icons/IconComponents/VisibiityOffIcon';
-import { VisibilityIcon } from '../../Assets/Icons/IconComponents/VisibilityIcon';
-import { Typography } from '../../export';
+import { Typography } from '../../DataDisplay/Typography/Typography';
 import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
 
 export type PasswordFieldProps = {
-  containerProps?: StackProps;
+  name?: string;
+  label?: string;
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  required?: boolean;
+  containerProps?: React.HTMLAttributes<HTMLDivElement>;
   description?: string;
-} & MuiTextFieldProps;
+  placeholder?: string;
+  disabled?: boolean;
+  error?: boolean;
+  helperText?: string;
+  className?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
 
 export const PasswordField = ({
   name,
@@ -24,44 +28,75 @@ export const PasswordField = ({
   required = false,
   containerProps,
   description,
-  type = 'text',
+  placeholder = 'Enter password',
+  disabled = false,
+  error = false,
+  helperText,
+  className,
   ...rest
 }: PasswordFieldProps) => {
   const [showPassword, setShowPassword] = useState(false);
-  const handleClickShowPassword = () => {
+
+  const handleTogglePassword = () => {
     setShowPassword((prev) => !prev);
   };
-  return (
+
+  const content = (
+    <div className="flex flex-col gap-2">
+      <div className="relative">
+        <Input
+          id={name}
+          name={name}
+          value={value}
+          onChange={onChange}
+          type={showPassword ? 'text' : 'password'}
+          placeholder={placeholder}
+          disabled={disabled}
+          className={cn(
+            'pr-10 bg-input-background border-none ',
+            error && 'border-destructive focus-visible:ring-destructive',
+            className,
+          )}
+          {...rest}
+        />
+        <button
+          type="button"
+          onClick={handleTogglePassword}
+          disabled={disabled}
+          className={cn(
+            'absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors',
+            disabled && 'cursor-not-allowed opacity-50',
+          )}
+          aria-label="Toggle password visibility"
+        >
+          {showPassword ? (
+            <EyeOff className="h-4 w-4" />
+          ) : (
+            <Eye className="h-4 w-4" />
+          )}
+        </button>
+      </div>
+      {(description || helperText) && (
+        <Typography
+          variant="small"
+          className={cn('mt-1', error && 'text-destructive')}
+        >
+          {helperText || description}
+        </Typography>
+      )}
+    </div>
+  );
+
+  return label ? (
     <LabelWrapper
       label={label}
       required={required}
       name={name}
       containerProps={containerProps}
     >
-      <MuiTextField
-        required={required}
-        id={name}
-        value={value}
-        label={label}
-        name={name}
-        onChange={onChange}
-        type={!showPassword ? 'password' : 'text'}
-        InputProps={{
-          endAdornment: (
-            <InputAdornment position="end">
-              <IconButton
-                aria-label="toggle password visibility"
-                onClick={handleClickShowPassword}
-                edge="end"
-              >
-                {showPassword ? <VisibilityIcon /> : <VisibilityOffIcon />}
-              </IconButton>
-            </InputAdornment>
-          ),
-        }}
-        {...rest}
-      />
-      <Typography variant="caption">{description}</Typography>
+      {content}
     </LabelWrapper>
+  ) : (
+    content
   );
 };

package/src/components/Input/RadioGroup/RadioGroup.tsx

@@ -1,34 +1,51 @@
-import {
-  FormControlLabel,
-  RadioGroup as MuiRadioGroup,
-  RadioGroupProps as MuiRadioGroupProps,
-  Radio,
-  StackProps,
-} from '@mui/material';
+import { cn } from '@/lib/utils';
+import { Label } from '@/shadcn-components/Input/Label/Label';
+import { RadioGroupItem, RadioGroup as ShadcnRadioGroup } from '@/shadcn-components/Input/RadioGroup/RadioGroup';
 import { ReactNode } from 'react';
 import { Typography } from '../../DataDisplay/Typography/Typography';
-import { Icons } from '../../export';
 import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
 
 export type RadioGroupProps = {
-  containerProps?: StackProps;
+  containerProps?: React.HTMLAttributes<HTMLDivElement>;
   options: Array<{ label: ReactNode; value: any; disabled?: boolean }>;
-  label: string;
-  required: boolean;
+  label?: string;
+  required?: boolean;
   name: string;
-  disabled: boolean;
-} & MuiRadioGroupProps;
+  disabled?: boolean;
+  value?: any;
+  defaultValue?: any;
+  onChange?: (value: any) => void;
+  onValueChange?: (value: string) => void;
+  direction?: 'row' | 'column';
+  className?: string;
+  error?: boolean;
+  helperText?: ReactNode;
+};
 
 export const RadioGroup = ({
   label,
-  required,
+  required = false,
   options,
   name,
   containerProps,
-  disabled,
+  disabled = false,
   onChange,
+  onValueChange,
+  direction = 'column',
+  className,
+  error,
+  helperText,
   ...rest
 }: RadioGroupProps) => {
+  const handleValueChange = (value: string) => {
+    if (onValueChange) {
+      onValueChange(value);
+    }
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
   return (
     <LabelWrapper
       label={label}
@@ -36,27 +53,38 @@ export const RadioGroup = ({
       name={name}
       containerProps={containerProps}
     >
-      <MuiRadioGroup
-        onChange={onChange}
+      <ShadcnRadioGroup
+        onValueChange={handleValueChange}
         name={name}
+        disabled={disabled}
+        className={cn(
+          'flex gap-2',
+          direction === 'row' ? 'flex-row' : 'flex-col',
+          className,
+        )}
         {...rest}
-        sx={{ height: '100%', ...rest.sx }}
       >
         {options?.map((item, index) => (
-          <FormControlLabel
-            key={index}
-            value={item.value}
-            control={
-              <Radio
-                checkedIcon={<Icons.CheckedRadioIcon />}
-                icon={<Icons.UnCheckedRadioIcon />}
-                disabled={disabled || item.disabled}
-              />
-            }
-            label={<Typography variant="body2">{item.label}</Typography>}
-          />
+          <div key={index} className="flex items-center space-x-2">
+            <RadioGroupItem
+              value={String(item.value)}
+              id={`${name}-${index}`}
+              disabled={disabled || item.disabled}
+            />
+            <Label
+              htmlFor={`${name}-${index}`}
+              className="font-normal cursor-pointer"
+            >
+              <Typography variant="small">{item.label}</Typography>
+            </Label>
+          </div>
         ))}
-      </MuiRadioGroup>
+      </ShadcnRadioGroup>
+      {error && helperText && (
+        <Typography variant="muted" className="text-destructive mt-1">
+          {helperText}
+        </Typography>
+      )}
     </LabelWrapper>
   );
 };

package/src/components/Input/SearchBar/SearchBar.tsx

@@ -1,26 +1,28 @@
-import {
-  Box,
-  InputAdornment,
-  TextField,
-  TextFieldProps,
-  styled,
-} from '@mui/material';
+import { cn } from '@/lib/utils';
+import { Input } from '@/shadcn-components/Input/Input/Input';
+import { Label } from '@/shadcn-components/Input/Label/Label';
 import { debounce } from 'lodash';
+import { Search } from 'lucide-react';
 import { ReactNode, useMemo, useState } from 'react';
-import { SearchIcon } from '../../Assets/Icons/IconComponents/SearchIcon';
 
 export type SearchBarProps = {
   placeholder?: string;
   label?: string | ReactNode;
   value?: string;
-  onSearch: (value: string) => void;
-} & TextFieldProps;
+  onSearch?: (value: string) => void;
+  className?: string;
+  containerClassName?: string;
+  inputClassName?: string;
+} & Omit<React.ComponentProps<'input'>, 'onChange' | 'value'>;
 
 export const SearchBar = ({
   placeholder = 'Search by Name',
   label,
   value = '',
-  onSearch,
+  onSearch = () => {},
+  className,
+  containerClassName,
+  inputClassName,
   ...rest
 }: SearchBarProps) => {
   const [search, setSearch] = useState(value);
@@ -29,57 +31,30 @@ export const SearchBar = ({
     return debounce(onSearch, 300);
   }, [onSearch]);
 
-  const handleChange = (e: any) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value);
     debouncedSendRequest(e.target.value);
   };
 
   return (
-    <Box margin="8px">
-      <StyledTextField
-        placeholder={placeholder}
-        label={label}
-        value={search}
-        InputProps={{
-          endAdornment: (
-            <InputAdornment position="end">
-              <SearchIcon />
-            </InputAdornment>
-          ),
-        }}
-        {...rest}
-        onChange={handleChange}
-      />
-    </Box>
+    <div className={cn('flex flex-col gap-1 p-2', containerClassName)}>
+      {label && <Label>{label}</Label>}
+      <div className={cn('relative w-full', className)}>
+        <Input
+          type="text"
+          placeholder={placeholder}
+          value={search}
+          onChange={handleChange}
+          className={cn(
+            'h-10 bg-muted/50 pr-10 text-sm placeholder:text-muted-foreground bg-input-background border-none',
+            inputClassName,
+          )}
+          {...rest}
+        />
+        <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
+          <Search size={16} />
+        </div>
+      </div>
+    </div>
   );
 };
-
-const StyledTextField = styled(TextField)(({ theme }) => ({
-  margin: 0,
-  height: 40,
-  backgroundColor: theme.palette.surface.grey,
-  '.MuiFormControl-root': {
-    margin: 0,
-    height: '100%',
-  },
-  '.MuiOutlinedInput-root': {
-    height: '100%',
-    padding: '5px, 10px',
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '.MuiInputBase-input': {
-    height: '100%',
-    fontSize: '14px',
-    '&::placeholder': {
-      color: theme.palette.text.tertiary,
-      fontSize: '14px',
-      opacity: 1,
-    },
-  },
-  '.MuiOutlinedInput-notchedOutline': {
-    height: '100%',
-    top: 0,
-    borderColor: theme.palette.border.primary,
-  },
-}));

package/src/components/Input/Select/Select.tsx

@@ -1,7 +1,13 @@
-import { MenuItem, SxProps, Theme, useTheme } from '@mui/material';
-import { BaseSelectProps } from '@mui/material/Select';
+import { cn } from '@/lib/utils';
+import {
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Select as ShadcnSelect,
+} from '@/shadcn-components/Input/Select/Select';
 import * as React from 'react';
-import { StyledFormControl, StyledSelect } from './styles';
+import { useEffect, useRef, useState } from 'react';
 
 export type SelectProps = {
   options: Array<{
@@ -16,55 +22,35 @@ export type SelectProps = {
       | 'orange'
       | 'secondary';
   }>;
-  onChange?: (event: React.ChangeEvent<{ value: any }>) => void;
-  value: string | number;
-  containerSx?: SxProps;
-} & BaseSelectProps;
-const getColorPairs = (
-  theme: Theme,
+  onChange?: (value: string) => void;
+  value?: string | number;
+  defaultValue?: string | number;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+  fullWidth?: boolean;
+};
+
+const getColorClasses = (
   color?: 'red' | 'green' | 'blue' | 'pink' | 'yellow' | 'orange' | 'secondary',
 ) => {
   switch (color) {
     case 'red':
-      return {
-        textColor: theme.palette.highlight.highlightRed,
-        backgroundColor: theme.palette.highlight.redBackground,
-      };
+      return 'bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-400';
     case 'green':
-      return {
-        textColor: theme.palette.highlight.highlightGreen,
-        backgroundColor: theme.palette.highlight.greenBackground,
-      };
+      return 'bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-400';
     case 'blue':
-      return {
-        textColor: theme.palette.highlight.highlightBlue,
-        backgroundColor: theme.palette.highlight.blueBackground,
-      };
+      return 'bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-400';
     case 'pink':
-      return {
-        textColor: theme.palette.highlight.highlightPink,
-        backgroundColor: theme.palette.highlight.pinkBackground,
-      };
+      return 'bg-pink-50 text-pink-700 dark:bg-pink-950 dark:text-pink-400';
     case 'yellow':
-      return {
-        textColor: theme.palette.highlight.highlightYellow,
-        backgroundColor: theme.palette.highlight.yellowBackground,
-      };
+      return 'bg-yellow-50 text-yellow-700 dark:bg-yellow-950 dark:text-yellow-400';
     case 'orange':
-      return {
-        textColor: theme.palette.highlight.highlightOrange,
-        backgroundColor: theme.palette.highlight.orangeBackground,
-      };
+      return 'bg-orange-50 text-orange-700 dark:bg-orange-950 dark:text-orange-400';
     case 'secondary':
-      return {
-        textColor: theme.palette.primary.main,
-        backgroundColor: theme.palette.secondary.main,
-      };
+      return 'bg-secondary text-secondary-foreground';
     default:
-      return {
-        textColor: theme.palette.text.primary,
-        backgroundColor: theme.palette.surface.defaultBackground,
-      };
+      return '';
   }
 };
 
@@ -72,45 +58,72 @@ export const Select = ({
   options = [],
   onChange,
   value,
-  containerSx,
+  placeholder = 'Select an option...',
+  className,
+  defaultValue,
+  disabled = false,
+  fullWidth = false,
 }: SelectProps) => {
-  const selectedOption = options.find((option) => option.value === value);
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
-  const theme = useTheme();
+  // Force re-render on mount to ensure positioning works
+  const [, forceUpdate] = useState({});
+  useEffect(() => {
+    forceUpdate({});
+  }, []);
 
-  const { textColor, backgroundColor } = getColorPairs(
-    theme,
-    selectedOption?.color,
+  // Track the current selected value in state
+  const [selectedValue, setSelectedValue] = React.useState<
+    string | number | undefined
+  >(value ?? defaultValue);
+
+  // Find the selected option based on current state
+  const selectedOption = options.find(
+    (option) => option.value === selectedValue,
   );
+  const colorClasses = getColorClasses(selectedOption?.color);
+
+  const handleValueChange = (newValue: string) => {
+    setSelectedValue(newValue);
+    onChange?.(newValue);
+  };
 
   return (
-    <StyledFormControl
-      textColor={textColor}
-      bgcolor={backgroundColor}
-      sx={containerSx}
+    <ShadcnSelect
+      defaultValue={defaultValue?.toString()}
+      value={value?.toString()}
+      onValueChange={handleValueChange}
+      disabled={disabled}
     >
-      <StyledSelect
-        value={value}
-        onChange={onChange}
-        displayEmpty
-        inputProps={{ 'aria-label': 'Without label' }}
-        // endAdornment={<Icons.AccordionArrow />}
+      <div
+        ref={wrapperRef}
+        style={{ display: fullWidth ? 'block' : 'inline-block' }}
       >
-        {options?.map((item, index) => (
-          <MenuItem
-            key={index}
-            value={item.value}
-            sx={{
-              boxShadow: 'none',
-              '&:focus': {
-                boxShadow: 'none',
-              },
-            }}
-          >
-            {item.label}
-          </MenuItem>
-        ))}
-      </StyledSelect>
-    </StyledFormControl>
+        <SelectTrigger
+          className={cn(
+            fullWidth ? 'w-full' : 'w-[220px]',
+            'bg-input-background border-none text-muted-foreground',
+            colorClasses,
+            className,
+          )}
+        >
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+      </div>
+      <SelectContent>
+        {options?.map((item, index) => {
+          const itemColorClasses = getColorClasses(item.color);
+          return (
+            <SelectItem
+              key={index}
+              value={item.value.toString()}
+              className={cn(itemColorClasses)}
+            >
+              {item.label}
+            </SelectItem>
+          );
+        })}
+      </SelectContent>
+    </ShadcnSelect>
   );
 };

package/src/components/Input/SingleCheckBox/SingleCheckBox.tsx

@@ -1,60 +1,55 @@
-import {
-  FormControlLabel,
-  FormControlLabelProps,
-  Checkbox as MuiCheckbox,
-  CheckboxProps as MuiCheckboxProps,
-  SxProps,
-  useTheme,
-} from '@mui/material';
+import { Checkbox } from '@/shadcn-components/Input/Checkbox/Checkbox';
+import { Label } from '@/shadcn-components/Input/Label/Label';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { ReactNode } from 'react';
-import {
-  Typography,
-  TypographyProps,
-} from '../../DataDisplay/Typography/Typography';
-import { Icons } from '../../export';
 
 export type CheckboxProps = {
-  checkedIcon?: ReactNode;
-  icon?: ReactNode;
   label: ReactNode;
-  formControlLabelProps?: Omit<FormControlLabelProps, 'control' | 'label'>;
-  typographyProps?: TypographyProps;
-} & MuiCheckboxProps;
+  required?: boolean;
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  className?: string;
+  labelClassName?: string;
+  containerClassName?: string;
+  disabled?: boolean;
+  name?: string;
+} & Omit<
+  React.ComponentProps<typeof CheckboxPrimitive.Root>,
+  'checked' | 'onChange' | 'onCheckedChange'
+>;
 
 export const SingleCheckBox = ({
   checked,
   label,
   onChange,
   required,
-  checkedIcon = <Icons.CheckedCheckboxIcon />,
-  icon = <Icons.UnCheckedCheckboxIcon />,
-  formControlLabelProps,
-  typographyProps,
+  className,
+  labelClassName,
+  containerClassName,
+  disabled,
+  name,
   ...rest
 }: CheckboxProps) => {
-  const theme = useTheme();
   return (
-    <FormControlLabel
-      control={
-        <MuiCheckbox
-          checked={checked}
-          checkedIcon={checkedIcon}
-          icon={icon}
-          onChange={onChange}
-          {...rest}
-        />
-      }
-      label={
-        <Typography variant="body1" {...typographyProps}>
-          {label}
-          {required && (
-            <span style={{ color: `${theme.palette.tertiary.main}` }}>
-              {' *'}
-            </span>
-          )}
-        </Typography>
-      }
-      {...formControlLabelProps}
-    />
+    <div className={containerClassName ?? 'flex items-center space-x-2'}>
+      <Checkbox
+        id={name ?? 'checkbox'}
+        checked={checked}
+        onCheckedChange={onChange}
+        disabled={disabled}
+        className={className}
+        {...rest}
+      />
+      <Label
+        htmlFor={name ?? 'checkbox'}
+        className={
+          labelClassName ??
+          'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+        }
+      >
+        {label}
+        {required && <span className="text-highlight-red">{' *'}</span>}
+      </Label>
+    </div>
   );
 };