@indielayer/ui 1.3.0 → 1.4.0

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

@@ -0,0 +1,21 @@
+import type { TableRowTheme } from '../TableRow.vue'
+
+const theme: TableRowTheme = {
+  classes: {
+    row: ({ props }) => {
+      const classes = []
+
+      if (props.striped) {
+        classes.push('odd:bg-gray-50 dark:odd:bg-gray-800')
+      } else {
+        classes.push('border-b border-gray-200 dark:border-gray-700')
+      }
+
+      if (props.pointer) classes.push('hover:bg-gray-50 dark:hover:bg-gray-600 cursor-pointer')
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/tag/Tag.vue

@@ -13,7 +13,7 @@ const tagProps = {
 
 export type TagProps = ExtractPublicPropTypes<typeof tagProps>
 
-type InternalClasses = 'wrapper' | 'loadingWrapper'
+type InternalClasses = 'wrapper'
 export interface TagTheme extends ThemeComponent<TagProps, InternalClasses> {}
 
 export default {
@@ -52,13 +52,13 @@ const { styles, classes, className } = useTheme('Tag', {}, props)
 <template>
   <component
     :is="tag"
-    class="text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border-[color:var(--x-tag-border)"
+    class="text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border-[color:var(--x-tag-border)] dark:border-[color:var(--x-tag-dark-border)]"
     :style="styles"
     :class="
       [
         className,
         classes.wrapper,
-        outlined ? 'border' : 'bg-[color:var(--x-tag-bg)]',
+        outlined ? 'border' : 'bg-[color:var(--x-tag-bg)] dark:bg-[color:var(--x-tag-dark-bg)]',
         rounded ? 'rounded-full' : 'rounded'
       ]"
   >
@@ -70,7 +70,7 @@ const { styles, classes, className } = useTheme('Tag', {}, props)
       <x-icon
         :size="closeIconSize"
         :icon="closeIcon"
-        class="ml-1 cursor-pointer hover:text-gray-700 transition-colors duration-150"
+        class="ml-1.5 cursor-pointer hover:text-gray-700 transition-colors duration-150"
         @click="(e: Event) => $emit('remove', e)"
       />
     </span>

package/src/components/tag/theme/Tag.base.theme.ts

@@ -13,19 +13,19 @@ const theme: TagTheme = {
 
       return c
     },
-
-    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50',
   },
 
   styles: ({ colors, props, css }) => {
     const color = colors.getPalette(props.color)
 
     return css.variables({
-      bg: color[100],
+      bg: color[200],
       text: color[800],
       border: color[800],
       dark: {
-        text: props.outlined ? color[200] : color[800],
+        bg: color[800],
+        border: color[400],
+        text: props.outlined ? color[200] : color[100],
       },
     })
   },

package/src/components/tag/theme/Tag.carbon.theme.ts

@@ -5,15 +5,13 @@ const theme: TagTheme = {
     wrapper: ({ props }) => {
       let c = 'inline-flex items-center leading-none max-w-full '
 
-      if (props.size === 'xs' || props.size === 'sm') c += ' px-2 py-1 text-xs'
+      if (props.size === 'xs' || props.size === 'sm') c += ' px-2 py-0.5 text-xs'
       else if (props.size === 'lg') c += ' px-4 py-3'
       else if (props.size === 'xl') c += ' px-5 py-5 text-lg'
-      else c += ' px-3 py-2 text-sm'
+      else c += ' px-3 py-1 text-sm'
 
       return c
     },
-
-    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50',
   },
 
   styles: ({ colors, props, css }) => {
@@ -24,8 +22,9 @@ const theme: TagTheme = {
       text: color[800],
       border: color[800],
       dark: {
-        bg: color[700],
-        text: props.outlined ? color[200] : color[800],
+        bg: color[800],
+        border: color[400],
+        text: props.outlined ? color[200] : color[100],
       },
     })
   },

package/src/components/textarea/Textarea.vue

@@ -3,8 +3,6 @@ const textareaProps = {
   ...useCommon.props(),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  helper: String,
-  label: String,
   dir: {
     type: String,
     default: 'ltr',
@@ -91,6 +89,7 @@ const { focus, blur } = useInteractive(elRef)
 
 const {
   errorInternal,
+  hideFooterInternal,
   isInsideForm,
   inputListeners,
   reset,
@@ -117,6 +116,7 @@ defineExpose({ focus, blur, reset, validate, setError })
     ]"
   >
     <textarea
+      :id="id"
       ref="elRef"
       class=""
       :style="style"
@@ -142,6 +142,6 @@ defineExpose({ focus, blur, reset, validate, setError })
       @input="onInput"
     ></textarea>
 
-    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
   </x-label>
 </template>

package/src/components/textarea/theme/Textarea.carbon.theme.ts

@@ -18,7 +18,7 @@ const theme: TextareaTheme = {
       } else if (props.readonly) {
         classes.push('bg-white dark:bg-gray-900 text-gray-700')
       } else {
-        classes.push('bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+        classes.push('bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200')
       }
 
       return classes

package/src/components/toggle/Toggle.vue

@@ -4,9 +4,6 @@ const toggleProps = {
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  id: String,
-  label: String,
-  helper: String,
   glow: Boolean,
 }
 
@@ -53,6 +50,7 @@ const { focus, blur } = useInteractive(elRef)
 
 const {
   errorInternal,
+  hideFooterInternal,
   reset,
   validate,
   setError,
@@ -119,6 +117,6 @@ defineExpose({ focus, blur, reset, validate, setError })
       <x-spinner v-if="loading" :size="size" class="ml-1" />
     </div>
 
-    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
   </label>
 </template>

package/src/composables/keys.ts

@@ -4,13 +4,17 @@ import type { TabGroupInjection } from '../components/tab/TabGroup.vue'
 import type { ButtonGroupInjection } from '../components/button/ButtonGroup.vue'
 import type { NotificationInjection } from '../components/notifications/Notifications.vue'
 import type { IconInjection } from '../components/icon/Icon.vue'
+import type { FormGroupInjection } from '../components/formGroup'
+import type { AccordionInjection } from '../components/accordion'
 import type { UIOptions } from '../create'
 import type { UITheme } from '../theme'
 
 export const injectOptionsKey = Symbol() as InjectionKey<UIOptions>
 export const injectThemeKey = Symbol() as InjectionKey<MaybeRef<UITheme>>
-export const injectTabKey = Symbol() as InjectionKey<TabGroupInjection>
+export const injectTabGroupKey = Symbol() as InjectionKey<TabGroupInjection>
 export const injectFormKey = Symbol() as InjectionKey<FormInjection>
+export const injectFormGroupKey = Symbol() as InjectionKey<FormGroupInjection>
 export const injectIconsKey = Symbol() as InjectionKey<IconInjection>
 export const injectButtonGroupKey = Symbol() as InjectionKey<ButtonGroupInjection>
 export const injectNotificationKey = Symbol() as InjectionKey<NotificationInjection>
+export const injectAccordionKey = Symbol() as InjectionKey<AccordionInjection>

package/src/composables/useFocusTrap.ts

@@ -0,0 +1,106 @@
+import type { ComponentPublicInstance } from 'vue'
+import { onUnmounted, type MaybeRef, unref, nextTick } from 'vue'
+
+const focusableQuery = 'button:not([tabindex="-1"]), [href], input, select, textarea, li, a, [tabindex]:not([tabindex="-1"])'
+
+export function useFocusTrap() {
+  let focusable: HTMLElement[] = []
+  let observer: MutationObserver | null = null
+
+  let firstFocusableEl: HTMLElement | null = null
+  let lastFocusableEl: HTMLElement | null = null
+
+  async function initFocusTrap(targetRef: MaybeRef<HTMLElement | ComponentPublicInstance | null>) {
+    targetRef = unref(targetRef)
+
+    if (!targetRef) return
+
+    await nextTick()
+
+    getFocusableElements(targetRef)
+
+    if (firstFocusableEl) firstFocusableEl.focus()
+
+    document.addEventListener('keydown', handleKeydown)
+    observer = new MutationObserver(() => getFocusableElements(targetRef))
+
+    if ((targetRef as ComponentPublicInstance).$el) observer.observe((targetRef as ComponentPublicInstance).$el as Node, { childList: true, subtree: true })
+    else observer.observe(targetRef as Node, { childList: true, subtree: true })
+  }
+
+  function getFocusableElements(targetRef: MaybeRef<HTMLElement | ComponentPublicInstance | null>) {
+    if (targetRef === null) return
+
+    let elements
+
+    if ((targetRef as ComponentPublicInstance).$el) elements = (targetRef as ComponentPublicInstance)?.$el.querySelectorAll(focusableQuery)
+    else (targetRef as HTMLElement).querySelectorAll(focusableQuery)
+
+    focusable = Array.from(elements || []) as HTMLElement[]
+    firstFocusableEl = focusable[0] || null
+    lastFocusableEl = focusable[focusable.length - 1] || null
+  }
+
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Tab') {
+      const isShiftPressed = event.shiftKey
+      const currentEl = document.activeElement as HTMLElement | null
+
+      if (!currentEl) {
+        event.preventDefault()
+        focusable[0]?.focus()
+
+        return
+      }
+
+      const firstEl = focusable[0]
+      const lastEl = focusable[focusable.length - 1]
+
+      if (!isShiftPressed && currentEl === lastEl) {
+        event.preventDefault()
+        firstEl?.focus()
+      } else if (isShiftPressed && currentEl === firstEl) {
+        event.preventDefault()
+        lastEl?.focus()
+      }
+
+    } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+      event.preventDefault()
+      const currentEl = document.activeElement as HTMLElement
+      const index = focusable.indexOf(currentEl)
+      const previousEl = focusable[index - 1]
+
+      if (previousEl) {
+        previousEl.focus()
+      } else if (lastFocusableEl) {
+        lastFocusableEl.focus()
+      }
+
+    } else if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+      event.preventDefault()
+      const currentEl = document.activeElement as HTMLElement
+      const index = focusable.indexOf(currentEl)
+      const nextElement = focusable[index + 1]
+
+      if (nextElement) {
+        nextElement.focus()
+      } else if (firstFocusableEl) {
+        firstFocusableEl.focus()
+      }
+    }
+  }
+
+  const clearFocusTrap = () => {
+    document.removeEventListener('keydown', handleKeydown)
+    observer?.disconnect()
+  }
+
+  onUnmounted(() => {
+    clearFocusTrap()
+  })
+
+  return {
+    initFocusTrap,
+    clearFocusTrap,
+  }
+}

package/src/composables/useInputtable.ts

@@ -1,6 +1,6 @@
 import type { MaybeRef, PropType } from 'vue'
 import { ref, computed, inject, watch, onMounted, onUnmounted } from 'vue'
-import { injectFormKey } from './keys'
+import { injectFormGroupKey, injectFormKey } from './keys'
 
 export interface XFormInputMethods {
   focus: () => void;
@@ -11,6 +11,7 @@ export interface XFormInputMethods {
 export const useInputtable = (props: any, { focus, emit, withListeners = true }: { focus: () => void; emit: any; withListeners?: boolean; }) => {
   const isFirstValidation = ref(true)
   const errorInternal = ref(props.error)
+  const hideFooterInternal = ref(props.hideFooter)
 
   const name = props.name ? props.name : (Math.random() + 1).toString(36).substring(7)
   const nameInternal = ref(name)
@@ -18,6 +19,18 @@ export const useInputtable = (props: any, { focus, emit, withListeners = true }:
   watch(() => props.error, (val) => { errorInternal.value = val })
   watch(() => props.name, (val) => { if (val) nameInternal.value = val })
 
+  const formGroup = inject(injectFormGroupKey, {
+    registerInputGroup: () => {},
+    unregisterInputGroup: () => {},
+    setValue: () => {},
+    isInsideFormGroup: false,
+    value: undefined,
+  })
+
+  if (formGroup.isInsideFormGroup) {
+    hideFooterInternal.value = true
+  }
+
   const form = inject(injectFormKey, {
     registerInput: () => {},
     unregisterInput: () => {},
@@ -101,19 +114,31 @@ export const useInputtable = (props: any, { focus, emit, withListeners = true }:
   }
 
   onMounted(() => {
-    form.registerInput(nameInternal.value, focus, validate, setError)
+    if (formGroup.isInsideFormGroup) {
+      formGroup.registerInputGroup(nameInternal.value, focus)
+    } else {
+      form.registerInput(nameInternal.value, focus, validate, setError)
+    }
   })
 
   onUnmounted(() => {
-    form.unregisterInput(nameInternal.value)
+    if (formGroup.isInsideFormGroup) {
+      formGroup.unregisterInputGroup(nameInternal.value)
+    } else {
+      form.unregisterInput(nameInternal.value)
+    }
+
   })
 
   return {
     isFirstValidation,
     errorInternal,
+    hideFooterInternal,
     isFocused,
     isInsideForm: form.isInsideForm,
+    isInsideFormGroup: formGroup.isInsideFormGroup,
     inputListeners,
+    formGroup,
     reset,
     validate,
     setError,
@@ -128,6 +153,7 @@ useInputtable.emits = (withListeners = true): string[] => {
 
 useInputtable.props = () => ({
   modelValue: [String, Number, Boolean, Object, Array] as PropType<string | number | boolean | object | any[] | undefined>,
+  id: String,
   name: String,
   readonly: Boolean,
   required: Boolean,
@@ -135,6 +161,8 @@ useInputtable.props = () => ({
     type: Boolean,
     default: true,
   },
+  label: String,
+  helper: String,
   error: String,
   hideFooter: Boolean,
   rules: {

package/src/theme.ts

@@ -1,5 +1,7 @@
 import type { ColorLibrary } from './composables/useColors'
 import type {
+  AccordionTheme,
+  AccordionItemTheme,
   AlertTheme,
   AvatarTheme,
   BadgeTheme,
@@ -10,11 +12,11 @@ import type {
   CarouselTheme,
   CarouselSlideTheme,
   CheckboxTheme,
-  CollapseTheme,
   ContainerTheme,
   DividerTheme,
   DrawerTheme,
   FormTheme,
+  FormGroupTheme,
   IconTheme,
   ImageTheme,
   InputTheme,
@@ -36,16 +38,22 @@ import type {
   SelectTheme,
   SkeletonTheme,
   SliderTheme,
+  StepperTheme,
   TabTheme,
   TabGroupTheme,
   TableTheme,
   TableCellTheme,
+  TableHeadTheme,
+  TableHeaderTheme,
+  TableRowTheme,
   TagTheme,
   TextareaTheme,
   ToggleTheme,
 } from './components'
 
 export type ComponentThemes = {
+  Accordion: AccordionTheme;
+  AccordionItem: AccordionItemTheme;
   Alert: AlertTheme;
   Avatar: AvatarTheme;
   Badge: BadgeTheme;
@@ -56,11 +64,11 @@ export type ComponentThemes = {
   Carousel: CarouselTheme;
   CarouselSlide: CarouselSlideTheme;
   Checkbox: CheckboxTheme;
-  Collapse: CollapseTheme;
   Container: ContainerTheme;
   Divider: DividerTheme;
   Drawer: DrawerTheme;
   Form: FormTheme;
+  FormGroup: FormGroupTheme;
   Icon: IconTheme;
   Image: ImageTheme;
   Input: InputTheme;
@@ -82,10 +90,14 @@ export type ComponentThemes = {
   Select: SelectTheme;
   Skeleton: SkeletonTheme;
   Slider: SliderTheme;
+  Stepper: StepperTheme;
   Tab: TabTheme;
   TabGroup: TabGroupTheme;
   Table: TableTheme;
   TableCell: TableCellTheme;
+  TableHead: TableHeadTheme;
+  TableHeader: TableHeaderTheme;
+  TableRow: TableRowTheme;
   Tag: TagTheme;
   Textarea: TextareaTheme;
   Toggle: ToggleTheme;

package/src/themes/base/components.ts

@@ -1,3 +1,5 @@
+export { default as Accordion } from '../../components/accordion/theme/Accordion.base.theme'
+export { default as AccordionItem } from '../../components/accordion/theme/AccordionItem.base.theme'
 export { default as Alert } from '../../components/alert/theme/Alert.base.theme'
 export { default as Avatar } from '../../components/avatar/theme/Avatar.base.theme'
 export { default as Badge } from '../../components/badge/theme/Badge.base.theme'
@@ -8,11 +10,11 @@ export { default as Card } from '../../components/card/theme/Card.base.theme'
 export { default as Carousel } from '../../components/carousel/theme/Carousel.base.theme'
 export { default as CarouselSlide } from '../../components/carousel/theme/CarouselSlide.base.theme'
 export { default as Checkbox } from '../../components/checkbox/theme/Checkbox.base.theme'
-export { default as Collapse } from '../../components/collapse/theme/Collapse.base.theme'
 export { default as Container } from '../../components/container/theme/Container.base.theme'
 export { default as Divider } from '../../components/divider/theme/Divider.base.theme'
 export { default as Drawer } from '../../components/drawer/theme/Drawer.base.theme'
 export { default as Form } from '../../components/form/theme/Form.base.theme'
+export { default as FormGroup } from '../../components/formGroup/theme/FormGroup.base.theme'
 export { default as Icon } from '../../components/icon/theme/Icon.base.theme'
 export { default as Image } from '../../components/image/theme/Image.base.theme'
 export { default as Input } from '../../components/input/theme/Input.base.theme'
@@ -34,10 +36,14 @@ export { default as Scroll } from '../../components/scroll/theme/Scroll.base.the
 export { default as Select } from '../../components/select/theme/Select.base.theme'
 export { default as Skeleton } from '../../components/skeleton/theme/Skeleton.base.theme'
 export { default as Slider } from '../../components/slider/theme/Slider.base.theme'
+export { default as Stepper } from '../../components/stepper/theme/Stepper.base.theme'
 export { default as Tab } from '../../components/tab/theme/Tab.base.theme'
 export { default as TabGroup } from '../../components/tab/theme/TabGroup.base.theme'
 export { default as Table } from '../../components/table/theme/Table.base.theme'
 export { default as TableCell } from '../../components/table/theme/TableCell.base.theme'
+export { default as TableHead } from '../../components/table/theme/TableHead.base.theme'
+export { default as TableHeader } from '../../components/table/theme/TableHeader.base.theme'
+export { default as TableRow } from '../../components/table/theme/TableRow.base.theme'
 export { default as Tag } from '../../components/tag/theme/Tag.base.theme'
 export { default as Textarea } from '../../components/textarea/theme/Textarea.base.theme'
 export { default as Toggle } from '../../components/toggle/theme/Toggle.base.theme'

package/src/themes/carbon/components.ts

@@ -1,3 +1,5 @@
+export { default as Accordion } from '../../components/accordion/theme/Accordion.carbon.theme'
+export { default as AccordionItem } from '../../components/accordion/theme/AccordionItem.carbon.theme'
 export { default as Alert } from '../../components/alert/theme/Alert.carbon.theme'
 export { default as Avatar } from '../../components/avatar/theme/Avatar.carbon.theme'
 export { default as Badge } from '../../components/badge/theme/Badge.carbon.theme'
@@ -8,11 +10,11 @@ export { default as Card } from '../../components/card/theme/Card.carbon.theme'
 export { default as Carousel } from '../../components/carousel/theme/Carousel.carbon.theme'
 export { default as CarouselSlide } from '../../components/carousel/theme/CarouselSlide.carbon.theme'
 export { default as Checkbox } from '../../components/checkbox/theme/Checkbox.carbon.theme'
-export { default as Collapse } from '../../components/collapse/theme/Collapse.carbon.theme'
 export { default as Container } from '../../components/container/theme/Container.carbon.theme'
 export { default as Divider } from '../../components/divider/theme/Divider.carbon.theme'
 export { default as Drawer } from '../../components/drawer/theme/Drawer.carbon.theme'
 export { default as Form } from '../../components/form/theme/Form.carbon.theme'
+export { default as FormGroup } from '../../components/formGroup/theme/FormGroup.carbon.theme'
 export { default as Icon } from '../../components/icon/theme/Icon.carbon.theme'
 export { default as Image } from '../../components/image/theme/Image.carbon.theme'
 export { default as Input } from '../../components/input/theme/Input.carbon.theme'
@@ -34,10 +36,14 @@ export { default as Scroll } from '../../components/scroll/theme/Scroll.carbon.t
 export { default as Select } from '../../components/select/theme/Select.carbon.theme'
 export { default as Skeleton } from '../../components/skeleton/theme/Skeleton.carbon.theme'
 export { default as Slider } from '../../components/slider/theme/Slider.carbon.theme'
+export { default as Stepper } from '../../components/stepper/theme/Stepper.carbon.theme'
 export { default as Tab } from '../../components/tab/theme/Tab.carbon.theme'
 export { default as TabGroup } from '../../components/tab/theme/TabGroup.carbon.theme'
 export { default as Table } from '../../components/table/theme/Table.carbon.theme'
 export { default as TableCell } from '../../components/table/theme/TableCell.carbon.theme'
+export { default as TableHead } from '../../components/table/theme/TableHead.carbon.theme'
+export { default as TableHeader } from '../../components/table/theme/TableHeader.carbon.theme'
+export { default as TableRow } from '../../components/table/theme/TableRow.carbon.theme'
 export { default as Tag } from '../../components/tag/theme/Tag.carbon.theme'
 export { default as Textarea } from '../../components/textarea/theme/Textarea.carbon.theme'
 export { default as Toggle } from '../../components/toggle/theme/Toggle.carbon.theme'

package/src/version.ts

@@ -1 +1 @@
-export default '1.3.0'
+export default '1.4.0'

package/volar.d.ts

@@ -1,5 +1,7 @@
 declare module 'vue' {
   export interface GlobalComponents {
+    XAccordion: typeof import('@indielayer/ui')['XAccordion']
+    XAccordionItem: typeof import('@indielayer/ui')['XAccordionItem']
     XAlert: typeof import('@indielayer/ui')['XAlert']
     XAvatar: typeof import('@indielayer/ui')['XAvatar']
     XBadge: typeof import('@indielayer/ui')['XBadge']
@@ -10,15 +12,16 @@ declare module 'vue' {
     XCarousel: typeof import('@indielayer/ui')['XCarousel']
     XCarouselSlide: typeof import('@indielayer/ui')['XCarouselSlide']
     XCheckbox: typeof import('@indielayer/ui')['XCheckbox']
-    XCollapse: typeof import('@indielayer/ui')['XCollapse']
     XContainer: typeof import('@indielayer/ui')['XContainer']
     XDivider: typeof import('@indielayer/ui')['XDivider']
     XDrawer: typeof import('@indielayer/ui')['XDrawer']
     XForm: typeof import('@indielayer/ui')['XForm']
+    XFormGroup: typeof import('@indielayer/ui')['XFormGroup']
     XIcon: typeof import('@indielayer/ui')['XIcon']
     XImage: typeof import('@indielayer/ui')['XImage']
     XInput: typeof import('@indielayer/ui')['XInput']
     XInputFooter: typeof import('@indielayer/ui')['XInputFooter']
+    XLabel: typeof import('@indielayer/ui')['XLabel']
     XLink: typeof import('@indielayer/ui')['XLink']
     XLoader: typeof import('@indielayer/ui')['XLoader']
     XMenu: typeof import('@indielayer/ui')['XMenu']
@@ -37,6 +40,7 @@ declare module 'vue' {
     XSlider: typeof import('@indielayer/ui')['XSlider']
     XSpacer: typeof import('@indielayer/ui')['XSpacer']
     XSpinner: typeof import('@indielayer/ui')['XSpinner']
+    XStepper: typeof import('@indielayer/ui')['XStepper']
     XTable: typeof import('@indielayer/ui')['XTable']
     XTableBody: typeof import('@indielayer/ui')['XTableBody']
     XTableCell: typeof import('@indielayer/ui')['XTableCell']