@livestorm/ui-vue 2.0.5 → 3.0.0

package/src/components/UiInputEmoji/UiInputEmoji.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useStorage } from '@vueuse/core'
+import EmojiPicker from 'vue-frimousse'
+import UiPopover from '../UiPopover/UiPopover.vue'
+import UiPopoverContent from '../UiPopover/UiPopoverContent.vue'
+import UiPopoverTrigger from '../UiPopover/UiPopoverTrigger.vue'
+
+interface UiInputEmojiProps {
+  disabled?: boolean
+  label?: string
+  locale?: string
+  searchPlaceholder?: string
+  loadingLabel?: string
+  emptyLabel?: string
+  previewPlaceholder?: string
+  skinToneLabel?: string
+  sideOffset?: number
+  open?: boolean
+}
+
+const props = withDefaults(defineProps<UiInputEmojiProps>(), {
+  disabled: false,
+  label: 'Emoji',
+  locale: 'en',
+  searchPlaceholder: 'Search emoji...',
+  loadingLabel: 'Loading...',
+  emptyLabel: 'No emoji found',
+  previewPlaceholder: 'Select an emoji',
+  skinToneLabel: 'Change skin tone',
+  sideOffset: 8,
+  open: undefined,
+})
+
+const emit = defineEmits<{
+  select: [emoji: string]
+  'update:open': [value: boolean]
+}>()
+
+const uncontrolledOpen = ref(false)
+type SkinTone = 'none' | 'light' | 'medium-light' | 'medium' | 'medium-dark' | 'dark'
+const skinTones: SkinTone[] = ['none', 'light', 'medium-light', 'medium', 'medium-dark', 'dark']
+const preferredSkinTone = useStorage<SkinTone>('livestorm:emoji-skin-tone', 'none')
+
+const open = computed({
+  get: () => props.open ?? uncontrolledOpen.value,
+  set: (value: boolean) => {
+    uncontrolledOpen.value = value
+    emit('update:open', value)
+  },
+})
+
+const locale = computed(() => props.locale.toLowerCase().replace('_', '-'))
+
+function selectEmoji (emoji: { emoji: string }): void {
+  emit('select', emoji.emoji)
+  open.value = false
+}
+
+function cycleSkinTone (): void {
+  const currentIndex = skinTones.indexOf(preferredSkinTone.value)
+  preferredSkinTone.value = skinTones[(currentIndex + 1) % skinTones.length] ?? 'none'
+}
+</script>
+
+<template>
+  <UiPopover v-model:open="open">
+    <UiPopoverTrigger
+      as-child
+      :disabled="disabled"
+    >
+      <slot
+        :open="open"
+        :disabled="disabled"
+      >
+        <button
+          type="button"
+          :aria-label="label"
+          :disabled="disabled"
+          class="inline-flex size-8 items-center justify-center rounded-lg text-actions-neutral-idle hover:bg-actions-neutral-hover-overlay disabled:pointer-events-none disabled:opacity-50"
+        >
+          <span
+            class="i-ph-smiley size-4"
+            aria-hidden="true"
+          />
+        </button>
+      </slot>
+    </UiPopoverTrigger>
+
+      <UiPopoverContent
+        side="top"
+        :side-offset="sideOffset"
+      class="w-[min(320px,calc(100vw-16px))] overflow-hidden border-borders-neutral-default bg-surface-neutral-bg-main p-0"
+      :aria-label="label"
+    >
+      <EmojiPicker.Root
+        :locale="locale"
+        :columns="9"
+        :skin-tone="preferredSkinTone"
+        :on-emoji-select="selectEmoji"
+        class="flex flex-col gap-2 p-3"
+      >
+        <EmojiPicker.Search
+          class="h-8 w-full rounded-md border border-borders-neutral-default bg-surface-neutral-bg-main px-2 text-content-legends-medium-md text-text-neutral-base outline-none placeholder:text-text-neutral-tertiary focus:border-actions-primary-idle-alpha-strong focus:ring-1 focus:ring-focus-ring"
+          :placeholder="searchPlaceholder"
+        />
+
+        <EmojiPicker.Viewport class="box-border h-64 pr-2">
+          <EmojiPicker.Loading class="flex h-64 items-center justify-center text-content-legends-medium-md text-text-neutral-tertiary">
+            {{ loadingLabel }}
+          </EmojiPicker.Loading>
+          <EmojiPicker.Empty class="flex h-64 items-center justify-center text-content-legends-medium-md text-text-neutral-tertiary">
+            {{ emptyLabel }}
+          </EmojiPicker.Empty>
+          <EmojiPicker.List class="flex w-full flex-col gap-2">
+            <template #category-header="{ category }">
+              <div class="bg-surface-neutral-bg-main py-1 text-content-legends-bold-md text-text-neutral-secondary">
+                {{ category.label }}
+              </div>
+            </template>
+
+            <template #emoji="{ emoji }">
+              <button
+                type="button"
+                :aria-label="emoji.label"
+                class="flex size-8 w-full! items-center justify-center rounded-md text-xl leading-none hover:bg-actions-neutral-hover-overlay data-[active]:bg-actions-neutral-hover-overlay"
+              >
+                {{ emoji.emoji }}
+              </button>
+            </template>
+          </EmojiPicker.List>
+        </EmojiPicker.Viewport>
+
+        <div class="flex h-10 items-center justify-between gap-2 border-t border-borders-neutral-default pt-2">
+          <EmojiPicker.ActiveEmoji>
+            <template #default="{ emoji }">
+              <span
+                v-if="emoji"
+                class="flex h-6 min-w-0 flex-1 items-center gap-2 text-content-legends-medium-md text-text-neutral-secondary"
+              >
+                <span class="flex size-6 shrink-0 items-center justify-center text-xl leading-none">{{ emoji.emoji }}</span>
+                <span class="min-w-0 truncate">{{ emoji.label }}</span>
+              </span>
+              <span
+                v-else
+                class="flex h-6 min-w-0 flex-1 items-center text-content-legends-medium-md text-text-neutral-secondary"
+              >{{ previewPlaceholder }}</span>
+            </template>
+          </EmojiPicker.ActiveEmoji>
+
+          <EmojiPicker.SkinToneSelector
+            class="flex size-8 shrink-0 items-center justify-center rounded-md text-xl leading-none hover:bg-actions-neutral-hover-overlay"
+            :aria-label="skinToneLabel"
+            @click="cycleSkinTone"
+          />
+        </div>
+      </EmojiPicker.Root>
+    </UiPopoverContent>
+  </UiPopover>
+</template>
+
+<style scoped>
+:deep([frimousse-row]) {
+  display: grid !important;
+  width: 100%;
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+  gap: 0.125rem;
+}
+
+:deep([frimousse-row] > [frimousse-emoji]) {
+  min-width: 0;
+}
+</style>

package/src/components/UiInputEmoji/index.ts

@@ -0,0 +1 @@
+export { default as UiInputEmoji } from './UiInputEmoji.vue'

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>