Dev branch

resources/js/Components/CurrencyInput.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { watch, onMounted } from "vue";
 import { useCurrencyInput } from "vue-currency-input";
+import { Input } from "@/Components/ui/input";
+import { cn } from "@/lib/utils";
 
 const props = defineProps({
   modelValue: { type: [Number, String, null], default: null },
@@ -14,6 +16,7 @@ const props = defineProps({
   precision: { type: [Number, Object], default: 2 },
   allowNegative: { type: Boolean, default: false },
   useGrouping: { type: Boolean, default: true },
+  class: { type: String, default: "" },
 });
 
 const emit = defineEmits(["update:modelValue", "change"]);
@@ -81,7 +84,7 @@ onMounted(() => {
     :placeholder="placeholder"
     :disabled="disabled"
     :required="required"
-    class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-800 dark:border-gray-600"
+    :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)"
     autocomplete="off"
     @change="$emit('change', numberValue)"
   />