@app-studio/web 0.8.74 → 0.8.77

package/README.md

@@ -0,0 +1,171 @@
+# App Studio Web Component Library
+
+![App Studio Web](https://img.shields.io/badge/App%20Studio-Web-blue)
+![React](https://img.shields.io/badge/React-18.x-61DAFB)
+![TypeScript](https://img.shields.io/badge/TypeScript-4.9.x-3178C6)
+![License](https://img.shields.io/badge/License-MIT-green)
+
+A comprehensive, accessible, and customizable React component library built with TypeScript and App Studio. This library provides a wide range of UI components designed to help you build beautiful and functional web applications quickly and efficiently.
+
+## Features
+
+- **40+ UI Components**: From basic elements to complex interactive components
+- **Fully Typed**: Built with TypeScript for better developer experience
+- **Accessible**: Follows WCAG guidelines for accessibility
+- **Customizable**: Easily theme and style components to match your brand
+- **Responsive**: Works across all device sizes
+- **Form Integration**: Seamless integration with Formik for form handling
+- **Modern Design**: Clean, consistent design following best practices
+
+## Installation
+
+```bash
+npm install @app-studio/web
+# or
+yarn add @app-studio/web
+```
+
+## Quick Start
+
+```jsx
+import React from 'react';
+import { Button, Text } from '@app-studio/web';
+
+function App() {
+  return (
+    <div>
+      <Text>Hello, world!</Text>
+      <Button onClick={() => alert('Clicked!')}>Click me</Button>
+    </div>
+  );
+}
+```
+
+## Component Categories
+
+### Layout Components
+- View
+- Center
+- Horizontal
+- Vertical
+- AspectRatio
+- Separator
+- Resizable
+
+### Form Components
+- Checkbox
+- Radio
+- Select
+- Switch
+- TextArea
+- TextField
+- OTPInput
+
+### Navigation Components
+- Accordion
+- Menubar
+- NavigationMenu
+- Pagination
+- Sidebar
+- Tabs
+
+### Feedback Components
+- Alert
+- Modal
+- Toast
+- Tooltip
+
+### Data Display Components
+- Avatar
+- Badge
+- Card
+- Table
+- Chart
+
+### Utility Components
+- Button
+- Gradient
+- Loader
+- Text
+
+### Interactive Components
+- Carousel
+- ContextMenu
+- DropdownMenu
+- HoverCard
+- Slider
+- Toggle
+- ToggleGroup
+
+## Design System
+
+All components follow a consistent design system with:
+
+- **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
+
+## Development
+
+### Prerequisites
+
+- Node.js (>= 10.x)
+- npm or yarn
+
+### Setup
+
+1. Clone the repository
+   ```bash
+   git clone https://github.com/your-org/app-studio-web.git
+   cd app-studio-web
+   ```
+
+2. Install dependencies
+   ```bash
+   npm install
+   # or
+   yarn
+   ```
+
+3. Start the development server
+   ```bash
+   npm start
+   # or
+   yarn start
+   ```
+
+### Available Scripts
+
+- `npm start` - Start the development server
+- `npm run build` - Build the library for production
+- `npm test` - Run tests
+- `npm run storybook` - Start Storybook for component development
+- `npm run lint` - Run ESLint
+- `npm run lint:fix` - Fix ESLint issues
+- `npm run prettier` - Run Prettier
+- `npm run prettier:fix` - Fix Prettier issues
+
+## Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for more details.
+
+### Creating New Components
+
+Use our component creation script to scaffold new components:
+
+```bash
+npm run create-structure -- --name=YourComponentName
+```
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Acknowledgements
+
+- Built with [React](https://reactjs.org/)
+- Styled with [App Studio](https://app-studio.dev/)
+- Form handling with [Formik](https://formik.org/)
+- State management with [Zustand](https://github.com/pmndrs/zustand)

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

@@ -1,25 +1,41 @@
 import React from 'react';
 import { ViewProps } from 'app-studio';
-import { AccordionStyles, Shape, Variant } from './Accordion.type';
-export interface AccordionProps {
+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;
     /**
-     * Whether multiple items can be expanded at once
+     * Determines whether one or multiple items can be opened at the same time
+     * @default 'single'
      */
-    allowMultiple?: boolean;
+    type?: AccordionType;
     /**
-     * Default expanded item IDs
+     * The value of the item(s) to be opened when initially rendered (uncontrolled)
      */
-    defaultExpandedItems?: string[];
+    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;
     /**
@@ -27,11 +43,11 @@ export interface AccordionProps {
      */
     views?: AccordionStyles;
 }
-export interface AccordionItemProps {
+export interface AccordionItemProps extends Omit<ViewProps, 'value'> {
     /**
      * Unique identifier for the accordion item
      */
-    id: string;
+    value: string;
     /**
      * The content of the accordion item
      */
@@ -45,23 +61,28 @@ export interface AccordionItemProps {
      */
     views?: {
         item?: ViewProps;
-        header?: ViewProps;
+        trigger?: ViewProps;
         content?: ViewProps;
         icon?: ViewProps;
     };
 }
-export interface AccordionHeaderProps {
+export interface AccordionTriggerProps extends ViewProps {
     /**
-     * The content of the accordion header
+     * The content of the accordion trigger
      */
     children: React.ReactNode;
     /**
-     * Custom styles for the header
+     * 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 {
     /**
@@ -75,15 +96,15 @@ export interface AccordionContentProps {
         container?: ViewProps;
     };
 }
-export interface AccordionType extends React.FC<AccordionProps> {
+export interface AccordionComponentType extends React.FC<AccordionProps> {
     /**
      * Individual accordion item component
      */
     Item: React.FC<AccordionItemProps>;
     /**
-     * Header component for accordion items
+     * Trigger component for accordion items
      */
-    Header: React.FC<AccordionHeaderProps>;
+    Trigger: React.FC<AccordionTriggerProps>;
     /**
      * Content component for accordion items
      */

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

@@ -1,5 +1,9 @@
-export declare const useAccordionState: (defaultExpandedItems?: string[], allowMultiple?: boolean) => {
+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: (itemId: string) => void;
-    isItemExpanded: (itemId: string) => boolean;
+    toggleItem: (itemValue: string) => void;
+    isItemExpanded: (itemValue: string) => boolean;
+    type: import("./Accordion.type").AccordionType;
+    collapsible: boolean;
+    baseId: string;
 };

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

@@ -1,15 +1,38 @@
 import { ViewProps } from 'app-studio';
 export declare type Shape = 'sharp' | '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,22 +1,31 @@
 import React from 'react';
 import { AccordionContextType } from './Accordion.type';
-import { AccordionHeaderProps, AccordionContentProps, AccordionItemProps } from './Accordion.props';
+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 AccordionHeader: React.FC<AccordionHeaderProps & {
-    id?: string;
+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?: 'sharp' | 'rounded';
     variant?: 'default' | 'outline' | 'filled';
     views?: any;
+    baseId: string;
+    type: 'single' | 'multiple';
+    collapsible: boolean;
 }>;

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

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

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

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

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

@@ -2,3 +2,4 @@ export * from './default';
 export * from './variants';
 export * from './multiple';
 export * from './disabled';
+export * from './collapsible';

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

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import React from 'react';
 import { AlertStyles, Variant } from './Alert.type';
 export interface AlertProps {
     icon?: React.ReactNode;
     title: string;
-    description: string;
+    description: string | React.ReactNode;
     variant?: Variant;
     views?: AlertStyles;
 }

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

@@ -1,47 +1,20 @@
-export declare const Themes: {
-    default: {
-        container: {
-            backgroundColor: string;
-            border: string;
-        };
-        content: {
-            color: string;
-        };
-    };
-    info: {
-        container: {
-            backgroundColor: string;
-            border: string;
-        };
-        content: {
-            color: string;
-        };
-    };
-    success: {
-        container: {
-            backgroundColor: string;
-            border: string;
-        };
-        content: {
-            color: string;
-        };
-    };
-    error: {
-        container: {
-            backgroundColor: string;
-            border: string;
-        };
-        content: {
-            color: string;
-        };
-    };
-    warning: {
-        container: {
-            backgroundColor: string;
-            border: string;
-        };
-        content: {
-            color: string;
-        };
-    };
-};
+/**
+ * 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';
+/**
+ * Theme styles for different alert variants
+ */
+export declare const Themes: Record<Variant, {
+    container: ViewProps;
+    content: ViewProps;
+    icon: ViewProps;
+}>;

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

@@ -1,3 +1,11 @@
+/**
+ * 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, }: AlertProps) => React.JSX.Element;

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

@@ -0,0 +1,12 @@
+/**
+ * Alert Examples - Design System
+ *
+ * Showcases 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 React from 'react';
+export declare const DesignSystemAlerts: () => React.JSX.Element;

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

@@ -1,2 +1,24 @@
+/**
+ * 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.view.d.ts

@@ -1,3 +1,9 @@
+/**
+ * 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, }: AvatarViewProps) => React.JSX.Element;

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

@@ -0,0 +1,12 @@
+/**
+ * Avatar Examples - Design System
+ *
+ * Showcases 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 React from 'react';
+export declare const DesignSystemAvatars: () => React.JSX.Element;

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

@@ -1,4 +1,5 @@
 export * from './default';
+export * from './designSystem';
 export * from './fallback';
 export * from './size';
 export * from './styles';

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

@@ -1,9 +1,31 @@
+/**
+ * Badge Styles
+ *
+ * Defines the styles for the Badge 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
+ */
 /// <reference types="react" />
 import { ViewProps } from 'app-studio';
-import { Shape, Size } from './Badge.type';
-export declare type BadgeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+import { Shape, Size, Variant } from './Badge.type';
+/**
+ * Badge sizes following the 4px grid system
+ */
 export declare const BadgeSizes: Record<Size, ViewProps>;
+/**
+ * Badge shapes with consistent border radius
+ */
 export declare const BadgeShapes: Record<Shape, number | string>;
+/**
+ * Badge positions for absolute positioning
+ */
 export declare const PositionStyles: {
     [key: string]: React.CSSProperties;
 };
+/**
+ * Badge variants with consistent styling
+ */
+export declare const BadgeVariants: Record<Variant, ViewProps>;

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

@@ -1,4 +1,12 @@
+/**
+ * Badge View Component
+ *
+ * Renders a badge with various styles and states according to the design guidelines.
+ */
 import React from 'react';
 import { BadgeProps } from './Badge.props';
+/**
+ * Badge View Component
+ */
 declare const BadgeView: React.FC<BadgeProps>;
 export default BadgeView;

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

@@ -0,0 +1,12 @@
+/**
+ * Badge Examples - Design System
+ *
+ * Showcases the Badge 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 DesignSystemBadges: () => React.JSX.Element;

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

@@ -1,5 +1,6 @@
 export * from './content';
 export * from './default';
+export * from './designSystem';
 export * from './position';
 export * from './shape';
 export * from './size';

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

@@ -1,5 +1,28 @@
+/**
+ * Button Styles
+ *
+ * Defines the styles for the Button 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 { Shape, Size } from './Button.type';
+import { Shape, Size, Variant } from './Button.type';
+/**
+ * Button sizes following the 4px grid system
+ */
 export declare const ButtonSizes: Record<Size, ViewProps>;
+/**
+ * Button shapes with consistent border radius
+ */
 export declare const ButtonShapes: Record<Shape, number | string>;
+/**
+ * Icon sizes for different button sizes
+ */
 export declare const IconSizes: Record<Size, ViewProps>;
+/**
+ * Button variants with consistent styling
+ */
+export declare const getButtonVariants: (color: string, isLight: boolean) => Record<Variant, ViewProps>;

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

@@ -1,3 +1,8 @@
+/**
+ * Button View Component
+ *
+ * Renders a button with various styles and states according to the design guidelines.
+ */
 import React from 'react';
 import { ButtonProps } from './Button.props';
 interface Props extends ButtonProps {

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

@@ -0,0 +1,12 @@
+/**
+ * Button Examples - Design System
+ *
+ * Showcases the Button 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 DesignSystemButtons: () => React.JSX.Element;