@saasmakers/ui 2.0.0 → 2.0.3

package/app/components/auth/AuthSocialConnect.vue

@@ -0,0 +1,237 @@
+<script lang="ts" setup>
+import { SocialLogin } from '@capgo/capacitor-social-login'
+
+const props = withDefaults(defineProps<AuthSocialConnect>(), {
+  loading: false,
+  provider: 'apple',
+  size: 'base',
+})
+
+const emit = defineEmits<{
+  error: [error: unknown]
+  success: [payload: AuthSocialConnectSuccess]
+}>()
+
+const { t } = useI18n()
+const { isAndroid, platform } = useCapacitor()
+const colorMode = useColorMode()
+const oauthAuthenticating = ref(false)
+
+const buttonLoading = computed(() => {
+  return oauthAuthenticating.value || props.loading
+})
+
+onMounted(() => {
+  if (props.provider === 'google') {
+    window.addEventListener('message', processGoogleCallback)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (props.provider === 'google') {
+    window.removeEventListener('message', processGoogleCallback)
+  }
+})
+
+async function onStartAuthentication() {
+  oauthAuthenticating.value = true
+
+  try {
+    if (props.provider === 'apple') {
+      if (!props.appleConfig) {
+        throw new Error('appleConfig is required when provider is apple')
+      }
+
+      const platformKey = platform.value === 'ios' ? 'ios' : 'web'
+
+      await SocialLogin.initialize({
+        apple: {
+          clientId: props.appleConfig[platformKey].appId,
+          redirectUrl: props.appleConfig[platformKey].redirectUrl,
+        },
+      })
+
+      const { result } = await SocialLogin.login({
+        options: { scopes: ['email', 'name'] },
+        provider: 'apple',
+      })
+
+      emit('success', {
+        firstName: `${result.profile.givenName}`,
+        idToken: result.idToken!,
+        lastName: `${result.profile.familyName}`,
+        provider: 'apple',
+      })
+    }
+    else if (props.provider === 'google') {
+      if (!props.googleConfig) {
+        throw new Error('googleConfig is required when provider is google')
+      }
+
+      await SocialLogin.initialize({
+        google: {
+          iOSClientId: props.googleConfig.ios.clientId,
+          redirectUrl: props.googleConfig.web.redirectUrl,
+          webClientId: props.googleConfig.web.clientId,
+        },
+      })
+
+      const response = await SocialLogin.login({
+        options: { scopes: ['email', 'profile'] },
+        provider: 'google',
+      })
+
+      const { idToken } = response.result as GoogleLoginResponseOnline
+
+      emit('success', {
+        idToken: idToken!,
+        provider: 'google',
+      })
+    }
+  }
+  catch (error) {
+    emit('error', error)
+
+    console.error(error)
+  }
+  finally {
+    oauthAuthenticating.value = false
+  }
+}
+
+function processGoogleCallback(event: MessageEvent) {
+  if (event.origin !== globalThis.location.origin) {
+    return
+  }
+
+  if (event.data.type === 'auth:google:success') {
+    try {
+      oauthAuthenticating.value = true
+
+      emit('success', {
+        idToken: event.data.idToken,
+        provider: 'google',
+      })
+    }
+    catch (error) {
+      emit('error', error)
+
+      console.error(error)
+    }
+    finally {
+      oauthAuthenticating.value = false
+    }
+  }
+}
+</script>
+
+<template>
+  <BaseButton
+    :class="{ hidden: isAndroid && provider === 'apple' }"
+    :color="provider === 'apple' ? 'black' : 'white'"
+    full-width
+    :loading="buttonLoading"
+    :size="size"
+    :text="provider === 'apple' ? t('continueWithApple') : t('continueWithGoogle')"
+    @click="onStartAuthentication"
+  >
+    <ClientOnly>
+      <img
+        v-if="provider === 'apple'"
+        :alt="t('appleLogo')"
+        class="mr-2.5 w-4.5"
+        :src="`/images/auth/AppleConnect/apple-${colorMode.value}.svg`"
+      >
+
+      <img
+        v-else-if="provider === 'google'"
+        :alt="t('googleLogo')"
+        class="mr-2.5 w-5"
+        src="/images/auth/GoogleConnect/google.svg"
+      >
+    </ClientOnly>
+  </BaseButton>
+</template>
+
+<i18n lang="json">
+{
+  "de": {
+    "appleLogo": "Apple-Logo",
+    "continueWithApple": "Mit Apple fortfahren",
+    "continueWithGoogle": "Mit Google fortfahren",
+    "googleLogo": "Google-Logo"
+  },
+  "en": {
+    "appleLogo": "Apple logo",
+    "continueWithApple": "Continue with Apple",
+    "continueWithGoogle": "Continue with Google",
+    "googleLogo": "Google logo"
+  },
+  "es": {
+    "appleLogo": "Logo de Apple",
+    "continueWithApple": "Continuar con Apple",
+    "continueWithGoogle": "Continuar con Google",
+    "googleLogo": "Logo de Google"
+  },
+  "fr": {
+    "appleLogo": "Logo Apple",
+    "continueWithApple": "Continuer avec Apple",
+    "continueWithGoogle": "Continuer avec Google",
+    "googleLogo": "Logo Google"
+  },
+  "id": {
+    "appleLogo": "Logo Apple",
+    "continueWithApple": "Lanjutkan dengan Apple",
+    "continueWithGoogle": "Lanjutkan dengan Google",
+    "googleLogo": "Logo Google"
+  },
+  "it": {
+    "appleLogo": "Logo Apple",
+    "continueWithApple": "Continua con Apple",
+    "continueWithGoogle": "Continua con Google",
+    "googleLogo": "Logo Google"
+  },
+  "ja": {
+    "appleLogo": "Appleロゴ",
+    "continueWithApple": "Appleで続ける",
+    "continueWithGoogle": "Googleで続ける",
+    "googleLogo": "Googleロゴ"
+  },
+  "ko": {
+    "appleLogo": "Apple 로고",
+    "continueWithApple": "Apple로 계속하기",
+    "continueWithGoogle": "Google로 계속하기",
+    "googleLogo": "Google 로고"
+  },
+  "nl": {
+    "appleLogo": "Apple-logo",
+    "continueWithApple": "Doorgaan met Apple",
+    "continueWithGoogle": "Doorgaan met Google",
+    "googleLogo": "Google-logo"
+  },
+  "pl": {
+    "appleLogo": "Logo Apple",
+    "continueWithApple": "Kontynuuj z Apple",
+    "continueWithGoogle": "Kontynuuj z Google",
+    "googleLogo": "Logo Google"
+  },
+  "pt": {
+    "appleLogo": "Logótipo da Apple",
+    "continueWithApple": "Continuar com Apple",
+    "continueWithGoogle": "Continuar com Google",
+    "googleLogo": "Logótipo do Google"
+  },
+  "pt-BR": {
+    "appleLogo": "Logo da Apple",
+    "continueWithApple": "Continuar com Apple",
+    "continueWithGoogle": "Continuar com Google",
+    "googleLogo": "Logo do Google"
+  },
+  "vi": {
+    "appleLogo": "Logo Apple",
+    "continueWithApple": "Tiếp tục với Apple",
+    "continueWithGoogle": "Tiếp tục với Google",
+    "googleLogo": "Logo Google"
+  }
+}
+</i18n>

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/composables/useCapacitor.ts

@@ -0,0 +1,47 @@
+import { Capacitor } from '@capacitor/core'
+
+export default function useCapacitor() {
+  const platform = ref(Capacitor.getPlatform() as Platforms)
+
+  const isAndroid = computed(() => {
+    return platform.value === 'android'
+  })
+
+  const isIOS = computed(() => {
+    return platform.value === 'ios'
+  })
+
+  const isNative = computed(() => {
+    return Capacitor.isNativePlatform()
+  })
+
+  const isWeb = computed(() => {
+    return platform.value === 'web'
+  })
+
+  const getPlatform = () => {
+    if (isAndroid.value) {
+      return 'android'
+    }
+    else if (isIOS.value) {
+      return 'ios'
+    }
+    else {
+      return 'web'
+    }
+  }
+
+  const isPluginAvailable = (pluginName: string) => {
+    return Capacitor.isPluginAvailable(pluginName)
+  }
+
+  return {
+    getPlatform,
+    isAndroid,
+    isIOS,
+    isNative,
+    isPluginAvailable,
+    isWeb,
+    platform,
+  }
+}

package/app/types/auth.d.ts

@@ -0,0 +1,42 @@
+export interface AuthSocialConnect {
+  appleConfig?: AuthSocialConnectAppleConfig
+  googleConfig?: AuthSocialConnectGoogleConfig
+  loading?: boolean
+  provider: AuthSocialConnectProvider
+  size?: BaseButtonSize
+}
+
+export interface AuthSocialConnectAppleConfig {
+  ios: {
+    appId: string
+    redirectUrl: string
+  }
+  web: {
+    appId: string
+    redirectUrl: string
+  }
+}
+
+export interface AuthSocialConnectGoogleConfig {
+  ios: {
+    clientId: string
+  }
+  web: {
+    clientId: string
+    redirectUrl: string
+  }
+}
+
+export type AuthSocialConnectProvider = 'apple' | 'google'
+
+export type AuthSocialConnectSuccess
+  = | {
+    firstName?: string
+    idToken: string
+    lastName?: string
+    provider: 'apple'
+  }
+  | {
+    idToken: string
+    provider: 'google'
+  }

package/app/types/global.d.ts

@@ -1,6 +1,13 @@
 import type { Directive } from 'vue'
 
 declare global {
+  // Auth
+  type AuthSocialConnect = import('./auth').AuthSocialConnect
+  type AuthSocialConnectAppleConfig = import('./auth').AuthSocialConnectAppleConfig
+  type AuthSocialConnectGoogleConfig = import('./auth').AuthSocialConnectGoogleConfig
+  type AuthSocialConnectProvider = import('./auth').AuthSocialConnectProvider
+  type AuthSocialConnectSuccess = import('./auth').AuthSocialConnectSuccess
+
   // Bases
   type BaseAlert = import('./bases').BaseAlert
   type BaseAlignment = import('./bases').BaseAlignment
@@ -67,6 +74,8 @@ declare global {
   type ChartistLineChartData = import('chartist').LineChartData
   type ChartistOptions = import('chartist').Options
   type ChartistPieChartData = import('chartist').PieChartData
+  type GoogleLoginResponseOnline = import('@capgo/capacitor-social-login').GoogleLoginResponseOnline
+  type Platforms = import('@saasmakers/shared').Platforms
 
   // Fields
   type FieldAvatar = import('./fields').FieldAvatar
@@ -101,8 +110,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,9 +24,14 @@ export default defineNuxtConfig({
     '@vueuse/nuxt',
     'floating-vue/nuxt',
     'motion-v/nuxt',
+    ...(isSentryEnabled ? ['@sentry/nuxt/module'] : []),
   ],
 
   components: [
+    {
+      path: 'components/auth',
+      pathPrefix: false,
+    },
     {
       path: 'components/bases',
       pathPrefix: false,
@@ -114,6 +120,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.3",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -21,7 +21,9 @@
     "uno.config.ts"
   ],
   "dependencies": {
+    "@capacitor/core": "8.4.0",
     "@capacitor/preferences": "8.0.1",
+    "@capgo/capacitor-social-login": "8.3.22",
     "@nuxt/icon": "2.2.3",
     "@nuxt/scripts": "0.13.2",
     "@nuxtjs/color-mode": "3.5.2",
@@ -31,6 +33,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 +56,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/public/images/auth/AppleConnect/apple-dark.svg

@@ -0,0 +1,3 @@
+<svg width="842" height="1e3" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#000000" d="M702 960c-54.2 52.6-114 44.4-171 19.6-60.6-25.3-116-26.9-180 0-79.7 34.4-122 24.4-170-19.6-271-279-231-704 77-720 74.7 4 127 41.3 171 44.4 65.4-13.3 128-51.4 198-46.4 84.1 6.8 147 40 189 99.7-173 104-132 332 26.9 396-31.8 83.5-72.6 166-141 227zM423 237C414.9 113 515.4 11 631 1c15.9 143-130 250-208 236z"/>
+</svg>

package/public/images/auth/AppleConnect/apple-light.svg

@@ -0,0 +1,3 @@
+<svg width="842" height="1e3" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#FFFFFF" d="M702 960c-54.2 52.6-114 44.4-171 19.6-60.6-25.3-116-26.9-180 0-79.7 34.4-122 24.4-170-19.6-271-279-231-704 77-720 74.7 4 127 41.3 171 44.4 65.4-13.3 128-51.4 198-46.4 84.1 6.8 147 40 189 99.7-173 104-132 332 26.9 396-31.8 83.5-72.6 166-141 227zM423 237C414.9 113 515.4 11 631 1c15.9 143-130 250-208 236z"/>
+</svg>

package/public/images/auth/GoogleConnect/google.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="47px" height="48px" viewBox="0 0 47 48" version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+  <title>Google_color</title>
+  <desc>Created with Sketch.</desc>
+  <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Color-" transform="translate(-401.000000, -860.000000)">
+      <g id="Google" transform="translate(401.000000, 860.000000)">
+        <path d="M9.82727273,24 C9.82727273,22.4757333 10.0804318,21.0144 10.5322727,19.6437333 L2.62345455,13.6042667 C1.08206818,16.7338667 0.213636364,20.2602667 0.213636364,24 C0.213636364,27.7365333 1.081,31.2608 2.62025,34.3882667 L10.5247955,28.3370667 C10.0772273,26.9728 9.82727273,25.5168 9.82727273,24" id="Fill-1" fill="#FBBC05"></path>
+        <path d="M23.7136364,10.1333333 C27.025,10.1333333 30.0159091,11.3066667 32.3659091,13.2266667 L39.2022727,6.4 C35.0363636,2.77333333 29.6954545,0.533333333 23.7136364,0.533333333 C14.4268636,0.533333333 6.44540909,5.84426667 2.62345455,13.6042667 L10.5322727,19.6437333 C12.3545909,14.112 17.5491591,10.1333333 23.7136364,10.1333333" id="Fill-2" fill="#EA4335"></path>
+        <path d="M23.7136364,37.8666667 C17.5491591,37.8666667 12.3545909,33.888 10.5322727,28.3562667 L2.62345455,34.3946667 C6.44540909,42.1557333 14.4268636,47.4666667 23.7136364,47.4666667 C29.4455,47.4666667 34.9177955,45.4314667 39.0249545,41.6181333 L31.5177727,35.8144 C29.3995682,37.1488 26.7323182,37.8666667 23.7136364,37.8666667" id="Fill-3" fill="#34A853"></path>
+        <path d="M46.1454545,24 C46.1454545,22.6133333 45.9318182,21.12 45.6113636,19.7333333 L23.7136364,19.7333333 L23.7136364,28.8 L36.3181818,28.8 C35.6879545,31.8912 33.9724545,34.2677333 31.5177727,35.8144 L39.0249545,41.6181333 C43.3393409,37.6138667 46.1454545,31.6490667 46.1454545,24" id="Fill-4" fill="#4285F4"></path>
+      </g>
+    </g>
+  </g>
+</svg>

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,
-  }
-}