@object-ui/components 0.3.0 → 0.3.1

package/src/ui/alert-dialog.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import * as React from "react"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
 

package/src/ui/alert.tsx

@@ -1,27 +1,24 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 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",
+  "relative w-full rounded-lg border px-4 py-4 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
   {
     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"
-        ],
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
       },
     },
     defaultVariants: {
@@ -49,11 +46,7 @@ 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
-      )}
+      className={cn("mb-1 font-medium leading-none tracking-tight", className)}
       {...props}
     />
   )
@@ -66,10 +59,7 @@ function AlertDescription({
   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
-      )}
+      className={cn("text-sm [&_p]:leading-relaxed", className)}
       {...props}
     />
   )

package/src/ui/aspect-ratio.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 "use client"
 
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"

package/src/ui/avatar.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import * as React from "react"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
 

package/src/ui/badge.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
@@ -5,18 +13,17 @@ 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",
+  "inline-flex items-center justify-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     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",
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
         secondary:
-          "border-slate-700 bg-slate-800/60 text-slate-300 shadow-sm [a&]:hover:bg-slate-700/80 [a&]:hover:text-slate-200",
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         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]",
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
       },
     },
     defaultVariants: {

package/src/ui/breadcrumb.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { ChevronRight, MoreHorizontal } from "lucide-react"

package/src/ui/button-group.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 

package/src/ui/button.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
@@ -5,29 +13,28 @@ 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",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     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",
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
         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)]",
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         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",
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-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",
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
       },
       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",
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+        "icon-sm": "h-8 w-8",
+        "icon-lg": "h-10 w-10",
       },
     },
     defaultVariants: {
@@ -37,29 +44,24 @@ const buttonVariants = cva(
   }
 )
 
-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"
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
 
-  return (
-    <Comp
-      ref={ref}
-      data-slot="button"
-      data-variant={variant}
-      data-size={size}
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-})
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
 Button.displayName = "Button"
 
 export { Button, buttonVariants }

package/src/ui/calendar.tsx

@@ -1,237 +1,94 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 "use client"
 
 import * as React from "react"
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react"
-import {
-  DayPicker,
-  getDefaultClassNames,
-  type DayButton,
-} from "react-day-picker"
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
+import { DayPicker, getDefaultClassNames } from "react-day-picker"
 
 import { cn } from "../lib/utils"
-import { Button, buttonVariants } from "./button"
+import { buttonVariants } from "../ui/button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
 
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
-  captionLayout = "label",
-  buttonVariant = "ghost",
-  formatters,
-  components,
   ...props
-}: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
-}) {
+}: CalendarProps) {
   const defaultClassNames = getDefaultClassNames()
 
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn(
-        "bg-[#0a0a0b] bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-violet-900/20 via-slate-950/80 to-black backdrop-blur-3xl border border-violet-500/20 shadow-[0_0_50px_-12px_rgba(124,58,237,0.25)] rounded-xl group/calendar p-4 [--cell-size:--spacing(9)]",
-        "before:absolute before:inset-0 before:rounded-xl before:bg-[url('https://grainy-gradients.vercel.app/noise.svg')] before:opacity-10 before:pointer-events-none",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
-      )}
-      captionLayout={captionLayout}
-      formatters={{
-        formatMonthDropdown: (date) =>
-          date.toLocaleString("default", { month: "short" }),
-        ...formatters,
-      }}
+      className={cn("p-3", className)}
       classNames={{
-        root: cn("w-fit relative overflow-hidden", defaultClassNames.root),
-        months: cn(
-          "flex gap-4 flex-col md:flex-row relative z-10",
-          defaultClassNames.months
-        ),
-        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
-        nav: cn(
-          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between px-1",
-          defaultClassNames.nav
-        ),
+        root: cn("w-fit relative", defaultClassNames.root),
+        months: cn("flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", defaultClassNames.months),
+        month: cn("space-y-4", defaultClassNames.month),
+        month_caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center absolute right-1", // Adjust as needed
+        
+        // Navigation Buttons
         button_previous: cn(
-          buttonVariants({ variant: "outline", size: "icon-sm" }),
-          "z-20 bg-slate-900/80 border-violet-800/50 text-violet-400 hover:bg-violet-900/40 hover:text-violet-100 hover:border-violet-500 hover:shadow-[0_0_15px_rgba(139,92,246,0.5)] transition-all duration-300 rounded-full",
-          defaultClassNames.button_previous
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1 top-1 z-10"
         ),
         button_next: cn(
-          buttonVariants({ variant: "outline", size: "icon-sm" }),
-          "z-20 bg-slate-900/80 border-violet-800/50 text-violet-400 hover:bg-violet-900/40 hover:text-violet-100 hover:border-violet-500 hover:shadow-[0_0_15px_rgba(139,92,246,0.5)] transition-all duration-300 rounded-full",
-          defaultClassNames.button_next
-        ),
-        month_caption: cn(
-          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size) text-transparent bg-clip-text bg-linear-to-r from-violet-200 via-cyan-200 to-violet-200 font-bold tracking-[0.2em] relative uppercase text-lg",
-          defaultClassNames.month_caption
-        ),
-        dropdowns: cn(
-          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
-          defaultClassNames.dropdowns
-        ),
-        dropdown_root: cn(
-          "relative has-focus:border-violet-500 border border-violet-900/50 shadow-xs has-focus:ring-violet-500/30 has-focus:ring-[2px] rounded-md bg-slate-950 text-violet-200",
-          defaultClassNames.dropdown_root
-        ),
-        dropdown: cn(
-          "absolute bg-slate-950 inset-0 opacity-0",
-          defaultClassNames.dropdown
-        ),
-        caption_label: cn(
-          "select-none font-medium",
-          captionLayout === "label"
-            ? "text-sm"
-            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
-          defaultClassNames.caption_label
-        ),
-        table: "w-full border-collapse",
-        weekdays: cn("flex my-2", defaultClassNames.weekdays),
-        weekday: cn(
-          "text-violet-500/70 rounded-md flex-1 font-mono text-[0.65rem] uppercase tracking-widest select-none pb-2",
-          defaultClassNames.weekday
+           buttonVariants({ variant: "outline" }),
+           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1 top-1 z-10"
         ),
-        week: cn("flex w-full mt-1", defaultClassNames.week),
-        week_number_header: cn(
-          "select-none w-(--cell-size)",
-          defaultClassNames.week_number_header
-        ),
-        week_number: cn(
-          "text-[0.8rem] select-none text-muted-foreground",
-          defaultClassNames.week_number
-        ),
-        day: cn(
-          "relative w-full h-full p-0 text-center group/day aspect-square select-none",
-          defaultClassNames.day
-        ),
-        range_start: cn(
-          "rounded-l-full bg-violet-900/20",
-          defaultClassNames.range_start
-        ),
-        range_middle: cn("rounded-none bg-violet-900/10", defaultClassNames.range_middle),
-        range_end: cn("rounded-r-full bg-violet-900/20", defaultClassNames.range_end),
-        today: cn(
-          "text-cyan-400 font-bold", // Styling handled in DayButton mostly
-          defaultClassNames.today
-        ),
-        outside: cn(
-          "text-slate-800 opacity-30 aria-selected:text-slate-800",
-          defaultClassNames.outside
-        ),
-        disabled: cn(
-          "text-slate-800 opacity-20",
-          defaultClassNames.disabled
+        
+        // Grid
+        month_grid: "w-full border-collapse space-y-1",
+        weekdays: "flex",
+        weekday: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        
+        week: "flex w-full mt-2",
+        
+        // Day Cell (td)
+        day: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        
+        // Day Button
+        day_button: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
         ),
-        hidden: cn("invisible", defaultClassNames.hidden),
+        
+        // States
+        range_end: "day-range-end",
+        selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        today: "bg-accent text-accent-foreground",
+        outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        disabled: "text-muted-foreground opacity-50",
+        range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        hidden: "invisible",
+        
         ...classNames,
       }}
       components={{
-        Root: ({ className, rootRef, ...props }) => {
-          return (
-            <div
-              data-slot="calendar"
-              ref={rootRef}
-              className={cn(className)}
-              {...props}
-            />
-          )
-        },
         Chevron: ({ className, orientation, ...props }) => {
           if (orientation === "left") {
-            return (
-              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            )
+            return <ChevronLeftIcon className={cn("h-4 w-4", className)} {...props} />
           }
-
           if (orientation === "right") {
-            return (
-              <ChevronRightIcon
-                className={cn("size-4", className)}
-                {...props}
-              />
-            )
+            return <ChevronRightIcon className={cn("h-4 w-4", className)} {...props} />
           }
-
-          return (
-            <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          )
+          return <ChevronDownIcon className={cn("h-4 w-4", className)} {...props} />
         },
-        DayButton: CalendarDayButton,
-        WeekNumber: ({ children, ...props }) => {
-          return (
-            <td {...props}>
-              <div className="flex size-(--cell-size) items-center justify-center text-center">
-                {children}
-              </div>
-            </td>
-          )
-        },
-        ...components,
       }}
       {...props}
     />
   )
 }
+Calendar.displayName = "Calendar"
 
-function CalendarDayButton({
-  className,
-  day,
-  modifiers,
-  ...props
-}: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
-
-  const ref = React.useRef<HTMLButtonElement>(null)
-  React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
-
-  return (
-    <Button
-      ref={ref}
-      variant="ghost"
-      size="icon"
-      data-day={day.date.toLocaleDateString()}
-      data-selected-single={
-        modifiers.selected &&
-        !modifiers.range_start &&
-        !modifiers.range_end &&
-        !modifiers.range_middle
-      }
-      data-range-start={modifiers.range_start}
-      data-range-end={modifiers.range_end}
-      data-range-middle={modifiers.range_middle}
-      className={cn(
-        "data-[selected-single=true]:bg-violet-600 data-[selected-single=true]:text-white data-[selected-single=true]:shadow-[0_0_20px_rgba(124,58,237,0.8)] data-[selected-single=true]:border-violet-400 data-[selected-single=true]:scale-110 data-[selected-single=true]:z-10",
-        
-        "data-[range-middle=true]:bg-transparent data-[range-middle=true]:text-violet-200",
-        
-        "data-[range-start=true]:bg-violet-600 data-[range-start=true]:text-white data-[range-start=true]:shadow-[0_0_15px_rgba(124,58,237,0.5)] data-[range-start=true]:z-10",
-        
-        "data-[range-end=true]:bg-violet-600 data-[range-end=true]:text-white data-[range-end=true]:shadow-[0_0_15px_rgba(124,58,237,0.5)] data-[range-end=true]:z-10",
-
-        // Today state (Current Timeline)
-        "data-[today=true]:border data-[today=true]:border-cyan-500/50 data-[today=true]:text-cyan-300 data-[today=true]:shadow-[0_0_10px_rgba(6,182,212,0.3)]",
-        
-        // Base hover & focus
-        "group-data-[focused=true]/day:border-violet-400 group-data-[focused=true]/day:ring-violet-500/50",
-        "hover:bg-violet-900/30 hover:text-white hover:scale-125 hover:z-20 hover:shadow-[0_0_15px_rgba(139,92,246,0.5)] transition-all duration-300",
-        
-        "bg-transparent flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal rounded-full",
-        
-        "group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[2px]",
-        
-        "text-violet-300/80 [&>span]:text-xs [&>span]:opacity-70",
-        defaultClassNames.day,
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Calendar, CalendarDayButton }
+export { Calendar }

package/src/ui/card.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import * as React from "react"
 
 import { cn } from "../lib/utils"

package/src/ui/carousel.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import * as React from "react"
 import useEmblaCarousel, {
   type UseEmblaCarouselType,

package/src/ui/checkbox.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 "use client"
 
 import * as React from "react"

package/src/ui/collapsible.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 
 function Collapsible({