@justfixnyc/component-library 0.53.9 → 0.53.10

package/dist/src/assets/index.css

@@ -661,6 +661,7 @@
 
 .jfcl-select-button__input:checked + .jfcl-select-button__label {
   background-color: #c6d8ff;
+  border-color: #242323;
 }
 
 .jfcl-select-button__input:focus-visible + .jfcl-select-button__label {

package/dist/src/assets/index.es.css

@@ -661,6 +661,7 @@
 
 .jfcl-select-button__input:checked + .jfcl-select-button__label {
   background-color: #c6d8ff;
+  border-color: #242323;
 }
 
 .jfcl-select-button__input:focus-visible + .jfcl-select-button__label {

package/dist/src/index.es.js

@@ -1,6 +1,6 @@
 import _extends from '@babel/runtime/helpers/extends';
 import classNames from 'classnames';
-import React, { forwardRef, useId } from 'react';
+import React, { forwardRef, useId, useState } from 'react';
 import { faBan, faXmark, faDownload as faDownload$1, faBuildingColumns, faAddressCard, faBuilding, faMapLocationDot, faMemoPad, faLocationDot, faHouse, faGlobe, faUser, faSpinner, faBars, faEnvelope as faEnvelope$1, faCommentSms, faCopy, faCirclePlus, faCircleInfo, faCircleExclamation as faCircleExclamation$1, faChevronRight, faChevronLeft, faChevronDown, faChevronUp, faCheckDouble, faCheck, faCaretDown, faCaretRight, faBookmark as faBookmark$1, faSquareArrowUpRight, faArrowsRotateReverse, faArrowDownWideShort, faArrowUpShortWide, faArrowUpArrowDown, faArrowDownLong, faArrowUpLong, faArrowDown, faArrowUp, faArrowRight, faArrowLeft } from '@awesome.me/kit-dd32553919/icons/classic/solid';
 import { faPrint, faEyeSlash, faEye, faDownload, faEnvelope, faCircleExclamation, faBookmark } from '@awesome.me/kit-dd32553919/icons/classic/regular';
 import { faXTwitter, faTwitter, faFacebookF } from '@awesome.me/kit-dd32553919/icons/classic/brands';
@@ -581,6 +581,32 @@ const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const textInputClassNames = classNames('jfcl-text-input__input', {
     ["jfcl-text-input--size-".concat(size)]: size
   });
+  const formatPhoneNumber = value => {
+    // remove all non-digit characters
+    const cleaned = value.replace(/\D/g, '');
+    // limit to 10 characters
+    const limited = cleaned.slice(0, 10);
+
+    // format with parentheses and dashes e.g. (555) 666-7777
+    const match = limited.match(/^(\d{0,3})(\d{0,3})(\d{0,4})$/);
+    if (match) {
+      const [, part1, part2, part3] = match;
+      const formatted = [part1 ? "(".concat(part1) : '', part2 ? ") ".concat(part2) : '', part3 ? "-".concat(part3) : ''].join('').trim();
+      return formatted;
+    }
+    return value;
+  };
+  const [inputValue, setInputValue] = useState('');
+  const handleChange = e => {
+    let formattedValue = e.target.value;
+    if (type === 'tel') {
+      formattedValue = formatPhoneNumber(e.target.value);
+    }
+    setInputValue(formattedValue);
+    if (props.onChange) {
+      props.onChange(e); // call original onChange if provided
+    }
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: textInputWrapperClassNames,
     "data-testid": "jfcl-text-input"
@@ -600,7 +626,9 @@ const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, props, {
     id: id,
     className: textInputClassNames,
-    type: inputType
+    type: inputType,
+    value: inputValue,
+    onChange: handleChange
   }))));
 });
 TextInput.displayName = 'TextInput';

package/dist/src/index.js

@@ -592,6 +592,32 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
   const textInputClassNames = classNames__default["default"]('jfcl-text-input__input', {
     ["jfcl-text-input--size-".concat(size)]: size
   });
+  const formatPhoneNumber = value => {
+    // remove all non-digit characters
+    const cleaned = value.replace(/\D/g, '');
+    // limit to 10 characters
+    const limited = cleaned.slice(0, 10);
+
+    // format with parentheses and dashes e.g. (555) 666-7777
+    const match = limited.match(/^(\d{0,3})(\d{0,3})(\d{0,4})$/);
+    if (match) {
+      const [, part1, part2, part3] = match;
+      const formatted = [part1 ? "(".concat(part1) : '', part2 ? ") ".concat(part2) : '', part3 ? "-".concat(part3) : ''].join('').trim();
+      return formatted;
+    }
+    return value;
+  };
+  const [inputValue, setInputValue] = React.useState('');
+  const handleChange = e => {
+    let formattedValue = e.target.value;
+    if (type === 'tel') {
+      formattedValue = formatPhoneNumber(e.target.value);
+    }
+    setInputValue(formattedValue);
+    if (props.onChange) {
+      props.onChange(e); // call original onChange if provided
+    }
+  };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: textInputWrapperClassNames,
     "data-testid": "jfcl-text-input"
@@ -611,7 +637,9 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref)
   }, props, {
     id: id,
     className: textInputClassNames,
-    type: inputType
+    type: inputType,
+    value: inputValue,
+    onChange: handleChange
   }))));
 });
 TextInput.displayName = 'TextInput';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@justfixnyc/component-library",
   "description": "JustFix Component Library",
   "license": "MIT",
-  "version": "0.53.9",
+  "version": "0.53.10",
   "main": "dist/src/index.js",
   "module": "dist/src/index.es.js",
   "files": [