@nexxtmove/ui 0.1.68 → 0.1.70

package/dist/nuxt.js

@@ -1,75 +1,65 @@
-import { defineNuxtModule as c, addComponent as s, addTemplate as a } from "@nuxt/kit";
-const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar/Avatar.vue", r = "components/Button/Button.vue", m = "components/Calendar/Calendar.vue", u = "components/Card/Card.vue", p = "components/Checkbox/Checkbox.vue", l = "components/Chip/Chip.vue", d = "components/Combobox/Combobox.vue", v = "components/ComboboxPanel/ComboboxPanel.vue", C = "components/ContactInfoCard/ContactInfoCard.vue", N = "components/CustomerJourneyTile/CustomerJourneyTile.vue", b = "components/DatePicker/DatePicker.vue", P = "components/DoughnutChart/DoughnutChart.vue", S = "components/DropdownButton/DropdownButton.vue", T = "components/FloatingPanel/FloatingPanel.vue", h = "components/Header/Header.vue", k = "components/Icon/Icon.vue", I = "components/InfoBlock/InfoBlock.vue", f = "components/InputField/InputField.vue", g = "components/Modal/Modal.vue", y = "components/Pagination/Pagination.vue", M = "components/PresenceIndicator/PresenceIndicator.vue", B = "components/ProgressBar/ProgressBar.vue", D = "components/PropertyCard/PropertyCard.vue", A = "components/PropertyListing/PropertyListing.vue", F = "components/Select/Select.vue", H = "components/Skeleton/Skeleton.vue", w = "components/SkeletonPropertyCard/SkeletonPropertyCard.vue", E = "components/SocialIcons/SocialIcons.vue", J = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", L = "components/SocialMediaTemplate/SocialMediaTemplate.vue", j = "components/SocialMediaType/SocialMediaType.vue", $ = "components/Source/Source.vue", K = "components/StepperHeader/StepperHeader.vue", O = "components/TabbedContent/TabbedContent.vue", U = "components/Table/Table.vue", _ = "components/Tabs/Tabs.vue", q = "components/TimelineEvent/TimelineEvent.vue", z = "components/TimelinePhaseblock/TimelinePhaseblock.vue", G = "components/Tooltip/Tooltip.vue", Q = {
-  NexxtAnimatedNumber: x,
-  NexxtAvatar: i,
-  NexxtButton: r,
-  NexxtCalendar: m,
-  NexxtCard: u,
-  NexxtCheckbox: p,
-  NexxtChip: l,
-  NexxtCombobox: d,
-  NexxtComboboxPanel: v,
-  NexxtContactInfoCard: C,
-  NexxtCustomerJourneyTile: N,
-  NexxtDatePicker: b,
-  NexxtDoughnutChart: P,
-  NexxtDropdownButton: S,
-  NexxtFloatingPanel: T,
-  NexxtHeader: h,
-  NexxtIcon: k,
-  NexxtInfoBlock: I,
-  NexxtInputField: f,
-  NexxtModal: g,
-  NexxtPagination: y,
-  NexxtPresenceIndicator: M,
-  NexxtProgressBar: B,
-  NexxtPropertyCard: D,
-  NexxtPropertyListing: A,
-  NexxtSelect: F,
-  NexxtSkeleton: H,
-  NexxtSkeletonPropertyCard: w,
-  NexxtSocialIcons: E,
-  NexxtSocialMediaCustomTemplate: J,
-  NexxtSocialMediaTemplate: L,
-  NexxtSocialMediaType: j,
-  NexxtSource: $,
-  NexxtStepperHeader: K,
-  NexxtTabbedContent: O,
-  NexxtTable: U,
-  NexxtTabs: _,
-  NexxtTimelineEvent: q,
-  NexxtTimelinePhaseblock: z,
-  NexxtTooltip: G
-}, V = c({
-  meta: {
-    name: "@nexxtmove/ui",
-    configKey: "nexxtmoveUi",
-    compatibility: {
-      nuxt: "^3.0.0 || ^4.0.0"
-    }
-  },
-  defaults: {
-    addCSS: !0
-  },
-  setup(e, o) {
-    for (const [t, n] of Object.entries(Q))
-      s({
-        name: t,
-        export: "default",
-        filePath: `@nexxtmove/ui/${n}`
-      });
-    e.addCSS && (a({
-      filename: "nexxtmove-ui.css",
-      getContents: () => `
-@import "tailwindcss";
-@import "@nexxtmove/ui/theme";
-
-@source "../../node_modules/@nexxtmove/ui/dist/*.js";
-`,
-      write: !0
-    }), o.options.css.push("#build/nexxtmove-ui.css"));
-  }
+import { addComponent as e, addTemplate as t, defineNuxtModule as n } from "@nuxt/kit";
+var r = {
+	NexxtAnimatedNumber: "components/AnimatedNumber/AnimatedNumber.vue",
+	NexxtAvatar: "components/Avatar/Avatar.vue",
+	NexxtButton: "components/Button/Button.vue",
+	NexxtCalendar: "components/Calendar/Calendar.vue",
+	NexxtCard: "components/Card/Card.vue",
+	NexxtCheckbox: "components/Checkbox/Checkbox.vue",
+	NexxtChip: "components/Chip/Chip.vue",
+	NexxtCombobox: "components/Combobox/Combobox.vue",
+	NexxtComboboxPanel: "components/ComboboxPanel/ComboboxPanel.vue",
+	NexxtContactInfoCard: "components/ContactInfoCard/ContactInfoCard.vue",
+	NexxtCountrySelect: "components/CountrySelect/CountrySelect.vue",
+	NexxtCustomerJourneyTile: "components/CustomerJourneyTile/CustomerJourneyTile.vue",
+	NexxtDatePicker: "components/DatePicker/DatePicker.vue",
+	NexxtDoughnutChart: "components/DoughnutChart/DoughnutChart.vue",
+	NexxtDropdownButton: "components/DropdownButton/DropdownButton.vue",
+	NexxtFloatingPanel: "components/FloatingPanel/FloatingPanel.vue",
+	NexxtHeader: "components/Header/Header.vue",
+	NexxtIcon: "components/Icon/Icon.vue",
+	NexxtInfoBlock: "components/InfoBlock/InfoBlock.vue",
+	NexxtInputField: "components/InputField/InputField.vue",
+	NexxtModal: "components/Modal/Modal.vue",
+	NexxtPagination: "components/Pagination/Pagination.vue",
+	NexxtPresenceIndicator: "components/PresenceIndicator/PresenceIndicator.vue",
+	NexxtProgressBar: "components/ProgressBar/ProgressBar.vue",
+	NexxtPropertyCard: "components/PropertyCard/PropertyCard.vue",
+	NexxtPropertyListing: "components/PropertyListing/PropertyListing.vue",
+	NexxtSelect: "components/Select/Select.vue",
+	NexxtSkeleton: "components/Skeleton/Skeleton.vue",
+	NexxtSkeletonPropertyCard: "components/SkeletonPropertyCard/SkeletonPropertyCard.vue",
+	NexxtSocialIcons: "components/SocialIcons/SocialIcons.vue",
+	NexxtSocialMediaCustomTemplate: "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue",
+	NexxtSocialMediaTemplate: "components/SocialMediaTemplate/SocialMediaTemplate.vue",
+	NexxtSocialMediaType: "components/SocialMediaType/SocialMediaType.vue",
+	NexxtSource: "components/Source/Source.vue",
+	NexxtStepperHeader: "components/StepperHeader/StepperHeader.vue",
+	NexxtTabbedContent: "components/TabbedContent/TabbedContent.vue",
+	NexxtTable: "components/Table/Table.vue",
+	NexxtTabs: "components/Tabs/Tabs.vue",
+	NexxtTimelineEvent: "components/TimelineEvent/TimelineEvent.vue",
+	NexxtTimelinePhaseblock: "components/TimelinePhaseblock/TimelinePhaseblock.vue",
+	NexxtTooltip: "components/Tooltip/Tooltip.vue"
+}, i = n({
+	meta: {
+		name: "@nexxtmove/ui",
+		configKey: "nexxtmoveUi",
+		compatibility: { nuxt: "^3.0.0 || ^4.0.0" }
+	},
+	defaults: { addCSS: !0 },
+	setup(n, i) {
+		for (let [t, n] of Object.entries(r)) e({
+			name: t,
+			export: "default",
+			filePath: `@nexxtmove/ui/${n}`
+		});
+		n.addCSS && (t({
+			filename: "nexxtmove-ui.css",
+			getContents: () => "\n@import \"tailwindcss\";\n@import \"@nexxtmove/ui/theme\";\n\n@source \"../../node_modules/@nexxtmove/ui/dist/*.js\";\n",
+			write: !0
+		}), i.options.css.push("#build/nexxtmove-ui.css"));
+	}
 });
-export {
-  V as default
-};
+//#endregion
+export { i as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.68",
+  "version": "0.1.70",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -24,51 +24,52 @@
     "@number-flow/vue": "^0.5.0",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
-    "reka-ui": "^2.9.2"
+    "reka-ui": "^2.9.6"
   },
   "peerDependencies": {
     "tailwindcss": "^4.0.0",
     "vue": "^3.0.0"
   },
   "devDependencies": {
+    "flag-icons": "^7.5.0",
     "@awesome.me/kit-37b149f3ef": "^1.0.8",
-    "@eslint/js": "^9.39.2",
-    "@nuxt/kit": "^4.3.1",
-    "@nuxt/schema": "^4.3.1",
-    "@storybook/addon-a11y": "^10.3.5",
+    "@eslint/js": "^10.0.1",
+    "@nuxt/kit": "^4.4.4",
+    "@nuxt/schema": "^4.4.4",
+    "@storybook/addon-a11y": "^10.3.6",
     "@storybook/addon-designs": "^11.1.3",
-    "@storybook/addon-docs": "^10.3.5",
-    "@storybook/addon-vitest": "^10.3.5",
-    "@storybook/builder-vite": "^10.3.5",
-    "@storybook/vue3-vite": "^10.3.5",
-    "@tailwindcss/vite": "^4.1.18",
-    "@types/node": "^25.0.3",
-    "@types/react": "^19.2.8",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-vitest": "^10.3.6",
+    "@storybook/builder-vite": "^10.3.6",
+    "@storybook/vue3-vite": "^10.3.6",
+    "@tailwindcss/vite": "^4.2.4",
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-vue": "^6.0.3",
-    "@vitest/coverage-v8": "^4.0.16",
-    "@vue/eslint-config-typescript": "^14.6.0",
-    "@vue/test-utils": "^2.4.6",
-    "@vue/tsconfig": "^0.9.0",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vitest/coverage-v8": "^4.1.5",
+    "@vue/eslint-config-typescript": "^14.7.0",
+    "@vue/test-utils": "^2.4.9",
+    "@vue/tsconfig": "^0.9.1",
     "consola": "^3.4.2",
-    "eslint": "^9.39.2",
+    "eslint": "^10.2.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-storybook": "10.3.5",
-    "eslint-plugin-vue": "^10.6.2",
-    "globals": "^17.0.0",
-    "jsdom": "^28.1.0",
-    "prettier": "^3.7.4",
-    "prettier-plugin-tailwindcss": "^0.7.2",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
+    "eslint-plugin-storybook": "10.3.6",
+    "eslint-plugin-vue": "^10.9.0",
+    "globals": "^17.5.0",
+    "jsdom": "^29.1.0",
+    "prettier": "^3.8.3",
+    "prettier-plugin-tailwindcss": "^0.8.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "remark-frontmatter": "^5.0.0",
-    "storybook": "^10.3.5",
-    "typescript-eslint": "^8.52.0",
-    "vite": "^7.3.1",
+    "storybook": "^10.3.6",
+    "typescript-eslint": "^8.59.1",
+    "vite": "^8.0.10",
     "vite-plugin-dts": "^4.5.4",
-    "vite-svg-loader": "^5.1.0",
-    "vitest": "^4.0.16"
+    "vite-svg-loader": "^5.1.1",
+    "vitest": "^4.1.5"
   },
   "engines": {
     "node": ">=22.18.0"

package/src/components/CountrySelect/CountrySelect.vue

@@ -0,0 +1,166 @@
+<script lang="ts">
+import flagIconsCss from 'flag-icons/css/flag-icons.min.css?inline'
+
+if (typeof document !== 'undefined') {
+  const style = document.createElement('style')
+  style.textContent = flagIconsCss
+  document.head.appendChild(style)
+}
+
+export interface NexxtCountrySelectProps {
+  placeholder?: string
+  label?: string
+  error?: boolean
+  errorMessage?: string
+  required?: boolean
+  pinnedCountries?: string[]
+}
+</script>
+
+<script lang="ts" setup>
+import { ref, computed, nextTick } from 'vue'
+import NexxtFloatingPanel from '../FloatingPanel/FloatingPanel.vue'
+import NexxtIcon from '../Icon/Icon.vue'
+import NexxtInputField from '../InputField/InputField.vue'
+import { countries } from './countries'
+
+defineOptions({ name: 'NexxtCountrySelect' })
+
+const generateId = () => 'country-select-' + Math.random().toString(36).slice(2, 10)
+const selectId = generateId()
+
+const props = withDefaults(defineProps<NexxtCountrySelectProps>(), {
+  placeholder: 'Selecteer een land...',
+  pinnedCountries: () => [],
+})
+
+const model = defineModel<string | null>({ default: null })
+const search = ref('')
+const inputRef = ref<InstanceType<typeof NexxtInputField> | null>(null)
+
+const selectedCountry = computed(() => countries.find((c) => c.name === model.value) ?? null)
+
+const sortedCountries = computed(() => {
+  const pinned = props.pinnedCountries
+    .map((code) => countries.find((c) => c.code === code))
+    .filter((c) => c !== undefined)
+  const pinnedCodes = new Set(props.pinnedCountries)
+  const rest = countries
+    .filter((c) => !pinnedCodes.has(c.code))
+    .sort((a, b) => a.name.localeCompare(b.name, 'nl'))
+  return [...pinned, ...rest]
+})
+
+const filteredCountries = computed(() => {
+  const q = search.value.toLowerCase()
+  return q
+    ? sortedCountries.value.filter((c) => c.name.toLowerCase().includes(q))
+    : sortedCountries.value
+})
+
+const select = (name: string, close: () => void) => {
+  model.value = name
+  search.value = ''
+  close()
+}
+
+const onOpen = async () => {
+  await nextTick()
+  inputRef.value?.$el.querySelector('input')?.focus()
+}
+</script>
+
+<template>
+  <div class="inline-flex flex-col gap-1">
+    <label
+      v-if="label"
+      class="text-color-gray-700 justify-start body-normal text-sm"
+      :for="selectId"
+    >
+      {{ label }}
+      <span v-if="required" class="text-brick-500">*</span>
+    </label>
+
+    <NexxtFloatingPanel placement="bottom" match-width @open="onOpen">
+      <template #trigger="{ isOpen, toggle }">
+        <div
+          :id="selectId"
+          role="combobox"
+          :aria-expanded="isOpen"
+          aria-haspopup="listbox"
+          tabindex="0"
+          class="group flex w-full cursor-pointer items-center gap-2 rounded-lg pr-3 ring transition-colors ease-out focus:ring-cornflower-blue-500 focus:outline-none"
+          :class="error ? 'ring-brick-400' : 'ring-gray-200'"
+          @click="toggle"
+          @keydown.enter.prevent="toggle"
+          @keydown.space.prevent="toggle"
+        >
+          <span
+            class="flex h-10 w-full min-w-60 items-center gap-2 pl-3 text-sm"
+            :class="selectedCountry ? 'text-gray-900' : 'text-gray-400'"
+          >
+            <span
+              v-if="selectedCountry"
+              :class="`fi fi-${selectedCountry.code}`"
+              class="shrink-0"
+            />
+            {{ selectedCountry?.name ?? placeholder }}
+          </span>
+          <NexxtIcon
+            name="chevron-down"
+            class="shrink-0 text-gray-400 transition-all duration-200 group-hover:text-cornflower-blue-600"
+            :class="{ 'rotate-180': isOpen }"
+          />
+        </div>
+      </template>
+
+      <template #content="{ close }">
+        <div class="overflow-hidden rounded-lg bg-white shadow-xs ring ring-gray-100">
+          <div class="border-b border-gray-100 p-2">
+            <NexxtInputField
+              ref="inputRef"
+              v-model="search"
+              class="w-full"
+              left-icon="magnifying-glass"
+              placeholder="Zoeken..."
+            />
+          </div>
+          <ul
+            role="listbox"
+            class="max-h-60 overflow-y-auto [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-cornflower-blue-200 [&::-webkit-scrollbar-thumb:hover]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent"
+          >
+            <li
+              v-for="country in filteredCountries"
+              :key="country.code"
+              role="option"
+              :aria-selected="model === country.name"
+              class="flex cursor-pointer items-center gap-3 px-4 py-3 text-sm text-gray-900 transition-colors duration-150 hover:bg-gray-50 hover:text-purple-600"
+              :class="{ 'font-medium text-cornflower-blue-600': model === country.name }"
+              @click="select(country.name, close)"
+            >
+              <span :class="`fi fi-${country.code}`" class="shrink-0" />
+              {{ country.name }}
+              <NexxtIcon v-if="model === country.name" name="check" class="ml-auto text-xs" />
+            </li>
+            <li v-if="filteredCountries.length === 0" class="px-4 py-3 text-sm text-gray-400">
+              Geen landen gevonden
+            </li>
+          </ul>
+        </div>
+      </template>
+    </NexxtFloatingPanel>
+
+    <Transition
+      enter-active-class="transition-all duration-200 ease-out"
+      enter-from-class="opacity-0 -translate-y-1"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition-all duration-150 ease-in"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 -translate-y-1"
+    >
+      <p v-if="error && errorMessage" class="text-sm text-brick-400">
+        {{ errorMessage }}
+      </p>
+    </Transition>
+  </div>
+</template>

package/src/components/CountrySelect/countries.ts

@@ -0,0 +1,196 @@
+export type Country = { code: string; name: string }
+
+export const countries: Country[] = [
+  { code: 'af', name: 'Afghanistan' },
+  { code: 'al', name: 'Albanië' },
+  { code: 'dz', name: 'Algerije' },
+  { code: 'ad', name: 'Andorra' },
+  { code: 'ao', name: 'Angola' },
+  { code: 'ag', name: 'Antigua en Barbuda' },
+  { code: 'ar', name: 'Argentinië' },
+  { code: 'am', name: 'Armenië' },
+  { code: 'au', name: 'Australië' },
+  { code: 'at', name: 'Oostenrijk' },
+  { code: 'az', name: 'Azerbeidzjan' },
+  { code: 'bs', name: "Bahama's" },
+  { code: 'bh', name: 'Bahrein' },
+  { code: 'bd', name: 'Bangladesh' },
+  { code: 'bb', name: 'Barbados' },
+  { code: 'by', name: 'Wit-Rusland' },
+  { code: 'be', name: 'België' },
+  { code: 'bz', name: 'Belize' },
+  { code: 'bj', name: 'Benin' },
+  { code: 'bt', name: 'Bhutan' },
+  { code: 'bo', name: 'Bolivia' },
+  { code: 'ba', name: 'Bosnië en Herzegovina' },
+  { code: 'bw', name: 'Botswana' },
+  { code: 'br', name: 'Brazilië' },
+  { code: 'bn', name: 'Brunei' },
+  { code: 'bg', name: 'Bulgarije' },
+  { code: 'bf', name: 'Burkina Faso' },
+  { code: 'bi', name: 'Burundi' },
+  { code: 'cv', name: 'Kaapverdië' },
+  { code: 'kh', name: 'Cambodja' },
+  { code: 'cm', name: 'Kameroen' },
+  { code: 'ca', name: 'Canada' },
+  { code: 'cf', name: 'Centraal-Afrikaanse Republiek' },
+  { code: 'td', name: 'Tsjaad' },
+  { code: 'cl', name: 'Chili' },
+  { code: 'cn', name: 'China' },
+  { code: 'co', name: 'Colombia' },
+  { code: 'km', name: 'Comoren' },
+  { code: 'cd', name: 'Congo (DRC)' },
+  { code: 'cg', name: 'Congo (Republiek)' },
+  { code: 'cr', name: 'Costa Rica' },
+  { code: 'hr', name: 'Kroatië' },
+  { code: 'cu', name: 'Cuba' },
+  { code: 'cy', name: 'Cyprus' },
+  { code: 'cz', name: 'Tsjechië' },
+  { code: 'dk', name: 'Denemarken' },
+  { code: 'dj', name: 'Djibouti' },
+  { code: 'dm', name: 'Dominica' },
+  { code: 'do', name: 'Dominicaanse Republiek' },
+  { code: 'ec', name: 'Ecuador' },
+  { code: 'eg', name: 'Egypte' },
+  { code: 'sv', name: 'El Salvador' },
+  { code: 'gq', name: 'Equatoriaal-Guinea' },
+  { code: 'er', name: 'Eritrea' },
+  { code: 'ee', name: 'Estland' },
+  { code: 'sz', name: 'Eswatini' },
+  { code: 'et', name: 'Ethiopië' },
+  { code: 'fj', name: 'Fiji' },
+  { code: 'fi', name: 'Finland' },
+  { code: 'fr', name: 'Frankrijk' },
+  { code: 'ga', name: 'Gabon' },
+  { code: 'gm', name: 'Gambia' },
+  { code: 'ge', name: 'Georgië' },
+  { code: 'de', name: 'Duitsland' },
+  { code: 'gh', name: 'Ghana' },
+  { code: 'gr', name: 'Griekenland' },
+  { code: 'gd', name: 'Grenada' },
+  { code: 'gt', name: 'Guatemala' },
+  { code: 'gn', name: 'Guinee' },
+  { code: 'gw', name: 'Guinee-Bissau' },
+  { code: 'gy', name: 'Guyana' },
+  { code: 'ht', name: 'Haïti' },
+  { code: 'hn', name: 'Honduras' },
+  { code: 'hu', name: 'Hongarije' },
+  { code: 'is', name: 'IJsland' },
+  { code: 'in', name: 'India' },
+  { code: 'id', name: 'Indonesië' },
+  { code: 'ir', name: 'Iran' },
+  { code: 'iq', name: 'Irak' },
+  { code: 'ie', name: 'Ierland' },
+  { code: 'il', name: 'Israël' },
+  { code: 'it', name: 'Italië' },
+  { code: 'jm', name: 'Jamaica' },
+  { code: 'jp', name: 'Japan' },
+  { code: 'jo', name: 'Jordanië' },
+  { code: 'kz', name: 'Kazachstan' },
+  { code: 'ke', name: 'Kenia' },
+  { code: 'ki', name: 'Kiribati' },
+  { code: 'kw', name: 'Koeweit' },
+  { code: 'kg', name: 'Kirgizië' },
+  { code: 'la', name: 'Laos' },
+  { code: 'lv', name: 'Letland' },
+  { code: 'lb', name: 'Libanon' },
+  { code: 'ls', name: 'Lesotho' },
+  { code: 'lr', name: 'Liberia' },
+  { code: 'ly', name: 'Libië' },
+  { code: 'li', name: 'Liechtenstein' },
+  { code: 'lt', name: 'Litouwen' },
+  { code: 'lu', name: 'Luxemburg' },
+  { code: 'mg', name: 'Madagaskar' },
+  { code: 'mw', name: 'Malawi' },
+  { code: 'my', name: 'Maleisië' },
+  { code: 'mv', name: 'Malediven' },
+  { code: 'ml', name: 'Mali' },
+  { code: 'mt', name: 'Malta' },
+  { code: 'mh', name: 'Marshalleilanden' },
+  { code: 'mr', name: 'Mauritanië' },
+  { code: 'mu', name: 'Mauritius' },
+  { code: 'mx', name: 'Mexico' },
+  { code: 'fm', name: 'Micronesië' },
+  { code: 'md', name: 'Moldavië' },
+  { code: 'mc', name: 'Monaco' },
+  { code: 'mn', name: 'Mongolië' },
+  { code: 'me', name: 'Montenegro' },
+  { code: 'ma', name: 'Marokko' },
+  { code: 'mz', name: 'Mozambique' },
+  { code: 'mm', name: 'Myanmar' },
+  { code: 'na', name: 'Namibië' },
+  { code: 'nr', name: 'Nauru' },
+  { code: 'np', name: 'Nepal' },
+  { code: 'nl', name: 'Nederland' },
+  { code: 'nz', name: 'Nieuw-Zeeland' },
+  { code: 'ni', name: 'Nicaragua' },
+  { code: 'ne', name: 'Niger' },
+  { code: 'ng', name: 'Nigeria' },
+  { code: 'kp', name: 'Noord-Korea' },
+  { code: 'mk', name: 'Noord-Macedonië' },
+  { code: 'no', name: 'Noorwegen' },
+  { code: 'om', name: 'Oman' },
+  { code: 'pk', name: 'Pakistan' },
+  { code: 'pw', name: 'Palau' },
+  { code: 'pa', name: 'Panama' },
+  { code: 'pg', name: 'Papoea-Nieuw-Guinea' },
+  { code: 'py', name: 'Paraguay' },
+  { code: 'pe', name: 'Peru' },
+  { code: 'ph', name: 'Filipijnen' },
+  { code: 'pl', name: 'Polen' },
+  { code: 'pt', name: 'Portugal' },
+  { code: 'qa', name: 'Qatar' },
+  { code: 'ro', name: 'Roemenië' },
+  { code: 'ru', name: 'Rusland' },
+  { code: 'rw', name: 'Rwanda' },
+  { code: 'kn', name: 'Saint Kitts en Nevis' },
+  { code: 'lc', name: 'Saint Lucia' },
+  { code: 'vc', name: 'Saint Vincent en de Grenadines' },
+  { code: 'ws', name: 'Samoa' },
+  { code: 'sm', name: 'San Marino' },
+  { code: 'st', name: 'Sao Tomé en Principe' },
+  { code: 'sa', name: 'Saoedi-Arabië' },
+  { code: 'sn', name: 'Senegal' },
+  { code: 'rs', name: 'Servië' },
+  { code: 'sc', name: 'Seychellen' },
+  { code: 'sl', name: 'Sierra Leone' },
+  { code: 'sg', name: 'Singapore' },
+  { code: 'sk', name: 'Slowakije' },
+  { code: 'si', name: 'Slovenië' },
+  { code: 'sb', name: 'Salomonseilanden' },
+  { code: 'so', name: 'Somalië' },
+  { code: 'za', name: 'Zuid-Afrika' },
+  { code: 'ss', name: 'Zuid-Sudan' },
+  { code: 'es', name: 'Spanje' },
+  { code: 'lk', name: 'Sri Lanka' },
+  { code: 'sd', name: 'Soedan' },
+  { code: 'sr', name: 'Suriname' },
+  { code: 'se', name: 'Zweden' },
+  { code: 'ch', name: 'Zwitserland' },
+  { code: 'sy', name: 'Syrië' },
+  { code: 'tw', name: 'Taiwan' },
+  { code: 'tj', name: 'Tadzjikistan' },
+  { code: 'tz', name: 'Tanzania' },
+  { code: 'th', name: 'Thailand' },
+  { code: 'tl', name: 'Oost-Timor' },
+  { code: 'tg', name: 'Togo' },
+  { code: 'to', name: 'Tonga' },
+  { code: 'tt', name: 'Trinidad en Tobago' },
+  { code: 'tn', name: 'Tunesië' },
+  { code: 'tr', name: 'Turkije' },
+  { code: 'tm', name: 'Turkmenistan' },
+  { code: 'tv', name: 'Tuvalu' },
+  { code: 'ug', name: 'Oeganda' },
+  { code: 'ua', name: 'Oekraïne' },
+  { code: 'ae', name: 'Verenigde Arabische Emiraten' },
+  { code: 'gb', name: 'Verenigd Koninkrijk' },
+  { code: 'us', name: 'Verenigde Staten' },
+  { code: 'uy', name: 'Uruguay' },
+  { code: 'uz', name: 'Oezbekistan' },
+  { code: 'vu', name: 'Vanuatu' },
+  { code: 've', name: 'Venezuela' },
+  { code: 'vn', name: 'Vietnam' },
+  { code: 'ye', name: 'Jemen' },
+  { code: 'zm', name: 'Zambia' },
+  { code: 'zw', name: 'Zimbabwe' },
+]

package/src/components/Tabs/Tabs.vue

@@ -39,7 +39,7 @@ const updateSlider = async () => {
 }
 
 const onKeydown = (event: KeyboardEvent, index: number) => {
-  let next = index
+  let next: number
   if (event.key === 'ArrowRight') next = (index + 1) % props.tabs.length
   else if (event.key === 'ArrowLeft') next = (index - 1 + props.tabs.length) % props.tabs.length
   else if (event.key === 'Home') next = 0

package/src/components.json

@@ -9,6 +9,7 @@
   "NexxtCombobox": "components/Combobox/Combobox.vue",
   "NexxtComboboxPanel": "components/ComboboxPanel/ComboboxPanel.vue",
   "NexxtContactInfoCard": "components/ContactInfoCard/ContactInfoCard.vue",
+  "NexxtCountrySelect": "components/CountrySelect/CountrySelect.vue",
   "NexxtCustomerJourneyTile": "components/CustomerJourneyTile/CustomerJourneyTile.vue",
   "NexxtDatePicker": "components/DatePicker/DatePicker.vue",
   "NexxtDoughnutChart": "components/DoughnutChart/DoughnutChart.vue",

package/src/index.ts

@@ -9,6 +9,7 @@ export { default as NexxtChip } from './components/Chip/Chip.vue'
 export { default as NexxtCombobox } from './components/Combobox/Combobox.vue'
 export { default as NexxtComboboxPanel } from './components/ComboboxPanel/ComboboxPanel.vue'
 export { default as NexxtContactInfoCard } from './components/ContactInfoCard/ContactInfoCard.vue'
+export { default as NexxtCountrySelect } from './components/CountrySelect/CountrySelect.vue'
 export { default as NexxtCustomerJourneyTile } from './components/CustomerJourneyTile/CustomerJourneyTile.vue'
 export { default as NexxtDatePicker } from './components/DatePicker/DatePicker.vue'
 export { default as NexxtDoughnutChart } from './components/DoughnutChart/DoughnutChart.vue'