Remove responsive values from recast components that have no breakpoi…

…nts defined (#67)

* Fix string literal variant extraction from recast components

.changeset/great-pots-cover.md

@@ -0,0 +1,6 @@
+---
+"@rpxl/recast": minor
+"@rpxl/recast-tailwind-plugin": patch
+---
+
+Remove responsive values from recast components that have no breakpoints defined

.changeset/shiny-chefs-fix.md

@@ -0,0 +1,5 @@
+---
+"@rpxl/recast-tailwind-plugin": patch
+---
+
+Fix string literal variant extraction from recast components

packages/lib/src/__tests__/recast.test.tsx

@@ -658,7 +658,7 @@ describe("recast function", () => {
     });
 
     it("should correctly type breakpoints", () => {
-      const Button = recast(BaseButton, {
+      const ButtonWithBreakpoints = recast(BaseButton, {
         base: "text-base",
         variants: {
           size: {
@@ -670,10 +670,26 @@ describe("recast function", () => {
       });
 
       // This should compile without errors
-      <Button size={{ default: "sm", md: "lg" }} />;
+      <ButtonWithBreakpoints size={{ default: "sm", md: "lg" }} />;
 
       // @ts-expect-error - xl breakpoint not specified in component definition
-      <Button size={{ default: "sm", xl: "lg" }} />;
+      <ButtonWithBreakpoints size={{ default: "sm", xl: "lg" }} />;
+
+      const ButtonWithoutBreakpoints = recast(BaseButton, {
+        base: "text-base",
+        variants: {
+          size: {
+            sm: "text-sm",
+            lg: "text-lg",
+          },
+        },
+      });
+
+      // This should compile without errors
+      <ButtonWithoutBreakpoints size="sm" />;
+
+      // @ts-expect-error - Responsive object not allowed when no breakpoints are specified
+      <ButtonWithoutBreakpoints size={{ default: "sm", md: "lg" }} />;
     });
   });
 });

packages/lib/src/recast.tsx

@@ -30,7 +30,7 @@ export function recast<
   P extends RecastProps<P>,
   V extends { [K in keyof V]: { [S in keyof V[K]]: string | string[] } },
   M extends { [K in keyof M]: string | string[] },
-  B extends keyof RecastBreakpoints = keyof RecastBreakpoints,
+  B extends keyof RecastBreakpoints | never = never,
 >(Component: React.ComponentType<P>, styles: RecastStyles<V, M, Pick<P, "rcx">, B>, mergeFn?: MergeFn) {
   type Props = Omit<P, keyof ExtractVariantProps<V, B> | keyof ExtractModifierProps<M>> &
     ExtractVariantProps<V, B> &

packages/lib/src/types.ts

@@ -193,7 +193,7 @@ export type RelaxedRecastStyleProps = {
 /**
  * Relaxed version of variant props for internal use.
  */
-export type RelaxedVariantProps<B extends string> = {
+export type RelaxedVariantProps<B extends string = never> = {
   [key: string]: ResponsiveValue<B, string>;
 };
 
@@ -215,7 +215,7 @@ export interface RecastBreakpoints {}
 export type Breakpoint = keyof RecastBreakpoints;
 
 /**
- * Represents a value that can be responsive (i.e., different for different breakpoints).
+ * Represents a value that can be responsive (i.e. tailwind breakpoints).
  */
 export type ResponsiveValue<B extends string = never, T = never> = B extends never
   ? T