@lion-npm/ui 1.0.1 → 1.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lion-npm/ui",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/App.tsx

@@ -33,6 +33,7 @@ import ModalsIOSSection from "./features/modals/components/ModalsIOSSection.tsx"
 import ModalsWebSection from "./features/modals/components/ModalsWebSection.tsx";
 import LoadingSection from "./features/loadings/LoadingSection.tsx";
 import LoadingBarSection from "./features/loadings/components/LoadingBarSection.tsx";
+import InputsCustomSection from "./features/inputs/components/InputsCustomSection.tsx";
 
 export default function App() {
     return (
@@ -55,6 +56,8 @@ export default function App() {
                         </Route>
 
                         <Route path={"inputs"} element={<InputsSection />}>
+                            <Route path={"custom"} element={<InputsCustomSection />} />
+
                             <Route path={"android"} element={<InputsAndroidSection />} />
 
                             <Route path={"ios"} element={<InputsIOSSection />} />

package/src/components/buttons/BootstrapButton.tsx

@@ -19,7 +19,7 @@ export default function BootstrapButton({
                                             children,
                                             variant = "primary" as VariantTypes,
                                             styleType = BootstrapStyleTypes.FILLED,
-                                            shape = BootstrapShapeTypes.DEFAULT,
+                                            shape = BootstrapShapeTypes.STANDARD,
                                             size = "md" as SizeTypes,
                                             type = "button" as ButtonTypes,
                                             className = "",

package/src/components/buttons/LionButton.tsx

@@ -17,9 +17,6 @@ type PlatformMapping<T> = {
     [PlatformTypes.ANDROID]?: T;
     [PlatformTypes.IOS]?: T;
     [PlatformTypes.WEB]?: T;
-    android?: T;
-    ios?: T;
-    web?: T;
 };
 
 export type LionButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {

package/src/components/inputs/BootstrapInput.tsx

@@ -1,7 +1,7 @@
-import { InputHTMLAttributes, useId} from "react";
+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";
+import { BootstrapInputShapeTypes } from "../../types/Web/BootstrapInputShapeTypes.tsx";
+import { BootstrapInputStyleTypes } from "../../types/Web/BootstrapInputStyleTypes.tsx";
 
 export interface BootstrapInputProps
     extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "shape"> {
@@ -17,22 +17,22 @@ export interface BootstrapInputProps
 }
 
 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) {
+                                           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;
 
@@ -103,4 +103,4 @@ export default function BootstrapInput({
             ) : null}
         </div>
     );
-}
+}

package/src/components/inputs/IOSInput.tsx

@@ -1,13 +1,13 @@
 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";
+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;
+    styleType?: IOSInputStyleTypes;
+    shape?: IOSInputShapeTypes;
     variant?: string;
     sizeType?: "sx" | "sm" | "md" | "lg";
     label?: string;
@@ -23,8 +23,8 @@ export interface IOSInputProps
 
 export default function IOSInput({
                              type = InputTypes.TEXT,
-                             styleType = iOSInputStyleTypes.ROUNDED_BORDER,
-                             shape = iOSInputShapeTypes.ROUNDED,
+                             styleType = IOSInputStyleTypes.ROUNDED_BORDER,
+                             shape = IOSInputShapeTypes.ROUNDED,
                              variant = "primary",
                              sizeType = "md",
                              label,

package/src/components/inputs/LionInput.tsx

@@ -0,0 +1,81 @@
+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)} />;
+    }
+}

package/src/components/modals/LionModal.tsx

@@ -11,12 +11,12 @@ export interface LionModalProps {
     title: string;
     body: ReactNode;
     buttons?: ReactNode;
-    backdrop: string;
+    backdrop?: string;
     fullscreen?: true | "sm" | "md" | "lg" | "xl" | "xxl" | "sm-down" | "md-down" | "lg-down" | "xl-down" | "xxl-down";
     // @ts-ignore
     size?: SizeTypes.SM | SizeTypes.LG | SizeTypes.XL;
     variant?: VariantTypes | string;
-    platform?: string;
+    platform?: PlatformTypes | string;
     cancelButtonIcon?: ReactNode;
     cancelButtonText?: string;
 }
@@ -140,8 +140,6 @@ export default function LionModal({
                 </Modal.Title>
             </Modal.Header>
 
-            {/* state.loading && <LoadingBar /> */}
-
             <Modal.Body className="custom-modal-body px-4 py-3">
                 {modalId === state.modal ? body : null}
             </Modal.Body>

package/src/context/LionUIComponentsContext.tsx

@@ -18,7 +18,7 @@ export const LionUIComponentsProvider: FC<LionUIComponentsProviderProps> = ({
             initialPlatform = defaultPlatform;
         } else {
             const capPlatform = Capacitor.getPlatform();
-            if (capPlatform === 'ios' || capPlatform === 'android') {
+            if (capPlatform === PlatformTypes.IOS || capPlatform === PlatformTypes.ANDROID) {
                 initialPlatform = capPlatform as PlatformTypes;
             }
         }
@@ -27,7 +27,12 @@ export const LionUIComponentsProvider: FC<LionUIComponentsProviderProps> = ({
             platform: initialPlatform,
             loading: false,
             reload: false,
+            booting: false,
+            sidebar: false,
+            version: null,
             modal: null,
+            logo: null,
+            background: null,
         };
     });
 
@@ -39,7 +44,10 @@ export const LionUIComponentsProvider: FC<LionUIComponentsProviderProps> = ({
         if (!defaultPlatform) {
             const capPlatform = Capacitor.getPlatform();
 
-            const detected: PlatformTypes = capPlatform === 'ios' || capPlatform === 'android' ? (capPlatform as PlatformTypes) : PlatformTypes.WEB;
+            const detected: PlatformTypes =
+                capPlatform === PlatformTypes.IOS || capPlatform === PlatformTypes.ANDROID
+                    ? (capPlatform as PlatformTypes)
+                    : PlatformTypes.WEB;
 
             if (detected !== state.platform) {
                 setState((prev) => ({ ...prev, platform: detected }));

package/src/features/Header.tsx

@@ -37,6 +37,12 @@ export default function Header() {
                         </NavDropdown>
 
                         <NavDropdown title="Inputs" id="inputs-nav-dropdown">
+                            <NavDropdown.Item as={Link} to={"/inputs/custom"} href={"#"}>
+                                Custom
+                            </NavDropdown.Item>
+
+                            <NavDropdown.Divider />
+
                             <NavDropdown.Item as={Link} to={"/inputs/android"} href={"#"}>
                                 Android
                             </NavDropdown.Item>

package/src/features/buttons/components/ButtonsBootstrapSection.tsx

@@ -14,7 +14,7 @@ const StyleTypeList: Array<{ label: string; styleType: BootstrapStyleTypes }> =
 
 // List of supported Bootstrap shapes
 const ShapeList: Array<{ label: string; shape: BootstrapShapeTypes }> = [
-    { label: "Default Shape", shape: BootstrapShapeTypes.DEFAULT },
+    { label: "Default Shape", shape: BootstrapShapeTypes.STANDARD },
     { label: "Pill Shape", shape: BootstrapShapeTypes.PILL },
     { label: "Square Shape", shape: BootstrapShapeTypes.SQUARE },
 ];

package/src/features/buttons/components/ButtonsCustomSection.tsx

@@ -21,7 +21,7 @@ const shapesByPlatform = {
         { label: "Rounded", value: IOSShapeTypes.ROUNDED },
     ],
     [PlatformTypes.WEB]: [
-        { label: "Default", value: BootstrapShapeTypes.DEFAULT },
+        { label: "Standard", value: BootstrapShapeTypes.STANDARD },
         { label: "Pill", value: BootstrapShapeTypes.PILL },
         { label: "Square", value: BootstrapShapeTypes.SQUARE },
     ],
@@ -51,7 +51,7 @@ export default function ButtonsCustomSection() {
     const [selectedPlatform, setSelectedPlatform] = useState<PlatformTypes>(PlatformTypes.ANDROID);
     const [selectedAndroidShape, setSelectedAndroidShape] = useState<AndroidShapeTypes>(AndroidShapeTypes.PILL);
     const [selectedIOSShape, setSelectedIOSShape] = useState<IOSShapeTypes>(IOSShapeTypes.CAPSULE);
-    const [selectedWebShape, setSelectedWebShape] = useState<BootstrapShapeTypes>(BootstrapShapeTypes.DEFAULT);
+    const [selectedWebShape, setSelectedWebShape] = useState<BootstrapShapeTypes>(BootstrapShapeTypes.STANDARD);
 
     const [selectedAndroidStyle, setSelectedAndroidStyle] = useState<AndroidStyleTypes>(AndroidStyleTypes.TONAL);
     const [selectedIOSStyle, setSelectedIOSStyle] = useState<IOSStyleTypes>(IOSStyleTypes.TINTED);

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

@@ -1,20 +1,20 @@
 import VariantList from "../../VariantList.tsx";
-import { iOSInputStyleTypes } from "../../../types/IOS/iOSInputStyleTypes.tsx";
-import { iOSInputShapeTypes } from "../../../types/IOS/iOSInputShapeTypes.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 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 },
+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() {

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

@@ -86,7 +86,12 @@ export default function ModalsAndroidSection() {
                     title={modal.title}
                     size={modal.size}
                     fullscreen={modal.fullscreen}
-                    body={<ModalsDefaultForm variant={modal.variant} />}
+                    body={(
+                        <ModalsDefaultForm
+                            platform={PlatformTypes.ANDROID}
+                            variant={modal.variant}
+                        />
+                    )}
                     buttons={(
                         <LionButton
                             variant={VariantTypes.MODAL}

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

@@ -82,7 +82,12 @@ export default function ModalsWebSection() {
                     title={modal.title}
                     size={modal.size}
                     fullscreen={modal.fullscreen}
-                    body={<ModalsDefaultForm variant={modal.variant} />}
+                    body={(
+                        <ModalsDefaultForm
+                            platform={PlatformTypes.WEB}
+                            variant={modal.variant}
+                        />
+                    )}
                     buttons={(
                         <LionButton
                             variant={VariantTypes.MODAL}

package/src/index.ts

@@ -0,0 +1,27 @@
+import "./assets/css/index.css";
+import "./assets/css/buttons/buttons-android.css";
+import "./assets/css/buttons/buttons-ios.css";
+import "./assets/css/buttons/buttons-web.css";
+import "./assets/css/inputs/inputs-android.css";
+import "./assets/css/inputs/inputs-ios.css";
+import "./assets/css/inputs/inputs-bootstrap.css";
+import "./assets/css/modals/modals.css";
+import "./assets/css/loadings/loading-bar.css";
+
+export { LionUIComponentsProvider } from './context/LionUIComponentsContext';
+export { default as AndroidButton } from './components/buttons/AndroidButton';
+export { default as BootstrapButton } from './components/buttons/BootstrapButton';
+export { default as IOSButton } from './components/buttons/IOSButton';
+export { default as LionButton } from './components/buttons/LionButton';
+export { default as AndroidInput } from './components/inputs/AndroidInput';
+export { default as BootstrapInput } from './components/inputs/BootstrapInput';
+export { default as IOSInput } from './components/inputs/IOSInput';
+export { default as LionInput } from './components/inputs/LionInput';
+export { default as LoadingBar } from './components/loadings/LoadingBar';
+export { default as LionModal } from './components/modals/LionModal';
+
+export * from './types/ButtonTypes';
+export * from './types/InputTypes';
+export * from './types/PlatformTypes';
+export * from './types/SizeTypes';
+export * from './types/VariantTypes';

package/src/interfaces/LionUIState.tsx

@@ -4,5 +4,10 @@ export interface LionUIState {
     platform: PlatformTypes;
     loading: boolean;
     reload: boolean;
+    booting: boolean;
+    sidebar: boolean;
+    version: string | null,
     modal?: string | null;
+    logo: File | string | null;
+    background: File | string | null;
 }

package/src/types/ButtonTypes.tsx

@@ -3,7 +3,7 @@ export const ButtonTypes = {
     BUTTON: "button",
     RESET: "reset",
     UNDEFINED: undefined,
-};
+} as const;
 
 export type ButtonTypes =
     (typeof ButtonTypes)[keyof typeof ButtonTypes];

package/src/types/IOS/{iOSInputShapeTypes.tsx → IOSInputShapeTypes.tsx}

@@ -1,9 +1,9 @@
 // Official iOS / SwiftUI layout shapes and corner radiuses
-export const iOSInputShapeTypes = {
+export const IOSInputShapeTypes = {
     ROUNDED: "rounded", // Standard continuous iOS rounded corner
     PILL: "pill",       // Capsule shape
     SQUARE: "square",   // Sharp edges
 } as const;
 
-export type iOSInputShapeTypes =
-    (typeof iOSInputShapeTypes)[keyof typeof iOSInputShapeTypes];
+export type IOSInputShapeTypes =
+    (typeof IOSInputShapeTypes)[keyof typeof IOSInputShapeTypes];

package/src/types/IOS/{iOSInputStyleTypes.tsx → IOSInputStyleTypes.tsx}

@@ -1,5 +1,5 @@
 // Official SwiftUI TextFieldStyle representations from Apple Documentation
-export const iOSInputStyleTypes = {
+export const IOSInputStyleTypes = {
     FORM: "form",                     // SwiftUI Form/List row style (Horizontal Label + Input/Prompt)
     ROUNDED_BORDER: "rounded-border", // SwiftUI .textFieldStyle(.roundedBorder)
     FILLED: "filled",                 // iOS Native filled field style (Background tinted)
@@ -7,5 +7,5 @@ export const iOSInputStyleTypes = {
     PLAIN: "plain",                   // SwiftUI .textFieldStyle(.plain)
 } as const;
 
-export type iOSInputStyleTypes =
-    (typeof iOSInputStyleTypes)[keyof typeof iOSInputStyleTypes];
+export type IOSInputStyleTypes =
+    (typeof IOSInputStyleTypes)[keyof typeof IOSInputStyleTypes];

package/src/types/Web/BootstrapShapeTypes.tsx

@@ -1,6 +1,6 @@
 // Bootstrap 5 Corner Radius Options
 export const BootstrapShapeTypes = {
-    DEFAULT: "default", // Standard Bootstrap border radius (~0.375rem)
+    STANDARD: "standard", // Standard Bootstrap border radius (~0.375rem)
     PILL: "pill",       // Fully rounded pill shape (.rounded-pill)
     SQUARE: "square",   // Sharp corners (.rounded-0)
 } as const;

package/vite.config.ts

@@ -1,11 +1,30 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
 
-// https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-  server: {
-    host: "0.0.0.0",
-    port: 5173,
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'LionUI',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react/jsx-runtime': 'react/jsx-runtime',
+        },
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name && assetInfo.name.endsWith('.css')) {
+            return 'style.css';
+          }
+          return 'assets/[name]-[hash][extname]';
+        },
+      },
+    },
   },
-})
+});