feat: typos

Author: danielpetho

src/content/docs/components/text/variable-font-and-cursor.mdx

@@ -63,6 +63,10 @@ The component interpolates between `min` and `max` based on the cursor position
 
 For more information about variable fonts and how they work, please refer to the <Link href="/docs/components/text/variable-font-hover-by-letter#understanding-variable-fonts">Variable Font Hover By Letter</Link> documentation.
 
+## Notes
+
+Make sure the main container has enough space to hold the text at its full weight to avoid layout shifts. For example, you can use negative margins, or an invisible pseudo element.
+
 ## Props
 
 <Table>
@@ -76,10 +80,16 @@ For more information about variable fonts and how they work, please refer to the
   </TableHeader>
   <TableBody>
     <TableRow>
-      <TableCell>label<span className="text-red-500">*</span></TableCell>
-      <TableCell>`string`</TableCell>
+      <TableCell>children<span className="text-red-500">*</span></TableCell>
+      <TableCell>`React.ReactNode`</TableCell>
       <TableCell>-</TableCell>
-      <TableCell>The text content to display</TableCell>
+      <TableCell>The text content to display and animate</TableCell>
+    </TableRow>
+    <TableRow>
+      <TableCell>as</TableCell>
+      <TableCell>`ElementType`</TableCell>
+      <TableCell>`"span"`</TableCell>
+      <TableCell>HTML tag to render the component as</TableCell>
     </TableRow>
     <TableRow>
       <TableCell>fontVariationMapping<span className="text-red-500">*</span></TableCell>
@@ -99,12 +109,6 @@ For more information about variable fonts and how they work, please refer to the
       <TableCell>-</TableCell>
       <TableCell>Additional CSS classes for styling</TableCell>
     </TableRow>
-    <TableRow>
-      <TableCell>onClick</TableCell>
-      <TableCell>`() => void`</TableCell>
-      <TableCell>`undefined`</TableCell>
-      <TableCell>Click event handler for the text</TableCell>
-    </TableRow>
   </TableBody>
 </Table>
 

src/content/docs/components/text/variable-font-cursor-proximity.mdx

@@ -73,7 +73,7 @@ With the `falloff` prop, you can control the type of falloff. It can be either `
 
 - Interpolating on large number of letters simultaneously can be a bit slow, even when we're avoiding re-renders with state updates. If you're experienceing performance issues, try to limit the length of the text you're animating.
 
-- Make sure the main container have enough space to hold the text with full weight to avoid layout shifts. For example, you can use negative margins like in the 2nd example.
+- Make sure the main container has enough space to hold the text at its full weight to avoid layout shifts. For example, you can use negative margins like in the 2nd example.
 
 ## Credits
 

src/fancy/components/text/variable-font-and-cursor.tsx

@@ -1,8 +1,9 @@
 "use client"
 
-import React, { useCallback, useRef } from "react"
+import React, { ElementType, useCallback, useRef } from "react"
 import { motion, useAnimationFrame } from "motion/react"
 
+import { cn } from "@/lib/utils"
 import { useMousePositionRef } from "@/hooks/use-mouse-position-ref"
 
 /**
@@ -48,12 +49,18 @@ interface FontVariationMapping {
 /**
  * Props for the VariableFontAndCursor component.
  */
-interface TextProps {
+interface TextProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * The text content to display and animate.
    * Required prop with no default value.
    */
-  label: string
+  children: React.ReactNode
+
+  /**
+   * HTML Tag to render the component as.
+   * @default "span"
+   */
+  as?: ElementType
 
   /**
    * Mapping configuration that defines how cursor position affects font variation settings.
@@ -68,26 +75,14 @@ interface TextProps {
    * Required prop with no default value.
    */
   containerRef: React.RefObject<HTMLDivElement>
-
-  /**
-   * Additional CSS classes for styling the text element.
-   * @default undefined
-   */
-  className?: string
-
-  /**
-   * Click event handler for the text element.
-   * @default undefined
-   */
-  onClick?: () => void
 }
 
 const VariableFontAndCursor = ({
-  label,
+  children,
+  as = "span",
   fontVariationMapping,
   className,
   containerRef,
-  onClick,
   ...props
 }: TextProps) => {
   // Hook to track mouse position relative to the specified container
@@ -146,16 +141,18 @@ const VariableFontAndCursor = ({
     }
   })
 
+  // Custom motion component to render as the specified HTML tag
+  const MotionComponent = motion.create(as)
+
   return (
-    <motion.span
-      className={className}
-      data-text={label}
-      onClick={onClick}
+    <MotionComponent
+      className={cn(className)}
+      data-text={children}
       ref={spanRef}
       {...props}
     >
-      {label}
-    </motion.span>
+      <span className="inline-block">{children}</span>
+    </MotionComponent>
   )
 }
 

src/fancy/examples/text/variable-font-and-cursor-demo.tsx

@@ -18,14 +18,15 @@ export default function Preview() {
       {/* this is the important stuff */}
       <div className="w-full h-full items-center justify-center flex">
         <VariableFontAndCursor
-          label="fancy!"
           className="text-5xl sm:text-7xl md:text-9xl text-primary-orange"
           fontVariationMapping={{
             y: { name: "wght", min: 100, max: 900 },
             x: { name: "slnt", min: 0, max: -10 },
           }}
           containerRef={containerRef}
-        />
+        >
+          fancy!
+        </VariableFontAndCursor>
       </div>
 
       {/* this is just fluff for the demo */}