@fangzsx/component-library 0.0.29 → 0.0.31

package/dist/components/{PhoneDropdown → PhoneAndCountryDropdown}/index.d.ts

@@ -3,7 +3,7 @@ import { default as React } from 'react';
 export interface CountryOption {
     iso: string;
     country: string;
-    code: string;
+    dialCode: string;
 }
 export interface CountryValue {
     iso: string | null;
@@ -11,40 +11,25 @@ export interface CountryValue {
     dialCode: string | null;
     countryCode: string | null;
 }
-/** Default country value — Philippines (+63) */
 export declare const PH_DEFAULT: CountryValue;
 interface BaseProps {
-    /** List of available countries */
     options: CountryOption[];
-    /** Currently selected country value (defaults to Philippines) */
     value?: CountryValue;
-    /** Called when the country selection changes */
     onChange: (value: CountryValue) => void;
-    /** Placeholder for the search input inside the dropdown */
     searchPlaceholder?: string;
-    /** If true, shows inline validation error styling */
     error?: boolean;
-    /** Helper text shown below the input */
     helperText?: string;
-    /** Disables the entire component */
     disabled?: boolean;
-    /** Optional flag renderer — receives ISO code, return a ReactNode */
     renderFlag?: (iso: string) => React.ReactNode;
 }
 interface PhoneMode extends BaseProps {
-    /** Renders phone input alongside the country dropdown */
     mode: "phone";
-    /** Current phone number value */
     phoneNumber: string;
-    /** Called when the phone number changes */
     onPhoneChange: (value: string) => void;
-    /** If true, shows inline validation error on the phone input */
     phoneError?: boolean;
-    /** Helper text for the phone input */
     phoneHelperText?: string;
 }
 interface CountryMode extends BaseProps {
-    /** Renders a country-only dropdown (no phone input) */
     mode: "country";
     phoneNumber?: never;
     onPhoneChange?: never;
@@ -52,5 +37,5 @@ interface CountryMode extends BaseProps {
     phoneHelperText?: never;
 }
 export type PhoneAndCountryDropdownProps = PhoneMode | CountryMode;
-declare const PhoneAndCountryDropdown: React.FC<PhoneAndCountryDropdownProps>;
-export default PhoneAndCountryDropdown;
+export declare function PhoneAndCountryDropdown(props: PhoneAndCountryDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/{PhoneDropdown → PhoneAndCountryDropdown}/index.js

@@ -11,26 +11,29 @@ const H = B(/* @__PURE__ */ e("path", {
   country: "Philippines",
   dialCode: "63",
   countryCode: "PH"
-}, R = (n) => n.replace(/-/g, ""), ne = (n) => /* @__PURE__ */ e(
-  d,
-  {
-    component: "span",
-    sx: {
-      fontSize: 20,
-      lineHeight: 1,
-      width: 24,
-      textAlign: "center",
-      userSelect: "none"
-    },
-    children: te(n)
-  }
-);
+}, R = (n) => n.replace(/-/g, "");
+function ne(n) {
+  return n.toUpperCase().split("").map((l) => String.fromCodePoint(127397 + l.charCodeAt(0))).join("");
+}
 function te(n) {
-  return n.toUpperCase().split("").map((s) => String.fromCodePoint(127397 + s.charCodeAt(0))).join("");
+  return /* @__PURE__ */ e(
+    d,
+    {
+      component: "span",
+      sx: {
+        fontSize: 20,
+        lineHeight: 1,
+        width: 24,
+        textAlign: "center",
+        userSelect: "none"
+      },
+      children: ne(n)
+    }
+  );
 }
-const k = ({
+function k({
   anchorEl: n,
-  open: s,
+  open: l,
   options: x,
   searchValue: o,
   onSearchChange: w,
@@ -39,21 +42,21 @@ const k = ({
   showDialCode: C,
   searchPlaceholder: i = "Search country or code",
   renderFlag: u
-}) => {
+}) {
   const f = D(null);
   $(() => {
-    s && setTimeout(() => f.current?.focus(), 50);
-  }, [s]);
+    l && setTimeout(() => f.current?.focus(), 50);
+  }, [l]);
   const a = ee(() => {
     const r = o.toLowerCase(), h = R(r);
     return x.filter(
-      (c) => c.country.toLowerCase().includes(r) || c.code.includes(r) || R(c.code).includes(h) || c.iso.toLowerCase().includes(r)
+      (c) => c.country.toLowerCase().includes(r) || c.dialCode.includes(r) || R(c.dialCode).includes(h) || c.iso.toLowerCase().includes(r)
     );
   }, [x, o]);
-  return !s || !n ? null : /* @__PURE__ */ e(
+  return !l || !n ? null : /* @__PURE__ */ e(
     U,
     {
-      open: s,
+      open: l,
       anchorEl: n,
       placement: "bottom-start",
       disablePortal: !1,
@@ -105,7 +108,7 @@ const k = ({
                     ),
                     C && /* @__PURE__ */ t(p, { variant: "body2", color: "text.secondary", sx: { ml: 1, whiteSpace: "nowrap" }, children: [
                       "+",
-                      r.code
+                      r.dialCode
                     ] })
                   ]
                 },
@@ -117,9 +120,10 @@ const k = ({
       ] }) })
     }
   );
-}, ce = (n) => {
+}
+function ce(n) {
   const {
-    mode: s,
+    mode: l,
     options: x,
     value: o = re,
     onChange: w,
@@ -127,19 +131,19 @@ const k = ({
     error: m = !1,
     helperText: C,
     disabled: i = !1,
-    renderFlag: u = ne
-  } = n, [f, a] = v(!1), [r, h] = v(""), [c, E] = v(!1), [b, S] = v(!1), g = D(null), P = (l) => {
+    renderFlag: u = te
+  } = n, [f, a] = v(!1), [r, h] = v(""), [c, E] = v(!1), [b, S] = v(!1), g = D(null), P = (s) => {
     w({
-      iso: l.iso,
-      country: l.country,
-      dialCode: l.code,
-      countryCode: l.iso
+      iso: s.iso,
+      country: s.country,
+      dialCode: s.dialCode,
+      countryCode: s.iso
     }), a(!1), h("");
   }, I = () => {
     a(!1), h("");
   };
-  if (s === "phone") {
-    const { phoneNumber: l, onPhoneChange: q, phoneError: F, phoneHelperText: M } = n, O = F || c && !l.trim(), L = M || (c && !l.trim() ? "Phone number is required" : void 0), W = m || b && !o.iso, A = C || (b && !o.iso ? "Country is required" : void 0);
+  if (l === "phone") {
+    const { phoneNumber: s, onPhoneChange: q, phoneError: F, phoneHelperText: M } = n, O = F || c && !s.trim(), L = M || (c && !s.trim() ? "Phone number is required" : void 0), W = m || b && !o.iso, A = C || (b && !o.iso ? "Country is required" : void 0);
     return /* @__PURE__ */ t(d, { sx: { position: "relative" }, children: [
       /* @__PURE__ */ t(d, { sx: { display: "flex" }, children: [
         /* @__PURE__ */ t(
@@ -191,7 +195,7 @@ const k = ({
             fullWidth: !0,
             size: "small",
             type: "tel",
-            value: l,
+            value: s,
             onChange: (j) => q(j.target.value),
             onBlur: () => E(!0),
             disabled: i,
@@ -284,8 +288,8 @@ const k = ({
       }
     )
   ] });
-};
+}
 export {
   re as PH_DEFAULT,
-  ce as default
+  ce as PhoneAndCountryDropdown
 };

package/dist/main.d.ts

@@ -9,6 +9,7 @@ export { FlatBanner } from './components/FlatBanner';
 export { Label } from './components/Label';
 export { LinearProgress } from './components/LinearProgress';
 export { MediaCardWithAction } from './components/MediaCardWithAction';
+export { PhoneAndCountryDropdown } from './components/PhoneAndCountryDropdown';
 export { PromoCode } from './components/PromoCode';
 export { RadioButtonGroup } from './components/RadioButtonGroup';
 export { Stepper } from './components/Stepper';

package/dist/main.js

@@ -3,32 +3,34 @@ import { Banner as p } from "./components/Banner/index.js";
 import { B as m } from "./index-CS-LWC7Z.js";
 import { CheckBox as a } from "./components/Checkbox/index.js";
 import { ScrollableDialog as i } from "./components/Dialog/index.js";
-import { CheckboxGroup as B } from "./components/CheckboxGroup/index.js";
-import { Dropdown as u } from "./components/Dropdown/index.js";
-import { FlatBanner as b } from "./components/FlatBanner/index.js";
-import { Label as C } from "./components/Label/index.js";
-import { LinearProgress as h } from "./components/LinearProgress/index.js";
-import { MediaCardWithAction as P } from "./components/MediaCardWithAction/index.js";
-import { PromoCode as A } from "./components/PromoCode/index.js";
-import { RadioButtonGroup as G } from "./components/RadioButtonGroup/index.js";
-import { Stepper as S } from "./components/Stepper/index.js";
-import { Text as w } from "./components/Text/index.js";
-import { TextFieldInput as M } from "./components/TextFieldInput/index.js";
+import { CheckboxGroup as d } from "./components/CheckboxGroup/index.js";
+import { Dropdown as B } from "./components/Dropdown/index.js";
+import { FlatBanner as C } from "./components/FlatBanner/index.js";
+import { Label as h } from "./components/Label/index.js";
+import { LinearProgress as D } from "./components/LinearProgress/index.js";
+import { MediaCardWithAction as g } from "./components/MediaCardWithAction/index.js";
+import { PhoneAndCountryDropdown as k } from "./components/PhoneAndCountryDropdown/index.js";
+import { PromoCode as F } from "./components/PromoCode/index.js";
+import { RadioButtonGroup as L } from "./components/RadioButtonGroup/index.js";
+import { Stepper as T } from "./components/Stepper/index.js";
+import { Text as I } from "./components/Text/index.js";
+import { TextFieldInput as R } from "./components/TextFieldInput/index.js";
 export {
   e as AppBarPublic,
   p as Banner,
   m as Button,
   a as CheckBox,
-  B as CheckboxGroup,
+  d as CheckboxGroup,
   i as Dialog,
-  u as Dropdown,
-  b as FlatBanner,
-  C as Label,
-  h as LinearProgress,
-  P as MediaCardWithAction,
-  A as PromoCode,
-  G as RadioButtonGroup,
-  S as Stepper,
-  w as Text,
-  M as TextFieldInput
+  B as Dropdown,
+  C as FlatBanner,
+  h as Label,
+  D as LinearProgress,
+  g as MediaCardWithAction,
+  k as PhoneAndCountryDropdown,
+  F as PromoCode,
+  L as RadioButtonGroup,
+  T as Stepper,
+  I as Text,
+  R as TextFieldInput
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fangzsx/component-library",
   "author": "Jay Gilbert Garzon",
   "private": false,
-  "version": "0.0.29",
+  "version": "0.0.31",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",