flikkui 0.1.0-beta.2

package/dist/components/core/Carousel/Carousel.js

@@ -0,0 +1,94 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { carouselTheme } from './Carousel.theme.js';
+import { CarouselContext } from './CarouselContext.js';
+import CarouselSlide from './components/CarouselSlide.js';
+import CarouselControls from './components/CarouselControls.js';
+import CarouselControlButton from './components/CarouselControlButton.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+// Main Carousel component
+var CarouselRoot = React__default.forwardRef(function (_a, ref) {
+    var slides = _a.slides, _b = _a.defaultSlide, defaultSlide = _b === void 0 ? 0 : _b, _c = _a.autoPlay, autoPlay = _c === void 0 ? false : _c, _d = _a.autoPlayInterval, autoPlayInterval = _d === void 0 ? 5000 : _d, _e = _a.pauseOnHover, pauseOnHover = _e === void 0 ? true : _e, _f = _a.showControls, showControls = _f === void 0 ? true : _f, _g = _a.enableMouseTracking, enableMouseTracking = _g === void 0 ? true : _g, _h = _a.animation, animation = _h === void 0 ? 'slide' : _h, _j = _a.slideWidth, slideWidth = _j === void 0 ? '33vw' : _j, children = _a.children, className = _a.className, _k = _a.theme, customTheme = _k === void 0 ? {} : _k, onSlideChange = _a.onSlideChange, onSlideClick = _a.onSlideClick, props = __rest(_a, ["slides", "defaultSlide", "autoPlay", "autoPlayInterval", "pauseOnHover", "showControls", "enableMouseTracking", "animation", "slideWidth", "children", "className", "theme", "onSlideChange", "onSlideClick"]);
+    var _l = useState(defaultSlide), currentSlide = _l[0], setCurrentSlide = _l[1];
+    var _m = useState(false), isHovered = _m[0], setIsHovered = _m[1];
+    var intervalRef = useRef(undefined);
+    var idRef = useRef(Math.random().toString(36).substring(2, 9));
+    var theme = __assign(__assign({}, carouselTheme), customTheme);
+    // Auto-play functionality
+    useEffect(function () {
+        if (autoPlay && !isHovered) {
+            intervalRef.current = setInterval(function () {
+                setCurrentSlide(function (prev) { return (prev + 1) % slides.length; });
+            }, autoPlayInterval);
+        }
+        else {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+            }
+        }
+        return function () {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+            }
+        };
+    }, [autoPlay, autoPlayInterval, isHovered, slides.length]);
+    // Handle slide change
+    var handleSlideChange = function (index) {
+        if (index !== currentSlide) {
+            setCurrentSlide(index);
+            onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(index);
+        }
+    };
+    // Handle mouse events for auto-play pause
+    var handleMouseEnter = function () {
+        if (pauseOnHover) {
+            setIsHovered(true);
+        }
+    };
+    var handleMouseLeave = function () {
+        if (pauseOnHover) {
+            setIsHovered(false);
+        }
+    };
+    var contextValue = {
+        theme: theme,
+        currentSlide: currentSlide,
+        setCurrentSlide: handleSlideChange,
+        slides: slides,
+        autoPlay: autoPlay,
+        autoPlayInterval: autoPlayInterval,
+        pauseOnHover: pauseOnHover,
+        showControls: showControls,
+        enableMouseTracking: enableMouseTracking,
+        animation: animation,
+        slideWidth: slideWidth,
+    };
+    return (React__default.createElement(CarouselContext.Provider, { value: contextValue },
+        React__default.createElement("div", __assign({ ref: ref, className: cn(theme.baseStyle, className), "aria-labelledby": "carousel-heading-".concat(idRef.current), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, props), children || (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(motion.ul, { className: cn(theme.slideContainer, animation === 'slide' && 'flex', animation === 'fade' && 'relative', animation === 'card-stack' && 'relative'), animate: animation === 'slide' ? {
+                    x: "calc(-".concat(currentSlide, " * (").concat(slideWidth, " + var(--carousel-slide-gap)) + 50vw - ").concat(slideWidth, "/2)"),
+                } : {}, transition: animation === 'slide' ? {
+                    duration: 0.3,
+                    ease: "easeInOut",
+                } : {}, style: {
+                    width: animation === 'slide' ? "calc(".concat(slides.length, " * (").concat(slideWidth, " + var(--carousel-slide-gap)))") : '100%',
+                    height: '100%',
+                    '--carousel-slide-width': slideWidth,
+                } }, slides.map(function (slide, index) { return (React__default.createElement(CarouselSlide, { key: slide.id || index, slide: slide, index: index, onClick: function () {
+                    handleSlideChange(index);
+                    onSlideClick === null || onSlideClick === void 0 ? void 0 : onSlideClick(slide, index);
+                } })); })),
+            showControls && React__default.createElement(CarouselControls, null))))));
+});
+// Set display names for debugging
+CarouselRoot.displayName = 'Carousel';
+// Create compound component
+var Carousel = Object.assign(CarouselRoot, {
+    Slide: CarouselSlide,
+    Controls: CarouselControls,
+    ControlButton: CarouselControlButton,
+});
+
+export { Carousel as default };

package/dist/components/core/Carousel/Carousel.theme.d.ts

@@ -0,0 +1,2 @@
+import { CarouselTheme } from './Carousel.types';
+export declare const carouselTheme: CarouselTheme;

package/dist/components/core/Carousel/Carousel.theme.js

@@ -0,0 +1,16 @@
+var carouselTheme = {
+    baseStyle: 'relative w-full h-[var(--carousel-slide-height)] mx-auto  [perspective:1200px] group',
+    slideContainer: 'w-full h-full flex items-center',
+    slide: "\n    flex flex-col items-center justify-center relative text-center text-white \n    opacity-100 transition-all duration-300 ease-in-out w-[var(--carousel-slide-width)] h-[var(--carousel-slide-height)] \n    shrink-0 [transform-style:preserve-3d] cursor-pointer\n  ",
+    slideActive: 'scale-100 rotate-x-0',
+    slideInactive: 'scale-[0.98] rotate-x-[8deg] opacity-50',
+    slideImage: "\n    absolute top-0 left-0 w-full h-full bg-neutral-800 rounded-3xl\n    overflow-hidden transition-all duration-150 ease-out\n  ",
+    slideContent: "\n    relative p-8 transition-opacity duration-1000 ease-in-out z-20\n  ",
+    slideTitle: 'text-lg md:text-2xl lg:text-4xl font-semibold relative text-white',
+    slideButton: 'mt-6',
+    controls: 'absolute inset-0 flex items-end gap-4 -mb-4 justify-center pointer-events-none  z-30 max-w-screen',
+    controlButton: "\n    size-[var(--carousel-controls-size)] flex items-center justify-center \n    bg-white/5 backdrop-blur-md hover:bg-white/80 hover:shadow-xl border-t border-white/50 rounded-full \n     focus:outline-none hover:scale-105 active:scale-95 hover:ring-6 hover:ring-white/50\n    transition-all duration-300 pointer-events-auto  group-hover:opacity-100 z-40 cursor-pointer text-white hover:text-text-primary\n  ",
+    controlButtonIcon: ' size-4',
+};
+
+export { carouselTheme };

package/dist/components/core/Carousel/Carousel.types.d.ts

@@ -0,0 +1,164 @@
+import { HTMLAttributes, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { HTMLMotionProps } from 'motion/react';
+export interface CarouselTheme {
+    baseStyle: string;
+    slideContainer: string;
+    slide: string;
+    slideActive: string;
+    slideInactive: string;
+    slideImage: string;
+    slideContent: string;
+    slideTitle: string;
+    slideButton: string;
+    controls: string;
+    controlButton: string;
+    controlButtonIcon: string;
+}
+export interface CarouselThemeOverrides {
+    baseStyle?: string;
+    slideContainer?: string;
+    slide?: string;
+    slideActive?: string;
+    slideInactive?: string;
+    slideImage?: string;
+    slideContent?: string;
+    slideTitle?: string;
+    slideButton?: string;
+    controls?: string;
+    controlButton?: string;
+    controlButtonIcon?: string;
+}
+export interface SlideData {
+    title?: string;
+    buttonText?: string;
+    imageSrc: string;
+    imageAlt?: string;
+    id?: string;
+    showOverlay?: boolean;
+}
+export interface CarouselContextValue {
+    theme: CarouselTheme;
+    currentSlide: number;
+    setCurrentSlide: (index: number) => void;
+    slides: SlideData[];
+    autoPlay: boolean;
+    autoPlayInterval: number;
+    pauseOnHover: boolean;
+    showControls: boolean;
+    enableMouseTracking: boolean;
+    animation: 'slide' | 'card-stack' | 'fade';
+    slideWidth: string;
+}
+export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Array of slide data objects
+     */
+    slides: SlideData[];
+    /**
+     * Index of the initially active slide
+     */
+    defaultSlide?: number;
+    /**
+     * Whether to auto-play the carousel
+     */
+    autoPlay?: boolean;
+    /**
+     * Auto-play interval in milliseconds
+     */
+    autoPlayInterval?: number;
+    /**
+     * Whether to pause auto-play on hover
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Whether to show navigation controls
+     */
+    showControls?: boolean;
+    /**
+     * Whether to enable 3D mouse tracking effects
+     */
+    enableMouseTracking?: boolean;
+    /**
+     * Animation type for slide transitions
+     */
+    animation?: 'slide' | 'card-stack' | 'fade';
+    /**
+     * Width of each slide (CSS value, e.g., '33vw', '300px', '20rem')
+     */
+    slideWidth?: string;
+    /**
+     * The content to be displayed inside the carousel
+     */
+    children?: ReactNode;
+    /**
+     * Custom class name for the carousel
+     */
+    className?: string;
+    /**
+     * Component-level theme overrides
+     */
+    theme?: CarouselThemeOverrides;
+    /**
+     * Callback when slide changes
+     */
+    onSlideChange?: (slideIndex: number) => void;
+    /**
+     * Callback when slide is clicked
+     */
+    onSlideClick?: (slide: SlideData, index: number) => void;
+}
+export interface CarouselSlideProps extends Omit<HTMLMotionProps<'li'>, 'onClick'> {
+    /**
+     * Slide data object
+     */
+    slide: SlideData;
+    /**
+     * Index of this slide
+     */
+    index: number;
+    /**
+     * Custom class name for the slide
+     */
+    className?: string;
+    /**
+     * Custom content to override default slide content
+     */
+    children?: ReactNode;
+    /**
+     * Click handler for the slide
+     */
+    onClick?: () => void;
+}
+export interface CarouselControlsProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Custom class name for the controls container
+     */
+    className?: string;
+    /**
+     * Custom content to override default controls
+     */
+    children?: ReactNode;
+}
+export interface CarouselControlButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onAnimationStart' | 'onDrag' | 'onDragEnd' | 'onDragStart'> {
+    /**
+     * Direction of the control button
+     */
+    direction: 'previous' | 'next';
+    /**
+     * Custom class name for the control button
+     */
+    className?: string;
+    /**
+     * Custom icon to override default arrow
+     */
+    icon?: ReactNode;
+    /**
+     * Accessible label for the button
+     */
+    'aria-label'?: string;
+}
+export interface CarouselComponent extends ForwardRefExoticComponent<CarouselProps & RefAttributes<HTMLDivElement>> {
+    Slide: ForwardRefExoticComponent<CarouselSlideProps & RefAttributes<HTMLLIElement>>;
+    Controls: ForwardRefExoticComponent<CarouselControlsProps & RefAttributes<HTMLDivElement>>;
+    ControlButton: ForwardRefExoticComponent<CarouselControlButtonProps & RefAttributes<HTMLButtonElement>>;
+}

package/dist/components/core/Carousel/CarouselContext.d.ts

@@ -0,0 +1,3 @@
+import { CarouselContextValue } from './Carousel.types';
+export declare const CarouselContext: import("react").Context<CarouselContextValue | undefined>;
+export declare const useCarouselContext: () => CarouselContextValue;

package/dist/components/core/Carousel/CarouselContext.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+var CarouselContext = createContext(undefined);
+var useCarouselContext = function () {
+    var context = useContext(CarouselContext);
+    if (!context) {
+        throw new Error('Carousel compound components must be used within Carousel');
+    }
+    return context;
+};
+
+export { CarouselContext, useCarouselContext };

package/dist/components/core/Carousel/components/CarouselControlButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CarouselControlButtonProps } from '../Carousel.types';
+declare const CarouselControlButton: React.ForwardRefExoticComponent<CarouselControlButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default CarouselControlButton;

package/dist/components/core/Carousel/components/CarouselControlButton.js

@@ -0,0 +1,26 @@
+import { __rest, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../../utils/cn.js';
+import { useCarouselContext } from '../CarouselContext.js';
+import ForwardRef from '../../../../node_modules/@heroicons/react/24/outline/esm/ChevronRightIcon.js';
+
+var CarouselControlButton = React__default.forwardRef(function (_a, ref) {
+    var direction = _a.direction, className = _a.className, icon = _a.icon, ariaLabel = _a["aria-label"], onClick = _a.onClick, props = __rest(_a, ["direction", "className", "icon", 'aria-label', "onClick"]);
+    var _b = useCarouselContext(), theme = _b.theme, currentSlide = _b.currentSlide, setCurrentSlide = _b.setCurrentSlide, slides = _b.slides;
+    var handleClick = function (event) {
+        event.preventDefault();
+        if (direction === 'previous') {
+            var previousIndex = currentSlide - 1;
+            setCurrentSlide(previousIndex < 0 ? slides.length - 1 : previousIndex);
+        }
+        else {
+            var nextIndex = currentSlide + 1;
+            setCurrentSlide(nextIndex === slides.length ? 0 : nextIndex);
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    return (React__default.createElement("button", __assign({ ref: ref, type: "button", className: cn(theme.controlButton, className), "aria-label": ariaLabel, onClick: handleClick }, props), icon || (React__default.createElement(ForwardRef, { className: cn(theme.controlButtonIcon, direction === 'previous' ? 'rotate-180' : ''), width: 16, height: 16 }))));
+});
+CarouselControlButton.displayName = 'Carousel.ControlButton';
+
+export { CarouselControlButton as default };

package/dist/components/core/Carousel/components/CarouselControls.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CarouselControlsProps } from '../Carousel.types';
+declare const CarouselControls: React.ForwardRefExoticComponent<CarouselControlsProps & React.RefAttributes<HTMLDivElement>>;
+export default CarouselControls;

package/dist/components/core/Carousel/components/CarouselControls.js

@@ -0,0 +1,17 @@
+import { __rest, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../../utils/cn.js';
+import { useCarouselContext } from '../CarouselContext.js';
+import CarouselControlButton from './CarouselControlButton.js';
+
+var CarouselControls = React__default.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    var theme = useCarouselContext().theme;
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn(theme.controls, className) }, props),
+        React__default.createElement(CarouselControlButton, { direction: "previous", "aria-label": "Go to previous slide" }),
+        React__default.createElement(CarouselControlButton, { direction: "next", "aria-label": "Go to next slide" }),
+        children));
+});
+CarouselControls.displayName = 'Carousel.Controls';
+
+export { CarouselControls as default };

package/dist/components/core/Carousel/components/CarouselSlide.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CarouselSlideProps } from '../Carousel.types';
+declare const CarouselSlide: React.ForwardRefExoticComponent<Omit<CarouselSlideProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export default CarouselSlide;

package/dist/components/core/Carousel/components/CarouselSlide.js

@@ -0,0 +1,74 @@
+import { __rest, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useRef } from 'react';
+import { cn } from '../../../../utils/cn.js';
+import Button from '../../Button/Button.js';
+import { useCarouselContext } from '../CarouselContext.js';
+import { getSlideAnimationState, getSlideVariants, getSlideImageVariants, getSlideOverlayVariants, getSlideContentVariants, calculateMouseTransform, mouseTrackingSpring } from '../Carousel.animations.js';
+import { useMotionValue } from '../../../../node_modules/framer-motion/dist/es/value/use-motion-value.js';
+import { useSpring } from '../../../../node_modules/framer-motion/dist/es/value/use-spring.js';
+import { motion } from '../../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+var CarouselSlide = React__default.forwardRef(function (_a, ref) {
+    var slide = _a.slide, index = _a.index, className = _a.className, children = _a.children, onClick = _a.onClick, props = __rest(_a, ["slide", "index", "className", "children", "onClick"]);
+    var _b = useCarouselContext(), theme = _b.theme, currentSlide = _b.currentSlide, setCurrentSlide = _b.setCurrentSlide, enableMouseTracking = _b.enableMouseTracking, animation = _b.animation;
+    var slideRef = useRef(null);
+    // Mouse tracking animation values
+    var mouseX = useMotionValue(0);
+    var mouseY = useMotionValue(0);
+    var springX = useSpring(mouseX, mouseTrackingSpring);
+    var springY = useSpring(mouseY, mouseTrackingSpring);
+    var isActive = currentSlide === index;
+    // Get appropriate animation variants based on animation type
+    var slideVariants = getSlideVariants(animation);
+    var imageVariants = getSlideImageVariants(animation);
+    var contentVariants = getSlideContentVariants(animation);
+    var overlayVariants = getSlideOverlayVariants(animation);
+    // Get animation state for this slide
+    var animationState = getSlideAnimationState(animation, currentSlide, index);
+    // Handle mouse move for 3D tracking effect (only for slide mode)
+    var handleMouseMove = function (event) {
+        if (!enableMouseTracking || !isActive || !slideRef.current || animation !== 'slide')
+            return;
+        var rect = slideRef.current.getBoundingClientRect();
+        var _a = calculateMouseTransform(event.clientX, event.clientY, rect), x = _a.x, y = _a.y;
+        mouseX.set(x);
+        mouseY.set(y);
+    };
+    var handleMouseLeave = function () {
+        if (enableMouseTracking && animation === 'slide') {
+            mouseX.set(0);
+            mouseY.set(0);
+        }
+    };
+    var handleSlideClick = function () {
+        if (!isActive) {
+            setCurrentSlide(index);
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    return (React__default.createElement(motion.li, __assign({ ref: slideRef, className: cn(theme.slide, 
+        // Ensure all slides are visible in card-stack and fade modes
+        (animation === 'card-stack' || animation === 'fade') && !isActive && 'pointer-events-auto', className), variants: slideVariants, animate: animationState, initial: animationState, onClick: handleSlideClick, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, style: {
+            transformOrigin: 'center center',
+            position: (animation === 'fade' || animation === 'card-stack') ? 'absolute' : 'relative',
+            left: animation === 'slide' ? undefined : (animation === 'fade' || animation === 'card-stack') ? '50%' : undefined,
+            top: (animation === 'fade' || animation === 'card-stack') ? '50%' : 0,
+            transform: (animation === 'fade' || animation === 'card-stack') ? 'translate(-50%, -50%)' : undefined,
+            marginRight: animation === 'slide' ? 'var(--carousel-slide-gap)' : undefined,
+        }, "data-slide-index": index, "data-is-active": isActive }, props), children || (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(motion.div, { className: theme.slideImage, style: isActive && enableMouseTracking && animation === 'slide'
+                ? {
+                    x: springX,
+                    y: springY,
+                }
+                : {} },
+            React__default.createElement(motion.img, { className: cn("absolute inset-0 w-[120%] h-[120%] object-cover transition-all duration-300", isActive ? "saturate-100" : "saturate-0"), alt: slide.imageAlt || slide.title || 'Carousel slide', src: slide.imageSrc, variants: imageVariants, animate: animationState, loading: "eager", decoding: "sync" }),
+            slide.showOverlay !== false && slide.title && (React__default.createElement(motion.div, { className: "absolute inset-0 bg-black", variants: overlayVariants, animate: animationState }))),
+        slide.title && (React__default.createElement(motion.article, { className: theme.slideContent, variants: contentVariants, animate: animationState },
+            React__default.createElement("h2", { className: theme.slideTitle }, slide.title),
+            slide.buttonText && (React__default.createElement("div", { className: "flex justify-center" },
+                React__default.createElement(Button, { variant: "secondary", size: "md", className: theme.slideButton }, slide.buttonText)))))))));
+});
+CarouselSlide.displayName = 'Carousel.Slide';
+
+export { CarouselSlide as default };

package/dist/components/core/Carousel/components/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CarouselSlide } from './CarouselSlide';
+export { default as CarouselControls } from './CarouselControls';
+export { default as CarouselControlButton } from './CarouselControlButton';

package/dist/components/core/Carousel/index.d.ts

@@ -0,0 +1,4 @@
+import Carousel from './Carousel';
+export { Carousel };
+export * from './Carousel.types';
+export default Carousel;

package/dist/components/core/Carousel/index.js

@@ -0,0 +1,5 @@
+import Carousel from './Carousel.js';
+
+
+
+export { Carousel, Carousel as default };

package/dist/components/core/Divider/Divider.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DividerProps } from './Divider.types';
+export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Divider/Divider.theme.d.ts

@@ -0,0 +1,2 @@
+import { DividerTheme } from './Divider.types';
+export declare const dividerTheme: DividerTheme;

package/dist/components/core/Divider/Divider.types.d.ts

@@ -0,0 +1,34 @@
+import { HTMLAttributes } from 'react';
+export type DividerMargin = 'sm' | 'md' | 'lg';
+export interface DividerTheme {
+    baseStyle: string;
+    horizontal: string;
+    vertical: string;
+    margins: Record<DividerMargin, string>;
+}
+export interface DividerThemeOverrides {
+    baseStyle?: string;
+    horizontal?: string;
+    vertical?: string;
+    margins?: Partial<Record<DividerMargin, string>>;
+}
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether the divider is vertical (default is horizontal)
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * The margin size for spacing
+     * @default 'md'
+     */
+    margin?: DividerMargin;
+    /**
+     * Custom class name for the divider
+     */
+    className?: string;
+    /**
+     * Component-level theme overrides
+     */
+    theme?: DividerThemeOverrides;
+}

package/dist/components/core/Divider/index.d.ts

@@ -0,0 +1,2 @@
+export { Divider } from './Divider';
+export type { DividerProps, DividerTheme, DividerThemeOverrides } from './Divider.types';

package/dist/components/core/Drawer/Drawer.animations.d.ts

@@ -0,0 +1,10 @@
+import { Variants } from 'motion/react';
+import { DrawerPosition } from './Drawer.types';
+/**
+ * Drawer overlay animation variants
+ */
+export declare const drawerOverlayAnimations: Variants;
+/**
+ * Get drawer content animation variants based on position
+ */
+export declare const getDrawerContentAnimations: (position: DrawerPosition) => Variants;

package/dist/components/core/Drawer/Drawer.animations.js

@@ -0,0 +1,104 @@
+/**
+ * Drawer overlay animation variants
+ */
+var drawerOverlayAnimations = {
+    initial: {
+        opacity: 0
+    },
+    animate: {
+        opacity: 1,
+        transition: {
+            duration: 0.4,
+            ease: 'easeOut'
+        }
+    },
+    exit: {
+        opacity: 0,
+        transition: {
+            duration: 0.3,
+            ease: 'easeIn'
+        }
+    }
+};
+/**
+ * Get drawer content animation variants based on position
+ */
+var getDrawerContentAnimations = function (position) {
+    var animations = {
+        left: {
+            initial: { x: '-100%' },
+            animate: {
+                x: 0,
+                transition: {
+                    type: 'spring',
+                    damping: 30,
+                    stiffness: 200
+                }
+            },
+            exit: {
+                x: '-100%',
+                transition: {
+                    duration: 0.3,
+                    ease: 'easeIn'
+                }
+            }
+        },
+        right: {
+            initial: { x: '100%' },
+            animate: {
+                x: 0,
+                transition: {
+                    type: 'spring',
+                    damping: 30,
+                    stiffness: 200
+                }
+            },
+            exit: {
+                x: '100%',
+                transition: {
+                    duration: 0.3,
+                    ease: 'easeIn'
+                }
+            }
+        },
+        top: {
+            initial: { y: '-100%' },
+            animate: {
+                y: 0,
+                transition: {
+                    type: 'spring',
+                    damping: 30,
+                    stiffness: 200
+                }
+            },
+            exit: {
+                y: '-100%',
+                transition: {
+                    duration: 0.3,
+                    ease: 'easeIn'
+                }
+            }
+        },
+        bottom: {
+            initial: { y: '100%' },
+            animate: {
+                y: 0,
+                transition: {
+                    type: 'spring',
+                    damping: 30,
+                    stiffness: 200
+                }
+            },
+            exit: {
+                y: '100%',
+                transition: {
+                    duration: 0.3,
+                    ease: 'easeIn'
+                }
+            }
+        }
+    };
+    return animations[position];
+};
+
+export { drawerOverlayAnimations, getDrawerContentAnimations };

package/dist/components/core/Drawer/Drawer.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { DrawerProps, DrawerContextValue } from "./Drawer.types";
+export declare const useDrawerContext: () => DrawerContextValue;
+declare const _default: {
+    ({ isOpen, onClose, position, size, closeOnOverlayClick, closeOnEsc, showCloseButton, children, className, theme: themeOverrides, ...props }: DrawerProps): React.ReactPortal;
+    displayName: string;
+} & {
+    Header: {
+        ({ children, showCloseButton, className, ...props }: import("./Drawer.types").DrawerHeaderProps): React.JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ children, className, ...props }: import("./Drawer.types").DrawerBodyProps): React.JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ children, className, ...props }: import("./Drawer.types").DrawerFooterProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+export default _default;