@livestorm/ui-vue 2.0.5 → 4.0.0

package/src/components/UiInputRadio/RadioGlyph.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { RadioGroupItem, RadioGroupIndicator } from 'reka-ui'
+import type { RadioValue } from './types'
+
+interface Props {
+  inputId: string
+  value: RadioValue
+  disabled: boolean
+  error: boolean
+  ariaDescribedby?: string
+  radioClasses: string[]
+  indicatorClasses: string[]
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  select: [event: Event]
+}>()
+
+const itemRef = ref<InstanceType<typeof RadioGroupItem> | null>(null)
+
+defineExpose({
+  el: (): HTMLElement | undefined => (itemRef.value?.$el as HTMLElement | undefined) ?? undefined,
+})
+</script>
+
+<template>
+  <RadioGroupItem
+    :id="inputId"
+    ref="itemRef"
+    :value="value"
+    :disabled="disabled"
+    :class="radioClasses"
+    :aria-invalid="error || undefined"
+    :aria-describedby="ariaDescribedby"
+    @select="emit('select', $event)"
+  >
+    <RadioGroupIndicator
+      data-testid="ui-input-radio-dot"
+      :class="indicatorClasses"
+    />
+  </RadioGroupItem>
+</template>

package/src/components/UiInputRadio/UiInputRadio.vue

@@ -0,0 +1,382 @@
+<script setup lang="ts">
+import { computed, inject, provide, ref } from 'vue'
+import { Label, useId } from 'reka-ui'
+import type { RadioValue } from './types'
+import { RADIO_GROUP_KEY } from './types'
+import { CHOICE_ROW_KEY } from '../UiChoice/types'
+import type { ControlPosition } from '../UiChoice/types'
+import UiTooltip from '../UiTooltip/UiTooltip.vue'
+import RadioGlyph from './RadioGlyph.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
+  /**
+   * Icon class rendered between the radio and the text (e.g. `i-ph-bell`).
+   * In vertical orientation it sits above the text instead.
+   */
+  icon?: string
+  /**
+   * Whether this option is disabled
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * Layout orientation of the radio relative to the label
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical'
+  /**
+   * Which side of the text the radio sits on, in horizontal orientation
+   * @default 'start'
+   */
+  controlPosition?: ControlPosition
+  /**
+   * Radio id attribute
+   */
+  id?: string
+}
+
+const props = withDefaults(defineProps<UiInputRadioProps>(), {
+  label: undefined,
+  description: undefined,
+  labelInfo: undefined,
+  icon: undefined,
+  id: undefined,
+  controlPosition: 'start',
+  disabled: false,
+  orientation: 'horizontal',
+})
+
+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 inChoiceRow = inject(CHOICE_ROW_KEY, false)
+// Controls in the content slot are not the row's control
+provide(CHOICE_ROW_KEY, false)
+
+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 isOptionRow = computed(() => props.orientation === 'horizontal')
+// Side by side, a choice keeps its title on one line: the choice widens or the row
+// wraps instead. A title wider than the whole row truncates.
+const titleOnOneLine = computed(() => inChoiceRow && group?.orientation.value === 'horizontal')
+const controlAtEnd = computed(() => props.orientation === 'horizontal' && props.controlPosition === 'end')
+
+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 rounded-full border',
+    'focus:outline-hidden focus-indicator-none',
+    'cursor-pointer disabled:cursor-not-allowed',
+  ]
+
+  const sizeClasses = {
+    sm: 'size-unit-0-75rem',
+    md: 'size-check-sm',
+    lg: 'size-check-md',
+  }
+
+  baseClasses.push(sizeClasses[size.value])
+
+  // Checked is a thin ring around a dot on the light surface; unchecked is a denser
+  // fill than the fields, which once disabled falls back to the field fill with an outline
+  if (isChecked.value) {
+    baseClasses.push('bg-surface-neutral-bg-main', checkedRingClass.value)
+  } else if (isDisabled.value && !error.value) {
+    baseClasses.push('bg-control-field-bg border-control-disabled-border')
+  } else {
+    baseClasses.push('bg-control-check-bg', error.value ? 'border-control-error-border' : 'border-control-field-border')
+    if (!isDisabled.value) {
+      baseClasses.push('group-hover/option:bg-control-check-bg-hover')
+    }
+  }
+
+  return baseClasses
+})
+
+// Transform centering (not inset/margins): layout boxes get snapped to
+// device pixels, which renders fractional gaps visibly off-center
+const dotClasses = computed(() => {
+  const sizeClasses = {
+    sm: 'size-unit-0-375rem',
+    md: 'size-unit-0-5rem',
+    lg: 'size-unit-0-625rem',
+  }
+  return ['absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full', sizeClasses[size.value]]
+})
+
+const checkedRingClass = computed(() => {
+  if (error.value) {
+    return 'border-actions-danger-idle'
+  }
+  return isDisabled.value ? 'border-borders-neutral-strong' : 'border-actions-primary-idle'
+})
+
+const indicatorClasses = computed(() => {
+  if (error.value) {
+    return [...dotClasses.value, 'bg-actions-danger-idle']
+  }
+  return [...dotClasses.value, isDisabled.value ? 'bg-text-neutral-secondary' : 'bg-actions-primary-idle']
+})
+
+// A choicebox tints its text with the selection. Disabled, a choicebox recedes
+// whole, while a plain option keeps its selection legible in neutral.
+const tone = computed(() => {
+  if (error.value) {
+    return 'danger'
+  }
+  if (isDisabled.value) {
+    return isChecked.value && !inChoiceRow ? 'neutral' : 'disabled'
+  }
+  return isChecked.value && inChoiceRow ? 'selected' : 'neutral'
+})
+
+const labelClasses = computed(() => ({
+  'text-content-text-md-medium': inChoiceRow,
+  'text-content-text-md-regular': !inChoiceRow,
+  'text-text-neutral-base': tone.value === 'neutral',
+  'text-text-neutral-tertiary': tone.value === 'disabled',
+  'text-text-danger-base': tone.value === 'danger',
+  'text-text-primary-title': tone.value === 'selected',
+  'flex items-center min-w-0': titleOnOneLine.value,
+  'cursor-not-allowed': isDisabled.value,
+  'cursor-pointer': !isDisabled.value,
+}))
+
+const descriptionClasses = computed(() => ({
+  'text-center': props.orientation === 'vertical',
+  'text-text-neutral-secondary': tone.value === 'neutral',
+  'text-text-neutral-tertiary': tone.value === 'disabled',
+  'text-text-danger-tertiary': tone.value === 'danger',
+  'text-text-primary-base': tone.value === 'selected',
+  'cursor-not-allowed': isDisabled.value,
+  'cursor-pointer': !isDisabled.value,
+}))
+
+const innerWrapperClasses = computed(() => {
+  const classes: string[] = ['group/option relative flex h-full']
+
+  classes.push(props.orientation === 'vertical' ? 'flex-col items-center' : 'items-start')
+
+  if (isOptionRow.value && !inChoiceRow) {
+    // The row bleeds around the option without taking layout space, so a one-line
+    // option is a 32px hit target; hover shows on the glyph only. Inside UiChoice the choice draws the row.
+    classes.push('isolate before:absolute before:-inset-x-3 before:-inset-y-1.5 before:-z-10 before:rounded-field-md has-[[role=radio]:focus-visible]:before:focus-ring')
+  } else if (props.orientation === 'vertical') {
+    classes.push(inChoiceRow ? 'rounded-field-md' : 'rounded-field-md has-[[role=radio]:focus-visible]:focus-ring')
+  }
+
+  classes.push(isDisabled.value ? 'cursor-not-allowed' : 'cursor-pointer')
+
+  return classes
+})
+
+const glyphProps = computed(() => ({
+  inputId: inputId.value,
+  value: props.value,
+  disabled: props.disabled,
+  error: error.value,
+  ariaDescribedby: ariaDescribedby.value,
+  radioClasses: radioClasses.value,
+  indicatorClasses: indicatorClasses.value,
+}))
+
+const glyphRef = ref<InstanceType<typeof RadioGlyph> | null>(null)
+
+function radioElement (): HTMLElement | undefined {
+  return glyphRef.value?.el()
+}
+
+// Make the whole wrapper (description, padding) 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
+  }
+  // Controls in the content slot handle their own clicks
+  if (target.closest('input, textarea, select, button, a')) {
+    return
+  }
+
+  radioEl.click()
+}
+
+defineExpose({
+  focus: () => radioElement()?.focus(),
+  blur: () => radioElement()?.blur(),
+})
+</script>
+
+<template>
+  <!-- An option that hosts a field or pushes its radio to the end fills its
+       slot; otherwise it shrink-wraps to keep the click zone on content -->
+  <div
+    class="ui-input-radio-wrapper"
+    data-testid="ui-input-radio"
+    :class="[$slots.content || controlAtEnd ? 'w-full' : 'w-fit', { 'max-w-full': titleOnOneLine }]"
+  >
+    <div
+      :class="innerWrapperClasses"
+      data-testid="ui-input-radio-row"
+      @click="onWrapperClick"
+    >
+      <!-- Radio - horizontal only. The box matches the label's line-height so
+           the glyph centers on the label line, and the checkbox's width so
+           labels line up; the glyph hugs the outer edge like a checkbox does -->
+      <span
+        v-if="orientation === 'horizontal'"
+        class="flex size-5 items-center shrink-0"
+        :class="controlAtEnd ? ['order-last justify-end', inChoiceRow ? 'ms-5' : 'ms-3'] : ['justify-start', inChoiceRow ? 'me-3' : 'me-1']"
+      >
+        <RadioGlyph
+          ref="glyphRef"
+          v-bind="glyphProps"
+          @select="emit('select', $event)"
+        />
+      </span>
+
+      <!-- Optional icon: between the radio and the text, or above the text in
+           vertical orientation. min-h-5 keeps a small icon on the label line -->
+      <span
+        v-if="icon || $slots.icon"
+        class="flex items-center justify-center shrink-0"
+        data-testid="ui-input-radio-icon"
+        :class="orientation === 'vertical' ? 'mb-2' : 'mr-2 min-h-5'"
+      >
+        <slot name="icon">
+          <span
+            class="size-4"
+            :class="[icon, {
+              'text-text-neutral-base': tone === 'neutral',
+              'text-text-neutral-tertiary': tone === 'disabled',
+              'text-text-danger-base': tone === 'danger',
+              'text-text-primary-title': tone === 'selected',
+            }]"
+          />
+        </slot>
+      </span>
+
+      <div
+        class="flex flex-col min-w-0"
+        :class="[orientation === 'vertical' ? 'items-center' : 'flex-1', inChoiceRow ? 'gap-1' : 'gap-0.5']"
+        data-testid="ui-input-radio-text"
+      >
+        <Label
+          :for="inputId"
+          :class="labelClasses"
+        >
+          <span
+            v-if="titleOnOneLine"
+            class="truncate"
+          >
+            <slot name="label">
+              {{ label }}
+            </slot>
+          </span>
+          <slot
+            v-else
+            name="label"
+          >
+            {{ label }}
+          </slot>
+
+          <!-- icon: inline so it wraps with the text instead of centering against the whole label block,
+               and the word joiner keeps it on the line of the last word.
+               -translate-y-px because the icon aligns with the text so that its visually centered -->
+          <span
+            v-if="labelInfo"
+            class="whitespace-nowrap before:content-['\2060']"
+          ><UiTooltip :content="labelInfo">
+            <span
+              class="inline-flex items-center justify-center size-4 ms-2 align-middle -translate-y-px cursor-help shrink-0"
+              :class="{
+                'text-text-neutral-tertiary': tone === 'neutral' || tone === 'disabled',
+                'text-text-danger-tertiary': tone === 'danger',
+                'text-text-primary-tertiary': tone === 'selected',
+              }"
+              data-testid="ui-input-radio-label-info"
+              @click.stop.prevent
+            >
+              <span class="i-ph-info-fill size-4" />
+            </span>
+          </UiTooltip></span>
+        </Label>
+
+        <span
+          v-if="description"
+          :id="descriptionId"
+          class="text-content-text-md-regular"
+          :class="descriptionClasses"
+        >
+          {{ description }}
+        </span>
+
+        <!-- Extra content under the text, e.g. a field the option configures.
+             Sits outside the label so it stays out of the accessible name -->
+        <slot name="content" />
+      </div>
+
+      <!-- Radio - vertical only -->
+      <span
+        v-if="orientation === 'vertical'"
+        class="flex justify-center mt-2"
+      >
+        <RadioGlyph
+          ref="glyphRef"
+          v-bind="glyphProps"
+          @select="emit('select', $event)"
+        />
+      </span>
+    </div>
+  </div>
+</template>

package/src/components/UiInputRadio/UiInputRadioGroup.vue

@@ -0,0 +1,166 @@
+<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
+  /**
+   * Id of the element naming the group, set on the radiogroup itself
+   */
+  ariaLabelledby?: string
+}
+
+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,
+  ariaLabelledby: undefined,
+})
+
+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. The 12px
+// gap holds the 6px bleed of each option row, so one-line rows stay 32px hit
+// targets that never overlap.
+const rootClasses = computed(() =>
+  props.orientation === 'horizontal'
+    ? 'flex flex-row flex-wrap items-stretch gap-3'
+    : 'flex flex-col gap-3',
+)
+
+// mt-1.5 clears the 6px bleed of the last option row
+const displayMessageClasses = computed(() => {
+  const baseClasses = ['text-content-legends-bold-md mt-1.5']
+
+  if (props.error) {
+    baseClasses.push('text-text-danger-body')
+  } else {
+    baseClasses.push('text-text-neutral-secondary')
+  }
+
+  return baseClasses
+})
+
+provide(RADIO_GROUP_KEY, {
+  modelValue: currentValue,
+  error: toRef(props, 'error'),
+  size: toRef(props, 'size'),
+  orientation: toRef(props, 'orientation'),
+  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"
+      :aria-labelledby="ariaLabelledby"
+      :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/types.ts

@@ -0,0 +1,24 @@
+import type { InjectionKey, Ref } from 'vue'
+import type { AcceptableValue } from 'reka-ui'
+
+export type RadioSize = 'sm' | 'md' | 'lg'
+
+/**
+ * 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>>
+  orientation: Readonly<Ref<'vertical' | 'horizontal'>>
+  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/UiInputSelect/UiInputSelect.vue

@@ -7,6 +7,7 @@ import UiDropdownContent from '../UiDropdown/UiDropdownContent.vue'
 import UiDropdownItem from '../UiDropdown/UiDropdownItem.vue'
 import type { AcceptableValue } from 'reka-ui'
 import type { SelectSize } from './types'
+import { useControlShape } from '../../composables/useControlShape'
 
 interface UiInputSelectProps {
   size?: SelectSize
@@ -57,6 +58,8 @@ const props = withDefaults(defineProps<UiInputSelectProps>(), {
   multiple: false,
 })
 
+const shape = useControlShape('field', () => props.size)
+
 // Sentinel value for the "clear" option — intentionally verbose to avoid collisions with real values
 const CLEAR_VALUE = '__ui-input-select-clear__'
 
@@ -110,13 +113,12 @@ function handleUpdate (value: AcceptableValue) {
       <!-- Loading State -->
       <div
         v-if="loading"
-        class="flex items-center gap-2 w-full rounded-lg border border-solid border-borders-neutral-strong bg-actions-neutral-idle-alpha-light"
-        :class="{
-          'h-8 px-2': size === 'sm',
-          'h-10 px-3': size === 'md',
-          'h-12 px-4': size === 'lg',
-          'h-16 px-4': size === 'xl',
-        }"
+        class="flex items-center gap-2 w-full border border-solid border-control-field-border bg-control-field-bg"
+        :class="[shape.radius, shape.height, {
+          'px-2': size === 'sm',
+          'px-3': size === 'md',
+          'px-4': size === 'lg' || size === 'xl',
+        }]"
       >
         <div class="h-3 w-24 bg-surface-neutral-alpha-400 rounded-md animate-pulse" />
       </div>