@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.6 → 1.0.9

package/src/ui/sonner.vue

@@ -1,67 +1,67 @@
-
-<template>
-  <transition-group name="sonner-fade" tag="div" class="fixed z-50 w-full flex flex-col items-center pointer-events-none top-4 left-0">
-    <div
-      v-for="(toast, idx) in toasts"
-      :key="toast.id"
-      class="bg-card border border-border shadow-lg rounded-lg px-4 py-3 mb-2 flex items-center gap-3 pointer-events-auto min-w-[240px] max-w-xs"
-      :style="{ opacity: toast.visible ? 1 : 0 }"
-    >
-      <span v-if="toast.icon" class="text-xl">{{ toast.icon }}</span>
-      <div class="flex-1">
-        <div v-if="toast.title" class="font-semibold text-sm">{{ toast.title }}</div>
-        <div v-if="toast.description" class="text-xs text-muted-foreground mt-1">{{ toast.description }}</div>
-      </div>
-      <button
-        class="ml-2 text-muted-foreground hover:text-foreground focus:outline-none"
-        @click="removeToast(toast.id)"
-        aria-label="Close"
-      >
-        ×
-      </button>
-    </div>
-  </transition-group>
-</template>
-
-<script setup>
-import { ref, onUnmounted } from 'vue';
-
-const toasts = ref([]);
-let idCounter = 0;
-
-function showToast({ title, description, icon, duration = 3000 }) {
-  const id = ++idCounter;
-  toasts.value.push({ id, title, description, icon, visible: true });
-  setTimeout(() => removeToast(id), duration);
-}
-
-function removeToast(id) {
-  const idx = toasts.value.findIndex(t => t.id === id);
-  if (idx !== -1) {
-    toasts.value[idx].visible = false;
-    setTimeout(() => {
-      toasts.value.splice(idx, 1);
-    }, 300);
-  }
-}
-
-// Expose showToast globally (for demo, you may want to use provide/inject or a plugin in real apps)
-if (typeof window !== 'undefined') {
-  window.$sonner = showToast;
-}
-
-onUnmounted(() => {
-  if (typeof window !== 'undefined' && window.$sonner === showToast) {
-    delete window.$sonner;
-  }
-});
-</script>
-
-<style scoped>
-.sonner-fade-enter-active, .sonner-fade-leave-active {
-  transition: opacity 0.3s;
-}
-.sonner-fade-enter-from, .sonner-fade-leave-to {
-  opacity: 0;
-}
-</style>
+
+<template>
+  <transition-group name="sonner-fade" tag="div" class="fixed z-50 w-full flex flex-col items-center pointer-events-none top-4 left-0">
+    <div
+      v-for="(toast, idx) in toasts"
+      :key="toast.id"
+      class="bg-card border border-border shadow-lg rounded-lg px-4 py-3 mb-2 flex items-center gap-3 pointer-events-auto min-w-[240px] max-w-xs"
+      :style="{ opacity: toast.visible ? 1 : 0 }"
+    >
+      <span v-if="toast.icon" class="text-xl">{{ toast.icon }}</span>
+      <div class="flex-1">
+        <div v-if="toast.title" class="font-semibold text-sm">{{ toast.title }}</div>
+        <div v-if="toast.description" class="text-xs text-muted-foreground mt-1">{{ toast.description }}</div>
+      </div>
+      <button
+        class="ml-2 text-muted-foreground hover:text-foreground focus:outline-none"
+        @click="removeToast(toast.id)"
+        aria-label="Close"
+      >
+        ×
+      </button>
+    </div>
+  </transition-group>
+</template>
+
+<script setup>
+import { ref, onUnmounted } from 'vue';
+
+const toasts = ref([]);
+let idCounter = 0;
+
+function showToast({ title, description, icon, duration = 3000 }) {
+  const id = ++idCounter;
+  toasts.value.push({ id, title, description, icon, visible: true });
+  setTimeout(() => removeToast(id), duration);
+}
+
+function removeToast(id) {
+  const idx = toasts.value.findIndex(t => t.id === id);
+  if (idx !== -1) {
+    toasts.value[idx].visible = false;
+    setTimeout(() => {
+      toasts.value.splice(idx, 1);
+    }, 300);
+  }
+}
+
+// Expose showToast globally (for demo, you may want to use provide/inject or a plugin in real apps)
+if (typeof window !== 'undefined') {
+  window.$sonner = showToast;
+}
+
+onUnmounted(() => {
+  if (typeof window !== 'undefined' && window.$sonner === showToast) {
+    delete window.$sonner;
+  }
+});
+</script>
+
+<style scoped>
+.sonner-fade-enter-active, .sonner-fade-leave-active {
+  transition: opacity 0.3s;
+}
+.sonner-fade-enter-from, .sonner-fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/ui/switch.vue

@@ -1,33 +1,33 @@
-<template>
-  <Switch>
-    <slot />
-  </Switch>
-</template>
-
-<script setup>
-import { defineProps, defineEmits, useAttrs } from 'vue';
-import { cn } from './utils';
-
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-const emit = defineEmits(['update:modelValue']);
-const $attrs = useAttrs();
-
-function toggle() {
-  if (!props.disabled) {
-    emit('update:modelValue', !props.modelValue);
-  }
-}
-</script>
-
-<style scoped>
-/* All styles handled by Tailwind classes */
-</style>
+<template>
+  <Switch>
+    <slot />
+  </Switch>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, useAttrs } from 'vue';
+import { cn } from './utils';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(['update:modelValue']);
+const $attrs = useAttrs();
+
+function toggle() {
+  if (!props.disabled) {
+    emit('update:modelValue', !props.modelValue);
+  }
+}
+</script>
+
+<style scoped>
+/* All styles handled by Tailwind classes */
+</style>

package/src/ui/tab-content.vue

@@ -1,28 +1,28 @@
-<script lang="ts" setup>
-import { cn } from './utils';
-import { defineProps } from 'vue';
-import { TabsContent } from '@/shadcn/tabs';
-
-const props = defineProps({
-  variant: {
-    type: String,
-    default: 'default',
-  },
-});
-</script>
-
-<template>
-  <TabsContent
-    data-slot="tabs-content"
-    :class="cn(
-      'mt-4 outline-none',
-      'focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-2',
-      props.variant === 'card' && 'p-4 border rounded-lg',
-      props.variant === 'minimal' && 'mt-2',
-      $attrs.class
-    )"
-    v-bind="{ ...$attrs, ...props }"
-  >
-    <slot />
-  </TabsContent>
-</template>
+<script lang="ts" setup>
+import { cn } from './utils';
+import { defineProps } from 'vue';
+import { TabsContent } from '@/shadcn/tabs';
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'default',
+  },
+});
+</script>
+
+<template>
+  <TabsContent
+    data-slot="tabs-content"
+    :class="cn(
+      'mt-4 outline-none',
+      'focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-2',
+      props.variant === 'card' && 'p-4 border rounded-lg',
+      props.variant === 'minimal' && 'mt-2',
+      $attrs.class
+    )"
+    v-bind="{ ...$attrs, ...props }"
+  >
+    <slot />
+  </TabsContent>
+</template>

package/src/ui/tab-list.vue

@@ -1,31 +1,31 @@
-<script setup lang="ts">
-import { cn } from './utils';
-import { defineProps, useAttrs } from 'vue';
-import { TabsList } from '@/shadcn/tabs';
-
-const props = defineProps({
-  variant: {
-    type: String,
-    default: 'default',
-  },
-});
-const attrs = useAttrs();
-</script>
-
-<template>
-  <TabsList
-    data-slot="tabs-list"
-    :class="cn(
-      'inline-flex items-center justify-start border-b border-border bg-transparent',
-      '[&:has(.corner-cut-trigger)]:border-primary',
-      '[&:has(.corner-cut-trigger)]:gap-0 [&:has(.corner-cut-trigger)]:-space-x-[1px]',
-      props.variant === 'grid' && 'grid w-full',
-      props.variant === 'vertical' && 'flex-col h-auto w-48 border-b-0 border-r',
-      props.variant === 'inline' && 'h-10 items-center justify-start',
-      attrs.class
-    )"
-    v-bind="{ ...attrs, ...props }"
-  >
-    <slot />
-  </TabsList>
-</template>
+<script setup lang="ts">
+import { cn } from './utils';
+import { defineProps, useAttrs } from 'vue';
+import { TabsList } from '@/shadcn/tabs';
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'default',
+  },
+});
+const attrs = useAttrs();
+</script>
+
+<template>
+  <TabsList
+    data-slot="tabs-list"
+    :class="cn(
+      'inline-flex items-center justify-start border-b border-border bg-transparent',
+      '[&:has(.corner-cut-trigger)]:border-primary',
+      '[&:has(.corner-cut-trigger)]:gap-0 [&:has(.corner-cut-trigger)]:-space-x-[1px]',
+      props.variant === 'grid' && 'grid w-full',
+      props.variant === 'vertical' && 'flex-col h-auto w-48 border-b-0 border-r',
+      props.variant === 'inline' && 'h-10 items-center justify-start',
+      attrs.class
+    )"
+    v-bind="{ ...attrs, ...props }"
+  >
+    <slot />
+  </TabsList>
+</template>

package/src/ui/tab-panel.vue

@@ -1,19 +1,19 @@
-<template>
-  <div v-show="active" class="mt-2">
-    <slot />
-  </div>
-</template>
-
-<script setup>
-import { defineProps } from 'vue';
-const props = defineProps({
-  value: {
-    type: [String, Number],
-    required: true,
-  },
-  active: {
-    type: Boolean,
-    default: false,
-  },
-});
-</script>
+<template>
+  <div v-show="active" class="mt-2">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+const props = defineProps({
+  value: {
+    type: [String, Number],
+    required: true,
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>

package/src/ui/tab-trigger.vue

@@ -1,34 +1,34 @@
-<script setup lang="ts">
-import { cn } from './utils';
-import { defineProps } from 'vue';
-import { TabsTrigger } from '@/shadcn/tabs';
-
-const props = defineProps({
-  variant: {
-    type: String,
-    default: 'default',
-  },
-});
-</script>
-
-<template>
-  <TabsTrigger
-    data-slot="tabs-trigger"
-    :class="cn(
-      'relative inline-flex items-center justify-center gap-2 px-4 py-2 transition-all duration-200 ease-out',
-      'min-w-0 max-w-48 w-auto shrink-0',
-      'text-muted-foreground hover:text-foreground',
-      'border-b-2 border-transparent',
-      'data-[state=active]:text-primary data-[state=active]:border-primary',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-2',
-      'disabled:pointer-events-none disabled:opacity-50',
-      '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-      '[&>span]:truncate [&>span]:block',
-      props.variant === 'vertical' && 'w-full justify-start border-b-0 border-r-2',
-      $attrs.class
-    )"
-    v-bind="{ ...$attrs, ...props }"
-  >
-    <slot />
-  </TabsTrigger>
-</template>
+<script setup lang="ts">
+import { cn } from './utils';
+import { defineProps } from 'vue';
+import { TabsTrigger } from '@/shadcn/tabs';
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'default',
+  },
+});
+</script>
+
+<template>
+  <TabsTrigger
+    data-slot="tabs-trigger"
+    :class="cn(
+      'relative inline-flex items-center justify-center gap-2 px-4 py-2 transition-all duration-200 ease-out',
+      'min-w-0 max-w-48 w-auto shrink-0',
+      'text-muted-foreground hover:text-foreground',
+      'border-b-2 border-transparent',
+      'data-[state=active]:text-primary data-[state=active]:border-primary',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-2',
+      'disabled:pointer-events-none disabled:opacity-50',
+      '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      '[&>span]:truncate [&>span]:block',
+      props.variant === 'vertical' && 'w-full justify-start border-b-0 border-r-2',
+      $attrs.class
+    )"
+    v-bind="{ ...$attrs, ...props }"
+  >
+    <slot />
+  </TabsTrigger>
+</template>

package/src/ui/tab.vue

@@ -1,30 +1,30 @@
-<template>
-  <button
-    class="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow"
-    :class="{ 'bg-background text-foreground shadow': active }"
-    :disabled="disabled"
-    @click="$emit('select', value)"
-    type="button"
-  >
-    <slot />
-  </button>
-</template>
-
-<script setup>
-import { defineProps, defineEmits } from 'vue';
-const props = defineProps({
-  value: {
-    type: [String, Number],
-    required: true,
-  },
-  active: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-const emit = defineEmits(['select']);
-</script>
+<template>
+  <button
+    class="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow"
+    :class="{ 'bg-background text-foreground shadow': active }"
+    :disabled="disabled"
+    @click="$emit('select', value)"
+    type="button"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+const props = defineProps({
+  value: {
+    type: [String, Number],
+    required: true,
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(['select']);
+</script>

package/src/ui/table-body.vue

@@ -1,16 +1,16 @@
-<template>
-  <tbody data-slot="table-body" :class="bodyClass">
-    <slot />
-  </tbody>
-</template>
-
-<script setup lang="ts">
-import { cn } from './utils';
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-});
-const bodyClass = cn('[&_tr:last-child]:border-0', props.class);
-</script>
+<template>
+  <tbody data-slot="table-body" :class="bodyClass">
+    <slot />
+  </tbody>
+</template>
+
+<script setup lang="ts">
+import { cn } from './utils';
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+});
+const bodyClass = cn('[&_tr:last-child]:border-0', props.class);
+</script>

package/src/ui/table-caption.vue

@@ -1,20 +1,20 @@
-<script setup lang="ts">
-import { cn } from './utils';
-
-defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-
-<template>
-  <caption
-    data-slot="table-caption"
-    :class="cn('text-muted-foreground mt-4 text-sm', $attrs.class)"
-    v-bind="$attrs"
-  >
-    <slot />
-  </caption>
-</template>
+<script setup lang="ts">
+import { cn } from './utils';
+
+defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <caption
+    data-slot="table-caption"
+    :class="cn('text-muted-foreground mt-4 text-sm', $attrs.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </caption>
+</template>

package/src/ui/table-cell.vue

@@ -1,16 +1,16 @@
-<template>
-  <td data-slot="table-cell" :class="cellClass">
-    <slot />
-  </td>
-</template>
-
-<script setup lang="ts">
-import { cn } from './utils';
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-});
-const cellClass = cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class);
-</script>
+<template>
+  <td data-slot="table-cell" :class="cellClass">
+    <slot />
+  </td>
+</template>
+
+<script setup lang="ts">
+import { cn } from './utils';
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+});
+const cellClass = cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class);
+</script>

package/src/ui/table-footer.vue

@@ -1,16 +1,16 @@
-<template>
-  <tfoot data-slot="table-footer" :class="footerClass">
-    <slot />
-  </tfoot>
-</template>
-
-<script setup lang="ts">
-import { cn } from './utils';
-const props = defineProps({
-  class: {
-    type: String,
-    default: '',
-  },
-});
-const footerClass = cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class);
-</script>
+<template>
+  <tfoot data-slot="table-footer" :class="footerClass">
+    <slot />
+  </tfoot>
+</template>
+
+<script setup lang="ts">
+import { cn } from './utils';
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+});
+const footerClass = cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class);
+</script>