@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.21 → 1.0.22

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.21",
+  "version": "1.0.22",
   "main": "dist/perisai-ui.umd.js",
   "module": "dist/perisai-ui.es.js",
   "scripts": {

package/src/index.ts

@@ -12,6 +12,7 @@ export * from './shadcn/switch';
 export * from './shadcn/collapsible';
 export * from './shadcn/navigation-menu';
 export * from './shadcn/input-otp';
+export * from './shadcn/context-menu';
 
 export * from './ui/tree';
 export { default as PopoverContent } from './ui/PopoverContent.vue';
@@ -173,3 +174,6 @@ export { default as Tabs } from './ui/tabs.vue';
 export { default as Textarea } from './ui/textarea.vue';
 export { default as ThreatGauge } from './ui/threat-gauge.vue';
 export { default as Toggle } from './ui/toggle.vue';
+
+// Toast utilities
+export { toast } from './ui/toast';

package/src/shadcn/context-menu/ContextMenuContent.vue

@@ -24,7 +24,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       data-slot="context-menu-content"
       v-bind="forwarded"
       :class="cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+        'bg-popover text-popover-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-lg',
         props.class,
       )"
     >

package/src/shadcn/context-menu/ContextMenuItem.vue

@@ -30,7 +30,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     :data-variant="variant"
     v-bind="forwarded"
     :class="cn(
-      'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      'focus:bg-accent focus:text-accent-foreground text-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
       props.class,
     )"
   >

package/src/shadcn/context-menu/ContextMenuSubContent.vue

@@ -23,7 +23,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
     :class="
       cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-context-menu-content-transform-origin) overflow-hidden rounded-md border border-border p-1 shadow-lg',
         props.class,
       )
     "

package/src/ui/card.vue

@@ -55,7 +55,7 @@ const customPaddingValue = computed(() => {
     <!-- Content container -->
     <div
       data-slot="card"
-      :class="cn('bg-card text-card-foreground flex flex-col gap-3 relative rounded shadow-sm', customPaddingValue, $attrs.class as any)"
+      :class="cn('bg-card text-card-foreground flex flex-col gap-3 relative rounded', customPaddingValue, $attrs.class as any)"
       :style="{ clipPath: clipPathValue, margin: '1px' }"
       v-bind="$attrs"
     >
@@ -65,7 +65,7 @@ const customPaddingValue = computed(() => {
   <div
     v-else
     data-slot="card"
-    :class="cn('bg-gray-900 text-card-foreground flex flex-col gap-3 relative rounded-xl border border-gray-800 shadow-sm', $attrs.class as any)"
+    :class="cn('bg-card text-card-foreground flex flex-col gap-3 relative rounded-xl border border-border', $attrs.class as any)"
     v-bind="$attrs"
   >
     <slot />

package/src/ui/dialog-body.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     data-slot="dialog-body"
-    :class="['px-6 py-5 space-y-6 [&>*+*]:border-t [&>*+*]:border-border [&>*+*]:pt-5', $attrs.class]"
+    :class="['px-6 py-5 space-y-6', $attrs.class]"
     v-bind="$attrs"
   >
     <slot />

package/src/ui/dialog-header.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     data-slot="dialog-header"
-    :class="['flex flex-col gap-2 text-center pl-4 py-4 pr-5 sm:text-left border-b', $attrs.class]"
+    :class="['flex flex-col gap-2 text-center pl-4 py-4 pr-5 sm:text-left border-b border-border', $attrs.class]"
     v-bind="$attrs"
   >
     <slot />

package/src/ui/sonner.vue

@@ -1,37 +1,53 @@
 
 <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"
+  <div 
+    class="fixed z-50 pointer-events-none bottom-4 right-4 relative min-h-[80px]" 
+    @mouseenter="expandStack"
+    @mouseleave="collapseStack"
+  >
+    <transition-group name="sonner-fade" tag="div">
+      <div
+        v-for="(toast, idx) in toasts"
+        :key="toast.id"
+        :class="getToastClasses(toast.type, idx)"
+        :style="{ 
+          opacity: toast.visible ? 1 : 0,
+          transform: isStackExpanded ? `translateY(-${(toasts.length - 1 - idx) * 72}px)` : `translateY(-${(toasts.length - 1 - idx) * 4}px)`,
+          zIndex: idx + 1,
+          position: 'absolute',
+          right: '0',
+          top: '0',
+          pointerEvents: 'auto'
+        }"
       >
-        ×
-      </button>
-    </div>
-  </transition-group>
+        <span v-if="toast.icon" :class="getIconClasses(toast.type)">{{ toast.icon }}</span>
+        <div class="flex-1">
+          <div v-if="toast.title" class="font-medium text-sm leading-none">{{ toast.title }}</div>
+          <div v-if="toast.description" class="text-xs mt-1 leading-none" :class="getDescriptionClasses(toast.type)">{{ toast.description }}</div>
+        </div>
+        <button
+          :class="getCloseButtonClasses(toast.type)"
+          @click="removeToast(toast.id)"
+          aria-label="Close"
+        >
+          ×
+        </button>
+      </div>
+    </transition-group>
+  </div>
 </template>
 
 <script setup>
 import { ref, onUnmounted } from 'vue';
 
 const toasts = ref([]);
+const isStackExpanded = ref(false);
 let idCounter = 0;
 
-function showToast({ title, description, icon, duration = 3000 }) {
+function showToast({ title, description, icon, duration = 3000, type = 'default' }) {
   const id = ++idCounter;
-  toasts.value.push({ id, title, description, icon, visible: true });
+  console.log('Creating toast:', { id, title, description, icon, type });
+  toasts.value.push({ id, title, description, icon, visible: true, type });
   setTimeout(() => removeToast(id), duration);
 }
 
@@ -45,6 +61,87 @@ function removeToast(id) {
   }
 }
 
+function expandStack() {
+  isStackExpanded.value = true;
+}
+
+function collapseStack() {
+  isStackExpanded.value = false;
+}
+
+function getToastClasses(type, index) {
+  const baseClasses = 'rounded-lg px-4 py-3 flex items-center gap-3 pointer-events-auto w-80 shadow-lg border font-sans transition-all duration-200 ease-out';
+  const stackOffset = index * 8; // Stack offset in pixels
+  
+  switch (type) {
+    case 'success':
+      return `${baseClasses} bg-green-50 text-green-800 border-green-200`;
+    case 'error':
+      return `${baseClasses} bg-red-50 text-red-800 border-red-200`;
+    case 'warning':
+      return `${baseClasses} bg-yellow-50 text-yellow-800 border-yellow-200`;
+    case 'info':
+      return `${baseClasses} bg-blue-50 text-blue-800 border-blue-200`;
+    case 'loading':
+      return `${baseClasses} bg-gray-50 text-gray-800 border-gray-200`;
+    default:
+      return `${baseClasses} bg-card text-card-foreground border-border`;
+  }
+}
+
+function getDescriptionClasses(type) {
+  switch (type) {
+    case 'success':
+      return 'text-green-700';
+    case 'error':
+      return 'text-red-700';
+    case 'warning':
+      return 'text-yellow-700';
+    case 'info':
+      return 'text-blue-700';
+    case 'loading':
+      return 'text-gray-700';
+    default:
+      return 'text-muted-foreground';
+  }
+}
+
+function getCloseButtonClasses(type) {
+  const baseClasses = 'ml-2 hover:opacity-80 focus:outline-none transition-opacity rounded-full w-5 h-5 flex items-center justify-center text-xs';
+  
+  switch (type) {
+    case 'success':
+      return `${baseClasses} text-green-600 hover:bg-green-100`;
+    case 'error':
+      return `${baseClasses} text-red-600 hover:bg-red-100`;
+    case 'warning':
+      return `${baseClasses} text-yellow-600 hover:bg-yellow-100`;
+    case 'info':
+      return `${baseClasses} text-blue-600 hover:bg-blue-100`;
+    case 'loading':
+      return `${baseClasses} text-gray-600 hover:bg-gray-100`;
+    default:
+      return `${baseClasses} text-muted-foreground hover:bg-muted`;
+  }
+}
+
+function getIconClasses(type) {
+  switch (type) {
+    case 'success':
+      return 'text-green-600 text-lg';
+    case 'error':
+      return 'text-red-600 text-lg';
+    case 'warning':
+      return 'text-yellow-600 text-lg';
+    case 'info':
+      return 'text-blue-600 text-lg';
+    case 'loading':
+      return 'text-gray-600 text-lg';
+    default:
+      return 'text-muted-foreground text-lg';
+  }
+}
+
 // 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;

package/src/ui/toast.ts

@@ -0,0 +1,55 @@
+// Toast utilities for the Sonner component
+
+export interface ToastOptions {
+  title: string;
+  description?: string;
+  icon?: string;
+  duration?: number;
+  type?: 'success' | 'error' | 'warning' | 'info' | 'loading';
+}
+
+export const toast = {
+  success: (title: string, description?: string, duration?: number) => {
+    if (typeof window !== 'undefined' && window.$sonner) {
+      window.$sonner({ title, description, icon: '✅', duration, type: 'success' });
+    }
+  },
+  
+  error: (title: string, description?: string, duration?: number) => {
+    if (typeof window !== 'undefined' && window.$sonner) {
+      window.$sonner({ title, description, icon: '❌', duration, type: 'error' });
+    }
+  },
+  
+  warning: (title: string, description?: string, duration?: number) => {
+    if (typeof window !== 'undefined' && window.$sonner) {
+      window.$sonner({ title, description, icon: '⚠️', duration, type: 'warning' });
+    }
+  },
+  
+  info: (title: string, description?: string, duration?: number) => {
+    if (typeof window !== 'undefined' && window.$sonner) {
+      window.$sonner({ title, description, icon: 'ℹ️', duration, type: 'info' });
+    }
+  },
+  
+  loading: (title: string, description?: string, duration?: number) => {
+    if (typeof window !== 'undefined' && window.$sonner) {
+      window.$sonner({ title, description, icon: '⏳', duration, type: 'loading' });
+    }
+  },
+  
+  // Custom toast method
+  show: (options: ToastOptions) => {
+    if (typeof window !== 'undefined' && window.$sonner) {
+      window.$sonner(options);
+    }
+  }
+};
+
+// Extend Window interface for TypeScript
+declare global {
+  interface Window {
+    $sonner?: (options: ToastOptions) => void;
+  }
+}