@ballistix.digital/react-components 0.4.1 → 0.4.3

package/dist/index.d.ts

@@ -133,15 +133,20 @@ type TInputGroupStyles = DeepPartial$1<typeof base$d>;
 type TProps$b = {
     name: string;
     htmlType: HTMLInputTypeAttribute;
-    label?: string;
+    label?: string | ReactNode;
     description?: string;
     placeholder?: string;
-    leading?: string;
-    trailing?: string;
+    leading?: string | ReactNode;
+    trailing?: string | ReactNode;
+    required?: ({ isRequired }: {
+        isRequired: boolean;
+    }) => string | ReactNode;
     value: string;
     error?: string;
-    mask?: string;
-    replacementCharacter?: string;
+    mask?: string | {
+        mask: string;
+        replacementCharacter?: string;
+    };
     type: 'normal' | 'inset' | 'overlapping' | 'pill' | 'floored';
     isValid?: boolean;
     isDisabled?: boolean;

package/dist/index.esm.js

@@ -518,20 +518,26 @@ var i,s={},c={};var u,f,l={};
 
 var InputGroupForm = function (props) {
     var _a;
-    var name = props.name, _b = props.htmlType, htmlType = _b === void 0 ? 'text' : _b, label = props.label, description = props.description, placeholder = props.placeholder, leading = props.leading, trailing = props.trailing, value = props.value, mask = props.mask, _c = props.replacementCharacter, replacementCharacter = _c === void 0 ? 'X' : _c, error = props.error, _d = props.type, type = _d === void 0 ? 'normal' : _d, isDisabled = props.isDisabled, isRequired = props.isRequired, isTouched = props.isTouched, _e = props.isSolo, isSolo = _e === void 0 ? false : _e, onChange = props.onChange, onBlur = props.onBlur, stylesOverrides = props.styles;
+    var _b;
+    var name = props.name, _c = props.htmlType, htmlType = _c === void 0 ? 'text' : _c, label = props.label, description = props.description, placeholder = props.placeholder, leading = props.leading, trailing = props.trailing, required = props.required, value = props.value, mask = props.mask, error = props.error, _d = props.type, type = _d === void 0 ? 'normal' : _d, isDisabled = props.isDisabled, _e = props.isRequired, isRequired = _e === void 0 ? false : _e, isTouched = props.isTouched, _f = props.isSolo, isSolo = _f === void 0 ? false : _f, onChange = props.onChange, onBlur = props.onBlur, stylesOverrides = props.styles;
     var isValid = error === undefined;
-    var ref = y({ mask: mask, replacement: (_a = {}, _a[replacementCharacter] = /\d/, _a) });
+    var ref = y({
+        mask: typeof mask === 'string' ? mask : mask === null || mask === void 0 ? void 0 : mask.mask,
+        replacement: typeof mask === 'string'
+            ? { X: /\d/ }
+            : (_a = {}, _a[(_b = mask === null || mask === void 0 ? void 0 : mask.replacementCharacter) !== null && _b !== void 0 ? _b : 'X'] = /\d/, _a),
+    });
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$e.base);
         var keys = calculateNestedKeys(styles$e.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$e.base, key), leading && get(styles$e.leading, key), trailing && get(styles$e.trailing, key), type && get(styles$e[type], key), !isValid && get(styles$e.invalid, key), isDisabled && get(styles$e.disabled, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$e.base, key), leading !== undefined && get(styles$e.leading, key), trailing !== undefined && get(styles$e.trailing, key), type && get(styles$e[type], key), !isValid && get(styles$e.invalid, key), isDisabled && get(styles$e.disabled, key), get(stylesOverrides, key)));
         });
         return result;
     };
     var styles = handleGenerateStyle();
     var invalidIcon = (jsx(ExclamationCircleIcon, { className: "h-5 w-5 text-red-500", "aria-hidden": "true" }));
-    return (jsxs("div", __assign({ className: styles.container }, { children: [jsxs("div", __assign({ className: styles.head }, { children: [label && (jsx("label", __assign({ htmlFor: name, className: styles.label }, { children: label }))), !isRequired && jsx("span", __assign({ className: styles.hint }, { children: "Optional" }))] })), jsxs("div", __assign({ className: styles.body }, { children: [leading && jsx("div", __assign({ className: styles.leading }, { children: leading })), jsx("input", { type: mask !== '' ? 'text' : htmlType, ref: mask && ref, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, disabled: isDisabled, onChange: onChange, onBlur: onBlur }), type === 'floored' && (jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsx("div", __assign({ className: styles.trailing }, { children: trailing }))), !isValid && jsx("div", __assign({ className: styles.trailing }, { children: invalidIcon }))] })), jsxs("div", __assign({ className: styles.foot }, { children: [description && !error && (jsx("p", __assign({ className: styles.description }, { children: description }))), error && isTouched && jsx("p", __assign({ className: styles.error }, { children: error }))] }))] })));
+    return (jsxs("div", __assign({ className: styles.container }, { children: [jsxs("div", __assign({ className: styles.head }, { children: [label && (jsx("label", __assign({ htmlFor: name, className: styles.label }, { children: label }))), !required && !isRequired && typeof label === 'string' && (jsx("span", __assign({ className: styles.hint }, { children: "Optional" }))), required && required({ isRequired: isRequired })] })), jsxs("div", __assign({ className: styles.body }, { children: [leading && jsx("div", __assign({ className: styles.leading }, { children: leading })), jsx("input", { type: mask !== '' ? 'text' : htmlType, ref: mask && ref, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, disabled: isDisabled, onChange: onChange, onBlur: onBlur }), type === 'floored' && (jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsx("div", __assign({ className: styles.trailing }, { children: trailing }))), !isValid && jsx("div", __assign({ className: styles.trailing }, { children: invalidIcon }))] })), jsxs("div", __assign({ className: styles.foot }, { children: [description && !error && (jsx("p", __assign({ className: styles.description }, { children: description }))), error && isTouched && jsx("p", __assign({ className: styles.error }, { children: error }))] }))] })));
 };
 
 var base$d = {
@@ -540,7 +546,7 @@ var base$d = {
     body: 'relative rounded-md',
     foot: '',
     label: 'block font-medium text-gray-900',
-    hint: 'text-sm text-gray-500',
+    hint: 'text-xs text-gray-500',
     leading: 'pointer-events-none absolute inset-y-0 left-0 flex items-center',
     input: 'block w-full',
     trailing: 'pointer-events-none absolute inset-y-0 right-0 flex items-center',