@lion-npm/ui 1.0.2 → 1.0.3

package/src/components/buttons/BootstrapButton.tsx

@@ -1,50 +0,0 @@
-import { type ButtonHTMLAttributes, type ReactNode } from "react";
-import { VariantTypes } from "../../types/VariantTypes.tsx";
-import { SizeTypes } from "../../types/SizeTypes.tsx";
-import { ButtonTypes } from "../../types/ButtonTypes.tsx";
-import { BootstrapStyleTypes } from "../../types/Web/BootstrapStyleTypes.tsx";
-import { BootstrapShapeTypes } from "../../types/Web/BootstrapShapeTypes.tsx";
-
-export interface BootstrapButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "size"> {
-    children?: ReactNode;
-    variant?: VariantTypes;
-    styleType?: BootstrapStyleTypes;
-    shape?: BootstrapShapeTypes;
-    size?: SizeTypes;
-    type?: ButtonTypes;
-    className?: string;
-}
-
-export default function BootstrapButton({
-                                            children,
-                                            variant = "primary" as VariantTypes,
-                                            styleType = BootstrapStyleTypes.FILLED,
-                                            shape = BootstrapShapeTypes.STANDARD,
-                                            size = "md" as SizeTypes,
-                                            type = "button" as ButtonTypes,
-                                            className = "",
-                                            ...props
-                                        }: BootstrapButtonProps) {
-    // Construct standard Bootstrap button classes
-    const stylePrefix = styleType === BootstrapStyleTypes.OUTLINED ? "btn-outline-" : "btn-";
-    const variantClass = variant ? `${stylePrefix}${variant}` : "";
-    const sizeClass = size && size !== "md" ? `btn-${size}` : "";
-
-    // Mapping custom shape types to Bootstrap utilities or extended CSS
-    const shapeClass =
-        shape === BootstrapShapeTypes.PILL
-            ? "rounded-pill"
-            : shape === BootstrapShapeTypes.SQUARE
-                ? "rounded-0"
-                : "";
-
-    return (
-        <button
-            type={type}
-            className={`btn ${variantClass} ${sizeClass} ${shapeClass} ${className}`.trim()}
-            {...props}
-        >
-            {children}
-        </button>
-    );
-}

package/src/components/buttons/IOSButton.tsx

@@ -1,42 +0,0 @@
-import { type ButtonHTMLAttributes, type ReactNode } from "react";
-import { VariantTypes } from "../../types/VariantTypes";
-import { SizeTypes } from "../../types/SizeTypes";
-import { ButtonTypes } from "../../types/ButtonTypes";
-import { IOSStyleTypes } from "../../types/IOS/IOSStyleTypes";
-import { IOSShapeTypes } from "../../types/IOS/IOSShapeTypes";
-
-export interface IOSButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "size"> {
-    children?: ReactNode;
-    variant?: VariantTypes;
-    styleType?: IOSStyleTypes;
-    shape?: IOSShapeTypes;
-    size?: SizeTypes;
-    type?: ButtonTypes;
-    className?: string;
-}
-
-export default function IOSButton({
-                                      children,
-                                      variant = VariantTypes.PRIMARY,
-                                      styleType = IOSStyleTypes.FILLED,
-                                      shape = IOSShapeTypes.ROUNDED,
-                                      size = SizeTypes.MD,
-                                      type = ButtonTypes.BUTTON,
-                                      className = "",
-                                      ...props
-                                  }: IOSButtonProps) {
-    // Construct dynamic iOS class names
-    const styleClass = `ios-btn-${styleType}`;
-    const shapeClass = `ios-btn-${shape}`;
-    const variantClass = variant ? `btn-${variant}` : "";
-
-    return (
-        <button
-            type={type}
-            className={`ios-btn ios-btn-${size} ${styleClass} ${shapeClass} ${variantClass} ${className}`.trim()}
-            {...props}
-        >
-            <span className="ios-btn-content">{children}</span>
-        </button>
-    );
-}

package/src/components/buttons/LionButton.tsx

@@ -1,73 +0,0 @@
-import { type ButtonHTMLAttributes, type ReactNode } from 'react';
-import { useLionUI } from '../../context/LionUIComponentsContext.tsx';
-import { PlatformTypes } from "../../types/PlatformTypes.tsx";
-// @ts-ignore
-import { SizeTypes } from "../../types/SizeTypes.tsx";
-import type { AndroidStyleTypes } from "../../types/Android/AndroidStyleTypes.tsx";
-import type { AndroidShapeTypes } from "../../types/Android/AndroidShapeTypes.tsx";
-import type { BootstrapShapeTypes } from "../../types/Web/BootstrapShapeTypes.tsx";
-import type { BootstrapStyleTypes } from "../../types/Web/BootstrapStyleTypes.tsx";
-import type { IOSShapeTypes } from "../../types/IOS/IOSShapeTypes.tsx";
-import type { IOSStyleTypes } from "../../types/IOS/IOSStyleTypes.tsx";
-import AndroidButton from "./AndroidButton.tsx";
-import IOSButton from "./IOSButton.tsx";
-import BootstrapButton from "./BootstrapButton.tsx";
-
-type PlatformMapping<T> = {
-    [PlatformTypes.ANDROID]?: T;
-    [PlatformTypes.IOS]?: T;
-    [PlatformTypes.WEB]?: T;
-};
-
-export type LionButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-    children: ReactNode;
-    variant?: string;
-    platform?: string;
-    // @ts-ignore
-    size?: SizeTypes.SM | SizeTypes.MD | SizeTypes.LG;
-    shape?: BootstrapShapeTypes | AndroidShapeTypes | IOSShapeTypes | string | PlatformMapping<BootstrapShapeTypes | AndroidShapeTypes | IOSShapeTypes | string>;
-    styleType?: BootstrapStyleTypes | AndroidStyleTypes | IOSStyleTypes | string | PlatformMapping<BootstrapStyleTypes | AndroidStyleTypes | IOSStyleTypes | string>;
-};
-
-export default function LionButton({
-                                       children,
-                                       shape,
-                                       styleType,
-                                       // @ts-ignore
-                                       platform = null,
-                                       ...props
-                                   }: LionButtonProps) {
-    const { state } = useLionUI();
-
-    const activePlatform = platform ?? state.platform;
-
-    const resolvePlatformProp = <T,>(propValue?: T | PlatformMapping<T>): T | undefined => {
-        if (typeof propValue === 'object' && propValue !== null) {
-            const map = propValue as PlatformMapping<T>;
-            return map[activePlatform as keyof PlatformMapping<T>] ?? map[activePlatform.toLowerCase() as keyof PlatformMapping<T>];
-        }
-        return propValue as T;
-    };
-
-    const resolvedShape = resolvePlatformProp(shape);
-    const resolvedStyleType = resolvePlatformProp(styleType);
-
-    const buttonProps = {
-        ...props,
-        ...(resolvedShape !== undefined && { shape: resolvedShape }),
-        ...(resolvedStyleType !== undefined && { styleType: resolvedStyleType }),
-    };
-
-    switch (activePlatform) {
-        case PlatformTypes.ANDROID:
-            return <AndroidButton {...(buttonProps as any)}>{children}</AndroidButton>;
-
-        case PlatformTypes.IOS:
-            return <IOSButton {...(buttonProps as any)}>{children}</IOSButton>;
-
-        case PlatformTypes.WEB:
-        case PlatformTypes.DESKTOP:
-        default:
-            return <BootstrapButton {...(buttonProps as any)}>{children}</BootstrapButton>;
-    }
-}

package/src/components/inputs/AndroidInput.tsx

@@ -1,158 +0,0 @@
-import { InputTypes } from "../../types/InputTypes";
-import { AndroidInputStyleTypes } from "../../types/Android/AndroidInputStyleTypes.tsx";
-import { AndroidInputShapeTypes } from "../../types/Android/AndroidInputShapeTypes.tsx";
-import {type ChangeEvent, type InputHTMLAttributes, type ReactNode, useId, useState} from "react";
-
-export interface AndroidInputProps
-    extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "shape"> {
-    type?: InputTypes;
-    styleType?: AndroidInputStyleTypes;
-    shape?: AndroidInputShapeTypes;
-    variant?: string;
-    label?: string;
-    required?: boolean;
-    helperText?: string;
-    error?: boolean | string;
-    startIcon?: ReactNode;
-    endIcon?: ReactNode;
-    prefixText?: string;
-    suffixText?: string;
-    counter?: boolean | number;
-}
-
-export default function AndroidInput({
-                                         type = InputTypes.TEXT,
-                                         styleType = AndroidInputStyleTypes.OUTLINED,
-                                         shape = AndroidInputShapeTypes.NORMAL,
-                                         variant = "primary",
-                                         label,
-                                         required = false,
-                                         helperText,
-                                         error,
-                                         startIcon,
-                                         endIcon,
-                                         prefixText,
-                                         suffixText,
-                                         counter,
-                                         disabled = false,
-                                         readOnly = false,
-                                         value,
-                                         defaultValue,
-                                         onChange,
-                                         onFocus,
-                                         onBlur,
-                                         id,
-                                         className = "",
-                                         maxLength,
-                                         placeholder = " ",
-                                         ...rest
-                                     }: AndroidInputProps) {
-    const generatedId = useId();
-    const inputId = id || generatedId;
-
-    const [isFocused, setIsFocused] = useState(false);
-    const [internalValue, setInternalValue] = useState(value ?? defaultValue ?? "");
-
-    const hasError = Boolean(error);
-    const errorMessage = typeof error === "string" ? error : undefined;
-
-    const normalizedStyle = String(styleType).toLowerCase().replace(/_/g, "-");
-    const normalizedShape = String(shape).toLowerCase();
-
-    const containerClasses = [
-        "android-input-container",
-        `android-variant-${variant}`,
-        className,
-    ].filter(Boolean).join(" ");
-
-    const wrapperClasses = [
-        "android-input-field-wrapper",
-        `android-style-${normalizedStyle}`,
-        `android-size-${normalizedShape}`,
-        isFocused ? "is-focused" : "",
-        hasError ? "has-error" : "",
-        disabled ? "is-disabled" : "",
-        readOnly ? "is-readonly" : "",
-    ].filter(Boolean).join(" ");
-
-    const inputClasses = [
-        "android-input-element",
-        hasError ? "is-invalid" : "",
-    ].filter(Boolean).join(" ");
-
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-        setInternalValue(e.target.value);
-        if (onChange) onChange(e);
-    };
-
-    const handleFocus = (e: FocusEvent) => {
-        setIsFocused(true);
-        if (onFocus) { // @ts-ignore
-            onFocus(e);
-        }
-    };
-
-    const handleBlur = (e: FocusEvent) => {
-        setIsFocused(false);
-        if (onBlur) { // @ts-ignore
-            onBlur(e);
-        }
-    };
-
-    const currentValue = value !== undefined ? value : internalValue;
-    const currentLength = String(currentValue || "").length;
-    const maxLen = typeof counter === "number" ? counter : maxLength;
-    
-    return (
-        <div className={containerClasses}>
-            <div className={wrapperClasses}>
-                {startIcon && <div className="android-input-start-icon">{startIcon}</div>}
-                {prefixText && <span className="android-input-prefix">{prefixText}</span>}
-
-                <input
-                    id={inputId}
-                    type={type}
-                    value={currentValue}
-                    required={required}
-                    disabled={disabled}
-                    readOnly={readOnly}
-                    maxLength={maxLen}
-                    placeholder={placeholder}
-                    onChange={handleChange}
-                    // @ts-ignore
-                    onFocus={handleFocus}
-                    // @ts-ignore
-                    onBlur={handleBlur}
-                    className={inputClasses}
-                    {...rest}
-                />
-
-                {label && (
-                    <label htmlFor={inputId} className="android-input-label">
-                        {label}
-                        {required && <span className="text-danger ms-1">*</span>}
-                    </label>
-                )}
-
-                {suffixText && <span className="android-input-suffix">{suffixText}</span>}
-                {endIcon && <div className="android-input-end-icon">{endIcon}</div>}
-            </div>
-
-            {(helperText || errorMessage || counter) && (
-                <div className="android-input-subtext-container">
-                    {hasError ? (
-                        <div className="android-input-error-text">{errorMessage}</div>
-                    ) : helperText ? (
-                        <div className="android-input-helper-text">{helperText}</div>
-                    ) : <div />}
-
-                    {counter && (
-                        <span className="android-input-counter">
-                            {currentLength}{maxLen ? `/${maxLen}` : ""}
-                        </span>
-                    )}
-                </div>
-            )}
-        </div>
-    );
-}

package/src/components/inputs/BootstrapInput.tsx

@@ -1,106 +0,0 @@
-import { type InputHTMLAttributes, useId } from "react";
-import { InputTypes } from "../../types/InputTypes";
-import { BootstrapInputShapeTypes } from "../../types/Web/BootstrapInputShapeTypes.tsx";
-import { BootstrapInputStyleTypes } from "../../types/Web/BootstrapInputStyleTypes.tsx";
-
-export interface BootstrapInputProps
-    extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "shape"> {
-    type?: InputTypes;
-    styleType?: BootstrapInputStyleTypes;
-    shape?: BootstrapInputShapeTypes;
-    variant?: string;
-    sizeType?: "sm" | "md" | "lg";
-    label?: string;
-    required?: boolean;
-    helperText?: string;
-    error?: boolean | string;
-}
-
-export default function BootstrapInput({
-                                           type = InputTypes.TEXT,
-                                           styleType = BootstrapInputStyleTypes.FLOATING,
-                                           shape = BootstrapInputShapeTypes.ROUNDED,
-                                           variant = "primary",
-                                           sizeType = "md",
-                                           label,
-                                           required = false,
-                                           helperText,
-                                           error,
-                                           disabled = false,
-                                           readOnly = false,
-                                           id,
-                                           className = "",
-                                           placeholder = " ",
-                                           ...rest
-                                       }: BootstrapInputProps) {
-    const generatedId = useId();
-    const inputId = id || generatedId;
-
-    const hasError = Boolean(error);
-    const errorMessage = typeof error === "string" ? error : undefined;
-
-    const sizeClass = sizeType === "sm" ? "form-control-sm" : sizeType === "lg" ? "form-control-lg" : "";
-    const variantClass = `bootstrap-variant-${variant}`;
-
-    const inputClasses = [
-        "form-control",
-        shape,
-        sizeClass,
-        variantClass,
-        hasError ? "is-invalid" : "",
-        className,
-    ]
-        .filter(Boolean)
-        .join(" ");
-
-    const isFloating = styleType === BootstrapInputStyleTypes.FLOATING;
-
-    return (
-        <div className="mb-3 w-100">
-            {!isFloating && label && (
-                <label htmlFor={inputId} className="form-label">
-                    {label}
-                    {required && <span className="text-danger ms-1">*</span>}
-                </label>
-            )}
-
-            {isFloating ? (
-                <div className="form-floating">
-                    <input
-                        id={inputId}
-                        type={type}
-                        className={inputClasses}
-                        placeholder={placeholder}
-                        disabled={disabled}
-                        readOnly={readOnly}
-                        required={required}
-                        {...rest}
-                    />
-                    {label && (
-                        <label htmlFor={inputId}>
-                            {label}
-                            {required && <span className="text-danger ms-1">*</span>}
-                        </label>
-                    )}
-                </div>
-            ) : (
-                <input
-                    id={inputId}
-                    type={type}
-                    className={inputClasses}
-                    placeholder={placeholder}
-                    disabled={disabled}
-                    readOnly={readOnly}
-                    required={required}
-                    {...rest}
-                />
-            )}
-
-            {hasError ? (
-                <div className="invalid-feedback d-block">{errorMessage}</div>
-            ) : helperText ? (
-                <div className="form-text">{helperText}</div>
-            ) : null}
-        </div>
-    );
-}

package/src/components/inputs/IOSInput.tsx

@@ -1,163 +0,0 @@
-import React, { useId, useState } from "react";
-import { InputTypes } from "../../types/InputTypes";
-import { IOSInputStyleTypes } from "../../types/IOS/IOSInputStyleTypes.tsx";
-import { IOSInputShapeTypes } from "../../types/IOS/IOSInputShapeTypes.tsx";
-
-export interface IOSInputProps
-    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "shape"> {
-    type?: InputTypes;
-    styleType?: IOSInputStyleTypes;
-    shape?: IOSInputShapeTypes;
-    variant?: string;
-    sizeType?: "sx" | "sm" | "md" | "lg";
-    label?: string;
-    required?: boolean;
-    helperText?: string;
-    error?: boolean | string;
-    startIcon?: React.ReactNode;
-    endIcon?: React.ReactNode;
-    prefixText?: string;
-    suffixText?: string;
-    clearable?: boolean;
-}
-
-export default function IOSInput({
-                             type = InputTypes.TEXT,
-                             styleType = IOSInputStyleTypes.ROUNDED_BORDER,
-                             shape = IOSInputShapeTypes.ROUNDED,
-                             variant = "primary",
-                             sizeType = "md",
-                             label,
-                             required = false,
-                             helperText,
-                             error,
-                             startIcon,
-                             endIcon,
-                             prefixText,
-                             suffixText,
-                             clearable = false,
-                             disabled = false,
-                             readOnly = false,
-                             value,
-                             defaultValue,
-                             onChange,
-                             onFocus,
-                             onBlur,
-                             id,
-                             className = "",
-                             maxLength,
-                             placeholder,
-                             ...rest
-                         }: IOSInputProps) {
-    const generatedId = useId();
-    const inputId = id || generatedId;
-
-    const [isFocused, setIsFocused] = useState(false);
-    const [internalValue, setInternalValue] = useState(value ?? defaultValue ?? "");
-
-    const hasError = Boolean(error);
-    const errorMessage = typeof error === "string" ? error : undefined;
-
-    const normalizedStyle = String(styleType).toLowerCase().replace(/_/g, "-");
-    const normalizedShape = String(shape).toLowerCase();
-
-    const containerClasses = [
-        "ios-input-container",
-        `ios-variant-${variant}`,
-        className,
-    ]
-        .filter(Boolean)
-        .join(" ");
-
-    const wrapperClasses = [
-        "ios-input-wrapper",
-        `ios-style-${normalizedStyle}`,
-        `ios-shape-${normalizedShape}`,
-        `ios-size-${sizeType}`,
-        isFocused ? "is-focused" : "",
-        hasError ? "has-error" : "",
-        disabled ? "is-disabled" : "",
-        readOnly ? "is-readonly" : "",
-    ]
-        .filter(Boolean)
-        .join(" ");
-
-    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
-        setIsFocused(true);
-        if (onFocus) onFocus(e);
-    };
-
-    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-        setIsFocused(false);
-        if (onBlur) onBlur(e);
-    };
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setInternalValue(e.target.value);
-        if (onChange) onChange(e);
-    };
-
-    const handleClear = () => {
-        setInternalValue("");
-        if (onChange) {
-            const event = {
-                target: { value: "" },
-            } as React.ChangeEvent<HTMLInputElement>;
-            onChange(event);
-        }
-    };
-
-    const currentValue = value !== undefined ? value : internalValue;
-
-    return (
-        <div className={containerClasses}>
-            {label && (
-                <label htmlFor={inputId} className="ios-input-label">
-                    {label}
-                    {required && <span className="text-danger ms-1">*</span>}
-                </label>
-            )}
-
-            <div className={wrapperClasses}>
-                {startIcon && <div className="ios-input-icon-left">{startIcon}</div>}
-                {prefixText && <span className="input-prefix">{prefixText}</span>}
-
-                <input
-                    id={inputId}
-                    type={type}
-                    value={currentValue}
-                    required={required}
-                    disabled={disabled}
-                    readOnly={readOnly}
-                    maxLength={maxLength}
-                    placeholder={placeholder}
-                    onChange={handleChange}
-                    onFocus={handleFocus}
-                    onBlur={handleBlur}
-                    className="ios-input-element"
-                    {...rest}
-                />
-
-                {clearable && Boolean(currentValue) && !disabled && !readOnly && (
-                    <button
-                        type="button"
-                        className="ios-clear-button"
-                        onClick={handleClear}
-                        tabIndex={-1}
-                    >
-                        <i className="bi bi-x"></i>
-                    </button>
-                )}
-
-                {suffixText && <span className="input-suffix">{suffixText}</span>}
-                {endIcon && <div className="ios-input-icon-right">{endIcon}</div>}
-            </div>
-
-            {hasError ? (
-                <div className="ios-input-error-text">{errorMessage}</div>
-            ) : helperText ? (
-                <div className="ios-input-helper-text">{helperText}</div>
-            ) : null}
-        </div>
-    );
-}

package/src/components/inputs/LionInput.tsx

@@ -1,81 +0,0 @@
-import { type InputHTMLAttributes, type ReactNode } from "react";
-import { useLionUI } from "../../context/LionUIComponentsContext.tsx";
-import { PlatformTypes } from "../../types/PlatformTypes.tsx";
-import type { AndroidStyleTypes } from "../../types/Android/AndroidStyleTypes.tsx";
-import type { AndroidShapeTypes } from "../../types/Android/AndroidShapeTypes.tsx";
-import type { BootstrapShapeTypes } from "../../types/Web/BootstrapShapeTypes.tsx";
-import type { BootstrapStyleTypes } from "../../types/Web/BootstrapStyleTypes.tsx";
-import type { IOSShapeTypes } from "../../types/IOS/IOSShapeTypes.tsx";
-import type { IOSStyleTypes } from "../../types/IOS/IOSStyleTypes.tsx";
-import AndroidInput from "./AndroidInput.tsx";
-import IOSInput from "./IOSInput.tsx";
-import BootstrapInput from "./BootstrapInput.tsx";
-
-type PlatformMapping<T> = {
-    [PlatformTypes.ANDROID]?: T;
-    [PlatformTypes.IOS]?: T;
-    [PlatformTypes.WEB]?: T;
-};
-
-export type LionInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "shape"> & {
-    variant?: string;
-    platform?: string;
-    sizeType?: string;
-    shape?: BootstrapShapeTypes | AndroidShapeTypes | IOSShapeTypes | string | PlatformMapping<BootstrapShapeTypes | AndroidShapeTypes | IOSShapeTypes | string>;
-    styleType?: BootstrapStyleTypes | AndroidStyleTypes | IOSStyleTypes | string | PlatformMapping<BootstrapStyleTypes | AndroidStyleTypes | IOSStyleTypes | string>;
-    label?: string;
-    required?: boolean;
-    helperText?: string;
-    error?: boolean | string;
-    startIcon?: ReactNode;
-    endIcon?: ReactNode;
-    prefixText?: string;
-    suffixText?: string;
-    counter?: boolean | number;
-    clearable?: boolean;
-};
-
-export default function LionInput({
-                                      shape,
-                                      styleType,
-                                      // @ts-ignore
-                                      platform = null,
-                                      ...props
-                                  }: LionInputProps) {
-    const { state } = useLionUI();
-
-    // Resolve active platform from props or global context
-    const activePlatform = platform ?? state.platform;
-
-    // Helper function to resolve platform-specific property mappings
-    const resolvePlatformProp = <T,>(propValue?: T | PlatformMapping<T>): T | undefined => {
-        if (typeof propValue === "object" && propValue !== null) {
-            const map = propValue as PlatformMapping<T>;
-            return map[activePlatform as keyof PlatformMapping<T>] ?? map[activePlatform.toLowerCase() as keyof PlatformMapping<T>];
-        }
-        return propValue as T;
-    };
-
-    const resolvedShape = resolvePlatformProp(shape);
-    const resolvedStyleType = resolvePlatformProp(styleType);
-
-    const inputProps = {
-        ...props,
-        ...(resolvedShape !== undefined && { shape: resolvedShape }),
-        ...(resolvedStyleType !== undefined && { styleType: resolvedStyleType }),
-    };
-
-    // Render the appropriate input component based on the active platform
-    switch (activePlatform) {
-        case PlatformTypes.ANDROID:
-            return <AndroidInput {...(inputProps as any)} />;
-
-        case PlatformTypes.IOS:
-            return <IOSInput {...(inputProps as any)} />;
-
-        case PlatformTypes.WEB:
-        case PlatformTypes.DESKTOP:
-        default:
-            return <BootstrapInput {...(inputProps as any)} />;
-    }
-}