@object-ui/components 0.3.0

package/src/ui/button-group.tsx

@@ -0,0 +1,83 @@
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+import { Separator } from "./separator"
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      className={cn(
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}

package/src/ui/button.tsx

@@ -0,0 +1,65 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/50 tracking-wide",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-cyan-950/80 text-cyan-50 border border-cyan-500/50 shadow-[0_0_10px_-3px_rgba(6,182,212,0.3)] hover:bg-cyan-900 hover:border-cyan-400 hover:shadow-[0_0_15px_rgba(6,182,212,0.5)] active:scale-95",
+        destructive:
+          "bg-red-950/80 text-red-50 border border-red-500/50 hover:bg-red-900 hover:border-red-400 hover:shadow-[0_0_15px_rgba(239,68,68,0.5)]",
+        outline:
+          "border border-cyan-800 bg-background/50 hover:bg-cyan-950/30 hover:border-cyan-500/50 hover:text-cyan-100 text-muted-foreground",
+        secondary:
+          "bg-slate-800/80 text-secondary-foreground hover:bg-slate-700/80 border border-slate-700",
+        ghost:
+          "hover:bg-cyan-950/20 hover:text-cyan-400 data-[state=open]:bg-cyan-950/20 data-[state=open]:text-cyan-400",
+        link: "text-cyan-400 underline-offset-4 hover:underline hover:text-cyan-300",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-sm gap-1.5 px-3 has-[>svg]:px-2.5 text-xs",
+        lg: "h-10 rounded-sm px-6 has-[>svg]:px-4",
+        icon: "size-9 rounded-sm",
+        "icon-sm": "size-8 rounded-sm",
+        "icon-lg": "size-10 rounded-sm",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Button = React.forwardRef<HTMLButtonElement, React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }>(({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+})
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/src/ui/calendar-view.tsx

@@ -0,0 +1,503 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
+import { cn } from "../lib/utils"
+import { Button } from "./button"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select"
+
+const DEFAULT_EVENT_COLOR = "bg-blue-500 text-white"
+
+export interface CalendarEvent {
+  id: string | number
+  title: string
+  start: Date
+  end?: Date
+  allDay?: boolean
+  color?: string
+  data?: any
+}
+
+export interface CalendarViewProps {
+  events?: CalendarEvent[]
+  view?: "month" | "week" | "day"
+  currentDate?: Date
+  onEventClick?: (event: CalendarEvent) => void
+  onDateClick?: (date: Date) => void
+  onViewChange?: (view: "month" | "week" | "day") => void
+  onNavigate?: (date: Date) => void
+  className?: string
+}
+
+function CalendarView({
+  events = [],
+  view = "month",
+  currentDate = new Date(),
+  onEventClick,
+  onDateClick,
+  onViewChange,
+  onNavigate,
+  className,
+}: CalendarViewProps) {
+  const [selectedView, setSelectedView] = React.useState(view)
+  const [selectedDate, setSelectedDate] = React.useState(currentDate)
+
+  const handlePrevious = () => {
+    const newDate = new Date(selectedDate)
+    if (selectedView === "month") {
+      newDate.setMonth(newDate.getMonth() - 1)
+    } else if (selectedView === "week") {
+      newDate.setDate(newDate.getDate() - 7)
+    } else {
+      newDate.setDate(newDate.getDate() - 1)
+    }
+    setSelectedDate(newDate)
+    onNavigate?.(newDate)
+  }
+
+  const handleNext = () => {
+    const newDate = new Date(selectedDate)
+    if (selectedView === "month") {
+      newDate.setMonth(newDate.getMonth() + 1)
+    } else if (selectedView === "week") {
+      newDate.setDate(newDate.getDate() + 7)
+    } else {
+      newDate.setDate(newDate.getDate() + 1)
+    }
+    setSelectedDate(newDate)
+    onNavigate?.(newDate)
+  }
+
+  const handleToday = () => {
+    const today = new Date()
+    setSelectedDate(today)
+    onNavigate?.(today)
+  }
+
+  const handleViewChange = (newView: "month" | "week" | "day") => {
+    setSelectedView(newView)
+    onViewChange?.(newView)
+  }
+
+  const getDateLabel = () => {
+    if (selectedView === "month") {
+      return selectedDate.toLocaleDateString("default", {
+        month: "long",
+        year: "numeric",
+      })
+    } else if (selectedView === "week") {
+      const weekStart = getWeekStart(selectedDate)
+      const weekEnd = new Date(weekStart)
+      weekEnd.setDate(weekEnd.getDate() + 6)
+      return `${weekStart.toLocaleDateString("default", {
+        month: "short",
+        day: "numeric",
+      })} - ${weekEnd.toLocaleDateString("default", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      })}`
+    } else {
+      return selectedDate.toLocaleDateString("default", {
+        weekday: "long",
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+      })
+    }
+  }
+
+  return (
+    <div className={cn("flex flex-col h-full bg-background", className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b">
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={handleToday}>
+            Today
+          </Button>
+          <div className="flex items-center">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handlePrevious}
+              className="h-8 w-8"
+            >
+              <ChevronLeftIcon className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleNext}
+              className="h-8 w-8"
+            >
+              <ChevronRightIcon className="h-4 w-4" />
+            </Button>
+          </div>
+          <h2 className="text-lg font-semibold ml-2">{getDateLabel()}</h2>
+        </div>
+        <div className="flex items-center gap-2">
+          <Select value={selectedView} onValueChange={handleViewChange}>
+            <SelectTrigger className="w-32">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="day">Day</SelectItem>
+              <SelectItem value="week">Week</SelectItem>
+              <SelectItem value="month">Month</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Calendar Grid */}
+      <div className="flex-1 overflow-auto">
+        {selectedView === "month" && (
+          <MonthView
+            date={selectedDate}
+            events={events}
+            onEventClick={onEventClick}
+            onDateClick={onDateClick}
+          />
+        )}
+        {selectedView === "week" && (
+          <WeekView
+            date={selectedDate}
+            events={events}
+            onEventClick={onEventClick}
+            onDateClick={onDateClick}
+          />
+        )}
+        {selectedView === "day" && (
+          <DayView
+            date={selectedDate}
+            events={events}
+            onEventClick={onEventClick}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+function getWeekStart(date: Date): Date {
+  const d = new Date(date)
+  const day = d.getDay()
+  const diff = d.getDate() - day
+  return new Date(d.setDate(diff))
+}
+
+function getMonthDays(date: Date): Date[] {
+  const year = date.getFullYear()
+  const month = date.getMonth()
+  const firstDay = new Date(year, month, 1)
+  const lastDay = new Date(year, month + 1, 0)
+  const startDay = firstDay.getDay()
+  const days: Date[] = []
+
+  // Add previous month days
+  for (let i = startDay - 1; i >= 0; i--) {
+    const prevDate = new Date(firstDay)
+    prevDate.setDate(prevDate.getDate() - (i + 1))
+    days.push(prevDate)
+  }
+
+  // Add current month days
+  for (let i = 1; i <= lastDay.getDate(); i++) {
+    days.push(new Date(year, month, i))
+  }
+
+  // Add next month days
+  const remainingDays = 42 - days.length
+  for (let i = 1; i <= remainingDays; i++) {
+    const nextDate = new Date(lastDay)
+    nextDate.setDate(nextDate.getDate() + i)
+    days.push(nextDate)
+  }
+
+  return days
+}
+
+function isSameDay(date1: Date, date2: Date): boolean {
+  return (
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate()
+  )
+}
+
+function getEventsForDate(date: Date, events: CalendarEvent[]): CalendarEvent[] {
+  return events.filter((event) => {
+    const eventStart = new Date(event.start)
+    const eventEnd = event.end ? new Date(event.end) : new Date(eventStart)
+
+    // Create new date objects for comparison to avoid mutation
+    const dateStart = new Date(date)
+    dateStart.setHours(0, 0, 0, 0)
+    const dateEnd = new Date(date)
+    dateEnd.setHours(23, 59, 59, 999)
+
+    const eventStartTime = new Date(eventStart)
+    eventStartTime.setHours(0, 0, 0, 0)
+    const eventEndTime = new Date(eventEnd)
+    eventEndTime.setHours(23, 59, 59, 999)
+
+    return dateStart <= eventEndTime && dateEnd >= eventStartTime
+  })
+}
+
+interface MonthViewProps {
+  date: Date
+  events: CalendarEvent[]
+  onEventClick?: (event: CalendarEvent) => void
+  onDateClick?: (date: Date) => void
+}
+
+function MonthView({ date, events, onEventClick, onDateClick }: MonthViewProps) {
+  const days = getMonthDays(date)
+  const today = new Date()
+  const weekDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Week day headers */}
+      <div className="grid grid-cols-7 border-b">
+        {weekDays.map((day) => (
+          <div
+            key={day}
+            className="p-2 text-center text-sm font-medium text-muted-foreground border-r last:border-r-0"
+          >
+            {day}
+          </div>
+        ))}
+      </div>
+
+      {/* Calendar days */}
+      <div className="grid grid-cols-7 flex-1 auto-rows-fr">
+        {days.map((day, index) => {
+          const dayEvents = getEventsForDate(day, events)
+          const isCurrentMonth = day.getMonth() === date.getMonth()
+          const isToday = isSameDay(day, today)
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                "border-b border-r last:border-r-0 p-2 min-h-[100px] cursor-pointer hover:bg-accent/50",
+                !isCurrentMonth && "bg-muted/30 text-muted-foreground"
+              )}
+              onClick={() => onDateClick?.(day)}
+            >
+              <div
+                className={cn(
+                  "text-sm font-medium mb-1",
+                  isToday &&
+                    "inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground h-6 w-6"
+                )}
+              >
+                {day.getDate()}
+              </div>
+              <div className="space-y-1">
+                {dayEvents.slice(0, 3).map((event) => (
+                  <div
+                    key={event.id}
+                    className={cn(
+                      "text-xs px-2 py-1 rounded truncate cursor-pointer hover:opacity-80",
+                      event.color || DEFAULT_EVENT_COLOR
+                    )}
+                    style={
+                      event.color && event.color.startsWith("#")
+                        ? { backgroundColor: event.color }
+                        : undefined
+                    }
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      onEventClick?.(event)
+                    }}
+                  >
+                    {event.title}
+                  </div>
+                ))}
+                {dayEvents.length > 3 && (
+                  <div className="text-xs text-muted-foreground px-2">
+                    +{dayEvents.length - 3} more
+                  </div>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+interface WeekViewProps {
+  date: Date
+  events: CalendarEvent[]
+  onEventClick?: (event: CalendarEvent) => void
+  onDateClick?: (date: Date) => void
+}
+
+function WeekView({ date, events, onEventClick, onDateClick }: WeekViewProps) {
+  const weekStart = getWeekStart(date)
+  const weekDays = Array.from({ length: 7 }, (_, i) => {
+    const day = new Date(weekStart)
+    day.setDate(day.getDate() + i)
+    return day
+  })
+  const today = new Date()
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Week day headers */}
+      <div className="grid grid-cols-7 border-b">
+        {weekDays.map((day) => {
+          const isToday = isSameDay(day, today)
+          return (
+            <div
+              key={day.toISOString()}
+              className="p-3 text-center border-r last:border-r-0"
+            >
+              <div className="text-sm font-medium text-muted-foreground">
+                {day.toLocaleDateString("default", { weekday: "short" })}
+              </div>
+              <div
+                className={cn(
+                  "text-lg font-semibold mt-1",
+                  isToday &&
+                    "inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground h-8 w-8"
+                )}
+              >
+                {day.getDate()}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+
+      {/* Week events */}
+      <div className="grid grid-cols-7 flex-1">
+        {weekDays.map((day) => {
+          const dayEvents = getEventsForDate(day, events)
+          return (
+            <div
+              key={day.toISOString()}
+              className="border-r last:border-r-0 p-2 min-h-[400px] cursor-pointer hover:bg-accent/50"
+              onClick={() => onDateClick?.(day)}
+            >
+              <div className="space-y-2">
+                {dayEvents.map((event) => (
+                  <div
+                    key={event.id}
+                    className={cn(
+                      "text-sm px-3 py-2 rounded cursor-pointer hover:opacity-80",
+                      event.color || DEFAULT_EVENT_COLOR
+                    )}
+                    style={
+                      event.color && event.color.startsWith("#")
+                        ? { backgroundColor: event.color }
+                        : undefined
+                    }
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      onEventClick?.(event)
+                    }}
+                  >
+                    <div className="font-medium">{event.title}</div>
+                    {!event.allDay && (
+                      <div className="text-xs opacity-90 mt-1">
+                        {event.start.toLocaleTimeString("default", {
+                          hour: "numeric",
+                          minute: "2-digit",
+                        })}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+interface DayViewProps {
+  date: Date
+  events: CalendarEvent[]
+  onEventClick?: (event: CalendarEvent) => void
+}
+
+function DayView({ date, events, onEventClick }: DayViewProps) {
+  const dayEvents = getEventsForDate(date, events)
+  const hours = Array.from({ length: 24 }, (_, i) => i)
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex-1 overflow-auto">
+        {hours.map((hour) => {
+          const hourEvents = dayEvents.filter((event) => {
+            if (event.allDay) return hour === 0
+            const eventHour = event.start.getHours()
+            return eventHour === hour
+          })
+
+          return (
+            <div key={hour} className="flex border-b min-h-[60px]">
+              <div className="w-20 p-2 text-sm text-muted-foreground border-r">
+                {hour === 0
+                  ? "12 AM"
+                  : hour < 12
+                  ? `${hour} AM`
+                  : hour === 12
+                  ? "12 PM"
+                  : `${hour - 12} PM`}
+              </div>
+              <div className="flex-1 p-2 space-y-2">
+                {hourEvents.map((event) => (
+                  <div
+                    key={event.id}
+                    className={cn(
+                      "px-3 py-2 rounded cursor-pointer hover:opacity-80",
+                      event.color || DEFAULT_EVENT_COLOR
+                    )}
+                    style={
+                      event.color && event.color.startsWith("#")
+                        ? { backgroundColor: event.color }
+                        : undefined
+                    }
+                    onClick={() => onEventClick?.(event)}
+                  >
+                    <div className="font-medium">{event.title}</div>
+                    {!event.allDay && (
+                      <div className="text-xs opacity-90 mt-1">
+                        {event.start.toLocaleTimeString("default", {
+                          hour: "numeric",
+                          minute: "2-digit",
+                        })}
+                        {event.end &&
+                          ` - ${event.end.toLocaleTimeString("default", {
+                            hour: "numeric",
+                            minute: "2-digit",
+                          })}`}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export { CalendarView }