@drawbridge/components 0.0.78 → 0.1.1

package/dist/shared/badge.js

@@ -0,0 +1,88 @@
+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 badge_exports = {};
+__export(badge_exports, {
+  default: () => badge_default
+});
+module.exports = __toCommonJS(badge_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_button = __toESM(require("./button"));
+const Badge = ({
+  children,
+  className = null,
+  element: Element = "span",
+  size = null,
+  type = "secondary",
+  ...rest
+}) => {
+  const classes = [
+    "badge"
+  ];
+  if (size) {
+    classes.push(size);
+  }
+  if (type) {
+    classes.push(type);
+  }
+  if (className) {
+    classes.push(className);
+  }
+  if (Element === "button") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_button.default,
+      {
+        ...{
+          ...rest,
+          inline: true,
+          variant: "link"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            ...{
+              className: classes.join(" ")
+            },
+            children
+          }
+        )
+      }
+    );
+  }
+  ;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Element,
+    {
+      ...{
+        className: classes.join(" "),
+        ...rest
+      },
+      children
+    }
+  );
+};
+var badge_default = Badge;

package/dist/shared/badge.mjs

@@ -0,0 +1,59 @@
+import { jsx } from "react/jsx-runtime";
+import Button from "./button.mjs";
+const Badge = ({
+  children,
+  className = null,
+  element: Element = "span",
+  size = null,
+  type = "secondary",
+  ...rest
+}) => {
+  const classes = [
+    "badge"
+  ];
+  if (size) {
+    classes.push(size);
+  }
+  if (type) {
+    classes.push(type);
+  }
+  if (className) {
+    classes.push(className);
+  }
+  if (Element === "button") {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ...{
+          ...rest,
+          inline: true,
+          variant: "link"
+        },
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...{
+              className: classes.join(" ")
+            },
+            children
+          }
+        )
+      }
+    );
+  }
+  ;
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      ...{
+        className: classes.join(" "),
+        ...rest
+      },
+      children
+    }
+  );
+};
+var badge_default = Badge;
+export {
+  badge_default as default
+};

package/dist/shared/button.js

@@ -0,0 +1,106 @@
+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 button_exports = {};
+__export(button_exports, {
+  default: () => button_default
+});
+module.exports = __toCommonJS(button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_loader = __toESM(require("../icons/loader"));
+var import_styles = require("../styles");
+const indicators = {
+  ai: "bg-purple-dark",
+  error: "bg-red-dark",
+  primary: "bg-black",
+  secondary: "bg-gray-dark",
+  success: "bg-green-dark",
+  warning: "bg-yellow-dark"
+};
+const Button = (0, import_react.forwardRef)(({
+  children = null,
+  className,
+  // dropped, see above
+  disabled = false,
+  element: Element = "button",
+  icon: Icon = null,
+  indicator = null,
+  // inline: as wide as its content; a button is full width otherwise.
+  inline = false,
+  // justify: where the content sits ('center', 'start', 'end', or 'between' to
+  // split label and icon); reverse puts the icon before the label (row-reverse).
+  justify = "center",
+  loading = false,
+  reverse = false,
+  size = "default",
+  style = null,
+  type = "button",
+  variant = "primary",
+  ...rest
+}, ref) => {
+  const labelled = children !== null && children !== void 0 && children !== false && children !== "";
+  const classes = ["button", style ? "brand" : variant];
+  if (size === "small") classes.push("small");
+  if (Icon && !labelled) classes.push("icon");
+  const text = typeof children === "string" || typeof children === "number";
+  if (inline) classes.push(variant !== "link" || style ? "w-fit" : text && !Icon ? "inline" : "inline-flex w-fit");
+  if (justify === "start") classes.push("justify-start");
+  if (justify === "end") classes.push("justify-end");
+  if (justify === "between" && Icon && labelled) classes.push("justify-between");
+  const inactive = disabled || loading;
+  if (inactive && Element !== "button") classes.push("disabled");
+  const icon = Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "w-5 h-5 shrink-0" });
+  const label = labelled && (text ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "data-label": true, children }) : children);
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+    reverse && icon,
+    label,
+    !reverse && icon
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    Element,
+    {
+      ref,
+      ...{
+        ...loading && { "aria-busy": true },
+        ...inactive && (Element === "button" ? { disabled: true } : { "aria-disabled": true }),
+        className: classes.join(" "),
+        ...style && { style: (0, import_styles.buttonStyle)(style) },
+        ...Element === "button" && { type },
+        ...rest
+      },
+      children: [
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-flex items-center gap-2 opacity-0", children: content }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loader.default, { className: "absolute inset-0 m-auto w-5 h-5 animate-spin" })
+        ] }) : content,
+        indicators[indicator] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "data-indicator": true, className: "absolute -top-1 -right-1 w-2.5 h-2.5 rounded-full ring-2 ring-white " + indicators[indicator] })
+      ]
+    }
+  );
+});
+var button_default = Button;

package/dist/shared/button.mjs

@@ -0,0 +1,77 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, Fragment } from "react";
+import Loader from "../icons/loader.mjs";
+import { buttonStyle } from "../styles.mjs";
+const indicators = {
+  ai: "bg-purple-dark",
+  error: "bg-red-dark",
+  primary: "bg-black",
+  secondary: "bg-gray-dark",
+  success: "bg-green-dark",
+  warning: "bg-yellow-dark"
+};
+const Button = forwardRef(({
+  children = null,
+  className,
+  // dropped, see above
+  disabled = false,
+  element: Element = "button",
+  icon: Icon = null,
+  indicator = null,
+  // inline: as wide as its content; a button is full width otherwise.
+  inline = false,
+  // justify: where the content sits ('center', 'start', 'end', or 'between' to
+  // split label and icon); reverse puts the icon before the label (row-reverse).
+  justify = "center",
+  loading = false,
+  reverse = false,
+  size = "default",
+  style = null,
+  type = "button",
+  variant = "primary",
+  ...rest
+}, ref) => {
+  const labelled = children !== null && children !== void 0 && children !== false && children !== "";
+  const classes = ["button", style ? "brand" : variant];
+  if (size === "small") classes.push("small");
+  if (Icon && !labelled) classes.push("icon");
+  const text = typeof children === "string" || typeof children === "number";
+  if (inline) classes.push(variant !== "link" || style ? "w-fit" : text && !Icon ? "inline" : "inline-flex w-fit");
+  if (justify === "start") classes.push("justify-start");
+  if (justify === "end") classes.push("justify-end");
+  if (justify === "between" && Icon && labelled) classes.push("justify-between");
+  const inactive = disabled || loading;
+  if (inactive && Element !== "button") classes.push("disabled");
+  const icon = Icon && /* @__PURE__ */ jsx(Icon, { className: "w-5 h-5 shrink-0" });
+  const label = labelled && (text ? /* @__PURE__ */ jsx("span", { "data-label": true, children }) : children);
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    reverse && icon,
+    label,
+    !reverse && icon
+  ] });
+  return /* @__PURE__ */ jsxs(
+    Element,
+    {
+      ref,
+      ...{
+        ...loading && { "aria-busy": true },
+        ...inactive && (Element === "button" ? { disabled: true } : { "aria-disabled": true }),
+        className: classes.join(" "),
+        ...style && { style: buttonStyle(style) },
+        ...Element === "button" && { type },
+        ...rest
+      },
+      children: [
+        loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-2 opacity-0", children: content }),
+          /* @__PURE__ */ jsx(Loader, { className: "absolute inset-0 m-auto w-5 h-5 animate-spin" })
+        ] }) : content,
+        indicators[indicator] && /* @__PURE__ */ jsx("span", { "data-indicator": true, className: "absolute -top-1 -right-1 w-2.5 h-2.5 rounded-full ring-2 ring-white " + indicators[indicator] })
+      ]
+    }
+  );
+});
+var button_default = Button;
+export {
+  button_default as default
+};

package/dist/shared/card-asset.js

@@ -0,0 +1,139 @@
+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 card_asset_exports = {};
+__export(card_asset_exports, {
+  default: () => card_asset_default
+});
+module.exports = __toCommonJS(card_asset_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_cdn = require("@drawbridge/drawbridge-utils/cdn");
+var import_cdn2 = require("@drawbridge/drawbridge-utils/cdn");
+var import_image = __toESM(require("next/image"));
+var import_document = __toESM(require("../icons/document"));
+var import_image2 = __toESM(require("../icons/image"));
+var import_play = __toESM(require("../icons/play"));
+const CardAsset = ({
+  asset,
+  className = "w-7 h-7",
+  classNameContainer = "bg-white border border-gray",
+  classNameIcon = "w-4 h-4",
+  // fallback glyph when no asset is set (e.g. a link's social platform
+  // icon) — an image asset always wins over it
+  icon: Icon,
+  size = "100x100",
+  sizes = "28px",
+  title
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  const classes = [
+    "flex items-center justify-center relative rounded overflow-hidden shrink-0",
+    classNameContainer,
+    className
+  ];
+  const url = typeof asset === "string" ? asset : null;
+  const rawSrc = url || ((_a = asset == null ? void 0 : asset.sizes) == null ? void 0 : _a[size]);
+  const imageSrc = (rawSrc == null ? void 0 : rawSrc.includes("cdn.shopify.com")) ? (0, import_cdn.cdnShopify)(rawSrc, size, asset == null ? void 0 : asset.updatedAt) : url || (0, import_cdn2.cdnSrc)(asset, size, asset == null ? void 0 : asset.updatedAt);
+  const videoFrameSrc = (0, import_cdn2.cdnSrc)(((_b = asset == null ? void 0 : asset.frames) == null ? void 0 : _b[asset == null ? void 0 : asset.poster]) || ((_c = asset == null ? void 0 : asset.frames) == null ? void 0 : _c[0]), size, asset == null ? void 0 : asset.updatedAt);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: classes.join(" ")
+      },
+      children: [
+        !asset && (Icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Icon,
+          {
+            ...{
+              className: classNameIcon
+            }
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_image2.default,
+          {
+            ...{
+              className: classNameIcon
+            }
+          }
+        )),
+        ((_d = asset == null ? void 0 : asset.mimetype) == null ? void 0 : _d.includes("application")) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_document.default,
+          {
+            ...{
+              className: classNameIcon
+            }
+          }
+        ),
+        (url || ((_e = asset == null ? void 0 : asset.mimetype) == null ? void 0 : _e.includes("image"))) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_image.default,
+          {
+            ...{
+              alt: title,
+              className: "object-cover object-center bg-gray",
+              fill: true,
+              priority: false,
+              sizes,
+              src: imageSrc,
+              // A url can be on any host (or a data: url), so next/image doesn't resize it.
+              unoptimized: Boolean(url)
+            }
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_image2.default,
+          {
+            ...{
+              className: classNameIcon
+            }
+          }
+        ) }),
+        ((_f = asset == null ? void 0 : asset.mimetype) == null ? void 0 : _f.includes("video")) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: videoFrameSrc ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_image.default,
+          {
+            ...{
+              alt: title,
+              className: "object-cover object-center bg-gray",
+              fill: true,
+              priority: false,
+              sizes,
+              src: videoFrameSrc
+            }
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_play.default,
+          {
+            ...{
+              className: classNameIcon
+            }
+          }
+        ) })
+      ]
+    }
+  );
+};
+var card_asset_default = CardAsset;

package/dist/shared/card-asset.mjs

@@ -0,0 +1,110 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { cdnShopify } from "@drawbridge/drawbridge-utils/cdn";
+import { cdnSrc } from "@drawbridge/drawbridge-utils/cdn";
+import Image from "next/image";
+import Document from "../icons/document.mjs";
+import ImageIcon from "../icons/image.mjs";
+import Play from "../icons/play.mjs";
+const CardAsset = ({
+  asset,
+  className = "w-7 h-7",
+  classNameContainer = "bg-white border border-gray",
+  classNameIcon = "w-4 h-4",
+  // fallback glyph when no asset is set (e.g. a link's social platform
+  // icon) — an image asset always wins over it
+  icon: Icon,
+  size = "100x100",
+  sizes = "28px",
+  title
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  const classes = [
+    "flex items-center justify-center relative rounded overflow-hidden shrink-0",
+    classNameContainer,
+    className
+  ];
+  const url = typeof asset === "string" ? asset : null;
+  const rawSrc = url || ((_a = asset == null ? void 0 : asset.sizes) == null ? void 0 : _a[size]);
+  const imageSrc = (rawSrc == null ? void 0 : rawSrc.includes("cdn.shopify.com")) ? cdnShopify(rawSrc, size, asset == null ? void 0 : asset.updatedAt) : url || cdnSrc(asset, size, asset == null ? void 0 : asset.updatedAt);
+  const videoFrameSrc = cdnSrc(((_b = asset == null ? void 0 : asset.frames) == null ? void 0 : _b[asset == null ? void 0 : asset.poster]) || ((_c = asset == null ? void 0 : asset.frames) == null ? void 0 : _c[0]), size, asset == null ? void 0 : asset.updatedAt);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: classes.join(" ")
+      },
+      children: [
+        !asset && (Icon ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            ...{
+              className: classNameIcon
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
+          ImageIcon,
+          {
+            ...{
+              className: classNameIcon
+            }
+          }
+        )),
+        ((_d = asset == null ? void 0 : asset.mimetype) == null ? void 0 : _d.includes("application")) && /* @__PURE__ */ jsx(
+          Document,
+          {
+            ...{
+              className: classNameIcon
+            }
+          }
+        ),
+        (url || ((_e = asset == null ? void 0 : asset.mimetype) == null ? void 0 : _e.includes("image"))) && /* @__PURE__ */ jsx(Fragment, { children: imageSrc ? /* @__PURE__ */ jsx(
+          Image,
+          {
+            ...{
+              alt: title,
+              className: "object-cover object-center bg-gray",
+              fill: true,
+              priority: false,
+              sizes,
+              src: imageSrc,
+              // A url can be on any host (or a data: url), so next/image doesn't resize it.
+              unoptimized: Boolean(url)
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
+          ImageIcon,
+          {
+            ...{
+              className: classNameIcon
+            }
+          }
+        ) }),
+        ((_f = asset == null ? void 0 : asset.mimetype) == null ? void 0 : _f.includes("video")) && /* @__PURE__ */ jsx(Fragment, { children: videoFrameSrc ? /* @__PURE__ */ jsx(
+          Image,
+          {
+            ...{
+              alt: title,
+              className: "object-cover object-center bg-gray",
+              fill: true,
+              priority: false,
+              sizes,
+              src: videoFrameSrc
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
+          Play,
+          {
+            ...{
+              className: classNameIcon
+            }
+          }
+        ) })
+      ]
+    }
+  );
+};
+var card_asset_default = CardAsset;
+export {
+  card_asset_default as default
+};