@nexxtmove/ui 0.1.50 → 0.1.52

package/dist/nuxt.js

@@ -1,36 +1,38 @@
 import { defineNuxtModule as c, addComponent as s, addTemplate as a } from "@nuxt/kit";
-const i = "components/AnimatedNumber/AnimatedNumber.vue", x = "components/Avatar/Avatar.vue", m = "components/Button/Button.vue", u = "components/Calendar/Calendar.vue", p = "components/Checkbox/Checkbox.vue", l = "components/Chip/Chip.vue", r = "components/Combobox/Combobox.vue", d = "components/CustomerJourneyTile/CustomerJourneyTile.vue", v = "components/DatePicker/DatePicker.vue", N = "components/DropdownButton/DropdownButton.vue", T = "components/Header/Header.vue", b = "components/Icon/Icon.vue", C = "components/InfoBlock/InfoBlock.vue", S = "components/InputField/InputField.vue", P = "components/Modal/Modal.vue", I = "components/Pagination/Pagination.vue", f = "components/PresenceIndicator/PresenceIndicator.vue", h = "components/ProgressBar/ProgressBar.vue", M = "components/SocialIcons/SocialIcons.vue", k = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", B = "components/SocialMediaTemplate/SocialMediaTemplate.vue", g = "components/SocialMediaType/SocialMediaType.vue", y = "components/Source/Source.vue", A = "components/StepperHeader/StepperHeader.vue", D = "components/TabbedContent/TabbedContent.vue", H = "components/Table/Table.vue", w = "components/Tabs/Tabs.vue", E = "components/TimelineEvent/TimelineEvent.vue", F = "components/TimelinePhaseblock/TimelinePhaseblock.vue", J = "components/Tooltip/Tooltip.vue", j = {
-  NexxtAnimatedNumber: i,
-  NexxtAvatar: x,
-  NexxtButton: m,
-  NexxtCalendar: u,
+const x = "components/AnimatedNumber/AnimatedNumber.vue", i = "components/Avatar/Avatar.vue", u = "components/Button/Button.vue", m = "components/Calendar/Calendar.vue", p = "components/Checkbox/Checkbox.vue", r = "components/Chip/Chip.vue", l = "components/Combobox/Combobox.vue", d = "components/ContactInfoCard/ContactInfoCard.vue", v = "components/CustomerJourneyTile/CustomerJourneyTile.vue", N = "components/DatePicker/DatePicker.vue", C = "components/DoughnutChart/DoughnutChart.vue", T = "components/DropdownButton/DropdownButton.vue", b = "components/Header/Header.vue", S = "components/Icon/Icon.vue", h = "components/InfoBlock/InfoBlock.vue", I = "components/InputField/InputField.vue", f = "components/Modal/Modal.vue", P = "components/Pagination/Pagination.vue", M = "components/PresenceIndicator/PresenceIndicator.vue", k = "components/ProgressBar/ProgressBar.vue", B = "components/SocialIcons/SocialIcons.vue", g = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", D = "components/SocialMediaTemplate/SocialMediaTemplate.vue", y = "components/SocialMediaType/SocialMediaType.vue", A = "components/Source/Source.vue", H = "components/StepperHeader/StepperHeader.vue", w = "components/TabbedContent/TabbedContent.vue", E = "components/Table/Table.vue", F = "components/Tabs/Tabs.vue", J = "components/TimelineEvent/TimelineEvent.vue", j = "components/TimelinePhaseblock/TimelinePhaseblock.vue", $ = "components/Tooltip/Tooltip.vue", K = {
+  NexxtAnimatedNumber: x,
+  NexxtAvatar: i,
+  NexxtButton: u,
+  NexxtCalendar: m,
   NexxtCheckbox: p,
-  NexxtChip: l,
-  NexxtCombobox: r,
-  NexxtCustomerJourneyTile: d,
-  NexxtDatePicker: v,
-  NexxtDropdownButton: N,
-  NexxtHeader: T,
-  NexxtIcon: b,
-  NexxtInfoBlock: C,
-  NexxtInputField: S,
-  NexxtModal: P,
-  NexxtPagination: I,
-  NexxtPresenceIndicator: f,
-  NexxtProgressBar: h,
-  NexxtSocialIcons: M,
-  NexxtSocialMediaCustomTemplate: k,
-  NexxtSocialMediaTemplate: B,
-  NexxtSocialMediaType: g,
-  NexxtSource: y,
-  NexxtStepperHeader: A,
-  NexxtTabbedContent: D,
-  NexxtTable: H,
-  NexxtTabs: w,
-  NexxtTimelineEvent: E,
-  NexxtTimelinePhaseblock: F,
-  NexxtTooltip: J
-}, K = c({
+  NexxtChip: r,
+  NexxtCombobox: l,
+  NexxtContactInfoCard: d,
+  NexxtCustomerJourneyTile: v,
+  NexxtDatePicker: N,
+  NexxtDoughnutChart: C,
+  NexxtDropdownButton: T,
+  NexxtHeader: b,
+  NexxtIcon: S,
+  NexxtInfoBlock: h,
+  NexxtInputField: I,
+  NexxtModal: f,
+  NexxtPagination: P,
+  NexxtPresenceIndicator: M,
+  NexxtProgressBar: k,
+  NexxtSocialIcons: B,
+  NexxtSocialMediaCustomTemplate: g,
+  NexxtSocialMediaTemplate: D,
+  NexxtSocialMediaType: y,
+  NexxtSource: A,
+  NexxtStepperHeader: H,
+  NexxtTabbedContent: w,
+  NexxtTable: E,
+  NexxtTabs: F,
+  NexxtTimelineEvent: J,
+  NexxtTimelinePhaseblock: j,
+  NexxtTooltip: $
+}, U = c({
   meta: {
     name: "@nexxtmove/ui",
     configKey: "nexxtmoveUi",
@@ -42,7 +44,7 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", x = "components/Avatar
     addCSS: !0
   },
   setup(e, o) {
-    for (const [t, n] of Object.entries(j))
+    for (const [t, n] of Object.entries(K))
       s({
         name: t,
         export: "default",
@@ -61,5 +63,5 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", x = "components/Avatar
   }
 });
 export {
-  K as default
+  U as default
 };

package/package.json

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

package/src/components/ContactInfoCard/ContactInfoCard.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="rounded-xl border border-gray-200">
+    <div class="border-b border-gray-200 px-8 py-2.5">
+      <slot name="title">Title</slot>
+    </div>
+    <div class="px-8 py-5">
+      <slot name="content" />
+    </div>
+  </div>
+</template>

package/src/components/DoughnutChart/DoughnutChart.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, type CSSProperties } from 'vue'
+
+type ColorScale =
+  | 'gray'
+  | 'cornflower-blue'
+  | 'orange'
+  | 'purple'
+  | 'rose'
+  | 'green'
+  | 'sapphire'
+  | 'yale-blue'
+  | 'brick'
+type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
+type BrandColor = `brands-${'facebook' | 'instagram' | 'linkedin' | 'x' | 'google' | 'tiktok'}`
+type TailwindColor = `${ColorScale}-${ColorShade}` | 'white' | BrandColor
+type Color = (CSSProperties['color'] & {}) | TailwindColor
+
+interface NexxtDoughnutChartProps {
+  value: number
+  percentage: number
+  color?: Color
+  backgroundColor?: Color
+  size?: number
+  thickness?: number
+  delay?: number
+  duration?: number
+}
+
+defineOptions({
+  name: 'NexxtDoughnutChart',
+})
+
+const {
+  value,
+  percentage,
+  backgroundColor,
+  color = 'orange-500',
+  size = 160,
+  thickness = 20,
+  delay = 0,
+  duration = 800,
+} = defineProps<NexxtDoughnutChartProps>()
+
+const animated = ref(false)
+
+onMounted(() => {
+  setTimeout(() => {
+    animated.value = true
+  }, delay)
+})
+
+const radius = computed(() => (size - thickness) / 2)
+const circumference = computed(() => 2 * Math.PI * radius.value)
+const center = computed(() => size / 2)
+
+const arc = computed(() => {
+  const fraction = Math.min(1, Math.max(0, percentage / 100))
+  return fraction * circumference.value
+})
+
+const resolveColor = (value: Color) => {
+  if (/^(#|rgb|hsl|oklch|lch|lab|hwb|var\(|color\()/.test(value)) return value
+  if (!value.includes('-')) return value
+  return `var(--color-${value})`
+}
+
+const resolvedColor = computed(() => resolveColor(color))
+const resolvedBackgroundColor = computed(() =>
+  backgroundColor ? resolveColor(backgroundColor) : undefined,
+)
+</script>
+
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    :viewBox="`0 0 ${size} ${size}`"
+    role="img"
+    :aria-label="`${value}`"
+  >
+    <g :transform="`scale(-1, 1) translate(-${size}, 0) rotate(-90, ${center}, ${center})`">
+      <circle
+        v-if="backgroundColor"
+        :cx="center"
+        :cy="center"
+        :r="radius"
+        fill="none"
+        :stroke="resolvedBackgroundColor"
+        :stroke-width="thickness"
+      />
+      <circle
+        :cx="center"
+        :cy="center"
+        :r="radius"
+        fill="none"
+        :stroke="resolvedColor"
+        :stroke-width="thickness"
+        stroke-linecap="butt"
+        :stroke-dasharray="`${animated ? arc : 0} ${circumference}`"
+        :style="{ transition: `stroke-dasharray ${duration}ms ease-out` }"
+      />
+    </g>
+    <foreignObject
+      :x="thickness"
+      :y="thickness"
+      :width="size - thickness * 2"
+      :height="size - thickness * 2"
+    >
+      <div
+        xmlns="http://www.w3.org/1999/xhtml"
+        class="flex h-full w-full items-center justify-center"
+      >
+        <slot>
+          <span class="heading-1 text-sapphire-900">{{ value }}</span>
+        </slot>
+      </div>
+    </foreignObject>
+  </svg>
+</template>

package/src/components.json

@@ -6,8 +6,10 @@
   "NexxtCheckbox": "components/Checkbox/Checkbox.vue",
   "NexxtChip": "components/Chip/Chip.vue",
   "NexxtCombobox": "components/Combobox/Combobox.vue",
+  "NexxtContactInfoCard": "components/ContactInfoCard/ContactInfoCard.vue",
   "NexxtCustomerJourneyTile": "components/CustomerJourneyTile/CustomerJourneyTile.vue",
   "NexxtDatePicker": "components/DatePicker/DatePicker.vue",
+  "NexxtDoughnutChart": "components/DoughnutChart/DoughnutChart.vue",
   "NexxtDropdownButton": "components/DropdownButton/DropdownButton.vue",
   "NexxtHeader": "components/Header/Header.vue",
   "NexxtIcon": "components/Icon/Icon.vue",

package/src/index.ts

@@ -6,8 +6,10 @@ export { default as NexxtCalendar } from './components/Calendar/Calendar.vue'
 export { default as NexxtCheckbox } from './components/Checkbox/Checkbox.vue'
 export { default as NexxtChip } from './components/Chip/Chip.vue'
 export { default as NexxtCombobox } from './components/Combobox/Combobox.vue'
+export { default as NexxtContactInfoCard } from './components/ContactInfoCard/ContactInfoCard.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'
 export { default as NexxtDropdownButton } from './components/DropdownButton/DropdownButton.vue'
 export { default as NexxtHeader } from './components/Header/Header.vue'
 export { default as NexxtIcon } from './components/Icon/Icon.vue'