@app-studio/web 0.8.74 → 0.8.77

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

@@ -0,0 +1,142 @@
+import { InputProps, Shadow, ViewProps } from 'app-studio';
+import { Elevation } from '../../../utils/elevation';
+import { Shape, Size, Variant } from '../../Input/Input.type';
+import { OTPInputStyles, OTPInputType } from './OTPInput.type';
+export interface OTPInputProps extends Omit<InputProps, 'size'> {
+    /**
+     * Unique identifier for the OTP input
+     */
+    id?: string;
+    /**
+     * Error state for validation
+     */
+    error?: any;
+    /**
+     * Helper text displayed below the input
+     */
+    helperText?: string;
+    /**
+     * Name attribute for form submission
+     */
+    name?: string;
+    /**
+     * Label text for the input
+     */
+    label?: string;
+    /**
+     * Number of OTP input fields
+     */
+    length?: number;
+    /**
+     * Placeholder text for each input field
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is read-only
+     */
+    isReadOnly?: boolean;
+    /**
+     * Whether the input is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the first input should be auto-focused
+     */
+    isAutoFocus?: boolean;
+    /**
+     * The type of input to display
+     * - 'text': Regular text input (default)
+     * - 'password': Masked input for secure entry
+     * - 'number': Numeric input (uses text with inputMode="numeric" for better UX)
+     */
+    type?: OTPInputType;
+    /**
+     * Callback fired when all input boxes have been filled
+     * Receives the complete OTP string
+     */
+    onComplete?: (value: string) => void;
+    /**
+     * Callback when the OTP value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Callback when the OTP text changes
+     */
+    onChangeText?: (value: string) => void;
+    /**
+     * Callback when an input field loses focus
+     */
+    onBlur?: (value: any) => void;
+    /**
+     * Callback when an input field is clicked
+     */
+    onClick?: () => void;
+    /**
+     * Callback when an input field gains focus
+     */
+    onFocus?: () => void;
+    /**
+     * Pattern for input validation
+     * Can be a RegExp or a string pattern
+     */
+    pattern?: RegExp | string;
+    /**
+     * Function to transform pasted content
+     */
+    pasteTransformer?: (pasted: string) => string;
+    /**
+     * Specific values that the OTP input can take
+     * Used for step-based OTP input
+     */
+    stepValues?: number[];
+    /**
+     * Size of the input fields
+     */
+    size?: Size;
+    /**
+     * Shadow effect for the input fields
+     */
+    shadow?: Shadow | Elevation | ViewProps;
+    /**
+     * Shape of the input fields
+     */
+    shape?: Shape;
+    /**
+     * Variant of the input fields
+     */
+    variant?: Variant;
+    /**
+     * Gap between input fields
+     */
+    gap?: number;
+    /**
+     * Custom styling for the component
+     */
+    views?: OTPInputStyles;
+}
+export interface OTPInputViewProps extends OTPInputProps {
+    /**
+     * Current OTP value
+     */
+    value: string;
+    /**
+     * Whether the input is focused
+     */
+    isFocused: boolean;
+    /**
+     * Whether the input is hovered
+     */
+    isHovered: boolean;
+    /**
+     * Setter for the OTP value
+     */
+    setValue: (value: string) => void;
+    /**
+     * Setter for the focused state
+     */
+    setIsFocused: (isFocused: boolean) => void;
+    /**
+     * Setter for the hovered state
+     */
+    setIsHovered: (isHovered: boolean) => void;
+}

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

@@ -0,0 +1,22 @@
+import { ClipboardEvent, KeyboardEvent, ChangeEvent } from 'react';
+import { OTPInputProps } from './OTPInput.props';
+export declare const useOTPInputState: ({ value: controlledValue, defaultValue, length, onChange, onChangeText, onComplete, pattern, stepValues, pasteTransformer, }: OTPInputProps) => {
+    value: string;
+    setValue: (newValue: string) => void;
+    isFocused: boolean;
+    setIsFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    isHovered: boolean;
+    setIsHovered: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    inputRef: import("react").RefObject<HTMLInputElement>;
+    containerRef: import("react").RefObject<HTMLDivElement>;
+    mirrorSelectionStart: number | null;
+    mirrorSelectionEnd: number | null;
+    setMirrorSelectionStart: import("react").Dispatch<import("react").SetStateAction<number | null>>;
+    setMirrorSelectionEnd: import("react").Dispatch<import("react").SetStateAction<number | null>>;
+    setInputRef: (ref: HTMLInputElement | null) => void;
+    handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    handleKeyDown: (_: KeyboardEvent<HTMLInputElement>) => void;
+    handlePaste: (e: ClipboardEvent<HTMLInputElement>) => void;
+};

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

@@ -0,0 +1,16 @@
+import { ViewProps } from 'app-studio';
+/**
+ * Type of input for OTP fields
+ */
+export declare type OTPInputType = 'text' | 'password' | 'number';
+/**
+ * Styles for different parts of the OTP input component
+ */
+export declare type OTPInputStyles = {
+    container?: ViewProps;
+    input?: ViewProps;
+    box?: ViewProps;
+    text?: ViewProps;
+    label?: ViewProps;
+    helperText?: ViewProps;
+};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { OTPInputViewProps } from './OTPInput.props';
+export declare const OTPInputContext: React.Context<{
+    slots: Array<{
+        char: string | null;
+        placeholderChar: string | null;
+        isActive: boolean;
+        hasFakeCaret: boolean;
+    }>;
+    isFocused: boolean;
+    isHovering: boolean;
+}>;
+declare const OTPInputView: React.FC<OTPInputViewProps & {
+    setInputRef: (ref: HTMLInputElement | null) => void;
+    inputRef: React.RefObject<HTMLInputElement>;
+    containerRef: React.RefObject<HTMLDivElement>;
+    mirrorSelectionStart: number | null;
+    mirrorSelectionEnd: number | null;
+    setMirrorSelectionStart: (value: number | null) => void;
+    setMirrorSelectionEnd: (value: number | null) => void;
+    handlePaste: (e: React.ClipboardEvent<HTMLInputElement>) => void;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    stepValues?: number[];
+}>;
+export default OTPInputView;

package/dist/components/OTPInput/OTPInput/sync-timeouts.d.ts

@@ -0,0 +1 @@
+export declare function syncTimeouts(cb: (...args: any[]) => unknown): any[];

package/dist/components/OTPInput/OTPInput.d.ts

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

package/dist/components/OTPInput/examples/Default.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const DefaultOTPInput: () => React.JSX.Element;
+export declare const CustomizedOTPInput: () => React.JSX.Element;
+export declare const OTPInputWithLabel: () => React.JSX.Element;

package/dist/components/OTPInput/examples/OnComplete.d.ts

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

package/dist/components/OTPInput/examples/PasswordOTP.d.ts

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

package/dist/components/OTPInput/examples/StepValues.d.ts

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

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

@@ -0,0 +1,4 @@
+export * from './Default';
+export * from './PasswordOTP';
+export * from './StepValues';
+export * from './OnComplete';

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

@@ -0,0 +1,60 @@
+import { ViewProps } from 'app-studio';
+import { PaginationStyles, PageSizeOption, Size, Variant, Shape } from './Pagination.type';
+export interface PaginationProps extends ViewProps {
+    /**
+     * The current page number (1-based)
+     */
+    currentPage: number;
+    /**
+     * The total number of pages
+     */
+    totalPages: number;
+    /**
+     * Callback function when page changes
+     */
+    onPageChange: (page: number) => void;
+    /**
+     * The number of items per page
+     */
+    pageSize?: number;
+    /**
+     * Available page size options
+     */
+    pageSizeOptions?: PageSizeOption[];
+    /**
+     * Callback function when page size changes
+     */
+    onPageSizeChange?: (pageSize: number) => void;
+    /**
+     * Whether to show the page size selector
+     */
+    showPageSizeSelector?: boolean;
+    /**
+     * Whether to show the page information text (e.g., "Page 1 of 10")
+     */
+    showPageInfo?: boolean;
+    /**
+     * The maximum number of page buttons to show
+     */
+    maxPageButtons?: number;
+    /**
+     * Whether to show the first and last page buttons
+     */
+    showFirstLastButtons?: boolean;
+    /**
+     * The size of the pagination component
+     */
+    size?: Size;
+    /**
+     * The visual style variant of the pagination component
+     */
+    variant?: Variant;
+    /**
+     * The shape of the pagination buttons
+     */
+    shape?: Shape;
+    /**
+     * Custom styles for different parts of the pagination component
+     */
+    views?: PaginationStyles;
+}

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

@@ -0,0 +1,3 @@
+export declare const usePaginationState: (currentPage: number, totalPages: number, maxPageButtons: number) => {
+    visiblePageNumbers: (string | number)[];
+};

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

@@ -0,0 +1,7 @@
+import { ViewProps } from 'app-studio';
+import { Size, Variant, Shape } from './Pagination.type';
+export declare const PaginationSizes: Record<Size, ViewProps>;
+export declare const PaginationVariants: Record<Variant, ViewProps>;
+export declare const PaginationShapes: Record<Shape, ViewProps>;
+export declare const ActivePageButtonStyles: ViewProps;
+export declare const DisabledButtonStyles: ViewProps;

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;