componex/dist/index.js

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.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var index_exports = {};
__export(index_exports, {
  cn: () => cn_default,
  default: () => componex_default
});
module.exports = __toCommonJS(index_exports);

// src/componex.ts
var import_react = require("react");

// src/helpers/cn.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}
var cn_default = cn;

// src/componex.ts
var import_class_variance_authority = require("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 = (0, import_class_variance_authority.cva)([mergedBaseClassName], cvaConfig);
  const StyledComponent = (0, import_react.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 (0, import_react.createElement)(Component, {
      ...baseProps,
      ...filteredPropsWithoutCVA,
      ref,
      className: cn_default(cvaInit(props))
    });
  });
  const typedStyledComponent = StyledComponent;
  typedStyledComponent.baseClassName = mergedBaseClassName;
  return typedStyledComponent;
};
var componex_default = componex;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  cn
});