@drawbridge/components 0.0.77 → 0.1.0

package/dist/shared/fieldset.js

@@ -0,0 +1,76 @@
+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 fieldset_exports = {};
+__export(fieldset_exports, {
+  default: () => fieldset_default
+});
+module.exports = __toCommonJS(fieldset_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_styles = require("../styles");
+const Fieldset = ({
+  button,
+  children,
+  className = "space-y-6",
+  disabled,
+  legend,
+  style,
+  ...rest
+}) => {
+  const classes = [];
+  if (className) {
+    classes.push(className);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "fieldset",
+    {
+      ...{
+        ...disabled && {
+          disabled: true,
+          className: "disabled:opacity-50"
+        },
+        ...rest
+      },
+      children: [
+        legend && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "legend",
+          {
+            ...{
+              className: "flex items-center justify-between w-full border-b border-black pb-2 mb-4",
+              // A brand draws the legend and its underline in its text colour; unbranded keeps the black token.
+              ...style && { style: { ...(0, import_styles.borderStyle)(style), ...(0, import_styles.textStyle)(style) } }
+            },
+            children: [
+              legend,
+              button
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ...{
+              className: classes.join(" ")
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+var fieldset_default = Fieldset;

package/dist/shared/fieldset.mjs

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { borderStyle, textStyle } from "../styles";
+const Fieldset = ({
+  button,
+  children,
+  className = "space-y-6",
+  disabled,
+  legend,
+  style,
+  ...rest
+}) => {
+  const classes = [];
+  if (className) {
+    classes.push(className);
+  }
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      ...{
+        ...disabled && {
+          disabled: true,
+          className: "disabled:opacity-50"
+        },
+        ...rest
+      },
+      children: [
+        legend && /* @__PURE__ */ jsxs(
+          "legend",
+          {
+            ...{
+              className: "flex items-center justify-between w-full border-b border-black pb-2 mb-4",
+              // A brand draws the legend and its underline in its text colour; unbranded keeps the black token.
+              ...style && { style: { ...borderStyle(style), ...textStyle(style) } }
+            },
+            children: [
+              legend,
+              button
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...{
+              className: classes.join(" ")
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+var fieldset_default = Fieldset;
+export {
+  fieldset_default as default
+};

package/dist/shared/form.js

@@ -0,0 +1,48 @@
+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 form_exports = {};
+__export(form_exports, {
+  default: () => form_default
+});
+module.exports = __toCommonJS(form_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+const Form = ({
+  children,
+  className,
+  noValidate = true,
+  onSubmit,
+  ...rest
+}) => {
+  const classes = ["w-full"];
+  if (className) {
+    classes.push(className);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "form",
+    {
+      ...{
+        className: classes.join(" "),
+        noValidate,
+        onSubmit,
+        ...rest
+      },
+      children
+    }
+  );
+};
+var form_default = Form;

package/dist/shared/form.mjs

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+const Form = ({
+  children,
+  className,
+  noValidate = true,
+  onSubmit,
+  ...rest
+}) => {
+  const classes = ["w-full"];
+  if (className) {
+    classes.push(className);
+  }
+  return /* @__PURE__ */ jsx(
+    "form",
+    {
+      ...{
+        className: classes.join(" "),
+        noValidate,
+        onSubmit,
+        ...rest
+      },
+      children
+    }
+  );
+};
+var form_default = Form;
+export {
+  form_default as default
+};

package/dist/shared/indicator.js

@@ -0,0 +1,50 @@
+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 indicator_exports = {};
+__export(indicator_exports, {
+  default: () => indicator_default
+});
+module.exports = __toCommonJS(indicator_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+const Indicator = ({
+  className = "w-3 h-3",
+  type = "active"
+}) => {
+  const indicators = {
+    active: "bg-green border-2 border-green-dark",
+    error: "bg-red border-2 border-red-dark",
+    inactive: "bg-gray border-2 border-gray-dark",
+    warning: "bg-[#F5E28F] border-2 border-[#ECD25F]"
+  };
+  const classes = [
+    indicators[type],
+    "inline-flex rounded-full aspect-square grow-0 shrink-0"
+  ];
+  if (className) {
+    classes.push(className);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      ...{
+        className: [...classes, "relative"].join(" ")
+      }
+    }
+  );
+};
+var indicator_default = Indicator;

package/dist/shared/indicator.mjs

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+const Indicator = ({
+  className = "w-3 h-3",
+  type = "active"
+}) => {
+  const indicators = {
+    active: "bg-green border-2 border-green-dark",
+    error: "bg-red border-2 border-red-dark",
+    inactive: "bg-gray border-2 border-gray-dark",
+    warning: "bg-[#F5E28F] border-2 border-[#ECD25F]"
+  };
+  const classes = [
+    indicators[type],
+    "inline-flex rounded-full aspect-square grow-0 shrink-0"
+  ];
+  if (className) {
+    classes.push(className);
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...{
+        className: [...classes, "relative"].join(" ")
+      }
+    }
+  );
+};
+var indicator_default = Indicator;
+export {
+  indicator_default as default
+};

package/dist/shared/input-checkbox-list.js

@@ -0,0 +1,114 @@
+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 input_checkbox_list_exports = {};
+__export(input_checkbox_list_exports, {
+  default: () => input_checkbox_list_default
+});
+module.exports = __toCommonJS(input_checkbox_list_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_input_checkbox = __toESM(require("../input-checkbox"));
+var import_styles = require("../styles");
+var import_wrapper_gradient = __toESM(require("../wrapper-gradient"));
+const InputCheckboxList = ({
+  className,
+  items = [],
+  onChange = () => {
+  },
+  style,
+  value = []
+}) => {
+  var _a, _b;
+  const id = (0, import_react.useId)();
+  const classes = {
+    // The sticky row covers the list scrolling under it: white on the dashboard,
+    // the brand's page colour (and its text colour for the rule) with a brand.
+    header: [
+      "sticky top-0 pb-3 mb-3 border-b",
+      style ? "" : "bg-white border-gray"
+    ],
+    list: [
+      "space-y-1"
+    ]
+  };
+  if (className) {
+    classes.list.push(className);
+  }
+  const all = items.length > 0 && value.length === items.length;
+  const checkbox = (key, label, checked, onCheck) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "label",
+    {
+      ...{
+        className: "block"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_input_checkbox.default,
+        {
+          ...{
+            label,
+            labelId: id + key,
+            onChange: onCheck,
+            role: "checkbox",
+            style,
+            value: checked
+          }
+        }
+      )
+    },
+    key
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ...{
+          className: classes.header.join(" "),
+          ...style && { style: { ...(0, import_styles.backgroundStyle)(style), ...(0, import_styles.borderStyle)(style) } }
+        },
+        children: checkbox("all", "Select all", all, () => onChange(all ? [] : items.map(({ value: value2 }) => value2)))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_wrapper_gradient.default,
+      {
+        ...{
+          classNameScroll: classes.list.join(" "),
+          // The fade into the brand's page colour; none falls back to the white one.
+          color: (_b = (_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb
+        },
+        children: items.map((item, index) => checkbox(
+          "item-" + index,
+          item.key,
+          value.includes(item.value),
+          (checked) => onChange(checked ? [...value, item.value] : value.filter((entry) => entry !== item.value))
+        ))
+      }
+    )
+  ] });
+};
+var input_checkbox_list_default = InputCheckboxList;

package/dist/shared/input-checkbox-list.mjs

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import InputCheckbox from "../input-checkbox";
+import { backgroundStyle, borderStyle } from "../styles";
+import WrapperGradient from "../wrapper-gradient";
+const InputCheckboxList = ({
+  className,
+  items = [],
+  onChange = () => {
+  },
+  style,
+  value = []
+}) => {
+  var _a, _b;
+  const id = useId();
+  const classes = {
+    // The sticky row covers the list scrolling under it: white on the dashboard,
+    // the brand's page colour (and its text colour for the rule) with a brand.
+    header: [
+      "sticky top-0 pb-3 mb-3 border-b",
+      style ? "" : "bg-white border-gray"
+    ],
+    list: [
+      "space-y-1"
+    ]
+  };
+  if (className) {
+    classes.list.push(className);
+  }
+  const all = items.length > 0 && value.length === items.length;
+  const checkbox = (key, label, checked, onCheck) => /* @__PURE__ */ jsx(
+    "label",
+    {
+      ...{
+        className: "block"
+      },
+      children: /* @__PURE__ */ jsx(
+        InputCheckbox,
+        {
+          ...{
+            label,
+            labelId: id + key,
+            onChange: onCheck,
+            role: "checkbox",
+            style,
+            value: checked
+          }
+        }
+      )
+    },
+    key
+  );
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...{
+          className: classes.header.join(" "),
+          ...style && { style: { ...backgroundStyle(style), ...borderStyle(style) } }
+        },
+        children: checkbox("all", "Select all", all, () => onChange(all ? [] : items.map(({ value: value2 }) => value2)))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      WrapperGradient,
+      {
+        ...{
+          classNameScroll: classes.list.join(" "),
+          // The fade into the brand's page colour; none falls back to the white one.
+          color: (_b = (_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb
+        },
+        children: items.map((item, index) => checkbox(
+          "item-" + index,
+          item.key,
+          value.includes(item.value),
+          (checked) => onChange(checked ? [...value, item.value] : value.filter((entry) => entry !== item.value))
+        ))
+      }
+    )
+  ] });
+};
+var input_checkbox_list_default = InputCheckboxList;
+export {
+  input_checkbox_list_default as default
+};

package/dist/shared/input-range.js

@@ -0,0 +1,111 @@
+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 input_range_exports = {};
+__export(input_range_exports, {
+  default: () => input_range_default
+});
+module.exports = __toCommonJS(input_range_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_styles = require("../styles");
+const className = "h-6 w-6 border border-black bg-gray-light";
+const control = {
+  className,
+  radius: 12
+};
+const previews = {
+  button: control,
+  image: {
+    className,
+    // deliberately short of half the height: 30px on a full-size photo is a
+    // rounded tile, so the preview must not round all the way to a circle
+    radius: 8
+  },
+  input: control
+};
+const InputRange = ({
+  className: className2,
+  max = 100,
+  min = 0,
+  onChange,
+  preview = "number",
+  step = 1,
+  style,
+  value,
+  ...rest
+}) => {
+  const classes = ["w-full accent-current"];
+  if (className2) {
+    classes.push(className2);
+  }
+  ;
+  const current = value ?? min;
+  const shape = previews[preview];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: "flex items-center gap-3",
+        // The readout takes the brand's text colour; unbranded it inherits.
+        ...style && { style: (0, import_styles.textStyle)(style) }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            ...{
+              className: classes.join(" "),
+              max,
+              min,
+              onChange: ({ target }) => onChange(Number(target.value)),
+              step,
+              // The thumb and filled track are the brand's button colour; unbranded, accent-current.
+              ...style && { style: { accentColor: (0, import_styles.buttonStyle)(style).backgroundColor } },
+              type: "range",
+              value: current,
+              ...rest
+            }
+          }
+        ),
+        shape ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            ...{
+              className: [shape.className, "shrink-0 transition-[border-radius]"].join(" "),
+              style: {
+                // The brand's page colour outlined in its text colour, over the tokens.
+                ...style && { ...(0, import_styles.backgroundStyle)(style), ...(0, import_styles.borderStyle)(style) },
+                // px, never a percentage — a percentage radius resolves per axis, which
+                // rounds the wider previews into ellipses instead of a pill
+                borderRadius: current / max * shape.radius + "px"
+              }
+            }
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            ...{
+              className: "text-sm tabular-nums w-8 shrink-0 text-right"
+            },
+            children: current
+          }
+        )
+      ]
+    }
+  );
+};
+var input_range_default = InputRange;

package/dist/shared/input-range.mjs

@@ -0,0 +1,92 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { backgroundStyle, borderStyle, buttonStyle, textStyle } from "../styles";
+const className = "h-6 w-6 border border-black bg-gray-light";
+const control = {
+  className,
+  radius: 12
+};
+const previews = {
+  button: control,
+  image: {
+    className,
+    // deliberately short of half the height: 30px on a full-size photo is a
+    // rounded tile, so the preview must not round all the way to a circle
+    radius: 8
+  },
+  input: control
+};
+const InputRange = ({
+  className: className2,
+  max = 100,
+  min = 0,
+  onChange,
+  preview = "number",
+  step = 1,
+  style,
+  value,
+  ...rest
+}) => {
+  const classes = ["w-full accent-current"];
+  if (className2) {
+    classes.push(className2);
+  }
+  ;
+  const current = value ?? min;
+  const shape = previews[preview];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: "flex items-center gap-3",
+        // The readout takes the brand's text colour; unbranded it inherits.
+        ...style && { style: textStyle(style) }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...{
+              className: classes.join(" "),
+              max,
+              min,
+              onChange: ({ target }) => onChange(Number(target.value)),
+              step,
+              // The thumb and filled track are the brand's button colour; unbranded, accent-current.
+              ...style && { style: { accentColor: buttonStyle(style).backgroundColor } },
+              type: "range",
+              value: current,
+              ...rest
+            }
+          }
+        ),
+        shape ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...{
+              className: [shape.className, "shrink-0 transition-[border-radius]"].join(" "),
+              style: {
+                // The brand's page colour outlined in its text colour, over the tokens.
+                ...style && { ...backgroundStyle(style), ...borderStyle(style) },
+                // px, never a percentage — a percentage radius resolves per axis, which
+                // rounds the wider previews into ellipses instead of a pill
+                borderRadius: current / max * shape.radius + "px"
+              }
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...{
+              className: "text-sm tabular-nums w-8 shrink-0 text-right"
+            },
+            children: current
+          }
+        )
+      ]
+    }
+  );
+};
+var input_range_default = InputRange;
+export {
+  input_range_default as default
+};