@pelatform/ui.components 0.1.0

package/README.md

@@ -0,0 +1 @@
+# @pelatform/ui.components

package/dist/animation.d.ts

@@ -0,0 +1,379 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default, { ComponentPropsWithoutRef, ReactNode, ElementType } from 'react';
+import { UseInViewOptions, SpringOptions, HTMLMotionProps, Transition, MotionProps } from 'motion/react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+type AnimationType = "default" | "flip" | "reveal";
+interface AvatarGroupProps {
+    children: React.ReactNode;
+    className?: string;
+    tooltipClassName?: string;
+    animation?: AnimationType;
+}
+interface AvatarGroupItemProps {
+    children: React.ReactNode;
+    className?: string;
+    tooltipClassName?: string;
+    animation?: AnimationType;
+}
+interface AvatarGroupTooltipProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare function AvatarGroup({ children, className, tooltipClassName, animation, }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
+declare function AvatarGroupItem({ children, className, tooltipClassName, animation: itemAnimation, }: AvatarGroupItemProps): react_jsx_runtime.JSX.Element;
+declare function AvatarGroupTooltip({ children, className }: AvatarGroupTooltipProps): react_jsx_runtime.JSX.Element;
+
+interface CountingNumberProps {
+    from?: number;
+    to?: number;
+    duration?: number;
+    delay?: number;
+    className?: string;
+    startOnView?: boolean;
+    once?: boolean;
+    inViewMargin?: UseInViewOptions["margin"];
+    onComplete?: () => void;
+    format?: (value: number) => string;
+}
+declare function CountingNumber({ from, to, duration, delay, className, startOnView, once, inViewMargin, onComplete, format, ...props }: CountingNumberProps): react_jsx_runtime.JSX.Element;
+
+declare const githubButtonVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface GithubButtonProps extends React__default.ComponentProps<"button">, VariantProps<typeof githubButtonVariants> {
+    /** Whether to round stars */
+    roundStars?: boolean;
+    /** Whether to show Github icon */
+    fixedWidth?: boolean;
+    /** Initial number of stars */
+    initialStars?: number;
+    /** Class for stars */
+    starsClass?: string;
+    /** Target number of stars to animate to */
+    targetStars?: number;
+    /** Animation duration in seconds */
+    animationDuration?: number;
+    /** Animation delay in seconds */
+    animationDelay?: number;
+    /** Whether to start animation automatically */
+    autoAnimate?: boolean;
+    /** Callback when animation completes */
+    onAnimationComplete?: () => void;
+    /** Whether to show Github icon */
+    showGithubIcon?: boolean;
+    /** Whether to show star icon */
+    showStarIcon?: boolean;
+    /** Whether to show separator */
+    separator?: boolean;
+    /** Whether stars should be filled */
+    filled?: boolean;
+    /** Repository URL for actual Github integration */
+    repoUrl?: string;
+    /** Button text label */
+    label?: string;
+    /** Use in-view detection to trigger animation */
+    useInViewTrigger?: boolean;
+    /** In-view options */
+    inViewOptions?: UseInViewOptions;
+    /** Spring transition options */
+    transition?: SpringOptions;
+}
+declare function GithubButton({ initialStars, targetStars, starsClass, fixedWidth, animationDuration, animationDelay, autoAnimate, className, variant, size, showGithubIcon, showStarIcon, roundStars, separator, filled, repoUrl, onClick, label, useInViewTrigger, inViewOptions, transition, ...props }: GithubButtonProps): react_jsx_runtime.JSX.Element;
+
+type GradientBackgroundProps = HTMLMotionProps<"div"> & {
+    transition?: Transition;
+};
+declare function GradientBackground({ className, transition, ...props }: GradientBackgroundProps): react_jsx_runtime.JSX.Element;
+
+type GridSize = "4:4" | "5:5" | "6:6" | "6:8" | "8:8" | "8:12" | "10:10" | "12:12" | "12:16" | "16:16";
+type GridBackgroundProps = HTMLMotionProps<"div"> & {
+    children?: React.ReactNode;
+    gridSize?: GridSize;
+    colors?: {
+        background?: string;
+        borderColor?: string;
+        borderSize?: string;
+        borderStyle?: "solid" | "dashed" | "dotted";
+    };
+    beams?: {
+        count?: number;
+        colors?: string[];
+        size?: string;
+        shadow?: string;
+        speed?: number;
+    };
+};
+declare function GridBackground({ className, children, gridSize, colors, beams, ...props }: GridBackgroundProps): react_jsx_runtime.JSX.Element;
+
+type HoverBackgroundProps = HTMLMotionProps<"div"> & {
+    objectCount?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    children?: React.ReactNode;
+    colors?: {
+        background?: string;
+        objects?: string[];
+        glow?: string;
+    };
+};
+declare function HoverBackground({ className, objectCount, children, colors, ...props }: HoverBackgroundProps): react_jsx_runtime.JSX.Element;
+
+interface MarqueeProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * Optional CSS class name to apply custom styles
+     */
+    className?: string;
+    /**
+     * Whether to reverse the animation direction
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * Whether to pause the animation on hover
+     * @default false
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Content to be displayed in the marquee
+     */
+    children: React__default.ReactNode;
+    /**
+     * Whether to animate vertically instead of horizontally
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * Number of times to repeat the content
+     * @default 4
+     */
+    repeat?: number;
+    /**
+     * If true, automatically repeats children enough to fill the visible area
+     */
+    autoFill?: boolean;
+    /**
+     * ARIA label for accessibility
+     */
+    ariaLabel?: string;
+    /**
+     * ARIA live region politeness
+     */
+    ariaLive?: "off" | "polite" | "assertive";
+    /**
+     * ARIA role
+     */
+    ariaRole?: string;
+}
+declare function Marquee({ className, reverse, pauseOnHover, children, vertical, repeat, ariaLabel, ariaLive, ariaRole, ...props }: MarqueeProps): react_jsx_runtime.JSX.Element;
+
+interface ShimmeringTextProps {
+    /** Text to display with shimmer effect */
+    text: string;
+    /** Animation duration in seconds */
+    duration?: number;
+    /** Delay before starting animation */
+    delay?: number;
+    /** Whether to repeat the animation */
+    repeat?: boolean;
+    /** Pause duration between repeats in seconds */
+    repeatDelay?: number;
+    /** Custom className */
+    className?: string;
+    /** Whether to start animation when component enters viewport */
+    startOnView?: boolean;
+    /** Whether to animate only once */
+    once?: boolean;
+    /** Margin for in-view detection (rootMargin) */
+    inViewMargin?: UseInViewOptions["margin"];
+    /** Shimmer spread multiplier */
+    spread?: number;
+    /** Base text color */
+    color?: string;
+    /** Shimmer gradient color */
+    shimmerColor?: string;
+}
+declare function ShimmeringText({ text, duration, delay, repeat, repeatDelay, className, startOnView, once, inViewMargin, spread, color, shimmerColor, }: ShimmeringTextProps): react_jsx_runtime.JSX.Element;
+
+interface SlidingNumberProps {
+    from: number;
+    to: number;
+    duration?: number;
+    delay?: number;
+    startOnView?: boolean;
+    once?: boolean;
+    className?: string;
+    onComplete?: () => void;
+    digitHeight?: number;
+}
+declare function SlidingNumber({ from, to, duration, delay, startOnView, once, className, onComplete, digitHeight, }: SlidingNumberProps): react_jsx_runtime.JSX.Element;
+
+interface SvgTextProps {
+    /**
+     * The SVG content to display inside the text
+     */
+    svg: ReactNode;
+    /**
+     * The content to display (will have the SVG "inside" it)
+     */
+    children: ReactNode;
+    /**
+     * Additional className for the container
+     */
+    className?: string;
+    /**
+     * Font size for the text mask (in viewport width units or CSS units)
+     * @default "20vw"
+     */
+    fontSize?: string | number;
+    /**
+     * Font weight for the text mask
+     * @default "bold"
+     */
+    fontWeight?: string | number;
+    /**
+     * The element type to render for the container
+     * @default "div"
+     */
+    as?: ElementType;
+}
+/**
+ * SvgText displays content with an SVG background fill effect.
+ * The SVG is masked by the content, creating a dynamic text look.
+ */
+declare function SvgText({ svg, children, className, fontSize, fontWeight, as: Component, }: SvgTextProps): react_jsx_runtime.JSX.Element;
+
+type RevealVariant = "fade" | "slideUp" | "slideDown" | "slideLeft" | "slideRight" | "scale" | "blur" | "typewriter" | "wave" | "stagger" | "rotate" | "elastic";
+interface TextRevealProps {
+    children: string;
+    variant?: RevealVariant;
+    className?: string;
+    style?: React__default.CSSProperties;
+    delay?: number;
+    duration?: number;
+    staggerDelay?: number;
+    once?: boolean;
+    startOnView?: boolean;
+    wordLevel?: boolean;
+    onComplete?: () => void;
+}
+declare function TextReveal({ children, variant, className, style, delay, duration, staggerDelay, once, startOnView, wordLevel, }: TextRevealProps): react_jsx_runtime.JSX.Element;
+
+type AnimationVariant = "fadeIn" | "blurIn" | "blurInUp" | "blurInDown" | "slideUp" | "slideDown" | "slideLeft" | "slideRight" | "scaleUp" | "scaleDown";
+interface TypingTextProps extends Omit<MotionProps, "children"> {
+    /** Text to animate */
+    text?: string;
+    /** Array of texts to cycle through */
+    texts?: string[];
+    /** Typing speed in milliseconds */
+    speed?: number;
+    /** Delay before starting animation */
+    delay?: number;
+    /** Whether to show cursor */
+    showCursor?: boolean;
+    /** Cursor character */
+    cursor?: string;
+    /** Cursor className */
+    cursorClassName?: string;
+    /** Whether to loop through texts */
+    loop?: boolean;
+    /** Pause duration between loops */
+    pauseDuration?: number;
+    /** Custom className */
+    className?: string;
+    /** Callback when typing completes */
+    onComplete?: () => void;
+    /** Whether to start animation when component enters viewport */
+    startOnView?: boolean;
+    /** Whether to animate only once */
+    once?: boolean;
+    /** The animation preset to use */
+    animation?: AnimationVariant;
+    /** Margin for in-view detection (rootMargin) */
+    inViewMargin?: UseInViewOptions["margin"];
+}
+declare function TypingText({ text, texts, speed, delay, showCursor, cursorClassName, cursor, loop, pauseDuration, className, onComplete, startOnView, once, inViewMargin, ...props }: TypingTextProps): react_jsx_runtime.JSX.Element;
+
+interface VideoTextProps {
+    /**
+     * The video source URL or array of sources for multiple formats
+     */
+    src: string | string[];
+    /**
+     * The content to display (will have the video "inside" it)
+     */
+    children: ReactNode;
+    /**
+     * Additional className for the container
+     */
+    className?: string;
+    /**
+     * Whether to autoplay the video
+     * @default true
+     */
+    autoPlay?: boolean;
+    /**
+     * Whether to mute the video
+     * @default true
+     */
+    muted?: boolean;
+    /**
+     * Whether to loop the video
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * Whether to preload the video
+     * @default "auto"
+     */
+    preload?: "auto" | "metadata" | "none";
+    /**
+     * Font size for the text mask (in viewport width units or CSS units)
+     * @default "20vw"
+     */
+    fontSize?: string | number;
+    /**
+     * Font weight for the text mask
+     * @default "bold"
+     */
+    fontWeight?: string | number;
+    /**
+     * The element type to render for the container
+     * @default "div"
+     */
+    as?: ElementType;
+    /**
+     * Callback when video starts playing
+     */
+    onPlay?: () => void;
+    /**
+     * Callback when video is paused
+     */
+    onPause?: () => void;
+    /**
+     * Callback when video ends
+     */
+    onEnded?: () => void;
+}
+/**
+ * VideoText displays content with a background video fill effect.
+ * The video is masked by the content, creating a dynamic animated text look.
+ */
+declare function VideoText({ src, children, className, autoPlay, muted, loop, preload, fontSize, fontWeight, as: Component, onPlay, onPause, onEnded, }: VideoTextProps): react_jsx_runtime.JSX.Element;
+
+interface WordRotateProps extends Omit<MotionProps, "children"> {
+    words: string[];
+    duration?: number;
+    animationStyle?: "fade" | "slide-up" | "slide-down" | "scale" | "flip";
+    loop?: boolean;
+    pauseDuration?: number;
+    className?: string;
+    containerClassName?: string;
+    startOnView?: boolean;
+    once?: boolean;
+    inViewMargin?: UseInViewOptions["margin"];
+}
+declare function WordRotate({ words, duration, animationStyle, loop, className, containerClassName, pauseDuration, startOnView, once, inViewMargin, ...props }: WordRotateProps): react_jsx_runtime.JSX.Element;
+
+export { AvatarGroup, AvatarGroupItem, AvatarGroupTooltip, CountingNumber, GithubButton, type GithubButtonProps, GradientBackground, type GradientBackgroundProps, GridBackground, type GridBackgroundProps, HoverBackground, type HoverBackgroundProps, Marquee, ShimmeringText, SlidingNumber, SvgText, type SvgTextProps, TextReveal, TypingText, VideoText, type VideoTextProps, WordRotate, githubButtonVariants };