@app-studio/web 0.9.85 → 0.9.88

package/docs/components/Resizable.mdx

@@ -25,7 +25,7 @@ export const DefaultResizable = () => {
     >
       <Resizable>
         <Resizable.Panel id="panel1" defaultSize="30%">
-          <View padding="16px" height="100%" backgroundColor="color-blue.50">
+          <View padding="16px" height="100%" backgroundColor="color-blue-50">
             <Text fontWeight="bold" marginBottom="8px">
               Panel 1
             </Text>
@@ -36,7 +36,7 @@ export const DefaultResizable = () => {
         <Resizable.Handle id="handle1" withVisualIndicator />
 
         <Resizable.Panel id="panel2" defaultSize="40%">
-          <View padding="16px" height="100%" backgroundColor="color-green.50">
+          <View padding="16px" height="100%" backgroundColor="color-green-50">
             <Text fontWeight="bold" marginBottom="8px">
               Panel 2
             </Text>
@@ -47,7 +47,7 @@ export const DefaultResizable = () => {
         <Resizable.Handle id="handle2" withVisualIndicator />
 
         <Resizable.Panel id="panel3" defaultSize="30%">
-          <View padding="16px" height="100%" backgroundColor="color-purple.50">
+          <View padding="16px" height="100%" backgroundColor="color-purple-50">
             <Text fontWeight="bold" marginBottom="8px">
               Panel 3
             </Text>
@@ -93,7 +93,7 @@ export const CollapsibleResizable = () => {
           minSize={100}
           maxSize={300}
         >
-          <View padding="16px" height="100%" backgroundColor="color-blue.50">
+          <View padding="16px" height="100%" backgroundColor="color-blue-50">
             <Text fontWeight="bold" marginBottom="8px">
               Collapsible Panel
             </Text>
@@ -107,7 +107,7 @@ export const CollapsibleResizable = () => {
         <Resizable.Handle id="handle1" withVisualIndicator withCollapseButton />
 
         <Resizable.Panel id="panel2" defaultSize="50%">
-          <View padding="16px" height="100%" backgroundColor="color-green.50">
+          <View padding="16px" height="100%" backgroundColor="color-green-50">
             <Text fontWeight="bold" marginBottom="8px">
               Main Panel
             </Text>
@@ -131,7 +131,7 @@ export const CollapsibleResizable = () => {
           collapsible={true}
           defaultCollapsed={true}
         >
-          <View padding="16px" height="100%" backgroundColor="color-purple.50">
+          <View padding="16px" height="100%" backgroundColor="color-purple-50">
             <Text fontWeight="bold" marginBottom="8px">
               Initially Collapsed Panel
             </Text>

package/docs/components/Selector.mdx

@@ -66,7 +66,7 @@ export const CustomStyleSelector = () => (
   <Selector
     label="Custom Styled"
     views={{
-      container: { backgroundColor: 'color-gray.50' },
+      container: { backgroundColor: 'color-gray-50' },
       item: { fontSize: '14px', fontStyle: 'italic' }
     }}
     options={[

package/docs/components/Sidebar.mdx

@@ -69,7 +69,7 @@ export const DefaultSidebar = () => {
             </Text>
           </Sidebar.Footer>
         </Sidebar>
-        <View flex="1" padding="16px" backgroundColor="color-gray.50">
+        <View flex="1" padding="16px" backgroundColor="color-gray-50">
           <Text fontWeight="bold" size="xl" marginBottom="16px">
             Main Content
           </Text>

package/docs/components/TagInput.mdx

@@ -349,7 +349,7 @@ export const StyledTagInput = () => {
         inputContainer: {
           borderColor: 'theme-primary',
           borderWidth: '2px',
-          backgroundColor: 'color-blue.50',
+          backgroundColor: 'color-blue-50',
         },
         tag: {
           backgroundColor: 'theme-primary',

package/docs/components/Vertical.mdx

@@ -403,7 +403,7 @@ export const StickyHeaderLayout = () => (
         <View
           key={i}
           padding={16}
-          backgroundColor="color-gray.50"
+          backgroundColor="color-gray-50"
           borderRadius={8}
         >
           <Text>Content Item {i + 1}</Text>

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@app-studio/web",
-  "version": "0.9.85",
-  "main": "dist/index.js",
-  "typings": "dist/components/index.d.ts",
+  "version": "0.9.88",
+  "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",
@@ -103,8 +103,8 @@
     "@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",
@@ -113,6 +113,7 @@
     "@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",
     "app-studio": "^0.7.7",
     "async-mutex": "^0.5.0",
     "babel-jest": "^29.5.0",
@@ -136,8 +137,10 @@
     "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",
+    "lucide-react": "^0.562.0",
     "markdown-loader": "^8.0.0",
     "npm": "^10.5.0",
     "openai": "^4.91.1",
@@ -156,8 +159,10 @@
     "tiktoken": "^1.0.20",
     "ts-loader": "^9.4.2",
     "tsc-alias": "^1.8.8",
-    "tsdx": "^0.14.1",
     "tslib": "^2.8.1",
+    "vite": "^5.4.21",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18",
     "web-vitals": "^2.1.4",
     "webpack": "^5.89.0",
     "webpack-bundle-analyzer": "^4.8.0",
@@ -170,7 +175,7 @@
   },
   "size-limit": [
     {
-      "path": "dist/web.cjs.production.min.js",
+      "path": "dist/web.cjs.js",
       "limit": "100 KB"
     },
     {
@@ -178,10 +183,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;
-};