@catalystsoftware/ui 1.0.5 → 1.0.7

package/components/catalyst-ui/core/navigation/menu.tsx

@@ -1,164 +0,0 @@
-import React, { useState } from 'react';
-import { Info, Mail, HelpCircle, CreditCard, Home, Settings, User, FileText, Calendar, ShoppingCart, BarChart3, Shield } from 'lucide-react';
-import { cn } from '~/components/catalyst-ui';
-
-interface MenuItem {
-  id: string;
-  label: string;
-  icon: React.ReactNode;
-  href?: string;
-  onClick?: () => void;
-  active?: boolean;
-}
-
-interface CategoryMenuProps {
-  title?: string;
-  items: MenuItem[];
-  activeItemId?: string;
-  onItemClick?: (item: MenuItem) => void;
-  className?: string;
-  width?: string;
-}
-
-export function Menu({
-  title = "Categories",
-  items,
-  activeItemId,
-  onItemClick,
-  className = "",
-  width = "md:w-80"
-}: CategoryMenuProps) {
-  const [selectedItemId, setSelectedItemId] = useState(activeItemId || items.find(item => item.active)?.id || '');
-
-  const handleItemClick = (item, index) => {
-    setSelectedItemId(index);
-    onItemClick?.(item);
-    if (item.onClick) {
-      item.onClick();
-    } else if (item.href) {
-      window.location.href = item.href;
-    }
-  };
-
-  return (
-    <div className={cn("bg-card border-0 mb-0", width, className)}>
-      <div className="text-foreground block font-bold mb-3 text-lg">
-        {title}
-      </div>
-      <ul className="list-none m-0 p-0">
-        {items.map((item,index) => (
-          <li key={index} className="mb-2">
-            <button
-              onClick={() => handleItemClick(item, index)}
-              className={cn(
-                "w-full flex items-center cursor-pointer select-none p-3 transition-colors duration-150 rounded-md text-left",
-                selectedItemId === index
-                  ? "bg-muted text-foreground"
-                  : "hover:bg-accent hover:text-accent-foreground text-muted-foreground"
-              )}
-            >
-                {item.icon && (
-    <span className="mr-2 text-lg flex-shrink-0">
-                {item.icon}
-              </span>
-                )}
-              <span className="font-medium">
-                {item.label}
-              </span>
-            </button>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-
-export function CategoryMenuDemo() {
-  const [selectedCategory, setSelectedCategory] = useState('');
-
-  const menuItems: MenuItem[] = [
-    {
-      id: 'general',
-      label: 'General',
-      icon: <Info className="w-5 h-5" />,
-      href: '#general'
-    },
-    {
-      id: 'mailing',
-      label: 'Mailing',
-      icon: <Mail className="w-5 h-5" />,
-      href: '#mailing'
-    },
-    {
-      id: 'support',
-      label: 'Support',
-      icon: <HelpCircle className="w-5 h-5" />,
-      href: '#support'
-    },
-    {
-      id: 'billing',
-      label: 'Billing',
-      icon: <CreditCard className="w-5 h-5" />,
-      href: '#billing',
-      active: true
-    },
-    {
-      id: 'dashboard',
-      label: 'Dashboard',
-      icon: <BarChart3 className="w-5 h-5" />,
-      href: '#dashboard'
-    },
-    {
-      id: 'profile',
-      label: 'Profile',
-      icon: <User className="w-5 h-5" />,
-      href: '#profile'
-    },
-    {
-      id: 'documents',
-      label: 'Documents',
-      icon: <FileText className="w-5 h-5" />,
-      href: '#documents'
-    },
-    {
-      id: 'calendar',
-      label: 'Calendar',
-      icon: <Calendar className="w-5 h-5" />,
-      href: '#calendar'
-    }
-  ];
-
-  const handleCategorySelect = (item: MenuItem) => {
-    setSelectedCategory(item.label);
-  };
-
-  return (
-    <div className="min-h-screen bg-background p-8">
-      <div className="max-w-6xl mx-auto">
-        <h2 className="text-2xl font-bold text-foreground mb-8">Category Menu Demo</h2>
-        
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-          <Menu
-            items={menuItems}
-            onItemClick={handleCategorySelect}
-            title="Main Categories"
-          />
-          
-          <Menu
-            items={menuItems.slice(0, 4)}
-            onItemClick={handleCategorySelect}
-            title="Quick Access"
-            width="w-full"
-          />
-          
-          <div className="bg-card border border-border rounded-lg p-6">
-            <h3 className="font-semibold text-foreground mb-4">Selected Category</h3>
-            <p className="text-muted-foreground">
-              {selectedCategory ? `You selected: ${selectedCategory}` : 'Click on a category to see it here'}
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/components/catalyst-ui/forms/toggle-class.tsx

@@ -1,176 +0,0 @@
-import React, { useRef, useEffect, useCallback } from 'react'
-import { Button } from "~/components/catalyst-ui"
-import { Input } from "~/components/catalyst-ui"
-import { Card, CardContent } from "~/components/catalyst-ui"
-import { cn } from "~/components/catalyst-ui"
-
-interface ToggleClassProps {
-  nodeRef?: React.RefObject<HTMLElement>
-  selector?: string
-  toggleClassName?: string
-  enterClassName?: string
-  enterActiveClassName?: string
-  enterToClassName?: string
-  leaveClassName?: string
-  leaveActiveClassName?: string
-  leaveToClassName?: string
-  hideOnOutsideClick?: boolean
-  animationDuration?: number
-  children?: React.ReactNode
-  variant?: "toggle" | "enter-leave"
-}
-
-
-function ToggleClass({
-  nodeRef,
-  selector = "@next",
-  toggleClassName,
-  enterClassName,
-  enterActiveClassName,
-  enterToClassName,
-  leaveClassName,
-  leaveActiveClassName,
-  leaveToClassName,
-  hideOnOutsideClick = false,
-  animationDuration = 300,
-  children,
-  variant = "toggle"
-}) {
-  const internalRef = useRef(null);
-  const targetRef = nodeRef || internalRef;
-  const isAnimating = useRef(false);
-
-  const findTarget = useCallback((element, selector) => {
-    switch (selector) {
-      case "@next":
-        return element.nextElementSibling;
-      case "@prev":
-        return element.previousElementSibling;
-      case "@parent":
-        return element.parentElement;
-      case "@grandparent":
-        return element.parentElement?.parentElement;
-      default:
-        return document.querySelector(selector);
-    }
-  }, []);
-
-  const handleToggleClass = useCallback(() => {
-    const triggerElement = targetRef.current;
-    if (!triggerElement) return;
-
-    const target = findTarget(triggerElement, selector);
-    if (!target || !toggleClassName) return;
-
-    toggleClassName.split(' ').forEach(cls => {
-      target.classList.toggle(cls);
-    });
-  }, [targetRef, selector, toggleClassName, findTarget]);
-
-  const handleEnterLeave = useCallback((isEntering) => {
-    const triggerElement = targetRef.current;
-    if (!triggerElement || isAnimating.current) return;
-
-    const target = findTarget(triggerElement, selector);
-    if (!target) return;
-
-    isAnimating.current = true;
-
-    if (isEntering) {
-      if (enterClassName) enterClassName.split(' ').forEach(cls => target.classList.add(cls));
-      if (enterActiveClassName) {
-        enterActiveClassName.split(' ').forEach(cls => target.classList.add(cls));
-      }
-      
-      requestAnimationFrame(() => {
-        if (enterToClassName) enterToClassName.split(' ').forEach(cls => target.classList.add(cls));
-        if (enterClassName) enterClassName.split(' ').forEach(cls => target.classList.remove(cls));
-      });
-
-      setTimeout(() => {
-        if (enterActiveClassName) enterActiveClassName.split(' ').forEach(cls => target.classList.remove(cls));
-        if (enterToClassName) enterToClassName.split(' ').forEach(cls => target.classList.remove(cls));
-        isAnimating.current = false;
-      }, animationDuration);
-    } else {
-      if (leaveClassName) leaveClassName.split(' ').forEach(cls => target.classList.add(cls));
-      if (leaveActiveClassName) {
-        leaveActiveClassName.split(' ').forEach(cls => target.classList.add(cls));
-      }
-      
-      requestAnimationFrame(() => {
-        if (leaveToClassName) leaveToClassName.split(' ').forEach(cls => target.classList.add(cls));
-        if (leaveClassName) leaveClassName.split(' ').forEach(cls => target.classList.remove(cls));
-      });
-
-      setTimeout(() => {
-        if (leaveActiveClassName) leaveActiveClassName.split(' ').forEach(cls => target.classList.remove(cls));
-        if (leaveToClassName) leaveToClassName.split(' ').forEach(cls => target.classList.remove(cls));
-        isAnimating.current = false;
-      }, animationDuration);
-    }
-  }, [targetRef, selector, enterClassName, enterActiveClassName, enterToClassName, leaveClassName, leaveActiveClassName, leaveToClassName, animationDuration, findTarget]);
-
-  useEffect(() => {
-    const triggerElement = targetRef.current;
-    if (!triggerElement) return;
-
-    const handleClick = () => {
-      if (variant === "toggle" && toggleClassName) {
-        handleToggleClass();
-      } else if (variant === "enter-leave") {
-        const target = findTarget(triggerElement, selector);
-        if (target) {
-          const isHidden = target.classList.contains("hidden") || 
-                          target.style.display === "none" ||
-                          target.offsetParent === null;
-          handleEnterLeave(isHidden);
-        }
-      }
-    };
-
-    const handleOutsideClick = (event) => {
-      if (!hideOnOutsideClick) return;
-      
-      const target = findTarget(triggerElement, selector);
-      if (!target) return;
-
-      const clickedElement = event.target;
-      if (!target.contains(clickedElement) && !triggerElement.contains(clickedElement)) {
-        if (variant === "enter-leave") {
-          handleEnterLeave(false);
-        } else if (variant === "toggle" && toggleClassName) {
-          toggleClassName.split(' ').forEach(cls => {
-            if (target.classList.contains(cls)) {
-              target.classList.remove(cls);
-            }
-          });
-        }
-      }
-    };
-
-    triggerElement.addEventListener('click', handleClick);
-    
-    if (hideOnOutsideClick) {
-      document.addEventListener('click', handleOutsideClick);
-    }
-
-    return () => {
-      triggerElement.removeEventListener('click', handleClick);
-      if (hideOnOutsideClick) {
-        document.removeEventListener('click', handleOutsideClick);
-      }
-    };
-  }, [variant, toggleClassName, hideOnOutsideClick, handleToggleClass, handleEnterLeave, targetRef, selector, findTarget]);
-
-  if (!children) {
-    return <div ref={internalRef} />;
-  }
-
-  return React.cloneElement(children, {
-    ref: targetRef
-  });
-}
-
-
-export { ToggleClass }