@ntbjs/react-components 2.0.2-rc.2 → 2.0.2-rc.3

package/build/inputs/TextArea/TextArea.styled.js

@@ -1,22 +1,7 @@
-import styled, { keyframes, css } from 'styled-components';
+import styled, { css } from 'styled-components';
 import { applyDefaultTheme } from '../../utils/defaultTheme.js';
 
-const fadeInCheck = keyframes`
-  from {
-    opacity: 0
-  }
-  to {
-    opacity: 1
-  }
-`;
-const fadeOutCheck = keyframes`
-  from {
-    opacity: 1
-  }
-  to {
-    opacity: 0
-  }
-`;
+const shouldForwardProp = prop => !prop.startsWith('$');
 const activeLabel = css`
   font-size: 0.75rem;
   padding: 0 3px;
@@ -25,9 +10,6 @@ const activeLabel = css`
   left: 8px !important;
   opacity: 1 !important;
 `;
-const shouldForwardProp = prop => {
-  return prop !== 'theme' && !prop.startsWith('$');
-};
 const TextAreaContainter = styled.div.withConfig({
   shouldForwardProp
 }).attrs(applyDefaultTheme)`
@@ -45,10 +27,35 @@ const Label = styled.label.withConfig({
   justify-content: space-between;
   align-items: center;
   padding-top: 13px;
+  
   ${props => props.disabled && css`
+      opacity: 0.5;
       cursor: not-allowed;
     `}
 `;
+const SuccessContainerBase = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+  transition: opacity 0.5s ease-in-out;
+  opacity: ${props => props.$type === 'loading' || props.$type === 'success' ? 1 : 0};
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'))};
+  
+  > svg {
+    width: 13px; 
+  }
+`;
+const SuccessContainer = styled(SuccessContainerBase)`
+  position: absolute;
+  margin-top: -30px;
+  margin-left: 5px;
+`;
+const SuccessContainerLabel = styled(SuccessContainerBase)`
+  margin-right: 5px;
+  margin-top: -7px;
+`;
 const InputIconContainer = styled.div.withConfig({
   shouldForwardProp
 }).attrs(applyDefaultTheme)`
@@ -58,22 +65,25 @@ const InputIconContainer = styled.div.withConfig({
   border-bottom-right-radius: 3px;
   display: flex;
   align-items: flex-start;
-
   position: absolute;
   right: 15px;
   top: 10px;
   bottom: 0;
+  
   > .smallPadingIcon {
     padding: 4px;
-    width: 15px;
-    height: 15px;
+    width: 20px;
+    height: 20px;
     border-radius: 5px;
     opacity: 1;
     margin-top: -5px;
     ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('gray-300'), '!important')}
   }
+  
   svg {
-    width: 15px;
+    width: auto;
+    max-width: 18px;
+    height: auto;
     opacity: 0.7;
     transition: opacity 250ms;
 
@@ -95,85 +105,60 @@ const TextInputField = styled.textarea.withConfig({
   box-sizing: border-box;
   appearance: none;
   border: 1px solid;
-  transition:
-    height 550ms ease-in-out,
-    border-color 350ms,
-    background 350ms;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
+  transition: height 550ms ease-in-out, border-color 350ms, background 350ms;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'))};
 
   ${props => props.$borderRadius && css`
       border-radius: ${props.$borderRadius}px;
     `}
 
+  /* Type-specific styling */
   ${props => {
-  if (props.type === 'error') {
+  if (props.$type === 'error') {
     return css`
         ${props.theme.themeProp('color', 'white', 'black')}
         ${props.theme.themeProp('background', '#7f1b1b', '#FBEAE6')}
         ${props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')}
       `;
-  } else if (props.type === 'warning') {
+  }
+  if (props.$type === 'warning') {
     return css`
         ${props.theme.themeProp('color', 'white', 'black')}
         ${props.theme.themeProp('background', '#634E01', '#FFFDE8')}
         ${props.theme.themeProp('border-color', '#634E01', '#FFFDE8')}
       `;
-  } else if (props.type === 'error-border') {
+  }
+  if (props.$type === 'error-border') {
     return css`
         ${props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
         ${props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
         ${props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))}
       `;
-  } else if (props.type === 'warning-border') {
+  }
+  if (props.$type === 'warning-border') {
     return css`
         ${props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
         ${props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
         ${props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('orange-500'))}
       `;
-  } else {
-    return css`
-        ${props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
-        ${props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
-        ${props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'))}
-      `;
   }
+  return css`
+      ${props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'))}
+      ${props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
+      ${props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'))}
+    `;
 }}
 
-
-  ${props => props.readOnly && css`
-      cursor: default;
-      border-color: transparent !important;
-      padding: 12px 10px;
-    `}
-
-  ${props => props.disabled && css`
-      cursor: not-allowed;
-    `}
-
-
-  ${props => props.$noBorder && !props.type && css`
-      ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
-    `} 
-
-  ${props => props.$noBorder && props.type === 'warning' && css`
-      ${props => props.theme.themeProp('border-color', '#634E01', '#FFFDE8')}
-    `}
-
-  ${props => props.$noBorder && props.type === 'error' && css`
-      ${props => props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')}
-    `}
-
-
-  ${props => props.padding === 'small' && css`
+  /* Padding variations */
+  ${props => props.$padding === 'small' && css`
       padding: 5px 10px;
     `}
 
-  ${props => props.padding === 'medium' && css`
+  ${props => props.$padding === 'medium' && css`
       padding: 13px 15px;
     `}
 
-  ${props => props.padding === 'large' && css`
+  ${props => props.$padding === 'large' && css`
       padding: 15px 55px;
     `}
 
@@ -183,137 +168,153 @@ const TextInputField = styled.textarea.withConfig({
       padding-top: 13.5px;
     `}
 
+  /* Edit mode styling */
+  &:not(:hover):not(:focus) {
+    ${props => props.$edit && css`
+        ${props.$type === 'error' ? props.theme.themeProp('background', '#7f1b1b', '#FEE2E2') : props.$type === 'warning' ? props.theme.themeProp('background', '#634E01', '#FFFDE8') : props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)')};
+        ${props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)')};
 
-  &&:hover:not(:focus) {
-    ${props => {
-  if (props.disabled) {
-    return '';
-  }
-  if (props.readOnly) {
-    if (props.type === 'error') {
-      return props.theme.themeProp('background', '#7f1b1b', '#FBEAE6');
-    } else if (props.type === 'warning') {
-      return props.theme.themeProp('background', '#634E01', '#FFFDE8');
-    }
-    return '';
+        /* Text color for edit mode */
+        ${props.$type === 'error' && props.theme.themeProp('color', 'white', 'black')}
+        ${props.$type === 'warning' && props.theme.themeProp('color', 'white', 'black')}
+      `}
+
+    ${props => props.$noBorder && props.$edit && css`
+        ${props.theme.themeProp('border-color', '#27272A', 'rgba(244,244,245, 0.3)')}
+      `}
   }
-  if (props.type === 'error') {
+
+  /* No border variations */
+  ${props => props.$noBorder && !props.$type && css`
+      ${props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
+    `}
+
+  ${props => props.$noBorder && props.$type === 'warning' && css`
+      ${props.theme.themeProp('border-color', '#634E01', '#FFFDE8')}
+    `}
+
+  ${props => props.$noBorder && props.$type === 'error' && css`
+      ${props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')}
+    `}
+
+  /* Hover state */
+  &:hover:not(:focus):not([readonly]):not([disabled]) {
+    ${props => {
+  if (props.$type === 'error') {
     return props.theme.themeProp('background', '#901d1d', '#F7D5D0');
-  } else if (props.type === 'warning') {
+  }
+  if (props.$type === 'warning') {
     return props.theme.themeProp('background', '#806403', '#FFFEBF');
-  } else if (!props.disabled) {
-    return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
   }
-  return '';
+  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
 }}
 
     ${props => props.$edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'))}
 
-    ${props => props.$noBorder && !props.readOnly && props.type !== 'warning' && props.type !== 'error' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : ''}
+    ${props => props.$noBorder && props.$type !== 'warning' && props.$type !== 'error' && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'))}
 
     & + ${InputIconContainer} {
       opacity: 1;
-      ${props => props.type === 'success' && css`
+      ${props => props.$type === 'success' && css`
           opacity: 0;
         `}
     }
   }
 
-  &::placeholder {
-    ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))}
-
-    ${props => props.theme.themeProp('opacity', 0.6, 0.5)}
-
-      ${props => {
-  if (props.type === 'warning') {
-    return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
-  } else if (props.type === 'error') {
-    return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
-  }
-  return '';
-}}
-  }
-
-  &:hover::placeholder {
-    ${props => props.theme.themeProp('opacity', 0.6, 0.5)}
-
-    ${props => {
-  if (props.type === 'warning') {
-    return props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900'));
-  } else if (props.type === 'error') {
-    return props.theme.themeProp('color', props.theme.getColor('red-600'), props.theme.getColor('red-600'));
-  } else {
-    return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
-  }
-}}
-  }
-
-  &:focus::placeholder {
-    ${props => props.theme.themeProp('opacity', 0.6, 0.5)}
-
-    ${props => {
-  if (props.type === 'warning') {
-    return props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900'));
-  } else if (props.type === 'error') {
-    return props.theme.themeProp('color', props.theme.getColor('red-600'), props.theme.getColor('red-600'));
-  } else {
-    return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
-  }
-}}
-  }
-
-  &&:focus {
+  /* Focus state */
+  &:focus:not([readonly]):not([disabled]) {
     outline: none;
 
     ${props => {
-  if (props.readOnly) {
-    if (props.type === 'error') {
-      return props.theme.themeProp('background', '#7f1b1b', '#FBEAE6');
-    } else if (props.type === 'warning') {
-      return props.theme.themeProp('background', '#634E01', '#FFFDE8');
-    }
-    return '';
-  }
-  if (props.type === 'error') {
+  if (props.$type === 'error') {
     return css`
           ${props.theme.themeProp('border-color', '#D83018', '#D83018')}
           ${props.theme.themeProp('background', 'white', 'white')}
-        ${props.theme.themeProp('color', 'black', 'black')}
+          ${props.theme.themeProp('color', 'black', 'black')}
         `;
-  } else if (props.type === 'warning') {
+  }
+  if (props.$type === 'warning') {
     return css`
           ${props.theme.themeProp('border-color', '#F4E21E', '#F4E21E')}
           ${props.theme.themeProp('background', 'white', 'white')}
-        ${props.theme.themeProp('color', 'black', 'black')}
-        `;
-  } else {
-    return css`
-          ${props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-600'))}
-          ${props.theme.themeProp('background', 'transparent', props.theme.getColor('white'))}
+          ${props.theme.themeProp('color', 'black', 'black')}
         `;
   }
+  return css`
+        border-color: ${props.theme.getColor('gray-600')};
+        ${props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'))}
+      `;
 }}
   }
 
-  &&:not(:hover):not(:focus) {
-    ${props => {
-  if (props.$edit) {
-    if (props.type === 'error') {
-      return props.theme.themeProp('background', '#7f1b1b', '#FEE2E2');
-    } else if (props.type === 'warning') {
-      return props.theme.themeProp('background', '#634E01', '#FFFDE8');
-    } else {
-      return props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)');
-    }
-  }
-}}
+  /* Read-only state */
+  ${props => props.readOnly && css`
+      cursor: default;
+      border-color: transparent !important;
+      padding: 12px 10px;
+
+      &:hover {
+        ${props.$type === 'error' && props.theme.themeProp('background', '#7f1b1b', '#FBEAE6')}
+        ${props.$type === 'warning' && props.theme.themeProp('background', '#634E01', '#FFFDE8')}
+      }
+
+      &:focus {
+        ${props.$type === 'error' && props.theme.themeProp('background', '#7f1b1b', '#FBEAE6')}
+        ${props.$type === 'warning' && props.theme.themeProp('background', '#634E01', '#FFFDE8')}
+      }
+    `}
+
+  /* Disabled state */
+  ${props => props.disabled && css`
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    `}
+
+
+
+/* Placeholder styling - Default */
+&::placeholder {
+  ${props => props.theme.themeProp('opacity', '0.6', '0.7')}
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))}
+}
+
+/* Placeholder styling for edit mode - Dark theme */
+body.dark-theme & {
+  ${props => props.$edit && (props.$type === 'error' || props.$type === 'warning') && css`
+      &::placeholder {
+        color: white !important;
+        opacity: 0.8 !important;
+      }
+    `}
+}
+
+/* Placeholder styling for edit mode - Light theme */
+body:not(.dark-theme) & {
+  ${props => props.$edit && (props.$type === 'error' || props.$type === 'warning') && css`
+      &::placeholder {
+        color: black !important;
+        opacity: 0.7 !important;
+      }
+    `}
+}
+
+/* Placeholder on focus - MUST come after and have same specificity */
+body.dark-theme &:focus,
+body:not(.dark-theme) &:focus {
+  ${props => props.$type === 'error' || props.$type === 'warning' ? css`
+          &::placeholder {
+            color: ${props.theme.getColor('gray-700')} !important;
+            opacity: 0.6 !important;
+          }
+        ` : css`
+          &::placeholder {
+            color: ${props.theme.getColor('gray-300')};
+          }
+        `}
+}
 
-    ${props => props.$edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)')}
 
-    ${props => props.$noBorder && props.$edit && css`
-        ${props => props.theme.themeProp('border-color', '#27272A', 'rgba(244,244,245, 0.3)')}
-      `}
-  }
 `;
 const TextInputLabel = styled.label.withConfig({
   shouldForwardProp
@@ -324,13 +325,9 @@ const TextInputLabel = styled.label.withConfig({
   line-height: 1.2;
   font-size: 0.875rem;
   transition: all 150ms;
-  margin-botton: 50px;
-
+  margin-bottom: 50px;
   ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
-
-      ${props => props.theme.themeProp('opacity', 0.6, 0.5)}
-
-
+  ${props => props.theme.themeProp('opacity', 0.6, 0.5)}
   ${props => props.theme.themeProp('background', `linear-gradient(0deg, ${props.theme.getColor('gray-900')} calc(50% + 1px), transparent 50%)`, `linear-gradient(0deg, ${props.theme.getColor('white')} calc(50% + 1px), transparent 50%)`)}
 
   ${props => !props.$inputIsEmpty && css`
@@ -340,7 +337,6 @@ const TextInputLabel = styled.label.withConfig({
   ${props => props.$hasPlaceholder && css`
       ${activeLabel};
     `}
-  content: "";
 
   ${props => props.$hasIcon && css`
       left: 55px;
@@ -357,7 +353,9 @@ const TextInputFieldIcon = styled.div.withConfig({
   padding: 0 10px;
 
   svg {
-    width: 15px;
+    width: auto;
+    max-width: 18px;
+    height: auto;
     opacity: 0.6;
     transition: opacity 250ms;
   }
@@ -371,10 +369,13 @@ const TextInputFieldIconAlert = styled.div.withConfig({
   padding: 0 10px 0 30px;
   opacity: 0.6;
   transition: opacity 250ms;
-  ${props => props.type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402')}
+  ${props => props.$type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402')}
+  
   svg {
     margin-top: 12px;
-    width: 15px;
+    width: auto;
+    max-width: 18px;
+    height: auto;
   }
 `;
 const TextInput = styled.div.withConfig({
@@ -385,7 +386,6 @@ const TextInput = styled.div.withConfig({
 
   ${props => props.disabled && css`
       opacity: 0.5;
-
       > * {
         cursor: not-allowed;
       }
@@ -395,7 +395,6 @@ const TextInput = styled.div.withConfig({
     ${TextInputLabel} {
       ${activeLabel};
     }
-
     ${TextInputFieldIcon} {
       svg {
         opacity: 1;
@@ -405,7 +404,7 @@ const TextInput = styled.div.withConfig({
 
   ${TextInputField}:not(:placeholder-shown) + ${TextInputLabel} {
     ${activeLabel};
-    ${props => props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))}
+    ${props => props.$type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))}
   }
 `;
 const Description = styled.div.withConfig({
@@ -415,56 +414,16 @@ const Description = styled.div.withConfig({
   padding: 0 0.6875rem;
   font-size: 0.75rem;
   line-height: 1.333;
-
   ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))};
 
-  ${props => (props.type === 'warning-border' || props.type === 'warning') && css`
+  ${props => (props.$type === 'warning-border' || props.$type === 'warning') && css`
       ${props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500'))}
     `}
 
-  ${props => (props.type === 'error-border' || props.type === 'error') && css`
+  ${props => (props.$type === 'error-border' || props.$type === 'error') && css`
       ${props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))}
     `}
 `;
-const SuccessContainer = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  opacity: 1;
-  pointer-events: none;
-  opacity: ${props => props.$fadeIn ? 0 : 1};
-  animation: ${props => props.$fadeIn ? fadeOutCheck : fadeInCheck} 0.5s ease-in-out;
-  transition: opacity 0.5s ease-in-out;
-  position: absolute;
-  margin-top: -35px;
-  margin-left: 5px;
-  width: 15px;
-  height: 15px;
-  padding: 5px;
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'))}
-
-  > svg {
-    width: 15px;
-  }
-`;
-const SuccessContainerLabel = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  opacity: 1;
-  pointer-events: none;
-  opacity: ${props => props.$fadeIn ? 0 : 1};
-  animation: ${props => props.$fadeIn ? fadeOutCheck : fadeInCheck} 0.5s ease-in-out;
-  transition: opacity 0.5s ease-in-out;
-  margin-right: 5px;
-  margin-top: -7px;
-  width: 15px;
-  height: 15px;
-  padding: 5px;
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'))}
-
-  > svg {
-    width: 13px;
-  }
-`;
 
 export { Description, InputIconContainer, Label, SuccessContainer, SuccessContainerLabel, TextAreaContainter, TextInput, TextInputField, TextInputFieldIcon, TextInputFieldIconAlert, TextInputLabel };
 //# sourceMappingURL=TextArea.styled.js.map