@tonyarbor/components 0.1.0 → 0.2.0

package/dist/index.js

@@ -32,7 +32,11 @@ var src_exports = {};
 __export(src_exports, {
   Button: () => Button,
   Card: () => Card,
+  Checkbox: () => Checkbox,
+  Combobox: () => Combobox,
   Input: () => Input,
+  NumericInput: () => NumericInput,
+  Radio: () => Radio,
   Tag: () => Tag
 });
 module.exports = __toCommonJS(src_exports);
@@ -500,11 +504,842 @@ var Tag = React4.forwardRef(
   }
 );
 Tag.displayName = "Tag";
+
+// src/Combobox/Combobox.tsx
+var React5 = __toESM(require("react"));
+var import_clsx5 = require("clsx");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var comboboxStyles = {
+  base: {
+    width: "100%",
+    height: "36px",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    backgroundColor: "#ffffff",
+    borderRadius: "8px",
+    transition: "all 0.2s ease-in-out",
+    outline: "none",
+    fontSize: "13px",
+    padding: "8px",
+    paddingRight: "32px",
+    margin: "0",
+    display: "flex",
+    alignItems: "center",
+    cursor: "pointer",
+    position: "relative"
+  },
+  states: {
+    default: {
+      border: "1px solid #d1d1d1",
+      // grey-300
+      color: "#2f2f2f"
+      // grey-900
+    },
+    defaultFocus: {
+      borderColor: "#3cad51",
+      // brand-500
+      outline: "3px solid rgba(60, 173, 81, 0.2)"
+    },
+    error: {
+      border: "1px solid #c93232",
+      // destructive-500
+      color: "#2f2f2f"
+    },
+    errorFocus: {
+      borderColor: "#c93232",
+      outline: "3px solid rgba(201, 50, 50, 0.2)"
+    },
+    success: {
+      border: "1px solid #16a33d",
+      // success-500
+      color: "#2f2f2f"
+    },
+    successFocus: {
+      borderColor: "#16a33d",
+      outline: "3px solid rgba(22, 163, 61, 0.2)"
+    },
+    disabled: {
+      backgroundColor: "#f8f8f8",
+      // grey-050
+      borderColor: "#efefef",
+      // grey-100
+      color: "#7e7e7e",
+      // grey-500
+      cursor: "not-allowed"
+    }
+  }
+};
+var labelStyles2 = {
+  display: "block",
+  fontSize: "13px",
+  fontWeight: "600",
+  color: "#2f2f2f",
+  marginBottom: "4px",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var helperTextStyles2 = {
+  fontSize: "13px",
+  margin: "0",
+  marginTop: "2px",
+  color: "#595959",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  lineHeight: "1.4"
+};
+var errorTextStyles2 = {
+  ...helperTextStyles2,
+  color: "#a62323",
+  // destructive-600
+  display: "flex",
+  alignItems: "center",
+  gap: "4px"
+};
+var dropdownStyles = {
+  position: "absolute",
+  top: "calc(100% + 4px)",
+  left: "0",
+  right: "0",
+  backgroundColor: "#ffffff",
+  border: "1px solid #d1d1d1",
+  borderRadius: "8px",
+  maxHeight: "200px",
+  overflowY: "auto",
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+  zIndex: 1e3
+};
+var optionStyles = {
+  padding: "8px 12px",
+  fontSize: "13px",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  color: "#2f2f2f"
+  // grey-900
+};
+var Combobox = React5.forwardRef(
+  ({
+    label,
+    placeholder = "default-text",
+    options,
+    value,
+    onChange,
+    state = "default",
+    error,
+    helperText,
+    disabled = false,
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [isOpen, setIsOpen] = React5.useState(false);
+    const [searchQuery, setSearchQuery] = React5.useState("");
+    const [isFocused, setIsFocused] = React5.useState(false);
+    const inputRef = React5.useRef(null);
+    const dropdownRef = React5.useRef(null);
+    const wrapperRef = React5.useRef(null);
+    const comboboxId = React5.useId();
+    const helperTextId = React5.useId();
+    const errorId = React5.useId();
+    const selectedOption = options.find((opt) => opt.value === value);
+    const filteredOptions = React5.useMemo(() => {
+      if (!searchQuery) return options;
+      return options.filter(
+        (option) => option.label.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }, [options, searchQuery]);
+    React5.useEffect(() => {
+      const handleClickOutside = (event) => {
+        if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+          setIsOpen(false);
+          setSearchQuery("");
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    const handleInputChange = (e) => {
+      setSearchQuery(e.target.value);
+      if (!isOpen) setIsOpen(true);
+    };
+    const handleSelectOption = (optionValue) => {
+      onChange?.(optionValue);
+      setIsOpen(false);
+      setSearchQuery("");
+      inputRef.current?.blur();
+    };
+    const handleClear = (e) => {
+      e.stopPropagation();
+      onChange?.(void 0);
+      setSearchQuery("");
+      inputRef.current?.focus();
+    };
+    const handleInputFocus = () => {
+      setIsFocused(true);
+      if (!disabled) setIsOpen(true);
+    };
+    const handleInputBlur = () => {
+      setIsFocused(false);
+      setTimeout(() => {
+        if (!wrapperRef.current?.contains(document.activeElement)) {
+          setSearchQuery("");
+        }
+      }, 200);
+    };
+    const currentState = error ? "error" : state;
+    const stateStyles = comboboxStyles.states[currentState];
+    const focusStyles = currentState === "error" ? comboboxStyles.states.errorFocus : currentState === "success" ? comboboxStyles.states.successFocus : comboboxStyles.states.defaultFocus;
+    const inputWrapperStyle = {
+      ...comboboxStyles.base,
+      ...stateStyles,
+      ...isFocused && !disabled && focusStyles,
+      ...disabled && comboboxStyles.states.disabled
+    };
+    const displayValue = selectedOption ? selectedOption.label : "";
+    const showPlaceholder = !selectedOption && !searchQuery && !isFocused;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx5.clsx)("arbor-combobox-wrapper", className), style, ref: wrapperRef, "data-testid": dataTestId, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: comboboxId, style: labelStyles2, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative" }, ref, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: inputWrapperStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              id: comboboxId,
+              type: "text",
+              value: searchQuery || displayValue,
+              onChange: handleInputChange,
+              onFocus: handleInputFocus,
+              onBlur: handleInputBlur,
+              placeholder: showPlaceholder ? placeholder : "",
+              disabled,
+              "aria-invalid": error ? "true" : "false",
+              "aria-describedby": error ? errorId : helperText ? helperTextId : void 0,
+              "aria-expanded": isOpen,
+              "aria-autocomplete": "list",
+              role: "combobox",
+              style: {
+                border: "none",
+                outline: "none",
+                background: "transparent",
+                flex: 1,
+                fontSize: "13px",
+                padding: 0,
+                margin: 0,
+                color: showPlaceholder ? "#7e7e7e" : "#2f2f2f",
+                fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px", position: "absolute", right: "8px" }, children: [
+            selectedOption && !disabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: handleClear,
+                style: {
+                  border: "none",
+                  background: "transparent",
+                  padding: "2px",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  color: "#7e7e7e"
+                },
+                "aria-label": "Clear selection",
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.X, { size: 16 })
+              }
+            ),
+            currentState === "success" && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.Check, { size: 16, color: "#16a33d" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_lucide_react.ChevronDown,
+              {
+                size: 16,
+                color: "#7e7e7e",
+                style: {
+                  transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
+                  transition: "transform 0.2s"
+                }
+              }
+            )
+          ] })
+        ] }),
+        isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: dropdownRef, style: dropdownStyles, children: filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { ...optionStyles, color: "#7e7e7e", cursor: "default" }, children: "No options found" }) : filteredOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            onClick: () => handleSelectOption(option.value),
+            onMouseDown: (e) => e.preventDefault(),
+            style: {
+              ...optionStyles,
+              backgroundColor: option.value === value ? "#f8f8f8" : "transparent"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.backgroundColor = "#f8f8f8";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = option.value === value ? "#f8f8f8" : "transparent";
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: option.label }),
+              option.value === value && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.Check, { size: 16, color: "#16a33d" })
+            ]
+          },
+          option.value
+        )) })
+      ] }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { id: errorId, style: errorTextStyles2, role: "alert", children: error }),
+      !error && helperText && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { id: helperTextId, style: helperTextStyles2, children: helperText })
+    ] });
+  }
+);
+Combobox.displayName = "Combobox";
+
+// src/NumericInput/NumericInput.tsx
+var React6 = __toESM(require("react"));
+var import_clsx6 = require("clsx");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var labelStyles3 = {
+  display: "block",
+  fontSize: "13px",
+  fontWeight: "600",
+  color: "#2f2f2f",
+  marginBottom: "4px",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var helperTextStyles3 = {
+  fontSize: "13px",
+  margin: "0",
+  marginTop: "2px",
+  color: "#595959",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  lineHeight: "1.4"
+};
+var errorTextStyles3 = {
+  ...helperTextStyles3,
+  color: "#a62323",
+  // destructive-600
+  display: "flex",
+  alignItems: "center",
+  gap: "4px"
+};
+var containerStyles = {
+  base: {
+    display: "flex",
+    alignItems: "center",
+    height: "46px",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    backgroundColor: "#ffffff",
+    borderRadius: "8px",
+    transition: "all 0.2s ease-in-out",
+    overflow: "hidden"
+  },
+  states: {
+    default: {
+      border: "1px solid #d1d1d1"
+      // grey-300
+    },
+    defaultFocus: {
+      borderColor: "#3cad51",
+      // brand-500
+      outline: "3px solid rgba(60, 173, 81, 0.2)"
+    },
+    error: {
+      border: "1px solid #c93232"
+      // destructive-500
+    },
+    errorFocus: {
+      borderColor: "#c93232",
+      outline: "3px solid rgba(201, 50, 50, 0.2)"
+    },
+    success: {
+      border: "1px solid #16a33d"
+      // success-500
+    },
+    successFocus: {
+      borderColor: "#16a33d",
+      outline: "3px solid rgba(22, 163, 61, 0.2)"
+    },
+    disabled: {
+      backgroundColor: "#f8f8f8",
+      // grey-050
+      borderColor: "#efefef",
+      // grey-100
+      cursor: "not-allowed"
+    }
+  }
+};
+var buttonStyles2 = {
+  width: "46px",
+  height: "100%",
+  border: "none",
+  background: "transparent",
+  cursor: "pointer",
+  fontSize: "16px",
+  color: "#2f2f2f",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "background-color 0.2s",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  userSelect: "none"
+};
+var inputStyles2 = {
+  flex: 1,
+  border: "none",
+  outline: "none",
+  background: "transparent",
+  textAlign: "center",
+  fontSize: "13px",
+  color: "#2f2f2f",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  padding: "0 8px",
+  appearance: "textfield"
+};
+var NumericInput = React6.forwardRef(
+  ({
+    label,
+    value,
+    onChange,
+    min,
+    max,
+    step = 1,
+    state = "default",
+    error,
+    helperText,
+    disabled = false,
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [isFocused, setIsFocused] = React6.useState(false);
+    const inputRef = React6.useRef(null);
+    const inputId = React6.useId();
+    const helperTextId = React6.useId();
+    const errorId = React6.useId();
+    const clampValue = (val) => {
+      let clamped = val;
+      if (min !== void 0 && clamped < min) clamped = min;
+      if (max !== void 0 && clamped > max) clamped = max;
+      return clamped;
+    };
+    const handleIncrement = () => {
+      if (disabled) return;
+      const currentValue = value ?? 0;
+      const newValue = currentValue + step;
+      const clampedValue = clampValue(newValue);
+      if (clampedValue !== currentValue) {
+        onChange?.(clampedValue);
+      }
+    };
+    const handleDecrement = () => {
+      if (disabled) return;
+      const currentValue = value ?? 0;
+      const newValue = currentValue - step;
+      const clampedValue = clampValue(newValue);
+      if (clampedValue !== currentValue) {
+        onChange?.(clampedValue);
+      }
+    };
+    const handleInputChange = (e) => {
+      const inputValue = e.target.value;
+      if (inputValue === "" || inputValue === "-") {
+        onChange?.(void 0);
+        return;
+      }
+      const numValue = parseFloat(inputValue);
+      if (!isNaN(numValue)) {
+        const clampedValue = clampValue(numValue);
+        onChange?.(clampedValue);
+      }
+    };
+    const handleKeyDown = (e) => {
+      const allowedKeys = ["Backspace", "Delete", "Tab", "Escape", "Enter", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "-", "."];
+      if (allowedKeys.includes(e.key)) {
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          handleIncrement();
+        } else if (e.key === "ArrowDown") {
+          e.preventDefault();
+          handleDecrement();
+        }
+        return;
+      }
+      if (!/^[0-9]$/.test(e.key)) {
+        e.preventDefault();
+      }
+    };
+    const currentState = error ? "error" : state;
+    const stateStyles = containerStyles.states[currentState];
+    const focusStyles = currentState === "error" ? containerStyles.states.errorFocus : currentState === "success" ? containerStyles.states.successFocus : containerStyles.states.defaultFocus;
+    const containerStyle = {
+      ...containerStyles.base,
+      ...stateStyles,
+      ...isFocused && !disabled && focusStyles,
+      ...disabled && containerStyles.states.disabled
+    };
+    const isDecrementDisabled = disabled || min !== void 0 && value !== void 0 && value <= min;
+    const isIncrementDisabled = disabled || max !== void 0 && value !== void 0 && value >= max;
+    const getButtonStyle = (isDisabled) => {
+      const baseStyle = {
+        ...buttonStyles2,
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        color: isDisabled ? "#7e7e7e" : "#2f2f2f"
+      };
+      if (currentState === "success" && !isDisabled) {
+        return {
+          ...baseStyle,
+          color: "#16a33d",
+          // success-500
+          border: "2px solid #16a33d",
+          borderRadius: "50%",
+          width: "32px",
+          height: "32px"
+        };
+      }
+      return baseStyle;
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx6.clsx)("arbor-numeric-input-wrapper", className), style, ref, "data-testid": dataTestId, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { htmlFor: inputId, style: labelStyles3, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: containerStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleDecrement,
+            disabled: isDecrementDisabled,
+            style: getButtonStyle(isDecrementDisabled),
+            onMouseEnter: (e) => {
+              if (!isDecrementDisabled) {
+                e.currentTarget.style.backgroundColor = "#f8f8f8";
+                e.currentTarget.style.borderRadius = "99px";
+              }
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = "transparent";
+              e.currentTarget.style.borderRadius = currentState === "success" ? "50%" : "0";
+            },
+            "aria-label": "Decrement",
+            children: "\u2212"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            id: inputId,
+            type: "text",
+            inputMode: "numeric",
+            value: value !== void 0 ? value : "",
+            onChange: handleInputChange,
+            onKeyDown: handleKeyDown,
+            onFocus: () => setIsFocused(true),
+            onBlur: () => setIsFocused(false),
+            disabled,
+            "aria-invalid": error ? "true" : "false",
+            "aria-describedby": error ? errorId : helperText ? helperTextId : void 0,
+            style: {
+              ...inputStyles2,
+              color: disabled ? "#7e7e7e" : "#2f2f2f",
+              cursor: disabled ? "not-allowed" : "text"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleIncrement,
+            disabled: isIncrementDisabled,
+            style: getButtonStyle(isIncrementDisabled),
+            onMouseEnter: (e) => {
+              if (!isIncrementDisabled) {
+                e.currentTarget.style.backgroundColor = "#f8f8f8";
+                e.currentTarget.style.borderRadius = "99px";
+              }
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = "transparent";
+              e.currentTarget.style.borderRadius = currentState === "success" ? "50%" : "0";
+            },
+            "aria-label": "Increment",
+            children: "+"
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { id: errorId, style: errorTextStyles3, children: error }),
+      helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { id: helperTextId, style: helperTextStyles3, children: helperText })
+    ] });
+  }
+);
+NumericInput.displayName = "NumericInput";
+
+// src/Checkbox/Checkbox.tsx
+var React7 = __toESM(require("react"));
+var import_clsx7 = require("clsx");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var checkboxStyles = {
+  width: "20px",
+  height: "20px",
+  border: "2px solid #d1d1d1",
+  // grey-300
+  borderRadius: "4px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  transition: "all 0.2s ease-in-out",
+  flexShrink: 0,
+  backgroundColor: "#ffffff"
+};
+var checkedStyles = {
+  backgroundColor: "#3cad51",
+  // brand-500
+  borderColor: "#3cad51"
+};
+var labelStyles4 = {
+  fontSize: "13px",
+  color: "#2f2f2f",
+  cursor: "pointer",
+  userSelect: "none",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var wrapperStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px"
+};
+var Checkbox = React7.forwardRef(
+  ({
+    label,
+    checked = false,
+    onChange,
+    disabled = false,
+    className,
+    style,
+    "data-testid": dataTestId,
+    name,
+    value
+  }, ref) => {
+    const [isFocused, setIsFocused] = React7.useState(false);
+    const checkboxId = React7.useId();
+    const handleChange = (e) => {
+      if (!disabled) {
+        onChange?.(e.target.checked);
+      }
+    };
+    const boxStyle = {
+      ...checkboxStyles,
+      ...checked && !disabled && checkedStyles,
+      ...disabled && !checked && { backgroundColor: "#f8f8f8", borderColor: "#efefef" },
+      ...disabled && checked && { backgroundColor: "#7e7e7e", borderColor: "#7e7e7e" },
+      ...isFocused && !disabled && { borderColor: "#3cad51", outline: "2px solid rgba(60, 173, 81, 0.2)" }
+    };
+    const checkmarkColor = disabled ? "#d1d1d1" : "#ffffff";
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx7.clsx)("arbor-checkbox-wrapper", className),
+        style: { ...wrapperStyles, ...style },
+        "data-testid": dataTestId,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "input",
+            {
+              ref,
+              id: checkboxId,
+              type: "checkbox",
+              checked,
+              onChange: handleChange,
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false),
+              disabled,
+              name,
+              value,
+              style: {
+                position: "absolute",
+                opacity: 0,
+                width: 0,
+                height: 0
+              },
+              "aria-checked": checked
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            "label",
+            {
+              htmlFor: checkboxId,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                cursor: disabled ? "not-allowed" : "pointer"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: boxStyle, children: checked && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Check, { size: 14, color: checkmarkColor, strokeWidth: 3 }) }),
+                label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "span",
+                  {
+                    style: {
+                      ...labelStyles4,
+                      color: disabled ? "#7e7e7e" : "#2f2f2f",
+                      cursor: disabled ? "not-allowed" : "pointer"
+                    },
+                    children: label
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/Radio/Radio.tsx
+var React8 = __toESM(require("react"));
+var import_clsx8 = require("clsx");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var radioStyles = {
+  width: "20px",
+  height: "20px",
+  border: "2px solid #d1d1d1",
+  // grey-300
+  borderRadius: "50%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  transition: "all 0.2s ease-in-out",
+  flexShrink: 0,
+  backgroundColor: "#ffffff"
+};
+var checkedStyles2 = {
+  borderColor: "#3cad51"
+  // brand-500
+};
+var innerDotStyles = {
+  width: "10px",
+  height: "10px",
+  borderRadius: "50%",
+  backgroundColor: "#3cad51",
+  // brand-500
+  transition: "all 0.2s ease-in-out"
+};
+var labelStyles5 = {
+  fontSize: "13px",
+  color: "#2f2f2f",
+  cursor: "pointer",
+  userSelect: "none",
+  fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+};
+var wrapperStyles2 = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px"
+};
+var Radio = React8.forwardRef(
+  ({
+    label,
+    checked = false,
+    onChange,
+    disabled = false,
+    className,
+    style,
+    "data-testid": dataTestId,
+    name,
+    value
+  }, ref) => {
+    const [isFocused, setIsFocused] = React8.useState(false);
+    const radioId = React8.useId();
+    const handleChange = (e) => {
+      if (!disabled) {
+        onChange?.(e.target.checked);
+      }
+    };
+    const circleStyle = {
+      ...radioStyles,
+      ...checked && !disabled && checkedStyles2,
+      ...disabled && !checked && { backgroundColor: "#f8f8f8", borderColor: "#efefef" },
+      ...disabled && checked && { borderColor: "#7e7e7e" },
+      ...isFocused && !disabled && { borderColor: "#3cad51", outline: "2px solid rgba(60, 173, 81, 0.2)" }
+    };
+    const dotStyle = {
+      ...innerDotStyles,
+      backgroundColor: disabled ? "#7e7e7e" : "#3cad51"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx8.clsx)("arbor-radio-wrapper", className),
+        style: { ...wrapperStyles2, ...style },
+        "data-testid": dataTestId,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "input",
+            {
+              ref,
+              id: radioId,
+              type: "radio",
+              checked,
+              onChange: handleChange,
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false),
+              disabled,
+              name,
+              value,
+              style: {
+                position: "absolute",
+                opacity: 0,
+                width: 0,
+                height: 0
+              },
+              "aria-checked": checked
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            "label",
+            {
+              htmlFor: radioId,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                cursor: disabled ? "not-allowed" : "pointer"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: circleStyle, children: checked && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: dotStyle }) }),
+                label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "span",
+                  {
+                    style: {
+                      ...labelStyles5,
+                      color: disabled ? "#7e7e7e" : "#2f2f2f",
+                      cursor: disabled ? "not-allowed" : "pointer"
+                    },
+                    children: label
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
   Card,
+  Checkbox,
+  Combobox,
   Input,
+  NumericInput,
+  Radio,
   Tag
 });
 //# sourceMappingURL=index.js.map