@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,20 @@
+const thinkingIndicatorTheme = {
+    baseStyle: "inline-flex items-center gap-2",
+    labelStyle: "text-[var(--color-text-muted)] font-medium",
+    dotsContainerStyle: "inline-flex items-center gap-1",
+    dotStyle: "rounded-full bg-[var(--color-text-muted)]",
+    sizes: {
+        sm: {
+            container: "py-1",
+            dot: "size-1",
+            label: "text-xs",
+        },
+        md: {
+            container: "py-1",
+            dot: "size-1.5",
+            label: "text-sm",
+        },
+    },
+};
+
+export { thinkingIndicatorTheme };

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

@@ -0,0 +1,67 @@
+import { ReactNode } from "react";
+/**
+ * ThinkingIndicator component props
+ */
+export interface ThinkingIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether the indicator is visible
+     * @default true
+     */
+    visible?: boolean;
+    /**
+     * Custom label text
+     * @default "AI is thinking"
+     */
+    label?: string;
+    /**
+     * Whether to show the label text
+     * @default true
+     */
+    showLabel?: boolean;
+    /**
+     * Size variant
+     * @default "md"
+     */
+    size?: ThinkingIndicatorSize;
+    /**
+     * Custom icon to display instead of dots
+     */
+    icon?: ReactNode;
+    /**
+     * Additional className for the container
+     */
+    className?: string;
+    /**
+     * Theme overrides
+     */
+    theme?: ThinkingIndicatorThemeOverrides;
+}
+/**
+ * Size variants
+ */
+export type ThinkingIndicatorSize = "sm" | "md";
+/**
+ * Theme configuration
+ */
+export interface ThinkingIndicatorTheme {
+    baseStyle: string;
+    labelStyle: string;
+    dotsContainerStyle: string;
+    dotStyle: string;
+    sizes: Record<ThinkingIndicatorSize, ThinkingIndicatorSizeConfig>;
+}
+export interface ThinkingIndicatorSizeConfig {
+    container: string;
+    dot: string;
+    label: string;
+}
+/**
+ * Theme overrides
+ */
+export interface ThinkingIndicatorThemeOverrides {
+    baseStyle?: string;
+    labelStyle?: string;
+    dotsContainerStyle?: string;
+    dotStyle?: string;
+    sizes?: Partial<Record<ThinkingIndicatorSize, Partial<ThinkingIndicatorSizeConfig>>>;
+}

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

@@ -0,0 +1,3 @@
+export { ThinkingIndicator } from "./ThinkingIndicator";
+export { thinkingIndicatorTheme } from "./ThinkingIndicator.theme";
+export type { ThinkingIndicatorProps, ThinkingIndicatorSize, ThinkingIndicatorTheme, ThinkingIndicatorThemeOverrides, ThinkingIndicatorSizeConfig, } from "./ThinkingIndicator.types";

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { TokenCounterProps } from "./TokenCounter.types";
+/**
+ * TokenCounter - Real-time token usage display with cost estimation
+ *
+ * Estimates token count from text using a word-based heuristic.
+ * Supports multiple AI models with their specific pricing.
+ *
+ * @example
+ * ```tsx
+ * <TokenCounter text={inputValue} model="gpt-4" />
+ *
+ * <TokenCounter
+ *   text={inputValue}
+ *   model="claude-3-sonnet"
+ *   showCost
+ *   maxTokens={4000}
+ * />
+ * ```
+ */
+export declare const TokenCounter: React.ForwardRefExoticComponent<TokenCounterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ai/TokenCounter/TokenCounter.js

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { tokenCounterTheme } from './TokenCounter.theme.js';
+import { MODEL_CONFIGS, estimateTokens, calculateCost, formatTokenCount, formatCost } from './tokenUtils.js';
+import { cn } from '../../../utils/cn.js';
+import { CircleStackIcon } from '@heroicons/react/16/solid';
+
+/**
+ * TokenCounter - Real-time token usage display with cost estimation
+ *
+ * Estimates token count from text using a word-based heuristic.
+ * Supports multiple AI models with their specific pricing.
+ *
+ * @example
+ * ```tsx
+ * <TokenCounter text={inputValue} model="gpt-4" />
+ *
+ * <TokenCounter
+ *   text={inputValue}
+ *   model="claude-3-sonnet"
+ *   showCost
+ *   maxTokens={4000}
+ * />
+ * ```
+ */
+const TokenCounter = React__default.forwardRef(({ text = "", tokens: providedTokens, model = "gpt-4", maxTokens, showCost = false, costPer1kTokens, size = "md", format = "compact", icon, className, theme: customTheme = {}, ...props }, ref) => {
+    var _a;
+    // Get model config
+    const modelConfig = MODEL_CONFIGS[model];
+    const effectiveMaxTokens = maxTokens || modelConfig.maxTokens;
+    const effectiveCostPer1k = costPer1kTokens !== null && costPer1kTokens !== void 0 ? costPer1kTokens : modelConfig.costPer1kTokens;
+    // Calculate token count
+    const tokenCount = useMemo(() => {
+        if (providedTokens !== undefined)
+            return providedTokens;
+        return estimateTokens(text);
+    }, [text, providedTokens]);
+    // Calculate cost
+    const cost = useMemo(() => {
+        return calculateCost(tokenCount, effectiveCostPer1k);
+    }, [tokenCount, effectiveCostPer1k]);
+    // Progress percentage
+    const progressPercent = Math.min((tokenCount / effectiveMaxTokens) * 100, 100);
+    const isOverLimit = tokenCount > effectiveMaxTokens;
+    // Merge theme
+    const sizeConfig = {
+        ...tokenCounterTheme.sizes[size],
+        ...(_a = customTheme.sizes) === null || _a === void 0 ? void 0 : _a[size],
+    };
+    const baseStyle = customTheme.baseStyle || tokenCounterTheme.baseStyle;
+    const iconStyle = customTheme.iconStyle || tokenCounterTheme.iconStyle;
+    const countStyle = customTheme.countStyle || tokenCounterTheme.countStyle;
+    const labelStyle = customTheme.labelStyle || tokenCounterTheme.labelStyle;
+    const costStyle = customTheme.costStyle || tokenCounterTheme.costStyle;
+    const progressStyle = customTheme.progressStyle || tokenCounterTheme.progressStyle;
+    const progressBarStyle = customTheme.progressBarStyle || tokenCounterTheme.progressBarStyle;
+    return (jsxs("div", { ref: ref, className: cn(baseStyle, sizeConfig.container, className), ...props, children: [icon || jsx(CircleStackIcon, { className: cn(iconStyle, sizeConfig.icon) }), jsx("span", { className: cn(countStyle, sizeConfig.text, isOverLimit && "text-[var(--color-danger)]"), children: formatTokenCount(tokenCount) }), maxTokens && format === "detailed" && (jsxs("span", { className: cn(labelStyle, sizeConfig.text), children: ["/ ", formatTokenCount(effectiveMaxTokens)] })), jsx("span", { className: cn(labelStyle, sizeConfig.text), children: "tokens" }), showCost && (jsxs("span", { className: cn(costStyle, sizeConfig.text), children: ["(", formatCost(cost), ")"] })), format === "detailed" && maxTokens && (jsx("div", { className: cn(progressStyle, "w-16 ml-2"), children: jsx("div", { className: cn(progressBarStyle, isOverLimit && "bg-[var(--color-danger)]"), style: { width: `${progressPercent}%` } }) }))] }));
+});
+TokenCounter.displayName = "TokenCounter";
+
+export { TokenCounter };

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

@@ -0,0 +1,2 @@
+import { TokenCounterTheme } from "./TokenCounter.types";
+export declare const tokenCounterTheme: TokenCounterTheme;

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

@@ -0,0 +1,28 @@
+const tokenCounterTheme = {
+    baseStyle: "inline-flex items-center gap-1",
+    iconStyle: "text-[var(--color-text-muted)]",
+    countStyle: "font-medium text-[var(--color-text-primary)]",
+    labelStyle: "text-[var(--color-text-muted)]",
+    costStyle: "text-[var(--color-text-muted)] font-mono",
+    progressStyle: "h-1 bg-[var(--color-background-tertiary)] rounded-full overflow-hidden",
+    progressBarStyle: "h-full bg-[var(--color-primary)] transition-all duration-200",
+    sizes: {
+        sm: {
+            container: "text-xs",
+            icon: "size-3",
+            text: "text-xs",
+        },
+        md: {
+            container: "text-sm",
+            icon: "size-4",
+            text: "text-sm",
+        },
+        lg: {
+            container: "text-base",
+            icon: "size-5",
+            text: "text-base",
+        },
+    },
+};
+
+export { tokenCounterTheme };

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

@@ -0,0 +1,104 @@
+import { ReactNode } from "react";
+/**
+ * TokenCounter component props
+ */
+export interface TokenCounterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The text to count tokens for
+     */
+    text?: string;
+    /**
+     * Token count (if pre-calculated)
+     * Takes precedence over text-based estimation
+     */
+    tokens?: number;
+    /**
+     * AI model for token estimation and display
+     * @default "gpt-4"
+     */
+    model?: TokenCounterModel;
+    /**
+     * Maximum tokens allowed (for progress display)
+     */
+    maxTokens?: number;
+    /**
+     * Whether to show cost estimation
+     * @default false
+     */
+    showCost?: boolean;
+    /**
+     * Custom cost per 1K tokens (input)
+     * If not provided, uses model defaults
+     */
+    costPer1kTokens?: number;
+    /**
+     * Size variant
+     * @default "md"
+     */
+    size?: TokenCounterSize;
+    /**
+     * Display format
+     * @default "compact"
+     */
+    format?: "compact" | "detailed";
+    /**
+     * Custom icon
+     */
+    icon?: ReactNode;
+    /**
+     * Additional className
+     */
+    className?: string;
+    /**
+     * Theme overrides
+     */
+    theme?: TokenCounterThemeOverrides;
+}
+/**
+ * Supported AI models
+ */
+export type TokenCounterModel = "gpt-4" | "gpt-4-turbo" | "gpt-3.5-turbo" | "claude-3-opus" | "claude-3-sonnet" | "claude-3-haiku" | "gemini-pro" | "gemini-ultra" | "custom";
+/**
+ * Size variants
+ */
+export type TokenCounterSize = "sm" | "md" | "lg";
+/**
+ * Model configuration
+ */
+export interface ModelConfig {
+    name: string;
+    shortName: string;
+    costPer1kTokens: number;
+    maxTokens: number;
+}
+/**
+ * Theme configuration
+ */
+export interface TokenCounterTheme {
+    baseStyle: string;
+    iconStyle: string;
+    countStyle: string;
+    labelStyle: string;
+    costStyle: string;
+    progressStyle: string;
+    progressBarStyle: string;
+    sizes: Record<TokenCounterSize, TokenCounterSizeConfig>;
+}
+export interface TokenCounterSizeConfig {
+    container: string;
+    icon: string;
+    text: string;
+}
+/**
+ * Theme overrides
+ */
+export interface TokenCounterThemeOverrides {
+    baseStyle?: string;
+    iconStyle?: string;
+    countStyle?: string;
+    labelStyle?: string;
+    costStyle?: string;
+    progressStyle?: string;
+    progressBarStyle?: string;
+    sizes?: Partial<Record<TokenCounterSize, Partial<TokenCounterSizeConfig>>>;
+}

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

@@ -0,0 +1,4 @@
+export { TokenCounter } from "./TokenCounter";
+export { tokenCounterTheme } from "./TokenCounter.theme";
+export { MODEL_CONFIGS, estimateTokens, calculateCost, formatCost, formatTokenCount, } from "./tokenUtils";
+export type { TokenCounterProps, TokenCounterModel, TokenCounterSize, TokenCounterTheme, TokenCounterThemeOverrides, TokenCounterSizeConfig, ModelConfig, } from "./TokenCounter.types";

package/dist/components/ai/TokenCounter/tokenUtils.d.ts

@@ -0,0 +1,23 @@
+import { ModelConfig, TokenCounterModel } from "./TokenCounter.types";
+/**
+ * Model configurations with pricing (as of 2024)
+ */
+export declare const MODEL_CONFIGS: Record<TokenCounterModel, ModelConfig>;
+/**
+ * Estimate token count from text
+ * Uses a simple word-based heuristic (1 token ≈ 0.75 words for English)
+ * This is an approximation - actual tokenization varies by model
+ */
+export declare const estimateTokens: (text: string) => number;
+/**
+ * Calculate cost based on token count
+ */
+export declare const calculateCost: (tokens: number, costPer1kTokens: number) => number;
+/**
+ * Format cost for display
+ */
+export declare const formatCost: (cost: number) => string;
+/**
+ * Format token count for display
+ */
+export declare const formatTokenCount: (tokens: number) => string;

package/dist/components/ai/TokenCounter/tokenUtils.js

@@ -0,0 +1,108 @@
+/**
+ * Model configurations with pricing (as of 2024)
+ */
+const MODEL_CONFIGS = {
+    "gpt-4": {
+        name: "GPT-4",
+        shortName: "GPT-4",
+        costPer1kTokens: 0.03,
+        maxTokens: 8192,
+    },
+    "gpt-4-turbo": {
+        name: "GPT-4 Turbo",
+        shortName: "GPT-4T",
+        costPer1kTokens: 0.01,
+        maxTokens: 128000,
+    },
+    "gpt-3.5-turbo": {
+        name: "GPT-3.5 Turbo",
+        shortName: "GPT-3.5",
+        costPer1kTokens: 0.0005,
+        maxTokens: 16385,
+    },
+    "claude-3-opus": {
+        name: "Claude 3 Opus",
+        shortName: "Opus",
+        costPer1kTokens: 0.015,
+        maxTokens: 200000,
+    },
+    "claude-3-sonnet": {
+        name: "Claude 3.5 Sonnet",
+        shortName: "Sonnet",
+        costPer1kTokens: 0.003,
+        maxTokens: 200000,
+    },
+    "claude-3-haiku": {
+        name: "Claude 3 Haiku",
+        shortName: "Haiku",
+        costPer1kTokens: 0.00025,
+        maxTokens: 200000,
+    },
+    "gemini-pro": {
+        name: "Gemini Pro",
+        shortName: "Gemini",
+        costPer1kTokens: 0.00025,
+        maxTokens: 32000,
+    },
+    "gemini-ultra": {
+        name: "Gemini Ultra",
+        shortName: "Ultra",
+        costPer1kTokens: 0.0025,
+        maxTokens: 32000,
+    },
+    custom: {
+        name: "Custom",
+        shortName: "Custom",
+        costPer1kTokens: 0,
+        maxTokens: 4096,
+    },
+};
+/**
+ * Estimate token count from text
+ * Uses a simple word-based heuristic (1 token ≈ 0.75 words for English)
+ * This is an approximation - actual tokenization varies by model
+ */
+const estimateTokens = (text) => {
+    if (!text)
+        return 0;
+    // Remove extra whitespace and split into words
+    const words = text.trim().split(/\s+/).filter(Boolean);
+    // Rough estimation: 1 token ≈ 0.75 words (or 4 characters)
+    // This is a common approximation for GPT models
+    const wordBasedEstimate = Math.ceil(words.length / 0.75);
+    const charBasedEstimate = Math.ceil(text.length / 4);
+    // Use the average of both methods for better accuracy
+    return Math.ceil((wordBasedEstimate + charBasedEstimate) / 2);
+};
+/**
+ * Calculate cost based on token count
+ */
+const calculateCost = (tokens, costPer1kTokens) => {
+    return (tokens / 1000) * costPer1kTokens;
+};
+/**
+ * Format cost for display
+ */
+const formatCost = (cost) => {
+    if (cost < 0.01) {
+        return `$${cost.toFixed(4)}`;
+    }
+    if (cost < 0.1) {
+        return `$${cost.toFixed(3)}`;
+    }
+    return `$${cost.toFixed(2)}`;
+};
+/**
+ * Format token count for display
+ */
+const formatTokenCount = (tokens) => {
+    if (tokens >= 1000000) {
+        return `${(tokens / 1000000).toFixed(1)}M`;
+    }
+    if (tokens >= 1000) {
+        return `${(tokens / 1000).toFixed(1)}K`;
+    }
+    return tokens.toString();
+};
+
+export { MODEL_CONFIGS, calculateCost, estimateTokens, formatCost, formatTokenCount };

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

@@ -0,0 +1,19 @@
+export { Message, messageTheme } from "../core/Message";
+export type { MessageProps, MessageRole, MessageVariant, MessageAvatarProps, MessageTheme, MessageThemeOverrides, } from "../core/Message";
+export { MessageHistory, messageHistoryTheme } from "./MessageHistory";
+export type { MessageHistoryProps, ChatMessageData, MessageHistoryTheme, MessageHistoryThemeOverrides, } from "./MessageHistory";
+export { PromptInput, promptInputTheme } from "./PromptInput";
+export type { PromptInputProps, PromptInputState, ModelOption, PromptInputTheme, PromptInputThemeOverrides, } from "./PromptInput";
+export { ThinkingIndicator, thinkingIndicatorTheme } from "./ThinkingIndicator";
+export type { ThinkingIndicatorProps, ThinkingIndicatorSize, ThinkingIndicatorTheme, ThinkingIndicatorThemeOverrides, } from "./ThinkingIndicator";
+export { TokenCounter, tokenCounterTheme, estimateTokens, calculateCost, formatCost, formatTokenCount, MODEL_CONFIGS, } from "./TokenCounter";
+export type { TokenCounterProps, TokenCounterModel, TokenCounterSize, TokenCounterTheme, TokenCounterThemeOverrides, ModelConfig, } from "./TokenCounter";
+export { PromptSuggestion, promptSuggestionTheme } from "./PromptSuggestions";
+export type { PromptSuggestionProps, PromptSuggestionTheme, } from "./PromptSuggestions";
+export { StreamingResponse, ErrorDisplay, MarkdownRenderer, AnimatedText, StreamingCursor, streamingResponseTheme, tokenFadeIn, tokenTransition, blockSlideIn, blockTransition, cursorPulse, staggerContainer, } from "./StreamingResponse";
+export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, AnimatedTextProps, StreamingCursorProps, MarkdownRendererProps, } from "./StreamingResponse";
+export { CodeBlock, codeBlockTheme } from "./CodeBlock";
+export type { CodeBlockProps, CodeBlockLanguage, CodeBlockTheme, CodeBlockThemeOverrides, } from "./CodeBlock";
+export { ApprovalCard } from "./ApprovalCard";
+export type { ApprovalCardProps, ApprovalRiskLevel, } from "./ApprovalCard";
+export { approvalCardTheme } from "./ApprovalCard/ApprovalCard.theme";

package/dist/components/ai/index.js

@@ -0,0 +1,25 @@
+export { Message } from '../core/Message/Message.js';
+export { messageTheme } from '../core/Message/Message.theme.js';
+import '../core/Message/TypeWriter.js';
+export { MessageHistory } from './MessageHistory/MessageHistory.js';
+export { messageHistoryTheme } from './MessageHistory/MessageHistory.theme.js';
+export { PromptInput } from './PromptInput/PromptInput.js';
+export { promptInputTheme } from './PromptInput/PromptInput.theme.js';
+export { ThinkingIndicator } from './ThinkingIndicator/ThinkingIndicator.js';
+export { thinkingIndicatorTheme } from './ThinkingIndicator/ThinkingIndicator.theme.js';
+export { TokenCounter } from './TokenCounter/TokenCounter.js';
+export { tokenCounterTheme } from './TokenCounter/TokenCounter.theme.js';
+export { MODEL_CONFIGS, calculateCost, estimateTokens, formatCost, formatTokenCount } from './TokenCounter/tokenUtils.js';
+export { PromptSuggestion } from './PromptSuggestions/PromptSuggestion.js';
+export { promptSuggestionTheme } from './PromptSuggestions/PromptSuggestion.theme.js';
+export { StreamingResponse } from './StreamingResponse/StreamingResponse.js';
+export { ErrorDisplay } from './StreamingResponse/ErrorDisplay.js';
+export { MarkdownRenderer } from './StreamingResponse/MarkdownRenderer.js';
+export { AnimatedText } from './StreamingResponse/AnimatedText.js';
+export { StreamingCursor } from './StreamingResponse/StreamingCursor.js';
+export { streamingResponseTheme } from './StreamingResponse/StreamingResponse.theme.js';
+export { blockSlideIn, blockTransition, cursorPulse, staggerContainer, tokenFadeIn, tokenTransition } from './StreamingResponse/StreamingResponse.animations.js';
+export { CodeBlock } from './CodeBlock/CodeBlock.js';
+export { codeBlockTheme } from './CodeBlock/CodeBlock.theme.js';
+export { ApprovalCard } from './ApprovalCard/ApprovalCard.js';
+export { approvalCardTheme } from './ApprovalCard/ApprovalCard.theme.js';

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>;