@nexxtmove/ui 1.0.2 → 1.0.4

package/dist/nuxt.js

@@ -42958,6 +42958,7 @@ var Vw, Hw, Uw, Ww, Gw, Kw = t((() => {
 	NexxtIcon: "components/Icon/Icon.vue",
 	NexxtInfoBlock: "components/InfoBlock/InfoBlock.vue",
 	NexxtInputField: "components/InputField/InputField.vue",
+	NexxtInputSelect: "components/InputSelect/InputSelect.vue",
 	NexxtModal: "components/Modal/Modal.vue",
 	NexxtPagination: "components/Pagination/Pagination.vue",
 	NexxtPresenceIndicator: "components/PresenceIndicator/PresenceIndicator.vue",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -34,12 +34,12 @@
     "@eslint/js": "^10.0.1",
     "@nuxt/kit": "^4.4.4",
     "@nuxt/schema": "^4.4.4",
-    "@storybook/addon-a11y": "^10.3.6",
+    "@storybook/addon-a11y": "^10.4.0",
     "@storybook/addon-designs": "^11.1.3",
-    "@storybook/addon-docs": "^10.3.6",
-    "@storybook/addon-vitest": "^10.3.6",
-    "@storybook/builder-vite": "^10.3.6",
-    "@storybook/vue3-vite": "^10.3.6",
+    "@storybook/addon-docs": "^10.4.0",
+    "@storybook/addon-vitest": "^10.4.0",
+    "@storybook/builder-vite": "^10.4.0",
+    "@storybook/vue3-vite": "^10.4.0",
     "@tailwindcss/vite": "^4.2.4",
     "@types/node": "^25.6.0",
     "@types/react": "^19.2.14",
@@ -53,7 +53,7 @@
     "eslint": "^10.2.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-storybook": "10.3.6",
+    "eslint-plugin-storybook": "10.4.0",
     "eslint-plugin-vue": "^10.9.0",
     "globals": "^17.5.0",
     "jsdom": "^29.1.0",
@@ -62,7 +62,7 @@
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "remark-frontmatter": "^5.0.0",
-    "storybook": "^10.3.6",
+    "storybook": "^10.4.0",
     "typescript-eslint": "^8.59.1",
     "vite": "^8.0.10",
     "vite-plugin-dts": "^4.5.4",

package/src/components/Announcement/Announcement.vue

@@ -4,24 +4,30 @@ import NexxtIcon from '../Icon/Icon.vue'
 interface NexxtAnnouncementProps {
   color?: string
   text_color?: string
+  icon?: InstanceType<typeof NexxtIcon>['name']
+  showHideButton?: boolean
 }
 
-const { color = 'blue', text_color = 'white' } = defineProps<NexxtAnnouncementProps>()
+const {
+  color = 'blue',
+  text_color = 'white',
+  icon = 'megaphone',
+  showHideButton = true,
+} = defineProps<NexxtAnnouncementProps>()
 
 const emit = defineEmits<{ hide: [] }>()
 </script>
 
 <template>
   <div
-    class="flex items-center justify-between overflow-hidden rounded-md px-4 py-3"
+    class="grid items-center gap-x-3 overflow-hidden rounded-md px-4 py-3"
+    :class="showHideButton ? 'grid-cols-[auto_1fr_auto]' : 'grid-cols-[auto_1fr]'"
     :style="{ background: color, color: text_color }"
   >
-    <div class="flex items-center gap-3">
-      <NexxtIcon class="text-lg" name="megaphone" />
-      <slot />
-    </div>
-
+    <NexxtIcon class="text-lg" :name="icon" />
+    <slot />
     <button
+      v-if="showHideButton"
       type="button"
       class="cursor-pointer text-2xl leading-none opacity-70 hover:opacity-100"
       @click="emit('hide')"

package/src/components/InputSelect/InputSelect.vue

@@ -0,0 +1,139 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import NexxtIcon from '../Icon/Icon.vue'
+import NexxtFloatingPanel from '../FloatingPanel/FloatingPanel.vue'
+import type Icon from '../Icon/Icon.vue'
+import type { SelectOption } from '../Select/Select.vue'
+
+export type { SelectOption }
+
+const generateId = () => 'input-select-' + Math.random().toString(36).slice(2, 10)
+const fieldId = generateId()
+const selectId = generateId()
+
+defineOptions({ name: 'NexxtInputSelect' })
+
+export interface NexxtInputSelectProps {
+  options: SelectOption[]
+  label?: string
+  placeholder?: string
+  selectPlaceholder?: string
+  selectPosition?: 'before' | 'after'
+  error?: boolean
+  errorMessage?: string
+  required?: boolean
+  leftIcon?: InstanceType<typeof Icon>['name']
+}
+
+const props = withDefaults(defineProps<NexxtInputSelectProps>(), {
+  selectPlaceholder: 'Selecteer...',
+  selectPosition: 'after',
+})
+
+const getLabel = (opt: SelectOption) => (typeof opt === 'string' ? opt : opt.label)
+const getValue = (opt: SelectOption): string | number => (typeof opt === 'string' ? opt : opt.value)
+
+const inputModel = defineModel<string | number>('input')
+const selectModel = defineModel<string | number | null>('select', { default: null })
+
+const selectedLabel = computed(() => {
+  if (selectModel.value === null || selectModel.value === undefined) return null
+  const found = props.options.find((opt) => getValue(opt) === selectModel.value)
+  return found ? getLabel(found) : null
+})
+
+const select = (opt: SelectOption, close: () => void) => {
+  selectModel.value = getValue(opt)
+  close()
+}
+</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="fieldId"
+    >
+      {{ label }}
+      <span v-if="required" class="text-brick-500">*</span>
+    </label>
+
+    <div
+      class="group flex items-center overflow-hidden rounded-lg ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
+      :class="[
+        error ? 'ring-brick-400' : 'ring-gray-200',
+        selectPosition === 'after' ? 'flex-row-reverse' : 'flex-row',
+      ]"
+    >
+      <NexxtFloatingPanel :placement="selectPosition === 'after' ? 'bottom-end' : 'bottom-start'">
+        <template #trigger="{ isOpen, toggle }">
+          <div
+            :id="selectId"
+            role="combobox"
+            :aria-expanded="isOpen"
+            aria-haspopup="listbox"
+            tabindex="0"
+            class="flex h-10 shrink-0 cursor-pointer items-center gap-1.5 px-3 text-sm transition-colors focus:outline-none"
+            :class="[
+              selectedLabel ? 'text-gray-900' : 'text-gray-400',
+              selectPosition === 'after' ? 'border-l border-gray-200' : 'border-r border-gray-200',
+            ]"
+            @click="toggle"
+            @keydown.enter.prevent="toggle"
+            @keydown.space.prevent="toggle"
+          >
+            <NexxtIcon v-if="leftIcon" :name="leftIcon" class="text-gray-400" />
+            <span>{{ selectedLabel ?? selectPlaceholder }}</span>
+            <NexxtIcon
+              name="chevron-down"
+              class="shrink-0 text-gray-400 transition-all duration-200"
+              :class="{ 'rotate-180': isOpen }"
+            />
+          </div>
+        </template>
+
+        <template #content="{ close }">
+          <ul
+            role="listbox"
+            class="overflow-hidden rounded-lg bg-white shadow-xs ring ring-gray-100"
+          >
+            <li
+              v-for="opt in options"
+              :key="getValue(opt)"
+              role="option"
+              :aria-selected="selectModel === getValue(opt)"
+              class="flex cursor-pointer items-center justify-between 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': selectModel === getValue(opt) }"
+              @click="select(opt, close)"
+            >
+              {{ getLabel(opt) }}
+              <NexxtIcon v-if="selectModel === getValue(opt)" name="check" class="text-xs" />
+            </li>
+          </ul>
+        </template>
+      </NexxtFloatingPanel>
+
+      <input
+        :id="fieldId"
+        v-model="inputModel"
+        :placeholder="placeholder"
+        v-bind="$attrs"
+        class="bg-transparant h-10 w-full min-w-40 px-3 text-sm text-gray-900 placeholder-gray-400 focus:outline-none"
+      />
+    </div>
+
+    <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.json

@@ -20,6 +20,7 @@
   "NexxtIcon": "components/Icon/Icon.vue",
   "NexxtInfoBlock": "components/InfoBlock/InfoBlock.vue",
   "NexxtInputField": "components/InputField/InputField.vue",
+  "NexxtInputSelect": "components/InputSelect/InputSelect.vue",
   "NexxtModal": "components/Modal/Modal.vue",
   "NexxtPagination": "components/Pagination/Pagination.vue",
   "NexxtPresenceIndicator": "components/PresenceIndicator/PresenceIndicator.vue",

package/src/index.ts

@@ -20,6 +20,7 @@ export { default as NexxtHeader } from './components/Header/Header.vue'
 export { default as NexxtIcon } from './components/Icon/Icon.vue'
 export { default as NexxtInfoBlock } from './components/InfoBlock/InfoBlock.vue'
 export { default as NexxtInputField } from './components/InputField/InputField.vue'
+export { default as NexxtInputSelect } from './components/InputSelect/InputSelect.vue'
 export { default as NexxtModal } from './components/Modal/Modal.vue'
 export { default as NexxtPagination } from './components/Pagination/Pagination.vue'
 export { default as NexxtPresenceIndicator } from './components/PresenceIndicator/PresenceIndicator.vue'

package/tailwind/nexxtmove.tailwind.components.css

@@ -143,6 +143,26 @@
     @apply bg-card-bg;
   }
 
+  .toast {
+    @apply px-(--toast-padding-x) py-(--toast-padding-y);
+  }
+
+  .toast-error {
+    @apply border-toast-border-error border border-solid;
+  }
+
+  .toast-info {
+    @apply border-toast-border-info border border-solid;
+  }
+
+  .toast-success {
+    @apply border-toast-border-success border border-solid;
+  }
+
+  .toast-warning {
+    @apply border-toast-border-warning border border-solid;
+  }
+
   .info-block {
     @apply p-(--info-block-padding);
   }

package/tailwind/nexxtmove.tailwind.theme.css

@@ -170,6 +170,10 @@
   --color-social-media-template-info-bg: var(--color-cornflower-blue-500);
   --color-card-content-border: var(--color-gray-200);
   --color-card-bg: var(--color-white);
+  --color-toast-border-info: var(--color-cornflower-blue-300);
+  --color-toast-border-success: var(--color-green-300);
+  --color-toast-border-warning: var(--color-orange-300);
+  --color-toast-border-error: var(--color-brick-300);
   --text-xs: 0.75rem;
   --text-base: 1rem;
   --text-lg: 1.125rem;
@@ -241,6 +245,8 @@
   --card-content-padding-x: var(--spacing-5);
   --card-content-padding-y: var(--spacing-4);
   --card-content-border-radius: var(--radius-lg);
+  --toast-padding-x: var(--spacing-5);
+  --toast-padding-y: var(--spacing-5);
   --font-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-serif: 'Playfair Display', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
   --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;