@drawbridge/components 0.0.77 → 0.1.0

package/dist/shared/loader.mjs

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import LogoMark from "../icons/logo-mark";
+import Loader from "../icons/loader";
+const LogoLoader = () => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...{
+      className: "flex items-center justify-center w-full h-dvh bg-gray-light"
+    },
+    children: /* @__PURE__ */ jsx(
+      LogoMark,
+      {
+        ...{
+          className: "w-12 h-12 text-black animate-bounce"
+        }
+      }
+    )
+  }
+);
+const LoaderComponent = ({
+  children,
+  className
+}) => {
+  const classes = [
+    "z-10 absolute top-0 left-0 w-full h-full flex items-center justify-center"
+  ];
+  if (className) {
+    classes.push(className);
+  }
+  ;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...{
+        className: classes.join(" ")
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...{
+            className: "w-full text-center space-y-6"
+          },
+          children: [
+            children && /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...{
+                  className: "space-y-6"
+                },
+                children
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Loader,
+              {
+                ...{
+                  className: "w-6 h-6 m-auto"
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+const LoaderDynamic = () => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...{
+        className: "flex items-center justify-center w-full h-full p-6"
+      },
+      children: /* @__PURE__ */ jsx(
+        Loader,
+        {
+          ...{
+            className: "w-6 h-6 m-auto"
+          }
+        }
+      )
+    }
+  );
+};
+var loader_default = LoaderComponent;
+export {
+  LoaderDynamic,
+  LogoLoader,
+  loader_default as default
+};

package/dist/shared/overlay.js

@@ -0,0 +1,73 @@
+"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);
+var overlay_exports = {};
+__export(overlay_exports, {
+  default: () => overlay_default
+});
+module.exports = __toCommonJS(overlay_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("@headlessui/react");
+var import_button = __toESM(require("./button"));
+var import_styles = require("../styles");
+const Overlay = ({
+  className = "z-40 fixed inset-0",
+  // linger: the tint stays 300ms on leave, so the panel above animates out first.
+  linger = false,
+  onClick,
+  show = false,
+  style = null,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_react.Transition,
+  {
+    ...{
+      as: "div",
+      className: [
+        className,
+        "flex transition duration-200 ease-in data-[closed]:opacity-0",
+        linger && "data-[leave]:data-[closed]:delay-300",
+        !style && "bg-black/50"
+      ].filter(Boolean).join(" "),
+      show: Boolean(show),
+      ...style && { style: { backgroundColor: (0, import_styles.textStyle)(style).color.replace(")", ",.6)") } }
+    },
+    children: onClick && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_button.default,
+      {
+        ...{
+          "aria-label": "Close",
+          onClick,
+          variant: "link",
+          ...rest
+        }
+      }
+    )
+  }
+);
+var overlay_default = Overlay;

package/dist/shared/overlay.mjs

@@ -0,0 +1,44 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Transition } from "@headlessui/react";
+import Button from "./button";
+import { textStyle } from "../styles";
+const Overlay = ({
+  className = "z-40 fixed inset-0",
+  // linger: the tint stays 300ms on leave, so the panel above animates out first.
+  linger = false,
+  onClick,
+  show = false,
+  style = null,
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  Transition,
+  {
+    ...{
+      as: "div",
+      className: [
+        className,
+        "flex transition duration-200 ease-in data-[closed]:opacity-0",
+        linger && "data-[leave]:data-[closed]:delay-300",
+        !style && "bg-black/50"
+      ].filter(Boolean).join(" "),
+      show: Boolean(show),
+      ...style && { style: { backgroundColor: textStyle(style).color.replace(")", ",.6)") } }
+    },
+    children: onClick && /* @__PURE__ */ jsx(
+      Button,
+      {
+        ...{
+          "aria-label": "Close",
+          onClick,
+          variant: "link",
+          ...rest
+        }
+      }
+    )
+  }
+);
+var overlay_default = Overlay;
+export {
+  overlay_default as default
+};

package/dist/shared/progress.js

@@ -0,0 +1,75 @@
+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);
+var progress_exports = {};
+__export(progress_exports, {
+  default: () => progress_default
+});
+module.exports = __toCommonJS(progress_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+const Progress = ({
+  current,
+  label,
+  limit,
+  percentage,
+  preposition = "of",
+  unit
+}) => {
+  const value = [current, current != null && limit != null ? preposition : null, limit, unit].filter((part) => part != null && part !== "").join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: "space-y-1"
+      },
+      children: [
+        (label || value) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            ...{
+              className: "flex items-center justify-between text-sm"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: label }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: value })
+            ]
+          }
+        ),
+        typeof percentage === "number" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ...{
+              className: "relative h-2 w-full bg-gray rounded-full overflow-hidden"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                ...{
+                  className: "absolute top-0 left-0 h-full rounded-full " + (percentage > 100 ? "bg-red-dark" : "bg-green-dark"),
+                  style: {
+                    width: percentage + "%"
+                  }
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var progress_default = Progress;

package/dist/shared/progress.mjs

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const Progress = ({
+  current,
+  label,
+  limit,
+  percentage,
+  preposition = "of",
+  unit
+}) => {
+  const value = [current, current != null && limit != null ? preposition : null, limit, unit].filter((part) => part != null && part !== "").join(" ");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: "space-y-1"
+      },
+      children: [
+        (label || value) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...{
+              className: "flex items-center justify-between text-sm"
+            },
+            children: [
+              /* @__PURE__ */ jsx("p", { children: label }),
+              /* @__PURE__ */ jsx("p", { children: value })
+            ]
+          }
+        ),
+        typeof percentage === "number" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...{
+              className: "relative h-2 w-full bg-gray rounded-full overflow-hidden"
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...{
+                  className: "absolute top-0 left-0 h-full rounded-full " + (percentage > 100 ? "bg-red-dark" : "bg-green-dark"),
+                  style: {
+                    width: percentage + "%"
+                  }
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var progress_default = Progress;
+export {
+  progress_default as default
+};

package/dist/shared/provider-recaptcha.js

@@ -0,0 +1,43 @@
+"use client";
+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);
+var provider_recaptcha_exports = {};
+__export(provider_recaptcha_exports, {
+  default: () => provider_recaptcha_default
+});
+module.exports = __toCommonJS(provider_recaptcha_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_google_recaptcha_v3 = require("react-google-recaptcha-v3");
+const ProviderRecaptcha = ({
+  enabled = true,
+  children
+}) => {
+  if (enabled) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_google_recaptcha_v3.GoogleReCaptchaProvider,
+      {
+        ...{
+          reCaptchaKey: process.env.NEXT_PUBLIC_GOOGLE_RECAPTCHA_KEY
+        },
+        children
+      }
+    );
+  }
+  return children;
+};
+var provider_recaptcha_default = ProviderRecaptcha;

package/dist/shared/provider-recaptcha.mjs

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { GoogleReCaptchaProvider } from "react-google-recaptcha-v3";
+const ProviderRecaptcha = ({
+  enabled = true,
+  children
+}) => {
+  if (enabled) {
+    return /* @__PURE__ */ jsx(
+      GoogleReCaptchaProvider,
+      {
+        ...{
+          reCaptchaKey: process.env.NEXT_PUBLIC_GOOGLE_RECAPTCHA_KEY
+        },
+        children
+      }
+    );
+  }
+  return children;
+};
+var provider_recaptcha_default = ProviderRecaptcha;
+export {
+  provider_recaptcha_default as default
+};

package/dist/shared/sortable.js

@@ -0,0 +1,227 @@
+"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);
+var sortable_exports = {};
+__export(sortable_exports, {
+  default: () => sortable_default
+});
+module.exports = __toCommonJS(sortable_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_core = require("@dnd-kit/core");
+var import_sortable = require("@dnd-kit/sortable");
+var import_drag = __toESM(require("../icons/drag"));
+var import_utilities = require("@dnd-kit/utilities");
+const SortableItemContext = ({
+  as: Element,
+  children,
+  className,
+  id
+}) => {
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    transform,
+    transition
+  } = (0, import_sortable.useSortable)({
+    id
+  });
+  const style = {
+    opacity: isDragging ? 0.5 : 1,
+    transform: import_utilities.CSS.Transform.toString(transform),
+    transition
+  };
+  if (Element) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Element,
+      {
+        ...{
+          className,
+          ref: setNodeRef,
+          style
+        },
+        children: children({
+          ...attributes,
+          ...listeners
+        })
+      }
+    );
+  }
+  ;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...{
+        className: "relative w-full h-full",
+        ref: setNodeRef,
+        style
+      },
+      children: children({
+        ...attributes,
+        ...listeners
+      })
+    }
+  );
+};
+const SortableItem = ({
+  children,
+  className
+}) => {
+  const classes = [
+    "flex items-center space-x-3"
+  ];
+  if (className) {
+    classes.push(className);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...{
+        className: classes.join(" ")
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          ...{
+            className: "w-full"
+          },
+          children
+        }
+      )
+    }
+  );
+};
+const Sortable = ({
+  classNameSortableItem,
+  disabled = false,
+  onSort = () => {
+  },
+  renderItem,
+  sortableElement,
+  ...rest
+}) => {
+  const [activeId, setActiveId] = (0, import_react.useState)(null);
+  const accessibilityContainer = typeof document !== "undefined" ? document.body : null;
+  const items = (rest == null ? void 0 : rest.items) || [];
+  const showHandle = !disabled && Boolean((items == null ? void 0 : items.length) > 1);
+  const sensors = (0, import_core.useSensors)(
+    (0, import_core.useSensor)(import_core.PointerSensor),
+    (0, import_core.useSensor)(
+      import_core.KeyboardSensor,
+      {
+        coordinateGetter: import_sortable.sortableKeyboardCoordinates
+      }
+    )
+  );
+  const makeHandle = (props) => showHandle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...{
+        ...props,
+        className: "flex items-center justify-center shrink-0 w-6 h-6 rounded cursor-move touch-none"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_drag.default,
+        {
+          ...{
+            className: "w-4 h-4"
+          }
+        }
+      )
+    }
+  ) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.DndContext,
+    {
+      ...{
+        accessibility: accessibilityContainer ? {
+          container: accessibilityContainer
+        } : void 0,
+        collisionDetection: import_core.closestCenter,
+        onDragStart: ({ active }) => {
+          setActiveId(active.id);
+        },
+        onDragEnd: ({ active, over }) => {
+          if (over && active.id !== over.id) {
+            const sorted = (0, import_sortable.arrayMove)(items, active.id, over.id);
+            onSort(sorted, { from: active.id, to: over.id });
+          }
+          setActiveId(null);
+        },
+        sensors
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_sortable.SortableContext,
+        {
+          ...{
+            items: items.map((_, i) => i),
+            strategy: import_sortable.verticalListSortingStrategy
+          },
+          children: [
+            items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              SortableItemContext,
+              {
+                ...{
+                  as: sortableElement,
+                  className: classNameSortableItem,
+                  id: index
+                },
+                children: (dragHandleProps) => sortableElement ? renderItem(item, index, makeHandle(dragHandleProps)) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  SortableItem,
+                  {
+                    ...{
+                      ...classNameSortableItem && {
+                        className: classNameSortableItem
+                      }
+                    },
+                    children: renderItem(item, index, makeHandle(dragHandleProps))
+                  }
+                )
+              },
+              index
+            )),
+            !sortableElement && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.DragOverlay, { children: activeId !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              SortableItem,
+              {
+                ...{
+                  ...classNameSortableItem && {
+                    className: classNameSortableItem
+                  }
+                },
+                children: renderItem(items[activeId], activeId, makeHandle({}))
+              }
+            ) : null })
+          ]
+        }
+      )
+    }
+  );
+};
+var sortable_default = Sortable;