@app-studio/web 0.8.74 → 0.8.76

package/dist/components/Form/Radio/Radio/Radio.style.d.ts

@@ -0,0 +1,92 @@
+/**
+ * Radio Styles
+ *
+ * Defines the styles for the Radio 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 { Size, Variant } from './Radio.type';
+/**
+ * Size configurations for the Radio component
+ * Following the 4px grid system
+ */
+export declare const Sizes: Record<Size, ViewProps>;
+/**
+ * Dot sizes for the Radio component
+ * Proportional to the component size
+ */
+export declare const DotSizes: Record<Size, ViewProps>;
+/**
+ * Variant styles for the Radio component
+ */
+export declare const VariantStyles: Record<Variant, ViewProps>;
+/**
+ * Dot styles for the Radio component
+ */
+export declare const DotStyles: Record<Variant, ViewProps>;
+/**
+ * State styles for the Radio component
+ */
+export declare const StateStyles: {
+    hover: {
+        selected: {
+            borderColor: string;
+        };
+        unselected: {
+            borderColor: string;
+        };
+    };
+    disabled: {
+        selected: {
+            borderColor: string;
+            opacity: number;
+        };
+        unselected: {
+            borderColor: string;
+            opacity: number;
+        };
+    };
+    error: {
+        selected: {
+            borderColor: string;
+        };
+        unselected: {
+            borderColor: string;
+        };
+    };
+};
+/**
+ * Dot state styles for the Radio component
+ */
+export declare const DotStateStyles: {
+    hover: {
+        selected: {
+            backgroundColor: string;
+        };
+        unselected: {
+            backgroundColor: string;
+        };
+    };
+    disabled: {
+        selected: {
+            backgroundColor: string;
+            opacity: number;
+        };
+        unselected: {
+            backgroundColor: string;
+            opacity: number;
+        };
+    };
+    error: {
+        selected: {
+            backgroundColor: string;
+        };
+        unselected: {
+            backgroundColor: string;
+        };
+    };
+};

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

@@ -0,0 +1,10 @@
+/**
+ * Radio View Component
+ *
+ * Renders a radio button with various styles and states
+ * according to the design guidelines.
+ */
+import React from 'react';
+import { RadioViewProps } from './Radio.props';
+declare const RadioView: React.FC<RadioViewProps>;
+export default RadioView;

package/dist/components/Form/Radio/Radio.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Radio Component
+ *
+ * A radio button component that allows users to select one option from a set.
+ */
+import React from 'react';
+import { RadioProps } from './Radio/Radio.props';
+/**
+ * Radio allows users to select one option from a set of choices.
+ */
+export declare const Radio: React.FC<RadioProps>;

package/dist/components/Form/Radio/RadioGroup/RadioGroup.props.d.ts

@@ -0,0 +1,78 @@
+/**
+ * RadioGroup Props
+ *
+ * Defines the props for the RadioGroup component following the design guidelines.
+ */
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { Direction, RadioGroupStyles } from './RadioGroup.type';
+/**
+ * Props for the RadioGroup component
+ */
+export interface RadioGroupProps extends Omit<ViewProps, 'direction'> {
+    /**
+     * Children components (Radio buttons)
+     */
+    children: React.ReactNode;
+    /**
+     * Optional name attribute for all radio buttons in the group
+     */
+    name?: string;
+    /**
+     * Optional label for the radio group
+     */
+    label?: string;
+    /**
+     * Optional helper text for the radio group
+     */
+    helperText?: string;
+    /**
+     * Optional error message or state
+     */
+    error?: any;
+    /**
+     * Optional value for the selected radio button
+     */
+    value?: string;
+    /**
+     * Optional default value for the selected radio button
+     */
+    defaultValue?: string;
+    /**
+     * Optional callback for change events
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Optional direction for the radio group layout
+     */
+    direction?: Direction;
+    /**
+     * Optional spacing between radio buttons
+     */
+    spacing?: number;
+    /**
+     * Optional disabled state for all radio buttons in the group
+     */
+    isDisabled?: boolean;
+    /**
+     * Optional read-only state for all radio buttons in the group
+     */
+    isReadOnly?: boolean;
+    /**
+     * Optional custom styles for the radio group
+     */
+    views?: RadioGroupStyles;
+}
+/**
+ * Props for the RadioGroup view component
+ */
+export interface RadioGroupViewProps extends RadioGroupProps {
+    /**
+     * Selected value
+     */
+    selectedValue: string;
+    /**
+     * Setter for the selected value
+     */
+    setSelectedValue: (value: string) => void;
+}

package/dist/components/Form/Radio/RadioGroup/RadioGroup.state.d.ts

@@ -0,0 +1,13 @@
+/**
+ * RadioGroup State
+ *
+ * Manages the state for the RadioGroup component.
+ */
+import { RadioGroupProps } from './RadioGroup.props';
+/**
+ * Custom hook to manage the state of the RadioGroup component
+ */
+export declare const useRadioGroupState: ({ value, defaultValue, onChange, }: RadioGroupProps) => {
+    selectedValue: string;
+    setSelectedValue: (newValue: string) => void;
+};

package/dist/components/Form/Radio/RadioGroup/RadioGroup.view.d.ts

@@ -0,0 +1,10 @@
+/**
+ * RadioGroup View Component
+ *
+ * Renders a group of radio buttons with various styles and states
+ * according to the design guidelines.
+ */
+import React from 'react';
+import { RadioGroupViewProps } from './RadioGroup.props';
+declare const RadioGroupView: React.FC<RadioGroupViewProps>;
+export default RadioGroupView;

package/dist/components/Form/Radio/RadioGroup.d.ts

@@ -0,0 +1,11 @@
+/**
+ * RadioGroup Component
+ *
+ * A component that manages a group of radio buttons.
+ */
+import React from 'react';
+import { RadioGroupProps } from './RadioGroup/RadioGroup.props';
+/**
+ * RadioGroup allows users to manage a group of radio buttons.
+ */
+export declare const RadioGroup: React.FC<RadioGroupProps>;

package/dist/components/Form/Radio/examples/Default.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Default Radio Example
+ */
+import React from 'react';
+export declare const DefaultRadio: () => React.JSX.Element;

package/dist/components/Form/Radio/examples/DefaultGroup.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Default RadioGroup Example
+ */
+import React from 'react';
+export declare const DefaultRadioGroup: () => React.JSX.Element;

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

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

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

@@ -0,0 +1,3 @@
+export * from './Default';
+export * from './DefaultGroup';
+export * from './designSystem';

package/dist/components/Form/Radio/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Radio';
+export * from './RadioGroup';

package/dist/components/Form/Select/Select/Select.style.d.ts

@@ -1,4 +1,26 @@
+/**
+ * Select Styles
+ *
+ * Defines the styles for the Select 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 { Size } from './Select.type';
+/**
+ * Size configurations for the Select component
+ * Following the 4px grid system
+ */
 export declare const Sizes: Record<Size, ViewProps>;
+/**
+ * Icon sizes for the Select component
+ * Proportional to the component size
+ */
 export declare const IconSizes: Record<Size, number>;
+/**
+ * Dropdown styles for the Select component
+ */
+export declare const dropdownStyles: ViewProps;

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

@@ -1,5 +1,10 @@
 import React from 'react';
 import { MultiSelectProps, SelectViewProps } from './Select.props';
+/**
+ * MultiSelect Component
+ *
+ * Renders a selected option in a multi-select component
+ */
 export declare const MultiSelect: React.FC<MultiSelectProps>;
 declare const SelectView: React.FC<SelectViewProps>;
 export default SelectView;

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

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

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

@@ -1,5 +1,6 @@
 export * from './Color';
 export * from './Default';
+export * from './designSystem';
 export * from './Disabled';
 export * from './Error';
 export * from './Form';

package/dist/components/Form/Switch/Switch/Switch.style.d.ts

@@ -1,5 +1,49 @@
+/**
+ * Switch Styles
+ *
+ * Defines the styles for 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 { ViewProps } from 'app-studio';
 import { Size } from './Switch.type';
+/**
+ * Knob (circle) sizes for the Switch component
+ * Following the 4px grid system
+ */
 export declare const KnobSizes: Record<Size, ViewProps>;
+/**
+ * Slider (track) sizes for the Switch component
+ * Following the 4px grid system
+ */
 export declare const SliderSizes: Record<Size, ViewProps>;
+/**
+ * Padding for the Switch slider
+ * Following the 4px grid system
+ */
 export declare const SliderPadding: Record<Size, Record<string, number>>;
+/**
+ * Color schemes for the Switch component
+ */
+export declare const ColorSchemes: {
+    default: {
+        active: string;
+        inactive: string;
+        knob: string;
+        disabled: string;
+    };
+    states: {
+        hover: {
+            active: string;
+            inactive: string;
+        };
+        focus: {
+            active: string;
+            inactive: string;
+            outline: string;
+        };
+    };
+};

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

@@ -1,3 +1,9 @@
+/**
+ * Switch View Component
+ *
+ * Renders a switch toggle with various styles and states
+ * according to the design guidelines.
+ */
 import React from 'react';
 import { SwitchViewProps } from './Switch.props';
 declare const SwitchView: React.FC<SwitchViewProps>;

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/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/index.d.ts

@@ -2,6 +2,7 @@ export * from './FormikCheckbox';
 export * from './FormikComboBox';
 export * from './FormikCountryPicker';
 export * from './FormikDatePicker';
+export * from './FormikOTPInput';
 export * from './FormikPassword';
 export * from './FormikSelect';
 export * from './FormikSlider';

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

@@ -9,3 +9,4 @@ 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;
+};