feat: allow styled to accep baseClassName as second parameter

__tests__/styled/props.tsx

@@ -56,10 +56,7 @@ describe("Styled - Values Props", () => {
 });
 
 describe("Styled - Base Class Name", () => {
-  const StyledView = styled(View);
-  StyledView.defaultProps = {
-    baseClassName: "flex-row",
-  };
+  const StyledView = styled(View, "flex-row");
 
   test("can set base classNames", () => {
     const tree = render(
@@ -83,10 +80,9 @@ describe("Styled - Base Class Name", () => {
 });
 
 describe("Styled - Default props", () => {
-  const StyledText = styled(Text);
+  const StyledText = styled(Text, "p-4");
   StyledText.defaultProps = {
     accessibilityRole: "header",
-    baseClassName: "p-4",
   };
 
   test("can render with default props", () => {

src/styled.tsx

@@ -24,7 +24,7 @@ export interface StyledOptions<P> {
   props?: Array<keyof P & string>;
   spreadProps?: Array<keyof P & string>;
   classProps?: Array<keyof P & string>;
-  supportsClassName?: boolean;
+  baseClassName?: string;
 }
 
 type ForwardRef<T, P> = ForwardRefExoticComponent<
@@ -36,15 +36,35 @@ type InferRef<T> = T extends RefAttributes<infer R> | ClassAttributes<infer R>
   : unknown;
 
 /**
- * Normal usage
+ * Default
  */
 export function styled<T>(
-  Component: ComponentType<T>,
-  options?: StyledOptions<T> & { props?: undefined; spreadProps?: undefined }
+  Component: ComponentType<T>
 ): ForwardRef<InferRef<T>, StyledProps<T>>;
 
 /**
- * With either props or valueProps
+ * Base className
+ */
+export function styled<T>(
+  Component: ComponentType<T>,
+  baseClassName: string
+): ForwardRef<InferRef<T>, StyledProps<T>>;
+
+/**
+ * Base className w/ options
+ */
+export function styled<T, K extends keyof T & string>(
+  Component: ComponentType<T>,
+  baseClassName: string,
+  options: StyledOptions<T> & {
+    props?: Array<K>;
+    spreadProps?: Array<K>;
+    classProps?: Array<K>;
+  }
+): ForwardRef<InferRef<T>, StyledPropsWithKeys<T, K>>;
+
+/**
+ * Only options
  */
 export function styled<T, K extends keyof T & string>(
   Component: ComponentType<T>,
@@ -62,18 +82,26 @@ export function styled<
   T extends { style?: StyleProp<unknown>; children?: ReactNode | undefined }
 >(
   Component: ComponentType<T>,
-  {
+  styledBaseClassNameOrOptions?: string | StyledOptions<T>,
+  maybeOptions: StyledOptions<T> = {}
+) {
+  const {
     props: propsToTransform,
     spreadProps,
     classProps,
-    supportsClassName = false,
-  }: StyledOptions<T> = {}
-) {
+  } = typeof styledBaseClassNameOrOptions === "object"
+    ? styledBaseClassNameOrOptions
+    : maybeOptions;
+
+  const baseClassName =
+    typeof styledBaseClassNameOrOptions === "string"
+      ? styledBaseClassNameOrOptions
+      : maybeOptions?.baseClassName;
+
   function Styled(
     {
       className,
       tw: twClassName,
-      baseClassName,
       baseTw,
       style: styleProp,
       children: componentChildren,
@@ -117,7 +145,6 @@ export function styled<
       spreadProps,
       classProps,
       preview,
-      supportsClassName,
     });
 
     const children = childStyles

src/with-styled-props.ts

@@ -13,7 +13,6 @@ export interface WithStyledPropsOptions<S, T extends string> {
   spreadProps?: T[];
   classProps?: T[];
   preview: boolean;
-  supportsClassName: boolean;
 }
 
 export type WithStyledProps<S, T extends string> = Record<T, unknown> & {