@libreapps/ui 5.4.1

package/dist/alert.js

@@ -0,0 +1,98 @@
+"use client";
+'use strict';
+
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+__name(cn, "cn");
+var alertVariants = classVarianceAuthority.cva(
+  "group/alert relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:top-4 [&>svg]:left-4 [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-7 [&>svg]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground [&>svg]:text-foreground",
+        destructive: "border-destructive/50 text-destructive bg-destructive/10 dark:border-destructive [&>svg]:text-destructive",
+        // LibreApps-specific variants for backward compatibility
+        info: "text-muted-foreground bg-muted border-border [&>svg]:text-muted-foreground",
+        warning: "border-yellow-500/50 bg-yellow-500/10 text-yellow-700 dark:text-yellow-400 [&>svg]:text-yellow-600 dark:[&>svg]:text-yellow-400",
+        success: "border-green-500/50 bg-green-500/10 text-green-700 dark:text-green-400 [&>svg]:text-green-600 dark:[&>svg]:text-green-400",
+        download: "border-cyan-500/50 bg-cyan-500/10 text-cyan-700 dark:text-cyan-400 [&>svg]:text-cyan-600 dark:[&>svg]:text-cyan-400"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Alert({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "alert",
+      "data-variant": variant,
+      role: "alert",
+      className: cn(alertVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+__name(Alert, "Alert");
+function AlertTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "alert-title",
+      className: cn(
+        "mb-1 leading-none font-medium tracking-tight [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(AlertTitle, "AlertTitle");
+function AlertDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "alert-description",
+      className: cn(
+        "text-sm [&_p]:leading-relaxed [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(AlertDescription, "AlertDescription");
+function AlertAction({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "alert-action",
+      className: cn("mt-3 flex items-center gap-2", className),
+      ...props
+    }
+  );
+}
+__name(AlertAction, "AlertAction");
+
+exports.Alert = Alert;
+exports.AlertAction = AlertAction;
+exports.AlertDescription = AlertDescription;
+exports.AlertTitle = AlertTitle;
+exports.alertVariants = alertVariants;

package/dist/alert.mjs

@@ -0,0 +1,92 @@
+"use client";
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+__name(cn, "cn");
+var alertVariants = cva(
+  "group/alert relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:top-4 [&>svg]:left-4 [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-7 [&>svg]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground [&>svg]:text-foreground",
+        destructive: "border-destructive/50 text-destructive bg-destructive/10 dark:border-destructive [&>svg]:text-destructive",
+        // LibreApps-specific variants for backward compatibility
+        info: "text-muted-foreground bg-muted border-border [&>svg]:text-muted-foreground",
+        warning: "border-yellow-500/50 bg-yellow-500/10 text-yellow-700 dark:text-yellow-400 [&>svg]:text-yellow-600 dark:[&>svg]:text-yellow-400",
+        success: "border-green-500/50 bg-green-500/10 text-green-700 dark:text-green-400 [&>svg]:text-green-600 dark:[&>svg]:text-green-400",
+        download: "border-cyan-500/50 bg-cyan-500/10 text-cyan-700 dark:text-cyan-400 [&>svg]:text-cyan-600 dark:[&>svg]:text-cyan-400"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Alert({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert",
+      "data-variant": variant,
+      role: "alert",
+      className: cn(alertVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+__name(Alert, "Alert");
+function AlertTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-title",
+      className: cn(
+        "mb-1 leading-none font-medium tracking-tight [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(AlertTitle, "AlertTitle");
+function AlertDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-description",
+      className: cn(
+        "text-sm [&_p]:leading-relaxed [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(AlertDescription, "AlertDescription");
+function AlertAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-action",
+      className: cn("mt-3 flex items-center gap-2", className),
+      ...props
+    }
+  );
+}
+__name(AlertAction, "AlertAction");
+
+export { Alert, AlertAction, AlertDescription, AlertTitle, alertVariants };

package/dist/animation/animated-background.js

@@ -0,0 +1,424 @@
+"use client";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var react$1 = require('motion/react');
+var utils = require('@/lib/utils');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = react.useState(false);
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handleChange = /* @__PURE__ */ __name((event) => {
+      setPrefersReducedMotion(event.matches);
+    }, "handleChange");
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  return prefersReducedMotion;
+}
+__name(usePrefersReducedMotion, "usePrefersReducedMotion");
+function GradientBackground({
+  colors,
+  speed,
+  intensity,
+  paused
+}) {
+  const gradientColors = colors.length >= 2 ? colors : ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4"];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.motion.div,
+    {
+      className: "absolute inset-0",
+      style: {
+        background: `linear-gradient(-45deg, ${gradientColors.join(", ")})`,
+        backgroundSize: "400% 400%"
+      },
+      animate: paused ? {} : {
+        x: ["0%", "100%", "0%"]
+      },
+      transition: {
+        duration: 10 / speed,
+        repeat: Infinity,
+        ease: "linear"
+      }
+    }
+  );
+}
+__name(GradientBackground, "GradientBackground");
+function BlobBackground({
+  colors,
+  speed,
+  elementCount,
+  intensity,
+  paused
+}) {
+  const blobs = react.useMemo(
+    () => Array.from({ length: elementCount }, (_, i) => ({
+      id: i,
+      color: colors[i % colors.length],
+      size: Math.random() * 200 + 100,
+      x: Math.random() * 100,
+      y: Math.random() * 100,
+      duration: (Math.random() * 10 + 10) / speed
+    })),
+    [elementCount, colors, speed]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden", children: blobs.map((blob) => /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.motion.div,
+    {
+      className: "absolute rounded-full",
+      style: {
+        background: `radial-gradient(circle, ${blob.color}40, transparent)`,
+        width: blob.size * intensity,
+        height: blob.size * intensity,
+        filter: "blur(40px)"
+      },
+      initial: {
+        x: `${blob.x}%`,
+        y: `${blob.y}%`
+      },
+      animate: paused ? {} : {
+        x: [`${blob.x}%`, `${(blob.x + 50) % 100}%`, `${blob.x}%`],
+        y: [`${blob.y}%`, `${(blob.y + 30) % 100}%`, `${blob.y}%`],
+        scale: [1, 1.2, 1]
+      },
+      transition: {
+        duration: blob.duration,
+        repeat: Infinity,
+        ease: "easeInOut"
+      }
+    },
+    blob.id
+  )) });
+}
+__name(BlobBackground, "BlobBackground");
+function WaveBackground({
+  colors,
+  speed,
+  intensity,
+  paused
+}) {
+  const waveColor = colors[0] || "#4ecdc4";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden", children: [0, 1, 2].map((index) => /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.motion.div,
+    {
+      className: "absolute inset-0",
+      style: {
+        background: `radial-gradient(ellipse 100% 50% at center ${50 + index * 20}%, ${waveColor}${Math.round(
+          30 * intensity
+        ).toString(16).padStart(2, "0")}, transparent)`
+      },
+      animate: paused ? {} : {
+        y: [index * 10, index * 10 + 20 * intensity, index * 10]
+      },
+      transition: {
+        duration: (3 + index) / speed,
+        repeat: Infinity,
+        ease: "easeInOut"
+      }
+    },
+    index
+  )) });
+}
+__name(WaveBackground, "WaveBackground");
+function MeshBackground({
+  colors,
+  speed,
+  intensity,
+  paused
+}) {
+  const meshColors = colors.length >= 4 ? colors.slice(0, 4) : ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4"];
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden", children: meshColors.map((color, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.motion.div,
+    {
+      className: "absolute rounded-full",
+      style: {
+        background: `radial-gradient(circle, ${color}60, transparent)`,
+        width: `${60 + index * 20}%`,
+        height: `${60 + index * 20}%`,
+        filter: "blur(60px)",
+        mixBlendMode: "multiply"
+      },
+      initial: {
+        x: `${25 + index * 15}%`,
+        y: `${25 + index * 15}%`
+      },
+      animate: paused ? {} : {
+        x: [
+          `${25 + index * 15}%`,
+          `${35 + index * 15}%`,
+          `${25 + index * 15}%`
+        ],
+        y: [
+          `${25 + index * 15}%`,
+          `${15 + index * 15}%`,
+          `${25 + index * 15}%`
+        ],
+        rotate: [0, 180, 360]
+      },
+      transition: {
+        duration: (8 + index * 2) / speed,
+        repeat: Infinity,
+        ease: "easeInOut"
+      }
+    },
+    index
+  )) });
+}
+__name(MeshBackground, "MeshBackground");
+function ParallaxBackground({
+  layers,
+  speed,
+  paused
+}) {
+  const mouseX = react$1.useMotionValue(0);
+  const mouseY = react$1.useMotionValue(0);
+  react.useEffect(() => {
+    const handleMouseMove = /* @__PURE__ */ __name((e) => {
+      const { clientX, clientY } = e;
+      const { innerWidth, innerHeight } = window;
+      mouseX.set((clientX / innerWidth - 0.5) * 100);
+      mouseY.set((clientY / innerHeight - 0.5) * 100);
+    }, "handleMouseMove");
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, [mouseX, mouseY]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden", children: layers.map((layer, index) => {
+    const x = react$1.useTransform(
+      mouseX,
+      [-50, 50],
+      [-layer.speed * 10, layer.speed * 10]
+    );
+    const y = react$1.useTransform(
+      mouseY,
+      [-50, 50],
+      [-layer.speed * 10, layer.speed * 10]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.motion.div,
+      {
+        className: "absolute inset-0",
+        style: {
+          background: `radial-gradient(circle, ${layer.color}, transparent)`,
+          opacity: layer.opacity,
+          x: paused ? 0 : x,
+          y: paused ? 0 : y
+        }
+      },
+      index
+    );
+  }) });
+}
+__name(ParallaxBackground, "ParallaxBackground");
+function ParticlesBackground({
+  colors,
+  speed,
+  elementCount,
+  intensity,
+  paused
+}) {
+  const particles = react.useMemo(
+    () => Array.from({ length: elementCount }, (_, i) => ({
+      id: i,
+      color: colors[i % colors.length],
+      size: Math.random() * 4 + 2,
+      x: Math.random() * 100,
+      y: Math.random() * 100,
+      duration: (Math.random() * 20 + 20) / speed,
+      delay: Math.random() * 5
+    })),
+    [elementCount, colors, speed]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden", children: particles.map((particle) => /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.motion.div,
+    {
+      className: "absolute rounded-full",
+      style: {
+        backgroundColor: particle.color,
+        width: particle.size * intensity,
+        height: particle.size * intensity,
+        opacity: 0.6
+      },
+      initial: {
+        x: `${particle.x}%`,
+        y: `${particle.y}%`
+      },
+      animate: paused ? {} : {
+        y: [`${particle.y}%`, `${particle.y - 100}%`],
+        opacity: [0, 0.6, 0]
+      },
+      transition: {
+        duration: particle.duration,
+        repeat: Infinity,
+        delay: particle.delay,
+        ease: "linear"
+      }
+    },
+    particle.id
+  )) });
+}
+__name(ParticlesBackground, "ParticlesBackground");
+function AnimatedBackground({
+  animation = "gradient",
+  speed = 1,
+  colors = ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#ffeaa7"],
+  paused = false,
+  className,
+  style,
+  children,
+  intensity = 1,
+  blur = false,
+  blurAmount = 20,
+  opacity = 1,
+  elementCount = 5,
+  width = "100%",
+  height = "100%",
+  fullscreen = false,
+  parallaxLayers = [
+    { speed: 0.5, color: "#ff6b6b50", opacity: 0.3 },
+    { speed: 1, color: "#4ecdc450", opacity: 0.4 },
+    { speed: 1.5, color: "#45b7d150", opacity: 0.3 }
+  ]
+}) {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const isAnimationPaused = paused || prefersReducedMotion;
+  const containerStyle = react.useMemo(
+    () => ({
+      width: fullscreen ? "100vw" : width,
+      height: fullscreen ? "100vh" : height,
+      opacity,
+      filter: blur ? `blur(${blurAmount}px)` : void 0,
+      ...style
+    }),
+    [fullscreen, width, height, opacity, blur, blurAmount, style]
+  );
+  const renderAnimation = /* @__PURE__ */ __name(() => {
+    const props = { colors, speed, intensity, paused: isAnimationPaused };
+    switch (animation) {
+      case "blob":
+        return /* @__PURE__ */ jsxRuntime.jsx(BlobBackground, { ...props, elementCount });
+      case "wave":
+        return /* @__PURE__ */ jsxRuntime.jsx(WaveBackground, { ...props });
+      case "mesh":
+        return /* @__PURE__ */ jsxRuntime.jsx(MeshBackground, { ...props });
+      case "parallax":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ParallaxBackground,
+          {
+            layers: parallaxLayers,
+            speed,
+            paused: isAnimationPaused
+          }
+        );
+      case "particles":
+        return /* @__PURE__ */ jsxRuntime.jsx(ParticlesBackground, { ...props, elementCount });
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(GradientBackground, { ...props });
+    }
+  }, "renderAnimation");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "relative overflow-hidden",
+        fullscreen && "fixed inset-0 z-0",
+        className
+      ),
+      style: containerStyle,
+      children: [
+        renderAnimation(),
+        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 h-full w-full", children })
+      ]
+    }
+  );
+}
+__name(AnimatedBackground, "AnimatedBackground");
+var AnimatedBackgroundPresets = {
+  /**
+   * Calm gradient flow
+   */
+  CalmGradient: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(
+    AnimatedBackground,
+    {
+      animation: "gradient",
+      colors: ["#667eea", "#764ba2", "#f093fb", "#f5576c"],
+      speed: 0.5,
+      ...props
+    }
+  ), "CalmGradient"),
+  /**
+   * Ocean waves
+   */
+  OceanWaves: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(
+    AnimatedBackground,
+    {
+      animation: "wave",
+      colors: ["#0093E9", "#80D0C7"],
+      ...props
+    }
+  ), "OceanWaves"),
+  /**
+   * Floating bubbles
+   */
+  FloatingBubbles: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(
+    AnimatedBackground,
+    {
+      animation: "blob",
+      colors: ["#667eea", "#764ba2", "#f093fb"],
+      elementCount: 8,
+      ...props
+    }
+  ), "FloatingBubbles"),
+  /**
+   * Cosmic mesh
+   */
+  CosmicMesh: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(
+    AnimatedBackground,
+    {
+      animation: "mesh",
+      colors: ["#667eea", "#764ba2", "#f093fb", "#f5576c"],
+      ...props
+    }
+  ), "CosmicMesh"),
+  /**
+   * Starfield particles
+   */
+  Starfield: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(
+    AnimatedBackground,
+    {
+      animation: "particles",
+      colors: ["#ffffff", "#f0f0f0", "#e0e0e0"],
+      elementCount: 50,
+      intensity: 0.5,
+      ...props
+    }
+  ), "Starfield"),
+  /**
+   * Aurora parallax
+   */
+  Aurora: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(
+    AnimatedBackground,
+    {
+      animation: "parallax",
+      parallaxLayers: [
+        { speed: 0.3, color: "#00ff8850", opacity: 0.4 },
+        { speed: 0.6, color: "#0080ff50", opacity: 0.3 },
+        { speed: 0.9, color: "#8000ff50", opacity: 0.3 },
+        { speed: 1.2, color: "#ff008050", opacity: 0.2 }
+      ],
+      ...props
+    }
+  ), "Aurora")
+};
+var background_default = AnimatedBackground;
+
+exports.AnimatedBackground = AnimatedBackground;
+exports.AnimatedBackgroundPresets = AnimatedBackgroundPresets;
+exports.default = background_default;