@app-studio/web 0.8.73 → 0.8.76

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;
+    };
+};

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

@@ -0,0 +1,20 @@
+import { ViewProps } from 'app-studio';
+export declare const DEFAULT_COLORS: string[];
+export declare const ChartContainerStyles: ViewProps;
+export declare const ChartTitleStyles: ViewProps;
+export declare const ChartLegendStyles: ViewProps;
+export declare const LegendItemStyles: ViewProps;
+export declare const LegendColorStyles: ViewProps;
+export declare const LegendTextStyles: ViewProps;
+export declare const TooltipStyles: ViewProps;
+export declare const GridStyles: ViewProps;
+export declare const AxisStyles: ViewProps;
+export declare const AxisLabelStyles: ViewProps;
+export declare const BarStyles: ViewProps;
+export declare const LineStyles: ViewProps;
+export declare const PointStyles: ViewProps;
+export declare const PieSliceStyles: ViewProps;
+export declare const OverlayBaseStyles: ViewProps;
+export declare const LoadingOverlayStyles: ViewProps;
+export declare const ErrorOverlayStyles: ViewProps;
+export declare const NoDataOverlayStyles: ViewProps;

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

@@ -0,0 +1,36 @@
+import { ViewProps } from 'app-studio';
+export declare type ChartType = 'bar' | 'line' | 'pie' | 'donut' | 'area';
+export interface ChartDataPoint {
+    label: string;
+    value: number;
+    color?: string;
+}
+export interface ChartSeries {
+    name: string;
+    data: number[];
+    color?: string;
+}
+export interface ChartData {
+    labels: string[];
+    series: ChartSeries[];
+}
+export interface ChartStyles {
+    container?: ViewProps;
+    chart?: ViewProps;
+    legend?: ViewProps;
+    legendItem?: ViewProps;
+    tooltip?: ViewProps;
+    axis?: ViewProps;
+    grid?: ViewProps;
+    bar?: ViewProps;
+    line?: ViewProps;
+    point?: ViewProps;
+    pie?: ViewProps;
+    area?: ViewProps;
+    axisLabel?: ViewProps;
+    axisLine?: ViewProps;
+    axisTick?: ViewProps;
+    loadingOverlay?: ViewProps;
+    errorOverlay?: ViewProps;
+    noDataOverlay?: ViewProps;
+}

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

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

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

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

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ChartDataPoint } from './Chart.type';
+interface PieChartProps {
+    dataPoints: ChartDataPoint[];
+    width: number;
+    height: number;
+    animationProgress: number;
+    isDonut?: boolean;
+    onSliceClick?: (dataPoint: ChartDataPoint, index: number) => void;
+    showTooltip: (x: number, y: number, content: string) => void;
+    hideTooltip: () => void;
+    views?: any;
+}
+export declare const PieChart: React.FC<PieChartProps>;
+export {};

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

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

package/dist/components/Chart/examples/area.d.ts

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

package/dist/components/Chart/examples/bar.d.ts

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

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

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

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

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

package/dist/components/Chart/examples/donut.d.ts

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

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

@@ -0,0 +1,8 @@
+export * from './bar';
+export * from './line';
+export * from './area';
+export * from './pie';
+export * from './donut';
+export * from './custom';
+export * from './states';
+export * from './designSystem';

package/dist/components/Chart/examples/line.d.ts

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

package/dist/components/Chart/examples/pie.d.ts

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

package/dist/components/Chart/examples/states.d.ts

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