fix(app): variant extraction composable

packages/windi/src/App.vue

@@ -10,33 +10,30 @@ function handleClose() {
 
 <template>
   <div class="grid place-items-center w-full min-h-screen">
-    <WButton icon="ph:sun" variant="primary" size="xl" type="button" />
+    <WAvatar src="https://github.cm/selemondev.png" name="Selemon" size="xl" chip-color="orange" chip-position="bottom-left" initials="SB" />
+    <WBadge position="top-right" value="100" :max-value="99" variant="primary">
+      <WIcon name="ph:bell" size="3xl" />
+    </WBadge>
+    <WAlert :is-visible="show" icon="ph:sun" :trailing="false" variant="primary" transition="slideLeft" title="Alert" closable @close="handleClose">
+      <WAlertDescription>
+        Hello from alert
+      </WAlertDescription>
+    </WAlert>
+    <WButton icon="ph:sun" variant="warning-light" size="xl" type="button" />
     <WButtonGroup>
       <WButton icon="ph:sun" variant="primary" size="xl" type="button" />
       <WButton icon="ph:sun" variant="primary" size="xl" type="button" />
       <WButton icon="ph:sun" variant="primary" size="xl" type="button" />
     </WButtonGroup>
   </div>
-  <div>
+  <div class="grid place-items-center">
     <WAvatarGroup :max="2" size="md">
       <WAvatar src="https://github.com/selemondev.png" name="Selemon" initials="SB" />
       <WAvatar src="https://github.com/selemondev.png" name="Selemon" initials="SB" />
       <WAvatar src="https://github.cm/selemondev.png" name="Selemon" initials="SB" />
     </WAvatarGroup>
   </div>
-
-  <!-- <div class="grid place-items-center w-full min-h-screen">
-    <WBadge position="top-right" value="100" :max-value="99" variant="primary">
-      <WIcon name="ph:bell" size="3xl" />
-    </WBadge>
-  </div> -->
   <div class="mt-48 p-4 space-y-2">
-    <WAlert :is-visible="show" icon="ph:sun" :trailing="false" variant="danger-light" transition="slideLeft" title="Alert" closable @close="handleClose">
-      <WAlertDescription>
-        Hello from alert
-      </WAlertDescription>
-    </WAlert>
-
     <WAlert variant="primary" transition="fade" title="Alert" closable>
       <WAlertDescription>
         Hello from alert

packages/windi/src/components/Alert/WAlert.vue

@@ -6,6 +6,7 @@ import type { PropType } from 'vue'
 import { computed, defineComponent } from 'vue'
 import { Icon } from '@iconify/vue'
 import type { WAlert } from '../../Types/componentsTypes/components'
+import type { VariantJSWithClassesListProps } from '../../utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '../../utils/getVariantProps'
 import { useVariants } from '../../composables/useVariants'
 import { Components } from '../../Types/enums/Components'
@@ -71,7 +72,16 @@ const emit = defineEmits<{
   (event: 'close'): void
 }>()
 
-const variant = useVariants<WAlert>(Components.WAlert, props)
+const variant = computed(() => {
+  const customProps = {
+    ...props,
+    variant: props.variant,
+  }
+  return useVariants<WAlert>(
+    Components.WAlert,
+    customProps as VariantJSWithClassesListProps<WAlert>,
+  )
+})
 
 const leadingIconName = computed(() => {
   return props.leadingIcon || props.icon
@@ -90,7 +100,7 @@ const isTrailing = computed(() => {
 })
 
 const transition = computed(() => {
-  return props.transition === 'scale' ? variant.transitions?.scale : props.transition === 'fade' ? variant.transitions?.fade : props.transition === 'slideLeft' ? variant.transitions?.slideLeft : variant.transitions?.slideRight
+  return props.transition === 'scale' ? variant.value.transitions?.scale : props.transition === 'fade' ? variant.value.transitions?.fade : props.transition === 'slideLeft' ? variant.value.transitions?.slideLeft : variant.value.transitions?.slideRight
 })
 
 function onDismiss() {
@@ -108,7 +118,10 @@ export default defineComponent({
   <Transition v-bind="transition" mode="out-in">
     <div v-if="props.isVisible" :class="variant.root">
       <div :class="variant.flexBetween">
-        <div :class="[$slots.leading || isLeading ? variant.isLeading : variant.isNotLeading]" class="flex items-center">
+        <div
+          :class="[$slots.leading || isLeading ? variant.isLeading : variant.isNotLeading]"
+          class="flex items-center"
+        >
           <div class="shrink-0">
             <span v-if="(isLeading && leadingIconName) || $slots.leading" class="px-2">
               <slot name="leading">
@@ -128,15 +141,15 @@ export default defineComponent({
         <div>
           <div class="shrink-0">
             <button
-              v-if="props.closable && !isTrailing && !$slots.trailing" :title="dismissLabel" :aria-label="dismissLabel"
-              :class="variant.closeButtonClass" @click="onDismiss()"
+              v-if="props.closable && !isTrailing && !$slots.trailing" :title="dismissLabel"
+              :aria-label="dismissLabel" :class="variant.closeButtonClass" @click="onDismiss()"
             >
               <XMarkIcon class="w-6 h-6 hover:text-white" :class="variant.closeIcon" />
             </button>
 
             <button
-              v-if="props.trailing || isTrailing || $slots.trailing" :title="dismissLabel" :aria-label="dismissLabel" :class="variant.trailingClass"
-              @click="onDismiss()"
+              v-if="props.trailing || isTrailing || $slots.trailing" :title="dismissLabel"
+              :aria-label="dismissLabel" :class="variant.trailingClass" @click="onDismiss()"
             >
               <span v-if="(isTrailing && trailingIconName) || $slots.trailing">
                 <slot name="trailing">

packages/windi/src/components/Avatar/WAvatar.vue

@@ -2,6 +2,7 @@
 import type { PropType } from 'vue'
 import { computed, defineComponent, ref, watchEffect } from 'vue'
 import classNames from 'classnames'
+import type { VariantJSWithClassesListProps } from '../../utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '../../utils/getVariantProps'
 import type { WAvatar } from '../../Types/componentsTypes/components'
 import { Components } from '../../Types/enums/Components'
@@ -68,12 +69,21 @@ const fallback = computed(() => {
   return props.initials || props.name.charAt(0) || '?'
 })
 
-const variant = useVariants<WAvatar>(Components.WAvatar, props)
+const variant = computed(() => {
+  const customProps = {
+    ...props,
+    variant: props.variant,
+  }
+  return useVariants<WAvatar>(
+    Components.WAvatar,
+    customProps as VariantJSWithClassesListProps<WAvatar>,
+  )
+})
 
 const avatarWrapperClasses = computed<string>(() => {
   return classNames(
-    variant.root,
-    variant.avatarSize && variant[props.size],
+    variant.value.root,
+    variant.value.avatarSize && variant.value[props.size],
   )
 })
 const avatarClasses = computed(() => {
@@ -83,8 +93,8 @@ const avatarClasses = computed(() => {
     return props.size
   }
   else {
-    sizeClass += variant[props.size] || ''
-    return classNames(variant.rounded, sizeClass, variant.root)
+    sizeClass += variant.value[props.size] || ''
+    return classNames(variant.value.rounded, sizeClass, variant.value.root)
   }
 })
 
@@ -102,7 +112,7 @@ const avatarChipSize = computed(() => {
 
 const avatarChipClass = computed(() => {
   return classNames(
-    variant.avatarChipClass,
+    variant.value.avatarChipClass,
     windiTheme.WAvatar.base.avatarChipPosition[props.chipPosition],
   )
 })

packages/windi/src/components/Badge/WBadge.vue

@@ -3,6 +3,7 @@ import { computed, defineComponent, useSlots } from 'vue'
 import classNames from 'classnames'
 import { Positions } from '../../Types/enums/Positions'
 import { Components } from '../../Types/enums/Components'
+import type { VariantJSWithClassesListProps } from '../../utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '../../utils/getVariantProps'
 import type { WBadge } from '../../Types/componentsTypes/components'
 import { useVariants } from '../../composables/useVariants'
@@ -31,8 +32,17 @@ const props = defineProps({
     default: null,
   },
 })
+const variant = computed(() => {
+  const customProps = {
+    ...props,
+    variant: props.variant,
+  }
+  return useVariants<WBadge>(
+    Components.WBadge,
+    customProps as VariantJSWithClassesListProps<WBadge>,
+  )
+})
 
-const variant = useVariants<WBadge>(Components.WBadge, props)
 const slots = useSlots()
 const badgeValue = computed(() => {
   if (props.chip || !props.value)
@@ -53,13 +63,13 @@ const badgePosition = computed(() => {
 
 const badgeChip = computed(() => {
   return classNames(
-    props.chip && variant.chip,
+    props.chip && variant.value.chip,
   )
 })
 
 const badgeSquare = computed(() => {
   return classNames(
-    props.square && variant.square,
+    props.square && variant.value.square,
   )
 })
 </script>

packages/windi/src/components/Button/WButton.vue

@@ -3,6 +3,7 @@ import { computed, defineComponent, useAttrs } from 'vue'
 import type { PropType } from 'vue'
 import classNames from 'classnames'
 import { Icon } from '@iconify/vue'
+import type { VariantJSWithClassesListProps } from '../../utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '../../utils/getVariantProps'
 import type { WButton } from '../../Types/componentsTypes/components'
 import { Components } from '../../Types/enums/Components'
@@ -74,7 +75,16 @@ const props = defineProps({
 })
 const bind = Object.assign({}, useAttrs(), props.to ? { href: props.to } : {})
 
-const variant = useVariants<WButton>(Components.WButton, props)
+const variant = computed(() => {
+  const customProps = {
+    ...props,
+    variant: props.variant,
+  }
+  return useVariants<WButton>(
+    Components.WButton,
+    customProps as VariantJSWithClassesListProps<WButton>,
+  )
+})
 
 const isLeading = computed(() => {
   return (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing)
@@ -99,20 +109,20 @@ const isTrailing = computed(() => {
 })
 
 const buttonBlock = computed(() => {
-  return props.full && variant.full
+  return props.full && variant.value.full
 })
 
 const buttonWrapperClass = computed(() => {
   return classNames(
-    variant.root,
-    variant.buttonFlex,
+    variant.value.root,
+    variant.value.buttonFlex,
     windiTheme.WButton.base.buttonSize[props.size],
     windiTheme.WButton.base.buttonGap[props.size],
     windiTheme.WButton.base.buttonPadding[props.size],
     buttonBlock.value,
-    props.pill && variant.buttonPill,
-    props.disabled && variant.disabled,
-    (props.loading) && variant.loading,
+    props.pill && variant.value.buttonPill,
+    props.disabled && variant.value.disabled,
+    (props.loading) && variant.value.loading,
   )
 })
 

packages/windi/src/theme/windiTheme.ts

@@ -14,7 +14,7 @@ export default {
     },
     variants: {
       'default': {
-        root: 'bg-yellow-500 text-white',
+        root: 'bg-yellow-500 text-white w-full',
         outline: 'border border-yellow-500 !text-yellow-800',
         light: 'border border-yellow-500 bg-yellow-100 text-yellow-800',
       },