@flux-ui/components 3.0.0-next.57 → 3.0.0-next.59

package/src/component/FluxCalendarItem.vue

@@ -0,0 +1,79 @@
+<script
+    lang="ts"
+    setup>
+    import type { DateTime } from 'luxon';
+    import { computed, getCurrentInstance, onBeforeUnmount, onMounted, type VNode, watch } from 'vue';
+    import { useCalendarInjection } from '~flux/components/composable';
+
+    const emit = defineEmits<{
+        click: [MouseEvent];
+    }>();
+
+    const props = defineProps<{
+        readonly date: DateTime;
+        readonly id?: string | number;
+        readonly duration?: number;
+        readonly allDay?: boolean;
+    }>();
+
+    const slots = defineSlots<{
+        default(): VNode[];
+    }>();
+
+    const dragContext = useCalendarInjection();
+    const instance = getCurrentInstance();
+    const isClickable = computed(() => !!instance?.vnode?.props?.onClick);
+
+    function buildData() {
+        return {
+            id: props.id as string | number,
+            date: props.date,
+            duration: props.duration,
+            allDay: props.allDay ?? false,
+            isClickable: isClickable.value,
+            renderContent: () => slots.default?.() ?? [],
+            handleClick: (evt: MouseEvent) => emit('click', evt)
+        };
+    }
+
+    onMounted(() => {
+        if (dragContext && props.id != null) {
+            dragContext.registerItem(props.id, buildData());
+        }
+    });
+
+    onBeforeUnmount(() => {
+        if (dragContext && props.id != null) {
+            dragContext.unregisterItem(props.id);
+        }
+    });
+
+    watch(() => props.id, (newId, oldId) => {
+        if (!dragContext) {
+            return;
+        }
+
+        if (oldId != null) {
+            dragContext.unregisterItem(oldId);
+        }
+
+        if (newId != null) {
+            dragContext.registerItem(newId, buildData());
+        }
+    });
+
+    watch(
+        () => [props.date, props.duration, props.allDay, isClickable.value],
+        () => {
+            if (dragContext && props.id != null) {
+                dragContext.registerItem(props.id, buildData());
+            }
+        }
+    );
+</script>
+
+<template>
+    <span
+        aria-hidden="true"
+        style="display: none"/>
+</template>

package/src/component/FluxCheckbox.vue

@@ -48,9 +48,9 @@
     import type { FluxFormInputBaseProps } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { computed, toRef, unref, useTemplateRef, watchEffect } from 'vue';
-    import { useDisabled, useFormFieldInjection } from '$flux/composable';
+    import { useDisabled, useFormFieldInjection } from '~flux/components/composable';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     const modelValue = defineModel<boolean | null>({
         default: false

package/src/component/FluxChip.vue

@@ -35,9 +35,9 @@
     import type { FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { computed } from 'vue';
-    import { FluxFadeTransition } from '$flux/transition';
+    import { FluxFadeTransition } from '~flux/components/transition';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Chip.module.scss';
+    import $style from '~flux/components/css/component/Chip.module.scss';
 
     defineEmits<{
         click: [MouseEvent];

package/src/component/FluxClickablePane.vue

@@ -29,11 +29,11 @@
 <script
     lang="ts"
     setup>
-    import type { VNode } from 'vue';
     import type { FluxPressableType, FluxTo } from '@flux-ui/types';
+    import type { VNode } from 'vue';
     import FluxPressable from './FluxPressable.vue';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/Pane.module.scss';
+    import $style from '~flux/components/css/component/Pane.module.scss';
 
     const CLASS_MAP = {
         default: $style.paneDefault,

package/src/component/FluxColorPicker.vue

@@ -133,12 +133,12 @@
     import { hexToRGB, hslToHSV, hslToRGB, hsvToHSL, hsvToRGB, rgbToHEX, rgbToHSL, rgbToHSV } from '@basmilius/utils';
     import { blue500 } from '@flux-ui/internals';
     import { computed, type ComputedRef, ref, unref, watch } from 'vue';
-    import { useTranslate } from '$flux/composable/private';
+    import { useTranslate } from '~flux/components/composable/private';
     import CoordinatePicker from './primitive/CoordinatePicker.vue';
     import FluxFormField from './FluxFormField.vue';
     import FluxFormInput from './FluxFormInput.vue';
     import FluxFormSlider from './FluxFormSlider.vue';
-    import $style from '$flux/css/component/Color.module.scss';
+    import $style from '~flux/components/css/component/Color.module.scss';
 
     const modelValue = defineModel<string | [number, number, number]>({
         default: blue500

package/src/component/FluxColorSelect.vue

@@ -61,15 +61,15 @@
     setup>
     import { amber500, blue500, cyan500, emerald500, fuchsia500, green500, indigo500, lime500, orange500, pink500, purple500, red500, rose500, sky500, teal500, violet500, yellow500 } from '@flux-ui/internals';
     import { ref, toRef, unref, watch } from 'vue';
-    import { useDisabled } from '$flux/composable';
-    import { useTranslate } from '$flux/composable/private';
+    import { useDisabled } from '~flux/components/composable';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxColorPicker from './FluxColorPicker.vue';
     import FluxFlyout from './FluxFlyout.vue';
     import FluxIcon from './FluxIcon.vue';
     import FluxPaneBody from './FluxPaneBody.vue';
     import FluxPrimaryButton from './FluxPrimaryButton.vue';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
-    import $style from '$flux/css/component/Color.module.scss';
+    import $style from '~flux/components/css/component/Color.module.scss';
 
     const modelValue = defineModel<string>({
         default: '#000000'

package/src/component/FluxColumn.vue

@@ -10,7 +10,7 @@
     lang="ts"
     setup>
     import type { VNode } from 'vue';
-    import $style from '$flux/css/component/Layout.module.scss';
+    import $style from '~flux/components/css/component/Layout.module.scss';
 
     const {
         gap = 18

package/src/component/FluxCommandPalette.vue

@@ -147,17 +147,17 @@
 <script
     lang="ts"
     setup>
-    import type { FluxCommandSource, FluxCommandSourceItem } from '@flux-ui/types';
     import { isSSR, vHeightTransition } from '@flux-ui/internals';
+    import type { FluxCommandSource, FluxCommandSourceItem } from '@flux-ui/types';
     import { onMounted, onUnmounted, ref, toRef, unref, useTemplateRef } from 'vue';
-    import { useCommandPalette } from '$flux/composable/private/useCommandPalette';
+    import { useCommandPalette } from '~flux/components/composable/private';
+    import { FluxWindowTransition } from '~flux/components/transition';
     import FluxCommandPaletteGroup from './FluxCommandPaletteGroup.vue';
     import FluxCommandPaletteItem from './FluxCommandPaletteItem.vue';
     import FluxIcon from './FluxIcon.vue';
     import FluxSpinner from './FluxSpinner.vue';
     import FluxTag from './FluxTag.vue';
-    import FluxWindowTransition from '$flux/transition/FluxWindowTransition.vue';
-    import $style from '$flux/css/component/CommandPalette.module.scss';
+    import $style from '~flux/components/css/component/CommandPalette.module.scss';
 
     const props = defineProps<{
         readonly hasKeyboardShortcut?: boolean;

package/src/component/FluxCommandPaletteGroup.vue

@@ -14,7 +14,7 @@
     setup>
     import type { FluxIconName } from '@flux-ui/types';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/CommandPalette.module.scss';
+    import $style from '~flux/components/css/component/CommandPalette.module.scss';
 
     defineProps<{
         readonly icon?: FluxIconName;

package/src/component/FluxCommandPaletteItem.vue

@@ -42,7 +42,7 @@
     import type { FluxIconName } from '@flux-ui/types';
     import FluxIcon from './FluxIcon.vue';
     import FluxTag from './FluxTag.vue';
-    import $style from '$flux/css/component/CommandPalette.module.scss';
+    import $style from '~flux/components/css/component/CommandPalette.module.scss';
 
     defineEmits<{
         activate: [];

package/src/component/FluxComment.vue

@@ -39,9 +39,9 @@
     import { clsx } from 'clsx';
     import type { DateTime } from 'luxon';
     import { computed, type VNode } from 'vue';
-    import { useTranslate } from '$flux/composable/private';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxAvatar from './FluxAvatar.vue';
-    import $style from '$flux/css/component/Comment.module.scss';
+    import $style from '~flux/components/css/component/Comment.module.scss';
 
     const {
         avatarFallback = 'colorized',

package/src/component/FluxConfirm.vue

@@ -20,7 +20,7 @@
     lang="ts"
     setup>
     import type { FluxConfirmObject } from '@flux-ui/types';
-    import { useTranslate } from '$flux/composable/private';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxPrimaryButton from './FluxPrimaryButton.vue';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
     import { DialogLayout } from './primitive';

package/src/component/FluxContainer.vue

@@ -10,7 +10,7 @@
     lang="ts"
     setup>
     import type { VNode } from 'vue';
-    import $style from '$flux/css/component/Layout.module.scss';
+    import $style from '~flux/components/css/component/Layout.module.scss';
 
     const {
         gutter = 18

package/src/component/FluxDataTable.vue

@@ -69,8 +69,7 @@
     lang="ts"
     setup
     generic="T extends Record<string, any>">
-    import type { VNode } from 'vue';
-    import { computed } from 'vue';
+    import { computed, type VNode } from 'vue';
     import FluxPaginationBar from './FluxPaginationBar.vue';
     import FluxTable from './FluxTable.vue';
     import FluxTableRow from './FluxTableRow.vue';

package/src/component/FluxDatePicker.vue

@@ -130,10 +130,10 @@
     import { clsx } from 'clsx';
     import { DateTime } from 'luxon';
     import { computed, ref, unref, useId, watch } from 'vue';
-    import { useTranslate } from '$flux/composable/private';
-    import { FluxFadeTransition, FluxVerticalWindowTransition, FluxWindowTransition } from '$flux/transition';
+    import { useTranslate } from '~flux/components/composable/private';
+    import { FluxFadeTransition, FluxVerticalWindowTransition, FluxWindowTransition } from '~flux/components/transition';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
-    import $style from '$flux/css/component/DatePicker.module.scss';
+    import $style from '~flux/components/css/component/DatePicker.module.scss';
 
     const modelValue = defineModel<DateTime | DateTime[] | null>({
         required: true

package/src/component/FluxDestructiveButton.vue

@@ -20,7 +20,7 @@
     setup>
     import type { FluxButtonEmits, FluxButtonProps, FluxButtonSlots } from '@flux-ui/types';
     import FluxButton, { SLOTS } from './FluxButton.vue';
-    import $style from '$flux/css/component/Button.module.scss';
+    import $style from '~flux/components/css/component/Button.module.scss';
 
     defineEmits<FluxButtonEmits>();
     defineProps<FluxButtonProps>();

package/src/component/FluxDisabled.vue

@@ -6,7 +6,7 @@
     lang="ts"
     setup>
     import { provide, toRef } from 'vue';
-    import { FluxDisabledInjectionKey } from '$flux/data';
+    import { FluxDisabledInjectionKey } from '~flux/components/data';
 
     defineOptions({
         inheritAttrs: false

package/src/component/FluxDivider.vue

@@ -22,10 +22,10 @@
 <script
     lang="ts"
     setup>
-    import type { VNode } from 'vue';
     import type { FluxDirection } from '@flux-ui/types';
     import { clsx } from 'clsx';
-    import $style from '$flux/css/component/Divider.module.scss';
+    import type { VNode } from 'vue';
+    import $style from '~flux/components/css/component/Divider.module.scss';
 
     const {
         contentPlacement = 'center',

package/src/component/FluxDotPattern.vue

@@ -30,7 +30,7 @@
     lang="ts"
     setup>
     import { ref, useId, useTemplateRef, watch } from 'vue';
-    import $style from '$flux/css/component/Visual.module.scss';
+    import $style from '~flux/components/css/component/Visual.module.scss';
 
     const {
         width = 16,

package/src/component/FluxDropZone.vue

@@ -56,11 +56,11 @@
     setup>
     import { roundStep } from '@basmilius/utils';
     import { onMounted, onUnmounted, ref, toRef, unref, useTemplateRef, type VNode, watch } from 'vue';
-    import { useDisabled } from '$flux/composable';
-    import { useTranslate } from '$flux/composable/private';
-    import { FluxFadeTransition } from '$flux/transition';
+    import { useDisabled } from '~flux/components/composable';
+    import { useTranslate } from '~flux/components/composable/private';
+    import { FluxFadeTransition } from '~flux/components/transition';
     import FluxSpinner from './FluxSpinner.vue';
-    import $style from '$flux/css/component/DropZone.module.scss';
+    import $style from '~flux/components/css/component/DropZone.module.scss';
 
     const emit = defineEmits<{
         select: [File];

package/src/component/FluxExpandable.vue

@@ -54,10 +54,10 @@
     import { useComponentId } from '@basmilius/common';
     import type { FluxIconName } from '@flux-ui/types';
     import { computed, getCurrentInstance, onBeforeMount, onUnmounted, ref, unref, useId, watch } from 'vue';
-    import { useExpandableGroupInjection } from '$flux/composable';
-    import { FluxAutoHeightTransition, FluxFadeTransition } from '$flux/transition';
+    import { useExpandableGroupInjection } from '~flux/components/composable';
+    import { FluxAutoHeightTransition, FluxFadeTransition } from '~flux/components/transition';
     import FluxIcon from './FluxIcon.vue';
-    import $style from '$flux/css/component/Expandable.module.scss';
+    import $style from '~flux/components/css/component/Expandable.module.scss';
 
     const emit = defineEmits<{
         toggle: [boolean];

package/src/component/FluxExpandableGroup.vue

@@ -9,8 +9,8 @@
     setup>
     import { getExposedRef } from '@flux-ui/internals';
     import { type ComponentInternalInstance, provide, type VNode } from 'vue';
-    import { FluxExpandableGroupInjectionKey } from '$flux/data';
-    import $style from '$flux/css/component/Expandable.module.scss';
+    import { FluxExpandableGroupInjectionKey } from '~flux/components/data';
+    import $style from '~flux/components/css/component/Expandable.module.scss';
 
     const {
         isControlled

package/src/component/FluxFader.vue

@@ -12,7 +12,7 @@
     import { useInterval } from '@basmilius/common';
     import { unrefTemplateElement } from '@flux-ui/internals';
     import { computed, ref, unref, useTemplateRef, type VNode, watch } from 'vue';
-    import $style from '$flux/css/component/Fader.module.scss';
+    import $style from '~flux/components/css/component/Fader.module.scss';
 
     const emit = defineEmits<{
         update: [number];

package/src/component/FluxFaderItem.vue

@@ -8,7 +8,7 @@
     lang="ts"
     setup>
     import type { VNode } from 'vue';
-    import $style from '$flux/css/component/Fader.module.scss';
+    import $style from '~flux/components/css/component/Fader.module.scss';
 
     defineSlots<{
         default(): VNode[];

package/src/component/FluxFilter.vue

@@ -20,10 +20,10 @@
 <script
     lang="ts"
     setup>
-    import type { VNode } from 'vue';
     import type { FluxFilterState } from '@flux-ui/types';
+    import type { VNode } from 'vue';
     import FluxFilterBase from './FluxFilterBase.vue';
-    import FluxFilterWindow from '$flux/component/FluxFilterWindow.vue';
+    import FluxFilterWindow from './FluxFilterWindow.vue';
 
     const emit = defineEmits<{
         reset: [string]

package/src/component/FluxFilterBar.vue

@@ -75,19 +75,18 @@
 <script
     lang="ts"
     setup>
-    import type { VNode } from 'vue';
-    import { computed, unref } from 'vue';
     import type { FluxFilterState } from '@flux-ui/types';
-    import { FilterBadge, VNodeRenderer } from '$flux/component/primitive';
+    import { computed, unref, type VNode } from 'vue';
+    import { FilterBadge, VNodeRenderer } from '~flux/components/component/primitive';
     import FluxFilterBase from './FluxFilterBase.vue';
     import FluxFilterWindow from './FluxFilterWindow.vue';
     import FluxFlyout from './FluxFlyout.vue';
     import FluxFormInput from './FluxFormInput.vue';
-    import FluxMenu from '$flux/component/FluxMenu.vue';
+    import FluxMenu from './FluxMenu.vue';
     import FluxOverflowBar from './FluxOverflowBar.vue';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
-    import FluxSeparator from '$flux/component/FluxSeparator.vue';
-    import $style from '$flux/css/component/Filter.module.scss';
+    import FluxSeparator from './FluxSeparator.vue';
+    import $style from '~flux/components/css/component/Filter.module.scss';
 
     const emit = defineEmits<{
         reset: [string];

package/src/component/FluxFilterBase.vue

@@ -7,9 +7,9 @@
     setup>
     import { flattenVNodeTree, getComponentName, getComponentProps } from '@flux-ui/internals';
     import type { FluxFilterItem, FluxFilterOptionItem, FluxFilterSpecMap, FluxFilterState } from '@flux-ui/types';
-    import { computed, provide, unref, type VNode } from 'vue';
-    import { filterParsers, FluxFilterInjectionKey } from '$flux/data';
     import { camelCase } from 'lodash-es';
+    import { computed, provide, unref, type VNode } from 'vue';
+    import { filterParsers, FluxFilterInjectionKey } from '~flux/components/data';
 
     type FluxFilterType = keyof FluxFilterSpecMap;
 

package/src/component/FluxFilterDate.vue

@@ -13,9 +13,9 @@
     import type { FluxIconName } from '@flux-ui/types';
     import { DateTime } from 'luxon';
     import { computed, unref } from 'vue';
-    import { useFilterInjection } from '$flux/composable';
+    import { useFilterInjection } from '~flux/components/composable';
     import FluxDatePicker from './FluxDatePicker.vue';
-    import $style from '$flux/css/component/Filter.module.scss';
+    import $style from '~flux/components/css/component/Filter.module.scss';
 
     const {
         name

package/src/component/FluxFilterDateRange.vue

@@ -14,9 +14,9 @@
     import type { FluxIconName } from '@flux-ui/types';
     import { DateTime } from 'luxon';
     import { computed, unref } from 'vue';
-    import { useFilterInjection } from '$flux/composable';
+    import { useFilterInjection } from '~flux/components/composable';
     import FluxDatePicker from './FluxDatePicker.vue';
-    import $style from '$flux/css/component/Filter.module.scss';
+    import $style from '~flux/components/css/component/Filter.module.scss';
 
     const {
         name,

package/src/component/FluxFilterOption.vue

@@ -13,8 +13,8 @@
     setup>
     import type { FluxFilterOptionRow, FluxIconName } from '@flux-ui/types';
     import { computed, unref } from 'vue';
-    import { useFilterOptionSingle } from '$flux/composable/private';
-    import { isFluxFilterOptionHeader } from '$flux/data';
+    import { useFilterOptionSingle } from '~flux/components/composable/private';
+    import { isFluxFilterOptionHeader } from '~flux/components/data';
     import { FilterOptionBase } from './primitive';
 
     const modelSearch = defineModel<string>('searchQuery', {default: ''});

package/src/component/FluxFilterOptionAsync.vue

@@ -14,7 +14,7 @@
     setup>
     import type { FluxFilterOptionRow, FluxFilterValue, FluxIconName } from '@flux-ui/types';
     import { computed, unref } from 'vue';
-    import { useAsyncFilterOptions, useFilterOptionSingle } from '$flux/composable/private';
+    import { useAsyncFilterOptions, useFilterOptionSingle } from '~flux/components/composable/private';
     import { FilterOptionBase } from './primitive';
 
     const modelSearch = defineModel<string>('searchQuery', {

package/src/component/FluxFilterOptions.vue

@@ -13,8 +13,8 @@
     setup>
     import type { FluxFilterOptionRow, FluxIconName } from '@flux-ui/types';
     import { computed, unref } from 'vue';
-    import { useFilterOptionMulti } from '$flux/composable/private';
-    import { isFluxFilterOptionHeader } from '$flux/data';
+    import { useFilterOptionMulti } from '~flux/components/composable/private';
+    import { isFluxFilterOptionHeader } from '~flux/components/data';
     import { FilterOptionBase } from './primitive';
 
     const modelSearch = defineModel<string>('searchQuery', {

package/src/component/FluxFilterOptionsAsync.vue

@@ -13,7 +13,7 @@
     lang="ts"
     setup>
     import type { FluxFilterOptionRow, FluxFilterValue, FluxIconName } from '@flux-ui/types';
-    import { useAsyncFilterOptions, useFilterOptionMulti } from '$flux/composable/private';
+    import { useAsyncFilterOptions, useFilterOptionMulti } from '~flux/components/composable/private';
     import { FilterOptionBase } from './primitive';
 
     const modelSearch = defineModel<string>('searchQuery', {

package/src/component/FluxFilterRange.vue

@@ -40,8 +40,8 @@
     import { formatNumber } from '@basmilius/utils';
     import type { FluxIconName } from '@flux-ui/types';
     import { computed, unref } from 'vue';
-    import { useFilterInjection } from '$flux/composable';
-    import { useTranslate } from '$flux/composable/private';
+    import { useFilterInjection } from '~flux/components/composable';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxFormColumn from './FluxFormColumn.vue';
     import FluxFormField from './FluxFormField.vue';
     import FluxFormSlider from './FluxFormSlider.vue';

package/src/component/FluxFilterWindow.vue

@@ -46,13 +46,13 @@
     import { vHeightTransition } from '@flux-ui/internals';
     import type { FluxFilterItem } from '@flux-ui/types';
     import { unref, useTemplateRef, type VNode } from 'vue';
-    import { useTranslate } from '$flux/composable/private';
-    import { FilterMenuRenderer, VNodeRenderer } from './primitive';
+    import { useTranslate } from '~flux/components/composable/private';
     import FluxMenu from './FluxMenu.vue';
     import FluxMenuGroup from './FluxMenuGroup.vue';
     import FluxMenuItem from './FluxMenuItem.vue';
     import FluxWindow from './FluxWindow.vue';
-    import $style from '$flux/css/component/Filter.module.scss';
+    import { FilterMenuRenderer, VNodeRenderer } from './primitive';
+    import $style from '~flux/components/css/component/Filter.module.scss';
 
     const emit = defineEmits<{
         reset: [string]

package/src/component/FluxFlickeringGrid.vue

@@ -10,7 +10,7 @@
     import { mulberry32 } from '@basmilius/utils';
     import { useInView } from '@flux-ui/internals';
     import { computed, unref, useTemplateRef, watch } from 'vue';
-    import $style from '$flux/css/component/Visual.module.scss';
+    import $style from '~flux/components/css/component/Visual.module.scss';
 
     const {
         color = '#1d4ed8',

package/src/component/FluxFlyout.vue

@@ -43,9 +43,9 @@
     import type { FluxDirection } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { provide, ref, unref, useTemplateRef, type VNode, watch } from 'vue';
-    import { FluxFlyoutInjectionKey } from '$flux/data';
+    import { FluxFlyoutInjectionKey } from '~flux/components/data';
     import FluxPane from './FluxPane.vue';
-    import $style from '$flux/css/component/Flyout.module.scss';
+    import $style from '~flux/components/css/component/Flyout.module.scss';
 
     const {
         direction = 'vertical',

package/src/component/FluxFocalPointEditor.vue

@@ -56,14 +56,14 @@
     lang="ts"
     setup>
     import { computed, onMounted, onUnmounted, ref, unref, useTemplateRef, watch } from 'vue';
-    import { useTranslate } from '$flux/composable/private';
-    import { FluxFadeTransition } from '$flux/transition';
+    import { useTranslate } from '~flux/components/composable/private';
+    import { FluxFadeTransition } from '~flux/components/transition';
     import FluxPane from './FluxPane.vue';
     import FluxPaneBody from './FluxPaneBody.vue';
     import FluxPaneFooter from './FluxPaneFooter.vue';
     import FluxSecondaryButton from './FluxSecondaryButton.vue';
     import FluxSpacer from './FluxSpacer.vue';
-    import $style from '$flux/css/component/FocalPoint.module.scss';
+    import $style from '~flux/components/css/component/FocalPoint.module.scss';
 
     const modelValue = defineModel<[number, number]>({
         required: true

package/src/component/FluxFocalPointImage.vue

@@ -13,7 +13,7 @@
     setup>
     import type { FluxFocalPointObject } from '@flux-ui/types';
     import { computed } from 'vue';
-    import $style from '$flux/css/component/FocalPoint.module.scss';
+    import $style from '~flux/components/css/component/FocalPoint.module.scss';
 
     const {
         alt = '',

package/src/component/FluxForm.vue

@@ -14,7 +14,7 @@
     setup>
     import type { VNode } from 'vue';
     import FluxDisabled from './FluxDisabled.vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     const emit = defineEmits<{
         submit: [];

package/src/component/FluxFormColumn.vue

@@ -8,7 +8,7 @@
     lang="ts"
     setup>
     import type { VNode } from 'vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     defineSlots<{
         default(): VNode[];