vlite3 0.1.0 → 0.1.2

package/src/components/ButtonGroup.vue

@@ -1,173 +0,0 @@
-<script setup lang="ts">
-import { computed, provide, toRef } from 'vue'
-import type { ButtonGroupDirection, ButtonVariant, ButtonSize } from '@/types'
-
-interface Props {
-  variant?: ButtonVariant
-  size?: ButtonSize
-  direction?: ButtonGroupDirection
-  attached?: boolean
-  class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  direction: 'horizontal',
-  attached: true,
-  class: '',
-})
-
-const isVertical = computed(() => props.direction === 'vertical')
-</script>
-
-<template>
-  <div
-    role="group"
-    :class="[
-      'inline-flex',
-      isVertical ? 'flex-col' : 'flex-row',
-      props.class,
-
-      attached ? 'attached-group' : 'gap-2',
-
-      // Vertical Attached
-      attached && isVertical ? 'vertical-group' : '',
-    ]">
-    <slot></slot>
-  </div>
-</template>
-
-<style scoped>
-/* Horizontal Attached (Default) */
-/* Horizontal Attached (Default) */
-.attached-group:not(.vertical-group) :deep(button) {
-  border-radius: 0;
-  /* border-right-width: 0; 
-     Note: we handle border overlap via margin-left: -1px below, so we keep border width.
-     Actually, if we rely on margin overlap, we don't need to zero the border width technically,
-     but we DO need to ensure corners are square.
-  */
-}
-
-/* Reset border reset */
-.attached-group:not(.vertical-group) :deep(button) {
-  /* Ensure border exists if it was removed elsewhere, standard standardizing */
-}
-
-/**
- * STRATEGY: Negative Margins for fused look with proper borders.
- * We need to ensure the focused button is raised (z-index) so the ring shows fully.
- */
-
-/* GENERAL SHARED */
-.attached-group :deep(button) {
-  position: relative;
-  /* Default rounded-md is usually 0.375rem (6px) or 0.25rem (4px). 
-       We use 0.375rem as safe default or 'inherit' if we could, 
-       but for specific corners we must set explicitly.
-    */
-  --radius: 0.375rem;
-}
-.attached-group :deep(button:focus-visible),
-.attached-group :deep(button:hover) {
-  z-index: 10;
-}
-
-/* HORIZONTAL */
-.attached-group:not(.vertical-group) :deep(button:not(:first-child)) {
-  margin-left: -1px; /* Overlap borders */
-}
-
-/* Rounded corners - Horizontal */
-/* First Child */
-.attached-group:not(.vertical-group) :deep(button:first-child) {
-  border-top-left-radius: var(--radius);
-  border-bottom-left-radius: var(--radius);
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-/* Middle Children */
-.attached-group:not(.vertical-group) :deep(button:not(:first-child):not(:last-child)) {
-  border-radius: 0;
-}
-/* Last Child */
-.attached-group:not(.vertical-group) :deep(button:last-child) {
-  border-top-right-radius: var(--radius);
-  border-bottom-right-radius: var(--radius);
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-/* Vertical */
-.vertical-group :deep(button:not(:first-child)) {
-  margin-top: -1px;
-}
-
-/* Rounded corners - Vertical */
-/* First */
-.vertical-group :deep(button:first-child) {
-  border-top-left-radius: var(--radius);
-  border-top-right-radius: var(--radius);
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-/* Middle */
-.vertical-group :deep(button:not(:first-child):not(:last-child)) {
-  border-radius: 0;
-}
-/* Last */
-.vertical-group :deep(button:last-child) {
-  border-bottom-left-radius: var(--radius);
-  border-bottom-right-radius: var(--radius);
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-/* --- DIVIDERS FOR SOLID VARIANTS --- */
-
-/* 
-   Strategy: Use a pseudo-element divider that inherits 'currentColor' (text color).
-   This ensures:
-   1. If button is dark (text white), divider is white/transparent.
-   2. If button is light (text black), divider is black/transparent.
-   3. Works automatically for new variants without hardcoding class names.
-   
-   Exclude .border classes (Outline variants) as they have their own borders.
-*/
-
-.attached-group:not(.vertical-group) :deep(button:not(:first-child):not(.border))::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0; /* Full height */
-  width: 1px;
-  background-color: currentColor;
-  opacity: 0.15; /* Subtle contrast */
-  z-index: 5; /* Above background, below sticky content */
-  pointer-events: none;
-  /* Adjust for vertical vertical centering if needed, but top:0 bottom:0 is safer for full stretch */
-}
-
-/* Vertical Dividers */
-.vertical-group :deep(button:not(:first-child):not(.border))::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0; /* Full width */
-  height: 1px;
-  background-color: currentColor;
-  opacity: 0.15;
-  z-index: 5;
-  pointer-events: none;
-  width: auto; /* Reset width from horizontal rule if cascading */
-}
-
-/* Ensure no conflict with horizontal rule on width for vertical */
-.vertical-group :deep(button:not(:first-child):not(.border))::before {
-  width: 100%;
-}
-.attached-group:not(.vertical-group) :deep(button:not(:first-child):not(.border))::before {
-  height: 100%;
-}
-</style>

package/src/components/Carousel/Carousel.vue

@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import VueCarouselLite from 'vue-carousel-lite'
-import 'vue-carousel-lite/style.css'
-import type { CarouselProps } from './types'
-
-const props = withDefaults(defineProps<CarouselProps>(), {
-  data: () => [],
-  pagination: 'dots',
-  paginationSize: 'md',
-  paginationPosition: 'bottom-center',
-  direction: 'horizontal',
-  autoPlay: false,
-  draggable: false,
-  autoPlayInterval: 3000,
-  itemsToShow: 1,
-  gap: 0,
-  speed: 300,
-  easing: 'ease',
-  mousewheel: true,
-  loop: false,
-  currentItem: 0,
-  bufferSize: 5,
-  maxDomElements: 10,
-  updateKey: undefined,
-})
-
-const emit = defineEmits<{
-  (e: 'slide-change', index: number): void
-}>()
-
-const carouselRef = ref<any>(null)
-
-// Expose methods
-const goToSlide = (index: number, smooth?: boolean) => {
-  carouselRef.value?.goToSlide(index, smooth)
-}
-
-const goNext = (smooth?: boolean) => {
-  carouselRef.value?.goNext(smooth)
-}
-
-const goPrev = (smooth?: boolean) => {
-  carouselRef.value?.goPrev(smooth)
-}
-
-const goNextPage = (smooth?: boolean) => {
-  carouselRef.value?.goNextPage(smooth)
-}
-
-const goPrevPage = (smooth?: boolean) => {
-  carouselRef.value?.goPrevPage(smooth)
-}
-
-defineExpose({
-  goToSlide,
-  goNext,
-  goPrev,
-  goNextPage,
-  goPrevPage,
-})
-</script>
-
-<template>
-  <div class="carousel-wrapper">
-    <VueCarouselLite
-      ref="carouselRef"
-      v-bind="props as any"
-      style="height: 100%; width: 100%"
-      @slide-change="(index) => emit('slide-change', index)">
-      <!-- Pass through all slots -->
-      <template v-for="(_, slot) in $slots" v-slot:[slot]="scope">
-        <slot :name="slot" v-bind="scope || {}" />
-      </template>
-    </VueCarouselLite>
-  </div>
-</template>
-
-<style scoped>
-.carousel-wrapper {
-  width: 100%;
-  position: relative;
-}
-</style>

package/src/components/Carousel/index.ts

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

package/src/components/Carousel/types.ts

@@ -1,25 +0,0 @@
-export interface CarouselProps {
-  data?: any[]
-  pagination?: string | string[] | boolean
-  paginationSize?: 'sm' | 'md' | 'lg'
-  paginationPosition?: string | string[]
-  paginationVisibility?: string | string[]
-  paginationHoverInitialTimeout?: number
-  paginationHoverEdgeThreshold?: number
-  direction?: 'horizontal' | 'vertical'
-  autoPlay?: boolean
-  draggable?: boolean
-  autoPlayInterval?: number
-  itemsToShow?: number | Record<number, number>
-  gap?: number
-  speed?: number
-  easing?: string
-  mousewheel?: boolean
-  loop?: boolean
-  currentItem?: number
-  bufferSize?: number
-  maxDomElements?: number
-  updateKey?: string | number
-  // Allow extra props
-  [key: string]: any
-}

package/src/components/CheckBox.vue

@@ -1,132 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import Icon from './Icon.vue'
-import Label from './Label.vue'
-import type { CheckboxSize, CheckboxRounded } from '@/types'
-
-interface Props {
-  modelValue?: boolean
-  checked?: boolean
-  disabled?: boolean
-  indeterminate?: boolean
-  label?: string
-  id?: string
-  class?: string
-  size?: CheckboxSize
-  rounded?: CheckboxRounded
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: false,
-  checked: false, // Alias
-  disabled: false,
-  indeterminate: false,
-  class: '',
-  size: 'md',
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
-  (e: 'update:checked', value: boolean): void
-}>()
-
-const toggle = () => {
-  if (props.disabled) return
-  const newValue = !(props.modelValue || props.checked)
-  emit('update:modelValue', newValue)
-  emit('update:checked', newValue)
-}
-
-const sizeClasses: Record<CheckboxSize, string> = {
-  xs: 'h-3.5 w-3.5',
-  sm: 'h-4 w-4',
-  md: 'h-4.5 w-4.5',
-  lg: 'h-5 w-5',
-  xl: 'h-5.5 w-5.5',
-}
-
-const iconSizeClasses: Record<CheckboxSize, string> = {
-  xs: 'h-2.5 w-2.5',
-  sm: 'h-3 w-3',
-  md: 'h-3.5 w-3.5',
-  lg: 'h-4 w-4',
-  xl: 'h-5 w-5',
-}
-
-const roundedClasses: Record<CheckboxRounded, string> = {
-  none: 'rounded-none',
-  xs: 'rounded-[3px]',
-  sm: 'rounded-[4px]',
-  md: 'rounded-sm',
-  lg: 'rounded-md',
-  xl: 'rounded-lg',
-  '2xl': 'rounded-xl',
-  full: 'rounded-full',
-}
-
-const buttonClass = computed(() => {
-  return [
-    'peer shrink-0 border border-primary transition-all duration-200 ease-in-out',
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2', // Kept ring for accessibility visibility on small elements
-    'disabled:cursor-not-allowed disabled:opacity-50',
-    'data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-    'data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground',
-    'cursor-pointer bg-transparent', // Default background
-    sizeClasses[props.size],
-    roundedClasses[props.rounded || props.size],
-    props.class,
-  ].join(' ')
-})
-
-const state = computed(() => {
-  if (props.indeterminate) return 'indeterminate'
-  return props.modelValue || props.checked ? 'checked' : 'unchecked'
-})
-
-const iconClass = computed(() => {
-  return [
-    'transition-transform duration-200',
-    state.value === 'checked' || state.value === 'indeterminate' ? 'scale-100' : 'scale-0',
-    iconSizeClasses[props.size],
-  ].join(' ')
-})
-</script>
-
-<template>
-  <div class="flex items-center space-x-2">
-    <button
-      type="button"
-      role="checkbox"
-      :aria-checked="indeterminate ? 'mixed' : modelValue"
-      :data-state="state"
-      :disabled="disabled"
-      :class="buttonClass"
-      :id="id"
-      @click="toggle">
-      <div
-        v-if="state === 'checked' || state === 'indeterminate'"
-        class="flex items-center justify-center text-current w-full h-full">
-        <Transition
-          enter-active-class="transition duration-200 ease-out"
-          enter-from-class="scale-50 opacity-0"
-          enter-to-class="scale-100 opacity-100"
-          leave-active-class="transition duration-150 ease-in"
-          leave-from-class="scale-100 opacity-100"
-          leave-to-class="scale-50 opacity-0">
-          <Icon v-if="state === 'checked'" icon="lucide:check" :class="iconSizeClasses[size]" />
-          <Icon
-            v-else-if="state === 'indeterminate'"
-            icon="lucide:minus"
-            :class="iconSizeClasses[size]" />
-        </Transition>
-      </div>
-    </button>
-    <Label
-      v-if="label"
-      :for="id"
-      class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
-      @click="toggle">
-      {{ label }}
-    </Label>
-  </div>
-</template>

package/src/components/Chip/Chip.vue

@@ -1,158 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import Icon from '../Icon.vue'
-import Button from '../Button.vue'
-import type { ChipProps, ChipVariant } from './types'
-
-const props = withDefaults(defineProps<ChipProps>(), {
-  variant: 'subtle',
-  size: 'medium',
-  disabled: false,
-  clickable: false,
-  deletable: false,
-  text: '',
-  class: '',
-})
-
-const emit = defineEmits<{
-  (e: 'click', event: MouseEvent): void
-  (e: 'delete', event: MouseEvent): void
-}>()
-
-const isInteractive = computed(() => props.clickable && !props.disabled)
-
-const handleClick = (e: MouseEvent) => {
-  if (props.disabled) return
-  if (props.clickable) {
-    emit('click', e)
-  }
-}
-
-const handleDelete = (e: MouseEvent) => {
-  if (props.disabled) return
-  e.stopPropagation()
-  emit('delete', e)
-}
-
-const handleKeyDown = (e: KeyboardEvent) => {
-  if (props.disabled) return
-  if (!props.clickable && !props.deletable) return
-
-  if (e.key === 'Enter' || e.key === ' ') {
-    e.preventDefault()
-    if (props.clickable) {
-      emit('click', e as unknown as MouseEvent)
-    }
-  }
-
-  if (e.key === 'Backspace' || e.key === 'Delete') {
-    if (props.deletable) {
-      e.preventDefault()
-      emit('delete', e as unknown as MouseEvent)
-    }
-  }
-}
-
-const baseClasses =
-  'inline-flex items-center justify-center font-medium rounded-full transition-all duration-200 border box-border whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary'
-
-const sizeClasses = computed(() => {
-  switch (props.size) {
-    case 'small':
-      return 'h-6 text-xs px-2 gap-1.5'
-    case 'large':
-      return 'h-10 text-base px-4 gap-2.5'
-    case 'medium':
-    default:
-      return 'h-8 text-sm px-3 gap-2'
-  }
-})
-
-const variantClasses = computed(() => {
-  if (props.disabled) {
-    return 'bg-muted text-muted-foreground border-transparent opacity-50 cursor-not-allowed'
-  }
-
-  const interactiveHover = isInteractive.value
-    ? 'cursor-pointer hover:shadow-sm active:scale-[0.98]'
-    : 'cursor-default'
-
-  const variants: Record<ChipVariant, string> = {
-    solid: `bg-primary text-primary-fg border-transparent ${isInteractive.value ? 'hover:bg-primary/90' : ''}`,
-    outline: `bg-transparent border-input text-foreground ${isInteractive.value ? 'hover:bg-accent hover:text-accent-foreground' : ''}`,
-    ghost: `bg-transparent border-transparent text-muted-foreground ${isInteractive.value ? 'hover:bg-accent hover:text-accent-foreground' : ''}`,
-    subtle: `bg-accent/50 text-foreground border-transparent ${isInteractive.value ? 'hover:bg-accent' : ''}`, // Default neutral
-
-    // Semantic Variants
-    secondary: `bg-secondary text-secondary-foreground border-transparent ${isInteractive.value ? 'hover:bg-secondary/80' : ''}`,
-    success: `bg-success text-success-fg border-transparent ${isInteractive.value ? 'hover:bg-success/80' : ''}`,
-    warning: `bg-warning text-warning-fg border-transparent ${isInteractive.value ? 'hover:bg-warning/80' : ''}`,
-    danger: `bg-destructive text-destructive-foreground border-transparent ${isInteractive.value ? 'hover:bg-destructive/90' : ''}`,
-    info: `bg-info text-info-fg border-transparent ${isInteractive.value ? 'hover:bg-info/80' : ''}`,
-  }
-
-  return `${variants[props.variant]} ${interactiveHover}`
-})
-
-const rootClasses = computed(() => {
-  return [baseClasses, sizeClasses.value, variantClasses.value, props.class].join(' ')
-})
-
-// Icon sizing adjustment based on chip size
-const iconSizeClass = computed(() => {
-  switch (props.size) {
-    case 'small':
-      return 'h-3.5 w-3.5'
-    case 'large':
-      return 'h-5 w-5'
-    case 'medium':
-    default:
-      return 'h-4 w-4'
-  }
-})
-
-// Close button sizing
-const closeIconSizeClass = computed(() => {
-  switch (props.size) {
-    case 'small':
-      return 'h-3 w-3'
-    case 'large':
-      return 'h-4 w-4'
-    case 'medium':
-    default:
-      return 'h-3.5 w-3.5'
-  }
-})
-</script>
-
-<template>
-  <div
-    :class="rootClasses"
-    :role="clickable ? 'button' : 'status'"
-    :tabindex="isInteractive || deletable ? 0 : undefined"
-    @click="handleClick"
-    @keydown="handleKeyDown">
-    <!-- Start Icon / Avatar -->
-    <slot name="icon">
-      <Icon v-if="icon" :icon="icon" :class="[iconSizeClass, 'shrink-0', text ? '-ml-0.5' : '']" />
-    </slot>
-
-    <!-- Text -->
-    <span v-if="text || $slots.default" class="truncate">
-      <slot>{{ text }}</slot>
-    </span>
-
-    <!-- Delete Action -->
-    <Button
-      v-if="deletable"
-      variant="ghost"
-      size="xs"
-      rounded="full"
-      :disabled="disabled"
-      class="ml-auto !p-0.5 !h-auto !w-auto hover:bg-[#8282823c]"
-      :class="[text ? (size === 'small' ? '-mr-0.5' : '-mr-1') : '']"
-      @click="handleDelete">
-      <Icon icon="lucide:x" :class="closeIconSizeClass" />
-    </Button>
-  </div>
-</template>

package/src/components/Chip/index.ts

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

package/src/components/Chip/types.ts

@@ -1,23 +0,0 @@
-export type ChipVariant =
-  | 'solid'
-  | 'outline'
-  | 'subtle'
-  | 'ghost'
-  | 'secondary'
-  | 'success'
-  | 'warning'
-  | 'danger'
-  | 'info'
-
-export type ChipSize = 'small' | 'medium' | 'large'
-
-export interface ChipProps {
-  text?: string
-  icon?: string
-  variant?: ChipVariant
-  size?: ChipSize
-  disabled?: boolean
-  clickable?: boolean
-  deletable?: boolean
-  class?: string
-}