@drawbridge/components 0.0.40 → 0.0.43

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)(
@@ -567,6 +571,7 @@ var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ (0, import_jsx_r
 );
 var Product = ({
   action = null,
+  addToCart = true,
   disabled = false,
   errors = {},
   header,
@@ -807,10 +812,10 @@ var Product = ({
                 "div",
                 {
                   ...{
-                    className: "grid grid-cols-2 gap-3"
+                    className: addToCart ? "grid grid-cols-2 gap-3" : ""
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    addToCart && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                       "button",
                       {
                         ...{
@@ -834,7 +839,7 @@ var Product = ({
                       "button",
                       {
                         ...{
-                          className: "button justify-center",
+                          className: "button justify-center" + (addToCart ? "" : " w-full"),
                           disabled: disabled || Boolean(action),
                           onClick: onBuy,
                           style: buttonStyle(style),

package/dist/product.mjs

@@ -1,13 +1,13 @@
 "use client";
 import {
   product_default
-} from "./chunk-HDOA3Y3U.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/dist/provider-font.js

@@ -0,0 +1,94 @@
+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/provider-font.js
+var provider_font_exports = {};
+__export(provider_font_exports, {
+  default: () => provider_font_default
+});
+module.exports = __toCommonJS(provider_font_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var defaults = {
+  family: "Roboto Flex",
+  transform: "none"
+};
+var toWeight = (value) => {
+  var _a;
+  if (value.includes("italic")) return (_a = value.match(/^\d+/)) == null ? void 0 : _a[0];
+  if (value.includes("regular")) return "normal";
+  return value;
+};
+var ProviderFont = (0, import_react.memo)(({
+  body,
+  children,
+  heading,
+  onError
+}) => {
+  const { url, fonts } = (0, import_react.useMemo)(
+    () => {
+      const bodyFamily = (body == null ? void 0 : body.family) || defaults.family;
+      const headingFamily = (heading == null ? void 0 : heading.family) || defaults.family;
+      const same = headingFamily === bodyFamily;
+      const url2 = [
+        "https://fonts.googleapis.com/css?family=" + bodyFamily.replace(/ /g, "+")
+      ];
+      const fonts2 = {
+        body: {
+          fontFamily: '"' + bodyFamily + '"',
+          textTransform: (body == null ? void 0 : body.transform) || defaults.transform
+        },
+        heading: {
+          fontFamily: '"' + headingFamily + '"',
+          textTransform: (heading == null ? void 0 : heading.transform) || defaults.transform
+        }
+      };
+      if (body == null ? void 0 : body.weight) {
+        url2.push(":" + body.weight);
+        fonts2.body.fontWeight = toWeight(body.weight);
+      }
+      if (!same) {
+        url2.push("%7C" + headingFamily.replace(/ /g, "+"));
+      }
+      if (heading == null ? void 0 : heading.weight) {
+        url2.push((same ? "," : ":") + heading.weight);
+        fonts2.heading.fontWeight = toWeight(heading.weight);
+      }
+      url2.push("&display=swap");
+      return { url: url2, fonts: fonts2 };
+    },
+    [body, heading]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "link",
+      {
+        ...{
+          href: url.join(""),
+          rel: "stylesheet",
+          ...onError && {
+            onError
+          }
+        }
+      }
+    ),
+    children(fonts)
+  ] });
+});
+ProviderFont.displayName = "ProviderFont";
+var provider_font_default = ProviderFont;

package/dist/provider-font.mjs

@@ -0,0 +1,74 @@
+// components/provider-font.js
+import { Fragment, memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaults = {
+  family: "Roboto Flex",
+  transform: "none"
+};
+var toWeight = (value) => {
+  var _a;
+  if (value.includes("italic")) return (_a = value.match(/^\d+/)) == null ? void 0 : _a[0];
+  if (value.includes("regular")) return "normal";
+  return value;
+};
+var ProviderFont = memo(({
+  body,
+  children,
+  heading,
+  onError
+}) => {
+  const { url, fonts } = useMemo(
+    () => {
+      const bodyFamily = (body == null ? void 0 : body.family) || defaults.family;
+      const headingFamily = (heading == null ? void 0 : heading.family) || defaults.family;
+      const same = headingFamily === bodyFamily;
+      const url2 = [
+        "https://fonts.googleapis.com/css?family=" + bodyFamily.replace(/ /g, "+")
+      ];
+      const fonts2 = {
+        body: {
+          fontFamily: '"' + bodyFamily + '"',
+          textTransform: (body == null ? void 0 : body.transform) || defaults.transform
+        },
+        heading: {
+          fontFamily: '"' + headingFamily + '"',
+          textTransform: (heading == null ? void 0 : heading.transform) || defaults.transform
+        }
+      };
+      if (body == null ? void 0 : body.weight) {
+        url2.push(":" + body.weight);
+        fonts2.body.fontWeight = toWeight(body.weight);
+      }
+      if (!same) {
+        url2.push("%7C" + headingFamily.replace(/ /g, "+"));
+      }
+      if (heading == null ? void 0 : heading.weight) {
+        url2.push((same ? "," : ":") + heading.weight);
+        fonts2.heading.fontWeight = toWeight(heading.weight);
+      }
+      url2.push("&display=swap");
+      return { url: url2, fonts: fonts2 };
+    },
+    [body, heading]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "link",
+      {
+        ...{
+          href: url.join(""),
+          rel: "stylesheet",
+          ...onError && {
+            onError
+          }
+        }
+      }
+    ),
+    children(fonts)
+  ] });
+});
+ProviderFont.displayName = "ProviderFont";
+var provider_font_default = ProviderFont;
+export {
+  provider_font_default as default
+};

package/dist/video.js

@@ -87,12 +87,14 @@ var ReactPlayer = (0, import_dynamic.default)(
   }
 );
 var Video = ({
+  className,
   controls = false,
   loop = false,
   onEnded = () => {
   },
   onDuration = () => {
   },
+  onTime,
   muted = true,
   onPlay,
   playing = false,
@@ -114,7 +116,7 @@ var Video = ({
     },
     [player, reset]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       ReactPlayer,
       {
@@ -140,6 +142,13 @@ var Video = ({
               onDuration(value);
             }
           },
+          onProgress: ({ playedSeconds }) => {
+            onTime == null ? void 0 : onTime(playedSeconds);
+          },
+          onSeek: (seconds) => {
+            onTime == null ? void 0 : onTime(seconds);
+          },
+          progressInterval: 100,
           onError: () => {
             setVideoUrl(mp4);
           },
@@ -173,5 +182,14 @@ var Video = ({
       }
     )
   ] });
+  return className ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      ...{
+        className
+      },
+      children: inner
+    }
+  ) : inner;
 };
 var video_default = Video;