Sort of working beta

resources/js/Components/ui/button/Button.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils.ts'
+import { cn } from '@/lib/utils'
 import { Primitive, type PrimitiveProps } from 'radix-vue'
 import { type ButtonVariants, buttonVariants } from '.'
 

resources/js/Components/ui/card/Card.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils.ts'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

resources/js/Components/ui/card/CardContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils.ts'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

resources/js/Components/ui/card/CardDescription.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils.ts'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

resources/js/Components/ui/card/CardFooter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils.ts'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

resources/js/Components/ui/card/CardHeader.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils.ts'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

resources/js/Components/ui/card/CardTitle.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils.ts'
+import { cn } from '@/lib/utils';
 
 const props = defineProps<{
   class?: HTMLAttributes['class']

resources/js/Components/ui/checkbox/Checkbox.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<CheckboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="
+      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+         props.class)"
+  >
+    <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
+      <slot>
+        <Check class="h-4 w-4" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>

resources/js/Components/ui/checkbox/VModelCheckbox.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(defineProps<{
+    class?: string;
+}>(), {
+    class: '',
+});
+
+const model = defineModel<boolean>({type: Boolean, default: false});
+</script>
+
+<template>
+    <input type="checkbox" :checked="model" @click="() => (model = !model)" class="peer h-7 w-7 shrink-0 rounded-sm border border-gray ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 checked:bg-secondary checked:text-dark-green transition cursor-pointer">
+</template>

resources/js/Components/ui/checkbox/index.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox.vue'

resources/js/Components/ui/feedback/spinner/LoadingSpinner.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { Loader2 } from 'lucide-vue-next'
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { spinnerVariants, type SpinnerVariants } from '.'
+
+interface Props extends PrimitiveProps {
+  size?: SpinnerVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    :class="cn(spinnerVariants({ size }), props.class)"
+  >
+    <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
+  </svg>
+</template>
+
+<style scoped></style>

resources/js/Components/ui/feedback/spinner/index.ts

@@ -0,0 +1,19 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export const spinnerVariants = cva('animate-spin lucide lucide-loader-circle-icon', {
+  variants: {
+    size: {
+      default: 'w-4 h-4 m-2',
+      xs: 'w-1 h-1 m-1',
+      sm: 'w-2 h-2 m-1',
+      lg: 'w-7 h-7 m-3',
+      xl: 'w-12 h-12 m-4',
+      icon: 'w-10 h-10 m-4'
+    }
+  },
+  defaultVariants: {
+    size: 'default'
+  }
+})
+
+export type SpinnerVariants = VariantProps<typeof spinnerVariants>

resources/js/Components/ui/input/Input.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input v-model="modelValue" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)">
+</template>

resources/js/Components/ui/input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from './Input.vue'

resources/js/Components/ui/job/JobCard.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import TitleDescription from "@/Components/Layout/Content/TitleDescription.vue";
-import { Job } from "@/types/Jobs/job";
-
-defineProps<{
-    job: Job;
-}>();
-</script>
-
-<template>
-    <TitleDescription>
-        <template #title>
-            {{ job.name }}
-        </template>
-        <template #description>
-            {{ job.description }}
-        </template>
-    </TitleDescription>
-</template>

resources/js/Components/ui/label/Label.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Label, type LabelProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Label
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

resources/js/Components/ui/label/index.ts

@@ -0,0 +1 @@
+export { default as Label } from './Label.vue'

resources/js/Components/ui/text/Description.vue

@@ -0,0 +1,3 @@
+<template>
+    <p class="text-dark-green"><slot/></p>
+</template>