@saasmakers/ui 2.0.0 → 2.0.1

package/app/components/bases/BaseAlert.vue

@@ -20,7 +20,6 @@ defineSlots<{
 }>()
 
 const { t } = useI18n()
-const { getIcon } = useLayerIcons()
 const isClosed = ref(false)
 
 const buttonColor = computed<BaseColor>(() => {
@@ -89,7 +88,7 @@ async function onClose(event: MouseEvent) {
       <BaseButton
         v-if="isClosable"
         :color="buttonColor"
-        :icon="getIcon('closeCircle')"
+        :icon="getLayerIcon('closeCircle')"
         light
         size="xs"
         :text="t('closeThisMessage')"

package/app/components/bases/BaseCard.vue

@@ -35,8 +35,6 @@ defineSlots<{
   right?: () => VNode[]
 }>()
 
-const { getIcon } = useLayerIcons()
-
 const hasAvatarBox = computed<boolean>(() => {
   return !!(props.avatar || props.emoji || props.icon || props.image)
 })
@@ -199,7 +197,7 @@ function onClick(event: MouseEvent) {
           'text-2xl': size === 'lg',
         }"
         color="green"
-        :icon="getIcon('checkCircle')"
+        :icon="getLayerIcon('checkCircle')"
       />
 
       <BaseIcon
@@ -210,7 +208,7 @@ function onClick(event: MouseEvent) {
           'text-xl': size === 'base',
           'text-2xl': size === 'lg',
         }"
-        :icon="getIcon('chevronRight')"
+        :icon="getLayerIcon('chevronRight')"
       />
 
       <slot name="right" />

package/app/components/bases/BaseDivider.vue

@@ -18,7 +18,6 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
-const { getIcon } = useLayerIcons()
 
 function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection) {
   if (!props.loading) {
@@ -59,7 +58,7 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
           v-if="navigable && !loading && !hidePrevious"
           class="mr-2 shrink-0 hover:!no-underline"
           clickable
-          :icon="getIcon('chevronLeft')"
+          :icon="getLayerIcon('chevronLeft')"
           size="xs"
           :text="t('previous')"
           @click="onNavigate($event, 'previous')"
@@ -127,7 +126,7 @@ function onNavigate(event: MouseEvent, direction: BaseDividerNavigateDirection)
           class="ml-2 shrink-0 hover:!no-underline"
           clickable
           reverse
-          :icon="getIcon('chevronRight')"
+          :icon="getLayerIcon('chevronRight')"
           size="xs"
           :text="t('next')"
           @click="onNavigate($event, 'next')"

package/app/components/bases/BaseIcon.vue

@@ -25,7 +25,6 @@ const emit = defineEmits<{
 
 const confirming = ref(false)
 const { t } = useI18n()
-const { getIcon } = useLayerIcons()
 
 const isClickable = computed(() => {
   return props.clickable || props.to || props.confirmation
@@ -34,16 +33,16 @@ const isClickable = computed(() => {
 const statusIcon = computed<string | undefined>(() => {
   switch (props.status) {
     case 'error': {
-      return getIcon('closeCircle')
+      return getLayerIcon('closeCircle')
     }
     case 'info': {
-      return getIcon('infoCircle')
+      return getLayerIcon('infoCircle')
     }
     case 'success': {
-      return getIcon('checkCircle')
+      return getLayerIcon('checkCircle')
     }
     case 'warning': {
-      return getIcon('exclamationCircle')
+      return getLayerIcon('exclamationCircle')
     }
     default: {
       return undefined

package/app/components/bases/BaseMetric.vue

@@ -10,18 +10,16 @@ const props = withDefaults(defineProps<BaseMetric>(), {
   value: undefined,
 })
 
-const { getIcon } = useLayerIcons()
-
 const performanceIcon = computed<string | undefined>(() => {
   switch (props.performance) {
     case 'down': {
-      return getIcon('arrowDown')
+      return getLayerIcon('arrowDown')
     }
     case 'equal': {
-      return getIcon('arrowRight')
+      return getLayerIcon('arrowRight')
     }
     case 'up': {
-      return getIcon('arrowUp')
+      return getLayerIcon('arrowUp')
     }
     default: {
       return undefined
@@ -51,7 +49,7 @@ const performanceIcon = computed<string | undefined>(() => {
         v-if="performanceTooltip"
         v-tooltip="performanceTooltip"
         class="mr-1"
-        :icon="getIcon('infoCircle')"
+        :icon="getLayerIcon('infoCircle')"
       />
 
       <BaseText

package/app/components/bases/BaseOverlay.vue

@@ -2,7 +2,6 @@
 import { onKeyStroke } from '@vueuse/core'
 import { Motion } from 'motion-v'
 import type { BaseOverlay } from '../../types/bases'
-import useMotion from '../../composables/useMotion'
 
 const props = withDefaults(defineProps<BaseOverlay>(), {
   active: true,
@@ -22,9 +21,6 @@ defineSlots<{
   default?: () => VNode[]
 }>()
 
-const { getIcon } = useLayerIcons()
-const { fadeIn } = useMotion()
-
 const isClickable = computed(() => {
   return props.clickable || props.hasClose
 })
@@ -65,7 +61,7 @@ onKeyStroke('Escape', (event) => {
       v-if="hasClose"
       class="pointer-events-auto absolute right-4 top-4 z-50 text-gray-200 dark:text-gray-800"
       clickable
-      :icon="getIcon('close')"
+      :icon="getLayerIcon('close')"
       @click="onClose"
     />
 

package/app/components/bases/BaseQuote.vue

@@ -29,7 +29,6 @@ defineSlots<{
 
 const { locale, t } = useI18n()
 const { translatedContent } = useTranslation(useSlots(), locale)
-const { getIcon } = useLayerIcons()
 const closed = ref(false)
 
 const finalBackground = computed(() => {
@@ -148,7 +147,7 @@ function onClose(event: MouseEvent) {
             'ml-3': size === 'sm',
             'ml-4': size === 'base',
           }"
-          :icon="getIcon('close')"
+          :icon="getLayerIcon('close')"
           @click="onClose"
         />
       </div>

package/app/components/bases/BaseShortcut.vue

@@ -11,8 +11,6 @@ const emit = defineEmits<{
   trigger: [event: KeyboardEvent]
 }>()
 
-const { getIcon } = useLayerIcons()
-
 function isTypingTarget(target: EventTarget | null) {
   const element = target as HTMLElement | null
   const typingTags = ['INPUT', 'SELECT', 'TEXTAREA']
@@ -53,7 +51,7 @@ onKeyStroke(
     <Icon
       v-if="shortcut.toLowerCase() === 'enter'"
       class="size-2"
-      :name="getIcon('enter')"
+      :name="getLayerIcon('enter')"
     />
 
     <template v-else>

package/app/components/bases/BaseTag.vue

@@ -35,7 +35,6 @@ defineSlots<{
   default?: () => VNode[]
 }>()
 
-const { getIcon } = useLayerIcons()
 const hovered = ref(false)
 const form = reactive({ name: '' })
 
@@ -136,7 +135,7 @@ function onRemove(event: MouseEvent) {
         class="js-drag-handle mr-2 cursor-move"
         clickable
         color="gray"
-        :icon="getIcon('drag')"
+        :icon="getLayerIcon('drag')"
       />
 
       <span
@@ -190,7 +189,7 @@ function onRemove(event: MouseEvent) {
       <BaseIcon
         v-if="removable"
         class="ml-1.5 text-red-700 dark:text-red-300 hover:text-black dark:hover:text-white"
-        :icon="getIcon('closeCircle')"
+        :icon="getLayerIcon('closeCircle')"
         @click.prevent.stop="onRemove"
       />
     </component>

package/app/components/bases/BaseTags.vue

@@ -34,7 +34,6 @@ const root = ref<HTMLDivElement>()
 const showingAllTags = ref(false)
 const showingTagCreationField = ref(false)
 const { t } = useI18n()
-const { getIcon } = useLayerIcons()
 
 const sortedTags = computed({
   get() {
@@ -143,7 +142,7 @@ function onUpdateTag(event: FocusEvent | KeyboardEvent, name: string, tagId?: nu
         'm-1': size === 'base',
       }"
       color="indigo"
-      :icon="getIcon('back')"
+      :icon="getLayerIcon('back')"
       :size="size"
       :text="t('cancel')"
       @click="onGoBack"
@@ -158,7 +157,7 @@ function onUpdateTag(event: FocusEvent | KeyboardEvent, name: string, tagId?: nu
       }"
       color="indigo"
       :editable="showingTagCreationField"
-      :icon="showingTagCreationField ? getIcon('tags') : getIcon('plus')"
+      :icon="showingTagCreationField ? getLayerIcon('tags') : getLayerIcon('plus')"
       is-creation
       :light="false"
       :size="size"

package/app/components/bases/BaseToast.vue

@@ -14,8 +14,6 @@ const emit = defineEmits<{
   close: [event: KeyboardEvent | MouseEvent, toast: BaseToast]
 }>()
 
-const { getIcon } = useLayerIcons()
-
 function onAction(event: KeyboardEvent | MouseEvent) {
   if (props.action) {
     emit('action', event, props)
@@ -82,7 +80,7 @@ function onClose(event: KeyboardEvent | MouseEvent) {
           'group-hover:text-green-600 dark:group-hover:text-green-400': status === 'success',
           'group-hover:text-orange-600 dark:group-hover:text-orange-400': status === 'warning',
         }"
-        :icon="getIcon('close')"
+        :icon="getLayerIcon('close')"
       />
     </template>
   </div>

package/app/components/fields/FieldEmojis.vue

@@ -10,7 +10,6 @@ const emit = defineEmits<{
 }>()
 
 const { locale, t } = useI18n()
-const { normalizeText } = useLayerUtils()
 const modelValue = defineModel<FieldEmojis['modelValue']>({ default: '' })
 const searchRaw = ref('')
 const searchQuery = refDebounced(searchRaw, 250)

package/app/components/fields/FieldSelect.vue

@@ -31,9 +31,6 @@ const emit = defineEmits<{
   optionClick: [event: MouseEvent, value: string]
 }>()
 
-const { getIcon } = useLayerIcons()
-const { fadeIn } = useMotion()
-const { normalizeText } = useLayerUtils()
 const { t } = useI18n()
 const id = useId()
 const modelValue = defineModel<FieldSelect['modelValue']>({ default: '' })
@@ -264,7 +261,7 @@ function selectOption(event: MouseEvent, value: string) {
             class="ml-2 flex-initial"
             :class="{ 'rotate-180': opened }"
             color="gray"
-            :icon="getIcon('arrowDown')"
+            :icon="getLayerIcon('arrowDown')"
           />
         </div>
 
@@ -320,7 +317,7 @@ function selectOption(event: MouseEvent, value: string) {
               <BaseIcon
                 class="pointer-events-none"
                 color="gray"
-                :icon="getIcon('infoCircle')"
+                :icon="getLayerIcon('infoCircle')"
                 :size="size"
                 :text="t('noResults')"
               />

package/app/components/fields/FieldTime.vue

@@ -19,7 +19,6 @@ const emit = defineEmits<{
   blur: [event: FocusEvent, value: string, name?: string]
 }>()
 
-const { getIcon } = useLayerIcons()
 const id = useId()
 const modelValue = defineModel<FieldTime['modelValue']>({ default: '' })
 const inputRef = ref<HTMLInputElement>()
@@ -75,7 +74,7 @@ function onFieldBlur(event: FocusEvent) {
       @keydown.space.prevent="onContainerKeyDown"
     >
       <BaseIcon
-        :icon="getIcon('clock')"
+        :icon="getLayerIcon('clock')"
         :size="size"
       />
 

package/app/components/layout/LayoutToasts.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-const { fadeInUp } = useMotion()
 const toasts = useToasts()
 
 const activeShortcutToastId = computed(() => {

package/app/types/global.d.ts

@@ -101,8 +101,8 @@ declare global {
   type LayoutModal = import('./layout').LayoutModal
 
   // Project
-  type LayerIconIcon = import('../composables/useLayerIcons').LayerIconIcon
-  type LayerIconValue = import('../composables/useLayerIcons').LayerIconValue
+  type LayerIconIcon = import('../utils/layerIcons').LayerIconIcon
+  type LayerIconValue = import('../utils/layerIcons').LayerIconValue
 
   // Navigator
   interface Navigator {

package/app/utils/animations.ts

@@ -0,0 +1,31 @@
+export const fadeIn = {
+  animate: {
+    opacity: 1,
+    transition: { duration: 0.25 },
+  },
+  initial: { opacity: 0 },
+}
+
+export const fadeInLeft = {
+  animate: {
+    opacity: 1,
+    transition: { duration: 0.25 },
+    x: 0,
+  },
+  initial: {
+    opacity: 0,
+    x: -25,
+  },
+}
+
+export const fadeInUp = {
+  animate: {
+    opacity: 1,
+    transition: { duration: 0.25 },
+    y: 0,
+  },
+  initial: {
+    opacity: 0,
+    y: 25,
+  },
+}

package/app/utils/chartist.ts

@@ -0,0 +1,126 @@
+import type { AreaDrawEvent, BarChartOptions, BarDrawEvent, BaseChart, DrawEvent, LineDrawEvent, Options } from 'chartist'
+import { easings } from 'chartist'
+
+type EasingType = keyof typeof easings | number[]
+
+export function progressiveLinePlugin(params: {
+  animateArea?: boolean
+  delay?: number
+  duration?: number
+  easing?: EasingType
+  stagger?: number
+} = {}) {
+  const animateArea = params.animateArea ?? true
+  const delay = params.delay ?? 0
+  const duration = params.duration ?? 500
+  const easing = params.easing ?? easings.easeOutQuart
+  const stagger = params.stagger ?? 0
+
+  return (chart: BaseChart) => {
+    chart.on('draw', (ctx: DrawEvent) => {
+      const begin = delay + (stagger ? stagger * (ctx.seriesIndex ?? 0) : 0)
+
+      // Animation for line charts
+      if (ctx.type === 'line') {
+        const lineCtx = ctx as LineDrawEvent
+        const node = lineCtx.element.getNode<SVGPathElement>()
+        const length = node.getTotalLength()
+
+        // Set the stroke dasharray and dashoffset
+        lineCtx.element.attr({
+          'stroke-dasharray': `${length}px ${length}px`,
+          'stroke-dashoffset': `${length}px`,
+        })
+
+        // Animate the stroke dashoffset to 0
+        lineCtx.element.animate({
+          'stroke-dashoffset': {
+            begin,
+            dur: duration,
+            easing,
+            fill: 'freeze',
+            from: `${length}px`,
+            to: '0px',
+          },
+        }, false)
+
+        // Clean up the dash attributes after it finishes
+        const total = delay + duration + (stagger ? stagger * (lineCtx.seriesIndex ?? 0) : 0)
+
+        globalThis.setTimeout(() => {
+          lineCtx.element.attr({
+            'stroke-dasharray': undefined,
+            'stroke-dashoffset': undefined,
+          })
+        }, total + 30)
+      }
+
+      // Animation for area charts
+      if (animateArea && ctx.type === 'area') {
+        const areaCtx = ctx as AreaDrawEvent
+
+        areaCtx.element.animate({
+
+          d: {
+            begin,
+            dur: duration,
+            easing,
+            fill: 'freeze',
+            from: areaCtx.path
+              .clone()
+              .scale(1, 0)
+              .translate(0, areaCtx.chartRect.height())
+              .stringify(),
+            to: areaCtx.path.stringify(),
+          },
+        }, false)
+      }
+
+      // Animation for bar charts
+      if (ctx.type === 'bar') {
+        const barCtx = ctx as BarDrawEvent
+
+        // Access private options property via type assertion
+        const chartOptions = (chart as unknown as {
+          options?: Options & Partial<BarChartOptions>
+        }).options
+
+        const horizontal = !!(chartOptions as BarChartOptions | undefined)?.horizontalBars
+
+        // For vertical bars, y1 is baseline, y2 is top. For horizontal, x1 is baseline, x2 is end.
+        const from = horizontal ? barCtx.x1 : barCtx.y1
+        const to = horizontal ? barCtx.x2 : barCtx.y2
+
+        // Start collapsed at baseline
+        if (horizontal) {
+          barCtx.element.attr({ x2: from })
+
+          barCtx.element.animate({
+            x2: {
+              begin,
+              dur: duration,
+              easing,
+              fill: 'freeze',
+              from: String(from),
+              to: String(to),
+            },
+          }, false)
+        }
+        else {
+          barCtx.element.attr({ y2: from })
+
+          barCtx.element.animate({
+            y2: {
+              begin,
+              dur: duration,
+              easing,
+              fill: 'freeze',
+              from: String(from),
+              to: String(to),
+            },
+          }, false)
+        }
+      }
+    })
+  }
+}

package/app/{composables/useLayerUtils.ts → utils/formatting.ts}

@@ -1,20 +1,13 @@
 import numbroLib from 'numbro'
 
-export default function useLayerUtils() {
-  return {
-    normalizeText,
-    numbro,
-  }
-}
-
-function normalizeText(text: string) {
+export function normalizeText(text: string) {
   return text
     .toLowerCase()
     .normalize('NFD')
     .replaceAll(/[\u0300-\u036F]/g, '')
 }
 
-function numbro(number: '∞' | number | undefined, format?: string) {
+export function numbro(number: '∞' | number | undefined, format?: string) {
   if (!number && number !== 0) {
     return ''
   }

package/app/{composables/useLayerIcons.ts → utils/layerIcons.ts}

@@ -8,7 +8,7 @@
 // Custom icons
 // -> ./assets/icons
 
-const icons = {
+export const layerIcons = {
   arrowDown: 'solar:alt-arrow-down-bold',
   arrowRight: 'solar:alt-arrow-right-bold',
   arrowUp: 'solar:alt-arrow-up-bold',
@@ -28,19 +28,12 @@ const icons = {
   tags: 'hugeicons:tags',
 } as const
 
-export type LayerIconIcon = keyof typeof icons
+export type LayerIconIcon = keyof typeof layerIcons
 
-export type LayerIconValue = typeof icons[LayerIconIcon]
+export type LayerIconValue = typeof layerIcons[LayerIconIcon]
 
-export default function useicons() {
-  const iconsNames = Object.keys(icons)
+export const layerIconNames = Object.keys(layerIcons) as LayerIconIcon[]
 
-  const getIcon = (attribute: LayerIconIcon) => {
-    return icons[attribute] || icons.default
-  }
-
-  return {
-    getIcon,
-    iconsNames,
-  }
+export function getLayerIcon(attribute: LayerIconIcon): LayerIconValue {
+  return layerIcons[attribute] || layerIcons.default
 }

package/nuxt.config.ts

@@ -6,6 +6,7 @@ import uno from './uno.config.js'
 
 const currentDir = path.dirname(fileURLToPath(import.meta.url))
 const isPostHogEnabled = process.env.NODE_ENV === 'production' && Boolean(process.env.NUXT_PUBLIC_POSTHOG_KEY)
+const isSentryEnabled = process.env.NODE_ENV === 'production'
 
 export default defineNuxtConfig({
   modules: [
@@ -23,6 +24,7 @@ export default defineNuxtConfig({
     '@vueuse/nuxt',
     'floating-vue/nuxt',
     'motion-v/nuxt',
+    ...(isSentryEnabled ? ['@sentry/nuxt/module'] : []),
   ],
 
   components: [
@@ -114,6 +116,8 @@ export default defineNuxtConfig({
 
   robots: { credits: false },
 
+  sourcemap: { client: 'hidden' },
+
   sitemap: {
     autoLastmod: true,
     credits: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -31,6 +31,7 @@
     "@nuxtjs/sitemap": "8.2.0",
     "@pinia/nuxt": "0.11.3",
     "@posthog/nuxt": "1.7.76",
+    "@sentry/nuxt": "10.57.0",
     "@unhead/vue": "2.0.19",
     "@unocss/nuxt": "66.7.0",
     "@unocss/reset": "66.7.0",
@@ -53,8 +54,8 @@
   "devDependencies": {
     "nuxt": "4.3.1",
     "typescript": "5.9.3",
-    "@saasmakers/shared": "0.2.8",
-    "@saasmakers/apps-helpers": "0.1.0"
+    "@saasmakers/apps-helpers": "0.1.0",
+    "@saasmakers/shared": "0.2.8"
   },
   "peerDependencies": {
     "@saasmakers/apps-helpers": "^0.1.0",

package/app/composables/useChartist.ts

@@ -1,130 +0,0 @@
-import type { AreaDrawEvent, BarChartOptions, BarDrawEvent, BaseChart, DrawEvent, LineDrawEvent, Options } from 'chartist'
-import { easings } from 'chartist'
-
-export default function useChartist() {
-  type EasingType = keyof typeof easings | number[]
-
-  const progressiveLinePlugin = (params: {
-    animateArea?: boolean
-    delay?: number
-    duration?: number
-    easing?: EasingType
-    stagger?: number
-  } = {}) => {
-    const animateArea = params.animateArea ?? true
-    const delay = params.delay ?? 0
-    const duration = params.duration ?? 500
-    const easing = params.easing ?? easings.easeOutQuart
-    const stagger = params.stagger ?? 0
-
-    return (chart: BaseChart) => {
-      chart.on('draw', (ctx: DrawEvent) => {
-        const begin = delay + (stagger ? stagger * (ctx.seriesIndex ?? 0) : 0)
-
-        // Animation for line charts
-        if (ctx.type === 'line') {
-          const lineCtx = ctx as LineDrawEvent
-          const node = lineCtx.element.getNode<SVGPathElement>()
-          const length = node.getTotalLength()
-
-          // Set the stroke dasharray and dashoffset
-          lineCtx.element.attr({
-            'stroke-dasharray': `${length}px ${length}px`,
-            'stroke-dashoffset': `${length}px`,
-          })
-
-          // Animate the stroke dashoffset to 0
-          lineCtx.element.animate({
-            'stroke-dashoffset': {
-              begin,
-              dur: duration,
-              easing,
-              fill: 'freeze',
-              from: `${length}px`,
-              to: '0px',
-            },
-          }, false)
-
-          // Clean up the dash attributes after it finishes
-          const total = delay + duration + (stagger ? stagger * (lineCtx.seriesIndex ?? 0) : 0)
-
-          globalThis.setTimeout(() => {
-            lineCtx.element.attr({
-              'stroke-dasharray': undefined,
-              'stroke-dashoffset': undefined,
-            })
-          }, total + 30)
-        }
-
-        // Animation for area charts
-        if (animateArea && ctx.type === 'area') {
-          const areaCtx = ctx as AreaDrawEvent
-
-          areaCtx.element.animate({
-
-            d: {
-              begin,
-              dur: duration,
-              easing,
-              fill: 'freeze',
-              from: areaCtx.path
-                .clone()
-                .scale(1, 0)
-                .translate(0, areaCtx.chartRect.height())
-                .stringify(),
-              to: areaCtx.path.stringify(),
-            },
-          }, false)
-        }
-
-        // Animation for bar charts
-        if (ctx.type === 'bar') {
-          const barCtx = ctx as BarDrawEvent
-
-          // Access private options property via type assertion
-          const chartOptions = (chart as unknown as {
-            options?: Options & Partial<BarChartOptions>
-          }).options
-
-          const horizontal = !!(chartOptions as BarChartOptions | undefined)?.horizontalBars
-
-          // For vertical bars, y1 is baseline, y2 is top. For horizontal, x1 is baseline, x2 is end.
-          const from = horizontal ? barCtx.x1 : barCtx.y1
-          const to = horizontal ? barCtx.x2 : barCtx.y2
-
-          // Start collapsed at baseline
-          if (horizontal) {
-            barCtx.element.attr({ x2: from })
-
-            barCtx.element.animate({
-              x2: {
-                begin,
-                dur: duration,
-                easing,
-                fill: 'freeze',
-                from: String(from),
-                to: String(to),
-              },
-            }, false)
-          }
-          else {
-            barCtx.element.attr({ y2: from })
-
-            barCtx.element.animate({
-              y2: {
-                begin,
-                dur: duration,
-                easing,
-                fill: 'freeze',
-                from: String(from),
-                to: String(to),
-              },
-            }, false)
-          }
-        }
-      })
-    }
-  }
-
-  return { progressiveLinePlugin }
-}

package/app/composables/useMotion.ts

@@ -1,39 +0,0 @@
-export default function useMotion() {
-  const fadeIn = {
-    animate: {
-      opacity: 1,
-      transition: { duration: 0.25 },
-    },
-    initial: { opacity: 0 },
-  }
-
-  const fadeInLeft = {
-    animate: {
-      opacity: 1,
-      transition: { duration: 0.25 },
-      x: 0,
-    },
-    initial: {
-      opacity: 0,
-      x: -25,
-    },
-  }
-
-  const fadeInUp = {
-    animate: {
-      opacity: 1,
-      transition: { duration: 0.25 },
-      y: 0,
-    },
-    initial: {
-      opacity: 0,
-      y: 25,
-    },
-  }
-
-  return {
-    fadeIn,
-    fadeInLeft,
-    fadeInUp,
-  }
-}