@app-studio/web 0.8.73 → 0.8.76

package/dist/components/Form/Switch/examples/designSystem.d.ts

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

package/dist/components/Form/Switch/examples/index.d.ts

@@ -1,6 +1,7 @@
 export * from './ChildSwitch';
 export * from './ColorScheme';
 export * from './Default';
+export * from './designSystem';
 export * from './DisabledInput';
 export * from './FormSwitch';
 export * from './ReadOnlyInput';

package/dist/components/Form/TextArea/TextArea/TextArea.view.d.ts

@@ -1,3 +1,9 @@
+/**
+ * TextArea View Component
+ *
+ * Renders a multi-line text input field with various styles and states
+ * according to the design guidelines.
+ */
 import React from 'react';
 import { TextAreaViewProps } from './TextArea.props';
 declare const TextAreaView: React.FC<TextAreaViewProps>;

package/dist/components/Form/TextArea/examples/designSystem.d.ts

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

package/dist/components/Form/TextArea/examples/index.d.ts

@@ -1,5 +1,6 @@
 export * from './ColorScheme';
 export * from './Default';
+export * from './designSystem';
 export * from './DisabledInput';
 export * from './ErrorInput';
 export * from './HelperText';

package/dist/components/Form/TextField/TextField/TextField.view.d.ts

@@ -1,3 +1,9 @@
+/**
+ * TextField View Component
+ *
+ * Renders a text input field with various styles and states
+ * according to the design guidelines.
+ */
 import React from 'react';
 import { TextFieldViewProps } from './TextField.props';
 declare const TextFieldView: React.FC<TextFieldViewProps>;

package/dist/components/Form/TextField/examples/designSystem.d.ts

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

package/dist/components/Form/TextField/examples/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Default';
+export * from './designSystem';
 export * from './DisabledInput';
 export * from './ErrorInput';
 export * from './HelperText';

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { OTPInputProps } from '../OTPInput/OTPInput/OTPInput.props';
+/**
+ * OTPInput component for entering one-time passwords or verification codes with Formik integration.
+ * Provides multiple input fields for entering digits with auto-focus functionality.
+ * Supports step-based input and improved accessibility.
+ */
+export declare const FormikOTPInput: React.FC<OTPInputProps>;

package/dist/components/Formik/Formik.Slider.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SliderProps } from '../Slider/Slider/Slider.props';
+/**
+ * Slider component integrated with Formik for form state management.
+ * Allows users to select a value from a range by moving a handle.
+ */
+export declare const FormikSlider: React.FC<SliderProps>;

package/dist/components/Formik/examples/FormikOTPInput.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const FormikOTPInputExample: () => React.JSX.Element;
+export declare const FormikCustomOTPInputExample: () => React.JSX.Element;
+export declare const FormikPasswordOTPExample: () => React.JSX.Element;
+export declare const FormikStepValuesOTPExample: () => React.JSX.Element;

package/dist/components/Formik/examples/FormikSlider.d.ts

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

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

@@ -2,8 +2,10 @@ export * from './FormikCheckbox';
 export * from './FormikComboBox';
 export * from './FormikCountryPicker';
 export * from './FormikDatePicker';
+export * from './FormikOTPInput';
 export * from './FormikPassword';
 export * from './FormikSelect';
+export * from './FormikSlider';
 export * from './FormikSwitch';
 export * from './FormikTextArea';
 export * from './FormikTextField';

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

@@ -8,3 +8,5 @@ export { FormikTextField } from './Formik.TextField';
 export { FormikPassword } from './Formik.Password';
 export { FormikForm } from './Formik.Form';
 export { FormikComboBox } from './Formik.ComboBox';
+export { FormikSlider } from './Formik.Slider';
+export { FormikOTPInput } from './Formik.OTPInput';

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

@@ -0,0 +1,64 @@
+/**
+ * Gradient Props
+ *
+ * Defines the props for the Gradient component following the design guidelines.
+ */
+/// <reference types="react" />
+import { ViewProps } from 'app-studio';
+import { GradientType, LinearDirection, RadialShape, RadialPosition, ColorStop, GradientStyles } from './Gradient.type';
+/**
+ * Props for the Gradient component
+ */
+export interface GradientProps extends Omit<ViewProps, 'colors'> {
+    /**
+     * Type of gradient (linear, radial, or conic)
+     * @default 'linear'
+     */
+    type?: GradientType;
+    /**
+     * Direction for linear gradients
+     * @default 'to-right'
+     */
+    direction?: LinearDirection;
+    /**
+     * Shape for radial gradients
+     * @default 'circle'
+     */
+    shape?: RadialShape;
+    /**
+     * Position for radial gradients
+     * @default 'center'
+     */
+    position?: RadialPosition;
+    /**
+     * Starting color for simple two-color gradients
+     */
+    from?: string;
+    /**
+     * Ending color for simple two-color gradients
+     */
+    to?: string;
+    /**
+     * Array of color stops for multi-color gradients
+     * Takes precedence over from/to if provided
+     */
+    colors?: ColorStop[];
+    /**
+     * Whether to animate the gradient
+     * @default false
+     */
+    animate?: boolean;
+    /**
+     * Animation duration in seconds
+     * @default 3
+     */
+    animationDuration?: number;
+    /**
+     * Children to render inside the gradient
+     */
+    children?: React.ReactNode;
+    /**
+     * Custom styles for the gradient
+     */
+    views?: GradientStyles;
+}

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

@@ -0,0 +1,82 @@
+/**
+ * Gradient Styles
+ *
+ * Defines the styles for the Gradient 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 { GradientType, ColorStop } from './Gradient.type';
+/**
+ * Maps direction strings to CSS gradient directions
+ */
+export declare const DirectionMap: Record<string, string>;
+/**
+ * Maps position strings to CSS position values
+ */
+export declare const PositionMap: Record<string, string>;
+/**
+ * Default color stops for different gradient types
+ */
+export declare const DefaultColorStops: Record<GradientType, ColorStop[]>;
+/**
+ * Generates a CSS gradient string based on the provided parameters
+ */
+export declare const generateGradientString: (type: GradientType, colors: ColorStop[], direction?: string | undefined, shape?: "circle" | "ellipse" | undefined, position?: string | undefined) => string;
+/**
+ * Animation keyframes for animated gradients
+ */
+export declare const GradientAnimations: {
+    linear: {
+        '@keyframes gradient-animation': {
+            '0%': {
+                backgroundPosition: string;
+            };
+            '50%': {
+                backgroundPosition: string;
+            };
+            '100%': {
+                backgroundPosition: string;
+            };
+        };
+        animation: string;
+        backgroundSize: string;
+    };
+    radial: {
+        '@keyframes gradient-animation': {
+            '0%': {
+                backgroundPosition: string;
+            };
+            '50%': {
+                backgroundSize: string;
+            };
+            '100%': {
+                backgroundPosition: string;
+                backgroundSize: string;
+            };
+        };
+        animation: string;
+        backgroundSize: string;
+    };
+    conic: {
+        '@keyframes gradient-animation': {
+            '0%': {
+                transform: string;
+            };
+            '100%': {
+                transform: string;
+            };
+        };
+        animation: string;
+    };
+};
+/**
+ * Default styles for the Gradient component
+ */
+export declare const DefaultGradientStyles: {
+    container: ViewProps;
+    content: ViewProps;
+};

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

@@ -0,0 +1,37 @@
+/**
+ * Gradient Types
+ *
+ * Defines the types for the Gradient component following the design guidelines.
+ */
+import { ViewProps } from 'app-studio';
+/**
+ * Gradient type - linear or radial
+ */
+export declare type GradientType = 'linear' | 'radial' | 'conic';
+/**
+ * Direction for linear gradients
+ * Can be a predefined direction or a custom angle in degrees
+ */
+export declare type LinearDirection = 'to-right' | 'to-left' | 'to-bottom' | 'to-top' | 'to-top-right' | 'to-top-left' | 'to-bottom-right' | 'to-bottom-left' | string;
+/**
+ * Shape for radial gradients
+ */
+export declare type RadialShape = 'circle' | 'ellipse';
+/**
+ * Position for radial gradients
+ */
+export declare type RadialPosition = 'center' | 'top' | 'right' | 'bottom' | 'left' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | string;
+/**
+ * Color stop for gradients
+ */
+export interface ColorStop {
+    color: string;
+    position?: string | number;
+}
+/**
+ * Styles for the Gradient component
+ */
+export interface GradientStyles {
+    container?: ViewProps;
+    content?: ViewProps;
+}

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

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

package/dist/components/Gradient/Gradient.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Gradient Component
+ *
+ * A component for creating and displaying various types of gradients
+ * following the design system guidelines.
+ */
+import React from 'react';
+import { GradientProps } from './Gradient/Gradient.props';
+/**
+ * Gradient Component
+ *
+ * @example
+ * // Basic linear gradient
+ * <Gradient from="blue.500" to="purple.500" height="200px" width="100%" />
+ *
+ * @example
+ * // Radial gradient with content
+ * <Gradient
+ *   type="radial"
+ *   colors={[
+ *     { color: 'red.500', position: '0%' },
+ *     { color: 'orange.500', position: '50%' },
+ *     { color: 'yellow.500', position: '100%' }
+ *   ]}
+ *   height="200px"
+ * >
+ *   <Text color="white">Content inside gradient</Text>
+ * </Gradient>
+ */
+export declare const Gradient: React.FC<GradientProps>;

package/dist/components/Gradient/examples/animated.d.ts

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

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

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

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

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

package/dist/components/Gradient/examples/directions.d.ts

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

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

@@ -0,0 +1,7 @@
+export * from './default';
+export * from './types';
+export * from './directions';
+export * from './multicolor';
+export * from './animated';
+export * from './withContent';
+export * from './designSystem';

package/dist/components/Gradient/examples/multicolor.d.ts

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

package/dist/components/Gradient/examples/types.d.ts

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

package/dist/components/Gradient/examples/withContent.d.ts

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

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

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

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

@@ -12,6 +12,16 @@ export interface HoverCardProps {
         container?: ViewProps;
         content?: ViewProps;
     };
+    /**
+     * Delay in milliseconds before the card opens on hover
+     * @default 200
+     */
+    openDelay?: number;
+    /**
+     * Delay in milliseconds before the card closes after hover stops
+     * @default 300
+     */
+    closeDelay?: number;
 }
 export interface HoverCardTriggerProps {
     /**
@@ -24,6 +34,12 @@ export interface HoverCardTriggerProps {
     views?: {
         container?: ViewProps;
     };
+    /**
+     * When true, the trigger will be rendered as a child element instead of a wrapper
+     * Child must accept forwarded ref and spread props
+     * @default false
+     */
+    asChild?: boolean;
     /**
      * Additional props to be spread to the trigger element
      */
@@ -48,6 +64,11 @@ export interface HoverCardContentProps {
      * The alignment of the content relative to the trigger
      */
     align?: 'start' | 'center' | 'end';
+    /**
+     * Distance in pixels between the trigger and the content
+     * @default 8
+     */
+    sideOffset?: number;
     /**
      * Additional props to be spread to the content element
      */

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

@@ -1,5 +1,12 @@
 /// <reference types="react" />
-export declare const useHoverCardState: () => {
+import { HoverCardProps } from './HoverCard.props';
+export declare const useHoverCardState: ({ openDelay, closeDelay, }?: Pick<HoverCardProps, 'openDelay' | 'closeDelay'>) => {
     isOpen: boolean;
-    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    openCard: () => void;
+    closeCard: () => void;
+    cancelCloseTimer: () => void;
+    triggerRef: import("react").RefObject<HTMLDivElement>;
+    contentRef: import("react").RefObject<HTMLDivElement>;
+    contentId: string;
+    triggerId: string;
 };

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

@@ -1,3 +1,5 @@
 import { ViewProps } from 'app-studio';
+import { CSSProperties } from 'react';
 import { Alignment, Side } from './HoverCard.type';
-export declare const ContentPositions: Record<Side, (align: Alignment) => ViewProps>;
+export declare const ContentPositions: Record<Side, (align: Alignment, sideOffset?: number) => ViewProps>;
+export declare const getContentPositionStyles: (triggerRect: DOMRect | null, side?: Side, align?: Alignment, sideOffset?: number) => CSSProperties;

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

@@ -1,6 +1,13 @@
+/// <reference types="react" />
 export declare type Side = 'top' | 'right' | 'bottom' | 'left';
 export declare type Alignment = 'start' | 'center' | 'end';
 export interface HoverCardContextType {
     isOpen: boolean;
-    setIsOpen: (isOpen: boolean) => void;
+    openCard: () => void;
+    closeCard: () => void;
+    cancelCloseTimer: () => void;
+    triggerRef: React.RefObject<HTMLDivElement>;
+    contentRef: React.RefObject<HTMLDivElement>;
+    contentId: string;
+    triggerId: string;
 }

package/dist/components/HoverCard/examples/delays.d.ts

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

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

@@ -1 +1,2 @@
 export * from './default';
+export * from './delays';

package/dist/components/Icon/Icon.d.ts

@@ -5,6 +5,8 @@ export interface IconProps extends ViewProps {
     filled?: boolean;
     orientation?: 'left' | 'right' | 'up' | 'down';
 }
+export declare const UserIcon: React.FC<IconProps>;
+export declare const HelpIcon: ({ widthHeight, color, filled, strokeWidth, ...props }: IconProps) => React.JSX.Element;
 export declare const ChevronIcon: React.FC<IconProps>;
 export declare const DragHandleIcon: React.FC<IconProps>;
 export declare const FileIcon: React.FC<IconProps>;
@@ -32,6 +34,7 @@ export declare const BookmarkIcon: React.FC<IconProps>;
 export declare const CloudIcon: React.FC<IconProps>;
 export declare const CopyIcon: React.FC<IconProps>;
 export declare const DustBinIcon: React.FC<IconProps>;
+export declare const DeleteIcon: React.FC<IconProps>;
 export declare const EditIcon: React.FC<IconProps>;
 export declare const ErrorIcon: React.FC<IconProps>;
 export declare const DownloadIcon: React.FC<IconProps>;
@@ -77,3 +80,5 @@ export declare const ZoomOutIcon: React.FC<IconProps>;
 export declare const TextIcon: React.FC<IconProps>;
 export declare const ShapeIcon: React.FC<IconProps>;
 export declare const RotateIcon: React.FC<IconProps>;
+export declare const DocumentIcon: React.FC<IconProps>;
+export declare const ChartIcon: React.FC<IconProps>;

package/dist/components/{Layout/Input → Input}/FieldContainer/FieldContainer/FieldContainer.props.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextFieldStyles } from '../../../../Layout/configs/Input.type';
+import { TextFieldStyles } from '../../Input.type';
 import { ViewProps } from 'app-studio';
 export interface ContainerProps extends ViewProps {
     /**

package/dist/components/Input/FieldContainer/FieldContainer.d.ts

@@ -0,0 +1,9 @@
+/**
+ * FieldContainer Component
+ *
+ * Renders a container for a form field with helper text and error handling
+ * according to the design guidelines.
+ */
+import React from 'react';
+import { ContainerProps } from './FieldContainer/FieldContainer.props';
+export declare const FieldContainer: React.FC<ContainerProps>;

package/dist/components/{Layout/Input → Input}/FieldContent/FieldContent/FieldContent.props.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Shape, Size, TextFieldStyles, Variant } from '../../../../Layout/configs/Input.type';
-import { Elevation } from '../../../../../utils/elevation';
-import { Shadow, ViewProps } from 'app-studio';
+import { Shape, Size, TextFieldStyles, Variant } from '../../Input.type';
+import { ViewProps } from 'app-studio';
 export interface ContentProps extends Omit<ViewProps, 'size'> {
     /**
      * The color of the Content component.
@@ -18,7 +17,7 @@ export interface ContentProps extends Omit<ViewProps, 'size'> {
     /**
      * Indicates whether the field has label
      */
-    isWithLabel?: boolean;
+    showLabel?: boolean;
     /**
      * Determines whether the Content component is disabled. Default value is false.
      */
@@ -59,8 +58,4 @@ export interface ContentProps extends Omit<ViewProps, 'size'> {
      * CSS styles applied to the Content component. Default value is an empty object.
      */
     views?: TextFieldStyles;
-    /**
-     * The shadow effect applied to the Content component.
-     */
-    shadow?: Shadow | Elevation | ViewProps;
 }

package/dist/components/Input/FieldContent/FieldContent.d.ts

@@ -0,0 +1,9 @@
+/**
+ * FieldContent Component
+ *
+ * Renders the content area of a form field with various styles and states
+ * according to the design guidelines.
+ */
+import React from 'react';
+import { ContentProps } from './FieldContent/FieldContent.props';
+export declare const FieldContent: React.FC<ContentProps>;

package/dist/components/{Layout/Input → Input}/FieldLabel/FieldLabel/FieldLabel.props.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Size } from '../../../../Layout/configs/Input.type';
+import { Size } from '../../Input.type';
 import { ViewProps } from 'app-studio';
 export interface LabelProps extends Omit<ViewProps, 'size'> {
     /**

package/dist/components/Input/FieldLabel/FieldLabel.d.ts

@@ -0,0 +1,9 @@
+/**
+ * FieldLabel Component
+ *
+ * Renders a label for a form field with various styles and states
+ * according to the design guidelines.
+ */
+import React from 'react';
+import { LabelProps } from './FieldLabel/FieldLabel.props';
+export declare const FieldLabel: React.FC<LabelProps>;

package/dist/components/{Layout/Input → Input}/FieldLayout/FieldLayout/FieldLayout.props.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Size, TextFieldStyles } from '../../../../Layout/configs/Input.type';
+import { Size, TextFieldStyles } from '../../Input.type';
 import { ViewProps } from 'app-studio';
 export interface FieldProps extends Omit<ViewProps, 'size'> {
     /**

package/dist/components/Input/FieldWrapper/FieldWrapper.d.ts

@@ -0,0 +1,9 @@
+/**
+ * FieldWrapper Component
+ *
+ * Renders a wrapper for form field content with appropriate styling
+ * according to the design guidelines.
+ */
+import React from 'react';
+import { WrapperFieldProps } from './FieldWrapper.props';
+export declare const FieldWrapper: React.FC<WrapperFieldProps>;

package/dist/components/Input/HelperText/HelperText.d.ts

@@ -0,0 +1,9 @@
+/**
+ * HelperText Component
+ *
+ * Renders helper text for form fields with appropriate styling
+ * according to the design guidelines.
+ */
+import React from 'react';
+import { HelperTextProps } from './HelperText.props';
+export declare const HelperText: React.FC<HelperTextProps>;

package/dist/components/{Layout/Input → Input}/HelperText/HelperText.props.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextFieldStyles } from '../../../Layout/configs/Input.type';
+import { TextFieldStyles } from '../Input.type';
 import { ViewProps } from 'app-studio';
 export interface HelperTextProps extends ViewProps {
     /**