@livestorm/ui-vue 2.0.4 → 3.0.0

package/src/components/UiInputRadio/UiInputRadio.vue

@@ -0,0 +1,374 @@
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue'
+import { Label, RadioGroupItem, RadioGroupIndicator, useId } from 'reka-ui'
+import type { RadioValue, RadioVariant } from './types'
+import { RADIO_GROUP_KEY } from './types'
+import UiTooltip from '../UiTooltip/UiTooltip.vue'
+
+interface UiInputRadioProps {
+  /**
+   * The value this option represents. `null` is a valid value;
+   * object values must be reference-stable.
+   */
+  value: RadioValue
+  /**
+   * The label text
+   */
+  label?: string
+  /**
+   * Description text below the label
+   */
+  description?: string
+  /**
+   * Info tooltip for the label
+   */
+  labelInfo?: string
+  /**
+   * Whether this option is disabled
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * Layout orientation of the radio relative to the label
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical'
+  /**
+   * Visual variant: 'card' renders a selectable tile
+   * @default 'default'
+   */
+  variant?: RadioVariant
+  /**
+   * Radio id attribute
+   */
+  id?: string
+}
+
+const props = withDefaults(defineProps<UiInputRadioProps>(), {
+  label: undefined,
+  description: undefined,
+  labelInfo: undefined,
+  id: undefined,
+  disabled: false,
+  orientation: 'horizontal',
+  variant: 'default',
+})
+
+const emit = defineEmits<{
+  select: [event: Event]
+}>()
+
+// Group context: UiInputRadio is only usable inside UiInputRadioGroup
+// (reka's RadioGroupItem enforces this too)
+const group = inject(RADIO_GROUP_KEY, undefined)
+
+const generatedId = useId()
+const inputId = computed(() => props.id ?? generatedId)
+
+// Styling state. Comparison is strict equality: matches reka's isEqual for
+// primitives and null; object values must be reference-stable.
+const isChecked = computed(() => {
+  if (!group || group.modelValue.value === undefined) {
+    return false
+  }
+  return group.modelValue.value === props.value
+})
+
+const isDisabled = computed(() => props.disabled || (group?.disabled.value ?? false))
+const error = computed(() => group?.error.value ?? false)
+const size = computed(() => group?.size.value ?? 'md')
+
+const descriptionId = computed(() => props.description ? `${inputId.value}-description` : undefined)
+
+const ariaDescribedby = computed(() => {
+  const ids = [descriptionId.value, group?.messageId.value].filter(Boolean)
+  return ids.length ? ids.join(' ') : undefined
+})
+
+const radioClasses = computed(() => {
+  const baseClasses = [
+    'relative shrink-0 grid place-content-center',
+    'rounded-full',
+    'focus:outline-hidden',
+    'cursor-pointer disabled:cursor-not-allowed',
+  ]
+
+  // Size classes
+  const sizeClasses = {
+    sm: 'w-3.5 h-3.5',
+    md: 'w-4 h-4',
+    lg: 'w-5 h-5',
+  }
+
+  baseClasses.push(sizeClasses[size.value])
+
+  // Selected is a full fill (the light inner circle turns it into a thick
+  // ring); unselected keeps a border that thickens on hover
+  if (isChecked.value) {
+    baseClasses.push('border-none')
+    baseClasses.push(error.value ? 'bg-actions-danger-idle' : 'bg-actions-primary-idle')
+  } else {
+    baseClasses.push('bg-surface-neutral-bg-main border')
+    baseClasses.push(error.value ? 'border-borders-danger-strong' : 'border-borders-neutral-strong')
+    if (!isDisabled.value) {
+      baseClasses.push('group-hover:border-2')
+    }
+  }
+
+  // Focus ring
+  if (error.value) {
+    baseClasses.push('focus-visible:ring focus-visible:ring-borders-danger-strong')
+  } else if (isChecked.value) {
+    baseClasses.push('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
+})
+
+// Light inner circle of the selected state; grows on hover (ring thins) and
+// stays grown when disabled or errored — an errored selected radio is always
+// the thin ring. Fraction sizes scale with the sm/md/lg glyph.
+const indicatorClasses = computed(() => {
+  // Transform centering (not inset/margins): layout boxes get snapped to
+  // device pixels, which renders fractional gaps visibly off-center
+  const baseClasses = [
+    'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full z-1',
+    'bg-surface-neutral-bg-main transition-all',
+  ]
+
+  if (isDisabled.value || error.value) {
+    baseClasses.push('size-3/4')
+  } else {
+    baseClasses.push('size-1/2 group-hover:size-3/4')
+  }
+
+  return baseClasses
+})
+
+// Preview dot shown while hovering an unselected, enabled radio
+const previewDotClasses = computed(() => {
+  const baseClasses = [
+    'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-1/2 rounded-full z-1',
+    'opacity-0 group-hover:opacity-50 transition-opacity pointer-events-none',
+  ]
+
+  baseClasses.push(error.value ? 'bg-actions-danger-idle' : 'bg-actions-neutral-idle')
+
+  return baseClasses
+})
+
+const hoverOverlayClasses = computed(() => ({
+  'bg-actions-neutral-hover-overlay': !isChecked.value && !error.value,
+  'bg-actions-danger-hover-overlay': error.value,
+  'bg-actions-primary-hover-overlay': isChecked.value && !error.value,
+}))
+
+const labelClasses = computed(() => ({
+  'text-text-neutral-base': !error.value && !isChecked.value,
+  'text-text-danger-base': error.value,
+  'text-text-primary-base': isChecked.value && !error.value,
+  'cursor-not-allowed': isDisabled.value,
+  'cursor-pointer': !isDisabled.value,
+}))
+
+const descriptionClasses = computed(() => ({
+  'text-center': props.orientation === 'vertical',
+  'text-text-neutral-tertiary': !error.value && !isChecked.value,
+  'text-text-danger-tertiary': error.value,
+  'text-text-primary-tertiary': isChecked.value && !error.value,
+  'cursor-not-allowed': isDisabled.value,
+  'cursor-pointer': !isDisabled.value,
+}))
+
+const innerWrapperClasses = computed(() => {
+  // h-full + items-center let a consumer-sized card (e.g. h-[76px])
+  // center the glyph and text block vertically
+  const classes: string[] = ['group relative rounded-md flex h-full']
+
+  if (props.orientation === 'vertical') {
+    classes.push('flex-col items-center')
+  } else {
+    classes.push('items-center')
+  }
+
+  if (isDisabled.value) {
+    classes.push('opacity-50 cursor-not-allowed')
+  } else {
+    classes.push('cursor-pointer')
+  }
+
+  if (props.variant === 'card') {
+    classes.push('p-2 ring-inset')
+    if (isChecked.value && !error.value) {
+      // checked
+      classes.push('bg-actions-primary-idle-alpha-light ring-2 ring-actions-primary-idle')
+    } else if (!isChecked.value && !error.value) {
+      // idle
+      classes.push('bg-actions-neutral-idle-alpha-light ring-transparent')
+    } else if (isChecked.value && error.value) {
+      // error + checked
+      classes.push('bg-actions-danger-idle-alpha-light ring-2 ring-actions-danger-idle')
+    } else {
+      // error + unchecked
+      classes.push('bg-actions-danger-idle-alpha-light')
+    }
+  }
+
+  return classes
+})
+
+const itemRef = ref<InstanceType<typeof RadioGroupItem> | null>(null)
+
+function radioElement (): HTMLElement | undefined {
+  return (itemRef.value?.$el as HTMLElement | undefined) ?? undefined
+}
+
+// Make the whole wrapper (description, padding, card surface) select the radio.
+// 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 (isDisabled.value) {
+    return
+  }
+
+  const target = event.target as HTMLElement
+  const radioEl = radioElement()
+
+  if (!radioEl || target === radioEl || radioEl.contains(target)) {
+    return
+  }
+  if (target.closest('label')) {
+    return
+  }
+
+  radioEl.click()
+}
+
+defineExpose({
+  focus: () => radioElement()?.focus(),
+  blur: () => radioElement()?.blur(),
+})
+</script>
+
+<template>
+  <!-- Cards are edge-to-edge interactive surfaces, so they fill their slot;
+       the default variant shrink-wraps to keep the click zone on content -->
+  <div
+    class="ui-input-radio-wrapper"
+    :class="variant === 'card' ? 'w-full' : 'w-fit'"
+  >
+    <div
+      :class="innerWrapperClasses"
+      @click="onWrapperClick"
+    >
+      <!-- Radio - horizontal only, centered against the whole text block -->
+      <span
+        v-if="orientation === 'horizontal'"
+        class="flex w-5 items-center justify-center shrink-0 mr-2"
+      >
+        <RadioGroupItem
+          :id="inputId"
+          ref="itemRef"
+          :value="value"
+          :disabled="disabled"
+          :class="radioClasses"
+          :aria-invalid="error || undefined"
+          :aria-describedby="ariaDescribedby"
+          @select="emit('select', $event)"
+        >
+          <RadioGroupIndicator :class="indicatorClasses" />
+          <span
+            v-if="!isChecked && !isDisabled"
+            :class="previewDotClasses"
+          />
+          <div
+            v-if="!isDisabled"
+            class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
+            :class="hoverOverlayClasses"
+          />
+        </RadioGroupItem>
+      </span>
+
+      <div
+        class="flex flex-col min-w-0"
+        :class="orientation === 'vertical' ? 'items-center' : 'flex-1'"
+      >
+        <div class="flex items-center">
+          <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"
+          >
+            <div
+              class="flex items-center justify-center size-4 cursor-help shrink-0 ml-1"
+              :class="{
+                'text-text-neutral-secondary': !error && !isChecked,
+                'text-text-danger-secondary': error,
+                'text-text-primary-secondary': isChecked && !error,
+              }"
+              @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>
+
+      <!-- Radio - vertical only -->
+      <span
+        v-if="orientation === 'vertical'"
+        class="flex justify-center mt-2"
+      >
+        <RadioGroupItem
+          :id="inputId"
+          ref="itemRef"
+          :value="value"
+          :disabled="disabled"
+          :class="radioClasses"
+          :aria-invalid="error || undefined"
+          :aria-describedby="ariaDescribedby"
+          @select="emit('select', $event)"
+        >
+          <RadioGroupIndicator :class="indicatorClasses" />
+          <span
+            v-if="!isChecked && !isDisabled"
+            :class="previewDotClasses"
+          />
+          <div
+            v-if="!isDisabled"
+            class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
+            :class="hoverOverlayClasses"
+          />
+        </RadioGroupItem>
+      </span>
+
+      <!-- Card hover overlay -->
+      <div
+        v-if="variant === 'card' && !isDisabled"
+        class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none rounded-md"
+        :class="hoverOverlayClasses"
+      />
+    </div>
+  </div>
+</template>

package/src/components/UiInputRadio/UiInputRadioGroup.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { computed, provide, ref, toRef, watch } from 'vue'
+import { RadioGroupRoot, useId } from 'reka-ui'
+import type { RadioSize, RadioValue } from './types'
+import { RADIO_GROUP_KEY } from './types'
+
+interface UiInputRadioGroupProps {
+  /**
+   * The selected value. `undefined` means no selection;
+   * `null` is a valid option value.
+   */
+  modelValue?: RadioValue
+  /**
+   * Name attribute, submitted with the form via a hidden input
+   */
+  name?: string
+  /**
+   * Whether the whole group is disabled
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * Whether arrow-key navigation loops from last item to first
+   * @default true
+   */
+  loop?: boolean
+  /**
+   * Whether a selection is required
+   * @default false
+   */
+  required?: boolean
+  /**
+   * Whether the group is in an error state
+   * @default false
+   */
+  error?: boolean
+  /**
+   * Error message displayed below the group
+   */
+  errorMessage?: string
+  /**
+   * Size of the radio items
+   * @default 'md'
+   */
+  size?: RadioSize
+  /**
+   * Layout direction of the items. Also sets the group's `aria-orientation`
+   * and the arrow-key navigation axis to match.
+   * @default 'vertical'
+   */
+  orientation?: 'vertical' | 'horizontal'
+  /**
+   * Whether the group stretches to fill its container instead of
+   * shrink-wrapping its items
+   * @default false
+   */
+  fullWidth?: boolean
+}
+
+const props = withDefaults(defineProps<UiInputRadioGroupProps>(), {
+  modelValue: undefined,
+  name: undefined,
+  errorMessage: undefined,
+  disabled: false,
+  loop: true,
+  required: false,
+  error: false,
+  size: 'md',
+  orientation: 'vertical',
+  fullWidth: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: RadioValue]
+}>()
+
+// Track the current value locally so items can style themselves even when
+// the consumer does not bind v-model (uncontrolled usage)
+const currentValue = ref<RadioValue | undefined>(props.modelValue)
+
+watch(() => props.modelValue, (value) => {
+  currentValue.value = value
+})
+
+function onUpdateModelValue (value: RadioValue) {
+  currentValue.value = value
+  emit('update:modelValue', value)
+}
+
+const groupId = useId()
+
+const displayMessage = computed(() => {
+  if (props.error && props.errorMessage) {
+    return props.errorMessage
+  }
+  return undefined
+})
+
+const messageId = computed(() => displayMessage.value ? `${groupId}-message` : undefined)
+
+// items-stretch keeps card tiles equal-height when they share a row
+const rootClasses = computed(() =>
+  props.orientation === 'horizontal'
+    ? 'flex flex-row flex-wrap items-stretch gap-2'
+    : 'flex flex-col gap-2',
+)
+
+const displayMessageClasses = computed(() => {
+  const baseClasses = ['text-content-legends-bold-md mt-1']
+
+  if (props.error) {
+    baseClasses.push('text-text-danger-secondary')
+  } else {
+    baseClasses.push('text-text-neutral-secondary')
+  }
+
+  return baseClasses
+})
+
+provide(RADIO_GROUP_KEY, {
+  modelValue: currentValue,
+  error: toRef(props, 'error'),
+  size: toRef(props, 'size'),
+  disabled: toRef(props, 'disabled'),
+  messageId,
+})
+</script>
+
+<template>
+  <div
+    class="ui-input-radio-group-wrapper"
+    :class="fullWidth ? 'w-full' : 'w-fit'"
+  >
+    <RadioGroupRoot
+      :model-value="currentValue"
+      :name="name"
+      :disabled="disabled"
+      :loop="loop"
+      :required="required"
+      :orientation="orientation"
+      :class="rootClasses"
+      @update:model-value="onUpdateModelValue"
+    >
+      <slot />
+    </RadioGroupRoot>
+
+    <!-- Error Message -->
+    <p
+      v-if="displayMessage"
+      :id="messageId"
+      :class="displayMessageClasses"
+    >
+      {{ displayMessage }}
+    </p>
+  </div>
+</template>

package/src/components/UiInputRadio/index.ts

@@ -0,0 +1,3 @@
+export { default as UiInputRadio } from './UiInputRadio.vue'
+export { default as UiInputRadioGroup } from './UiInputRadioGroup.vue'
+export type { RadioSize, RadioValue, RadioVariant } from './types'

package/src/components/UiInputRadio/types.ts

@@ -0,0 +1,25 @@
+import type { InjectionKey, Ref } from 'vue'
+import type { AcceptableValue } from 'reka-ui'
+
+export type RadioSize = 'sm' | 'md' | 'lg'
+
+export type RadioVariant = 'default' | 'card'
+
+/**
+ * Valid radio option values. `null` is a supported option value;
+ * `undefined` means "no selection". Object values must be reference-stable.
+ */
+export type RadioValue = AcceptableValue
+
+export interface RadioGroupContext {
+  /** Current group value (kept in sync in both controlled and uncontrolled mode) */
+  modelValue: Readonly<Ref<RadioValue | undefined>>
+  error: Readonly<Ref<boolean>>
+  size: Readonly<Ref<RadioSize>>
+  disabled: Readonly<Ref<boolean>>
+  /** id of the group error message, for aria-describedby on items */
+  messageId: Readonly<Ref<string | undefined>>
+}
+
+export const RADIO_GROUP_KEY: InjectionKey<RadioGroupContext> =
+  Symbol('ui-input-radio-group')

package/src/components/UiLoader/UiLoader.vue

@@ -3,7 +3,7 @@
     <svg
       :class="[
         sizeClass,
-        'text-action-neutral-idle animate-spin',
+        'text-actions-neutral-idle animate-spin',
       ]"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
@@ -26,20 +26,18 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { SIZES, type Size } from '../../constants'
+import { useIconSize } from '../../composables/useIconSize'
 
 const props = defineProps({
   size: {
-    type: String,
+    type: String as () => Size,
     default: 'md',
-    validator: (value: string) => ['sm', 'md', 'lg'].includes(value),
+    validator: (value: Size) => SIZES.includes(value),
   },
 })
 
-const sizeClass = computed(() => {
-  if (props.size === 'sm') return 'size-4'
-  if (props.size === 'md') return 'size-6'
-  if (props.size === 'lg') return 'size-8'
-  return 'size-6'
-})
+// Same ladder as the icons the spinner stands in for, so a button swapping its
+// icon for the loader doesn't resize the content and shift the label.
+const sizeClass = useIconSize(() => props.size)
 </script>

package/src/components/UiLogo/UiLogo.vue

@@ -5,6 +5,7 @@ import PulseVariant from "./variants/PulseVariant.vue";
 
 // CSS/svg remake of the lottie tornado logo (UiAnimatedLogo), with themable
 // colors. Animations live in variants/.
+// The viewBox hugs the badge, so height/width size the visible logo.
 // A variant renders the .badge/.mark paths, keeps its keyframes in its own
 // scoped style, and tags animated elements with .motion — then goes in the
 // VARIANTS map.
@@ -17,10 +18,15 @@ interface Props {
     width: number;
     /** Follow the brand palette (--color-brand-800) instead of the Livestorm navy. */
     themed?: boolean;
-    /** Dark badge + white mark, for light backgrounds. */
-    inverted?: boolean;
+    /**
+     * Dark badge + white mark, for light backgrounds. `"auto"` inverts
+     * whenever the logo sits inside a light `data-colors-semantic` scope.
+     */
+    inverted?: boolean | "auto";
     /** When false, renders the static logo (the resting pose). */
     animated?: boolean;
+    /** Accessible name announced for the logo. */
+    label?: string;
 }
 
 // vue casts absent boolean props to false, hence the explicit defaults
@@ -29,6 +35,7 @@ const props = withDefaults(defineProps<Props>(), {
     themed: false,
     inverted: false,
     animated: true,
+    label: "Livestorm",
 });
 
 const VARIANTS = {
@@ -39,10 +46,17 @@ const VARIANTS = {
 const variantComponent = computed(() => VARIANTS[props.variant]);
 
 const markColor = computed(() =>
-    props.themed ? "var(--color-brand-800, #112660)" : "#112660",
+    props.themed ? "var(--color-brand-800, #12262B)" : "#12262B",
 );
 
 const colorVars = computed(() => {
+    if (props.inverted === "auto") {
+        // colors live in the scope-aware rules below
+        return props.themed
+            ? { "--ui-logo-auto-mark": "var(--color-brand-800, #12262B)" }
+            : {};
+    }
+
     if (props.inverted) {
         return {
             "--ui-logo-badge": markColor.value,
@@ -63,15 +77,18 @@ const colorVars = computed(() => {
   <div class="ui-logo-loader">
     <svg
       class="ui-logo"
-      :class="{ 'ui-logo--static': !props.animated }"
+      :class="{
+        'ui-logo--static': !props.animated,
+        'ui-logo--invert-auto': props.inverted === 'auto',
+      }"
       :style="{
         height: props.height + 'rem',
         width: props.width + 'rem',
         ...colorVars,
       }"
-      viewBox="0 0 600 600"
+      viewBox="67.5 67.5 465 465"
       role="img"
-      aria-label="Livestorm"
+      :aria-label="props.label"
     >
       <component :is="variantComponent" />
     </svg>
@@ -84,13 +101,30 @@ const colorVars = computed(() => {
 }
 
 .ui-logo :deep(.mark) {
-    fill: var(--ui-logo-mark, #112660);
+    fill: var(--ui-logo-mark, #12262B);
 }
 
 .ui-logo--static :deep(.motion) {
     animation: none;
 }
 
+/* inverted="auto": the nearest data-colors-semantic scope decides.
+   Handles one level of scope nesting — all the app has. */
+.ui-logo--invert-auto {
+    --ui-logo-badge: #ffffff;
+    --ui-logo-mark: var(--ui-logo-auto-mark, #12262B);
+}
+
+[data-colors-semantic="light"] .ui-logo--invert-auto {
+    --ui-logo-badge: var(--ui-logo-auto-mark, #12262B);
+    --ui-logo-mark: #ffffff;
+}
+
+[data-colors-semantic="light"] [data-colors-semantic="dark"] .ui-logo--invert-auto {
+    --ui-logo-badge: #ffffff;
+    --ui-logo-mark: var(--ui-logo-auto-mark, #12262B);
+}
+
 @media (prefers-reduced-motion: reduce) {
     .ui-logo :deep(.motion) {
         animation: none;