@app-studio/web 0.8.74 → 0.8.76

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

@@ -0,0 +1,17 @@
+import { ViewProps } from 'app-studio';
+export declare type Size = 'sm' | 'md' | 'lg';
+export declare type Variant = 'default' | 'filled' | 'outline';
+export declare type Shape = 'rounded' | 'square' | 'circular';
+export interface PaginationStyles {
+    container?: ViewProps;
+    pageButton?: ViewProps;
+    activePageButton?: ViewProps;
+    navigationButton?: ViewProps;
+    pageInfo?: ViewProps;
+    pageSizeSelector?: ViewProps;
+    ellipsis?: ViewProps;
+}
+export interface PageSizeOption {
+    label: string;
+    value: number;
+}

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

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

package/dist/components/Pagination/Pagination.d.ts

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

package/dist/components/Pagination/examples/advanced.d.ts

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

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

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

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

@@ -0,0 +1,6 @@
+export * from './default';
+export * from './variants';
+export * from './sizes';
+export * from './shapes';
+export * from './advanced';
+export * from './table';

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

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

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

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

package/dist/components/Pagination/examples/table.d.ts

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

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

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

package/dist/components/Pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './Pagination';

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

@@ -0,0 +1,160 @@
+import { ViewProps } from 'app-studio';
+import React from 'react';
+import { Orientation, HandlePosition, Size, Variant, ResizableStyles, ResizableStorage } from './Resizable.type';
+export interface ResizableProps {
+    /**
+     * The content of the resizable container
+     */
+    children: React.ReactNode;
+    /**
+     * The orientation of the resizable container
+     */
+    orientation?: Orientation;
+    /**
+     * The size of the resize handles
+     */
+    size?: Size;
+    /**
+     * The visual style variant of the resize handles
+     */
+    variant?: Variant;
+    /**
+     * The default sizes of the panels in pixels or percentages
+     * If not provided, panels will have equal sizes
+     */
+    defaultSizes?: (number | string)[];
+    /**
+     * Callback when panel sizes change
+     */
+    onSizesChange?: (sizes: number[]) => void;
+    /**
+     * Minimum size of any panel in pixels
+     */
+    minSize?: number;
+    /**
+     * Maximum size of any panel in pixels
+     */
+    maxSize?: number;
+    /**
+     * Whether to collapse panels when they reach minSize
+     */
+    collapsible?: boolean;
+    /**
+     * Unique ID for persisting panel sizes in storage
+     */
+    autoSaveId?: string;
+    /**
+     * Storage mechanism for persisting panel sizes
+     * Defaults to localStorage if not provided
+     */
+    storage?: ResizableStorage;
+    /**
+     * Amount to resize by when using keyboard navigation (in pixels)
+     * Defaults to 10px
+     */
+    keyboardResizeBy?: number;
+    /**
+     * Custom styles for different parts of the resizable component
+     */
+    views?: ResizableStyles;
+    /**
+     * Additional props to be spread to the container element
+     */
+    [key: string]: any;
+}
+export interface ResizablePanelProps {
+    /**
+     * The content of the panel
+     */
+    children: React.ReactNode;
+    /**
+     * The id of the panel
+     */
+    id: string;
+    /**
+     * The default size of the panel in pixels or percentage
+     */
+    defaultSize?: number | string;
+    /**
+     * The minimum size of the panel in pixels
+     */
+    minSize?: number;
+    /**
+     * The maximum size of the panel in pixels
+     */
+    maxSize?: number;
+    /**
+     * Whether the panel can be collapsed
+     */
+    collapsible?: boolean;
+    /**
+     * Whether the panel is initially collapsed
+     * Only works if collapsible is true
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Callback when panel collapse state changes
+     */
+    onCollapseChange?: (collapsed: boolean) => void;
+    /**
+     * Custom styles for the panel
+     */
+    views?: {
+        panel?: ViewProps;
+        collapsedPanel?: ViewProps;
+    };
+    /**
+     * Additional props to be spread to the panel element
+     */
+    [key: string]: any;
+}
+export interface ResizableHandleProps {
+    /**
+     * The id of the handle
+     */
+    id: string;
+    /**
+     * The position of the handle
+     */
+    position?: HandlePosition;
+    /**
+     * Whether the handle is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show a visual indicator when hovering over the handle
+     */
+    withVisualIndicator?: boolean;
+    /**
+     * Whether to show a collapse button for adjacent panels
+     * Only works if the adjacent panel has collapsible=true
+     */
+    withCollapseButton?: boolean;
+    /**
+     * The panel ID to collapse when clicking the collapse button
+     * If not provided, will collapse the panel before this handle
+     */
+    collapseTarget?: string;
+    /**
+     * Custom styles for the handle
+     */
+    views?: {
+        handle?: ViewProps;
+        handleIcon?: ViewProps;
+        collapseIcon?: ViewProps;
+    };
+    /**
+     * Additional props to be spread to the handle element
+     */
+    [key: string]: any;
+}
+export interface ResizableType extends React.FC<ResizableProps> {
+    /**
+     * The panel component for the resizable container
+     */
+    Panel: React.FC<ResizablePanelProps>;
+    /**
+     * The handle component for resizing panels
+     */
+    Handle: React.FC<ResizableHandleProps>;
+}

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { Orientation, PanelInfo, ResizableStorage } from './Resizable.type';
+export declare const useResizableState: (orientation: Orientation, defaultSizes?: (string | number)[] | undefined, onSizesChange?: ((sizes: number[]) => void) | undefined, defaultMinSize?: number, defaultMaxSize?: number, collapsible?: boolean, autoSaveId?: string | undefined, storage?: ResizableStorage | undefined, keyboardResizeBy?: number) => {
+    isResizing: boolean;
+    setIsResizing: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    containerRef: import("react").RefObject<HTMLDivElement>;
+    panels: PanelInfo[];
+    registerPanel: (id: string, initialSize: number, minSize?: number | undefined, maxSize?: number | undefined, panelCollapsible?: boolean | undefined) => void;
+    unregisterPanel: (id: string) => void;
+    getPanelSize: (id: string) => number;
+    setPanelSize: (id: string, size: number) => void;
+    isPanelCollapsed: (id: string) => boolean;
+    togglePanelCollapse: (id: string) => void;
+    startResize: (handleId: string, clientPosition: number) => void;
+    onResize: (clientPosition: number) => void;
+    endResize: () => void;
+};

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

@@ -0,0 +1,6 @@
+import { ViewProps } from 'app-studio';
+import { Orientation, Size, Variant } from './Resizable.type';
+export declare const ResizableOrientations: Record<Orientation, ViewProps>;
+export declare const getHandleSizeStyles: (size: Size, orientation: Orientation) => ViewProps;
+export declare const HandleVariants: Record<Variant, ViewProps>;
+export declare const HandleIconStyles: Record<Orientation, ViewProps>;

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

@@ -0,0 +1,56 @@
+import { ViewProps } from 'app-studio';
+export declare type Orientation = 'horizontal' | 'vertical';
+export declare type HandlePosition = 'start' | 'end' | 'both';
+export declare type Size = 'sm' | 'md' | 'lg';
+export declare type Variant = 'default' | 'subtle' | 'prominent';
+/**
+ * Storage interface for persisting panel layouts
+ */
+export interface ResizableStorage {
+    /**
+     * Get stored panel sizes by ID
+     */
+    getItem: (id: string) => string | null;
+    /**
+     * Store panel sizes by ID
+     */
+    setItem: (id: string, value: string) => void;
+}
+/**
+ * Panel information tracked by the Resizable component
+ */
+export interface PanelInfo {
+    id: string;
+    size: number;
+    minSize?: number;
+    maxSize?: number;
+    collapsible?: boolean;
+    collapsed?: boolean;
+}
+export interface ResizableContextType {
+    orientation: Orientation;
+    size: Size;
+    variant: Variant;
+    isResizing: boolean;
+    setIsResizing: (isResizing: boolean) => void;
+    registerPanel: (id: string, initialSize: number, minSize?: number, maxSize?: number, collapsible?: boolean) => void;
+    unregisterPanel: (id: string) => void;
+    getPanelSize: (id: string) => number;
+    setPanelSize: (id: string, size: number) => void;
+    isPanelCollapsed: (id: string) => boolean;
+    togglePanelCollapse: (id: string) => void;
+    startResize: (handleId: string, clientPosition: number) => void;
+    onResize: (clientPosition: number) => void;
+    endResize: () => void;
+}
+export interface ResizableStyles {
+    container?: ViewProps;
+    panel?: ViewProps;
+    collapsedPanel?: ViewProps;
+    handle?: ViewProps & {
+        _hover?: ViewProps;
+        _active?: ViewProps;
+    };
+    handleIcon?: ViewProps;
+    collapseIcon?: ViewProps;
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ResizableProps, ResizablePanelProps, ResizableHandleProps } from './Resizable.props';
+import { ResizableContextType } from './Resizable.type';
+export declare const useResizableContext: () => ResizableContextType;
+export declare const ResizableProvider: React.FC<{
+    value: ResizableContextType;
+    children: React.ReactNode;
+}>;
+export declare const ResizablePanel: React.FC<ResizablePanelProps>;
+export declare const ResizableHandle: React.FC<ResizableHandleProps>;
+export declare const ResizableView: React.FC<ResizableProps & {
+    containerRef: React.RefObject<HTMLDivElement>;
+}>;

package/dist/components/Resizable/Resizable.d.ts

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

package/dist/components/Resizable/examples/codeEditor.d.ts

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

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

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

package/dist/components/Resizable/examples/controlled.d.ts

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

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

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

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

@@ -0,0 +1,9 @@
+export * from './default';
+export * from './vertical';
+export * from './nested';
+export * from './variants';
+export * from './sizes';
+export * from './codeEditor';
+export * from './controlled';
+export * from './collapsible';
+export * from './test';

package/dist/components/Resizable/examples/nested.d.ts

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

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

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

package/dist/components/Resizable/examples/test.d.ts

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

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

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

package/dist/components/Resizable/examples/vertical.d.ts

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

package/dist/components/Resizable/index.d.ts

@@ -0,0 +1 @@
+export * from './Resizable';

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

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { ViewProps } from 'app-studio';
+import { Orientation, Variant, Thickness, SeparatorStyles } from './Separator.type';
+export interface SeparatorProps extends ViewProps {
+    /**
+     * The orientation of the separator
+     */
+    orientation?: Orientation;
+    /**
+     * The visual style variant of the separator
+     */
+    variant?: Variant;
+    /**
+     * The thickness of the separator
+     */
+    thickness?: Thickness;
+    /**
+     * The color of the separator
+     */
+    color?: string;
+    /**
+     * The spacing around the separator
+     */
+    spacing?: number | string;
+    /**
+     * Optional label to display in the middle of the separator
+     */
+    label?: React.ReactNode;
+    /**
+     * Whether the separator has decorative purpose only
+     * If true, the separator will be hidden from screen readers
+     */
+    decorative?: boolean;
+    /**
+     * Custom styles for different parts of the separator
+     */
+    views?: SeparatorStyles;
+}

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

@@ -0,0 +1,38 @@
+/**
+ * Separator Styles
+ *
+ * Defines the styles for the Separator component following the design guidelines:
+ * - Typography: Inter/Geist font, specific sizes/weights
+ * - Spacing: 4px grid system
+ * - Colors: Neutral palette with semantic colors
+ * - Transitions: Subtle animations
+ */
+import { ViewProps } from 'app-studio';
+import { Orientation, Variant, Thickness } from './Separator.type';
+/**
+ * Orientation configurations for the Separator component
+ */
+export declare const SeparatorOrientations: Record<Orientation, ViewProps>;
+/**
+ * Variant configurations for the Separator component
+ */
+export declare const SeparatorVariants: Record<Variant, string>;
+/**
+ * Thickness configurations for the Separator component
+ * Following the 4px grid system
+ */
+export declare const SeparatorThicknesses: Record<Thickness, string>;
+/**
+ * Default styles for the Separator component
+ */
+export declare const DefaultSeparatorStyles: {
+    container: {
+        transition: string;
+    };
+    label: {
+        fontSize: string;
+        color: string;
+        paddingHorizontal: string;
+        transition: string;
+    };
+};

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

@@ -0,0 +1,8 @@
+import { ViewProps } from 'app-studio';
+export declare type Orientation = 'horizontal' | 'vertical';
+export declare type Variant = 'solid' | 'dashed' | 'dotted';
+export declare type Thickness = 'thin' | 'medium' | 'thick';
+export interface SeparatorStyles {
+    container?: ViewProps;
+    label?: ViewProps;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * Separator View Component
+ *
+ * Renders a separator with various styles and states
+ * according to the design guidelines.
+ */
+import React from 'react';
+import { SeparatorProps } from './Separator.props';
+export declare const SeparatorView: React.FC<SeparatorProps>;

package/dist/components/Separator/Separator.d.ts

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

package/dist/components/Separator/examples/colors.d.ts

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

package/dist/components/Separator/examples/customized.d.ts

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

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

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

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

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

package/dist/components/Separator/examples/inCard.d.ts

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

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

@@ -0,0 +1,9 @@
+export * from './default';
+export * from './designSystem';
+export * from './variants';
+export * from './thicknesses';
+export * from './orientations';
+export * from './colors';
+export * from './withLabel';
+export * from './inCard';
+export * from './customized';

package/dist/components/Separator/examples/orientations.d.ts

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

package/dist/components/Separator/examples/thicknesses.d.ts

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

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

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

package/dist/components/Separator/examples/withLabel.d.ts

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

package/dist/components/Separator/index.d.ts

@@ -0,0 +1 @@
+export * from './Separator';