Trendyol · buseselvi · Dec 4, 2024 · Aug 22, 2024 · Aug 23, 2024 · Sep 2, 2024
diff --git a/commitlint.config.cjs b/commitlint.config.cjs
@@ -36,6 +36,7 @@ module.exports = {
         "calendar",
         "table",
         "split-button",
+        "datepicker",
       ],
     ],
   },

diff --git a/playground/template.html b/playground/template.html
@@ -1,37 +1,37 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Baklava Playground</title>
-    <link rel="stylesheet" href="./dist/themes/default.css" />
-    <script type="module" src="./dist/baklava.js"></script>
-    <script>
-      // Live reload
-      new EventSource("/esbuild").addEventListener("change", () => location.reload());
-    </script>
-    <style>
-      *:not(:defined) {
-        display: none;
-      }
+<head>
+  <meta charset="UTF-8" />
+  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+  <title>Baklava Playground</title>
+  <link href="./dist/themes/default.css" rel="stylesheet" />
+  <script src="./dist/baklava.js" type="module"></script>
+  <script>
+    // Live reload
+    new EventSource("/esbuild").addEventListener("change", () => location.reload());
+  </script>
+  <style>
+    *:not(:defined) {
+      display: none;
+    }
 
-      body {
-        font-family: var(--bl-font-family);
-      }
+    body {
+      font-family: var(--bl-font-family);
+    }
 
-      h1 {
-        font: var(--bl-font-display-1);
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Baklava Playground</h1>
+    h1 {
+      font: var(--bl-font-display-1);
+    }
+  </style>
+</head>
+<body>
+<h1>Baklava Playground</h1>
 
-    <p>
-      Copy this file as playground/index.html and try your work here by running
-      <code>npm run serve</code>.
-    </p>
+<p>
+  Copy this file as playground/index.html and try your work here by running
+  <code>npm run serve</code>.
+</p>
 
-    <bl-button>Baklava is ready</bl-button>
-  </body>
+<bl-button>Baklava is ready</bl-button>
+</body>
 </html>
diff --git a/src/baklava.ts b/src/baklava.ts
@@ -36,4 +36,5 @@ export { default as BlTableHeaderCell } from "./components/table/table-header-ce
 export { default as BlTableCell } from "./components/table/table-cell/bl-table-cell";
 export { default as BlSplitButton } from "./components/split-button/bl-split-button";
 export { default as BlCalendar } from "./components/calendar/bl-calendar";
+export { default as BlDatePicker } from "./components/datepicker/bl-datepicker";
 export { getIconPath, setIconPath } from "./utilities/asset-paths";
diff --git a/src/components/calendar/bl-calendar.css b/src/components/calendar/bl-calendar.css
@@ -19,7 +19,7 @@
   justify-content: space-between;
   width: 100%;
   align-items: center;
-  gap: 2px;
+  padding-bottom: 15px;
 }
 
 .arrow {

diff --git a/src/components/calendar/bl-calendar.stories.mdx b/src/components/calendar/bl-calendar.stories.mdx
@@ -82,7 +82,8 @@ You can select date range from calendar.
 You can set dates which you want to disable from calendar.
 
 <Canvas>
-  <Story name="Disabled Dates" args={{ type: 'single',disabledDates:`["${new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()+2)}"]` }}>
+  <Story name="Disabled Dates" args={{ type: 'single',
+    disabledDates:`["${new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()+2)}"]` }}>
     {Template.bind({})}
   </Story>
 </Canvas>