@app-studio/web 0.8.74 → 0.8.76

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;

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

@@ -1,5 +1,6 @@
 export * from './autofocus';
 export * from './default';
+export * from './designSystem';
 export * from './effect';
 export * from './icon';
 export * from './isAuto';

package/dist/components/Card/Card/Card.context.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CardStyles } from './Card.type';
+export interface CardContextValue {
+    styles?: CardStyles;
+}
+export declare const CardContext: import("react").Context<CardContextValue>;
+export declare const useCardContext: () => CardContextValue;

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

@@ -0,0 +1,81 @@
+/// <reference types="react" />
+import { ViewProps } from 'app-studio';
+import { CardStyles, Shape, Size, Variant } from './Card.type';
+export interface CardProps extends ViewProps {
+    /**
+     * The visual style variant of the card
+     */
+    variant?: Variant;
+    /**
+     * The size of the card, affecting padding
+     */
+    size?: Size;
+    /**
+     * The shape of the card's corners
+     */
+    shape?: Shape;
+    /**
+     * The content to be displayed inside the card
+     */
+    children?: React.ReactNode;
+    /**
+     * Optional header content for the card
+     */
+    header?: React.ReactNode;
+    /**
+     * Optional footer content for the card
+     */
+    footer?: React.ReactNode;
+    /**
+     * Whether the card should take up the full width of its container
+     */
+    isFullWidth?: boolean;
+    /**
+     * Custom styles for different parts of the card
+     */
+    views?: CardStyles;
+}
+export interface CardHeaderProps extends ViewProps {
+    /**
+     * The content to be displayed in the card header
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styles for the header
+     */
+    views?: ViewProps;
+}
+export interface CardContentProps extends ViewProps {
+    /**
+     * The content to be displayed in the card body
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styles for the content
+     */
+    views?: ViewProps;
+}
+export interface CardFooterProps extends ViewProps {
+    /**
+     * The content to be displayed in the card footer
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styles for the footer
+     */
+    views?: ViewProps;
+}
+export interface CardType extends React.FC<CardProps> {
+    /**
+     * Card header component
+     */
+    Header: React.FC<CardHeaderProps>;
+    /**
+     * Card content component
+     */
+    Content: React.FC<CardContentProps>;
+    /**
+     * Card footer component
+     */
+    Footer: React.FC<CardFooterProps>;
+}

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

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

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

@@ -0,0 +1,29 @@
+/**
+ * Card Styles
+ *
+ * Defines the styles for the Card 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 { CardStyles, Shape, Size, Variant } from './Card.type';
+/**
+ * Card sizes following the 4px grid system
+ */
+export declare const CardSizes: Record<Size, ViewProps>;
+/**
+ * Card shapes with consistent border radius
+ */
+export declare const CardShapes: Record<Shape, number | string>;
+/**
+ * Card variants with consistent styling
+ */
+export declare const CardVariants: Record<Variant, ViewProps>;
+/**
+ * Function to get default styles for Card components
+ * @param theme - Theme object (not used directly but kept for compatibility)
+ */
+export declare const getDefaultCardStyles: (_theme: any) => CardStyles;

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

@@ -0,0 +1,10 @@
+import { ViewProps } from 'app-studio';
+export declare type Variant = 'default' | 'outlined' | 'elevated';
+export declare type Size = 'sm' | 'md' | 'lg';
+export declare type Shape = 'sharp' | 'rounded' | 'pillShaped';
+export interface CardStyles {
+    container?: ViewProps;
+    header?: ViewProps;
+    content?: ViewProps;
+    footer?: ViewProps;
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { CardProps, CardHeaderProps, CardContentProps, CardFooterProps } from './Card.props';
+export declare const CardHeader: React.FC<CardHeaderProps>;
+export declare const CardContent: React.FC<CardContentProps>;
+export declare const CardFooter: React.FC<CardFooterProps>;
+export declare const CardView: React.FC<CardProps>;

package/dist/components/Card/Card.d.ts

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