componex/dist/index.mjs

A powerful, type-safe component styling library for React that combines the best of CSS-in-JS, utility-first CSS, and component composition. Features include variant support, polymorphic components, and seamless TypeScript integration.

// src/componex.ts
import { createElement, forwardRef } from "react";

// src/helpers/cn.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var cn_default = cn;

// src/componex.ts
import { cva } from "class-variance-authority";
var componex = (component, {
  className: newBaseClassName,
  cva: cvaConfig,
  ...baseProps
} = {}) => {
  const componentBaseClassName = typeof component === "function" && "baseClassName" in component ? component.baseClassName : "";
  const mergedBaseClassName = cn_default(componentBaseClassName, newBaseClassName);
  const cvaInit = cva([mergedBaseClassName], cvaConfig);
  const StyledComponent = forwardRef(function StyledComponent2(props, ref) {
    const filteredPropsWithoutCVA = Object.entries(props).reduce(
      (acc, [key, value]) => cvaConfig?.variants?.[key] ? acc : { ...acc, [key]: value },
      {}
    );
    const Component = "as" in props ? props.as : component;
    return createElement(Component, {
      ...baseProps,
      ...filteredPropsWithoutCVA,
      ref,
      className: cn_default(cvaInit(props))
    });
  });
  const typedStyledComponent = StyledComponent;
  typedStyledComponent.baseClassName = mergedBaseClassName;
  return typedStyledComponent;
};
var componex_default = componex;
export {
  cn_default as cn,
  componex_default as default
};