@saasmakers/ui 2.0.19 → 2.0.20

package/app/components/fields/FieldCheckbox.vue

@@ -18,23 +18,6 @@ withDefaults(defineProps<Omit<FieldCheckbox, 'modelValue'>>(), {
 
 const id = useId()
 const modelValue = defineModel<FieldCheckbox['modelValue']>({ default: false })
-const isAnimatingCheck = ref(false)
-
-watch(modelValue, (value) => {
-  if (!value) {
-    isAnimatingCheck.value = false
-  }
-})
-
-function onChange(event: Event) {
-  isAnimatingCheck.value = (event.target as HTMLInputElement).checked
-}
-
-function onCheckAnimationEnd(event: AnimationEvent) {
-  if (event.animationName.startsWith('pop-in')) {
-    isAnimatingCheck.value = false
-  }
-}
 </script>
 
 <template>
@@ -59,14 +42,12 @@ function onCheckAnimationEnd(event: AnimationEvent) {
           :class="{ 'field-disabled': disabled }"
           :disabled="disabled"
           type="checkbox"
-          @change="onChange"
         >
 
         <span
           aria-hidden="true"
           class="flex items-center justify-center border-2 rounded-full transition-[background-color,border-color] duration-200 ease-out"
           :class="{
-            'animate-pop-in motion-reduce:animate-none': isAnimatingCheck,
             'border-transparent bg-indigo-600 dark:bg-indigo-400': modelValue,
             'border-gray-300 dark:border-gray-600': !modelValue,
             'group-hover:border-gray-400 dark:group-hover:border-gray-500': !disabled && !modelValue,
@@ -76,14 +57,12 @@ function onCheckAnimationEnd(event: AnimationEvent) {
             'h-5 w-5': size === 'lg',
             'peer-focus-visible:ring-2 peer-focus-visible:ring-indigo-500/40 peer-focus-visible:ring-offset-2 peer-focus-visible:outline-none': !disabled,
           }"
-          @animationend="onCheckAnimationEnd"
         >
           <Icon
             v-if="modelValue"
             :name="getLayerIcon('check')"
             class="shrink-0 text-white"
             :class="{
-              'animate-fade-in': isAnimatingCheck,
               'size-2.5': size === 'sm',
               'size-3': size === 'base',
               'size-3.5': size === 'lg',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.0.19",
+  "version": "2.0.20",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",

package/uno.config.ts

@@ -33,30 +33,22 @@ export const shortcuts: Record<string, string> = {
 export const theme = {
   animation: {
     keyframes: {
-      'fade-in': '{0%,25%{opacity:0}100%{opacity:1}}',
       'fade-pulse': '{0%,100%{opacity:0.25}50%{opacity:1}}',
-      'pop-in': '{from{transform:scale(0.8)}to{transform:scale(1)}}',
       'scale-pulse': '{0%,100%{transform:scale(0)}50%{transform:scale(1)}}',
     },
 
     durations: {
-      'fade-in': '200ms',
       'fade-pulse': '1s',
-      'pop-in': '250ms',
       'scale-pulse': '2s',
     },
 
     timingFns: {
-      'fade-in': 'ease-out',
       'fade-pulse': 'ease-in-out',
-      'pop-in': 'cubic-bezier(0.34,1.56,0.64,1)',
       'scale-pulse': 'linear',
     },
 
     counts: {
-      'fade-in': '1',
       'fade-pulse': 'infinite',
-      'pop-in': '1',
       'scale-pulse': 'infinite',
     },
   },