ml-ui-lib 1.0.4 → 1.0.6

package/src/components/DatePicker2/DatePicker2.tsx

@@ -1,179 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import "./DatePicker2.css";
-
-export interface DateValue {
-    month: number;
-    day: number;
-    year: number;
-}
-
-export interface DatePicker2Props {
-    value?: DateValue;
-    onChange?: (date: DateValue) => void;
-}
-
-export const DatePicker2: React.FC<DatePicker2Props> = ({ value, onChange }) => {
-    const currentYear = new Date().getFullYear();
-    const months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
-
-    const [year, setYear] = useState<number | null>(null);
-    const [month, setMonth] = useState<number | null>(null);
-    const [monthLabel, setMonthLabel] = useState<string | null>(null);
-    const [day, setDay] = useState<number | null>(null);
-    const [daysInMonth, setDaysInMonth] = useState<number[]>([]);
-
-
-    useEffect(() => {
-        if (month && day && year && onChange) {
-            const newDate = { month, day, year };
-            // Only call onChange if different
-            if (
-                !value ||
-                value.month !== month ||
-                value.day !== day ||
-                value.year !== year
-            ) {
-                onChange(newDate);
-            }
-        }
-    }, [month, day, year]);
-
-
-    useEffect(() => {
-        if (value) {
-            setYear(value.year);
-            setMonth(value.month);
-            setDay(value.day);
-            setMonthLabel(months[value.month - 1]);
-        }
-    }, [value]);
-
-    const [yearOpen, setYearOpen] = useState(false);
-    const [monthOpen, setMonthOpen] = useState(false);
-    const [dayOpen, setDayOpen] = useState(false);
-    const wrapperRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        const handleClickOutside = (e: MouseEvent) => {
-            if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
-                setYearOpen(false);
-                setMonthOpen(false);
-                setDayOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, []);
-
-    // Update days in month
-    useEffect(() => {
-        if (month && year) {
-            const totalDays = new Date(year, month, 0).getDate();
-            setDaysInMonth([...Array(totalDays)].map((_, i) => i + 1));
-            if (day && day > totalDays) setDay(totalDays);
-        } else {
-            setDaysInMonth([]);
-            setDay(null);
-        }
-    }, [month, year]);
-
-    // Trigger onChange
-    useEffect(() => {
-        if (year && month && day && onChange) {
-            onChange({ year, month, day });
-        }
-    }, [year, month, day, onChange]);
-
-    return (
-        <div className="date-picker-wrapper" ref={wrapperRef}>
-            {/* Year */}
-            <div className="full-width">
-                <div className="date-picker-dropdown" onClick={() => { setYearOpen(!yearOpen); setMonthOpen(false); setDayOpen(false); }}>
-                    <span className="readble">{year ?? "Year"}</span>
-                    <span className="date-picker-dropdown-carret">▼</span>
-                </div>
-                {yearOpen && (
-                    <div className="date-picker-grid-wrapper">
-                        <div className="date-picker-header">
-                            <span>Select Year</span>
-                            <button onClick={() => setYearOpen(false)}>✕</button>
-                        </div>
-                        <div className="date-picker-grid scrollbar">
-                            {[...Array(100)].map((_, i) => {
-                                const y = currentYear - i;
-                                return (
-                                    <div
-                                        key={y}
-                                        className={`date-picker-dropdown-option ${y === year ? "selected" : ""}`}
-                                        onClick={() => { setYear(y); setYearOpen(false); setMonthOpen(true); }}
-                                    >
-                                        {y}
-                                    </div>
-                                );
-                            })}
-                        </div>
-                    </div>
-                )}
-            </div>
-
-            {/* Month */}
-            <div className="full-width">
-                <div className="date-picker-dropdown" onClick={() => { setMonthOpen(!monthOpen); setYearOpen(false); setDayOpen(false); }}>
-                    <span className="readble">{monthLabel ?? "Month"}</span>
-                    <span className="date-picker-dropdown-carret">▼</span>
-                </div>
-                {monthOpen && (
-                    <div className="date-picker-grid-wrapper">
-                        <div className="date-picker-header">
-                            <span>Select Month</span>
-                            <button onClick={() => setMonthOpen(false)}>✕</button>
-                        </div>
-                        <div className="date-picker-grid scrollbar">
-                            {months.map((m, idx) => (
-                                <div
-                                    key={idx}
-                                    className={`date-picker-dropdown-option ${month === idx + 1 ? "selected" : ""}`}
-                                    onClick={() => { setMonth(idx + 1); setMonthLabel(m); setMonthOpen(false); setDayOpen(true); }}
-                                >
-                                    {m}
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                )}
-            </div>
-
-            {/* Day */}
-            <div className="full-width">
-                <div className="date-picker-dropdown" onClick={() => { setDayOpen(!dayOpen); setMonthOpen(false); setYearOpen(false); }}>
-                    <span className="readble">{day ?? "Day"}</span>
-                    <span className="date-picker-dropdown-carret">▼</span>
-                </div>
-                {dayOpen && daysInMonth.length > 0 && (
-                    <div className="date-picker-grid-wrapper">
-                        <div className="date-picker-header">
-                            <span>Select Day</span>
-                            <button onClick={() => setDayOpen(false)}>✕</button>
-                        </div>
-                        <div className="date-picker-grid scrollbar">
-                            {daysInMonth.map((d) => (
-                                <div
-                                    key={d}
-                                    className={`date-picker-dropdown-option ${day === d ? "selected" : ""}`}
-                                    onClick={() => {setDay(d); setDayOpen(false);}}
-                                >
-                                    {d}
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                )}
-                {dayOpen && daysInMonth.length === 0 && (
-                    <div className="date-picker-empty">Select Year and Month first.</div>
-                )}
-            </div>
-        </div>
-    );
-};
-
-export default DatePicker2;

package/src/components/Dropdown/Dropdown.css

@@ -1,84 +0,0 @@
-.dropdown-wrapper {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  font-family: "Poppins", sans-serif;
-  gap: 4px;
-}
-
-.dropdown-label {
-  font-size: 14px;
-  font-weight: 500;
-  color: #333;
-}
-
-.dropdown-trigger {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 12px;
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  background: #fff;
-  cursor: pointer;
-  transition: border-color 0.2s;
-}
-
-.dropdown-trigger:hover {
-  border-color: #888;
-}
-
-.dropdown-value {
-  font-size: 15px;
-  color: #333;
-}
-
-.dropdown-caret {
-  font-size: 12px;
-  color: #666;
-}
-
-.dropdown-list {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 100%;
-  background: #fff;
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  z-index: 10;
-  max-height: 200px;
-  overflow-y: auto;
-  margin-top: 4px;
-}
-
-.dropdown-option {
-  padding: 8px 12px;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.dropdown-option:hover {
-  background: #f5f5f5;
-}
-
-.dropdown-option.selected {
-  background: #ff4d4d10;
-  font-weight: 500;
-}
-
-.dropdown-empty {
-  padding: 8px 12px;
-  color: #999;
-}
-
-.dropdown-error {
-  margin-top: 4px;
-  color: #ff4d4d;
-  font-size: 13px;
-}
-
-.has-error .dropdown-trigger {
-  border-color: #ff4d4d;
-}

package/src/components/Dropdown/Dropdown.tsx

@@ -1,76 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-import "./Dropdown.css";
-
-export interface DropdownProps {
-  label?: string;
-  options: string[];
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  className?: string;
-  error?: string;
-}
-
-export const Dropdown: React.FC<DropdownProps> = ({
-  label,
-  value,
-  options,
-  onChange,
-  placeholder = "Select",
-  className = "",
-  error,
-}) => {
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
-        setDropdownOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
-  return (
-    <div className={`dropdown-wrapper ${className} ${error ? "has-error" : ""}`} ref={dropdownRef}>
-      {label && <label className="dropdown-label">{label}</label>}
-
-      <div
-        className="dropdown-trigger"
-        onClick={() => setDropdownOpen(!dropdownOpen)}
-      >
-        <span className="dropdown-value">
-          {value === "" ? placeholder : value}
-        </span>
-        <span className="dropdown-caret">▼</span>
-      </div>
-
-      {dropdownOpen && (
-        <div className="dropdown-list scrollbar">
-          {options.length > 0 ? (
-            options.map((option, i) => (
-              <div
-                key={i}
-                className={`dropdown-option ${value === option ? "selected" : ""}`}
-                onClick={() => {
-                  onChange(option);
-                  setDropdownOpen(false);
-                }}
-              >
-                {option}
-              </div>
-            ))
-          ) : (
-            <div className="dropdown-empty">No options</div>
-          )}
-        </div>
-      )}
-
-      {error && <span className="dropdown-error">{error}</span>}
-    </div>
-  );
-};
-
-export default Dropdown;

package/src/components/Input/Input.css

@@ -1,36 +0,0 @@
-.input-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  width: 100%;
-}
-
-.input-label {
-  font-size: 14px;
-  font-weight: 500;
-  color: #333;
-}
-
-.input {
-  font-family: 'Poppins', sans-serif;
-  font-size: 15px;
-  padding: 10px 12px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  outline: none;
-  transition: all 0.2s ease;
-}
-
-.input:focus {
-  border-color: #0070f3;
-  box-shadow: 0 0 0 2px rgba(0, 112, 243, 0.2);
-}
-
-.input-error {
-  border-color: #ff4d4f;
-}
-
-.input-error-text {
-  color: #ff4d4f;
-  font-size: 12px;
-}

package/src/components/Input/Input.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import "./Input.css";
-
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  label?: string;
-  error?: string;
-}
-
-export const Input: React.FC<InputProps> = ({ label, error, ...props }) => {
-  return (
-    <div className="input-wrapper">
-      {label && <label className="input-label">{label}</label>}
-      <input
-        className={`input ${error ? "input-error" : ""}`}
-        {...props}
-        autoComplete="off"
-        autoCorrect="off"
-        autoCapitalize="off"
-        spellCheck={false}
-      />
-      {error && <span className="input-error-text">{error}</span>}
-    </div>
-  );
-};

package/src/components/Modal/Modal.css

@@ -1,81 +0,0 @@
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  backdrop-filter: blur(4px);
-  animation: fadeIn 0.25s ease;
-}
-
-.modal {
-  background: #fff;
-  border-radius: 10px;
-  padding: 24px;
-  max-width: 420px;
-  width: 90%;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
-  font-family: "Poppins", sans-serif;
-  animation: modalFadeIn 0.25s ease;
-  border-top: 5px solid transparent;
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 16px;
-}
-
-.modal-icon {
-  width: 26px;
-  height: 26px;
-  object-fit: contain;
-}
-
-.modal-title {
-  font-size: 20px;
-  font-weight: 600;
-}
-
-/* Variants */
-.modal-default {
-  border-color: #ccc;
-}
-
-.modal-info {
-  border-color: #3b82f6;
-}
-
-.modal-success {
-  border-color: #22c55e;
-}
-
-.modal-warning {
-  border-color: #f59e0b;
-}
-
-.modal-error {
-  border-color: #ef4444;
-}
-
-@keyframes modalFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}

package/src/components/Modal/Modal.tsx

@@ -1,63 +0,0 @@
-import React, { useEffect } from "react";
-import "./Modal.css";
-
-// import DefaultIcon from "./icons/default.png";
-// import InfoIcon from "./icons/info.png";
-// import SuccessIcon from "./icons/success.png";
-// import WarningIcon from "./icons/error.png";
-import ErrorIcon from "./icons/error.png";
-
-export interface ModalProps {
-  open: boolean;
-  onClose: () => void;
-  title?: string;
-  children: React.ReactNode;
-  zIndex?: number;
-  variant?: "default" | "info" | "success" | "warning" | "error";
-}
-
-export const Modal: React.FC<ModalProps> = ({
-  open,
-  onClose,
-  title,
-  children,
-  zIndex = 1000,
-  variant = "default",
-}) => {
-  useEffect(() => {
-    document.body.style.overflow = open ? "hidden" : "";
-  }, [open]);
-
-  if (!open) return null;
-
-  const variantIcon = {
-    // default: DefaultIcon,
-    // info: InfoIcon,
-    // success: SuccessIcon,
-    // warning: WarningIcon,
-    error: ErrorIcon,
-  }[variant];
-
-  
-  return (
-    <div
-      className="modal-overlay"
-      onClick={onClose}
-      style={{ zIndex }}
-    >
-      <div
-        className={`modal modal-${variant}`}
-        onClick={(e) => e.stopPropagation()}
-        style={{ zIndex: zIndex + 1 }}
-      >
-        {title && (
-          <div className="modal-header">
-            {/* <img src={variantIcon} alt={variant} className="modal-icon" /> */}
-            <h2 className="modal-title">{title}</h2>
-          </div>
-        )}
-        <div className="modal-content">{children}</div>
-      </div>
-    </div>
-  );
-};

package/src/components/PhoneInput/PhoneInput.css

@@ -1,78 +0,0 @@
-.phone-input-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  font-family: "Poppins", sans-serif;
-}
-
-.country-dropdown {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 10.5px 10px;
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  background: #fff;
-  cursor: pointer;
-}
-
-.country-flag {
-  width: 20px;
-  height: 14px;
-  border-radius: 2px;
-}
-
-.country-code {
-  font-size: 15px;
-  color: #333;
-}
-
-.country-dropdown-menu {
-  position: absolute;
-  top: 50px;
-  left: 0;
-  width: 180px;
-  background: #fff;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  z-index: 10;
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.country-dropdown-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 10px;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.country-dropdown-item:hover {
-  background: #f5f5f5;
-}
-
-.country-code-text {
-  font-size: 13px;
-  color: #777;
-}
-
-.phone-input {
-  flex: 1;
-  padding: 10px 14px;
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  font-size: 15px;
-  font-family: inherit;
-  outline: none;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-
-.phone-input:focus {
-  border-color: #ff4d4d;
-  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.1);
-}