@evolution-soft/ui 1.0.0 → 1.0.3

package/components/subtitle/index.tsx

@@ -0,0 +1,60 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from '@/components/ui/utils';
+
+const subtitleVariants = cva(
+  "text-gray-400 transition-colors",
+  {
+    variants: {
+      size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+      },
+      weight: {
+        light: "font-light",
+        normal: "font-normal",
+        medium: "font-medium",
+        semibold: "font-semibold",
+        bold: "font-bold",
+        extrabold: "font-extrabold",
+        black: "font-black",
+      },
+      variant: {
+        default: "text-gray-400",
+        muted: "text-muted-foreground",
+        secondary: "text-secondary-foreground",
+        accent: "text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+      weight: "semibold",
+      variant: "default",
+    },
+  }
+);
+
+export interface SubtitleProps extends VariantProps<typeof subtitleVariants> {
+  children: React.ReactNode;
+  className?: string;
+  as?: 'p' | 'span' | 'div';
+}
+
+export function Subtitle({
+  size,
+  weight,
+  variant,
+  className,
+  as = 'p',
+  ...props
+}: SubtitleProps) {
+  const Comp = as;
+
+  return (
+    <Comp
+      className={cn(subtitleVariants({ size, weight, variant }), className)}
+      {...props}
+    />
+  );
+}

package/components/theme-transition/index.tsx

@@ -0,0 +1,142 @@
+
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Moon, Sun } from 'lucide-react';
+
+interface ThemeTransitionProps {
+    children: React.ReactNode;
+}
+
+export function ThemeTransition({ children }: ThemeTransitionProps) {
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const [themeKey, setThemeKey] = useState(0);
+    const [currentTheme, setCurrentTheme] = useState<'light' | 'dark'>('light');
+    const [isInitialized, setIsInitialized] = useState(false);
+
+    useEffect(() => {
+        const checkThemeChange = () => {
+            const isDark = document.documentElement.classList.contains('dark');
+            const newTheme = isDark ? 'dark' : 'light';
+
+            if (!isInitialized) {
+                setCurrentTheme(newTheme);
+                setIsInitialized(true);
+                return;
+            }
+
+            if (currentTheme !== newTheme) {
+                setCurrentTheme(newTheme);
+                setIsTransitioning(true);
+
+                setThemeKey(prev => prev + 1);
+
+                setTimeout(() => {
+                    setIsTransitioning(false);
+                }, 800);
+            }
+        };
+
+        const observer = new MutationObserver(checkThemeChange);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class']
+        });
+
+        checkThemeChange();
+
+        return () => {
+            observer.disconnect();
+        };
+    }, [currentTheme, isInitialized]);
+
+    return (
+        <>
+            <div key={themeKey}>
+                {children}
+            </div>
+
+            <AnimatePresence>
+                {isTransitioning && (
+                    <motion.div
+                        className="fixed inset-0 z-9999 flex items-center justify-center pointer-events-none"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        transition={{ duration: 0.2 }}
+                    >
+                        {/* Background overlay */}
+                        <motion.div
+                            className={`absolute inset-0 ${currentTheme === 'dark'
+                                ? 'bg-linear-to-br from-gray-900 via-gray-800 to-black'
+                                : 'bg-linear-to-br from-white via-gray-50 to-gray-100'
+                                }`}
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 0.95 }}
+                            exit={{ opacity: 0 }}
+                            transition={{ duration: 0.3 }}
+                        />
+
+                        {/* Animated icon */}
+                        <motion.div
+                            className="relative z-10 flex items-center justify-center"
+                            initial={{ scale: 0.8, opacity: 0 }}
+                            animate={{ scale: 1, opacity: 1 }}
+                            exit={{ scale: 0.8, opacity: 0 }}
+                            transition={{
+                                duration: 0.3,
+                                ease: "easeOut"
+                            }}
+                        >
+                            <div className={`p-6 rounded-full backdrop-blur-sm ${currentTheme === 'dark'
+                                ? 'bg-gray-800/90 border border-gray-600/50 shadow-2xl shadow-blue-500/20'
+                                : 'bg-white/90 border border-gray-300/50 shadow-2xl shadow-yellow-500/20'
+                                }`}>
+                                <motion.div
+                                    initial={{ rotate: 0 }}
+                                    animate={{ rotate: 180 }}
+                                    transition={{
+                                        duration: 0.6,
+                                        ease: "easeInOut"
+                                    }}
+                                >
+                                    {currentTheme === 'dark' ? (
+                                        <Moon className="w-8 h-8 text-blue-400" />
+                                    ) : (
+                                        <Sun className="w-8 h-8 text-yellow-500" />
+                                    )}
+                                </motion.div>
+                            </div>
+                        </motion.div>
+
+                        <motion.div
+                            className="absolute bottom-1/3 left-1/2 transform -translate-x-1/2"
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: -20 }}
+                            transition={{ duration: 0.4, delay: 0.2 }}
+                        >
+                            <p className={`text-base font-medium ${currentTheme === 'dark' ? 'text-gray-300' : 'text-gray-600'
+                                }`}>
+                                Alternando para modo {currentTheme === 'dark' ? 'escuro' : 'claro'}...
+                            </p>
+                        </motion.div>
+
+                        <motion.div
+                            className={`absolute inset-0 rounded-full ${currentTheme === 'dark' ? 'bg-blue-500/10' : 'bg-yellow-500/10'
+                                }`}
+                            initial={{ scale: 0.5, opacity: 0 }}
+                            animate={{ scale: 2.5, opacity: [0, 0.6, 0] }}
+                            transition={{
+                                duration: 0.8,
+                                ease: "easeOut"
+                            }}
+                            style={{
+                                filter: 'blur(40px)',
+                            }}
+                        />
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </>
+    );
+}

package/components/title/index.tsx

@@ -0,0 +1,66 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from '@/components/ui/utils';
+
+const titleVariants = cva(
+  "text-gray-700 dark:text-gray-300 transition-colors",
+  {
+    variants: {
+      size: {
+        xs: "text-sm md:text-base",
+        sm: "text-base md:text-lg",
+        md: "text-lg md:text-xl",
+        lg: "text-xl md:text-2xl",
+        xl: "text-2xl md:text-3xl",
+        "2xl": "text-3xl md:text-4xl",
+      },
+      weight: {
+        light: "font-light",
+        normal: "font-normal",
+        medium: "font-medium",
+        semibold: "font-semibold",
+        bold: "font-bold",
+        extrabold: "font-extrabold",
+        black: "font-black",
+      },
+      variant: {
+        default: "text-gray-700 dark:text-gray-300",
+        muted: "text-muted-foreground",
+        accent: "text-accent-foreground",
+        destructive: "text-destructive",
+        primary: "text-primary",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      weight: "bold",
+      variant: "default",
+    },
+  }
+);
+
+export interface TitleProps extends VariantProps<typeof titleVariants> {
+  children: React.ReactNode;
+  asChild?: boolean;
+  className?: string;
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+
+export function Title({
+  asChild = false,
+  size,
+  weight,
+  variant,
+  className,
+  as = 'h3',
+  ...props
+}: TitleProps) {
+  const Comp = asChild ? Slot : as;
+
+  return (
+    <Comp
+      className={cn(titleVariants({ size, weight, variant }), className)}
+      {...props}
+    />
+  );
+}

package/components/tooltip-indicator/index.tsx

@@ -0,0 +1,30 @@
+import { AlertCircle, Settings } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+
+interface TooltipIndicatorProps {
+    type: 'development' | 'analysis';
+    message?: string;
+}
+
+export function TooltipIndicator({ type, message }: TooltipIndicatorProps) {
+    const defaultMessages = {
+        development: 'Módulo em Desenvolvimento!',
+        analysis: 'Módulo em andamento/revisão, algumas funcionalidades podem estar travadas!'
+    };
+
+    const Icon = type === 'development' ? AlertCircle : Settings;
+    const color = type === 'development' ? 'text-orange-500' : 'text-blue-500';
+
+    return (
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Icon className={`h-3 w-3 ${color} shrink-0`} />
+                </TooltipTrigger>
+                <TooltipContent className='max-w-2xs'>
+                    <p className="text-xs">{message || defaultMessages[type]}</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    );
+}

package/components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+
+import { cn } from "./utils";
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/components/ui/alert-dialog.tsx

@@ -0,0 +1,157 @@
+
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "./utils";
+import { buttonVariants } from "./button";
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "./utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };

package/components/ui/aspect-ratio.tsx

@@ -0,0 +1,11 @@
+
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}
+
+export { AspectRatio };

package/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "./utils";
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-10 shrink-0 overflow-hidden rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };