Transition

import { FadeIn, Transition } from '@otfdashkit/ui'
import React, { useState } from 'react'

export function Example() {
  const [show, setShow] = React.useState(true)
  return (
    <div className="space-y-4">
      <button
        onClick={() => setShow(!show)}
        className="rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90 transition-colors"
      >
        {show ? 'Hide' : 'Show'}
      </button>
      <Transition show={show}>
        <FadeIn>
          <div className="rounded-lg border border-border bg-card p-6">
            <p className="text-foreground">Toggled content with enter/exit</p>
          </div>
        </FadeIn>
      </Transition>
    </div>
  )
}