flikkui 0.1.0-beta.11

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

@@ -0,0 +1,53 @@
+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 { carouselTheme } from './Carousel.theme.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+var CarouselContent = React__default.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    var _b = useCarouselContext(), currentIndex = _b.currentIndex, orientation = _b.orientation, opts = _b.opts, scrollPrev = _b.scrollPrev, scrollNext = _b.scrollNext;
+    var internalRef = React__default.useRef(null);
+    React__default.useImperativeHandle(ref, function () { return internalRef.current; }, []);
+    var isHorizontal = orientation === 'horizontal';
+    var translateValue = "".concat(-currentIndex * 100, "%");
+    var handleDragEnd = function (_event, info) {
+        var _a;
+        if (!opts.draggable)
+            return;
+        var dragDistance = isHorizontal ? info.offset.x : info.offset.y;
+        var viewport = internalRef.current;
+        if (!viewport)
+            return;
+        var viewportSize = isHorizontal
+            ? viewport.offsetWidth
+            : viewport.offsetHeight;
+        var 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", __assign({ 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, function (child, index) {
+            if (!React__default.isValidElement(child))
+                return child;
+            return React__default.cloneElement(child, __assign(__assign({}, child.props), { 'aria-hidden': index !== currentIndex }));
+        }))));
+});
+CarouselContent.displayName = 'Carousel.Content';
+
+export { CarouselContent };

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/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,12 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { carouselTheme } from './Carousel.theme.js';
+
+var CarouselItem = React__default.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    return (React__default.createElement("div", __assign({ 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,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 { carouselTheme } from './Carousel.theme.js';
+import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronRightIcon.js';
+import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronDownIcon.js';
+
+var CarouselNext = React__default.forwardRef(function (_a, ref) {
+    var className = _a.className, icon = _a.icon, ariaLabel = _a["aria-label"], props = __rest(_a, ["className", "icon", 'aria-label']);
+    var _b = useCarouselContext(), scrollNext = _b.scrollNext, canScrollNext = _b.canScrollNext, orientation = _b.orientation;
+    return (React__default.createElement("button", __assign({ 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(ForwardRef, { className: carouselTheme.buttonIcon, "aria-hidden": "true" })) : (React__default.createElement(ForwardRef$1, { 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,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 { carouselTheme } from './Carousel.theme.js';
+import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronLeftIcon.js';
+import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronUpIcon.js';
+
+var CarouselPrevious = React__default.forwardRef(function (_a, ref) {
+    var className = _a.className, icon = _a.icon, ariaLabel = _a["aria-label"], props = __rest(_a, ["className", "icon", 'aria-label']);
+    var _b = useCarouselContext(), scrollPrev = _b.scrollPrev, canScrollPrev = _b.canScrollPrev, orientation = _b.orientation;
+    return (React__default.createElement("button", __assign({ 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(ForwardRef, { className: carouselTheme.buttonIcon, "aria-hidden": "true" })) : (React__default.createElement(ForwardRef$1, { className: carouselTheme.buttonIcon, "aria-hidden": "true" })))));
+});
+CarouselPrevious.displayName = 'Carousel.Previous';
+
+export { CarouselPrevious };

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

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

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

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

package/dist/components/core/ChatMessage/ChatMessage.js

@@ -0,0 +1,62 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { formatTimestamp } from '../../../utils/dateUtils.js';
+import { chatMessageTheme } from './ChatMessage.theme.js';
+import { Avatar } from '../Avatar/Avatar.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+var MessageFooter = function (_a) {
+    var isStreaming = _a.isStreaming, streamingIndicator = _a.streamingIndicator, showTimestamp = _a.showTimestamp, timestamp = _a.timestamp, actions = _a.actions, timestampStyle = _a.timestampStyle, streamingIndicatorStyle = _a.streamingIndicatorStyle, actionsContainerStyle = _a.actionsContainerStyle, variant = _a.variant;
+    if (isStreaming) {
+        return (React__default.createElement("div", { className: cn('flex flex-row items-center gap-3 mt-1', variant === 'receiver' ? 'ml-2' : 'mr-3') },
+            React__default.createElement("div", { className: cn(timestampStyle, streamingIndicatorStyle) }, streamingIndicator || (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("span", null, "Typing"),
+                React__default.createElement(motion.span, { animate: { opacity: [0.4, 1, 0.4] }, transition: { duration: 1.5, repeat: Infinity, ease: 'easeInOut' } }, "\u2022\u2022\u2022"))))));
+    }
+    // For system variant, only show timestamp (no actions)
+    if (variant === 'system') {
+        return showTimestamp && timestamp ? (React__default.createElement("div", { className: timestampStyle },
+            React__default.createElement("time", { dateTime: typeof timestamp === 'string' ? timestamp : timestamp.toISOString(), className: "select-none" }, formatTimestamp(timestamp)))) : null;
+    }
+    // For sender/receiver variants, show timestamp and actions in a row
+    return (React__default.createElement("div", { className: cn("flex flex-row items-center gap-3 mt-2", variant === 'receiver' ? 'ml-2' : 'mr-3') },
+        showTimestamp && timestamp && (React__default.createElement("div", { className: timestampStyle },
+            React__default.createElement("time", { dateTime: typeof timestamp === 'string' ? timestamp : timestamp.toISOString(), className: "select-none" }, formatTimestamp(timestamp)))),
+        actions && (React__default.createElement("div", { className: cn(actionsContainerStyle) }, actions))));
+};
+var ChatMessage = React__default.forwardRef(function (_a, ref) {
+    var _b, _c, _d, _e, _f, _g;
+    var _h = _a.variant, variant = _h === void 0 ? 'receiver' : _h, message = _a.message, timestamp = _a.timestamp, avatar = _a.avatar, _j = _a.showTimestamp, showTimestamp = _j === void 0 ? true : _j, _k = _a.isStreaming, isStreaming = _k === void 0 ? false : _k, streamingIndicator = _a.streamingIndicator, actions = _a.actions, className = _a.className, _l = _a.theme, customTheme = _l === void 0 ? {} : _l, props = __rest(_a, ["variant", "message", "timestamp", "avatar", "showTimestamp", "isStreaming", "streamingIndicator", "actions", "className", "theme"]);
+    // Get variant-specific theme
+    var variantTheme = chatMessageTheme.variants[variant];
+    // Build container styles
+    var containerStyle = cn(chatMessageTheme.containerBaseStyle, variantTheme.containerModifier, customTheme.containerBaseStyle, (_c = (_b = customTheme.variants) === null || _b === void 0 ? void 0 : _b[variant]) === null || _c === void 0 ? void 0 : _c.containerModifier, 
+    // Backward compatibility
+    variant === 'sender' && customTheme.senderContainerStyle, variant === 'receiver' && customTheme.receiverContainerStyle, variant === 'system' && customTheme.systemContainerStyle);
+    // Build bubble styles
+    var bubbleStyle = cn(chatMessageTheme.bubbleBaseStyle, variantTheme.bubbleStyle, customTheme.bubbleBaseStyle, (_e = (_d = customTheme.variants) === null || _d === void 0 ? void 0 : _d[variant]) === null || _e === void 0 ? void 0 : _e.bubbleStyle, 
+    // Backward compatibility
+    variant === 'sender' && customTheme.senderBubbleStyle, variant === 'receiver' && customTheme.receiverBubbleStyle, variant === 'system' && customTheme.systemBubbleStyle);
+    // Build timestamp styles
+    var timestampStyle = cn(chatMessageTheme.timestampStyle, variantTheme.timestampModifier, customTheme.timestampStyle, (_g = (_f = customTheme.variants) === null || _f === void 0 ? void 0 : _f[variant]) === null || _g === void 0 ? void 0 : _g.timestampModifier, 
+    // Backward compatibility
+    variant === 'sender' && customTheme.senderTimestampStyle, variant === 'receiver' && customTheme.receiverTimestampStyle, variant === 'system' && customTheme.systemTimestampStyle);
+    // System messages render differently (centered, no avatar)
+    if (variant === 'system') {
+        return (React__default.createElement("div", __assign({ ref: ref, className: cn('w-full max-w-full', className), "data-variant": "system" }, props),
+            React__default.createElement("div", { className: containerStyle },
+                React__default.createElement("div", { className: bubbleStyle }, typeof message === 'string' ? React__default.createElement("p", { className: "text-sm" }, message) : message),
+                React__default.createElement(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: undefined, timestampStyle: timestampStyle, streamingIndicatorStyle: customTheme.streamingIndicatorStyle, actionsContainerStyle: undefined, variant: "system" }))));
+    }
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn('w-full max-w-full group', className), "data-variant": variant }, props),
+        React__default.createElement("div", { className: containerStyle },
+            avatar && (React__default.createElement("div", { className: "flex-shrink-0" },
+                React__default.createElement(Avatar, { src: avatar.src, alt: avatar.alt, fallback: avatar.fallback, size: "xs" }))),
+            React__default.createElement("div", { className: cn('flex flex-col min-w-0', variant === 'sender' ? 'items-end' : 'items-start') },
+                React__default.createElement("div", { className: bubbleStyle }, typeof message === 'string' ? React__default.createElement("p", { className: "break-words" }, message) : message),
+                React__default.createElement(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: actions, timestampStyle: timestampStyle, streamingIndicatorStyle: customTheme.streamingIndicatorStyle, actionsContainerStyle: cn(chatMessageTheme.actionsContainerStyle, customTheme.actionsContainerStyle), variant: variant })))));
+});
+ChatMessage.displayName = 'ChatMessage';
+
+export { ChatMessage };

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

@@ -0,0 +1,6 @@
+import { ChatMessageTheme } from './ChatMessage.types';
+/**
+ * Simplified ChatMessage theme with shared base styles + variant-specific modifiers
+ * Reduces theme complexity from 12 properties to 7 (40% reduction)
+ */
+export declare const chatMessageTheme: ChatMessageTheme;

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

@@ -0,0 +1,31 @@
+/**
+ * Simplified ChatMessage theme with shared base styles + variant-specific modifiers
+ * Reduces theme complexity from 12 properties to 7 (40% reduction)
+ */
+var chatMessageTheme = {
+    // Shared base styles (apply to all variants)
+    bubbleBaseStyle: 'max-w-[80%] sm:max-w-[90%] rounded-xl px-3 py-2 w-fit border-t-[0.5px] ring-1 h-fit',
+    containerBaseStyle: 'flex items-start gap-3 h-fit text-sm',
+    timestampStyle: 'text-xs text-[var(--color-text-placeholder)]',
+    // Variant-specific modifiers (only differences)
+    variants: {
+        sender: {
+            containerModifier: 'flex-row-reverse', // Reverse direction for right alignment
+            bubbleStyle: 'bg-gradient-to-br from-[var(--color-neutral-700)] to-[var(--color-neutral-900)] text-white rounded-tr-xs ring-[var(--color-neutral-900)] border-t-1 border-white/40',
+            timestampModifier: 'text-right pr-1',
+        },
+        receiver: {
+            containerModifier: '', // Default direction (no modifier needed)
+            bubbleStyle: 'bg-neutral-100 text-[var(--color-text-primary)] rounded-tl-xs shadow-black/10 ring-neutral-100 border-white',
+            timestampModifier: 'text-left pl-1',
+        },
+        system: {
+            containerModifier: 'justify-center', // Center alignment
+            bubbleStyle: 'bg-neutral-100 text-[var(--color-text-secondary)] rounded-md px-2 py-1 text-sm font-medium border-none',
+            timestampModifier: 'text-center',
+        },
+    },
+    actionsContainerStyle: 'flex items-start gap-2',
+};
+
+export { chatMessageTheme };

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

@@ -0,0 +1,120 @@
+import { ReactNode } from 'react';
+export type ChatMessageVariant = 'sender' | 'receiver' | 'system';
+export interface ChatMessageAvatarProps {
+    /**
+     * The source URL for the avatar image
+     */
+    src?: string;
+    /**
+     * Alternative text for the avatar image
+     */
+    alt: string;
+    /**
+     * Fallback content to display when image fails to load
+     */
+    fallback?: ReactNode;
+}
+export interface ChatMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The variant of the chat message
+     * - sender: User messages (right-aligned)
+     * - receiver: Response messages (left-aligned)
+     * - system: System notifications (centered)
+     * @default "receiver"
+     */
+    variant?: ChatMessageVariant;
+    /**
+     * The message content (supports string or rich content)
+     */
+    message: ReactNode;
+    /**
+     * The timestamp of the message
+     */
+    timestamp?: Date | string;
+    /**
+     * Avatar configuration for the message sender
+     * Note: Not shown for system messages
+     */
+    avatar?: ChatMessageAvatarProps;
+    /**
+     * Whether to show the timestamp
+     * @default true
+     */
+    showTimestamp?: boolean;
+    /**
+     * Whether the message is currently streaming
+     * @default false
+     */
+    isStreaming?: boolean;
+    /**
+     * Custom streaming indicator content
+     * If not provided, a default indicator will be shown
+     */
+    streamingIndicator?: ReactNode;
+    /**
+     * Optional actions to display (e.g., copy, regenerate buttons)
+     * Actions are rendered below the message with group-hover visibility
+     */
+    actions?: ReactNode;
+    /**
+     * Custom theme overrides
+     */
+    theme?: ChatMessageThemeOverrides;
+}
+/**
+ * Variant-specific theme styles
+ */
+export interface ChatMessageVariantTheme {
+    containerModifier: string;
+    bubbleStyle: string;
+    timestampModifier: string;
+}
+/**
+ * Simplified ChatMessage theme with shared base styles + variant-specific modifiers
+ */
+export interface ChatMessageTheme {
+    bubbleBaseStyle: string;
+    containerBaseStyle: string;
+    timestampStyle: string;
+    variants: {
+        sender: ChatMessageVariantTheme;
+        receiver: ChatMessageVariantTheme;
+        system: ChatMessageVariantTheme;
+    };
+    streamingIndicatorStyle: string;
+    actionsContainerStyle: string;
+}
+/**
+ * Theme overrides for ChatMessage
+ * Maintains backward compatibility with old structure
+ */
+export interface ChatMessageThemeOverrides {
+    bubbleBaseStyle?: string;
+    containerBaseStyle?: string;
+    timestampStyle?: string;
+    variants?: {
+        sender?: Partial<ChatMessageVariantTheme>;
+        receiver?: Partial<ChatMessageVariantTheme>;
+        system?: Partial<ChatMessageVariantTheme>;
+    };
+    streamingIndicatorStyle?: string;
+    actionsContainerStyle?: string;
+    /** @deprecated Use variants.sender.containerModifier instead */
+    senderContainerStyle?: string;
+    /** @deprecated Use variants.sender.bubbleStyle instead */
+    senderBubbleStyle?: string;
+    /** @deprecated Use variants.sender.timestampModifier instead */
+    senderTimestampStyle?: string;
+    /** @deprecated Use variants.receiver.containerModifier instead */
+    receiverContainerStyle?: string;
+    /** @deprecated Use variants.receiver.bubbleStyle instead */
+    receiverBubbleStyle?: string;
+    /** @deprecated Use variants.receiver.timestampModifier instead */
+    receiverTimestampStyle?: string;
+    /** @deprecated Use variants.system.containerModifier instead */
+    systemContainerStyle?: string;
+    /** @deprecated Use variants.system.bubbleStyle instead */
+    systemBubbleStyle?: string;
+    /** @deprecated Use variants.system.timestampModifier instead */
+    systemTimestampStyle?: string;
+}

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

@@ -0,0 +1,2 @@
+export { ChatMessage } from './ChatMessage';
+export type { ChatMessageProps, ChatMessageVariant, ChatMessageAvatarProps, ChatMessageTheme, ChatMessageThemeOverrides } from './ChatMessage.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/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.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { CommandPaletteProps } from './CommandPalette.types';
+/**
+ * CommandPalette Component
+ *
+ * A ⌘K style command palette for quick navigation and actions.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * const commands = [
+ *   {
+ *     id: 'new-file',
+ *     label: 'New File',
+ *     contentStart: <DocumentPlusIcon />,
+ *     shortcut: ['⌘', 'N'],
+ *     onSelect: () => console.log('New file'),
+ *   },
+ * ];
+ *
+ * <CommandPalette
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   commands={commands}
+ * />
+ * ```
+ */
+export declare const CommandPalette: React.FC<CommandPaletteProps>;

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

@@ -0,0 +1,2 @@
+import type { CommandPaletteThemeOverrides } from './CommandPalette.types';
+export declare const commandPaletteTheme: Required<CommandPaletteThemeOverrides>;

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

@@ -0,0 +1,89 @@
+import React from 'react';
+/**
+ * Command item type
+ */
+export interface CommandItem {
+    /** Unique identifier for the command */
+    id: string;
+    /** Display label for the command */
+    label: string;
+    /** Description or subtitle for the command */
+    description?: string;
+    /** Content to display at the start (icon, avatar, etc.) */
+    contentStart?: React.ReactNode;
+    /** Content to display at the end (keyboard shortcuts, badges, etc.) */
+    contentEnd?: React.ReactNode;
+    /** Keyboard shortcut to display (convenience prop - renders as Kbd component in contentEnd) */
+    shortcut?: string | string[];
+    /** Category/group for the command */
+    group?: string;
+    /** Action to execute when command is selected */
+    onSelect: () => void;
+    /** Keywords for search matching */
+    keywords?: string[];
+    /** Whether the command is disabled */
+    disabled?: boolean;
+}
+/**
+ * Command group type
+ */
+export interface CommandGroup {
+    /** Unique identifier for the group */
+    id: string;
+    /** Display label for the group */
+    label: string;
+    /** Commands in this group */
+    commands: CommandItem[];
+}
+/**
+ * CommandPalette component props
+ */
+export interface CommandPaletteProps {
+    /** Whether the command palette is open */
+    isOpen: boolean;
+    /** Called when the palette should close */
+    onClose: () => void;
+    /** Array of commands or command groups */
+    commands: CommandItem[] | CommandGroup[];
+    /** Placeholder text for search input */
+    placeholder?: string;
+    /** Custom empty state message */
+    emptyMessage?: string;
+    /** Maximum height of the command list */
+    maxHeight?: string | number;
+    /** Additional class name for the container */
+    className?: string;
+    /** Additional class name for the overlay */
+    overlayClassName?: string;
+    /** Component-level theme overrides */
+    theme?: CommandPaletteThemeOverrides;
+    /** Whether to group commands by category */
+    grouped?: boolean;
+    /** Called when search value changes */
+    onSearchChange?: (value: string) => void;
+    /** Custom filter function */
+    filterFunction?: (command: CommandItem, searchValue: string) => boolean;
+    /** Whether clicking the overlay should close the palette (default: true) */
+    closeOnOverlayClick?: boolean;
+    /** Whether pressing Escape should close the palette (default: true) */
+    closeOnEsc?: boolean;
+}
+/**
+ * Theme overrides for the CommandPalette component
+ */
+export interface CommandPaletteThemeOverrides {
+    /** Style for the overlay backdrop */
+    overlay?: string;
+    /** Style for the modal container */
+    container?: string;
+    /** Style for the search input wrapper */
+    searchWrapper?: string;
+    /** Style for the search input */
+    searchInput?: string;
+    /** Style for group labels */
+    groupLabel?: string;
+    /** Style for command items (uses data-[highlighted] and data-[disabled] selectors) */
+    commandItem?: string;
+    /** Style for empty state */
+    emptyState?: string;
+}

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

@@ -0,0 +1,3 @@
+export { CommandPalette } from './CommandPalette';
+export type { CommandPaletteProps, CommandItem, CommandGroup, CommandPaletteThemeOverrides, } from './CommandPalette.types';
+export { commandPaletteTheme } from './CommandPalette.theme';

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { ContextMenuProps } from "./ContextMenu.types";
+export declare const ContextMenu: {
+    ({ children, className, onOpenChange, theme: themeOverrides, ...props }: ContextMenuProps): React.JSX.Element;
+    displayName: string;
+} & {
+    Trigger: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuTriggerProps & React.RefAttributes<HTMLElement>>;
+    Content: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+    Sub: React.FC<import("./ContextMenu.types").ContextMenuSubProps>;
+    SubTrigger: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
+    SubContent: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;
+    Separator: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>>;
+};

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

@@ -0,0 +1,11 @@
+import { DropdownTheme } from "../Dropdown/Dropdown.theme";
+export interface ContextMenuTheme extends DropdownTheme {
+    contentStyle: string;
+    itemStyle: string;
+    itemCheckedStyle: string;
+    subTriggerStyle: string;
+    subContentStyle: string;
+    separatorStyle: string;
+    labelStyle: string;
+}
+export declare const contextMenuTheme: ContextMenuTheme;