From d930ad1bb9042249c25c24dad07835a327aee05f Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Wed, 7 Jan 2026 12:27:51 +0530
Subject: [PATCH 1/2] wip

---
 client.d.ts                                   |   5 -
 config/vite.js                                |   2 +-
 lib/components/SInputDate.vue                 | 156 ++++--------------
 lib/styles/bootstrap.css                      |   1 -
 package.json                                  |   3 +-
 pnpm-lock.yaml                                |  65 +-------
 .../SInputDate.01_Playground.story.vue        |  30 +++-
 7 files changed, 63 insertions(+), 199 deletions(-)

diff --git a/client.d.ts b/client.d.ts
index 8cb20b3fd..a4565a00c 100644
--- a/client.d.ts
+++ b/client.d.ts
@@ -3,11 +3,6 @@
 
 // this file contains public types which are exposed to external modules
 
-declare module 'v-calendar' {
-  export * from 'v-calendar/dist/types/src/index.d.ts'
-  export { default } from 'v-calendar/dist/types/src/index.d.ts'
-}
-
 interface NumberConstructor {
   isFinite(value: unknown): value is number
   isInteger(value: unknown): value is number
diff --git a/config/vite.js b/config/vite.js
index 0afe037f7..a3a1158d1 100644
--- a/config/vite.js
+++ b/config/vite.js
@@ -56,11 +56,11 @@ export const baseConfig = {
       'html2canvas',
       'lodash-es',
       'markdown-it',
+      'maska',
       'normalize.css',
       'ofetch',
       'pinia',
       'qs',
-      'v-calendar',
       'vue',
       'vue-router'
     ]
diff --git a/lib/components/SInputDate.vue b/lib/components/SInputDate.vue
index 2818c7163..93942103b 100644
--- a/lib/components/SInputDate.vue
+++ b/lib/components/SInputDate.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { DatePicker } from 'v-calendar'
+import { type MaskaDetail } from 'maska'
+import { vMaska } from 'maska/vue'
 import { type Component, computed } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import { type Day, day } from '../support/Day'
-import SInputBase, { type Color, type Size } from './SInputBase.vue'
+import SInputText, { type Color, type Size } from './SInputText.vue'
 
 export type { Color, Size }
 
@@ -30,26 +31,25 @@ const emit = defineEmits<{
 }>()
 
 const classes = computed(() => [
-  props.size ?? 'small'
+  props.block && 'block'
 ])
 
 const value = computed(() => {
   return props.modelValue ? day(props.modelValue).format('YYYY-MM-DD') : null
 })
 
-function emitInput(date?: string) {
-  emit('update:model-value', date ? day(date) : null)
-}
-
-function onBlur() {
-  setTimeout(() => {
-    props.validation && props.validation.$touch()
-  }, 100)
+function onMaska(detail: MaskaDetail): void {
+  if (!detail.unmasked) {
+    emit('update:model-value', null)
+  } else if (detail.completed) {
+    emit('update:model-value', day(detail.masked))
+  }
 }
 </script>
 
 <template>
-  <SInputBase
+  <SInputText
+    v-maska="{ mask: '####-##-##', eager: true, onMaska }"
     class="SInputDate"
     :class="classes"
     :size
@@ -58,136 +58,36 @@ function onBlur() {
     :note
     :info
     :help
+    placeholder="YYYY-MM-DD"
     :check-icon
     :check-text
     :check-color
-    :hide-error
+    :disabled
+    :tabindex
+    :model-value="value"
     :validation
+    :hide-error
   >
-    <div class="container">
-      <DatePicker
-        v-slot="{ inputValue, inputEvents }"
-        color="blue"
-        is-dark
-        :masks="{ input: 'YYYY-MM-DD' }"
-        :model-config="{ type: 'string', mask: 'YYYY-MM-DD' }"
-        :popover="{ placement: 'bottom', visibility: 'click' }"
-        :model-value="value"
-        @update:model-value="emitInput"
-      >
-        <input
-          :id="name"
-          class="input"
-          :class="{ block, disabled }"
-          type="text"
-          placeholder="YYYY-MM-DD"
-          autocomplete="off"
-          :value="inputValue"
-          :disabled
-          :tabindex
-          v-on="disabled ? {} : inputEvents"
-          @blur="onBlur"
-        >
-      </DatePicker>
-    </div>
     <template v-if="$slots.info" #info><slot name="info" /></template>
-  </SInputBase>
+  </SInputText>
 </template>
 
 <style lang="postcss" scoped>
-.SInputDate.sm,
-.SInputDate.mini {
-  .input {
-    padding: 3px 8px;
-    max-width: 114px;
-    height: 32px;
-    line-height: 24px;
-    font-size: var(--input-font-size, var(--input-mini-font-size));
-  }
-
-  .input.block {
-    max-width: 100%;
-  }
+.SInputDate.sm :deep(.box),
+.SInputDate.mini :deep(.box) {
+  max-width: 114px;
 }
 
-.SInputDate.md {
-  .input {
-    padding: 6px 10px;
-    max-width: 120px;
-    height: 36px;
-    line-height: 24px;
-    font-size: var(--input-font-size, var(--input-small-font-size));
-  }
-
-  .input.block {
-    max-width: 100%;
-  }
+.SInputDate.md :deep(.box) {
+  max-width: 120px;
 }
 
-.SInputDate.small {
-  .input {
-    padding: 5px 12px;
-    max-width: 136px;
-    height: 40px;
-    line-height: 24px;
-    font-size: var(--input-font-size, 14px);
-  }
-
-  .input.block {
-    max-width: 100%;
-  }
+.SInputDate.small :deep(.box),
+.SInputDate.medium :deep(.box) {
+  max-width: 136px;
 }
 
-.SInputDate.medium {
-  .input {
-    padding: 11px 12px;
-    max-width: 136px;
-    height: 48px;
-    line-height: 24px;
-    font-size: var(--input-font-size, var(--input-medium-font-size));
-  }
-
-  .input.block {
-    max-width: 100%;
-  }
-}
-
-.SInputDate.has-error {
-  .input {
-    border-color: var(--input-error-border-color);
-
-    &:focus {
-      border-color: var(--input-error-border-color);
-    }
-  }
-}
-
-.input {
-  display: block;
-  border: 1px solid var(--input-border-color);
-  border-radius: 6px;
-  width: 100%;
-  font-weight: 400;
-  font-feature-settings: 'tnum';
-  background-color: var(--input-bg-color);
-  transition: border-color 0.25s, background-color 0.25s;
-
-  &::placeholder {
-    color: var(--input-placeholder-color);
-  }
-
-  &:hover {
-    border-color: var(--input-hover-border-color);
-  }
-
-  &:focus {
-    border-color: var(--input-focus-border-color);
-  }
-
-  &.disabled {
-    border-color: var(--input-disabled-border-color);
-    background-color: var(--input-disabled-bg-color);
-    cursor: not-allowed;
-  }
+.SInputDate.block :deep(.box) {
+  max-width: 100%;
 }
 </style>
diff --git a/lib/styles/bootstrap.css b/lib/styles/bootstrap.css
index 6d1450aec..2eadfcbb9 100644
--- a/lib/styles/bootstrap.css
+++ b/lib/styles/bootstrap.css
@@ -1,5 +1,4 @@
 @import "normalize.css";
-@import "v-calendar/dist/style.css";
 @import "./variables-deprecated.css";
 @import "./variables.css";
 @import "./base.css";
diff --git a/package.json b/package.json
index b1aa3bb2b..412a09b26 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,6 @@
     "pinia": "^3.0.4",
     "postcss": "^8.5.6",
     "postcss-nested": "^7.0.2",
-    "v-calendar": "3.0.1",
     "vue": "^3.5.26",
     "vue-router": "^4.6.4"
   },
@@ -80,6 +79,7 @@
     "file-saver": "^2.0.5",
     "html2canvas": "^1.4.1",
     "magic-string": "^0.30.21",
+    "maska": "^3.2.0",
     "ofetch": "^1.5.1",
     "qs": "^6.14.1",
     "unplugin-icons": "^22.5.0"
@@ -117,7 +117,6 @@
     "punycode": "^2.3.1",
     "release-it": "^19.2.3",
     "typescript": "~5.9.3",
-    "v-calendar": "3.0.1",
     "vite": "^6.4.1",
     "vitepress": "^2.0.0-alpha.15",
     "vitest": "^3.2.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8314de1f7..57a37b1ed 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -51,6 +51,9 @@ importers:
       magic-string:
         specifier: ^0.30.21
         version: 0.30.21
+      maska:
+        specifier: ^3.2.0
+        version: 3.2.0
       ofetch:
         specifier: ^1.5.1
         version: 1.5.1
@@ -157,9 +160,6 @@ importers:
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
-      v-calendar:
-        specifier: 3.0.1
-        version: 3.0.1(@popperjs/core@2.11.8)(vue@3.5.26(typescript@5.9.3))
       vite:
         specifier: 6.4.1
         version: 6.4.1(@types/node@25.0.3)(jiti@2.6.1)(yaml@2.8.2)
@@ -260,10 +260,6 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/runtime@7.28.4':
-    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/types@7.28.5':
     resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
     engines: {node: '>=6.9.0'}
@@ -1265,9 +1261,6 @@ packages:
   '@types/qs@6.14.0':
     resolution: {integrity: sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==}
 
-  '@types/resize-observer-browser@0.1.11':
-    resolution: {integrity: sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ==}
-
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
@@ -2054,15 +2047,6 @@ packages:
     resolution: {integrity: sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==}
     engines: {node: '>=12'}
 
-  date-fns-tz@1.3.8:
-    resolution: {integrity: sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==}
-    peerDependencies:
-      date-fns: '>=2.0.0'
-
-  date-fns@2.30.0:
-    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
-    engines: {node: '>=0.11'}
-
   dayjs@1.11.19:
     resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==}
 
@@ -3081,6 +3065,9 @@ packages:
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
+  maska@3.2.0:
+    resolution: {integrity: sha512-zSmSgs5/q9vMSmrdZT3rKOv9uLznNWR/niuuAdBZDTvB3SMKOX9vhMtDijFyExz+B4UClu2rvksylUh/ea1bLA==}
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -4130,12 +4117,6 @@ packages:
   utrie@1.0.2:
     resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
 
-  v-calendar@3.0.1:
-    resolution: {integrity: sha512-basXEXcmBsxHyxqjj/82vjgz5vbIMREiiUC2VOVh0pHCDXEF1birPUZD12lk8u3+5R+909WUnxu7bt0DFxCOLw==}
-    peerDependencies:
-      '@popperjs/core': ^2.0.0
-      vue: ^3.2.0
-
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
 
@@ -4266,11 +4247,6 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
-  vue-screen-utils@1.0.0-beta.13:
-    resolution: {integrity: sha512-EJ/8TANKhFj+LefDuOvZykwMr3rrLFPLNb++lNBqPOpVigT2ActRg6icH9RFQVm4nHwlHIHSGm5OY/Clar9yIg==}
-    peerDependencies:
-      vue: ^3.2.0
-
   vue-tsc@3.2.2:
     resolution: {integrity: sha512-r9YSia/VgGwmbbfC06hDdAatH634XJ9nVl6Zrnz1iK4ucp8Wu78kawplXnIDa3MSu1XdQQePTHLXYwPDWn+nyQ==}
     hasBin: true
@@ -4471,8 +4447,6 @@ snapshots:
     dependencies:
       '@babel/types': 7.28.5
 
-  '@babel/runtime@7.28.4': {}
-
   '@babel/types@7.28.5':
     dependencies:
       '@babel/helper-string-parser': 7.27.1
@@ -5489,8 +5463,6 @@ snapshots:
 
   '@types/qs@6.14.0': {}
 
-  '@types/resize-observer-browser@0.1.11': {}
-
   '@types/trusted-types@2.0.7':
     optional: true
 
@@ -6369,14 +6341,6 @@ snapshots:
       whatwg-mimetype: 3.0.0
       whatwg-url: 11.0.0
 
-  date-fns-tz@1.3.8(date-fns@2.30.0):
-    dependencies:
-      date-fns: 2.30.0
-
-  date-fns@2.30.0:
-    dependencies:
-      '@babel/runtime': 7.28.4
-
   dayjs@1.11.19: {}
 
   debug@2.6.9:
@@ -7547,6 +7511,8 @@ snapshots:
 
   markdown-table@3.0.4: {}
 
+  maska@3.2.0: {}
+
   math-intrinsics@1.1.0: {}
 
   mdast-util-find-and-replace@3.0.2:
@@ -8785,17 +8751,6 @@ snapshots:
     dependencies:
       base64-arraybuffer: 1.0.2
 
-  v-calendar@3.0.1(@popperjs/core@2.11.8)(vue@3.5.26(typescript@5.9.3)):
-    dependencies:
-      '@popperjs/core': 2.11.8
-      '@types/lodash': 4.17.21
-      '@types/resize-observer-browser': 0.1.11
-      date-fns: 2.30.0
-      date-fns-tz: 1.3.8(date-fns@2.30.0)
-      lodash: 4.17.21
-      vue: 3.5.26(typescript@5.9.3)
-      vue-screen-utils: 1.0.0-beta.13(vue@3.5.26(typescript@5.9.3))
-
   validate-npm-package-license@3.0.4:
     dependencies:
       spdx-correct: 3.2.0
@@ -9000,10 +8955,6 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.26(typescript@5.9.3)
 
-  vue-screen-utils@1.0.0-beta.13(vue@3.5.26(typescript@5.9.3)):
-    dependencies:
-      vue: 3.5.26(typescript@5.9.3)
-
   vue-tsc@3.2.2(typescript@5.9.3):
     dependencies:
       '@volar/typescript': 2.4.27
diff --git a/stories/components/SInputDate.01_Playground.story.vue b/stories/components/SInputDate.01_Playground.story.vue
index 0c191ae3b..fa1801af5 100644
--- a/stories/components/SInputDate.01_Playground.story.vue
+++ b/stories/components/SInputDate.01_Playground.story.vue
@@ -1,16 +1,29 @@
 <script setup lang="ts">
 import SInputDate from 'sefirot/components/SInputDate.vue'
-import { ref } from 'vue'
+import { useData } from 'sefirot/composables/Data'
+import { useValidation } from 'sefirot/composables/Validation'
+import { type Day, day } from 'sefirot/support/Day'
+import { afterOrEqual, beforeOrEqual } from 'sefirot/validation/rules'
 
 const title = 'Components / SInputDate / 01. Playground'
 
-const value = ref(null)
-
 function initState() {
   return {
-    size: 'md'
+    size: 'md',
+    block: false
   }
 }
+
+const { data } = useData({
+  date: null as Day | null
+})
+
+const { validation } = useValidation(data, {
+  date: {
+    afterOrEqual: afterOrEqual(day('2020-01-01')),
+    beforeOrEqual: beforeOrEqual(day('2030-12-31'))
+  }
+})
 </script>
 
 <template>
@@ -29,14 +42,21 @@ function initState() {
         title="tabindex"
         :options="[0, -1]"
       />
+      <HstCheckbox
+        v-model="state.block"
+        title="block"
+      />
     </template>
 
     <template #default="{ state }">
       <Board :title>
         <SInputDate
-          v-model="value"
+          v-model="data.date"
+          :validation="validation.date"
           label="Label"
+          name="date"
           :size="state.size"
+          :block="state.block"
           :tabindex="state.tabindex"
         />
       </Board>

From a5a3e209bac7efd1e47801e46a3861375aac7f08 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Tue, 3 Feb 2026 23:41:45 +0530
Subject: [PATCH 2/2] update

---
 eslint.config.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/eslint.config.js b/eslint.config.js
index 549c45337..86ec4b9fe 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -14,7 +14,6 @@ export default defineConfig([
       'no-console': 'warn',
       'no-new-wrappers': 'off', // unicorn/new-for-builtins already handles this
       'unused-imports/no-unused-imports': 'warn',
-      'unused-imports/no-unused-vars': 'warn',
       'vue/component-name-in-template-casing': [
         'error',
         'PascalCase',