import { Button } from '~/components/ui/button'

export function MyComponent() {
  return (
    <div className="flex gap-4">
      <Button>Click me</Button>
    </div>
  )
}

import React from "react"
import { Calendar, sharedCalendarProps } from "~/components/ui/calendar"

const FEBRUARY_2026 = new Date(2026, 1, 1)
const MARCH_2026 = new Date(2026, 2, 1)

/**
 * JavaScript Date month index is 0-based:
 * 0 = January, 1 = February, ..., 11 = December.
 * Example: new Date(2026, 1, 2) means February 2nd, 2026.
 */
const CALENDAR_EVENTS = [
  { id: "feb-2", date: new Date(2026, 1, 2), title: "Assignment A dateline" },
  { id: "feb-5", date: new Date(2026, 1, 5), title: "Lorem ipsum" },
  { id: "feb-14", date: new Date(2026, 1, 14), title: "Skibidi Sigma" },
  { id: "feb-15", date: new Date(2026, 1, 15), title: "awikwokawikwok" },
]

const CALENDAR_LEGEND_GRADIENT = {
  backgroundImage:
    "linear-gradient(126.828deg, var(--sunlit-100) 0%, var(--lagoon-500) 20%, var(--ocean-depth-500) 80%)",
  WebkitTextFillColor: "transparent",
}

const calendarProps = sharedCalendarProps({
  events: CALENDAR_EVENTS,
  defaultMonth: FEBRUARY_2026,
  legendGradientStyle: CALENDAR_LEGEND_GRADIENT,
  accentTextDays: [],
})

export function MyComponent() {
  const [month, setMonth] = React.useState(MARCH_2026)

  return (
    <Calendar
      className="w-full max-w-[766px]"
      desktop
      month={month}
      onMonthChange={setMonth}
      {...calendarProps}
    />
  )
}

import { 
  Card, 
  CardHeader, 
  CardTitle, 
  CardDescription, 
  CardContent, 
  CardFooter,
  CardAction 
} from '~/components/ui/card'
import { Button } from '~/components/ui/button'

export function MyComponent() {
  return (
    <Card className="max-w-md">
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>
          This is a complete card with all sub-components
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </CardContent>
      <CardFooter className="gap-2">
        <Button variant="outline">Cancel</Button>
        <Button>Save Changes</Button>
      </CardFooter>
    </Card>
  )
}

import { Chip } from '~/components/ui/chip'

export function MyComponent() {
  return (
    <div className="flex gap-2">
      <Chip>
        <Star className="text-text-1000 group-hover:text-lagoon-500" />
        <span className="flex group-hover:bg-theme-gradient group-hover:text-transparent group-hover:bg-clip-text">
          Chip
        </span>
      </Chip>
    </div>
  )
}

import { Countdown } from '~/components/ui/countdown'

export function MyComponent() {
  const targetDate = new Date('2024-12-31T23:59:59')
  
  return (
    <Countdown 
      targetDate={targetDate}
      onComplete={() => alert('Countdown finished!')}
    />
  )
}

import { Disclosure, DisclosureItem, DisclosureTrigger, DisclosureContent } from '~/components/ui/disclosure'

// Single collapsible disclosure
export function MyDisclosure() {
  return (
    <Disclosure type="single" collapsible>
      <DisclosureItem value="item-1">
        <DisclosureTrigger>What is this?</DisclosureTrigger>
        <DisclosureContent>
          This is an disclosure component
        </DisclosureContent>
      </DisclosureItem>
      <DisclosureItem value="item-2">
        <DisclosureTrigger>How does it work?</DisclosureTrigger>
        <DisclosureContent>
          Click the trigger to expand or collapse content
        </DisclosureContent>
      </DisclosureItem>
    </Disclosure>
  )
}

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuButton,
} from "~/components/ui/dropdown-menu"

export function DropdownMenuDemo() {
  return (
    <DropdownMenu>
      <DropdownMenuButton>Open</DropdownMenuButton>
      <DropdownMenuContent>
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Billing</DropdownMenuItem>
        <DropdownMenuItem>Team</DropdownMenuItem>
        <DropdownMenuItem>Subscription</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

import { FileInput } from '~/components/ui/file-input'

export function MyComponent() {
  const [file, setFile] = React.useState<File | null>(null)

  return (
    <FileInput 
      label="Upload Document"
      accept=".pdf,.doc,.docx"
      value={file}
      onChange={setFile}
      secondaryMessage="Supports PDF, DOC, DOCX"
    />
  )
}

import {
  Modal,
  ModalTrigger,
  ModalContent,
  ModalHeader,
  ModalTitle,
  ModalDescription,
  ModalFooter,
  ModalClose,
} from '~/components/ui/modal'
import { Button } from '~/components/ui/button'

export function MyModal() {
  return (
    <Modal>
      <ModalTrigger asChild>
        <Button>Open Modal</Button>
      </ModalTrigger>
      <ModalContent>
        <Image src="/icons/gradient/check-circle.svg" alt="icon" />
        <ModalHeader>
          <ModalTitle className="text-center">Edit Profile</ModalTitle>
          <ModalDescription className="text-center">
            Make changes to your profile here. Click save when you're
            done.
          </ModalDescription>
        </ModalHeader>
        <ModalFooter>
          <ModalClose asChild>
            <Button>Cancel</Button>
          </ModalClose>
          <Button>Save</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  )
}

import { Notes } from '~/components/ui/notes'

export function MyComponent() {
  return (
    <Notes variant="SE">
      <p>This is an informational note.</p>
    </Notes>
  )
}

import { ProgressBar } from '~/components/ui/progress-bar'

export function MyComponent() {
  return (
    <ProgressBar 
      value={75}
      max={100}
      showLabel
      labelPosition="top"
    />
  )
}

import { Tabs, TabsList, TabsTrigger, TabsContent } from '~/components/ui/tabs'

export function MyComponent() {
  return (
    <Tabs defaultValue="tab1">
      <TabsList>
        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
        <TabsTrigger value="tab3">Tab 3</TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">Content for tab 1</TabsContent>
      <TabsContent value="tab2">Content for tab 2</TabsContent>
      <TabsContent value="tab3">Content for tab 3</TabsContent>
    </Tabs>
  )
}

import { TextOverflow } from '~/components/ui/text-overflow'

export function MyComponent() {
  return (
    <TextOverflow lines={2}>
      This is a long text that will be truncated with an ellipsis
      when it exceeds the specified number of lines.
    </TextOverflow>
  )
}

import { TipCard } from '~/components/ui/tip-card'
import { Info } from "lucide-react"

export function MyComponent() {
  return (
    <TipCard
      title="Pro Tip"
      description="Use keyboard shortcuts to navigate faster through the application."
      icon={(<Image src="/icons/gradient/info-circle.svg" alt="icon" />)
      }
    />
  )
}

import { Toggle } from '~/components/ui/toggle'

export function MyComponent() {
  const [checked, setChecked] = React.useState(false)
  
  return (
    <div className="flex gap-4">
      <Toggle checked={checked} onCheckedChange={setChecked} />
    </div>
  )
}

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from '~/components/ui/tooltip'
import { Button } from '~/components/ui/button'

export function MyComponent() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button>Hover me</Button>
        </TooltipTrigger>
        <TooltipContent>
          This is a tooltip
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}