@nexxtmove/ui 0.1.31 → 0.1.33

package/dist/nuxt.js

@@ -1,5 +1,5 @@
 import { defineNuxtModule as c, addComponent as s, addTemplate as a } from "@nuxt/kit";
-const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Avatar/Avatar.vue", x = "components/Button/Button.vue", u = "components/Calendar/Calendar.vue", p = "components/Checkbox/Checkbox.vue", l = "components/Chip/Chip.vue", r = "components/CustomerJourneyTile/CustomerJourneyTile.vue", d = "components/DatePicker/DatePicker.vue", v = "components/DropdownButton/DropdownButton.vue", N = "components/Header/Header.vue", T = "components/Icon/Icon.vue", C = "components/InfoBlock/InfoBlock.vue", S = "components/ProgressBar/ProgressBar.vue", b = "components/SocialIcons/SocialIcons.vue", f = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", h = "components/SocialMediaTemplate/SocialMediaTemplate.vue", k = "components/SocialMediaType/SocialMediaType.vue", B = "components/StepperHeader/StepperHeader.vue", M = "components/Table/Table.vue", P = "components/TimelineEvent/TimelineEvent.vue", I = "components/TimelinePhaseblock/TimelinePhaseblock.vue", y = "components/Tooltip/Tooltip.vue", A = {
+const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Avatar/Avatar.vue", x = "components/Button/Button.vue", u = "components/Calendar/Calendar.vue", p = "components/Checkbox/Checkbox.vue", l = "components/Chip/Chip.vue", r = "components/CustomerJourneyTile/CustomerJourneyTile.vue", d = "components/DatePicker/DatePicker.vue", v = "components/DropdownButton/DropdownButton.vue", N = "components/Header/Header.vue", T = "components/Icon/Icon.vue", C = "components/InfoBlock/InfoBlock.vue", S = "components/Pagination/Pagination.vue", b = "components/ProgressBar/ProgressBar.vue", f = "components/SocialIcons/SocialIcons.vue", h = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", P = "components/SocialMediaTemplate/SocialMediaTemplate.vue", k = "components/SocialMediaType/SocialMediaType.vue", B = "components/StepperHeader/StepperHeader.vue", M = "components/Table/Table.vue", I = "components/TimelineEvent/TimelineEvent.vue", g = "components/TimelinePhaseblock/TimelinePhaseblock.vue", y = "components/Tooltip/Tooltip.vue", A = {
   NexxtAnimatedNumber: i,
   NexxtAvatar: m,
   NexxtButton: x,
@@ -12,15 +12,16 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Avatar
   NexxtHeader: N,
   NexxtIcon: T,
   NexxtInfoBlock: C,
-  NexxtProgressBar: S,
-  NexxtSocialIcons: b,
-  NexxtSocialMediaCustomTemplate: f,
-  NexxtSocialMediaTemplate: h,
+  NexxtPagination: S,
+  NexxtProgressBar: b,
+  NexxtSocialIcons: f,
+  NexxtSocialMediaCustomTemplate: h,
+  NexxtSocialMediaTemplate: P,
   NexxtSocialMediaType: k,
   NexxtStepperHeader: B,
   NexxtTable: M,
-  NexxtTimelineEvent: P,
-  NexxtTimelinePhaseblock: I,
+  NexxtTimelineEvent: I,
+  NexxtTimelinePhaseblock: g,
   NexxtTooltip: y
 }, H = c({
   meta: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/Calendar/_CalendarDayView.vue

@@ -4,7 +4,7 @@ import { isSameDay, isSameMonth, format } from 'date-fns'
 import { toZonedTime } from 'date-fns-tz'
 import type { Locale } from 'date-fns'
 
-interface CalendarDayViewProps {
+export interface CalendarDayViewProps {
   viewDate: Date
   calendarDays: Date[]
   modelValue: Date | null

package/src/components/Chip/Chip.vue

@@ -1,8 +1,8 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 
 interface NexxtChipProps {
-  variant?: 'default' | 'warning' | 'success' | 'danger'
+  variant?: 'default' | 'warning' | 'success' | 'danger' | 'ghost'
 }
 
 defineOptions({
@@ -19,6 +19,8 @@ const backgroundColor = computed(() => {
       return 'bg-green-500'
     case 'danger':
       return 'bg-brick-500'
+    case 'ghost':
+      return 'bg-cornflower-blue-50'
     default:
       return 'bg-cornflower-blue-600'
   }
@@ -28,9 +30,12 @@ const backgroundColor = computed(() => {
 <template>
   <span
     class="inline-flex h-5 flex-col items-center justify-center gap-2.5 rounded-[200px] px-4"
-    :class="backgroundColor"
+    :class="[backgroundColor, variant === 'ghost' ? 'border border-cornflower-blue-500' : '']"
   >
-    <span class="justify-start text-center extra-small-semibold text-white">
+    <span
+      class="justify-start text-center extra-small-semibold"
+      :class="variant === 'ghost' ? 'text-cornflower-blue-500' : 'text-white'"
+    >
       <slot>Chip</slot>
     </span>
   </span>

package/src/components/Pagination/Pagination.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import NexxtIcon from '../Icon/Icon.vue'
+import {
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationLast,
+  PaginationList,
+  PaginationListItem,
+  PaginationNext,
+  PaginationPrev,
+  PaginationRoot,
+} from 'reka-ui'
+
+interface NexxtPaginationProps {
+  total: number
+  itemsPerPage?: number
+  siblingCount?: number
+  showEdges?: boolean
+  disabled?: boolean
+}
+
+defineOptions({ name: 'NexxtPagination' })
+
+const page = defineModel<number>('page', { default: 1 })
+
+const {
+  total,
+  itemsPerPage = 10,
+  siblingCount = 1,
+  showEdges = true,
+  disabled = false,
+} = defineProps<NexxtPaginationProps>()
+</script>
+
+<template>
+  <PaginationRoot
+    :total="total"
+    :items-per-page="itemsPerPage"
+    :sibling-count="siblingCount"
+    v-model:page="page"
+    :show-edges="showEdges"
+  >
+    <PaginationList
+      v-slot="{ items }"
+      class="flex items-center gap-1 text-gray-700 transition"
+      :class="{ 'pointer-events-none opacity-50': disabled }"
+    >
+      <PaginationFirst
+        class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
+        :disabled="disabled"
+      >
+        <NexxtIcon name="angles-left" />
+      </PaginationFirst>
+      <PaginationPrev
+        class="mr-4 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
+        :disabled="disabled"
+      >
+        <NexxtIcon name="chevron-left" />
+      </PaginationPrev>
+      <template v-for="(page, index) in items">
+        <PaginationListItem
+          v-if="page.type === 'page'"
+          :key="index"
+          :value="page.value"
+          :disabled="disabled"
+          class="h-8 w-8 cursor-pointer rounded-lg border border-gray-200 transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed data-selected:border-cornflower-blue-500 data-selected:bg-cornflower-blue-500 data-selected:text-white data-selected:shadow-sm"
+        >
+          {{ page.value }}
+        </PaginationListItem>
+        <PaginationEllipsis
+          v-else
+          :key="page.type"
+          :index="index"
+          class="flex h-8 w-8 items-center justify-center"
+        >
+          &#8230;
+        </PaginationEllipsis>
+      </template>
+      <PaginationNext
+        class="ml-4 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
+        :disabled="disabled"
+      >
+        <NexxtIcon name="chevron-right" />
+      </PaginationNext>
+      <PaginationLast
+        class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
+        :disabled="disabled"
+      >
+        <NexxtIcon name="angles-right" />
+      </PaginationLast>
+    </PaginationList>
+  </PaginationRoot>
+</template>

package/src/components/Table/Table.vue

@@ -10,7 +10,7 @@ export interface TableColumn<K extends string = string> {
   width?: string
 }
 
-interface NexxtTableProps {
+export interface NexxtTableProps<TKey extends string = string> {
   columns: TableColumn<TKey>[]
   rows: Record<TKey, unknown>[]
   sortKey?: TKey
@@ -23,7 +23,7 @@ const INTERACTIVE = ['a', 'button', 'input', 'select', 'textarea', 'label']
 
 defineOptions({ name: 'NexxtTable' })
 
-const props = withDefaults(defineProps<NexxtTableProps>(), {
+const props = withDefaults(defineProps<NexxtTableProps<TKey>>(), {
   sortDirection: 'asc',
 })
 const emit = defineEmits<{

package/src/components.json

@@ -11,6 +11,7 @@
   "NexxtHeader": "components/Header/Header.vue",
   "NexxtIcon": "components/Icon/Icon.vue",
   "NexxtInfoBlock": "components/InfoBlock/InfoBlock.vue",
+  "NexxtPagination": "components/Pagination/Pagination.vue",
   "NexxtProgressBar": "components/ProgressBar/ProgressBar.vue",
   "NexxtSocialIcons": "components/SocialIcons/SocialIcons.vue",
   "NexxtSocialMediaCustomTemplate": "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue",

package/src/index.ts

@@ -11,6 +11,7 @@ export { default as NexxtDropdownButton } from './components/DropdownButton/Drop
 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 NexxtPagination } from './components/Pagination/Pagination.vue'
 export { default as NexxtProgressBar } from './components/ProgressBar/ProgressBar.vue'
 export { default as NexxtSocialIcons } from './components/SocialIcons/SocialIcons.vue'
 export { default as NexxtSocialMediaCustomTemplate } from './components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue'

package/src/components/AnimatedNumber/AnimatedNumber.stories.ts

@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import AnimatedNumber from './AnimatedNumber.vue'
-
-export default {
-  title: 'Components/Atoms/Animated Number',
-  component: AnimatedNumber,
-} satisfies Meta<typeof AnimatedNumber>
-
-type Story = StoryObj<typeof AnimatedNumber>
-
-export const Default: Story = {
-  args: {
-    value: 4,
-  },
-}

package/src/components/AnimatedNumber/AnimatedNumber.test.ts

@@ -1,56 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import AnimatedNumber from './AnimatedNumber.vue'
-
-describe('AnimatedNumber', () => {
-  it('renders the number correctly', () => {
-    const wrapper = mount(AnimatedNumber, {
-      props: {
-        value: 123,
-      },
-    })
-
-    expect(wrapper.text()).toBe('123')
-    expect(wrapper.attributes('aria-label')).toBe('123')
-  })
-
-  it('splits the number into digits', () => {
-    const wrapper = mount(AnimatedNumber, {
-      props: {
-        value: 45,
-      },
-    })
-
-    const digitWrappers = wrapper.findAll('.relative.inline-flex.h-\\[1\\.5em\\]')
-    expect(digitWrappers).toHaveLength(2)
-    expect(digitWrappers.at(0)?.text()).toBe('4')
-    expect(digitWrappers.at(1)?.text()).toBe('5')
-  })
-
-  it('handles single digit values', () => {
-    const wrapper = mount(AnimatedNumber, {
-      props: {
-        value: 7,
-      },
-    })
-
-    const digitWrappers = wrapper.findAll('.relative.inline-flex.h-\\[1\\.5em\\]')
-    expect(digitWrappers).toHaveLength(1)
-    expect(digitWrappers.at(0)?.text()).toBe('7')
-  })
-
-  it('updates digits when value changes', async () => {
-    const wrapper = mount(AnimatedNumber, {
-      props: {
-        value: 9,
-      },
-    })
-
-    expect(wrapper.text()).toBe('9')
-
-    await wrapper.setProps({ value: 10 })
-
-    expect(wrapper.text()).toBe('10')
-    expect(wrapper.findAll('.relative.inline-flex.h-\\[1\\.5em\\]')).toHaveLength(2)
-  })
-})

package/src/components/Avatar/Avatar.stories.ts

@@ -1,28 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import Avatar from './Avatar.vue'
-
-export default {
-  title: 'Components/Atoms/Avatar',
-  component: Avatar,
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System',
-    },
-  },
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
-    },
-  },
-} satisfies Meta<typeof Avatar>
-
-type Story = StoryObj<typeof Avatar>
-
-export const Default: Story = {
-  args: {
-    name: 'Peter van der Sloot',
-    size: 'sm',
-  },
-}

package/src/components/Avatar/Avatar.test.ts

@@ -1,55 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import Avatar from './Avatar.vue'
-
-describe('Avatar', () => {
-  it('generates 2 character initials from name with multiple words', () => {
-    const wrapper = mount(Avatar, {
-      props: {
-        name: 'Peter Vink',
-      },
-    })
-
-    expect(wrapper.text()).toContain('PV')
-  })
-
-  it('generates 2 character initials from name with single word', () => {
-    const wrapper = mount(Avatar, {
-      props: {
-        name: 'Peter',
-      },
-    })
-
-    expect(wrapper.text()).toContain('PE')
-  })
-
-  it('generates 2 character initials picking first and last words for names with tussenvoegsels', () => {
-    const wrapper = mount(Avatar, {
-      props: {
-        name: 'Peter van der Sloot',
-      },
-    })
-
-    expect(wrapper.text()).toContain('PS')
-  })
-
-  it('handles empty strings gracefully by returning no text', () => {
-    const wrapper = mount(Avatar, {
-      props: {
-        name: '',
-      },
-    })
-
-    expect(wrapper.text()).toBe('')
-  })
-
-  it('handles whitespace-only strings gracefully by returning no text', () => {
-    const wrapper = mount(Avatar, {
-      props: {
-        name: '   ',
-      },
-    })
-
-    expect(wrapper.text()).toBe('')
-  })
-})

package/src/components/Button/Button.stories.ts

@@ -1,212 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import Button from './Button.vue'
-
-export default {
-  title: 'Components/Atoms/Button',
-  component: Button,
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System?node-id=167-357&t=CbHvOQfEMIr7M5mO-4',
-    },
-  },
-} satisfies Meta<typeof Button>
-
-type Story = StoryObj<typeof Button>
-
-export const Primary: Story = {
-  args: {
-    default: 'Button',
-    variant: 'primary',
-    iconRight: false,
-    disabled: false,
-    loading: false,
-  },
-}
-
-export const Secondary: Story = {
-  args: {
-    variant: 'secondary',
-    default: 'Secondary Button',
-  },
-}
-
-export const Success: Story = {
-  args: {
-    variant: 'success',
-    default: 'Success Button',
-  },
-}
-
-export const Danger: Story = {
-  args: {
-    variant: 'danger',
-    default: 'Danger Button',
-  },
-}
-
-export const Link: Story = {
-  args: {
-    variant: 'link',
-    default: 'Link Button',
-  },
-}
-
-export const WithIcon: Story = {
-  args: {
-    icon: 'star',
-    default: 'With Icon',
-  },
-}
-
-export const WithIconRight: Story = {
-  args: {
-    icon: 'arrow-right',
-    iconRight: true,
-    default: 'Next Step',
-  },
-}
-
-export const WithIconSecondary: Story = {
-  args: {
-    variant: 'secondary',
-    icon: 'download',
-    default: 'Download',
-  },
-}
-
-export const WithIconSuccess: Story = {
-  args: {
-    variant: 'success',
-    icon: 'check',
-    default: 'Success Button',
-  },
-}
-
-export const WithIconDanger: Story = {
-  args: {
-    variant: 'danger',
-    icon: 'trash',
-    default: 'Danger Button',
-  },
-}
-
-export const WithIconLink: Story = {
-  args: {
-    variant: 'link',
-    icon: 'download',
-    default: 'Download',
-  },
-}
-
-export const IconOnly: Story = {
-  args: {
-    icon: 'plus',
-  },
-}
-
-export const IconOnlySecondary: Story = {
-  args: {
-    variant: 'secondary',
-    icon: 'plus',
-  },
-}
-
-export const IconOnlySuccess: Story = {
-  args: {
-    variant: 'success',
-    icon: 'check',
-  },
-}
-
-export const IconOnlyDanger: Story = {
-  args: {
-    variant: 'danger',
-    icon: 'trash',
-  },
-}
-
-export const IconOnlyLink: Story = {
-  args: {
-    variant: 'link',
-    icon: 'plus',
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    default: 'Disabled',
-    disabled: true,
-  },
-}
-
-export const DisabledSecondary: Story = {
-  args: {
-    variant: 'secondary',
-    default: 'Secondary Disabled',
-    disabled: true,
-  },
-}
-
-export const DisabledSuccess: Story = {
-  args: {
-    variant: 'success',
-    default: 'Success Disabled',
-    disabled: true,
-  },
-}
-
-export const DisabledDanger: Story = {
-  args: {
-    variant: 'danger',
-    default: 'Danger Disabled',
-    disabled: true,
-  },
-}
-
-export const DisabledLink: Story = {
-  args: {
-    variant: 'link',
-    default: 'Link Disabled',
-    disabled: true,
-  },
-}
-
-export const Loading: Story = {
-  args: {
-    default: 'Loading',
-    loading: true,
-  },
-}
-
-export const LoadingSecondary: Story = {
-  args: {
-    variant: 'secondary',
-    default: 'Loading',
-    loading: true,
-  },
-}
-
-export const LoadingSuccess: Story = {
-  args: {
-    variant: 'success',
-    default: 'Loading',
-    loading: true,
-  },
-}
-
-export const LoadingDanger: Story = {
-  args: {
-    variant: 'danger',
-    default: 'Loading',
-    loading: true,
-  },
-}
-
-export const LoadingLink: Story = {
-  args: {
-    variant: 'link',
-    default: 'Link Button',
-    loading: true,
-  },
-}