flikkui 0.2.0-beta.2 → 0.2.0-beta.5

package/dist/components/ai/PresenceIndicator/PresenceIndicator.animations.js

@@ -1,56 +0,0 @@
-/**
- * PresenceIndicator Animations
- *
- * Framer Motion animation variants for the presence indicator.
- * Import from 'motion/react'.
- */
-/**
- * Container animation
- * Scales in the entire group and staggers children
- */
-const containerVariants = {
-    hidden: {
-        opacity: 0,
-        scale: 0.95,
-    },
-    visible: {
-        opacity: 1,
-        scale: 1,
-        transition: {
-            duration: 0.3,
-            ease: "backOut",
-            staggerChildren: 0.05,
-            delayChildren: 0.05,
-        },
-    },
-    exit: {
-        opacity: 0,
-        scale: 0.95,
-        transition: {
-            duration: 0.2,
-        },
-    },
-};
-/**
- * Item animation (for custom avatars)
- * Pops in individual avatars
- */
-const itemVariants = {
-    hidden: {
-        opacity: 0,
-        scale: 0,
-        x: -5,
-    },
-    visible: {
-        opacity: 1,
-        scale: 1,
-        x: 0,
-        transition: {
-            type: "spring",
-            stiffness: 400,
-            damping: 25,
-        },
-    },
-};
-
-export { containerVariants, itemVariants };

package/dist/components/ai/PresenceIndicator/PresenceIndicator.d.ts

@@ -1,38 +0,0 @@
-/**
- * PresenceIndicator Component
- *
- * Displays active user avatars with overflow handling.
- * Reuses existing AvatarGroup component for consistency.
- *
- * @example
- * ```tsx
- * <PresenceProvider channel="chat" currentUser={user} adapter={adapter}>
- *   <PresenceIndicator max={5} showCount />
- * </PresenceProvider>
- * ```
- */
-import React from "react";
-import { PresenceIndicatorProps } from "./PresenceIndicator.types";
-/**
- * PresenceIndicator - Show active users with avatars
- *
- * @example
- * ```tsx
- * // Basic usage
- * <PresenceIndicator max={5} showCount />
- *
- * // With custom filtering
- * <PresenceIndicator
- *   filter={(user) => user.status === 'online'}
- *   sortBy="name"
- * />
- *
- * // Custom styling
- * <PresenceIndicator
- *   size="sm"
- *   spacing="tight"
- *   className="bg-gray-100 p-2 rounded"
- * />
- * ```
- */
-export declare const PresenceIndicator: React.ForwardRefExoticComponent<PresenceIndicatorProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ai/PresenceIndicator/PresenceIndicator.js

@@ -1,110 +0,0 @@
-import React__default, { useMemo } from 'react';
-import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
-import { AvatarGroup } from '../../core/AvatarGroup/AvatarGroup.js';
-import { usePresenceContext } from '../PresenceProvider/PresenceContext.js';
-import { presenceIndicatorTheme } from './PresenceIndicator.theme.js';
-import { cn } from '../../../utils/cn.js';
-import { sortUsers, formatPresenceCount } from '../../../utils/presenceUtils.js';
-import { containerVariants, itemVariants } from './PresenceIndicator.animations.js';
-
-/**
- * PresenceIndicator Component
- *
- * Displays active user avatars with overflow handling.
- * Reuses existing AvatarGroup component for consistency.
- *
- * @example
- * ```tsx
- * <PresenceProvider channel="chat" currentUser={user} adapter={adapter}>
- *   <PresenceIndicator max={5} showCount />
- * </PresenceProvider>
- * ```
- */
-/**
- * PresenceIndicator - Show active users with avatars
- *
- * @example
- * ```tsx
- * // Basic usage
- * <PresenceIndicator max={5} showCount />
- *
- * // With custom filtering
- * <PresenceIndicator
- *   filter={(user) => user.status === 'online'}
- *   sortBy="name"
- * />
- *
- * // Custom styling
- * <PresenceIndicator
- *   size="sm"
- *   spacing="tight"
- *   className="bg-gray-100 p-2 rounded"
- * />
- * ```
- */
-const PresenceIndicator = React__default.forwardRef(({ max = 5, size = "md", spacing = "normal", showCount = false, countFormat, filter, sortBy = "joinedAt", renderAvatar, shouldAnimate = true, overflowIndicator, ariaLabel, theme = presenceIndicatorTheme, className, ...props }, ref) => {
-    var _a;
-    // Get presence state from context
-    const { users } = usePresenceContext();
-    // Process users: filter and sort
-    const processedUsers = useMemo(() => {
-        let result = users;
-        // Apply filter
-        if (filter) {
-            result = result.filter(filter);
-        }
-        // Apply sort
-        if (sortBy) {
-            result = sortUsers(result, sortBy);
-        }
-        return result;
-    }, [users, filter, sortBy]);
-    // Convert PresenceUser[] to AvatarProps[]
-    const avatarProps = useMemo(() => {
-        return processedUsers.map((user) => ({
-            src: user.avatar,
-            alt: user.name,
-            status: user.status,
-        }));
-    }, [processedUsers]);
-    // Format count text
-    const countText = useMemo(() => {
-        if (!showCount)
-            return null;
-        return countFormat
-            ? countFormat(processedUsers.length)
-            : formatPresenceCount(processedUsers.length);
-    }, [showCount, processedUsers.length, countFormat]);
-    // Merge theme
-    const mergedTheme = {
-        ...presenceIndicatorTheme,
-        ...theme,
-    };
-    // Build className
-    const containerClassName = cn(mergedTheme.baseStyle, (_a = mergedTheme.sizes) === null || _a === void 0 ? void 0 : _a[size], className // User overrides take precedence
-    );
-    // Don't render anything if no users
-    if (processedUsers.length === 0) {
-        return (React__default.createElement(AnimatePresence, null,
-            React__default.createElement(motion.div, { ref: ref, className: containerClassName, role: "group", "aria-label": "No users online", "data-user-count": 0, initial: "hidden", animate: "visible", exit: "exit", variants: shouldAnimate && !useReducedMotion()
-                    ? containerVariants
-                    : undefined, ...props }, showCount && (React__default.createElement("span", { className: mergedTheme.countStyle }, countFormat ? countFormat(0) : "No users online")))));
-    }
-    const disableAnimations = useReducedMotion() || !shouldAnimate;
-    return (React__default.createElement(AnimatePresence, { mode: "popLayout" },
-        React__default.createElement(motion.div, { ref: ref, className: containerClassName, role: "group", "aria-label": ariaLabel || `${processedUsers.length} active users`, "data-user-count": processedUsers.length, initial: "hidden", animate: "visible", exit: "exit", variants: !disableAnimations ? containerVariants : undefined, ...props },
-            renderAvatar ? (
-            // Custom avatar rendering with stagger
-            React__default.createElement("div", { className: "inline-flex" },
-                processedUsers.slice(0, max).map((user) => (React__default.createElement(motion.div, { key: user.id, variants: itemVariants }, renderAvatar(user)))),
-                processedUsers.length > max && (React__default.createElement(motion.span, { variants: itemVariants, className: "text-sm text-[var(--color-text-secondary)]" },
-                    "+",
-                    processedUsers.length - max)))) : (
-            // Default AvatarGroup rendering
-            React__default.createElement(AvatarGroup, { avatars: avatarProps, max: max, size: size, spacing: spacing, shouldAnimate: shouldAnimate, overflowIndicator: overflowIndicator, ariaLabel: ariaLabel })),
-            showCount && countText && (React__default.createElement(motion.span, { variants: itemVariants, className: mergedTheme.countStyle, "aria-live": "polite" }, countText)))));
-});
-// Display name for dev tools
-PresenceIndicator.displayName = "PresenceIndicator";
-
-export { PresenceIndicator };

package/dist/components/ai/PresenceIndicator/PresenceIndicator.theme.d.ts

@@ -1,2 +0,0 @@
-import { PresenceIndicatorTheme } from "./PresenceIndicator.types";
-export declare const presenceIndicatorTheme: PresenceIndicatorTheme;

package/dist/components/ai/PresenceIndicator/PresenceIndicator.theme.js

@@ -1,13 +0,0 @@
-const presenceIndicatorTheme = {
-    baseStyle: "inline-flex items-center gap-2",
-    countStyle: "text-[var(--color-text-secondary)]/80 text-xs tracking-tight whitespace-nowrap",
-    sizes: {
-        xs: "gap-1",
-        sm: "gap-1.5",
-        md: "gap-2",
-        lg: "gap-2.5",
-        xl: "gap-3",
-    },
-};
-
-export { presenceIndicatorTheme };

package/dist/components/ai/PresenceIndicator/PresenceIndicator.types.d.ts

@@ -1,53 +0,0 @@
-/**
- * PresenceIndicator Type Definitions
- *
- * Defines props and interfaces for the PresenceIndicator component.
- */
-import React from 'react';
-import { PresenceUser } from '../PresenceProvider/PresenceProvider.types';
-import { AvatarSize } from '../../core/Avatar/Avatar.types';
-import { AvatarGroupSpacing } from '../../core/AvatarGroup/AvatarGroup.types';
-/**
- * Sort criteria for presence users
- */
-export type PresenceSort = 'joinedAt' | 'name' | 'status' | ((a: PresenceUser, b: PresenceUser) => number);
-/**
- * PresenceIndicator component props
- */
-export interface PresenceIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Maximum users to display before showing overflow (default: 5) */
-    max?: number;
-    /** Avatar size (default: 'md') */
-    size?: AvatarSize;
-    /** Spacing between avatars (default: 'normal') */
-    spacing?: AvatarGroupSpacing;
-    /** Show user count label (default: false) */
-    showCount?: boolean;
-    /** Custom count format function */
-    countFormat?: (count: number) => string;
-    /** Filter which users to show */
-    filter?: (user: PresenceUser) => boolean;
-    /** Sort users by criteria (default: 'joinedAt') */
-    sortBy?: PresenceSort;
-    /** Custom avatar renderer */
-    renderAvatar?: (user: PresenceUser) => React.ReactNode;
-    /** Enable animations (default: true) */
-    shouldAnimate?: boolean;
-    /** Custom overflow indicator */
-    overflowIndicator?: (overflowCount: number) => React.ReactNode;
-    /** ARIA label for the group */
-    ariaLabel?: string;
-    /** Theme overrides */
-    theme?: PresenceIndicatorTheme;
-}
-/**
- * Theme configuration for PresenceIndicator
- */
-export interface PresenceIndicatorTheme {
-    /** Base container style */
-    baseStyle?: string;
-    /** Count label style */
-    countStyle?: string;
-    /** Size-specific gaps */
-    sizes?: Partial<Record<AvatarSize, string>>;
-}

package/dist/components/ai/PresenceIndicator/index.d.ts

@@ -1,8 +0,0 @@
-/**
- * PresenceIndicator - Visual display of active users
- *
- * @module collaboration/PresenceIndicator
- */
-export { PresenceIndicator } from './PresenceIndicator';
-export { presenceIndicatorTheme } from './PresenceIndicator.theme';
-export type { PresenceIndicatorProps, PresenceIndicatorTheme, PresenceSort, } from './PresenceIndicator.types';

package/dist/components/ai/PresenceProvider/PresenceContext.d.ts

@@ -1,24 +0,0 @@
-/**
- * Presence Context
- *
- * Provides presence state to child components via React Context.
- * Follow the same pattern as Tabs and other compound components.
- */
-import { PresenceContextValue } from './PresenceProvider.types';
-/**
- * Context for sharing presence state between provider and child components
- */
-export declare const PresenceContext: import("react").Context<PresenceContextValue | null>;
-/**
- * Hook to consume PresenceContext
- *
- * @throws Error if used outside PresenceProvider
- * @returns Presence context value
- *
- * @example
- * function MyComponent() {
- *   const { users, typingUsers, isConnected } = usePresenceContext();
- *   return <div>{users.length} users online</div>;
- * }
- */
-export declare const usePresenceContext: () => PresenceContextValue;

package/dist/components/ai/PresenceProvider/PresenceContext.js

@@ -1,34 +0,0 @@
-import { createContext, useContext } from 'react';
-
-/**
- * Presence Context
- *
- * Provides presence state to child components via React Context.
- * Follow the same pattern as Tabs and other compound components.
- */
-/**
- * Context for sharing presence state between provider and child components
- */
-const PresenceContext = createContext(null);
-/**
- * Hook to consume PresenceContext
- *
- * @throws Error if used outside PresenceProvider
- * @returns Presence context value
- *
- * @example
- * function MyComponent() {
- *   const { users, typingUsers, isConnected } = usePresenceContext();
- *   return <div>{users.length} users online</div>;
- * }
- */
-const usePresenceContext = () => {
-    const context = useContext(PresenceContext);
-    if (!context) {
-        throw new Error('Presence components must be used within a PresenceProvider. ' +
-            'Wrap your component tree with <PresenceProvider>.');
-    }
-    return context;
-};
-
-export { PresenceContext, usePresenceContext };

package/dist/components/ai/PresenceProvider/PresenceProvider.d.ts

@@ -1,32 +0,0 @@
-/**
- * Presence Provider Component
- *
- * Root provider that manages real-time presence state via adapter pattern.
- * Provides presence context to child components.
- *
- * Features:
- * - Backend-agnostic adapter pattern
- * - Network-aware reconnection
- * - Typing state management with debouncing
- * - Auto-cleanup on unmount
- */
-import React from 'react';
-import { PresenceProviderProps } from './PresenceProvider.types';
-/**
- * PresenceProvider - Real-time collaboration provider
- *
- * @example
- * ```tsx
- * const adapter = new MockPresenceAdapter();
- * const currentUser = { id: '1', name: 'John Doe', status: 'online' };
- *
- * <PresenceProvider channel="chat-room-123" currentUser={currentUser} adapter={adapter}>
- *   <PresenceIndicator />
- *   <ChatInterface>
- *     <MessageHistory />
- *     <EditingIndicator />
- *   </ChatInterface>
- * </PresenceProvider>
- * ```
- */
-export declare const PresenceProvider: React.ForwardRefExoticComponent<PresenceProviderProps & React.RefAttributes<HTMLDivElement>>;