@livestorm/ui-vue 1.1.3 → 2.0.0

package/src/components/UiHorizontalSeparator/UiHorizontalSeparator.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const props = defineProps<{
+  label: string
+}>()
+</script>
+
+<template>
+  <div class="separator text-content-legends-medium-md">
+    <p
+      class="w-full"
+      v-text="props.label"
+    />
+  </div>
+</template>
+
+<style scoped>
+@reference '@livestorm/ui-tokens/output/supernova/index.css';
+
+.separator {
+  @apply w-full grid grid-flow-col grid-cols-[1fr_auto_1fr] gap-x-2 items-center text-center text-text-neutral-tertiary;
+}
+
+.separator::before,
+.separator::after {
+  content: '';
+  @apply border-t border-borders-neutral-light h-0 w-full;
+}
+</style>

package/src/components/UiInputCheckbox/UiInputCheckbox.vue

@@ -0,0 +1,477 @@
+<script setup lang="ts">
+import { computed, ref, watch, nextTick } from 'vue'
+import { Label, useId } from 'reka-ui'
+import type { CheckboxSize } from './types'
+
+interface UiInputCheckboxProps {
+  /**
+   * The checkbox value (boolean for single checkbox, or value for array binding)
+   */
+  modelValue?: boolean | string | number | (string | number)[]
+  /**
+   * The value of this checkbox (used when binding to array)
+   */
+  value?: string | number
+  /**
+   * Whether the checkbox is checked (for boolean binding)
+   */
+  checked?: boolean
+  /**
+   * Whether the checkbox is disabled
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * Whether the checkbox is in indeterminate state
+   * @default false
+   */
+  indeterminate?: boolean
+  /**
+   * Whether the checkbox has an error
+   * @default false
+   */
+  error?: boolean
+  /**
+   * The label text
+   */
+  label?: string
+  /**
+   * Whether the label is required
+   * @default false
+   */
+  required?: boolean
+  /**
+   * Info tooltip for the label
+   */
+  labelInfo?: string
+  /**
+   * Description text below the label
+   */
+  description?: string
+  /**
+   * Error message to display
+   */
+  errorMessage?: string
+  /**
+   * Checkbox name attribute
+   */
+  name?: string
+  /**
+   * Checkbox id attribute
+   */
+  id?: string
+  /**
+   * Size of the checkbox
+   * @default 'md'
+   */
+  size?: CheckboxSize
+  /**
+   * Layout orientation
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical'
+  /**
+   * Whether to show background color
+    * @default false
+   */
+  showBg?: boolean
+}
+
+const props = withDefaults(defineProps<UiInputCheckboxProps>(), {
+  disabled: false,
+  indeterminate: false,
+  error: false,
+  required: false,
+  size: 'md',
+  checked: undefined,
+  orientation: 'horizontal',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean | string | number | (string | number)[]]
+  'change': [event: Event]
+  'focus': [event: FocusEvent]
+  'blur': [event: FocusEvent]
+}>()
+
+const checkboxRef = ref<HTMLInputElement | null>(null)
+
+function triggerCheckbox () {
+  if (!props.disabled) {
+    checkboxRef.value?.click()
+  }
+}
+const isFocused = ref(false)
+const inputId = useId()
+
+// Determine if checkbox is checked
+const isChecked = computed(() => {
+  // If checked prop is explicitly provided, use it
+  if (props.checked !== undefined) {
+    return props.checked
+  }
+
+  // Handle array binding (multiple checkboxes)
+  if (Array.isArray(props.modelValue)) {
+    return props.value !== undefined && props.modelValue.includes(props.value)
+  }
+
+  // Handle boolean binding (single checkbox)
+  if (typeof props.modelValue === 'boolean') {
+    return props.modelValue
+  }
+
+  // Handle value binding (single checkbox with value)
+  if (props.value !== undefined && props.modelValue !== undefined) {
+    return props.modelValue === props.value
+  }
+
+  return false
+})
+
+const checkboxClasses = computed(() => {
+  const baseClasses = [
+    'appearance-none',
+    'relative shrink-0 grid place-content-center',
+    'border rounded-sm transition-colors',
+    'focus:outline-hidden',
+  ]
+
+  baseClasses.push(props.disabled ? 'cursor-not-allowed' : 'cursor-pointer')
+
+  // Size classes
+  const sizeClasses = {
+    sm: 'w-3.5 h-3.5',
+    md: 'w-4 h-4',
+    lg: 'w-5 h-5',
+  }
+
+  baseClasses.push(sizeClasses[props.size])
+
+  // Background and border based on state
+  if (props.error) {
+    baseClasses.push('border-borders-danger-strong')
+    if (isChecked.value || props.indeterminate) {
+      baseClasses.push('bg-actions-danger-idle')
+    } else {
+      baseClasses.push('bg-surface-neutral-bg-main')
+    }
+  } else if (isChecked.value || props.indeterminate) {
+    baseClasses.push('bg-actions-primary-idle border-borders-primary-default')
+  } else {
+    baseClasses.push('bg-surface-neutral-bg-main border-borders-neutral-strong')
+  }
+
+  if (isFocused.value && !props.disabled) {
+    baseClasses.push('ring')
+    if (isChecked.value && !props.error) {
+      baseClasses.push('ring-borders-primary-strong')
+    } else if (props.error) {
+      baseClasses.push('ring-borders-danger-strong')
+    } else {
+      baseClasses.push('ring-2 ring-inset ring-focus-ring')
+    }
+  }
+
+  return baseClasses
+})
+
+const iconClasses = computed(() => {
+  const baseClasses = ['transition-opacity']
+
+  // Size classes for icon
+  const sizeClasses = {
+    sm: 'size-2.5',
+    md: 'size-3',
+    lg: 'size-3.5',
+  }
+
+  baseClasses.push(sizeClasses[props.size])
+
+  // Icon type and color based on state
+  if (props.indeterminate) {
+    baseClasses.push('i-ls-minus text-actions-neutral-invert-idle opacity-100')
+  } else if (isChecked.value) {
+    // Checked: always visible with light color on primary/error background
+    baseClasses.push('i-ls-checkbox-check text-actions-neutral-invert-idle opacity-100')
+  } else if (props.error) {
+    // Unchecked + error: show on hover only with danger color
+    baseClasses.push('i-ls-checkbox-check text-actions-danger-idle opacity-0 group-hover:opacity-50')
+  } else {
+    // Unchecked + no error: show on hover only with neutral color
+    baseClasses.push('i-ls-checkbox-check text-actions-neutral-idle opacity-0 group-hover:opacity-50')
+  }
+
+  return baseClasses
+})
+
+const displayMessage = computed(() => {
+  if (props.error && props.errorMessage) {
+    return props.errorMessage
+  }
+  return undefined
+})
+
+// for error/helper message
+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
+})
+
+const innerWrapperClasses = computed(() => {
+  const classes: string[] = ['group relative rounded-lg flex flex-col'];
+
+  if (props.orientation === 'vertical') {
+    classes.push('items-center');
+  }
+
+  if (props.disabled) {
+    classes.push('hover:cursor-not-allowed opacity-50')
+  } else {
+    classes.push('hover:cursor-pointer')
+  }
+
+  if (props.showBg) {
+    classes.push('p-2 ring-inset');
+    if (isChecked.value && !props.error) {
+      // checked
+      classes.push('bg-actions-primary-idle-alpha-light ring-2 ring-borders-primary-strong');
+    } else if (!isChecked.value && !props.error) {
+      // idle
+      classes.push('bg-surface-neutral-alpha-100 ring-transparent');
+    } else if (isChecked.value && props.error) {
+      // error + checked
+      classes.push('bg-actions-danger-idle-alpha-light ring-2 ring-borders-danger-strong');
+    } else {
+      // error + unchecked
+      classes.push('bg-actions-danger-idle-alpha-light')
+    }
+  }
+
+  if (props.disabled) {
+    classes.push('cursor-not-allowed')
+  } else {
+    classes.push('cursor-pointer')
+  }
+
+  return classes;
+});
+
+function handleChange (event: Event) {
+  const target = event.target as HTMLInputElement
+  let newValue: boolean | string | number | (string | number)[]
+
+  // Handle array binding (multiple checkboxes)
+  if (Array.isArray(props.modelValue)) {
+    newValue = [...props.modelValue]
+    if (target.checked) {
+      if (props.value !== undefined && !newValue.includes(props.value)) {
+        newValue.push(props.value)
+      }
+    } else {
+      if (props.value !== undefined) {
+        const index = newValue.indexOf(props.value)
+        if (index > -1) {
+          newValue.splice(index, 1)
+        }
+      }
+    }
+  } else if (props.value !== undefined) {
+    // Handle value binding (single checkbox with value)
+    newValue = target.checked ? props.value : false
+  } else {
+    // Handle boolean binding (single checkbox)
+    newValue = target.checked
+  }
+
+  emit('update:modelValue', newValue)
+  emit('change', event)
+}
+
+function handleFocus(event: FocusEvent) {
+  isFocused.value = true
+  emit('focus', event)
+}
+
+function handleBlur (event: FocusEvent) {
+  isFocused.value = false
+  emit('blur', event)
+}
+
+// Set indeterminate state when prop changes
+watch(() => props.indeterminate, (newVal) => {
+  nextTick(() => {
+    if (checkboxRef.value) {
+      checkboxRef.value.indeterminate = newVal
+    }
+  })
+}, { immediate: true })
+
+defineExpose({
+  focus: () => checkboxRef.value?.focus(),
+  blur: () => checkboxRef.value?.blur(),
+})
+</script>
+
+<template>
+  <div class="ui-input-checkbox-wrapper w-fit">
+    <div
+      :class="innerWrapperClasses"
+      @click="triggerCheckbox"
+    >
+      <input
+        :id="inputId"
+        ref="checkboxRef"
+        :checked="isChecked"
+        :disabled="disabled"
+        :name="name"
+        type="checkbox"
+        class="absolute opacity-0 pointer-events-none"
+        :aria-invalid="error"
+        :aria-describedby="displayMessage ? `${inputId}-message` : undefined"
+        @change="handleChange"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      >
+
+      <!-- First row (contains checkbox for horizontal orientation) -->
+      <div
+        class="flex items-center"
+        :class="{ 'justify-center': orientation === 'vertical' }"
+      >
+        <!-- Checkbox - horizontal only -->
+        <label
+          v-if="orientation === 'horizontal'"
+          class="flex w-5 items-center justify-center shrink-0 mr-2"
+          :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+        >
+          <span
+            :class="checkboxClasses"
+            aria-hidden="true"
+          >
+            <span
+              :class="iconClasses"
+              class="block relative z-1"
+            >
+              <div
+                class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
+                :class="{
+                  'bg-actions-neutral-hover-overlay': !isChecked && !error,
+                  'bg-actions-danger-hover-overlay': error,
+                  'bg-actions-primary-hover-overlay': isChecked && !error,
+                }"
+              />
+            </span>
+          </span>
+        </label>
+
+        <Label
+          :for="inputId"
+          class="text-content-text-md-regular"
+          :class="{
+            'text-text-neutral-base': !error && !isChecked,
+            'text-text-danger-base': error,
+            'text-text-primary-base': isChecked && !error,
+            'cursor-not-allowed': disabled,
+            'cursor-pointer': !disabled,
+          }"
+          @click.stop
+        >
+          <slot name="label">
+            {{ label }}{{ required ? '*' : '' }}
+          </slot>
+        </Label>
+
+        <!-- icon -->
+        <div
+          v-if="labelInfo"
+          v-tooltip="labelInfo"
+          class="flex items-center justify-center size-4 text-text-neutral-primary cursor-help shrink-0"
+          :class="{
+            'text-text-neutral-base': !error && !isChecked,
+            'text-text-danger-base': error,
+            'text-text-primary-base': isChecked && !error,
+          }"
+        >
+          <span class="i-ls-info-fill size-4" />
+        </div>
+      </div>
+
+      <span
+        v-if="description"
+        class="text-content-text-md-regular"
+        :class="{
+          'ml-7': orientation === 'horizontal',
+          'text-center': orientation === 'vertical',
+          'text-text-neutral-tertiary': !error && !isChecked,
+          'text-text-danger-tertiary': error,
+          'text-text-primary-tertiary': isChecked && !error,
+          'cursor-not-allowed': disabled,
+          'cursor-pointer': !disabled,
+        }"
+      >
+        {{ description }}
+      </span>
+
+      <!-- Checkbox - vertical only -->
+      <label
+        v-if="orientation === 'vertical'"
+        class="flex justify-center mt-2"
+        :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+      >
+        <span
+          :class="checkboxClasses"
+          aria-hidden="true"
+        >
+          <span
+            :class="iconClasses"
+            class="block relative z-1"
+          >
+            <div
+              class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
+              :class="{
+                'bg-actions-neutral-hover-overlay': !isChecked && !error,
+                'bg-actions-danger-hover-overlay': error,
+                'bg-actions-primary-hover-overlay': isChecked && !error,
+              }"
+            />
+          </span>
+        </span>
+      </label>
+
+      <div
+        v-if="showBg"
+        class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none rounded-lg"
+        :class="{
+          'bg-actions-neutral-hover-overlay': !isChecked && !error,
+          'bg-actions-danger-hover-overlay': error,
+          'bg-actions-primary-hover-overlay': isChecked && !error,
+        }"
+      />
+    </div>
+
+    <!-- Helper/Error Message -->
+    <p
+      v-if="displayMessage"
+      :id="`${inputId}-message`"
+      :class="displayMessageClasses"
+    >
+      {{ displayMessage }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+@reference '@livestorm/ui-tokens/output/supernova/index.css';
+
+.ui-input-checkbox-wrapper :deep(a) {
+  @apply text-text-primary-secondary underline;
+}
+</style>

package/src/components/UiInputCheckbox/index.ts

@@ -0,0 +1,2 @@
+export { default as UiInputCheckbox } from './UiInputCheckbox.vue'
+export type { CheckboxSize } from './types'

package/src/components/UiInputCheckbox/types.ts

@@ -0,0 +1 @@
+export type CheckboxSize = 'sm' | 'md' | 'lg'

package/src/components/UiInputSelect/UiInputSelect.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import UiFieldWrapper from '../UiFieldWrapper/UiFieldWrapper.vue'
+import UiDropdown from '../UiDropdown/UiDropdown.vue'
+import UiDropdownTrigger from '../UiDropdown/UiDropdownTrigger.vue'
+import UiDropdownContent from '../UiDropdown/UiDropdownContent.vue'
+import UiDropdownItem from '../UiDropdown/UiDropdownItem.vue'
+import type { AcceptableValue } from 'reka-ui'
+import type { SelectSize } from './types'
+
+interface UiInputSelectProps {
+  size?: SelectSize
+  /**
+   * Selected value. Pass a `string` for single-select, or a `string[]` when
+   * `multiple` is enabled.
+   */
+  modelValue?: string | string[] | null
+  placeholder?: string
+  disabled?: boolean
+  loading?: boolean
+  error?: boolean
+  label?: string
+  required?: boolean
+  labelInfo?: string
+  helperMessage?: string
+  errorMessage?: string
+  name?: string
+  clearable?: boolean
+  id?: string
+  ariaDescribedby?: string
+  defaultOpen?: boolean
+  /**
+   * Enable multi-select. When set, `v-model` must be bound to an array and
+   * the dropdown items render with a leading checkbox (same look as
+   * `UiDropdown multiple`).
+   */
+  multiple?: boolean
+}
+
+const props = withDefaults(defineProps<UiInputSelectProps>(), {
+  size: 'md',
+  disabled: false,
+  loading: false,
+  error: false,
+  required: false,
+  placeholder: 'Select',
+  modelValue: undefined,
+  name: undefined,
+  label: undefined,
+  labelInfo: undefined,
+  helperMessage: undefined,
+  errorMessage: undefined,
+  clearable: false,
+  id: undefined,
+  ariaDescribedby: undefined,
+  defaultOpen: false,
+  multiple: false,
+})
+
+// Sentinel value for the "clear" option — intentionally verbose to avoid collisions with real values
+const CLEAR_VALUE = '__ui-input-select-clear__'
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | string[] | undefined]
+  'blur': [event: FocusEvent]
+}>()
+
+// Normalize the forwarded value: single-select passes through, multi-select
+// always passes an array (Reka's `SelectRoot multiple` expects one).
+const forwardedValue = computed(() => {
+  if (props.multiple) return Array.isArray(props.modelValue) ? props.modelValue : []
+  return props.modelValue ?? undefined
+})
+
+// In multi-select mode, the trigger's `SelectValue` won't have a single
+// matching item label to render; show a "N selected" summary instead so the
+// trigger keeps a meaningful display. Empty array → placeholder.
+const triggerSummary = computed(() => {
+  if (!props.multiple) return undefined
+  const list = Array.isArray(props.modelValue) ? props.modelValue : []
+  if (list.length === 0) return undefined
+  return list.length === 1 ? '1 selected' : `${list.length} selected`
+})
+
+function handleUpdate (value: AcceptableValue) {
+  if (props.multiple) {
+    // Reka emits the full array on every toggle when `multiple` is on.
+    emit('update:modelValue', (value as string[]) ?? [])
+    return
+  }
+  if (value === CLEAR_VALUE) {
+    emit('update:modelValue', undefined)
+  } else {
+    emit('update:modelValue', value as string)
+  }
+}
+</script>
+
+<template>
+  <UiFieldWrapper
+    :id="id"
+    :label="label"
+    :required="required"
+    :label-info="labelInfo"
+    :error="error"
+    :helper-message="helperMessage"
+    :error-message="errorMessage"
+  >
+    <template #default="{ fieldId }">
+      <!-- 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',
+        }"
+      >
+        <div class="h-3 w-24 bg-surface-neutral-alpha-400 rounded-md animate-pulse" />
+      </div>
+
+      <!-- Select Field -->
+      <UiDropdown
+        v-else
+        :model-value="forwardedValue"
+        :name="name"
+        :default-open="defaultOpen"
+        :multiple="multiple"
+        @update:model-value="handleUpdate"
+      >
+        <UiDropdownTrigger
+          :id="id || fieldId"
+          :placeholder="placeholder"
+          :disabled="disabled"
+          :size="size"
+          :error="error"
+          :aria-invalid="error || undefined"
+          :aria-describedby="ariaDescribedby || ((helperMessage || errorMessage) ? `${fieldId}-message` : undefined)"
+          @blur="emit('blur', $event)"
+        >
+          <!-- Multi-select trigger label: `SelectValue` only renders the
+               last-selected item's text, so for arrays we render an N-summary
+               instead. Single-select falls through to the default `SelectValue`. -->
+          <template
+            v-if="multiple && triggerSummary"
+            #value
+          >
+            {{ triggerSummary }}
+          </template>
+        </UiDropdownTrigger>
+
+        <UiDropdownContent>
+          <UiDropdownItem
+            v-if="clearable && !multiple"
+            :value="CLEAR_VALUE"
+            :title="placeholder"
+            class="text-text-neutral-tertiary"
+          />
+          <slot />
+        </UiDropdownContent>
+      </UiDropdown>
+    </template>
+  </UiFieldWrapper>
+</template>

package/src/components/UiInputSelect/index.ts

@@ -0,0 +1,2 @@
+export { default as UiInputSelect } from './UiInputSelect.vue'
+export type { SelectSize } from './types'

package/src/components/UiInputSelect/types.ts

@@ -0,0 +1 @@
+export type SelectSize = 'sm' | 'md' | 'lg' | 'xl'