@catalystsoftware/ui 1.0.2 → 1.0.5

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

@@ -0,0 +1,164 @@
+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/dist/components/catalyst-ui/forms/toggle-class.tsx

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