@object-ui/components 0.3.0

package/src/renderers/overlay/sheet.tsx

@@ -0,0 +1,68 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { SheetSchema } from '@object-ui/types';
+import { 
+  Sheet, 
+  SheetTrigger, 
+  SheetContent, 
+  SheetHeader, 
+  SheetFooter, 
+  SheetTitle, 
+  SheetDescription
+} from '../../ui';
+import { renderChildren } from '../../lib/utils';
+
+ComponentRegistry.register('sheet', 
+  ({ schema, className, ...props }: { schema: SheetSchema; className?: string; [key: string]: any }) => (
+    <Sheet modal={schema.modal} defaultOpen={schema.defaultOpen} {...props}>
+      <SheetTrigger asChild>
+        {renderChildren(schema.trigger)}
+      </SheetTrigger>
+      <SheetContent side={schema.side || 'right'} className={className}>
+        <SheetHeader>
+          {schema.title && <SheetTitle>{schema.title}</SheetTitle>}
+          {schema.description && <SheetDescription>{schema.description}</SheetDescription>}
+        </SheetHeader>
+        {renderChildren(schema.content)}
+        {schema.footer && (
+          <SheetFooter>
+            {renderChildren(schema.footer)}
+          </SheetFooter>
+        )}
+      </SheetContent>
+    </Sheet>
+  ),
+  {
+    label: 'Sheet',
+    inputs: [
+      { name: 'title', type: 'string', label: 'Title' },
+      { name: 'description', type: 'string', label: 'Description' },
+      { name: 'side', type: 'enum', enum: ['top', 'right', 'bottom', 'left'], defaultValue: 'right', label: 'Side' },
+      { name: 'modal', type: 'boolean', label: 'Modal', defaultValue: true },
+       { name: 'defaultOpen', type: 'boolean', label: 'Default Open' },
+      { 
+        name: 'trigger', 
+        type: 'slot', 
+        label: 'Trigger',
+      },
+      { 
+        name: 'content', 
+        type: 'slot', 
+        label: 'Content', 
+      },
+       { 
+        name: 'footer', 
+        type: 'slot', 
+        label: 'Footer' 
+      },
+      { name: 'className', type: 'string', label: 'Content CSS Class' }
+    ],
+    defaultProps: {
+      title: 'Sheet Title',
+      description: 'Sheet description',
+      side: 'right',
+      modal: true,
+      trigger: [{ type: 'button', label: 'Open Sheet' }],
+      content: [{ type: 'text', content: 'Sheet content goes here' }]
+    }
+  }
+);

package/src/renderers/overlay/tooltip.tsx

@@ -0,0 +1,58 @@
+import { ComponentRegistry } from '@object-ui/core';
+import type { TooltipSchema } from '@object-ui/types';
+import { 
+  TooltipProvider,
+  Tooltip, 
+  TooltipTrigger, 
+  TooltipContent 
+} from '../../ui';
+import { renderChildren } from '../../lib/utils';
+
+// Helper to ensure provider exists if not already present at app root
+// For now assuming provider is at root or we just wrap it here.
+// Wrapping here is safer for isolated usage.
+
+ComponentRegistry.register('tooltip', 
+  ({ schema, className, ...props }: { schema: TooltipSchema; className?: string; [key: string]: any }) => (
+    <TooltipProvider delayDuration={schema.delayDuration}>
+      <Tooltip {...props}>
+        <TooltipTrigger asChild>
+          {renderChildren(schema.trigger)}
+        </TooltipTrigger>
+        <TooltipContent side={schema.side} align={schema.align} className={className}>
+           {(schema.content || renderChildren(schema.body)) as any}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  ),
+  {
+    label: 'Tooltip',
+    inputs: [
+      { name: 'delayDuration', type: 'number', label: 'Delay Duration', defaultValue: 700 },
+      { name: 'side', type: 'enum', enum: ['top', 'right', 'bottom', 'left'], label: 'Side' },
+      { name: 'align', type: 'enum', enum: ['start', 'center', 'end'], label: 'Align' },
+      { 
+        name: 'trigger', 
+        type: 'slot', 
+        label: 'Trigger',
+      },
+      { 
+        name: 'content', 
+        type: 'string', 
+        label: 'Content Text', 
+      },
+      { 
+        name: 'body', 
+        type: 'slot', 
+        label: 'Rich Content' 
+      },
+      { name: 'className', type: 'string', label: 'Content CSS Class' }
+    ],
+    defaultProps: {
+      trigger: [{ type: 'button', label: 'Hover me', variant: 'outline' }],
+      content: 'Tooltip content',
+      delayDuration: 700,
+      side: 'top'
+    }
+  }
+);

package/src/ui/accordion.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/ui/alert-dialog.tsx

@@ -0,0 +1,155 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "../lib/utils"
+import { buttonVariants } from "./button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

package/src/ui/alert.tsx

@@ -0,0 +1,78 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-r-lg border-l-4 px-4 py-4 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current transition-all duration-300 backdrop-blur-md overflow-hidden group/alert",
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-slate-950/80 border-l-cyan-500 border-y border-r border-y-cyan-900/30 border-r-cyan-900/30 text-cyan-100",
+          "shadow-[0_0_20px_-5px_rgba(6,182,212,0.2)]",
+          "[&>svg]:text-cyan-400 [&>svg]:drop-shadow-[0_0_8px_rgba(6,182,212,0.6)]",
+          "hover:shadow-[0_0_30px_-5px_rgba(6,182,212,0.4)] hover:bg-slate-900/90",
+          "after:absolute after:inset-0 after:bg-linear-to-r after:from-cyan-500/10 after:to-transparent after:opacity-0 after:transition-opacity hover:after:opacity-100 after:pointer-events-none"
+        ],
+        destructive: [
+          "bg-red-950/80 border-l-red-600 border-y border-r border-y-red-900/30 border-r-red-900/30 text-red-100",
+          "shadow-[0_0_20px_-5px_rgba(239,68,68,0.2)]",
+          "[&>svg]:text-red-500 [&>svg]:drop-shadow-[0_0_8px_rgba(239,68,68,0.6)]",
+          "hover:shadow-[0_0_30px_-5px_rgba(239,68,68,0.4)] hover:bg-red-950/90",
+           "after:absolute after:inset-0 after:bg-linear-to-r after:from-red-500/10 after:to-transparent after:opacity-0 after:transition-opacity hover:after:opacity-100 after:pointer-events-none"
+        ],
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-mono font-bold tracking-widest uppercase text-xs mb-1 drop-shadow-[0_0_2px_currentColor]",
+        "group-[.destructive]/alert:text-red-400 group-[.default]/alert:text-cyan-400",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed font-sans opacity-90",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

package/src/ui/aspect-ratio.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }

package/src/ui/avatar.tsx

@@ -0,0 +1,51 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "../lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

package/src/ui/badge.tsx

@@ -0,0 +1,46 @@
+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 badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-sm border px-2.5 py-0.5 text-[10px] font-mono font-bold uppercase tracking-widest w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1.5 [&>svg]:pointer-events-none focus-visible:border-cyan-500 focus-visible:ring-cyan-500/50 focus-visible:ring-[1px] transition-all duration-300 overflow-hidden backdrop-blur-sm select-none",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-cyan-500/50 bg-cyan-950/40 text-cyan-300 shadow-[0_0_10px_-4px_rgba(6,182,212,0.6)] [a&]:hover:bg-cyan-900/60 [a&]:hover:shadow-[0_0_15px_-2px_rgba(6,182,212,0.8)] [a&]:hover:border-cyan-400",
+        secondary:
+          "border-slate-700 bg-slate-800/60 text-slate-300 shadow-sm [a&]:hover:bg-slate-700/80 [a&]:hover:text-slate-200",
+        destructive:
+          "border-red-500/40 bg-red-950/40 text-red-400 shadow-[0_0_10px_-4px_rgba(239,68,68,0.6)] [a&]:hover:bg-red-900/60 [a&]:hover:border-red-400 [a&]:hover:shadow-[0_0_15px_-2px_rgba(239,68,68,0.8)]",
+        outline:
+          "text-cyan-400 border-cyan-800 bg-transparent shadow-[inset_0_0_5px_rgba(6,182,212,0.1)] [a&]:hover:bg-cyan-950/30 [a&]:hover:border-cyan-500 [a&]:hover:text-cyan-200 [a&]:hover:shadow-[0_0_10px_-5px_cyan]",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/src/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}