ml-ui-lib 1.0.2 → 1.0.5

package/dist/index.d.ts

@@ -5,8 +5,6 @@ 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";

package/dist/index.js

@@ -2,7 +2,6 @@ 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";

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "ml-ui-lib",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "main": "dist/index.js",
   "author": "Kenneth James B. Simbulan",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "common.css",
+    "components/**/*.css"
   ],
   "scripts": {
     "build": "tsc",

package/src/common.css

@@ -0,0 +1,27 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+
+/* Common global styles for all ml-ui-lib components */
+:root {
+  --ml-font-family: 'Poppins', sans-serif;
+  --ml-color-primary: #0070f3;
+  --ml-color-secondary: #eaeaea;
+  --ml-radius: 6px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--ml-font-family);
+  margin: 0;
+  padding: 0;
+  background-color: #fff;
+  color: #111;
+}
+
+button {
+  font-family: inherit;
+  border-radius: var(--ml-radius);
+  transition: all 0.2s ease;
+}

package/src/components/Button/Button.css

@@ -0,0 +1,24 @@
+.btn {
+  border: none;
+  border-radius: 6px;
+  padding: 10px 16px;
+  cursor: pointer;
+  font-size: 16px;
+  /* margin: 10px; */
+}
+
+.btn-default {
+  background: #ffffff;
+  color: #5d5d5d;
+  border: solid 0.5px #5d5d5d;
+}
+
+.btn-red {
+  background: #ff0000;
+  color: #ffffff;
+}
+
+.btn-black {
+  background: #333333;
+  color: #ffffff;
+}

package/src/components/Button/Button.tsx

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

package/src/components/DatePicker/DatePicker.css

@@ -0,0 +1,103 @@
+.datepicker-wrapper {
+  position: relative;
+  font-family: "Poppins", sans-serif;
+  width: 250px;
+}
+
+.datepicker-input-wrapper {
+  display: flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+}
+
+.datepicker-input {
+  width: 100%;
+  padding: 10px 36px 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  font-size: 15px;
+  cursor: pointer;
+}
+
+.datepicker-icon {
+  position: absolute;
+  right: 10px;
+  pointer-events: none;
+  color: #666;
+}
+
+.datepicker-calendar {
+  position: absolute;
+  top: 45px;
+  width: 100%;
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  z-index: 10;
+  padding: 8px;
+}
+
+.datepicker-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.datepicker-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.datepicker-weekday {
+  font-size: 12px;
+}
+
+.datepicker-days-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+}
+
+.datepicker-day {
+  text-align: center;
+  padding: 6px 0;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.datepicker-day:hover {
+  background: #f0f0f0;
+}
+
+.datepicker-day.selected {
+  background: #ff4d4d;
+  color: #fff;
+  font-weight: 500;
+}
+
+.datepicker-day.today {
+  border: 1px solid #ff4d4d;
+  border-radius: 50%;
+}
+
+.datepicker-day.empty {
+  pointer-events: none;
+}
+
+.has-error .datepicker-input {
+  border-color: #ff4d4d;
+}
+
+.datepicker-error {
+  color: #ff4d4d;
+  font-size: 13px;
+  margin-top: 4px;
+  display: block;
+}

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,158 @@
+"use client";
+import React, { useState, useRef, useEffect } 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 const DatePicker: React.FC<DatePickerProps> = ({
+    value,
+    onChange,
+    placeholder = "Select date",
+    className = "",
+    error,
+}) => {
+    const [open, setOpen] = useState(false);
+    const [selectedDate, setSelectedDate] = useState<DatePickerValue | null>(value || null);
+
+    const today = new Date();
+    const [currentMonth, setCurrentMonth] = useState<number>(
+        value?.month ? value.month - 1 : today.getMonth()
+    );
+    const [currentYear, setCurrentYear] = useState<number>(value?.year || today.getFullYear());
+
+    const wrapperRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (e: MouseEvent) => {
+            if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+                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: number) => {
+        const newDate = { day, month: currentMonth + 1, year: currentYear };
+        setSelectedDate(newDate);
+        onChange?.(newDate);
+        setOpen(false);
+    };
+
+    return (
+        <div className={`datepicker-wrapper ${className} ${error ? "has-error" : ""}`} ref={wrapperRef}>
+            <div className="datepicker-input-wrapper" onClick={() => setOpen(!open)}>
+                <input
+                    readOnly
+                    value={
+                        selectedDate
+                            ? `${String(selectedDate.day).padStart(2, "0")}/${String(selectedDate.month).padStart(2, "0")}/${selectedDate.year}`
+                            : ""
+                    }
+                    placeholder={placeholder}
+                    className="datepicker-input"
+                />
+                {/* Inline line-style calendar icon */}
+                <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"
+                >
+                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+                    <line x1="16" y1="2" x2="16" y2="6"></line>
+                    <line x1="8" y1="2" x2="8" y2="6"></line>
+                    <line x1="3" y1="10" x2="21" y2="10"></line>
+                </svg>
+            </div>
+
+            {open && (
+                <div className="datepicker-calendar">
+                    {/* Header */}
+                    <div className="datepicker-header">
+                        <button
+                            onClick={() =>
+                                setCurrentMonth((prev) => (prev === 0 ? 11 : prev - 1))
+                            }
+                        >
+                            ◀
+                        </button>
+                        <span>
+                            {monthNames[currentMonth]} {currentYear}
+                        </span>
+                        <button
+                            onClick={() =>
+                                setCurrentMonth((prev) => (prev === 11 ? 0 : prev + 1))
+                            }
+                        >
+                            ▶
+                        </button>
+                    </div>
+
+                    {/* Weekday Names */}
+                    <div className="datepicker-weekdays">
+                        {weekDays.map((d) => (
+                            <div key={d} className="datepicker-weekday">
+                                {d}
+                            </div>
+                        ))}
+                    </div>
+
+                    {/* Days */}
+                    <div className="datepicker-days-grid">
+                        {Array.from({ length: firstDayOfMonth }).map((_, i) => (
+                            <div key={`empty-${i}`} className="datepicker-day empty" />
+                        ))}
+                        {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 (
+                                <div
+                                    key={day}
+                                    className={`datepicker-day ${isSelected ? "selected" : ""} ${isToday ? "today" : ""}`}
+                                    onClick={() => handleDayClick(day)}
+                                >
+                                    {day}
+                                </div>
+                            );
+                        })}
+                    </div>
+                </div>
+            )}
+
+            {error && <span className="datepicker-error">{error}</span>}
+        </div>
+    );
+};
+
+export default DatePicker;

package/src/components/DatePicker2/DatePicker2.css

@@ -0,0 +1,113 @@
+.date-picker-wrapper {
+    display: flex;
+    gap: 8px;
+    font-family: "Poppins", sans-serif;
+    flex-wrap: wrap;
+}
+
+.full-width {
+    flex: 1 1 100px;
+    /* position: relative; */
+}
+
+.date-picker-dropdown {
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    align-items: center;
+    padding: 0.4rem 0.6rem;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.date-picker-dropdown-carret {
+    font-size: 12px;
+    color: #666;
+}
+
+.date-picker-grid-wrapper {
+    width: 30%;
+    position: absolute;
+    /* left: 0px; */
+    /* top: 40px;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    z-index: 10; */
+}
+
+.date-picker-header {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  position: absolute;
+  z-index: 100;
+  left: 0px;
+  padding: 10px;
+  width: 100%;
+  background-color: #f5f5f5;
+  margin-top: 5px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+.date-picker-header button {
+  background-color: #ffffff;
+  color: #5f5f5f;
+  border-radius: 15px;
+  border: 0.5px solid #5f5f5f;
+}
+
+.date-picker-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+    padding: 10px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+    max-height: 250px;
+    overflow-y: auto;
+    position: absolute;
+    z-index: 30;
+    width: 100%;
+    margin-top: 45px;
+    left: 0px;
+}
+
+.date-picker-dropdown-option {
+    text-align: center;
+    padding: 10px;
+    border-radius: 6px;
+    cursor: pointer;
+    /* font-size: 14px;
+    font-weight: 500; */
+    transition: background-color 0.2s ease, color 0.2s ease;
+    user-select: none;
+}
+
+.date-picker-dropdown-option:hover {
+    background-color: #f0f0f0;
+}
+
+.date-picker-dropdown-option.selected {
+    background-color: #333;
+    color: #fff;
+}
+
+.date-picker-empty {
+    gap: 8px;
+    padding: 10px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+    overflow-y: auto;
+    position: absolute;
+    z-index: 30;
+    /* width: 100%; */
+    margin-top: 10px;
+    left: 0px;
+}

package/src/components/DatePicker2/DatePicker2.tsx

@@ -0,0 +1,179 @@
+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

@@ -0,0 +1,84 @@
+.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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,36 @@
+.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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,81 @@
+.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

@@ -0,0 +1,63 @@
+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

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

package/src/components/PhoneInput/PhoneInput.tsx

@@ -0,0 +1,127 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import "./PhoneInput.css";
+
+interface CountryOption {
+  code: string;
+  country: string;
+  flag: string; // CDN URL or emoji
+  placeholder: string;
+}
+
+export interface PhoneInputProps { 
+  value: string;
+  onChange: (formatted: string) => void;
+  country?: string;
+  onCountryChange?: (countryCode: string) => void;
+}
+
+const countryOptions: Record<string, CountryOption> = {
+  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: React.FC<PhoneInputProps> = ({
+  value,
+  onChange,
+  country = "PH",
+  onCountryChange,
+}) => {
+  const [selectedCountry, setSelectedCountry] = useState<string>(country);
+  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);
+  }, []);
+
+  const handleCountrySelect = (countryKey: string) => {
+    setSelectedCountry(countryKey);
+    setDropdownOpen(false);
+    onCountryChange?.(countryKey);
+  };
+
+  const formatPhone = (raw: string) => {
+    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: React.ChangeEvent<HTMLInputElement>) => {
+    const formatted = formatPhone(e.target.value);
+    onChange(formatted);
+  };
+
+  return (
+    <div className="phone-input-wrapper" ref={dropdownRef}>
+      {/* Country Selector */}
+      <div
+        className="country-dropdown"
+        onClick={() => setDropdownOpen(!dropdownOpen)}
+      >
+        <img
+          src={countryOptions[selectedCountry].flag}
+          alt={countryOptions[selectedCountry].country}
+          className="country-flag"
+        />
+        <span className="country-code">{countryOptions[selectedCountry].code}</span>
+      </div>
+
+      {/* Dropdown Menu */}
+      {dropdownOpen && (
+        <div className="country-dropdown-menu">
+          {Object.entries(countryOptions).map(([key, { code, country, flag }]) => (
+            <div
+              key={key}
+              className="country-dropdown-item"
+              onClick={() => handleCountrySelect(key)}
+            >
+              <img src={flag} alt={country} className="country-flag" />
+              <span>{country}</span>
+              <span className="country-code-text">{code}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Input */}
+      <input
+        type="text"
+        value={value}
+        onChange={handleInputChange}
+        placeholder={countryOptions[selectedCountry].placeholder}
+        className="phone-input"
+        autoComplete="off"
+      />
+    </div>
+  );
+};
+
+export default PhoneInput;

package/src/declarations.d.ts

@@ -0,0 +1,14 @@
+declare module "*.png" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.jpg" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.svg" {
+  const value: string;
+  export default value;
+}

package/src/index.ts

@@ -0,0 +1,22 @@
+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 { 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";