From df864b2216a7a97bc451d269990699061d5be3d3 Mon Sep 17 00:00:00 2001
From: Ajesh Sen Thapa <aj3sshh@gmail.com>
Date: Sat, 14 Jun 2025 09:27:49 +0545
Subject: [PATCH] feat: add styles to nepali date input

---
 src/App.tsx                                      |  9 ++++++++-
 .../NepaliDateInput/NepaliDateInput.module.scss  |  6 ++++++
 .../core/NepaliDateInput/NepaliDateInput.tsx     | 16 ++++++++++++----
 .../core/PickerInput/PickerInput.module.scss     |  6 ------
 src/components/core/PickerInput/PickerInput.tsx  | 16 ----------------
 src/components/core/PickerInput/index.ts         |  1 -
 src/index.css                                    |  2 +-
 7 files changed, 27 insertions(+), 29 deletions(-)
 delete mode 100644 src/components/core/PickerInput/PickerInput.module.scss
 delete mode 100644 src/components/core/PickerInput/PickerInput.tsx
 delete mode 100644 src/components/core/PickerInput/index.ts

diff --git a/src/App.tsx b/src/App.tsx
index 3af3e3b..5270628 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -32,10 +32,17 @@ function App() {
               <input
                 name="date3"
                 placeholder="Custom Input"
-                style={{ height: 32, width: '100%' }}
+                className="customClassName"
+                style={{
+                  height: 40,
+                  width: '100%',
+                  padding: '4px',
+                  fontSize: '18px',
+                }}
               />
             }
           />
+          <hr />
           <button type="submit">Submit</button>
         </form>
       </div>
diff --git a/src/components/core/NepaliDateInput/NepaliDateInput.module.scss b/src/components/core/NepaliDateInput/NepaliDateInput.module.scss
index ae3a63f..6eabb1f 100644
--- a/src/components/core/NepaliDateInput/NepaliDateInput.module.scss
+++ b/src/components/core/NepaliDateInput/NepaliDateInput.module.scss
@@ -1,5 +1,11 @@
 .nepaliDateInput {
   width: 100%;
+  padding: 4px 8px;
+  line-height: 22px;
+  border-radius: 5px;
+  border-width: 1px;
+  border-style: solid;
+  outline: 0;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
diff --git a/src/components/core/NepaliDateInput/NepaliDateInput.tsx b/src/components/core/NepaliDateInput/NepaliDateInput.tsx
index 497bf53..8f636ea 100644
--- a/src/components/core/NepaliDateInput/NepaliDateInput.tsx
+++ b/src/components/core/NepaliDateInput/NepaliDateInput.tsx
@@ -25,7 +25,7 @@ const NepaliDateInput: React.FC<INepaliDateInputProps> = ({
 
   const handleBlur = () => onComplete?.()
 
-  const inputProps = {
+  const defaultInputProps = {
     ...rest,
     value,
     onChange,
@@ -34,17 +34,25 @@ const NepaliDateInput: React.FC<INepaliDateInputProps> = ({
     onBlur: handleBlur,
     className: classNames(
       'ndt-date-input',
-      styles.nepaliDateInput,
       hasError && styles.nepaliDateInputError,
       className
     ),
   }
 
   if (inputElement) {
-    return cloneElement(inputElement, inputProps)
+    return cloneElement(inputElement, defaultInputProps)
   }
 
-  return <input type="text" {...inputProps} />
+  const nepaliDateInputProps = {
+    ...defaultInputProps,
+    className: classNames(
+      'ndt-date-input',
+      hasError && styles.nepaliDateInputError,
+      className,
+      styles.nepaliDateInput
+    ),
+  }
+  return <input type="text" {...nepaliDateInputProps} />
 }
 
 export default NepaliDateInput
diff --git a/src/components/core/PickerInput/PickerInput.module.scss b/src/components/core/PickerInput/PickerInput.module.scss
deleted file mode 100644
index d9a0af1..0000000
--- a/src/components/core/PickerInput/PickerInput.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.pickerInput {
-  width: 100%;
-  box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-}
diff --git a/src/components/core/PickerInput/PickerInput.tsx b/src/components/core/PickerInput/PickerInput.tsx
deleted file mode 100644
index ecd1149..0000000
--- a/src/components/core/PickerInput/PickerInput.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-type PickerInputProps = React.InputHTMLAttributes<HTMLInputElement>
-
-import classNames from '../../../utils/classNames'
-import styles from './PickerInput.module.scss'
-
-const PickerInput: React.FC<PickerInputProps> = ({ className, ...props }) => {
-  return (
-    <input
-      className={classNames('ndt-picker-input', styles.pickerInput, className)}
-      type="text"
-      {...props}
-    />
-  )
-}
-
-export default PickerInput
diff --git a/src/components/core/PickerInput/index.ts b/src/components/core/PickerInput/index.ts
deleted file mode 100644
index b543a5e..0000000
--- a/src/components/core/PickerInput/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './PickerInput'
diff --git a/src/index.css b/src/index.css
index 6119ad9..e8d4532 100644
--- a/src/index.css
+++ b/src/index.css
@@ -42,7 +42,7 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
+  background-color: rgba(0, 0, 0, 0.5);
   cursor: pointer;
   transition: border-color 0.25s;
 }