@trackunit/react-components 1.1.11 → 1.1.13

package/index.cjs.js

@@ -475,6 +475,7 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
                 "bg-primary-600",
                 "hover:bg-primary-700",
                 "active:bg-primary-800",
+                "focus:bg-primary-800",
                 "disabled:bg-slate-400",
                 "disabled:text-slate-200",
             ],
@@ -483,6 +484,7 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
                 "bg-danger-600",
                 "hover:bg-danger-700",
                 "active:bg-danger-800",
+                "focus:bg-danger-800",
                 "disabled:bg-slate-400",
                 "disabled:text-slate-200",
             ],
@@ -494,6 +496,8 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
                 "text-slate-600",
                 "hover:bg-slate-100",
                 "hover:text-slate-700",
+                "focus:bg-slate-200",
+                "focus:text-slate-800",
                 "active:bg-slate-200",
                 "active:text-slate-800",
                 "disabled:bg-slate-200",
@@ -510,6 +514,9 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
                 "active:bg-danger-200",
                 "active:text-danger-800",
                 "active:border-danger-800",
+                "focus:bg-danger-200",
+                "focus:text-danger-800",
+                "focus:border-danger-800",
                 "disabled:bg-slate-300",
                 "disabled:text-slate-400",
             ],
@@ -520,6 +527,8 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
                 "hover:text-primary-700",
                 "active:bg-black/10",
                 "active:text-primary-800",
+                "focus:bg-black/10",
+                "focus:text-primary-800",
                 "disabled:bg-transparent",
                 "disabled:text-slate-400",
             ],
@@ -531,6 +540,8 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
                 "hover:text-slate-700",
                 "active:bg-black/10",
                 "active:text-slate-800",
+                "focus:bg-black/10",
+                "focus:text-slate-800",
                 "disabled:bg-transparent",
                 "disabled:text-slate-400",
             ],
@@ -2393,7 +2404,7 @@ const PopoverTrigger = react.forwardRef(function PopoverTrigger({ children, rend
     }
 });
 
-const cvaTooltipContainer = cssClassVarianceUtilities.cvaMerge(["flex"]);
+const cvaTooltipContainer = cssClassVarianceUtilities.cvaMerge(["flex", "leading-5"]);
 const cvaTooltipIcon = cssClassVarianceUtilities.cvaMerge(["flex", "h-max", "w-fit", "text-slate-300", "transition", "hover:cursor-pointer", "hover:text-slate-400"], {
     variants: {
         color: {
@@ -2772,11 +2783,16 @@ const cvaInteractableItem = cssClassVarianceUtilities.cvaMerge("", {
  * The cvaInteractableItem variant is used to set the standardized styles that change through interaction with the element (background color, hover, focus, and disabled).
  */
 const cvaMenuItem = (props) => {
-    const { selected, disabled, focused, className, variant } = props ?? {};
-    return tailwindMerge.twMerge(cvaMenuItemStyle({ variant, selected, disabled }), cvaInteractableItem({ selected, disabled, cursor: "pointer", focused }), className);
+    const { selected, disabled, focused, className, variant, fieldSize } = props ?? {};
+    return tailwindMerge.twMerge(cvaMenuItemStyle({ variant, selected, disabled, fieldSize }), cvaInteractableItem({ selected, disabled, cursor: "pointer", focused }), className);
 };
 const cvaMenuItemStyle = cssClassVarianceUtilities.cvaMerge(["py-2", "px-2", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded", "text-sm"], {
     variants: {
+        fieldSize: {
+            small: ["text-xs", "py-1.5"],
+            medium: "",
+            large: "",
+        },
         variant: {
             primary: [],
             danger: [
@@ -2873,7 +2889,7 @@ const cvaMenuItemSuffix = cssClassVarianceUtilities.cvaMerge(["text-secondary-40
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
-const MenuItem = ({ className, dataTestId, label, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, variant = "primary", }) => {
+const MenuItem = ({ className, dataTestId, label, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, fieldSize = "medium", variant = "primary", }) => {
     /* Handle tab navigation */
     const handleKeyDown = (e) => {
         if (e.key === "Enter" && onClick && !disabled) {
@@ -2884,6 +2900,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected, prefix, su
     };
     return (jsxRuntime.jsxs("div", { "aria-disabled": disabled, className: cvaMenuItem({
             selected,
+            fieldSize,
             disabled,
             className,
             variant,

package/index.esm.js

@@ -473,6 +473,7 @@ const cvaButton = cvaMerge([
                 "bg-primary-600",
                 "hover:bg-primary-700",
                 "active:bg-primary-800",
+                "focus:bg-primary-800",
                 "disabled:bg-slate-400",
                 "disabled:text-slate-200",
             ],
@@ -481,6 +482,7 @@ const cvaButton = cvaMerge([
                 "bg-danger-600",
                 "hover:bg-danger-700",
                 "active:bg-danger-800",
+                "focus:bg-danger-800",
                 "disabled:bg-slate-400",
                 "disabled:text-slate-200",
             ],
@@ -492,6 +494,8 @@ const cvaButton = cvaMerge([
                 "text-slate-600",
                 "hover:bg-slate-100",
                 "hover:text-slate-700",
+                "focus:bg-slate-200",
+                "focus:text-slate-800",
                 "active:bg-slate-200",
                 "active:text-slate-800",
                 "disabled:bg-slate-200",
@@ -508,6 +512,9 @@ const cvaButton = cvaMerge([
                 "active:bg-danger-200",
                 "active:text-danger-800",
                 "active:border-danger-800",
+                "focus:bg-danger-200",
+                "focus:text-danger-800",
+                "focus:border-danger-800",
                 "disabled:bg-slate-300",
                 "disabled:text-slate-400",
             ],
@@ -518,6 +525,8 @@ const cvaButton = cvaMerge([
                 "hover:text-primary-700",
                 "active:bg-black/10",
                 "active:text-primary-800",
+                "focus:bg-black/10",
+                "focus:text-primary-800",
                 "disabled:bg-transparent",
                 "disabled:text-slate-400",
             ],
@@ -529,6 +538,8 @@ const cvaButton = cvaMerge([
                 "hover:text-slate-700",
                 "active:bg-black/10",
                 "active:text-slate-800",
+                "focus:bg-black/10",
+                "focus:text-slate-800",
                 "disabled:bg-transparent",
                 "disabled:text-slate-400",
             ],
@@ -2391,7 +2402,7 @@ const PopoverTrigger = forwardRef(function PopoverTrigger({ children, renderButt
     }
 });
 
-const cvaTooltipContainer = cvaMerge(["flex"]);
+const cvaTooltipContainer = cvaMerge(["flex", "leading-5"]);
 const cvaTooltipIcon = cvaMerge(["flex", "h-max", "w-fit", "text-slate-300", "transition", "hover:cursor-pointer", "hover:text-slate-400"], {
     variants: {
         color: {
@@ -2770,11 +2781,16 @@ const cvaInteractableItem = cvaMerge("", {
  * The cvaInteractableItem variant is used to set the standardized styles that change through interaction with the element (background color, hover, focus, and disabled).
  */
 const cvaMenuItem = (props) => {
-    const { selected, disabled, focused, className, variant } = props ?? {};
-    return twMerge(cvaMenuItemStyle({ variant, selected, disabled }), cvaInteractableItem({ selected, disabled, cursor: "pointer", focused }), className);
+    const { selected, disabled, focused, className, variant, fieldSize } = props ?? {};
+    return twMerge(cvaMenuItemStyle({ variant, selected, disabled, fieldSize }), cvaInteractableItem({ selected, disabled, cursor: "pointer", focused }), className);
 };
 const cvaMenuItemStyle = cvaMerge(["py-2", "px-2", "h-auto", "flex", "flex-row", "items-center", "gap-x-2", "select-none", "rounded", "text-sm"], {
     variants: {
+        fieldSize: {
+            small: ["text-xs", "py-1.5"],
+            medium: "",
+            large: "",
+        },
         variant: {
             primary: [],
             danger: [
@@ -2871,7 +2887,7 @@ const cvaMenuItemSuffix = cvaMerge(["text-secondary-400", "text-sm"], {
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
-const MenuItem = ({ className, dataTestId, label, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, variant = "primary", }) => {
+const MenuItem = ({ className, dataTestId, label, children, selected, prefix, suffix, disabled, onClick, stopPropagation = true, id, tabIndex, optionLabelDescription, fieldSize = "medium", variant = "primary", }) => {
     /* Handle tab navigation */
     const handleKeyDown = (e) => {
         if (e.key === "Enter" && onClick && !disabled) {
@@ -2882,6 +2898,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected, prefix, su
     };
     return (jsxs("div", { "aria-disabled": disabled, className: cvaMenuItem({
             selected,
+            fieldSize,
             disabled,
             className,
             variant,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.1.11",
+  "version": "1.1.13",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Menu/MenuItem/MenuItem.d.ts

@@ -1,4 +1,6 @@
+import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { CommonProps } from "../../../common";
+import { cvaMenuItemStyle } from "./MenuItem.variants";
 export type MenuItemVariant = "primary" | "danger";
 export interface MenuItemProps extends CommonProps {
     /**
@@ -61,6 +63,13 @@ export interface MenuItemProps extends CommonProps {
      * Adds a suffixed description to the label, ie. (CustomerID 1234)
      */
     optionLabelDescription?: string;
+    /**
+     * The size of the field.
+     *
+     * @default "medium"
+     * @memberof MenuItemProps
+     */
+    fieldSize?: VariantProps<typeof cvaMenuItemStyle>["fieldSize"];
 }
 /**
  * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
@@ -68,4 +77,4 @@ export interface MenuItemProps extends CommonProps {
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
-export declare const MenuItem: ({ className, dataTestId, label, children, selected, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, optionLabelDescription, variant, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: ({ className, dataTestId, label, children, selected, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, optionLabelDescription, fieldSize, variant, }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/Menu/MenuItem/MenuItem.variants.d.ts

@@ -5,6 +5,7 @@ import { MenuItemVariant } from "./MenuItem";
 type CvaMenuItemProps = Partial<MappedOmit<VariantProps<typeof cvaInteractableItem>, "cursor">> & {
     variant?: MenuItemVariant;
     selected: boolean | null | undefined;
+    fieldSize?: VariantProps<typeof cvaMenuItemStyle>["fieldSize"];
 };
 /**
  * Extends the cvaInteractableItem variant in order to set the padding, width, height, cursor, and other styles particular to the MenuItem component.
@@ -12,6 +13,7 @@ type CvaMenuItemProps = Partial<MappedOmit<VariantProps<typeof cvaInteractableIt
  */
 export declare const cvaMenuItem: (props?: CvaMenuItemProps) => string;
 export declare const cvaMenuItemStyle: (props?: ({
+    fieldSize?: "small" | "medium" | "large" | null | undefined;
     variant?: "primary" | "danger" | null | undefined;
     selected?: boolean | null | undefined;
     disabled?: boolean | null | undefined;