"use client"; import * as React from "react"; import { Tabs as TabsPrimitive } from "radix-ui"; import { motion } from "motion/react"; import { cn, useControllableState } from "@kineticui/core"; type TabsContextValue = { value: string; id: string; variant: "underline" | "pill" }; const TabsContext = React.createContext(null); export type TabsProps = Omit, "value" | "defaultValue" | "onValueChange"> & { value?: string; defaultValue: string; onValueChange?: (value: string) => void; /** underline: sliding underline. pill: sliding pill (segmented control). */ variant?: "underline" | "pill"; }; /** Tabs whose indicator glides between triggers. */ export function Tabs({ value, defaultValue, onValueChange, variant = "underline", className, ...props }: TabsProps) { const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange }); const id = React.useId(); return ( ); } export const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { const ctx = React.useContext(TabsContext); return ( ); }); TabsList.displayName = "TabsList"; export const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, value, ...props }, ref) => { const ctx = React.useContext(TabsContext); const active = ctx?.value === value; const pill = ctx?.variant === "pill"; return ( {active ? ( ) : null} {children} ); }); TabsTrigger.displayName = "TabsTrigger"; export const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); TabsContent.displayName = "TabsContent"; export type SegmentedControlProps = { options: { value: string; label: React.ReactNode }[]; value?: string; defaultValue: string; onValueChange?: (value: string) => void; className?: string; "aria-label"?: string; }; /** A compact pill switcher for 2–5 options. */ export function SegmentedControl({ options, value, defaultValue, onValueChange, className, ...rest }: SegmentedControlProps) { const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange }); const id = React.useId(); return (

{options.map((o) => { const active = o.value === current; return ( ); })}

); }

Tabs

Installation

Exports