@lion-npm/ui 1.0.2 → 1.0.4

package/src/assets/css/modals/modals.css

@@ -1,236 +0,0 @@
-/* ==========================================
-   GLOBAL BACKDROP ADJUSTMENT (Exclusive for modals)
-   ========================================== */
-.modal-backdrop.web-modal-backdrop,
-.modal-backdrop.ios-modal-backdrop,
-.modal-backdrop.android-modal-backdrop,
-.web-modal ~ .modal-backdrop,
-.ios-modal ~ .modal-backdrop,
-.android-modal ~ .modal-backdrop {
-    opacity: 0.45;
-    backdrop-filter: blur(3px);
-    -webkit-backdrop-filter: blur(3px);
-}
-
-
-/* ==========================================
-   1. WEB & BASE MODAL STYLES (.web-modal)
-   ========================================== */
-
-.web-modal .modal-content {
-    border: 1px solid rgba(0, 0, 0, 0.08) !important;
-    border-radius: 12px !important;
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
-    overflow: hidden;
-}
-
-.web-modal .custom-modal-title {
-    font-size: 1.15rem;
-    color: #212529;
-}
-
-.web-modal .custom-btn-group .btn-modal {
-    width: auto;
-    flex: 1 1 0;
-    text-align: center;
-}
-
-.web-modal .custom-btn-group .btn-modal:not(:first-child)::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: -1px;
-    width: 1px;
-    height: auto;
-    background-color: var(--bs-modal-footer-border-color);
-}
-
-/* Specific and encapsulated base button for Web Modal */
-.web-modal .btn-modal {
-    background-color: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    outline: none !important;
-    color: inherit !important;
-    width: 100%;
-    padding: 12px 10px;
-    font-size: 16px;
-    position: relative;
-    box-sizing: border-box;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.15);
-}
-
-.web-modal .btn-modal:hover {
-    background-color: rgba(0, 0, 0, 0.04) !important;
-}
-
-.web-modal .btn-modal:active {
-    background-color: rgba(0, 0, 0, 0.08) !important;
-}
-
-.web-modal .btn-modal:focus,
-.web-modal .btn-modal:focus-visible,
-.web-modal .btn-modal:focus-within {
-    background-color: transparent !important;
-    box-shadow: none !important;
-}
-
-
-/* ==========================================
-   2. iOS STYLE DESIGN (.ios-modal)
-   ========================================== */
-
-.ios-modal .modal-content {
-    border: none !important;
-    border-radius: 22px !important;
-    backdrop-filter: blur(20px) saturate(180%);
-    -webkit-backdrop-filter: blur(20px) saturate(180%);
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18), 0 0 1px rgba(0, 0, 0, 0.2) !important;
-    overflow: hidden;
-}
-
-.ios-modal .custom-modal-header {
-    border-bottom: 1px solid rgba(60, 60, 67, 0.12) !important;
-    position: relative;
-}
-
-.ios-modal .custom-modal-title {
-    font-size: 1.1rem;
-    letter-spacing: -0.2px;
-    color: var(--lion-black, #000);
-}
-
-.ios-modal .custom-modal-header .btn-close {
-    position: absolute;
-    right: 16px;
-    top: 50%;
-    transform: translateY(-50%) !important;
-    margin: 0 !important;
-    padding: 8px !important;
-    background-size: 10px;
-    border-radius: 50%;
-    opacity: 0.8 !important;
-}
-
-.ios-modal .custom-modal-body {
-    font-size: 0.95rem;
-    line-height: 1.5;
-}
-
-.ios-modal .custom-modal-footer {
-    border-top: 1px solid rgba(60, 60, 67, 0.12) !important;
-    background-color: transparent !important;
-}
-
-.ios-modal .custom-btn-group .btn-modal {
-    flex: 1 1 0;
-    padding: 14px 10px;
-    font-size: 1rem;
-    font-weight: 400;
-    text-align: center;
-}
-
-.ios-modal .btn-modal-cancel {
-    font-weight: 600;
-}
-
-.ios-modal .custom-btn-group .btn-modal:not(:first-child)::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 1px;
-    background-color: rgba(60, 60, 67, 0.12);
-}
-
-.ios-modal .btn-modal {
-    background-color: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    outline: none !important;
-    position: relative;
-    box-sizing: border-box;
-}
-
-.ios-modal .btn-modal:hover {
-    background-color: rgba(0, 0, 0, 0.04) !important;
-}
-
-.ios-modal .btn-modal:active {
-    background-color: rgba(0, 0, 0, 0.08) !important;
-}
-
-
-/* ==========================================
-   3. ANDROID / MATERIAL DESIGN STYLE (.android-modal)
-   ========================================== */
-
-.android-modal .modal-content {
-    border: none !important;
-    border-radius: 28px !important;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
-    overflow: hidden;
-}
-
-.android-modal .custom-modal-header {
-    border-bottom: none !important;
-    padding-top: 24px;
-    padding-bottom: 8px;
-}
-
-.android-modal .custom-modal-title {
-    font-size: 1.35rem;
-    color: #1d1b20;
-    font-weight: 500 !important;
-}
-
-.android-modal .custom-modal-body {
-    font-size: 0.95rem;
-}
-
-.android-modal .custom-modal-footer {
-    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
-    padding: 0 !important;
-}
-
-.android-modal .custom-btn-group .btn-modal {
-    flex: 1 1 0;
-    padding: 14px 10px;
-    font-size: 0.9rem;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    text-align: center;
-}
-
-.android-modal .custom-btn-group .btn-modal:not(:first-child)::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: -1px;
-    width: 1px;
-    height: auto;
-    background-color: rgba(0, 0, 0, 0.08);
-}
-
-.android-modal .btn-modal {
-    background-color: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    outline: none !important;
-    position: relative;
-    box-sizing: border-box;
-}
-
-.android-modal .btn-modal:hover {
-    background-color: rgba(103, 80, 164, 0.08) !important;
-    color: var(--lion-black);
-}
-
-.android-modal .btn-modal:active {
-    background-color: rgba(103, 80, 164, 0.12) !important;
-    color: var(--lion-black);
-}

package/src/components/buttons/AndroidButton.tsx

@@ -1,43 +0,0 @@
-// components/buttons/AndroidButton.tsx
-import {type ButtonHTMLAttributes, type ReactNode } from 'react';
-import { VariantTypes } from '../../types/VariantTypes';
-import { SizeTypes } from '../../types/SizeTypes';
-import { ButtonTypes } from '../../types/ButtonTypes';
-import { AndroidStyleTypes } from '../../types/Android/AndroidStyleTypes';
-import { AndroidShapeTypes } from '../../types/Android/AndroidShapeTypes';
-
-export interface AndroidButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'size'> {
-    children?: ReactNode;
-    variant?: VariantTypes;
-    styleType?: AndroidStyleTypes;
-    shape?: AndroidShapeTypes;
-    size?: SizeTypes;
-    type?: ButtonTypes;
-    className?: string;
-}
-
-export default function AndroidButton({
-                                          children,
-                                          variant = VariantTypes.PRIMARY,
-                                          styleType = AndroidStyleTypes.FILLED,
-                                          shape = AndroidShapeTypes.PILL,
-                                          size = SizeTypes.MD,
-                                          type = ButtonTypes.BUTTON,
-                                          className = "",
-                                          ...props
-                                      }: AndroidButtonProps) {
-    const styleClass = `android-btn-${styleType}`;
-    const shapeClass = `android-btn-${shape}`;
-    const variantClass = variant ? `btn-${variant}` : "";
-
-    return (
-        <button
-            type={type}
-            className={`android-btn android-btn-${size} ${styleClass} ${shapeClass} ${variantClass} ${className}`.trim()}
-            {...props}
-        >
-            {children}
-            <span className="ripple" />
-        </button>
-    );
-}

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>
-    );
-}