@livestorm/ui-vue 2.0.5 → 4.0.0

package/src/components/UiSideMenu/UiSideMenuItemContent.vue

@@ -2,6 +2,7 @@
 import type { SideMenuItemProps } from './types'
 import { computed, useSlots } from 'vue'
 import { useForwardExpose } from 'reka-ui'
+import UiBadge from '../UiBadge/UiBadge.vue'
 
 // Visual body of a side menu item (icon, label, badge, interactive overlay).
 // Extracted from UiSideMenuItem so the latter can optionally wrap this in a
@@ -41,12 +42,17 @@ const props = withDefaults(defineProps<SideMenuItemProps & {
   alwaysShowLabel: false,
 })
 
-// Normalise the badge into either a display string (count pill) or null (dot)
-// when shown. `showBadge` gates rendering so 0/false stay hidden.
 const showBadge = computed(() => props.badge === true || (typeof props.badge === 'number' && props.badge > 0))
-const badgeCount = computed(() => {
-  if (typeof props.badge !== 'number') return null
-  return props.badge > 99 ? '99+' : String(props.badge)
+const badgeCount = computed(() => typeof props.badge === 'number' ? props.badge : undefined)
+
+// An icon sits inside the item's 10px padding, whereas a 40px avatar fills the
+// box on its own: the avatar variant needs offsets 10px smaller to land the
+// badge on the same corner of the item.
+const badgePositionClass = computed(() => {
+  if (badgeCount.value !== undefined) {
+    return hasAvatarSlot.value ? '-top-1 -right-1' : '-top-3.5 -right-3.5'
+  }
+  return hasAvatarSlot.value ? 'top-0 right-0' : '-top-2.5 -right-2.5'
 })
 
 const textAlignClass = computed(() => {
@@ -88,7 +94,7 @@ const textAlignClass = computed(() => {
     <button
       v-else
       type="button"
-      class="block w-full h-full absolute inset-0 z-20 transition-all duration-150 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-actions-primary-idle rounded-xl"
+      class="block w-full h-full absolute inset-0 z-20 transition-all duration-150 cursor-pointer focus:outline-none focus-visible:focus-ring rounded-xl"
       :class="{ 'pointer-events-none': insideInteractive }"
       :tabindex="insideInteractive ? -1 : undefined"
       :aria-hidden="insideInteractive ? 'true' : undefined"
@@ -103,7 +109,7 @@ const textAlignClass = computed(() => {
         isActive ? 'bg-actions-neutral-active-overlay text-actions-neutral-idle' : 'text-actions-neutral-idle-alpha-strong',
         // Avatar box is 40px; on mobile `p-1` makes its total height (48px)
         // match icon items (`p-3` + 24px icon). Both are 40px on desktop.
-        hasAvatarSlot ? 'p-1 md:p-0' : 'p-3',
+        hasAvatarSlot ? 'p-1 md:p-0' : 'p-2.5',
       ]"
     >
       <!-- Icon/avatar wrapper: anchors the notification badge to the icon's
@@ -119,23 +125,21 @@ const textAlignClass = computed(() => {
         <div
           v-if="icon"
           :class="[
-            'w-6 h-6 md:w-4 md:h-4',
+            'w-6 h-6 md:w-5 md:h-5',
             icon
           ]"
           aria-hidden="true"
         />
-        <!-- Notification badge, pushed out toward the button's top-right
-             corner (past the icon's p-3 padding). -->
-        <div
+        <!-- Notification badge, pushed out toward the item's top-right corner. -->
+        <UiBadge
           v-if="showBadge"
-          class="absolute z-30 pointer-events-none flex items-center justify-center bg-surface-danger-bg-alpha text-text-neutral-invert-base rounded-2xl"
-          :class="badgeCount
-            ? '-top-3.5 -right-3.5 min-w-4 px-1 py-0.5 text-content-badges-bold-md'
-            : '-top-2.5 -right-2.5 w-2 h-2'"
+          :count="badgeCount"
+          color="danger"
+          variant="strong"
+          class="absolute z-30 pointer-events-none"
+          :class="badgePositionClass"
           aria-hidden="true"
-        >
-          <span v-if="badgeCount">{{ badgeCount }}</span>
-        </div>
+        />
       </div>
       <div
         class="pl-4 flex md:hidden text-content-text-md-regular font-bold truncate w-full items-center md:justify-center md:text-center"

package/src/components/UiStepper/UiStepper.vue

@@ -18,23 +18,10 @@ provide('stepperOrientation', toRef(props, 'orientation'))
   <StepperRoot
     v-bind="{ ...forwarded, ...$attrs }"
     class="ui-stepper"
-    :class="{
-      'ui-stepper--horizontal': isHorizontal,
-      'ui-stepper--vertical': !isHorizontal,
-    }"
+    :class="isHorizontal
+      ? 'ui-stepper--horizontal flex items-start gap-8'
+      : 'ui-stepper--vertical [&>*:not(:last-child)]:mb-2'"
   >
     <slot />
   </StepperRoot>
 </template>
-
-<style>
-@reference '@livestorm/ui-tokens/output/supernova/index.css';
-
-.ui-stepper--horizontal {
-  @apply flex items-start gap-8;
-}
-
-.ui-stepper--vertical > *:not(:last-child) {
-  @apply mb-2;
-}
-</style>

package/src/components/UiStepper/UiStepperDescription.vue

@@ -8,20 +8,8 @@ defineProps<StepperDescriptionProps>()
 <template>
   <StepperDescription
     v-bind="$attrs"
-    :class="[
-      'ui-stepper-description',
-      'transition-all duration-200',
-    ]"
+    class="ui-stepper-description block max-w-60 truncate text-content-text-md-regular text-text-neutral-tertiary transition-all duration-200"
   >
     <slot />
   </StepperDescription>
 </template>
-
-<style scoped>
-@reference '@livestorm/ui-tokens/output/supernova/index.css';
-
-.ui-stepper-description {
-  @apply  max-w-60 truncate;
-  @apply text-content-text-md-regular text-text-neutral-tertiary block;
-}
-</style>

package/src/components/UiStepper/UiStepperIndicator.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { StepperIndicatorProps } from 'reka-ui'
 import { StepperIndicator } from 'reka-ui'
+import { useIconSize } from '../../composables/useIconSize'
 
 type Size = 'sm' | 'md' | 'lg'
 
@@ -13,81 +14,40 @@ interface UiStepperIndicatorProps extends StepperIndicatorProps {
 const { size = 'md', showCheckmark = true, icon } = defineProps<UiStepperIndicatorProps>()
 
 const sizeClasses = {
-  sm: 'size-6 text-content-text-md-regular',
-  md: 'size-8 text-content-text-md-regular',
-  lg: 'size-10 text-content-text-lg-regular',
+  sm: 'size-8 text-content-text-md-regular',
+  md: 'size-10 text-content-text-md-regular',
+  lg: 'size-12 text-content-text-lg-regular',
 }
 
-const iconSizeClasses = {
-  sm: 'size-3',
-  md: 'size-4',
-  lg: 'size-5',
-}
+const iconSizeClass = useIconSize(() => size)
 </script>
 
 <template>
   <StepperIndicator
     v-bind="$attrs"
-    class="stepper-indicator"
+    class="stepper-indicator flex items-center justify-center shrink-0 rounded-full font-semibold transition-all duration-200 bg-surface-neutral-alpha-200 text-text-neutral-base group-data-[state=active]/step:bg-surface-primary-bg-alpha group-data-[state=active]/step:text-text-neutral-invert-base"
     :class="sizeClasses[size]"
   >
     <span
       v-if="icon"
-      class="stepper-custom-icon"
-      :class="[iconSizeClasses[size], icon]"
+      class="stepper-custom-icon block"
+      :class="[iconSizeClass, icon, { 'group-data-[state=completed]/step:hidden': showCheckmark }]"
+      data-testid="ui-stepper-indicator-icon"
     />
 
     <span
       v-if="showCheckmark"
-      class="stepper-checkmark i-ls-check"
-      :class="iconSizeClasses[size]"
+      class="stepper-checkmark i-ph-check hidden group-data-[state=completed]/step:block"
+      :class="iconSizeClass"
+      data-testid="ui-stepper-indicator-checkmark"
     />
 
-    <span class="stepper-number">
+    <span
+      class="stepper-number"
+      :class="{ hidden: icon, 'group-data-[state=completed]/step:hidden': showCheckmark }"
+      data-testid="ui-stepper-indicator-number"
+    >
       <slot />
     </span>
   </StepperIndicator>
 </template>
-
-<style>
-@reference '@livestorm/ui-tokens/output/supernova/index.css';
-
-.stepper-indicator {
-  @apply flex items-center justify-center shrink-0;
-  @apply rounded-full;
-  @apply transition-all duration-200 font-semibold;
-  @apply bg-surface-neutral-alpha-200 text-text-neutral-base;
-}
-
-[data-state="active"] .stepper-indicator {
-  @apply bg-surface-primary-bg-alpha text-text-neutral-invert-base;
-}
-
-.stepper-custom-icon {
-  @apply block;
-}
-
-[data-state="completed"] .stepper-custom-icon {
-  @apply hidden;
-}
-
-.stepper-custom-icon ~ .stepper-number {
-  @apply hidden;
-}
-
-[data-state="completed"] .stepper-custom-icon ~ .stepper-number {
-  @apply block;
-}
-
-.stepper-checkmark {
-  @apply hidden;
-}
-
-[data-state="completed"] .stepper-checkmark {
-  @apply block;
-}
-
-[data-state="completed"] .stepper-number {
-  @apply hidden;
-}
-</style>

package/src/components/UiStepper/UiStepperItem.vue

@@ -16,15 +16,8 @@ withDefaults(defineProps<UiStepperItemProps>(), {
     v-bind="$attrs"
     :step="step"
     :disabled="disabled"
-    class="ui-stepper-item"
+    class="ui-stepper-item group/step relative"
   >
     <slot />
   </StepperItem>
 </template>
-
-<style>
-@reference '@livestorm/ui-tokens/output/supernova/index.css';
-.ui-stepper-item {
-  @apply relative;
-}
-</style>

package/src/components/UiStepper/UiStepperSeparator.vue

@@ -28,22 +28,11 @@ const orientation = computed(() => props.orientation || unref(injectedOrientatio
   >
     <StepperSeparator
       v-bind="$attrs"
-      :class="[
-        'ui-stepper-separator',
-        'transition-colors duration-200',
-        {
-          'h-px w-full min-w-8': orientation === 'horizontal',
-          'w-px min-h-8': orientation === 'vertical',
-        }
-      ]"
+      class="ui-stepper-separator bg-surface-neutral-alpha-400 transition-colors duration-200"
+      :class="{
+        'h-px w-full min-w-8': orientation === 'horizontal',
+        'w-px min-h-8': orientation === 'vertical',
+      }"
     />
   </div>
 </template>
-
-<style scoped>
-@reference '@livestorm/ui-tokens/output/supernova/index.css';
-
-.ui-stepper-separator {
-  @apply bg-surface-neutral-alpha-400;
-}
-</style>

package/src/components/UiStepper/UiStepperTitle.vue

@@ -8,17 +8,8 @@ defineProps<StepperTitleProps>()
 <template>
   <StepperTitle
     v-bind="$attrs"
-    :class="[
-      'ui-stepper-title',
-    ]"
+    class="ui-stepper-title text-content-text-lg-bold text-text-neutral-secondary"
   >
     <slot />
   </StepperTitle>
 </template>
-
-<style scoped>
-@reference '@livestorm/ui-tokens/output/supernova/index.css';
-.ui-stepper-title {
-  @apply text-content-text-lg-bold text-content-text-lg-bold text-text-neutral-secondary;
-}
-</style>

package/src/components/UiSwitch/UiSwitch.vue

@@ -0,0 +1,375 @@
+<script setup lang="ts">
+import { computed, inject, 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'
+import { CHOICE_ROW_KEY } from '../UiChoice/types'
+
+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
+  /**
+   * Accessible name for the switch, for switches rendered without a label
+   */
+  ariaLabel?: 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,
+  ariaLabel: 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)
+const inChoiceRow = inject(CHOICE_ROW_KEY, false)
+
+// 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)
+
+// Inside UiChoice a disabled switch greys out instead of fading with the row
+const greyedOut = computed(() => inChoiceRow && props.disabled && !props.error)
+
+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 (greyedOut.value) {
+    baseClasses.push('border-transparent', isChecked.value ? 'bg-surface-neutral-alpha-400' : 'bg-surface-neutral-alpha-200')
+  } else if (isChecked.value) {
+    const checkedClasses = {
+      primary: 'bg-control-switch-on border-transparent',
+      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-control-off-border',
+      warning: 'border-borders-warning-strong',
+      danger: 'border-control-error-border',
+    }
+    baseClasses.push('bg-control-off', 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')
+    }
+  }
+
+  // The row draws the focus ring, or the choicebox around it
+  baseClasses.push('focus-indicator-none')
+
+  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-control-off-knob')
+
+  return baseClasses
+})
+
+const innerWrapperClasses = computed(() => {
+  const classes = ['group relative flex items-center rounded-field-md', inChoiceRow && props.switchPosition === 'right' ? 'gap-6' : 'gap-2']
+
+  if (props.switchPosition === 'right') {
+    classes.push('flex-row-reverse')
+  }
+
+  if (props.disabled) {
+    classes.push(inChoiceRow ? 'cursor-not-allowed' : 'opacity-50 cursor-not-allowed')
+  } else {
+    classes.push('cursor-pointer')
+  }
+
+  if (inChoiceRow) {
+    return classes
+  }
+
+  if (!props.showBg) {
+    classes.push('isolate before:absolute before:-inset-x-3 before:-inset-y-1.5 before:-z-10 before:rounded-field-md before:pointer-events-none has-[[role=switch]:focus-visible]:before:focus-ring')
+    return classes
+  }
+
+  classes.push('p-2 shadow-[0px_1px_2px_0px_var(--color-shadow-neutral-100)] has-[[role=switch]:focus-visible]:focus-ring')
+  classes.push(props.error ? 'bg-actions-danger-idle-alpha-light' : 'bg-actions-neutral-idle-alpha-light')
+
+  return classes
+})
+
+const labelClasses = computed(() => ({
+  'text-content-text-md-medium': inChoiceRow,
+  'text-content-text-md-regular': !inChoiceRow,
+  'text-text-danger-base': props.error,
+  'text-text-neutral-base': !props.error && !greyedOut.value,
+  'text-text-neutral-tertiary': greyedOut.value,
+  '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-secondary': !props.error && !greyedOut.value,
+  'text-text-neutral-tertiary': greyedOut.value,
+  '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-label="ariaLabel"
+        :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, 'gap-1': inChoiceRow }"
+      >
+        <div
+          class="flex items-center gap-2"
+          :class="{ 'flex-row-reverse': textAlignsToSwitch }"
+        >
+          <Label
+            :for="inputId"
+            :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"
+              data-testid="ui-switch-label-info"
+              @click.stop
+            >
+              <span class="i-ph-info-fill size-4" />
+            </div>
+          </UiTooltip>
+        </div>
+
+        <span
+          v-if="description"
+          :id="descriptionId"
+          class="text-content-text-md-regular"
+          :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-[inherit]"
+        :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/types.ts

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