stacksjs · renovate · Apr 25, 2025 · Apr 25, 2025
diff --git a/.env b/.env
@@ -0,0 +1 @@
+VITE_GOOGLE_PLACES_API_KEY=AIzaSyCtD4sE0Pvyy6Ey1GSAneSFQIVJA0aBjxE
diff --git a/bun.lock b/bun.lock
@@ -18,25 +18,25 @@
       "version": "0.0.0",
       "devDependencies": {
         "bun-plugin-dtsx": "^0.21.9",
-        "bunfig": "^0.8.2",
+        "bunfig": "^0.8.3",
         "lint-staged": "^15.5.1",
-        "simple-git-hooks": "^2.12.1",
+        "simple-git-hooks": "^2.13.0",
         "typescript": "^5.8.3",
       },
     },
     "packages/vue": {
       "name": "ts-inputs-vue",
       "version": "0.0.1",
       "devDependencies": {
-        "@microsoft/api-extractor": "^7.52.4",
+        "@microsoft/api-extractor": "^7.52.5",
         "@stacksjs/docs": "^0.70.23",
         "@types/google.maps": "^3.58.1",
         "@vue/tsconfig": "^0.7.0",
         "bumpp": "^10.1.0",
         "bun-plugin-dtsx": "^0.21.9",
         "changelogen": "^0.6.1",
         "clean-css": "^5.3.3",
-        "date-fns": "^3.3.1",
+        "date-fns": "^3.6.0",
       },
     },
   },
@@ -542,8 +542,6 @@
 
     "@types/debug": ["@types/debug@4.1.12", "", { "dependencies": { "@types/ms": "*" } }, "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ=="],
 
-    "@types/doctrine": ["@types/doctrine@0.0.9", "", {}, "sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA=="],
-
     "@types/eslint": ["@types/eslint@9.6.1", "", { "dependencies": { "@types/estree": "*", "@types/json-schema": "*" } }, "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag=="],
 
     "@types/estree": ["@types/estree@1.0.7", "", {}, "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ=="],
@@ -564,7 +562,7 @@
 
     "@types/ms": ["@types/ms@2.1.0", "", {}, "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA=="],
 
-    "@types/node": ["@types/node@22.14.1", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-u0HuPQwe/dHrItgHHpmw3N2fYCR6x4ivMNbPHRkBVP4CvN+kiRrKHWk3i8tXiO/joPwXLMYvF9TTF0eqgHIuOw=="],
+    "@types/node": ["@types/node@22.15.2", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-uKXqKN9beGoMdBfcaTY1ecwz6ctxuJAcUlwE55938g0ZJ8lRxwAZqRz2AJ4pzpt5dHdTPMB863UZ0ESiFUcP7A=="],
 
     "@types/normalize-package-data": ["@types/normalize-package-data@2.4.4", "", {}, "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA=="],
 
@@ -800,7 +798,7 @@
 
     "bundle-name": ["bundle-name@4.1.0", "", { "dependencies": { "run-applescript": "^7.0.0" } }, "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q=="],
 
-    "bunfig": ["bunfig@0.8.2", "", { "bin": { "bunfig": "bin/cli.js" } }, "sha512-fJxLZ8pI2J0LQuYFAvpgfvLcQGCHZDcr2tRCafUQpgICwbagkBJby9EGKwKGicUaM8cYR42Rz41o/57OefQLEw=="],
+    "bunfig": ["bunfig@0.8.3", "", { "bin": { "bunfig": "bin/cli.js" } }, "sha512-v5dk6KdK1QpDAzgXlwcRVMz5MXBpGXPP4oODcMAP+WegYCQaO+TXF2Totan41gnGh9+JImzqe22axOBN4YJC5A=="],
 
     "c12": ["c12@3.0.3", "", { "dependencies": { "chokidar": "^4.0.3", "confbox": "^0.2.2", "defu": "^6.1.4", "dotenv": "^16.4.7", "exsolve": "^1.0.4", "giget": "^2.0.0", "jiti": "^2.4.2", "ohash": "^2.0.11", "pathe": "^2.0.3", "perfect-debounce": "^1.0.0", "pkg-types": "^2.1.0", "rc9": "^2.1.2" }, "peerDependencies": { "magicast": "^0.3.5" }, "optionalPeers": ["magicast"] }, "sha512-uC3MacKBb0Z15o5QWCHvHWj5Zv34pGQj9P+iXKSpTuSGFS0KKhUWf4t9AJ+gWjYOdmWCPEGpEzm8sS0iqbpo1w=="],
 
@@ -926,8 +924,6 @@
 
     "devlop": ["devlop@1.1.0", "", { "dependencies": { "dequal": "^2.0.0" } }, "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA=="],
 
-    "doctrine": ["doctrine@3.0.0", "", { "dependencies": { "esutils": "^2.0.2" } }, "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w=="],
-
     "dotenv": ["dotenv@16.5.0", "", {}, "sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg=="],
 
     "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
@@ -936,7 +932,7 @@
 
     "ejs": ["ejs@3.1.10", "", { "dependencies": { "jake": "^10.8.5" }, "bin": { "ejs": "bin/cli.js" } }, "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA=="],
 
-    "electron-to-chromium": ["electron-to-chromium@1.5.141", "", {}, "sha512-qS+qH9oqVYc1ooubTiB9l904WVyM6qNYxtOEEGReoZXw3xlqeYdFr5GclNzbkAufWgwWLEPoDi3d9MoRwwIjGw=="],
+    "electron-to-chromium": ["electron-to-chromium@1.5.142", "", {}, "sha512-Ah2HgkTu/9RhTDNThBtzu2Wirdy4DC9b0sMT1pUhbkZQ5U/iwmE+PHZX1MpjD5IkJCc2wSghgGG/B04szAx07w=="],
 
     "emoji-regex": ["emoji-regex@10.4.0", "", {}, "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw=="],
 
@@ -986,17 +982,17 @@
 
     "eslint-plugin-es-x": ["eslint-plugin-es-x@7.8.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.1.2", "@eslint-community/regexpp": "^4.11.0", "eslint-compat-utils": "^0.5.1" }, "peerDependencies": { "eslint": ">=8" } }, "sha512-7Ds8+wAAoV3T+LAKeu39Y5BzXCrGKrcISfgKEqTS4BDN8SFEDQd0S43jiQ8vIa3wUKD07qitZdfzlenSi8/0qQ=="],
 
-    "eslint-plugin-import-x": ["eslint-plugin-import-x@4.10.6", "", { "dependencies": { "@pkgr/core": "^0.2.4", "@types/doctrine": "^0.0.9", "@typescript-eslint/utils": "^8.30.1", "debug": "^4.4.0", "doctrine": "^3.0.0", "eslint-import-resolver-node": "^0.3.9", "get-tsconfig": "^4.10.0", "is-glob": "^4.0.3", "minimatch": "^9.0.3 || ^10.0.1", "semver": "^7.7.1", "stable-hash": "^0.0.5", "tslib": "^2.8.1", "unrs-resolver": "^1.6.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0" } }, "sha512-sWIaoezWK7kuPA7u29ULsO8WzlYYC8uivaipsazyHiZDykjNsuPtwRsYZIK2luqc5wppwXOop8iFdW7xffo/Xw=="],
+    "eslint-plugin-import-x": ["eslint-plugin-import-x@4.11.0", "", { "dependencies": { "@typescript-eslint/utils": "^8.31.0", "comment-parser": "^1.4.1", "debug": "^4.4.0", "eslint-import-resolver-node": "^0.3.9", "get-tsconfig": "^4.10.0", "is-glob": "^4.0.3", "minimatch": "^9.0.3 || ^10.0.1", "semver": "^7.7.1", "stable-hash": "^0.0.5", "tslib": "^2.8.1", "unrs-resolver": "^1.7.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0" } }, "sha512-NAaYY49342gj09QGvwnFFl5KcD5aLzjAz97Lo+upnN8MzjEGSIlmL5sxCYGqtIeMjw8fSRDFZIp2xjRLT+yl4Q=="],
 
-    "eslint-plugin-jsdoc": ["eslint-plugin-jsdoc@50.6.10", "", { "dependencies": { "@es-joy/jsdoccomment": "~0.49.0", "are-docs-informative": "^0.0.2", "comment-parser": "1.4.1", "debug": "^4.3.6", "escape-string-regexp": "^4.0.0", "espree": "^10.1.0", "esquery": "^1.6.0", "parse-imports-exports": "^0.2.4", "semver": "^7.6.3", "spdx-expression-parse": "^4.0.0" }, "peerDependencies": { "eslint": "^7.0.0 || ^8.0.0 || ^9.0.0" } }, "sha512-HJRMrRIXjWtDyU6yar8xvdKMc1waSAfE6vRjEWBpws6pYeoVyCFtQQneEBnQkHXOV60idH5ymo/bh1XNBOTQmA=="],
+    "eslint-plugin-jsdoc": ["eslint-plugin-jsdoc@50.6.11", "", { "dependencies": { "@es-joy/jsdoccomment": "~0.49.0", "are-docs-informative": "^0.0.2", "comment-parser": "1.4.1", "debug": "^4.3.6", "escape-string-regexp": "^4.0.0", "espree": "^10.1.0", "esquery": "^1.6.0", "parse-imports-exports": "^0.2.4", "semver": "^7.6.3", "spdx-expression-parse": "^4.0.0" }, "peerDependencies": { "eslint": "^7.0.0 || ^8.0.0 || ^9.0.0" } }, "sha512-k4+MnBCGR8cuIB5MZ++FGd4gbXxjob2rX1Nq0q3nWFF4xSGZENTgTLZSjb+u9B8SAnP6lpGV2FJrBjllV3pVSg=="],
 
     "eslint-plugin-jsonc": ["eslint-plugin-jsonc@2.20.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.5.1", "eslint-compat-utils": "^0.6.4", "eslint-json-compat-utils": "^0.2.1", "espree": "^9.6.1 || ^10.3.0", "graphemer": "^1.4.0", "jsonc-eslint-parser": "^2.4.0", "natural-compare": "^1.4.0", "synckit": "^0.6.2 || ^0.7.3 || ^0.10.3" }, "peerDependencies": { "eslint": ">=6.0.0" } }, "sha512-FRgCn9Hzk5eKboCbVMrr9QrhM0eO4G+WKH8IFXoaeqhM/2kuWzbStJn4kkr0VWL8J5H8RYZF+Aoam1vlBaZVkw=="],
 
     "eslint-plugin-n": ["eslint-plugin-n@17.17.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.5.0", "enhanced-resolve": "^5.17.1", "eslint-plugin-es-x": "^7.8.0", "get-tsconfig": "^4.8.1", "globals": "^15.11.0", "ignore": "^5.3.2", "minimatch": "^9.0.5", "semver": "^7.6.3" }, "peerDependencies": { "eslint": ">=8.23.0" } }, "sha512-2VvPK7Mo73z1rDFb6pTvkH6kFibAmnTubFq5l83vePxu0WiY1s0LOtj2WHb6Sa40R3w4mnh8GFYbHBQyMlotKw=="],
 
     "eslint-plugin-no-only-tests": ["eslint-plugin-no-only-tests@3.3.0", "", {}, "sha512-brcKcxGnISN2CcVhXJ/kEQlNa0MEfGRtwKtWA16SkqXHKitaKIMrfemJKLKX1YqDU5C/5JY3PvZXd5jEW04e0Q=="],
 
-    "eslint-plugin-perfectionist": ["eslint-plugin-perfectionist@4.12.2", "", { "dependencies": { "@typescript-eslint/types": "^8.31.0", "@typescript-eslint/utils": "^8.31.0", "natural-orderby": "^5.0.0" }, "peerDependencies": { "eslint": ">=8.45.0" } }, "sha512-OWh3y2c7oMNEbyk8BmcQgMil13FAMViQbycV04TNztf6YSheOtbagcpwJkc3aZt6lYDyL0zpY/aPjwi7fxT+5A=="],
+    "eslint-plugin-perfectionist": ["eslint-plugin-perfectionist@4.12.3", "", { "dependencies": { "@typescript-eslint/types": "^8.31.0", "@typescript-eslint/utils": "^8.31.0", "natural-orderby": "^5.0.0" }, "peerDependencies": { "eslint": ">=8.45.0" } }, "sha512-V0dmpq6fBbn0BYofHsiRuuY9wgkKMDkdruM0mIRBIJ8XZ8vEaTAZqFsywm40RuWNVnduWBt5HO1ZZ+flE2yqjg=="],
 
     "eslint-plugin-pnpm": ["eslint-plugin-pnpm@0.3.1", "", { "dependencies": { "find-up-simple": "^1.0.1", "jsonc-eslint-parser": "^2.4.0", "pathe": "^2.0.3", "pnpm-workspace-yaml": "0.3.1", "tinyglobby": "^0.2.12", "yaml-eslint-parser": "^1.3.0" }, "peerDependencies": { "eslint": "^9.0.0" } }, "sha512-vi5iHoELIAlBbX4AW8ZGzU3tUnfxuXhC/NKo3qRcI5o9igbz6zJUqSlQ03bPeMqWIGTPatZnbWsNR1RnlNERNQ=="],
 
@@ -1466,9 +1462,9 @@
 
     "onetime": ["onetime@6.0.0", "", { "dependencies": { "mimic-fn": "^4.0.0" } }, "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ=="],
 
-    "oniguruma-parser": ["oniguruma-parser@0.11.2", "", {}, "sha512-F7Ld4oDZJCI5/wCZ8AOffQbqjSzIRpKH7I/iuSs1SkhZeCj0wS6PMZ4W6VA16TWHrAo0Y9bBKEJOe7tvwcTXnw=="],
+    "oniguruma-parser": ["oniguruma-parser@0.12.0", "", {}, "sha512-fD9o5ebCmEAA9dLysajdQvuKzLL7cj+w7DQjuO3Cb6IwafENfx6iL+RGkmyW82pVRsvgzixsWinHvgxTMJvdIA=="],
 
-    "oniguruma-to-es": ["oniguruma-to-es@4.2.0", "", { "dependencies": { "emoji-regex-xs": "^1.0.0", "oniguruma-parser": "^0.11.0", "regex": "^6.0.1", "regex-recursion": "^6.0.2" } }, "sha512-MDPs6KSOLS0tKQ7joqg44dRIRZUyotfTy0r+7oEEs6VwWWP0+E2PPDYWMFN0aqOjRyWHBYq7RfKw9GQk2S2z5g=="],
+    "oniguruma-to-es": ["oniguruma-to-es@4.3.1", "", { "dependencies": { "oniguruma-parser": "^0.12.0", "regex": "^6.0.1", "regex-recursion": "^6.0.2" } }, "sha512-VtX1kepWO+7HG7IWV5v72JhiqofK7XsiHmtgnvurnNOTdIvE5mrdWYtsOrQyrXCv1L2Ckm08hywp+MFO7rC4Ug=="],
 
     "open": ["open@10.1.1", "", { "dependencies": { "default-browser": "^5.2.1", "define-lazy-prop": "^3.0.0", "is-inside-container": "^1.0.0", "is-wsl": "^3.1.0" } }, "sha512-zy1wx4+P3PfhXSEPJNtZmJXfhkkIaxU1VauWIrDZw1O7uJRDRJtKr9n3Ic4NgbA16KyOxOXO2ng9gYwCdXuSXA=="],
 

diff --git a/docs/.vitepress/components.d.ts b/docs/.vitepress/components.d.ts
@@ -17,6 +17,7 @@ declare module 'vue' {
     HomeSponsors: typeof import('./theme/components/HomeSponsors.vue')['default']
     HomeTeam: typeof import('./theme/components/HomeTeam.vue')['default']
     NumeralInputDemo: typeof import('./theme/components/NumeralInputDemo.vue')['default']
+    PlacesAutocompleteDemo: typeof import('./theme/components/PlacesAutocompleteDemo.vue')['default']
     TeamMember: typeof import('./theme/components/TeamMember.vue')['default']
     TimeInputDemo: typeof import('./theme/components/TimeInputDemo.vue')['default']
   }

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -80,7 +80,7 @@ const sidebar = [
           { text: 'DateTime Input', link: '/vue/datetime' },
           { text: 'Time Input', link: '/vue/time' },
           { text: 'Numeral Input', link: '/vue/numeral' },
-          { text: 'Google Places', link: '/vue/google-places' },
+          { text: 'Places Autocomplete', link: '/vue/places-autocomplete' },
         ],
       },
       {

diff --git a/docs/.vitepress/theme/components/CreditCardDemo.vue b/docs/.vitepress/theme/components/CreditCardDemo.vue
@@ -1,20 +1,128 @@
 <script setup lang="ts">
-import { BaseInput } from 'ts-inputs-vue'
-import { ref } from 'vue'
+import { CreditCardType } from 'ts-inputs'
+import { BaseInput, CreditCardInput } from 'ts-inputs-vue'
+import { computed, ref } from 'vue'
 
-const cardNumber = ref('')
+const baseInputCardNumber = ref('')
+const creditCardInputNumber = ref('')
+const cardType = ref<CreditCardType | null>(null)
 
-function handleCardTypeChange(type: UnifiedInputType) {
+function handleCardTypeChange(type: CreditCardType) {
+  cardType.value = type
   console.log('Card type:', type)
 }
+
+const cardIcon = computed(() => {
+  if (!cardType.value)
+    return null
+
+  const icons: Record<CreditCardType, string> = {
+    [CreditCardType.VISA]: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/visa/visa-original.svg',
+    [CreditCardType.MASTERCARD]: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mastercard/mastercard-original.svg',
+    [CreditCardType.AMEX]: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/americanexpress/americanexpress-original.svg',
+    [CreditCardType.DISCOVER]: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/discover/discover-original.svg',
+    [CreditCardType.DINERS]: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/dinersclub/dinersclub-original.svg',
+    [CreditCardType.JCB]: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/jcb/jcb-original.svg',
+    [CreditCardType.UATP]: '',
+    [CreditCardType.DANKORT]: '',
+    [CreditCardType.INSTAPAYMENT]: '',
+    [CreditCardType.JCB15]: '',
+    [CreditCardType.MAESTRO]: '',
+    [CreditCardType.MIR]: '',
+    [CreditCardType.UNIONPAY]: '',
+    [CreditCardType.GENERAL]: '',
+  }
+
+  return icons[cardType.value] || null
+})
+
+const cardTypeName = computed(() => {
+  if (!cardType.value)
+    return ''
+
+  return cardType.value.charAt(0).toUpperCase() + cardType.value.slice(1)
+})
 </script>
 
 <template>
-  <BaseInput
-    v-model="cardNumber"
-    type="credit-card"
-    class="block w-full  rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
-    placeholder="Enter card number"
-    @card-type-change="handleCardTypeChange"
-  />
+  <div class="demo-container">
+    <div class="demo-section">
+      <h3>Using BaseInput</h3>
+      <div class="input-wrapper">
+        <BaseInput
+          v-model="baseInputCardNumber"
+          type="credit-card"
+          class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
+          placeholder="Enter card number"
+          @card-type="handleCardTypeChange"
+        />
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>Using CreditCardInput</h3>
+      <div class="input-wrapper">
+        <CreditCardInput
+          v-model="creditCardInputNumber"
+          class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
+          placeholder="Enter card number"
+          @card-type="handleCardTypeChange"
+        />
+      </div>
+    </div>
+
+    <div v-if="cardType" class="card-info">
+      <img v-if="cardIcon" :src="cardIcon" :alt="cardTypeName" class="card-icon">
+      <span class="card-type">{{ cardTypeName }}</span>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.demo-container {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 1rem;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.demo-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.demo-section h3 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #374151;
+}
+
+.input-wrapper {
+  position: relative;
+}
+
+.card-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background-color: #f3f4f6;
+  border-radius: 0.375rem;
+  margin-top: 1rem;
+}
+
+.card-icon {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+.card-type {
+  font-size: 0.875rem;
+  color: #4b5563;
+  font-weight: 500;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/GooglePlacesInputDemo.vue b/docs/.vitepress/theme/components/GooglePlacesInputDemo.vue
diff --git a/docs/vue/credit-card.md b/docs/vue/credit-card.md
@@ -1,8 +1,33 @@
 # Credit Card Input
 
-A component for formatting and validating credit card numbers.
+A component for formatting and validating credit card numbers. You can use either the dedicated `CreditCardInput` component or the `BaseInput` component with `type="credit-card"`.
 
-## Usage
+## Usage with BaseInput
+
+```vue
+<script setup lang="ts">
+import { BaseInput } from 'ts-inputs'
+import type { CreditCardType } from 'ts-inputs'
+
+const cardNumber = ref('')
+
+function handleCardTypeChange(type: CreditCardType) {
+  console.log('Card type:', type)
+}
+</script>
+
+<template>
+  <BaseInput
+    v-model="cardNumber"
+    type="credit-card"
+    placeholder="Enter card number"
+    :credit-card-options="{ delimiter: ' ' }"
+    @card-type="handleCardTypeChange"
+  />
+</template>
+```
+
+## Usage with CreditCardInput
 
 ```vue
 <script setup lang="ts">
@@ -20,7 +45,7 @@ function handleCardTypeChange(type: CreditCardType) {
   <CreditCardInput
     v-model="cardNumber"
     placeholder="Enter card number"
-    @card-type-change="handleCardTypeChange"
+    @card-type="handleCardTypeChange"
   />
 </template>
 ```
@@ -31,6 +56,18 @@ function handleCardTypeChange(type: CreditCardType) {
 
 ## Props
 
+### BaseInput Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `'credit-card'` | - | Must be set to 'credit-card' for credit card input |
+| `modelValue` | `string` | `''` | The v-model binding value |
+| `className` | `string` | - | Additional CSS classes |
+| `placeholder` | `string` | - | Input placeholder text |
+| `creditCardOptions` | `object` | - | Credit card formatting options |
+
+### CreditCardInput Props
+
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `modelValue` | `string` | `''` | The v-model binding value |
@@ -44,5 +81,25 @@ function handleCardTypeChange(type: CreditCardType) {
 | Event | Payload | Description |
 |-------|---------|-------------|
 | `update:modelValue` | `string` | Emitted when the input value changes |
-| `cardTypeChange` | `CreditCardType` | Emitted when the card type is detected |
+| `cardType` | `CreditCardType` | Emitted when the card type is detected |
 | `blur` | `Event` | Emitted when the input loses focus |
+
+## Credit Card Types
+
+The component supports the following card types:
+
+- Visa (starts with 4)
+- Mastercard (starts with 51-55)
+- American Express (starts with 34 or 37)
+- Discover (starts with 6011 or 65)
+- Diners Club (starts with 36, 38, or 39)
+- JCB (starts with 35)
+
+## Formatting
+
+The component automatically formats the card number based on the card type:
+
+- American Express: XXXX XXXXXX XXXXX
+- Other cards: XXXX XXXX XXXX XXXX
+
+You can customize the delimiter used for formatting by setting the `delimiter` prop or `creditCardOptions.delimiter`.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		VITE_GOOGLE_PLACES_API_KEY=AIzaSyCtD4sE0Pvyy6Ey1GSAneSFQIVJA0aBjxE