flikkui 0.1.0-beta.9 → 0.2.0-beta.2

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

@@ -1,16 +1,20 @@
-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',
+const carouselTheme = {
+    root: 'relative w-full flex flex-col',
+    viewport: 'overflow-hidden',
+    container: 'flex',
+    item: 'min-w-0 shrink-0 grow-0 basis-full',
+    controls: 'flex items-center justify-center gap-2',
+    button: `
+    inline-flex items-center justify-center -mt-5 z-10 cursor-pointer
+    size-10 rounded-full
+    bg-white/50 backdrop-blur-md border-t border-[var(--color-border)]
+    text-[var(--color-text-primary)]
+    transition-all duration-200
+    hover:bg-white/80 hover:shadow-lg
+    focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2
+    disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white disabled:hover:border-[var(--color-border)]
+  `,
+    buttonIcon: 'size-5',
 };
 
 export { carouselTheme };

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

@@ -1,151 +1,99 @@
 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> {
+export type CarouselOrientation = 'horizontal' | 'vertical';
+export interface CarouselOptions {
     /**
-     * Array of slide data objects
+     * Alignment of carousel items
+     * @default 'start'
      */
-    slides: SlideData[];
+    align?: 'start' | 'center' | 'end';
     /**
-     * Index of the initially active slide
+     * Enable infinite looping
+     * @default false
      */
-    defaultSlide?: number;
+    loop?: boolean;
     /**
-     * Whether to auto-play the carousel
+     * Number of slides to scroll at a time
+     * @default 1
      */
-    autoPlay?: boolean;
+    slidesToScroll?: number;
     /**
-     * Auto-play interval in milliseconds
+     * Enable drag interaction
+     * @default true
      */
-    autoPlayInterval?: number;
+    draggable?: boolean;
     /**
-     * Whether to pause auto-play on hover
+     * Drag threshold for slide change (0-1)
+     * @default 0.1
      */
-    pauseOnHover?: boolean;
+    dragThreshold?: number;
+}
+export interface CarouselContextValue {
+    currentIndex: number;
+    totalSlides: number;
+    scrollTo: (index: number) => void;
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    canScrollPrev: boolean;
+    canScrollNext: boolean;
+    orientation: CarouselOrientation;
+    opts: CarouselOptions;
+}
+export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * Whether to show navigation controls
+     * Carousel orientation
+     * @default 'horizontal'
      */
-    showControls?: boolean;
+    orientation?: CarouselOrientation;
     /**
-     * Whether to enable 3D mouse tracking effects
+     * Carousel configuration options
      */
-    enableMouseTracking?: boolean;
+    opts?: CarouselOptions;
     /**
-     * Animation type for slide transitions
+     * Whether to show default navigation controls
+     * @default false
      */
-    animation?: 'slide' | 'card-stack' | 'fade';
+    showControls?: boolean;
     /**
-     * Width of each slide (CSS value, e.g., '33vw', '300px', '20rem')
+     * Initial slide index
+     * @default 0
      */
-    slideWidth?: string;
+    defaultIndex?: number;
     /**
-     * The content to be displayed inside the carousel
+     * Callback when slide changes
      */
-    children?: ReactNode;
+    onSlideChange?: (index: number) => void;
     /**
-     * Custom class name for the carousel
+     * Custom class name for the carousel container
      */
     className?: string;
     /**
-     * Component-level theme overrides
+     * Children components (CarouselContent, CarouselPrevious, CarouselNext)
      */
-    theme?: CarouselThemeOverrides;
-    /**
-     * Callback when slide changes
-     */
-    onSlideChange?: (slideIndex: number) => void;
-    /**
-     * Callback when slide is clicked
-     */
-    onSlideClick?: (slide: SlideData, index: number) => void;
+    children?: ReactNode;
 }
-export interface CarouselSlideProps extends Omit<HTMLMotionProps<'li'>, 'onClick'> {
-    /**
-     * Slide data object
-     */
-    slide: SlideData;
-    /**
-     * Index of this slide
-     */
-    index: number;
+export interface CarouselContentProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * Custom class name for the slide
+     * Custom class name for the content container
      */
     className?: string;
     /**
-     * Custom content to override default slide content
+     * Children components (CarouselItem)
      */
     children?: ReactNode;
-    /**
-     * Click handler for the slide
-     */
-    onClick?: () => void;
 }
-export interface CarouselControlsProps extends HTMLAttributes<HTMLDivElement> {
+export interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * Custom class name for the controls container
+     * Custom class name for the item
      */
     className?: string;
     /**
-     * Custom content to override default controls
+     * Children content to display in the slide
      */
     children?: ReactNode;
 }
-export interface CarouselControlButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onAnimationStart' | 'onDrag' | 'onDragEnd' | 'onDragStart'> {
-    /**
-     * Direction of the control button
-     */
-    direction: 'previous' | 'next';
+export interface CarouselControlProps extends HTMLAttributes<HTMLButtonElement> {
     /**
-     * Custom class name for the control button
+     * Custom class name for the button
      */
     className?: string;
     /**
@@ -158,7 +106,8 @@ export interface CarouselControlButtonProps extends Omit<HTMLAttributes<HTMLButt
     '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>>;
+    Content: ForwardRefExoticComponent<CarouselContentProps & RefAttributes<HTMLDivElement>>;
+    Item: ForwardRefExoticComponent<CarouselItemProps & RefAttributes<HTMLDivElement>>;
+    Previous: ForwardRefExoticComponent<CarouselControlProps & RefAttributes<HTMLButtonElement>>;
+    Next: ForwardRefExoticComponent<CarouselControlProps & RefAttributes<HTMLButtonElement>>;
 }

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

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

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

@@ -0,0 +1,54 @@
+import React__default from 'react';
+import { motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { useCarouselContext } from './CarouselContext.js';
+import { carouselTheme } from './Carousel.theme.js';
+
+const CarouselContent = React__default.forwardRef(({ className, children, ...props }, ref) => {
+    const { currentIndex, orientation, opts, scrollPrev, scrollNext } = useCarouselContext();
+    const internalRef = React__default.useRef(null);
+    React__default.useImperativeHandle(ref, () => internalRef.current, []);
+    const isHorizontal = orientation === 'horizontal';
+    const translateValue = `${-currentIndex * 100}%`;
+    const handleDragEnd = (_event, info) => {
+        var _a;
+        if (!opts.draggable)
+            return;
+        const dragDistance = isHorizontal ? info.offset.x : info.offset.y;
+        const viewport = internalRef.current;
+        if (!viewport)
+            return;
+        const viewportSize = isHorizontal
+            ? viewport.offsetWidth
+            : viewport.offsetHeight;
+        const dragThreshold = viewportSize * ((_a = opts.dragThreshold) !== null && _a !== void 0 ? _a : 0.2);
+        if (Math.abs(dragDistance) > dragThreshold) {
+            if (dragDistance < 0) {
+                scrollNext();
+            }
+            else {
+                scrollPrev();
+            }
+        }
+    };
+    return (React__default.createElement("div", { ref: internalRef, className: cn(carouselTheme.viewport, className), ...props },
+        React__default.createElement(motion.div, { className: cn(carouselTheme.container, isHorizontal ? 'flex-row' : 'flex-col'), drag: opts.draggable && (isHorizontal ? 'x' : 'y'), onDragEnd: handleDragEnd, dragElastic: 0.1, animate: {
+                x: isHorizontal ? translateValue : 0,
+                y: isHorizontal ? 0 : translateValue,
+            }, transition: {
+                type: 'spring',
+                stiffness: 180,
+                damping: 25,
+                mass: 0.7,
+            } }, React__default.Children.map(children, (child, index) => {
+            if (!React__default.isValidElement(child))
+                return child;
+            return React__default.cloneElement(child, {
+                ...child.props,
+                'aria-hidden': index !== currentIndex,
+            });
+        }))));
+});
+CarouselContent.displayName = 'Carousel.Content';
+
+export { CarouselContent };

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

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

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

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

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

@@ -0,0 +1,10 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { carouselTheme } from './Carousel.theme.js';
+
+const CarouselItem = React__default.forwardRef(({ className, children, ...props }, ref) => {
+    return (React__default.createElement("div", { ref: ref, role: "group", "aria-roledescription": "slide", className: cn(carouselTheme.item, className), ...props }, children));
+});
+CarouselItem.displayName = 'Carousel.Item';
+
+export { CarouselItem };

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

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

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

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import { ChevronRightIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { useCarouselContext } from './CarouselContext.js';
+import { carouselTheme } from './Carousel.theme.js';
+
+const CarouselNext = React__default.forwardRef(({ className, icon, 'aria-label': ariaLabel, ...props }, ref) => {
+    const { scrollNext, canScrollNext, orientation } = useCarouselContext();
+    return (React__default.createElement("button", { ref: ref, type: "button", onClick: scrollNext, disabled: !canScrollNext, "aria-label": ariaLabel || 'Next slide', className: cn(carouselTheme.button, className), ...props }, icon ||
+        (orientation === 'horizontal' ? (React__default.createElement(ChevronRightIcon, { className: carouselTheme.buttonIcon, "aria-hidden": "true" })) : (React__default.createElement(ChevronDownIcon, { className: carouselTheme.buttonIcon, "aria-hidden": "true" })))));
+});
+CarouselNext.displayName = 'Carousel.Next';
+
+export { CarouselNext };

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

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

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

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import { ChevronLeftIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { useCarouselContext } from './CarouselContext.js';
+import { carouselTheme } from './Carousel.theme.js';
+
+const CarouselPrevious = React__default.forwardRef(({ className, icon, 'aria-label': ariaLabel, ...props }, ref) => {
+    const { scrollPrev, canScrollPrev, orientation } = useCarouselContext();
+    return (React__default.createElement("button", { ref: ref, type: "button", onClick: scrollPrev, disabled: !canScrollPrev, "aria-label": ariaLabel || 'Previous slide', className: cn(carouselTheme.button, className), ...props }, icon ||
+        (orientation === 'horizontal' ? (React__default.createElement(ChevronLeftIcon, { className: carouselTheme.buttonIcon, "aria-hidden": "true" })) : (React__default.createElement(ChevronUpIcon, { className: carouselTheme.buttonIcon, "aria-hidden": "true" })))));
+});
+CarouselPrevious.displayName = 'Carousel.Previous';
+
+export { CarouselPrevious };

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

@@ -1,4 +1,2 @@
-import Carousel from './Carousel';
-export { Carousel };
-export * from './Carousel.types';
-export default Carousel;
+export { Carousel } from './Carousel';
+export type { CarouselProps, CarouselContentProps, CarouselItemProps, CarouselControlProps, CarouselOptions, CarouselOrientation, } from './Carousel.types';

package/dist/components/core/CommandPalette/CommandItem.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import type { CommandItem as CommandItemType } from './CommandPalette.types';
+import { commandPaletteTheme } from './CommandPalette.theme';
+/**
+ * CommandItem Component Props
+ */
+export interface CommandItemProps {
+    /** The command item data */
+    command: CommandItemType;
+    /** Index of the command in the list */
+    index: number;
+    /** Whether this command is currently highlighted */
+    isHighlighted: boolean;
+    /** Content to display at the start (icon, avatar, etc.) - overrides command.contentStart */
+    contentStart?: React.ReactNode;
+    /** Content to display at the end (keyboard shortcuts, badges, etc.) - overrides command.contentEnd */
+    contentEnd?: React.ReactNode;
+    /** Additional className for the command item */
+    className?: string;
+    /** Called when the command is clicked */
+    onSelect: (command: CommandItemType) => void;
+    /** Called when mouse enters the command */
+    onMouseEnter: (index: number) => void;
+    /** Theme overrides */
+    theme?: typeof commandPaletteTheme;
+}
+/**
+ * CommandItem Component
+ *
+ * Internal component used by CommandPalette to render individual command items.
+ * Supports flexible content with contentStart (icons, avatars) and contentEnd (shortcuts, badges).
+ *
+ * @example
+ * ```tsx
+ * <CommandItem
+ *   command={{
+ *     id: 'user-profile',
+ *     label: 'John Doe',
+ *     description: 'View profile',
+ *     contentStart: <Avatar src="..." />,
+ *     contentEnd: <Badge>Admin</Badge>,
+ *     onSelect: () => navigate('/profile')
+ *   }}
+ *   index={0}
+ *   isHighlighted={true}
+ *   onSelect={handleSelect}
+ *   onMouseEnter={setHighlightedIndex}
+ * />
+ * ```
+ */
+export declare const CommandItem: React.FC<CommandItemProps>;

package/dist/components/core/CommandPalette/CommandItem.js

@@ -0,0 +1,139 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { Kbd } from '../Kbd/Kbd.js';
+import { commandPaletteTheme } from './CommandPalette.theme.js';
+
+/**
+ * Map string shortcuts to KbdKey types
+ */
+const mapStringToKbdKey = (key) => {
+    const normalized = key.toLowerCase().trim();
+    const keyMap = {
+        '⌘': 'command',
+        'cmd': 'command',
+        'command': 'command',
+        '⇧': 'shift',
+        'shift': 'shift',
+        '⌃': 'ctrl',
+        'ctrl': 'ctrl',
+        'control': 'ctrl',
+        '⌥': 'option',
+        'option': 'option',
+        'alt': 'alt',
+        'enter': 'enter',
+        'return': 'enter',
+        'delete': 'delete',
+        'del': 'delete',
+        'esc': 'escape',
+        'escape': 'escape',
+        'tab': 'tab',
+        'capslock': 'capslock',
+        'caps': 'capslock',
+        '↑': 'up',
+        'up': 'up',
+        '→': 'right',
+        'right': 'right',
+        '↓': 'down',
+        'down': 'down',
+        '←': 'left',
+        'left': 'left',
+        'pageup': 'pageup',
+        'pagedown': 'pagedown',
+        'home': 'home',
+        'end': 'end',
+        'help': 'help',
+        'space': 'space',
+        'fn': 'fn',
+        '⊞': 'win',
+        'win': 'win',
+        'windows': 'win',
+    };
+    return keyMap[normalized] || keyMap[key] || null;
+};
+/**
+ * Render keyboard shortcut using Kbd component
+ */
+const Shortcut = ({ keys }) => {
+    const keyArray = Array.isArray(keys) ? keys : [keys];
+    // Map all keys to KbdKey types or keep as strings
+    const mappedResults = keyArray.map((key) => {
+        const mapped = mapStringToKbdKey(key);
+        return { original: key, mapped };
+    });
+    // Check if all keys were successfully mapped
+    const allKeysMapped = mappedResults.every((result) => result.mapped !== null);
+    if (allKeysMapped && mappedResults.length > 0) {
+        // Use Kbd component with keys prop - all keys are KbdKey types
+        const kbdKeys = mappedResults.map((result) => result.mapped);
+        return React__default.createElement(Kbd, { keys: kbdKeys, size: "sm" });
+    }
+    // If some keys can't be mapped, render with Kbd using children for unmapped keys
+    return (React__default.createElement("span", { className: "inline-flex items-center gap-1" }, mappedResults.map((result, index) => {
+        if (result.mapped) {
+            return (React__default.createElement(React__default.Fragment, { key: index },
+                React__default.createElement(Kbd, { keys: [result.mapped], size: "sm" })));
+        }
+        return (React__default.createElement(React__default.Fragment, { key: index },
+            React__default.createElement(Kbd, { size: "sm" }, result.original)));
+    })));
+};
+/**
+ * CommandItem Component
+ *
+ * Internal component used by CommandPalette to render individual command items.
+ * Supports flexible content with contentStart (icons, avatars) and contentEnd (shortcuts, badges).
+ *
+ * @example
+ * ```tsx
+ * <CommandItem
+ *   command={{
+ *     id: 'user-profile',
+ *     label: 'John Doe',
+ *     description: 'View profile',
+ *     contentStart: <Avatar src="..." />,
+ *     contentEnd: <Badge>Admin</Badge>,
+ *     onSelect: () => navigate('/profile')
+ *   }}
+ *   index={0}
+ *   isHighlighted={true}
+ *   onSelect={handleSelect}
+ *   onMouseEnter={setHighlightedIndex}
+ * />
+ * ```
+ */
+const CommandItem = ({ command, index, isHighlighted, contentStart, contentEnd, className, onSelect, onMouseEnter, theme = commandPaletteTheme, }) => {
+    const handleClick = () => {
+        if (!command.disabled) {
+            onSelect(command);
+        }
+    };
+    const handleMouseEnter = () => {
+        if (!command.disabled) {
+            onMouseEnter(index);
+        }
+    };
+    // Determine what to render in contentStart
+    const finalContentStart = contentStart !== null && contentStart !== void 0 ? contentStart : command.contentStart;
+    // Determine what to render in contentEnd
+    const renderContentEnd = () => {
+        if (contentEnd) {
+            return React__default.createElement("div", { className: "flex items-center gap-1" }, contentEnd);
+        }
+        if (command.contentEnd) {
+            return React__default.createElement("div", { className: "flex items-center gap-1" }, command.contentEnd);
+        }
+        if (command.shortcut) {
+            return (React__default.createElement("div", { className: "flex items-center gap-1" },
+                React__default.createElement(Shortcut, { keys: command.shortcut })));
+        }
+        return null;
+    };
+    return (React__default.createElement("div", { "data-command-index": index, "data-highlighted": isHighlighted, "data-disabled": command.disabled || false, className: cn(theme.commandItem, className), onClick: handleClick, onMouseEnter: handleMouseEnter },
+        finalContentStart && (React__default.createElement("div", { className: "flex-shrink-0" }, finalContentStart)),
+        React__default.createElement("div", { className: "flex-1 min-w-0" },
+            React__default.createElement("div", { className: "text-sm  truncate" }, command.label),
+            command.description && (React__default.createElement("div", { className: "text-sm opacity-70 truncate mt-0" }, command.description))),
+        renderContentEnd()));
+};
+
+export { CommandItem };

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

@@ -0,0 +1,6 @@
+import { Variants } from "motion/react";
+/**
+ * Animation variants for CommandPalette modal
+ */
+export declare const overlayAnimations: Variants;
+export declare const containerAnimations: Variants;

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

@@ -0,0 +1,51 @@
+/**
+ * Animation variants for CommandPalette modal
+ */
+const overlayAnimations = {
+    initial: {
+        opacity: 0,
+        willChange: "opacity",
+    },
+    animate: {
+        opacity: 1,
+        transition: {
+            duration: 0.2,
+            ease: "easeOut",
+        },
+    },
+    exit: {
+        opacity: 0,
+        transition: {
+            duration: 0.15,
+            ease: "easeIn",
+        },
+    },
+};
+const containerAnimations = {
+    initial: {
+        opacity: 0,
+        scale: 0.95,
+        y: -20,
+        willChange: "transform, opacity",
+    },
+    animate: {
+        opacity: 1,
+        scale: 1,
+        y: 0,
+        transition: {
+            duration: 0.2,
+            ease: "easeOut",
+        },
+    },
+    exit: {
+        opacity: 0,
+        scale: 0.95,
+        y: -20,
+        transition: {
+            duration: 0.15,
+            ease: "easeIn",
+        },
+    },
+};
+
+export { containerAnimations, overlayAnimations };