@trackunit/react-form-components 1.3.69 → 1.3.71

package/index.cjs.js

@@ -204,7 +204,7 @@ const cvaInputBase = cssClassVarianceUtilities.cvaMerge([
 ]);
 const cvaInputBaseDisabled = cssClassVarianceUtilities.cvaMerge(["bg-slate-100", "hover:bg-slate-100", "hover:border-slate-300"]);
 const cvaInputBaseInvalid = cssClassVarianceUtilities.cvaMerge(["border-danger-600"]);
-const cvaInput = cssClassVarianceUtilities.cvaMerge([
+const cvaInput$1 = cssClassVarianceUtilities.cvaMerge([
     "overflow-hidden",
     "grid",
     // ! The layout of the grid is critical to the functioning of the cvaInputItemPlacementManager 👇
@@ -449,7 +449,7 @@ const BaseInput = ({ className, isInvalid, dataTestId, prefix, suffix, addonBefo
     // Keep a reference to the input element
     const innerRef = React.useRef(null);
     React.useImperativeHandle(ref, () => innerRef.current, []);
-    return (jsxRuntime.jsxs("div", { className: cvaInput({
+    return (jsxRuntime.jsxs("div", { className: cvaInput$1({
             disabled: renderAsDisabled,
             invalid: isInvalid,
             isWarning,
@@ -845,7 +845,7 @@ const ColorField = React.forwardRef(({ label, id, tip, helpText, errorMessage, h
         setRenderAsInvalid(!!errorType);
         onBlur?.(event);
     }, [errorType, onBlur]);
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(renderAsDisabled || renderAsReadonly) : false, tip: tip, children: jsxRuntime.jsxs("div", { className: cvaInput({
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(renderAsDisabled || renderAsReadonly) : false, tip: tip, children: jsxRuntime.jsxs("div", { className: cvaInput$1({
                 size: fieldSize,
                 disabled: renderAsDisabled,
                 invalid: renderAsInvalid,
@@ -1206,39 +1206,72 @@ const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInva
 NumberField.displayName = "NumberField";
 
 const cvaOptionCardLabel = cssClassVarianceUtilities.cvaMerge([
-    cvaInputBase(),
-    "text-center",
-    "component-baseInput-background",
-    "aspect-square",
+    "group",
+    "transition",
+    "bg-white",
+    "outline",
+    "outline-2",
+    "outline-slate-300",
+    "hover:bg-slate-100",
+    "focus:bg-slate-200",
+    "active:bg-slate-200",
+    "disabled:bg-slate-200",
+    "peer-checked:bg-primary-50",
+    "peer-checked:outline-primary-600",
+    "peer-checked:outline-2",
     "flex",
-    "flex-col",
     "gap-2",
     "justify-center",
     "items-center",
-    "p-responsive-space",
-    "w-full",
-    "peer-checked:bg-primary-50",
-    "peer-checked:border-primary-600",
-    "peer-checked:border-2",
+    "text-center",
+    "rounded-md",
 ], {
     variants: {
         disabled: {
-            true: [cvaInputBaseDisabled(), "cursor-not-allowed"],
+            true: ["cursor-not-allowed"],
             false: ["cursor-pointer"],
         },
+        layout: {
+            default: [
+                "flex-col",
+                "p-responsive-space",
+                "w-full",
+                "aspect-square",
+            ],
+            compact: [
+                "px-3",
+                "py-1.5",
+                "h-8",
+                "min-h-[calc(var(--line-height-sm)+var(--spacing-3))]",
+                "flex-row",
+                "w-fit",
+            ],
+        },
     },
 });
 const cvaOptionCardContent = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "items-center"]);
 const cvaOptionCardContainer = cssClassVarianceUtilities.cvaMerge(["contents"]);
+const cvaCompactOptionCardText = cssClassVarianceUtilities.cvaMerge([
+    "hover:text-slate-700",
+    "focus:text-slate-800",
+    "active:text-slate-800",
+    "disabled:text-slate-400",
+    "text-sm",
+    "text-slate-600",
+    "whitespace-nowrap",
+]);
+const cvaInput = cssClassVarianceUtilities.cvaMerge(["peer", "absolute", "h-0", "w-0", "opacity-0"]);
+const cvaCustomImage = cssClassVarianceUtilities.cvaMerge(["text-secondary-400"]);
 
 /**
  * A card version of a radio button that includes an icon, headings and a description.
  */
-const OptionCard = ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage, ref, ...rest }) => {
+const OptionCard = ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage, layout = "default", ref, ...rest }) => {
     const htmlForId = id ?? "option-card-" + sharedUtils.uuidv4();
-    return (jsxRuntime.jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsxRuntime.jsx("input", { className: "peer absolute h-0 w-0 opacity-0", "data-testid": `${dataTestId}-option-card`, disabled: disabled, id: htmlForId, ref: ref, type: "radio", value: value, ...rest }), jsxRuntime.jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), "data-testid": `${dataTestId}-option-card-label`, htmlFor: htmlForId, children: [disabled && icon && !customImage
-                        ? React.cloneElement(icon, { className: `${icon.props.className} text-secondary-400` })
-                        : null, disabled && customImage ? jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, !disabled && !customImage && icon, !disabled && customImage ? jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, heading ? (jsxRuntime.jsx(reactComponents.Heading, { subtle: disabled, variant: "secondary", children: heading })) : null, subheading || description ? (jsxRuntime.jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: disabled, type: "span", weight: "thick", children: subheading })) : null, description ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: true, type: "span", children: description })) : null] })) : null] })] }));
+    const subContent = React.useMemo(() => (jsxRuntime.jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: disabled, type: "span", weight: "thick", children: subheading })) : null, description ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: disabled, type: "span", children: description })) : null] })), [subheading, description, contentClassName, disabled]);
+    return (jsxRuntime.jsx(reactComponents.Tooltip, { className: "w-fit", disabled: layout !== "compact" || (!subheading && !description), label: subContent, mode: "light", placement: "top", children: jsxRuntime.jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsxRuntime.jsx("input", { className: cvaInput(), "data-testid": `${dataTestId}-option-card`, disabled: disabled, id: htmlForId, ref: ref, type: "radio", value: value, ...rest }), jsxRuntime.jsxs("label", { className: cvaOptionCardLabel({ className, disabled, layout }), "data-testid": `${dataTestId}-option-card-label`, htmlFor: htmlForId, children: [disabled && icon && !customImage
+                            ? React.cloneElement(icon, { className: cvaCustomImage({ className: icon.props.className }) })
+                            : null, disabled && customImage ? jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, !disabled && !customImage && icon, !disabled && customImage ? jsxRuntime.jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, heading ? (layout === "default" ? (jsxRuntime.jsx(reactComponents.Heading, { subtle: disabled, variant: "secondary", children: heading })) : (jsxRuntime.jsx(reactComponents.Text, { align: "center", className: cvaCompactOptionCardText(), subtle: disabled, type: "span", weight: "thick", children: heading }))) : null, layout === "default" && (subheading || description) ? subContent : null] })] }) }));
 };
 OptionCard.displayName = "OptionCard";
 
@@ -3097,7 +3130,7 @@ exports.countryCodeToFlagEmoji = countryCodeToFlagEmoji;
 exports.cvaAccessoriesContainer = cvaAccessoriesContainer;
 exports.cvaActionButton = cvaActionButton;
 exports.cvaActionContainer = cvaActionContainer;
-exports.cvaInput = cvaInput;
+exports.cvaInput = cvaInput$1;
 exports.cvaInputAddon = cvaInputAddon;
 exports.cvaInputBase = cvaInputBase;
 exports.cvaInputBaseDisabled = cvaInputBaseDisabled;

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useNamespaceTranslation, registerTranslations, NamespaceTrans } from '@trackunit/i18n-library-translation';
-import { IconButton, Icon, Tooltip, useGeometry, useIsTextTruncated, Heading, Text, Spinner, MenuItem, Tag, useResize, useDebounce, useIsFirstRender } from '@trackunit/react-components';
+import { IconButton, Icon, Tooltip, useGeometry, useIsTextTruncated, Text, Heading, Spinner, MenuItem, Tag, useResize, useDebounce, useIsFirstRender } from '@trackunit/react-components';
 import { useCopyToClipboard } from 'usehooks-ts';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { themeSpacing } from '@trackunit/ui-design-tokens';
@@ -185,7 +185,7 @@ const cvaInputBase = cvaMerge([
 ]);
 const cvaInputBaseDisabled = cvaMerge(["bg-slate-100", "hover:bg-slate-100", "hover:border-slate-300"]);
 const cvaInputBaseInvalid = cvaMerge(["border-danger-600"]);
-const cvaInput = cvaMerge([
+const cvaInput$1 = cvaMerge([
     "overflow-hidden",
     "grid",
     // ! The layout of the grid is critical to the functioning of the cvaInputItemPlacementManager 👇
@@ -430,7 +430,7 @@ const BaseInput = ({ className, isInvalid, dataTestId, prefix, suffix, addonBefo
     // Keep a reference to the input element
     const innerRef = useRef(null);
     useImperativeHandle(ref, () => innerRef.current, []);
-    return (jsxs("div", { className: cvaInput({
+    return (jsxs("div", { className: cvaInput$1({
             disabled: renderAsDisabled,
             invalid: isInvalid,
             isWarning,
@@ -826,7 +826,7 @@ const ColorField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAdd
         setRenderAsInvalid(!!errorType);
         onBlur?.(event);
     }, [errorType, onBlur]);
-    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(renderAsDisabled || renderAsReadonly) : false, tip: tip, children: jsxs("div", { className: cvaInput({
+    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(renderAsDisabled || renderAsReadonly) : false, tip: tip, children: jsxs("div", { className: cvaInput$1({
                 size: fieldSize,
                 disabled: renderAsDisabled,
                 invalid: renderAsInvalid,
@@ -1187,39 +1187,72 @@ const NumberField = ({ label, id, tip, helpText, errorMessage, helpAddon, isInva
 NumberField.displayName = "NumberField";
 
 const cvaOptionCardLabel = cvaMerge([
-    cvaInputBase(),
-    "text-center",
-    "component-baseInput-background",
-    "aspect-square",
+    "group",
+    "transition",
+    "bg-white",
+    "outline",
+    "outline-2",
+    "outline-slate-300",
+    "hover:bg-slate-100",
+    "focus:bg-slate-200",
+    "active:bg-slate-200",
+    "disabled:bg-slate-200",
+    "peer-checked:bg-primary-50",
+    "peer-checked:outline-primary-600",
+    "peer-checked:outline-2",
     "flex",
-    "flex-col",
     "gap-2",
     "justify-center",
     "items-center",
-    "p-responsive-space",
-    "w-full",
-    "peer-checked:bg-primary-50",
-    "peer-checked:border-primary-600",
-    "peer-checked:border-2",
+    "text-center",
+    "rounded-md",
 ], {
     variants: {
         disabled: {
-            true: [cvaInputBaseDisabled(), "cursor-not-allowed"],
+            true: ["cursor-not-allowed"],
             false: ["cursor-pointer"],
         },
+        layout: {
+            default: [
+                "flex-col",
+                "p-responsive-space",
+                "w-full",
+                "aspect-square",
+            ],
+            compact: [
+                "px-3",
+                "py-1.5",
+                "h-8",
+                "min-h-[calc(var(--line-height-sm)+var(--spacing-3))]",
+                "flex-row",
+                "w-fit",
+            ],
+        },
     },
 });
 const cvaOptionCardContent = cvaMerge(["flex", "flex-col", "items-center"]);
 const cvaOptionCardContainer = cvaMerge(["contents"]);
+const cvaCompactOptionCardText = cvaMerge([
+    "hover:text-slate-700",
+    "focus:text-slate-800",
+    "active:text-slate-800",
+    "disabled:text-slate-400",
+    "text-sm",
+    "text-slate-600",
+    "whitespace-nowrap",
+]);
+const cvaInput = cvaMerge(["peer", "absolute", "h-0", "w-0", "opacity-0"]);
+const cvaCustomImage = cvaMerge(["text-secondary-400"]);
 
 /**
  * A card version of a radio button that includes an icon, headings and a description.
  */
-const OptionCard = ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage, ref, ...rest }) => {
+const OptionCard = ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage, layout = "default", ref, ...rest }) => {
     const htmlForId = id ?? "option-card-" + uuidv4();
-    return (jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsx("input", { className: "peer absolute h-0 w-0 opacity-0", "data-testid": `${dataTestId}-option-card`, disabled: disabled, id: htmlForId, ref: ref, type: "radio", value: value, ...rest }), jsxs("label", { className: cvaOptionCardLabel({ className, disabled }), "data-testid": `${dataTestId}-option-card-label`, htmlFor: htmlForId, children: [disabled && icon && !customImage
-                        ? cloneElement(icon, { className: `${icon.props.className} text-secondary-400` })
-                        : null, disabled && customImage ? jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, !disabled && !customImage && icon, !disabled && customImage ? jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, heading ? (jsx(Heading, { subtle: disabled, variant: "secondary", children: heading })) : null, subheading || description ? (jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading ? (jsx(Text, { align: "center", subtle: disabled, type: "span", weight: "thick", children: subheading })) : null, description ? (jsx(Text, { align: "center", subtle: true, type: "span", children: description })) : null] })) : null] })] }));
+    const subContent = useMemo(() => (jsxs("div", { className: cvaOptionCardContent({ className: contentClassName }), children: [subheading ? (jsx(Text, { align: "center", subtle: disabled, type: "span", weight: "thick", children: subheading })) : null, description ? (jsx(Text, { align: "center", subtle: disabled, type: "span", children: description })) : null] })), [subheading, description, contentClassName, disabled]);
+    return (jsx(Tooltip, { className: "w-fit", disabled: layout !== "compact" || (!subheading && !description), label: subContent, mode: "light", placement: "top", children: jsxs("div", { className: cvaOptionCardContainer(), "data-testid": dataTestId, children: [jsx("input", { className: cvaInput(), "data-testid": `${dataTestId}-option-card`, disabled: disabled, id: htmlForId, ref: ref, type: "radio", value: value, ...rest }), jsxs("label", { className: cvaOptionCardLabel({ className, disabled, layout }), "data-testid": `${dataTestId}-option-card-label`, htmlFor: htmlForId, children: [disabled && icon && !customImage
+                            ? cloneElement(icon, { className: cvaCustomImage({ className: icon.props.className }) })
+                            : null, disabled && customImage ? jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, !disabled && !customImage && icon, !disabled && customImage ? jsx("img", { alt: "logo", className: customImage.className, src: customImage.src }) : null, heading ? (layout === "default" ? (jsx(Heading, { subtle: disabled, variant: "secondary", children: heading })) : (jsx(Text, { align: "center", className: cvaCompactOptionCardText(), subtle: disabled, type: "span", weight: "thick", children: heading }))) : null, layout === "default" && (subheading || description) ? subContent : null] })] }) }));
 };
 OptionCard.displayName = "OptionCard";
 
@@ -3026,4 +3059,4 @@ const useZodValidators = () => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DEFAULT_TIME, DateField, DateInput, DropZone, DropZoneDefaultLabel, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneFieldWithController, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, ToggleSwitch, ToggleSwitchOption, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaAccessoriesContainer, cvaActionButton, cvaActionContainer, cvaInput, cvaInputAddon, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputItemPlacementManager, cvaInputPrefix, cvaInputSuffix, cvaLabel, cvaSelect, cvaSelectControl, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefixSuffix, cvaSelectXIcon, getCountryAbbreviation, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isValidHEXColor, parseSchedule, phoneErrorMessage, serializeSchedule, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };
+export { ActionButton, BaseInput, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DEFAULT_TIME, DateField, DateInput, DropZone, DropZoneDefaultLabel, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneFieldWithController, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, ToggleSwitch, ToggleSwitchOption, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaAccessoriesContainer, cvaActionButton, cvaActionContainer, cvaInput$1 as cvaInput, cvaInputAddon, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputItemPlacementManager, cvaInputPrefix, cvaInputSuffix, cvaLabel, cvaSelect, cvaSelectControl, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefixSuffix, cvaSelectXIcon, getCountryAbbreviation, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isValidHEXColor, parseSchedule, phoneErrorMessage, serializeSchedule, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.3.69",
+  "version": "1.3.71",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -18,7 +18,7 @@
     "react-hook-form": "7.53.1",
     "tailwind-merge": "^2.0.0",
     "@trackunit/css-class-variance-utilities": "1.3.49",
-    "@trackunit/react-components": "1.4.60",
+    "@trackunit/react-components": "1.4.61",
     "@trackunit/ui-icons": "1.3.49",
     "@trackunit/shared-utils": "1.5.49",
     "@trackunit/ui-design-tokens": "1.3.49",

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

@@ -29,6 +29,10 @@ export interface OptionCardProps extends InputHTMLAttributes<HTMLInputElement>,
      * A ref for the component
      */
     ref?: Ref<HTMLInputElement>;
+    /**
+     * The layout of the component.
+     */
+    layout?: "compact" | "default";
 }
 interface CustomImage {
     src: string;
@@ -38,7 +42,7 @@ interface CustomImage {
  * A card version of a radio button that includes an icon, headings and a description.
  */
 export declare const OptionCard: {
-    ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage, ref, ...rest }: OptionCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ icon, heading, subheading, description, disabled, id, value, className, contentClassName, dataTestId, customImage, layout, ref, ...rest }: OptionCardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

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

@@ -1,5 +1,9 @@
 export declare const cvaOptionCardLabel: (props?: ({
     disabled?: boolean | null | undefined;
+    layout?: "default" | "compact" | 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;
+export declare const cvaCompactOptionCardText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaInput: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaCustomImage: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;