aural-ui 4.2.0 → 4.2.3

package/dist/components/tabs/index.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { useId } from "react"
 import { cn } from "@lib/utils"
 import * as TabsPrimitive from "@radix-ui/react-tabs"
 import { cva } from "class-variance-authority"
@@ -16,23 +17,30 @@ const tabsVariants = cva("", {
   },
 })
 
-// Create context for tabs size
+// Create context for tabs size and baseId
 const TabsContext = React.createContext<{
   size: "sm" | "md" | "lg"
+  baseId: string
 }>({
   size: "md",
+  baseId: "",
 })
 
 interface TabsProps extends React.ComponentProps<typeof TabsPrimitive.Root> {
   size?: "sm" | "md" | "lg"
+  /** Provide a stable id in SSR environments to avoid hydration mismatches. */
+  id?: string
 }
 
-function Tabs({ className, size = "md", ...props }: TabsProps) {
+function Tabs({ className, size = "md", id, ...props }: TabsProps) {
+  const generatedId = useId()
+  const baseId = id ?? generatedId
   return (
-    <TabsContext.Provider value={{ size }}>
+    <TabsContext.Provider value={{ size, baseId }}>
       <TabsPrimitive.Root
         data-slot="tabs"
         className={cn("flex flex-col gap-2", className)}
+        id={baseId}
         {...props}
       />
     </TabsContext.Provider>
@@ -55,7 +63,7 @@ function TabsList({
   )
 }
 
-type GlowDirection = "bottom" | "top"
+type GlowDirection = "bottom" | "top" | "left" | "right"
 
 interface TabsTriggerProps extends React.ComponentProps<
   typeof TabsPrimitive.Trigger
@@ -63,17 +71,33 @@ interface TabsTriggerProps extends React.ComponentProps<
   className?: string
   size?: "sm" | "md" | "lg"
   glowDirection?: GlowDirection
+  /** Provide a stable id in SSR environments to avoid hydration mismatches */
+  id?: string
 }
 
 function TabsTrigger({
   className,
   size: sizeProp,
   glowDirection = "bottom",
+  id: idProp,
   ...props
 }: TabsTriggerProps) {
-  const { size: contextSize } = React.useContext(TabsContext)
+  const { size: contextSize, baseId } = React.useContext(TabsContext)
   const size = sizeProp || contextSize
 
+  const generatedId = useId()
+  const sanitizedId = idProp?.replace(/\s+/g, "-") ?? generatedId
+  const gradientId = `gradient-${sanitizedId}`
+  const filterId = `filter-${sanitizedId}`
+
+  const sanitizedValue = props.value?.replace(/\s+/g, "-")
+  const triggerId = sanitizedValue
+    ? `${baseId}-trigger-${sanitizedValue}`
+    : sanitizedId
+  const contentId = sanitizedValue
+    ? `${baseId}-content-${sanitizedValue}`
+    : undefined
+
   const getGlowConfig = (direction: GlowDirection) => {
     switch (direction) {
       case "top":
@@ -91,6 +115,36 @@ function TabsTrigger({
           edgeGradientTransform: "matrix(0 -4.03571 32.0526 0 32 0)",
         }
 
+      case "left":
+        return {
+          containerClass: "absolute left-0 top-0 h-full w-1/2",
+          ellipse: { cx: "15", cy: "44", rx: "4", ry: "32" },
+          gradientTransform: "matrix(-16.1429 0 0 32.0526 1 44)",
+          viewBox: "0 0 25 92",
+          dimensions: { width: "25", height: "92" },
+          filter: { x: "-15", y: "-4", width: "40", height: "96" },
+          edgeClass: "absolute left-0 top-0 h-full w-[3px]",
+          edgePath: "M1 0S-.173 19.503 .022 32 1 64 1 64h1L1.995 0z",
+          edgeViewBox: "0 0 2 64",
+          edgeDimensions: { width: "2", height: "64" },
+          edgeGradientTransform: "matrix(-4.03571 0 0 32.0526 0 32)",
+        }
+
+      case "right":
+        return {
+          containerClass: "absolute right-0 top-0 h-full w-1/2",
+          ellipse: { cx: "15", cy: "44", rx: "4", ry: "32" },
+          gradientTransform: "matrix(-16.1429 0 0 32.0526 1 44)",
+          viewBox: "0 0 25 92",
+          dimensions: { width: "25", height: "92" },
+          filter: { x: "0", y: "-4", width: "40", height: "96" },
+          edgeClass: "absolute -right-0.5 top-0 h-full",
+          edgePath: "M1 0S-.173 19.503 .022 32 1 64 1 64h1L1.995 0z",
+          edgeViewBox: "0 0 2 64",
+          edgeDimensions: { width: "2", height: "64" },
+          edgeGradientTransform: "matrix(4.03571 0 0 -32.0526 2 32)",
+        }
+
       case "bottom":
       default:
         return {
@@ -118,16 +172,18 @@ function TabsTrigger({
         "group text-fm-tertiary relative inline-flex flex-1 items-center justify-center border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow]",
         "focus-visible:ring-fm-primary focus-visible:ring-offset-fm-contrast outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
         "disabled:pointer-events-none disabled:opacity-50",
-        "data-[state=active]:text-fm-primary hover:text-fm-secondary",
+        "data-[state=active]:text-fm-primary hover:text-fm-primary",
         tabsVariants({ size }),
         className
       )}
       {...props}
+      id={triggerId}
+      aria-controls={contentId}
     >
       {props.children}
       <div
         className={cn(
-          "group-data-[state=active]:animate-fm-fadeIn group-hover:!animate-fm-fadeIn group-data-[state=inactive]:animate-fm-fadeOut pointer-events-none absolute top-0 right-0 -bottom-0.5 left-0 z-10"
+          "group-data-[state=active]:animate-fm-fadeIn pointer-events-none absolute top-0 right-0 -bottom-0.5 left-0 z-10 group-data-[state=inactive]:hidden sm:-right-3"
         )}
       >
         {/* Main glow ellipse */}
@@ -136,22 +192,24 @@ function TabsTrigger({
           width={config.dimensions.width}
           height={config.dimensions.height}
           viewBox={config.viewBox}
+          aria-hidden={true}
+          focusable={false}
           fill="none"
           className={config.containerClass}
         >
-          <g filter="url(#b)">
+          <g filter={`url(#${filterId})`}>
             <ellipse
               cx={config.ellipse.cx}
               cy={config.ellipse.cy}
               rx={config.ellipse.rx}
               ry={config.ellipse.ry}
-              fill="url(#c)"
+              fill={`url(#${gradientId})`}
               style={{ mixBlendMode: "screen" }}
             />
           </g>
           <defs>
             <radialGradient
-              id="c"
+              id={gradientId}
               cx="0"
               cy="0"
               r="1"
@@ -163,7 +221,7 @@ function TabsTrigger({
               <stop offset="1" stopColor="var(--color-fm-neutral-50)" />
             </radialGradient>
             <filter
-              id="b"
+              id={filterId}
               x={config.filter.x}
               y={config.filter.y}
               width={config.filter.width}
@@ -179,7 +237,7 @@ function TabsTrigger({
               />
               <feGaussianBlur
                 stdDeviation="8"
-                result="effect1_foregroundBlur_4031_2537"
+                result="effect1_foregroundBlur_default"
               />
             </filter>
           </defs>
@@ -190,18 +248,20 @@ function TabsTrigger({
           xmlns="http://www.w3.org/2000/svg"
           width={config.edgeDimensions.width}
           height={config.edgeDimensions.height}
+          aria-hidden={true}
+          focusable={false}
           viewBox={config.edgeViewBox}
           fill="none"
           className={config.edgeClass}
         >
           <path
             d={config.edgePath}
-            fill="url(#a)"
+            fill={`url(#${gradientId}-edge)`}
             style={{ mixBlendMode: "screen" }}
           />
           <defs>
             <radialGradient
-              id="a"
+              id={`${gradientId}-edge`}
               cx="0"
               cy="0"
               r="1"
@@ -210,7 +270,11 @@ function TabsTrigger({
             >
               <stop stopColor="var(--color-fm-primary-600)" />
               <stop offset=".61" stopColor="var(--color-fm-secondary-300)" />
-              <stop offset="1" stopColor="var(--color-fm-neutral-50)" />
+              <stop
+                offset="1"
+                stopColor="var(--color-fm-neutral-50)"
+                stopOpacity="0.2"
+              />
             </radialGradient>
           </defs>
         </svg>
@@ -219,15 +283,35 @@ function TabsTrigger({
   )
 }
 
+interface TabsContentProps extends React.ComponentProps<
+  typeof TabsPrimitive.Content
+> {
+  id?: string
+}
+
 function TabsContent({
   className,
+  id: idProp,
+  value,
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+}: TabsContentProps) {
+  const { baseId } = React.useContext(TabsContext)
+  const sanitizedValue = value?.replace(/\s+/g, "-")
+  const contentId =
+    idProp ??
+    (sanitizedValue ? `${baseId}-content-${sanitizedValue}` : undefined)
+  const triggerId = sanitizedValue
+    ? `${baseId}-trigger-${sanitizedValue}`
+    : undefined
+
   return (
     <TabsPrimitive.Content
       data-slot="tabs-content"
       className={cn("flex-1 outline-none", className)}
       {...props}
+      id={contentId}
+      value={value}
+      aria-labelledby={triggerId}
     />
   )
 }