pelatform-ui 1.3.0 → 1.4.0

package/dist/button-Bc3N6jWT.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | "info" | "success" | "warning" | "invert" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): react_jsx_runtime.JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function AlertAction({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+export { Alert as A, Button as B, AlertAction as a, AlertDescription as b, AlertTitle as c, buttonVariants as d };

package/dist/chunk-4Z3DBWB6.js

@@ -0,0 +1,193 @@
+"use client";
+
+// src/ui/animation/hover-background.tsx
+import * as React from "react";
+import { motion, useMotionValue, useSpring } from "motion/react";
+import { cn } from "@pelatform/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+function HoverBackground({
+  className,
+  objectCount = 12,
+  children,
+  colors = {},
+  ...props
+}) {
+  const {
+    background = "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900",
+    objects = [
+      "bg-cyan-400/20",
+      "bg-purple-400/20",
+      "bg-fuchsia-400/20",
+      "bg-violet-400/20",
+      "bg-blue-400/20",
+      "bg-indigo-400/20"
+    ],
+    glow = "shadow-cyan-400/50"
+  } = colors;
+  const [isHovered, setIsHovered] = React.useState(false);
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
+  const springX = useSpring(mouseX, {
+    stiffness: 300,
+    damping: 30,
+    // Slower return to center when hover ends
+    restSpeed: 0.1,
+    restDelta: 0.1
+  });
+  const springY = useSpring(mouseY, {
+    stiffness: 300,
+    damping: 30,
+    restSpeed: 0.1,
+    restDelta: 0.1
+  });
+  const animatedObjects = React.useMemo(
+    () => Array.from({ length: objectCount }, (_, i) => {
+      const shape = Math.random() > 0.5 ? "circle" : "square";
+      return {
+        id: i,
+        x: Math.random() * 90 + 5,
+        // 5-95% to avoid edges
+        y: Math.random() * 90 + 5,
+        size: Math.random() * 60 + 20,
+        // 20-80px
+        color: objects[i % objects.length],
+        delay: Math.random() * 2,
+        shape,
+        floatDirection: Math.random() > 0.5 ? 1 : -1,
+        breathDuration: Math.random() * 3 + 3,
+        // 3-6 seconds
+        parallaxStrength: Math.random() * 0.5 + 0.3,
+        // 0.3-0.8 for more varied parallax depth
+        baseRotation: Math.random() * 360
+        // Random starting rotation offset
+      };
+    }),
+    [objectCount, objects]
+  );
+  const handleMouseMove = (event) => {
+    if (!isHovered) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    const centerX = rect.width / 2;
+    const centerY = rect.height / 2;
+    const x = (event.clientX - rect.left - centerX) / centerX;
+    const y = (event.clientY - rect.top - centerY) / centerY;
+    mouseX.set(x * 15);
+    mouseY.set(y * 15);
+  };
+  const handleHoverStart = () => {
+    setIsHovered(true);
+  };
+  const handleHoverEnd = () => {
+    setIsHovered(false);
+    mouseX.set(0);
+    mouseY.set(0);
+  };
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      "data-slot": "hover-background",
+      className: cn("relative size-full overflow-hidden", background, className),
+      onHoverStart: handleHoverStart,
+      onHoverEnd: handleHoverEnd,
+      onMouseMove: handleMouseMove,
+      whileHover: { scale: 1.02 },
+      transition: { duration: 0.3, ease: "easeOut" },
+      animate: {
+        backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
+      },
+      style: {
+        backgroundSize: "200% 200%"
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "absolute inset-0 bg-gradient-radial from-white/5 via-transparent to-transparent",
+            animate: {
+              opacity: [0.3, 0.6, 0.3],
+              scale: [1, 1.1, 1]
+            },
+            transition: {
+              duration: 4,
+              repeat: Infinity,
+              ease: "easeInOut"
+            }
+          }
+        ),
+        animatedObjects.map((obj) => /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: cn(
+              "absolute border border-white/10 backdrop-blur-sm",
+              obj.color,
+              obj.shape === "circle" ? "rounded-full" : "rotate-45 rounded-lg"
+            ),
+            style: {
+              left: `${obj.x}%`,
+              top: `${obj.y}%`,
+              width: obj.size,
+              height: obj.size,
+              // Apply parallax with individual object strength
+              x: springX.get() * obj.parallaxStrength,
+              y: springY.get() * obj.parallaxStrength
+            },
+            initial: {
+              scale: 0.6,
+              opacity: 0.4,
+              rotate: obj.baseRotation
+            },
+            animate: {
+              // Default state animations - breathing with base rotation offset
+              scale: [0.6, 0.8, 0.6],
+              opacity: [0.4, 0.6, 0.4],
+              rotate: obj.shape === "circle" ? [obj.baseRotation, obj.baseRotation + 10, obj.baseRotation] : [obj.baseRotation, obj.baseRotation + 5, obj.baseRotation],
+              y: [0, obj.floatDirection * 15, 0],
+              x: [0, obj.floatDirection * 8, 0]
+            },
+            transition: {
+              duration: obj.breathDuration,
+              delay: obj.delay,
+              ease: "easeInOut",
+              repeat: Infinity,
+              repeatType: "reverse"
+            },
+            whileHover: {
+              scale: 1.5,
+              boxShadow: `0 0 30px ${glow.replace("shadow-", "").replace("/50", "")}`
+            }
+          },
+          obj.id
+        )),
+        isHovered && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0", children: Array.from({ length: 20 }).map((_, i) => /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "absolute h-1 w-1 rounded-full bg-white/60",
+            style: {
+              left: `${Math.random() * 100}%`,
+              top: `${Math.random() * 100}%`
+            },
+            initial: { opacity: 0, scale: 0 },
+            animate: {
+              opacity: [0, 1, 0],
+              scale: [0, 1, 0],
+              y: [0, -50, -100]
+            },
+            transition: {
+              duration: 3,
+              delay: Math.random() * 2,
+              repeat: Infinity,
+              ease: "easeOut"
+            }
+          },
+          `particle-${i}`
+        )) }),
+        /* @__PURE__ */ jsx("div", { className: "relative z-10 size-full", children })
+      ]
+    }
+  );
+}
+
+export {
+  HoverBackground
+};

package/dist/chunk-V3ET2B55.js

@@ -0,0 +1,53 @@
+"use client";
+
+// src/hooks/use-meta-color.ts
+import * as React from "react";
+import { useTheme } from "next-themes";
+import { META_THEME_COLORS, THEME_MODES } from "@pelatform/utils";
+function useMetaColor(defaultColors) {
+  const { resolvedTheme } = useTheme();
+  const isSystemDarkMode = React.useCallback(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }, []);
+  const getEffectiveTheme = React.useCallback(
+    (theme) => {
+      if (theme === THEME_MODES.SYSTEM) {
+        return isSystemDarkMode() ? THEME_MODES.DARK : THEME_MODES.LIGHT;
+      }
+      return theme;
+    },
+    [isSystemDarkMode]
+  );
+  const metaColor = React.useMemo(() => {
+    const colorsToUse = defaultColors ?? META_THEME_COLORS;
+    const effectiveTheme = getEffectiveTheme(resolvedTheme);
+    if (effectiveTheme === THEME_MODES.DARK) {
+      return colorsToUse[THEME_MODES.DARK];
+    } else if (effectiveTheme === THEME_MODES.LIGHT) {
+      return colorsToUse[THEME_MODES.LIGHT];
+    }
+    return colorsToUse[THEME_MODES.LIGHT];
+  }, [resolvedTheme, defaultColors, getEffectiveTheme]);
+  const setMetaColor = React.useCallback((color) => {
+    const metaTag = document.querySelector('meta[name="theme-color"]');
+    if (metaTag) {
+      metaTag.setAttribute("content", color);
+    } else {
+      const newMetaTag = document.createElement("meta");
+      newMetaTag.name = "theme-color";
+      newMetaTag.content = color;
+      document.head.appendChild(newMetaTag);
+    }
+  }, []);
+  return {
+    /** Current meta theme color based on resolved theme */
+    metaColor,
+    /** Function to manually set meta theme color */
+    setMetaColor
+  };
+}
+
+export {
+  useMetaColor
+};