code7-leia 0.1.147 → 0.1.149

package/dist/components/Select/index.d.ts

@@ -8,5 +8,5 @@ interface SelectProps {
     onSelect: (value: string) => void;
     placeholder?: string;
 }
-declare const Select: React.FC<SelectProps>;
-export default Select;
+declare const CustomSelect: React.FC<SelectProps>;
+export default CustomSelect;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.147",
+  "version": "0.1.149",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/FileArea/components/Search/styles.tsx

@@ -9,7 +9,7 @@ export const Input = styled.input`
   padding-left: 40px;
   border-radius: 5px;
   border: 1px solid #ccc;
-  height: 40px;
+  height: 45px;
   width: 100%;
 
   &:focus {
@@ -20,7 +20,7 @@ export const Input = styled.input`
 
 export const IconContainer = styled.div`
   position: absolute;
-  top: 10px;
+  top: 14px;
   left: 10px;
   pointer-events: none;
 `;

package/src/components/MultiSelect/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const MultiSelectWrapper = styled.div`
   width: 100%;
-  height: 40px;
+  height: 45px;
 `;
 
 export const SelectBox = styled.div`
@@ -11,7 +11,7 @@ export const SelectBox = styled.div`
   select {
     width: 100%;
     font-weight: bold;
-    height: 40px;
+    height: 45px;
     border-radius: 4px;
   }
 `;
@@ -44,7 +44,7 @@ export const Checkboxes = styled.div`
   z-index: 10;
 
   label {
-    padding: 10px 0;
+    padding: 10px 5px;
   }
 `;
 

package/src/components/Select/index.tsx

@@ -12,29 +12,37 @@ interface SelectProps {
   placeholder?: string;
 }
 
-const Select: React.FC<SelectProps> = ({ options, onSelect, placeholder }) => {
+const CustomSelect: React.FC<SelectProps> = ({ options, onSelect, placeholder }) => {
+  const [isOpen, setIsOpen] = useState(false);
   const [selectedValue, setSelectedValue] = useState<string | number>('');
 
-  const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const selectedOption = event.target.value;
-    setSelectedValue(selectedOption);
-    onSelect(selectedOption);
+  const handleSelectOption = (value: string | number) => {
+    const selected = String(value); // Convertendo para string
+    setSelectedValue(selected);
+    onSelect(selected);
+    setIsOpen(false);
   };
 
   return (
     <S.Container>
-      <select value={selectedValue} onChange={handleSelectChange}>
-        <option value="" disabled hidden>
-          {placeholder}
-        </option>
-        {options.map(option => (
-          <option key={option.value} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
+      <div className="custom-select" onClick={() => setIsOpen(!isOpen)}>
+        <div className="selected-option">{selectedValue || placeholder}</div>
+        {isOpen && (
+          <div className="options">
+            {options.map(option => (
+              <div
+                key={option.value}
+                className="option"
+                onClick={() => handleSelectOption(option.value)}
+              >
+                {option.label}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
     </S.Container>
   );
 };
 
-export default Select;
+export default CustomSelect;

package/src/components/Select/styles.tsx

@@ -4,28 +4,41 @@ export const Container = styled.div`
   position: relative;
   width: 50%;
   margin-right: 5px;
-  select {
-    padding: 12px;
-    border-radius: 4px;
-    border: 1px solid #979AA5;
+
+  .custom-select {
+    position: relative;
     width: 100%;
-    height: 40px;
-    
-    &:focus {
-      outline: none;
-      box-shadow: 0 0 0 3px #6690ff;
-    }
+    cursor: pointer;
 
-    option {
-      background: white;
-      font-size: 14px;
-      color: #5a5d68;
+    .selected-option {
+      padding: 12px;
+      border-radius: 4px;
+      border: 1px solid #979AA5;
+      height: 45px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
     }
 
-    option:checked, option:hover {
-      background: #6690ff;
-      font-size: 14px;
-      color: white;
+    .options {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      width: 100%;
+      border: 1px solid #979AA5;
+      border-top: none;
+      border-radius: 0 0 4px 4px;
+      background-color: #fff;
+
+      .option {
+        padding: 12px;
+        cursor: pointer;
+        transition: background-color 0.3s;
+
+        &:hover {
+          background-color: #f0f0f0;
+        }
+      }
     }
   }
 `;

package/src/components/TestArea/components/InputTest/styles.tsx

@@ -12,7 +12,7 @@ export const StyledInput = styled.input`
   padding-right: 40px;
   border-radius: 5px;
   border: 1px solid #ccc;
-  height: 40px;
+  height: 45px;
   width: 100%;
 
   &:focus {
@@ -23,7 +23,7 @@ export const StyledInput = styled.input`
 
 export const RecordAudioButton = styled.div`
   position: absolute;
-  top: 10px;
+  top: 14px;
   right: 10px;
   cursor: pointer;
 `;

package/src/components/TestArea/styles.tsx

@@ -69,7 +69,7 @@ export const Inputs = styled.div`
     color: white;
     border-radius: 4px;
     width: 190px;
-    height: 40px;
+    height: 45px;
     display: flex;
     justify-content: space-between;
     align-items: center;