sag_components 2.0.0-beta176 → 2.0.0-beta177

package/dist/index.d.ts

@@ -1300,7 +1300,7 @@ declare function WeeksPicker({ label, disabled, borderColor, borderColorFocus, t
     selectedValue: any;
 }): react_jsx_runtime.JSX.Element;
 
-declare function Input({ label, labelEmptyValue, size, selectedValue, placeHolder, onChange, onBlur, required, disabled, isDarkerBackground, width, error, errorMessage, labelColor, leftIcon, rightIcon, password, leftIconOnClick, rightIconOnClick, }: {
+declare function Input({ label, labelEmptyValue, size, selectedValue, placeHolder, onChange, onBlur, required, disabled, isDarkerBackground, width, height, error, errorMessage, labelColor, leftIcon, rightIcon, password, leftIconOnClick, rightIconOnClick, multiline, rows, maxLength, }: {
     label: any;
     labelEmptyValue: any;
     size: any;
@@ -1312,6 +1312,7 @@ declare function Input({ label, labelEmptyValue, size, selectedValue, placeHolde
     disabled: any;
     isDarkerBackground?: boolean;
     width: any;
+    height?: string;
     error: any;
     errorMessage: any;
     labelColor: any;
@@ -1320,6 +1321,9 @@ declare function Input({ label, labelEmptyValue, size, selectedValue, placeHolde
     password: any;
     leftIconOnClick: any;
     rightIconOnClick: any;
+    multiline?: boolean;
+    rows?: number;
+    maxLength: any;
 }): react_jsx_runtime.JSX.Element;
 declare namespace Input {
     namespace propTypes {
@@ -1341,6 +1345,9 @@ declare namespace Input {
         const leftIcon: PropTypes.Requireable<string>;
         const rightIcon: PropTypes.Requireable<string>;
         const password: PropTypes.Requireable<boolean>;
+        const multiline: PropTypes.Requireable<boolean>;
+        const rows: PropTypes.Requireable<number>;
+        const maxLength: PropTypes.Requireable<number>;
     }
     namespace defaultProps {
         const placeHolder_1: string;
@@ -1377,6 +1384,12 @@ declare namespace Input {
         export { onBlur_1 as onBlur };
         const password_1: boolean;
         export { password_1 as password };
+        const multiline_1: boolean;
+        export { multiline_1 as multiline };
+        const rows_1: number;
+        export { rows_1 as rows };
+        const maxLength_1: any;
+        export { maxLength_1 as maxLength };
     }
 }
 

package/dist/index.esm.js

@@ -10545,24 +10545,23 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = _ref => {
-  let {
-    availableQuarters,
-    // ["Q1-2024"]
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue,
-    startYear
-  } = _ref;
+const QuarterPicker = ({
+  availableQuarters,
+  // ["Q1-2024"]
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue,
+  startYear
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -11004,23 +11003,22 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = _ref => {
-  let {
-    availableMonths,
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue,
-    startYear
-  } = _ref;
+const MonthPicker = ({
+  availableMonths,
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue,
+  startYear
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -24131,22 +24129,21 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = _ref => {
-  let {
-    label,
-    hoverColor,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    xIconShow,
-    labelColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownSingle = ({
+  label,
+  hoverColor,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  xIconShow,
+  labelColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24543,24 +24540,23 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    required,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    labelColor,
-    xIconShow,
-    checkBoxColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownMultiSelection = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  required,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  labelColor,
+  xIconShow,
+  checkBoxColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -35400,18 +35396,19 @@ const MainContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-content: center;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: flex-start;
-  width: ${props => props.width || '300px'};  
+  width: ${props => props.width || '300px'};
+  height: ${props => props.height || '45px'};  
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
   border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
   padding: 0;
   cursor: ${props => props.disabled ? 'not-allowed' : 'default'};
+  min-height: ${props => props.multiline ? '80px' : 'auto'};
 `;
 const Label$3 = styled.label`
-
   font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
   font-weight: 400;
   padding-inline-end: 5px;
@@ -35421,8 +35418,18 @@ const Label$3 = styled.label`
   color: ${props => props.error ? 'red' : props.disabled ? '#D0D0D0' : props.labelColor};
   background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};
   position: absolute;
-  top: ${props => props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '27px' : '17px'};
-  left: ${props => props.isFocused || props.hasValue ? '23px' : props.leftIcon && props.leftIcon !== 'none' ? '42px' : '16px'};
+  top: ${props => {
+  if (props.multiline) {
+    return props.isFocused || props.hasValue ? '0px' : '20px';
+  }
+  return props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '27px' : '17px';
+}};
+  left: ${props => {
+  if (props.multiline) {
+    return props.isFocused || props.hasValue ? '23px' : '16px';
+  }
+  return props.isFocused || props.hasValue ? '23px' : props.leftIcon && props.leftIcon !== 'none' ? '42px' : '16px';
+}};
   font-family: Poppins;  
   transform: translateY(-50%);
   transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
@@ -35439,17 +35446,17 @@ const InputContainer = styled.div`
   display: flex;       
   flex-wrap: nowrap; 
   justify-content: flex-start;
-  align-content: center;     
+  align-content: ${props => props.multiline ? 'flex-start' : 'center'};     
   white-space: pre-wrap;
-  align-items: center;
+  align-items: ${props => props.multiline ? 'flex-start' : 'center'};
   overflow: hidden;
-  padding: 0 16px;
-  gap: 14px;
+  padding: ${props => props.multiline ? '16px' : '0 16px'};
+  gap: ${props => props.multiline ? '0' : '14px'};
   width: 100%;
   height: 100%;    
   box-sizing: border-box;
   background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};  
-  border:  1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : '#B1B1B1'};
+  border: 1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : '#B1B1B1'};
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 14px;
@@ -35461,10 +35468,9 @@ const InputContainer = styled.div`
     border: 1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : props.labelColor || '#212121'};
   }
 
-  &:focus {  
+  &:focus-within {  
     border: 1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : props.labelColor || '#212121'}; 
   }
-  
 `;
 const InputSubContainer = styled.div`
   display: flex;       
@@ -35472,13 +35478,16 @@ const InputSubContainer = styled.div`
   flex-wrap: nowrap;     
   align-content: center; 
   align-items: flex-start;
-  justify-content: center;
+  justify-content: ${props => props.multiline ? 'flex-start' : 'center'};
   white-space: pre-wrap;
   overflow: hidden;
-  padding: 5px 0;
+  padding: ${props => props.multiline ? '5px 0 0 0' : '5px 0'};
   width: 100%;
-  height: 100%;
-  min-height: ${props => props.size === 'medium' ? '52px' : '32px'};
+  height: ${props => props.height || '45px'};
+  min-height: ${props => {
+  if (props.multiline) return 'auto';
+  return props.size === 'medium' ? '52px' : '32px';
+}};
   box-sizing: border-box;
   background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};  
   border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
@@ -35488,14 +35497,59 @@ const InputSubContainer = styled.div`
 `;
 const StyledInput = styled.input`
   width: calc(100% - 10px);
-  height: 20px;
+  height: ${props => props.height || '20px'};
   font-weight: 400;
   font-size: 14px;
   outline: none;  
   color: ${props => props.disabled ? '#D0D0D0' : '#212121'};  
   background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};  
   border: none;
-  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
+  font-family: "Poppins", sans-serif;
+`;
+const StyledTextarea = styled.textarea`
+  width: 100%;
+  min-height: 60px;
+  font-weight: 400;
+  font-size: 14px;
+  outline: none;  
+  color: ${props => props.disabled ? '#D0D0D0' : '#212121'};  
+  background-color: ${props => props.disabled && props.isDarkerBackground ? '#F2F2F2' : '#fff'};  
+  border: none;
+  cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
+  font-family: "Poppins", sans-serif;
+  resize: vertical;
+  line-height: 1.4;
+  padding: 0;
+  margin-top: 10px;
+  
+  &::placeholder {
+    color: #999;
+    font-style: italic;
+  }
+  
+  &:focus {
+    outline: none;
+  }
+  
+  /* Remove default textarea styling */
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+  }
 `;
 const ErrorMessage = styled.div`
   font-size: 12px;
@@ -35528,6 +35582,7 @@ const Input$2 = _ref => {
     disabled,
     isDarkerBackground = false,
     width,
+    height = '50px',
     error,
     errorMessage,
     labelColor,
@@ -35535,7 +35590,12 @@ const Input$2 = _ref => {
     rightIcon,
     password,
     leftIconOnClick,
-    rightIconOnClick
+    rightIconOnClick,
+    multiline = false,
+    // New prop to enable textarea mode
+    rows = 3,
+    // New prop for textarea rows
+    maxLength // New prop for character limit
   } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -35609,12 +35669,24 @@ const Input$2 = _ref => {
     }
     return getIcon('eye', '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', toggleShowPassword);
   };
+
+  // Calculate dynamic height for multiline inputs
+  const calculateHeight = () => {
+    if (!multiline) return height;
+    const baseHeight = size === 'small' ? 32 : 52;
+    const lineHeight = 20;
+    const padding = 10;
+    return `${baseHeight + (rows - 1) * lineHeight + padding}px`;
+  };
+  const InputElement = multiline ? StyledTextarea : StyledInput;
   return /*#__PURE__*/React$1.createElement(MainContainer, {
     className: "MainContainer",
     width: width,
+    height: calculateHeight(),
     size: size,
     disabled: disabled,
-    isDarkerBackground: isDarkerBackground
+    isDarkerBackground: isDarkerBackground,
+    multiline: multiline
   }, /*#__PURE__*/React$1.createElement(InputContainer, {
     className: "InputContainer",
     labelColor: labelColor,
@@ -35622,8 +35694,9 @@ const Input$2 = _ref => {
     isDarkerBackground: isDarkerBackground,
     error: error,
     isFocused: isFocused,
-    size: size
-  }, getLeftIcon(), /*#__PURE__*/React$1.createElement(InputSubContainer, {
+    size: size,
+    multiline: multiline
+  }, !multiline && getLeftIcon(), /*#__PURE__*/React$1.createElement(InputSubContainer, {
     className: "InputSubContainer",
     ref: containerRef,
     labelColor: labelColor,
@@ -35631,26 +35704,29 @@ const Input$2 = _ref => {
     isDarkerBackground: isDarkerBackground,
     error: error,
     onClick: handleLabelClick,
-    size: size
+    height: calculateHeight(),
+    size: size,
+    multiline: multiline
   }, /*#__PURE__*/React$1.createElement(Label$3, {
     className: "Label",
     isFocused: isFocused,
     labelColor: labelColor,
     hasValue: inputValue,
-    leftIcon: leftIcon,
+    leftIcon: !multiline ? leftIcon : 'none',
     disabled: disabled,
     isDarkerBackground: isDarkerBackground,
     error: error,
     errorMessage: errorMessage,
     onClick: handleLabelClick,
-    size: size
+    size: size,
+    multiline: multiline
   }, inputValue ? label : labelEmptyValue || label, required && /*#__PURE__*/React$1.createElement("span", {
     style: {
       color: disabled ? '#D0D0D0' : 'red',
       height: '16px'
     }
-  }, "*")), /*#__PURE__*/React$1.createElement(StyledInput, {
-    className: "StyledInput",
+  }, "*")), /*#__PURE__*/React$1.createElement(InputElement, {
+    className: multiline ? "StyledTextarea" : "StyledInput",
     ref: inputRef,
     type: password && !showPassword ? 'password' : 'text',
     value: inputValue,
@@ -35662,11 +35738,22 @@ const Input$2 = _ref => {
     isDarkerBackground: isDarkerBackground,
     placeholder: isFocused ? placeHolder : '',
     error: error,
-    isFocused: isFocused
-  })), password ? getPasswordIcon() : getRightIcon()), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage, {
+    height: calculateHeight(),
+    isFocused: isFocused,
+    rows: multiline ? rows : undefined,
+    maxLength: maxLength,
+    multiline: multiline
+  })), !multiline && (password ? getPasswordIcon() : getRightIcon())), error && errorMessage?.length > 0 && /*#__PURE__*/React$1.createElement(ErrorMessage, {
     className: "ErrorMessage",
     width: width
-  }, errorMessage));
+  }, errorMessage), multiline && maxLength && /*#__PURE__*/React$1.createElement("div", {
+    style: {
+      fontSize: '12px',
+      color: inputValue.length > maxLength * 0.9 ? 'orange' : '#666',
+      textAlign: 'right',
+      marginTop: '4px'
+    }
+  }, inputValue.length, "/", maxLength));
 };
 Input$2.propTypes = {
   placeHolder: PropTypes.string,
@@ -35686,7 +35773,10 @@ Input$2.propTypes = {
   onBlur: PropTypes.func,
   leftIcon: PropTypes.string,
   rightIcon: PropTypes.string,
-  password: PropTypes.bool
+  password: PropTypes.bool,
+  multiline: PropTypes.bool,
+  rows: PropTypes.number,
+  maxLength: PropTypes.number
 };
 Input$2.defaultProps = {
   placeHolder: 'Type...',
@@ -35705,7 +35795,10 @@ Input$2.defaultProps = {
   leftIconOnClick: () => {},
   rightIconOnClick: () => {},
   onBlur: () => {},
-  password: false
+  password: false,
+  multiline: false,
+  rows: 3,
+  maxLength: undefined
 };
 
 const ToggleSwitchLabel = styled.label`
@@ -35713,12 +35806,9 @@ const ToggleSwitchLabel = styled.label`
   position: relative;
   cursor: pointer;
   user-select: none;
-  opacity: ${_ref => {
-  let {
-    disabled
-  } = _ref;
-  return disabled ? 0.5 : 1;
-}};
+  opacity: ${({
+  disabled
+}) => disabled ? 0.5 : 1};
 `;
 const ToggleInput = styled.input`
   display: none;
@@ -35726,19 +35816,15 @@ const ToggleInput = styled.input`
 const ToggleSlider = styled.span`
   display: block;
   position: relative;
-  background: ${_ref2 => {
-  let {
-    checked,
-    disabled
-  } = _ref2;
-  return checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc";
-}};
+  background: ${({
+  checked,
+  disabled
+}) => checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc"};
   border-radius: 999px;
   transition: background 0.2s;
-  ${_ref3 => {
-  let {
-    size
-  } = _ref3;
+  ${({
+  size
+}) => {
   switch (size) {
     case "s":
       return css`width: 40px; height: 20px;`;
@@ -35757,10 +35843,9 @@ const ToggleSlider = styled.span`
     background: #fff;
     border-radius: 50%;
     transition: left 0.2s, width 0.2s, height 0.2s;
-    ${_ref4 => {
-  let {
-    size
-  } = _ref4;
+    ${({
+  size
+}) => {
   switch (size) {
     case "s":
       return css`width: 14px; height: 14px;`;
@@ -35770,11 +35855,10 @@ const ToggleSlider = styled.span`
       return css`width: 20px; height: 20px;`;
   }
 }}
-    left: ${_ref5 => {
-  let {
-    checked,
-    size
-  } = _ref5;
+    left: ${({
+  checked,
+  size
+}) => {
   if (!checked) return "3px";
   switch (size) {
     case "s":
@@ -35788,9 +35872,9 @@ const ToggleSlider = styled.span`
   }
 `;
 
-/**
- * ToggleSwitch component for on/off states.
- * Supports small/large sizes and disabled state.
+/**
+ * ToggleSwitch component for on/off states.
+ * Supports small/large sizes and disabled state.
  */
 function ToggleSwitch(_ref) {
   let {