@nexxtmove/ui 1.25.0 → 1.26.0

package/dist/nuxt.js

@@ -28,7 +28,10 @@ var s = {
 	NexxtInputField: "components/molecules/InputField/InputField.vue",
 	NexxtInputSelect: "components/molecules/InputSelect/InputSelect.vue",
 	NexxtModalFooter: "components/molecules/ModalFooter/ModalFooter.vue",
+	NexxtPageCard: "components/molecules/PageCard/PageCard.vue",
 	NexxtPageContainer: "components/molecules/PageContainer/PageContainer.vue",
+	NexxtPageMockup: "components/molecules/PageMockup/PageMockup.vue",
+	NexxtPageTypeTile: "components/molecules/PageTypeTile/PageTypeTile.vue",
 	NexxtPagination: "components/molecules/Pagination/Pagination.vue",
 	NexxtPropertyCard: "components/molecules/PropertyCard/PropertyCard.vue",
 	NexxtSelect: "components/molecules/Select/Select.vue",

package/package.json

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

package/src/assets/svg/page_mockup_about.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 150">
+  <rect x="0" y="0" width="20" height="20" rx="5" fill="#E2E8F0"></rect>
+  <rect x="26" y="7" width="40" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="240" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="268" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="296" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="0" y="32" width="150" height="8" rx="4" fill="#E2E8F0"></rect>
+  <rect x="0" y="46" width="100" height="6" rx="3" fill="#CBD5E1"></rect>
+  <g>
+    <rect x="0" y="62" width="100" height="44" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="6" y="68" width="88" height="22" rx="4" fill="#FBE4E4"></rect>
+    <rect x="6" y="96" width="20" height="4" rx="2" fill="#E2E8F0"></rect>
+  </g>
+  <g>
+    <rect x="110" y="62" width="100" height="44" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="116" y="68" width="88" height="22" rx="4" fill="#FDEBDD"></rect>
+    <rect x="116" y="96" width="20" height="4" rx="2" fill="#E2E8F0"></rect>
+  </g>
+  <g>
+    <rect x="220" y="62" width="100" height="44" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="226" y="68" width="88" height="22" rx="4" fill="#E3E8FD"></rect>
+    <rect x="226" y="96" width="20" height="4" rx="2" fill="#E2E8F0"></rect>
+  </g>
+  <rect x="0" y="116" width="320" height="14" rx="4" fill="#7C7CF0"></rect>
+  <rect x="8" y="121" width="60" height="4" rx="2" fill="#FFFFFF"></rect>
+  <rect x="296" y="121" width="16" height="4" rx="2" fill="#FFFFFF"></rect>
+</svg>

package/src/assets/svg/page_mockup_introduction.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 150">
+  <rect x="0" y="0" width="20" height="20" rx="5" fill="#E2E8F0"></rect>
+  <rect x="26" y="7" width="40" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="240" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="268" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="296" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="0" y="118" width="150" height="8" rx="4" fill="#E2E8F0"></rect>
+  <rect x="0" y="132" width="100" height="6" rx="3" fill="#CBD5E1"></rect>
+</svg>

package/src/assets/svg/page_mockup_other.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 150">
+  <rect x="0" y="0" width="20" height="20" rx="5" fill="#E2E8F0"></rect>
+  <rect x="26" y="7" width="40" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="240" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="268" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="296" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="0" y="34" width="180" height="10" rx="4" fill="#E2E8F0"></rect>
+  <rect x="0" y="58" width="320" height="6" rx="3" fill="#CBD5E1"></rect>
+  <rect x="0" y="72" width="320" height="6" rx="3" fill="#CBD5E1"></rect>
+  <rect x="0" y="86" width="320" height="6" rx="3" fill="#CBD5E1"></rect>
+  <rect x="0" y="100" width="320" height="6" rx="3" fill="#CBD5E1"></rect>
+  <rect x="0" y="114" width="160" height="6" rx="3" fill="#CBD5E1"></rect>
+</svg>

package/src/assets/svg/page_mockup_packages.svg

@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 150">
+  <rect x="0" y="0" width="20" height="20" rx="5" fill="#E2E8F0"></rect>
+  <rect x="26" y="7" width="40" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="240" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="268" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="296" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <g>
+    <rect x="0" y="34" width="100" height="100" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="10" y="44" width="40" height="6" rx="3" fill="#E2E8F0"></rect>
+    <rect x="10" y="58" width="60" height="10" rx="3" fill="#CBD5E1"></rect>
+    <rect x="10" y="88" width="70" height="4" rx="2" fill="#E2E8F0"></rect>
+    <rect x="10" y="100" width="70" height="4" rx="2" fill="#E2E8F0"></rect>
+    <rect x="10" y="112" width="70" height="4" rx="2" fill="#E2E8F0"></rect>
+    <rect x="10" y="120" width="80" height="8" rx="4" fill="#E2E8F0"></rect>
+  </g>
+  <g>
+    <rect x="110" y="34" width="100" height="100" rx="6" fill="#E3E3FB" stroke="#7C7CF0"></rect>
+    <rect x="120" y="44" width="40" height="6" rx="3" fill="#7C7CF0"></rect>
+    <rect x="120" y="58" width="60" height="10" rx="3" fill="#CBD5E1"></rect>
+    <rect x="120" y="88" width="70" height="4" rx="2" fill="#E2E8F0"></rect>
+    <rect x="120" y="100" width="70" height="4" rx="2" fill="#E2E8F0"></rect>
+    <rect x="120" y="112" width="70" height="4" rx="2" fill="#E2E8F0"></rect>
+    <rect x="120" y="120" width="80" height="8" rx="4" fill="#7C7CF0"></rect>
+  </g>
+  <g>
+    <rect x="220" y="34" width="100" height="100" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="230" y="44" width="40" height="6" rx="3" fill="#E2E8F0"></rect>
+    <rect x="230" y="58" width="60" height="10" rx="3" fill="#CBD5E1"></rect>
+    <rect x="230" y="88" width="70" height="4" rx="2" fill="#E2E8F0"></rect>
+    <rect x="230" y="100" width="70" height="4" rx="2" fill="#E2E8F0"></rect>
+    <rect x="230" y="112" width="70" height="4" rx="2" fill="#E2E8F0"></rect>
+    <rect x="230" y="120" width="80" height="8" rx="4" fill="#E2E8F0"></rect>
+  </g>
+</svg>

package/src/assets/svg/page_mockup_references.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 150">
+  <rect x="0" y="0" width="20" height="20" rx="5" fill="#E2E8F0"></rect>
+  <rect x="26" y="7" width="40" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="240" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="268" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="296" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <g>
+    <rect x="0" y="34" width="155" height="64" rx="6" fill="#E3E8FD"></rect>
+    <rect x="0" y="106" width="90" height="7" rx="3" fill="#E2E8F0"></rect>
+    <rect x="0" y="118" width="60" height="5" rx="2" fill="#CBD5E1"></rect>
+    <rect x="115" y="106" width="40" height="12" rx="6" fill="#E3E3FB"></rect>
+  </g>
+  <g>
+    <rect x="165" y="34" width="155" height="64" rx="6" fill="#E3E8FD"></rect>
+    <rect x="165" y="106" width="90" height="7" rx="3" fill="#E2E8F0"></rect>
+    <rect x="165" y="118" width="60" height="5" rx="2" fill="#CBD5E1"></rect>
+    <rect x="280" y="106" width="40" height="12" rx="6" fill="#E3E3FB"></rect>
+  </g>
+</svg>

package/src/assets/svg/page_mockup_reviews.svg

@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 150">
+  <rect x="0" y="0" width="20" height="20" rx="5" fill="#E2E8F0"></rect>
+  <rect x="26" y="7" width="40" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="240" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="268" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="296" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <g>
+    <rect x="0" y="34" width="100" height="96" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="16" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="28" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="40" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="52" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="64" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="10" y="64" width="80" height="5" rx="2" fill="#E2E8F0"></rect>
+    <rect x="10" y="76" width="80" height="5" rx="2" fill="#E2E8F0"></rect>
+    <rect x="10" y="88" width="50" height="5" rx="2" fill="#E2E8F0"></rect>
+    <circle cx="20" cy="114" r="8" fill="#FBE4E4"></circle>
+    <rect x="34" y="111" width="40" height="6" rx="3" fill="#CBD5E1"></rect>
+  </g>
+  <g>
+    <rect x="110" y="34" width="100" height="96" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="126" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="138" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="150" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="162" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="174" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="120" y="64" width="80" height="5" rx="2" fill="#E2E8F0"></rect>
+    <rect x="120" y="76" width="80" height="5" rx="2" fill="#E2E8F0"></rect>
+    <rect x="120" y="88" width="50" height="5" rx="2" fill="#E2E8F0"></rect>
+    <circle cx="130" cy="114" r="8" fill="#FDEBDD"></circle>
+    <rect x="144" y="111" width="40" height="6" rx="3" fill="#CBD5E1"></rect>
+  </g>
+  <g>
+    <rect x="220" y="34" width="100" height="96" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="236" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="248" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="260" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="272" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="284" y="44" width="8" height="8" rx="2" fill="#F6D97A"></rect>
+    <rect x="230" y="64" width="80" height="5" rx="2" fill="#E2E8F0"></rect>
+    <rect x="230" y="76" width="80" height="5" rx="2" fill="#E2E8F0"></rect>
+    <rect x="230" y="88" width="50" height="5" rx="2" fill="#E2E8F0"></rect>
+    <circle cx="240" cy="114" r="8" fill="#E3E8FD"></circle>
+    <rect x="254" y="111" width="40" height="6" rx="3" fill="#CBD5E1"></rect>
+  </g>
+</svg>

package/src/assets/svg/page_mockup_services.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 150">
+  <rect x="0" y="0" width="20" height="20" rx="5" fill="#E2E8F0"></rect>
+  <rect x="26" y="7" width="40" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="240" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="268" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="296" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <g>
+    <rect x="0" y="34" width="24" height="24" rx="6" fill="#FBE4E4"></rect>
+    <rect x="34" y="38" width="140" height="7" rx="3" fill="#E2E8F0"></rect>
+    <rect x="34" y="50" width="220" height="5" rx="2" fill="#CBD5E1"></rect>
+  </g>
+  <g>
+    <rect x="0" y="70" width="24" height="24" rx="6" fill="#FDEBDD"></rect>
+    <rect x="34" y="74" width="140" height="7" rx="3" fill="#E2E8F0"></rect>
+    <rect x="34" y="86" width="220" height="5" rx="2" fill="#CBD5E1"></rect>
+  </g>
+  <g>
+    <rect x="0" y="106" width="24" height="24" rx="6" fill="#E3E8FD"></rect>
+    <rect x="34" y="110" width="140" height="7" rx="3" fill="#E2E8F0"></rect>
+    <rect x="34" y="122" width="220" height="5" rx="2" fill="#CBD5E1"></rect>
+  </g>
+</svg>

package/src/assets/svg/page_mockup_valuation.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 150">
+  <rect x="0" y="0" width="20" height="20" rx="5" fill="#E2E8F0"></rect>
+  <rect x="26" y="7" width="40" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="240" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="268" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="296" y="7" width="22" height="6" rx="3" fill="#E2E8F0"></rect>
+  <rect x="0" y="32" width="150" height="8" rx="4" fill="#E2E8F0"></rect>
+  <rect x="0" y="46" width="100" height="6" rx="3" fill="#CBD5E1"></rect>
+  <g>
+    <rect x="0" y="62" width="100" height="44" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="6" y="68" width="88" height="22" rx="4" fill="#FBE4E4"></rect>
+    <rect x="6" y="96" width="20" height="4" rx="2" fill="#E2E8F0"></rect>
+  </g>
+  <g>
+    <rect x="110" y="62" width="100" height="44" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="116" y="68" width="88" height="22" rx="4" fill="#FDEBDD"></rect>
+    <rect x="116" y="96" width="20" height="4" rx="2" fill="#E2E8F0"></rect>
+  </g>
+  <g>
+    <rect x="220" y="62" width="100" height="44" rx="6" fill="#FFFFFF" stroke="#E2E8F0"></rect>
+    <rect x="226" y="68" width="88" height="22" rx="4" fill="#E3E8FD"></rect>
+    <rect x="226" y="96" width="20" height="4" rx="2" fill="#E2E8F0"></rect>
+  </g>
+</svg>

package/src/components/molecules/PageCard/PageCard.vue

@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import NexxtIcon, { type NexxtIconName } from '../../atoms/Icon/Icon.vue'
+import NexxtPageMockup, { type NexxtPageMockupType } from '../PageMockup/PageMockup.vue'
+
+export interface NexxtPageCardProps {
+  /** Page name, shown in the footer. Truncated on one line. */
+  title: string
+  /** Icon for the page type, shown before the title. */
+  icon?: NexxtIconName
+  /** Draws the sketch for this page type in the preview area. The `preview` slot wins when both are given. */
+  mockup?: NexxtPageMockupType
+  /** Lays a full-card button over the content that emits `select`. Off keeps the card inert. */
+  selectable?: boolean
+  /** Whether this card is the current one: draws the blue border. Only does something with `selectable`. */
+  selected?: boolean
+  /** The card is being dragged: dims it and draws the blue border, so the list shows where it came from. */
+  dragging?: boolean
+}
+
+export type NexxtPageCardSlots = {
+  /** The preview area above the footer, for a mockup or thumbnail of the page. Empty shows a plain surface. */
+  preview?(): unknown
+  /** Right side of the footer, for a menu. Kept above the select button so a press there never selects. */
+  actions?(): unknown
+}
+
+defineOptions({ name: 'NexxtPageCard' })
+
+const props = withDefaults(defineProps<NexxtPageCardProps>(), {
+  icon: undefined,
+  mockup: undefined,
+  selectable: false,
+  selected: false,
+  dragging: false,
+})
+
+const emit = defineEmits<{
+  /** The card was chosen. No payload: the consumer knows which page it rendered. */
+  select: []
+}>()
+
+// The heading may not sit inside a button, so like TemplateCard the select button is a stretched
+// sibling under the content, with the actions layered above it
+defineSlots<NexxtPageCardSlots>()
+
+const onSelect = () => {
+  if (props.selectable) emit('select')
+}
+</script>
+
+<template>
+  <div
+    class="relative flex w-full flex-col overflow-hidden rounded-xl border bg-white transition-[border-color,opacity] duration-200 ease-out"
+    :class="[
+      (selectable && selected) || dragging ? 'border-cornflower-blue-500' : 'border-gray-200',
+      selectable && !selected && !dragging && 'hover:border-gray-300',
+      dragging && 'opacity-60',
+    ]"
+  >
+    <div
+      class="relative z-10 h-52 overflow-hidden border-b border-gray-200 bg-white p-3"
+      :class="selectable && 'pointer-events-none'"
+    >
+      <slot name="preview">
+        <NexxtPageMockup v-if="mockup" :type="mockup" />
+      </slot>
+    </div>
+
+    <div class="relative flex items-center gap-2.5 px-4 py-3">
+      <div
+        class="relative z-10 flex min-w-0 flex-1 items-center gap-2.5"
+        :class="selectable && 'pointer-events-none'"
+      >
+        <NexxtIcon v-if="icon" :name="icon" class="shrink-0 text-lg text-gray-500" />
+        <h3 class="truncate body-semibold text-gray-900">{{ title }}</h3>
+      </div>
+
+      <div v-if="$slots.actions" class="relative z-20 flex shrink-0 items-center">
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <button
+      v-if="selectable"
+      type="button"
+      :aria-label="title"
+      :aria-current="selected ? 'true' : undefined"
+      class="absolute inset-0 cursor-pointer rounded-xl focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-cornflower-blue-500"
+      @click="onSelect"
+    />
+  </div>
+</template>

package/src/components/molecules/PageMockup/PageMockup.vue

@@ -0,0 +1,52 @@
+<script lang="ts">
+export const PAGE_MOCKUP_TYPES = [
+  'introduction',
+  'about',
+  'valuation',
+  'services',
+  'packages',
+  'references',
+  'reviews',
+  'other',
+] as const
+
+export type NexxtPageMockupType = (typeof PAGE_MOCKUP_TYPES)[number]
+</script>
+
+<script lang="ts" setup>
+import { computed, type Component } from 'vue'
+import IntroductionSvg from '@ui-assets/svg/page_mockup_introduction.svg'
+import AboutSvg from '@ui-assets/svg/page_mockup_about.svg'
+import ValuationSvg from '@ui-assets/svg/page_mockup_valuation.svg'
+import ServicesSvg from '@ui-assets/svg/page_mockup_services.svg'
+import PackagesSvg from '@ui-assets/svg/page_mockup_packages.svg'
+import ReferencesSvg from '@ui-assets/svg/page_mockup_references.svg'
+import ReviewsSvg from '@ui-assets/svg/page_mockup_reviews.svg'
+import OtherSvg from '@ui-assets/svg/page_mockup_other.svg'
+
+export interface NexxtPageMockupProps {
+  /** Which kind of proposal page to sketch. */
+  type: NexxtPageMockupType
+}
+
+defineOptions({ name: 'NexxtPageMockup' })
+
+const props = defineProps<NexxtPageMockupProps>()
+
+const SKETCHES: Record<NexxtPageMockupType, Component> = {
+  introduction: IntroductionSvg,
+  about: AboutSvg,
+  valuation: ValuationSvg,
+  services: ServicesSvg,
+  packages: PackagesSvg,
+  references: ReferencesSvg,
+  reviews: ReviewsSvg,
+  other: OtherSvg,
+}
+
+const sketch = computed(() => SKETCHES[props.type])
+</script>
+
+<template>
+  <component :is="sketch" class="size-full" aria-hidden="true" />
+</template>

package/src/components/molecules/PageTypeTile/PageTypeTile.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import NexxtIcon, { type NexxtIconName } from '../../atoms/Icon/Icon.vue'
+
+export interface NexxtPageTypeTileProps {
+  /** What the tile stands for, e.g. a page type. Shown under the icon. */
+  label: string
+  icon: NexxtIconName
+  /** The tile is being dragged: draws the blue border. The consumer makes it draggable. */
+  dragging?: boolean
+}
+
+defineOptions({ name: 'NexxtPageTypeTile' })
+
+withDefaults(defineProps<NexxtPageTypeTileProps>(), {
+  dragging: false,
+})
+
+const emit = defineEmits<{
+  /** The tile was clicked, as opposed to dragged. */
+  select: []
+}>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="flex w-full cursor-grab flex-col items-center gap-2 rounded-xl border bg-white px-3 py-5 text-center transition-colors duration-200 ease-out hover:bg-gray-50 focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-500 active:cursor-grabbing"
+    :class="dragging ? 'border-cornflower-blue-500' : 'border-gray-200 hover:border-gray-300'"
+    @click="emit('select')"
+  >
+    <NexxtIcon :name="icon" class="text-xl text-gray-700" />
+    <span class="extra-small-semibold text-gray-900">{{ label }}</span>
+  </button>
+</template>

package/src/components.json

@@ -25,7 +25,10 @@
   "NexxtInputField": "components/molecules/InputField/InputField.vue",
   "NexxtInputSelect": "components/molecules/InputSelect/InputSelect.vue",
   "NexxtModalFooter": "components/molecules/ModalFooter/ModalFooter.vue",
+  "NexxtPageCard": "components/molecules/PageCard/PageCard.vue",
   "NexxtPageContainer": "components/molecules/PageContainer/PageContainer.vue",
+  "NexxtPageMockup": "components/molecules/PageMockup/PageMockup.vue",
+  "NexxtPageTypeTile": "components/molecules/PageTypeTile/PageTypeTile.vue",
   "NexxtPagination": "components/molecules/Pagination/Pagination.vue",
   "NexxtPropertyCard": "components/molecules/PropertyCard/PropertyCard.vue",
   "NexxtSelect": "components/molecules/Select/Select.vue",

package/src/index.ts

@@ -13,6 +13,11 @@ export type { EnergyLabelLetter } from './components/atoms/EnergyLabel/EnergyLab
 export type { IconType, NexxtIconName } from './components/atoms/Icon/Icon.vue'
 export type { CustomIconName } from './components/atoms/Icon/customIcons'
 export type { NexxtTabItem } from './components/molecules/Tabs/Tabs.vue'
+export type {
+  NexxtPageCardProps,
+  NexxtPageCardSlots,
+} from './components/molecules/PageCard/PageCard.vue'
+export type { NexxtPageMockupType } from './components/molecules/PageMockup/PageMockup.vue'
 export type {
   EditorAlignItemsMessages,
   EditorAlignItemsValue,
@@ -95,7 +100,10 @@ export { default as NexxtInputSelect } from './components/molecules/InputSelect/
 export { default as NexxtLoader } from './components/atoms/Loader/Loader.vue'
 export { default as NexxtModal } from './components/organisms/Modal/Modal.vue'
 export { default as NexxtModalFooter } from './components/molecules/ModalFooter/ModalFooter.vue'
+export { default as NexxtPageCard } from './components/molecules/PageCard/PageCard.vue'
 export { default as NexxtPageContainer } from './components/molecules/PageContainer/PageContainer.vue'
+export { default as NexxtPageMockup } from './components/molecules/PageMockup/PageMockup.vue'
+export { default as NexxtPageTypeTile } from './components/molecules/PageTypeTile/PageTypeTile.vue'
 export { default as NexxtPagination } from './components/molecules/Pagination/Pagination.vue'
 export { default as NexxtPresenceIndicator } from './components/atoms/PresenceIndicator/PresenceIndicator.vue'
 export { default as NexxtProgressBar } from './components/organisms/ProgressBar/ProgressBar.vue'