react-slot-utils 0.0.1 → 1.0.0

package/AGENTS.md

@@ -0,0 +1,163 @@
+# AGENTS.md
+
+Agent guide for `react-slot-utils`.
+This is a TypeScript + React utility library for slot composition and prop merging.
+
+## Instruction files (Cursor/Copilot)
+
+Checked paths:
+- `.cursorrules`: not found
+- `.cursor/rules/`: not found
+- `.github/copilot-instructions.md`: not found
+
+If these files are added later, they override this guide.
+
+## Project snapshot
+
+- Runtime/package manager: Bun (`bun.lock` exists)
+- Module mode: ESM (`"type": "module"`)
+- Language: TypeScript + TSX
+- Lint/format: Biome (`biome.json`)
+- Build tool: tsdown (`tsdown.config.ts`)
+- TS config: `tsconfig.json` (strict)
+- Public entry: `src/index.ts`
+- Output: `dist/`
+
+## Setup and baseline commands
+
+- Install deps: `bun install`
+- Typecheck: `bun run typecheck`
+- Lint/format check: `bun run check`
+- Lint/format with autofix: `bun run check:write`
+- Full build: `bun run build`
+
+## Build/lint/test command reference
+
+From `package.json` scripts:
+- `bun run typecheck` -> `tsc --noEmit`
+- `bun run check` -> `biome check`
+- `bun run check:write` -> `biome check --write`
+- `bun run build` -> `bun run typecheck && bun run check:write && tsdown`
+- `bun run prepublishOnly` -> `bun run build`
+
+Behavior notes:
+- `bun run build` is mutating because it runs `check:write`.
+- During iteration, use `bun run check` when you want non-mutating validation.
+
+## Single-file and single-test commands
+
+Current repo state:
+- No test files found.
+- No `test` script in `package.json`.
+
+When tests are introduced with Bun:
+- Run all tests: `bun test`
+- Run one test file: `bun test ./path/to/file.test.ts`
+- Run by path substring: `bun test utils`
+- Run one case: use `test.only(...)` or `describe.only(...)`
+
+Single-file commands available today:
+- `biome check src/path/to/file.ts`
+- `biome check --write src/path/to/file.ts`
+- `biome lint --write src/path/to/file.ts`
+- `biome format --write src/path/to/file.ts`
+
+## Repository structure and exports
+
+- Keep public API wired through `src/index.ts`.
+- Prefer named exports.
+- Current barrel exports:
+  - `./slot`
+  - `./slot/utils`
+  - `./utils/classname`
+  - `./utils/common`
+  - `./utils/prop`
+
+## Formatting and imports
+
+From `biome.json`:
+- Formatter enabled
+- Indent style: spaces (2-space indentation used in source)
+- JS/TS quote style: single quotes
+- JSX quote style: single quotes
+- Linter enabled with recommended rules
+- `correctness.noUnusedImports` is `error`
+- Organize imports action is on
+
+Agent rules:
+- Remove unused imports immediately.
+- Let Biome manage import organization/order.
+- Do not hand-format against Biome output.
+
+## TypeScript conventions
+
+From `tsconfig.json`:
+- `strict: true`
+- `noUncheckedIndexedAccess: true`
+- `moduleResolution: bundler`
+- `verbatimModuleSyntax: true`
+- `jsx: react-jsx`
+
+Type safety rules:
+- Use `import type` for type-only imports.
+- Keep runtime imports separate when practical.
+- Prefer `unknown` + type guards over broad casts.
+- Avoid `as any`, `@ts-ignore`, and `@ts-expect-error`.
+- Use explicit generics where helper typing is non-trivial.
+
+## Naming conventions
+
+Observed in `src/`:
+- Components/interfaces: PascalCase (`Slot`, `Slottable`, `SlotProps`)
+- Functions/utilities: camelCase (`flattenChildren`, `mergeProps`)
+- Predicates/type guards: `is*` (`isRef`, `isStyleObject`, `isSlottable`)
+- Higher-order helpers: `with*` (`withDefaultProps`, `withDisplayName`)
+- Type aliases: descriptive PascalCase (`ClassNameDefaultize`)
+
+## React and utility behavior
+
+- Use function components; no class components are present.
+- Handle `children` defensively:
+  - flatten fragments before slot resolution
+  - validate with `isValidElement`
+  - return `null` for unsupported structures
+- Keep prop-merge semantics stable:
+  - compose handlers child-first, then slot handler unless default prevented
+  - shallow-merge `style`
+  - merge class names via `cn` (`classnames`)
+
+## Error handling expectations
+
+- Current source avoids explicit `try/catch` and `throw`.
+- Prefer guard clauses and deterministic returns.
+- Keep utilities side-effect-light (no noisy logging in shared helpers).
+- Preserve existing null-safe behavior for invalid child shapes.
+
+## Build configuration details
+
+From `tsdown.config.ts`:
+- `entry: 'src/index.ts'`
+- `target: 'ES2024'`
+- `format: 'esm'`
+- `dts: true`
+- `minify: true`
+- Externalized deps: `react`, `classnames`
+
+If API surface changes:
+- Update exports in `src/index.ts`.
+- Run `bun run build` to validate JS output and declarations.
+
+## Agent completion checklist
+
+Before handoff/PR:
+1. Keep changes focused (no opportunistic refactors).
+2. Run `bun run typecheck`.
+3. Run `bun run check`.
+4. Run `bun run build` for release-impacting changes.
+5. Confirm no unused imports and no export-surface regressions.
+
+## Test strategy note
+
+- No test harness is currently configured in-repo.
+- If adding tests, use Bun-native `*.test.ts` / `*.spec.ts`.
+- Add a `test` script to `package.json` in the same PR when tests are introduced.

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2026 Taeyeong Kim
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,15 +1,159 @@
 # react-slot-utils
 
-To install dependencies:
+Modern, next-gen React utilities for composing slots and props.
+Built for headless and compound component patterns with predictable prop merging.
+
+[![npm version](https://img.shields.io/npm/v/react-slot-utils.svg)](https://www.npmjs.com/package/react-slot-utils)
+[![license](https://img.shields.io/npm/l/react-slot-utils.svg)](https://github.com/tyeongkim/react-slot-utils/blob/main/LICENSE)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/react-slot-utils)](https://bundlephobia.com/package/react-slot-utils)
+
+## Motivation
+
+React components often need to support custom rendering of their internal elements. While passing a `component` prop or using a render prop works, it often leads to complex prop drilling and breaks the natural JSX structure.
+
+The slot pattern allows you to pass a child element that "merges" with the component's internal element. This provides a clean API for users to customize the underlying DOM element or component while preserving the behavior and styling provided by the parent. This library provides the foundational utilities to implement this pattern reliably.
+
+## Features
+
+- **Predictable Prop Merging**: Intelligently merges class names, styles, and event handlers.
+- **Ref Composition**: Automatically composes multiple refs into a single callback ref.
+- **Slottable Support**: Allows wrapping specific parts of children to be used as the slot target.
+- **Higher-Order Components**: Utilities for setting default props and class names.
+- **Type Safe**: Built with TypeScript for excellent developer experience.
+
+## Install
 
 ```bash
-bun install
+bun add react-slot-utils
+# or
+npm install react-slot-utils
 ```
 
-To run:
+## Quick Start
 
-```bash
-bun run src/index.ts
+### Basic Slot Usage
+
+```tsx
+import { Slot } from 'react-slot-utils';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  asChild?: boolean;
+}
+
+function Button({ asChild, ...props }: ButtonProps) {
+  const Component = asChild ? Slot : 'button';
+  return <Component {...props} className="btn-base" />;
+}
+
+// Usage: renders as an <a> tag but with "btn-base" class and button behaviors
+export const App = () => (
+  <Button asChild>
+    <a href="/home">Home</a>
+  </Button>
+);
+```
+
+### Using Slottable
+
+```tsx
+import { Slot, Slottable } from 'react-slot-utils';
+
+function Card({ children, ...props }) {
+  return (
+    <Slot {...props}>
+      <div className="card-wrapper">
+        <Slottable>{children}</Slottable>
+        <span className="decoration">★</span>
+      </div>
+    </Slot>
+  );
+}
+```
+
+## API Reference
+
+### Components
+
+#### `Slot`
+A component that renders its child and merges its own props onto that child.
+- If a `Slottable` child is found, it uses the `Slottable`'s children as the primary element.
+- Merges `className` using `classnames`.
+- Merges `style` objects (shallow merge).
+- Composes event handlers (child handler runs first).
+- Composes `ref`s.
+
+```tsx
+interface SlotProps extends HTMLAttributes<HTMLElement>, PropsWithChildren {
+  ref?: Ref<HTMLElement>;
+}
 ```
 
-This project was created using `bun init` in bun v1.3.8. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.
+#### `Slottable`
+A utility component used inside `Slot` to mark which part of the children should be treated as the element to be cloned.
+
+### Prop Utilities
+
+#### `mergeProps(parentProps, childProps)`
+Merges two sets of props with specific logic:
+- **Event Handlers**: Both handlers are called. The child handler executes first. If the child handler calls `event.preventDefault()`, the slot handler is not called.
+- **Styles**: Shallow merges style objects. Slot styles are spread first, child styles override.
+- **ClassNames**: Merges strings using the `cn` utility.
+- **Other Props**: Child props override slot props.
+
+#### `withDefaultProps(Component, defaultProps)`
+A HOC that returns a new component with the specified default props applied.
+```tsx
+function withDefaultProps<P extends object, K extends keyof P>(
+  Component: ComponentType<Pick<P, K> & Omit<P, K>>,
+  defaultProps: Pick<P, K>,
+): FC<Omit<P, K>>
+```
+
+#### `withGenericDefaultProps(Component, defaultProps)`
+A version of `withDefaultProps` for components with complex generic types.
+
+#### `renderWithAdditionalProps(element, additionalProps)`
+Renders a React element with additional props merged in.
+
+### ClassName Utilities
+
+#### `withDefaultClassNames(Component, defaultClassNames)`
+A HOC that prepends default class names to the component's `className` prop.
+```tsx
+function withDefaultClassNames<P extends { className?: string }>(
+  Component: ComponentType<P>,
+  defaultClassNames: string,
+): FC<ClassNameDefaultize<P>>
+```
+
+#### `cn(...inputs)`
+A re-export of the `classnames` utility for conditional class merging.
+
+### Common Utilities
+
+#### `withDisplayName(Component, name)`
+Sets the `displayName` of a component and returns it.
+
+### Slot Utilities
+
+#### `composeRefs(...refs)`
+Composes multiple React refs (function or object) into a single callback ref.
+
+#### `flattenChildren(children)`
+Flattens React fragments and nested arrays into a flat array of `ReactNode`.
+
+#### `isSlottable(child)`
+Type guard to check if a child is a `Slottable` component.
+
+#### `isRef(value)`
+Type guard to check if a value is a React `Ref`.
+
+#### `isStyleObject(value)`
+Type guard to check if a value is a `CSSProperties` object.
+
+#### `isEventHandler(propName)`
+Checks if a prop name starts with `on` followed by an uppercase letter.
+
+## License
+
+MIT © [Taeyeong Kim](https://github.com/tyeongkim)

package/biome.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.3.14/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": true
+  },
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "noUnusedImports": "error"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "jsxQuoteStyle": "single"
+    }
+  }
+}

package/package.json

@@ -1,12 +1,53 @@
 {
   "name": "react-slot-utils",
-  "version": "0.0.1",
-  "module": "src/index.ts",
+  "version": "1.0.0",
+  "description": "Modern, next-gen React utilities for composing slots and props",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tyeongkim/react-slot-utils.git"
+  },
+  "keywords": [
+    "react",
+    "slot",
+    "slots",
+    "props",
+    "prop-composition",
+    "headless",
+    "compound-components",
+    "hoc",
+    "ui-architecture",
+    "design-system",
+    "next-gen"
+  ],
   "type": "module",
-  "devDependencies": {
-    "@types/bun": "latest"
+  "scripts": {
+    "build": "bun run typecheck && bun run check:write && tsdown",
+    "check": "biome check",
+    "check:write": "biome check --write",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "bun run build"
   },
   "peerDependencies": {
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "typescript": "^5"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.14",
+    "@types/bun": "latest",
+    "@types/react": "^19.2.13",
+    "tsdown": "^0.20.3"
+  },
+  "author": {
+    "name": "Taeyeong Kim",
+    "email": "contact@tyeongk.im",
+    "url": "https://github.com/tyeongkim"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
   }
-}
+}

package/src/index.ts

@@ -1 +1,6 @@
-console.log("Hello via Bun!");
+export * from './slot';
+export * from './slot/utils';
+
+export * from './utils/classname';
+export * from './utils/common';
+export * from './utils/prop';

package/src/slot/index.tsx

@@ -0,0 +1,76 @@
+import type { HTMLAttributes, PropsWithChildren, ReactNode, Ref } from 'react';
+import { Children, cloneElement, isValidElement } from 'react';
+import { mergeProps } from '../utils/prop';
+import { composeRefs, flattenChildren, isRef, isSlottable } from './utils';
+
+export interface SlotProps
+  extends HTMLAttributes<HTMLElement>,
+    PropsWithChildren {
+  ref?: Ref<HTMLElement>;
+}
+
+export function Slottable(props: PropsWithChildren) {
+  const { children } = props;
+
+  return children ?? null;
+}
+
+export function Slot(props: SlotProps) {
+  const { children, ref: slotRef, ...slotProps } = props;
+  const childrenArray = flattenChildren(children);
+  const slottable = childrenArray.find(isSlottable);
+
+  if (slottable) {
+    const newElement = slottable.props.children;
+    const newChildren = childrenArray.map((child) => {
+      if (child !== slottable) {
+        return child;
+      }
+
+      if (Children.count(newElement) > 1) {
+        return Children.only(null);
+      }
+
+      return isValidElement<PropsWithChildren>(newElement)
+        ? newElement.props.children
+        : null;
+    });
+
+    if (isValidElement(newElement)) {
+      return (
+        <SlotClone ref={slotRef} {...slotProps}>
+          {cloneElement(newElement, undefined, newChildren)}
+        </SlotClone>
+      );
+    }
+
+    return null;
+  }
+
+  return (
+    <SlotClone ref={slotRef} {...slotProps}>
+      {children}
+    </SlotClone>
+  );
+}
+
+interface SlotCloneProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  ref?: Ref<HTMLElement>;
+}
+
+function SlotClone(props: SlotCloneProps) {
+  const { children, ref: slotRef, ...slotProps } = props;
+
+  if (isValidElement<Record<string, unknown>>(children)) {
+    const childRef = isRef<HTMLElement>(children.props.ref)
+      ? children.props.ref
+      : undefined;
+    const mergedProps = mergeProps(slotProps, children.props);
+    const composedRef = slotRef ? composeRefs(slotRef, childRef) : childRef;
+
+    return cloneElement(children, { ...mergedProps, ref: composedRef });
+  }
+
+  return Children.count(children) > 1 ? Children.only(null) : null;
+}

package/src/slot/utils.ts

@@ -0,0 +1,83 @@
+import {
+  Children,
+  type CSSProperties,
+  Fragment,
+  isValidElement,
+  type PropsWithChildren,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+  type RefObject,
+} from 'react';
+import { Slottable } from '.';
+
+export function isSlottable(
+  child: ReactNode,
+): child is ReactElement<PropsWithChildren> {
+  return isValidElement(child) && child.type === Slottable;
+}
+
+export function flattenChildren(children: ReactNode): Array<ReactNode> {
+  const result: Array<ReactNode> = [];
+
+  for (const child of Children.toArray(children)) {
+    if (isFragment(child)) {
+      result.push(...flattenChildren(child.props.children));
+      continue;
+    }
+    result.push(child);
+  }
+
+  return result;
+}
+
+export function composeRefs<T>(...refs: Array<Ref<T> | undefined>) {
+  return (node: T | null) => {
+    for (const ref of refs) {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (isRefObject<T>(ref)) {
+        ref.current = node;
+      }
+    }
+  };
+}
+
+export function isEventHandler(propName: string) {
+  return /^on[A-Z]/.test(propName);
+}
+
+export function isEventHandlerValue(
+  value: unknown,
+): value is (...args: Array<unknown>) => void {
+  return typeof value === 'function';
+}
+
+export function isRef<T>(value: unknown): value is Ref<T> {
+  return (
+    typeof value === 'function' ||
+    (typeof value === 'object' && value !== null && 'current' in value)
+  );
+}
+
+export function isStyleObject(value: unknown): value is CSSProperties {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+export function isDefaultPrevented(event: unknown) {
+  if (!event || typeof event !== 'object') {
+    return false;
+  }
+
+  return Reflect.get(event, 'defaultPrevented') === true;
+}
+
+function isFragment(
+  child: ReactNode,
+): child is ReactElement<PropsWithChildren> {
+  return isValidElement(child) && child.type === Fragment;
+}
+
+function isRefObject<T>(ref: unknown): ref is RefObject<T | null> {
+  return typeof ref === 'object' && ref !== null && 'current' in ref;
+}

package/src/utils/classname.tsx

@@ -0,0 +1,26 @@
+import type { ComponentType, FC } from 'react';
+import { cn } from './common';
+
+type ClassNameDefaultize<P extends { className?: string }> = Omit<
+  P,
+  'className'
+> & { className?: string };
+
+export function withDefaultClassNames<P extends { className?: string }>(
+  Component: ComponentType<P>,
+  defaultClassNames: string,
+): FC<ClassNameDefaultize<P>> {
+  type Props = ClassNameDefaultize<P>;
+
+  const Wrapped: FC<Props> = ({ className, ...restProps }) => {
+    const mergedClassName = className
+      ? cn(defaultClassNames, className)
+      : defaultClassNames;
+
+    return <Component {...(restProps as P)} className={mergedClassName} />;
+  };
+
+  Wrapped.displayName = `withDefaultClassNames<${Component.displayName || 'Unknown'}>`;
+
+  return Wrapped;
+}

package/src/utils/common.ts

@@ -0,0 +1,12 @@
+import type { ComponentType } from 'react';
+
+export { default as cn } from 'classnames';
+
+export function withDisplayName<C extends ComponentType<never>>(
+  Component: C,
+  name: string,
+): C {
+  Object.assign(Component, { displayName: name });
+
+  return Component;
+}

package/src/utils/prop.tsx

@@ -0,0 +1,123 @@
+import {
+  type ComponentType,
+  cloneElement,
+  type FC,
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import {
+  isDefaultPrevented,
+  isEventHandler,
+  isEventHandlerValue,
+  isStyleObject,
+} from '../slot/utils';
+import { cn } from './common';
+
+export function withDefaultProps<P extends object, K extends keyof P>(
+  Component: ComponentType<Pick<P, K> & Omit<P, K>>,
+  defaultProps: Pick<P, K>,
+): FC<Omit<P, K>> {
+  type Props = Omit<P, K>;
+
+  const Wrapped: FC<Props> = (props) => {
+    const propsWithDefaults = { ...defaultProps, ...props };
+    return <Component {...propsWithDefaults} />;
+  };
+
+  Wrapped.displayName = Component.displayName || 'Unknown';
+
+  return Wrapped;
+}
+
+export function withGenericDefaultProps<R extends CallableFunction>(
+  Component: CallableFunction,
+  defaultProps: Record<string, unknown>,
+): R;
+export function withGenericDefaultProps(
+  Component: CallableFunction,
+  defaultProps: Record<string, unknown>,
+) {
+  const Wrapped = (props: Record<string, unknown>) => {
+    const propsWithDefaults = { ...defaultProps, ...props };
+    return Reflect.apply(Component, undefined, [propsWithDefaults]);
+  };
+
+  Reflect.set(
+    Wrapped,
+    'displayName',
+    Reflect.get(Component, 'displayName') ?? 'Unknown',
+  );
+
+  return Wrapped;
+}
+
+export function renderWithAdditionalProps<P>(
+  element: ReactElement<P> | undefined,
+  additionalProps: Partial<P>,
+): ReactNode {
+  if (!element) {
+    return null;
+  }
+
+  return cloneElement(element, additionalProps);
+}
+
+export function mergeProps(
+  parentProps: HTMLAttributes<HTMLElement>,
+  childProps: Record<string, unknown>,
+) {
+  const overrideProps: Record<string, unknown> = { ...childProps };
+
+  for (const propName of Object.keys(childProps)) {
+    const slotValue = Reflect.get(parentProps, propName);
+    const childValue = Reflect.get(childProps, propName);
+
+    if (isEventHandler(propName)) {
+      const slotHandler = isEventHandlerValue(slotValue)
+        ? slotValue
+        : undefined;
+      const childHandler = isEventHandlerValue(childValue)
+        ? childValue
+        : undefined;
+
+      if (!slotHandler) {
+        continue;
+      }
+      if (!childHandler) {
+        overrideProps[propName] = slotHandler;
+        continue;
+      }
+
+      overrideProps[propName] = (...args: Array<unknown>) => {
+        childHandler(...args);
+        if (!isDefaultPrevented(args[0])) {
+          slotHandler(...args);
+        }
+      };
+      continue;
+    }
+
+    if (propName === 'style') {
+      const slotStyle = isStyleObject(slotValue) ? slotValue : undefined;
+      const childStyle = isStyleObject(childValue) ? childValue : undefined;
+
+      overrideProps[propName] = {
+        ...slotStyle,
+        ...childStyle,
+      };
+      continue;
+    }
+
+    if (propName === 'className') {
+      const slotClassName =
+        typeof slotValue === 'string' ? slotValue : undefined;
+      const childClassName =
+        typeof childValue === 'string' ? childValue : undefined;
+
+      overrideProps[propName] = cn(slotClassName, childClassName);
+    }
+  }
+
+  return { ...parentProps, ...overrideProps };
+}

package/tsdown.config.ts

@@ -0,0 +1,16 @@
+import { esmExternalRequirePlugin } from 'rolldown/plugins';
+import { defineConfig } from 'tsdown';
+
+export default defineConfig({
+  entry: 'src/index.ts',
+  platform: 'neutral',
+  target: 'ES2024',
+  outDir: 'dist',
+  format: 'esm',
+  clean: true,
+  minify: true,
+  dts: true,
+  exports: true,
+  inlineOnly: false,
+  plugins: [esmExternalRequirePlugin({ external: ['react', 'classnames'] })],
+});