From c4b381878b54f380a3cff38ff29c79fd36b0b1d9 Mon Sep 17 00:00:00 2001
From: javadbat <javadbat@gmail.com>
Date: Mon, 22 Jul 2024 20:36:14 +0330
Subject: [PATCH] update sample

---
 README.md                               | 12 ++----------
 docs/src/components/samples/Samples.tsx |  8 ++------
 lib/JBDateInput.tsx                     |  5 -----
 3 files changed, 4 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index 2586517..d58e69f 100644
--- a/README.md
+++ b/README.md
@@ -288,17 +288,9 @@ this list may be outdated so i suggest you to read [jb-date-input](https://githu
 ## add custom element in input box
 
 in jb-input you can put icon or any other custom html DOM in input box. to doing so you just have to place custom element in `JBDateInput` tag and add `slot="start-section"` or `slot="end-section"` to place it before or after input field.
-for better result i suggest you use `jb-date-input-inbox-element` tag but its optional and you can use your own custom tag too.
-`jb-date-input-inbox-element` will add some style to make sure your icon will place in center and will not overflow nad make your job easier if you want more controll you can skip it and use your own tag.
-example:
-
 ```jsx
 <JBDateInput>
-    <jb-date-input-inbox-element slot="end-section">
-        <div>after</div>
-    </jb-date-input-inbox-element>
-    <jb-date-input-inbox-element slot="start-section">
-        <div>before</div>
-    </jb-date-input-inbox-element>
+    <div slot="end-section">after</div>
+    <div slot="start-section">before</div>
 </JBDateInput>
 ```
\ No newline at end of file
diff --git a/docs/src/components/samples/Samples.tsx b/docs/src/components/samples/Samples.tsx
index 9bac470..856f674 100644
--- a/docs/src/components/samples/Samples.tsx
+++ b/docs/src/components/samples/Samples.tsx
@@ -62,12 +62,8 @@ function Samples() {
           </div>
         </JBDateInput>
         <JBDateInput label="with inner-box section">
-          <jb-date-input-inbox-element slot="end-section">
-            <div>a</div>
-          </jb-date-input-inbox-element>
-          <jb-date-input-inbox-element slot="start-section">
-            <div>b</div>
-          </jb-date-input-inbox-element>
+            <div slot="end-section">a</div>
+            <div slot="start-section">b</div>
         </JBDateInput>
         <JBDateInput label='with custom month name' jalaliMonthList={["حَمَل","ثَور","جَوزا","سَرَطان","اَسَد","سُنبُله","میزان","عَقرَب","قَوس","جَدْی","دَلو","حوت"]}></JBDateInput>
         <FormalTheme label="more formal look">{ }</FormalTheme>
diff --git a/lib/JBDateInput.tsx b/lib/JBDateInput.tsx
index 999a5a8..14a0c45 100644
--- a/lib/JBDateInput.tsx
+++ b/lib/JBDateInput.tsx
@@ -6,16 +6,11 @@ import { useEvent } from '../../../common/hooks/use-event';
 import { type ValidationValue } from 'jb-date-input/types';
 
 export { JBDateInputInputTypes, JBDateInputValueObject };
-
-type CustomEvents<K extends string> = { [key in K]: (event: CustomEvent) => void };
-
-type CustomElement<T, K extends string> = Partial<T & DOMAttributes<T> & { children: any } & CustomEvents<`on${K}`>>;
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {
       'jb-date-input': JBDateInputType;
-      'jb-date-input-inbox-element': CustomElement<JBDDateInputInboxElementWebComponent, 'Click'>;
     }
     interface JBDateInputType extends React.DetailedHTMLProps<React.HTMLAttributes<JBDateInputWebComponent>, JBDateInputWebComponent> {
       class?: string,