@app-studio/web 0.8.74 → 0.8.77

package/dist/components/Chart/Chart/Chart.style.d.ts

@@ -0,0 +1,20 @@
+import { ViewProps } from 'app-studio';
+export declare const DEFAULT_COLORS: string[];
+export declare const ChartContainerStyles: ViewProps;
+export declare const ChartTitleStyles: ViewProps;
+export declare const ChartLegendStyles: ViewProps;
+export declare const LegendItemStyles: ViewProps;
+export declare const LegendColorStyles: ViewProps;
+export declare const LegendTextStyles: ViewProps;
+export declare const TooltipStyles: ViewProps;
+export declare const GridStyles: ViewProps;
+export declare const AxisStyles: ViewProps;
+export declare const AxisLabelStyles: ViewProps;
+export declare const BarStyles: ViewProps;
+export declare const LineStyles: ViewProps;
+export declare const PointStyles: ViewProps;
+export declare const PieSliceStyles: ViewProps;
+export declare const OverlayBaseStyles: ViewProps;
+export declare const LoadingOverlayStyles: ViewProps;
+export declare const ErrorOverlayStyles: ViewProps;
+export declare const NoDataOverlayStyles: ViewProps;

package/dist/components/Chart/Chart/Chart.type.d.ts

@@ -0,0 +1,36 @@
+import { ViewProps } from 'app-studio';
+export declare type ChartType = 'bar' | 'line' | 'pie' | 'donut' | 'area';
+export interface ChartDataPoint {
+    label: string;
+    value: number;
+    color?: string;
+}
+export interface ChartSeries {
+    name: string;
+    data: number[];
+    color?: string;
+}
+export interface ChartData {
+    labels: string[];
+    series: ChartSeries[];
+}
+export interface ChartStyles {
+    container?: ViewProps;
+    chart?: ViewProps;
+    legend?: ViewProps;
+    legendItem?: ViewProps;
+    tooltip?: ViewProps;
+    axis?: ViewProps;
+    grid?: ViewProps;
+    bar?: ViewProps;
+    line?: ViewProps;
+    point?: ViewProps;
+    pie?: ViewProps;
+    area?: ViewProps;
+    axisLabel?: ViewProps;
+    axisLine?: ViewProps;
+    axisTick?: ViewProps;
+    loadingOverlay?: ViewProps;
+    errorOverlay?: ViewProps;
+    noDataOverlay?: ViewProps;
+}

package/dist/components/Chart/Chart/Chart.view.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ChartProps } from './Chart.props';
+export declare const ChartView: React.FC<ChartProps>;

package/dist/components/Chart/Chart/ChartColors.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Chart Colors
+ *
+ * Defines a consistent color scheme for all chart examples.
+ * These colors should be used in the same order across all chart types
+ * to ensure consistency between the charts and their legends.
+ */
+export declare const CHART_COLORS: {
+    blue: string;
+    green: string;
+    purple: string;
+    orange: string;
+    red: string;
+    teal: string;
+    pink: string;
+    indigo: string;
+    yellow: string;
+    cyan: string;
+};
+export declare const DEFAULT_CHART_COLORS: string[];

package/dist/components/Chart/Chart/LineChart.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ChartData } from './Chart.type';
+interface LineChartProps {
+    data: ChartData;
+    width: number;
+    height: number;
+    animationProgress: number;
+    showGrid?: boolean;
+    onPointClick?: (seriesName: string, index: number) => void;
+    showTooltip: (x: number, y: number, content: string) => void;
+    hideTooltip: () => void;
+    views?: any;
+}
+export declare const LineChart: React.FC<LineChartProps>;
+export {};

package/dist/components/Chart/Chart/PieChart.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ChartDataPoint } from './Chart.type';
+interface PieChartProps {
+    dataPoints: ChartDataPoint[];
+    width: number;
+    height: number;
+    animationProgress: number;
+    isDonut?: boolean;
+    onSliceClick?: (dataPoint: ChartDataPoint, index: number) => void;
+    showTooltip: (x: number, y: number, content: string) => void;
+    hideTooltip: () => void;
+    views?: any;
+}
+export declare const PieChart: React.FC<PieChartProps>;
+export {};

package/dist/components/Chart/Chart.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ChartProps } from './Chart/Chart.props';
+export declare const Chart: React.FC<ChartProps>;

package/dist/components/Chart/examples/area.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const AreaChartDemo: () => React.JSX.Element;

package/dist/components/Chart/examples/bar.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const BarChartDemo: () => React.JSX.Element;

package/dist/components/Chart/examples/custom.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CustomChartDemo: () => React.JSX.Element;

package/dist/components/Chart/examples/designSystem.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Chart Examples - Design System
+ *
+ * Showcases the Chart component following the design guidelines:
+ * - Typography: Inter/Geist font, specific sizes/weights
+ * - Spacing: 4px grid system
+ * - Colors: Neutral palette with semantic colors
+ * - Rounded corners: Consistent border radius
+ * - Transitions: Subtle animations
+ */
+import React from 'react';
+export declare const DesignSystemCharts: () => React.JSX.Element;

package/dist/components/Chart/examples/donut.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DonutChartDemo: () => React.JSX.Element;

package/dist/components/Chart/examples/index.d.ts

@@ -0,0 +1,8 @@
+export * from './bar';
+export * from './line';
+export * from './area';
+export * from './pie';
+export * from './donut';
+export * from './custom';
+export * from './states';
+export * from './designSystem';

package/dist/components/Chart/examples/line.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const LineChartDemo: () => React.JSX.Element;

package/dist/components/Chart/examples/pie.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const PieChartDemo: () => React.JSX.Element;

package/dist/components/Chart/examples/states.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ChartStatesDemo: () => React.JSX.Element;

package/dist/components/Chat/AIResponseDisplay/AIResponseDisplay/AIResponseDisplay.props.d.ts

@@ -0,0 +1,40 @@
+/**
+ * AIResponseDisplay Props
+ *
+ * Defines the properties for the AIResponseDisplay component, which renders
+ * AI-generated content with support for formatting, code blocks, and more.
+ */
+import { ViewProps } from 'app-studio';
+import { AIResponseDisplayStyles } from './AIResponseDisplay.type';
+export interface AIResponseDisplayProps extends ViewProps {
+    /**
+     * Content to display - can include markdown-like formatting
+     * such as code blocks, inline code, and links
+     */
+    content: string;
+    /**
+     * Whether to enable syntax highlighting for code blocks
+     * @default true
+     */
+    enableSyntaxHighlighting?: boolean;
+    /**
+     * Whether to enable citations (e.g., [1], [2])
+     * @default true
+     */
+    enableCitations?: boolean;
+    /**
+     * Whether to enable math rendering (LaTeX-like syntax)
+     * @default false
+     */
+    enableMath?: boolean;
+    /**
+     * Whether to enable automatic link detection and formatting
+     * @default true
+     */
+    enableLinkDetection?: boolean;
+    /**
+     * Custom styles for different parts of the component
+     * Follows the design system with consistent spacing, typography, and colors
+     */
+    styles?: AIResponseDisplayStyles;
+}

package/dist/components/Chat/AIResponseDisplay/AIResponseDisplay/AIResponseDisplay.style.d.ts

@@ -0,0 +1,10 @@
+/**
+ * AIResponseDisplay Styles
+ */
+import { ViewProps } from 'app-studio';
+export declare const containerStyles: ViewProps;
+export declare const textStyles: ViewProps;
+export declare const codeBlockStyles: ViewProps;
+export declare const inlineCodeStyles: ViewProps;
+export declare const citationStyles: ViewProps;
+export declare const linkStyles: ViewProps;

package/dist/components/Chat/AIResponseDisplay/AIResponseDisplay/AIResponseDisplay.type.d.ts

@@ -0,0 +1,23 @@
+/**
+ * AIResponseDisplay Types
+ *
+ * Defines the types used by the AIResponseDisplay component
+ */
+import { ViewProps } from 'app-studio';
+/**
+ * Styles for different parts of the AIResponseDisplay component
+ */
+export interface AIResponseDisplayStyles {
+    /** Styles for the main container */
+    container?: ViewProps;
+    /** Styles for the text content */
+    text?: ViewProps;
+    /** Styles for code blocks */
+    codeBlock?: ViewProps;
+    /** Styles for citations */
+    citation?: ViewProps;
+    /** Styles for inline code */
+    inlineCode?: ViewProps;
+    /** Styles for links */
+    link?: ViewProps;
+}

package/dist/components/Chat/AIResponseDisplay/AIResponseDisplay/AIResponseDisplay.view.d.ts

@@ -0,0 +1,9 @@
+/**
+ * AIResponseDisplay View
+ *
+ * A component for displaying AI-generated responses with support for
+ * code blocks, inline code, links, and other formatting.
+ */
+import React from 'react';
+import { AIResponseDisplayProps } from './AIResponseDisplay.props';
+export declare const AIResponseDisplayView: React.FC<AIResponseDisplayProps>;

package/dist/components/Chat/AIResponseDisplay/AIResponseDisplay.d.ts

@@ -0,0 +1,10 @@
+/**
+ * AIResponseDisplay Component
+ *
+ * A component for displaying AI-generated responses with support for
+ * code blocks, inline code, and other formatting.
+ */
+import React from 'react';
+import { AIResponseDisplayProps } from './AIResponseDisplay/AIResponseDisplay.props';
+export declare const AIResponseDisplay: React.FC<AIResponseDisplayProps>;
+export type { AIResponseDisplayProps } from './AIResponseDisplay/AIResponseDisplay.props';

package/dist/components/Chat/AIResponseDisplay/examples/basic.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Basic AIResponseDisplay Example
+ */
+import React from 'react';
+export declare const BasicAIResponseDisplay: () => React.JSX.Element;

package/dist/components/Chat/AIResponseDisplay/examples/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * AIResponseDisplay Examples
+ */
+export * from './basic';

package/dist/components/Chat/ChatInterface/ChatInterface/ChatInterface.props.d.ts

@@ -0,0 +1,56 @@
+/**
+ * ChatInterface Props
+ */
+/// <reference types="react" />
+import { ViewProps } from 'app-studio';
+import { Message, ChatInterfaceStyles } from './ChatInterface.type';
+export interface ChatInterfaceProps extends ViewProps {
+    /**
+     * Array of messages to display in the chat
+     */
+    messages: Message[];
+    /**
+     * Callback function when a new message is submitted
+     */
+    onSubmit?: (message: string) => void;
+    /**
+     * Callback function when a message is edited
+     */
+    onEdit?: (id: string, newContent: string) => void;
+    /**
+     * Callback function when a message is deleted
+     */
+    onDelete?: (id: string) => void;
+    /**
+     * Whether to show the loading indicator
+     */
+    isLoading?: boolean;
+    /**
+     * Placeholder text for the input field
+     */
+    placeholder?: string;
+    /**
+     * Whether to enable file uploads
+     */
+    enableFileUpload?: boolean;
+    /**
+     * Whether to enable voice input
+     */
+    enableVoiceInput?: boolean;
+    /**
+     * Whether to enable AI suggestions
+     */
+    enableSuggestions?: boolean;
+    /**
+     * URL of the background image
+     */
+    backgroundImageUrl?: string;
+    /**
+     * Custom styles for the component
+     */
+    styles?: ChatInterfaceStyles;
+    /**
+     * Children components
+     */
+    children?: React.ReactNode;
+}

package/dist/components/Chat/ChatInterface/ChatInterface/ChatInterface.state.d.ts

@@ -0,0 +1,12 @@
+/**
+ * ChatInterface State
+ */
+/// <reference types="react" />
+export declare const useChatInterfaceState: (initialMessages?: never[]) => {
+    inputValue: string;
+    isSubmitting: boolean;
+    messagesEndRef: import("react").RefObject<HTMLDivElement>;
+    handleInputChange: (value: string) => void;
+    handleSubmit: (callback?: ((message: string) => void) | undefined) => void;
+    setInputValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+};

package/dist/components/Chat/ChatInterface/ChatInterface/ChatInterface.style.d.ts

@@ -0,0 +1,10 @@
+/**
+ * ChatInterface Styles
+ */
+import { ViewProps } from 'app-studio';
+export declare const defaultContainerStyles: ViewProps;
+export declare const defaultMessagesContainerStyles: ViewProps;
+export declare const defaultInputContainerStyles: ViewProps;
+export declare const defaultControlsContainerStyles: ViewProps;
+export declare const backgroundImageStyles: ViewProps;
+export declare const backgroundOverlayStyles: ViewProps;

package/dist/components/Chat/ChatInterface/ChatInterface/ChatInterface.type.d.ts

@@ -0,0 +1,19 @@
+/**
+ * ChatInterface Types
+ */
+import { ViewProps } from 'app-studio';
+export declare type MessageType = 'user' | 'assistant' | 'system' | 'error';
+export interface Message {
+    id: string;
+    type: MessageType;
+    content: string;
+    timestamp: Date;
+    isLoading?: boolean;
+    metadata?: Record<string, any>;
+}
+export interface ChatInterfaceStyles {
+    container?: ViewProps;
+    messagesContainer?: ViewProps;
+    inputContainer?: ViewProps;
+    controlsContainer?: ViewProps;
+}

package/dist/components/Chat/ChatInterface/ChatInterface/ChatInterface.view.d.ts

@@ -0,0 +1,14 @@
+/**
+ * ChatInterface View
+ */
+import React from 'react';
+import { ChatInterfaceProps } from './ChatInterface.props';
+interface Props extends ChatInterfaceProps {
+    inputValue: string;
+    isSubmitting: boolean;
+    messagesEndRef: React.RefObject<HTMLDivElement>;
+    handleInputChange: (value: string) => void;
+    handleSubmit: () => void;
+}
+export declare const ChatInterfaceView: React.FC<Props>;
+export {};

package/dist/components/Chat/ChatInterface/ChatInterface.d.ts

@@ -0,0 +1,11 @@
+/**
+ * ChatInterface Component
+ *
+ * A comprehensive chat interface for AI applications that includes
+ * message display, user input, and various controls.
+ */
+import React from 'react';
+import { ChatInterfaceProps } from './ChatInterface/ChatInterface.props';
+export declare const ChatInterface: React.FC<ChatInterfaceProps>;
+export type { ChatInterfaceProps } from './ChatInterface/ChatInterface.props';
+export type { Message, MessageType } from './ChatInterface/ChatInterface.type';

package/dist/components/Chat/CodeBlock/CodeBlock/CodeBlock.props.d.ts

@@ -0,0 +1,35 @@
+/**
+ * CodeBlock Props
+ */
+import { ViewProps } from 'app-studio';
+import { CodeBlockStyles } from './CodeBlock.type';
+export interface CodeBlockProps extends ViewProps {
+    /**
+     * Code content to display
+     */
+    code: string;
+    /**
+     * Programming language for syntax highlighting
+     */
+    language?: string;
+    /**
+     * Whether to show line numbers
+     */
+    showLineNumbers?: boolean;
+    /**
+     * Whether to enable syntax highlighting
+     */
+    enableSyntaxHighlighting?: boolean;
+    /**
+     * Whether to show a copy button
+     */
+    showCopyButton?: boolean;
+    /**
+     * Whether to show the language label
+     */
+    showLanguageLabel?: boolean;
+    /**
+     * Custom styles for the component
+     */
+    styles?: CodeBlockStyles;
+}

package/dist/components/Chat/CodeBlock/CodeBlock/CodeBlock.state.d.ts

@@ -0,0 +1,7 @@
+/**
+ * CodeBlock State
+ */
+export declare const useCodeBlockState: () => {
+    isCopied: boolean;
+    copyToClipboard: (text: string) => void;
+};

package/dist/components/Chat/CodeBlock/CodeBlock/CodeBlock.style.d.ts

@@ -0,0 +1,12 @@
+/**
+ * CodeBlock Styles
+ *
+ * Styles for the CodeBlock component following the design guidelines
+ */
+import { ViewProps } from 'app-studio';
+export declare const containerStyles: ViewProps;
+export declare const headerStyles: ViewProps;
+export declare const contentStyles: ViewProps;
+export declare const footerStyles: ViewProps;
+export declare const copyButtonStyles: ViewProps;
+export declare const languageLabelStyles: ViewProps;

package/dist/components/Chat/CodeBlock/CodeBlock/CodeBlock.type.d.ts

@@ -0,0 +1,11 @@
+/**
+ * CodeBlock Types
+ */
+import { ViewProps } from 'app-studio';
+export interface CodeBlockStyles {
+    container?: ViewProps;
+    header?: ViewProps;
+    content?: ViewProps;
+    footer?: ViewProps;
+    copyButton?: ViewProps;
+}

package/dist/components/Chat/CodeBlock/CodeBlock/CodeBlock.view.d.ts

@@ -0,0 +1,11 @@
+/**
+ * CodeBlock View
+ */
+import React from 'react';
+import { CodeBlockProps } from './CodeBlock.props';
+interface Props extends CodeBlockProps {
+    isCopied: boolean;
+    copyToClipboard: (text: string) => void;
+}
+export declare const CodeBlockView: React.FC<Props>;
+export {};

package/dist/components/Chat/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,10 @@
+/**
+ * CodeBlock Component
+ *
+ * A component for displaying code with syntax highlighting, line numbers,
+ * and a copy button.
+ */
+import React from 'react';
+import { CodeBlockProps } from './CodeBlock/CodeBlock.props';
+export declare const CodeBlock: React.FC<CodeBlockProps>;
+export type { CodeBlockProps } from './CodeBlock/CodeBlock.props';

package/dist/components/Chat/FileUploader/FileUploader/FileUploader.props.d.ts

@@ -0,0 +1,47 @@
+/**
+ * FileUploader Props
+ */
+import { ViewProps } from 'app-studio';
+import { UploadedFile, FileUploaderStyles } from './FileUploader.type';
+export interface FileUploaderProps extends ViewProps {
+    /**
+     * List of uploaded files
+     */
+    files: UploadedFile[];
+    /**
+     * Callback function when files are added
+     */
+    onFilesAdded: (files: File[]) => void;
+    /**
+     * Callback function when a file is removed
+     */
+    onFileRemove: (fileId: string) => void;
+    /**
+     * Callback function when a file is retried after an error
+     */
+    onFileRetry?: (fileId: string) => void;
+    /**
+     * Maximum number of files allowed
+     */
+    maxFiles?: number;
+    /**
+     * Maximum file size in bytes
+     */
+    maxSize?: number;
+    /**
+     * Accepted file types
+     */
+    accept?: string;
+    /**
+     * Whether to allow multiple files
+     */
+    multiple?: boolean;
+    /**
+     * Whether the uploader is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Custom styles for the component
+     */
+    styles?: FileUploaderStyles;
+}

package/dist/components/Chat/FileUploader/FileUploader/FileUploader.state.d.ts

@@ -0,0 +1,15 @@
+/**
+ * FileUploader State
+ */
+/// <reference types="react" />
+export declare const useFileUploaderState: (onFilesAdded: (files: File[]) => void, maxFiles: number, maxSize: number, accept: string) => {
+    isDragging: boolean;
+    fileInputRef: import("react").RefObject<HTMLInputElement>;
+    handleDragEnter: (e: React.DragEvent) => void;
+    handleDragLeave: (e: React.DragEvent) => void;
+    handleDragOver: (e: React.DragEvent) => void;
+    handleDrop: (e: React.DragEvent) => void;
+    handleFileInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    openFileDialog: () => void;
+    formatBytes: (bytes: number, decimals?: number) => string;
+};

package/dist/components/Chat/FileUploader/FileUploader/FileUploader.style.d.ts

@@ -0,0 +1,15 @@
+/**
+ * FileUploader Styles
+ */
+import { ViewProps } from 'app-studio';
+export declare const containerStyles: ViewProps;
+export declare const dropzoneStyles: (isDragging: boolean) => ViewProps;
+export declare const fileListStyles: ViewProps;
+export declare const fileItemStyles: ViewProps;
+export declare const fileIconStyles: (fileType: string) => ViewProps;
+export declare const fileInfoStyles: ViewProps;
+export declare const fileNameStyles: ViewProps;
+export declare const fileSizeStyles: ViewProps;
+export declare const fileActionsStyles: ViewProps;
+export declare const progressBarContainerStyles: ViewProps;
+export declare const progressBarStyles: (progress: number) => ViewProps;

package/dist/components/Chat/FileUploader/FileUploader/FileUploader.type.d.ts

@@ -0,0 +1,24 @@
+/**
+ * FileUploader Types
+ */
+import { ViewProps } from 'app-studio';
+export interface UploadedFile {
+    id: string;
+    name: string;
+    size: number;
+    type: string;
+    url?: string;
+    file: File;
+    progress?: number;
+    error?: string;
+    isUploading?: boolean;
+}
+export interface FileUploaderStyles {
+    container?: ViewProps;
+    dropzone?: ViewProps;
+    fileList?: ViewProps;
+    fileItem?: ViewProps;
+    fileInfo?: ViewProps;
+    fileActions?: ViewProps;
+    progressBar?: ViewProps;
+}

package/dist/components/Chat/FileUploader/FileUploader/FileUploader.view.d.ts

@@ -0,0 +1,18 @@
+/**
+ * FileUploader View
+ */
+import React from 'react';
+import { FileUploaderProps } from './FileUploader.props';
+interface Props extends FileUploaderProps {
+    isDragging: boolean;
+    fileInputRef: React.RefObject<HTMLInputElement>;
+    handleDragEnter: (e: React.DragEvent) => void;
+    handleDragLeave: (e: React.DragEvent) => void;
+    handleDragOver: (e: React.DragEvent) => void;
+    handleDrop: (e: React.DragEvent) => void;
+    handleFileInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    openFileDialog: () => void;
+    formatBytes: (bytes: number, decimals?: number) => string;
+}
+export declare const FileUploaderView: React.FC<Props>;
+export {};

package/dist/components/Chat/FileUploader/FileUploader.d.ts

@@ -0,0 +1,11 @@
+/**
+ * FileUploader Component
+ *
+ * A component for uploading files with drag and drop support, progress tracking,
+ * and file validation.
+ */
+import React from 'react';
+import { FileUploaderProps } from './FileUploader/FileUploader.props';
+export declare const FileUploader: React.FC<FileUploaderProps>;
+export type { FileUploaderProps } from './FileUploader/FileUploader.props';
+export type { UploadedFile } from './FileUploader/FileUploader.type';