From b70d231a553577f0fd1b57c4da2fde50a34de7d7 Mon Sep 17 00:00:00 2001
From: Mark Lawlor <mwlawlor@gmail.com>
Date: Thu, 2 Oct 2025 00:20:15 +1000
Subject: [PATCH] fix: make styled mapping optional

---
 src/native/api.tsx | 8 ++++++--
 src/web/api.tsx    | 7 ++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/native/api.tsx b/src/native/api.tsx
index 26b6998..3d68a3a 100644
--- a/src/native/api.tsx
+++ b/src/native/api.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable  */
-import { useContext, useState } from "react";
+import { useContext, useState, type ComponentType } from "react";
 import { Appearance } from "react-native";
 
 import type { StyleDescriptor } from "react-native-css/compiler";
@@ -30,6 +30,10 @@ export {
 
 export { useNativeCss };
 
+const defaultMapping: StyledConfiguration<ComponentType<{ style: unknown }>> = {
+  className: "style",
+};
+
 /**
  * Generates a new Higher-Order component the wraps the base component and applies the styles.
  * This is added to the `interopComponents` map so that it can be used in the `wrapJSX` function
@@ -41,7 +45,7 @@ export const styled = <
   const M extends StyledConfiguration<C>,
 >(
   baseComponent: C,
-  mapping: M,
+  mapping: M = defaultMapping as M,
   options?: StyledOptions,
 ) => {
   let component: any;
diff --git a/src/web/api.tsx b/src/web/api.tsx
index 5398813..fe1e477 100644
--- a/src/web/api.tsx
+++ b/src/web/api.tsx
@@ -2,6 +2,7 @@ import {
   createElement,
   useMemo,
   type ComponentPropsWithRef,
+  type ComponentType,
   type PropsWithChildren,
 } from "react";
 import { Appearance } from "react-native";
@@ -17,12 +18,16 @@ import type {
 import type { ReactComponent } from "../runtime.types";
 import { assignStyle } from "./assign-style";
 
+const defaultMapping: StyledConfiguration<ComponentType<{ style: unknown }>> = {
+  className: "style",
+};
+
 export const styled = <
   const C extends ReactComponent,
   const M extends StyledConfiguration<C>,
 >(
   baseComponent: C,
-  mapping: M,
+  mapping: M = defaultMapping as M,
   _options?: StyledOptions,
 ) => {
   return (props: StyledProps<ComponentPropsWithRef<C>, M>) => {