@trackunit/react-form-components 1.7.34 → 1.7.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.7.34",
+  "version": "1.7.37",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -16,14 +16,14 @@
     "zod": "^3.23.8",
     "react-hook-form": "7.62.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.6.45",
-    "@trackunit/react-components": "1.8.18",
-    "@trackunit/ui-icons": "1.6.44",
-    "@trackunit/shared-utils": "1.8.45",
-    "@trackunit/ui-design-tokens": "1.6.47",
-    "@trackunit/i18n-library-translation": "1.6.49",
+    "@trackunit/css-class-variance-utilities": "1.6.48",
+    "@trackunit/react-components": "1.8.21",
+    "@trackunit/ui-icons": "1.6.47",
+    "@trackunit/shared-utils": "1.8.48",
+    "@trackunit/ui-design-tokens": "1.6.50",
+    "@trackunit/i18n-library-translation": "1.6.52",
     "string-ts": "^2.0.0",
-    "@trackunit/react-test-setup": "1.3.45",
+    "@trackunit/react-test-setup": "1.3.48",
     "@js-temporal/polyfill": "^0.5.1"
   },
   "module": "./index.esm.js",

package/src/components/BaseInput/BaseInput.d.ts

@@ -73,7 +73,7 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
  * Extends props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
  *
  * For specific input types make sure to use the corresponding input component.
- * This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
+ * This is a base used by our other input components such as TextBaseInput, NumberBaseInput, PasswordBaseInput, etc.
  */
 export declare const BaseInput: {
     ({ className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize, nonInteractive, inputClassName, placeholder, isWarning, type, genericAction, style, ref, ...rest }: BaseInputProps): import("react/jsx-runtime").JSX.Element;

package/src/components/{DateInput/DateInput.d.ts → DateField/DateBaseInput/DateBaseInput.d.ts}

@@ -1,6 +1,6 @@
-import { BaseInputProps } from "../BaseInput";
+import { BaseInputProps } from "../../BaseInput";
 type BaseInputExposedProps = Omit<BaseInputProps, "defaultValue" | "min" | "max" | "value">;
-export interface DateInputProps extends BaseInputExposedProps {
+export interface DateBaseInputProps extends BaseInputExposedProps {
     /**
      * A min value with type Date added
      */
@@ -25,8 +25,5 @@ export interface DateInputProps extends BaseInputExposedProps {
  *
  * NOTE: If shown with a label, please use the `DateField` component instead.
  */
-export declare const DateInput: {
-    ({ min, max, defaultValue, value, ref, ...rest }: DateInputProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const DateBaseInput: ({ min, max, defaultValue, value, ref, ...rest }: DateBaseInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/DateField/DateField.d.ts

@@ -1,8 +1,8 @@
 import { Ref } from "react";
-import { DateInputProps } from "../DateInput/DateInput";
 import { FormGroupProps } from "../FormGroup/FormGroup";
+import { DateBaseInputProps } from "./DateBaseInput/DateBaseInput";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
-export interface DateFieldProps extends DateInputProps, FormGroupExposedProps {
+export interface DateFieldProps extends DateBaseInputProps, FormGroupExposedProps {
     /**
      * If a value is set, the field is rendered in its invalid state.
      */

package/src/components/{EmailInput/EmailInput.d.ts → EmailField/EmailBaseInput/EmailBaseInput.d.ts}

@@ -1,13 +1,13 @@
-import { BaseInputProps } from "../BaseInput";
+import { BaseInputProps } from "../../BaseInput";
 type BaseInputExposedProps = Omit<BaseInputProps, "type">;
-export interface EmailInputProps extends BaseInputExposedProps {
+export interface EmailBaseInputProps extends BaseInputExposedProps {
     /**
      * To disable the action button.
      *
      * @default false
-     * @memberof EmailInputProps
+     * @memberof EmailBaseInputProps
      * @example
-     * <EmailInput disableAction />
+     * <EmailBaseInput disableAction />
      */
     disableAction?: boolean;
 }
@@ -21,8 +21,5 @@ export interface EmailInputProps extends BaseInputExposedProps {
  * A reference to the input element is provided as the `ref` prop.
  * For specific input types make sure to use the corresponding input component.
  */
-export declare const EmailInput: {
-    ({ fieldSize, disabled, dataTestId, isInvalid, onChange, disableAction, ref, ...rest }: EmailInputProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const EmailBaseInput: ({ fieldSize, disabled, dataTestId, isInvalid, onChange, disableAction, ref, ...rest }: EmailBaseInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/FormGroup/FormGroup.d.ts

@@ -4,7 +4,7 @@ export interface FormGroupProps extends CommonProps {
     /**
      * The label for the form group.
      */
-    label: string | ReactNode;
+    label?: string | ReactNode;
     /**
      * Content to display in the tooltip when hovering the ? icon next to the label.
      */

package/src/components/NumberField/NumberBaseInput/NumberBaseInput.d.ts

@@ -0,0 +1,11 @@
+import { BaseInputProps } from "../../BaseInput";
+type BaseInputExposedProps = Omit<BaseInputProps, "type">;
+export interface NumberBaseInputProps extends BaseInputExposedProps {
+}
+/**
+ * A thin wrapper around the `BaseInput` component for number input fields.
+ *
+ * NOTE: If shown with a label, please use the `NumberField` component instead.
+ */
+export declare const NumberBaseInput: ({ ref, ...rest }: NumberBaseInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/NumberField/NumberField.d.ts

@@ -1,8 +1,8 @@
 import { Ref } from "react";
 import { FormGroupProps } from "../FormGroup/FormGroup";
-import { NumberInputProps } from "../NumberInput/NumberInput";
+import { NumberBaseInputProps } from "./NumberBaseInput/NumberBaseInput";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
-export interface NumberFieldProps extends NumberInputProps, FormGroupExposedProps {
+export interface NumberFieldProps extends NumberBaseInputProps, FormGroupExposedProps {
     /**
      * If a value is set, the field is rendered in its invalid state.
      */

package/src/components/PasswordField/PasswordBaseInput/PasswordBaseInput.d.ts

@@ -0,0 +1,12 @@
+import { BaseInputProps } from "../../BaseInput/BaseInput";
+type BaseInputExposedProps = Omit<BaseInputProps, "type">;
+export interface PasswordBaseInputProps extends BaseInputExposedProps {
+    type?: "password" | "text";
+}
+/**
+ * A thin wrapper around the `BaseInput` component for password input fields.
+ *
+ * NOTE: If shown with a label, please use the `PasswordField` component instead.
+ */
+export declare const PasswordBaseInput: ({ ref, fieldSize, ...rest }: PasswordBaseInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/PasswordField/PasswordField.d.ts

@@ -1,8 +1,8 @@
 import { Ref } from "react";
 import { FormGroupProps } from "../FormGroup/FormGroup";
-import { PasswordInputProps } from "../PasswordInput/PasswordInput";
+import { PasswordBaseInputProps } from "./PasswordBaseInput/PasswordBaseInput";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
-export interface PasswordFieldProps extends Omit<PasswordInputProps, "obfuscate" | "actions">, FormGroupExposedProps {
+export interface PasswordFieldProps extends Omit<PasswordBaseInputProps, "obfuscate" | "actions">, FormGroupExposedProps {
     /**
      * If a value is set, the field is rendered in its invalid state.
      */

package/src/components/{PhoneInput/PhoneInput.d.ts → PhoneField/PhoneBaseInput/PhoneBaseInput.d.ts}

@@ -1,12 +1,12 @@
 import { ReactNode } from "react";
-import { BaseInputProps } from "../BaseInput";
+import { BaseInputProps } from "../../BaseInput";
 type BaseInputExposedProps = Omit<BaseInputProps, "actions">;
-export interface PhoneInputProps extends BaseInputExposedProps {
+export interface PhoneBaseInputProps extends BaseInputExposedProps {
     /**
      * To disable the action button.
      *
      * @default false
-     * @memberof PhoneInputProps
+     * @memberof PhoneBaseInputProps
      * @example
     //  * <PhoneInput disableAction />
      */
@@ -26,8 +26,5 @@ export interface PhoneInputProps extends BaseInputExposedProps {
  * @param {string} [fieldSize="medium"] - The size of the input field.
  * @param {boolean} [disableAction=false] - Whether the action button is disabled or not.
  */
-export declare const PhoneInput: {
-    ({ dataTestId, isInvalid, disabled, value, defaultValue, fieldSize, disableAction, onChange, readOnly, onFocus, onBlur, name, ref, ...rest }: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const PhoneBaseInput: ({ dataTestId, isInvalid, disabled, value, defaultValue, fieldSize, disableAction, onChange, readOnly, onFocus, onBlur, name, ref, ...rest }: PhoneBaseInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/PhoneField/PhoneField.d.ts

@@ -1,8 +1,8 @@
 import { Ref } from "react";
 import { FormGroupProps } from "../FormGroup/FormGroup";
-import { PhoneInputProps } from "../PhoneInput/PhoneInput";
+import { PhoneBaseInputProps } from "./PhoneBaseInput/PhoneBaseInput";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon" | "name">;
-export interface PhoneFieldProps extends FormGroupExposedProps, PhoneInputProps {
+export interface PhoneFieldProps extends FormGroupExposedProps, PhoneBaseInputProps {
     /**
      * If a value is set, the field is rendered in its invalid state.
      */

package/src/components/Search/Search.d.ts

@@ -1,8 +1,8 @@
 import { CommonProps } from "@trackunit/react-components";
 import { IconName } from "@trackunit/ui-icons";
 import { CSSProperties, Ref } from "react";
-import { TextInputProps } from "../TextInput/TextInput";
-export interface SearchProps extends CommonProps, TextInputProps {
+import { TextBaseInputProps } from "../TextField/TextBaseInput/TextBaseInput";
+export interface SearchProps extends CommonProps, TextBaseInputProps {
     /**
      * The name for the HTML element.
      */

package/src/components/{TextArea/TextArea.d.ts → TextAreaField/TextArea/TextAreaBaseInput.d.ts}

@@ -2,7 +2,7 @@ import { CommonProps } from "@trackunit/react-components";
 import { Ref } from "react";
 export type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
 type FilteredInputProps = Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "prefix" | "suffix">;
-export interface TextAreaProps extends FilteredInputProps, CommonProps {
+export interface TextAreaBaseInputProps extends FilteredInputProps, CommonProps {
     /**
      * Number of rows in the text area.
      */
@@ -30,8 +30,5 @@ export interface TextAreaProps extends FilteredInputProps, CommonProps {
  * The TextArea is a base component, and should not be used very often.
  * For most cases the TextAreaField is the correct component.
  */
-export declare const TextArea: {
-    ({ id, name, value, rows, disabled, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize, defaultValue, required, dataTestId, isInvalid, className, ref, ...rest }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const TextAreaBaseInput: ({ id, name, value, rows, disabled, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize, defaultValue, required, dataTestId, isInvalid, className, ref, ...rest }: TextAreaBaseInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/{TextArea/TextArea.variants.d.ts → TextAreaField/TextArea/TextAreaBaseInput.variants.d.ts}

@@ -1,4 +1,4 @@
-export declare const cvaTextArea: (props?: ({
+export declare const cvaTextAreaBaseInput: (props?: ({
     disabled?: boolean | null | undefined;
     invalid?: boolean | null | undefined;
     resize?: "both" | "vertical" | "horizontal" | "none" | null | undefined;

package/src/components/TextAreaField/TextAreaField.d.ts

@@ -1,9 +1,9 @@
 import { CommonProps } from "@trackunit/react-components";
 import { Ref } from "react";
 import { FormGroupProps } from "../FormGroup/FormGroup";
-import { TextAreaProps } from "../TextArea/TextArea";
+import { TextAreaBaseInputProps } from "./TextArea/TextAreaBaseInput";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
-export interface TextAreaFieldProps extends TextAreaProps, FormGroupExposedProps, CommonProps {
+export interface TextAreaFieldProps extends TextAreaBaseInputProps, FormGroupExposedProps, CommonProps {
     /**
      * Set the Maximal length of the value for the input.
      * Adds a TextLengthIndicator to the right of the helpText.

package/src/components/TextField/TextBaseInput/TextBaseInput.d.ts

@@ -0,0 +1,11 @@
+import { BaseInputProps } from "../../BaseInput/BaseInput";
+type BaseInputExposedProps = Omit<BaseInputProps, "type">;
+export interface TextBaseInputProps extends BaseInputExposedProps {
+}
+/**
+ * A thin wrapper around the `BaseInput` component for text input fields.
+ *
+ * NOTE: If shown with a label, please use the `TextField` component instead.
+ */
+export declare const TextBaseInput: ({ ref, ...rest }: TextBaseInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/TextField/TextField.d.ts

@@ -1,7 +1,7 @@
 import { FormGroupProps } from "../FormGroup/FormGroup";
-import { TextInputProps } from "../TextInput/TextInput";
+import { TextBaseInputProps } from "../TextField/TextBaseInput/TextBaseInput";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
-export interface TextFieldProps extends TextInputProps, FormGroupExposedProps {
+export interface TextFieldProps extends TextBaseInputProps, FormGroupExposedProps {
     /**
      * Set the Maximal length of the value for the input.
      * Adds a TextLengthIndicator to the right of the helpText.

package/src/components/{UrlInput/UrlInput.d.ts → UrlField/UrlBaseInput/UrlBaseInput.d.ts}

@@ -1,11 +1,11 @@
-import { BaseInputProps } from "../BaseInput";
+import { BaseInputProps } from "../../BaseInput";
 type BaseInputExposedProps = Omit<BaseInputProps, "type">;
-export interface UrlInputProps extends BaseInputExposedProps {
+export interface UrlBaseInputProps extends BaseInputExposedProps {
     /**
      * To disable the action button.
      *
      * @default false
-     * @memberof UrlInputProps
+     * @memberof UrlBaseInputProps
      * @example
      * <UrLInput disableAction />
      */
@@ -16,8 +16,5 @@ export interface UrlInputProps extends BaseInputExposedProps {
  *
  * NOTE: If shown with a label, please use the `UrlField` component instead.
  */
-export declare const UrlInput: {
-    ({ dataTestId, isInvalid, disabled, fieldSize, disableAction, value, defaultValue, ref, ...rest }: UrlInputProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const UrlBaseInput: ({ dataTestId, isInvalid, disabled, fieldSize, disableAction, value, defaultValue, ref, ...rest }: UrlBaseInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/UrlField/UrlField.d.ts

@@ -1,7 +1,7 @@
 import { FormGroupProps } from "../FormGroup/FormGroup";
-import { UrlInputProps } from "../UrlInput/UrlInput";
+import { UrlBaseInputProps } from "./UrlBaseInput/UrlBaseInput";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
-export interface UrlFieldProps extends FormGroupExposedProps, UrlInputProps {
+export interface UrlFieldProps extends FormGroupExposedProps, UrlBaseInputProps {
     /**
      * If a value is set, the field is rendered in its invalid state.
      */

package/src/index.d.ts

@@ -1,26 +1,27 @@
+export * from "./components/DateField/DateBaseInput/DateBaseInput";
+export * from "./components/NumberField/NumberBaseInput/NumberBaseInput";
+export * from "./components/PhoneField/PhoneBaseInput/PhoneBaseInput";
+export * from "./components/TextAreaField/TextArea/TextAreaBaseInput";
+export * from "./components/TextField/TextBaseInput/TextBaseInput";
 export * from "./components/ActionButton";
 export * from "./components/BaseInput";
 export * from "./components/Checkbox";
 export * from "./components/CheckboxField/CheckboxField";
 export * from "./components/ColorField/ColorField";
 export * from "./components/DateField/DateField";
-export * from "./components/DateInput/DateInput";
 export * from "./components/DropZone/DropZone";
 export * from "./components/DropZone/DropZoneDefaultLabel";
 export * from "./components/EmailField/EmailField";
-export * from "./components/EmailInput";
 export * from "./components/FormGroup/FormGroup";
 export * from "./components/Label";
 export * from "./components/NumberField/NumberField";
-export * from "./components/NumberInput/NumberInput";
 export * from "./components/OptionCard/OptionCard";
-export * from "./components/PasswordField";
-export * from "./components/PasswordInput/PasswordInput";
+export * from "./components/PasswordField/PasswordBaseInput/PasswordBaseInput";
+export * from "./components/PasswordField/PasswordField";
+export * from "./components/PhoneField/PhoneBaseInput/PhoneInputValidationUtils";
+export * from "./components/PhoneField/PhoneBaseInput/PhoneNumberUtilities";
 export * from "./components/PhoneField/PhoneField";
 export * from "./components/PhoneFieldWithController/PhoneFieldWithController";
-export * from "./components/PhoneInput/PhoneInput";
-export * from "./components/PhoneInput/PhoneInputValidationUtils";
-export * from "./components/PhoneInput/PhoneNumberUtilities";
 export * from "./components/RadioGroup";
 export * from "./components/Schedule/Schedule";
 export * from "./components/Schedule/ScheduleParser";
@@ -29,10 +30,8 @@ export * from "./components/Select";
 export * from "./components/SelectField/CreatableSelectField";
 export * from "./components/SelectField/FormFieldSelectAdapter";
 export * from "./components/SelectField/SelectField";
-export * from "./components/TextArea";
-export * from "./components/TextAreaField";
+export * from "./components/TextAreaField/TextAreaField";
 export * from "./components/TextField";
-export * from "./components/TextInput/TextInput";
 export * from "./components/TimeRange";
 export * from "./components/TimeRangeField/TimeRangeField";
 export * from "./components/ToggleSwitch";
@@ -40,7 +39,6 @@ export * from "./components/ToggleSwitchOption";
 export * from "./components/UploadField/UploadField";
 export * from "./components/UploadInput/UploadInput";
 export * from "./components/UrlField/UrlField";
-export * from "./components/UrlInput/UrlInput";
 export * from "./utilities/emailUtils";
 export * from "./utilities/useGetPhoneValidationRules";
 export * from "./utilities/usePhoneInput";

package/src/components/EmailInput/index.d.ts

@@ -1 +0,0 @@
-export * from "./EmailInput";

package/src/components/NumberInput/NumberInput.d.ts

@@ -1,14 +0,0 @@
-import { BaseInputProps } from "../BaseInput";
-type BaseInputExposedProps = Omit<BaseInputProps, "type">;
-export interface NumberInputProps extends BaseInputExposedProps {
-}
-/**
- * A thin wrapper around the `BaseInput` component for number input fields.
- *
- * NOTE: If shown with a label, please use the `NumberField` component instead.
- */
-export declare const NumberInput: {
-    ({ ref, ...rest }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export {};

package/src/components/PasswordField/index.d.ts

@@ -1 +0,0 @@
-export * from "./PasswordField";

package/src/components/PasswordInput/PasswordInput.d.ts

@@ -1,15 +0,0 @@
-import { BaseInputProps } from "../BaseInput/BaseInput";
-type BaseInputExposedProps = Omit<BaseInputProps, "type">;
-export interface PasswordInputProps extends BaseInputExposedProps {
-    type?: "password" | "text";
-}
-/**
- * A thin wrapper around the `BaseInput` component for password input fields.
- *
- * NOTE: If shown with a label, please use the `PasswordField` component instead.
- */
-export declare const PasswordInput: {
-    ({ ref, fieldSize, ...rest }: PasswordInputProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export {};

package/src/components/PhoneInput/index.d.ts

@@ -1 +0,0 @@
-export * from "./PhoneInput";

package/src/components/TextArea/index.d.ts

@@ -1 +0,0 @@
-export * from "./TextArea";

package/src/components/TextAreaField/index.d.ts

@@ -1 +0,0 @@
-export * from "./TextAreaField";

package/src/components/TextInput/TextInput.d.ts

@@ -1,14 +0,0 @@
-import { BaseInputProps } from "../BaseInput/BaseInput";
-type BaseInputExposedProps = Omit<BaseInputProps, "type">;
-export interface TextInputProps extends BaseInputExposedProps {
-}
-/**
- * A thin wrapper around the `BaseInput` component for text input fields.
- *
- * NOTE: If shown with a label, please use the `TextField` component instead.
- */
-export declare const TextInput: {
-    ({ ref, ...rest }: TextInputProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export {};