@app-studio/web 0.9.86 → 0.9.89

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

@@ -1,145 +0,0 @@
-/// <reference types="react" />
-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;
-    onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => 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

@@ -1,23 +0,0 @@
-import { ClipboardEvent, KeyboardEvent, ChangeEvent } from 'react';
-import { OTPInputProps } from './OTPInput.props';
-export declare const useOTPInputState: ({ value: controlledValue, defaultValue, length, onChange, onChangeText, onComplete, onKeyDown, onKeyPress, onBlur, onFocus, isReadOnly, isDisabled, 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;
-    handleKeyPress: (e: KeyboardEvent<HTMLInputElement>) => void;
-    handlePaste: (e: ClipboardEvent<HTMLInputElement>) => void;
-};

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

@@ -1,15 +0,0 @@
-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 = {
-    input?: ViewProps;
-    container?: ViewProps;
-    text?: ViewProps;
-    label?: ViewProps;
-    helperText?: ViewProps;
-};

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

@@ -1,29 +0,0 @@
-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[];
-    handleKeyPress: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-}>;
-export default OTPInputView;

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

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

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

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

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

@@ -1,60 +0,0 @@
-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

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

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

@@ -1,7 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

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

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

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

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

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

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

@@ -1,69 +0,0 @@
-/// <reference types="react" />
-import { ViewProps } from 'app-studio';
-export interface ProgressBarStyles {
-    container?: ViewProps;
-    bar?: ViewProps;
-    track?: React.SVGAttributes<SVGCircleElement>;
-    indicator?: React.SVGAttributes<SVGCircleElement>;
-    text?: ViewProps;
-}
-export interface ProgressBarProps extends ViewProps {
-    /**
-     * The shape of the progress bar
-     * @default 'linear'
-     */
-    shape?: 'linear' | 'circle';
-    /**
-     * Current progress value
-     */
-    value?: number;
-    /**
-     * Maximum progress value
-     */
-    max?: number;
-    /**
-     * Color of the filled portion
-     */
-    color?: string;
-    /**
-     * Background color of the track
-     */
-    backgroundColor?: string;
-    /**
-     * Height of the progress bar (linear) or size (circle)
-     */
-    height?: number | string;
-    /**
-     * Diameter of the circle (alias for height/width when shape is circle)
-     */
-    size?: number;
-    /**
-     * Border radius for rounded corners (linear only)
-     */
-    radius?: number | string;
-    /**
-     * Width of the stroke (circle only)
-     */
-    strokeWidth?: number;
-    /**
-     * Whether to show the percentage label in the center (circle only)
-     */
-    showLabel?: boolean;
-    /**
-     * Color of the label text (circle only)
-     */
-    labelColor?: string;
-    /**
-     * Whether to animate the progress change smoothly
-     * @default true
-     */
-    animated?: boolean;
-    /**
-     * Duration of the animation
-     */
-    animationDuration?: string;
-    /**
-     * Custom styles for container or bar
-     */
-    views?: ProgressBarStyles;
-}

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

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ProgressBarProps } from './ProgressBar.props';
-declare const ProgressBarView: React.FC<ProgressBarProps>;
-export default ProgressBarView;

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ProgressBarProps } from './ProgressBar/ProgressBar.props';
-export declare const ProgressBar: React.FC<ProgressBarProps>;
-export * from './ProgressBar/ProgressBar.props';

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

@@ -1,160 +0,0 @@
-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

@@ -1,17 +0,0 @@
-/// <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

@@ -1,7 +0,0 @@
-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 getHandle: (themeMode: string) => Record<Variant, ViewProps>;
-export declare const HandleVariants: Record<Variant, ViewProps>;
-export declare const HandleIconStyles: Record<Orientation, ViewProps>;

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

@@ -1,56 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

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

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

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