@sfxcode/formkit-primevue 2.4.7 → 2.4.9

package/dist/components/FormKitDataEdit.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
-import { ref } from 'vue'
 import { FormKit, FormKitSchema } from '@formkit/vue'
+import { ref } from 'vue'
 import FormKitDebug from './FormKitDebug.vue'
 
 const props = defineProps({

package/dist/components/FormKitDataView.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
-import { ref } from 'vue'
 import { FormKit, FormKitSchema } from '@formkit/vue'
+import { ref } from 'vue'
 import FormKitDebug from './FormKitDebug.vue'
 
 const props = defineProps({

package/dist/components/PrimeAutoComplete.vue

@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import { type PropType, ref } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
-
 import type { AutoCompleteCompleteEvent, AutoCompleteProps } from 'primevue/autocomplete'
+
+import { type PropType, ref } from 'vue'
 import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeAutoCompleteProps {
@@ -21,7 +21,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 
 const suggestions = ref([])
 
@@ -37,7 +37,8 @@ function search(event: AutoCompleteCompleteEvent) {
       v-model="context._value"
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
-      :class="styleClass"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"

package/dist/components/PrimeCascadeSelect.vue

@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
-
 import type { CascadeSelectProps } from 'primevue/cascadeselect'
+
+import type { PropType } from 'vue'
 import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeCascadeSelectProps {
@@ -25,7 +25,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -36,7 +36,8 @@ const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
       v-bind="context?.attrs"
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
-      :class="styleClass"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"

package/dist/components/PrimeCheckbox.vue

@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
-
 import type { CheckboxProps } from 'primevue/checkbox'
+
+import type { PropType } from 'vue'
 import { useFormKitInput, useFormKitSection } from '../composables'
 
 export interface FormKitPrimeCheckboxProps {
@@ -25,7 +25,7 @@ const props = defineProps({
 
 const { hasPrefix, hasSuffix, generateId } = useFormKitSection(props.context)
 
-const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 
 const generatedId = generateId()
 </script>
@@ -42,7 +42,8 @@ const generatedId = generateId()
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
       :input-style="context?.attrs.style"
-      :input-class="styleClass"
+      :input-class="context?.attrs?.class"
+      :invalid="isInvalid"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"

package/dist/components/PrimeColorPicker.vue

@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
-
 import type { ColorPickerProps } from 'primevue/colorpicker'
+
+import type { PropType } from 'vue'
 import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeColorPickerProps {

package/dist/components/PrimeDatePicker.vue

@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
-
 import type { DatePickerBlurEvent, DatePickerProps } from 'primevue/datepicker'
+
+import type { PropType } from 'vue'
 import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeDatePickerProps {
@@ -59,7 +59,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleInput, handleSelect } = useFormKitInput(props.context)
+const { isInvalid, handleInput, handleSelect } = useFormKitInput(props.context)
 
 function handleBlur(e: DatePickerBlurEvent) {
   props.context?.handlers.blur(e.originalEvent)
@@ -79,7 +79,8 @@ function handleClearClick() {
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
       :input-style="context?.attrs.style"
-      :input-class="styleClass"
+      :input-class="context?.attrs?.class"
+      :invalid="isInvalid"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"

package/dist/components/PrimeEditor.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
-
 import type { EditorProps, EditorSelectionChangeEvent } from 'primevue/editor'
+
+import type { PropType } from 'vue'
 import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeEditorProps {
@@ -22,7 +22,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleInput } = useFormKitInput(props.context)
+const { isInvalid, handleInput } = useFormKitInput(props.context)
 
 function handleSelection(e: EditorSelectionChangeEvent) {
   if (e.range === null)
@@ -39,7 +39,8 @@ function handleSelection(e: EditorSelectionChangeEvent) {
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
       :editor-style="context?.attrs.style"
-      :class="styleClass"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"

package/dist/components/PrimeInputMask.vue

@@ -1,10 +1,10 @@
 <script setup lang='ts'>
-import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
-
 import type { InputMaskProps } from 'primevue/inputmask'
-import InputIcon from 'primevue/inputicon'
+
+import type { PropType } from 'vue'
 import IconField from 'primevue/iconfield'
+import InputIcon from 'primevue/inputicon'
 import { useFormKitInput, useFormKitSection } from '../composables'
 
 export interface FormKitPrimeInputMaskProps {
@@ -26,7 +26,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
 </script>
 
@@ -40,7 +40,8 @@ const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
         v-bind="context?.attrs"
         :disabled="!!context?.disabled"
         :readonly="context?.attrs.readonly ?? false"
-        :class="styleClass"
+        :class="context?.attrs?.class"
+        :invalid="isInvalid"
         :tabindex="context?.attrs.tabindex"
         :aria-label="context?.attrs.ariaLabel"
         :aria-labelledby="context?.attrs.ariaLabelledby"
@@ -49,7 +50,6 @@ const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
         :auto-clear="context.autoClear ?? true"
         :unmask="context.unmask ?? false"
         :pt="context.pt"
-        :invalid="context.invalid"
         :variant="context.variant"
         :pt-options="context.ptOptions"
         :unstyled="context.unstyled ?? false"

package/dist/components/PrimeInputNumber.vue

@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
-
 import type { InputNumberBlurEvent, InputNumberProps } from 'primevue/inputnumber'
+
+import type { PropType } from 'vue'
 import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeInputNumberProps {
@@ -33,7 +33,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleInput } = useFormKitInput(props.context)
+const { isInvalid, handleInput } = useFormKitInput(props.context)
 
 function handleBlur(e: InputNumberBlurEvent) {
   props.context?.handlers.blur(e.originalEvent)
@@ -49,7 +49,8 @@ function handleBlur(e: InputNumberBlurEvent) {
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
       :input-style="context?.attrs.style"
-      :input-class="styleClass"
+      :input-class="context?.attrs?.class"
+      :invalid="isInvalid"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"

package/dist/components/PrimeInputOtp.vue

@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
-
 import type { InputOtpProps } from 'primevue/inputotp'
+
+import type { PropType } from 'vue'
 import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeInputOtpProps {
@@ -23,7 +23,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleBlur, handleInput } = useFormKitInput(props.context)
+const { isInvalid, handleBlur, handleInput } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -35,7 +35,8 @@ const { styleClass, handleBlur, handleInput } = useFormKitInput(props.context)
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
       :style="context?.attrs.style"
-      :class="styleClass"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"

package/dist/components/PrimeInputText.vue

@@ -1,10 +1,10 @@
 <script setup lang='ts'>
-import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
+import type { InputTextProps } from 'primevue/inputtext'
 
+import type { PropType } from 'vue'
 import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'
-import type { InputTextProps } from 'primevue/inputtext'
 import { useFormKitInput, useFormKitSection } from '../composables'
 
 export interface FormKitPrimeInputTextProps {
@@ -21,7 +21,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
 </script>
 
@@ -36,7 +36,8 @@ const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
         :disabled="!!context?.disabled"
         :readonly="context?.attrs.readonly ?? false"
         :style="context?.attrs.style"
-        :class="styleClass"
+        :class="context?.attrs?.class"
+        :invalid="isInvalid"
         :tabindex="context?.attrs.tabindex"
         :aria-label="context?.attrs.ariaLabel"
         :aria-labelledby="context?.attrs.ariaLabelledby"

package/dist/components/PrimeKnob.vue

@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
-
 import type { KnobProps } from 'primevue/knob'
+
+import type { PropType } from 'vue'
 import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeKnobProps {
@@ -29,7 +29,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass } = useFormKitInput(props.context)
+const { isInvalid } = useFormKitInput(props.context)
 
 function handleInput(e: any) {
   props.context?.node.input(e)
@@ -50,7 +50,8 @@ function updateValue(n: number) {
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
       :style="context?.attrs.style"
-      :class="styleClass"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"

package/dist/components/PrimeListbox.vue

@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
-
 import type { ListboxProps } from 'primevue/listbox'
+
+import type { PropType } from 'vue'
 import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeListboxProps {
@@ -30,7 +30,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -42,7 +42,8 @@ const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
       :list-style="context?.attrs.style"
-      :class="styleClass"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"

package/dist/components/PrimeMultiSelect.vue

@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
-
 import type { MultiSelectProps } from 'primevue/multiselect'
+
+import type { PropType } from 'vue'
 import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeMultiSelectProps {
@@ -51,7 +51,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleBlur, handleChange } = useFormKitInput(props.context)
+const { isInvalid, handleBlur, handleChange } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -63,7 +63,8 @@ const { styleClass, handleBlur, handleChange } = useFormKitInput(props.context)
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
       :list-style="context?.attrs.style"
-      :class="styleClass"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"

package/dist/components/PrimeOutputBoolean.vue

@@ -1,7 +1,7 @@
 <script setup lang='ts'>
-import { useI18n } from 'vue-i18n'
-import { type PropType, computed } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
+import { computed, type PropType } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useFormKitSection } from '../composables'
 
 const props = defineProps({

package/dist/components/PrimeOutputDate.vue

@@ -1,7 +1,7 @@
 <script setup lang='ts'>
-import { useI18n } from 'vue-i18n'
-import { type PropType, computed } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
+import { computed, type PropType } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useFormKitSection } from '../composables'
 
 const props = defineProps({

package/dist/components/PrimeOutputDuration.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
-import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
+import type { PropType } from 'vue'
 import { useFormKitSection, useOutputDuration } from '../composables'
 
 const props = defineProps({

package/dist/components/PrimeOutputLink.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
-import { type PropType, computed } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
+import { computed, type PropType } from 'vue'
 import { useFormKitSection } from '../composables'
 
 const props = defineProps({

package/dist/components/PrimeOutputList.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
-import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
+import type { PropType } from 'vue'
 import { useFormKitSection } from '../composables'
 
 const props = defineProps({

package/dist/components/PrimeOutputNumber.vue

@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import { useI18n } from 'vue-i18n'
-import { type PropType, computed } from 'vue'
-
 import type { FormKitFrameworkContext } from '@formkit/core'
+import { computed, type PropType } from 'vue'
+
+import { useI18n } from 'vue-i18n'
 import { useFormKitSection } from '../composables'
 
 const props = defineProps({

package/dist/components/PrimeOutputReference.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
-import { type PropType, computed } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
+import { computed, type PropType } from 'vue'
 import { useFormKitSection } from '../composables'
 
 const props = defineProps({

package/dist/components/PrimeOutputText.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
-import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
+import type { PropType } from 'vue'
 import { useFormKitSection } from '../composables'
 
 const props = defineProps({

package/dist/components/PrimePassword.vue

@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
-
 import type { PasswordProps } from 'primevue/password'
+
+import type { PropType } from 'vue'
 import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimePasswordProps {
@@ -30,7 +30,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -42,7 +42,8 @@ const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
       :input-style="context?.attrs.style"
-      :input-class="styleClass"
+      :input-class="context?.attrs?.class"
+      :invalid="isInvalid"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"

package/dist/components/PrimeRadioButton.vue

@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
-
 import type { RadioButtonProps } from 'primevue/radiobutton'
+
+import type { PropType } from 'vue'
 import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeRadioButtonProps {
@@ -21,7 +21,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleChange, handleBlur } = useFormKitInput(props.context)
+const { isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -36,7 +36,8 @@ const { styleClass, handleChange, handleBlur } = useFormKitInput(props.context)
         :name="context?.attrs.name"
         :value="option.value"
         :input-style="context?.attrs.style"
-        :input-class="styleClass"
+        :input-class="context?.attrs?.class"
+        :invalid="isInvalid"
         :pt="context.pt"
         :pt-options="context.ptOptions"
         :unstyled="context.unstyled ?? false"

package/dist/components/PrimeRating.vue

@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
-
 import type { RatingProps } from 'primevue/rating'
+
+import type { PropType } from 'vue'
 import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeRatingProps {
@@ -22,7 +22,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -34,7 +34,8 @@ const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
       :style="context?.attrs.style"
-      :class="styleClass"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"

package/dist/components/PrimeSelect.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
-
 import type { SelectProps } from 'primevue/select'
+
+import type { PropType } from 'vue'
 import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeSelectProps {
@@ -47,7 +47,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
+const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -59,9 +59,10 @@ const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
       :style="context?.attrs.style"
-      :class="styleClass"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
       :input-style="context?.attrs.style"
-      :input-class="styleClass"
+      :input-class="context?.attrs?.class"
       :input-props="context?.attrs.inputProps"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"

package/dist/components/PrimeSelectButton.vue

@@ -1,8 +1,8 @@
 <script setup lang='ts'>
-import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
-
 import type { SelectButtonProps } from 'primevue/selectbutton'
+
+import type { PropType } from 'vue'
 import { useFormKitInput } from '../composables'
 
 export interface FormKitPrimeSelectButtonProps {
@@ -25,7 +25,7 @@ const props = defineProps({
   },
 })
 
-const { styleClass, handleChange, handleBlur } = useFormKitInput(props.context)
+const { isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -37,7 +37,8 @@ const { styleClass, handleChange, handleBlur } = useFormKitInput(props.context)
       :disabled="!!context?.disabled"
       :readonly="context?.attrs.readonly ?? false"
       :style="context?.attrs.style"
-      :class="styleClass"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"