@drawbridge/components 0.0.78 → 0.1.0

package/dist/shared/card-prize.js

@@ -0,0 +1,188 @@
+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_prize_exports = {};
+__export(card_prize_exports, {
+  default: () => card_prize_default
+});
+module.exports = __toCommonJS(card_prize_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_drawbridge_utils = require("@drawbridge/drawbridge-utils");
+var import_arrow_right = __toESM(require("../icons/arrow-right"));
+var import_styles = require("../styles");
+var import_button = __toESM(require("./button"));
+var import_card_asset = __toESM(require("./card-asset"));
+const CardPrize = ({
+  className,
+  currency,
+  description,
+  element,
+  footer = false,
+  icon: Icon = import_arrow_right.default,
+  images,
+  onClick,
+  remaining,
+  style,
+  subtitle,
+  title,
+  value
+}) => {
+  const linked = Boolean(onClick || element);
+  const Card = linked ? "span" : "div";
+  const classes = [
+    "block w-full text-left space-y-3"
+  ];
+  if (className) {
+    classes.push(className);
+  }
+  const card = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    Card,
+    {
+      ...{
+        className: classes.join(" "),
+        ...style && { style: (0, import_styles.textStyle)(style) }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "span",
+          {
+            ...{
+              className: "w-full flex items-center space-x-4"
+            },
+            children: [
+              (images == null ? void 0 : images.primary) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_card_asset.default,
+                {
+                  ...{
+                    asset: images.primary,
+                    className: "w-14 h-14",
+                    sizes: "56px",
+                    title: images.primary.filename
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "span",
+                {
+                  ...{
+                    className: "space-y-1"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "p",
+                      {
+                        ...{
+                          className: "font-medium leading-tight"
+                        },
+                        children: title
+                      }
+                    ),
+                    (value || subtitle) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "p",
+                      {
+                        ...{
+                          className: "text-sm font-medium leading-tight opacity-70 break-words"
+                        },
+                        children: value ? "Valued at " + (0, import_drawbridge_utils.formatCurrency)({
+                          code: currency == null ? void 0 : currency.code,
+                          digits: currency == null ? void 0 : currency.digits,
+                          display: "parts",
+                          value
+                        }) : subtitle
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "p",
+          {
+            ...{
+              className: "text-sm text-left"
+            },
+            children: description
+          }
+        ),
+        footer && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "span",
+          {
+            ...{
+              className: "flex items-center justify-between"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "p",
+                {
+                  ...{
+                    className: "text-sm shrink-0"
+                  },
+                  children: remaining ? remaining + " available" : "See results"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  ...{
+                    "aria-hidden": true,
+                    className: "shrink-0"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    Icon,
+                    {
+                      ...{
+                        className: "w-4 h-4"
+                      }
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+  if (!linked) {
+    return card;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.default,
+    {
+      ...{
+        "aria-label": "Selected Prize, " + title,
+        element,
+        onClick,
+        variant: "link"
+      },
+      children: card
+    }
+  );
+};
+var card_prize_default = CardPrize;

package/dist/shared/card-prize.mjs

@@ -0,0 +1,159 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { formatCurrency } from "@drawbridge/drawbridge-utils";
+import ArrowRight from "../icons/arrow-right";
+import { textStyle } from "../styles";
+import Button from "./button";
+import CardAsset from "./card-asset";
+const CardPrize = ({
+  className,
+  currency,
+  description,
+  element,
+  footer = false,
+  icon: Icon = ArrowRight,
+  images,
+  onClick,
+  remaining,
+  style,
+  subtitle,
+  title,
+  value
+}) => {
+  const linked = Boolean(onClick || element);
+  const Card = linked ? "span" : "div";
+  const classes = [
+    "block w-full text-left space-y-3"
+  ];
+  if (className) {
+    classes.push(className);
+  }
+  const card = /* @__PURE__ */ jsxs(
+    Card,
+    {
+      ...{
+        className: classes.join(" "),
+        ...style && { style: textStyle(style) }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            ...{
+              className: "w-full flex items-center space-x-4"
+            },
+            children: [
+              (images == null ? void 0 : images.primary) && /* @__PURE__ */ jsx(
+                CardAsset,
+                {
+                  ...{
+                    asset: images.primary,
+                    className: "w-14 h-14",
+                    sizes: "56px",
+                    title: images.primary.filename
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  ...{
+                    className: "space-y-1"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        ...{
+                          className: "font-medium leading-tight"
+                        },
+                        children: title
+                      }
+                    ),
+                    (value || subtitle) && /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        ...{
+                          className: "text-sm font-medium leading-tight opacity-70 break-words"
+                        },
+                        children: value ? "Valued at " + formatCurrency({
+                          code: currency == null ? void 0 : currency.code,
+                          digits: currency == null ? void 0 : currency.digits,
+                          display: "parts",
+                          value
+                        }) : subtitle
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        description && /* @__PURE__ */ jsx(
+          "p",
+          {
+            ...{
+              className: "text-sm text-left"
+            },
+            children: description
+          }
+        ),
+        footer && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            ...{
+              className: "flex items-center justify-between"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  ...{
+                    className: "text-sm shrink-0"
+                  },
+                  children: remaining ? remaining + " available" : "See results"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  ...{
+                    "aria-hidden": true,
+                    className: "shrink-0"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      ...{
+                        className: "w-4 h-4"
+                      }
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+  if (!linked) {
+    return card;
+  }
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...{
+        "aria-label": "Selected Prize, " + title,
+        element,
+        onClick,
+        variant: "link"
+      },
+      children: card
+    }
+  );
+};
+var card_prize_default = CardPrize;
+export {
+  card_prize_default as default
+};

package/dist/shared/carousel.js

@@ -0,0 +1,175 @@
+"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 carousel_exports = {};
+__export(carousel_exports, {
+  default: () => carousel_default
+});
+module.exports = __toCommonJS(carousel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
+var import_embla_carousel_fade = __toESM(require("embla-carousel-fade"));
+var import_button = __toESM(require("./button"));
+var import_styles = require("../styles");
+const justifies = {
+  center: "justify-center",
+  end: "justify-end",
+  start: "justify-start"
+};
+const Carousel = ({
+  autoHeight = false,
+  // { justify, overlay }; none, no dots.
+  dots,
+  fade = false,
+  // What each slide is called: its slides and dots read "<label> N of M".
+  label = "Slide",
+  onSelect,
+  slides = [],
+  style
+}) => {
+  const [ref, api] = (0, import_embla_carousel_react.default)({}, fade ? [(0, import_embla_carousel_fade.default)()] : []);
+  const [index, setIndex] = (0, import_react.useState)(0);
+  const [height, setHeight] = (0, import_react.useState)();
+  (0, import_react.useEffect)(
+    () => {
+      if (!api) return void 0;
+      const sync = (_, event) => {
+        const next = api.selectedScrollSnap();
+        setIndex(next);
+        if (autoHeight) {
+          const node = api.slideNodes()[next];
+          if (node) setHeight(node.offsetHeight);
+        }
+        if (event === "select") onSelect == null ? void 0 : onSelect(next);
+      };
+      if (autoHeight) sync(api, "init");
+      api.on("select", sync);
+      api.on("reInit", sync);
+      api.on("resize", sync);
+      return () => {
+        api.off("select", sync);
+        api.off("reInit", sync);
+        api.off("resize", sync);
+      };
+    },
+    [api, autoHeight, onSelect]
+  );
+  (0, import_react.useEffect)(
+    () => {
+      api == null ? void 0 : api.reInit();
+    },
+    [api, slides.length]
+  );
+  if (slides.length === 0) return null;
+  if (slides.length === 1) return slides[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: "relative"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ...{
+              className: "overflow-hidden" + (autoHeight ? " transition-[height] duration-300" : ""),
+              ref,
+              ...autoHeight && height && {
+                style: { height }
+              }
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                ...{
+                  // Sliding slides sit apart; fading ones stack, so they need no gap.
+                  className: ["flex", !fade && "gap-6 md:gap-12", autoHeight && "items-start"].filter(Boolean).join(" ")
+                },
+                children: slides.map((slide, key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    ...{
+                      "aria-label": label + " " + (key + 1) + " of " + slides.length,
+                      "aria-roledescription": "slide",
+                      // A column, so a slide that draws its own flex-[0_0_100%]
+                      // wrapper (the dashboard tiles) still fills the slide.
+                      className: "flex min-w-0 flex-[0_0_100%] flex-col",
+                      role: "group"
+                    },
+                    children: slide
+                  },
+                  (slide == null ? void 0 : slide.key) ?? key
+                ))
+              }
+            )
+          }
+        ),
+        dots && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ...{
+              className: [
+                "flex items-center gap-2",
+                justifies[dots.justify] || justifies.center,
+                dots.overlay ? "absolute inset-x-3 bottom-3" : "mt-4 py-3"
+              ].join(" ")
+            },
+            children: slides.map((_, key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_button.default,
+              {
+                ...{
+                  "aria-label": label + " " + (key + 1) + " of " + slides.length,
+                  // The current slide's dot fades and takes no click.
+                  disabled: index === key,
+                  inline: true,
+                  onClick: () => api == null ? void 0 : api.scrollTo(key),
+                  variant: "link"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    ...{
+                      className: "block w-3 h-3 rounded-full border" + (style ? "" : " bg-black border-white"),
+                      ...style && {
+                        style: (0, import_styles.dotStyle)(style, index === key)
+                      }
+                    }
+                  }
+                )
+              },
+              "carousel-dot-" + key
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+var carousel_default = Carousel;

package/dist/shared/carousel.mjs

@@ -0,0 +1,146 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import Fade from "embla-carousel-fade";
+import Button from "./button";
+import { dotStyle } from "../styles";
+const justifies = {
+  center: "justify-center",
+  end: "justify-end",
+  start: "justify-start"
+};
+const Carousel = ({
+  autoHeight = false,
+  // { justify, overlay }; none, no dots.
+  dots,
+  fade = false,
+  // What each slide is called: its slides and dots read "<label> N of M".
+  label = "Slide",
+  onSelect,
+  slides = [],
+  style
+}) => {
+  const [ref, api] = useEmblaCarousel({}, fade ? [Fade()] : []);
+  const [index, setIndex] = useState(0);
+  const [height, setHeight] = useState();
+  useEffect(
+    () => {
+      if (!api) return void 0;
+      const sync = (_, event) => {
+        const next = api.selectedScrollSnap();
+        setIndex(next);
+        if (autoHeight) {
+          const node = api.slideNodes()[next];
+          if (node) setHeight(node.offsetHeight);
+        }
+        if (event === "select") onSelect == null ? void 0 : onSelect(next);
+      };
+      if (autoHeight) sync(api, "init");
+      api.on("select", sync);
+      api.on("reInit", sync);
+      api.on("resize", sync);
+      return () => {
+        api.off("select", sync);
+        api.off("reInit", sync);
+        api.off("resize", sync);
+      };
+    },
+    [api, autoHeight, onSelect]
+  );
+  useEffect(
+    () => {
+      api == null ? void 0 : api.reInit();
+    },
+    [api, slides.length]
+  );
+  if (slides.length === 0) return null;
+  if (slides.length === 1) return slides[0];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...{
+              className: "overflow-hidden" + (autoHeight ? " transition-[height] duration-300" : ""),
+              ref,
+              ...autoHeight && height && {
+                style: { height }
+              }
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...{
+                  // Sliding slides sit apart; fading ones stack, so they need no gap.
+                  className: ["flex", !fade && "gap-6 md:gap-12", autoHeight && "items-start"].filter(Boolean).join(" ")
+                },
+                children: slides.map((slide, key) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ...{
+                      "aria-label": label + " " + (key + 1) + " of " + slides.length,
+                      "aria-roledescription": "slide",
+                      // A column, so a slide that draws its own flex-[0_0_100%]
+                      // wrapper (the dashboard tiles) still fills the slide.
+                      className: "flex min-w-0 flex-[0_0_100%] flex-col",
+                      role: "group"
+                    },
+                    children: slide
+                  },
+                  (slide == null ? void 0 : slide.key) ?? key
+                ))
+              }
+            )
+          }
+        ),
+        dots && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...{
+              className: [
+                "flex items-center gap-2",
+                justifies[dots.justify] || justifies.center,
+                dots.overlay ? "absolute inset-x-3 bottom-3" : "mt-4 py-3"
+              ].join(" ")
+            },
+            children: slides.map((_, key) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...{
+                  "aria-label": label + " " + (key + 1) + " of " + slides.length,
+                  // The current slide's dot fades and takes no click.
+                  disabled: index === key,
+                  inline: true,
+                  onClick: () => api == null ? void 0 : api.scrollTo(key),
+                  variant: "link"
+                },
+                children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    ...{
+                      className: "block w-3 h-3 rounded-full border" + (style ? "" : " bg-black border-white"),
+                      ...style && {
+                        style: dotStyle(style, index === key)
+                      }
+                    }
+                  }
+                )
+              },
+              "carousel-dot-" + key
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+var carousel_default = Carousel;
+export {
+  carousel_default as default
+};