@livestorm/ui-vue 2.0.4 → 3.0.0

package/src/components/UiSwitch/UiSwitch.vue

@@ -0,0 +1,359 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
+import { Label, SwitchRoot, SwitchThumb, useId } from 'reka-ui'
+import type { SwitchColor, SwitchPosition, SwitchSize } from './types'
+import UiTooltip from '../UiTooltip/UiTooltip.vue'
+
+interface UiSwitchProps {
+  /**
+   * Whether the switch is on
+   * @default false
+   */
+  modelValue?: boolean
+  /**
+   * The label text
+   */
+  label?: string
+  /**
+   * Description text below the label
+   */
+  description?: string
+  /**
+   * Info tooltip for the label
+   */
+  labelInfo?: string
+  /**
+   * Icon class rendered between the switch and the text (e.g. `i-ph-bell`)
+   */
+  icon?: string
+  /**
+   * Whether the switch is disabled
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * Whether the switch has an error
+   * @default false
+   */
+  error?: boolean
+  /**
+   * Color of the on state (error takes precedence)
+   * @default 'primary'
+   */
+  color?: SwitchColor
+  /**
+   * Size of the switch
+   * @default 'sm'
+   */
+  size?: SwitchSize
+  /**
+   * Which side of the text the switch sits on
+   * @default 'left'
+   */
+  switchPosition?: SwitchPosition
+  /**
+   * Whether to show a background behind the switch and its text
+   * @default false
+   */
+  showBg?: boolean
+  /**
+   * Whether the switch stretches to fill its container, which spreads the
+   * text and the switch to opposite edges
+   * @default false
+   */
+  fullWidth?: boolean
+  /**
+   * Switch name attribute (renders a hidden input for native forms)
+   */
+  name?: string
+  /**
+   * Switch id attribute
+   */
+  id?: string
+}
+
+const props = withDefaults(defineProps<UiSwitchProps>(), {
+  modelValue: false,
+  label: undefined,
+  description: undefined,
+  labelInfo: undefined,
+  icon: undefined,
+  disabled: false,
+  error: false,
+  color: 'primary',
+  size: 'sm',
+  switchPosition: 'left',
+  showBg: false,
+  fullWidth: false,
+  name: undefined,
+  id: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'focus': [event: FocusEvent]
+  'blur': [event: FocusEvent]
+}>()
+
+const generatedId = useId()
+const inputId = computed(() => props.id ?? generatedId)
+
+const isChecked = computed(() => props.modelValue)
+
+// Design palette: primary | warning, with error mapping onto the danger tokens
+const palette = computed(() => props.error ? 'danger' : props.color === 'warning' ? 'warning' : 'primary')
+
+const descriptionId = computed(() => props.description ? `${inputId.value}-description` : undefined)
+
+const trackClasses = computed(() => {
+  const baseClasses = [
+    'relative shrink-0 inline-flex items-center rounded-full',
+    'border p-[3px] transition-colors',
+    'focus:outline-hidden',
+    'cursor-pointer disabled:cursor-not-allowed',
+  ]
+
+  // sm: 40x24 track / 16px thumb, xs: 32x20 track / 12px thumb
+  baseClasses.push(props.size === 'xs' ? 'h-5 w-8' : 'h-6 w-10')
+
+  if (isChecked.value) {
+    const checkedClasses = {
+      primary: 'bg-actions-primary-idle-alpha-strong border-borders-primary-default',
+      warning: 'bg-actions-warning-idle-alpha-strong border-actions-warning-idle-alpha-strong',
+      danger: 'bg-actions-danger-idle-alpha-strong border-actions-danger-idle-alpha-strong',
+    }
+    baseClasses.push(checkedClasses[palette.value])
+    if (!props.disabled) {
+      // On warning/danger the border lightens on hover (primary keeps its border)
+      const checkedHoverClasses = {
+        primary: '',
+        warning: 'group-hover:border-borders-warning-default',
+        danger: 'group-hover:border-borders-danger-default',
+      }
+      baseClasses.push(checkedHoverClasses[palette.value])
+    }
+  } else {
+    const uncheckedBorderClasses = {
+      primary: 'border-borders-neutral-strong',
+      warning: 'border-borders-warning-strong',
+      danger: 'border-borders-danger-strong',
+    }
+    baseClasses.push('bg-surface-neutral-bg-main', uncheckedBorderClasses[palette.value])
+    if (!props.disabled) {
+      // Border thickens on hover; padding shrinks in step so the thumb
+      // keeps its exact position and travel distance
+      baseClasses.push('group-hover:border-2 group-hover:p-0.5')
+    }
+  }
+
+  // Focus ring
+  if (props.error) {
+    baseClasses.push('focus-visible:ring focus-visible:ring-borders-danger-strong')
+  } else if (isChecked.value) {
+    baseClasses.push(props.color === 'warning'
+      ? 'focus-visible:ring focus-visible:ring-borders-warning-strong'
+      : 'focus-visible:ring focus-visible:ring-borders-primary-strong')
+  } else {
+    baseClasses.push('focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-ring')
+  }
+
+  return baseClasses
+})
+
+const trackHoverOverlayClasses = computed(() => {
+  const overlayClasses = {
+    primary: isChecked.value ? 'bg-actions-primary-hover-overlay' : 'bg-actions-neutral-hover-overlay',
+    warning: 'bg-actions-warning-hover-overlay',
+    danger: 'bg-actions-danger-hover-overlay',
+  }
+  return overlayClasses[palette.value]
+})
+
+const thumbClasses = computed(() => {
+  const baseClasses = ['pointer-events-none block rounded-full transition-transform']
+
+  if (props.size === 'xs') {
+    baseClasses.push('size-3 data-[state=checked]:translate-x-3')
+  } else {
+    baseClasses.push('size-4 data-[state=checked]:translate-x-4')
+  }
+
+  baseClasses.push(isChecked.value
+    ? 'bg-actions-neutral-invert-idle'
+    : 'bg-actions-neutral-idle-alpha-strong')
+
+  return baseClasses
+})
+
+const innerWrapperClasses = computed(() => {
+  const classes = ['group relative flex items-center gap-2 rounded-md']
+
+  if (props.switchPosition === 'right') {
+    classes.push('flex-row-reverse')
+  }
+
+  if (props.disabled) {
+    classes.push('opacity-50 cursor-not-allowed')
+  } else {
+    classes.push('cursor-pointer')
+  }
+
+  if (props.showBg) {
+    classes.push('p-2 shadow-[0px_1px_2px_0px_var(--color-shadow-neutral-100)]')
+    classes.push(props.error ? 'bg-actions-danger-idle-alpha-light' : 'bg-actions-neutral-idle-alpha-light')
+  }
+
+  return classes
+})
+
+const labelClasses = computed(() => ({
+  'text-text-danger-base': props.error,
+  'text-text-neutral-base': !props.error,
+  'cursor-not-allowed': props.disabled,
+  'cursor-pointer': !props.disabled,
+}))
+
+// Text hugs the switch when the component sizes to its content, but stays at
+// the leading edge when it stretches, so the row reads label-left/switch-right.
+const textAlignsToSwitch = computed(() => props.switchPosition === 'right' && !props.fullWidth)
+
+const descriptionClasses = computed(() => ({
+  'text-right': textAlignsToSwitch.value,
+  'text-text-danger-tertiary': props.error,
+  'text-text-neutral-tertiary': !props.error,
+  'cursor-not-allowed': props.disabled,
+  'cursor-pointer': !props.disabled,
+}))
+
+// SwitchRoot is a generic component, so InstanceType<typeof SwitchRoot> can't be used
+const switchRef = ref<ComponentPublicInstance | null>(null)
+
+function switchElement (): HTMLElement | undefined {
+  return (switchRef.value?.$el as HTMLElement | undefined) ?? undefined
+}
+
+// Make the whole wrapper (description, icon, background) toggle the switch.
+// Clicks on the button itself or on the label are skipped: the button handles
+// its own clicks and the label forwards to the button natively via `for`.
+function onWrapperClick (event: MouseEvent) {
+  if (props.disabled) {
+    return
+  }
+
+  const target = event.target as HTMLElement
+  const switchEl = switchElement()
+
+  if (!switchEl || target === switchEl || switchEl.contains(target)) {
+    return
+  }
+  if (target.closest('label')) {
+    return
+  }
+
+  switchEl.click()
+}
+
+defineExpose({
+  focus: () => switchElement()?.focus(),
+  blur: () => switchElement()?.blur(),
+})
+</script>
+
+<template>
+  <div
+    class="ui-switch-wrapper"
+    :class="fullWidth ? 'w-full' : 'w-fit'"
+  >
+    <div
+      :class="innerWrapperClasses"
+      @click="onWrapperClick"
+    >
+      <SwitchRoot
+        :id="inputId"
+        ref="switchRef"
+        :model-value="modelValue"
+        :disabled="disabled"
+        :name="name"
+        :class="trackClasses"
+        :aria-invalid="error || undefined"
+        :aria-describedby="descriptionId"
+        @update:model-value="emit('update:modelValue', $event)"
+        @focus="emit('focus', $event)"
+        @blur="emit('blur', $event)"
+      >
+        <SwitchThumb :class="thumbClasses" />
+
+        <div
+          v-if="!disabled"
+          class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
+          :class="trackHoverOverlayClasses"
+        />
+      </SwitchRoot>
+
+      <!-- optional leading icon -->
+      <slot name="icon">
+        <span
+          v-if="icon"
+          class="size-4 shrink-0"
+          :class="[icon, error ? 'text-text-danger-base' : 'text-text-neutral-secondary']"
+        />
+      </slot>
+
+      <div
+        v-if="label || description || $slots.label"
+        class="flex flex-col min-w-0 flex-1"
+        :class="{ 'items-end': textAlignsToSwitch }"
+      >
+        <div
+          class="flex items-center gap-2"
+          :class="{ 'flex-row-reverse': textAlignsToSwitch }"
+        >
+          <Label
+            :for="inputId"
+            class="text-content-text-md-medium"
+            :class="labelClasses"
+          >
+            <slot name="label">
+              {{ label }}
+            </slot>
+          </Label>
+
+          <!-- info tooltip -->
+          <UiTooltip
+            v-if="labelInfo"
+            :content="labelInfo"
+          >
+            <!-- stays neutral even in error state, per design -->
+            <div
+              class="flex items-center justify-center size-4 cursor-help shrink-0 text-text-neutral-tertiary"
+              @click.stop
+            >
+              <span class="i-ph-info-fill size-4" />
+            </div>
+          </UiTooltip>
+        </div>
+
+        <span
+          v-if="description"
+          :id="descriptionId"
+          class="text-content-text-md-medium"
+          :class="descriptionClasses"
+        >
+          {{ description }}
+        </span>
+      </div>
+
+      <!-- Background hover overlay -->
+      <div
+        v-if="showBg && !disabled"
+        class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none rounded-md"
+        :class="{
+          'bg-actions-danger-hover-overlay': error,
+          'bg-actions-primary-hover-overlay': isChecked && !error,
+          'bg-actions-neutral-hover-overlay': !isChecked && !error,
+        }"
+      />
+    </div>
+  </div>
+</template>

package/src/components/UiSwitch/index.ts

@@ -0,0 +1,2 @@
+export { default as UiSwitch } from './UiSwitch.vue'
+export type { SwitchColor, SwitchPosition, SwitchSize } from './types'

package/src/components/UiSwitch/types.ts

@@ -0,0 +1,5 @@
+export type SwitchSize = 'sm' | 'xs'
+
+export type SwitchColor = 'primary' | 'warning'
+
+export type SwitchPosition = 'left' | 'right'

package/src/components/UiTabs/UiTabs.vue

@@ -1,6 +1,6 @@
 <!-- UiTabs.vue - Tabs Component -->
 <script setup lang="ts">
-import { computed, ref, watch, nextTick, onMounted, onBeforeUnmount, type Slot, type ComponentPublicInstance } from 'vue'
+import { computed, ref, watch, nextTick, onMounted, onBeforeUnmount, type ComponentPublicInstance } from 'vue'
 import { useResizeObserver, useDebounceFn } from '@vueuse/core'
 
 export interface Tab {
@@ -12,6 +12,8 @@ export interface Tab {
   icon?: string
   /** Whether the tab is disabled */
   disabled?: boolean
+  /** Optional data-testid rendered on the tab button */
+  testId?: string
 }
 
 export interface UiTabsProps {
@@ -32,7 +34,7 @@ const emit = defineEmits<{
 }>()
 
 const slots = defineSlots<{
-  badge?(): Slot
+  badge?(props: { tab: Tab }): unknown
 }>()
 
 const hasBadgeSlot = computed(() => !!slots.badge)
@@ -40,7 +42,7 @@ const hasBadgeSlot = computed(() => !!slots.badge)
 const sizeClasses = computed(() => {
   return {
     container: 'gap-4',
-    tab: props.size === 'sm' ? 'pb-4' : 'pb-6',
+    tab: props.size === 'sm' ? 'pb-4' : 'pb-5',
     text: props.size === 'sm' ? 'text-action-button-sm' : 'text-action-button-md',
   }
 })
@@ -173,6 +175,7 @@ onBeforeUnmount(() => {
         role="tab"
         :aria-selected="isActive(tab.value)"
         :aria-disabled="tab.disabled"
+        :data-testid="tab.testId"
         :tabindex="isActive(tab.value) ? 0 : -1"
         class="relative outline-none flex items-center gap-2 cursor-pointer font-semibold transition-colors duration-150"
         :class="[
@@ -191,7 +194,7 @@ onBeforeUnmount(() => {
         <span
           v-if="tab.icon"
           :class="tab.icon"
-          class="w-4 h-4"
+          class="size-5"
         />
         <span>{{ tab.label }}</span>
         <div

package/src/components/UiTextField/UiTextField.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, useSlots } from 'vue'
 import UiFieldWrapper from '../UiFieldWrapper/UiFieldWrapper.vue'
+import { useIconSize } from '../../composables/useIconSize'
 import type { TextFieldSize } from './types'
 
 interface UiTextFieldProps {
@@ -50,6 +51,8 @@ const slots = useSlots()
 const textFieldRef = ref<HTMLInputElement | null>(null)
 const isFocused = ref(false)
 
+const iconSizeClass = useIconSize(() => props.size)
+
 const hasLeftIcon = computed(() => !!slots.icon)
 const hasRightAction = computed(() => !!slots['right-action'])
 const showClearButton = computed(() => props.clearable && !!props.modelValue && !props.disabled && !props.loading)
@@ -147,11 +150,7 @@ defineExpose({
         <div
           v-if="hasLeftIcon"
           class="ui-text-field-icon text-text-neutral-base"
-          :class="{
-            'size-3': size === 'sm',
-            'size-4': size === 'md' || size === 'lg',
-            'size-5': size === 'xl',
-          }"
+          :class="iconSizeClass"
         >
           <slot name="icon" />
         </div>
@@ -195,14 +194,10 @@ defineExpose({
             v-else-if="showClearButton"
             type="button"
             class="ui-text-field-clear text-text-neutral-base hover:text-text-neutral-secondary"
-            :class="{
-              'size-3': size === 'sm',
-              'size-4': size === 'md' || size === 'lg',
-              'size-5': size === 'xl',
-            }"
+            :class="iconSizeClass"
             @click="handleClear"
           >
-            <div class="i-ls-x size-full" />
+            <div class="i-ph-x size-full" />
           </button>
         </div>
 

package/src/components/UiTimeline/README.md

@@ -45,7 +45,7 @@ A flexible timeline component for displaying chronological events with various v
 | `variant` | `'default' \| 'primary' \| 'success' \| 'warning' \| 'danger'` | `'default'` | Visual variant of the timeline item |
 | `showConnector` | `boolean` | `true` | Whether to show the connecting line |
 | `indicatorSize` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size of the indicator dot |
-| `indicatorIcon` | `string` | `undefined` | Custom icon class for the indicator (e.g., `'i-ls-check-circle'`) |
+| `indicatorIcon` | `string` | `undefined` | Custom icon class for the indicator (e.g., `'i-ph-check-circle'`) |
 
 ## Examples
 
@@ -72,13 +72,13 @@ A flexible timeline component for displaying chronological events with various v
 
 ```vue
 <UiTimeline>
-  <UiTimelineItem variant="primary" indicator-icon="i-ls-user" indicator-size="md">
+  <UiTimelineItem variant="primary" indicator-icon="i-ph-user" indicator-size="md">
     <div>User registered</div>
   </UiTimelineItem>
-  <UiTimelineItem variant="success" indicator-icon="i-ls-check-circle" indicator-size="md">
+  <UiTimelineItem variant="success" indicator-icon="i-ph-check-circle" indicator-size="md">
     <div>Email verified</div>
   </UiTimelineItem>
-  <UiTimelineItem variant="success" indicator-icon="i-ls-play-fill" indicator-size="md">
+  <UiTimelineItem variant="success" indicator-icon="i-ph-play-fill" indicator-size="md">
     <div>Setup complete</div>
   </UiTimelineItem>
 </UiTimeline>
@@ -88,7 +88,7 @@ A flexible timeline component for displaying chronological events with various v
 
 ```vue
 <UiTimeline>
-  <UiTimelineItem variant="primary" indicator-icon="i-ls-user" indicator-size="md">
+  <UiTimelineItem variant="primary" indicator-icon="i-ph-user" indicator-size="md">
     <div>
       <div class="flex items-center gap-2 mb-2">
         <h4 class="text-content-text-md-bold font-semibold">John Doe joined</h4>
@@ -134,7 +134,7 @@ A flexible timeline component for displaying chronological events with various v
 
 ```vue
 <UiTimeline>
-  <UiTimelineItem variant="success" indicator-icon="i-ls-check-circle" indicator-size="md">
+  <UiTimelineItem variant="success" indicator-icon="i-ph-check-circle" indicator-size="md">
     <div>
       <div class="flex items-center justify-between mb-2">
         <h4 class="font-semibold">Payment Successful</h4>

package/src/components/UiTimeline/UiTimelineItem.vue

@@ -76,9 +76,9 @@ const connectorClasses = computed(() => {
 
 const iconSize = computed(() => {
   const sizes = {
-    sm: 'w-1 h-1',
-    md: 'w-2 h-2',
-    lg: 'w-3 h-3',
+    sm: 'size-2',
+    md: 'size-3',
+    lg: 'size-4',
   }
   return sizes[props.indicatorSize]
 })

package/src/composables/useContentMode.ts

@@ -0,0 +1,53 @@
+import { computed, onMounted, ref, type Ref } from 'vue'
+import useThemeAndModes from './useThemeAndModes'
+
+/**
+ * Registers an element as a page "content" surface so the stored content mode
+ * (driven by the ThemePicker) applies its `data-colors-semantic` — the same
+ * behaviour `UiPage` gives its page content, without pulling in the full page
+ * layout (and its `<main>`).
+ *
+ * The content historically forces light mode. That pin is only lifted when the
+ * internal theming tooling is enabled, so the stored content mode can apply;
+ * everyone else stays light regardless of what localStorage may hold.
+ *
+ * The flag is read in onMounted, not at setup: setup also runs during SSR (no
+ * localStorage), and server + client-hydration markup must be identical — the
+ * pin lifts right after mount for the internal tooling instead.
+ *
+ * @param element  Template ref of the content element to watch.
+ * @param selector Unique key for the watch registry — one per logical surface
+ *                 (e.g. `[data-name="ui-page-content"]`).
+ * @returns `contentMode`, to bind to the element's `data-colors-semantic`, and
+ *          `isInternalThemingEnabled` for any mode-dependent styling.
+ */
+export function useContentMode (
+  element: Ref<HTMLElement | undefined>,
+  selector: string,
+) {
+  const { addElementToWatch, currentContentMode } = useThemeAndModes()
+  const isInternalThemingEnabled = ref(false)
+
+  // Always resolve to a concrete mode, never undefined. useThemeAndModes also
+  // sets this attribute imperatively; if the binding resolved to undefined,
+  // Vue would strip the attribute on the re-render that follows the onMounted
+  // flag flip, and the content would silently inherit the *shell* mode from
+  // <body> — reading as "content mode resets to dark on every navigation".
+  const contentMode = computed(() => (
+    isInternalThemingEnabled.value ? currentContentMode.value : 'light'
+  ))
+
+  onMounted(() => {
+    isInternalThemingEnabled.value = localStorage.getItem('ls-internal-theming') === 'true'
+
+    if (!element.value) { return }
+
+    addElementToWatch('content', {
+      selector,
+      element: element.value,
+      ...(isInternalThemingEnabled.value ? {} : { modeOverride: 'light' }),
+    })
+  })
+
+  return { contentMode, isInternalThemingEnabled }
+}

package/src/composables/useIconSize.ts

@@ -0,0 +1,28 @@
+import { computed, type MaybeRefOrGetter, toValue } from 'vue'
+
+// Single source of truth for the icon diameter a control renders at, keyed by
+// the control's size name.
+//
+// Every control that puts an icon inside itself consumes this — buttons, button
+// groups, action bar items, dropdown triggers, text fields, stepper indicators,
+// loaders — so a design change to the ladder is one edit here instead of one
+// per component. Components covering only part of the ladder (an action bar
+// stops at md, a text field starts at sm) index the rungs they expose.
+//
+// NOTE: every class must be a complete literal string — Tailwind's static
+// extractor can't see interpolated class names (`size-${n}`).
+
+export const ICON_SIZES = {
+  xs: 'size-3',
+  sm: 'size-4',
+  md: 'size-5',
+  lg: 'size-6',
+  xl: 'size-7',
+} as const
+
+export type IconSizeName = keyof typeof ICON_SIZES
+
+/** Reactive icon size class for a control's `size`. */
+export function useIconSize(size: MaybeRefOrGetter<IconSizeName>) {
+  return computed(() => ICON_SIZES[toValue(size)])
+}

package/src/constants/sizes.ts

@@ -1,2 +1,2 @@
-export const SIZES = ['sm', 'md', 'lg'] as const
+export const SIZES = ['xs', 'sm', 'md', 'lg'] as const
 export type Size = typeof SIZES[number]

package/src/global.d.ts

@@ -30,6 +30,9 @@ import type UiFieldWrapper from './components/UiFieldWrapper/UiFieldWrapper.vue'
 import type UiFormField from './components/UiForm/UiFormField.vue'
 import type UiHorizontalSeparator from './components/UiHorizontalSeparator/UiHorizontalSeparator.vue'
 import type UiInputCheckbox from './components/UiInputCheckbox/UiInputCheckbox.vue'
+import type UiInputEmoji from './components/UiInputEmoji/UiInputEmoji.vue'
+import type UiInputRadio from './components/UiInputRadio/UiInputRadio.vue'
+import type UiInputRadioGroup from './components/UiInputRadio/UiInputRadioGroup.vue'
 import type UiInputSelect from './components/UiInputSelect/UiInputSelect.vue'
 import type UiInputTextarea from './components/UiInputTextarea/UiInputTextarea.vue'
 import type UiLabel from './components/UiLabel/UiLabel.vue'
@@ -67,6 +70,7 @@ import type UiStepperIndicator from './components/UiStepper/UiStepperIndicator.v
 import type UiStepperItem from './components/UiStepper/UiStepperItem.vue'
 import type UiStepperSeparator from './components/UiStepper/UiStepperSeparator.vue'
 import type UiStepperTitle from './components/UiStepper/UiStepperTitle.vue'
+import type UiSwitch from './components/UiSwitch/UiSwitch.vue'
 import type UiTable from './components/UiTable/UiTable.vue'
 import type UiTableBody from './components/UiTable/UiTableBody.vue'
 import type UiTableCell from './components/UiTable/UiTableCell.vue'
@@ -123,6 +127,9 @@ declare module 'vue' {
     UiFormField: typeof UiFormField
     UiHorizontalSeparator: typeof UiHorizontalSeparator
     UiInputCheckbox: typeof UiInputCheckbox
+    UiInputEmoji: typeof UiInputEmoji
+    UiInputRadio: typeof UiInputRadio
+    UiInputRadioGroup: typeof UiInputRadioGroup
     UiInputSelect: typeof UiInputSelect
     UiInputTextarea: typeof UiInputTextarea
     UiLabel: typeof UiLabel
@@ -160,6 +167,7 @@ declare module 'vue' {
     UiStepperItem: typeof UiStepperItem
     UiStepperSeparator: typeof UiStepperSeparator
     UiStepperTitle: typeof UiStepperTitle
+    UiSwitch: typeof UiSwitch
     UiTable: typeof UiTable
     UiTableBody: typeof UiTableBody
     UiTableCell: typeof UiTableCell