@livestorm/ui-vue 1.1.2 → 2.0.0

package/src/components/UiTextField/UiTextField.vue

@@ -0,0 +1,370 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, useSlots } from 'vue'
+import UiFieldWrapper from '../UiFieldWrapper/UiFieldWrapper.vue'
+import type { TextFieldSize } from './types'
+
+interface UiTextFieldProps {
+  size?: TextFieldSize
+  modelValue?: string
+  placeholder?: string
+  disabled?: boolean
+  loading?: boolean
+  error?: boolean
+  label?: string
+  required?: boolean
+  labelInfo?: string
+  helperMessage?: string
+  errorMessage?: string
+  clearable?: boolean
+  type?: string
+  name?: string
+  autocomplete?: string
+  id?: string
+  ariaLabel?: string
+  ariaDescribedby?: string
+}
+
+const props = withDefaults(defineProps<UiTextFieldProps>(), {
+  size: 'md',
+  disabled: false,
+  loading: false,
+  error: false,
+  required: false,
+  clearable: false,
+  type: 'text',
+  modelValue: '',
+  ariaLabel: undefined,
+  ariaDescribedby: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'clear': []
+  'focus': [event: FocusEvent]
+  'blur': [event: FocusEvent]
+  'keydown': [event: KeyboardEvent]
+  'keyup': [event: KeyboardEvent]
+}>()
+
+const slots = useSlots()
+const textFieldRef = ref<HTMLInputElement | null>(null)
+const isFocused = ref(false)
+
+const hasLeftIcon = computed(() => !!slots.icon)
+const hasRightAction = computed(() => !!slots['right-action'])
+const showClearButton = computed(() => props.clearable && !!props.modelValue && !props.disabled && !props.loading)
+
+const textFieldClasses = computed(() => {
+  const classes = ['ui-text-field-field']
+
+  // Size classes
+  if (props.size === 'sm') classes.push('h-8 text-content-text-md-regular')
+  if (props.size === 'md') classes.push('h-10 text-content-text-md-regular')
+  if (props.size === 'lg') classes.push('h-12 text-content-text-md-regular')
+  if (props.size === 'xl') classes.push('h-16 text-content-text-md-regular')
+
+  // State classes
+  if (props.error) {
+    classes.push('ui-text-field-field--error')
+  } else {
+    classes.push('ui-text-field-field--default')
+  }
+
+  if (props.disabled) classes.push('ui-text-field-field--disabled')
+  if (isFocused.value && !props.disabled) classes.push('ui-text-field-field--focused')
+
+  return classes
+})
+
+function handleInput (event: Event) {
+  const target = event.target as HTMLInputElement
+  emit('update:modelValue', target.value)
+}
+
+function handleClear () {
+  emit('update:modelValue', '')
+  emit('clear')
+  textFieldRef.value?.focus()
+}
+
+function handleFocus (event: FocusEvent) {
+  isFocused.value = true
+  emit('focus', event)
+}
+
+function handleBlur (event: FocusEvent) {
+  isFocused.value = false
+  emit('blur', event)
+}
+
+function handleKeydown (event: KeyboardEvent) {
+  emit('keydown', event)
+}
+
+function handleKeyup (event: KeyboardEvent) {
+  emit('keyup', event)
+}
+
+defineExpose({
+  focus: () => textFieldRef.value?.focus(),
+  blur: () => textFieldRef.value?.blur(),
+  insertAtCursor: (text: string) => {
+    const input = textFieldRef.value
+    if (!input) return
+    const start = input.selectionStart ?? input.value.length
+    const end = input.selectionEnd ?? start
+    const before = input.value.slice(0, start)
+    const after = input.value.slice(end)
+    const newValue = before + text + after
+    emit('update:modelValue', newValue)
+    // Restore cursor position after the inserted text
+    nextTick(() => {
+      const pos = start + text.length
+      input.setSelectionRange(pos, pos)
+      input.focus()
+    })
+  },
+})
+</script>
+
+<template>
+  <UiFieldWrapper
+    :id="id"
+    :label="label"
+    :required="required"
+    :label-info="labelInfo"
+    :error="error"
+    :helper-message="helperMessage"
+    :error-message="errorMessage"
+  >
+    <template #default="{ fieldId }">
+      <!-- Input Field -->
+      <div :class="textFieldClasses">
+        <!-- Hover/Focus Overlay -->
+        <div class="ui-text-field-overlay" />
+
+        <!-- Left Icon Slot -->
+        <div
+          v-if="hasLeftIcon"
+          class="ui-text-field-icon text-text-neutral-base"
+          :class="{
+            'size-3': size === 'sm',
+            'size-4': size === 'md' || size === 'lg',
+            'size-5': size === 'xl',
+          }"
+        >
+          <slot name="icon" />
+        </div>
+
+        <!-- Input Element -->
+        <input
+          :id="id || fieldId"
+          ref="textFieldRef"
+          :type="type"
+          :name="name"
+          :value="modelValue"
+          :placeholder="placeholder"
+          :disabled="disabled || loading"
+          :autocomplete="autocomplete"
+          :aria-label="ariaLabel"
+          :aria-invalid="error || undefined"
+          :aria-describedby="ariaDescribedby || ((helperMessage || errorMessage) ? `${fieldId}-message` : undefined)"
+          class="ui-text-field-element text-text-neutral-base placeholder:text-text-neutral-tertiary"
+          @input="handleInput"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @keydown="handleKeydown"
+          @keyup="handleKeyup"
+        >
+
+        <!-- Right Actions -->
+        <div
+          v-if="loading || showClearButton"
+          class="ui-text-field-actions"
+        >
+          <!-- Loading Spinner -->
+          <div
+            v-if="loading"
+            class="ui-text-field-loader"
+          >
+            <span class="loader" />
+          </div>
+
+          <!-- Clear Button -->
+          <button
+            v-else-if="showClearButton"
+            type="button"
+            class="ui-text-field-clear text-text-neutral-base hover:text-text-neutral-secondary"
+            :class="{
+              'size-3': size === 'sm',
+              'size-4': size === 'md' || size === 'lg',
+              'size-5': size === 'xl',
+            }"
+            @click="handleClear"
+          >
+            <div class="i-ls-x size-full" />
+          </button>
+        </div>
+
+        <!-- Right Action Slot (e.g. variable picker trigger) -->
+        <div
+          v-if="hasRightAction"
+          class="ui-text-field-actions"
+        >
+          <slot name="right-action" />
+        </div>
+      </div>
+    </template>
+  </UiFieldWrapper>
+</template>
+
+<style scoped>
+@reference '@livestorm/ui-tokens/output/supernova/index.css';
+
+.ui-text-field-field {
+  @apply relative flex items-center gap-1.5 w-full rounded-lg border transition-all;
+  @apply pl-3 pr-0;
+}
+
+.ui-text-field-field--default {
+  @apply bg-actions-neutral-idle-alpha-light border-borders-neutral-strong;
+
+  &:not(.ui-text-field-field--disabled) {
+    &:hover .ui-text-field-overlay {
+      @apply bg-actions-neutral-hover-overlay;
+    }
+
+    &.ui-text-field-field--focused {
+      @apply border-actions-primary-idle-alpha-strong ring-1 ring-inset ring-focus-ring;
+
+      .ui-text-field-overlay {
+        background: transparent;
+      }
+    }
+  }
+}
+
+.ui-text-field-field--error {
+  @apply bg-actions-danger-idle-alpha-light border-borders-danger-strong;
+
+  &:not(.ui-text-field-field--disabled) {
+    &:hover .ui-text-field-overlay {
+      @apply bg-actions-danger-hover-overlay;
+    }
+
+    &.ui-text-field-field--focused {
+      @apply border-borders-danger-strong ring-1 ring-inset ring-borders-danger-strong;
+
+      .ui-text-field-overlay {
+        background: transparent;
+      }
+    }
+  }
+}
+
+.ui-text-field-field--disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+.ui-text-field-overlay {
+  @apply absolute inset-0 rounded-lg pointer-events-none transition-colors;
+  z-index: 1;
+}
+
+.ui-text-field-icon {
+  @apply shrink-0 flex items-center justify-center;
+  position: relative;
+  z-index: 2;
+}
+
+/* Edge fade widths, animated by the keyframes below. @property gives them an
+ * interpolatable <length>; the 0px initial value shows when the animation is
+ * inactive. Namespaced because @property registers globally (unlike keyframes). */
+@property --ui-text-field-fade-left {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --ui-text-field-fade-right {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
+.ui-text-field-element {
+  @apply flex-1 text-content-text-md-regular min-w-0;
+  background: transparent;
+  border: none;
+  outline: none;
+  position: relative;
+  z-index: 2;
+
+  /* The input scrolls its own text; mark it as a scroll container so the fade
+   * animation can track its scroll position, and hide the (rare) native bar. */
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  /* Fade the text out at whichever edge overflows, driven by the input's own
+   * scroll position via scroll(self x) — no JS. When the value fits, the scroll
+   * timeline is inactive so the widths hold at 0px (no fade); same graceful
+   * fallback where scroll timelines aren't supported (e.g. Firefox by default). */
+  -webkit-mask-image: linear-gradient(to right, #0000, #000 var(--ui-text-field-fade-left), #000 calc(100% - var(--ui-text-field-fade-right)), #0000);
+  mask-image: linear-gradient(to right, #0000, #000 var(--ui-text-field-fade-left), #000 calc(100% - var(--ui-text-field-fade-right)), #0000);
+  animation: ui-text-field-fade linear;
+  animation-timeline: scroll(self x);
+
+  &:disabled {
+    @apply cursor-not-allowed;
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@keyframes ui-text-field-fade {
+  /* Left fades in once scrolled off the start; right stays faded until the end. */
+  0% {
+    --ui-text-field-fade-left: 0px;
+  }
+  10%, 100% {
+    --ui-text-field-fade-left: 1.5rem;
+  }
+  0%, 90% {
+    --ui-text-field-fade-right: 1.5rem;
+  }
+  100% {
+    --ui-text-field-fade-right: 0px;
+  }
+}
+
+.ui-text-field-actions {
+  @apply flex items-center justify-center px-3 h-full rounded-lg;
+  position: relative;
+  z-index: 2;
+}
+
+.ui-text-field-loader {
+  @apply flex items-center justify-center;
+
+  .loader {
+    @apply w-4 h-4 rounded-full animate-spin;
+    border: 2px solid currentColor;
+    border-top-color: transparent;
+  }
+}
+
+.ui-text-field-clear {
+  @apply shrink-0 flex items-center justify-center cursor-pointer transition-colors;
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 0;
+
+  &:focus-visible {
+    @apply ring-2 ring-borders-neutral-strong rounded;
+  }
+}
+</style>

package/src/components/UiTextField/index.ts

@@ -0,0 +1,2 @@
+export { default as UiTextField } from './UiTextField.vue'
+export * from './types'

package/src/components/UiTextField/types.ts

@@ -0,0 +1,2 @@
+export const TEXT_FIELD_SIZES = ['sm', 'md', 'lg', 'xl'] as const
+export type TextFieldSize = typeof TEXT_FIELD_SIZES[number]

package/src/components/UiTimeline/README.md

@@ -0,0 +1,169 @@
+# UiTimeline
+
+A flexible timeline component for displaying chronological events with various visual states.
+
+## Components
+
+- `UiTimeline` - Container component for timeline items
+- `UiTimelineItem` - Individual timeline event/item
+
+## Basic Usage
+
+```vue
+<template>
+  <UiTimeline>
+    <UiTimelineItem>
+      <div>
+        <h4>Event Title</h4>
+        <p>Event description</p>
+        <span>2 hours ago</span>
+      </div>
+    </UiTimelineItem>
+    <UiTimelineItem>
+      <div>
+        <h4>Another Event</h4>
+        <p>Another description</p>
+        <span>1 day ago</span>
+      </div>
+    </UiTimelineItem>
+  </UiTimeline>
+</template>
+```
+
+## Props
+
+### UiTimeline
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `orientation` | `'vertical' \| 'horizontal'` | `'vertical'` | Orientation of the timeline |
+
+### UiTimelineItem
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'default' \| 'primary' \| 'success' \| 'warning' \| 'danger'` | `'default'` | Visual variant of the timeline item |
+| `showConnector` | `boolean` | `true` | Whether to show the connecting line |
+| `indicatorSize` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size of the indicator dot |
+| `indicatorIcon` | `string` | `undefined` | Custom icon class for the indicator (e.g., `'i-ls-check-circle'`) |
+
+## Examples
+
+### With Variants
+
+```vue
+<UiTimeline>
+  <UiTimelineItem variant="primary">
+    <div>Primary event</div>
+  </UiTimelineItem>
+  <UiTimelineItem variant="success">
+    <div>Success event</div>
+  </UiTimelineItem>
+  <UiTimelineItem variant="warning">
+    <div>Warning event</div>
+  </UiTimelineItem>
+  <UiTimelineItem variant="danger">
+    <div>Danger event</div>
+  </UiTimelineItem>
+</UiTimeline>
+```
+
+### With Icons
+
+```vue
+<UiTimeline>
+  <UiTimelineItem variant="primary" indicator-icon="i-ls-user" indicator-size="md">
+    <div>User registered</div>
+  </UiTimelineItem>
+  <UiTimelineItem variant="success" indicator-icon="i-ls-check-circle" indicator-size="md">
+    <div>Email verified</div>
+  </UiTimelineItem>
+  <UiTimelineItem variant="success" indicator-icon="i-ls-play-fill" indicator-size="md">
+    <div>Setup complete</div>
+  </UiTimelineItem>
+</UiTimeline>
+```
+
+### With Rich Content
+
+```vue
+<UiTimeline>
+  <UiTimelineItem variant="primary" indicator-icon="i-ls-user" indicator-size="md">
+    <div>
+      <div class="flex items-center gap-2 mb-2">
+        <h4 class="text-content-text-md-bold font-semibold">John Doe joined</h4>
+        <UiBadge color="primary" :count="1" />
+      </div>
+      <p class="text-content-text-md-regular text-text-neutral-secondary">
+        New team member added
+      </p>
+      <UiCard variant="transparent" padding="sm">
+        <div class="flex items-center gap-3">
+          <div class="w-10 h-10 rounded-full bg-surface-primary-alpha-200">
+            <!-- Avatar -->
+          </div>
+          <div>
+            <p class="font-semibold">John Doe</p>
+            <p class="text-xs text-text-neutral-tertiary">Marketing Manager</p>
+          </div>
+        </div>
+      </UiCard>
+      <span class="text-xs text-text-neutral-tertiary mt-3">Today at 2:30 PM</span>
+    </div>
+  </UiTimelineItem>
+</UiTimeline>
+```
+
+### Different Sizes
+
+```vue
+<UiTimeline>
+  <UiTimelineItem indicator-size="sm">
+    <div>Small indicator</div>
+  </UiTimelineItem>
+  <UiTimelineItem indicator-size="md">
+    <div>Medium indicator (default)</div>
+  </UiTimelineItem>
+  <UiTimelineItem indicator-size="lg">
+    <div>Large indicator</div>
+  </UiTimelineItem>
+</UiTimeline>
+```
+
+### Billing History Example
+
+```vue
+<UiTimeline>
+  <UiTimelineItem variant="success" indicator-icon="i-ls-check-circle" indicator-size="md">
+    <div>
+      <div class="flex items-center justify-between mb-2">
+        <h4 class="font-semibold">Payment Successful</h4>
+        <span class="font-semibold">$149.00</span>
+      </div>
+      <p class="text-sm text-text-neutral-secondary mb-2">
+        Monthly subscription - Pro Plan
+      </p>
+      <div class="flex items-center gap-2">
+        <UiBadge color="success" variant="light" />
+        <span class="text-xs text-text-success-base">Completed</span>
+      </div>
+      <span class="text-xs text-text-neutral-tertiary mt-2">Dec 15, 2025</span>
+    </div>
+  </UiTimelineItem>
+</UiTimeline>
+```
+
+## Design Tokens
+
+The component uses semantic design tokens from the design system:
+
+- Surface tokens: `bg-surface-{variant}-alpha-{weight}`
+- Text tokens: `text-text-{variant}-{level}`
+- Border tokens: `border-borders-{variant}-{weight}`
+
+## Notes
+
+- The connector line is automatically hidden for the last timeline item
+- Content area padding is automatically adjusted for the last item
+- Icon indicators will expand the indicator size to accommodate the icon
+- Slots provide full flexibility for custom content within timeline items

package/src/components/UiTimeline/UiTimeline.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+interface Props {
+  /** Orientation of the timeline */
+  orientation?: 'vertical' | 'horizontal'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  orientation: 'vertical',
+})
+</script>
+
+<template>
+  <div
+    class="ui-timeline"
+    :class="{
+      'ui-timeline--vertical': props.orientation === 'vertical',
+      'ui-timeline--horizontal': props.orientation === 'horizontal',
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<style>
+@reference '@livestorm/ui-tokens/output/supernova/index.css';
+.ui-timeline--vertical {
+  @apply flex flex-col;
+}
+
+.ui-timeline--horizontal {
+  @apply flex flex-row items-start gap-6;
+}
+
+/* Horizontal mode adjustments for timeline items */
+.ui-timeline--horizontal .ui-timeline-item {
+  @apply flex-col items-center;
+  max-width: 200px;
+}
+
+.ui-timeline--horizontal .ui-timeline-item__indicator-wrapper {
+  @apply flex-row items-center;
+}
+
+.ui-timeline--horizontal .ui-timeline-item__connector {
+  @apply h-px w-auto mt-0 mb-0 ml-2;
+  min-width: 2rem;
+  min-height: auto;
+}
+
+.ui-timeline--horizontal .ui-timeline-item__content {
+  @apply pt-4 pb-0;
+}
+
+/* Hide horizontal connector for last item */
+.ui-timeline--horizontal .ui-timeline-item:last-child .ui-timeline-item__connector {
+  @apply hidden;
+}
+</style>