@nexxtmove/ui 1.8.0 → 1.8.1

package/src/components/{Announcement → molecules/Announcement}/Announcement.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import NexxtIcon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
 
 type AnnouncementVariant = 'info' | 'success' | 'warning' | 'danger' | 'neutral'
 

package/src/components/{CustomerJourneyTile → molecules/CustomerJourneyTile}/CustomerJourneyTile.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import NexxtIcon from '../Icon/Icon.vue'
-import NexxtAnimatedNumber from '../AnimatedNumber/AnimatedNumber.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import NexxtAnimatedNumber from '../../atoms/AnimatedNumber/AnimatedNumber.vue'
 import { computed, onMounted, ref } from 'vue'
 import { PHASE_MAP } from '../TimelineEvent/TimelineTypes'
 

package/src/components/{InfoBlock → molecules/InfoBlock}/InfoBlock.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import Icon from '../Icon/Icon.vue'
+import Icon from '../../atoms/Icon/Icon.vue'
 
 interface NexxtInfoBlockProps {
   icon: InstanceType<typeof Icon>['name']

package/src/components/{InputField → molecules/InputField}/InputField.vue

@@ -1,11 +1,20 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { computed, getCurrentInstance, useAttrs, useTemplateRef } from 'vue'
-import Icon from '../Icon/Icon.vue'
+import Icon from '../../atoms/Icon/Icon.vue'
 
 const INPUT_ID = 'input-field-' + Math.random().toString(36).slice(2, 10)
 
 const attrs = useAttrs()
 
+// `useAttrs()` is getypeerd als Record<string, unknown>, dus class en style
+// komen er als `unknown` uit en de dts-stap wijst ze af op het wrapper-element.
+// Hier één keer terugbrengen naar wat Vue er werkelijk voor accepteert.
+const wrapperAttrs = computed(() => ({
+  class: attrs.class as HTMLAttributes['class'],
+  style: attrs.style as HTMLAttributes['style'],
+}))
+
 // `class` and `style` describe where the field sits in the consumer's layout,
 // so they belong on the outer wrapper. Everything else -- id, name, type,
 // placeholder, data-* , aria-* -- describes the control, so it goes to the
@@ -68,7 +77,7 @@ const decrement = () => {
 </script>
 
 <template>
-  <div class="inline-flex flex-col gap-1" :class="attrs.class" :style="attrs.style">
+  <div class="inline-flex flex-col gap-1" :class="wrapperAttrs.class" :style="wrapperAttrs.style">
     <label v-if="label" class="justify-start small-normal text-gray-700" :for="INPUT_ID">
       {{ label }}
       <span v-if="required" class="text-brick-500">*</span>

package/src/components/{InputSelect → molecules/InputSelect}/InputSelect.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
 import { computed, useAttrs } from 'vue'
-import NexxtIcon from '../Icon/Icon.vue'
-import NexxtFloatingPanel from '../FloatingPanel/FloatingPanel.vue'
-import type Icon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import NexxtFloatingPanel from '../../atoms/FloatingPanel/FloatingPanel.vue'
+import type Icon from '../../atoms/Icon/Icon.vue'
 import type { SelectOption } from '../Select/Select.vue'
 
 export type { SelectOption }
@@ -13,6 +14,14 @@ const selectId = generateId()
 
 const attrs = useAttrs()
 
+// `useAttrs()` is getypeerd als Record<string, unknown>, dus class en style
+// komen er als `unknown` uit en de dts-stap wijst ze af op het wrapper-element.
+// Hier één keer terugbrengen naar wat Vue er werkelijk voor accepteert.
+const wrapperAttrs = computed(() => ({
+  class: attrs.class as HTMLAttributes['class'],
+  style: attrs.style as HTMLAttributes['style'],
+}))
+
 // `class` and `style` position the field in the consumer's layout and belong on
 // the wrapper; everything else describes the control and goes to the input.
 const inputAttrs = computed(() => {
@@ -66,7 +75,7 @@ const select = (opt: SelectOption, close: () => void) => {
 </script>
 
 <template>
-  <div class="inline-flex flex-col gap-1" :class="attrs.class" :style="attrs.style">
+  <div class="inline-flex flex-col gap-1" :class="wrapperAttrs.class" :style="wrapperAttrs.style">
     <label v-if="label" class="justify-start small-normal text-gray-700" :for="fieldId">
       {{ label }}
       <span v-if="required" class="text-brick-500">*</span>

package/src/components/{ModalFooter → molecules/ModalFooter}/ModalFooter.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import NexxtButton from '../Button/Button.vue'
+import NexxtButton from '../../atoms/Button/Button.vue'
 
 // Kept in step with NexxtButton's own `variant` prop, widened with `string` so a
 // call site may bind a computed value (`options.variant ?? 'primary'`) without a

package/src/components/{Pagination → molecules/Pagination}/Pagination.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import NexxtIcon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
 import {
   PaginationEllipsis,
   PaginationFirst,

package/src/components/{PropertyCard → molecules/PropertyCard}/PropertyCard.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import NexxtCard from '../Card/Card.vue'
-import NexxtPropertyListing from '../PropertyListing/PropertyListing.vue'
-import NexxtIcon from '../Icon/Icon.vue'
-import PropertyPlaceholder from '../../assets/images/property_placeholder.jpg'
+import NexxtCard from '../../atoms/Card/Card.vue'
+import NexxtPropertyListing from '../../atoms/PropertyListing/PropertyListing.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import PropertyPlaceholder from '../../../assets/images/property_placeholder.jpg'
 
 export interface NexxtPropertyCardProps {
   image?: string

package/src/components/{Select → molecules/Select}/Select.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { computed, ref, useTemplateRef, watch } from 'vue'
-import NexxtIcon from '../Icon/Icon.vue'
-import NexxtFloatingPanel from '../FloatingPanel/FloatingPanel.vue'
-import type Icon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import NexxtFloatingPanel from '../../atoms/FloatingPanel/FloatingPanel.vue'
+import type Icon from '../../atoms/Icon/Icon.vue'
 
 export type SelectOption = { label: string; value: string | number } | string
 

package/src/components/{SidebarMenuItem → molecules/SidebarMenuItem}/SidebarMenuItem.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import NexxtIcon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
 
 interface SidebarMenuItemProps {
   icon: InstanceType<typeof NexxtIcon>['name']

package/src/components/{SkeletonPropertyCard → molecules/SkeletonPropertyCard}/SkeletonPropertyCard.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import NexxtSkeleton from '../Skeleton/Skeleton.vue'
+import NexxtSkeleton from '../../atoms/Skeleton/Skeleton.vue'
 
 export interface NexxtSkeletonPropertyCardProps {
   ariaLabel?: string

package/src/components/{SocialIcons → molecules/SocialIcons}/SocialIcons.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import Icon from '../Icon/Icon.vue'
+import Icon from '../../atoms/Icon/Icon.vue'
 
 export interface NexxtSocialIconsProps {
   facebook?: boolean

package/src/components/{SocialMediaCustomTemplate → molecules/SocialMediaCustomTemplate}/SocialMediaCustomTemplate.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import missingVideo from '../../assets/video/Template_aanvragen.mp4'
+import missingVideo from '../../../assets/video/Template_aanvragen.mp4'
 import { ref, useTemplateRef, onMounted } from 'vue'
 
 defineOptions({
@@ -48,7 +48,7 @@ onMounted(() => {
       playsinline
       :loop="hasPlayedOnce"
       class="h-full w-full object-cover"
-      poster="../../assets/images/Template_aanvragen.jpg"
+      poster="../../../assets/images/Template_aanvragen.jpg"
       @ended.once="handleEnded"
     />
   </button>

package/src/components/{SocialMediaType → molecules/SocialMediaType}/SocialMediaType.vue

@@ -3,9 +3,9 @@ import { computed } from 'vue'
 import TiktokSvg from '@ui-assets/svg/type_tiktok.svg'
 import PostSvg from '@ui-assets/svg/type_post.svg'
 import StorySvg from '@ui-assets/svg/type_story.svg'
-import Chip from '../Chip/Chip.vue'
+import Chip from '../../atoms/Chip/Chip.vue'
 import SocialIcons from '../SocialIcons/SocialIcons.vue'
-import Icon from '../Icon/Icon.vue'
+import Icon from '../../atoms/Icon/Icon.vue'
 
 type SocialPlatform = 'tiktok' | 'facebook' | 'instagram' | 'linkedin' | 'x' | 'twitter' | 'google'
 

package/src/components/{Source → molecules/Source}/Source.vue

@@ -1,11 +1,11 @@
 <script lang="ts">
-import imgBricr from '../../assets/images/source/bricr.png'
-import imgKolibri from '../../assets/images/source/kolibri.png'
-import imgKolibriAppExchange from '../../assets/images/source/kolibri_app_exchange.png'
-import imgRealworks from '../../assets/images/source/realworks.png'
-import imgRealworksAgendaApi from '../../assets/images/source/realworks_agenda_api.png'
-import imgRealworksApi from '../../assets/images/source/realworks_api.png'
-import imgZapier from '../../assets/images/source/zapier.png'
+import imgBricr from '../../../assets/images/source/bricr.png'
+import imgKolibri from '../../../assets/images/source/kolibri.png'
+import imgKolibriAppExchange from '../../../assets/images/source/kolibri_app_exchange.png'
+import imgRealworks from '../../../assets/images/source/realworks.png'
+import imgRealworksAgendaApi from '../../../assets/images/source/realworks_agenda_api.png'
+import imgRealworksApi from '../../../assets/images/source/realworks_api.png'
+import imgZapier from '../../../assets/images/source/zapier.png'
 
 export const SOURCE_MAP = {
   realworks: 'Realworks',
@@ -59,7 +59,7 @@ const SOUCE_ICONS: Partial<Record<keyof typeof SOURCE_MAP, SourceIcon>> = {
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import NexxtIcon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
 
 export interface NexxtSourceProps {
   source: keyof typeof SOURCE_MAP

package/src/components/{TabbedContent → molecules/TabbedContent}/TabbedContent.vue

@@ -17,18 +17,27 @@ const props = defineProps<NexxtTabbedContent>()
 const selected = defineModel<string>({ default: '' })
 const direction = ref<'forward' | 'backward'>('forward')
 
+// `tabs` accepteert zowel losse strings als { label, icon }-objecten. NexxtTabs
+// normaliseert intern naar de objectvorm maar houdt in zijn model het label
+// vast, dus hier is het label overal de sleutel: het vult het model, het bepaalt
+// de slotnaam en het is waarop de volgorde wordt vergeleken.
+const labels = computed(() => props.tabs.map((tab) => (typeof tab === 'string' ? tab : tab.label)))
+
 watch(
-  () => props.tabs,
-  (newTabs) => {
-    if (!selected.value && newTabs?.length > 0) {
-      selected.value = newTabs[0]
+  labels,
+  (next) => {
+    if (!selected.value && next.length > 0) {
+      selected.value = next[0]
     }
   },
   { immediate: true },
 )
 
 watch(selected, (next, prev) => {
-  direction.value = props.tabs.indexOf(next) > props.tabs.indexOf(prev) ? 'forward' : 'backward'
+  // Op de labels vergelijken, niet op `props.tabs`: met objecttabs vindt
+  // indexOf een label nooit en levert het twee keer -1 op, waarmee de richting
+  // altijd op backward blijft staan.
+  direction.value = labels.value.indexOf(next) > labels.value.indexOf(prev) ? 'forward' : 'backward'
 })
 
 const toSlotName = (tab: string) => tab.toLowerCase().replace(/\s+/g, '-')

package/src/components/{Tabs → molecules/Tabs}/Tabs.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, ref, useTemplateRef, watch, onMounted, nextTick } from 'vue'
-import Icon, { type NexxtIconName } from '../Icon/Icon.vue'
+import Icon, { type NexxtIconName } from '../../atoms/Icon/Icon.vue'
 
 export interface NexxtTabItem {
   label: string

package/src/components/{TemplateCard → molecules/TemplateCard}/TemplateCard.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { IconName } from '@awesome.me/kit-37b149f3ef/icons'
 import { computed } from 'vue'
-import NexxtIcon from '../Icon/Icon.vue'
-import NexxtTooltip from '../Tooltip/Tooltip.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import NexxtTooltip from '../../atoms/Tooltip/Tooltip.vue'
 
 export type NexxtTemplateCardContentFeature = 'references' | 'valuation' | 'reviews' | 'packages'
 

package/src/components/{Textarea → molecules/Textarea}/Textarea.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
 import { computed, nextTick, useAttrs, useTemplateRef, watch } from 'vue'
 
 const TEXTAREA_ID = 'textarea-' + Math.random().toString(36).slice(2, 10)
@@ -65,7 +66,13 @@ const model = defineModel<string | null>({ default: '' })
 
 const attrs = useAttrs()
 
-const wrapperAttrs = computed(() => ({ class: attrs.class, style: attrs.style }))
+// `useAttrs()` is getypeerd als Record<string, unknown>, dus class en style
+// komen er als `unknown` uit en de dts-stap wijst ze af op het wrapper-element.
+// Hier één keer terugbrengen naar wat Vue er werkelijk voor accepteert.
+const wrapperAttrs = computed(() => ({
+  class: attrs.class as HTMLAttributes['class'],
+  style: attrs.style as HTMLAttributes['style'],
+}))
 
 const controlAttrs = computed(() => {
   const rest: Record<string, unknown> = { ...attrs }

package/src/components/{TimelineEvent → molecules/TimelineEvent}/TimelineEvent.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import NexxtIcon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
 import { computed } from 'vue'
 
 defineOptions({

package/src/components/{TimelineLanes → molecules/TimelineLanes}/TimelineLanes.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import NexxtIcon from '../Icon/Icon.vue'
-import NexxtTooltip from '../Tooltip/Tooltip.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import NexxtTooltip from '../../atoms/Tooltip/Tooltip.vue'
 
 defineOptions({
   name: 'NexxtTimelineLanes',

package/src/components/{Toast → molecules/Toast}/Toast.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { onMounted, onUnmounted, computed, ref } from 'vue'
-import NexxtIcon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
 
 export type ToastVariant = 'info' | 'success' | 'warning' | 'error'
 

package/src/components/{ToggleGroup → molecules/ToggleGroup}/ToggleGroup.vue

@@ -2,8 +2,8 @@
 import { ref, useTemplateRef, watch, onMounted, nextTick } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
 import type { IconName } from '@awesome.me/kit-37b149f3ef/icons'
-import NexxtIcon from '../Icon/Icon.vue'
-import NexxtTooltip from '../Tooltip/Tooltip.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import NexxtTooltip from '../../atoms/Tooltip/Tooltip.vue'
 
 export interface NexxtToggleGroupOption {
   value: string

package/src/components/{Calendar → organisms/Calendar}/_CalendarHeader.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { format } from 'date-fns'
 import type { Locale } from 'date-fns'
-import NexxtIcon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
 
 interface CalendarHeaderProps {
   viewDate: Date

package/src/components/{Calendar → organisms/Calendar}/_CalendarTimePicker.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { setHours, setMinutes, getHours, getMinutes } from 'date-fns'
-import NexxtIcon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
 
 const props = defineProps<{
   modelValue: Date | null

package/src/components/{ColorPicker → organisms/ColorPicker}/ColorPicker.vue

@@ -15,8 +15,8 @@ import {
   normalizeColor,
   setChannelValue,
 } from 'reka-ui'
-import NexxtFloatingPanel from '../FloatingPanel/FloatingPanel.vue'
-import NexxtIcon from '../Icon/Icon.vue'
+import NexxtFloatingPanel from '../../atoms/FloatingPanel/FloatingPanel.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
 
 export type ColorFormat = 'hex' | 'hsl' | 'rgb'
 

package/src/components/{Combobox → organisms/Combobox}/Combobox.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { ref, computed, nextTick } from 'vue'
 import type { Placement } from '@floating-ui/vue'
-import NexxtButton from '../Button/Button.vue'
-import NexxtIcon from '../Icon/Icon.vue'
-import NexxtFloatingPanel from '../FloatingPanel/FloatingPanel.vue'
+import NexxtButton from '../../atoms/Button/Button.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import NexxtFloatingPanel from '../../atoms/FloatingPanel/FloatingPanel.vue'
 import ComboboxPanel from '../ComboboxPanel/ComboboxPanel.vue'
 import type { ComboboxOptions } from '../ComboboxPanel/combobox-types'
 

package/src/components/{ComboboxPanel → organisms/ComboboxPanel}/ComboboxPanel.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { ref, useTemplateRef, computed, onMounted, onUnmounted } from 'vue'
-import NexxtChip from '../Chip/Chip.vue'
-import NexxtIcon from '../Icon/Icon.vue'
-import NexxtInputField from '../InputField/InputField.vue'
+import NexxtChip from '../../atoms/Chip/Chip.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import NexxtInputField from '../../molecules/InputField/InputField.vue'
 import type { ComboboxOptions } from './combobox-types'
 
 type ComboboxPanelProps = {

package/src/components/{CountrySelect → organisms/CountrySelect}/CountrySelect.vue

@@ -19,9 +19,9 @@ export interface NexxtCountrySelectProps {
 
 <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 NexxtFloatingPanel from '../../atoms/FloatingPanel/FloatingPanel.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import NexxtInputField from '../../molecules/InputField/InputField.vue'
 import { countries } from './countries'
 
 defineOptions({ name: 'NexxtCountrySelect' })

package/src/components/{DatePicker → organisms/DatePicker}/DatePicker.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { useTemplateRef, computed, nextTick } from 'vue'
 import type { Placement } from '@floating-ui/vue'
-import NexxtButton from '../Button/Button.vue'
+import NexxtButton from '../../atoms/Button/Button.vue'
 import NexxtCalendar from '../Calendar/Calendar.vue'
-import NexxtFloatingPanel from '../FloatingPanel/FloatingPanel.vue'
+import NexxtFloatingPanel from '../../atoms/FloatingPanel/FloatingPanel.vue'
 import type { NexxtCalendarProps } from '../Calendar/calendar.types'
 
 export type CalendarAnchor = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'

package/src/components/{DropdownButton → organisms/DropdownButton}/DropdownButton.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { ref, computed, watch } from 'vue'
 import type { Placement } from '@floating-ui/vue'
-import NexxtIcon from '../Icon/Icon.vue'
-import NexxtCheckbox from '../Checkbox/Checkbox.vue'
-import NexxtFloatingPanel from '../FloatingPanel/FloatingPanel.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import NexxtCheckbox from '../../atoms/Checkbox/Checkbox.vue'
+import NexxtFloatingPanel from '../../atoms/FloatingPanel/FloatingPanel.vue'
 
 interface NexxtDropdownButton {
   label: string

package/src/components/{Header → organisms/Header}/Header.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Button from '../Button/Button.vue'
+import Button from '../../atoms/Button/Button.vue'
 
 interface NexxtHeaderProps {
   /** Optional when the title slot is used. */

package/src/components/{Modal → organisms/Modal}/Modal.vue

@@ -9,7 +9,7 @@ import {
   DialogTitle,
 } from 'reka-ui'
 import { computed } from 'vue'
-import NexxtIcon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
 
 defineOptions({
   name: 'NexxtModal',

package/src/components/{ProgressBar → organisms/ProgressBar}/ProgressBar.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, watchEffect } from 'vue'
-import AnimatedNumber from '../AnimatedNumber/AnimatedNumber.vue'
-import Icon from '../Icon/Icon.vue'
-import FloatingPanel from '../FloatingPanel/FloatingPanel.vue'
+import AnimatedNumber from '../../atoms/AnimatedNumber/AnimatedNumber.vue'
+import Icon from '../../atoms/Icon/Icon.vue'
+import FloatingPanel from '../../atoms/FloatingPanel/FloatingPanel.vue'
 
 interface NexxtProgressBarProps {
   variant?: 'stepper' | 'percentage'

package/src/components/{ReferenceCard → organisms/ReferenceCard}/ReferenceCard.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import NexxtButton from '../Button/Button.vue'
-import NexxtCheckbox from '../Checkbox/Checkbox.vue'
-import NexxtEnergyLabel, { type EnergyLabelLetter } from '../EnergyLabel/EnergyLabel.vue'
-import NexxtIcon from '../Icon/Icon.vue'
+import NexxtButton from '../../atoms/Button/Button.vue'
+import NexxtCheckbox from '../../atoms/Checkbox/Checkbox.vue'
+import NexxtEnergyLabel, { type EnergyLabelLetter } from '../../atoms/EnergyLabel/EnergyLabel.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
 
 export interface ProposalReference {
   index: number

package/src/components/{SocialMediaTemplate → organisms/SocialMediaTemplate}/SocialMediaTemplate.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, useTemplateRef } from 'vue'
-import Icon from '../Icon/Icon.vue'
+import Icon from '../../atoms/Icon/Icon.vue'
 
 interface NexxtSocialMediaTemplateProps {
   variant: 'post' | 'video' | 'slideshow'

package/src/components/{Table → organisms/Table}/Table.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup generic="TKey extends string, TRow extends Record<TKey, unknown>">
 import { computed, useTemplateRef } from 'vue'
-import Icon from '../Icon/Icon.vue'
-import Checkbox from '../Checkbox/Checkbox.vue'
+import Icon from '../../atoms/Icon/Icon.vue'
+import Checkbox from '../../atoms/Checkbox/Checkbox.vue'
 
 export interface TableColumn<K extends string = string> {
   key: K

package/src/components/{TimelinePhaseblock → organisms/TimelinePhaseblock}/TimelinePhaseblock.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import NexxtIcon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
 import { computed } from 'vue'
 
 defineOptions({
   name: 'NexxtTimelinePhaseblock',
 })
-import NexxtTimelineEvent from '../TimelineEvent/TimelineEvent.vue'
-import NexxtTimelineLanes from '../TimelineLanes/TimelineLanes.vue'
-import { PHASE_MAP, type TimelinePhase } from '../TimelineEvent/TimelineTypes'
+import NexxtTimelineEvent from '../../molecules/TimelineEvent/TimelineEvent.vue'
+import NexxtTimelineLanes from '../../molecules/TimelineLanes/TimelineLanes.vue'
+import { PHASE_MAP, type TimelinePhase } from '../../molecules/TimelineEvent/TimelineTypes'
 
 const props = defineProps<{
   phase: TimelinePhase

package/src/components/{TimelineTrack → organisms/TimelineTrack}/TimelineTrack.vue

@@ -4,9 +4,9 @@ import { computed } from 'vue'
 defineOptions({
   name: 'NexxtTimelineTrack',
 })
-import NexxtTimelineEvent from '../TimelineEvent/TimelineEvent.vue'
-import NexxtTimelineLanes from '../TimelineLanes/TimelineLanes.vue'
-import type { TimelineEvent as Event } from '../TimelineEvent/TimelineTypes'
+import NexxtTimelineEvent from '../../molecules/TimelineEvent/TimelineEvent.vue'
+import NexxtTimelineLanes from '../../molecules/TimelineLanes/TimelineLanes.vue'
+import type { TimelineEvent as Event } from '../../molecules/TimelineEvent/TimelineTypes'
 
 const props = withDefaults(
   defineProps<{

package/src/components/{Toaster → organisms/Toaster}/Toaster.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import NexxtToast from '../Toast/Toast.vue'
-import type { ToastItem } from '../Toast/Toast.vue'
+import NexxtToast from '../../molecules/Toast/Toast.vue'
+import type { ToastItem } from '../../molecules/Toast/Toast.vue'
 
 export type ToasterPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
 

package/src/components/{VideoPlayer → organisms/VideoPlayer}/VideoPlayer.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useEventListener, useFullscreen, useMediaControls } from '@vueuse/core'
 import { computed, onMounted, ref, useTemplateRef, watch } from 'vue'
-import NexxtIcon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
 
 const props = defineProps<{
   src: string