vyrn 2.0.9 → 3.0.0

package/Licence.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2025 vyan
+
+Permission is hereby granted to any person obtaining a copy of this software and associated documentation files (the "Software"), to view the Software for educational purposes. Use, modification, copying, merging, publishing, distribution, sublicensing, or selling of this Software is strictly prohibited without explicit written permission from the copyright holder.
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vyrn",
-  "version": "2.0.9",
+  "version": "3.0.0",
   "description": "A modern, customizable toast library for React and Next.js",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/rollup.config.js

@@ -1,57 +0,0 @@
-import typescript from 'rollup-plugin-typescript2';
-import postcss from 'rollup-plugin-postcss';
-import { terser } from 'rollup-plugin-terser';
-import replace from '@rollup/plugin-replace';
-import pkg from './package.json';
-
-const external = [...Object.keys(pkg.peerDependencies || {})];
-
-const plugins = [
-  // Add replace plugin to handle 'use client' directives
-  replace({
-    preventAssignment: true,
-    values: {
-      'use client': '',
-    },
-  }),
-  typescript({
-    typescript: require('typescript'),
-    tsconfig: 'tsconfig.json',
-    tsconfigOverride: {
-      compilerOptions: {
-        declaration: true,
-        declarationDir: 'dist',
-      },
-    },
-  }),
-  postcss({
-    extensions: ['.css'],
-    minimize: true,
-    inject: {
-      insertAt: 'top',
-    },
-  }),
-  terser(),
-];
-
-export default [
-  {
-    input: 'src/index.ts',
-    output: [
-      {
-        file: pkg.main,
-        format: 'cjs',
-        exports: 'named',
-        sourcemap: true,
-      },
-      {
-        file: pkg.module,
-        format: 'es',
-        exports: 'named',
-        sourcemap: true,
-      },
-    ],
-    external,
-    plugins,
-  },
-];

package/src/components/ClientToastProvider.tsx

@@ -1,42 +0,0 @@
-// ClientToastProvider.tsx
-'use client';
-
-import React from 'react';
-import { ToastProvider } from './ToastProvider';
-import { ToastPosition, ToastLayout, SwipeDirection } from '../types';
-
-interface ClientToastProviderProps {
-  children: React.ReactNode;
-  position?: ToastPosition;
-  layout?: ToastLayout;
-  maxToasts?: number;
-  containerClassName?: string;
-  showCloseButton?: boolean;
-  swipeDirection?: SwipeDirection;
-  showProgressBar?: boolean;
-}
-
-export const ClientToastProvider: React.FC<ClientToastProviderProps> = ({
-  children,
-  position,
-  layout = 'normal',
-  maxToasts,
-  containerClassName,
-  showCloseButton = true,
-  swipeDirection = 'right',
-  showProgressBar = true,
-}) => {
-  return (
-    <ToastProvider
-      defaultPosition={position}
-      defaultLayout={layout}
-      maxToasts={maxToasts}
-      containerClassName={containerClassName}
-      showCloseButton={showCloseButton}
-      swipeDirection={swipeDirection}
-      showProgressBar={showProgressBar}
-    >
-      {children}
-    </ToastProvider>
-  );
-};

package/src/components/Toast.tsx

@@ -1,184 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import { ToastProps } from '../types';
-import { useToastContext } from '../context/ToastContext';
-import { DEFAULT_DURATION } from '../utils/constants';
-import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
-import { motion, AnimatePresence } from 'framer-motion';
-import ToastProgressBar from '../utils/ToastProgressBar';
-
-interface ToastComponentProps extends ToastProps {
-  isExpanded: boolean;
-  isStacked: boolean;
-  showCloseButton?: boolean;
-  showProgressBar?: boolean;
-}
-
-export const Toast: React.FC<ToastComponentProps> = ({
-  id,
-  content,
-  type,
-  duration = DEFAULT_DURATION,
-  icon,
-  actions,
-  input,
-  onClose,
-  progress,
-  customStyles,
-  className = '',
-  isExpanded,
-  isStacked,
-  showCloseButton,
-  showProgressBar,
-}) => {
-  const { removeToast, updateToast } = useToastContext();
-  const [inputValue, setInputValue] = useState('');
-  const [localProgress, setLocalProgress] = useState(progress || 100);
-
-  useEffect(() => {
-    if (typeof progress === 'undefined') {
-      const timer = setInterval(() => {
-        setLocalProgress((prev) => {
-          const newProgress = prev - 100 / (duration / 1000);
-          return newProgress > 0 ? newProgress : 0;
-        });
-      }, 1000);
-
-      return () => clearInterval(timer);
-    }
-  }, [duration, progress]);
-
-  useEffect(() => {
-    if (localProgress === 0) {
-      removeToast(id);
-    }
-  }, [localProgress, id, removeToast]);
-
-  useEffect(() => {
-    if (typeof progress !== 'undefined') {
-      setLocalProgress(progress);
-    }
-  }, [progress]);
-
-  const getIcon = () => {
-    if (icon) return icon;
-    switch (type) {
-      case 'success':
-        return <CheckCircle className="vyrn-toast-icon text-green-500" />;
-      case 'error':
-        return <AlertCircle className="vyrn-toast-icon text-red-500" />;
-      case 'info':
-        return <Info className="vyrn-toast-icon text-blue-500" />;
-      case 'warning':
-        return <AlertTriangle className="vyrn-toast-icon text-yellow-500" />;
-      default:
-        return null;
-    }
-  };
-
-  const handleClose = () => {
-    onClose?.();
-    removeToast(id);
-  };
-
-  const handleInputSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    input?.onSubmit(inputValue);
-    setInputValue('');
-  };
-
-  return (
-    <motion.div
-      className={`vyrn-toast ${className} ${isStacked ? 'vyrn-toast-stacked' : ''} ${
-        type ? `vyrn-toast-${type}` : ''
-      }`}
-      style={{
-        ...customStyles,
-        height: isExpanded ? 'auto' : isStacked ? '60px' : 'auto',
-        overflow: 'hidden',
-      }}
-      initial={{ opacity: 0, y: 50, scale: 0.3 }}
-      animate={{ opacity: 1, y: 0, scale: 1 }}
-      exit={{ opacity: 0, scale: 0.5, transition: { duration: 0.2 } }}
-      transition={{ type: 'spring', stiffness: 500, damping: 30 }}
-    >
-      <div className="vyrn-toast-content">
-        {getIcon()}
-        <div className="vyrn-toast-message">{content}</div>
-      </div>
-      <AnimatePresence>
-        {isExpanded && (
-          <motion.div
-            initial={{ opacity: 0, height: 0 }}
-            animate={{ opacity: 1, height: 'auto' }}
-            exit={{ opacity: 0, height: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            {actions && (
-              <div className="vyrn-toast-actions">
-                {actions.map((action, index) => (
-                  <button
-                    key={index}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      action.onClick();
-                    }}
-                    className={`vyrn-toast-action vyrn-toast-action-${action.style || 'default'} ${
-                      action.className || ''
-                    }`}
-                  >
-                    {action.label}
-                  </button>
-                ))}
-              </div>
-            )}
-            {input && (
-              <form onSubmit={handleInputSubmit} className="vyrn-toast-input-form">
-                <input
-                  type="text"
-                  value={inputValue}
-                  onChange={(e) => setInputValue(e.target.value)}
-                  placeholder={input.placeholder}
-                  className={`vyrn-toast-input ${input.className || ''}`}
-                  onClick={(e) => e.stopPropagation()}
-                />
-                <button
-                  type="submit"
-                  className={`vyrn-toast-input-submit ${input.submitClassName || ''}`}
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  Submit
-                </button>
-              </form>
-            )}
-          </motion.div>
-        )}
-      </AnimatePresence>
-      {showCloseButton && (
-        <button
-          className="vyrn-toast-close"
-          onClick={(e) => {
-            e.stopPropagation();
-            handleClose();
-          }}
-          aria-label="Close"
-        >
-          <X size={18} />
-        </button>
-      )}
-      {showProgressBar && (
-        <ToastProgressBar
-          progress={localProgress}
-          type={type as 'success' | 'error' | 'warning' | 'info' | 'default'}
-        />
-      )}
-      {/* <motion.div
-        className="vyrn-toast-progress"
-        initial={{ width: '100%' }}
-        animate={{ width: `${localProgress}%` }}
-        transition={{ duration: 0.5 }}
-      /> */}
-    </motion.div>
-  );
-};

package/src/components/ToastContainer.tsx

@@ -1,132 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { Toast } from './Toast';
-import { ToastProps, ToastPosition, ToastLayout } from '../types';
-import { AnimatePresence, motion } from 'framer-motion';
-
-interface ToastContainerProps {
-  toasts: ToastProps[];
-  position: ToastPosition;
-  layout: ToastLayout;
-  className?: string;
-  showCloseButton?: boolean;
-  swipeDirection?: 'left' | 'right' | 'up' | 'down';
-  showProgressBar?: boolean;
-}
-
-export const ToastContainer: React.FC<ToastContainerProps> = ({
-  toasts,
-  position,
-  layout,
-  className = '',
-  showCloseButton = true,
-  swipeDirection = 'right',
-  showProgressBar = true,
-}) => {
-  const [isHovered, setIsHovered] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const EXPANDED_OFFSET = 80;
-  const STACK_OFFSET = 3;
-  const NORMAL_OFFSET = 15; // Reduced from 80 to 45 for tighter spacing
-
-  const getPositionStyles = () => {
-    const styles: React.CSSProperties = { position: 'fixed', zIndex: 9999 };
-    if (position.includes('top')) styles.top = '1rem';
-    if (position.includes('bottom')) styles.bottom = '3rem';
-    if (position.includes('left')) styles.left = '1rem';
-    if (position.includes('right')) styles.right = '1rem';
-    if (position.includes('center')) {
-      styles.left = '50%';
-      styles.transform = 'translateX(-50%)';
-    }
-    return styles;
-  };
-
-  const getSwipeAnimation = () => {
-    const distance = 100;
-    switch (swipeDirection) {
-      case 'left':
-        return { x: -distance, opacity: 0 };
-      case 'right':
-        return { x: distance, opacity: 0 };
-      case 'up':
-        return { y: -distance, opacity: 0 };
-      case 'down':
-        return { y: distance, opacity: 0 };
-      default:
-        return { x: distance, opacity: 0 };
-    }
-  };
-
-  const getOffset = (index: number) => {
-    if (layout === 'normal') {
-      // Reduced offset for normal layout
-      return position.startsWith('top')
-        ? index * (isHovered ? EXPANDED_OFFSET : NORMAL_OFFSET)
-        : -(index * (isHovered ? EXPANDED_OFFSET : NORMAL_OFFSET));
-    }
-
-    if (layout === 'stack') {
-      return isHovered ? index * EXPANDED_OFFSET : index * STACK_OFFSET;
-    }
-
-    return 0;
-  };
-
-  // Reverse toasts array for proper stacking order
-  const reversedToasts = [...toasts].reverse();
-
-  return (
-    <div
-      className={`vyrn-toast-container ${className}`}
-      style={getPositionStyles()}
-      ref={containerRef}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <AnimatePresence mode="sync">
-        {reversedToasts.map((toast, index) => (
-          <motion.div
-            key={toast.id}
-            layout
-            initial={{ opacity: 0, y: position.startsWith('top') ? -20 : 20, scale: 0.9 }}
-            animate={{
-              opacity: 1,
-              y: position.startsWith('top') ? getOffset(index) : -getOffset(index),
-              scale: isHovered ? 1.02 : 1,
-              zIndex: layout === 'stack' ? 9999 - index : 9999,
-              transition: {
-                type: 'spring',
-                stiffness: 500,
-                damping: 30,
-              },
-            }}
-            exit={getSwipeAnimation()}
-            drag={swipeDirection === 'left' || swipeDirection === 'right' ? 'x' : 'y'}
-            dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
-            dragElastic={0.9}
-            onDragEnd={(_, info) => {
-              const threshold = 100;
-              if (Math.abs(info.offset.x) > threshold || Math.abs(info.offset.y) > threshold) {
-                toast.onClose?.();
-              }
-            }}
-            style={{
-              position: layout === 'normal' ? 'relative' : 'absolute',
-              width: '100%',
-              transformOrigin: position.startsWith('top') ? 'top' : 'bottom',
-              marginBottom: layout === 'normal' ? '0.25rem' : 0, // Reduced margin to 0.25rem
-            }}
-          >
-            <Toast
-              {...toast}
-              isExpanded={layout !== 'stack' || isHovered}
-              isStacked={layout === 'stack' && !isHovered}
-              showCloseButton={toast.showCloseButton ?? showCloseButton}
-              showProgressBar={toast.showProgressBar ?? showProgressBar}
-            />
-          </motion.div>
-        ))}
-      </AnimatePresence>
-    </div>
-  );
-};

package/src/components/ToastProvider.tsx

@@ -1,105 +0,0 @@
-'use client';
-
-import React, { useState, useCallback, useEffect, useMemo } from 'react';
-import { createPortal } from 'react-dom';
-import { ToastContext } from '../context/ToastContext';
-import { ToastContainer } from './ToastContainer';
-import { ToastProps, ToastProviderProps, ToastPosition, ToastLayout } from '../types';
-import { MAX_TOASTS } from '../utils/constants';
-import '../styles/toast.css';
-
-export const ToastProvider: React.FC<ToastProviderProps> = ({
-  children,
-  defaultPosition = 'top-right',
-  defaultLayout = 'normal',
-  maxToasts = MAX_TOASTS,
-  containerClassName = '',
-  showCloseButton = true,
-  swipeDirection = 'right',
-  showProgressBar = true,
-}) => {
-  const [toasts, setToasts] = useState<ToastProps[]>([]);
-  const [position, setPosition] = useState<ToastPosition>(defaultPosition);
-  const [layout, setLayout] = useState<ToastLayout>(defaultLayout);
-
-  const addToast = useCallback(
-    (toast: Omit<ToastProps, 'id'>) => {
-      const id = Math.random().toString(36).substr(2, 9);
-      setToasts((prevToasts) => {
-        const newToasts = [...prevToasts, { ...toast, id }];
-        return newToasts.slice(-maxToasts);
-      });
-      if (toast.soundEffect) {
-        new Audio(toast.soundEffect).play().catch((e) => console.error('Error playing sound:', e));
-      }
-      return id;
-    },
-    [maxToasts],
-  );
-
-  const removeToast = useCallback((id: string) => {
-    setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
-  }, []);
-
-  const updateToast = useCallback((id: string, updates: Partial<Omit<ToastProps, 'id'>>) => {
-    setToasts((prevToasts) =>
-      prevToasts.map((toast) => (toast.id === id ? { ...toast, ...updates } : toast)),
-    );
-  }, []);
-
-  const clearAllToasts = useCallback(() => {
-    setToasts([]);
-  }, []);
-
-  const contextValue = useMemo(
-    () => ({
-      addToast,
-      removeToast,
-      updateToast,
-      clearAllToasts,
-      position,
-      setPosition,
-      layout,
-      setLayout,
-      showCloseButton,
-      swipeDirection,
-      showProgressBar,
-    }),
-    [
-      addToast,
-      removeToast,
-      updateToast,
-      clearAllToasts,
-      position,
-      layout,
-      showCloseButton,
-      swipeDirection,
-      showProgressBar,
-    ],
-  );
-
-  const [isMounted, setIsMounted] = useState(false);
-
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  return (
-    <ToastContext.Provider value={contextValue}>
-      {children}
-      {isMounted &&
-        createPortal(
-          <ToastContainer
-            toasts={toasts}
-            position={position}
-            layout={layout}
-            className={containerClassName}
-            showCloseButton={showCloseButton}
-            swipeDirection={swipeDirection}
-            showProgressBar={showProgressBar}
-          />,
-          document.body,
-        )}
-    </ToastContext.Provider>
-  );
-};

package/src/context/ToastContext.tsx

@@ -1,15 +0,0 @@
-'use client';
-
-import React from 'react';
-import { ToastContextValue } from '../types';
-
-export const ToastContext = React.createContext<ToastContextValue | undefined>(undefined);
-
-export const useToastContext = () => {
-  const context = React.useContext(ToastContext);
-  if (typeof context === 'undefined') {
-    throw new Error('useToastContext must be used within a ToastProvider');
-  }
-  return context;
-};
-

package/src/hooks/useToast.ts

@@ -1,90 +0,0 @@
-'use client';
-
-import { useCallback } from 'react';
-import { useToastContext } from '../context/ToastContext';
-import { ToastType, ToastProps, ToastPosition, ToastLayout } from '../types';
-
-export const useToast = () => {
-  const {
-    addToast,
-    removeToast,
-    updateToast,
-    clearAllToasts,
-    position,
-    setPosition,
-    layout,
-    setLayout,
-  } = useToastContext();
-
-  const toast = useCallback(
-    (options: Omit<ToastProps, 'id'> & { className?: string }) => {
-      return addToast(options);
-    },
-    [addToast],
-  );
-
-  const update = useCallback(
-    (id: string, updates: Partial<Omit<ToastProps, 'id'>>) => {
-      updateToast(id, updates);
-    },
-    [updateToast],
-  );
-
-  const dismiss = useCallback(
-    (id: string) => {
-      removeToast(id);
-    },
-    [removeToast],
-  );
-
-  const clearAll = useCallback(() => {
-    clearAllToasts();
-  }, [clearAllToasts]);
-
-  const changePosition = useCallback(
-    (newPosition: ToastPosition) => {
-      setPosition(newPosition);
-    },
-    [setPosition],
-  );
-
-  const changeLayout = useCallback(
-    (newLayout: ToastLayout) => {
-      setLayout(newLayout);
-    },
-    [setLayout],
-  );
-
-  return {
-    toast,
-    update,
-    dismiss,
-    clearAll,
-    changePosition,
-    changeLayout,
-    position,
-    layout,
-    default: (
-      content: React.ReactNode,
-      options?: Partial<Omit<ToastProps, 'id' | 'type' | 'content'>>,
-    ) => toast({ content, type: 'default', ...options }),
-    info: (
-      content: React.ReactNode,
-      options?: Partial<Omit<ToastProps, 'id' | 'type' | 'content'>>,
-    ) => toast({ content, type: 'info', ...options }),
-    success: (
-      content: React.ReactNode,
-      options?: Partial<Omit<ToastProps, 'id' | 'type' | 'content'>>,
-    ) => toast({ content, type: 'success', ...options }),
-    warning: (
-      content: React.ReactNode,
-      options?: Partial<Omit<ToastProps, 'id' | 'type' | 'content'>>,
-    ) => toast({ content, type: 'warning', ...options }),
-    error: (
-      content: React.ReactNode,
-      options?: Partial<Omit<ToastProps, 'id' | 'type' | 'content'>>,
-    ) => toast({ content, type: 'error', ...options }),
-    custom: (content: React.ReactNode, options?: Partial<Omit<ToastProps, 'id' | 'content'>>) =>
-      toast({ content, type: 'custom', ...options }),
-  };
-};

package/src/index.ts

@@ -1,9 +0,0 @@
-'use client';
-
-export { ToastProvider } from './components/ToastProvider';
-export { useToast } from './hooks/useToast';
-export type { ToastProps, ToastType, ToastPosition } from './types';
-
-// Special export for Next.js
-export { ClientToastProvider } from './components/ClientToastProvider';
-

package/src/styles/toast.css

@@ -1,238 +0,0 @@
-.vyrn-toast-container {
-  position: fixed;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  max-width: 356px;
-  width: calc(100% - 24px);
-  offset: 32px;
-  pointer-events: none;
-  padding: 12px;
-  bottom: 0;
-  right: 0;
-  gap: 8px;
-}
-
-.vyrn-toast {
-  display: flex;
-  overflow: hidden;
-  position: relative;
-  pointer-events: auto;
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  background-color: #ffffff;
-  width: 100%;
-  transition: all 0.2s ease;
-}
-
-.vyrn-toast-stacked {
-  height: 40px;
-  cursor: pointer;
-  transform-origin: top;
-  margin-bottom: 0;
-}
-
-.vyrn-toast-content {
-  display: flex;
-  align-items: center;
-  padding: 20px 20px;
-  min-height: 48px;
-  width: 100%;
-}
-
-.vyrn-toast-icon {
-  flex-shrink: 0;
-  margin-right: 8px;
-  width: 16px;
-  height: 16px;
-}
-
-.vyrn-toast-message {
-  flex-grow: 1;
-  font-size: 13px;
-  line-height: 1.5;
-  font-weight: 400;
-  color: #000000;
-  margin: 0;
-  padding: 0;
-}
-
-.vyrn-toast-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 0 16px 12px;
-}
-
-.vyrn-toast-action {
-  cursor: pointer;
-  padding: 6px 12px;
-  border-radius: 4px;
-  font-size: 13px;
-  font-weight: 500;
-  transition: all 0.2s ease;
-}
-
-.vyrn-toast-action-default {
-  background-color: #f1f3f5;
-  color: #495057;
-}
-
-.vyrn-toast-action-primary {
-  background-color: #339af0;
-  color: #ffffff;
-}
-
-.vyrn-toast-action-secondary {
-  background-color: #868e96;
-  color: #ffffff;
-}
-
-.vyrn-toast-action-danger {
-  background-color: #fa5252;
-  color: #ffffff;
-}
-
-.vyrn-toast-input-form {
-  display: flex;
-  padding: 0 16px 12px;
-}
-
-.vyrn-toast-input {
-  flex-grow: 1;
-  padding: 8px 12px;
-  border: 1px solid #e9ecef;
-  border-radius: 4px;
-  font-size: 13px;
-}
-
-.vyrn-toast-input-submit {
-  cursor: pointer;
-  padding: 8px 16px;
-  background-color: #339af0;
-  color: #ffffff;
-  border: none;
-  border-radius: 4px;
-  font-size: 13px;
-  font-weight: 500;
-  margin-left: 8px;
-}
-
-.vyrn-toast-close {
-  position: absolute;
-  top: 50%;
-  right: 12px;
-  transform: translateY(-50%);
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #868e96;
-  transition: color 0.2s ease;
-}
-
-.vyrn-toast-close:hover {
-  color: #495057;
-}
-
-.vyrn-toast-progress {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 2px;
-  background-color: rgba(51, 154, 240, 0.5);
-}
-
-/* Toast types */
-/* .vyrn-toast-success {
-  border-left: 3px solid #51cf66;
-}
-
-.vyrn-toast-error {
-  border-left: 3px solid #fa5252;
-}
-
-.vyrn-toast-info {
-  border-left: 3px solid #339af0;
-} */
-
-/* .vyrn-toast-warning {
-  border-left: 3px solid #fcc419;
-} */
-
-/* Dark mode */
-.dark .vyrn-toast {
-  background-color: #222222;
-}
-
-.dark .vyrn-toast-message {
-  color: #e9ecef;
-}
-
-.dark .vyrn-toast-action-default {
-  background-color: #343a40;
-  color: #f1f3f5;
-}
-
-.dark .vyrn-toast-input {
-  background-color: #343a40;
-  border-color: #495057;
-  color: #e9ecef;
-}
-
-.dark .vyrn-toast-close {
-  color: #adb5bd;
-}
-
-.dark .vyrn-toast-close:hover {
-  color: #e9ecef;
-}
-
-/* Animations */
-@keyframes vyrn-toast-enter {
-  from {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes vyrn-toast-exit {
-  from {
-    transform: translateY(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-}
-
-.vyrn-toast-enter {
-  animation: vyrn-toast-enter 0.3s ease-out;
-}
-
-.vyrn-toast-exit {
-  animation: vyrn-toast-exit 0.3s ease-in;
-}
-
-/* Responsive styles */
-@media (max-width: 640px) {
-  .vyrn-toast-container {
-    width: calc(100% - 32px);
-    padding: 8px;
-    bottom: 0;
-    right: 0;
-    left: 0;
-  }
-
-  .vyrn-toast {
-    border-radius: 6px 6px 0 0;
-  }
-}

package/src/types/index.ts

@@ -1,83 +0,0 @@
-import { ReactNode } from 'react';
-
-export type ToastType = 'default' | 'info' | 'success' | 'warning' | 'error' | 'custom';
-
-export type ToastPosition =
-  | 'top-right'
-  | 'top-left'
-  | 'bottom-right'
-  | 'bottom-left'
-  | 'top-center'
-  | 'bottom-center';
-
-export type ToastLayout = 'stack' | 'normal';
-
-export interface ToastAction {
-  label: string;
-  onClick: () => void;
-  style?: 'default' | 'primary' | 'secondary' | 'danger';
-  className?: string;
-}
-
-export interface ToastInput {
-  placeholder: string;
-  onSubmit: (value: string) => void;
-  submitClassName?: string;
-  className?: string;
-}
-
-export interface ToastProps {
-  id: string;
-  content: ReactNode;
-  type: ToastType;
-  duration?: number;
-  icon?: ReactNode;
-  actions?: ToastAction[];
-  input?: ToastInput;
-  onClose?: () => void;
-  progress?: number;
-  theme?: 'light' | 'dark' | 'custom';
-  customStyles?: React.CSSProperties;
-  soundEffect?: string;
-  animation?: 'slide' | 'fade' | 'bounce' | 'zoom';
-  className?: string;
-  showCloseButton?: boolean;
-  swipeClose?: boolean;
-  showProgressBar?: boolean;
-}
-
-export interface ToastContextValue {
-  addToast: (toast: Omit<ToastProps, 'id'>) => string;
-  removeToast: (id: string) => void;
-  updateToast: (id: string, updates: Partial<Omit<ToastProps, 'id'>>) => void;
-  clearAllToasts: () => void;
-  position: ToastPosition;
-  setPosition: (position: ToastPosition) => void;
-  layout: ToastLayout;
-  setLayout: (layout: ToastLayout) => void;
-}
-
-export interface ToastProviderProps {
-  children: React.ReactNode;
-  defaultPosition?: ToastPosition;
-  defaultLayout?: ToastLayout;
-  maxToasts?: number;
-  containerClassName?: string;
-  showCloseButton?: boolean;
-  swipeDirection?: SwipeDirection;
-  showProgressBar?: boolean;
-}
-
-export interface ToastTheme {
-  background: string;
-  text: string;
-  border: string;
-  progressBar: string;
-}
-
-export interface ToastGroupOptions {
-  groupId: string;
-  groupTitle: string;
-}
-
-export type SwipeDirection = 'left' | 'right' | 'up' | 'down';

package/src/utils/ToastProgressBar.tsx

@@ -1,178 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-
-interface ToastProgressBarProps {
-  progress: number;
-  type?: 'success' | 'error' | 'warning' | 'info' | 'default';
-}
-
-const ToastProgressBar: React.FC<ToastProgressBarProps> = ({ progress, type = 'default' }) => {
-  // Dynamic color mapping based on toast type
-  const getColors = () => {
-    const colors = {
-      success: {
-        base: '#10B981',
-        highlight: '#34D399',
-        glow: 'rgba(16, 185, 129, 0.4)'
-      },
-      error: {
-        base: '#EF4444',
-        highlight: '#F87171',
-        glow: 'rgba(239, 68, 68, 0.4)'
-      },
-      warning: {
-        base: '#F59E0B',
-        highlight: '#FBBF24',
-        glow: 'rgba(245, 158, 11, 0.4)'
-      },
-      info: {
-        base: '#3B82F6',
-        highlight: '#60A5FA',
-        glow: 'rgba(59, 130, 246, 0.4)'
-      },
-      default: {
-        base: '#6366F1',
-        highlight: '#818CF8',
-        glow: 'rgba(99, 102, 241, 0.4)'
-      }
-    };
-    return colors[type] || colors.default;
-  };
-
-  const colors = getColors();
-
-  return (
-    <motion.div
-      style={{
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        height: '2px',
-        overflow: 'hidden',
-        background: 'rgba(255, 255, 255, 0.1)',
-        backdropFilter: 'blur(8px)',
-      }}
-    >
-      {/* Backdrop blur line */}
-      <motion.div
-        style={{
-          position: 'absolute',
-          bottom: 0,
-          left: 0,
-          width: '100%',
-          height: '100%',
-          background: 'rgba(255, 255, 255, 0.05)',
-          backdropFilter: 'blur(2px)',
-        }}
-      />
-
-      {/* Main progress line */}
-      <motion.div
-        style={{
-          position: 'absolute',
-          bottom: 0,
-          left: 0,
-          height: '100%',
-          background: `linear-gradient(90deg, 
-            ${colors.base}, 
-            ${colors.highlight}, 
-            ${colors.base}
-          )`,
-          backgroundSize: '200% 100%',
-          boxShadow: `0 0 10px ${colors.glow}`,
-        }}
-        initial={{ width: '100%', backgroundPosition: '0% 0%' }}
-        animate={{
-          width: `${progress}%`,
-          backgroundPosition: ['0% 0%', '100% 0%'],
-        }}
-        transition={{
-          width: {
-            duration: 0.4,
-            ease: [0.4, 0, 0.2, 1],
-          },
-          backgroundPosition: {
-            duration: 2,
-            repeat: Infinity,
-            ease: "linear"
-          }
-        }}
-      >
-        {/* Ultra-modern scanning effect */}
-        <motion.div
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            background: `linear-gradient(90deg,
-              transparent 0%,
-              ${colors.highlight}40 50%,
-              transparent 100%
-            )`,
-            transform: 'translateX(-50%)',
-          }}
-          animate={{
-            x: ['0%', '200%'],
-          }}
-          transition={{
-            duration: 1.5,
-            repeat: Infinity,
-            ease: "linear",
-          }}
-        />
-
-        {/* Micro dots effect */}
-        <motion.div
-          style={{
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            width: '2px',
-            height: '100%',
-            background: colors.highlight,
-            filter: 'blur(0.5px)',
-          }}
-          animate={{
-            opacity: [1, 0.5, 1],
-            scale: [1, 1.2, 1],
-          }}
-          transition={{
-            duration: 1,
-            repeat: Infinity,
-            ease: "easeInOut",
-          }}
-        />
-      </motion.div>
-
-      {/* Ambient light effect */}
-      <motion.div
-        style={{
-          position: 'absolute',
-          bottom: 0,
-          left: 0,
-          width: `${progress}%`,
-          height: '100%',
-          background: `linear-gradient(90deg,
-            transparent,
-            ${colors.glow},
-            transparent
-          )`,
-          filter: 'blur(4px)',
-        }}
-        animate={{
-          opacity: [0.3, 0.6, 0.3],
-        }}
-        transition={{
-          duration: 2,
-          repeat: Infinity,
-          ease: "easeInOut",
-        }}
-      />
-    </motion.div>
-  );
-};
-
-export default ToastProgressBar;

package/src/utils/animations.ts

@@ -1,14 +0,0 @@
-export const fadeIn = `
-  @keyframes vyrnFadeIn {
-    from { opacity: 0; transform: translateY(20px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-`;
-
-export const fadeOut = `
-  @keyframes vyrnFadeOut {
-    from { opacity: 1; transform: translateY(0); }
-    to { opacity: 0; transform: translateY(-20px); }
-  }
-`;
-

package/src/utils/constants.ts

@@ -1,4 +0,0 @@
-export const TOAST_TYPES = ['info', 'success', 'warning', 'error'] as const;
-export const DEFAULT_DURATION = 3000;
-export const MAX_TOASTS = 5;
-