tsup.config.ts

import { defineConfig } from "tsup";
import { readdirSync } from "fs";
import path from "path";

const root = import.meta.dirname;
const styledSystem = path.resolve(root, "src/styled-system");

// Every component folder becomes its own subpath entry (e.g. "button" ->
// dist/button.js) so consumers can import just what they use, instead of
// paying for the whole barrel's JS and type surface.
function componentEntries(groupDir: string): Record<string, string> {
  const entries: Record<string, string> = {};
  for (const name of readdirSync(path.join(root, "src/components", groupDir), { withFileTypes: true })) {
    if (!name.isDirectory()) continue;
    entries[name.name] = `src/components/${groupDir}/${name.name}/index.ts`;
  }
  return entries;
}

const entry: Record<string, string> = {
  index: "src/index.ts",
  preset: "src/preset.ts",
  provider: "src/provider/index.ts",
  ...componentEntries("base"),
  ...componentEntries("docs"),
  ...componentEntries("landing"),
};

export default defineConfig({
  entry,
  format: ["esm", "cjs"],
  dts: true,
  sourcemap: true,
  clean: true,
  treeshake: true,
  splitting: false,
  tsconfig: "tsconfig.build.json",
  external: ["react", "react-dom", "@ark-ui/react", "@pandacss/dev"],
  esbuildOptions(options) {
    options.alias = {
      // Styled-system sub-paths — map explicitly to .mjs indexes
      // because esbuild does not look for index.mjs in directories by default.
      "@styled-system/css": `${styledSystem}/css/index.mjs`,
      "@styled-system/patterns": `${styledSystem}/patterns/index.mjs`,
      "@styled-system/tokens": `${styledSystem}/tokens/index.mjs`,
      "@styled-system/jsx": `${styledSystem}/jsx/index.mjs`,
      "@styled-system": styledSystem,
      "@": path.resolve(root, "src"),
    };
  },
});