flikkui 0.1.0-beta.11

package/README.md

@@ -0,0 +1,155 @@
+# Flikkui
+
+A modern React component library built with TypeScript, Tailwind CSS v4, and optional Framer Motion animations. Follows the shadcn philosophy where users can override any styling using className props while getting sensible defaults out of the box.
+
+## 🚀 Quick Start
+
+### 1. Install the package
+
+```bash
+npm install flikkui@beta motion
+# or
+yarn add flikkui@beta motion
+```
+
+### 2. Download the theme file
+
+Download the theme file from [flikkui.dev/theme](https://flikkui.dev/theme) and save it as `flikkui-theme.css` in your project root.
+
+Alternatively, you can copy this file: [flikkui-theme.css](./flikkui-theme.css)
+
+### 3. Import the theme in your app
+
+```tsx
+// In your main App.tsx, index.tsx, or _app.tsx
+import './flikkui-theme.css'  // Import the downloaded theme file
+import App from './App'
+
+// Your app code...
+```
+
+### 4. Start using components
+
+```tsx
+import { Button } from 'flikkui'
+
+export function MyComponent() {
+  return (
+    <Button variant="primary">
+      Hello World
+    </Button>
+  )
+}
+```
+
+## 🎨 Customization
+
+Edit the `flikkui-theme.css` file to customize your design system:
+
+```css
+/* flikkui-theme.css */
+@theme {
+  /* Change primary color */
+  --color-primary-base: oklch(0.666 0.223 48.717); /* Orange */
+  --color-primary-600: oklch(0.666 0.223 48.717);
+  --color-primary-700: oklch(0.555 0.192 47.355);
+  
+  /* Larger buttons */
+  --button-min-h-md: 3rem;
+  --button-px-md: 1.25rem;
+  
+  /* More rounded design */
+  --form-rounded: 1rem;
+}
+```
+
+You can also override styles using className props (shadcn approach):
+
+```tsx
+<Button className="bg-purple-600 hover:bg-purple-700 rounded-full">
+  Custom Button
+</Button>
+```
+
+## 📚 Components
+
+### Core Components
+- **Button** - Multiple variants, states, optional animations
+- **Avatar** - Image handling, fallbacks, status indicators
+- **AvatarGroup** - Overlapping avatars with compound component pattern  
+- **Badge** - Variants, sizes, content flexibility
+- **Accordion** - Compound component with animations
+- **Modal** - Compound component with header, body, footer
+- **Drawer** - Slide-out panels from edges
+- **Popover** - Compound with portal rendering
+- **Tooltip** - Positioning, animations, accessibility
+- **Tabs** - Horizontal tabbed interface
+
+### Form Components  
+- **Input** - Multiple types, masking, validation
+- **Select** - Searchable, compound pattern
+- **Checkbox** - Custom styling, controlled/uncontrolled
+- **Radio** - Group management
+- **Switch** - Toggle functionality
+- **Textarea** - Resizable, validation
+
+### Data Display
+- **Table** - Dual API, sorting, filtering, selection
+- **Spinner** - Loading states, sizes
+
+### Charts
+- **AreaChart** - Stacked, curved, null value handling
+- **BarChart** - Horizontal/vertical, grouped, stacked  
+- **LineChart** - Multiple series, curved lines
+- **DonutChart** - Progress, animations, gradients
+- **Heatmap** - Interactive, customizable intensity
+
+## 🔄 Migration from v0.1.0-beta.3
+
+If you were using the previous version, update your imports:
+
+```tsx
+// Old (v0.1.0-beta.3)
+import 'flikkui/styles.css'
+
+// New (v0.1.0-beta.4+)
+import './flikkui-theme.css'  // Download this file first
+```
+
+This change gives you:
+- ✅ 100% predictable styling
+- ✅ Full control over your design system  
+- ✅ No more CSS cascade conflicts
+- ✅ Easy theme customization
+
+## 💡 Philosophy
+
+Flikkui follows the **shadcn approach**:
+- Components provide sensible defaults
+- **className overrides always take precedence**
+- Full TypeScript support with excellent DX
+- Copy-paste friendly - customize anything
+- CSS variables for consistent theming
+
+## 🛠️ Tech Stack
+
+- **React 18** with TypeScript (strict mode)
+- **Tailwind CSS v4** with CSS variables
+- **Framer Motion** (optional, for enhanced components)
+- **Accessibility-first** - WCAG 2.1 AA compliance built-in
+
+## 📖 Documentation
+
+Visit [flikkui.dev](https://flikkui.dev) for:
+- Component API documentation
+- Interactive examples
+- Theme customization guide
+- Migration guides
+
+## 📄 License
+
+MIT
+
+---
+
+Made with ❤️ by [Espranza Innovations](https://espranza.net)

package/dist/_virtual/jsx-runtime.js

@@ -0,0 +1,5 @@
+import { __require as requireJsxRuntime } from '../node_modules/react/jsx-runtime.js';
+
+var jsxRuntimeExports = requireJsxRuntime();
+
+export { jsxRuntimeExports as j };

package/dist/_virtual/jsx-runtime2.js

@@ -0,0 +1,3 @@
+var jsxRuntime = {exports: {}};
+
+export { jsxRuntime as __module };

package/dist/_virtual/react-jsx-runtime.development.js

@@ -0,0 +1,3 @@
+var reactJsxRuntime_development = {};
+
+export { reactJsxRuntime_development as __exports };

package/dist/_virtual/react-jsx-runtime.production.js

@@ -0,0 +1,3 @@
+var reactJsxRuntime_production = {};
+
+export { reactJsxRuntime_production as __exports };

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MessageProps } from './Message.types';
+export declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>> & {
+    Avatar: React.ForwardRefExoticComponent<import("./MessageAvatar").MessageAvatarProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<import("./MessageContent").MessageContentProps & React.RefAttributes<HTMLDivElement>>;
+    Actions: React.ForwardRefExoticComponent<import("./MessageActions").MessageActionsProps & React.RefAttributes<HTMLDivElement>>;
+    Timestamp: React.ForwardRefExoticComponent<import("./MessageTimestamp").MessageTimestampProps & React.RefAttributes<HTMLDivElement>>;
+};

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

@@ -0,0 +1,2 @@
+import { MessageTheme } from './Message.types';
+export declare const messageTheme: MessageTheme;

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

@@ -0,0 +1,110 @@
+import { ReactNode } from 'react';
+/**
+ * Message role types for AI conversations
+ */
+export type MessageRole = 'user' | 'assistant' | 'system';
+/**
+ * Avatar configuration for message sender
+ */
+export interface MessageAvatarProps {
+    /**
+     * 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;
+}
+/**
+ * Message component props
+ * Supports both props-based API and compound component API
+ */
+export interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
+    /**
+     * The role of the message sender
+     * - user: Messages from the user
+     * - assistant: AI-generated responses
+     * - system: System notifications/messages
+     */
+    role: MessageRole;
+    /**
+     * The message content (supports rich content, markdown, etc.)
+     * Note: Optional when using compound API with Message.Content
+     */
+    content?: ReactNode;
+    /**
+     * The timestamp of the message
+     */
+    timestamp?: Date | string;
+    /**
+     * Avatar configuration for the message sender
+     */
+    avatar?: MessageAvatarProps;
+    /**
+     * Whether to show the timestamp
+     * @default true
+     */
+    showTimestamp?: boolean;
+    /**
+     * Whether the message is currently streaming (for AI responses)
+     * @default false
+     */
+    isStreaming?: boolean;
+    /**
+     * Speed for word-by-word typing animation in milliseconds
+     * Only applies when isStreaming is true for assistant messages
+     * @default 100
+     */
+    typingSpeed?: number;
+    /**
+     * Callback when copy button is clicked (only for assistant messages)
+     */
+    onCopy?: () => void;
+    /**
+     * Callback when regenerate button is clicked (only for assistant messages)
+     */
+    onRegenerate?: () => void;
+    /**
+     * Whether to show action buttons (copy, regenerate)
+     * @default true for assistant messages
+     */
+    showActions?: boolean;
+    /**
+     * Custom theme overrides
+     */
+    theme?: MessageThemeOverrides;
+}
+/**
+ * Message theme configuration (lean - only for new features)
+ */
+export interface MessageTheme {
+    systemContainerStyle: string;
+    systemBubbleStyle: string;
+    systemTimestampStyle: string;
+    actionsContainerStyle: string;
+    actionButtonStyle: string;
+    streamingIndicatorStyle: string;
+}
+/**
+ * Theme overrides for Message component
+ * Note: User/assistant styles are inherited from ChatMessage and can be overridden
+ */
+export interface MessageThemeOverrides {
+    userContainerStyle?: string;
+    userBubbleStyle?: string;
+    userTimestampStyle?: string;
+    assistantContainerStyle?: string;
+    assistantBubbleStyle?: string;
+    assistantTimestampStyle?: string;
+    systemContainerStyle?: string;
+    systemBubbleStyle?: string;
+    systemTimestampStyle?: string;
+    actionsContainerStyle?: string;
+    actionButtonStyle?: string;
+    streamingIndicatorStyle?: string;
+}

package/dist/components/ai/Message/MessageActions.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface MessageActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Action buttons to display
+     */
+    children: React.ReactNode;
+}
+export declare const MessageActions: React.ForwardRefExoticComponent<MessageActionsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ai/Message/MessageAvatar.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface MessageAvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The source URL for the avatar image
+     */
+    src?: string;
+    /**
+     * The name or alt text for the avatar
+     */
+    name: string;
+    /**
+     * Fallback content to display when image fails to load
+     */
+    fallback?: React.ReactNode;
+}
+export declare const MessageAvatar: React.ForwardRefExoticComponent<MessageAvatarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ai/Message/MessageContent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface MessageContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The message content
+     */
+    children: React.ReactNode;
+}
+export declare const MessageContent: React.ForwardRefExoticComponent<MessageContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ai/Message/MessageContext.d.ts

@@ -0,0 +1,8 @@
+import { MessageRole } from './Message.types';
+export interface MessageContextValue {
+    role: MessageRole;
+    isStreaming?: boolean;
+    typingSpeed?: number;
+}
+export declare const MessageContext: import("react").Context<MessageContextValue | undefined>;
+export declare const useMessageContext: () => MessageContextValue;

package/dist/components/ai/Message/MessageTimestamp.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface MessageTimestampProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The timestamp to display
+     */
+    timestamp: Date | string;
+}
+export declare const MessageTimestamp: React.ForwardRefExoticComponent<MessageTimestampProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ai/Message/TypeWriter.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+export interface TypeWriterProps {
+    /**
+     * The text to animate
+     */
+    text: string;
+    /**
+     * Speed in milliseconds per word
+     * @default 100
+     */
+    speed?: number;
+    /**
+     * Whether the animation is enabled
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Callback when animation completes
+     */
+    onComplete?: () => void;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * TypeWriter component that animates text word-by-word
+ *
+ * @example
+ * ```tsx
+ * <TypeWriter
+ *   text="Hello world, this is a typing animation"
+ *   speed={100}
+ *   enabled={true}
+ * />
+ * ```
+ */
+export declare const TypeWriter: React.FC<TypeWriterProps>;

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

@@ -0,0 +1,9 @@
+export { Message } from './Message';
+export { messageTheme } from './Message.theme';
+export { useMessageContext } from './MessageContext';
+export type { MessageProps, MessageRole, MessageAvatarProps, MessageTheme, MessageThemeOverrides, } from './Message.types';
+export type { MessageContextValue } from './MessageContext';
+export type { MessageAvatarProps as MessageAvatarComponentProps } from './MessageAvatar';
+export type { MessageContentProps } from './MessageContent';
+export type { MessageActionsProps } from './MessageActions';
+export type { MessageTimestampProps } from './MessageTimestamp';

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { PromptInputProps } from "./PromptInput.types";
+/**
+ * AI prompt input component with integrated controls for model selection,
+ * attachments, voice input, and settings.
+ *
+ * Supports both controlled and uncontrolled patterns for maximum flexibility.
+ *
+ * @example Uncontrolled usage
+ * ```tsx
+ * <PromptInput onSubmit={(text, model) => handlePrompt(text, model)} />
+ * ```
+ *
+ * @example Controlled usage
+ * ```tsx
+ * <PromptInput
+ *   value={prompt}
+ *   onChange={setPrompt}
+ *   selectedModel={model}
+ *   onModelChange={setModel}
+ * />
+ * ```
+ */
+export declare const PromptInput: React.ForwardRefExoticComponent<PromptInputProps & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -0,0 +1,8 @@
+import { PromptInputTheme } from './PromptInput.types';
+/**
+ * Default theme for PromptInput component
+ *
+ * Uses CSS variables from global.scss for consistent theming.
+ * All styles can be overridden via className prop (shadcn approach).
+ */
+export declare const promptInputTheme: PromptInputTheme;

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

@@ -0,0 +1,152 @@
+import React from 'react';
+/**
+ * AI prompt input component props
+ *
+ * Supports both controlled and uncontrolled patterns for maximum flexibility.
+ *
+ * @example Uncontrolled usage
+ * ```tsx
+ * <PromptInput onSubmit={(text, model) => handlePrompt(text, model)} />
+ * ```
+ *
+ * @example Controlled usage
+ * ```tsx
+ * <PromptInput
+ *   value={prompt}
+ *   onChange={setPrompt}
+ *   selectedModel={model}
+ *   onModelChange={setModel}
+ * />
+ * ```
+ */
+export interface PromptInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onSubmit' | 'onKeyDown'> {
+    /** Controlled value - when provided, component becomes controlled */
+    value?: string;
+    /** Default value for uncontrolled mode */
+    defaultValue?: string;
+    /**
+     * Change handler for controlled mode
+     * @param value - The new textarea value
+     * @param event - The change event
+     */
+    onChange?: (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    /** Placeholder text for the textarea */
+    placeholder?: string;
+    /** Maximum character length */
+    maxLength?: number;
+    /** Minimum height of the textarea (CSS value, e.g., "48px") */
+    minHeight?: string;
+    /** Maximum height of the textarea (CSS value, e.g., "120px") */
+    maxHeight?: string;
+    /** Initial number of rows (only applies before auto-resize) */
+    rows?: number;
+    /** Component state */
+    state?: PromptInputState;
+    /** Whether the input is disabled (alternative to state="disabled") */
+    disabled?: boolean;
+    /** Helper text displayed below the input */
+    helperText?: string;
+    /** Whether to show character count in helper text */
+    showCharCount?: boolean;
+    /** Currently selected model key (controlled) */
+    selectedModel?: string;
+    /** Default selected model for uncontrolled mode */
+    defaultSelectedModel?: string;
+    /** Available models for the dropdown */
+    models?: ModelOption[];
+    /**
+     * Callback when model selection changes
+     * @param modelKey - The selected model key
+     */
+    onModelChange?: (modelKey: string) => void;
+    /**
+     * Submit callback triggered by submit button or keyboard shortcut
+     * @param text - The trimmed prompt text
+     * @param modelKey - The currently selected model key
+     */
+    onSubmit?: (text: string, modelKey: string) => void;
+    /** Callback when attachment button is clicked */
+    onAttachmentClick?: () => void;
+    /** Callback when voice button is clicked */
+    onVoiceClick?: () => void;
+    /** Callback when settings button is clicked */
+    onSettingsClick?: () => void;
+    /** Additional keyboard event handler (useful for custom shortcuts) */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    /** Whether to show the attachment button (default: true) */
+    showAttachmentButton?: boolean;
+    /** Whether to show the voice button (default: true) */
+    showVoiceButton?: boolean;
+    /** Whether to show the settings button (default: true) */
+    showSettingsButton?: boolean;
+    /** Whether to show the model selector dropdown (default: true) */
+    showModelSelector?: boolean;
+    /** Custom label for submit button (for aria-label) */
+    submitButtonLabel?: string;
+    /** Custom icon for submit button */
+    submitButtonIcon?: React.ReactNode;
+    /** Visual indicator for keyboard shortcut (not functional) */
+    submitShortcut?: string;
+    /** Additional class name for the container (highest priority) */
+    className?: string;
+    /** Additional class name for the textarea element */
+    textareaClassName?: string;
+    /** Additional class name for the footer section */
+    footerClassName?: string;
+    /** Theme overrides for component styling */
+    theme?: PromptInputThemeOverrides;
+    /** ARIA label for the textarea (default: "Prompt input") */
+    'aria-label'?: string;
+    /** ARIA describedby for the textarea */
+    'aria-describedby'?: string;
+    /** ID for the textarea element */
+    id?: string;
+}
+/**
+ * Component state types
+ */
+export type PromptInputState = 'default' | 'disabled' | 'invalid' | 'loading';
+/**
+ * Model option for the model selector dropdown
+ */
+export interface ModelOption {
+    /** Unique key for the model */
+    key: string;
+    /** Display label for the model */
+    label: string;
+    /** Optional description for the model */
+    description?: string;
+    /** Optional icon to display with the model */
+    icon?: React.ReactNode;
+}
+/**
+ * Theme overrides for PromptInput component
+ *
+ * Allows customization of component styling while maintaining
+ * the shadcn approach where className prop takes highest priority.
+ */
+export interface PromptInputThemeOverrides {
+    /** Style for the main container */
+    baseStyle?: string;
+    /** Style for the textarea element */
+    textareaStyle?: string;
+    /** Style for the footer section */
+    footerStyle?: string;
+    /** Style for the action buttons container */
+    actionsStyle?: string;
+    /** Style for the submit button */
+    submitButtonStyle?: string;
+    /** State-specific styles */
+    states?: Partial<Record<PromptInputState, string>>;
+}
+/**
+ * Complete theme interface (internal use)
+ */
+export interface PromptInputTheme {
+    baseStyle: string;
+    textareaStyle: string;
+    footerStyle: string;
+    actionsStyle: string;
+    submitButtonStyle: string;
+    states: Record<PromptInputState, string>;
+}

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

@@ -0,0 +1,3 @@
+export { PromptInput } from './PromptInput';
+export type { PromptInputProps, PromptInputState, PromptInputTheme, PromptInputThemeOverrides, ModelOption, } from './PromptInput.types';
+export { promptInputTheme } from './PromptInput.theme';

package/dist/components/charts/ActivityRings/ActivityRings.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ActivityRingsProps } from "./ActivityRings.types";
+/**
+ * ActivityRings Component
+ *
+ * Multiple concentric circular progress rings, inspired by Apple Activity.
+ * Features smooth animations, accessibility support, and production-ready CSS variables.
+ */
+export declare const ActivityRings: React.FC<ActivityRingsProps>;

package/dist/components/charts/ActivityRings/ActivityRings.theme.d.ts

@@ -0,0 +1,7 @@
+import { ActivityRingsThemeOverrides } from "./ActivityRings.types";
+/**
+ * ActivityRings Theme Configuration
+ *
+ * Follows the established chart theming pattern with CSS variables
+ */
+export declare const activityRingsTheme: ActivityRingsThemeOverrides;

package/dist/components/charts/ActivityRings/ActivityRings.types.d.ts

@@ -0,0 +1,62 @@
+import { BaseChartProps, StandardChartDisplayProps } from '../types/chart.types';
+/**
+ * Individual ring configuration
+ */
+export interface RingData {
+    /** Progress value (0-100) */
+    value: number;
+    /** Optional label for the ring (e.g., "Move", "Exercise") */
+    label?: string;
+    /** Ring color (CSS variable or hex) */
+    color?: string;
+}
+/**
+ * ActivityRings theme overrides
+ */
+export interface ActivityRingsThemeOverrides {
+    /** Base container styles */
+    baseStyle?: string;
+    /** SVG wrapper styles */
+    svgStyle?: string;
+    /** Ring defaults */
+    ringDefaults?: {
+        strokeWidth?: number;
+        gap?: number;
+        colors?: string[];
+    };
+    /** Center text styles */
+    centerText?: {
+        label?: string;
+        suffix?: string;
+    };
+}
+/**
+ * ActivityRings props - multiple concentric circular progress rings
+ */
+export interface ActivityRingsProps extends Pick<BaseChartProps, 'className' | 'children' | 'title' | 'description'>, Pick<StandardChartDisplayProps, 'variant'> {
+    /** Array of rings (ordered from outer to inner) */
+    rings: RingData[];
+    /** Center label content (text or ReactNode) */
+    centerLabel?: React.ReactNode;
+    /** Optional suffix for center label (e.g., "cal", "steps") */
+    centerSuffix?: string;
+    /** Size of the chart (px or string with units) */
+    size?: number | string;
+    /** Ring stroke width (default: 12) */
+    strokeWidth?: number;
+    /** Gap between rings (default: 8) */
+    gap?: number;
+    /** Whether to show animations (default: true) */
+    showAnimation?: boolean;
+    /** Theme overrides */
+    theme?: ActivityRingsThemeOverrides;
+    /** Development and debugging props */
+    showValidationWarnings?: boolean;
+}
+export declare const ACTIVITY_RINGS_DEFAULTS: {
+    readonly size: 240;
+    readonly strokeWidth: 14;
+    readonly gap: 4;
+    readonly showAnimation: true;
+    readonly variant: "default";
+};