Auto update
diff --git a/src/components/shadcn-studio/tabs/tabs-27.tsx b/src/components/shadcn-studio/tabs/tabs-27.tsx
new file mode 100644
index 0000000..9d2ec8b
--- /dev/null
+++ b/src/components/shadcn-studio/tabs/tabs-27.tsx
@@ -0,0 +1,72 @@
+import { Tabs, TabsContent, TabsContents, TabsList, TabsTrigger } from '@/components/ui/motion-tabs'
+
+const tabs = [
+ {
+ name: 'Explore',
+ value: 'explore',
+ content: (
+ <>
+ Discover fresh ideas, trending topics, and hidden gems
+ curated just for you. Start exploring and let your curiosity lead the way!
+
+ )
+ },
+ {
+ name: 'Favorites',
+ value: 'favorites',
+ content: (
+ <>
+ All your favorites are saved here. Revisit articles,
+ collections, and moments you love, any time you want a little inspiration.
+
+ )
+ },
+ {
+ name: 'Surprise Me',
+ value: 'surprise',
+ content: (
+ <>
+ Surprise! Here's something unexpected—a fun fact, a
+ quirky tip, or a daily challenge. Come back for a new surprise every day!
+
+ )
+ }
+]
+
+const AnimatedTabsDemo = () => {
+ return (
+
+
+
+ {tabs.map(tab => (
+
+ {tab.name}
+
+ ))}
+
+
+
+ {tabs.map(tab => (
+
+ {tab.content}
+
+ ))}
+
+
+
+
+ Inspired by{' '}
+
+ Animate UI
+
+
+
+ )
+}
+
+export default AnimatedTabsDemo
diff --git a/src/components/ui/motion-highlight.tsx b/src/components/ui/motion-highlight.tsx
new file mode 100644
index 0000000..11931a2
--- /dev/null
+++ b/src/components/ui/motion-highlight.tsx
@@ -0,0 +1,549 @@
+import * as React from 'react'
+
+import type { Transition } from 'motion/react'
+import { AnimatePresence, motion } from 'motion/react'
+
+import { cn } from '@/lib/utils'
+
+type MotionHighlightMode = 'children' | 'parent'
+
+type Bounds = {
+ top: number
+ left: number
+ width: number
+ height: number
+}
+
+type MotionHighlightContextType
= {
+ mode: MotionHighlightMode
+ activeValue: T | null
+ setActiveValue: (value: T | null) => void
+ setBounds: (bounds: DOMRect) => void
+ clearBounds: () => void
+ id: string
+ hover: boolean
+ className?: string
+ activeClassName?: string
+ setActiveClassName: (className: string) => void
+ transition?: Transition
+ disabled?: boolean
+ enabled?: boolean
+ exitDelay?: number
+ forceUpdateBounds?: boolean
+}
+
+const MotionHighlightContext = React.createContext<
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ MotionHighlightContextType | undefined
+>(undefined)
+
+function useMotionHighlight(): MotionHighlightContextType {
+ const context = React.useContext(MotionHighlightContext)
+
+ if (!context) {
+ throw new Error('useMotionHighlight must be used within a MotionHighlightProvider')
+ }
+
+ return context as unknown as MotionHighlightContextType
+}
+
+type BaseMotionHighlightProps = {
+ mode?: MotionHighlightMode
+ value?: T | null
+ defaultValue?: T | null
+ onValueChange?: (value: T | null) => void
+ className?: string
+ transition?: Transition
+ hover?: boolean
+ disabled?: boolean
+ enabled?: boolean
+ exitDelay?: number
+}
+
+type ParentModeMotionHighlightProps = {
+ boundsOffset?: Partial
+ containerClassName?: string
+ forceUpdateBounds?: boolean
+}
+
+type ControlledParentModeMotionHighlightProps = BaseMotionHighlightProps &
+ ParentModeMotionHighlightProps & {
+ mode: 'parent'
+ controlledItems: true
+ children: React.ReactNode
+ }
+
+type ControlledChildrenModeMotionHighlightProps = BaseMotionHighlightProps & {
+ mode?: 'children' | undefined
+ controlledItems: true
+ children: React.ReactNode
+}
+
+type UncontrolledParentModeMotionHighlightProps = BaseMotionHighlightProps &
+ ParentModeMotionHighlightProps & {
+ mode: 'parent'
+ controlledItems?: false
+ itemsClassName?: string
+ children: React.ReactElement | React.ReactElement[]
+ }
+
+type UncontrolledChildrenModeMotionHighlightProps = BaseMotionHighlightProps & {
+ mode?: 'children'
+ controlledItems?: false
+ itemsClassName?: string
+ children: React.ReactElement | React.ReactElement[]
+}
+
+type MotionHighlightProps = React.ComponentProps<'div'> &
+ (
+ | ControlledParentModeMotionHighlightProps
+ | ControlledChildrenModeMotionHighlightProps
+ | UncontrolledParentModeMotionHighlightProps
+ | UncontrolledChildrenModeMotionHighlightProps
+ )
+
+function MotionHighlight({ ref, ...props }: MotionHighlightProps) {
+ const {
+ children,
+ value,
+ defaultValue,
+ onValueChange,
+ className,
+ transition = { type: 'spring', stiffness: 350, damping: 35 },
+ hover = false,
+ enabled = true,
+ controlledItems,
+ disabled = false,
+ exitDelay = 0.2,
+ mode = 'children'
+ } = props
+
+ const localRef = React.useRef(null)
+
+ React.useImperativeHandle(ref, () => localRef.current as HTMLDivElement)
+
+ const [activeValue, setActiveValue] = React.useState(value ?? defaultValue ?? null)
+ const [boundsState, setBoundsState] = React.useState(null)
+ const [activeClassNameState, setActiveClassNameState] = React.useState('')
+
+ const safeSetActiveValue = React.useCallback(
+ (id: T | null) => {
+ setActiveValue(prev => (prev === id ? prev : id))
+ if (id !== activeValue) onValueChange?.(id as T)
+ },
+ [activeValue, onValueChange]
+ )
+
+ const safeSetBounds = React.useCallback(
+ (bounds: DOMRect) => {
+ if (!localRef.current) return
+
+ const boundsOffset = (props as ParentModeMotionHighlightProps)?.boundsOffset ?? {
+ top: 0,
+ left: 0,
+ width: 0,
+ height: 0
+ }
+
+ const containerRect = localRef.current.getBoundingClientRect()
+
+ const newBounds: Bounds = {
+ top: bounds.top - containerRect.top + (boundsOffset.top ?? 0),
+ left: bounds.left - containerRect.left + (boundsOffset.left ?? 0),
+ width: bounds.width + (boundsOffset.width ?? 0),
+ height: bounds.height + (boundsOffset.height ?? 0)
+ }
+
+ setBoundsState(prev => {
+ if (
+ prev &&
+ prev.top === newBounds.top &&
+ prev.left === newBounds.left &&
+ prev.width === newBounds.width &&
+ prev.height === newBounds.height
+ ) {
+ return prev
+ }
+
+ return newBounds
+ })
+ },
+ [props]
+ )
+
+ const clearBounds = React.useCallback(() => {
+ setBoundsState(prev => (prev === null ? prev : null))
+ }, [])
+
+ React.useEffect(() => {
+ if (value !== undefined) setActiveValue(value)
+ else if (defaultValue !== undefined) setActiveValue(defaultValue)
+ }, [value, defaultValue])
+
+ const id = React.useId()
+
+ React.useEffect(() => {
+ if (mode !== 'parent') return
+ const container = localRef.current
+
+ if (!container) return
+
+ const onScroll = () => {
+ if (!activeValue) return
+ const activeEl = container.querySelector(`[data-value="${activeValue}"][data-highlight="true"]`)
+
+ if (activeEl) safeSetBounds(activeEl.getBoundingClientRect())
+ }
+
+ container.addEventListener('scroll', onScroll, { passive: true })
+
+ return () => container.removeEventListener('scroll', onScroll)
+ }, [mode, activeValue, safeSetBounds])
+
+ const render = React.useCallback(
+ (children: React.ReactNode) => {
+ if (mode === 'parent') {
+ return (
+
+
+ {boundsState && (
+
+ )}
+
+ {children}
+
+ {children}
+
+
+ )
+ }
+
+ return React.cloneElement(element, {
+ ref: localRef,
+ ...getNonOverridingDataAttributes(element, {
+ ...dataAttributes,
+ 'data-slot': 'motion-highlight-item'
+ }),
+ ...commonHandlers
+ })
+ }
+
+ return enabled ? (
+
+ {mode === 'children' && (
+
+ {isActive && !isDisabled && (
+
+ )}
+
+ )}
+
+ {React.cloneElement(element, {
+ className: cn('relative z-[1]', element.props.className),
+ ...getNonOverridingDataAttributes(element, {
+ ...dataAttributes,
+ 'data-slot': 'motion-highlight-item'
+ })
+ })}
+
+ {children}
+
+
+ )
+}
+
+type TabsListProps = React.ComponentProps<'div'> & {
+ children: React.ReactNode
+ activeClassName?: string
+ transition?: Transition
+}
+
+function TabsList({
+ children,
+ className,
+ activeClassName,
+ transition = {
+ type: 'spring',
+ stiffness: 200,
+ damping: 25
+ },
+ ...props
+}: TabsListProps) {
+ const { activeValue } = useTabs()
+
+ return (
+
+
+ {children}
+
+
+ )
+}
+
+type TabsTriggerProps = HTMLMotionProps<'button'> & {
+ value: string
+ children: React.ReactNode
+}
+
+function TabsTrigger({ ref, value, children, className, ...props }: TabsTriggerProps) {
+ const { activeValue, handleValueChange, registerTrigger } = useTabs()
+
+ const localRef = React.useRef(null)
+
+ React.useImperativeHandle(ref, () => localRef.current as HTMLButtonElement)
+
+ React.useEffect(() => {
+ registerTrigger(value, localRef.current)
+
+ return () => registerTrigger(value, null)
+ }, [value, registerTrigger])
+
+ return (
+
+ handleValueChange(value)}
+ data-state={activeValue === value ? 'active' : 'inactive'}
+ className={cn(
+ 'ring-offset-background focus-visible:ring-ring data-[state=active]:text-foreground z-[1] inline-flex size-full cursor-pointer items-center justify-center rounded-sm px-2 py-1 text-sm font-medium whitespace-nowrap transition-transform focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+ )
+}
+
+type TabsContentsProps = React.ComponentProps<'div'> & {
+ children: React.ReactNode
+ transition?: Transition
+}
+
+function TabsContents({
+ children,
+ className,
+ transition = {
+ type: 'spring',
+ stiffness: 300,
+ damping: 30,
+ bounce: 0,
+ restDelta: 0.01
+ },
+ ...props
+}: TabsContentsProps) {
+ const { activeValue } = useTabs()
+ const childrenArray = React.Children.toArray(children)
+
+ const activeIndex = childrenArray.findIndex(
+ (child): child is React.ReactElement<{ value: string }> =>
+ React.isValidElement(child) &&
+ typeof child.props === 'object' &&
+ child.props !== null &&
+ 'value' in child.props &&
+ child.props.value === activeValue
+ )
+
+ return (
+
+
+ {childrenArray.map((child, index) => (
+
+ {child}
+
+ ))}
+
+