@lion-npm/ui 0.0.0-stage → 1.0.1

package/src/assets/css/inputs/inputs-bootstrap.css

@@ -0,0 +1,74 @@
+/* ==========================================================================
+   LION UI LIBRARY - BOOTSTRAP 5 INPUT SYSTEM
+   ========================================================================== */
+
+/* --- Color Variables Mapping per Variant --- */
+.form-control.bootstrap-variant-primary { --bootstrap-active-color: var(--bs-primary, #0d6efd); }
+.form-control.bootstrap-variant-secondary { --bootstrap-active-color: var(--bs-secondary, #6c757d); }
+.form-control.bootstrap-variant-success { --bootstrap-active-color: var(--bs-success, #198754); }
+.form-control.bootstrap-variant-danger { --bootstrap-active-color: var(--bs-danger, #dc3545); }
+.form-control.bootstrap-variant-warning { --bootstrap-active-color: var(--bs-warning, #ffc107); }
+.form-control.bootstrap-variant-info { --bootstrap-active-color: var(--bs-info, #0dcaf0); }
+.form-control.bootstrap-variant-dark { --bootstrap-active-color: var(--bs-dark, #212529); }
+
+/* Custom Lion Variants */
+.form-control.bootstrap-variant-lion-packages { --bootstrap-active-color: var(--lion-packages, #6f42c1); }
+.form-control.bootstrap-variant-lion-parking { --bootstrap-active-color: var(--lion-parking, #20c997); }
+.form-control.bootstrap-variant-lion-tech { --bootstrap-active-color: var(--lion-tech, #fd7e14); }
+.form-control.bootstrap-variant-lion-glam { --bootstrap-active-color: var(--lion-glam, #e83e8c); }
+
+/* --- Native Bootstrap Focus Overrides --- */
+.form-control.bootstrap-variant-primary:focus,
+.form-control.bootstrap-variant-secondary:focus,
+.form-control.bootstrap-variant-success:focus,
+.form-control.bootstrap-variant-danger:focus,
+.form-control.bootstrap-variant-warning:focus,
+.form-control.bootstrap-variant-info:focus,
+.form-control.bootstrap-variant-dark:focus,
+.form-control.bootstrap-variant-lion-packages:focus,
+.form-control.bootstrap-variant-lion-parking:focus,
+.form-control.bootstrap-variant-lion-tech:focus,
+.form-control.bootstrap-variant-lion-glam:focus {
+    border-color: var(--bootstrap-active-color);
+    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bootstrap-active-color) 25%, transparent);
+}
+
+/* --- Floating Label Color Synchronization --- */
+.form-floating:has(.form-control.bootstrap-variant-primary:focus) > label,
+.form-floating:has(.form-control.bootstrap-variant-primary:not(:placeholder-shown)) > label { color: var(--bs-primary); }
+
+.form-floating:has(.form-control.bootstrap-variant-secondary:focus) > label,
+.form-floating:has(.form-control.bootstrap-variant-secondary:not(:placeholder-shown)) > label { color: var(--bs-secondary); }
+
+.form-floating:has(.form-control.bootstrap-variant-success:focus) > label,
+.form-floating:has(.form-control.bootstrap-variant-success:not(:placeholder-shown)) > label { color: var(--bs-success); }
+
+.form-floating:has(.form-control.bootstrap-variant-danger:focus) > label,
+.form-floating:has(.form-control.bootstrap-variant-danger:not(:placeholder-shown)) > label { color: var(--bs-danger); }
+
+.form-floating:has(.form-control.bootstrap-variant-warning:focus) > label,
+.form-floating:has(.form-control.bootstrap-variant-warning:not(:placeholder-shown)) > label { color: var(--bs-warning); }
+
+.form-floating:has(.form-control.bootstrap-variant-info:focus) > label,
+.form-floating:has(.form-control.bootstrap-variant-info:not(:placeholder-shown)) > label { color: var(--bs-info); }
+
+.form-floating:has(.form-control.bootstrap-variant-dark:focus) > label,
+.form-floating:has(.form-control.bootstrap-variant-dark:not(:placeholder-shown)) > label { color: var(--bs-dark); }
+
+.form-floating:has(.form-control.bootstrap-variant-lion-packages:focus) > label,
+.form-floating:has(.form-control.bootstrap-variant-lion-packages:not(:placeholder-shown)) > label { color: var(--lion-packages, #6f42c1); }
+
+.form-floating:has(.form-control.bootstrap-variant-lion-parking:focus) > label,
+.form-floating:has(.form-control.bootstrap-variant-lion-parking:not(:placeholder-shown)) > label { color: var(--lion-parking, #20c997); }
+
+.form-floating:has(.form-control.bootstrap-variant-lion-tech:focus) > label,
+.form-floating:has(.form-control.bootstrap-variant-lion-tech:not(:placeholder-shown)) > label { color: var(--lion-tech, #fd7e14); }
+
+.form-floating:has(.form-control.bootstrap-variant-lion-glam:focus) > label,
+.form-floating:has(.form-control.bootstrap-variant-lion-glam:not(:placeholder-shown)) > label { color: var(--lion-glam, #e83e8c); }
+
+/* --- Shape Utility Overrides --- */
+.form-control.rounded-pill {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+}

package/src/assets/css/inputs/inputs-ios.css

@@ -0,0 +1,268 @@
+/* ==========================================================================
+   LION UI LIBRARY - IOS INPUT SYSTEM (STANDARDIZED & ISOLATED)
+   ========================================================================== */
+
+.ios-input-container {
+    --ios-input-bg: var(--bs-body-bg, #ffffff);
+    --ios-input-color: var(--bs-body-color, #212529);
+    --ios-input-border-color: var(--bs-border-color, #dee2e6);
+    --ios-input-placeholder-color: var(--bs-secondary-color, #6c757d);
+    --ios-input-focus-color: var(--bs-primary, #0d6efd);
+    --ios-input-error-color: var(--bs-danger, #dc3545);
+    --ios-input-disabled-bg: var(--bs-tertiary-bg, #f8f9fa);
+
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.ios-input-label {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--ios-input-color);
+    margin-left: 4px;
+    letter-spacing: -0.08px;
+}
+
+/* Wrapper Base */
+.ios-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background-color: var(--ios-input-bg);
+    color: var(--ios-input-color);
+    transition: all 0.2s ease-in-out;
+    box-sizing: border-box;
+    width: 100%;
+    overflow: hidden;
+}
+
+/* --- Sizes (Scoped with ios-size-) --- */
+.ios-input-wrapper.ios-size-sx {
+    min-height: 30px;
+    font-size: 12px;
+    padding: 0 8px;
+}
+
+.ios-input-wrapper.ios-size-sm {
+    min-height: 36px;
+    font-size: 14px;
+    padding: 0 10px;
+}
+
+.ios-input-wrapper.ios-size-md {
+    min-height: 44px;
+    font-size: 16px;
+    padding: 0 14px;
+}
+
+.ios-input-wrapper.ios-size-lg {
+    min-height: 52px;
+    font-size: 18px;
+    padding: 0 16px;
+}
+
+/* --- Shapes (Scoped with ios-shape-) --- */
+.ios-input-wrapper.ios-shape-rounded {
+    border-radius: 12px !important;
+}
+
+.ios-input-wrapper.ios-shape-pill {
+    border-radius: 9999px !important;
+    padding-left: 18px !important;
+    padding-right: 18px !important;
+}
+
+.ios-input-wrapper.ios-shape-square {
+    border-radius: 4px !important;
+}
+
+/* --- Style Types (Scoped with ios-style-) --- */
+
+.ios-input-wrapper.ios-style-rounded-border,
+.ios-input-wrapper.ios-style-outlined {
+    border: 1.5px solid var(--ios-input-border-color);
+    background-color: transparent;
+}
+
+.ios-input-wrapper.ios-style-rounded-border.is-focused,
+.ios-input-wrapper.ios-style-outlined.is-focused {
+    border-color: var(--ios-active-color, var(--ios-input-focus-color));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ios-active-color, var(--ios-input-focus-color)) 20%, transparent);
+}
+
+.ios-input-wrapper.ios-style-form {
+    background-color: transparent;
+    border: none;
+    border-bottom: 1px solid var(--ios-input-border-color);
+    border-radius: 0 !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+.ios-input-wrapper.ios-style-form.is-focused {
+    border-bottom-color: var(--ios-active-color, var(--ios-input-focus-color));
+    box-shadow: none;
+}
+
+.ios-input-wrapper.ios-style-filled {
+    background-color: var(--bs-tertiary-bg, #f1f3f5);
+    border: 1px solid transparent;
+}
+
+.ios-input-wrapper.ios-style-filled.is-focused {
+    background-color: var(--ios-input-bg);
+    border-color: var(--ios-active-color, var(--ios-input-focus-color));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ios-active-color, var(--ios-input-focus-color)) 20%, transparent);
+}
+
+.ios-input-wrapper.ios-style-plain {
+    background-color: transparent;
+    border: none;
+    padding: 0 !important;
+}
+
+/* --- Variants Mapping (Scoped with ios-variant-) --- */
+.ios-input-container.ios-variant-primary {
+    --ios-active-color: var(--bs-primary, #0d6efd);
+}
+
+.ios-input-container.ios-variant-secondary {
+    --ios-active-color: var(--bs-secondary, #6c757d);
+}
+
+.ios-input-container.ios-variant-success {
+    --ios-active-color: var(--bs-success, #198754);
+}
+
+.ios-input-container.ios-variant-danger {
+    --ios-active-color: var(--bs-danger, #dc3545);
+}
+
+.ios-input-container.ios-variant-warning {
+    --ios-active-color: var(--bs-warning, #ffc107);
+}
+
+.ios-input-container.ios-variant-info {
+    --ios-active-color: var(--bs-info, #0dcaf0);
+}
+
+.ios-input-container.ios-variant-dark {
+    --ios-active-color: var(--bs-dark, #212529);
+}
+
+/* Custom Lion Variants */
+.ios-input-container.ios-variant-lion-packages {
+    --ios-active-color: var(--lion-packages, #6f42c1);
+}
+
+.ios-input-container.ios-variant-lion-parking {
+    --ios-active-color: var(--lion-parking, #20c997);
+}
+
+.ios-input-container.ios-variant-lion-tech {
+    --ios-active-color: var(--lion-tech, #fd7e14);
+}
+
+.ios-input-container.ios-variant-lion-glam {
+    --ios-active-color: var(--lion-glam, #e83e8c);
+}
+
+/* --- States --- */
+.ios-input-wrapper.has-error {
+    border-color: var(--ios-input-error-color) !important;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ios-input-error-color) 20%, transparent) !important;
+}
+
+.ios-input-wrapper.is-disabled {
+    background-color: var(--ios-input-disabled-bg);
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.ios-input-wrapper.is-readonly {
+    background-color: var(--ios-input-disabled-bg);
+}
+
+/* --- Internal Elements --- */
+.ios-input-element {
+    width: 100%;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: inherit;
+    padding: 6px 0;
+    font-family: inherit;
+    font-size: inherit;
+}
+
+.ios-input-element::placeholder {
+    color: var(--ios-input-placeholder-color);
+    opacity: 1;
+}
+
+.ios-input-icon-left,
+.ios-input-icon-right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--ios-input-placeholder-color);
+    flex-shrink: 0;
+}
+
+.ios-input-icon-left {
+    margin-right: 8px;
+}
+
+.ios-input-icon-right {
+    margin-left: 8px;
+}
+
+.input-prefix {
+    margin-right: 6px;
+    color: var(--ios-input-placeholder-color);
+}
+
+.input-suffix {
+    margin-left: 6px;
+    color: var(--ios-input-placeholder-color);
+}
+
+.ios-clear-button {
+    border: none;
+    background: var(--bs-secondary-bg, #e9ecef);
+    color: var(--ios-input-color);
+    border-radius: 50%;
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
+    cursor: pointer;
+    padding: 0;
+    margin-left: 6px;
+    flex-shrink: 0;
+    transition: background 0.2s;
+}
+
+.ios-clear-button:hover {
+    background: var(--bs-secondary, #6c757d);
+    color: #fff;
+}
+
+.ios-input-helper-text {
+    font-size: 12px;
+    color: var(--ios-input-placeholder-color);
+    margin-left: 4px;
+}
+
+.ios-input-error-text {
+    font-size: 12px;
+    color: var(--ios-input-error-color);
+    margin-left: 4px;
+    font-weight: 500;
+}

package/src/assets/css/loadings/loading-bar.css

@@ -0,0 +1,86 @@
+.custom-progress-bar {
+    position: relative;
+    height: 4px;
+    background-color: #E0E0E0;
+    overflow: hidden;
+    border-radius: 4px;
+    --lion-active-color: var(--bs-primary, #0d6efd);
+}
+
+.custom-progress-bar.loading-variant-primary {
+    --lion-active-color: var(--bs-primary, #0d6efd);
+}
+
+.custom-progress-bar.loading-variant-secondary {
+    --lion-active-color: var(--bs-secondary, #6c757d);
+}
+
+.custom-progress-bar.loading-variant-success {
+    --lion-active-color: var(--bs-success, #198754);
+}
+
+.custom-progress-bar.loading-variant-danger {
+    --lion-active-color: var(--bs-danger, #dc3545);
+}
+
+.custom-progress-bar.loading-variant-warning {
+    --lion-active-color: var(--bs-warning, #ffc107);
+}
+
+.custom-progress-bar.loading-variant-info {
+    --lion-active-color: var(--bs-info, #0dcaf0);
+}
+
+.custom-progress-bar.loading-variant-light {
+    --lion-active-color: var(--bs-dark, #212529);
+}
+
+.custom-progress-bar.loading-variant-dark {
+    --lion-active-color: var(--bs-dark, #212529);
+}
+
+.custom-progress-bar.loading-variant-link {
+    --lion-active-color: var(--bs-primary, #0d6efd);
+}
+
+.custom-progress-bar.loading-variant-lion-packages {
+    --lion-active-color: var(--lion-packages, #6f42c1);
+}
+
+.custom-progress-bar.loading-variant-lion-parking {
+    --lion-active-color: var(--lion-parking, #20c997);
+}
+
+.custom-progress-bar.loading-variant-lion-tech {
+    --lion-active-color: var(--lion-tech, #fd7e14);
+}
+
+.custom-progress-bar.loading-variant-lion-glam {
+    --lion-active-color: var(--lion-glam, #e83e8c);
+}
+
+.custom-progress-bar .indeterminate {
+    position: absolute;
+    background-color: var(--lion-active-color);
+    top: 0;
+    left: -40%;
+    height: 100%;
+    width: 40%;
+    animation: indeterminate 1.2s infinite;
+    border-radius: 4px;
+}
+
+@keyframes indeterminate {
+    0% {
+        left: -40%;
+        width: 40%;
+    }
+    50% {
+        left: 20%;
+        width: 60%;
+    }
+    100% {
+        left: 100%;
+        width: 40%;
+    }
+}

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

@@ -0,0 +1,236 @@
+/* ==========================================
+   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

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