Change nested classes prop from rcx to cls (#69)

.changeset/good-bobcats-sin.md

@@ -0,0 +1,5 @@
+---
+"@rpxl/docs": patch
+---
+
+Improve recast tailwind docs

.changeset/silly-moons-rush.md

@@ -0,0 +1,5 @@
+---
+"@rpxl/recast": minor
+---
+
+Change nested classes prop from rcx to cls

packages/docs/src/components/ui/button-demo/button-demo.ts

@@ -59,7 +59,7 @@ export const Button = recast(ButtonPrimitive, {
     },
   },
   modifiers: {
-    pill: "rounded-full px-8",
+    pill: "!rounded-full !px-8",
     block: "w-full",
     floating: "shadow-lg",
   },

packages/docs/src/pages/advanced-usage.mdx

@@ -30,17 +30,17 @@ type Props = React.ComponentPropsWithoutRef<typeof RadixSliderPrimitive.Root> &
 const Slider = forwardRef<
   React.ElementRef<typeof RadixSliderPrimitive.Root>,
   Props
->(({ className, rcx, ...props }, ref) => {
+>(({ className, cls, ...props }, ref) => {
   return (
     <RadixSliderPrimitive.Root
       ref={ref}
-      className={cn(rcx?.root, className)}
+      className={cn(cls?.root, className)}
       {...props}
     >
-      <RadixSliderPrimitive.Track className={rcx?.track}>
-        <RadixSliderPrimitive.Range className={rcx?.range} />
+      <RadixSliderPrimitive.Track className={cls?.track}>
+        <RadixSliderPrimitive.Range className={cls?.range} />
       </RadixSliderPrimitive.Track>
-      <RadixSliderPrimitive.Thumb className={rcx?.thumb} />
+      <RadixSliderPrimitive.Thumb className={cls?.thumb} />
     </RadixSliderPrimitive.Root>
   );
 });
@@ -61,6 +61,26 @@ export const Slider = recast(SliderPrimitive, {
 });
 ```
 
+## TypeScript Integration
+
+Recast is designed to work seamlessly with TypeScript. When defining your
+component props, you can use the `RecastWithClassNameProps` type to ensure type
+safety for your nested class names:
+
+```jsx
+import { RecastWithClassNameProps } from "@rpxl/recast";
+
+type Props = YourComponentProps &
+  RecastWithClassNameProps<{
+    root: string;
+    childElement: string;
+    // ... other nested elements
+  }>;
+```
+
+This approach provides excellent TypeScript support, enabling autocompletion and
+type checking for your themed components.
+
 ## Wrapping a Recast Component
 
 Sometimes you might want to wrap a Recast component to customize its behavior.
@@ -110,32 +130,3 @@ ScrollArea.displayName = "ScrollArea";
 
 This approach allows you to create more intuitive APIs for your components while
 still leveraging Recast's theming capabilities.
-
-## Performance Considerations
-
-When working with complex nested components or wrapping Recast components, keep
-these performance tips in mind:
-
-1. Memoize child components when appropriate to prevent unnecessary re-renders.
-2. Use the `useMemo` hook for expensive computations within your components.
-3. Leverage Recast's conditional styling to avoid applying unnecessary classes.
-
-## TypeScript Integration
-
-Recast is designed to work seamlessly with TypeScript. When defining your
-component props, you can use the `RecastWithClassNameProps` type to ensure type
-safety for your nested class names:
-
-```jsx
-import { RecastWithClassNameProps } from "@rpxl/recast";
-
-type Props = YourComponentProps &
-  RecastWithClassNameProps<{
-    root: string;
-    childElement: string;
-    // ... other nested elements
-  }>;
-```
-
-This approach provides excellent TypeScript support, enabling autocompletion and
-type checking for your themed components.

packages/docs/src/pages/index.mdx

@@ -66,4 +66,4 @@ for the open-source contributions of the following projects:
   CSS and excellent developer experience.
 - [Tailwind Variants](https://www.tailwind-variants.org/) - For combining the
   power of Tailwind with a first-class variant API, offering features like
-  slots, responsive variants, and component composition [^1].
+  slots, responsive variants, and component composition.

packages/docs/src/pages/quick-start.mdx

@@ -19,7 +19,7 @@ npm install @rpxl/recast
 If you're using Tailwind CSS, you can also install the Recast Tailwind plugin:
 
 ```bash
-npm install @rpxl/recast-tailwind
+npm install @rpxl/recast-tailwind-plugin
 ```
 
 ## 2. Create a Component Primitive
@@ -49,8 +49,15 @@ Import the component primitive and wrap it with a theme layer using Recast:
 import { recast } from "@rpxl/recast";
 import { ButtonPrimitive } from "./ButtonPrimitive";
 
+// Create the Button component with Recast
 export const Button = recast(ButtonPrimitive, {
+  // Define the default values
+  defaults: {
+    variants: { variant: "primary", size: "md" },
+  },
+  // Define the base styles
   base: "inline-flex items-center justify-center rounded-md font-medium transition-colors",
+  // Define the variants
   variants: {
     variant: {
       primary: "bg-blue-500 text-white hover:bg-blue-600",
@@ -63,75 +70,17 @@ export const Button = recast(ButtonPrimitive, {
       lg: "px-6 py-3 text-lg",
     },
   },
+  // Define the modifiers
   modifiers: {
     fullWidth: "w-full",
   },
-  defaults: {
-    variants: { variant: "primary", size: "md" },
-  },
 });
 ```
 
 > **Note**: The example above uses Tailwind CSS classes, but Recast works with
 > any CSS classes or CSS-in-JS solution.
 
-## 4. Tailwind CSS Integration (Optional)
-
-If you're using Tailwind CSS, add the Recast plugin to your
-`tailwind.config.js`:
-
-```js
-module.exports = {
-  // ...other config
-  plugins: [require("@rpxl/recast-tailwind")],
-};
-```
-
-This step is only necessary if you're using Tailwind CSS and want to leverage
-the Recast Tailwind plugin features.
-
-### What the Tailwind CSS Integration Provides:
-
-1. **Automatic Safelist Generation**: The plugin automatically generates a
-   safelist for your Recast components, ensuring that all Tailwind classes used
-   in your Recast components are included in your production build, even if
-   they're not found in your templates.
-
-2. **Responsive Styling**: The plugin enables responsive styling for Recast
-   components using Tailwind's responsive syntax. For example:
-
-   ```jsx
-   <Button size={{ default: "sm", md: "lg" }}>Responsive Button</Button>
-   ```
-
-   This button will be small by default and large on medium-sized screens and
-   above. The plugin will generate classes like:
-
-   ```html
-   <button class="px-3 py-2 text-sm md:px-6 md:py-3 md:text-lg">
-     Responsive Button
-   </button>
-   ```
-
-   <Callout type="info">
-     Here, `px-3 py-2 text-sm` are applied by default, and `px-6 py-3 text-lg`
-     are applied with the `md:` prefix, activating them at the medium breakpoint
-     and above.
-   </Callout>
-
-3. **Improved Performance**: The plugin optimizes the generation of Tailwind
-   classes for Recast components, potentially improving build times and reducing
-   CSS file size.
-
-4. **Better Integration**: It ensures that Recast and Tailwind work seamlessly
-   together, allowing you to leverage the full power of both libraries in your
-   project.
-
-This integration enhances the developer experience when using Recast with
-Tailwind CSS, providing more flexibility and efficiency in styling your
-components.
-
-## 5. Usage
+## 4. Usage
 
 Now you can use your themed Button component with various props:
 
@@ -147,7 +96,7 @@ function App() {
       </Button>
       <Button variant="outline" fullWidth>
         Full Width Outline Button
-      </Button>{" "}
+      </Button>
     </div>
   );
 }
@@ -273,4 +222,3 @@ to adjust styles without modifying the core component logic.
 
   </Tabs.Tab>
 </Tabs>
-````