@trackunit/react-form-components 0.0.107-alpha-a3e6a36823.0 → 0.0.114

package/index.cjs.js

@@ -7,7 +7,6 @@ var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
 var reactComponents = require('@trackunit/react-components');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var React = require('react');
-var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
 var reactDom = require('react-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -14167,7 +14166,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
         }
         const itemCanFit = spaceNeeded <= availableSpace;
         if (itemCanFit) {
-            return (jsxRuntime.jsx(TagWithWidth, { onWidthKnown: onWidthKnownHandler, className: tailwindStyledComponents.tws `shrink-0 inline-flex`, onClose: e => {
+            return (jsxRuntime.jsx(TagWithWidth, { onWidthKnown: onWidthKnownHandler, className: "shrink-0 inline-flex", onClose: e => {
                     e.stopPropagation();
                     item.onClick();
                 }, color: item.disabled ? "unknown" : "primary", dataTestId: item.text, disabled: disabled, children: item.text }, item.text + index));
@@ -14530,13 +14529,8 @@ const PhoneInput = React.forwardRef((_a, ref) => {
     React.useEffect(() => {
         onChangeGetSeparateValues && onChangeGetSeparateValues({ countryCode, phoneNumber });
     }, [countryCode, onChangeGetSeparateValues, phoneNumber]);
-    return (jsxRuntime.jsxs(Container, { "data-testid": dataTestId && `${dataTestId}-container`, children: [jsxRuntime.jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: combinedValue, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isCombinedValueInvalid || isInvalid }), jsxRuntime.jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: handleCountryCodeChange, disabled: disabled, readOnly: readOnly, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: "+45" }), jsxRuntime.jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, readOnly: readOnly, onChange: handlePhoneNumberChange, isInvalid: isPhoneNumberInvalid || isInvalid, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { disabled: disabled || isInvalid || isCountryCodeInvalid || isPhoneNumberInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
+    return (jsxRuntime.jsxs("div", { className: "grid grid-cols-min-fr gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: [jsxRuntime.jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: combinedValue, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isCombinedValueInvalid || isInvalid }), jsxRuntime.jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: handleCountryCodeChange, disabled: disabled, readOnly: readOnly, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: "+45" }), jsxRuntime.jsx(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, readOnly: readOnly, onChange: handlePhoneNumberChange, isInvalid: isPhoneNumberInvalid || isInvalid, actions: !disableAction && (jsxRuntime.jsx(ActionButton, { disabled: disabled || isInvalid || isCountryCodeInvalid || isPhoneNumberInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
 });
-const Container = tailwindStyledComponents.tw.div `
-  grid
-  grid-cols-min-fr
-  gap-2
-`;
 
 /**
  * The PhoneField component is used to enter phone number.
@@ -14857,11 +14851,8 @@ const TextArea = React__namespace.forwardRef((_a, ref) => {
  * @returns {JSX.Element} TextLengthIndicator component
  */
 const TextLengthIndicator = ({ length, maxLength }) => {
-    return (jsxRuntime.jsxs(Root, { children: [length, "/", maxLength] }));
+    return (jsxRuntime.jsxs("span", { className: "font-mono", children: [length, "/", maxLength] }));
 };
-const Root = tailwindStyledComponents.tw.span `
- font-mono
-`;
 
 const TextAreaField = React__namespace.forwardRef((_a, ref) => {
     var { id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["id", "label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
@@ -15009,7 +15000,7 @@ const cvaUploadInputAddonBefore = cssClassVarianceUtilities.cvaMerge(["block", "
  */
 const UploadInput = React.forwardRef((_a, ref) => {
     var { disabled, acceptedTypes, nonInteractive, uploadLabel, multipleFiles } = _a, rest = __rest(_a, ["disabled", "acceptedTypes", "nonInteractive", "uploadLabel", "multipleFiles"]);
-    return (jsxRuntime.jsx(UploadInputContainer, { children: jsxRuntime.jsx(BaseInput, Object.assign({ inputClassName: cvaUploadInputField(), addonBefore: uploadLabel, addonBeforeClassName: cvaUploadInputAddonBefore(), ref: ref, disabled: disabled, accept: acceptedTypes, multiple: multipleFiles, type: "file", nonInteractive: nonInteractive, 
+    return (jsxRuntime.jsx("label", { className: "tu-upload-input", children: jsxRuntime.jsx(BaseInput, Object.assign({ inputClassName: cvaUploadInputField(), addonBefore: uploadLabel, addonBeforeClassName: cvaUploadInputAddonBefore(), ref: ref, disabled: disabled, accept: acceptedTypes, multiple: multipleFiles, type: "file", nonInteractive: nonInteractive, 
             // onClick used to work with nonInteractive option
             onClick: event => {
                 if (nonInteractive) {
@@ -15018,8 +15009,6 @@ const UploadInput = React.forwardRef((_a, ref) => {
                 }
             } }, rest)) }));
 });
-const UploadInputContainer = tailwindStyledComponents.tw.label `
-tu-upload-input`;
 
 /**
  * Upload fields enable the user to upload Files.

package/index.esm.js

@@ -4,7 +4,6 @@ import { IconButton, Icon, Tip, Heading, Text, MenuItem, Tag, Spinner } from '@t
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import * as React from 'react';
 import React__default, { useMemo, forwardRef, useState, cloneElement, useEffect, useCallback, useLayoutEffect, useContext, createElement, Fragment, createContext, useRef, Component } from 'react';
-import { tws, tw } from '@trackunit/tailwind-styled-components';
 import { createPortal } from 'react-dom';
 
 var defaultTranslations = {
@@ -14141,7 +14140,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
         }
         const itemCanFit = spaceNeeded <= availableSpace;
         if (itemCanFit) {
-            return (jsx$1(TagWithWidth, { onWidthKnown: onWidthKnownHandler, className: tws `shrink-0 inline-flex`, onClose: e => {
+            return (jsx$1(TagWithWidth, { onWidthKnown: onWidthKnownHandler, className: "shrink-0 inline-flex", onClose: e => {
                     e.stopPropagation();
                     item.onClick();
                 }, color: item.disabled ? "unknown" : "primary", dataTestId: item.text, disabled: disabled, children: item.text }, item.text + index));
@@ -14504,13 +14503,8 @@ const PhoneInput = forwardRef((_a, ref) => {
     useEffect(() => {
         onChangeGetSeparateValues && onChangeGetSeparateValues({ countryCode, phoneNumber });
     }, [countryCode, onChangeGetSeparateValues, phoneNumber]);
-    return (jsxs(Container, { "data-testid": dataTestId && `${dataTestId}-container`, children: [jsx$1("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: combinedValue, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isCombinedValueInvalid || isInvalid }), jsx$1(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: handleCountryCodeChange, disabled: disabled, readOnly: readOnly, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: "+45" }), jsx$1(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, readOnly: readOnly, onChange: handlePhoneNumberChange, isInvalid: isPhoneNumberInvalid || isInvalid, actions: !disableAction && (jsx$1(ActionButton, { disabled: disabled || isInvalid || isCountryCodeInvalid || isPhoneNumberInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
+    return (jsxs("div", { className: "grid grid-cols-min-fr gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: [jsx$1("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: combinedValue, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isCombinedValueInvalid || isInvalid }), jsx$1(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: countryCode, onChange: handleCountryCodeChange, disabled: disabled, readOnly: readOnly, isInvalid: isCountryCodeInvalid || isInvalid, placeholder: "+45" }), jsx$1(BaseInput, Object.assign({ id: "phoneInput-number", dataTestId: dataTestId && `${dataTestId}-phoneNumberInput`, fieldSize: fieldSize, type: "tel", value: phoneNumber, disabled: disabled, readOnly: readOnly, onChange: handlePhoneNumberChange, isInvalid: isPhoneNumberInvalid || isInvalid, actions: !disableAction && (jsx$1(ActionButton, { disabled: disabled || isInvalid || isCountryCodeInvalid || isPhoneNumberInvalid, value: `${countryCode}${phoneNumber}`, type: "PHONE_NUMBER", dataTestId: dataTestId && `${dataTestId}-phoneIcon`, iconSize: fieldSize })) }, rest))] }));
 });
-const Container = tw.div `
-  grid
-  grid-cols-min-fr
-  gap-2
-`;
 
 /**
  * The PhoneField component is used to enter phone number.
@@ -14831,11 +14825,8 @@ const TextArea = React.forwardRef((_a, ref) => {
  * @returns {JSX.Element} TextLengthIndicator component
  */
 const TextLengthIndicator = ({ length, maxLength }) => {
-    return (jsxs(Root, { children: [length, "/", maxLength] }));
+    return (jsxs("span", { className: "font-mono", children: [length, "/", maxLength] }));
 };
-const Root = tw.span `
- font-mono
-`;
 
 const TextAreaField = React.forwardRef((_a, ref) => {
     var { id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["id", "label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
@@ -14983,7 +14974,7 @@ const cvaUploadInputAddonBefore = cvaMerge(["block", "truncate", "w-28", "pt-2"]
  */
 const UploadInput = forwardRef((_a, ref) => {
     var { disabled, acceptedTypes, nonInteractive, uploadLabel, multipleFiles } = _a, rest = __rest(_a, ["disabled", "acceptedTypes", "nonInteractive", "uploadLabel", "multipleFiles"]);
-    return (jsx$1(UploadInputContainer, { children: jsx$1(BaseInput, Object.assign({ inputClassName: cvaUploadInputField(), addonBefore: uploadLabel, addonBeforeClassName: cvaUploadInputAddonBefore(), ref: ref, disabled: disabled, accept: acceptedTypes, multiple: multipleFiles, type: "file", nonInteractive: nonInteractive, 
+    return (jsx$1("label", { className: "tu-upload-input", children: jsx$1(BaseInput, Object.assign({ inputClassName: cvaUploadInputField(), addonBefore: uploadLabel, addonBeforeClassName: cvaUploadInputAddonBefore(), ref: ref, disabled: disabled, accept: acceptedTypes, multiple: multipleFiles, type: "file", nonInteractive: nonInteractive, 
             // onClick used to work with nonInteractive option
             onClick: event => {
                 if (nonInteractive) {
@@ -14992,8 +14983,6 @@ const UploadInput = forwardRef((_a, ref) => {
                 }
             } }, rest)) }));
 });
-const UploadInputContainer = tw.label `
-tu-upload-input`;
 
 /**
  * Upload fields enable the user to upload Files.

package/package.json

@@ -1,16 +1,15 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.107-alpha-a3e6a36823.0",
+  "version": "0.0.114",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=18.x"
   },
   "dependencies": {
-    "@trackunit/css-class-variance-utilities": "0.0.12-alpha-a3e6a36823.0",
-    "@trackunit/i18n-library-translation": "0.0.68-alpha-a3e6a36823.0",
-    "@trackunit/react-components": "0.1.141-alpha-a3e6a36823.0",
-    "@trackunit/tailwind-styled-components": "0.0.61-alpha-a3e6a36823.0",
+    "@trackunit/css-class-variance-utilities": "0.0.11",
+    "@trackunit/i18n-library-translation": "0.0.68",
+    "@trackunit/react-components": "0.1.145",
     "date-fns": "2.29.3",
     "libphonenumber-js": "1.10.36",
     "react": "18.2.0",