@drawbridge/components 0.0.37 → 0.0.40

package/dist/input-checkbox.js

@@ -0,0 +1,130 @@
+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/input-checkbox.js
+var input_checkbox_exports = {};
+__export(input_checkbox_exports, {
+  default: () => input_checkbox_default
+});
+module.exports = __toCommonJS(input_checkbox_exports);
+
+// components/icons/check.js
+var import_jsx_runtime = require("react/jsx-runtime");
+var Check = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    ...{
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      viewBox: "0 0 24 24",
+      ...props
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        ...{
+          d: "m4.5 12.75 6 6 9-13.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      }
+    )
+  }
+);
+var check_default = Check;
+
+// 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 inputCheckboxStyle = (style) => {
+  var _a;
+  return {
+    ...inputStyle(style),
+    borderRadius: ((_a = style == null ? void 0 : style.input) == null ? void 0 : _a.radius) != null ? Math.min(style.input.radius / 4, 6) + "px" : void 0
+  };
+};
+
+// components/input-checkbox.js
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var InputCheckbox = ({
+  className,
+  label,
+  labelId,
+  onChange,
+  style,
+  value,
+  ...rest
+}) => {
+  const classes = [
+    "inline-flex items-start space-x-2 w-full"
+  ];
+  if (className) {
+    classes.push(className);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "span",
+    {
+      ...{
+        className: classes.join(" ")
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            ...{
+              className: "relative flex items-center justify-center w-5 h-5 rounded-xs text-inherit bg-inherit border border-inherit ring-0 outline-0 shrink-0 focus:ring-0 focus:ring-0 focus:ring-offset-0 focus:outline-1",
+              onClick: () => onChange(value ? false : true),
+              type: "button",
+              "aria-checked": value ? true : false,
+              "aria-labelledby": labelId,
+              style: inputCheckboxStyle(style),
+              ...rest
+            },
+            children: Boolean(value) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              check_default,
+              {
+                ...{
+                  className: "absolute top-0 w-3.5 h-full pointer-events-none"
+                }
+              }
+            )
+          }
+        ),
+        label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "span",
+          {
+            ...{
+              className: "leading-tight",
+              id: labelId
+            },
+            children: label
+          }
+        )
+      ]
+    }
+  );
+};
+var input_checkbox_default = InputCheckbox;

package/dist/input-checkbox.mjs

@@ -0,0 +1,71 @@
+import {
+  check_default
+} from "./chunk-GFDZ7ER6.mjs";
+import {
+  inputCheckboxStyle
+} from "./chunk-FJXG3REN.mjs";
+
+// components/input-checkbox.js
+import { jsx, jsxs } from "react/jsx-runtime";
+var InputCheckbox = ({
+  className,
+  label,
+  labelId,
+  onChange,
+  style,
+  value,
+  ...rest
+}) => {
+  const classes = [
+    "inline-flex items-start space-x-2 w-full"
+  ];
+  if (className) {
+    classes.push(className);
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...{
+        className: classes.join(" ")
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            ...{
+              className: "relative flex items-center justify-center w-5 h-5 rounded-xs text-inherit bg-inherit border border-inherit ring-0 outline-0 shrink-0 focus:ring-0 focus:ring-0 focus:ring-offset-0 focus:outline-1",
+              onClick: () => onChange(value ? false : true),
+              type: "button",
+              "aria-checked": value ? true : false,
+              "aria-labelledby": labelId,
+              style: inputCheckboxStyle(style),
+              ...rest
+            },
+            children: Boolean(value) && /* @__PURE__ */ jsx(
+              check_default,
+              {
+                ...{
+                  className: "absolute top-0 w-3.5 h-full pointer-events-none"
+                }
+              }
+            )
+          }
+        ),
+        label && /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...{
+              className: "leading-tight",
+              id: labelId
+            },
+            children: label
+          }
+        )
+      ]
+    }
+  );
+};
+var input_checkbox_default = InputCheckbox;
+export {
+  input_checkbox_default as default
+};

package/dist/input-group.js

@@ -0,0 +1,156 @@
+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/input-group.js
+var input_group_exports = {};
+__export(input_group_exports, {
+  default: () => input_group_default
+});
+module.exports = __toCommonJS(input_group_exports);
+var import_react = require("react");
+
+// components/icons/warning.js
+var import_jsx_runtime = require("react/jsx-runtime");
+var Warning = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    ...{
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      viewBox: "0 0 24 24",
+      ...props
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        ...{
+          d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      }
+    )
+  }
+);
+var warning_default = Warning;
+
+// components/input-group.js
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var InputGroup = ({
+  className,
+  error,
+  input,
+  label,
+  message,
+  style = {}
+}) => {
+  var _a, _b, _c, _d;
+  const classes = [
+    "input-group"
+  ];
+  if (className) {
+    classes.push(className);
+  }
+  if (error) {
+    classes.push("error");
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      ...{
+        className: classes.join(" "),
+        "aria-live": "polite"
+      },
+      children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            ...{
+              className: "space-y-2"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "span",
+                {
+                  ...{
+                    className: "block"
+                  },
+                  children: label
+                }
+              ),
+              input
+            ]
+          }
+        ) : input,
+        (error || message) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "p",
+          {
+            ...{
+              className: "flex items-center justify-start space-x-2 py-1 rounded text-sm " + (error && "px-1.5"),
+              ...error && Object.keys(style).length > 0 && {
+                style: {
+                  backgroundColor: (_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb.replace(")", ",.1)"),
+                  color: (_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb
+                }
+              }
+            },
+            children: [
+              error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  warning_default,
+                  {
+                    ...{
+                      className: "w-4 h-4",
+                      "aria-hidden": true
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  "span",
+                  {
+                    ...{
+                      className: "text-[0px] opacity-0 w-0 h-0 absolute"
+                    },
+                    children: [
+                      label,
+                      ": ",
+                      error
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "span",
+                {
+                  ...{
+                    ...error && {
+                      "aria-hidden": true
+                    }
+                  },
+                  children: error || message
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var input_group_default = InputGroup;

package/dist/input-group.mjs

@@ -0,0 +1,7 @@
+import {
+  input_group_default
+} from "./chunk-7ZLMDYBR.mjs";
+import "./chunk-Q3UIVGPQ.mjs";
+export {
+  input_group_default as default
+};

package/dist/input-number.js

@@ -0,0 +1,211 @@
+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/input-number.js
+var input_number_exports = {};
+__export(input_number_exports, {
+  default: () => input_number_default
+});
+module.exports = __toCommonJS(input_number_exports);
+
+// components/icons/minus.js
+var import_jsx_runtime = require("react/jsx-runtime");
+var Minus = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    ...{
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      viewBox: "0 0 24 24",
+      ...props
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        ...{
+          d: "M5 12h14",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      }
+    )
+  }
+);
+var minus_default = Minus;
+
+// components/icons/plus.js
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Plus = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "svg",
+  {
+    ...{
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      viewBox: "0 0 24 24",
+      ...props
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        ...{
+          d: "M12 4.5v15m7.5-7.5h-15",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      }
+    )
+  }
+);
+var plus_default = Plus;
+
+// 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
+  };
+};
+
+// components/input-number.js
+var import_react = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var InputNumber = ({
+  className,
+  inline = false,
+  layout = "split",
+  max,
+  min,
+  onChange,
+  small,
+  style,
+  value,
+  ...rest
+}) => {
+  const classes = [(inline ? "inline-flex" : "flex") + " items-center border border-inherit divide-x divide-inherit rounded-sm overflow-hidden"];
+  if (className) {
+    classes.push(className);
+  }
+  ;
+  const increment = (0, import_react.useCallback)(
+    () => {
+      const newValue = Number(value || 0) + 1;
+      if (max !== null && newValue > max) return;
+      onChange(newValue);
+    },
+    [max, onChange, value]
+  );
+  const decrement = (0, import_react.useCallback)(
+    () => {
+      const newValue = Number(value || 0) - 1;
+      if (min !== null && newValue < min) return;
+      onChange(newValue);
+    },
+    [min, onChange, value]
+  );
+  const decrementButton = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "button",
+    {
+      ...{
+        "aria-label": "decrement",
+        type: "button",
+        onClick: decrement,
+        className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "span",
+        {
+          ...{
+            "aria-hidden": true
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            minus_default,
+            {
+              ...{
+                className: "w-4 h-4 text-inherit"
+              }
+            }
+          )
+        }
+      )
+    }
+  );
+  const incrementButton = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "button",
+    {
+      ...{
+        "aria-label": "increment",
+        type: "button",
+        onClick: increment,
+        className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "span",
+        {
+          ...{
+            "aria-hidden": true
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            plus_default,
+            {
+              ...{
+                className: "w-4 h-4 text-inherit"
+              }
+            }
+          )
+        }
+      )
+    }
+  );
+  const input = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "input",
+    {
+      ...{
+        ...rest,
+        max,
+        min,
+        className: "min-w-0 text-inherit bg-transparent focus:outline-hidden focus:ring-0 " + (small ? "py-1 px-2" : "py-2 px-3") + " " + (inline ? small ? "w-10" : "w-12" : "grow-1 w-0") + (layout === "split" ? " text-center" : ""),
+        inputMode: "numeric",
+        onChange: ({ target }) => onChange(Number(target.value)),
+        step: 1,
+        type: "number",
+        value
+      }
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      ...{
+        className: classes.join(" "),
+        style: inputStyle(style)
+      },
+      children: [
+        layout === "split" && decrementButton,
+        input,
+        layout === "after" && decrementButton,
+        incrementButton
+      ]
+    }
+  );
+};
+var input_number_default = InputNumber;

package/dist/input-number.mjs

@@ -0,0 +1,136 @@
+import {
+  plus_default
+} from "./chunk-HH7WF5BT.mjs";
+import {
+  minus_default
+} from "./chunk-T5QQBFM3.mjs";
+import {
+  inputStyle
+} from "./chunk-FJXG3REN.mjs";
+
+// components/input-number.js
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var InputNumber = ({
+  className,
+  inline = false,
+  layout = "split",
+  max,
+  min,
+  onChange,
+  small,
+  style,
+  value,
+  ...rest
+}) => {
+  const classes = [(inline ? "inline-flex" : "flex") + " items-center border border-inherit divide-x divide-inherit rounded-sm overflow-hidden"];
+  if (className) {
+    classes.push(className);
+  }
+  ;
+  const increment = useCallback(
+    () => {
+      const newValue = Number(value || 0) + 1;
+      if (max !== null && newValue > max) return;
+      onChange(newValue);
+    },
+    [max, onChange, value]
+  );
+  const decrement = useCallback(
+    () => {
+      const newValue = Number(value || 0) - 1;
+      if (min !== null && newValue < min) return;
+      onChange(newValue);
+    },
+    [min, onChange, value]
+  );
+  const decrementButton = /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...{
+        "aria-label": "decrement",
+        type: "button",
+        onClick: decrement,
+        className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0"
+      },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          ...{
+            "aria-hidden": true
+          },
+          children: /* @__PURE__ */ jsx(
+            minus_default,
+            {
+              ...{
+                className: "w-4 h-4 text-inherit"
+              }
+            }
+          )
+        }
+      )
+    }
+  );
+  const incrementButton = /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...{
+        "aria-label": "increment",
+        type: "button",
+        onClick: increment,
+        className: (small ? "h-[34px] w-[34px]" : "h-[42px] w-[42px]") + " flex justify-center items-center text-inherit shrink-0 grow-0"
+      },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          ...{
+            "aria-hidden": true
+          },
+          children: /* @__PURE__ */ jsx(
+            plus_default,
+            {
+              ...{
+                className: "w-4 h-4 text-inherit"
+              }
+            }
+          )
+        }
+      )
+    }
+  );
+  const input = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...{
+        ...rest,
+        max,
+        min,
+        className: "min-w-0 text-inherit bg-transparent focus:outline-hidden focus:ring-0 " + (small ? "py-1 px-2" : "py-2 px-3") + " " + (inline ? small ? "w-10" : "w-12" : "grow-1 w-0") + (layout === "split" ? " text-center" : ""),
+        inputMode: "numeric",
+        onChange: ({ target }) => onChange(Number(target.value)),
+        step: 1,
+        type: "number",
+        value
+      }
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: classes.join(" "),
+        style: inputStyle(style)
+      },
+      children: [
+        layout === "split" && decrementButton,
+        input,
+        layout === "after" && decrementButton,
+        incrementButton
+      ]
+    }
+  );
+};
+var input_number_default = InputNumber;
+export {
+  input_number_default as default
+};