From 8b4ee65e4a2e2c1b54b1d23f4c404e87a06b23aa Mon Sep 17 00:00:00 2001
From: "Irsyad A. Panjaitan" <irsyad@parsinta.com>
Date: Tue, 20 Aug 2024 23:49:27 +0700
Subject: [PATCH] mib

---
 components/doc-how.tsx                        | 65 +++++++++++++++++--
 components/ui/tabs.tsx                        |  2 +-
 .../docs/components/navigation/tabs.mdx       |  4 +-
 3 files changed, 64 insertions(+), 7 deletions(-)

diff --git a/components/doc-how.tsx b/components/doc-how.tsx
index 552cdb03a..5c793398c 100644
--- a/components/doc-how.tsx
+++ b/components/doc-how.tsx
@@ -6,7 +6,11 @@ import { previews } from "@/components/docs/generated/previews"
 import jsonPreviews from "@/components/docs/generated/previews.json"
 import { Code } from "@/components/docs/rehype/code"
 import { cn } from "@/resources/lib/utils"
-import { Loader, Tabs } from "ui"
+import { LayoutGroup, motion } from "framer-motion"
+import { Tab as TabPrimitive, TabProps } from "react-aria-components"
+import { twJoin } from "tailwind-merge"
+import { tv } from "tailwind-variants"
+import { cr, Loader, Tabs } from "ui"
 
 interface HowProps extends React.HTMLAttributes<HTMLDivElement> {
   toUse: string
@@ -35,13 +39,16 @@ export function DocHow({
   let codeString = jsonPreviews[toUse].raw ?? ""
 
   codeString = codeString.replace(/function\s+\w+\s*\(/g, "function App(")
+  const id = React.useId()
   return (
     <div className={cn("not-prose relative my-4", className)} {...props}>
       <Tabs aria-label="Packages">
-        <Tabs.List>
-          <Tabs.Tab id="preview">Preview</Tabs.Tab>
-          <Tabs.Tab id="code">Code</Tabs.Tab>
-        </Tabs.List>
+        <LayoutGroup id={id}>
+          <Tabs.List>
+            <Tab id="preview">Preview</Tab>
+            <Tab id="code">Code</Tab>
+          </Tabs.List>
+        </LayoutGroup>
         <Tabs.Panel className="w-full" id="preview">
           <div
             className={cn(
@@ -75,3 +82,51 @@ export function DocHow({
     </div>
   )
 }
+
+const tabStyles = tv({
+  base: [
+    "relative flex whitespace-nowrap cursor-default items-center rounded-full text-sm font-medium outline-none transition forced-color-adjust-none hover:text-fg [&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:mr-2",
+    "group-orientation-vertical:w-full group-orientation-vertical:py-0 group-orientation-vertical:pl-4 group-orientation-vertical:pr-2",
+    "group-orientation-horizontal:pb-3"
+  ],
+  variants: {
+    isSelected: {
+      false: "text-muted-fg",
+      true: "text-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]"
+    },
+    isFocused: { false: "ring-0", true: "text-fg" },
+    isDisabled: {
+      true: "text-muted-fg/50 forced-colors:text-[GrayText] forced-colors:selected:bg-[GrayText] forced-colors:selected:text-[HighlightText]"
+    }
+  }
+})
+
+const Tab = ({ children, ...props }: TabProps) => {
+  return (
+    <TabPrimitive
+      {...props}
+      className={cr(props.className, (_className, renderProps) =>
+        tabStyles({
+          ...renderProps,
+          className: twJoin("href" in props && "cursor-pointer", _className)
+        })
+      )}
+    >
+      {({ isSelected }) => (
+        <>
+          {children}
+          {isSelected && (
+            <motion.span
+              layoutId="current_indicator"
+              transition={{ type: "spring", bounce: 0.25, duration: 0.5 }}
+              className={cn(
+                "absolute rounded bg-fg",
+                "group-orientation-horizontal:inset-x-0 group-orientation-horizontal:-bottom-px group-orientation-horizontal:h-0.5 group-orientation-horizontal:w-full group-orientation-vertical:left-0 group-orientation-vertical:h-[calc(100%-10%)] group-orientation-vertical:w-0.5 group-orientation-vertical:transform"
+              )}
+            />
+          )}
+        </>
+      )}
+    </TabPrimitive>
+  )
+}
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
index fbecb63f9..778a6bb91 100644
--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@@ -99,7 +99,7 @@ const Tab = ({ children, ...props }: TabProps) => {
           {isSelected && (
             <span
               className={cn(
-                "absolute duration-300 ease-in-out rounded bg-fg",
+                "absolute rounded bg-fg",
                 // horizontal
                 "group-orientation-horizontal:inset-x-0 group-orientation-horizontal:-bottom-px group-orientation-horizontal:h-0.5 group-orientation-horizontal:w-full",
                 // vertical
diff --git a/resources/content/docs/components/navigation/tabs.mdx b/resources/content/docs/components/navigation/tabs.mdx
index 496e9aeb9..de7b34168 100644
--- a/resources/content/docs/components/navigation/tabs.mdx
+++ b/resources/content/docs/components/navigation/tabs.mdx
@@ -75,7 +75,7 @@ const List = <T extends object>(props: TabListProps<T>) => {
 ```
 
 And then modify the `Tab` component to use the `motion` component.
-```tsx {8}
+```tsx {8-10}
 const Tab = ({ children, ...props }: TabProps) => {
   return (
     <TabPrimitive...>
@@ -84,6 +84,8 @@ const Tab = ({ children, ...props }: TabProps) => {
           {children}
           {isSelected && (
             <motion.span
+              layoutId='current_indicator'
+              transition={{ type: "spring", bounce: 0.25, duration: 0.5 }}
               className={cn('...')}
             />
           )}