feat(number): support type

docs/components/number.md

@@ -64,13 +64,48 @@ const value = ref(0)
 
 :::
 
+## Type
+
+::: raw
+
+<CodeRunner title="Type">
+    <div class="space-y-2">
+        <ShadcnNumber v-model="value" size="small" type="primary"/>
+        <ShadcnNumber v-model="value" size="default" type="warning"/>
+        <ShadcnNumber v-model="value" size="large" type="success"/>
+        <ShadcnNumber v-model="value" size="large" type="error"/>
+    </div>
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnNumber v-model="value" size="small" type="primary"/>
+    <ShadcnNumber v-model="value" size="default" type="warning"/>
+    <ShadcnNumber v-model="value" size="large" type="success"/>
+    <ShadcnNumber v-model="value" size="large" type="error"/>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const value = ref(0)
+</script>
+```
+
+:::
+
 ## Props
 
 <ApiTable title="Number Props"
     :headers="['Attribute', 'Description', 'Type', 'Default Value', 'List']"
     :columns="[
         ['modelValue', 'Number value', 'number', '-', '-'],
         ['size', 'Size of the number', 'string', 'default', 'small | default | large'],
+        ['type', 'Type of the number', 'string', 'default', 'primary | warning | success | error'],
     ]">
 </ApiTable>
 

src/App.vue

@@ -1,11 +1,10 @@
 <template>
-  <div class="p-32">
+  <div class="p-32 space-y-2">
     Value: {{ value }}
-    <ShadcnSpace wrap>
-      <ShadcnNumber v-model="value" size="small"/>
-      <ShadcnNumber v-model="value" size="default"/>
-      <ShadcnNumber v-model="value" size="large" @on-blur="console.log($event)"/>
-    </ShadcnSpace>
+    <ShadcnNumber v-model="value" size="small" type="primary"/>
+    <ShadcnNumber v-model="value" size="default" type="warning"/>
+    <ShadcnNumber v-model="value" size="large" type="success"/>
+    <ShadcnNumber v-model="value" size="large" type="error"/>
   </div>
 </template>
 

src/ui/number/ShadcnNumber.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="relative">
     <div :class="['flex items-center justify-between border rounded p-3',
-              Size[size]
+              Size[size],
+              HoverType[type]
          ]">
       <!-- Input field for direct number entry -->
       <input :class="['w-full outline-none text-sm',
@@ -21,10 +22,12 @@ import { NumberEmits, NumberProps } from './types'
 import { isNumber } from '@/utils/number.ts'
 import { Size } from '@/ui/common/size.ts'
 import { FormItemContext } from '@/ui/form/context.ts'
+import { HoverType } from '@/ui/common/type.ts'
 
 const emit = defineEmits<NumberEmits>()
 const props = withDefaults(defineProps<NumberProps>(), {
-  size: 'default'
+  size: 'default',
+  type: 'primary'
 })
 
 // Create a reactive reference for the modelValue

src/ui/number/types.ts

@@ -1,10 +1,12 @@
 import { Size } from '@/ui/common/size.ts'
+import { HoverType } from '@/ui/common/type.ts'
 
 export interface NumberProps
 {
     modelValue?: number | string
     name?: string
     size?: keyof typeof Size
+    type?: keyof typeof HoverType
 }
 
 export type NumberEmits = {