@trackunit/react-components 1.10.45 → 1.10.47

package/index.cjs.js

@@ -585,7 +585,6 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
              * So we need to add padding to the min-height calculation. Two times the vertical
              * padding aka py-1 * 2 aka --spacing-1 * 2 aka spacing-2 (for small).
              */
-            extraSmall: ["p-0", "gap-1", "w-5", "h-8", "text-xs", "min-h-[calc(var(--line-height-sm)+var(--spacing-1))"],
             small: ["px-2", "py-1.5", "gap-1", "h-7", "text-xs", "min-h-[calc(var(--line-height-sm)+var(--spacing-2))]"],
             medium: ["px-3", "py-1.5", "gap-2", "h-8", "text-sm", "min-h-[calc(var(--line-height-sm)+var(--spacing-3))]"],
             large: [
@@ -598,10 +597,6 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
                 "min-h-[calc(var(--line-height-sm)+var(--spacing-4))]",
             ],
         },
-        rounded: {
-            true: ["rounded-full"],
-            false: [],
-        },
         fullWidth: {
             true: ["w-full", "flex-auto"],
             false: [],
@@ -665,7 +660,6 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
     defaultVariants: {
         variant: "primary",
         size: "medium",
-        rounded: false,
         fullWidth: false,
         square: false,
         disabled: false,
@@ -724,7 +718,6 @@ const cvaButtonPrefixSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "items
 const cvaIconButton = cssClassVarianceUtilities.cvaMerge([], {
     variants: {
         size: {
-            extraSmall: ["p-0", "w-5", "h-8"],
             small: ["p-1.5", "w-7", "h-7"],
             medium: ["p-2", "w-8", "h-8"],
             large: ["p-2.5", "w-10", "h-10"],
@@ -747,7 +740,7 @@ const cvaIconButton = cssClassVarianceUtilities.cvaMerge([], {
  * @param {ButtonProps} props - The props for the Button component
  * @returns {ReactElement} Button component
  */
-const Button = ({ onClick, children, loading = false, disabled = false, className, fullWidth = false, prefix, suffix, variant = "primary", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, asChild = false, circular = false, ref, ...rest }) => {
+const Button = ({ onClick, children, loading = false, disabled = false, className, fullWidth = false, prefix, suffix, variant = "primary", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, asChild = false, ref, ...rest }) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     const sharedCompProps = {
         ref,
@@ -755,7 +748,7 @@ const Button = ({ onClick, children, loading = false, disabled = false, classNam
         role,
         onClick,
         tabIndex,
-        className: cvaButton({ rounded: circular, disabled, size, square, variant, loading, fullWidth, className }),
+        className: cvaButton({ disabled, size, square, variant, loading, fullWidth, className }),
         "aria-label": title,
         "aria-disabled": disabled || loading,
         "data-testid": dataTestId,
@@ -3036,6 +3029,7 @@ const cvaOverflowIndicatorButton = cssClassVarianceUtilities.cvaMerge([
     "pointer-events-auto",
     "starting:opacity-0",
     "group-hover:opacity-100",
+    "rounded-full",
 ]);
 
 /**
@@ -3047,7 +3041,7 @@ const cvaOverflowIndicatorButton = cssClassVarianceUtilities.cvaMerge([
  */
 const OverflowIndicator = ({ className, dataTestId, direction, onClickScroll, }) => {
     const iconName = direction === "left" ? "ChevronLeft" : "ChevronRight";
-    return (jsxRuntime.jsxs(ZStack, { className: cvaOverflowIndicatorContainer({ className }), dataTestId: dataTestId, children: [jsxRuntime.jsx("div", { className: cvaJustificationContainer({ direction }), children: jsxRuntime.jsx("div", { className: cvaOverflowIndicatorGradient({ direction }), "data-testid": dataTestId ? `${dataTestId}-gradient` : undefined }) }), jsxRuntime.jsx("div", { className: cvaJustificationContainer({ direction }), children: jsxRuntime.jsx(IconButton, { circular: true, className: cvaOverflowIndicatorButton(), "data-testid": dataTestId ? `${dataTestId}-button` : undefined, icon: jsxRuntime.jsx(Icon, { name: iconName, size: "small" }), onClick: onClickScroll, size: "small", variant: "secondary" }) })] }));
+    return (jsxRuntime.jsxs(ZStack, { className: cvaOverflowIndicatorContainer({ className }), dataTestId: dataTestId, children: [jsxRuntime.jsx("div", { className: cvaJustificationContainer({ direction }), children: jsxRuntime.jsx("div", { className: cvaOverflowIndicatorGradient({ direction }), "data-testid": dataTestId ? `${dataTestId}-gradient` : undefined }) }), jsxRuntime.jsx("div", { className: cvaJustificationContainer({ direction }), children: jsxRuntime.jsx(IconButton, { className: cvaOverflowIndicatorButton(), "data-testid": dataTestId ? `${dataTestId}-button` : undefined, icon: jsxRuntime.jsx(Icon, { name: iconName, size: "small" }), onClick: onClickScroll, size: "small", variant: "secondary" }) })] }));
 };
 
 /**
@@ -4637,7 +4631,6 @@ const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     className: "text-neutral-400",
 }, iconButtonProps = {
     size: "medium",
-    circular: false,
     square: true,
     variant: "secondary",
 }, customButton, customPortalId, children, }) => {

package/index.esm.js

@@ -583,7 +583,6 @@ const cvaButton = cvaMerge([
              * So we need to add padding to the min-height calculation. Two times the vertical
              * padding aka py-1 * 2 aka --spacing-1 * 2 aka spacing-2 (for small).
              */
-            extraSmall: ["p-0", "gap-1", "w-5", "h-8", "text-xs", "min-h-[calc(var(--line-height-sm)+var(--spacing-1))"],
             small: ["px-2", "py-1.5", "gap-1", "h-7", "text-xs", "min-h-[calc(var(--line-height-sm)+var(--spacing-2))]"],
             medium: ["px-3", "py-1.5", "gap-2", "h-8", "text-sm", "min-h-[calc(var(--line-height-sm)+var(--spacing-3))]"],
             large: [
@@ -596,10 +595,6 @@ const cvaButton = cvaMerge([
                 "min-h-[calc(var(--line-height-sm)+var(--spacing-4))]",
             ],
         },
-        rounded: {
-            true: ["rounded-full"],
-            false: [],
-        },
         fullWidth: {
             true: ["w-full", "flex-auto"],
             false: [],
@@ -663,7 +658,6 @@ const cvaButton = cvaMerge([
     defaultVariants: {
         variant: "primary",
         size: "medium",
-        rounded: false,
         fullWidth: false,
         square: false,
         disabled: false,
@@ -722,7 +716,6 @@ const cvaButtonPrefixSuffix = cvaMerge(["flex", "items-center"], {
 const cvaIconButton = cvaMerge([], {
     variants: {
         size: {
-            extraSmall: ["p-0", "w-5", "h-8"],
             small: ["p-1.5", "w-7", "h-7"],
             medium: ["p-2", "w-8", "h-8"],
             large: ["p-2.5", "w-10", "h-10"],
@@ -745,7 +738,7 @@ const cvaIconButton = cvaMerge([], {
  * @param {ButtonProps} props - The props for the Button component
  * @returns {ReactElement} Button component
  */
-const Button = ({ onClick, children, loading = false, disabled = false, className, fullWidth = false, prefix, suffix, variant = "primary", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, asChild = false, circular = false, ref, ...rest }) => {
+const Button = ({ onClick, children, loading = false, disabled = false, className, fullWidth = false, prefix, suffix, variant = "primary", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, asChild = false, ref, ...rest }) => {
     const Comp = asChild ? Slot : "button";
     const sharedCompProps = {
         ref,
@@ -753,7 +746,7 @@ const Button = ({ onClick, children, loading = false, disabled = false, classNam
         role,
         onClick,
         tabIndex,
-        className: cvaButton({ rounded: circular, disabled, size, square, variant, loading, fullWidth, className }),
+        className: cvaButton({ disabled, size, square, variant, loading, fullWidth, className }),
         "aria-label": title,
         "aria-disabled": disabled || loading,
         "data-testid": dataTestId,
@@ -3034,6 +3027,7 @@ const cvaOverflowIndicatorButton = cvaMerge([
     "pointer-events-auto",
     "starting:opacity-0",
     "group-hover:opacity-100",
+    "rounded-full",
 ]);
 
 /**
@@ -3045,7 +3039,7 @@ const cvaOverflowIndicatorButton = cvaMerge([
  */
 const OverflowIndicator = ({ className, dataTestId, direction, onClickScroll, }) => {
     const iconName = direction === "left" ? "ChevronLeft" : "ChevronRight";
-    return (jsxs(ZStack, { className: cvaOverflowIndicatorContainer({ className }), dataTestId: dataTestId, children: [jsx("div", { className: cvaJustificationContainer({ direction }), children: jsx("div", { className: cvaOverflowIndicatorGradient({ direction }), "data-testid": dataTestId ? `${dataTestId}-gradient` : undefined }) }), jsx("div", { className: cvaJustificationContainer({ direction }), children: jsx(IconButton, { circular: true, className: cvaOverflowIndicatorButton(), "data-testid": dataTestId ? `${dataTestId}-button` : undefined, icon: jsx(Icon, { name: iconName, size: "small" }), onClick: onClickScroll, size: "small", variant: "secondary" }) })] }));
+    return (jsxs(ZStack, { className: cvaOverflowIndicatorContainer({ className }), dataTestId: dataTestId, children: [jsx("div", { className: cvaJustificationContainer({ direction }), children: jsx("div", { className: cvaOverflowIndicatorGradient({ direction }), "data-testid": dataTestId ? `${dataTestId}-gradient` : undefined }) }), jsx("div", { className: cvaJustificationContainer({ direction }), children: jsx(IconButton, { className: cvaOverflowIndicatorButton(), "data-testid": dataTestId ? `${dataTestId}-button` : undefined, icon: jsx(Icon, { name: iconName, size: "small" }), onClick: onClickScroll, size: "small", variant: "secondary" }) })] }));
 };
 
 /**
@@ -4635,7 +4629,6 @@ const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     className: "text-neutral-400",
 }, iconButtonProps = {
     size: "medium",
-    circular: false,
     square: true,
     variant: "secondary",
 }, customButton, customPortalId, children, }) => {

package/package.json

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

package/src/components/buttons/Button/Button.d.ts

@@ -40,9 +40,9 @@ export interface ButtonProps extends Omit<ButtonCommonProps, "size"> {
      */
     ref?: Ref<HTMLButtonElement>;
     /**
-     * The size of the button. "ExtraSmall" is only used for IconButtons.
+     * The size of the button
      */
-    size?: "extraSmall" | Size;
+    size?: Size;
 }
 /**
  * Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.
@@ -57,6 +57,6 @@ export interface ButtonProps extends Omit<ButtonCommonProps, "size"> {
  * @returns {ReactElement} Button component
  */
 export declare const Button: {
-    ({ onClick, children, loading, disabled, className, fullWidth, prefix, suffix, variant, type, size, square, dataTestId, title, role, tabIndex, asChild, circular, ref, ...rest }: ButtonProps): ReactElement;
+    ({ onClick, children, loading, disabled, className, fullWidth, prefix, suffix, variant, type, size, square, dataTestId, title, role, tabIndex, asChild, ref, ...rest }: ButtonProps): ReactElement;
     displayName: string;
 };

package/src/components/buttons/IconButton/IconButton.d.ts

@@ -16,7 +16,7 @@ export interface IconButtonProps extends MappedOmit<ButtonCommonProps, "size"> {
     /**
      * The size of the button. Defaults to "medium".
      */
-    size?: "extraSmall" | Size;
+    size?: Size;
     /**
      * A ref for the component
      */

package/src/components/buttons/shared/Button.variants.d.ts

@@ -1,7 +1,6 @@
 export declare const cvaButton: (props?: ({
     variant?: "primary" | "primary-danger" | "secondary" | "secondary-danger" | "ghost" | "ghost-neutral" | "filled" | null | undefined;
-    size?: "extraSmall" | "small" | "medium" | "large" | null | undefined;
-    rounded?: boolean | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
     fullWidth?: boolean | null | undefined;
     square?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
@@ -12,9 +11,9 @@ export declare const cvaButtonSpinner: (props?: ({
     variant?: "primary" | "primary-danger" | "secondary" | "secondary-danger" | "ghost" | "ghost-neutral" | "filled" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaButtonPrefixSuffix: (props?: ({
-    size?: "extraSmall" | "small" | "medium" | "large" | null | undefined;
+    size?: "small" | "medium" | "large" | "extraSmall" | null | undefined;
     variant?: "primary" | "primary-danger" | "secondary" | "secondary-danger" | "ghost" | "ghost-neutral" | "filled" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaIconButton: (props?: ({
-    size?: "extraSmall" | "small" | "medium" | "large" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/buttons/shared/ButtonProps.d.ts

@@ -38,10 +38,6 @@ export interface ButtonCommonProps extends CommonProps {
      * The id of the button.
      */
     id?: string;
-    /**
-     * Whether the button is circular or not.
-     */
-    circular?: boolean;
     title?: string;
     tabIndex?: number;
     role?: string;