@app-studio/web 0.8.74 → 0.8.77

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;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+export * from './default';
+export * from './designSystem';
+export * from './variants';
+export * from './structured';
+export * from './shapes';
+export * from './sizes';
+export * from './custom';
+export * from './contextStyling';

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CarouselContextValue } from './Carousel.type';
+export declare const CarouselContext: import("react").Context<CarouselContextValue | null>;
+export declare const useCarouselContext: () => CarouselContextValue;

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

@@ -0,0 +1,155 @@
+/// <reference types="react" />
+import { ViewProps } from 'app-studio';
+import { ButtonProps } from '../../Button/Button/Button.props';
+import { CarouselStyles, IndicatorPosition, IndicatorVariant, NavigationPosition, SlideDirection } from './Carousel.type';
+export interface CarouselProps extends Omit<ViewProps, 'position'> {
+    /**
+     * The slides to be displayed in the carousel
+     */
+    children: React.ReactNode[];
+    /**
+     * The index of the initially active slide
+     */
+    defaultActiveIndex?: number;
+    /**
+     * Controlled active index
+     */
+    activeIndex?: number;
+    /**
+     * Callback when the active slide changes
+     */
+    onChange?: (index: number) => void;
+    /**
+     * Whether to show navigation buttons
+     */
+    showNavigation?: boolean;
+    /**
+     * Position of the navigation buttons
+     */
+    navigationPosition?: NavigationPosition;
+    /**
+     * Custom previous button element
+     */
+    prevButton?: React.ReactNode;
+    /**
+     * Custom next button element
+     */
+    nextButton?: React.ReactNode;
+    /**
+     * Whether to show slide indicators
+     */
+    showIndicators?: boolean;
+    /**
+     * Position of the indicators
+     */
+    indicatorPosition?: IndicatorPosition;
+    /**
+     * Visual style of the indicators
+     */
+    indicatorVariant?: IndicatorVariant;
+    /**
+     * Whether to enable auto-play
+     */
+    autoPlay?: boolean;
+    /**
+     * Interval for auto-play in milliseconds
+     */
+    autoPlayInterval?: number;
+    /**
+     * Whether to pause auto-play on hover
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Whether to loop the carousel
+     */
+    infinite?: boolean;
+    /**
+     * Direction of slide movement
+     */
+    direction?: SlideDirection;
+    /**
+     * Duration of the slide transition in milliseconds
+     */
+    transitionDuration?: number;
+    /**
+     * Array of specific slide indices to use as steps
+     * When provided, the carousel will only navigate to these indices
+     */
+    stepIndices?: number[];
+    /**
+     * Custom styles for different parts of the carousel
+     */
+    views?: CarouselStyles;
+}
+export interface CarouselSlideProps extends ViewProps {
+    /**
+     * The content of the slide
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the slide is currently active
+     */
+    isActive?: boolean;
+    /**
+     * Index of the slide
+     */
+    index?: number;
+    /**
+     * Custom styles for the slide
+     */
+    views?: ViewProps;
+}
+export interface CarouselContentProps extends ViewProps {
+    /**
+     * The slides, expected to be CarouselItem components
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styling for the content wrapper
+     */
+    views?: Pick<CarouselStyles, 'content' | 'innerContainer'>;
+}
+export interface CarouselItemProps extends ViewProps {
+    /**
+     * The content of the slide
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styling for the item
+     */
+    views?: Pick<CarouselStyles, 'item'>;
+}
+export interface CarouselPreviousProps extends Omit<ButtonProps, 'views'> {
+    /**
+     * Custom styling for the button
+     */
+    views?: Pick<CarouselStyles, 'prevButton'>;
+}
+export interface CarouselNextProps extends Omit<ButtonProps, 'views'> {
+    /**
+     * Custom styling for the button
+     */
+    views?: Pick<CarouselStyles, 'nextButton'>;
+}
+export interface CarouselType extends React.FC<CarouselProps> {
+    /**
+     * Individual slide component (legacy)
+     */
+    Slide: React.FC<CarouselSlideProps>;
+    /**
+     * Container for carousel items (compound pattern)
+     */
+    Content: React.FC<CarouselContentProps>;
+    /**
+     * Individual carousel item (compound pattern)
+     */
+    Item: React.FC<CarouselItemProps>;
+    /**
+     * Previous navigation button (compound pattern)
+     */
+    Previous: React.FC<CarouselPreviousProps>;
+    /**
+     * Next navigation button (compound pattern)
+     */
+    Next: React.FC<CarouselNextProps>;
+}

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

@@ -0,0 +1,29 @@
+export interface CarouselStateProps {
+    defaultActiveIndex?: number;
+    activeIndex?: number;
+    onChange?: (index: number) => void;
+    autoPlay?: boolean;
+    autoPlayInterval?: number;
+    pauseOnHover?: boolean;
+    infinite?: boolean;
+    totalSlides?: number;
+    stepIndices?: number[];
+}
+export declare const useCarouselState: ({ defaultActiveIndex, activeIndex: controlledActiveIndex, onChange, autoPlay, autoPlayInterval, pauseOnHover, infinite, totalSlides: initialTotalSlides, stepIndices, }: CarouselStateProps) => {
+    activeIndex: number;
+    totalSlides: number;
+    goToSlide: (index: number) => void;
+    nextSlide: () => void;
+    prevSlide: () => void;
+    canGoNext: boolean;
+    canGoPrevious: boolean;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    handleDragStart: (e: React.MouseEvent | React.TouchEvent) => void;
+    handleDragMove: (e: React.MouseEvent | React.TouchEvent) => void;
+    handleDragEnd: () => void;
+    registerSlide: () => number;
+    unregisterSlide: (id: number) => void;
+    contentId: string;
+    infinite: boolean;
+};

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

@@ -0,0 +1,6 @@
+import { ViewProps } from 'app-studio';
+import { IndicatorVariant, CarouselStyles } from './Carousel.type';
+export declare const IndicatorStyles: Record<IndicatorVariant, ViewProps>;
+export declare const ActiveIndicatorStyles: Record<IndicatorVariant, ViewProps>;
+export declare const NavigationButtonStyles: ViewProps;
+export declare const getDefaultCarouselStyles: () => CarouselStyles;

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

@@ -0,0 +1,32 @@
+import { ViewProps } from 'app-studio';
+export declare type NavigationPosition = 'inside' | 'outside';
+export declare type IndicatorPosition = 'top' | 'bottom';
+export declare type IndicatorVariant = 'dot' | 'line' | 'number';
+export declare type SlideDirection = 'horizontal' | 'vertical';
+export interface CarouselStyles {
+    container?: ViewProps;
+    slide?: ViewProps;
+    slideWrapper?: ViewProps;
+    prevButton?: ViewProps;
+    nextButton?: ViewProps;
+    indicators?: ViewProps;
+    indicator?: ViewProps;
+    activeIndicator?: ViewProps;
+    content?: ViewProps;
+    innerContainer?: ViewProps;
+    item?: ViewProps;
+}
+export interface CarouselContextValue {
+    currentIndex: number;
+    totalSlides: number;
+    goToSlide: (index: number) => void;
+    goToNext: () => void;
+    goToPrevious: () => void;
+    canGoNext: boolean;
+    canGoPrevious: boolean;
+    registerSlide: () => number;
+    unregisterSlide: (id: number) => void;
+    styles?: CarouselStyles;
+    contentId: string;
+    infinite: boolean;
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { CarouselProps, CarouselSlideProps, CarouselContentProps, CarouselItemProps, CarouselPreviousProps, CarouselNextProps } from './Carousel.props';
+export declare const CarouselSlide: React.FC<CarouselSlideProps>;
+export declare const CarouselPreviousComponent: React.FC<CarouselPreviousProps>;
+export declare const CarouselNextComponent: React.FC<CarouselNextProps>;
+export declare const CarouselItemComponent: React.FC<CarouselItemProps>;
+export declare const CarouselContentComponent: React.FC<CarouselContentProps>;
+export declare const CarouselView: React.FC<CarouselProps>;

package/dist/components/Carousel/Carousel.d.ts

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

package/dist/components/Carousel/examples/autoplay.d.ts

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

package/dist/components/Carousel/examples/compound.d.ts

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

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

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

package/dist/components/Carousel/examples/default.d.ts

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

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

@@ -0,0 +1,7 @@
+export * from './default';
+export * from './autoplay';
+export * from './indicators';
+export * from './navigation';
+export * from './custom';
+export * from './compound';
+export * from './stepIndices';

package/dist/components/Carousel/examples/indicators.d.ts

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

package/dist/components/Carousel/examples/navigation.d.ts

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

package/dist/components/Carousel/examples/stepIndices.d.ts

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

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

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

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

@@ -0,0 +1,101 @@
+/// <reference types="react" />
+import { ViewProps } from 'app-studio';
+import { ChartType, ChartData, ChartDataPoint, ChartStyles } from './Chart.type';
+export interface ChartProps extends Omit<ViewProps, 'animationDuration'> {
+    /**
+     * The type of chart to render
+     */
+    type: ChartType;
+    /**
+     * Data for the chart (for multi-series charts like bar, line, area)
+     */
+    data?: ChartData;
+    /**
+     * Data points for single series charts (like pie, donut)
+     */
+    dataPoints?: ChartDataPoint[];
+    /**
+     * The title of the chart
+     */
+    title?: string;
+    /**
+     * Whether to show the legend
+     */
+    showLegend?: boolean;
+    /**
+     * Position of the legend
+     */
+    legendPosition?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Whether to show grid lines
+     */
+    showGrid?: boolean;
+    /**
+     * Whether to show tooltips on hover
+     */
+    showTooltips?: boolean;
+    /**
+     * Whether the chart is animated
+     */
+    animated?: boolean;
+    /**
+     * Duration of the animation in milliseconds
+     */
+    animationDuration?: number;
+    /**
+     * Whether the chart is responsive
+     */
+    responsive?: boolean;
+    /**
+     * The aspect ratio of the chart (width/height)
+     */
+    aspectRatio?: number;
+    /**
+     * The width of the chart
+     */
+    width?: number | string;
+    /**
+     * The height of the chart
+     */
+    height?: number | string;
+    /**
+     * Custom styles for different parts of the chart
+     */
+    views?: ChartStyles;
+    /**
+     * Callback when a data point is clicked
+     */
+    onDataPointClick?: (dataPoint: ChartDataPoint | null, index: number) => void;
+    /**
+     * Callback when a series is clicked
+     */
+    onSeriesClick?: (seriesName: string, index: number) => void;
+    /**
+     * If true, displays a loading indicator overlay
+     */
+    isLoading?: boolean;
+    /**
+     * If provided, displays an error message overlay. Takes precedence over isLoading.
+     */
+    error?: React.ReactNode;
+    /**
+     * If true and not loading/error, displays a "no data" message. Can also be custom content.
+     */
+    noData?: boolean | React.ReactNode;
+    /**
+     * Custom placeholder for the loading state
+     */
+    loadingIndicator?: React.ReactNode;
+    /**
+     * Custom placeholder for the error state
+     */
+    errorIndicator?: React.ReactNode;
+    /**
+     * Custom placeholder for the no data state
+     */
+    noDataIndicator?: React.ReactNode;
+    /**
+     * Aria-label for the chart region. Defaults to the title if provided.
+     */
+    'aria-label'?: string;
+}

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

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { ChartData, ChartDataPoint } from './Chart.type';
+export interface ChartStateProps {
+    data?: ChartData;
+    dataPoints?: ChartDataPoint[];
+    animated?: boolean;
+    animationDuration?: number;
+    showTooltips?: boolean;
+}
+export declare const useChartState: ({ data, dataPoints, animated, animationDuration, showTooltips, }: ChartStateProps) => {
+    animationProgress: number;
+    tooltip: {
+        visible: boolean;
+        x: number;
+        y: number;
+        content: string;
+    };
+    containerRef: import("react").RefObject<HTMLDivElement>;
+    processedData: () => {
+        color: string;
+        label: string;
+        value: number;
+    }[] | {
+        series: {
+            color: string;
+            name: string;
+            data: number[];
+        }[];
+        labels: string[];
+    } | null;
+    showTooltip: (x: number, y: number, content: string) => void;
+    hideTooltip: () => void;
+    getChartDimensions: () => {
+        width: number;
+        height: number;
+    };
+};