@lion-npm/ui 0.0.0-stage → 1.0.2

package/src/features/inputs/components/InputsCustomSection.tsx

@@ -0,0 +1,234 @@
+import VariantList from "../../VariantList.tsx";
+import { PlatformTypes } from "../../../types/PlatformTypes.tsx";
+import { InputTypes } from "../../../types/InputTypes.tsx";
+import { AndroidInputStyleTypes } from "../../../types/Android/AndroidInputStyleTypes.tsx";
+import { IOSInputStyleTypes } from "../../../types/IOS/IOSInputStyleTypes.tsx";
+import { BootstrapInputStyleTypes } from "../../../types/Web/BootstrapInputStyleTypes.tsx";
+import { AndroidInputShapeTypes } from "../../../types/Android/AndroidInputShapeTypes.tsx";
+import { BootstrapInputShapeTypes } from "../../../types/Web/BootstrapInputShapeTypes.tsx";
+import { IOSInputShapeTypes } from "../../../types/IOS/IOSInputShapeTypes.tsx";
+import { Fragment, useState } from "react";
+import LionInput from "../../../components/inputs/LionInput.tsx";
+
+const shapesByPlatform = {
+    [PlatformTypes.ANDROID]: [
+        { label: "Small", value: AndroidInputShapeTypes.SMALL },
+        { label: "Normal", value: AndroidInputShapeTypes.NORMAL },
+    ],
+    [PlatformTypes.IOS]: [
+        { label: "Rounded", value: IOSInputShapeTypes.ROUNDED },
+        { label: "Pill", value: IOSInputShapeTypes.PILL },
+        { label: "Square", value: IOSInputShapeTypes.SQUARE },
+    ],
+    [PlatformTypes.WEB]: [
+        { label: "Rounded", value: BootstrapInputShapeTypes.ROUNDED },
+        { label: "Pill", value: BootstrapInputShapeTypes.PILL },
+        { label: "Square", value: BootstrapInputShapeTypes.SQUARE },
+    ],
+};
+
+const stylesByPlatform = {
+    [PlatformTypes.ANDROID]: [
+        { label: "Outlined", value: AndroidInputStyleTypes.OUTLINED },
+        { label: "Filled", value: AndroidInputStyleTypes.FILLED },
+    ],
+    [PlatformTypes.IOS]: [
+        { label: "Form", value: IOSInputStyleTypes.FORM },
+        { label: "Rounded Border", value: IOSInputStyleTypes.ROUNDED_BORDER },
+        { label: "Filled", value: IOSInputStyleTypes.FILLED },
+        { label: "Outlined", value: IOSInputStyleTypes.OUTLINED },
+        { label: "Plain", value: IOSInputStyleTypes.PLAIN },
+    ],
+    [PlatformTypes.WEB]: [
+        { label: "Floating", value: BootstrapInputStyleTypes.FLOATING },
+        { label: "Standard", value: BootstrapInputStyleTypes.STANDARD },
+    ],
+};
+
+export default function InputsCustomSection() {
+    const [selectedPlatform, setSelectedPlatform] = useState<PlatformTypes>(PlatformTypes.ANDROID);
+    const [selectedAndroidShape, setSelectedAndroidShape] = useState<AndroidInputShapeTypes>(AndroidInputShapeTypes.NORMAL);
+    const [selectedIOSShape, setSelectedIOSShape] = useState<IOSInputShapeTypes>(IOSInputShapeTypes.ROUNDED);
+    const [selectedWebShape, setSelectedWebShape] = useState<BootstrapInputShapeTypes>(BootstrapInputShapeTypes.ROUNDED);
+
+    const [selectedAndroidStyle, setSelectedAndroidStyle] = useState<AndroidInputStyleTypes>(AndroidInputStyleTypes.OUTLINED);
+    const [selectedIOSStyle, setSelectedIOSStyle] = useState<IOSInputStyleTypes>(IOSInputStyleTypes.ROUNDED_BORDER);
+    const [selectedWebStyle, setSelectedWebStyle] = useState<BootstrapInputStyleTypes>(BootstrapInputStyleTypes.FLOATING);
+
+    return (
+        <Fragment>
+            <h2>Inputs (Custom Cross-Platform Test)</h2>
+
+            <div className="card p-3 mb-4 bg-light">
+                <div className="row g-3">
+                    <div className="col-md-4">
+                        <label className="form-label fw-bold">Platform:</label>
+                        <div className="btn-group w-100" role="group">
+                            <button
+                                type="button"
+                                className={`btn ${selectedPlatform === PlatformTypes.ANDROID ? "btn-primary" : "btn-outline-primary"}`}
+                                onClick={() => setSelectedPlatform(PlatformTypes.ANDROID)}
+                            >
+                                Android
+                            </button>
+                            <button
+                                type="button"
+                                className={`btn ${selectedPlatform === PlatformTypes.IOS ? "btn-primary" : "btn-outline-primary"}`}
+                                onClick={() => setSelectedPlatform(PlatformTypes.IOS)}
+                            >
+                                iOS
+                            </button>
+                            <button
+                                type="button"
+                                className={`btn ${selectedPlatform === PlatformTypes.WEB ? "btn-primary" : "btn-outline-primary"}`}
+                                onClick={() => setSelectedPlatform(PlatformTypes.WEB)}
+                            >
+                                Web
+                            </button>
+                        </div>
+                    </div>
+
+                    <div className="col-md-4">
+                        <label className="form-label fw-bold">Shape:</label>
+
+                        {selectedPlatform === PlatformTypes.ANDROID && (
+                            <select
+                                className="form-select"
+                                value={selectedAndroidShape}
+                                onChange={(e) => setSelectedAndroidShape(e.target.value as AndroidInputShapeTypes)}
+                            >
+                                {shapesByPlatform[PlatformTypes.ANDROID].map((s) => (
+                                    <option key={s.value} value={s.value}>{s.label}</option>
+                                ))}
+                            </select>
+                        )}
+
+                        {selectedPlatform === PlatformTypes.IOS && (
+                            <select
+                                className="form-select"
+                                value={selectedIOSShape}
+                                onChange={(e) => setSelectedIOSShape(e.target.value as IOSInputShapeTypes)}
+                            >
+                                {shapesByPlatform[PlatformTypes.IOS].map((s) => (
+                                    <option key={s.value} value={s.value}>{s.label}</option>
+                                ))}
+                            </select>
+                        )}
+
+                        {selectedPlatform === PlatformTypes.WEB && (
+                            <select
+                                className="form-select"
+                                value={selectedWebShape}
+                                onChange={(e) => setSelectedWebShape(e.target.value as BootstrapInputShapeTypes)}
+                            >
+                                {shapesByPlatform[PlatformTypes.WEB].map((s) => (
+                                    <option key={s.value} value={s.value}>{s.label}</option>
+                                ))}
+                            </select>
+                        )}
+                    </div>
+
+                    <div className="col-md-4">
+                        <label className="form-label fw-bold">StyleType:</label>
+                        {selectedPlatform === PlatformTypes.ANDROID && (
+                            <select
+                                className="form-select"
+                                value={selectedAndroidStyle}
+                                onChange={(e) => setSelectedAndroidStyle(e.target.value as AndroidInputStyleTypes)}
+                            >
+                                {stylesByPlatform[PlatformTypes.ANDROID].map((s) => (
+                                    <option key={s.value} value={s.value}>{s.label}</option>
+                                ))}
+                            </select>
+                        )}
+
+                        {selectedPlatform === PlatformTypes.IOS && (
+                            <select
+                                className="form-select"
+                                value={selectedIOSStyle}
+                                onChange={(e) => setSelectedIOSStyle(e.target.value as IOSInputStyleTypes)}
+                            >
+                                {stylesByPlatform[PlatformTypes.IOS].map((s) => (
+                                    <option key={s.value} value={s.value}>{s.label}</option>
+                                ))}
+                            </select>
+                        )}
+
+                        {selectedPlatform === PlatformTypes.WEB && (
+                            <select
+                                className="form-select"
+                                value={selectedWebStyle}
+                                onChange={(e) => setSelectedWebStyle(e.target.value as BootstrapInputStyleTypes)}
+                            >
+                                {stylesByPlatform[PlatformTypes.WEB].map((s) => (
+                                    <option key={s.value} value={s.value}>{s.label}</option>
+                                ))}
+                            </select>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            <div className="my-4">
+                <div className="ms-3 mb-4">
+                    {/* Enabled State */}
+                    <div className="mb-4">
+                        <span className="text-muted d-block mb-2 small fw-bold">Enabled</span>
+                        <div className="row g-3">
+                            {VariantList.map((variant) => (
+                                <div key={`custom-input-${variant}-enabled`} className="col-md-4">
+                                    <LionInput
+                                        type={InputTypes.TEXT}
+                                        platform={selectedPlatform}
+                                        variant={variant}
+                                        label={`${variant} input`}
+                                        placeholder="Enter text..."
+                                        styleType={{
+                                            android: selectedAndroidStyle,
+                                            ios: selectedIOSStyle,
+                                            web: selectedWebStyle,
+                                        }}
+                                        shape={{
+                                            android: selectedAndroidShape,
+                                            ios: selectedIOSShape,
+                                            web: selectedWebShape,
+                                        }}
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+
+                    {/* Disabled State */}
+                    <div>
+                        <span className="text-muted d-block mb-2 small fw-bold">Disabled</span>
+                        <div className="row g-3">
+                            {VariantList.map((variant) => (
+                                <div key={`custom-input-${variant}-disabled`} className="col-md-4">
+                                    <LionInput
+                                        type={InputTypes.TEXT}
+                                        platform={selectedPlatform}
+                                        variant={variant}
+                                        label={`${variant} input`}
+                                        placeholder="Disabled..."
+                                        disabled={true}
+                                        styleType={{
+                                            android: selectedAndroidStyle,
+                                            ios: selectedIOSStyle,
+                                            web: selectedWebStyle,
+                                        }}
+                                        shape={{
+                                            android: selectedAndroidShape,
+                                            ios: selectedIOSShape,
+                                            web: selectedWebShape,
+                                        }}
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Fragment>
+    );
+}

package/src/features/inputs/components/InputsIOSSection.tsx

@@ -0,0 +1,156 @@
+import VariantList from "../../VariantList.tsx";
+import { IOSInputStyleTypes } from "../../../types/IOS/IOSInputStyleTypes.tsx";
+import { IOSInputShapeTypes } from "../../../types/IOS/IOSInputShapeTypes.tsx";
+import { InputTypes } from "../../../types/InputTypes.tsx";
+
+import { Fragment, useState } from "react";
+import IOSInput from "../../../components/inputs/IOSInput.tsx";
+
+const StyleTypeList: Array<{ label: string; styleType: IOSInputStyleTypes }> = [
+    { label: "Form", styleType: IOSInputStyleTypes.FORM },
+    { label: "Rounded Border", styleType: IOSInputStyleTypes.ROUNDED_BORDER },
+];
+
+const ShapeList: Array<{ label: string; shape: IOSInputShapeTypes }> = [
+    { label: "Rounded Shape", shape: IOSInputShapeTypes.ROUNDED },
+    { label: "Pill Shape", shape: IOSInputShapeTypes.PILL },
+    { label: "Square Shape", shape: IOSInputShapeTypes.SQUARE },
+];
+
+export default function InputsIOSSection() {
+    const [inputValue, setInputValue] = useState<string>("");
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setInputValue(e.target.value);
+    };
+
+    return (
+        <Fragment>
+            <h2>Inputs (iOS SwiftUI)</h2>
+
+            {StyleTypeList.map(({ label: styleLabel, styleType }) => (
+                <div key={styleType} className="my-4">
+                    <h4 className="text-primary mb-3">{styleLabel} Inputs</h4>
+
+                    {ShapeList.map(({ label: shapeLabel, shape }) => (
+                        <div key={`${styleType}-${shape}`} className="mb-5">
+                            <div className={"ms-3"}>
+                                <h6 className="text-secondary mb-3">{shapeLabel}</h6>
+                            </div>
+
+                            {/* Enabled State */}
+                            <div className="mb-4">
+                                <span className="text-muted d-block mb-2 small font-monospace">Enabled</span>
+                                <div className="row g-3">
+                                    {VariantList.map((variant) => (
+                                        <div key={`${styleType}-${shape}-${variant}-enabled`} className="col-12 col-md-6 col-lg-4">
+                                            <IOSInput
+                                                type={InputTypes.TEXT}
+                                                styleType={styleType}
+                                                shape={shape}
+                                                variant={variant}
+                                                label={`Label (${variant})`}
+                                                helperText="Texto de ayuda opcional"
+                                                required={true}
+                                                placeholder="Custom Placeholder..."
+                                                value={inputValue}
+                                                onChange={handleChange}
+                                            />
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+
+                            {/* With Value / Floating State */}
+                            <div className="mb-4">
+                                <span className="text-muted d-block mb-2 small font-monospace">With Value / Floating</span>
+                                <div className="row g-3">
+                                    {VariantList.map((variant) => (
+                                        <div key={`${styleType}-${shape}-${variant}-value`} className="col-12 col-md-6 col-lg-4">
+                                            <IOSInput
+                                                type={InputTypes.TEXT}
+                                                styleType={styleType}
+                                                shape={shape}
+                                                variant={variant}
+                                                label="Usuario"
+                                                defaultValue="lion.developer"
+                                                helperText="Campo completado"
+                                                placeholder="Custom Placeholder..."
+                                                autoComplete="off"
+                                            />
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+
+                            {/* Error State */}
+                            <div className="mb-4">
+                                <span className="text-muted d-block mb-2 small font-monospace">Error State</span>
+                                <div className="row g-3">
+                                    {VariantList.map((variant) => (
+                                        <div key={`${styleType}-${shape}-${variant}-error`} className="col-12 col-md-6 col-lg-4">
+                                            <IOSInput
+                                                type={InputTypes.TEXT}
+                                                styleType={styleType}
+                                                shape={shape}
+                                                variant={variant}
+                                                label="Correo electrónico"
+                                                defaultValue="correo-invalido"
+                                                error="El formato del correo no es válido"
+                                                placeholder="Custom Placeholder..."
+                                            />
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+
+                            {/* Disabled State */}
+                            <div className="mb-4">
+                                <span className="text-muted d-block mb-2 small font-monospace">Disabled</span>
+                                <div className="row g-3">
+                                    {VariantList.map((variant) => (
+                                        <div key={`${styleType}-${shape}-${variant}-disabled`} className="col-12 col-md-6 col-lg-4">
+                                            <IOSInput
+                                                type={InputTypes.TEXT}
+                                                styleType={styleType}
+                                                shape={shape}
+                                                variant={variant}
+                                                label="Deshabilitado"
+                                                defaultValue="Valor bloqueado"
+                                                disabled={true}
+                                                helperText="No editable"
+                                                placeholder="Custom Placeholder..."
+                                            />
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+
+                            {/* Readonly State */}
+                            <div>
+                                <span className="text-muted d-block mb-2 small font-monospace">ReadOnly</span>
+                                <div className="row g-3">
+                                    {VariantList.map((variant) => (
+                                        <div key={`${styleType}-${shape}-${variant}-readonly`} className="col-12 col-md-6 col-lg-4">
+                                            <IOSInput
+                                                type={InputTypes.TEXT}
+                                                styleType={styleType}
+                                                shape={shape}
+                                                variant={variant}
+                                                label="ReadOnly"
+                                                defaultValue="Valor bloqueado"
+                                                readOnly={true}
+                                                helperText="No editable"
+                                                placeholder="Custom Placeholder..."
+                                            />
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            ))}
+        </Fragment>
+    );
+}

package/src/features/loadings/LoadingSection.tsx

@@ -0,0 +1,5 @@
+import { Outlet } from "react-router-dom";
+
+export default function LoadingSection() {
+    return <Outlet />
+}

package/src/features/loadings/components/LoadingBarSection.tsx

@@ -0,0 +1,74 @@
+import { Fragment, useState } from "react";
+import { ButtonTypes } from "../../../types/ButtonTypes.tsx";
+import { VariantTypes } from "../../../types/VariantTypes.tsx";
+import { PlatformTypes } from "../../../types/PlatformTypes.tsx";
+import { useLionUI } from "../../../context/LionUIComponentsContext.tsx";
+import LionButton from "../../../components/buttons/LionButton.tsx";
+import LoadingBar from "../../../components/loadings/LoadingBar.tsx";
+
+const variantsList = [
+    { type: VariantTypes.SUCCESS, name: "Success" },
+    { type: VariantTypes.INFO, name: "Info" },
+    { type: VariantTypes.PRIMARY, name: "Primary" },
+    { type: VariantTypes.DANGER, name: "Danger" },
+    { type: VariantTypes.WARNING, name: "Warning" },
+    { type: VariantTypes.LIGHT, name: "Light" },
+    { type: VariantTypes.LINK, name: "Link" },
+    { type: VariantTypes.DARK, name: "Dark" },
+    { type: VariantTypes.LION_PACKAGES, name: "Lion Packages" },
+    { type: VariantTypes.LION_PARKING, name: "Lion Parking" },
+    { type: VariantTypes.LION_TECH, name: "Lion Tech" },
+    { type: VariantTypes.LION_GLAM, name: "Lion Glam" },
+];
+
+export default function LoadingBarSection() {
+    const { updateState } = useLionUI();
+
+    // Local state exclusively for this section's testing demo
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [activeVariant, setActiveVariant] = useState<VariantTypes | string>(VariantTypes.PRIMARY);
+
+    // Trigger local loading state for 5 seconds simulation
+    const handleTriggerLoading = (variant: VariantTypes | string) => {
+        setActiveVariant(variant);
+        setIsLoading(true);
+
+        // Also update global loading if needed by the LoadingBar component, or handle it locally
+        updateState({ loading: true });
+
+        // Automatically disable loading after 5 seconds
+        setTimeout(() => {
+            setIsLoading(false);
+            updateState({ loading: false });
+        }, 5000);
+    };
+
+    return (
+        <Fragment>
+            <h2>Loading Bar Demonstrations</h2>
+            <p className="text-muted">Click any button below to trigger the loading bar for 5 seconds using its respective variant.</p>
+
+            {/* Top demonstration loading bar container using local state variant */}
+            <div className="mb-4" style={{ minHeight: "10px" }}>
+                <LoadingBar variant={activeVariant} />
+            </div>
+
+            <div className="d-flex gap-3 flex-wrap">
+                {variantsList.map((variantObj) => (
+                    <LionButton
+                        key={variantObj.type}
+                        platform={PlatformTypes.WEB}
+                        variant={variantObj.type}
+                        type={ButtonTypes.BUTTON}
+                        disabled={isLoading}
+                        onClick={() => handleTriggerLoading(variantObj.type)}
+                    >
+                        {isLoading && activeVariant === variantObj.type
+                            ? "Loading..."
+                            : `Test ${variantObj.name}`}
+                    </LionButton>
+                ))}
+            </div>
+        </Fragment>
+    );
+}

package/src/features/modals/ModalsSection.tsx

@@ -0,0 +1,5 @@
+import { Outlet } from "react-router-dom";
+
+export default function ModalsSection() {
+    return <Outlet />
+}

package/src/features/modals/components/ModalsAndroidSection.tsx

@@ -0,0 +1,108 @@
+import { Fragment } from "react";
+import { ButtonTypes } from "../../../types/ButtonTypes.tsx";
+import { AndroidShapeTypes } from "../../../types/Android/AndroidShapeTypes.tsx";
+import { AndroidStyleTypes } from "../../../types/Android/AndroidStyleTypes.tsx";
+import { VariantTypes } from "../../../types/VariantTypes.tsx";
+import { PlatformTypes } from "../../../types/PlatformTypes.tsx";
+import { SizeTypes } from "../../../types/SizeTypes.tsx";
+import { useLionUI } from "../../../context/LionUIComponentsContext.tsx";
+import LionModal from "../../../components/modals/LionModal.tsx";
+import ModalsDefaultForm from "./ModalsDefaultForm.tsx";
+import LionButton from "../../../components/buttons/LionButton.tsx";
+
+const variantsList = [
+    { type: VariantTypes.SUCCESS, name: "Success" },
+    { type: VariantTypes.INFO, name: "Info" },
+    { type: VariantTypes.PRIMARY, name: "Primary" },
+    { type: VariantTypes.DANGER, name: "Danger" },
+    { type: VariantTypes.WARNING, name: "Warning" },
+    { type: VariantTypes.LIGHT, name: "Light" },
+    { type: VariantTypes.LINK, name: "Link" },
+    { type: VariantTypes.DARK, name: "Dark" },
+    { type: VariantTypes.LION_PACKAGES, name: "Lion Packages" },
+    { type: VariantTypes.LION_PARKING, name: "Lion Parking" },
+    { type: VariantTypes.LION_TECH, name: "Lion Tech" },
+    { type: VariantTypes.LION_GLAM, name: "Lion Glam" },
+];
+
+const sizesList = [
+    { size: SizeTypes.SM, label: "SM", titleSuffix: "Small Modal" },
+    { size: SizeTypes.LG, label: "LG", titleSuffix: "Large Modal" },
+    { size: SizeTypes.XL, label: "XL", titleSuffix: "Extra Large Modal" },
+    { size: SizeTypes.LG, label: "Full", titleSuffix: "Fullscreen Modal", fullscreen: true as const },
+];
+
+const modalsConfig = variantsList.flatMap((variantObj) =>
+    sizesList.map((sizeObj) => ({
+        id: `android-modal-${variantObj.type}-${sizeObj.label.toLowerCase()}`,
+        label: sizeObj.label,
+        size: sizeObj.size,
+        fullscreen: sizeObj.fullscreen,
+        variant: variantObj.type,
+        title: `Android ${variantObj.name} ${sizeObj.titleSuffix}`,
+    }))
+);
+
+export default function ModalsAndroidSection() {
+    const { updateState } = useLionUI();
+
+    return (
+        <Fragment>
+            <h2>Modals (Android)</h2>
+
+            {variantsList.map((variantObj) => {
+                const variantModals = modalsConfig.filter(
+                    (modal) => modal.variant === variantObj.type
+                );
+
+                return (
+                    <div key={variantObj.type} className="mb-4">
+                        <h5 className="text-muted mb-2">{variantObj.name}</h5>
+                        <div className="d-flex gap-3 flex-wrap">
+                            {variantModals.map((modal) => (
+                                <LionButton
+                                    key={modal.id}
+                                    platform={PlatformTypes.ANDROID}
+                                    shape={AndroidShapeTypes.ROUNDED}
+                                    styleType={AndroidStyleTypes.TONAL}
+                                    variant={modal.variant}
+                                    type={ButtonTypes.BUTTON}
+                                    onClick={() => updateState({ modal: modal.id })}
+                                >
+                                    {modal.label}
+                                </LionButton>
+                            ))}
+                        </div>
+                    </div>
+                );
+            })}
+
+            {modalsConfig.map((modal) => (
+                <LionModal
+                    key={modal.id}
+                    platform={PlatformTypes.ANDROID}
+                    modalId={modal.id}
+                    variant={modal.variant}
+                    title={modal.title}
+                    size={modal.size}
+                    fullscreen={modal.fullscreen}
+                    body={(
+                        <ModalsDefaultForm
+                            platform={PlatformTypes.ANDROID}
+                            variant={modal.variant}
+                        />
+                    )}
+                    buttons={(
+                        <LionButton
+                            variant={VariantTypes.MODAL}
+                            type={ButtonTypes.BUTTON}
+                            onClick={() => alert("Clicked")}
+                        >
+                            Click
+                        </LionButton>
+                    )}
+                />
+            ))}
+        </Fragment>
+    );
+}

package/src/features/modals/components/ModalsDefaultForm.tsx

@@ -0,0 +1,31 @@
+import { Col, Form, Row } from "react-bootstrap";
+import ModalsDefaultInput from "./ModalsDefaultInput.tsx";
+
+// @ts-ignore
+export default function ModalsDefaultForm ({ platform, variant }) {
+    return (
+        <Form>
+            <ModalsDefaultInput platform={platform} variant={variant} />
+
+            <ModalsDefaultInput platform={platform} variant={variant} />
+
+            <Row>
+                <Col xs={12} sm={12} md={12} lg={6} xl={6} xxl={6}>
+                    <ModalsDefaultInput platform={platform} variant={variant} />
+                </Col>
+
+                <Col xs={12} sm={12} md={12} lg={6} xl={6} xxl={6}>
+                    <ModalsDefaultInput platform={platform} variant={variant} />
+                </Col>
+
+                <Col xs={12} sm={12} md={12} lg={6} xl={6} xxl={6}>
+                    <ModalsDefaultInput platform={platform} variant={variant} />
+                </Col>
+
+                <Col xs={12} sm={12} md={12} lg={6} xl={6} xxl={6}>
+                    <ModalsDefaultInput platform={platform} variant={variant} />
+                </Col>
+            </Row>
+        </Form>
+    );
+}

package/src/features/modals/components/ModalsDefaultInput.tsx

@@ -0,0 +1,22 @@
+import { Form } from "react-bootstrap";
+import { InputTypes } from "../../../types/InputTypes.tsx";
+import AndroidInput from "../../../components/inputs/AndroidInput.tsx";
+import {PlatformTypes} from "../../../types/PlatformTypes.tsx";
+import IOSInput from "../../../components/inputs/IOSInput.tsx";
+import BootstrapInput from "../../../components/inputs/BootstrapInput.tsx";
+
+// @ts-ignore
+export default function ModalsDefaultInput({ platform, variant }) {
+    const InputComponent = PlatformTypes.IOS === platform ? IOSInput : PlatformTypes.ANDROID === platform ? AndroidInput : BootstrapInput;
+
+    return (
+        <Form.Group className="mb-3">
+            <InputComponent
+                type={InputTypes.TEXT}
+                label="Extra Large input text"
+                variant={variant}
+                placeholder="Example text..."
+            />
+        </Form.Group>
+    );
+}