move calendar, dropdown-menu, select, dialog, number-field components to

the ui package

resources/js/Components/Common/Member/MemberBillableSelect.vue

@@ -1,11 +1,5 @@
 <script setup lang="ts">
-import {
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/packages/ui/src';
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/Components/ui/select';
 import type { BillableKey } from '@/types/projects';
 
 const model = defineModel<BillableKey>({

resources/js/Components/Common/Member/MemberEditModal.vue

@@ -7,13 +7,7 @@ import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
 import { type MemberBillableKey, useMembersStore } from '@/utils/useMembers';
 import BillableRateInput from '@/packages/ui/src/Input/BillableRateInput.vue';
 import { Field, FieldLabel, FieldDescription } from '@/packages/ui/src/field';
-import {
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/packages/ui/src';
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/Components/ui/select';
 import {
     Tooltip,
     TooltipContent,

resources/js/Components/Common/Member/MemberRoleSelect.vue

@@ -1,11 +1,5 @@
 <script setup lang="ts">
-import {
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/packages/ui/src';
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/Components/ui/select';
 import type { Role } from '@/types/jetstream';
 import { usePage } from '@inertiajs/vue3';
 

resources/js/Components/Common/Project/BaseFilterBadge.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
 import { XMarkIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
 import type { Component } from 'vue';
-import {
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/packages/ui/src';
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuTrigger,
-} from '@/packages/ui/src';
 
 defineProps<{
     icon: Component;

resources/js/Components/Common/Reporting/ReportingFilterBar.vue

@@ -8,13 +8,7 @@ import ClientMultiselectDropdown from '@/Components/Common/Client/ClientMultisel
 import MemberMultiselectDropdown from '@/Components/Common/Member/MemberMultiselectDropdown.vue';
 import ReportingFilterBadge from '@/Components/Common/Reporting/ReportingFilterBadge.vue';
 import ProjectMultiselectDropdown from '@/Components/Common/Project/ProjectMultiselectDropdown.vue';
-import {
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/packages/ui/src';
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/Components/ui/select';
 import MainContainer from '@/packages/ui/src/MainContainer.vue';
 import DateRangePicker from '@/packages/ui/src/Input/DateRangePicker.vue';
 import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';

resources/js/Components/Common/Reporting/ReportingGroupBySelect.vue

@@ -1,11 +1,5 @@
 <script setup lang="ts">
-import {
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/packages/ui/src';
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/Components/ui/select';
 import { type Component, computed } from 'vue';
 
 const model = defineModel<string | null>({ default: null });

resources/js/Components/Common/Reporting/ReportingRoundingControls.vue

@@ -2,13 +2,7 @@
 import { Switch } from '@/Components/ui/switch';
 import { Popover, PopoverContent, PopoverTrigger } from '@/packages/ui/src';
 import { Button } from '@/packages/ui/src';
-import {
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/packages/ui/src';
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/Components/ui/select';
 import { Field, FieldLabel } from '@/packages/ui/src/field';
 import {
     NumberField,
@@ -16,7 +10,7 @@ import {
     NumberFieldContent,
     NumberFieldIncrement,
     NumberFieldDecrement,
-} from '@/Components/ui/number-field';
+} from '@/packages/ui/src';
 import { ArrowsUpDownIcon } from '@heroicons/vue/20/solid';
 import { computed, ref, watch } from 'vue';
 import { twMerge } from 'tailwind-merge';

resources/js/Components/ui/calendar/CalendarDateInput.vue

@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import { Popover, PopoverContent, PopoverTrigger } from '@/packages/ui/src';
-import { Button } from '@/packages/ui/src';
-import { Calendar } from '@/Components/ui/calendar';
-import { CalendarIcon, XIcon } from 'lucide-vue-next';
-import { formatDate } from '@/packages/ui/src/utils/time';
-import { parseDate } from '@internationalized/date';
-import { computed, inject, type ComputedRef } from 'vue';
-import { type Organization } from '@/packages/api/src';
-
-const model = defineModel<string | null>();
-const emit = defineEmits<{
-    blur: [];
-}>();
-
-defineProps<{
-    clearable?: boolean;
-}>();
-
-const handleChange = (date: string) => {
-    model.value = date;
-};
-
-const handleBlur = () => {
-    emit('blur');
-};
-
-const handleClear = (event: Event) => {
-    event.stopPropagation();
-    model.value = null;
-};
-
-const date = computed(() => {
-    return model.value ? parseDate(model.value) : undefined;
-});
-
-const organization = inject<ComputedRef<Organization>>('organization');
-</script>
-
-<template>
-    <Popover>
-        <PopoverTrigger as-child>
-            <Button
-                variant="input"
-                :class="[
-                    'w-full justify-start text-left font-normal',
-                    !model && 'text-muted-foreground',
-                ]">
-                <CalendarIcon class="mr-2 h-4 w-4" />
-                <span class="flex-1">
-                    {{ model ? formatDate(model, organization?.date_format) : 'Pick a date' }}
-                </span>
-                <button
-                    v-if="clearable && model"
-                    class="ml-2 hover:bg-muted rounded p-1 transition-colors"
-                    type="button"
-                    @click="handleClear">
-                    <XIcon class="h-4 w-4" />
-                </button>
-            </Button>
-        </PopoverTrigger>
-        <PopoverContent class="w-auto p-0">
-            <Calendar
-                mode="single"
-                :model-value="date"
-                :initial-focus="true"
-                @update:model-value="(date) => handleChange(date ? date.toString() : '')"
-                @blur="handleBlur" />
-        </PopoverContent>
-    </Popover>
-</template>

resources/js/Pages/Profile/Partials/ThemeForm.vue

@@ -1,13 +1,7 @@
 <script setup lang="ts">
 import FormSection from '@/Components/FormSection.vue';
 import { Field, FieldLabel, FieldDescription } from '@/packages/ui/src/field';
-import {
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/packages/ui/src';
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/Components/ui/select';
 import { usePreferredColorScheme } from '@vueuse/core';
 import { themeSetting } from '@/utils/theme';
 

resources/js/Pages/Teams/Partials/OrganizationFormatSettings.vue

@@ -6,13 +6,7 @@ import { Field, FieldLabel } from '@/packages/ui/src/field';
 import type { UpdateOrganizationBody } from '@/packages/api/src';
 import { useOrganizationStore } from '@/utils/useOrganization';
 import { storeToRefs } from 'pinia';
-import {
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/packages/ui/src';
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/Components/ui/select';
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import type { DateFormat, TimeFormat, IntervalFormat } from '@/packages/ui/src/utils/time';
 import type { CurrencyFormat } from '@/packages/ui/src/utils/money';

resources/js/packages/ui/src/FullCalendar/CalendarSettingsPopover.vue

@@ -1,12 +1,6 @@
 <script setup lang="ts">
 import { Popover, PopoverContent, PopoverTrigger, Button } from '..';
-import {
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '..';
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/Components/ui/select';
 import { Field, FieldLabel } from '../field';
 import { Settings } from 'lucide-vue-next';
 import { ref, watch } from 'vue';

resources/js/packages/ui/src/Input/BillableRateInput.vue

@@ -7,7 +7,7 @@ import {
     NumberFieldDecrement,
     NumberFieldIncrement,
     NumberFieldInput,
-} from '@/Components/ui/number-field';
+} from '..';
 
 const props = defineProps<{
     name: string;

resources/js/packages/ui/src/Input/DatePicker.vue

@@ -7,7 +7,7 @@ import {
     type WeekStartDay,
 } from '@/packages/ui/src/utils/time';
 import { Popover, PopoverContent, PopoverTrigger } from '@/packages/ui/src/popover';
-import { Calendar } from '@/Components/ui/calendar';
+import { Calendar } from '..';
 import { Button } from '@/packages/ui/src/Buttons';
 import { CalendarIcon } from 'lucide-vue-next';
 import { parseDate, type DateValue } from '@internationalized/date';

resources/js/packages/ui/src/Modal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Dialog, DialogContent, DialogFooter } from '@/Components/ui/dialog';
+import { Dialog, DialogContent, DialogFooter } from './dialog/index';
 import { computed } from 'vue';
 
 const props = defineProps({

resources/js/packages/ui/src/Project/ProjectBillableSelect.vue

@@ -1,11 +1,5 @@
 <script setup lang="ts">
-import {
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '..';
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/Components/ui/select';
 import type { BillableKey } from '@/types/projects';
 
 const model = defineModel<BillableKey>({

resources/js/packages/ui/src/Project/ProjectEditBillableSection.vue

@@ -1,13 +1,7 @@
 <script setup lang="ts">
 import { Field, FieldDescription, FieldLabel } from '../field';
 import BillableRateInput from '@/packages/ui/src/Input/BillableRateInput.vue';
-import {
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '..';
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/Components/ui/select';
 import {
     Tooltip,
     TooltipContent,

resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue

@@ -17,13 +17,7 @@ import type {
 } from '@/packages/api/src';
 import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
 import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
-import {
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '..';
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/Components/ui/select';
 import { Button } from '@/packages/ui/src/Buttons';
 import DatePicker from '@/packages/ui/src/Input/DatePicker.vue';
 import DurationHumanInput from '@/packages/ui/src/Input/DurationHumanInput.vue';

resources/js/packages/ui/src/TimeEntry/TimeEntryEditModal.vue

@@ -17,13 +17,7 @@ import type {
 } from '@/packages/api/src';
 import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
 import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
-import {
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '..';
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/Components/ui/select';
 import { Button } from '@/packages/ui/src/Buttons';
 import DatePicker from '@/packages/ui/src/Input/DatePicker.vue';
 import DurationHumanInput from '@/packages/ui/src/Input/DurationHumanInput.vue';

resources/js/packages/ui/src/TimeEntry/TimeEntryMassUpdateModal.vue

@@ -16,13 +16,7 @@ import {
 } from '@/packages/api/src';
 import { Checkbox } from '@/packages/ui/src';
 import { TagIcon } from '@heroicons/vue/20/solid';
-import {
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '..';
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/Components/ui/select';
 import { Button } from '@/packages/ui/src/Buttons';
 import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
 import type { Tag, Task } from '@/packages/api/src';

resources/js/packages/ui/src/TimeEntry/TimeEntryMoreOptionsDropdown.vue

@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import { TrashIcon, PencilIcon, DocumentDuplicateIcon } from '@heroicons/vue/20/solid';
-import {
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '..';
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '..';
 
 const props = withDefaults(
     defineProps<{

resources/js/packages/ui/src/TimeTracker/TimeTrackerMoreOptionsDropdown.vue

@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import { PlusIcon, XMarkIcon } from '@heroicons/vue/20/solid';
-import {
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '..';
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '..';
 
 const props = defineProps<{
     hasActiveTimer: boolean;

resources/js/packages/ui/src/field/FieldLabel.vue

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

resources/js/packages/ui/src/index.ts

@@ -78,6 +78,52 @@ import {
     DropdownMenuSubTrigger,
     DropdownMenuTrigger,
 } from './dropdown-menu/index';
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectItemText,
+    SelectLabel,
+    SelectScrollDownButton,
+    SelectScrollUpButton,
+    SelectSeparator,
+    SelectTrigger,
+    SelectValue,
+} from './select/index';
+import {
+    NumberField,
+    NumberFieldContent,
+    NumberFieldDecrement,
+    NumberFieldIncrement,
+    NumberFieldInput,
+} from './number-field/index';
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogScrollContent,
+    DialogTitle,
+    DialogTrigger,
+} from './dialog/index';
+import {
+    Calendar,
+    CalendarCell,
+    CalendarCellTrigger,
+    CalendarGrid,
+    CalendarGridBody,
+    CalendarGridHead,
+    CalendarGridRow,
+    CalendarHeadCell,
+    CalendarHeader,
+    CalendarHeading,
+    CalendarNextButton,
+    CalendarPrevButton,
+} from './calendar/index';
+import { Label } from './label/index';
 import {
     Field,
     FieldContent,
@@ -185,4 +231,42 @@ export {
     DropdownMenuSubContent,
     DropdownMenuSubTrigger,
     DropdownMenuTrigger,
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectItemText,
+    SelectLabel,
+    SelectScrollDownButton,
+    SelectScrollUpButton,
+    SelectSeparator,
+    SelectTrigger,
+    SelectValue,
+    NumberField,
+    NumberFieldContent,
+    NumberFieldDecrement,
+    NumberFieldIncrement,
+    NumberFieldInput,
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogScrollContent,
+    DialogTitle,
+    DialogTrigger,
+    Calendar,
+    CalendarCell,
+    CalendarCellTrigger,
+    CalendarGrid,
+    CalendarGridBody,
+    CalendarGridHead,
+    CalendarGridRow,
+    CalendarHeadCell,
+    CalendarHeader,
+    CalendarHeading,
+    CalendarNextButton,
+    CalendarPrevButton,
+    Label,
 };