From ff1f89e8a5ceb31e0f122a96f03c41f8c59fab46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ahmet=20Sefa=20Ar=C5=9Fiv?= <ahmetarsivpm@gmail.com>
Date: Sun, 7 Apr 2024 21:45:26 +0300
Subject: [PATCH 1/2] Bug fixed & UI upgrade

---
 src/drawer/Drawer.tsx    | 18 ++++++++++++++++--
 src/input/Input.tsx      | 12 ++++++++----
 src/select/Select.tsx    |  4 ++++
 stories/Input.stories.ts | 12 ++++++++++++
 4 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/src/drawer/Drawer.tsx b/src/drawer/Drawer.tsx
index 9167068..8f960ee 100644
--- a/src/drawer/Drawer.tsx
+++ b/src/drawer/Drawer.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 
 interface IDrawerProps {
@@ -8,6 +8,20 @@ interface IDrawerProps {
 }
 
 export default function Modal({ isOpen, onClose, children }: IDrawerProps) {
+    useEffect(() => {
+        const handleKeyPress = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyPress);
+
+        return () => {
+            window.removeEventListener('keydown', handleKeyPress);
+        };
+    }, []);
+
     return (
         <AnimatePresence>
             {isOpen && (
@@ -27,7 +41,7 @@ export default function Modal({ isOpen, onClose, children }: IDrawerProps) {
                             damping: 30,
                             delay: 0.1,
                         }}
-                        className="bg-white w-80 h-full shadow-xl overflow-y-auto">
+                        className="bg-white dark:bg-black border-l border-brand w-80 h-full shadow-xl overflow-y-auto">
                         <div className="px-4 py-6">{children}</div>
                     </motion.div>
                     <motion.button
diff --git a/src/input/Input.tsx b/src/input/Input.tsx
index 09c9328..f7a16aa 100644
--- a/src/input/Input.tsx
+++ b/src/input/Input.tsx
@@ -22,7 +22,9 @@ type InputType =
     | 'file'
     | 'search'
     | 'checkbox'
-    | 'range';
+    | 'range'
+    | 'hidden'
+    | 'color';
 
 interface IInputProps extends InputHTMLAttributes<HTMLInputElement> {
     type: InputType;
@@ -69,9 +71,11 @@ const Input = forwardRef(
                     <input
                         ref={ref}
                         type={
-                            type === 'password' && !showPassword
-                                ? 'password'
-                                : 'text'
+                            type !== 'password'
+                                ? type
+                                : !showPassword
+                                  ? 'password'
+                                  : 'text'
                         }
                         value={value}
                         onChange={onChange}
diff --git a/src/select/Select.tsx b/src/select/Select.tsx
index e1f8743..999d967 100644
--- a/src/select/Select.tsx
+++ b/src/select/Select.tsx
@@ -1,4 +1,5 @@
 import React, { forwardRef, Ref, SelectHTMLAttributes } from 'react';
+import Label from '../label/Label';
 
 interface SelectOption {
     label: string;
@@ -13,6 +14,7 @@ interface ISelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
     required?: boolean;
     disabled?: boolean;
     messages?: string | string[];
+    label?: string;
 }
 
 const Select = forwardRef(
@@ -25,11 +27,13 @@ const Select = forwardRef(
             required,
             disabled,
             messages = [],
+            label,
             ...props
         }: ISelectProps,
         ref: Ref<HTMLSelectElement>,
     ) => (
         <div>
+            {label && <Label>{label}</Label>}
             <select
                 ref={ref}
                 value={value}
diff --git a/stories/Input.stories.ts b/stories/Input.stories.ts
index 6a4ad2e..c221938 100644
--- a/stories/Input.stories.ts
+++ b/stories/Input.stories.ts
@@ -110,3 +110,15 @@ export const RangeInput: Story = {
         type: 'range',
     },
 };
+
+export const HiddenInput: Story = {
+    args: {
+        type: 'hidden',
+    },
+};
+
+export const ColorInput: Story = {
+    args: {
+        type: 'color',
+    },
+};

From 7579c595c506d928cded2e4c18950e88e63cd640 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ahmet=20Sefa=20Ar=C5=9Fiv?=
 <101526596+ahmetarsiv@users.noreply.github.com>
Date: Sun, 7 Apr 2024 21:46:50 +0300
Subject: [PATCH 2/2] Update package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3bc56a7..ba72066 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@codenteq/interfeys",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "Codenteq Interfeys Design System",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",