refactor!: 重构多个子包

- 移除 unbuild --stub 模式
- faToast -> useFaToast

packages/components/auto-imports.d.ts

@@ -1,36 +0,0 @@
-export {}
-
-declare global {
-  const computed: typeof import('vue').computed
-  const createVNode: typeof import('vue').createVNode
-  const getCurrentInstance: typeof import('vue').getCurrentInstance
-  const h: typeof import('vue').h
-  const isVNode: typeof import('vue').isVNode
-  const nextTick: typeof import('vue').nextTick
-  const onActivated: typeof import('vue').onActivated
-  const onDeactivated: typeof import('vue').onDeactivated
-  const onBeforeUnmount: typeof import('vue').onBeforeUnmount
-  const onMounted: typeof import('vue').onMounted
-  const onUnmounted: typeof import('vue').onUnmounted
-  const reactive: typeof import('vue').reactive
-  const ref: typeof import('vue').ref
-  const shallowRef: typeof import('vue').shallowRef
-  const toRef: typeof import('vue').toRef
-  const unref: typeof import('vue').unref
-  const useId: typeof import('vue').useId
-  const useSlots: typeof import('vue').useSlots
-  const useTemplateRef: typeof import('vue').useTemplateRef
-  const watch: typeof import('vue').watch
-  const watchEffect: typeof import('vue').watchEffect
-
-  const faToast: typeof import('./index').faToast
-  const useFaDrawer: typeof import('./index').useFaDrawer
-  const useFaImagePreview: typeof import('./index').useFaImagePreview
-  const useFaModal: typeof import('./index').useFaModal
-}
-
-declare global {
-  // @ts-ignore
-  export type { ComponentPublicInstance, VNode } from 'vue'
-  import('vue')
-}

packages/components/build.config.ts

@@ -1,7 +0,0 @@
-import { defineBuildConfig } from 'unbuild'
-
-export default defineBuildConfig({
-  entries: ['./resolver'],
-  declaration: false,
-  clean: true,
-})

packages/components/global.d.ts

@@ -1,47 +0,0 @@
-declare module 'vue' {
-  export interface GlobalComponents {
-    FaAlert: typeof import('./index')['FaAlert']
-    FaAvatar: typeof import('./index')['FaAvatar']
-    FaButton: typeof import('./index')['FaButton']
-    FaButtonGroup: typeof import('./index')['FaButtonGroup']
-    FaCard: typeof import('./index')['FaCard']
-    FaCheckbox: typeof import('./index')['FaCheckbox']
-    FaCheckboxGroup: typeof import('./index')['FaCheckboxGroup']
-    FaCollapsible: typeof import('./index')['FaCollapsible']
-    FaContextMenu: typeof import('./index')['FaContextMenu']
-    FaDivider: typeof import('./index')['FaDivider']
-    FaDrawer: typeof import('./index')['FaDrawer']
-    FaDropdown: typeof import('./index')['FaDropdown']
-    FaFileUpload: typeof import('./index')['FaFileUpload']
-    FaFixedBar: typeof import('./index')['FaFixedBar']
-    FaHoverCard: typeof import('./index')['FaHoverCard']
-    FaIcon: typeof import('./index')['FaIcon']
-    FaImagePreview: typeof import('./index')['FaImagePreview']
-    FaImageUpload: typeof import('./index')['FaImageUpload']
-    FaInput: typeof import('./index')['FaInput']
-    FaInputOTP: typeof import('./index')['FaInputOTP']
-    FaKbd: typeof import('./index')['FaKbd']
-    FaKbdGroup: typeof import('./index')['FaKbdGroup']
-    FaLabel: typeof import('./index')['FaLabel']
-    FaModal: typeof import('./index')['FaModal']
-    FaNumberField: typeof import('./index')['FaNumberField']
-    FaPageHeader: typeof import('./index')['FaPageHeader']
-    FaPageMain: typeof import('./index')['FaPageMain']
-    FaPasswordStrength: typeof import('./index')['FaPasswordStrength']
-    FaPopover: typeof import('./index')['FaPopover']
-    FaProgress: typeof import('./index')['FaProgress']
-    FaRadioGroup: typeof import('./index')['FaRadioGroup']
-    FaScrollArea: typeof import('./index')['FaScrollArea']
-    FaSearchBar: typeof import('./index')['FaSearchBar']
-    FaSelect: typeof import('./index')['FaSelect']
-    FaSlider: typeof import('./index')['FaSlider']
-    FaSwitch: typeof import('./index')['FaSwitch']
-    FaTabs: typeof import('./index')['FaTabs']
-    FaTextarea: typeof import('./index')['FaTextarea']
-    FaToast: typeof import('./index')['FaToast']
-    FaTooltip: typeof import('./index')['FaTooltip']
-    FaTrend: typeof import('./index')['FaTrend']
-  }
-}
-
-export {}

packages/components/index.ts

@@ -1,48 +0,0 @@
-export { default as FaAlert } from './src/alert/index.vue'
-export { default as FaAvatar } from './src/avatar/index.vue'
-export { default as FaButtonGroup } from './src/button-group/index.vue'
-export { default as FaButton } from './src/button/index.vue'
-export { default as FaCard } from './src/card/index.vue'
-export { default as FaCheckboxGroup } from './src/checkbox-group/index.vue'
-export { default as FaCheckbox } from './src/checkbox/index.vue'
-export { default as FaCollapsible } from './src/collapsible/index.vue'
-export { default as FaContextMenu } from './src/context-menu/index.vue'
-export { default as FaDivider } from './src/divider/index.vue'
-export * from './src/drawer/index'
-export { default as FaDrawer } from './src/drawer/index.vue'
-export { default as FaDropdown } from './src/dropdown/index.vue'
-export { default as FaFileUpload } from './src/file-upload/index.vue'
-export type { FileItem, FileUploadRequestOptions } from './src/file-upload/index.vue'
-export { default as FaFixedBar } from './src/fixed-bar/index.vue'
-export { default as FaHoverCard } from './src/hover-card/index.vue'
-export { default as FaIcon } from './src/icon/index.vue'
-export * from './src/image-preview/index'
-export { default as FaImagePreview } from './src/image-preview/index.vue'
-export type { UploadRequestOptions } from './src/image-upload/index.vue'
-export { default as FaImageUpload } from './src/image-upload/index.vue'
-export { default as FaInputOTP } from './src/input-otp/index.vue'
-export { default as FaInput } from './src/input/index.vue'
-export { default as FaKbdGroup } from './src/kbd-group/index.vue'
-export { default as FaKbd } from './src/kbd/index.vue'
-export { default as FaLabel } from './src/label/index.vue'
-export * from './src/modal/index'
-export { default as FaModal } from './src/modal/index.vue'
-export { default as FaNumberField } from './src/number-field/index.vue'
-export { default as FaPageHeader } from './src/page-header/index.vue'
-export { default as FaPageMain } from './src/page-main/index.vue'
-export { default as FaPagination } from './src/pagination/index.vue'
-export { default as FaPasswordStrength } from './src/password-strength/index.vue'
-export { default as FaPopover } from './src/popover/index.vue'
-export { default as FaProgress } from './src/progress/index.vue'
-export { default as FaRadioGroup } from './src/radio-group/index.vue'
-export { default as FaScrollArea } from './src/scroll-area/index.vue'
-export { default as FaSearchBar } from './src/search-bar/index.vue'
-export { default as FaSelect } from './src/select/index.vue'
-export { default as FaSlider } from './src/slider/index.vue'
-export { default as FaSwitch } from './src/switch/index.vue'
-export { default as FaTabs } from './src/tabs/index.vue'
-export { default as FaTextarea } from './src/textarea/index.vue'
-export * from './src/toast/index'
-export { default as FaToast } from './src/toast/index.vue'
-export { default as FaTooltip } from './src/tooltip/index.vue'
-export { default as FaTrend } from './src/trend/index.vue'

packages/components/package.json

@@ -2,15 +2,12 @@
   "name": "@fantastic-admin/components",
   "type": "module",
   "version": "0.0.0",
-  "exports": {
-    ".": "./index.ts",
-    "./resolver": {
-      "types": "./resolver.ts",
-      "import": "./dist/resolver.mjs"
-    }
+  "imports": {
+    "#utils": "./src/utils.ts"
   },
-  "scripts": {
-    "stub": "pnpm unbuild --stub"
+  "exports": {
+    ".": "./src/index.ts",
+    "./resolver": "./resolver.ts"
   },
   "peerDependencies": {
     "@vueuse/components": "catalog:",
@@ -18,8 +15,7 @@
     "unplugin-auto-import": "catalog:",
     "unplugin-vue-components": "catalog:",
     "vite": "catalog:",
-    "vue": "catalog:",
-    "vue-router": "catalog:"
+    "vue": "catalog:"
   },
   "peerDependenciesMeta": {
     "unplugin-auto-import": {
@@ -41,6 +37,5 @@
     "tailwind-merge": "catalog:",
     "vue-input-otp": "catalog:",
     "vue-sonner": "catalog:"
-  },
-  "devDependencies": {}
+  }
 }

packages/components/resolver.ts

@@ -4,7 +4,7 @@ import type { ComponentResolver, TypeImport } from 'unplugin-vue-components'
 const COMPONENT_PREFIX = 'Fa'
 const PACKAGE_NAME = '@fantastic-admin/components'
 
-const COMPONENT_NAMES = [
+const BASIC_COMPONENT_NAMES = [
   'FaAlert',
   'FaAvatar',
   'FaButton',
@@ -49,11 +49,15 @@ const COMPONENT_NAMES = [
   'FaTrend',
 ] as const
 
+const COMPONENT_NAMES = [
+  ...BASIC_COMPONENT_NAMES,
+] as const
+
 const AUTO_IMPORT_NAMES = [
   'useFaDrawer',
   'useFaImagePreview',
   'useFaModal',
-  'faToast',
+  'useFaToast',
 ] as const
 
 export const ComponentsAutoImports: ImportsMap = {

packages/components/src/basic/alert/alert/Alert.vue

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

packages/components/src/basic/alert/alert/AlertDescription.vue

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

packages/components/src/basic/alert/alert/AlertTitle.vue

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

packages/components/src/basic/alert/index.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import type { AlertVariants } from './alert'
+import Icon from '../icon/index.vue'
 import { Alert, AlertDescription, AlertTitle } from './alert'
 
 defineOptions({
-  name: 'FaAlert',
+  name: 'BuiltInAlert',
 })
 
 const props = defineProps<{
@@ -28,7 +29,7 @@ defineSlots<{
       props.class,
     ]"
   >
-    <FaIcon v-if="icon" data-slot="alert-icon" :name="icon" />
+    <Icon v-if="icon" data-slot="alert-icon" :name="icon" />
     <AlertTitle v-if="title">
       {{ title }}
     </AlertTitle>

packages/components/src/basic/avatar/avatar/Avatar.vue

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

packages/components/src/basic/avatar/avatar/AvatarFallback.vue

@@ -3,7 +3,7 @@ import type { AvatarFallbackProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { AvatarFallback } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes['class'] }>()
 

packages/components/src/basic/avatar/index.vue

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
 import { Avatar, AvatarFallback, AvatarImage } from './avatar'
 
 defineOptions({
-  name: 'FaAvatar',
+  name: 'BuiltInAvatar',
 })
 
 const props = defineProps<{

packages/components/src/basic/button-group/button-group/ButtonGroup.vue

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

packages/components/src/basic/button-group/button-group/ButtonGroupSeparator.vue

@@ -2,7 +2,7 @@
 import type { SeparatorProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 import { Separator } from '../separator'
 
 const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>(), {

packages/components/src/basic/button-group/button-group/ButtonGroupText.vue

@@ -3,7 +3,7 @@ import type { PrimitiveProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import type { ButtonGroupVariants } from '.'
 import { Primitive } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 interface Props extends PrimitiveProps {
   class?: HTMLAttributes['class']

packages/components/src/basic/button-group/index.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import type { ButtonGroupVariants } from './button-group'
+import { onMounted, ref, useSlots, watchEffect } from 'vue'
 import { ButtonGroup, ButtonGroupSeparator } from './button-group'
 
 defineOptions({
-  name: 'FaButtonGroup',
+  name: 'BuiltInButtonGroup',
 })
 
 const props = defineProps<{

packages/components/src/basic/button-group/separator/Separator.vue

@@ -3,7 +3,7 @@ import type { SeparatorProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { Separator } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 const props = withDefaults(defineProps<
   SeparatorProps & { class?: HTMLAttributes['class'] }

packages/components/src/basic/button/button/Button.vue

@@ -3,8 +3,8 @@ import type { PrimitiveProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import type { ButtonVariants } from '.'
 import { Primitive } from 'reka-ui'
+import { cn } from '#utils'
 import { buttonVariants } from '.'
-import { cn } from '../../../utils'
 
 interface Props extends PrimitiveProps {
   variant?: ButtonVariants['variant']

packages/components/src/basic/button/index.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import type { ButtonVariants } from './button'
+import Icon from '../icon/index.vue'
 import { Button } from './button'
 
 defineOptions({
-  name: 'FaButton',
+  name: 'BuiltInButton',
 })
 
 const props = defineProps<{
@@ -18,7 +19,7 @@ const props = defineProps<{
 
 <template>
   <Button :variant :size :disabled="props.disabled || props.loading" :class="props.class">
-    <FaIcon v-if="loading" name="i-line-md:loading-twotone-loop" />
+    <Icon v-if="loading" name="i-line-md:loading-twotone-loop" />
     <slot />
   </Button>
 </template>

packages/components/src/basic/card/card/Card.vue

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

packages/components/src/basic/card/card/CardAction.vue

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

packages/components/src/basic/card/card/CardContent.vue

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

packages/components/src/basic/card/card/CardDescription.vue

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

packages/components/src/basic/card/card/CardFooter.vue

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

packages/components/src/basic/card/card/CardHeader.vue

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

packages/components/src/basic/card/card/CardTitle.vue

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

packages/components/src/basic/card/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
+import type { HTMLAttributes, VNode } from 'vue'
 import {
   Card,
   CardContent,
@@ -10,7 +10,7 @@ import {
 } from './card'
 
 defineOptions({
-  name: 'FaCard',
+  name: 'BuiltInCard',
 })
 
 const props = defineProps<{

packages/components/src/basic/checkbox-group/index.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts" generic="TOption extends CheckboxGroupOption">
 import type { AcceptableValue } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '../../utils'
+import { computed, useId, watch } from 'vue'
+import { cn } from '#utils'
 import { Checkbox } from '../checkbox/checkbox'
 import { Label } from '../label/label'
 
@@ -14,7 +15,7 @@ export interface CheckboxGroupOption {
 }
 
 defineOptions({
-  name: 'FaCheckboxGroup',
+  name: 'BuiltInCheckboxGroup',
 })
 
 const props = defineProps<{

packages/components/src/basic/checkbox/checkbox/Checkbox.vue

@@ -4,7 +4,7 @@ import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { Check } from 'lucide-vue-next'
 import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<CheckboxRootEmits>()

packages/components/src/basic/checkbox/index.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import type { CheckboxRootProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '../../utils'
+import { computed, useId, watch } from 'vue'
+import { cn } from '#utils'
 import { Label } from '../label/label'
 import { Checkbox } from './checkbox'
 
 defineOptions({
-  name: 'FaCheckbox',
+  name: 'BuiltInCheckbox',
 })
 
 const props = defineProps<{

packages/components/src/basic/collapsible/index.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { useSlots } from 'vue'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible'
 
 defineOptions({
-  name: 'FaCollapsible',
+  name: 'BuiltInCollapsible',
 })
 
 const open = defineModel<boolean>('modelValue', {

packages/components/src/basic/context-menu/context-menu/ContextMenuCheckboxItem.vue

@@ -8,7 +8,7 @@ import {
   ContextMenuItemIndicator,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuCheckboxItemEmits>()

packages/components/src/basic/context-menu/context-menu/ContextMenuContent.vue

@@ -7,7 +7,7 @@ import {
   ContextMenuPortal,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 defineOptions({
   inheritAttrs: false,

packages/components/src/basic/context-menu/context-menu/ContextMenuItem.vue

@@ -6,7 +6,7 @@ import {
   ContextMenuItem,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 const props = withDefaults(defineProps<ContextMenuItemProps & {
   class?: HTMLAttributes['class']

packages/components/src/basic/context-menu/context-menu/ContextMenuLabel.vue

@@ -3,7 +3,7 @@ import type { ContextMenuLabelProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { ContextMenuLabel } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 

packages/components/src/basic/context-menu/context-menu/ContextMenuRadioItem.vue

@@ -8,7 +8,7 @@ import {
   ContextMenuRadioItem,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuRadioItemEmits>()

packages/components/src/basic/context-menu/context-menu/ContextMenuSeparator.vue

@@ -5,7 +5,7 @@ import { reactiveOmit } from '@vueuse/core'
 import {
   ContextMenuSeparator,
 } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()
 

packages/components/src/basic/context-menu/context-menu/ContextMenuShortcut.vue

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

packages/components/src/basic/context-menu/context-menu/ContextMenuSubContent.vue

@@ -6,7 +6,7 @@ import {
   ContextMenuSubContent,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()

packages/components/src/basic/context-menu/context-menu/ContextMenuSubTrigger.vue

@@ -7,7 +7,7 @@ import {
   ContextMenuSubTrigger,
   useForwardProps,
 } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
@@ -27,6 +27,6 @@ const forwardedProps = useForwardProps(delegatedProps)
     )"
   >
     <slot />
-    <ChevronRight class="ms-auto" />
+    <ChevronRight class="ms-auto rtl:rotate-180" />
   </ContextMenuSubTrigger>
 </template>

packages/components/src/basic/context-menu/index.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import type { VNode } from 'vue'
 import { createReusableTemplate, useTextDirection } from '@vueuse/core'
+import Icon from '../icon/index.vue'
 import {
   ContextMenu,
   ContextMenuContent,
@@ -14,7 +16,7 @@ import {
 } from './context-menu'
 
 defineOptions({
-  name: 'FaContextMenu',
+  name: 'BuiltInContextMenu',
 })
 
 defineProps<{
@@ -76,7 +78,7 @@ function handleItemClick(item: MenuItem) {
             <template v-for="(v, i) in item" :key="i">
               <ContextMenuItem v-if="!('items' in v)" :variant="v.variant" :disabled="v.disabled" class="cursor-pointer" @click="handleItemClick(v)">
                 <div v-if="hasIcon(its)" class="flex-center size-4">
-                  <FaIcon v-if="v.icon" :name="v.icon" class="size-4" />
+                  <Icon v-if="v.icon" :name="v.icon" class="size-4" />
                 </div>
                 {{ v.label }}
               </ContextMenuItem>

packages/components/src/basic/divider/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../utils'
+import type { HTMLAttributes, VNode } from 'vue'
+import { cn } from '#utils'
 
 defineOptions({
-  name: 'FaDivider',
+  name: 'BuiltInDivider',
 })
 
 const props = defineProps<{

packages/components/src/basic/drawer/index.ts

@@ -1,5 +1,5 @@
-import type { Component, HTMLAttributes } from 'vue'
-import { createVNode, isVNode, render } from 'vue'
+import type { Component, HTMLAttributes, VNode } from 'vue'
+import { createVNode, getCurrentInstance, h, isVNode, onUnmounted, ref, render, shallowRef, watchEffect } from 'vue'
 import Drawer from './index.vue'
 
 export interface DrawerProps {
@@ -56,7 +56,7 @@ type BaseOptions = Omit<DrawerProps, 'modelValue'> & {
   onCancel?: () => void
 }
 
-export function useFaDrawer() {
+export function useDrawer() {
   function create(initialOptions: BaseOptions) {
     const container = document.createElement('div')
     const visible = ref(false)

packages/components/src/basic/drawer/index.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
+import type { VNode } from 'vue'
 import type { DrawerEmits, DrawerProps } from '.'
 import { VisuallyHidden } from 'reka-ui'
-import { cn } from '../../utils'
+import { computed, nextTick, ref, shallowRef, useId, useTemplateRef, watch } from 'vue'
+import { cn } from '#utils'
+import Button from '../button/index.vue'
+import Icon from '../icon/index.vue'
 import {
   Sheet,
   SheetContent,
@@ -12,7 +16,7 @@ import {
 } from './sheet'
 
 defineOptions({
-  name: 'FaDrawer',
+  name: 'BuiltInDrawer',
 })
 
 const props = withDefaults(
@@ -226,7 +230,7 @@ function handleAnimationEnd() {
         <slot />
       </div>
       <div v-show="props.loading" class="bg-popover/75 flex-center size-full inset-0 absolute z-1000">
-        <FaIcon name="i-line-md:loading-twotone-loop" class="size-10" />
+        <Icon name="i-line-md:loading-twotone-loop" class="size-10" />
       </div>
       <SheetFooter
         v-if="footer" :class="cn('p-3 gap-y-2', props.footerClass, {
@@ -235,12 +239,12 @@ function handleAnimationEnd() {
         })"
       >
         <slot name="footer">
-          <FaButton v-if="showCancelButton" variant="outline" @click="onCancel">
+          <Button v-if="showCancelButton" variant="outline" @click="onCancel">
             {{ typeof props.cancelButtonText === 'function' ? props.cancelButtonText() : props.cancelButtonText }}
-          </FaButton>
-          <FaButton v-if="showConfirmButton" :disabled="confirmButtonDisabled" :loading="confirmButtonLoading" @click="onConfirm">
+          </Button>
+          <Button v-if="showConfirmButton" :disabled="confirmButtonDisabled" :loading="confirmButtonLoading" @click="onConfirm">
             {{ typeof props.confirmButtonText === 'function' ? props.confirmButtonText() : props.confirmButtonText }}
-          </FaButton>
+          </Button>
         </slot>
       </SheetFooter>
     </SheetContent>

packages/components/src/basic/drawer/sheet/SheetContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
+import type { ComponentPublicInstance, HTMLAttributes } from 'vue'
 import { reactiveOmit, useScrollLock } from '@vueuse/core'
 import { X } from 'lucide-vue-next'
 import {
@@ -9,7 +9,8 @@ import {
   DialogPortal,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { cn } from '../../../utils'
+import { computed, useTemplateRef, watch } from 'vue'
+import { cn } from '#utils'
 import SheetOverlay from './SheetOverlay.vue'
 
 interface SheetContentProps extends DialogContentProps {

packages/components/src/basic/drawer/sheet/SheetDescription.vue

@@ -3,7 +3,7 @@ import type { DialogDescriptionProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { DialogDescription } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
 

packages/components/src/basic/drawer/sheet/SheetFooter.vue

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

packages/components/src/basic/drawer/sheet/SheetHeader.vue

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

packages/components/src/basic/drawer/sheet/SheetOverlay.vue

@@ -3,7 +3,7 @@ import type { DialogOverlayProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { DialogOverlay } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()
 

packages/components/src/basic/drawer/sheet/SheetTitle.vue

@@ -3,7 +3,7 @@ import type { DialogTitleProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { DialogTitle } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
 

packages/components/src/basic/dropdown/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -8,7 +8,7 @@ import {
   DropdownMenuItemIndicator,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>()

packages/components/src/basic/dropdown/dropdown-menu/DropdownMenuContent.vue

@@ -7,7 +7,7 @@ import {
   DropdownMenuPortal,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 defineOptions({
   inheritAttrs: false,

packages/components/src/basic/dropdown/dropdown-menu/DropdownMenuItem.vue

@@ -3,7 +3,7 @@ import type { DropdownMenuItemProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { DropdownMenuItem, useForwardProps } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 const props = withDefaults(defineProps<DropdownMenuItemProps & {
   class?: HTMLAttributes['class']

packages/components/src/basic/dropdown/dropdown-menu/DropdownMenuLabel.vue

@@ -3,7 +3,7 @@ import type { DropdownMenuLabelProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { DropdownMenuLabel, useForwardProps } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 

packages/components/src/basic/dropdown/dropdown-menu/DropdownMenuRadioItem.vue

@@ -8,7 +8,7 @@ import {
   DropdownMenuRadioItem,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
 

packages/components/src/basic/dropdown/dropdown-menu/DropdownMenuSeparator.vue

@@ -5,7 +5,7 @@ import { reactiveOmit } from '@vueuse/core'
 import {
   DropdownMenuSeparator,
 } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 const props = defineProps<DropdownMenuSeparatorProps & {
   class?: HTMLAttributes['class']

packages/components/src/basic/dropdown/dropdown-menu/DropdownMenuShortcut.vue

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

packages/components/src/basic/dropdown/dropdown-menu/DropdownMenuSubContent.vue

@@ -6,7 +6,7 @@ import {
   DropdownMenuSubContent,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()

packages/components/src/basic/dropdown/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -7,7 +7,7 @@ import {
   DropdownMenuSubTrigger,
   useForwardProps,
 } from 'reka-ui'
-import { cn } from '../../../utils'
+import { cn } from '#utils'
 
 const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 
@@ -27,6 +27,6 @@ const forwardedProps = useForwardProps(delegatedProps)
     )"
   >
     <slot />
-    <ChevronRight class="ms-auto" />
+    <ChevronRight class="ms-auto rtl:rotate-180" />
   </DropdownMenuSubTrigger>
 </template>