@drawbridge/components 0.0.42 → 0.0.43

package/dist/advertisement.js

@@ -432,7 +432,8 @@ var InputGroup = ({
   input,
   label,
   message,
-  style = {}
+  style = {},
+  ...rest
 }) => {
   var _a, _b, _c, _d;
   const classes = [
@@ -449,7 +450,10 @@ var InputGroup = ({
     {
       ...{
         className: classes.join(" "),
-        "aria-live": "polite"
+        "aria-live": "polite",
+        ...(rest == null ? void 0 : rest["data-guide"]) && {
+          "data-guide": rest["data-guide"]
+        }
       },
       children: [
         label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(

package/dist/advertisement.mjs

@@ -1,16 +1,16 @@
 "use client";
 import {
   product_default
-} from "./chunk-GUSVATKJ.mjs";
+} from "./chunk-BHQBSNGK.mjs";
+import "./chunk-BD3TDNJE.mjs";
+import "./chunk-FYA7EAMR.mjs";
 import "./chunk-2ZYGRSSA.mjs";
 import "./chunk-XWELEL6Z.mjs";
 import {
   card_advertisement_default
 } from "./chunk-TJNIR4PF.mjs";
-import "./chunk-7ZLMDYBR.mjs";
+import "./chunk-JJH46E7B.mjs";
 import "./chunk-Q3UIVGPQ.mjs";
-import "./chunk-BD3TDNJE.mjs";
-import "./chunk-FYA7EAMR.mjs";
 import "./chunk-FJXG3REN.mjs";
 
 // components/advertisement.js

package/dist/{chunk-GUSVATKJ.mjs → chunk-BHQBSNGK.mjs}

@@ -1,3 +1,6 @@
+import {
+  input_select_default
+} from "./chunk-BD3TDNJE.mjs";
 import {
   loader_default
 } from "./chunk-2ZYGRSSA.mjs";
@@ -6,10 +9,7 @@ import {
 } from "./chunk-XWELEL6Z.mjs";
 import {
   input_group_default
-} from "./chunk-7ZLMDYBR.mjs";
-import {
-  input_select_default
-} from "./chunk-BD3TDNJE.mjs";
+} from "./chunk-JJH46E7B.mjs";
 import {
   buttonStyle,
   inputStyle

package/dist/chunk-BZ6WMIH7.mjs

@@ -0,0 +1,37 @@
+import {
+  inputStyle
+} from "./chunk-FJXG3REN.mjs";
+
+// components/input-text.js
+import { jsx } from "react/jsx-runtime";
+var InputText = ({
+  className,
+  max,
+  onChange,
+  style,
+  value,
+  ...rest
+}) => {
+  const classes = ["input"];
+  if (className) {
+    classes.push(className);
+  }
+  ;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...{
+        ...rest,
+        className: classes.join(" "),
+        onChange: ({ target }) => onChange(target.value),
+        style: inputStyle(style),
+        value
+      }
+    }
+  );
+};
+var input_text_default = InputText;
+
+export {
+  input_text_default
+};

package/dist/{chunk-7ZLMDYBR.mjs → chunk-JJH46E7B.mjs}

@@ -11,7 +11,8 @@ var InputGroup = ({
   input,
   label,
   message,
-  style = {}
+  style = {},
+  ...rest
 }) => {
   var _a, _b, _c, _d;
   const classes = [
@@ -28,7 +29,10 @@ var InputGroup = ({
     {
       ...{
         className: classes.join(" "),
-        "aria-live": "polite"
+        "aria-live": "polite",
+        ...(rest == null ? void 0 : rest["data-guide"]) && {
+          "data-guide": rest["data-guide"]
+        }
       },
       children: [
         label ? /* @__PURE__ */ jsxs(

package/dist/input-group.js

@@ -58,7 +58,8 @@ var InputGroup = ({
   input,
   label,
   message,
-  style = {}
+  style = {},
+  ...rest
 }) => {
   var _a, _b, _c, _d;
   const classes = [
@@ -75,7 +76,10 @@ var InputGroup = ({
     {
       ...{
         className: classes.join(" "),
-        "aria-live": "polite"
+        "aria-live": "polite",
+        ...(rest == null ? void 0 : rest["data-guide"]) && {
+          "data-guide": rest["data-guide"]
+        }
       },
       children: [
         label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(

package/dist/input-group.mjs

@@ -1,6 +1,6 @@
 import {
   input_group_default
-} from "./chunk-7ZLMDYBR.mjs";
+} from "./chunk-JJH46E7B.mjs";
 import "./chunk-Q3UIVGPQ.mjs";
 export {
   input_group_default as default

package/dist/input-name.js

@@ -0,0 +1,307 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// components/input-name.js
+var input_name_exports = {};
+__export(input_name_exports, {
+  default: () => input_name_default
+});
+module.exports = __toCommonJS(input_name_exports);
+
+// components/input-group.js
+var import_react = require("react");
+
+// components/icons/warning.js
+var import_jsx_runtime = require("react/jsx-runtime");
+var Warning = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    ...{
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      viewBox: "0 0 24 24",
+      ...props
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        ...{
+          d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      }
+    )
+  }
+);
+var warning_default = Warning;
+
+// components/input-group.js
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var InputGroup = ({
+  className,
+  error,
+  input,
+  label,
+  message,
+  style = {},
+  ...rest
+}) => {
+  var _a, _b, _c, _d;
+  const classes = [
+    "input-group"
+  ];
+  if (className) {
+    classes.push(className);
+  }
+  if (error) {
+    classes.push("error");
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      ...{
+        className: classes.join(" "),
+        "aria-live": "polite",
+        ...(rest == null ? void 0 : rest["data-guide"]) && {
+          "data-guide": rest["data-guide"]
+        }
+      },
+      children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            ...{
+              className: "space-y-2"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "span",
+                {
+                  ...{
+                    className: "block"
+                  },
+                  children: label
+                }
+              ),
+              input
+            ]
+          }
+        ) : input,
+        (error || message) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "p",
+          {
+            ...{
+              className: "flex items-center justify-start space-x-2 py-1 rounded text-sm " + (error && "px-1.5"),
+              ...error && Object.keys(style).length > 0 && {
+                style: {
+                  backgroundColor: (_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb.replace(")", ",.1)"),
+                  color: (_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb
+                }
+              }
+            },
+            children: [
+              error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  warning_default,
+                  {
+                    ...{
+                      className: "w-4 h-4",
+                      "aria-hidden": true
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  "span",
+                  {
+                    ...{
+                      className: "text-[0px] opacity-0 w-0 h-0 absolute"
+                    },
+                    children: [
+                      label,
+                      ": ",
+                      error
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "span",
+                {
+                  ...{
+                    ...error && {
+                      "aria-hidden": true
+                    }
+                  },
+                  children: error || message
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var input_group_default = InputGroup;
+
+// components/styles.js
+var inputStyle = (style) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  return {
+    backgroundColor: (_b = (_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb,
+    borderColor: (_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb,
+    borderRadius: ((_e = style == null ? void 0 : style.input) == null ? void 0 : _e.radius) != null ? style.input.radius / 4 + "px" : void 0,
+    color: (_g = (_f = style == null ? void 0 : style.text) == null ? void 0 : _f.color) == null ? void 0 : _g.rgb
+  };
+};
+
+// components/input-text.js
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var InputText = ({
+  className,
+  max,
+  onChange,
+  style,
+  value,
+  ...rest
+}) => {
+  const classes = ["input"];
+  if (className) {
+    classes.push(className);
+  }
+  ;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "input",
+    {
+      ...{
+        ...rest,
+        className: classes.join(" "),
+        onChange: ({ target }) => onChange(target.value),
+        style: inputStyle(style),
+        value
+      }
+    }
+  );
+};
+var input_text_default = InputText;
+
+// components/input-name.js
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var InputName = ({
+  error,
+  onChange,
+  settings,
+  style,
+  value = {}
+}) => {
+  var _a, _b, _c;
+  const inputs = {
+    first: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      input_group_default,
+      {
+        ...{
+          error: (_a = error == null ? void 0 : error.first) == null ? void 0 : _a.message,
+          input: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            input_text_default,
+            {
+              ...{
+                "aria-label": "First Name",
+                onChange: (first) => onChange({
+                  ...value,
+                  first
+                }),
+                style,
+                value: (value == null ? void 0 : value.first) || ""
+              }
+            }
+          ),
+          label: "First name",
+          style
+        }
+      }
+    ),
+    last: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      input_group_default,
+      {
+        ...{
+          error: (_b = error == null ? void 0 : error.last) == null ? void 0 : _b.message,
+          input: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            input_text_default,
+            {
+              ...{
+                "aria-label": "Last Name",
+                onChange: (last) => onChange({
+                  ...value,
+                  last
+                }),
+                style,
+                value: (value == null ? void 0 : value.last) || ""
+              }
+            }
+          ),
+          label: "Last name",
+          style
+        }
+      }
+    ),
+    name: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      input_group_default,
+      {
+        ...{
+          error: (_c = error == null ? void 0 : error.name) == null ? void 0 : _c.message,
+          input: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            input_text_default,
+            {
+              ...{
+                onChange: (name) => onChange({
+                  ...value,
+                  name
+                }),
+                style,
+                value: (value == null ? void 0 : value.name) || ""
+              }
+            }
+          ),
+          label: "Full name",
+          style
+        }
+      }
+    )
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      ...{
+        className: "flex flex-col space-y-4"
+      },
+      children: (settings.capture || []).map((input, key) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "div",
+        {
+          ...{
+            className: "w-full"
+          },
+          children: inputs[input]
+        },
+        "input-name-" + key
+      ))
+    }
+  );
+};
+var input_name_default = InputName;

package/dist/input-name.mjs

@@ -0,0 +1,115 @@
+import {
+  input_text_default
+} from "./chunk-BZ6WMIH7.mjs";
+import {
+  input_group_default
+} from "./chunk-JJH46E7B.mjs";
+import "./chunk-Q3UIVGPQ.mjs";
+import "./chunk-FJXG3REN.mjs";
+
+// components/input-name.js
+import { jsx } from "react/jsx-runtime";
+var InputName = ({
+  error,
+  onChange,
+  settings,
+  style,
+  value = {}
+}) => {
+  var _a, _b, _c;
+  const inputs = {
+    first: /* @__PURE__ */ jsx(
+      input_group_default,
+      {
+        ...{
+          error: (_a = error == null ? void 0 : error.first) == null ? void 0 : _a.message,
+          input: /* @__PURE__ */ jsx(
+            input_text_default,
+            {
+              ...{
+                "aria-label": "First Name",
+                onChange: (first) => onChange({
+                  ...value,
+                  first
+                }),
+                style,
+                value: (value == null ? void 0 : value.first) || ""
+              }
+            }
+          ),
+          label: "First name",
+          style
+        }
+      }
+    ),
+    last: /* @__PURE__ */ jsx(
+      input_group_default,
+      {
+        ...{
+          error: (_b = error == null ? void 0 : error.last) == null ? void 0 : _b.message,
+          input: /* @__PURE__ */ jsx(
+            input_text_default,
+            {
+              ...{
+                "aria-label": "Last Name",
+                onChange: (last) => onChange({
+                  ...value,
+                  last
+                }),
+                style,
+                value: (value == null ? void 0 : value.last) || ""
+              }
+            }
+          ),
+          label: "Last name",
+          style
+        }
+      }
+    ),
+    name: /* @__PURE__ */ jsx(
+      input_group_default,
+      {
+        ...{
+          error: (_c = error == null ? void 0 : error.name) == null ? void 0 : _c.message,
+          input: /* @__PURE__ */ jsx(
+            input_text_default,
+            {
+              ...{
+                onChange: (name) => onChange({
+                  ...value,
+                  name
+                }),
+                style,
+                value: (value == null ? void 0 : value.name) || ""
+              }
+            }
+          ),
+          label: "Full name",
+          style
+        }
+      }
+    )
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...{
+        className: "flex flex-col space-y-4"
+      },
+      children: (settings.capture || []).map((input, key) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...{
+            className: "w-full"
+          },
+          children: inputs[input]
+        },
+        "input-name-" + key
+      ))
+    }
+  );
+};
+var input_name_default = InputName;
+export {
+  input_name_default as default
+};

package/dist/input-number.mjs

@@ -1,9 +1,9 @@
-import {
-  plus_default
-} from "./chunk-HH7WF5BT.mjs";
 import {
   minus_default
 } from "./chunk-T5QQBFM3.mjs";
+import {
+  plus_default
+} from "./chunk-HH7WF5BT.mjs";
 import {
   inputStyle
 } from "./chunk-FJXG3REN.mjs";

package/dist/input-phone.js

@@ -0,0 +1,183 @@
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// components/input-phone.js
+var input_phone_exports = {};
+__export(input_phone_exports, {
+  default: () => input_phone_default,
+  isValidPhone: () => isValidPhone
+});
+module.exports = __toCommonJS(input_phone_exports);
+var import_style = require("react-phone-number-input/style.css");
+var import_react = require("react");
+var import_input = __toESM(require("react-phone-number-input/input"));
+var import_phone = require("@drawbridge/drawbridge-utils/phone");
+
+// components/styles.js
+var inputStyle = (style) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  return {
+    backgroundColor: (_b = (_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb,
+    borderColor: (_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb,
+    borderRadius: ((_e = style == null ? void 0 : style.input) == null ? void 0 : _e.radius) != null ? style.input.radius / 4 + "px" : void 0,
+    color: (_g = (_f = style == null ? void 0 : style.text) == null ? void 0 : _f.color) == null ? void 0 : _g.rgb
+  };
+};
+var inputPhoneStyle = (style) => inputStyle(style);
+
+// components/input-phone.js
+var import_jsx_runtime = require("react/jsx-runtime");
+var isValidPhone = (number = "", country = "") => {
+  const valid = (0, import_phone.isValid)(number, country);
+  return valid;
+};
+var InputPhone = ({
+  countries = [],
+  onChange,
+  style,
+  value = {}
+}) => {
+  var _a, _b;
+  const [country, setCountry] = (0, import_react.useState)((value == null ? void 0 : value.country) || (countries == null ? void 0 : countries[0]));
+  const [number, setNumber] = (0, import_react.useState)((value == null ? void 0 : value.number) || "");
+  (0, import_react.useEffect)(
+    () => {
+      if (value == null ? void 0 : value.country) return;
+      const tags = [navigator.language, ...navigator.languages || []];
+      const detected = tags.map((tag) => {
+        var _a2, _b2;
+        return (_b2 = (_a2 = tag == null ? void 0 : tag.split("-")) == null ? void 0 : _a2[1]) == null ? void 0 : _b2.toUpperCase();
+      }).find((code) => code && countries.includes(code));
+      if (detected) setCountry(detected);
+    },
+    []
+  );
+  (0, import_react.useEffect)(
+    () => {
+      onChange({
+        country,
+        number
+      });
+    },
+    [country, number, onChange]
+  );
+  const [keyboard, setKeyboard] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(
+    () => {
+      const down = (e) => {
+        if (e.key === "Tab") setKeyboard(true);
+      };
+      const click = () => setKeyboard(false);
+      window.addEventListener("keydown", down);
+      window.addEventListener("mousedown", click);
+      return () => {
+        window.removeEventListener("keydown", down);
+        window.removeEventListener("mousedown", click);
+      };
+    },
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: "flex items-center input !p-0 overflow-hidden",
+        style: inputPhoneStyle(style)
+      },
+      children: [
+        (countries == null ? void 0 : countries.length) > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "select",
+          {
+            ...{
+              className: "px-3 bg-none appearance-none border-none " + (keyboard ? "focus-visible:!border focus-visible:!border-inherit !rounded-none " : "focus-visible:!outline-0 focus-visible:!ring-0"),
+              onChange: ({ target }) => {
+                setCountry(target.value);
+                setNumber("");
+              },
+              style: inputPhoneStyle(style),
+              value: country
+            },
+            children: countries.map((item, key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "option",
+              {
+                ...{
+                  value: item
+                },
+                children: item
+              },
+              "input-phone-country-" + item + "-" + key
+            ))
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            ...{
+              className: "px-3 flex items-center",
+              style: inputPhoneStyle(style)
+            },
+            children: (countries == null ? void 0 : countries[0]) || ""
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ...{
+              className: "w-full",
+              style: {
+                borderLeft: "solid 1px " + ((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.hex)
+              }
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_input.default,
+              {
+                ...{
+                  "aria-label": "Phone Number",
+                  className: "input w-full border-none focus:outline-none focus:ring-0 focus:border-inherit",
+                  onChange: (val) => setNumber(val),
+                  style: inputPhoneStyle(style),
+                  value: number,
+                  ...country && {
+                    country,
+                    international: true,
+                    withCountryCallingCode: true
+                  }
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var input_phone_default = InputPhone;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  isValidPhone
+});

package/dist/input-phone.mjs

@@ -0,0 +1,139 @@
+"use client";
+import {
+  inputPhoneStyle
+} from "./chunk-FJXG3REN.mjs";
+
+// components/input-phone.js
+import "react-phone-number-input/style.css";
+import { useEffect, useState } from "react";
+import Input from "react-phone-number-input/input";
+import { isValid } from "@drawbridge/drawbridge-utils/phone";
+import { jsx, jsxs } from "react/jsx-runtime";
+var isValidPhone = (number = "", country = "") => {
+  const valid = isValid(number, country);
+  return valid;
+};
+var InputPhone = ({
+  countries = [],
+  onChange,
+  style,
+  value = {}
+}) => {
+  var _a, _b;
+  const [country, setCountry] = useState((value == null ? void 0 : value.country) || (countries == null ? void 0 : countries[0]));
+  const [number, setNumber] = useState((value == null ? void 0 : value.number) || "");
+  useEffect(
+    () => {
+      if (value == null ? void 0 : value.country) return;
+      const tags = [navigator.language, ...navigator.languages || []];
+      const detected = tags.map((tag) => {
+        var _a2, _b2;
+        return (_b2 = (_a2 = tag == null ? void 0 : tag.split("-")) == null ? void 0 : _a2[1]) == null ? void 0 : _b2.toUpperCase();
+      }).find((code) => code && countries.includes(code));
+      if (detected) setCountry(detected);
+    },
+    []
+  );
+  useEffect(
+    () => {
+      onChange({
+        country,
+        number
+      });
+    },
+    [country, number, onChange]
+  );
+  const [keyboard, setKeyboard] = useState(false);
+  useEffect(
+    () => {
+      const down = (e) => {
+        if (e.key === "Tab") setKeyboard(true);
+      };
+      const click = () => setKeyboard(false);
+      window.addEventListener("keydown", down);
+      window.addEventListener("mousedown", click);
+      return () => {
+        window.removeEventListener("keydown", down);
+        window.removeEventListener("mousedown", click);
+      };
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: "flex items-center input !p-0 overflow-hidden",
+        style: inputPhoneStyle(style)
+      },
+      children: [
+        (countries == null ? void 0 : countries.length) > 1 ? /* @__PURE__ */ jsx(
+          "select",
+          {
+            ...{
+              className: "px-3 bg-none appearance-none border-none " + (keyboard ? "focus-visible:!border focus-visible:!border-inherit !rounded-none " : "focus-visible:!outline-0 focus-visible:!ring-0"),
+              onChange: ({ target }) => {
+                setCountry(target.value);
+                setNumber("");
+              },
+              style: inputPhoneStyle(style),
+              value: country
+            },
+            children: countries.map((item, key) => /* @__PURE__ */ jsx(
+              "option",
+              {
+                ...{
+                  value: item
+                },
+                children: item
+              },
+              "input-phone-country-" + item + "-" + key
+            ))
+          }
+        ) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...{
+              className: "px-3 flex items-center",
+              style: inputPhoneStyle(style)
+            },
+            children: (countries == null ? void 0 : countries[0]) || ""
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...{
+              className: "w-full",
+              style: {
+                borderLeft: "solid 1px " + ((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.hex)
+              }
+            },
+            children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                ...{
+                  "aria-label": "Phone Number",
+                  className: "input w-full border-none focus:outline-none focus:ring-0 focus:border-inherit",
+                  onChange: (val) => setNumber(val),
+                  style: inputPhoneStyle(style),
+                  value: number,
+                  ...country && {
+                    country,
+                    international: true,
+                    withCountryCallingCode: true
+                  }
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var input_phone_default = InputPhone;
+export {
+  input_phone_default as default,
+  isValidPhone
+};

package/dist/input-text.mjs

@@ -1,36 +1,7 @@
 import {
-  inputStyle
-} from "./chunk-FJXG3REN.mjs";
-
-// components/input-text.js
-import { jsx } from "react/jsx-runtime";
-var InputText = ({
-  className,
-  max,
-  onChange,
-  style,
-  value,
-  ...rest
-}) => {
-  const classes = ["input"];
-  if (className) {
-    classes.push(className);
-  }
-  ;
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      ...{
-        ...rest,
-        className: classes.join(" "),
-        onChange: ({ target }) => onChange(target.value),
-        style: inputStyle(style),
-        value
-      }
-    }
-  );
-};
-var input_text_default = InputText;
+  input_text_default
+} from "./chunk-BZ6WMIH7.mjs";
+import "./chunk-FJXG3REN.mjs";
 export {
   input_text_default as default
 };

package/dist/product.js

@@ -75,7 +75,8 @@ var InputGroup = ({
   input,
   label,
   message,
-  style = {}
+  style = {},
+  ...rest
 }) => {
   var _a, _b, _c, _d;
   const classes = [
@@ -92,7 +93,10 @@ var InputGroup = ({
     {
       ...{
         className: classes.join(" "),
-        "aria-live": "polite"
+        "aria-live": "polite",
+        ...(rest == null ? void 0 : rest["data-guide"]) && {
+          "data-guide": rest["data-guide"]
+        }
       },
       children: [
         label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(

package/dist/product.mjs

@@ -1,13 +1,13 @@
 "use client";
 import {
   product_default
-} from "./chunk-GUSVATKJ.mjs";
+} from "./chunk-BHQBSNGK.mjs";
+import "./chunk-BD3TDNJE.mjs";
+import "./chunk-FYA7EAMR.mjs";
 import "./chunk-2ZYGRSSA.mjs";
 import "./chunk-XWELEL6Z.mjs";
-import "./chunk-7ZLMDYBR.mjs";
+import "./chunk-JJH46E7B.mjs";
 import "./chunk-Q3UIVGPQ.mjs";
-import "./chunk-BD3TDNJE.mjs";
-import "./chunk-FYA7EAMR.mjs";
 import "./chunk-FJXG3REN.mjs";
 export {
   product_default as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawbridge/components",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "exports": {
     "./advertisement": {
       "types": "./types/advertisement.d.ts",
@@ -282,10 +282,18 @@
       "types": "./types/input-group.d.ts",
       "default": "./dist/input-group.js"
     },
+    "./input-name": {
+      "types": "./types/input-name.d.ts",
+      "default": "./dist/input-name.js"
+    },
     "./input-number": {
       "types": "./types/input-number.d.ts",
       "default": "./dist/input-number.js"
     },
+    "./input-phone": {
+      "types": "./types/input-phone.d.ts",
+      "default": "./dist/input-phone.js"
+    },
     "./input-select": {
       "types": "./types/input-select.d.ts",
       "default": "./dist/input-select.js"
@@ -346,6 +354,7 @@
   "dependencies": {
     "@drawbridge/drawbridge-agents": "0.0.10",
     "embla-carousel-react": "8.6.0",
-    "react-player": "2.16.0"
+    "react-player": "2.16.0",
+    "react-phone-number-input": "3.4.12"
   }
 }

package/types/input-group.d.ts

@@ -8,6 +8,7 @@ export interface InputGroupProps {
 	label?: ReactNode;
 	message?: ReactNode;
 	style?: BrandStyle;
+	[key: `data-${string}`]: unknown;
 }
 
 declare const InputGroup: ComponentType<InputGroupProps>;

package/types/input-name.d.ts

@@ -0,0 +1,24 @@
+import { ComponentType } from 'react';
+import { BrandStyle } from './styles';
+
+export interface InputNameValue {
+	first?: string;
+	last?: string;
+	name?: string;
+}
+
+export interface InputNameProps {
+	error?: {
+		first?: { message?: string };
+		last?: { message?: string };
+		name?: { message?: string };
+	};
+	onChange: ( value: InputNameValue ) => void;
+	settings: { capture?: Array<'first' | 'last' | 'name'> };
+	style?: BrandStyle;
+	value?: InputNameValue;
+}
+
+declare const InputName: ComponentType<InputNameProps>;
+
+export default InputName;

package/types/input-phone.d.ts

@@ -0,0 +1,20 @@
+import { ComponentType } from 'react';
+import { BrandStyle } from './styles';
+
+export declare const isValidPhone: ( number?: string, country?: string ) => boolean;
+
+export interface InputPhoneValue {
+	country?: string;
+	number?: string;
+}
+
+export interface InputPhoneProps {
+	countries?: string[];
+	onChange: ( value: InputPhoneValue ) => void;
+	style?: BrandStyle;
+	value?: InputPhoneValue;
+}
+
+declare const InputPhone: ComponentType<InputPhoneProps>;
+
+export default InputPhone;