@livestorm/ui-vue 1.1.3 → 2.0.0

package/src/components/UiDropdown/UiDropdownContent.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { SelectContentProps } from 'reka-ui'
+import { SelectContent, SelectPortal, SelectScrollDownButton, SelectScrollUpButton, SelectViewport } from 'reka-ui'
+import { useSlots } from 'vue'
+
+interface Props extends SelectContentProps {
+  showScrollButtons?: boolean
+  /**
+   * The color semantic mode for the dropdown content
+   * @default 'light'
+   */
+  colorsSemantic?: 'light' | 'dark'
+}
+
+withDefaults(defineProps<Props>(), {
+  position: 'popper',
+  side: 'bottom',
+  sideOffset: 8,
+  align: 'start',
+  colorsSemantic: 'light',
+})
+
+const slots = useSlots()
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="$attrs"
+      :position="position"
+      :side-offset="sideOffset"
+      :align="align"
+      :side="side"
+      :data-colors-semantic="colorsSemantic"
+      class="ui-dropdown-content focus-indicator-none z-50 relative py-3 px-2 rounded-xl bg-surface-neutral-bg-main min-w-(--reka-select-trigger-width) max-h-(--reka-select-content-available-height) shadow-shadows-drop-shadow-lg data-[state=open]:animate-[slideDownAndFade_0.2s_ease] data-[state=closed]:animate-[slideUpAndFade_0.15s_ease]"
+    >
+      <div
+        v-if="slots.header"
+        class="sticky top-0 bg-surface-neutral-bg-main px-3 mb-3"
+      >
+        <slot name="header" />
+      </div>
+
+      <div class="flex flex-col gap-1 overflow-y-auto max-h-[300px]">
+        <SelectScrollUpButton
+          v-if="showScrollButtons"
+          class="flex items-center justify-center h-6 cursor-default text-text-neutral-base"
+        >
+          <div class="i-ls-chevron-up size-4" />
+        </SelectScrollUpButton>
+
+        <SelectViewport class="flex flex-col gap-1">
+          <slot />
+        </SelectViewport>
+
+        <SelectScrollDownButton
+          v-if="showScrollButtons"
+          class="flex items-center justify-center h-6 cursor-default text-text-neutral-base"
+        >
+          <div class="i-ls-chevron-down size-4" />
+        </SelectScrollDownButton>
+      </div>
+
+      <div
+        v-if="slots.footer"
+        class="sticky bottom-0 bg-surface-neutral-bg-main"
+      >
+        <slot name="footer" />
+      </div>
+    </SelectContent>
+  </SelectPortal>
+</template>

package/src/components/UiDropdown/UiDropdownItem.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { SelectItemProps } from 'reka-ui'
+import { SelectItem, SelectItemText } from 'reka-ui'
+import { inject } from 'vue'
+import { UI_DROPDOWN_MULTIPLE_KEY } from './context'
+
+interface Props extends SelectItemProps {
+  title?: string
+  description?: string
+  icon?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  title: undefined,
+  description: undefined,
+  icon: undefined,
+})
+
+// `UiDropdown` provides this when `multiple` is set so items render a
+// leading checkbox automatically. Falls back to single-select behavior
+// when the item is used outside a `UiDropdown` (defensive default).
+const isMultiple = inject(UI_DROPDOWN_MULTIPLE_KEY, undefined)
+</script>
+
+<template>
+  <SelectItem
+    v-bind="$attrs"
+    :value="value"
+    :disabled="disabled"
+    class="focus-indicator-none group flex px-3 py-1 rounded-md cursor-pointer outline-hidden transition-all duration-150 ease-in-out data-highlighted:bg-actions-neutral-hover-overlay data-[state=checked]:bg-actions-primary-active-overlay data-disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:pointer-events-none"
+  >
+    <div class="flex flex-1 gap-2 items-center overflow-hidden">
+      <!-- Multi-select indicator: visually mirrors `UiInputCheckbox` (same
+           size, border radius, primary fill, and `i-ls-checkbox-check`
+           icon) without dragging in the input's runtime/a11y plumbing.
+           Driven entirely by the parent `SelectItem`'s `data-[state=checked]`
+           attribute — no per-item state. -->
+      <div
+        v-if="isMultiple"
+        class="shrink-0 size-4 rounded-sm border border-borders-neutral-strong bg-surface-neutral-bg-main grid place-content-center transition-colors group-data-[state=checked]:bg-actions-primary-idle group-data-[state=checked]:border-borders-primary-default"
+      >
+        <div class="i-ls-checkbox-check size-3 text-actions-neutral-invert-idle opacity-0 group-data-[state=checked]:opacity-100" />
+      </div>
+
+      <div
+        v-if="icon"
+        :class="[icon, 'size-4']"
+        class="shrink-0 group-data-highlighted:text-actions-neutral-idle group-data-[state=checked]:text-actions-primary-idle"
+      />
+
+      <div class="flex flex-1 flex-col items-start justify-center min-w-0 py-1.5">
+        <SelectItemText class="whitespace-nowrap text-content-text-md-regular text-actions-neutral-idle group-data-highlighted:text-actions-neutral-idle group-data-[state=checked]:text-actions-primary-idle">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </SelectItemText>
+        <div
+          v-if="description || $slots.description"
+          class="text-content-legends-medium-md text-text-neutral-secondary group-data-highlighted:text-text-neutral-secondary group-data-[state=checked]:text-text-primary-secondary"
+        >
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </div>
+      </div>
+
+      <div
+        v-if="$slots.right"
+        class="shrink-0 ml-auto"
+      >
+        <slot name="right" />
+      </div>
+    </div>
+  </SelectItem>
+</template>

package/src/components/UiDropdown/UiDropdownSeparator.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { SelectSeparator } from 'reka-ui'
+</script>
+
+<template>
+  <SelectSeparator class="h-px bg-borders-neutral-light my-1 -mx-2 relative" />
+</template>

package/src/components/UiDropdown/UiDropdownTrigger.vue

@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import type { SelectTriggerProps } from 'reka-ui'
+import { SelectIcon, SelectTrigger, SelectValue } from 'reka-ui'
+import { computed, useSlots } from 'vue'
+import { useButtonStyles } from '../../composables/useButtonStyles'
+
+type TSize = 'sm' | 'md' | 'lg' | 'xl'
+type TColor = 'neutral' | 'primary'
+// Mirrors a subset of `UiButton`'s variants: `secondary` is the bordered field
+// (the default), `tertiary` is the borderless, text-only look.
+type TVariant = 'secondary' | 'tertiary'
+
+interface Props extends SelectTriggerProps {
+  placeholder?: string
+  showIcon?: boolean
+  disabled?: boolean
+  size?: TSize
+  /**
+   * Visual color of the trigger. Defaults to `neutral` (the standard field
+   * look). `primary` mirrors the primary action palette and is intended for
+   * filter chips that need to stand out next to a button group.
+   */
+  color?: TColor
+  /**
+   * Visual variant, named to match `UiButton`. `secondary` (default) is the
+   * bordered field look. `tertiary` drops the border + background to read like
+   * a `UiButton` tertiary — the trigger shows only colored text with a hover
+   * overlay, so it sits flush next to tertiary buttons (e.g. a "View all" CTA).
+   */
+  variant?: TVariant
+  error?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: undefined,
+  showIcon: true,
+  disabled: false,
+  size: 'md',
+  color: 'neutral',
+  variant: 'secondary',
+  error: false,
+})
+
+const slots = useSlots()
+
+// Shared button styling — both variants pull their background / border / text /
+// overlay tokens from the same source `UiButton` uses, so the trigger stays in
+// lockstep with the button palette. `error` maps onto the button `error` color;
+// otherwise the trigger's `primary`/`neutral` colors line up 1:1.
+const buttonColor = computed(() => (props.error ? 'error' as const : props.color))
+const { textClass, bgClass, borderClasses, beforeHoverOverlayClass } = useButtonStyles({
+  variant: () => props.variant,
+  color: buttonColor,
+  disabled: () => props.disabled,
+})
+
+const sizeClasses = computed(() => {
+  const sizes = {
+    sm: {
+      field: 'h-8 px-2 gap-1',
+      text: 'text-action-button-sm tracking-[0.05px]',
+      icon: 'size-3',
+      padding: 'px-2',
+    },
+    md: {
+      field: 'h-10 px-3 gap-1.5',
+      text: 'text-action-button-md leading-[20px] tracking-[-0.04px]',
+      icon: 'size-4',
+      padding: 'px-3',
+    },
+    lg: {
+      field: 'h-12 px-4 gap-2',
+      text: 'text-action-button-lg leading-[20px] tracking-[-0.04px]',
+      icon: 'size-4',
+      padding: 'px-4',
+    },
+    xl: {
+      field: 'h-16 px-4 gap-2',
+      text: 'text-action-button-lg leading-[24px] tracking-[-0.04px]',
+      icon: 'size-6',
+      padding: 'px-4',
+    },
+  }
+
+  return sizes[props.size]
+})
+
+const fieldClasses = computed(() => {
+  const base = [
+    'focus-indicator-none',
+    'group',
+    'flex',
+    'items-center',
+    'justify-between',
+    'w-full',
+    'rounded-lg',
+    'border',
+    'border-solid',
+    'transition-all',
+    'duration-150',
+    'ease-in-out',
+    'relative',
+    'cursor-pointer',
+    'font-medium',
+    'focus:outline-hidden',
+    'focus-visible:ring-1',
+    'focus-visible:ring-inset',
+    // Hover overlay via ::before
+    "before:content-['']",
+    'before:absolute',
+    'before:inset-0',
+    'before:rounded-[inherit]',
+    'before:opacity-0',
+    'before:transition-opacity',
+    'before:duration-150',
+    'before:ease-in-out',
+    'before:pointer-events-none',
+    'before:z-1',
+    'hover:not-data-disabled:before:opacity-100',
+    // Children above overlay
+    '[&>*]:relative',
+    '[&>*]:z-2',
+    sizeClasses.value.field,
+  ]
+
+  const state = []
+
+  if (props.disabled) {
+    state.push('opacity-50', '!cursor-not-allowed')
+  }
+
+  // Background / border / hover overlay all come from `useButtonStyles`, keyed
+  // by `variant` × `buttonColor` — the exact tokens `UiButton` uses. Tertiary
+  // resolves to no border/bg (transparent), secondary to the bordered field.
+  if (props.variant === 'tertiary') {
+    state.push('border-transparent', 'bg-transparent')
+  }
+  else {
+    state.push(bgClass.value, ...borderClasses.value)
+  }
+  if (beforeHoverOverlayClass.value) state.push(beforeHoverOverlayClass.value)
+
+  // Focus ring + open-state border are trigger-specific (a button has no
+  // open state). Error keeps its danger-colored focus ring; everything else
+  // uses the standard primary focus highlight.
+  if (props.error) {
+    state.push(
+      'focus-visible:border-borders-danger-strong',
+      'focus-visible:ring-borders-danger-strong',
+      'data-[state=open]:border-borders-danger-strong',
+    )
+  }
+  else {
+    state.push('focus-visible:ring-focus-ring')
+    if (props.variant !== 'tertiary') {
+      state.push(
+        'focus-visible:border-actions-primary-idle-alpha-strong',
+        'data-[state=open]:border-actions-primary-idle-alpha-strong',
+      )
+    }
+  }
+
+  return [...base, ...state].join(' ')
+})
+
+const isPrimary = computed(() => !props.error && props.color === 'primary')
+const isTertiary = computed(() => props.variant === 'tertiary')
+
+const textClasses = computed(() => {
+  // Tertiary defers its text color to the shared button palette so it matches
+  // a `UiButton variant="tertiary"` of the same color. Secondary keeps the
+  // field text tokens (filled value reads as body text, not an action label).
+  const colorClass = isTertiary.value
+    ? textClass.value
+    : isPrimary.value ? 'text-actions-primary-idle' : 'text-text-neutral-base'
+  // Placeholder color: primary (incl. tertiary-primary) keeps the primary
+  // token so an empty filter chip still reads as actionable; everything else
+  // uses the muted placeholder token.
+  const placeholderClass = (isPrimary.value || (isTertiary.value && props.color === 'primary'))
+    ? 'group-data-placeholder:text-actions-primary-idle'
+    : 'group-data-placeholder:text-text-neutral-tertiary'
+  return [
+    'flex-1',
+    'overflow-hidden',
+    'text-ellipsis',
+    'whitespace-nowrap',
+    'min-w-0',
+    'text-left',
+    colorClass,
+    placeholderClass,
+    sizeClasses.value.text,
+  ].join(' ')
+})
+
+const iconContainerClasses = computed(() => {
+  return [
+    'flex',
+    'items-center',
+    'justify-center',
+    'shrink-0',
+    'transition-transform',
+    'duration-200',
+    'ease-in-out',
+    isTertiary.value
+      ? textClass.value
+      : isPrimary.value ? 'text-actions-primary-idle' : 'text-text-neutral-tertiary',
+    sizeClasses.value.icon,
+  ].join(' ')
+})
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="$attrs"
+    :class="fieldClasses"
+    :disabled="disabled"
+  >
+    <div :class="textClasses">
+      <SelectValue
+        v-if="!slots.value"
+        :placeholder="placeholder"
+      />
+      <slot
+        v-else
+        name="value"
+      />
+    </div>
+
+    <SelectIcon
+      v-if="showIcon"
+      :class="iconContainerClasses"
+    >
+      <div
+        class="i-ls-chevron-down transition-transform duration-200 ease-in-out group-data-[state=open]:rotate-180"
+        :class="sizeClasses.icon"
+      />
+    </SelectIcon>
+  </SelectTrigger>
+</template>

package/src/components/UiDropdown/context.ts

@@ -0,0 +1,9 @@
+import type { ComputedRef, InjectionKey } from 'vue'
+
+/**
+ * Injection key consumed by `UiDropdownItem` so it can render a leading
+ * checkbox automatically when the parent `UiDropdown` is in multi-select
+ * mode. `UiDropdown` provides this; `UiDropdownItem` injects it.
+ */
+export const UI_DROPDOWN_MULTIPLE_KEY: InjectionKey<ComputedRef<boolean>> =
+  Symbol('ui-dropdown-multiple')

package/src/components/UiDropdown/index.ts

@@ -0,0 +1,21 @@
+// UiDropdown exports
+export { default as UiDropdown } from './UiDropdown.vue'
+export { default as UiDropdownTrigger } from './UiDropdownTrigger.vue'
+export { default as UiDropdownContent } from './UiDropdownContent.vue'
+export { default as UiDropdownItem } from './UiDropdownItem.vue'
+export { default as UiDropdownSeparator } from './UiDropdownSeparator.vue'
+
+// Re-export useful Reka UI types and components for advanced usage
+export {
+  SelectGroup,
+  SelectLabel,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+  SelectArrow,
+  type SelectRootProps,
+  type SelectRootEmits,
+  type SelectContentProps,
+  type SelectContentEmits,
+  type SelectItemProps,
+  type SelectTriggerProps,
+} from 'reka-ui'

package/src/components/UiEmptyState/UiEmptyState.vue

@@ -0,0 +1,80 @@
+<!-- UiEmptyState.vue - Empty state component for showing placeholder content with optional illustration and actions. -->
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+
+export interface UiEmptyStateProps {
+  /** Title shown as the primary heading */
+  title: string
+  /** Optional secondary description below the title */
+  description?: string
+  /** Optional illustration image URL */
+  image?: string
+  /** Layout orientation. `vertical` stacks the illustration above the text; `horizontal` places it to the right. */
+  variant?: 'vertical' | 'horizontal'
+}
+
+const props = withDefaults(defineProps<UiEmptyStateProps>(), {
+  description: undefined,
+  image: undefined,
+  variant: 'vertical',
+})
+
+const slots = useSlots()
+const hasActions = computed(() => !!(slots['primary-action'] || slots['secondary-action']))
+
+const isHorizontal = computed(() => props.variant === 'horizontal')
+</script>
+
+<template>
+  <div
+    class="flex gap-8 justify-center mx-auto"
+    :class="isHorizontal
+      ? 'flex-row items-center max-w-[576px] min-w-[384px]'
+      : 'flex-col items-center max-w-[320px] min-w-[256px]'"
+  >
+    <img
+      v-if="image && !isHorizontal"
+      :src="image"
+      alt=""
+      class="w-[270px]"
+    >
+
+    <div
+      class="flex flex-col gap-4 w-full"
+      :class="isHorizontal ? 'items-start' : 'items-center'"
+    >
+      <div
+        class="flex flex-col gap-2 w-full"
+        :class="isHorizontal ? 'items-start text-left' : 'items-center text-center'"
+      >
+        <h3 class="text-title-sm-bold text-text-neutral-base">
+          {{ title }}
+        </h3>
+        <p
+          v-if="description"
+          class="text-content-text-md-regular text-text-neutral-tertiary"
+        >
+          {{ description }}
+        </p>
+      </div>
+
+      <div
+        v-if="hasActions"
+        class="flex gap-2"
+        :class="isHorizontal
+          ? 'flex-row items-start'
+          : 'flex-col items-center w-full'"
+      >
+        <slot name="primary-action" />
+        <slot name="secondary-action" />
+      </div>
+    </div>
+
+    <img
+      v-if="image && isHorizontal"
+      :src="image"
+      alt=""
+      class="size-40 shrink-0"
+    >
+  </div>
+</template>

package/src/components/UiFieldWrapper/UiFieldWrapper.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Label, useId } from 'reka-ui'
+
+interface Props {
+  id?: string
+  label?: string
+  required?: boolean
+  labelInfo?: string
+  error?: boolean
+  helperMessage?: string
+  errorMessage?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  id: undefined,
+  label: undefined,
+  required: false,
+  labelInfo: undefined,
+  error: false,
+  helperMessage: undefined,
+  errorMessage: undefined,
+})
+
+const generatedId = useId()
+const fieldId = computed(() => props.id ?? generatedId)
+
+const displayMessage = computed(() => {
+  if (props.error && props.errorMessage) {
+    return props.errorMessage
+  }
+  return props.helperMessage
+})
+
+defineExpose({ fieldId })
+</script>
+
+<template>
+  <div>
+    <!-- Label -->
+    <div
+      v-if="label"
+      class="flex items-start gap-1 mb-1"
+    >
+      <Label
+        :for="fieldId"
+        class="text-content-legends-bold-md text-text-neutral-tertiary"
+      >
+        {{ label }}{{ required ? '*' : '' }}
+      </Label>
+      <div
+        v-if="labelInfo"
+        v-tooltip="labelInfo"
+        class="flex items-center justify-center size-4 text-text-neutral-secondary cursor-help"
+      >
+        <span class="i-ls-info size-4" />
+      </div>
+    </div>
+
+    <!-- Input -->
+    <slot :field-id="fieldId" />
+
+    <!-- Message -->
+    <div
+      v-if="displayMessage || $slots['footer']"
+      class="flex items-center justify-between mt-1"
+    >
+      <p
+        v-if="displayMessage"
+        :id="`${fieldId}-message`"
+        class="text-content-legends-bold-md"
+        :class="error ? 'text-text-danger-secondary' : 'text-text-neutral-secondary'"
+      >
+        {{ displayMessage }}
+      </p>
+      <slot name="footer" />
+    </div>
+  </div>
+</template>

package/src/components/UiFieldWrapper/index.ts

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

package/src/components/UiForm/UiFormField.types.ts

@@ -0,0 +1,24 @@
+import type { VueFormApi } from '@tanstack/vue-form'
+
+/**
+ * VueFormApi has 12 generic parameters (form data + 11 validator slots).
+ * UiFormField only needs the form data type for field name inference —
+ * the validator configuration is irrelevant here, so we accept any.
+ */
+export type AnyVueForm<T extends object> = VueFormApi<T, any, any, any, any, any, any, any, any, any, any, any>
+
+export interface UiFormFieldProps<TFormData extends object, TName extends keyof TFormData & string> {
+  form: AnyVueForm<TFormData>
+  name: TName
+  label?: string
+  required?: boolean
+  labelInfo?: string
+  helperMessage?: string
+  /**
+   * When to show validation errors
+   * - 'touched': only after the field has been blurred (default)
+   * - 'always': show errors immediately
+   * - 'submit': only after form submission attempt
+   */
+  showErrors?: 'touched' | 'always' | 'submit'
+}

package/src/components/UiForm/UiFormField.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts" generic="TFormData extends object, TName extends keyof TFormData & string">
+import UiFieldWrapper from '../UiFieldWrapper/UiFieldWrapper.vue'
+import type { UiFormFieldProps } from './UiFormField.types'
+
+defineOptions({ inheritAttrs: false })
+
+type Props = UiFormFieldProps<TFormData, TName>
+
+const props = withDefaults(defineProps<Props>(), {
+  label: undefined,
+  required: false,
+  labelInfo: undefined,
+  helperMessage: undefined,
+  showErrors: 'touched',
+})
+
+const submissionAttempts = props.form.useStore(s => s.submissionAttempts)
+
+function shouldShowError (state: { meta: { isTouched: boolean; errors: unknown[] } }) {
+  const gateOpen = props.showErrors === 'always' ||
+    (props.showErrors === 'touched' && state.meta.isTouched) ||
+    (props.showErrors === 'submit' && submissionAttempts.value > 0)
+  return gateOpen && state.meta.errors.length > 0
+}
+</script>
+
+<template>
+  <props.form.Field
+    :name="name"
+    v-bind="$attrs"
+  >
+    <template #default="{ field, state }">
+      <UiFieldWrapper
+        :label="label"
+        :required="required"
+        :label-info="labelInfo"
+        :error="shouldShowError(state)"
+        :error-message="(state.meta.errors[0] as unknown as string)"
+        :helper-message="helperMessage"
+      >
+        <template #default="{ fieldId }">
+          <slot
+            :field="field"
+            :state="state"
+            :field-id="fieldId"
+            :field-message-id="`${fieldId}-message`"
+            :errors="state.meta.errors"
+            :has-error="shouldShowError(state)"
+            :is-touched="state.meta.isTouched"
+          />
+        </template>
+
+        <template
+          v-if="$slots.footer"
+          #footer
+        >
+          <slot
+            name="footer"
+            :field="field"
+            :state="state"
+          />
+        </template>
+      </UiFieldWrapper>
+    </template>
+  </props.form.Field>
+</template>

package/src/components/UiForm/index.ts

@@ -0,0 +1,3 @@
+export { default as UiFormField } from './UiFormField.vue'
+export { useForm } from '@tanstack/vue-form'
+export type { VueFormApi } from '@tanstack/vue-form'