ml-ui-lib 1.0.4 → 1.0.6

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,18 +1,16 @@
 {
   "name": "ml-ui-lib",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "main": "dist/index.js",
   "author": "Kenneth James B. Simbulan",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist",
-    "src",
-    "common.css",
-    "components/**/*.css"
+    "dist"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && npm run copy-css",
+    "copy-css": "npm exec copyfiles -- 'src/**/*.css' dist",
     "watch": "tsc --watch",
     "dev": "npm run build -- --watch"
   },
@@ -23,6 +21,7 @@
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "copyfiles": "^2.4.1",
     "typescript": "^5.9.3"
   }
 }

package/src/common.css

@@ -1,27 +0,0 @@
-@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/Alert/Alert.css

@@ -1,56 +0,0 @@
-.alert {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  border-radius: 8px;
-  padding: 12px 16px;
-  font-family: 'Poppins', sans-serif;
-  font-size: 15px;
-  line-height: 1.4;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.alert-icon {
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-}
-
-.alert-content {
-  flex: 1;
-}
-
-.alert-title {
-  display: block;
-  font-weight: 600;
-  margin-bottom: 2px;
-}
-
-.alert-message {
-  margin: 0;
-}
-
-/* Variants */
-.alert-info {
-  background-color: #e6f4ff;
-  border: 1px solid #91caff;
-  color: #0958d9;
-}
-
-.alert-error {
-  background-color: #fff1f0;
-  border: 1px solid #ffa39e;
-  color: #cf1322;
-}
-
-.alert-warning {
-  background-color: #fffbe6;
-  border: 1px solid #ffe58f;
-  color: #ad8b00;
-}
-
-.alert-success {
-  background-color: #f6ffed;
-  border: 1px solid #b7eb8f;
-  color: #389e0d;
-}

package/src/components/Alert/Alert.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import "./Alert.css";
-
-export type AlertVariant = "info" | "error" | "warning" | "success";
-
-export interface AlertProps {
-  variant?: AlertVariant;
-  title?: string;
-  message: string;
-}
-
-export const Alert: React.FC<AlertProps> = ({
-  variant = "info",
-  title,
-  message,
-}) => {
-  return (
-    <div className={`alert alert-${variant}`}>
-      <div className="alert-content">
-        {title && <strong className="alert-title">{title}</strong>}
-        <p className="alert-message">{message}</p>
-      </div>
-    </div>
-  );
-};
-
-export default Alert;

package/src/components/Button/Button.css

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

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

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

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

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