@youcan/celeste 0.6.76 → 0.6.80

package/src/components/dropdown-menu/dropdown-menu-sub-trigger.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import {
   DropdownMenuSubTrigger,
   type DropdownMenuSubTriggerProps,
   useForwardProps,
 } from 'radix-vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>();
 

package/src/components/dropdown-menu/dropdown-menu.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps } from 'radix-vue';
 import { useForwardPropsEmits } from 'radix-vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<DropdownMenuRootProps & { class?: HTMLAttributes['class'] }>();
 const emits = defineEmits<DropdownMenuRootEmits>();

package/src/components/file-upload/file-upload-area.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import Button from '@/components/button/button.vue';
 import { useDropZone } from '@vueuse/core';
 import clsx from 'clsx';
 import { computed, type InputHTMLAttributes, useTemplateRef } from 'vue';
+import Button from '@/components/button/button.vue';
 
 const props = withDefaults(defineProps<FileUploadAreaProps>(), {
   icon: 'i-celeste-upload-cloud-2-line',

package/src/components/file-upload/stories/file-upload-area.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref, watch } from 'vue';
 import Sonner from '@/components/sonner/sonner.vue';
 import { toast } from '@/utils/sonner';
-import { ref, watch } from 'vue';
 import FileUploadArea, { type FileError } from '../file-upload-area.vue';
 import 'vue-sonner/style.css';
 

package/src/components/label/label.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import Tooltip from '@/components/tooltip/tooltip.vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import { Label, type LabelProps } from 'radix-vue';
+import Tooltip from '@/components/tooltip/tooltip.vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<LabelProps & {
   sublabel?: string;

package/src/components/modal/modal-content.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { DialogContentEmits, DialogContentProps } from 'radix-vue';
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import { DialogContent as ModalContent, DialogOverlay as ModalOverlay, DialogPortal as ModalPortal, useForwardPropsEmits } from 'radix-vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<DialogContentProps & {
   class?: HTMLAttributes['class'];

package/src/components/modal/modal-header.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import CompactButton from '@/components/button/compact-button.vue';
 import clsx from 'clsx';
 import { DialogClose as ModalClose, DialogDescription as ModalDescription, DialogTitle as ModalTitle } from 'radix-vue';
+import CompactButton from '@/components/button/compact-button.vue';
 
 const props = withDefaults(defineProps<{
   title: string;

package/src/components/pagination/stories/pagination.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components';
 import Button from '@/components/button/button.vue';
-import { ref } from 'vue';
 import {
   Pagination,
   PaginationContent,

package/src/components/popover/popover-content.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import CompactButton from '@/components/button/compact-button.vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import {
   PopoverArrow,
@@ -12,6 +10,8 @@ import {
   type PopoverContentProps as RadixPopoverContentProps,
   useForwardPropsEmits,
 } from 'radix-vue';
+import CompactButton from '@/components/button/compact-button.vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 defineOptions({
   inheritAttrs: false,

package/src/components/popover/stories/popover.stories.ts

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import TextInput from '@/components/text-input/text-input.vue';
 import {
   PopoverClose,
 } from 'radix-vue';
+import TextInput from '@/components/text-input/text-input.vue';
 import Button from '../../button/button.vue';
 import PopoverContent from '../popover-content.vue';
 import PopoverTrigger from '../popover-trigger.vue';

package/src/components/progress/progress-bar.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import {
   ProgressIndicator,
@@ -7,6 +6,7 @@ import {
   type ProgressRootProps,
 } from 'radix-vue';
 import { computed, type HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = withDefaults(
   defineProps<

package/src/components/progress/progress-circle.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import {
   ProgressIndicator,
@@ -8,6 +7,7 @@ import {
   type ProgressRootProps,
 } from 'radix-vue';
 import { computed } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = withDefaults(
   defineProps<

package/src/components/radio-group/radio-group-card.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { LabelProps } from 'radix-vue';
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import { Label, Primitive } from 'radix-vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<LabelProps & {
   required?: boolean;

package/src/components/radio-group/radio-group-item.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import { RadioGroupIndicator, RadioGroupItem, type RadioGroupItemProps, useForwardPropsEmits } from 'radix-vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>();
 const delegatedProps = useDelegatedProps(props, 'class');

package/src/components/radio-group/radio-group-label.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import { Label, type LabelProps, Primitive } from 'radix-vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<LabelProps & {
   required?: boolean;

package/src/components/radio-group/radio-group.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>();
 const emits = defineEmits<RadioGroupRootEmits>();

package/src/components/radio-group/stories/radio-group-card.stories.ts

@@ -1,8 +1,8 @@
 // @unocss-include
 
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import Badge from '@/components/badge/badge.vue';
 import { ref } from 'vue';
+import Badge from '@/components/badge/badge.vue';
 import RadioGroupCard from '../radio-group-card.vue';
 import RadioGroupItem from '../radio-group-item.vue';
 import RadioGroup from '../radio-group.vue';

package/src/components/rich-editor/extra-settings.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Editor } from '@tiptap/vue-3';
+import { ref } from 'vue';
 import CompactButton from '@/components/button/compact-button.vue';
 import SelectContent from '@/components/select/select-content.vue';
 import SelectIcon from '@/components/select/select-icon.vue';
@@ -7,7 +8,6 @@ import SelectItem from '@/components/select/select-item.vue';
 import SelectTrigger from '@/components/select/select-trigger.vue';
 import Select from '@/components/select/select.vue';
 import Tooltip from '@/components/tooltip/tooltip.vue';
-import { ref } from 'vue';
 
 const props = defineProps<{
   editor: Editor;

package/src/components/rich-editor/link-bubble.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Editor } from '@tiptap/vue-3';
+import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref } from 'vue';
 import Button from '@/components/button/button.vue';
 import CompactButton from '@/components/button/compact-button.vue';
 import LinkButton from '@/components/button/link-button.vue';
@@ -7,7 +8,6 @@ import Label from '@/components/label/label.vue';
 import Switch from '@/components/switch/switch.vue';
 import TextInputAffix from '@/components/text-input/text-input-affix.vue';
 import TextInput from '@/components/text-input/text-input.vue';
-import { computed, defineAsyncComponent, onMounted, onUnmounted, ref } from 'vue';
 
 const props = defineProps<{
   editor: Editor;
@@ -37,6 +37,11 @@ function startEdit() {
   const attrs = props.editor.getAttributes('link');
   href.value = attrs.href || '';
   openInNewTab.value = attrs.target === '_blank';
+
+  nextTick(() => {
+    const transaction = props.editor.state.tr.setMeta('bubbleMenu', 'updatePosition');
+    props.editor.view.dispatch(transaction);
+  });
 }
 
 function removeLink() {
@@ -158,10 +163,18 @@ onUnmounted(() => {
     :should-show="() => true"
     :editor="editor"
     :options="{
+      strategy: 'fixed',
       placement: 'bottom',
-      offset: {
-        mainAxis: 0,
-        crossAxis: 12,
+      offset: 12,
+      flip: {
+        padding: 20,
+        mainAxis: true,
+        crossAxis: true,
+      },
+      shift: {
+        padding: 20,
+        mainAxis: true,
+        crossAxis: true,
       },
     }"
   >
@@ -177,7 +190,7 @@ onUnmounted(() => {
               v-model="href"
               type="url"
               size="xs"
-              placeholder="Paste or type a link"
+              placeholder="https://example.com"
               class="link-input"
               @keydown.enter="applyLink"
               @keydown.esc="reset"
@@ -236,8 +249,7 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .link-bubble {
-  position: fixed;
-  z-index: 1000;
+  max-width: calc(100vw - 40px);
   padding: var(--spacing-12);
   border: 1px solid var(--color-stroke-soft-200);
   border-radius: var(--radius-12);
@@ -252,10 +264,24 @@ onUnmounted(() => {
     .set-link {
       display: flex;
       gap: var(--spacing-8);
+
+      .link-input {
+        flex: 1;
+        min-width: 140px;
+      }
+
+      button {
+        flex-shrink: 0;
+        white-space: nowrap;
+      }
     }
 
     :deep(.celeste-switch[aria-checked='true']) {
       background-color: var(--color-neutral-700);
+
+      .celeste-switch-thumb::before {
+        background-color: currentcolor;
+      }
     }
 
     .switch-button-box {

package/src/components/rich-editor/rich-editor.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
 import type { ToolbarItem } from './types';
+import Link from '@tiptap/extension-link';
+import TextAlign from '@tiptap/extension-text-align';
+import { TextStyleKit } from '@tiptap/extension-text-style';
+import { CharacterCount, Placeholder } from '@tiptap/extensions';
+import StarterKit from '@tiptap/starter-kit';
+import { Editor, EditorContent } from '@tiptap/vue-3';
+import { computed, onBeforeUnmount, onMounted, type PropType, ref, watch } from 'vue';
 import CompactButton from '@/components/button/compact-button.vue';
 import SelectContent from '@/components/select/select-content.vue';
 import SelectIcon from '@/components/select/select-icon.vue';
@@ -8,13 +15,6 @@ import SelectTrigger from '@/components/select/select-trigger.vue';
 import SelectValue from '@/components/select/select-value.vue';
 import Select from '@/components/select/select.vue';
 import Tooltip from '@/components/tooltip/tooltip.vue';
-import Link from '@tiptap/extension-link';
-import TextAlign from '@tiptap/extension-text-align';
-import { TextStyleKit } from '@tiptap/extension-text-style';
-import { CharacterCount, Placeholder } from '@tiptap/extensions';
-import StarterKit from '@tiptap/starter-kit';
-import { Editor, EditorContent } from '@tiptap/vue-3';
-import { computed, onBeforeUnmount, onMounted, type PropType, ref, watch } from 'vue';
 import { fullToolbar, onActionClick, selectedOption } from './config';
 import ExtraSettings from './extra-settings.vue';
 import LinkBubble from './link-bubble.vue';

package/src/components/rich-editor/stories/rich-editor.stories.ts

@@ -52,7 +52,7 @@ export const Default: Story = {
       return { args };
     },
     template: `
-      <RichEditor v-bind="args" />
+        <RichEditor v-bind="args" />
     `,
   }),
 };
@@ -85,3 +85,25 @@ export const CustomToolbar: Story = {
     `,
   }),
 };
+
+export const SmallEditor: Story = {
+  args: {
+    modelValue: '',
+    customToolbar: [],
+  },
+
+  render: args => ({
+    components: { RichEditor },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex;">
+        <div style="flex-basis: 80%"></div>
+        <div style="flex-basis: 20%">
+          <RichEditor v-bind="args" />
+        </div>
+      </div>
+    `,
+  }),
+};

package/src/components/scroll-area/scroll-area.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables';
 import clsx from 'clsx';
 import {
   ScrollAreaCorner,
@@ -8,6 +7,7 @@ import {
   type ScrollAreaRootProps,
   ScrollAreaViewport,
 } from 'radix-vue';
+import { useDelegatedProps } from '@/composables';
 import ScrollBar from './scroll-bar.vue';
 
 const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>();

package/src/components/scroll-area/scroll-bar.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables';
 import clsx from 'clsx';
 import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue';
+import { useDelegatedProps } from '@/composables';
 
 const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
   orientation: 'vertical',

package/src/components/segmented-control/segmented-control-item.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import { ToggleGroupItem as SegmentedControlItem, type ToggleGroupItemProps } from 'radix-vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<ToggleGroupItemProps & { class?: HTMLAttributes['class'] }>();
 const delegatedProps = useDelegatedProps(props, 'class');

package/src/components/segmented-control/segmented-control.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import { ToggleGroupRoot as SegmentedControlRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<Omit<ToggleGroupRootProps, 'type'> & { class?: HTMLAttributes['class'] }>();
 const emits = defineEmits<ToggleGroupRootEmits>();

package/src/components/select/select-content.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import { SelectContent, type SelectContentEmits, type SelectContentProps, SelectPortal, SelectViewport, useForwardPropsEmits } from 'radix-vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = withDefaults(defineProps<SelectContentProps & {
   class?: HTMLAttributes['class'];

package/src/components/select/select-icon.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<{ class?: HTMLAttributes['class'] }>();
 const delegatedProps = useDelegatedProps(props, 'class');

package/src/components/select/select-item.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import { SelectItem, SelectItemIndicator, type SelectItemProps, SelectItemText } from 'radix-vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>();
 const delegatedProps = useDelegatedProps(props, 'class');

package/src/components/select/select-label.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import { SelectLabel, type SelectLabelProps } from 'radix-vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>();
 const delegatedProps = useDelegatedProps(props, 'class');

package/src/components/select/select-separator.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>();
 const delegatedProps = useDelegatedProps(props, 'class');

package/src/components/select/select-trigger.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = withDefaults(defineProps<SelectTriggerProps & {
   class?: HTMLAttributes['class'];

package/src/components/select/select-value.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import { SelectValue, type SelectValueProps } from 'radix-vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<SelectValueProps & { class?: HTMLAttributes['class'] }>();
 const delegatedProps = useDelegatedProps(props, 'class');

package/src/components/select/select.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import { SelectRoot, type SelectRootEmits, type SelectRootProps, useForwardPropsEmits } from 'radix-vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<SelectRootProps & { class?: HTMLAttributes['class'] }>();
 const emits = defineEmits<SelectRootEmits>();

package/src/components/sheet/sheet-content.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { DialogContentEmits, DialogContentProps } from 'radix-vue';
 import type { HTMLAttributes } from 'vue';
-import CompactButton from '@/components/button/compact-button.vue';
 import { reactiveOmit } from '@vueuse/core';
 import clsx from 'clsx';
 import {
@@ -11,6 +10,7 @@ import {
   DialogPortal,
   useForwardPropsEmits,
 } from 'radix-vue';
+import CompactButton from '@/components/button/compact-button.vue';
 
 defineOptions({
   inheritAttrs: false,

package/src/components/sidebar/sidebar-menu-badge.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import Badge from '@/components/badge/badge.vue';
 import clsx from 'clsx';
+import Badge from '@/components/badge/badge.vue';
 
 const props = withDefaults(defineProps<SidebarMenuBadgeProps>(), {
   variant: 'lighter',

package/src/components/sidebar/sidebar-provider.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { HTMLAttributes, Ref } from 'vue';
-import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from '@/composables/use-sidebar';
 import { defaultDocument, useEventListener, useMediaQuery, useVModel } from '@vueuse/core';
 import clsx from 'clsx';
 import { computed, ref } from 'vue';
+import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from '@/composables/use-sidebar';
 
 const props = withDefaults(defineProps<{
   defaultOpen?: boolean;

package/src/components/sidebar/sidebar-separator.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { ContentDivider } from '@/components';
 import clsx from 'clsx';
+import { ContentDivider } from '@/components';
 
 const props = defineProps<SidebarSeparatorProps>();
 </script>

package/src/components/sidebar/sidebar-trigger.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
 import CompactButton from '@/components/button/compact-button.vue';
 import { useSidebar } from '@/composables/use-sidebar';
-import clsx from 'clsx';
 
 const props = defineProps<{
   class?: HTMLAttributes['class'];

package/src/components/sidebar/sidebar.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
 import { Sheet, SheetContent } from '@/components/sheet';
 import { SIDEBAR_WIDTH_MOBILE, useSidebar } from '@/composables/use-sidebar';
-import clsx from 'clsx';
 
 defineOptions({
   inheritAttrs: false,

package/src/components/sidebar/stories/sidebar.stories.ts

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
 import CompactButton from '@/components/button/compact-button.vue';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/collapsible';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/dropdown-menu';
 import SidebarMenuBadge from '@/components/sidebar/sidebar-menu-badge.vue';
-import { ref } from 'vue';
 import { Sidebar, SidebarContent, SidebarElement, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarSeparator, SidebarTrigger } from '..';
 
 const meta: Meta<typeof Sidebar> = {

package/src/components/slider/slider.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import { SliderRange, SliderRoot, type SliderRootEmits, type SliderRootProps, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<Omit<SliderRootProps, 'orientation'> & { class?: HTMLAttributes['class'] }>();
 const emits = defineEmits<SliderRootEmits>();

package/src/components/switch/switch.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import { SwitchRoot, type SwitchRootEmits, type SwitchRootProps, SwitchThumb, useForwardPropsEmits } from 'radix-vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>();
 const emits = defineEmits<SwitchRootEmits>();

package/src/components/tab-menu/tab-menu-content.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { useDelegatedProps } from '@/composables/use-delegated-props';
 import clsx from 'clsx';
 import { TabsContent, type TabsContentProps } from 'radix-vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
 
 const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>();