@indielayer/ui 1.2.0 → 1.3.0

package/src/components/skeleton/Skeleton.vue

@@ -8,18 +8,19 @@ const skeletonProps = {
 
 export type SkeletonProps = ExtractPublicPropTypes<typeof skeletonProps>
 
+type InternalClasses = 'wrapper'
+export interface SkeletonTheme extends ThemeComponent<SkeletonProps, InternalClasses> {}
+
 export default { name: 'XSkeleton' }
 </script>
 
 <script setup lang="ts">
 import type { ExtractPublicPropTypes } from 'vue'
-import { useTheme } from '../../composables/theme'
-
-import theme from './Skeleton.theme'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(skeletonProps)
 
-const { styles, classes, className } = useTheme('skeleton', theme, props)
+const { styles, classes, className } = useTheme('Skeleton', {}, props)
 </script>
 
 <template>

package/src/components/skeleton/index.ts

@@ -1,3 +1,2 @@
 export { default as XSkeleton } from './Skeleton.vue'
-export type { SkeletonProps } from './Skeleton.vue'
-export type { SkeletonTheme } from './Skeleton.theme'
+export type { SkeletonProps, SkeletonTheme } from './Skeleton.vue'

package/src/components/skeleton/theme/Skeleton.base.theme.ts

@@ -0,0 +1,9 @@
+import type { SkeletonTheme } from '../Skeleton.vue'
+
+const theme: SkeletonTheme = {
+  classes: {
+    wrapper: 'animate-pulse bg-gray-300 dark:bg-gray-600 rounded-md',
+  },
+}
+
+export default theme

package/src/components/skeleton/theme/Skeleton.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { SkeletonTheme } from '../Skeleton.vue'
+
+import BaseTheme from './Skeleton.base.theme'
+
+const theme: SkeletonTheme = BaseTheme
+
+export default theme

package/src/components/slider/Slider.vue

@@ -15,6 +15,10 @@ const sliderProps = {
 }
 
 export type SliderProps = ExtractPublicPropTypes<typeof sliderProps>
+
+type InternalClasses = 'wrapper' | 'drag'
+export interface SliderTheme extends ThemeComponent<SliderProps, InternalClasses> {}
+
 export default {
   name: 'XSlider',
   validators: {
@@ -26,15 +30,14 @@ export default {
 <script setup lang="ts">
 import { computed, ref, watch, type ExtractPublicPropTypes } from 'vue'
 import { useEventListener } from '@vueuse/core'
-import { useCommon } from '../../composables/common'
-import { useColors } from '../../composables/colors'
-import { useInteractive } from '../../composables/interactive'
-import { useInputtable } from '../../composables/inputtable'
-import { useTheme } from '../../composables/theme'
-
-import XProgress from '../../components/progress/Progress.vue'
+import { useCommon } from '../../composables/useCommon'
+import { useColors } from '../../composables/useColors'
+import { useInteractive } from '../../composables/useInteractive'
+import { useInputtable } from '../../composables/useInputtable'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
-import theme from './Slider.theme'
+import XLabel from '../label/Label.vue'
+import XProgress from '../progress/Progress.vue'
 
 const props = defineProps(sliderProps)
 
@@ -160,29 +163,26 @@ const {
   isInsideForm,
 } = useInputtable(props, { focus, emit, withListeners: false })
 
-const { styles, classes, className } = useTheme('slider', theme, props)
+const { styles, classes, className } = useTheme('Slider', {}, props)
 
 defineExpose({ focus, blur, reset, validate, setError })
 </script>
 
 <template>
-  <label
+  <x-label
     ref="elRef"
     tabindex="0"
-    class="group relative"
+    class="group"
+    :style="styles"
+    :disabled="disabled"
+    :required="required"
+    :is-inside-form="isInsideForm"
+    :label="label"
     :class="[
       className,
       classes.wrapper,
-      { 'mb-3': isInsideForm }
     ]"
-    :style="styles"
   >
-    <p
-      v-if="label"
-      :class="classes.label"
-      v-text="label"
-    ></p>
-
     <div class="flex items-center relative w-full" >
       <slot name="prefix" :value="value"></slot>
       <div
@@ -213,5 +213,5 @@ defineExpose({ focus, blur, reset, validate, setError })
     </div>
 
     <p v-if="errorInternal" class="text-sm text-red-500 mt-1" v-text="errorInternal"></p>
-  </label>
+  </x-label>
 </template>

package/src/components/slider/index.ts

@@ -1,2 +1,2 @@
 export { default as XSlider } from './Slider.vue'
-export type { SliderProps } from './Slider.vue'
+export type { SliderProps, SliderTheme } from './Slider.vue'

package/src/components/slider/theme/Slider.base.theme.ts

@@ -0,0 +1,21 @@
+import type { SliderTheme } from '../Slider.vue'
+
+const theme: SliderTheme = {
+  classes: {
+    wrapper: '',
+
+    drag: 'w-[20px] h-[20px] -mt-[13px] -ml-[10px] rounded-full bg-white border shadow-sm',
+  },
+
+  styles: ({ props, colors, css }) => {
+    const primary = colors.getPalette('primary')
+    const color = colors.getPalette(props.color)
+
+    return css.variables({
+      bg: color[500],
+      border: primary[500],
+    })
+  },
+}
+
+export default theme

package/src/components/slider/theme/Slider.carbon.theme.ts

@@ -0,0 +1,21 @@
+import type { SliderTheme } from '../Slider.vue'
+
+const theme: SliderTheme = {
+  classes: {
+    wrapper: '',
+
+    drag: 'w-[16px] h-[16px] -mt-[11px] -ml-[8px] rounded-full bg-gray-900',
+  },
+
+  styles: ({ props, colors, css }) => {
+    const primary = colors.getPalette('primary')
+    const color = colors.getPalette(props.color)
+
+    return css.variables({
+      bg: color[500],
+      border: primary[500],
+    })
+  },
+}
+
+export default theme

package/src/components/spinner/Spinner.vue

@@ -3,7 +3,7 @@ const spinnerProps = {
   ...useCommon.props(),
   icon: {
     type: String,
-    default: '<g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".5" cx="18" cy="18" r="18"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.5s" repeatCount="indefinite"/></path></g></g>',
+    default: '<g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".8" cx="18" cy="18" r="18"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.5s" repeatCount="indefinite"/></path></g></g>',
   },
 }
 
@@ -19,7 +19,7 @@ export default {
 
 <script setup lang="ts">
 import type { ExtractPublicPropTypes } from 'vue'
-import { useCommon } from '../../composables/common'
+import { useCommon } from '../../composables/useCommon'
 
 import XIcon from '../../components/icon/Icon.vue'
 

package/src/components/tab/Tab.vue

@@ -17,6 +17,12 @@ const tabProps = {
 
 export type TabProps = ExtractPublicPropTypes<typeof tabProps>
 
+type InternalClasses = 'wrapper' | 'content' | 'label' | 'icon'
+type InternalExtraData = {
+  selected: boolean;
+} & Pick<TabGroupInjection, 'state'>['state']
+export interface TabTheme extends ThemeComponent<TabProps, InternalClasses, InternalExtraData> {}
+
 export default {
   name: 'XTab',
   validators: {
@@ -29,14 +35,13 @@ export default {
 import { inject, reactive, computed, ref, onMounted, type ExtractPublicPropTypes } from 'vue'
 import { useMutationObserver } from '@vueuse/core'
 import { injectTabKey } from '../../composables/keys'
-import { useCommon, type Size } from '../../composables/common'
-import { useTheme } from '../../composables/theme'
+import { useCommon, type Size } from '../../composables/useCommon'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 import XIcon from '../icon/Icon.vue'
 import XLink from '../link/Link.vue'
 
-import theme from './Tab.theme'
-import type { TabGroupVariant } from './TabGroup.vue'
+import type { TabGroupInjection, TabGroupVariant } from './TabGroup.vue'
 
 const props = defineProps(tabProps)
 
@@ -97,11 +102,14 @@ function onClickTab(e: MouseEvent) {
   if (!props.to && computedValue.value) tabs.activateTab(computedValue.value)
 }
 
-const { styles, classes, className } = useTheme('tab', theme, ref({
+const { styles, classes, className } = useTheme('Tab', {}, ref({
   ...props,
   size: computedSize.value,
   exact: computedExact.value,
-}), tabs.state)
+}), {
+  ...tabs.state,
+  selected,
+})
 </script>
 
 <template>
@@ -114,16 +122,16 @@ const { styles, classes, className } = useTheme('tab', theme, ref({
     :style="[
       styles,
       to && selected && tabs.state.variant === 'block'
-        ? '--x-link-text: var(--x-tabs-text); --x-link-text-hover: var(--x-tabs-text);'
+        ? '--x-link-text: var(--x-tab-group-text); --x-link-text-hover: var(--x-tab-group-text);'
         : ''
     ]"
     :class="[
       className,
       classes.wrapper,
-      'shrink-0 font-medium',
+      'shrink-0',
       {
         'flex-1': tabs.state.grow,
-        'text-[color:var(--x-tabs-text)] dark:text-[color:var(--x-tabs-dark-text)]': selected,
+        'text-[color:var(--x-tab-group-text)] dark:text-[color:var(--x-tab-group-dark-text)]': selected,
         'cursor-pointer': !disabled,
         'cursor-not-allowed': disabled,
         'cursor-not-allowed text-gray-500': disabled && !selected,
@@ -140,7 +148,7 @@ const { styles, classes, className } = useTheme('tab', theme, ref({
       :size="computedSize"
       :icon="icon"
     >
-      <div class="flex items-center justify-center">
+      <div :class="classes.content">
         <x-icon
           v-if="icon"
           :icon="icon"

package/src/components/tab/TabGroup.vue

@@ -19,6 +19,10 @@ const tabGroupProps = {
   ghost: Boolean,
   grow: Boolean,
   exact: Boolean,
+  fullWidth: {
+    type: Boolean,
+    default: true,
+  },
 }
 
 export type TabGroupInjection = {
@@ -38,6 +42,9 @@ export type TabGroupVariant = typeof validators.variant[number]
 export type TabGroupAlign = typeof validators.align[number]
 export type TabGroupProps = ExtractPublicPropTypes<typeof tabGroupProps>
 
+type InternalClasses = 'wrapper' | 'list' | 'tracker' | 'scroller'
+export interface TabGroupTheme extends ThemeComponent<TabGroupProps, InternalClasses> {}
+
 export default {
   name: 'XTabGroup',
   validators,
@@ -48,19 +55,17 @@ export default {
 import { reactive, computed, provide, type PropType, ref, watch, onMounted, watchEffect, type ExtractPublicPropTypes, type Ref, nextTick } from 'vue'
 import { useMutationObserver, useResizeObserver, useThrottleFn } from '@vueuse/core'
 import { injectTabKey } from '../../composables/keys'
-import { useCommon, type Size } from '../../composables/common'
-import { useColors } from '../../composables/colors'
-import { useTheme } from '../../composables/theme'
+import { useCommon, type Size } from '../../composables/useCommon'
+import { useColors } from '../../composables/useColors'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 import XScroll from '../../components/scroll/Scroll.vue'
 
-import theme from './TabGroup.theme'
-
 const props = defineProps(tabGroupProps)
 
 const emit = defineEmits(['update:modelValue'])
 
-const scrollRef = ref<typeof XScroll | null>(null)
+const scrollRef = ref<InstanceType<typeof XScroll> | null>(null)
 const wrapperRef = ref<HTMLElement | null>(null)
 const trackerRef = ref<HTMLElement | null>(null)
 const tabsRef = ref<HTMLElement | null>(null)
@@ -111,7 +116,7 @@ const updateTracker = useThrottleFn(async (value: string | number | undefined) =
   const center = tabEl.offsetLeft - (tabsRef.value.getBoundingClientRect().width - tabEl.getBoundingClientRect().width) / 2
 
   if (scrollRef.value.scrollEl) scrollRef.value.scrollEl.scrollTo({ left: center, behavior: 'smooth' })
-}, 100)
+}, 100, true)
 
 const showTracker = ref(true)
 
@@ -138,7 +143,9 @@ onMounted(() => {
   updateTracker(active.value)
 })
 
-const { styles, classes, className } = useTheme('tabs', theme, props)
+useResizeObserver(tabsRef, () => { updateTracker(active.value) })
+
+const { styles, classes, className } = useTheme('TabGroup', {}, props)
 </script>
 
 <template>
@@ -157,10 +164,7 @@ const { styles, classes, className } = useTheme('tabs', theme, props)
         :scrollbar="false"
         horizontal
         mousewheel
-        :class="{
-          'rounded-md': variant === 'block',
-          'bg-slate-100 dark:bg-gray-800 p-1': variant === 'block' && !ghost
-        }"
+        :class="classes.scroller"
       >
         <div
           ref="tabsRef"

package/src/components/tab/index.ts

@@ -1,5 +1,11 @@
 export { default as XTab } from './Tab.vue'
-export type { TabProps } from './Tab.vue'
+export type { TabProps, TabTheme } from './Tab.vue'
 
 export { default as XTabGroup } from './TabGroup.vue'
-export type { TabGroupProps, TabGroupAlign, TabGroupInjection, TabGroupVariant } from './TabGroup.vue'
+export type {
+  TabGroupProps,
+  TabGroupAlign,
+  TabGroupInjection,
+  TabGroupVariant,
+  TabGroupTheme,
+} from './TabGroup.vue'

package/src/components/tab/theme/Tab.base.theme.ts

@@ -0,0 +1,26 @@
+import type { TabTheme } from '../Tab.vue'
+
+const theme: TabTheme = {
+  classes: {
+    wrapper: ({ props, data }) => {
+      const c = ['py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-center']
+
+      if (data.variant === 'block') c.push('px-8')
+
+      if (props.size === 'xs') c.push('text-xs')
+      else if (props.size === 'sm') c.push('text-sm')
+      else if (props.size === 'lg') c.push('text-lg')
+      else if (props.size === 'xl') c.push('text-xl')
+
+      return c
+    },
+
+    content: 'flex items-center justify-center',
+
+    label: 'font-medium',
+
+    icon: 'mr-1.5',
+  },
+}
+
+export default theme

package/src/components/tab/theme/Tab.carbon.theme.ts

@@ -0,0 +1,32 @@
+import type { TabTheme } from '../Tab.vue'
+
+const theme: TabTheme = {
+  classes: {
+    wrapper: ({ props, data }) => {
+      const c = ['py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-left min-w-[8rem]']
+
+      if (data.variant === 'block') c.push('px-8')
+      else c.push('px-4')
+
+      if (props.size === 'lg') c.push('text-lg')
+      else if (props.size === 'xl') c.push('text-xl')
+      else c.push('text-sm')
+
+      return c
+    },
+
+    content: 'flex items-center justify-start',
+
+    label: ({ data }) => {
+      const c = ['']
+
+      if (data.selected) c.push('font-medium')
+
+      return c
+    },
+
+    icon: 'mr-1.5',
+  },
+}
+
+export default theme

package/src/components/tab/{TabGroup.theme.ts → theme/TabGroup.base.theme.ts}

@@ -1,17 +1,19 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { TabGroupProps } from './TabGroup.vue'
+import type { TabGroupTheme } from '../TabGroup.vue'
 
-type InternalClasses = 'wrapper' | 'list' | 'tracker'
-
-interface InternalTheme extends ThemeComponent<TabGroupProps, InternalClasses> {}
-export interface TabGroupTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<TabGroupProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
+const theme: TabGroupTheme = {
   classes: {
     wrapper: '',
 
+    scroller: ({ props }) => {
+      const c = ['']
+
+      if (!props.fullWidth) c.push('!w-fit')
+      if (props.variant === 'block') c.push('rounded-md')
+      if (props.variant === 'block' && !props.ghost) c.push('bg-slate-100 dark:bg-gray-800 p-1')
+
+      return c
+    },
+
     list: ({ props }) => {
       const c = ['flex min-w-full w-fit']
 
@@ -27,9 +29,9 @@ const theme: InternalTheme = {
     tracker: ({ props }) => {
       const c = ['absolute transition-all duration-150']
 
-      if (props.variant === 'line') c.push('h-[2px] -mt-[2px] bg-[color:var(--x-tabs-text)] dark:bg-[color:var(--x-tabs-dark-text)]')
+      if (props.variant === 'line') c.push('h-[2px] -mt-[2px] bg-[color:var(--x-tab-group-text)] dark:bg-[color:var(--x-tab-group-dark-text)]')
 
-      if (props.variant === 'block') c.push('rounded-md h-full top-0 bg-[color:var(--x-tabs-bg)] dark:bg-[color:var(--x-tabs-dark-bg)]')
+      if (props.variant === 'block') c.push('rounded-md h-full top-0 bg-[color:var(--x-tab-group-bg)] dark:bg-[color:var(--x-tab-group-dark-bg)]')
 
       return c
     },

package/src/components/tab/theme/TabGroup.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { TabGroupTheme } from '../TabGroup.vue'
+
+import BaseTheme from './TabGroup.base.theme'
+
+const theme: TabGroupTheme = BaseTheme
+
+export default theme

package/src/components/table/Table.vue

@@ -38,12 +38,15 @@ export type TableHeader = {
 
 export type TableProps = ExtractPublicPropTypes<typeof tableProps>
 
+type InternalClasses = 'wrapper' | 'loadingWrapper'
+export interface TableTheme extends ThemeComponent<TableProps, InternalClasses> {}
+
 export default { name: 'XTable' }
 </script>
 
 <script setup lang="ts" generic="T">
 import type { ExtractPublicPropTypes, PropType } from 'vue'
-import { useTheme } from '../../composables/theme'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 import XTableHead from './TableHead'
 import XTableHeader, { type TableHeaderSort, type TableHeaderAlign } from './TableHeader.vue'
@@ -52,8 +55,6 @@ import XTableRow from './TableRow.vue'
 import XTableCell from './TableCell.vue'
 import XSpinner from '../spinner/Spinner.vue'
 
-import theme from './Table.theme'
-
 const props = defineProps({
   ...tableProps,
   items: {
@@ -115,7 +116,7 @@ function getValue(item: any, path: string | string[] | undefined) {
   return result ?? ''
 }
 
-const { styles, classes, className } = useTheme('table', theme, props)
+const { styles, classes, className } = useTheme('Table', {}, props)
 </script>
 
 <template>

package/src/components/table/TableCell.vue

@@ -22,6 +22,9 @@ export type TableCellTextAlign = typeof validators.textAlign[number]
 export type TableCellVerticalAlign = typeof validators.verticalAlign[number]
 export type TableCellProps = ExtractPublicPropTypes<typeof tableCellProps>
 
+type InternalClasses = 'wrapper'
+export interface TableCellTheme extends ThemeComponent<TableCellProps, InternalClasses> {}
+
 export default {
   name: 'XTableCell',
   validators,
@@ -30,9 +33,7 @@ export default {
 
 <script setup lang="ts">
 import type { ExtractPublicPropTypes, PropType } from 'vue'
-import { useTheme } from '../../composables/theme'
-
-import theme  from './TableCell.theme'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(tableCellProps)
 
@@ -40,7 +41,7 @@ if (props.truncate && !props.fixed) {
   console.warn('Table must have "fixed" property set to true when using TableCell "truncate" property')
 }
 
-const { styles, classes, className } = useTheme('table-cell', theme, props)
+const { styles, classes, className } = useTheme('TableCell', {}, props)
 </script>
 
 <template>

package/src/components/table/index.ts

@@ -5,6 +5,6 @@ export { default as XTableHead } from './TableHead'
 export { default as XTableHeader } from './TableHeader.vue'
 export { default as XTableRow } from './TableRow.vue'
 
-export type { TableProps, TableHeader } from './Table.vue'
+export type { TableProps, TableHeader, TableTheme } from './Table.vue'
 export type { TableHeaderProps, TableHeaderAlign, TableHeaderSort } from './TableHeader.vue'
-export type { TableCellProps, TableCellTextAlign, TableCellVerticalAlign } from './TableCell.vue'
+export type { TableCellProps, TableCellTextAlign, TableCellVerticalAlign, TableCellTheme } from './TableCell.vue'

package/src/components/table/theme/Table.base.theme.ts

@@ -0,0 +1,21 @@
+import type { TableTheme } from '../Table.vue'
+
+const theme: TableTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const c = ['w-full relative']
+
+      if (props.scrollable) c.push('overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal block sm:table')
+
+      if (props.stickyHeader) c.push('relative')
+
+      if (props.fixed) c.push('table-fixed')
+
+      return c
+    },
+
+    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50',
+  },
+}
+
+export default theme

package/src/components/table/theme/Table.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { TableTheme } from '../Table.vue'
+
+import BaseTheme from './Table.base.theme'
+
+const theme: TableTheme = BaseTheme
+
+export default theme

package/src/components/table/{TableCell.theme.ts → theme/TableCell.base.theme.ts}

@@ -1,14 +1,6 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { TableCellProps } from './TableCell.vue'
+import type { TableCellTheme } from '../TableCell.vue'
 
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<TableCellProps, InternalClasses> {}
-export interface TableCellTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<TableCellProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
+const theme: TableCellTheme = {
   classes: {
     wrapper: ({ props }) => {
       const c = ['last:pr-0 px-3']

package/src/components/table/theme/TableCell.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { TableCellTheme } from '../TableCell.vue'
+
+import BaseTheme from './TableCell.base.theme'
+
+const theme: TableCellTheme = BaseTheme
+
+export default theme

package/src/components/tag/Tag.vue

@@ -13,6 +13,9 @@ const tagProps = {
 
 export type TagProps = ExtractPublicPropTypes<typeof tagProps>
 
+type InternalClasses = 'wrapper' | 'loadingWrapper'
+export interface TagTheme extends ThemeComponent<TagProps, InternalClasses> {}
+
 export default {
   name: 'XTag',
   validators: {
@@ -23,15 +26,13 @@ export default {
 
 <script setup lang="ts">
 import { computed, type ExtractPublicPropTypes } from 'vue'
-import { useColors } from '../../composables/colors'
-import { useCommon } from '../../composables/common'
-import { useTheme } from '../../composables/theme'
+import { useColors } from '../../composables/useColors'
+import { useCommon } from '../../composables/useCommon'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { closeIcon } from '../../common/icons'
 
 import XIcon from '../icon/Icon.vue'
 
-import theme from './Tag.theme'
-
 const props = defineProps(tagProps)
 
 defineEmits(['remove'])
@@ -45,7 +46,7 @@ const closeIconSize = computed(() => {
   return 'sm'
 })
 
-const { styles, classes, className } = useTheme('tag', theme, props)
+const { styles, classes, className } = useTheme('Tag', {}, props)
 </script>
 
 <template>

package/src/components/tag/index.ts

@@ -1,2 +1,2 @@
 export { default as XTag } from './Tag.vue'
-export type { TagProps } from './Tag.vue'
+export type { TagProps, TagTheme } from './Tag.vue'