ml-ui-lib 1.0.4 → 1.0.6

package/src/components/PhoneInput/PhoneInput.tsx

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

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

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