@app-studio/web 0.9.86 → 0.9.89

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@app-studio/web",
-  "version": "0.9.86",
-  "main": "dist/index.js",
-  "typings": "dist/components/index.d.ts",
+  "version": "0.9.89",
+  "main": "dist/web.cjs.js",
+  "typings": "dist/index.d.ts",
   "files": [
     "dist",
     "docs"
@@ -11,12 +11,12 @@
     "node": ">=10"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build:web": "react-scripts build",
-    "build": "tsdx build --format cjs,esm,umd --entry ./src/components/index.tsx --tsconfig tsconfig.build.json",
-    "test": "react-scripts test",
-    "test:unwatch": "react-scripts test --watchAll=false",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "build:web": "vite build",
+    "build": "vite build --config vite.lib.config.ts",
+    "test": "vitest",
+    "test:unwatch": "vitest run",
+    "preview": "vite preview",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public",
     "styleguide": "styleguidist server",
@@ -77,13 +77,7 @@
       "last 1 safari version"
     ]
   },
-  "dependencies": {
-    "contrast": "^1.0.1",
-    "date-fns": "^2.30.0",
-    "formik": "^2.4.6",
-    "typescript": "^4.9.5",
-    "zustand": "^4.3.8"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@anthropic-ai/sdk": "^0.39.0",
     "@app-studio/react-api": "^0.15.28",
@@ -103,74 +97,75 @@
     "@mdx-js/react": "^3.1.0",
     "@mdxeditor/editor": "^3.21.0",
     "@size-limit/preset-small-lib": "^10.0.2",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.3.1",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.14",
+    "@types/node": "^20.0.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@typescript-eslint/parser": "^5.59.7",
+    "@vitejs/plugin-react": "^4.7.0",
+    "date-fns": "^2.30.0",
     "app-studio": "^0.7.7",
-    "async-mutex": "^0.5.0",
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-named-exports-order": "^0.0.2",
     "babel-plugin-react-require": "^4.0.0",
-    "brotli-webpack-plugin": "^1.1.0",
     "cheerio": "^1.0.0-rc.12",
     "commitlint": "^18.2.0",
-    "compression": "^1.7.4",
-    "compression-webpack-plugin": "^10.0.0",
     "css-loader": "^6.7.4",
     "dotenv": "^16.4.5",
-    "env-cmd": "^10.1.0",
     "eslint": "^8.57.1",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "express": "^4.18.2",
-    "groq-sdk": "^0.17.0",
     "husky": "^8.0.0",
+    "jsdom": "^27.4.0",
     "lighthouse": "^11.6.0",
     "lint-staged": "^13.2.2",
-    "markdown-loader": "^8.0.0",
-    "npm": "^10.5.0",
+    "lucide-react": "^0.562.0",
+    "formik": "^2.4.6",
+    "typescript": "^4.9.5",
+    "zustand": "^4.3.8",
     "openai": "^4.91.1",
     "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^6.11.1",
-    "react-scripts": "^5.0.1",
     "react-test-renderer": "^18.2.0",
     "release-it": "^16.2.1",
     "replicate": "^1.0.1",
-    "router": "^1.3.8",
     "simple-git": "^3.22.0",
     "store": "^2.0.12",
     "tiktoken": "^1.0.20",
     "ts-loader": "^9.4.2",
     "tsc-alias": "^1.8.8",
-    "tsdx": "^0.14.1",
     "tslib": "^2.8.1",
-    "web-vitals": "^2.1.4",
+    "vite": "^5.4.21",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18",
     "webpack": "^5.89.0",
     "webpack-bundle-analyzer": "^4.8.0",
-    "webpack-cli": "^5.1.3",
     "yup": "^1.5.0"
   },
   "peerDependencies": {
     "lucide-react": "*",
-    "react": ">= 17"
+    "react": ">= 17",
+    "react-dom": ">= 17",
+    "app-studio": ">= 0.7",
+    "typescript": ">=4",
+    "zustand": ">=4",
+    "formik": ">=2"
   },
   "size-limit": [
     {
-      "path": "dist/web.cjs.production.min.js",
+      "path": "dist/web.cjs.js",
       "limit": "100 KB"
     },
     {
@@ -178,10 +173,10 @@
       "limit": "100 KB"
     },
     {
-      "path": "dist/web.umd.production.min.js",
+      "path": "dist/web.umd.js",
       "limit": "100 KB"
     }
   ],
   "module": "dist/web.esm.js",
-  "unpkg": "dist/web.umd.production.min.js"
+  "unpkg": "dist/web.umd.js"
 }

package/dist/App.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const App: React.FC;
-export default App;

package/dist/components/Accordion/Accordion/Accordion.props.d.ts

@@ -1,112 +0,0 @@
-import React from 'react';
-import { ViewProps } from 'app-studio';
-import { AccordionStyles, Shape, Variant, AccordionType } from './Accordion.type';
-export interface AccordionProps extends Omit<ViewProps, 'value' | 'defaultValue' | 'onChange'> {
-    /**
-     * The content of the accordion (AccordionItem components)
-     */
-    children: React.ReactNode;
-    /**
-     * Determines whether one or multiple items can be opened at the same time
-     * @default 'single'
-     */
-    type?: AccordionType;
-    /**
-     * The value of the item(s) to be opened when initially rendered (uncontrolled)
-     */
-    defaultValue?: string | string[];
-    /**
-     * The controlled value of the item(s) to be opened
-     */
-    value?: string | string[];
-    /**
-     * Event handler called when the value changes
-     */
-    onValueChange?: (value: string | string[] | undefined) => void;
-    /**
-     * When type is 'single', allows closing the currently open item
-     * @default false
-     */
-    collapsible?: boolean;
-    /**
-     * The shape of the accordion items
-     * @default 'rounded'
-     */
-    shape?: Shape;
-    /**
-     * The visual style variant of the accordion
-     * @default 'default'
-     */
-    variant?: Variant;
-    /**
-     * Custom styles for different parts of the accordion
-     */
-    views?: AccordionStyles;
-}
-export interface AccordionItemProps extends Omit<ViewProps, 'value'> {
-    /**
-     * Unique identifier for the accordion item
-     */
-    value: string;
-    /**
-     * The content of the accordion item
-     */
-    children: React.ReactNode;
-    /**
-     * Whether the accordion item is disabled
-     */
-    isDisabled?: boolean;
-    /**
-     * Custom styles for this specific accordion item
-     */
-    views?: {
-        item?: ViewProps;
-        trigger?: ViewProps;
-        content?: ViewProps;
-        icon?: ViewProps;
-    };
-}
-export interface AccordionTriggerProps extends ViewProps {
-    /**
-     * The content of the accordion trigger
-     */
-    children: React.ReactNode;
-    /**
-     * Custom styles for the trigger
-     */
-    views?: {
-        container?: ViewProps;
-        icon?: ViewProps;
-    };
-    /**
-     * If true, merges props onto the immediate child, useful for custom trigger elements
-     * @default false
-     */
-    asChild?: boolean;
-}
-export interface AccordionContentProps {
-    /**
-     * The content to be displayed when the accordion item is expanded
-     */
-    children: React.ReactNode;
-    /**
-     * Custom styles for the content
-     */
-    views?: {
-        container?: ViewProps;
-    };
-}
-export interface AccordionComponentType extends React.FC<AccordionProps> {
-    /**
-     * Individual accordion item component
-     */
-    Item: React.FC<AccordionItemProps>;
-    /**
-     * Trigger component for accordion items
-     */
-    Trigger: React.FC<AccordionTriggerProps>;
-    /**
-     * Content component for accordion items
-     */
-    Content: React.FC<AccordionContentProps>;
-}

package/dist/components/Accordion/Accordion/Accordion.state.d.ts

@@ -1,9 +0,0 @@
-import { AccordionProps } from './Accordion.props';
-export declare const useAccordionState: ({ type, value: controlledValue, defaultValue, onValueChange, collapsible, }: Pick<AccordionProps, 'type' | 'value' | 'defaultValue' | 'onValueChange' | 'collapsible'>) => {
-    expandedItems: string[];
-    toggleItem: (itemValue: string) => void;
-    isItemExpanded: (itemValue: string) => boolean;
-    type: import("./Accordion.type").AccordionType;
-    collapsible: boolean;
-    baseId: string;
-};

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

@@ -1,12 +0,0 @@
-import { ViewProps } from 'app-studio';
-import { Shape, Variant } from './Accordion.type';
-export declare const AccordionShapes: Record<Shape, ViewProps>;
-export declare const AccordionVariants: Record<Variant, ViewProps>;
-/**
- * Accordion trigger styles matching shadcn/ui patterns
- */
-export declare const AccordionTriggerStyles: ViewProps;
-/**
- * Accordion content styles with smooth animation
- */
-export declare const AccordionContentStyles: ViewProps;

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

@@ -1,38 +0,0 @@
-import { ViewProps } from 'app-studio';
-export declare type Shape = 'square' | 'rounded';
-export declare type Variant = 'default' | 'outline' | 'filled';
-export declare type AccordionType = 'single' | 'multiple';
-export interface AccordionContextType {
-    /**
-     * The currently expanded item IDs
-     */
-    expandedItems: string[];
-    /**
-     * Function to toggle an item's expanded state
-     */
-    toggleItem: (itemId: string) => void;
-    /**
-     * Function to check if an item is expanded
-     */
-    isItemExpanded: (itemId: string) => boolean;
-    /**
-     * Whether the accordion allows multiple items to be expanded
-     */
-    type: AccordionType;
-    /**
-     * Whether the accordion allows all items to be collapsed in single mode
-     */
-    collapsible: boolean;
-    /**
-     * Base ID for generating ARIA attributes
-     */
-    baseId: string;
-}
-export interface AccordionStyles {
-    container?: ViewProps;
-    item?: ViewProps;
-    header?: ViewProps;
-    trigger?: ViewProps;
-    content?: ViewProps;
-    icon?: ViewProps;
-}

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

@@ -1,32 +0,0 @@
-import React from 'react';
-import { ViewProps } from 'app-studio';
-import { AccordionContextType } from './Accordion.type';
-import { AccordionTriggerProps, AccordionContentProps, AccordionItemProps } from './Accordion.props';
-export declare const AccordionProvider: React.FC<{
-    children: React.ReactNode;
-    value: AccordionContextType;
-}>;
-export declare const useAccordionContext: () => AccordionContextType;
-export declare const AccordionItem: React.FC<AccordionItemProps>;
-export declare const AccordionTrigger: React.FC<AccordionTriggerProps & {
-    value?: string;
-    isExpanded?: boolean;
-    isDisabled?: boolean;
-    triggerId?: string;
-    contentId?: string;
-}>;
-export declare const AccordionContent: React.FC<AccordionContentProps & {
-    isExpanded?: boolean;
-    isDisabled?: boolean;
-    triggerId?: string;
-    contentId?: string;
-}>;
-export declare const AccordionView: React.FC<{
-    children: React.ReactNode;
-    shape?: 'square' | 'rounded';
-    variant?: 'default' | 'outline' | 'filled';
-    views?: any;
-    baseId: string;
-    type: 'single' | 'multiple';
-    collapsible: boolean;
-} & ViewProps>;

package/dist/components/Accordion/Accordion.d.ts

@@ -1,2 +0,0 @@
-import { AccordionComponentType } from './Accordion/Accordion.props';
-export declare const Accordion: AccordionComponentType;

package/dist/components/Alert/Alert/Alert.props.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import { ViewProps } from 'app-studio';
-import { AlertStyles, Variant } from './Alert.type';
-export interface AlertProps extends ViewProps {
-    icon?: React.ReactNode;
-    title?: string;
-    description?: string | React.ReactNode;
-    children?: React.ReactNode;
-    variant?: Variant;
-    views?: AlertStyles;
-    /**
-     * Optional theme mode override ('light' or 'dark')
-     * If not provided, the component will use the theme mode from context
-     */
-    themeMode?: 'light' | 'dark';
-}

package/dist/components/Alert/Alert/Alert.state.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const useAlertState: () => {
-    isHovered: boolean;
-    setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
-};

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

@@ -1,28 +0,0 @@
-/**
- * Alert Styles
- *
- * Defines the styles for the Alert 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 { ViewProps } from 'app-studio';
-import { Variant } from './Alert.type';
-/**
- * Get theme styles for different alert variants based on theme mode
- */
-export declare const getThemes: (themeMode: string) => Record<Variant, {
-    container: ViewProps;
-    content: ViewProps;
-    icon: ViewProps;
-}>;
-/**
- * Default themes for backward compatibility
- */
-export declare const Themes: Record<Variant, {
-    container: ViewProps;
-    content: ViewProps;
-    icon: ViewProps;
-}>;

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

@@ -1,8 +0,0 @@
-import { ViewProps } from 'app-studio';
-export declare type Variant = 'default' | 'info' | 'success' | 'error' | 'warning';
-export declare type AlertStyles = {
-    container?: ViewProps;
-    title?: ViewProps;
-    description?: ViewProps;
-    icon?: ViewProps;
-};

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

@@ -1,11 +0,0 @@
-/**
- * Alert View Component
- *
- * Renders an alert with various styles and states according to the design guidelines.
- */
-import React from 'react';
-import { AlertProps } from './Alert.props';
-/**
- * Alert component that displays important messages to users
- */
-export declare const AlertView: ({ icon, title, views, description, variant, themeMode: elementMode, children, ...props }: AlertProps) => React.JSX.Element;

package/dist/components/Alert/Alert.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { AlertProps } from './Alert/Alert.props';
-export declare const Alert: (props: AlertProps) => React.JSX.Element;

package/dist/components/AspectRatio/AspectRatio/AspectRatio.props.d.ts

@@ -1,9 +0,0 @@
-import { ViewProps } from 'app-studio';
-export interface AspectRatioProps extends ViewProps {
-    ratio?: number;
-    views?: {
-        container?: ViewProps;
-        center?: ViewProps;
-        view?: ViewProps;
-    };
-}

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

@@ -1,3 +0,0 @@
-import React from 'react';
-import { AspectRatioProps } from './AspectRatio.props';
-export declare const AspectRatioView: ({ ratio, children, views, ...props }: AspectRatioProps) => React.JSX.Element;

package/dist/components/AspectRatio/AspectRatio.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { AspectRatioProps } from './AspectRatio/AspectRatio.props';
-export declare const AspectRatio: ({ ratio, children, ...props }: AspectRatioProps) => React.JSX.Element;

package/dist/components/AudioInput/AudioInput/AudioInput.props.d.ts

@@ -1,21 +0,0 @@
-/// <reference types="react" />
-import { ViewProps } from 'app-studio';
-export interface AudioInputProps extends ViewProps {
-    /**
-     * Callback function to be called when audio is available.
-     * @param file The audio file (Blob)
-     */
-    onAudio: (file: File) => void;
-}
-export interface AudioInputViewProps extends AudioInputProps {
-    recording: boolean;
-    paused: boolean;
-    audioBlob: Blob | null;
-    analyserNode: AnalyserNode | null;
-    startRecording: () => void;
-    stopRecording: () => void;
-    pauseRecording: () => void;
-    resumeRecording: () => void;
-    resetRecording: () => void;
-    handleFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}

package/dist/components/AudioInput/AudioInput/AudioInput.state.d.ts

@@ -1,13 +0,0 @@
-import { AudioInputProps } from './AudioInput.props';
-export declare function useAudioInputState(props: AudioInputProps): {
-    recording: boolean;
-    paused: boolean;
-    audioBlob: Blob | null;
-    analyserNode: AnalyserNode | null;
-    startRecording: () => Promise<void>;
-    stopRecording: () => void;
-    pauseRecording: () => void;
-    resumeRecording: () => void;
-    resetRecording: () => void;
-    handleFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-};

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

@@ -1,4 +0,0 @@
-import React from 'react';
-import { AudioInputViewProps } from './AudioInput.props';
-export declare function AudioInputView({ onAudio, recording, paused, audioBlob, analyserNode, startRecording, stopRecording, pauseRecording, resumeRecording, resetRecording, handleFileChange, ...viewProps }: AudioInputViewProps): React.JSX.Element;
-export default AudioInputView;

package/dist/components/AudioInput/AudioInput.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { AudioInputProps } from './AudioInput/AudioInput.props';
-export declare function AudioInput(props: AudioInputProps): React.JSX.Element;
-export default AudioInput;

package/dist/components/AudioInput/AudioWaveform/AudioWaveform.d.ts

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

package/dist/components/AudioInput/AudioWaveform/AudioWaveform.props.d.ts

@@ -1,21 +0,0 @@
-import { ViewProps } from 'app-studio';
-export interface AudioWaveformProps extends ViewProps {
-    /**
-     * The AnalyserNode from the Web Audio API, used to capture audio data.
-     */
-    analyserNode: AnalyserNode | null;
-    /**
-     * Indicates whether the audio capture is paused.
-     */
-    isPaused: boolean;
-}
-export interface AudioWaveformViewProps extends ViewProps {
-    /**
-     * Indicates whether the audio capture is paused.
-     */
-    isPaused: boolean;
-    /**
-     * An array of amplitude values representing the audio waveform bars.
-     */
-    bars: number[];
-}

package/dist/components/AudioInput/AudioWaveform/AudioWaveform.view.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { AudioWaveformViewProps } from './AudioWaveform.props';
-export declare function clamp(value: number, min: number, max: number): number;
-export declare const AudioWaveformView: React.FC<AudioWaveformViewProps>;

package/dist/components/AudioInput/useAudioRecording.d.ts

@@ -1,13 +0,0 @@
-export declare function useAudioRecording(): {
-    readonly recording: boolean;
-    readonly paused: boolean;
-    readonly audioBlob: Blob | null;
-    readonly analyserNode: AnalyserNode | null;
-    readonly duration: number;
-    readonly error: string | null;
-    readonly startRecording: () => Promise<void>;
-    readonly stopRecording: () => void;
-    readonly pauseRecording: () => void;
-    readonly resumeRecording: () => void;
-    readonly resetRecording: () => void;
-};

package/dist/components/Avatar/Avatar/Avatar.props.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import { AvatarStyles, Size } from './Avatar.type';
-export interface AvatarProps {
-    src?: string;
-    size?: Size;
-    fallback?: string;
-    views?: AvatarStyles;
-    onClick?: Function;
-    children?: React.ReactNode;
-}
-export interface AvatarViewProps extends AvatarProps {
-    imageError: boolean;
-    setImageError: React.Dispatch<React.SetStateAction<boolean>>;
-}

package/dist/components/Avatar/Avatar/Avatar.state.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const useAvatarState: () => {
-    imageError: boolean;
-    setImageError: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-};

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

@@ -1,24 +0,0 @@
-/**
- * Avatar Styles
- *
- * Defines the styles for the Avatar 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 { ViewProps } from 'app-studio';
-import { Size } from './Avatar.type';
-/**
- * Avatar sizes following the 4px grid system
- */
-export declare const AvatarSizeMap: Record<Size, number>;
-/**
- * Default styles for the Avatar component
- */
-export declare const DefaultAvatarStyles: {
-    container: ViewProps;
-    fallback: ViewProps;
-    image: ViewProps;
-};

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

@@ -1,7 +0,0 @@
-import { ViewProps } from 'app-studio';
-export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export declare type AvatarStyles = {
-    container?: ViewProps;
-    image?: ViewProps;
-    fallback?: ViewProps;
-};

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

@@ -1,9 +0,0 @@
-/**
- * Avatar View Component
- *
- * Renders an avatar with various styles and states
- * according to the design guidelines.
- */
-import React from 'react';
-import { AvatarViewProps } from './Avatar.props';
-export declare const AvatarView: ({ src, size, fallback, views, imageError, setImageError, onClick, children, }: AvatarViewProps) => React.JSX.Element;

package/dist/components/Avatar/Avatar.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { AvatarProps } from './Avatar/Avatar.props';
-export declare const Avatar: ({ src, size, views, fallback, onClick, children, }: AvatarProps) => React.JSX.Element;