TypeScript Error with React Aria Component Props in Published Library

[yaman3bd]

I'm migrating my React UI component library to use React Aria Components, I have migrated the Button component and the migration process went smoothly and the component works as expected within the library itself.
button component:

import React, { ReactNode, forwardRef, useCallback } from "react";

import { Button as RACButton, ButtonProps as RACButtonProps, composeRenderProps } from "react-aria-components";
import type { VariantProps } from "tailwind-variants";

import { Icon, Loading } from "@/components";
import { button } from "@/theme";

export interface ButtonProps
  extends RACButtonProps,
    Omit<VariantProps<typeof button>, "onlyIcon" | "isDisabled" | "isFocusVisible"> {
  icon?: React.ReactElement<typeof Icon>;
  iconAlign?: "start" | "end";
}

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      icon: providedIcon,
      iconAlign = "start",
      variant = "solid",
      color = "primary",
      isLoading,
      isFetching,
      ...props
    }: ButtonProps,
    ref
  ) => {
    const renderChildren = useCallback(
      (children: ReactNode) => {
        const content = !providedIcon ? (
          children
        ) : (
          <>
            {iconAlign == "start" && providedIcon}
            {children}
            {iconAlign == "end" && providedIcon}
          </>
        );
        return (
          <>
            {content}
            {isLoading && <Loading className="absolute-center" />}
            {isFetching && (
              <span
                className="absolute-center abjad-skeleton w-full"
                style={{ padding: "inherit" }}
                children={<span className="h-2 w-full animate-pulse rounded-3xl bg-black bg-opacity-20" />}
              />
            )}
          </>
        );
      },
      [isLoading, isFetching, providedIcon, iconAlign]
    );

    return (
      <RACButton
        {...props}
        ref={ref}
        isDisabled={props.isDisabled || isLoading || isFetching}
        className={composeRenderProps(props.className, (className, renderProps) =>
          button({
            ...renderProps,
            variant: variant,
            color: color,
            rounded: props.rounded,
            isDisabled: props.isDisabled,
            size: props.size,
            className
          })
        )}
        children={composeRenderProps(props.children, renderChildren)}
      />
    );
  }
);

Button.displayName = "Button";

export default Button;

I am building my library using Vite,
my library vite config:

/// <reference types="vite/client" />
import react from "@vitejs/plugin-react";
import path from "node:path";
import { URL, fileURLToPath } from "url";
import { defineConfig } from "vite";
import dts from "vite-plugin-dts";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  publicDir: false,
  plugins: [
    react(),
    dts({
      insertTypesEntry: true
    }),
    tsconfigPaths()
  ],
  resolve: {
    alias: [
      { find: "@/theme", replacement: fileURLToPath(new URL("./src/theme", import.meta.url)) },
      {
        find: "@/components",
        replacement: fileURLToPath(new URL("./src/components", import.meta.url))
      }
    ]
  },
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/index.tsx"),
      name: "library-name",
      formats: ["es", "umd"],
      fileName: (format) => `library-name.${format}.js`
    },
    rollupOptions: {
      external: ["react", "react-dom"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM"
        }
      }
    }
  }
});

the published library structure:

.
└── dist/
    ├── components/
    │   ├── button/
    │   │   ├── Button.d.ts
    │   │   └── index.d.ts
    │   └── index.d.ts
    ├── library-name.es.js
    ├── library-name.umd.js
    └── index.d.ts

However, when I publish my library to NPM and attempt to consume it in any other project, TypeScript throws an error related to the component's props.

TS2322: Type { children: string; className: string; } is not assignable to type ButtonProps
Property children is incompatible with index signature.
Type string is not assignable to type never

This error occurs when trying to use the Button component as follows:

import { Button } from "@library-name";
<Button className="w-full">
  {t("checkout")}
</Button>

also, I get the same error on all the props of the component, for example, if I used isDisabled I would get the same error:

TS2322: Type { isDisabled: boolean; } is not assignable to type ButtonProps
Property isDisabled is incompatible with index signature.
Type boolean is not assignable to type never

I do not think the issue is with the build steps or vite itself because before I migrated the Button component to RAC it was working fine without any issues this was my old button component props:

export interface ButtonProps extends Omit<HTMLProps<HTMLElement>, "size" | "href"> {
  href?: string | Record<string, any>;
  type?: "button" | "submit" | "reset";
  variant?: ButtonVariantProps["variant"];
  color?: ButtonVariantProps["color"];
  size?: ButtonVariantProps["size"];
  as?: string | any;
  className?: string;
  disabled?: boolean;
  rounded?: ButtonVariantProps["rounded"];
  isLoading?: boolean;
  isFetching?: boolean;
  icon?: React.ReactElement<typeof Icon>;
  iconAlign?: "start" | "end";
  children?: React.ReactNode;
}

could anyone help me resolve this issue?
Any help on this issue would be greatly appreciated.
Thank you!

[snowystinger]

could you put together an minimum example repo which reproduces the issue? or could you show what the built/dist version of the button looks like after it's been run through vite? you could probably turn off minify to see it more easily.
And then, what is t?

[yaman3bd]

while I was debugging, I found out the issue is not with RAC or anything related to it, the issue is when I extend style variants props from tailwind-variants:
this line:

Omit<VariantProps<typeof button>, "onlyIcon" | "isDisabled" | "isFocusVisible">

when I modified the implementation to manually extract and define the properties from VariantProps<typeof button>:

type ButtonVariantProps = VariantProps<typeof button>;
export interface ButtonProps extends RACButtonProps {
  variant?: ButtonVariantProps["variant"];
  color?: ButtonVariantProps["color"];
  size?: ButtonVariantProps["size"];
  rounded?: ButtonVariantProps["rounded"];
  isLoading?: boolean;
  isFetching?: boolean;
  icon?: React.ReactElement<typeof Icon>;
  iconAlign?: "start" | "end";
}

the error was resolved, but I'm unclear about the issue with using VariantProps directly. It seems like extending VariantProps directly should work, but it results in type conflicts.

Thanks for considering to reply to my issue here.