@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.0

package/src/ui/sidebar/SidebarMenuBadge.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+</script>
+<template>
+  <span class="sidebar-menu-badge ml-2 text-xs bg-muted px-2 py-0.5 rounded-full">
+    <slot />
+  </span>
+</template>

package/src/ui/sidebar/SidebarMenuButton.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const props = defineProps({
+  isActive: { type: Boolean, default: false },
+  tooltip: String,
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <button
+    :class="['sidebar-menu-button w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors',
+      props.isActive ? 'bg-accent text-accent-foreground' : 'hover:bg-accent hover:text-accent-foreground',
+      props.class
+    ]"
+  >
+    <slot />
+  </button>
+</template>

package/src/ui/sidebar/SidebarMenuItem.vue

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

package/src/ui/sidebar/SidebarMenuSub.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const props = defineProps({
+  class: String,
+});
+</script>
+<template>
+  <ul
+    data-slot="sidebar-menu-sub"
+    data-sidebar="menu-sub"
+    :class="[
+      'border-sidebar-border ml-4.5 pl-2 pr-4.5 flex min-w-0 translate-x-px flex-col gap-1 border-l pt-1 pb-0.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.class
+    ].filter(Boolean).join(' ')"
+  >
+    <slot />
+  </ul>
+</template>

package/src/ui/sidebar/SidebarMenuSubContent.vue

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

package/src/ui/sidebar/SidebarMenuSubItem.vue

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

package/src/ui/sidebar/SidebarMenuSubTrigger.vue

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

package/src/ui/sidebar/SidebarProvider.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, provide, watch } from 'vue';
+
+const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH_ICON = '3.5rem';
+const SIDEBAR_WIDTH_AUTOCOLLAPSE = '3.5rem';
+const SIDEBAR_COOKIE_NAME = 'sidebar-open';
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 365; // 1 year
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+
+const props = defineProps({
+  defaultOpen: { type: Boolean, default: true },
+  open: { type: Boolean, default: undefined },
+  onOpenChange: { type: Function, default: undefined },
+  class: { type: String, default: '' },
+  style: { type: Object, default: () => ({}) },
+});
+
+// Mobile detection utility (replace with your own if needed)
+function useIsMobile() {
+  const isMobile = ref(false);
+  const check = () => {
+    isMobile.value = window.matchMedia('(max-width: 768px)').matches;
+  };
+  onMounted(() => {
+    check();
+    window.addEventListener('resize', check);
+  });
+  onUnmounted(() => {
+    window.removeEventListener('resize', check);
+  });
+  return isMobile;
+}
+
+const isMobile = useIsMobile();
+const openMobile = ref(false);
+const setOpenMobile = (val) => {
+  openMobile.value = val;
+};
+
+// Internal open state for uncontrolled usage
+const _open = ref(props.defaultOpen);
+const open = computed(() => (props.open !== undefined ? props.open : _open.value));
+const setOpen = (val) => {
+  const openState = typeof val === 'function' ? val(open.value) : val;
+  if (props.onOpenChange) {
+    props.onOpenChange(openState);
+  } else {
+    _open.value = openState;
+  }
+  document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+};
+
+const toggleSidebar = () => {
+  if (isMobile.value) {
+    setOpenMobile(!openMobile.value);
+  } else {
+    setOpen((v) => !v);
+  }
+};
+
+function handleKeyDown(event) {
+  if (
+    event.key.toLowerCase() === SIDEBAR_KEYBOARD_SHORTCUT &&
+    (event.metaKey || event.ctrlKey)
+  ) {
+    event.preventDefault();
+    toggleSidebar();
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeyDown);
+});
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown);
+});
+
+const state = computed(() => (open.value ? 'expanded' : 'collapsed'));
+
+const contextValue = computed(() => ({
+  state: state.value,
+  open: open.value,
+  setOpen,
+  isMobile: isMobile.value,
+  openMobile: openMobile.value,
+  setOpenMobile,
+  toggleSidebar,
+}));
+
+provide('sidebarContext', contextValue.value);
+</script>
+<template>
+  <!-- TooltipProvider slot can be added here if using a tooltip system -->
+  <div
+    data-slot="sidebar-wrapper"
+    :style="{
+      '--sidebar-width': SIDEBAR_WIDTH,
+      '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+      '--sidebar-width-autocollapse': SIDEBAR_WIDTH_AUTOCOLLAPSE,
+      ...props.style
+    }"
+    :class="['group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex h-full w-full', props.class]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/src/ui/sidebar/SidebarScrollArea.vue

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

package/src/ui/sidebar/SidebarSection.vue

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

package/src/ui/sidebar/SidebarSeparator.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <hr :class="['sidebar-separator', props.class]" />
+</template>

package/src/ui/sidebar/SidebarShortcut.vue

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

package/src/ui/sidebar/SidebarTitle.vue

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

package/src/ui/sidebar/SidebarTrigger.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { inject } from 'vue';
+import Button from '../button.vue';
+import { PanelLeft } from 'lucide-vue-next';
+
+interface SidebarContext {
+  toggleSidebar: () => void;
+}
+
+const ctx = inject('sidebarContext') as SidebarContext | undefined;
+
+defineProps<{ class?: string }>();
+const emit = defineEmits(['click']);
+</script>
+<template>
+  <Button
+    data-sidebar="trigger"
+    data-slot="sidebar-trigger"
+    variant="ghost"
+    size="icon"
+    :class="['size-7', $props.class]"
+    @click="(event) => { emit('click', event); ctx?.toggleSidebar(); }"
+  >
+    <PanelLeft class="w-4 h-4" />
+    <span class="sr-only">Toggle Sidebar</span>
+  </Button>
+</template>

package/src/ui/sidebar/Wrapper.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+const props = defineProps({
+  height: { type: String, default: 'h-screen' },
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <div :class="cn('flex w-full border overflow-hidden relative z-0 bg-background', props.height, props.class)">
+    <slot />
+  </div>
+</template>

package/src/ui/sidebar/context.ts

@@ -0,0 +1,8 @@
+export const SIDEBAR_CONTEXT = Symbol('SIDEBAR_CONTEXT');
+export interface SidebarContext {
+  state: 'expanded' | 'collapsed';
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+}

package/src/ui/sidebar/index.ts

@@ -0,0 +1,27 @@
+export { default as SidebarProvider } from './SidebarProvider.vue';
+export { default as Sidebar } from './Sidebar.vue';
+export { default as SidebarTrigger } from './SidebarTrigger.vue';
+export { default as SidebarGroup } from './SidebarGroup.vue';
+export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue';
+export { default as SidebarGroupContent } from './SidebarGroupContent.vue';
+export { default as SidebarMenu } from './SidebarMenu.vue';
+export { default as SidebarMenuItem } from './SidebarMenuItem.vue';
+export { default as SidebarMenuButton } from './SidebarMenuButton.vue';
+export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue';
+export { default as SidebarMenuSub } from './SidebarMenuSub.vue';
+export { default as SidebarMenuSubContent } from './SidebarMenuSubContent.vue';
+export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue';
+export { default as SidebarMenuSubTrigger } from './SidebarMenuSubTrigger.vue';
+export { default as SidebarContent } from './SidebarContent.vue';
+export { default as SidebarHeader } from './SidebarHeader.vue';
+export { default as SidebarFooter } from './SidebarFooter.vue';
+export { default as SidebarTitle } from './SidebarTitle.vue';
+export { default as SidebarDescription } from './SidebarDescription.vue';
+export { default as SidebarSeparator } from './SidebarSeparator.vue';
+export { default as SidebarScrollArea } from './SidebarScrollArea.vue';
+export { default as SidebarShortcut } from './SidebarShortcut.vue';
+export { default as SidebarCollapseButton } from './SidebarCollapseButton.vue';
+export { default as SidebarExpandButton } from './SidebarExpandButton.vue';
+export { default as SidebarInset } from './SidebarInset.vue';
+export { default as Wrapper } from './Wrapper.vue';
+export { default as BasicSearch } from './BasicSearch.vue';

package/src/ui/sidebar/sidebarStore.ts

@@ -0,0 +1,40 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+type SidebarState = 'expanded' | 'collapsed';
+
+export type SidebarContextProps = {
+  state: SidebarState;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+export const useSidebarStore = defineStore('sidebar', {
+  state: () => ({
+    open: true,
+    openMobile: false,
+    isMobile: false,
+  }),
+  getters: {
+    state: (state): SidebarState => (state.open ? 'expanded' : 'collapsed'),
+  },
+  actions: {
+    setOpen(open: boolean) {
+      this.open = open;
+    },
+    setOpenMobile(open: boolean) {
+      this.openMobile = open;
+    },
+    toggleSidebar() {
+      if (this.isMobile) {
+        this.setOpenMobile(!this.openMobile);
+      } else {
+        this.setOpen(!this.open);
+      }
+    },
+  },
+});

package/src/ui/sidebar/types.ts

@@ -0,0 +1,30 @@
+export interface NavigationItem {
+  id: string;
+  title: string;
+  href: string;
+  icon?: any;
+  label?: string;
+  disabled?: boolean;
+  external?: boolean;
+  children?: NavigationItem[];
+}
+
+export interface RecentItem {
+  id: string;
+  title: string;
+  href: string;
+  icon?: any;
+  label?: string;
+  disabled?: boolean;
+  external?: boolean;
+}
+
+export interface SidebarContextProps {
+  isMobile: boolean;
+  state: string;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  // Add any other context values used in your sidebar system
+}
+
+export type SidebarContextType = SidebarContextProps | null;

package/src/ui/sidebar/useAutoCollapse.ts

@@ -0,0 +1,81 @@
+import { ref, computed, onUnmounted, watch } from 'vue';
+
+export interface UseAutoCollapseOptions {
+  defaultLocked?: boolean;
+  searchValue?: string;
+  autoCollapseDelay?: number;
+  unlockCollapseDelay?: number;
+  onLockToggle?: (locked: boolean) => void;
+}
+
+export function useAutoCollapse({
+  defaultLocked = false,
+  searchValue = '',
+  autoCollapseDelay = 300,
+  unlockCollapseDelay = 300,
+  onLockToggle,
+}: UseAutoCollapseOptions = {}) {
+  const isLocked = ref(defaultLocked);
+  const isHovered = ref(false);
+  const hoverTimeoutRef = { current: undefined as ReturnType<typeof setTimeout> | undefined };
+
+  const shouldAutoCollapse = computed(() => {
+    return !isLocked.value && !searchValue.trim();
+  });
+
+  const isExpanded = computed(() => {
+    if (isLocked.value) return true;
+    if (searchValue.trim()) return true;
+    return isHovered.value;
+  });
+
+  const handleMouseEnter = () => {
+    if (shouldAutoCollapse.value) {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+      isHovered.value = true;
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (shouldAutoCollapse.value) {
+      hoverTimeoutRef.current = setTimeout(() => {
+        isHovered.value = false;
+      }, autoCollapseDelay);
+    }
+  };
+
+  const toggleLock = () => {
+    isLocked.value = !isLocked.value;
+    if (onLockToggle) onLockToggle(isLocked.value);
+  };
+
+  const handleSearchClick = () => {
+    if (!isExpanded.value) {
+      isHovered.value = true;
+    }
+  };
+
+  onUnmounted(() => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+    }
+  });
+
+  // Keep in sync with parent if needed
+  watch(isLocked, (val) => {
+    if (onLockToggle) onLockToggle(val);
+  });
+
+  return {
+    isLocked,
+    isHovered,
+    isExpanded,
+    shouldAutoCollapse,
+    handleMouseEnter,
+    handleMouseLeave,
+    toggleLock,
+    handleSearchClick,
+  };
+}

package/src/ui/sidebar.vue

@@ -0,0 +1,24 @@
+<template>
+  <nav class="flex flex-col gap-2 w-48 bg-card border border-border rounded-lg p-4">
+    <button
+      v-for="item in items"
+      :key="item.label"
+      class="flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground"
+      @click="$emit('select', item)"
+    >
+      <component v-if="item.icon" :is="item.icon" class="w-4 h-4" />
+      <span>{{ item.label }}</span>
+    </button>
+  </nav>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => [],
+  },
+});
+const emit = defineEmits(['select']);
+</script>

package/src/ui/skeleton.vue

@@ -0,0 +1,15 @@
+<template>
+  <div
+    data-slot="skeleton"
+    :class="cn('bg-accent animate-pulse rounded-md', $attrs.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { useAttrs } from 'vue';
+import { cn } from './utils';
+const $attrs = useAttrs();
+</script>

package/src/ui/slider.vue

@@ -0,0 +1,32 @@
+<template>
+  <Slider ref="sliderRef" :class="['relative flex w-full touch-none select-none items-center', customClass]" v-bind="props" />
+</template>
+
+<script setup>
+import { defineProps, useAttrs } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 0,
+  },
+  min: {
+    type: Number,
+    default: 0,
+  },
+  max: {
+    type: Number,
+    default: 100,
+  },
+  step: {
+    type: Number,
+    default: 1,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const $attrs = useAttrs();
+</script>

package/src/ui/sonner.vue

@@ -0,0 +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>

package/src/ui/switch.vue

@@ -0,0 +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>