@object-ui/components 0.3.0

package/src/ui/skeleton.tsx

@@ -0,0 +1,20 @@
+import { cn } from "../lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn(
+        "relative overflow-hidden rounded-md bg-slate-900/50 border border-slate-800/50 backdrop-blur-sm",
+        "after:absolute after:inset-0 after:-translate-x-full after:animate-[shimmer_1.5s_infinite] after:bg-linear-to-r after:from-transparent after:via-cyan-900/20 after:to-transparent",
+        className
+      )}
+      {...props}
+    >
+        {/* Optional tech pattern overlay for large skeletons */}
+        <div className="absolute inset-0 bg-[linear-gradient(45deg,transparent_25%,rgba(6,182,212,0.02)_50%,transparent_75%,transparent_100%)] bg-[size:8px_8px] opacity-50" />
+    </div>
+  )
+}
+
+export { Skeleton }

package/src/ui/slider.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "../lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }

package/src/ui/sonner.tsx

@@ -0,0 +1,43 @@
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-slate-950/90 group-[.toaster]:backdrop-blur-xl group-[.toaster]:text-cyan-100 group-[.toaster]:border-slate-800 group-[.toaster]:shadow-[0_0_30px_-10px_rgba(0,0,0,0.5)] transition-all duration-30 data-[type=success]:border-emerald-500/50 data-[type=success]:shadow-[0_0_20px_-5px_rgba(16,185,129,0.2)] data-[type=error]:border-red-500/50 data-[type=error]:shadow-[0_0_20px_-5px_rgba(239,68,68,0.2)] data-[type=info]:border-cyan-500/50 data-[type=info]:shadow-[0_0_20px_-5px_rgba(6,182,212,0.2)] data-[type=warning]:border-amber-500/50 data-[type=warning]:shadow-[0_0_20px_-5px_rgba(245,158,11,0.2)]",
+          description: "group-[.toast]:text-slate-400 group-[.toast]:font-mono group-[.toast]:text-xs",
+          actionButton:
+            "group-[.toast]:bg-cyan-600 group-[.toast]:text-white group-[.toast]:font-bold group-[.toast]:rounded-sm group-[.toast]:shadow-[0_0_10px_cyan]",
+          cancelButton:
+            "group-[.toast]:bg-slate-800 group-[.toast]:text-slate-400 group-[.toast]:rounded-sm",
+          title: "group-[.toast]:font-mono group-[.toast]:uppercase group-[.toast]:tracking-widest group-[.toast]:font-bold group-[.toast]:text-cyan-300 group-[.toast]:text-xs group-[.toast]:data-[type=error]:text-red-400 group-[.toast]:data-[type=success]:text-emerald-400",
+          icon: "group-[.toast]:data-[type=success]:text-emerald-400 group-[.toast]:data-[type=error]:text-red-400 group-[.toast]:data-[type=info]:text-cyan-400 group-[.toast]:data-[type=warning]:text-amber-400",
+        },
+      }}
+      icons={{
+        success: <CircleCheckIcon className="size-5 drop-shadow-[0_0_8px_rgba(16,185,129,0.5)]" />,
+        info: <InfoIcon className="size-5 drop-shadow-[0_0_8px_rgba(6,182,212,0.5)]" />,
+        warning: <TriangleAlertIcon className="size-5 drop-shadow-[0_0_8px_rgba(245,158,11,0.5)]" />,
+        error: <OctagonXIcon className="size-5 drop-shadow-[0_0_8px_rgba(239,68,68,0.5)]" />,
+        loading: <Loader2Icon className="size-5 animate-spin text-cyan-500" />,
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/src/ui/spinner.tsx

@@ -0,0 +1,38 @@
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+function Spinner({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="status"
+      aria-label="Loading"
+      className={cn("relative flex items-center justify-center shrink-0", className)}
+      {...props}
+    >
+      <div className="relative aspect-square h-full w-full min-w-[1em] min-h-[1em]">
+          {/* Outer Atmosphere / Fire (Fast Spin) */}
+          <div className="absolute inset-0 rounded-full border-[15%] border-transparent border-t-orange-500 border-r-red-600 animate-[spin_0.8s_linear_infinite] shadow-[0_0_15px_-4px_rgba(234,88,12,0.8)]" 
+               style={{ borderWidth: "2px" }} 
+          />
+          
+          {/* Turbulence Layer (Reverse Spin) */}
+          <div className="absolute inset-[10%] rounded-full border-[15%] border-transparent border-b-yellow-400/80 border-l-orange-500/80 animate-[spin_1.5s_ease-in-out_infinite_reverse]" 
+               style={{ borderWidth: "2px" }}
+          />
+
+          {/* Core Planet (Internal) */}
+          <div className="absolute inset-[25%] rounded-full overflow-hidden bg-slate-950 shadow-[inset_0_0_4px_rgba(0,0,0,0.8)]">
+               {/* Molten Core Texture (Rotating) */}
+               <div className="absolute top-[-50%] left-[-50%] w-[200%] h-[200%] animate-[spin_3s_linear_infinite]">
+                  <div className="w-full h-full bg-[conic-gradient(from_180deg,#1e293b_0deg,#0e7490_80deg,#7c3aed_160deg,#be123c_240deg,#ea580c_300deg,#1e293b_360deg)] opacity-90 blur-[1px]" />
+               </div>
+               
+              {/* Surface Reflection & Shadow (Spherical look) */}
+               <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.4)_0%,transparent_50%,rgba(0,0,0,0.9)_100%)] z-10" />
+          </div>
+      </div>
+    </div>
+  )
+}
+
+export { Spinner }

package/src/ui/switch.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "../lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/ui/table.tsx

@@ -0,0 +1,120 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto rounded-md border border-slate-800/60 bg-slate-950/40 backdrop-blur-sm shadow-[0_0_20px_-10px_rgba(6,182,212,0.1)]"
+    >
+      {/* Decorative lines */}
+      <div className="absolute top-0 left-0 w-full h-[1px] bg-linear-to-r from-transparent via-cyan-500/50 to-transparent opacity-50" />
+      <div className="absolute bottom-0 left-0 w-full h-[1px] bg-linear-to-r from-transparent via-cyan-500/50 to-transparent opacity-50" />
+      
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm border-collapse", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b [&_tr]:border-slate-800", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-slate-900/80 border-t border-slate-800 font-medium [&>tr]:last:border-b-0 text-cyan-200",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b border-slate-800/60 transition-colors duration-200",
+        "hover:bg-cyan-950/20 hover:shadow-[inset_0_0_10px_-5px_cyan]",
+        "data-[state=selected]:bg-cyan-950/40 data-[state=selected]:border-cyan-500/30",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-4 text-left align-middle font-mono text-xs font-bold uppercase tracking-widest text-cyan-500/80 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-4 align-middle whitespace-nowrap text-slate-400 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src/ui/tabs.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "../lib/utils"
+
+const Tabs = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Root
+    ref={ref}
+    data-slot="tabs"
+    className={cn("flex flex-col gap-2", className)}
+    {...props}
+  />
+))
+Tabs.displayName = TabsPrimitive.Root.displayName
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    data-slot="tabs-list"
+    className={cn(
+      "bg-muted/50 border border-white/5 backdrop-blur-sm inline-flex h-10 items-center justify-center rounded-lg p-1 relative overflow-hidden",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    data-slot="tabs-trigger"
+    className={cn(
+      "relative z-10 inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      "data-[state=active]:text-cyan-500 dark:data-[state=active]:text-cyan-400",
+      "text-muted-foreground hover:text-foreground/80",
+      "group overflow-hidden",
+      className
+    )}
+    {...props}
+  >
+    <span className="relative z-10 flex items-center gap-2">{children}</span>
+    
+    {/* Active State: Background Glow */}
+    <span className="absolute inset-0 -z-10 bg-cyan-500/10 opacity-0 transition-opacity duration-300 group-data-[state=active]:opacity-100" />
+    
+    {/* Active State: Bottom Scanner Line */}
+    <span className="absolute bottom-0 left-0 h-[2px] w-full bg-cyan-500 scale-x-0 transition-transform duration-300 ease-out group-data-[state=active]:scale-x-100 shadow-[0_0_10px_#06b6d4]" />
+    
+    {/* Active State: Particle/Sparkle Simulation (Two rotating glows) */}
+    <span className="absolute -top-[50%] -left-[50%] w-[200%] h-[200%] bg-[radial-gradient(circle,rgba(6,182,212,0.1)_0%,transparent_50%)] opacity-0 group-data-[state=active]:opacity-100 group-data-[state=active]:animate-[spin_4s_linear_infinite]" />
+    
+  </TabsPrimitive.Trigger>
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    data-slot="tabs-content"
+    className={cn(
+      "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 mt-2",
+      // Add a subtle fade-in animation
+      "animate-in fade-in-0 zoom-in-95 duration-200",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/src/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/ui/timeline.tsx

@@ -0,0 +1,266 @@
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+const Timeline = React.forwardRef<
+  HTMLOListElement,
+  React.HTMLAttributes<HTMLOListElement>
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn("relative border-l border-gray-200", className)}
+    {...props}
+  />
+))
+Timeline.displayName = "Timeline"
+
+const TimelineItem = React.forwardRef<
+  HTMLLIElement,
+  React.HTMLAttributes<HTMLLIElement>
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("mb-10 ml-6", className)}
+    {...props}
+  />
+))
+TimelineItem.displayName = "TimelineItem"
+
+const TimelineMarker = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    variant?: "default" | "success" | "warning" | "danger" | "info"
+  }
+>(({ className, variant = "default", ...props }, ref) => {
+  const variantClasses = {
+    default: "bg-gray-200 border-gray-300",
+    success: "bg-green-200 border-green-500",
+    warning: "bg-yellow-200 border-yellow-500",
+    danger: "bg-red-200 border-red-500",
+    info: "bg-blue-200 border-blue-500",
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "absolute -left-3 w-6 h-6 rounded-full border-2 flex items-center justify-center",
+        variantClasses[variant],
+        className
+      )}
+      {...props}
+    />
+  )
+})
+TimelineMarker.displayName = "TimelineMarker"
+
+const TimelineContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={className}
+    {...props}
+  />
+))
+TimelineContent.displayName = "TimelineContent"
+
+const TimelineTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold text-lg mb-1", className)}
+    {...props}
+  />
+))
+TimelineTitle.displayName = "TimelineTitle"
+
+const TimelineTime = React.forwardRef<
+  HTMLTimeElement,
+  React.TimeHTMLAttributes<HTMLTimeElement>
+>(({ className, ...props }, ref) => (
+  <time
+    ref={ref}
+    className={cn("text-sm font-normal text-gray-500 mb-2 block", className)}
+    {...props}
+  />
+))
+TimelineTime.displayName = "TimelineTime"
+
+const TimelineDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-base text-gray-700", className)}
+    {...props}
+  />
+))
+TimelineDescription.displayName = "TimelineDescription"
+
+// Horizontal Timeline Components
+const TimelineHorizontal = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("relative flex overflow-x-auto py-8", className)}
+    {...props}
+  />
+))
+TimelineHorizontal.displayName = "TimelineHorizontal"
+
+const TimelineHorizontalItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex-shrink-0 w-64 relative", className)}
+    {...props}
+  />
+))
+TimelineHorizontalItem.displayName = "TimelineHorizontalItem"
+
+// Gantt-style Timeline Components (Airtable-like)
+const TimelineGantt = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("relative w-full border rounded-lg overflow-hidden", className)}
+    {...props}
+  />
+))
+TimelineGantt.displayName = "TimelineGantt"
+
+const TimelineGanttHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex border-b bg-gray-50", className)}
+    {...props}
+  />
+))
+TimelineGanttHeader.displayName = "TimelineGanttHeader"
+
+const TimelineGanttRowLabels = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("w-48 border-r bg-white", className)}
+    {...props}
+  />
+))
+TimelineGanttRowLabels.displayName = "TimelineGanttRowLabels"
+
+const TimelineGanttGrid = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex-1 overflow-x-auto", className)}
+    {...props}
+  />
+))
+TimelineGanttGrid.displayName = "TimelineGanttGrid"
+
+const TimelineGanttRow = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center border-b min-h-12", className)}
+    {...props}
+  />
+))
+TimelineGanttRow.displayName = "TimelineGanttRow"
+
+const TimelineGanttLabel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("px-4 py-2 font-medium text-sm truncate", className)}
+    {...props}
+  />
+))
+TimelineGanttLabel.displayName = "TimelineGanttLabel"
+
+const TimelineGanttBar = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    start?: number
+    width?: number
+    variant?: "default" | "success" | "warning" | "danger" | "info"
+  }
+>(({ className, start = 0, width = 100, variant = "default", ...props }, ref) => {
+  const variantClasses = {
+    default: "bg-blue-500 hover:bg-blue-600",
+    success: "bg-green-500 hover:bg-green-600",
+    warning: "bg-yellow-500 hover:bg-yellow-600",
+    danger: "bg-red-500 hover:bg-red-600",
+    info: "bg-purple-500 hover:bg-purple-600",
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "absolute h-8 rounded-md transition-colors cursor-pointer",
+        variantClasses[variant],
+        className
+      )}
+      style={{
+        left: `${start}%`,
+        width: `${width}%`,
+      }}
+      {...props}
+    />
+  )
+})
+TimelineGanttBar.displayName = "TimelineGanttBar"
+
+const TimelineGanttBarContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("px-2 py-1 text-white text-xs font-medium truncate", className)}
+    {...props}
+  />
+))
+TimelineGanttBarContent.displayName = "TimelineGanttBarContent"
+
+export {
+  Timeline,
+  TimelineItem,
+  TimelineMarker,
+  TimelineContent,
+  TimelineTitle,
+  TimelineTime,
+  TimelineDescription,
+  TimelineHorizontal,
+  TimelineHorizontalItem,
+  TimelineGantt,
+  TimelineGanttHeader,
+  TimelineGanttRowLabels,
+  TimelineGanttGrid,
+  TimelineGanttRow,
+  TimelineGanttLabel,
+  TimelineGanttBar,
+  TimelineGanttBarContent,
+}