@trackunit/react-form-components 0.0.104 → 0.0.106

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.104",
+  "version": "0.0.106",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,7 +9,7 @@
   "dependencies": {
     "@trackunit/css-class-variance-utilities": "0.0.11",
     "@trackunit/i18n-library-translation": "0.0.67",
-    "@trackunit/react-components": "0.1.139",
+    "@trackunit/react-components": "0.1.140",
     "@trackunit/tailwind-styled-components": "0.0.60",
     "date-fns": "2.29.3",
     "libphonenumber-js": "1.10.36",

package/src/components/ActionButton/ActionButton.d.ts

@@ -22,5 +22,5 @@ interface ActionButtonProps extends ButtonCommonProps, CommonProps {
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {JSX.Element} ActionButton component
  */
-export declare const ActionButton: ({ type, value, dataTestId, iconSize, disabled }: ActionButtonProps) => JSX.Element;
+export declare const ActionButton: ({ type, value, dataTestId, iconSize, disabled, className, }: ActionButtonProps) => JSX.Element;
 export {};

package/src/components/ActionButton/ActionButton.variants.d.ts

@@ -0,0 +1,4 @@
+export declare const cvaActionButton: (props?: ({
+    size?: "small" | "medium" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaActionContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

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

@@ -49,6 +49,14 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      * A flag to disable interaction with input for example if you want to use input as a child of higher component
      */
     nonInteractive?: boolean;
+    /**
+     * Custom css classes for the inner Input element.
+     */
+    inputClassName?: string;
+    /**
+     * Custom css classes for the addon before element.
+     */
+    addonBeforeClassName?: string;
 }
 /**
  * A base input component that can be used for text inputs, password inputs, etc.

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

@@ -0,0 +1,21 @@
+export declare const cvaInputBase: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaInputBaseDisabled: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaInputBaseInvalid: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaInput: (props?: ({
+    size?: "small" | "medium" | null | undefined;
+    disabled?: boolean | null | undefined;
+    invalid?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaInputField: (props?: ({
+    size?: "small" | "medium" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaInputAddon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaInputAddonBefore: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaInputAddonAfter: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaInputPrefix: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaInputSuffix: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -1 +1,2 @@
 export * from "./BaseInput";
+export * from "./BaseInput.variants";

package/src/components/Checkbox/Checkbox.variants.d.ts

@@ -0,0 +1,8 @@
+export declare const cvaCheckbox: (props?: ({
+    disabled?: boolean | null | undefined;
+    invalid?: boolean | null | undefined;
+    state?: "selected" | "deselected" | "indeterminate" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaCheckboxContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCheckboxInput: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCheckboxIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/DropZone/DropZone.variants.d.ts

@@ -0,0 +1,8 @@
+export declare const cvaDropZone: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+    disabled?: boolean | null | undefined;
+    dragActive?: boolean | null | undefined;
+    dropComplete?: boolean | null | undefined;
+    invalid?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaDropZoneLabel: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

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

@@ -0,0 +1,8 @@
+export declare const cvaFormGroup: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaFormGroupContainerBefore: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaFormGroupContainerAfter: (props?: ({
+    invalid?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaHelpAddon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/Label/Label.d.ts

@@ -1,6 +1,5 @@
 import { CommonProps } from "@trackunit/react-components";
 import * as React from "react";
-import "./Label.css";
 export interface LabelProps extends CommonProps {
     /**
      * ID of the label.

package/src/components/Label/Label.variants.d.ts

@@ -0,0 +1,4 @@
+export declare const cvaLabel: (props?: ({
+    invalid?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/OptionCard/OptionCard.variants.d.ts

@@ -0,0 +1,5 @@
+export declare const cvaOptionCardLabel: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaOptionCardContent: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaOptionCardContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/RadioGroup/RadioGroup.d.ts

@@ -1,6 +1,5 @@
 import { CommonProps } from "@trackunit/react-components";
 import * as React from "react";
-import "./RadioGroup.css";
 export interface RadioGroupProps<V extends string | number> extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {
     /**
      */

package/src/components/RadioGroup/RadioGroup.variants.d.ts

@@ -0,0 +1,13 @@
+export declare const cvaRadioGroup: (props?: ({
+    layout?: "inline" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaRadioItem: (props?: ({
+    checked?: boolean | null | undefined;
+    invalid?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaRadioItemWrapper: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaRadioItemLabelContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaRadioItemDescription: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -51,7 +51,6 @@ export interface SearchProps extends CommonProps, TextInputProps {
      * Event that search box is cleared.
      */
     onClear?: () => void;
-    ref?: React.Ref<HTMLInputElement | undefined>;
 }
 /**
  * The Search component is used to render a search input field.
@@ -59,4 +58,4 @@ export interface SearchProps extends CommonProps, TextInputProps {
  * @param {SearchProps} props - The props for the Search component
  * @returns {JSX.Element} Search component
  */
-export declare const Search: ({ className, placeholder, value, widenInputOnFocus, showBorderWhenNotInFocus, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete, ref, ...rest }: SearchProps) => JSX.Element;
+export declare const Search: ({ className, placeholder, value, widenInputOnFocus, showBorderWhenNotInFocus, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete, ...rest }: SearchProps) => JSX.Element;

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

@@ -0,0 +1,4 @@
+export declare const cvaSearch: (props?: ({
+    border?: boolean | null | undefined;
+    widenOnFocus?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Select/Select.variants.d.ts

@@ -0,0 +1,15 @@
+export declare const cvaSelect: (props?: ({
+    invalid?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaSelectIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSelectPrefix: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSelectXIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSelectMenuList: (props?: ({
+    menuIsOpen?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaSelectDynamicTagContainer: (props?: ({
+    visible?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaSelectCounter: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSelectMenu: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

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

@@ -1,6 +1,7 @@
 import ValueType from "react-select";
 export * from "./CreatableSelect";
 export * from "./Select";
+export * from "./Select.variants";
 export * from "./SelectMenuItem/SelectMenuItem";
 export * from "./shared";
 export * from "./useCustomComponents";

package/src/components/Select/shared.d.ts

@@ -12,4 +12,3 @@ export declare function isMultiValue<Option>(arg: MultiValue<Option> | SingleVal
  * @returns {OptionsOrGroups<Option, Group>} An array of ordered options with selected on top
  */
 export declare const getOrderedOptions: <Option, Group extends GroupBase<Option>>(options: OptionsOrGroups<Option, Group> | undefined, value: PropsValue<Option> | undefined) => OptionsOrGroups<Option, Group>;
-export declare const SelectPrefix: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"div">, {}>;

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

@@ -0,0 +1,5 @@
+export declare const cvaTextArea: (props?: ({
+    disabled?: boolean | null | undefined;
+    invalid?: boolean | null | undefined;
+    resize?: "both" | "vertical" | "horizontal" | "none" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Toggle/Toggle.d.ts

@@ -1,10 +1,9 @@
 import { CommonProps } from "@trackunit/react-components";
 import * as React from "react";
-import "./Toggle.css";
 export type ToggleSize = "small" | "medium";
 export interface ToggleProps extends CommonProps {
     /**
-     * ID of the toggle.
+     * id of the toggle.
      */
     id: string;
     /**
@@ -16,7 +15,7 @@ export interface ToggleProps extends CommonProps {
      */
     onChange: (toggled: boolean, event?: React.ChangeEvent<HTMLInputElement>) => void;
     /**
-     * OnClick event handler it is thrown on root element of the component tree.
+     * onClick event handler it is thrown on root element of the component tree.
      */
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     /**

package/src/components/Toggle/Toggle.variants.d.ts

@@ -0,0 +1,16 @@
+export declare const cvaToggleWrapper: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaToggleInputContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaToggleTrack: (props?: ({
+    size?: "small" | "medium" | null | undefined;
+    disabled?: boolean | null | undefined;
+    toggled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaToggleThumb: (props?: ({
+    toggled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaToggleInput: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaToggleLabelContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaToggleLabel: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaToggleDescription: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/UploadInput/UploadInput.variants.d.ts

@@ -0,0 +1,2 @@
+export declare const cvaUploadInputField: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaUploadInputAddonBefore: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/index.cjs.css

@@ -1,259 +0,0 @@
-/* CSS related to the Label component */
-
-.tu-label {
-  @apply text-base
-    text-slate-700	
-    overflow-hidden
-    whitespace-nowrap
-    text-ellipsis
-    hover:text-slate-800 
-    group-hover:text-slate-800 
-    active:text-slate-800
-    group-active:text-slate-800;
-
-  &--invalid {
-    @apply text-red-600
-      hover:text-red-700 
-      group-hover:text-red-700 
-      active:text-red-700
-      group-active:text-red-700;
-  }
-
-  &--disabled {
-    @apply text-slate-400
-      hover:text-slate-400
-      group-hover:text-slate-400;
-  }
-}
-
-/* CSS related to the RadioGroup component */
-.tu-radiogroup {
-  @apply flex
-    gap-2
-    flex-col
-    items-start;
-
-  &--inline {
-    @apply flex
-      gap-3
-      flex-row
-      items-center;
-  }
-}
-
-.tu-radioitem {
-  @apply w-4
-    h-4
-    appearance-none
-    rounded-3xl
-    bg-white
-    border-solid
-    border
-    border-slate-300
-    shadow-sm
-    shrink-0
-    transition
-    box-border
-    hover:cursor-pointer
-    hover:bg-slate-100
-    focus:ring-2
-    focus:ring-offset-2
-    focus:ring-blue-700;
-
-  &__wrapper {
-    @apply flex
-      gap-2
-      items-center;
-  }
-
-  &--checked {
-    @apply border-solid
-      border-4
-      border-blue-600
-      bg-white
-      hover:bg-slate-100
-      hover:cursor-pointer
-      outline-0
-      active:bg-slate-200
-      active:ring-2
-      active:ring-offset-2
-      active:ring-blue-700
-      focus:bg-slate-200
-      focus:ring-2
-      focus:ring-offset-2
-      focus:ring-blue-700
-      group-active:ring-2
-      group-active:ring-offset-2
-      group-active:ring-blue-700;
-  }
-
-  &--invalid {
-    @apply border-red-600
-      active:ring-red-700
-      focus:ring-red-700
-      group-focus:ring-2
-      group-focus:ring-offset-2;
-  }
-
-  &--disabled {
-    @apply bg-slate-400
-      border-slate-300
-      cursor-not-allowed
-      group-hover:bg-slate-400
-      group-focus:bg-slate-400
-      hover:bg-slate-400
-      focus:bg-slate-400
-      active:bg-slate-400
-      focus:ring-0
-      focus:ring-offset-0
-      group-active:ring-0
-      group-active:ring-offset-0;
-  }
-
-  &--disabled.tu-radioitem--checked {
-    @apply bg-white;
-  }
-
-  &__label-container {
-    @apply gap-y-1
-      grid;
-  }
-
-  &__description {
-    @apply text-sm
-      font-normal
-      text-slate-500
-      text-left
-      whitespace-nowrap
-      text-ellipsis
-      overflow-hidden;
-
-    &--disabled {
-      @apply text-slate-400
-        hover:text-slate-400
-        group-hover:text-slate-400;
-    }
-  }
-}
-
-/* CSS related to the toggle component */
-.tu-toggle {
-  @apply rounded-full
-    bg-white
-    h-full
-    aspect-square
-    translate-x-0
-    transition-all;
-
-  &__wrapper {
-    @apply flex
-      gap-2;
-  }
-
-  &__input-container {
-    @apply flex
-      self-start
-      w-fit	
-      active:shadow
-      rounded-full
-      cursor-pointer
-      focus-within:ring
-      focus-within:ring-offset-2
-      focus-within:ring-blue-700;
-  }
-
-  &__input {
-    @apply absolute
-      opacity-0
-      -z-10;
-  }
-
-  &__switch-container {
-    @apply flex
-      items-center
-      p-1
-      cursor-pointer
-      rounded-full
-      bg-slate-300
-      focus:bg-slate-400
-      hover:bg-slate-400
-      active:bg-slate-500;
-  }
-
-  &__switch {
-    @apply bg-white
-      rounded-full
-      h-full
-      w-5/12		
-      aspect-square
-      translate-x-4
-      transition-all;
-  }
-
-  &--medium {
-    @apply flex
-      items-center
-      p-1
-      cursor-pointer
-      w-9
-      h-5;
-  }
-
-  &--small {
-    @apply flex
-      items-center
-      p-1
-      cursor-pointer
-      w-8
-      h-4;
-
-    .tu-toggle__switch {
-      @apply w-4/12;
-    }
-  }
-
-  &--toggled {
-    @apply flex
-      items-center
-      p-1
-      cursor-pointer
-      bg-blue-600
-      focus:bg-blue-700
-      hover:bg-blue-700
-      active:bg-blue-800;
-  }
-
-  &--disabled {
-    @apply flex
-      items-center
-      p-1
-      cursor-not-allowed
-      pointer-events-none
-      bg-slate-200;
-  }
-
-  &--disabled.tu-toggle--toggled {
-    @apply bg-slate-400;
-  }
-
-  &__label-container {
-    @apply gap-y-1
-      grid;
-  }
-
-  &__description {
-    @apply text-sm	
-      font-normal
-      text-slate-500	
-      text-left
-      whitespace-nowrap
-      text-ellipsis	
-      overflow-hidden;
-
-    &--disabled {
-      @apply text-slate-400
-        hover:text-slate-400
-        group-hover:text-slate-400;
-    }
-  }
-}