@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.6 → 1.0.7

package/src/shadcn/sidebar/SidebarMenuSub.vue

@@ -1,10 +1,10 @@
-<script setup lang="ts">
-const props = defineProps({
-  class: String,
-});
-</script>
-<template>
-  <div :class="['sidebar-menu-sub', props.class]">
-    <slot />
-  </div>
-</template>
+<script setup lang="ts">
+const props = defineProps({
+  class: String,
+});
+</script>
+<template>
+  <div :class="['sidebar-menu-sub', props.class]">
+    <slot />
+  </div>
+</template>

package/src/shadcn/sidebar/SidebarMenuSubItemStyled.vue

@@ -1,38 +1,38 @@
-<script setup lang="ts">
-import { inject, computed } from 'vue';
-const props = defineProps({
-  label: String,
-  isActive: { type: Boolean, default: false },
-  onClick: Function,
-  class: String,
-});
-// Gracefully handle when used outside SidebarProvider
-let state = 'expanded';
-let isMobile = false;
-try {
-  const ctx = inject('sidebarContext')
-
-  if (ctx) {
-    state = ctx?.state;
-    isMobile = ctx?.isMobile;
-  }
-} catch (e) {}
-const isCollapsed = computed(() => state === 'collapsed' && !isMobile);
-</script>
-<template>
-  <template v-if="!isCollapsed">
-    <button
-      @click="props.onClick"
-      :class="[
-        'w-full text-left px-4 py-1.5 text-sm rounded-md transition-colors duration-200',
-        'hover:bg-accent/50 hover:text-foreground',
-        'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
-        props.isActive ? 'bg-primary/10 text-primary font-medium' : 'text-muted-foreground',
-        props.class
-      ].filter(Boolean).join(' ')"
-      type="button"
-    >
-      {{ props.label }}
-    </button>
-  </template>
-</template>
+<script setup lang="ts">
+import { inject, computed } from 'vue';
+const props = defineProps({
+  label: String,
+  isActive: { type: Boolean, default: false },
+  onClick: Function,
+  class: String,
+});
+// Gracefully handle when used outside SidebarProvider
+let state = 'expanded';
+let isMobile = false;
+try {
+  const ctx = inject('sidebarContext')
+
+  if (ctx) {
+    state = ctx?.state;
+    isMobile = ctx?.isMobile;
+  }
+} catch (e) {}
+const isCollapsed = computed(() => state === 'collapsed' && !isMobile);
+</script>
+<template>
+  <template v-if="!isCollapsed">
+    <button
+      @click="props.onClick"
+      :class="[
+        'w-full text-left px-4 py-1.5 text-sm rounded-md transition-colors duration-200',
+        'hover:bg-accent/50 hover:text-foreground',
+        'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
+        props.isActive ? 'bg-primary/10 text-primary font-medium' : 'text-muted-foreground',
+        props.class
+      ].filter(Boolean).join(' ')"
+      type="button"
+    >
+      {{ props.label }}
+    </button>
+  </template>
+</template>

package/src/shadcn/sidebar/SidebarTrigger.vue

@@ -1,8 +1,8 @@
-<script setup lang="ts">
-const emit = defineEmits(['toggle']);
-</script>
-<template>
-  <button class="p-2" @click="$emit('toggle')">
-    <slot />
-  </button>
-</template>
+<script setup lang="ts">
+const emit = defineEmits(['toggle']);
+</script>
+<template>
+  <button class="p-2" @click="$emit('toggle')">
+    <slot />
+  </button>
+</template>

package/src/shadcn/sidebar/index.ts

@@ -1,5 +1,5 @@
-export { default as Sidebar } from './Sidebar.vue'
-export { default as MenuGroup } from './MenuGroup.vue'
-export { default as SidebarDemoContent } from './SidebarDemoContent.vue'
-export { default as SidebarTrigger } from './SidebarTrigger.vue'
-export { default as SidebarMenuItemWithIcon } from './SidebarMenuItemWithIcon.vue'
+export { default as Sidebar } from './Sidebar.vue'
+export { default as MenuGroup } from './MenuGroup.vue'
+export { default as SidebarDemoContent } from './SidebarDemoContent.vue'
+export { default as SidebarTrigger } from './SidebarTrigger.vue'
+export { default as SidebarMenuItemWithIcon } from './SidebarMenuItemWithIcon.vue'

package/src/shadcn/slider/Slider.vue

@@ -1,43 +1,43 @@
-<script setup lang="ts">
-import type { SliderRootEmits, SliderRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<SliderRootEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <SliderRoot
-    v-slot="{ modelValue }"
-    data-slot="slider"
-    :class="cn(
-      'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
-      props.class,
-    )"
-    v-bind="forwarded"
-  >
-    <SliderTrack
-      data-slot="slider-track"
-      class="h-2 bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
-    >
-      <SliderRange
-        data-slot="slider-range"
-        class="h-full bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
-      />
-    </SliderTrack>
-
-    <SliderThumb
-      v-for="(_, key) in modelValue"
-      :key="key"
-      data-slot="slider-thumb"
-      class="data-[orientation=vertical]:-left-[7px] border-primary h-5 w-5 bg-slider-thumb bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
-    />
-  </SliderRoot>
-</template>
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<SliderRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SliderRoot
+    v-slot="{ modelValue }"
+    data-slot="slider"
+    :class="cn(
+      'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <SliderTrack
+      data-slot="slider-track"
+      class="h-2 bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+    >
+      <SliderRange
+        data-slot="slider-range"
+        class="h-full bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+      />
+    </SliderTrack>
+
+    <SliderThumb
+      v-for="(_, key) in modelValue"
+      :key="key"
+      data-slot="slider-thumb"
+      class="data-[orientation=vertical]:-left-[7px] border-primary h-5 w-5 bg-slider-thumb bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+    />
+  </SliderRoot>
+</template>

package/src/shadcn/slider/index.ts

@@ -1 +1 @@
-export { default as Slider } from "./Slider.vue"
+export { default as Slider } from "./Slider.vue"

package/src/shadcn/sonner/Sonner.vue

@@ -1,19 +1,19 @@
-<script lang="ts" setup>
-import type { ToasterProps } from "vue-sonner"
-import { Toaster as Sonner } from "vue-sonner"
-
-const props = defineProps<ToasterProps>()
-</script>
-
-<template>
-  <Sonner
-    class="toaster group"
-    v-bind="props"
-    :style="{
-      '--normal-bg': 'var(--popover)',
-      '--normal-text': 'var(--popover-foreground)',
-      '--normal-border': 'var(--border)',
-
-    }"
-  />
-</template>
+<script lang="ts" setup>
+import type { ToasterProps } from "vue-sonner"
+import { Toaster as Sonner } from "vue-sonner"
+
+const props = defineProps<ToasterProps>()
+</script>
+
+<template>
+  <Sonner
+    class="toaster group"
+    v-bind="props"
+    :style="{
+      '--normal-bg': 'var(--popover)',
+      '--normal-text': 'var(--popover-foreground)',
+      '--normal-border': 'var(--border)',
+
+    }"
+  />
+</template>

package/src/shadcn/sonner/index.ts

@@ -1 +1 @@
-export { default as Toaster } from "./Sonner.vue"
+export { default as Toaster } from "./Sonner.vue"

package/src/shadcn/spinner/Spinner.vue

@@ -1,17 +1,17 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { Loader2Icon } from "lucide-vue-next"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <Loader2Icon
-    role="status"
-    aria-label="Loading"
-    :class="cn('size-4 animate-spin', props.class)"
-  />
-</template>
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { Loader2Icon } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <Loader2Icon
+    role="status"
+    aria-label="Loading"
+    :class="cn('size-4 animate-spin', props.class)"
+  />
+</template>

package/src/shadcn/spinner/index.ts

@@ -1 +1 @@
-export { default as Spinner } from "./Spinner.vue"
+export { default as Spinner } from "./Spinner.vue"

package/src/shadcn/switch/Switch.vue

@@ -1,38 +1,38 @@
-<script setup lang="ts">
-import type { SwitchRootEmits, SwitchRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  SwitchRoot,
-
-  SwitchThumb,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<SwitchRootProps & { class?: HTMLAttributes["class"] }>()
-
-const emits = defineEmits<SwitchRootEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <SwitchRoot
-    data-slot="switch"
-    v-bind="forwarded"
-    :class="cn(
-      'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-background focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-      props.class,
-    )"
-  >
-    <SwitchThumb
-      data-slot="switch-thumb"
-      :class="cn('bg-switch-thumb dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block h-5 w-5 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')"
-    >
-      <slot name="thumb" />
-    </SwitchThumb>
-  </SwitchRoot>
-</template>
+<script setup lang="ts">
+import type { SwitchRootEmits, SwitchRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  SwitchRoot,
+
+  SwitchThumb,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<SwitchRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SwitchRoot
+    data-slot="switch"
+    v-bind="forwarded"
+    :class="cn(
+      'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-background focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+      props.class,
+    )"
+  >
+    <SwitchThumb
+      data-slot="switch-thumb"
+      :class="cn('bg-switch-thumb dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block h-5 w-5 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')"
+    >
+      <slot name="thumb" />
+    </SwitchThumb>
+  </SwitchRoot>
+</template>

package/src/shadcn/switch/index.ts

@@ -1 +1 @@
-export { default as Switch } from "./Switch.vue"
+export { default as Switch } from "./Switch.vue"

package/src/shadcn/tabs/CardTabsContent.vue

@@ -1,16 +1,16 @@
-<script setup lang="ts">
-import TabsContent from '@/ui/tab-content.vue';
-import { cn } from '@/lib/utils';
-const props = defineProps({
-  class: { type: String, default: '' },
-});
-</script>
-<template>
-  <TabsContent
-    variant="card"
-    :class="props.class"
-    v-bind="$attrs"
-  >
-    <slot />
-  </TabsContent>
-</template>
+<script setup lang="ts">
+import TabsContent from '@/ui/tab-content.vue';
+import { cn } from '@/lib/utils';
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <TabsContent
+    variant="card"
+    :class="props.class"
+    v-bind="$attrs"
+  >
+    <slot />
+  </TabsContent>
+</template>

package/src/shadcn/tabs/CornerCutTabsTrigger.vue

@@ -1,102 +1,102 @@
-<script setup lang="ts">
-import { ref, computed, watch, onMounted, onBeforeUnmount, useSlots } from 'vue';
-import { TabsTrigger } from 'reka-ui';
-import { cn } from '@/lib/utils';
-
-
-import type { HTMLAttributes } from 'vue';
-import { trigger } from '@vue/reactivity';
-
-const props = defineProps<{
-  value: string | number;
-  class?: string;
-  cornerPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-  disabled?: boolean;
-  asChild?: boolean;
-  as?: string;
-  [key: string]: any;
-}>();
-
-const { value, class: className, cornerPosition: cornerPos = 'top-right', ...rest } = props;
-const cornerPosition = computed(() => cornerPos);
-const triggerRef = ref<HTMLElement | null>(null);
-
-const getClipPath = (position: string) => {
-  switch (position) {
-    case 'top-left':
-      return 'polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px)';
-    case 'top-right':
-      return 'polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%)';
-    case 'bottom-left':
-      return 'polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px))';
-    case 'bottom-right':
-      return 'polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%)';
-    default:
-      return 'polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%)';
-  }
-};
-
-const clipPathValue = computed(() => getClipPath(cornerPosition.value));
-let observer: MutationObserver | null = null;
-
-watch(() => triggerRef.value, () => {
-  const el = triggerRef.value;
-  if (!el) return;
-  const parent = el.$el.parentElement;
-  const borderDiv = parent?.querySelector('div[style*="clip-path"]') as HTMLElement | null;
-
-  const updateStyle = () => {
-    const isActive = el.$el.getAttribute('data-state') === 'active';
-
-    if (isActive) {
-      el.$el.style.clipPath = clipPathValue.value;
-      if (borderDiv) borderDiv.style.opacity = '1';
-    } else {
-      el.$el.style.clipPath = 'none';
-      if (borderDiv) borderDiv.style.opacity = '0';
-    }
-  };
-  updateStyle();
-  observer = new MutationObserver(updateStyle);
-  observer.observe(el.$el, { attributes: true, attributeFilter: ['data-state'] });
-});
-
-onBeforeUnmount(() => {
-  if (observer) observer.disconnect();
-});
-</script>
-
-<template>
-  <div class="relative inline-flex">
-    <!-- Border container with corner cut - only visible when the trigger is active -->
-    <div
-      class="absolute inset-0 bg-primary transition-opacity duration-300 pointer-events-none opacity-0"
-      :style="{ clipPath: clipPathValue }"
-    />
-    <!-- Content container with the actual trigger -->
-    <TabsTrigger
-      ref="triggerRef"
-      data-slot="tabs-trigger"
-      :value="value"
-      v-bind="rest"
-      :class="cn(
-        'corner-cut-trigger relative flex items-center justify-center gap-2 px-3 py-1.5 transition-all duration-300',
-        'min-w-0 max-w-48 w-auto shrink-0',
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-        'disabled:pointer-events-none disabled:opacity-50',
-        'text-muted-foreground hover:text-foreground',
-        'data-[state=active]:text-foreground data-[state=active]:bg-background',
-        'data-[state=active]:m-[1px]',
-        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',
-        '[&>span]:truncate [&>span]:block',
-        className,
-      )"
-      :data-corner-position="cornerPosition"
-    >
-      <slot />
-    </TabsTrigger>
-  </div>
-</template>
-
-<style scoped>
-</style>
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount, useSlots } from 'vue';
+import { TabsTrigger } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+
+import type { HTMLAttributes } from 'vue';
+import { trigger } from '@vue/reactivity';
+
+const props = defineProps<{
+  value: string | number;
+  class?: string;
+  cornerPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  disabled?: boolean;
+  asChild?: boolean;
+  as?: string;
+  [key: string]: any;
+}>();
+
+const { value, class: className, cornerPosition: cornerPos = 'top-right', ...rest } = props;
+const cornerPosition = computed(() => cornerPos);
+const triggerRef = ref<HTMLElement | null>(null);
+
+const getClipPath = (position: string) => {
+  switch (position) {
+    case 'top-left':
+      return 'polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px)';
+    case 'top-right':
+      return 'polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%)';
+    case 'bottom-left':
+      return 'polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px))';
+    case 'bottom-right':
+      return 'polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%)';
+    default:
+      return 'polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%)';
+  }
+};
+
+const clipPathValue = computed(() => getClipPath(cornerPosition.value));
+let observer: MutationObserver | null = null;
+
+watch(() => triggerRef.value, () => {
+  const el = triggerRef.value;
+  if (!el) return;
+  const parent = el.$el.parentElement;
+  const borderDiv = parent?.querySelector('div[style*="clip-path"]') as HTMLElement | null;
+
+  const updateStyle = () => {
+    const isActive = el.$el.getAttribute('data-state') === 'active';
+
+    if (isActive) {
+      el.$el.style.clipPath = clipPathValue.value;
+      if (borderDiv) borderDiv.style.opacity = '1';
+    } else {
+      el.$el.style.clipPath = 'none';
+      if (borderDiv) borderDiv.style.opacity = '0';
+    }
+  };
+  updateStyle();
+  observer = new MutationObserver(updateStyle);
+  observer.observe(el.$el, { attributes: true, attributeFilter: ['data-state'] });
+});
+
+onBeforeUnmount(() => {
+  if (observer) observer.disconnect();
+});
+</script>
+
+<template>
+  <div class="relative inline-flex">
+    <!-- Border container with corner cut - only visible when the trigger is active -->
+    <div
+      class="absolute inset-0 bg-primary transition-opacity duration-300 pointer-events-none opacity-0"
+      :style="{ clipPath: clipPathValue }"
+    />
+    <!-- Content container with the actual trigger -->
+    <TabsTrigger
+      ref="triggerRef"
+      data-slot="tabs-trigger"
+      :value="value"
+      v-bind="rest"
+      :class="cn(
+        'corner-cut-trigger relative flex items-center justify-center gap-2 px-3 py-1.5 transition-all duration-300',
+        'min-w-0 max-w-48 w-auto shrink-0',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'disabled:pointer-events-none disabled:opacity-50',
+        'text-muted-foreground hover:text-foreground',
+        'data-[state=active]:text-foreground data-[state=active]:bg-background',
+        'data-[state=active]:m-[1px]',
+        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',
+        '[&>span]:truncate [&>span]:block',
+        className,
+      )"
+      :data-corner-position="cornerPosition"
+    >
+      <slot />
+    </TabsTrigger>
+  </div>
+</template>
+
+<style scoped>
+</style>