@drawbridge/components 0.0.77 → 0.1.0

package/dist/input-group.js

@@ -1,7 +1,9 @@
 "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)
@@ -15,150 +17,25 @@ var __copyProps = (to, from, except, desc) => {
   }
   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);
-
-// components/input-group.js
 var input_group_exports = {};
 __export(input_group_exports, {
   default: () => input_group_default
 });
 module.exports = __toCommonJS(input_group_exports);
-var import_react2 = require("react");
-
-// components/input-group-error.js
-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-error.js
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var InputGroupError = ({
-  className,
-  error,
-  label,
-  message,
-  style = {}
-}) => {
-  var _a, _b, _c, _d;
-  if (!(error || message)) {
-    return null;
-  }
-  const classes = [
-    "flex items-center justify-start space-x-2 py-1 rounded text-sm"
-  ];
-  if (error) {
-    classes.push("px-1.5");
-  }
-  if (className) {
-    classes.push(className);
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "p",
-    {
-      ...{
-        className: classes.join(" "),
-        ...error && {
-          style: {
-            backgroundColor: (((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || "rgb( 0, 0, 0 )").replace(")", ",.1)"),
-            color: ((_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb) || "rgb( 0, 0, 0 )"
-          }
-        }
-      },
-      children: [
-        error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            warning_default,
-            {
-              ...{
-                // shrink-0: a long error ("Expected your CNAME record to be …
-                // but found …") wraps, and a flex item with no floor gets
-                // squeezed to a sliver beside it.
-                className: "w-4 h-4 shrink-0",
-                "aria-hidden": true
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-            "span",
-            {
-              ...{
-                className: "text-[0px] opacity-0 w-0 h-0 absolute"
-              },
-              children: [
-                label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
-                  label,
-                  ": "
-                ] }) : null,
-                error
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "span",
-          {
-            ...{
-              ...error && {
-                "aria-hidden": true
-              }
-            },
-            children: error || message
-          }
-        )
-      ]
-    }
-  );
-};
-var input_group_error_default = InputGroupError;
-
-// components/styles.js
-var WHITE = "rgb( 255, 255, 255 )";
-var BLACK = "rgb( 0, 0, 0 )";
-var bgColor = (style) => {
-  var _a, _b;
-  return ((_b = (_a = style == null ? void 0 : style.background) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || WHITE;
-};
-var textColor = (style) => {
-  var _a, _b;
-  return ((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || BLACK;
-};
-var inputStyle = (style) => {
-  var _a;
-  return {
-    backgroundColor: bgColor(style),
-    borderColor: textColor(style),
-    borderRadius: ((_a = style == null ? void 0 : style.input) == null ? void 0 : _a.radius) != null ? style.input.radius / 4 + "px" : void 0,
-    color: textColor(style)
-  };
-};
-
-// components/input-group.js
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Addon = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+var import_react = require("react");
+var import_error = __toESM(require("./shared/error"));
+var import_styles = require("./styles");
+const Addon = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "span",
   {
     ...{
@@ -167,7 +44,7 @@ var Addon = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     children
   }
 );
-var InputGroup = ({
+const InputGroup = ({
   after,
   before,
   className,
@@ -178,28 +55,29 @@ var InputGroup = ({
   style = {},
   ...rest
 }) => {
-  const generated = (0, import_react2.useId)();
-  const id = (0, import_react2.isValidElement)(input) ? input.props.id || generated : generated;
-  const named = (0, import_react2.isValidElement)(input) && !input.props.id ? (0, import_react2.cloneElement)(input, { id }) : input;
+  var _a, _b;
+  const generated = (0, import_react.useId)();
+  const id = (0, import_react.isValidElement)(input) ? input.props.id || generated : generated;
+  const named = (0, import_react.isValidElement)(input) && !input.props.id ? (0, import_react.cloneElement)(input, { id }) : input;
   const addons = after != null || before != null;
-  const control = addons && (0, import_react2.isValidElement)(named) ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  const control = addons && (0, import_react.isValidElement)(named) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       ...{
         className: "input flex items-center overflow-hidden",
         style: {
-          ...inputStyle(style),
+          ...(0, import_styles.inputStyle)(style),
           // Inline, not `p-0`: see InputNumber — share's unlayered `.input`
           // padding beats a layered utility, an inline style beats both.
           padding: 0
         }
       },
       children: [
-        before != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Addon, { children: before }),
-        (0, import_react2.cloneElement)(named, {
+        before != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Addon, { children: before }),
+        (0, import_react.cloneElement)(named, {
           className: [named.props.className, "!border-0 !rounded-none !ring-0 !shadow-none flex-1 min-w-0"].filter(Boolean).join(" ")
         }),
-        after != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Addon, { children: after })
+        after != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Addon, { children: after })
       ]
     }
   ) : named;
@@ -212,7 +90,7 @@ var InputGroup = ({
   if (error) {
     classes.push("error");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
       ...{
@@ -228,7 +106,7 @@ var InputGroup = ({
           // screen readers, clicking the text focuses the control, and
           // getByLabel()/role queries can find it. The association comes from
           // `htmlFor`, never from the wrapping — see the note above the id.
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
             "label",
             {
               ...{
@@ -236,11 +114,14 @@ var InputGroup = ({
                 htmlFor: id
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   "span",
                   {
                     ...{
-                      className: "block"
+                      className: "block",
+                      // The brand's text colour, so a branded group carries it
+                      // anywhere; unbranded, the label inherits as before.
+                      ...((_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) && { style: (0, import_styles.textStyle)(style) }
                     },
                     children: label
                   }
@@ -250,16 +131,25 @@ var InputGroup = ({
             }
           )
         ) : control,
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          input_group_error_default,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_error.default,
           {
             ...{
               error,
               label,
-              message,
               style
             }
           }
+        ),
+        !error && message && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "p",
+          {
+            ...{
+              className: "py-1 text-sm",
+              ...((_b = style == null ? void 0 : style.text) == null ? void 0 : _b.color) && { style: (0, import_styles.textStyle)(style) }
+            },
+            children: message
+          }
         )
       ]
     }

package/dist/input-group.mjs

@@ -1,10 +1,129 @@
 "use client";
-import {
-  input_group_default
-} from "./chunk-WUZE3BIA.mjs";
-import "./chunk-KSCQQUFC.mjs";
-import "./chunk-Q3UIVGPQ.mjs";
-import "./chunk-6F23WKP2.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useId } from "react";
+import Error from "./shared/error";
+import { inputStyle, textStyle } from "./styles";
+const Addon = ({ children }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    ...{
+      className: typeof children === "string" ? "flex items-center shrink-0 px-3 font-mono text-sm opacity-60 whitespace-nowrap select-none" : "flex items-center shrink-0 px-2"
+    },
+    children
+  }
+);
+const InputGroup = ({
+  after,
+  before,
+  className,
+  error,
+  input,
+  label,
+  message,
+  style = {},
+  ...rest
+}) => {
+  var _a, _b;
+  const generated = useId();
+  const id = isValidElement(input) ? input.props.id || generated : generated;
+  const named = isValidElement(input) && !input.props.id ? cloneElement(input, { id }) : input;
+  const addons = after != null || before != null;
+  const control = addons && isValidElement(named) ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: "input flex items-center overflow-hidden",
+        style: {
+          ...inputStyle(style),
+          // Inline, not `p-0`: see InputNumber — share's unlayered `.input`
+          // padding beats a layered utility, an inline style beats both.
+          padding: 0
+        }
+      },
+      children: [
+        before != null && /* @__PURE__ */ jsx(Addon, { children: before }),
+        cloneElement(named, {
+          className: [named.props.className, "!border-0 !rounded-none !ring-0 !shadow-none flex-1 min-w-0"].filter(Boolean).join(" ")
+        }),
+        after != null && /* @__PURE__ */ jsx(Addon, { children: after })
+      ]
+    }
+  ) : named;
+  const classes = [
+    "input-group"
+  ];
+  if (className) {
+    classes.push(className);
+  }
+  if (error) {
+    classes.push("error");
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: classes.join(" "),
+        "aria-live": "polite",
+        ...(rest == null ? void 0 : rest["data-guide"]) && {
+          "data-guide": rest["data-guide"]
+        }
+      },
+      children: [
+        label ? (
+          // A real <label> (not a bare <span>) so the field name is announced by
+          // screen readers, clicking the text focuses the control, and
+          // getByLabel()/role queries can find it. The association comes from
+          // `htmlFor`, never from the wrapping — see the note above the id.
+          /* @__PURE__ */ jsxs(
+            "label",
+            {
+              ...{
+                className: "space-y-2 block",
+                htmlFor: id
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    ...{
+                      className: "block",
+                      // The brand's text colour, so a branded group carries it
+                      // anywhere; unbranded, the label inherits as before.
+                      ...((_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) && { style: textStyle(style) }
+                    },
+                    children: label
+                  }
+                ),
+                control
+              ]
+            }
+          )
+        ) : control,
+        /* @__PURE__ */ jsx(
+          Error,
+          {
+            ...{
+              error,
+              label,
+              style
+            }
+          }
+        ),
+        !error && message && /* @__PURE__ */ jsx(
+          "p",
+          {
+            ...{
+              className: "py-1 text-sm",
+              ...((_b = style == null ? void 0 : style.text) == null ? void 0 : _b.color) && { style: textStyle(style) }
+            },
+            children: message
+          }
+        )
+      ]
+    }
+  );
+};
+var input_group_default = InputGroup;
 export {
   input_group_default as default
 };