ml-ui-lib 1.0.0

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "./Alert.css";
+export type AlertVariant = "info" | "error" | "warning" | "success";
+export interface AlertProps {
+    variant?: AlertVariant;
+    title?: string;
+    message: string;
+}
+export declare const Alert: React.FC<AlertProps>;

package/dist/components/Alert/Alert.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./Alert.css";
+export const Alert = ({ variant = "info", title, message, }) => {
+    const icons = {
+        info: "https://cdn-icons-png.flaticon.com/512/11086/11086161.png",
+        success: "https://cdn-icons-png.flaticon.com/512/845/845646.png",
+        warning: "https://cdn-icons-png.flaticon.com/512/595/595067.png",
+        error: "https://cdn-icons-png.flaticon.com/512/463/463612.png",
+    };
+    return (_jsxs("div", { className: `alert alert-${variant}`, children: [_jsx("img", { src: icons[variant], alt: variant, className: "alert-icon" }), _jsxs("div", { className: "alert-content", children: [title && _jsx("strong", { className: "alert-title", children: title }), _jsx("p", { className: "alert-message", children: message })] })] }));
+};

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import "./Button.css";
+export interface ButtonProps {
+    label: string;
+    variant?: "default" | "red" | "black";
+    onClick?: () => void;
+}
+export declare const Button: React.FC<ButtonProps>;

package/dist/components/Button/Button.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./Button.css";
+export const Button = ({ label, variant = "default", onClick, }) => {
+    return (_jsx("button", { className: `btn btn-${variant}`, onClick: onClick, children: label }));
+};

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import "./DatePicker.css";
+export interface DatePickerValue {
+    day: number;
+    month: number;
+    year: number;
+}
+export interface DatePickerProps {
+    value?: DatePickerValue;
+    onChange?: (value: DatePickerValue) => void;
+    placeholder?: string;
+    className?: string;
+    error?: string;
+}
+export declare const DatePicker: React.FC<DatePickerProps>;
+export default DatePicker;

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import "./DatePicker.css";
+export const DatePicker = ({ value, onChange, placeholder = "Select date", className = "", error, }) => {
+    const [open, setOpen] = useState(false);
+    const [selectedDate, setSelectedDate] = useState(value || null);
+    const today = new Date();
+    const [currentMonth, setCurrentMonth] = useState(value?.month ? value.month - 1 : today.getMonth());
+    const [currentYear, setCurrentYear] = useState(value?.year || today.getFullYear());
+    const wrapperRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
+    const firstDayOfMonth = new Date(currentYear, currentMonth, 1).getDay();
+    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+    const weekDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    const handleDayClick = (day) => {
+        const newDate = { day, month: currentMonth + 1, year: currentYear };
+        setSelectedDate(newDate);
+        onChange?.(newDate);
+        setOpen(false);
+    };
+    return (_jsxs("div", { className: `datepicker-wrapper ${className} ${error ? "has-error" : ""}`, ref: wrapperRef, children: [_jsxs("div", { className: "datepicker-input-wrapper", onClick: () => setOpen(!open), children: [_jsx("input", { readOnly: true, value: selectedDate
+                            ? `${String(selectedDate.day).padStart(2, "0")}/${String(selectedDate.month).padStart(2, "0")}/${selectedDate.year}`
+                            : "", placeholder: placeholder, className: "datepicker-input" }), _jsxs("svg", { className: "datepicker-icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "18", height: "18", children: [_jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), _jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), _jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), _jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })] })] }), open && (_jsxs("div", { className: "datepicker-calendar", children: [_jsxs("div", { className: "datepicker-header", children: [_jsx("button", { onClick: () => setCurrentMonth((prev) => (prev === 0 ? 11 : prev - 1)), children: "\u25C0" }), _jsxs("span", { children: [monthNames[currentMonth], " ", currentYear] }), _jsx("button", { onClick: () => setCurrentMonth((prev) => (prev === 11 ? 0 : prev + 1)), children: "\u25B6" })] }), _jsx("div", { className: "datepicker-weekdays", children: weekDays.map((d) => (_jsx("div", { className: "datepicker-weekday", children: d }, d))) }), _jsxs("div", { className: "datepicker-days-grid", children: [Array.from({ length: firstDayOfMonth }).map((_, i) => (_jsx("div", { className: "datepicker-day empty" }, `empty-${i}`))), Array.from({ length: daysInMonth }).map((_, i) => {
+                                const day = i + 1;
+                                const isSelected = selectedDate?.day === day &&
+                                    selectedDate?.month === currentMonth + 1 &&
+                                    selectedDate?.year === currentYear;
+                                const isToday = today.getDate() === day &&
+                                    today.getMonth() === currentMonth &&
+                                    today.getFullYear() === currentYear;
+                                return (_jsx("div", { className: `datepicker-day ${isSelected ? "selected" : ""} ${isToday ? "today" : ""}`, onClick: () => handleDayClick(day), children: day }, day));
+                            })] })] })), error && _jsx("span", { className: "datepicker-error", children: error })] }));
+};
+export default DatePicker;

package/dist/components/DatePicker2/DatePicker2.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import "./DatePicker2.css";
+export interface DateValue {
+    month: number;
+    day: number;
+    year: number;
+}
+export interface DatePicker2Props {
+    value?: DateValue;
+    onChange?: (date: DateValue) => void;
+}
+export declare const DatePicker2: React.FC<DatePicker2Props>;
+export default DatePicker2;

package/dist/components/DatePicker2/DatePicker2.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import "./DatePicker2.css";
+export const DatePicker2 = ({ 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(null);
+    const [month, setMonth] = useState(null);
+    const [monthLabel, setMonthLabel] = useState(null);
+    const [day, setDay] = useState(null);
+    const [daysInMonth, setDaysInMonth] = useState([]);
+    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(null);
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+                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 (_jsxs("div", { className: "date-picker-wrapper", ref: wrapperRef, children: [_jsxs("div", { className: "full-width", children: [_jsxs("div", { className: "date-picker-dropdown", onClick: () => { setYearOpen(!yearOpen); setMonthOpen(false); setDayOpen(false); }, children: [_jsx("span", { className: "readble", children: year ?? "Year" }), _jsx("span", { className: "date-picker-dropdown-carret", children: "\u25BC" })] }), yearOpen && (_jsxs("div", { className: "date-picker-grid-wrapper", children: [_jsxs("div", { className: "date-picker-header", children: [_jsx("span", { children: "Select Year" }), _jsx("button", { onClick: () => setYearOpen(false), children: "\u2715" })] }), _jsx("div", { className: "date-picker-grid scrollbar", children: [...Array(100)].map((_, i) => {
+                                    const y = currentYear - i;
+                                    return (_jsx("div", { className: `date-picker-dropdown-option ${y === year ? "selected" : ""}`, onClick: () => { setYear(y); setYearOpen(false); setMonthOpen(true); }, children: y }, y));
+                                }) })] }))] }), _jsxs("div", { className: "full-width", children: [_jsxs("div", { className: "date-picker-dropdown", onClick: () => { setMonthOpen(!monthOpen); setYearOpen(false); setDayOpen(false); }, children: [_jsx("span", { className: "readble", children: monthLabel ?? "Month" }), _jsx("span", { className: "date-picker-dropdown-carret", children: "\u25BC" })] }), monthOpen && (_jsxs("div", { className: "date-picker-grid-wrapper", children: [_jsxs("div", { className: "date-picker-header", children: [_jsx("span", { children: "Select Month" }), _jsx("button", { onClick: () => setMonthOpen(false), children: "\u2715" })] }), _jsx("div", { className: "date-picker-grid scrollbar", children: months.map((m, idx) => (_jsx("div", { className: `date-picker-dropdown-option ${month === idx + 1 ? "selected" : ""}`, onClick: () => { setMonth(idx + 1); setMonthLabel(m); setMonthOpen(false); setDayOpen(true); }, children: m }, idx))) })] }))] }), _jsxs("div", { className: "full-width", children: [_jsxs("div", { className: "date-picker-dropdown", onClick: () => { setDayOpen(!dayOpen); setMonthOpen(false); setYearOpen(false); }, children: [_jsx("span", { className: "readble", children: day ?? "Day" }), _jsx("span", { className: "date-picker-dropdown-carret", children: "\u25BC" })] }), dayOpen && daysInMonth.length > 0 && (_jsxs("div", { className: "date-picker-grid-wrapper", children: [_jsxs("div", { className: "date-picker-header", children: [_jsx("span", { children: "Select Day" }), _jsx("button", { onClick: () => setDayOpen(false), children: "\u2715" })] }), _jsx("div", { className: "date-picker-grid scrollbar", children: daysInMonth.map((d) => (_jsx("div", { className: `date-picker-dropdown-option ${day === d ? "selected" : ""}`, onClick: () => { setDay(d); setDayOpen(false); }, children: d }, d))) })] })), dayOpen && daysInMonth.length === 0 && (_jsx("div", { className: "date-picker-empty", children: "Select Year and Month first." }))] })] }));
+};
+export default DatePicker2;

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,13 @@
+import React 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 declare const Dropdown: React.FC<DropdownProps>;
+export default Dropdown;

package/dist/components/Dropdown/Dropdown.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import "./Dropdown.css";
+export const Dropdown = ({ label, value, options, onChange, placeholder = "Select", className = "", error, }) => {
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+                setDropdownOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    return (_jsxs("div", { className: `dropdown-wrapper ${className} ${error ? "has-error" : ""}`, ref: dropdownRef, children: [label && _jsx("label", { className: "dropdown-label", children: label }), _jsxs("div", { className: "dropdown-trigger", onClick: () => setDropdownOpen(!dropdownOpen), children: [_jsx("span", { className: "dropdown-value", children: value === "" ? placeholder : value }), _jsx("span", { className: "dropdown-caret", children: "\u25BC" })] }), dropdownOpen && (_jsx("div", { className: "dropdown-list scrollbar", children: options.length > 0 ? (options.map((option, i) => (_jsx("div", { className: `dropdown-option ${value === option ? "selected" : ""}`, onClick: () => {
+                        onChange(option);
+                        setDropdownOpen(false);
+                    }, children: option }, i)))) : (_jsx("div", { className: "dropdown-empty", children: "No options" })) })), error && _jsx("span", { className: "dropdown-error", children: error })] }));
+};
+export default Dropdown;

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import "./Input.css";
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+}
+export declare const Input: React.FC<InputProps>;

package/dist/components/Input/Input.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./Input.css";
+export const Input = ({ label, error, ...props }) => {
+    return (_jsxs("div", { className: "input-wrapper", children: [label && _jsx("label", { className: "input-label", children: label }), _jsx("input", { className: `input ${error ? "input-error" : ""}`, ...props, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false }), error && _jsx("span", { className: "input-error-text", children: error })] }));
+};

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import "./Modal.css";
+export interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    zIndex?: number;
+    variant?: "default" | "info" | "success" | "warning" | "error";
+}
+export declare const Modal: React.FC<ModalProps>;

package/dist/components/Modal/Modal.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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 const Modal = ({ 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 (_jsx("div", { className: "modal-overlay", onClick: onClose, style: { zIndex }, children: _jsxs("div", { className: `modal modal-${variant}`, onClick: (e) => e.stopPropagation(), style: { zIndex: zIndex + 1 }, children: [title && (_jsx("div", { className: "modal-header", children: _jsx("h2", { className: "modal-title", children: title }) })), _jsx("div", { className: "modal-content", children: children })] }) }));
+};

package/dist/components/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "./PhoneInput.css";
+export interface PhoneInputProps {
+    value: string;
+    onChange: (formatted: string) => void;
+    country?: string;
+    onCountryChange?: (countryCode: string) => void;
+}
+export declare const PhoneInput: React.FC<PhoneInputProps>;
+export default PhoneInput;

package/dist/components/PhoneInput/PhoneInput.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import "./PhoneInput.css";
+const countryOptions = {
+    PH: {
+        code: "+63",
+        country: "Philippines",
+        flag: "https://flagcdn.com/w20/ph.png",
+        placeholder: "988 888 8888",
+    },
+    US: {
+        code: "+1",
+        country: "United States",
+        flag: "https://flagcdn.com/w20/us.png",
+        placeholder: "(000) 888 8888",
+    },
+    CA: {
+        code: "+1",
+        country: "Canada",
+        flag: "https://flagcdn.com/w20/ca.png",
+        placeholder: "000 888 8888",
+    },
+};
+export const PhoneInput = ({ value, onChange, country = "PH", onCountryChange, }) => {
+    const [selectedCountry, setSelectedCountry] = useState(country);
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+                setDropdownOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    const handleCountrySelect = (countryKey) => {
+        setSelectedCountry(countryKey);
+        setDropdownOpen(false);
+        onCountryChange?.(countryKey);
+    };
+    const formatPhone = (raw) => {
+        const digits = raw.replace(/\D/g, "");
+        if (selectedCountry === "PH") {
+            return digits.replace(/^(\d{3})(\d{3})(\d{0,4}).*/, "$1 $2 $3").trim();
+        }
+        if (selectedCountry === "US" || selectedCountry === "CA") {
+            return digits.replace(/^(\d{3})(\d{3})(\d{0,4}).*/, "($1) $2 $3").trim();
+        }
+        return digits;
+    };
+    const handleInputChange = (e) => {
+        const formatted = formatPhone(e.target.value);
+        onChange(formatted);
+    };
+    return (_jsxs("div", { className: "phone-input-wrapper", ref: dropdownRef, children: [_jsxs("div", { className: "country-dropdown", onClick: () => setDropdownOpen(!dropdownOpen), children: [_jsx("img", { src: countryOptions[selectedCountry].flag, alt: countryOptions[selectedCountry].country, className: "country-flag" }), _jsx("span", { className: "country-code", children: countryOptions[selectedCountry].code })] }), dropdownOpen && (_jsx("div", { className: "country-dropdown-menu", children: Object.entries(countryOptions).map(([key, { code, country, flag }]) => (_jsxs("div", { className: "country-dropdown-item", onClick: () => handleCountrySelect(key), children: [_jsx("img", { src: flag, alt: country, className: "country-flag" }), _jsx("span", { children: country }), _jsx("span", { className: "country-code-text", children: code })] }, key))) })), _jsx("input", { type: "text", value: value, onChange: handleInputChange, placeholder: countryOptions[selectedCountry].placeholder, className: "phone-input", autoComplete: "off" })] }));
+};
+export default PhoneInput;

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import "./common.css";
+export { Button } from "./components/Button/Button";
+export type { ButtonProps } from "./components/Button/Button";
+export { Modal } from "./components/Modal/Modal";
+export type { ModalProps } from "./components/Modal/Modal";
+export { Input } from "./components/Input/Input";
+export type { InputProps } from "./components/Input/Input";
+export { Alert } from "./components/Alert/Alert";
+export type { AlertProps, AlertVariant } from "./components/Alert/Alert";
+export { PhoneInput } from "./components/PhoneInput/PhoneInput";
+export type { PhoneInputProps } from "./components/PhoneInput/PhoneInput";
+export { Dropdown } from "./components/Dropdown/Dropdown";
+export type { DropdownProps } from "./components/Dropdown/Dropdown";
+export { DatePicker2 } from "./components/DatePicker2/DatePicker2";
+export type { DatePicker2Props, DateValue } from "./components/DatePicker2/DatePicker2";
+export { DatePicker } from "./components/DatePicker/DatePicker";
+export type { DatePickerProps, DatePickerValue } from "./components/DatePicker/DatePicker";

package/dist/index.js

@@ -0,0 +1,9 @@
+import "./common.css";
+export { Button } from "./components/Button/Button";
+export { Modal } from "./components/Modal/Modal";
+export { Input } from "./components/Input/Input";
+export { Alert } from "./components/Alert/Alert";
+export { PhoneInput } from "./components/PhoneInput/PhoneInput";
+export { Dropdown } from "./components/Dropdown/Dropdown";
+export { DatePicker2 } from "./components/DatePicker2/DatePicker2";
+export { DatePicker } from "./components/DatePicker/DatePicker";

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/declarations.d.ts","../src/index.ts","../src/components/alert/alert.tsx","../src/components/button/button.tsx","../src/components/datepicker/datepicker.tsx","../src/components/datepicker2/datepicker2.tsx","../src/components/dropdown/dropdown.tsx","../src/components/input/input.tsx","../src/components/modal/modal.tsx","../src/components/phoneinput/phoneinput.tsx"],"version":"5.9.3"}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "ml-ui-lib",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "author": "Kenneth James B. Simbulan",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc --watch",
+    "dev": "npm run build -- --watch"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^5.9.3"
+  }
+}