react-polymorphic 1.0.0 → 1.0.1

package/README.md

@@ -12,11 +12,11 @@ A single component factory function for polymorphic React components. Built for
 import { createPolymorph } from 'react-polymorphic';
 
 const Button = createPolymorph<'button'>(({ as: Tag = 'button', ...rest }) => {
-	return <Tag {...rest} />
+  return <Tag {...rest} />
 })
 
 const App = () => {
-	return <Button as="a" href="/">Home</Button>
+  return <Button as="a" href="/">Home</Button>
 }
 ```
 
@@ -70,7 +70,7 @@ Polymorphic components let you keep one consistent API while swapping the render
   `InferPolymorphElement`, `InferPolymorphProps`, and `InferPolymorphConfig` for advanced typing workflows.
 
 - **TypeScript 7 Ready**  
-	Compatible with TypeScript 5.4+ and optimized for TypeScript 7.
+  Compatible with TypeScript 5.4+ and optimized for TypeScript 7.
 
 - **Built for React 19+**  
   Leverages React 19's handling of `ref`, eliminating `forwardRef` and convoluted type gymnastics.
@@ -96,23 +96,23 @@ Most polymorphic components are simple wrappers that combine custom props with i
 import { createPolymorph } from 'react-polymorphic';
 
 type Props = {
-	variant: 'primary' | 'secondary';
+  variant: 'primary' | 'secondary';
 }
 
 const Pane = createPolymorph<'div', Props>((props) => {
-	const { as: Tag = 'div', variant, className, ...rest } = props;
-	const variantClasses = variant === 'primary' ? 'bg-white' : 'bg-blue-50';
+  const { as: Tag = 'div', variant, className, ...rest } = props;
+  const variantClasses = variant === 'primary' ? 'bg-white' : 'bg-blue-50';
 
-	return <Tag className={`p-4 ${variantClasses} ${className}`} {...rest} />
+  return <Tag className={`p-4 ${variantClasses} ${className}`} {...rest} />
 })
 
 const App = () => {
-	return (
-		<>
-			<Pane as="section" variant="primary" aria-label="...">...</Pane>
-			<Pane as="aside" variant="secondary" aria-label="...">...</Pane>
-		</>
-	)
+  return (
+    <>
+      <Pane as="section" variant="primary" aria-label="...">...</Pane>
+      <Pane as="aside" variant="secondary" aria-label="...">...</Pane>
+    </>
+  )
 }
 ```
 
@@ -127,20 +127,20 @@ import { useRef } from 'react';
 import { createPolymorph } from 'react-polymorphic';
 
 const Component = createPolymorph<'div'>((props) => {
-	const { as: Tag = 'div', ...rest } = props;
-	return <Tag {...rest} />
+  const { as: Tag = 'div', ...rest } = props;
+  return <Tag {...rest} />
 })
 
 const App = () => {
-	const ref = useRef<HTMLDivElement>(null);
-	const aRef = useRef<HTMLAnchorElement>(null);
-
-	return (
-		<>
-			<Component ref={ref} />
-			<Component as="a" ref={aRef} />
-		</>
-	)
+  const ref = useRef<HTMLDivElement>(null);
+  const aRef = useRef<HTMLAnchorElement>(null);
+
+  return (
+    <>
+      <Component ref={ref} />
+      <Component as="a" ref={aRef} />
+    </>
+  )
 }
 ```
 
@@ -155,34 +155,34 @@ import { createPolymorph } from 'react-polymorphic';
 import type { PolymorphicConfig, Unset, Inherit } from 'react-polymorphic';
 
 type Props = {
-	loading: boolean;
+  loading: boolean;
 }
 
 type Config = PolymorphicConfig<'button', {
-	'aria-loading': Unset;
-	children: string;
-	href: string;
-	target?: '_blank';
-	type: Inherit;
+  'aria-loading': Unset;
+  children: string;
+  href: string;
+  target?: '_blank';
+  type: Inherit;
 }>;
 
 const Button = createPolymorph<'button', Props, Config>((props) => {
-	const { as: Tag = 'button', children, loading, ...rest } = props;
+  const { as: Tag = 'button', children, loading, ...rest } = props;
 
-	return (
-		<Tag aria-loading={loading} {...rest}>
-			{loading ? 'Loading...' : children}
-		</Tag>
-	)
+  return (
+    <Tag aria-loading={loading} {...rest}>
+      {loading ? 'Loading...' : children}
+    </Tag>
+  )
 })
 
 const App = () => {
-	return (
-		<>
-			<Button type="button">Calculate</Button>
-			<Button as="a" href="/">Back to home</Button>
-		</>
-	)
+  return (
+    <>
+      <Button type="button">Calculate</Button>
+      <Button as="a" href="/">Back to home</Button>
+    </>
+  )
 }
 ```
 
@@ -201,12 +201,12 @@ import { createPolymorph } from 'react-polymorphic';
 const OtherComponent = createPolymorph<'div'>(...);
 
 const Component = createPolymorph<'div'>((props) => {
-	const { as: Tag = 'div', ...rest } = props;
-	return <Tag {...rest} />
+  const { as: Tag = 'div', ...rest } = props;
+  return <Tag {...rest} />
 });
 
 const App = () => {
-	return <Component as={OtherComponent} root="section" />
+  return <Component as={OtherComponent} root="section" />
 }
 ```
 
@@ -219,9 +219,9 @@ You can extract generics from existing polymorphic components and reuse them whe
 ```tsx
 import { createPolymorph } from 'react-polymorphic';
 import type {
-	InferPolymorphElement,
-	InferPolymorphProps,
-	InferPolymorphConfig
+  InferPolymorphElement,
+  InferPolymorphProps,
+  InferPolymorphConfig
 } from 'react-polymorphic';
 import { TheirButton } from 'some-library';
 
@@ -237,8 +237,8 @@ type TheirConfig = InferPolymorphConfig<typeof TheirButton>;
 type Props = { ... }
 
 const OurButton = createPolymorph<typeof TheirButton, Props>((props) => {
-	const { as: Tag = TheirButton, ...rest } = props;
-	return <Tag {...rest} />
+  const { as: Tag = TheirButton, ...rest } = props;
+  return <Tag {...rest} />
 })
 ```
 
@@ -248,14 +248,14 @@ If swapping out the base would break core behavior, preserve the base and expose
 
 ```tsx
 const OurButton = createPolymorph<TheirElement, Props & TheirProps, TheirConfig>(
-	(props) => {
-		const { as = 'button', ...rest } = props;
-		return <TheirButton as={as} {...rest} />
-	}
+  (props) => {
+    const { as = 'button', ...rest } = props;
+    return <TheirButton as={as} {...rest} />
+  }
 )
 
 const App = () => {
-	return <OurButton as="a" />
+  return <OurButton as="a" />
 }
 ```
 

package/package.json

@@ -1,83 +1,80 @@
 {
-	"name": "react-polymorphic",
-	"version": "1.0.0",
-	"description": "Create polymorphic React 19+ components with strong TypeScript inference.",
-	"keywords": [
-		"react",
-		"typescript",
-		"polymorphic",
-		"component-library",
-		"design-system",
-		"as-prop",
-		"headless-ui",
-		"ui"
-	],
-	"author": "Dashice",
-	"license": "Apache-2.0",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/Dashice/react-polymorphic.git"
-	},
-	"homepage": "https://github.com/Dashice/react-polymorphic#readme",
-	"bugs": {
-		"url": "https://github.com/Dashice/react-polymorphic/issues"
-	},
-	"type": "module",
-	"types": "dist/index.d.ts",
-	"files": [
-		"dist",
-		"README.md",
-		"LICENSE",
-		"NOTICE"
-	],
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"import": "./dist/index.js"
-		}
-	},
-	"packageManager": "pnpm@10.20.0",
-	"engines": {
-		"node": ">=22.0.0"
-	},
-	"scripts": {
-		"clean": "rm -rf dist",
-		"build": "pnpm clean && tsup && tsc -p tsconfig.build.json",
-		"prepack": "pnpm build",
-		"format": "biome format . --write",
-		"format:check": "biome format .",
-		"lint": "biome lint .",
-		"lint:fix": "biome lint . --write",
-		"check": "biome check . --write",
-		"test": "vitest",
-		"test:run": "vitest run",
-		"typecheck": "tsc -p tsconfig.json",
-		"lint:staged": "lint-staged",
-		"changeset": "changeset",
-		"version:packages": "changeset version",
-		"release": "changeset publish",
-		"prepare": "husky"
-	},
-	"dependencies": {},
-	"devDependencies": {
-		"@biomejs/biome": "^2.4.16",
-		"@changesets/cli": "^2.31.1",
-		"@testing-library/dom": "^10.4.1",
-		"@testing-library/react": "^16.3.2",
-		"@types/node": "^24.0.0",
-		"@types/react": "^19.2.15",
-		"happy-dom": "^20.9.0",
-		"husky": "^9.1.7",
-		"lint-staged": "^17.2.0",
-		"react": "^19.2.7",
-		"react-dom": "^19.2.7",
-		"tsup": "^8.5.1",
-		"typescript": "^7.0.2",
-		"vitest": "^2.1.9"
-	},
-	"peerDependencies": {
-		"react": ">=19.0.0",
-		"react-dom": ">=19.0.0",
-		"typescript": ">=5.4.0"
-	}
-}
+  "name": "react-polymorphic",
+  "version": "1.0.1",
+  "description": "Create polymorphic React 19+ components with strong TypeScript inference.",
+  "keywords": [
+    "react",
+    "typescript",
+    "polymorphic",
+    "component-library",
+    "design-system",
+    "as-prop",
+    "headless-ui",
+    "ui"
+  ],
+  "author": "Dashice",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Dashice/react-polymorphic.git"
+  },
+  "homepage": "https://github.com/Dashice/react-polymorphic#readme",
+  "bugs": {
+    "url": "https://github.com/Dashice/react-polymorphic/issues"
+  },
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.5.6",
+    "@changesets/cli": "^2.31.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.2.18",
+    "happy-dom": "^20.11.1",
+    "husky": "^9.1.7",
+    "lint-staged": "^17.3.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tsup": "^8.5.1",
+    "typescript": "^7.0.2",
+    "vite": "^8.2.0",
+    "vitest": "^4.1.10"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "typescript": ">=5.4.0"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "pnpm clean && tsup && tsc -p tsconfig.build.json",
+    "format": "biome format . --write",
+    "format:check": "biome format .",
+    "lint": "biome lint .",
+    "lint:fix": "biome lint . --write",
+    "check": "biome check . --write",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "typecheck": "tsc -p tsconfig.json",
+    "lint:staged": "lint-staged",
+    "changeset": "changeset",
+    "version:packages": "changeset version",
+    "release": "changeset publish"
+  }
+}