@gram-ai/elements 1.27.3 → 1.27.5

package/src/components/ui/avatar.tsx

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

package/src/components/ui/button.tsx

@@ -1,18 +1,18 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { type VariantProps } from 'class-variance-authority'
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps } from "class-variance-authority";
 
-import { cn } from '@/lib/utils'
-import { buttonVariants } from './buttonVariants'
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "./buttonVariants";
 
 const Button = React.forwardRef<
   HTMLButtonElement,
-  React.ComponentProps<'button'> &
+  React.ComponentProps<"button"> &
     VariantProps<typeof buttonVariants> & {
-      asChild?: boolean
+      asChild?: boolean;
     }
 >(({ className, variant, size, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : 'button'
+  const Comp = asChild ? Slot : "button";
   return (
     <Comp
       data-slot="button"
@@ -20,8 +20,8 @@ const Button = React.forwardRef<
       ref={ref}
       {...props}
     />
-  )
-})
-Button.displayName = 'Button'
+  );
+});
+Button.displayName = "Button";
 
-export { Button }
+export { Button };

package/src/components/ui/buttonVariants.ts

@@ -1,33 +1,33 @@
-import { cva } from 'class-variance-authority'
+import { cva } from "class-variance-authority";
 
 export const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md 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:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost:
-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline',
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
-        'icon-sm': 'size-8',
-        'icon-lg': 'size-10',
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
     },
-  }
-)
+  },
+);

package/src/components/ui/calendar.tsx

@@ -1,62 +1,62 @@
-import * as React from 'react'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/lib/utils";
 
 export interface CalendarProps {
   /** Selected date range */
-  selected?: { start: Date | null; end: Date | null }
+  selected?: { start: Date | null; end: Date | null };
   /** Called when a date or range is selected */
-  onSelect?: (range: { start: Date; end: Date | null }) => void
+  onSelect?: (range: { start: Date; end: Date | null }) => void;
   /** Whether range selection is enabled */
-  mode?: 'single' | 'range'
+  mode?: "single" | "range";
   /** Disable dates before this */
-  minDate?: Date
+  minDate?: Date;
   /** Disable dates after this */
-  maxDate?: Date
+  maxDate?: Date;
   /** Additional className */
-  className?: string
+  className?: string;
 }
 
 interface CalendarDay {
-  date: Date
-  isCurrentMonth: boolean
-  isToday: boolean
-  isSelected: boolean
-  isInRange: boolean
-  isRangeStart: boolean
-  isRangeEnd: boolean
-  isDisabled: boolean
+  date: Date;
+  isCurrentMonth: boolean;
+  isToday: boolean;
+  isSelected: boolean;
+  isInRange: boolean;
+  isRangeStart: boolean;
+  isRangeEnd: boolean;
+  isDisabled: boolean;
 }
 
-const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+const WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 const MONTHS = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-]
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
 
 function isSameDay(a: Date, b: Date): boolean {
   return (
     a.getFullYear() === b.getFullYear() &&
     a.getMonth() === b.getMonth() &&
     a.getDate() === b.getDate()
-  )
+  );
 }
 
 function isInRange(date: Date, start: Date | null, end: Date | null): boolean {
-  if (!start || !end) return false
-  const time = date.getTime()
-  return time >= start.getTime() && time <= end.getTime()
+  if (!start || !end) return false;
+  const time = date.getTime();
+  return time >= start.getTime() && time <= end.getTime();
 }
 
 function getCalendarDays(
@@ -64,35 +64,35 @@ function getCalendarDays(
   month: number,
   selected: { start: Date | null; end: Date | null },
   minDate?: Date,
-  maxDate?: Date
+  maxDate?: Date,
 ): CalendarDay[] {
-  const today = new Date()
-  const firstDay = new Date(year, month, 1)
-  const lastDay = new Date(year, month + 1, 0)
-  const startPadding = firstDay.getDay()
-  const days: CalendarDay[] = []
+  const today = new Date();
+  const firstDay = new Date(year, month, 1);
+  const lastDay = new Date(year, month + 1, 0);
+  const startPadding = firstDay.getDay();
+  const days: CalendarDay[] = [];
 
   // Add days from previous month
-  const prevMonthLastDay = new Date(year, month, 0)
+  const prevMonthLastDay = new Date(year, month, 0);
   for (let i = startPadding - 1; i >= 0; i--) {
-    const date = new Date(year, month - 1, prevMonthLastDay.getDate() - i)
-    days.push(createDay(date, false, today, selected, minDate, maxDate))
+    const date = new Date(year, month - 1, prevMonthLastDay.getDate() - i);
+    days.push(createDay(date, false, today, selected, minDate, maxDate));
   }
 
   // Add days from current month
   for (let d = 1; d <= lastDay.getDate(); d++) {
-    const date = new Date(year, month, d)
-    days.push(createDay(date, true, today, selected, minDate, maxDate))
+    const date = new Date(year, month, d);
+    days.push(createDay(date, true, today, selected, minDate, maxDate));
   }
 
   // Add days from next month to fill the grid
-  const remaining = 42 - days.length // 6 rows of 7 days
+  const remaining = 42 - days.length; // 6 rows of 7 days
   for (let d = 1; d <= remaining; d++) {
-    const date = new Date(year, month + 1, d)
-    days.push(createDay(date, false, today, selected, minDate, maxDate))
+    const date = new Date(year, month + 1, d);
+    days.push(createDay(date, false, today, selected, minDate, maxDate));
   }
 
-  return days
+  return days;
 }
 
 function createDay(
@@ -101,15 +101,15 @@ function createDay(
   today: Date,
   selected: { start: Date | null; end: Date | null },
   minDate?: Date,
-  maxDate?: Date
+  maxDate?: Date,
 ): CalendarDay {
-  const isStart = selected.start ? isSameDay(date, selected.start) : false
-  const isEnd = selected.end ? isSameDay(date, selected.end) : false
-  const inRange = isInRange(date, selected.start, selected.end)
+  const isStart = selected.start ? isSameDay(date, selected.start) : false;
+  const isEnd = selected.end ? isSameDay(date, selected.end) : false;
+  const inRange = isInRange(date, selected.start, selected.end);
 
-  let isDisabled = false
-  if (minDate && date < minDate) isDisabled = true
-  if (maxDate && date > maxDate) isDisabled = true
+  let isDisabled = false;
+  if (minDate && date < minDate) isDisabled = true;
+  if (maxDate && date > maxDate) isDisabled = true;
 
   return {
     date,
@@ -120,83 +120,83 @@ function createDay(
     isRangeStart: isStart,
     isRangeEnd: isEnd,
     isDisabled,
-  }
+  };
 }
 
 function Calendar({
   selected = { start: null, end: null },
   onSelect,
-  mode = 'range',
+  mode = "range",
   minDate,
   maxDate,
   className,
 }: CalendarProps) {
   const [viewDate, setViewDate] = React.useState(() => {
-    if (selected.start) return new Date(selected.start)
-    return new Date()
-  })
+    if (selected.start) return new Date(selected.start);
+    return new Date();
+  });
 
   const [rangeSelection, setRangeSelection] = React.useState<{
-    start: Date | null
-    end: Date | null
-  }>(selected)
+    start: Date | null;
+    end: Date | null;
+  }>(selected);
 
   React.useEffect(() => {
-    setRangeSelection(selected)
-  }, [selected])
+    setRangeSelection(selected);
+  }, [selected]);
 
-  const year = viewDate.getFullYear()
-  const month = viewDate.getMonth()
-  const days = getCalendarDays(year, month, rangeSelection, minDate, maxDate)
+  const year = viewDate.getFullYear();
+  const month = viewDate.getMonth();
+  const days = getCalendarDays(year, month, rangeSelection, minDate, maxDate);
 
   const goToPreviousMonth = () => {
-    setViewDate(new Date(year, month - 1, 1))
-  }
+    setViewDate(new Date(year, month - 1, 1));
+  };
 
   const goToNextMonth = () => {
-    setViewDate(new Date(year, month + 1, 1))
-  }
+    setViewDate(new Date(year, month + 1, 1));
+  };
 
   const handleDayClick = (day: CalendarDay) => {
-    if (day.isDisabled) return
+    if (day.isDisabled) return;
 
-    if (mode === 'single') {
-      const newSelection = { start: day.date, end: day.date }
-      setRangeSelection(newSelection)
-      onSelect?.(newSelection)
-      return
+    if (mode === "single") {
+      const newSelection = { start: day.date, end: day.date };
+      setRangeSelection(newSelection);
+      onSelect?.(newSelection);
+      return;
     }
 
     // Range mode
     if (!rangeSelection.start || (rangeSelection.start && rangeSelection.end)) {
       // Start new range
-      const newSelection = { start: day.date, end: null }
-      setRangeSelection(newSelection)
-      onSelect?.(newSelection as { start: Date; end: Date | null })
+      const newSelection = { start: day.date, end: null };
+      setRangeSelection(newSelection);
+      onSelect?.(newSelection as { start: Date; end: Date | null });
     } else {
       // Complete range
-      let start = rangeSelection.start
-      let end = day.date
+      let start = rangeSelection.start;
+      let end = day.date;
 
       // Ensure start is before end
       if (end < start) {
-        ;[start, end] = [end, start]
+        [start, end] = [end, start];
       }
 
-      const newSelection = { start, end }
-      setRangeSelection(newSelection)
-      onSelect?.(newSelection)
+      const newSelection = { start, end };
+      setRangeSelection(newSelection);
+      onSelect?.(newSelection);
     }
-  }
+  };
 
   return (
-    <div data-slot="calendar" className={cn('w-[280px] p-3', className)}>
+    <div data-slot="calendar" className={cn("w-[280px] p-3", className)}>
       {/* Header */}
       <div className="mb-2 flex items-center justify-between">
         <button
           type="button"
           onClick={goToPreviousMonth}
-          className="hover:bg-accent inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors"
+          className="inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-accent"
           aria-label="Previous month"
         >
           <ChevronLeft className="h-4 w-4" />
@@ -207,7 +207,7 @@ function Calendar({
         <button
           type="button"
           onClick={goToNextMonth}
-          className="hover:bg-accent inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors"
+          className="inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-accent"
           aria-label="Next month"
         >
           <ChevronRight className="h-4 w-4" />
@@ -219,7 +219,7 @@ function Calendar({
         {WEEKDAYS.map((day) => (
           <div
             key={day}
-            className="text-muted-foreground flex h-8 w-8 items-center justify-center text-center text-xs font-medium"
+            className="flex h-8 w-8 items-center justify-center text-center text-xs font-medium text-muted-foreground"
           >
             {day}
           </div>
@@ -235,19 +235,19 @@ function Calendar({
             disabled={day.isDisabled}
             onClick={() => handleDayClick(day)}
             className={cn(
-              'inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors',
+              "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors",
               // Base states
-              !day.isCurrentMonth && 'text-muted-foreground/50',
-              day.isDisabled && 'cursor-not-allowed opacity-30',
-              !day.isDisabled && !day.isSelected && 'hover:bg-accent',
+              !day.isCurrentMonth && "text-muted-foreground/50",
+              day.isDisabled && "cursor-not-allowed opacity-30",
+              !day.isDisabled && !day.isSelected && "hover:bg-accent",
               // Today
-              day.isToday && !day.isSelected && 'border-primary border',
+              day.isToday && !day.isSelected && "border border-primary",
               // Selected states
-              day.isSelected && 'bg-primary text-primary-foreground',
-              day.isRangeStart && 'rounded-r-none',
-              day.isRangeEnd && 'rounded-l-none',
+              day.isSelected && "bg-primary text-primary-foreground",
+              day.isRangeStart && "rounded-r-none",
+              day.isRangeEnd && "rounded-l-none",
               // In range
-              day.isInRange && 'bg-primary/20 rounded-none'
+              day.isInRange && "rounded-none bg-primary/20",
             )}
           >
             {day.date.getDate()}
@@ -255,8 +255,8 @@ function Calendar({
         ))}
       </div>
     </div>
-  )
+  );
 }
-Calendar.displayName = 'Calendar'
+Calendar.displayName = "Calendar";
 
-export { Calendar }
+export { Calendar };