@app-studio/web 0.8.74 → 0.8.77

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

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

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

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

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

@@ -0,0 +1,104 @@
+/**
+ * Radio Props
+ *
+ * Defines the props for the Radio component following the design guidelines.
+ */
+import React from 'react';
+import { Elevation } from '../../../../utils/elevation';
+import { InputProps, Shadow } from 'app-studio';
+import { RadioStyles, Size } from './Radio.type';
+import { ViewProps } from 'app-studio';
+/**
+ * Props for the Radio component
+ */
+export interface RadioProps extends Omit<InputProps, 'size'> {
+    /**
+     * Optional identifier for the radio element
+     */
+    id?: string;
+    /**
+     * Optional custom icon for the radio element
+     */
+    icon?: React.ReactNode;
+    /**
+     * Optional error message or state
+     */
+    error?: any;
+    /**
+     * Optional name attribute for the radio element
+     */
+    name?: string;
+    /**
+     * Optional label text for the radio element
+     */
+    label?: string;
+    /**
+     * Optional value for the radio element
+     */
+    value?: string;
+    /**
+     * Optional checked state for the radio element
+     */
+    isChecked?: boolean;
+    /**
+     * Optional default selected state for the radio element
+     */
+    defaultIsSelected?: boolean;
+    /**
+     * Optional read-only state for the radio element
+     */
+    isReadOnly?: boolean;
+    /**
+     * Optional disabled state for the radio element
+     */
+    isDisabled?: boolean;
+    /**
+     * Optional position for the label
+     */
+    labelPosition?: 'left' | 'right';
+    /**
+     * Optional callback for change events
+     */
+    onChange?: Function;
+    /**
+     * Optional callback for value change events
+     */
+    onValueChange?: Function;
+    /**
+     * Optional custom styles for the radio element
+     */
+    views?: RadioStyles;
+    /**
+     * Optional size for the radio element
+     */
+    size?: Size;
+    /**
+     * Optional shadow for the radio element
+     */
+    shadow?: Shadow | Elevation | ViewProps;
+    /**
+     * Optional info text for the radio element
+     */
+    infoText?: string;
+}
+/**
+ * Props for the Radio view component
+ */
+export interface RadioViewProps extends RadioProps {
+    /**
+     * Optional hover state for the radio element
+     */
+    isHovered?: boolean;
+    /**
+     * Optional setter for the hover state
+     */
+    setIsHovered?: (hovered: boolean) => void;
+    /**
+     * Optional selected state for the radio element
+     */
+    isSelected?: boolean;
+    /**
+     * Optional setter for the selected state
+     */
+    setIsSelected?: (selected: boolean) => void;
+}

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

@@ -0,0 +1,16 @@
+/**
+ * Radio State
+ *
+ * Manages the state for the Radio component.
+ */
+import React from 'react';
+import { RadioProps } from './Radio.props';
+/**
+ * Custom hook to manage the state of the Radio component
+ */
+export declare const useRadioState: ({ defaultIsSelected, isChecked, }: RadioProps) => {
+    isHovered: boolean;
+    setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
+    isSelected: boolean;
+    setIsSelected: React.Dispatch<React.SetStateAction<boolean>>;
+};

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';