docs: update FocusRing

There's now a props section, containing the new `type` prop that was implemented in commit e1ca355.

A demo showing the difference between the two types has also been added in the usage section.

Author: pedroanuda

apps/docs/content/components/focus-ring.md

@@ -5,3 +5,11 @@ title: Focus Ring
 ## Usage
 
 <usage></usage>
+
+## Props
+| Name      | Type                                              | Description                                                                               | Default   |
+| --------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------- | --------- |
+| type      | `outward` `inward`                                | The way the focus ring is animated and positioned.                                        | `outward` |
+| as        | `keyof HTMLElementTagNameMap` `React.ElementType` | Allows for more flexibility when supporting different elements that can act as a FocusRing. | `span`    |
+| style     | `React.CSSProperties`                             | —                                                                                         | —         |
+| className | `string`                                          | —                                                                                         | —         |

apps/docs/src/usages/focus-ring.tsx

@@ -1,11 +1,28 @@
 import { FocusRing, useFocusRing } from 'actify'
+import React from 'react'
 
-export default () => {
+function FocusRingInput({ inward }: {inward?: boolean}) {
   const { isFocused, focusProps } = useFocusRing()
+
   return (
     <span className="relative">
-      <input {...focusProps} className="outline-none text-primary" />
-      {isFocused && <FocusRing />}
+      <input {...focusProps} className="outline-none text-primary"/>
+      {isFocused && <FocusRing type={inward ? 'inward' : 'outward'} />}
     </span>
+  );
+}
+
+export default () => {
+  return (
+    <div className="flex items-center gap-4">
+      <div className='relative mb-2'>
+        <h6>type outward</h6>
+        <FocusRingInput />
+      </div>
+      <div className='relative mb-2'>
+        <h6>type inward</h6>
+        <FocusRingInput inward />
+      </div>
+    </div>
   )
 }