@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.0

package/src/ui/input.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="space-y-2">
+    <Label v-if="label" :for="id || 'input'">
+      {{ label }}
+    </Label>
+    <div class="relative">
+      <span v-if="$slots.iconLeft" class="absolute left-1 top-1/2 transform -translate-y-1/2 pointer-events-none">
+        <slot name="iconLeft" />
+      </span>
+      <span v-if="$slots.iconRight || validationState === 'success' || validationState === 'error'" :class="[
+        'absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none',
+        validationState === 'error' ? 'text-red-500' : '',
+        validationState === 'success' ? 'text-green-500' : ''
+      ]">
+        <template v-if="validationState === 'success'">
+          <CheckCircle class="text-green-500 h-4 w-4" />
+        </template>
+        <template v-else-if="validationState === 'error'">
+          <AlertCircle class="text-red-500 h-4 w-4" />
+        </template>
+        <template v-else>
+          <slot name="iconRight" />
+        </template>
+      </span>
+      <input
+        :id="id || 'input'"
+        data-slot="input"
+        :class="cn(
+          'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          $slots.iconLeft ? 'pl-10' : '',
+          ($slots.iconRight || validationState === 'success' || validationState === 'error') ? 'pr-10' : '',
+          validationState === 'error'
+            ? 'border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500'
+            : validationState === 'success'
+            ? 'border-green-500 focus-visible:border-green-500 focus-visible:ring-green-500'
+            : 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+          $attrs['custom-class'] || ''
+        )"
+        v-bind="$attrs"
+        :type="type"
+        :disabled="disabled"
+        :readonly="readonly"
+        :value="modelValue"
+        @input="$emit('update:modelValue', $event.target.value)"
+      />
+    </div>
+    <p v-if="validationMessage" :class="['text-sm', validationState === 'error' ? 'text-red-600' : '', validationState === 'success' ? 'text-green-600' : '']">
+      {{ validationMessage }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import Label from './label.vue';
+import { defineProps, useAttrs, defineEmits } from 'vue';
+import { CheckCircle, AlertCircle } from 'lucide-vue-next';
+import { cn as _cn } from './cn';
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  type: {
+    type: String,
+    default: 'text',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  id: {
+    type: String,
+    default: '',
+  },
+  validationState: {
+    type: String,
+    default: '',
+    validator: v => ['success', 'error', ''].includes(v),
+  },
+  validationMessage: {
+    type: String,
+    default: '',
+  },
+});
+
+const cn = _cn;
+const emit = defineEmits(['update:modelValue']);
+</script>

package/src/ui/label.vue

@@ -0,0 +1,19 @@
+
+<template>
+  <label
+    data-slot="label"
+    v-bind="$attrs"
+    :class="cn(
+      'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+      $attrs.class
+    )"
+  >
+    <slot />
+  </label>
+</template>
+
+<script setup>
+import { useAttrs } from 'vue';
+import { cn } from './utils';
+const $attrs = useAttrs();
+</script>

package/src/ui/pagination.vue

@@ -0,0 +1,41 @@
+<template>
+  <nav class="flex items-center justify-center gap-2" role="navigation" aria-label="Pagination">
+    <button
+      class="h-8 w-8 flex items-center justify-center rounded border border-input bg-background px-0 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+      :disabled="page <= 1"
+      @click="$emit('update:page', page - 1)"
+      aria-label="Previous page"
+    >
+      &lt;
+    </button>
+    <span class="px-2 text-sm">{{ page }} / {{ totalPages }}</span>
+    <button
+      class="h-8 w-8 flex items-center justify-center rounded border border-input bg-background px-0 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+      :disabled="page >= totalPages"
+      @click="$emit('update:page', page + 1)"
+      aria-label="Next page"
+    >
+      &gt;
+    </button>
+  </nav>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+const props = defineProps({
+  page: {
+    type: Number,
+    default: 1,
+  },
+  total: {
+    type: Number,
+    required: true,
+  },
+  perPage: {
+    type: Number,
+    default: 10,
+  },
+});
+const emit = defineEmits(['update:page']);
+const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.perPage)));
+</script>

package/src/ui/popover.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Popover } from '@/shadcn/popover';
+</script>
+
+<template>
+  <Popover data-slot="popover" v-bind="$attrs">
+    <slot />
+  </Popover>
+</template>

package/src/ui/progress.vue

@@ -0,0 +1,67 @@
+<template>
+  <div :class="cn('space-y-2', $attrs.class)">
+    <div v-if="label" class="flex items-center justify-between">
+      <span class="text-sm font-medium text-muted-foreground">{{ label }}</span>
+      <span v-if="typeof value === 'number' && !showSteps" class="text-xs text-muted-foreground">{{ value }}%</span>
+    </div>
+    <div v-if="showSteps" class="space-y-3 mb-2">
+      <div v-for="(step, idx) in steps" :key="idx" class="flex items-center space-x-3">
+        <div :class="stepStatusClass(step.status)" class="w-4 h-4 rounded-full flex items-center justify-center">
+          <CheckCircle v-if="step.status === 'complete'" class="w-3 h-3 text-white" />
+          <Loader2 v-else-if="step.status === 'in-progress'" class="w-3 h-3 text-white animate-spin" />
+        </div>
+        <span :class="['text-sm', step.status === 'pending' ? 'text-muted-foreground' : '']">{{ step.label }}</span>
+        <Badge :variant="badgeVariant(step.status)">
+          {{ badgeText(step.status) }}
+        </Badge>
+      </div>
+    </div>
+    <div v-if="!showSteps" :class="cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', $attrs.class)">
+      <div
+        class="bg-primary h-full w-full flex-1 transition-all"
+        :style="{ transform: `translateX(-${100 - (value || 0)}%)` }"
+        role="progressbar"
+        :aria-valuenow="value"
+        aria-valuemin="0"
+        aria-valuemax="100"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineProps, useAttrs } from 'vue';
+import { CheckCircle, Loader2 } from 'lucide-vue-next';
+import Badge from './badge.vue';
+import { cn } from './utils';
+
+const props = defineProps({
+  value: {
+    type: Number,
+    default: 0,
+  },
+  label: String,
+  steps: Array,
+});
+
+const $attrs = useAttrs();
+const showSteps = computed(() => Array.isArray(props.steps) && props.steps.length > 0);
+
+function stepStatusClass(status) {
+  if (status === 'complete') return 'bg-green-500';
+  if (status === 'in-progress') return 'bg-blue-500';
+  return 'bg-muted';
+}
+
+function badgeVariant(status) {
+  if (status === 'complete') return 'soft-success';
+  if (status === 'in-progress') return 'soft-primary';
+  return 'secondary';
+}
+
+function badgeText(status) {
+  if (status === 'complete') return 'Complete';
+  if (status === 'in-progress') return 'In Progress';
+  return 'Pending';
+}
+</script>

package/src/ui/radio-group-item.vue

@@ -0,0 +1,53 @@
+
+<template>
+  <RadioGroupItem
+    data-slot="radio-group-item"
+    :value="value"
+    :disabled="disabled"
+    :class="cn('border-neutral-300 dark:border-neutral-600 text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-background dark:bg-input aspect-square size-4 shrink-0 rounded-full border-2 shadow-xs transition-[color,box-shadow,border-color] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', $attrs.class)"
+    v-bind="$attrs"
+    v-model="internalModelValue"
+  >
+    <template #indicator>
+      <span data-slot="radio-group-indicator" class="relative flex items-center justify-center">
+        <svg class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" /></svg>
+      </span>
+    </template>
+    <slot />
+  </RadioGroupItem>
+</template>
+
+<script setup>
+import { defineProps, useAttrs } from 'vue';
+import { cn } from './utils';
+import { RadioGroupItem } from '@/shadcn/radio-group';
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: undefined,
+  },
+  value: {
+    type: [String, Number, Boolean],
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+import { ref, watch } from 'vue';
+const $attrs = useAttrs();
+
+const internalModelValue = ref(props.modelValue);
+watch(() => props.modelValue, (val) => {
+  internalModelValue.value = val;
+});
+watch(internalModelValue, (val) => {
+  if (val !== props.modelValue) {
+    // emit update if needed (parent should sync)
+    // this is a placeholder for two-way binding if needed
+  }
+});
+</script>

package/src/ui/radio-group.vue

@@ -0,0 +1,27 @@
+
+<template>
+  <RadioGroup
+    data-slot="radio-group"
+    :aria-labelledby="ariaLabelledby"
+    :class="cn('grid gap-3', $attrs.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </RadioGroup>
+</template>
+
+
+<script setup>
+import { defineProps, useAttrs } from 'vue';
+import { cn } from './utils';
+import { RadioGroup } from '@/shadcn/radio-group';
+
+const props = defineProps({
+  ariaLabelledby: {
+    type: String,
+    default: undefined,
+  },
+});
+
+const $attrs = useAttrs();
+</script>

package/src/ui/scrollable-tabs-list.vue

@@ -0,0 +1,148 @@
+
+
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, nextTick, useAttrs, defineProps } from 'vue'
+import { TabsList } from '@/shadcn/tabs'
+
+const props = defineProps({
+  class: {
+    type: [String, Array, Object],
+    default: ''
+  }
+})
+const attrs = useAttrs()
+
+const scrollContainerRef = ref<HTMLElement | null>(null)
+const canScrollLeft = ref(false)
+const canScrollRight = ref(false)
+const showButtons = ref(false)
+
+function checkScrollability() {
+  const container = scrollContainerRef.value
+  if (!container) return
+  const { scrollLeft, scrollWidth, clientWidth } = container
+  canScrollLeft.value = scrollLeft > 0
+  canScrollRight.value = scrollLeft < scrollWidth - clientWidth - 1
+  showButtons.value = scrollWidth > clientWidth
+}
+
+function scrollLeftFn() {
+  const container = scrollContainerRef.value
+  if (!container) return
+  container.scrollBy({ left: -200, behavior: 'smooth' })
+}
+
+function scrollRightFn() {
+  const container = scrollContainerRef.value
+  if (!container) return
+  container.scrollBy({ left: 200, behavior: 'smooth' })
+}
+
+let handleScroll: (() => void) | null = null;
+let handleResize: (() => void) | null = null;
+
+onMounted(() => {
+  nextTick(() => {
+    const container = scrollContainerRef.value
+    if (!container) return
+    handleScroll = () => checkScrollability()
+    handleResize = () => checkScrollability()
+    container.addEventListener('scroll', handleScroll)
+    window.addEventListener('resize', handleResize)
+    checkScrollability()
+  })
+})
+
+onBeforeUnmount(() => {
+  const container = scrollContainerRef.value
+  if (container && handleScroll) {
+    container.removeEventListener('scroll', handleScroll)
+  }
+  if (handleResize) {
+    window.removeEventListener('resize', handleResize)
+  }
+})
+</script>
+
+
+<template>
+  <div class="group relative w-full">
+    <!-- Left scroll button -->
+    <button
+      v-if="showButtons && canScrollLeft"
+      @click="scrollLeftFn"
+      class="absolute left-0 top-0 z-10 h-full w-10 flex min-w-0 max-w-48 w-auto shrink-0 items-center justify-center bg-gradient-to-r from-background via-background/95 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200 hover:from-background hover:via-background focus:outline-none focus:opacity-100 [&>span]:truncate [&>span]:block"
+      aria-label="Scroll tabs left"
+      type="button"
+    >
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="text-primary hover:text-primary/80 transition-colors duration-150"
+      >
+        <path d="m15 18-6-6 6-6" />
+      </svg>
+    </button>
+
+    <!-- Scrollable container -->
+    <div
+      ref="scrollContainerRef"
+      class="w-full overflow-x-auto scrollbar-hide"
+    >
+      <TabsList
+        v-bind="attrs"
+        :class="[
+          'inline-flex items-center justify-start border-b border-border bg-transparent w-max',
+          '[&:has(.corner-cut-trigger)]:border-primary',
+          '[&:has(.corner-cut-trigger)]:gap-0',
+          '[&:has(.corner-cut-trigger)]:-space-x-[1px]',
+          showButtons && canScrollLeft ? 'pl-3' : '',
+          showButtons && canScrollRight ? 'pr-3' : '',
+          props.class
+        ]"
+      >
+        <slot />
+      </TabsList>
+    </div>
+
+    <!-- Right scroll button -->
+    <button
+      v-if="showButtons && canScrollRight"
+      @click="scrollRightFn"
+      class="absolute right-0 top-0 z-10 h-full w-10 flex items-center justify-center bg-gradient-to-l from-background via-background/95 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200 hover:from-background hover:via-background focus:outline-none focus:opacity-100"
+      aria-label="Scroll tabs right"
+      type="button"
+    >
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="text-primary hover:text-primary/80 transition-colors duration-150"
+      >
+        <path d="m9 18 6-6-6-6" />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+</style>

package/src/ui/select-multiple.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="space-y-4">
+    <Popover v-model:open="isOpen" :disabled="disabled">
+      <PopoverTrigger as="template">
+        <Button
+          variant="secondary"
+          :class="[
+            'justify-between border-input bg-input-background hover:bg-select-hover focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+            size === 'sm' ? 'h-8' : 'h-9',
+            customClass
+          ]"
+          role="combobox"
+          :aria-expanded="isOpen"
+          :disabled="disabled"
+        >
+          <div class="w-2/3 flex gap-1 flex-1">
+            <template v-if="modelValue.length === 0">
+              <span class="text-muted-foreground">{{ placeholder }}</span>
+            </template>
+            <template v-else-if="modelValue.length <= maxDisplay">
+              <Badge
+                v-for="(val, idx) in modelValue"
+                :key="val"
+                variant="soft-neutral"
+                class="text-xs shrink-0"
+              >
+                {{ getLabel(val) }}
+              </Badge>
+            </template>
+            <template v-else>
+              <Badge variant="soft-neutral" class="text-xs shrink-0">
+                {{ getLabel(modelValue[0]) }}
+              </Badge>
+              <Badge variant="soft-neutral" class="text-xs shrink-0">
+                +{{ modelValue.length - 1 }} more
+              </Badge>
+            </template>
+          </div>
+          <ChevronDownIcon class="h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent :class="['p-0', customClass]" align="start">
+        <div class="p-1">
+          <div class="p-3 pb-2">
+            <div class="text-sm font-medium">{{ title }}</div>
+          </div>
+          <div class="max-h-[200px] overflow-y-auto">
+            <div
+              v-for="option in options"
+              :key="option.id"
+              :class="[
+                'relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-2 text-sm outline-hidden select-none transition-colors',
+                option.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-accent hover:text-accent-foreground'
+              ]"
+              @click="!option.disabled && handleValueChange(option.id, !modelValue.includes(option.id))"
+            >
+              <Checkbox
+                :model-value="modelValue.includes(option.id)"
+                :disabled="option.disabled"
+                class="pointer-events-none"
+              />
+              <span class="flex-1 font-medium leading-none">{{ option.label }}</span>
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, defineProps, defineEmits, useAttrs } from 'vue';
+import Popover from './popover.vue';
+import PopoverTrigger from './PopoverTrigger.vue';
+import PopoverContent from './PopoverContent.vue';
+import Button from './button.vue';
+import Badge from './badge.vue';
+import Checkbox from './checkbox.vue';
+import ChevronDownIcon from 'lucide-vue-next/dist/esm/icons/chevron-down';
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  placeholder: {
+    type: String,
+    default: 'Select options...',
+  },
+  title: {
+    type: String,
+    default: 'Select Options',
+  },
+  maxDisplay: {
+    type: Number,
+    default: 2,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String,
+    default: 'default',
+  },
+  class: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+const $attrs = useAttrs();
+const isOpen = ref(false);
+const customClass = computed(() => props.class || $attrs.class || '');
+
+function getLabel(val) {
+  const found = props.options.find((o) => o.id === val);
+  return found ? found.label : val;
+}
+
+function handleValueChange(optionId, checked) {
+  let newValue = Array.isArray(props.modelValue) ? [...props.modelValue] : [];
+  if (checked) {
+    newValue.push(optionId);
+  } else {
+    newValue = newValue.filter((v) => v !== optionId);
+  }
+  emit('update:modelValue', newValue);
+}
+</script>

package/src/ui/select.vue

@@ -0,0 +1,77 @@
+<template>
+  <SelectMultiple
+    v-if="multiple"
+    v-bind="{
+      modelValue,
+      options,
+      placeholder,
+      title,
+      maxDisplay,
+      disabled,
+      size,
+      customClass: mergedClass
+    }"
+    @update:modelValue="$emit('update:modelValue', $event)"
+  />
+  <Select v-else v-bind="singleProps" data-slot="select" :custom-class="customClass" @update:modelValue="$emit('update:modelValue', $event)" >
+    <slot />
+  </Select>
+</template>
+
+<script setup>
+
+import { ref, computed, defineProps, defineEmits, useAttrs } from 'vue';
+
+import SelectMultiple from './select-multiple.vue';
+import { Select } from '@/shadcn/select';
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Array],
+    default: '',
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    default: 'Select option',
+  },
+  title: {
+    type: String,
+    default: 'Select Options',
+  },
+  maxDisplay: {
+    type: Number,
+    default: 2,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String,
+    default: 'default',
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+});
+
+
+const emit = defineEmits(['update:modelValue']);
+const $attrs = useAttrs();
+const mergedClass = computed(() => props.customClass || $attrs.class || '');
+
+// Remove 'multiple' prop for single select, pass the rest
+const singleProps = computed(() => {
+  const { multiple, ...rest } = { ...props, class: mergedClass.value };
+  return rest;
+});
+</script>