@j3m-quantum/ui 1.0.0 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.cts CHANGED
@@ -25,7 +25,7 @@ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
25
25
  import * as ProgressPrimitive from '@radix-ui/react-progress';
26
26
  import * as TooltipPrimitive from '@radix-ui/react-tooltip';
27
27
  import { ToasterProps } from 'sonner';
28
- import { LucideProps } from 'lucide-react';
28
+ import { LucideProps, LucideIcon } from 'lucide-react';
29
29
  import { Command as Command$1 } from 'cmdk';
30
30
  import * as DialogPrimitive from '@radix-ui/react-dialog';
31
31
  import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -38,6 +38,7 @@ import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
38
38
  import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
39
39
  import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
40
40
  import * as ResizablePrimitive from 'react-resizable-panels';
41
+ export { areIntervalsOverlapping, format, getDay, isSameDay, isSameMonth, isToday, parseISO } from 'date-fns';
41
42
 
42
43
  declare function useIsMobile(): boolean;
43
44
 
@@ -115,6 +116,23 @@ declare function ToggleGroup({ className, variant, size, spacing, children, ...p
115
116
  }): react_jsx_runtime.JSX.Element;
116
117
  declare function ToggleGroupItem({ className, children, variant, size, ...props }: React$1.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
117
118
 
119
+ interface ThemeSwitchProps {
120
+ checked?: boolean;
121
+ defaultChecked?: boolean;
122
+ onCheckedChange?: (checked: boolean) => void;
123
+ disabled?: boolean;
124
+ className?: string;
125
+ /** Size variant */
126
+ size?: "sm" | "default" | "lg";
127
+ }
128
+ /**
129
+ * ThemeSwitch - A toggle switch for light/dark mode with sun/moon icons
130
+ *
131
+ * The thumb displays a sun icon when in light mode (unchecked) and
132
+ * a moon icon when in dark mode (checked).
133
+ */
134
+ declare function ThemeSwitch({ checked, defaultChecked, onCheckedChange, disabled, className, size, }: ThemeSwitchProps): react_jsx_runtime.JSX.Element;
135
+
118
136
  declare function ToolBarCanvas({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
119
137
  declare function ToolBarCanvasDivider({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
120
138
  declare function ToolBarCanvasGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
@@ -223,6 +241,27 @@ declare function Avatar({ className, ...props }: React$1.ComponentProps<typeof A
223
241
  declare function AvatarImage({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Image>): react_jsx_runtime.JSX.Element;
224
242
  declare function AvatarFallback({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Fallback>): react_jsx_runtime.JSX.Element;
225
243
 
244
+ /**
245
+ * User Avatars Dropdown Component
246
+ *
247
+ * A reusable component that displays stacked user avatars with a dropdown
248
+ * for selection. Shows first N avatars with "+X" overflow indicator.
249
+ */
250
+ interface UserAvatarItem {
251
+ id: string;
252
+ name: string;
253
+ image?: string;
254
+ }
255
+ interface UserAvatarsDropdownProps {
256
+ users: UserAvatarItem[];
257
+ selectedUserId: string | null;
258
+ onSelect: (userId: string | null) => void;
259
+ maxVisible?: number;
260
+ label?: string;
261
+ className?: string;
262
+ }
263
+ declare function UserAvatarsDropdown({ users, selectedUserId, onSelect, maxVisible, label, className, }: UserAvatarsDropdownProps): react_jsx_runtime.JSX.Element;
264
+
226
265
  declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
227
266
 
228
267
  declare function Accordion({ ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Root>): react_jsx_runtime.JSX.Element;
@@ -353,7 +392,7 @@ declare function Tooltip({ ...props }: React$1.ComponentProps<typeof TooltipPrim
353
392
  declare function TooltipTrigger({ ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
354
393
  declare function TooltipContent({ className, sideOffset, children, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Content>): react_jsx_runtime.JSX.Element;
355
394
 
356
- declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
395
+ declare const Toaster: ({ theme: themeProp, ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
357
396
 
358
397
  declare function Spinner({ className, ...props }: LucideProps): react_jsx_runtime.JSX.Element;
359
398
 
@@ -406,6 +445,24 @@ declare function CommandSeparator({ className, ...props }: React$1.ComponentProp
406
445
  declare function CommandItem({ className, ...props }: React$1.ComponentProps<typeof Command$1.Item>): react_jsx_runtime.JSX.Element;
407
446
  declare function CommandShortcut({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
408
447
 
448
+ interface SearchTriggerProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
449
+ /** Placeholder text shown in the search button */
450
+ placeholder?: string;
451
+ /** Whether to show the keyboard shortcut hint */
452
+ showShortcut?: boolean;
453
+ /** Custom keyboard shortcut to display (defaults to ⌘K) */
454
+ shortcutKey?: string;
455
+ /** Whether to use the command modifier symbol (⌘ on Mac, Ctrl on others) */
456
+ shortcutModifier?: string;
457
+ }
458
+ declare const SearchTrigger: React$1.ForwardRefExoticComponent<SearchTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
459
+ /**
460
+ * A hook that sets up keyboard shortcut handling for the search trigger.
461
+ * @param onOpen - Callback fired when the shortcut is pressed
462
+ * @param key - The key to listen for (default: "k")
463
+ */
464
+ declare function useSearchShortcut(onOpen: () => void, key?: string): void;
465
+
409
466
  declare function DropdownMenu({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Root>): react_jsx_runtime.JSX.Element;
410
467
  declare function DropdownMenuPortal({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Portal>): react_jsx_runtime.JSX.Element;
411
468
  declare function DropdownMenuTrigger({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
@@ -615,4 +672,615 @@ declare const SectionDescription: React$1.ForwardRefExoticComponent<React$1.HTML
615
672
  declare const SectionContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
616
673
  declare const SectionFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
617
674
 
618
- export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, type ButtonProps, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PlayerCanvas, PlayerCanvasActionButton, PlayerCanvasControls, PlayerCanvasDivider, PlayerCanvasInfo, PlayerCanvasLabel, PlayerCanvasPlayButton, PlayerCanvasProgress, PlayerCanvasSkipButton, PlayerCanvasTitle, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Section, SectionContent, SectionDescription, SectionFooter, SectionHeader, type SectionProps, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolBarCanvas, ToolBarCanvasButton, ToolBarCanvasDivider, ToolBarCanvasGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cardVariants, navigationMenuTriggerStyle, playerCanvasPlayButtonVariants, playerCanvasSkipButtonVariants, sectionVariants, toggleVariants, toolBarCanvasButtonVariants, useFormField, useIsMobile, useSidebar };
675
+ interface BreadcrumbItemType {
676
+ label: string;
677
+ href?: string;
678
+ }
679
+ interface SiteHeaderProps {
680
+ /** Slot for sidebar trigger - use <SidebarTrigger /> from @j3m-quantum/ui */
681
+ trigger?: React$1.ReactNode;
682
+ breadcrumbs?: BreadcrumbItemType[];
683
+ showSearch?: boolean;
684
+ className?: string;
685
+ children?: React$1.ReactNode;
686
+ }
687
+ declare function SiteHeader({ trigger, breadcrumbs, showSearch, className, children }: SiteHeaderProps): react_jsx_runtime.JSX.Element;
688
+
689
+ interface NavItem {
690
+ title: string;
691
+ url: string;
692
+ icon?: LucideIcon;
693
+ isActive?: boolean;
694
+ items?: {
695
+ title: string;
696
+ url: string;
697
+ }[];
698
+ }
699
+ interface NavMainProps {
700
+ items: NavItem[];
701
+ label?: string;
702
+ }
703
+ declare function NavMain({ items, label }: NavMainProps): react_jsx_runtime.JSX.Element;
704
+
705
+ interface NavProject {
706
+ name: string;
707
+ url: string;
708
+ icon: LucideIcon;
709
+ }
710
+ interface NavProjectsProps {
711
+ projects: NavProject[];
712
+ label?: string;
713
+ }
714
+ declare function NavProjects({ projects, label }: NavProjectsProps): react_jsx_runtime.JSX.Element;
715
+
716
+ interface NavSecondaryItem {
717
+ title: string;
718
+ url: string;
719
+ icon: LucideIcon;
720
+ }
721
+ interface NavSecondaryProps extends React$1.ComponentProps<typeof SidebarGroup> {
722
+ items: NavSecondaryItem[];
723
+ }
724
+ declare function NavSecondary({ items, ...props }: NavSecondaryProps): react_jsx_runtime.JSX.Element;
725
+
726
+ interface NavUserProps {
727
+ user: {
728
+ name: string;
729
+ email: string;
730
+ avatar: string;
731
+ };
732
+ }
733
+ declare function NavUser({ user }: NavUserProps): react_jsx_runtime.JSX.Element;
734
+
735
+ declare function SearchForm({ ...props }: React$1.ComponentProps<"form">): react_jsx_runtime.JSX.Element;
736
+
737
+ /**
738
+ * Event Calendar Types
739
+ * Based on big-calendar by Leonardo Ramos (MIT License)
740
+ * https://github.com/lramos33/big-calendar
741
+ *
742
+ * Adapted for J3M UI with Tailwind v4 and design token integration.
743
+ */
744
+ type TEventColor = "blue" | "green" | "red" | "yellow" | "purple" | "orange";
745
+ type TBadgeVariant = "dot" | "colored" | "mixed";
746
+ type TCalendarView = "month" | "week" | "day" | "year" | "agenda";
747
+ interface IUser {
748
+ id: string;
749
+ name: string;
750
+ picturePath?: string;
751
+ }
752
+ interface IEvent {
753
+ id: string;
754
+ title: string;
755
+ description?: string;
756
+ startDate: string;
757
+ endDate: string;
758
+ color: TEventColor;
759
+ user: IUser;
760
+ }
761
+ interface ICalendarState {
762
+ selectedDate: Date;
763
+ selectedUserId: string | null;
764
+ events: IEvent[];
765
+ users: IUser[];
766
+ badgeVariant: TBadgeVariant;
767
+ view: TCalendarView;
768
+ }
769
+ interface ICalendarActions {
770
+ setSelectedDate: (date: Date) => void;
771
+ setSelectedUserId: (userId: string | null) => void;
772
+ setEvents: (events: IEvent[]) => void;
773
+ addEvent: (event: IEvent) => void;
774
+ updateEvent: (event: IEvent) => void;
775
+ deleteEvent: (eventId: string) => void;
776
+ setBadgeVariant: (variant: TBadgeVariant) => void;
777
+ setView: (view: TCalendarView) => void;
778
+ goToToday: () => void;
779
+ goToPrevious: () => void;
780
+ goToNext: () => void;
781
+ }
782
+ interface ICalendarContext extends ICalendarState, ICalendarActions {
783
+ }
784
+ interface IEventDialogProps {
785
+ mode: "add" | "edit";
786
+ event?: IEvent;
787
+ defaultDate?: Date;
788
+ onSubmit: (event: Omit<IEvent, "id"> | IEvent) => void;
789
+ onClose: () => void;
790
+ }
791
+ interface IViewProps {
792
+ events: IEvent[];
793
+ selectedDate: Date;
794
+ onEventClick?: (event: IEvent) => void;
795
+ onDateClick?: (date: Date) => void;
796
+ onEventDrop?: (event: IEvent, newStart: Date, newEnd: Date) => void;
797
+ }
798
+ interface ICalendarHeaderProps {
799
+ showViewSwitcher?: boolean;
800
+ showUserFilter?: boolean;
801
+ showBadgeVariant?: boolean;
802
+ showToday?: boolean;
803
+ }
804
+ interface IDayCellProps {
805
+ date: Date;
806
+ events: IEvent[];
807
+ isCurrentMonth: boolean;
808
+ isToday: boolean;
809
+ isSelected: boolean;
810
+ onDateClick?: (date: Date) => void;
811
+ onEventClick?: (event: IEvent) => void;
812
+ onEventDrop?: (event: IEvent, newDate: Date) => void;
813
+ }
814
+ interface ITimeSlotProps {
815
+ date: Date;
816
+ hour: number;
817
+ events: IEvent[];
818
+ onTimeClick?: (date: Date, hour: number) => void;
819
+ onEventClick?: (event: IEvent) => void;
820
+ onEventDrop?: (event: IEvent, newStart: Date) => void;
821
+ }
822
+ interface IEventBadgeProps {
823
+ event: IEvent;
824
+ variant: TBadgeVariant;
825
+ onClick?: (event: IEvent) => void;
826
+ isDragging?: boolean;
827
+ }
828
+ interface IDragContext {
829
+ draggedEvent: IEvent | null;
830
+ setDraggedEvent: (event: IEvent | null) => void;
831
+ isDragging: boolean;
832
+ }
833
+ type TWorkingHours = {
834
+ [key: number]: {
835
+ from: number;
836
+ to: number;
837
+ };
838
+ };
839
+ type TVisibleHours = {
840
+ from: number;
841
+ to: number;
842
+ };
843
+ interface IWorkingHours {
844
+ start: number;
845
+ end: number;
846
+ }
847
+ declare const DEFAULT_WORKING_HOURS: TWorkingHours;
848
+ declare const DEFAULT_VISIBLE_HOURS: TVisibleHours;
849
+ interface ICalendarCell {
850
+ day: number;
851
+ currentMonth: boolean;
852
+ date: Date;
853
+ }
854
+ interface ICalendarConfig {
855
+ workingHours?: TWorkingHours;
856
+ visibleHours?: TVisibleHours;
857
+ weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
858
+ locale?: string;
859
+ timeFormat?: "12h" | "24h";
860
+ }
861
+ interface IEventPosition {
862
+ top: number;
863
+ left: number;
864
+ width: number;
865
+ height: number;
866
+ }
867
+ declare const EVENT_COLORS: Record<TEventColor, {
868
+ bg: string;
869
+ text: string;
870
+ border: string;
871
+ }>;
872
+ declare const VIEW_LABELS: Record<TCalendarView, string>;
873
+ declare const BADGE_VARIANT_LABELS: Record<TBadgeVariant, string>;
874
+
875
+ interface IExtendedCalendarContext {
876
+ selectedDate: Date;
877
+ selectedUserId: string | null;
878
+ events: IEvent[];
879
+ users: IUser[];
880
+ badgeVariant: TBadgeVariant;
881
+ view: TCalendarView;
882
+ workingHours: TWorkingHours;
883
+ visibleHours: TVisibleHours;
884
+ setSelectedDate: (date: Date) => void;
885
+ setSelectedUserId: (userId: string | null) => void;
886
+ setEvents: (events: IEvent[]) => void;
887
+ addEvent: (event: IEvent) => void;
888
+ updateEvent: (event: IEvent) => void;
889
+ deleteEvent: (eventId: string) => void;
890
+ setBadgeVariant: (variant: TBadgeVariant) => void;
891
+ setView: (view: TCalendarView) => void;
892
+ setWorkingHours: (hours: TWorkingHours) => void;
893
+ setVisibleHours: (hours: TVisibleHours) => void;
894
+ goToToday: () => void;
895
+ goToPrevious: () => void;
896
+ goToNext: () => void;
897
+ }
898
+ declare const CalendarContext: React$1.Context<IExtendedCalendarContext | null>;
899
+ interface EventCalendarProviderProps {
900
+ children: React$1.ReactNode;
901
+ events?: IEvent[];
902
+ users?: IUser[];
903
+ defaultDate?: Date;
904
+ defaultView?: TCalendarView;
905
+ defaultBadgeVariant?: TBadgeVariant;
906
+ defaultUserId?: string | null;
907
+ defaultWorkingHours?: TWorkingHours;
908
+ defaultVisibleHours?: TVisibleHours;
909
+ onEventAdd?: (event: IEvent) => void;
910
+ onEventUpdate?: (event: IEvent) => void;
911
+ onEventDelete?: (eventId: string) => void;
912
+ }
913
+ declare function EventCalendarProvider({ children, events: initialEvents, users: initialUsers, defaultDate, defaultView, defaultBadgeVariant, defaultUserId, defaultWorkingHours, defaultVisibleHours, onEventAdd, onEventUpdate, onEventDelete, }: EventCalendarProviderProps): react_jsx_runtime.JSX.Element;
914
+ declare function useEventCalendar(): IExtendedCalendarContext;
915
+ declare function useFilteredEvents(): IEvent[];
916
+ declare function useEventsInRange(startDate: Date, endDate: Date): IEvent[];
917
+
918
+ /**
919
+ * Get range text for header navigation
920
+ */
921
+ declare function rangeText(view: TCalendarView, date: Date): string;
922
+ /**
923
+ * Navigate date based on view
924
+ */
925
+ declare function navigateDate(date: Date, view: TCalendarView, direction: "previous" | "next"): Date;
926
+ /**
927
+ * Get events count for a date based on view
928
+ */
929
+ declare function getEventsCount(events: IEvent[], date: Date, view: TCalendarView): number;
930
+ /**
931
+ * Get current events (happening now)
932
+ */
933
+ declare function getCurrentEvents(events: IEvent[]): IEvent[];
934
+ /**
935
+ * Group events by time slots to handle overlapping
936
+ */
937
+ declare function groupEvents(dayEvents: IEvent[]): IEvent[][];
938
+ /**
939
+ * Get event block style for week/day view
940
+ * Returns pixel-based positioning for 96px/hour grid
941
+ */
942
+ declare function getEventBlockStyle(event: IEvent, day: Date, groupIndex: number, groupSize: number, visibleHoursRange?: {
943
+ from: number;
944
+ to: number;
945
+ }, hourHeight?: number): {
946
+ top: string;
947
+ height: string;
948
+ width: string;
949
+ left: string;
950
+ };
951
+ /**
952
+ * Check if hour is working hour (per-day configuration)
953
+ */
954
+ declare function isWorkingHour(day: Date, hour: number, workingHours: TWorkingHours): boolean;
955
+ /**
956
+ * Get visible hours with adjustment for events
957
+ */
958
+ declare function getVisibleHours(visibleHours: TVisibleHours, singleDayEvents: IEvent[]): {
959
+ hours: number[];
960
+ earliestEventHour: number;
961
+ latestEventHour: number;
962
+ };
963
+ /**
964
+ * Get calendar cells for month view
965
+ */
966
+ declare function getCalendarCells(selectedDate: Date): ICalendarCell[];
967
+ /**
968
+ * Calculate event positions for month view (handles multi-day events)
969
+ */
970
+ declare function calculateMonthEventPositions(multiDayEvents: IEvent[], singleDayEvents: IEvent[], selectedDate: Date): {
971
+ [key: string]: number;
972
+ };
973
+ /**
974
+ * Get events for a specific month cell with positions
975
+ */
976
+ declare function getMonthCellEvents(date: Date, events: IEvent[], eventPositions: Record<string, number>): {
977
+ position: number;
978
+ isMultiDay: boolean;
979
+ id: string;
980
+ title: string;
981
+ description?: string;
982
+ startDate: string;
983
+ endDate: string;
984
+ color: TEventColor;
985
+ user: IUser;
986
+ }[];
987
+ /**
988
+ * Get the days of the month grid (including days from prev/next months)
989
+ */
990
+ declare function getMonthDays(date: Date, weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6): Date[];
991
+ /**
992
+ * Get the days of a week
993
+ */
994
+ declare function getWeekDays(date: Date, weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6): Date[];
995
+ /**
996
+ * Get hours of a day
997
+ */
998
+ declare function getDayHours(date: Date, start?: number, end?: number): Date[];
999
+ /**
1000
+ * Get months of a year
1001
+ */
1002
+ declare function getYearMonths(date: Date): Date[];
1003
+ /**
1004
+ * Filter events for a specific date
1005
+ */
1006
+ declare function getEventsForDate(events: IEvent[], date: Date): IEvent[];
1007
+ /**
1008
+ * Filter events for a date range
1009
+ */
1010
+ declare function getEventsInRange(events: IEvent[], start: Date, end: Date): IEvent[];
1011
+ /**
1012
+ * Split events into single-day and multi-day
1013
+ */
1014
+ declare function splitEventsByDuration(events: IEvent[]): {
1015
+ singleDayEvents: IEvent[];
1016
+ multiDayEvents: IEvent[];
1017
+ };
1018
+ /**
1019
+ * Check if an event spans multiple days
1020
+ */
1021
+ declare function isMultiDayEvent(event: IEvent): boolean;
1022
+ /**
1023
+ * Get the number of days an event spans
1024
+ */
1025
+ declare function getEventDuration(event: IEvent): number;
1026
+ /**
1027
+ * Get the duration of an event in minutes
1028
+ */
1029
+ declare function getEventDurationMinutes(event: IEvent): number;
1030
+ /**
1031
+ * Sort events by start date, then by duration (longer first)
1032
+ */
1033
+ declare function sortEvents(events: IEvent[]): IEvent[];
1034
+ /**
1035
+ * Get the top position percentage for an event in time view
1036
+ */
1037
+ declare function getTimePosition(event: IEvent, visibleHoursRange?: {
1038
+ from: number;
1039
+ to: number;
1040
+ }): number;
1041
+ /**
1042
+ * Get the height percentage for an event in time view
1043
+ */
1044
+ declare function getTimeHeight(event: IEvent, visibleHoursRange?: {
1045
+ from: number;
1046
+ to: number;
1047
+ }): number;
1048
+ /**
1049
+ * Format time based on 12h or 24h format
1050
+ */
1051
+ declare function formatTime(date: Date, use24h?: boolean): string;
1052
+ /**
1053
+ * Get the week day names
1054
+ */
1055
+ declare function getWeekDayNames(weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6, shortNames?: boolean): string[];
1056
+ /**
1057
+ * Get display label for calendar header
1058
+ */
1059
+ declare function getHeaderLabel(date: Date, view: string): string;
1060
+ /**
1061
+ * Get the date range for the current view
1062
+ */
1063
+ declare function getViewDateRange(date: Date, view: string): {
1064
+ start: Date;
1065
+ end: Date;
1066
+ };
1067
+ /**
1068
+ * Format date range for display
1069
+ */
1070
+ declare function formatDateRange(start: Date, end: Date): string;
1071
+
1072
+ /**
1073
+ * Create a new event with default values
1074
+ */
1075
+ declare function createDefaultEvent(startDate: Date, duration?: number): Omit<IEvent, "id">;
1076
+ /**
1077
+ * Generate a unique ID for an event
1078
+ */
1079
+ declare function generateEventId(): string;
1080
+ /**
1081
+ * Calculate new event dates after drag and drop
1082
+ */
1083
+ declare function calculateDropDates(event: IEvent, newStartDate: Date): {
1084
+ startDate: string;
1085
+ endDate: string;
1086
+ };
1087
+ /**
1088
+ * Snap a date to the nearest time interval
1089
+ */
1090
+ declare function snapToInterval(date: Date, intervalMinutes?: number): Date;
1091
+
1092
+ interface EventBadgeProps extends Omit<IEventBadgeProps, "onClick"> {
1093
+ className?: string;
1094
+ showTime?: boolean;
1095
+ compact?: boolean;
1096
+ onClick?: (event: IEvent, e: React$1.MouseEvent) => void;
1097
+ }
1098
+ declare function EventBadge({ event, variant, className, showTime, compact, isDragging, onClick, }: EventBadgeProps): react_jsx_runtime.JSX.Element;
1099
+ interface MoreEventsProps {
1100
+ count: number;
1101
+ onClick?: () => void;
1102
+ className?: string;
1103
+ }
1104
+ declare function MoreEvents({ count, onClick, className }: MoreEventsProps): react_jsx_runtime.JSX.Element;
1105
+ interface TimeIndicatorProps {
1106
+ className?: string;
1107
+ }
1108
+ declare function TimeIndicator({ className }: TimeIndicatorProps): react_jsx_runtime.JSX.Element;
1109
+
1110
+ /**
1111
+ * Date Badge Component
1112
+ * Based on big-calendar by Leonardo Ramos (MIT License)
1113
+ * https://github.com/lramos33/big-calendar
1114
+ *
1115
+ * Adapted for J3M UI with Tailwind v4 and design token integration.
1116
+ */
1117
+ interface DateBadgeProps {
1118
+ date: Date;
1119
+ className?: string;
1120
+ }
1121
+ declare function DateBadge({ date, className }: DateBadgeProps): react_jsx_runtime.JSX.Element;
1122
+
1123
+ interface MonthViewProps extends Partial<IViewProps> {
1124
+ className?: string;
1125
+ maxEventsPerDay?: number;
1126
+ weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
1127
+ onMoreClick?: (date: Date, events: IEvent[]) => void;
1128
+ }
1129
+ declare function MonthView({ className, maxEventsPerDay, weekStartsOn, onEventClick, onDateClick, onMoreClick, }: MonthViewProps): react_jsx_runtime.JSX.Element;
1130
+
1131
+ interface WeekViewProps extends Partial<IViewProps> {
1132
+ className?: string;
1133
+ weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
1134
+ onTimeClick?: (date: Date, hour: number, minute: number) => void;
1135
+ }
1136
+ declare function WeekView({ className, weekStartsOn, onEventClick, onDateClick, onTimeClick, }: WeekViewProps): react_jsx_runtime.JSX.Element;
1137
+
1138
+ interface DayViewProps extends Partial<IViewProps> {
1139
+ className?: string;
1140
+ showSidebar?: boolean;
1141
+ onTimeClick?: (date: Date, hour: number, minute: number) => void;
1142
+ }
1143
+ declare function DayView({ className, showSidebar, onEventClick, onTimeClick, }: DayViewProps): react_jsx_runtime.JSX.Element;
1144
+
1145
+ interface YearViewProps extends Partial<IViewProps> {
1146
+ className?: string;
1147
+ weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
1148
+ onMonthClick?: (date: Date) => void;
1149
+ }
1150
+ declare function YearView({ className, weekStartsOn, onMonthClick, onDateClick, }: YearViewProps): react_jsx_runtime.JSX.Element;
1151
+
1152
+ interface AgendaViewProps extends Partial<IViewProps> {
1153
+ className?: string;
1154
+ emptyMessage?: string;
1155
+ }
1156
+ declare function AgendaView({ className, emptyMessage, onEventClick, onDateClick, }: AgendaViewProps): react_jsx_runtime.JSX.Element;
1157
+
1158
+ interface CalendarHeaderProps extends ICalendarHeaderProps {
1159
+ className?: string;
1160
+ showAddButton?: boolean;
1161
+ onAddClick?: () => void;
1162
+ }
1163
+ declare function CalendarHeader({ className, showViewSwitcher, showUserFilter, showBadgeVariant, // Hidden by default, controlled via settings
1164
+ showToday, showAddButton, onAddClick, }: CalendarHeaderProps): react_jsx_runtime.JSX.Element;
1165
+ interface CalendarHeaderCompactProps {
1166
+ className?: string;
1167
+ showAddButton?: boolean;
1168
+ onAddClick?: () => void;
1169
+ }
1170
+ declare function CalendarHeaderCompact({ className, showAddButton, onAddClick, }: CalendarHeaderCompactProps): react_jsx_runtime.JSX.Element;
1171
+
1172
+ interface EventDialogProps {
1173
+ open: boolean;
1174
+ onOpenChange: (open: boolean) => void;
1175
+ mode?: "add" | "edit";
1176
+ event?: IEvent | null;
1177
+ defaultDate?: Date;
1178
+ defaultUserId?: string;
1179
+ }
1180
+ declare function EventDialog({ open, onOpenChange, mode, event, defaultDate, defaultUserId, }: EventDialogProps): react_jsx_runtime.JSX.Element;
1181
+ interface QuickAddEventProps {
1182
+ date: Date;
1183
+ onAdd: (event: Omit<IEvent, "id">) => void;
1184
+ onOpenDialog: () => void;
1185
+ onClose: () => void;
1186
+ }
1187
+ declare function QuickAddEvent({ date, onAdd, onOpenDialog, onClose, }: QuickAddEventProps): react_jsx_runtime.JSX.Element;
1188
+
1189
+ declare const DragContext: React$1.Context<IDragContext | null>;
1190
+ interface DragProviderProps {
1191
+ children: React$1.ReactNode;
1192
+ snapMinutes?: number;
1193
+ onDragStart?: (event: IEvent) => void;
1194
+ onDragEnd?: (event: IEvent, newStart: Date, newEnd: Date) => void;
1195
+ }
1196
+ declare function DragProvider({ children, snapMinutes, onDragStart, onDragEnd, }: DragProviderProps): react_jsx_runtime.JSX.Element;
1197
+ declare function useDrag(): IDragContext;
1198
+ interface DraggableEventProps {
1199
+ event: IEvent;
1200
+ children: React$1.ReactNode;
1201
+ disabled?: boolean;
1202
+ }
1203
+ declare function DraggableEvent({ event, children, disabled, }: DraggableEventProps): react_jsx_runtime.JSX.Element;
1204
+ interface DroppableZoneProps {
1205
+ date: Date;
1206
+ children: React$1.ReactNode;
1207
+ onDrop?: (event: IEvent, date: Date) => void;
1208
+ className?: string;
1209
+ }
1210
+ declare function DroppableZone({ date, children, onDrop, className, }: DroppableZoneProps): react_jsx_runtime.JSX.Element;
1211
+ interface UseDroppableOptions {
1212
+ date: Date;
1213
+ hour?: number;
1214
+ minute?: number;
1215
+ onDrop?: (event: IEvent, newDate: Date) => void;
1216
+ }
1217
+ declare function useDroppable({ date, hour, minute, onDrop }: UseDroppableOptions): {
1218
+ isOver: boolean;
1219
+ dropProps: {
1220
+ onDragOver: (e: React$1.DragEvent) => void;
1221
+ onDragLeave: () => void;
1222
+ onDrop: (e: React$1.DragEvent) => void;
1223
+ "data-drag-over": boolean;
1224
+ };
1225
+ };
1226
+ declare function useDraggable(event: IEvent, disabled?: boolean): {
1227
+ isDragged: boolean;
1228
+ dragProps: {
1229
+ draggable: boolean;
1230
+ onDragStart: (e: React$1.DragEvent) => void;
1231
+ onDragEnd: () => void;
1232
+ style: {
1233
+ cursor: string;
1234
+ };
1235
+ };
1236
+ };
1237
+
1238
+ /**
1239
+ * Calendar Settings Panel
1240
+ * Based on big-calendar by Leonardo Ramos (MIT License)
1241
+ * https://github.com/lramos33/big-calendar
1242
+ */
1243
+ interface CalendarSettingsPanelProps {
1244
+ className?: string;
1245
+ showBadgeVariant?: boolean;
1246
+ showVisibleHours?: boolean;
1247
+ showWorkingHours?: boolean;
1248
+ }
1249
+ declare function CalendarSettingsPanel({ className, showBadgeVariant, showVisibleHours, showWorkingHours, }: CalendarSettingsPanelProps): react_jsx_runtime.JSX.Element;
1250
+
1251
+ /**
1252
+ * Badge Variant Input
1253
+ * Based on big-calendar by Leonardo Ramos (MIT License)
1254
+ * https://github.com/lramos33/big-calendar
1255
+ */
1256
+ declare function ChangeBadgeVariantInput(): react_jsx_runtime.JSX.Element;
1257
+
1258
+ /**
1259
+ * Visible Hours Input
1260
+ * Based on big-calendar by Leonardo Ramos (MIT License)
1261
+ * https://github.com/lramos33/big-calendar
1262
+ */
1263
+ declare function ChangeVisibleHoursInput(): react_jsx_runtime.JSX.Element;
1264
+
1265
+ /**
1266
+ * Working Hours Input
1267
+ * Based on big-calendar by Leonardo Ramos (MIT License)
1268
+ * https://github.com/lramos33/big-calendar
1269
+ */
1270
+ declare function ChangeWorkingHoursInput(): react_jsx_runtime.JSX.Element;
1271
+
1272
+ interface BigCalendarProps extends Omit<EventCalendarProviderProps, "children"> {
1273
+ className?: string;
1274
+ compact?: boolean | "auto";
1275
+ bordered?: boolean;
1276
+ showHeader?: boolean;
1277
+ showAddButton?: boolean;
1278
+ showSettings?: boolean;
1279
+ enableDragDrop?: boolean;
1280
+ weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
1281
+ maxEventsPerDay?: number;
1282
+ config?: ICalendarConfig;
1283
+ }
1284
+ declare function BigCalendar({ className, compact, bordered, showHeader, showAddButton, showSettings, enableDragDrop, weekStartsOn, maxEventsPerDay, config, ...providerProps }: BigCalendarProps): react_jsx_runtime.JSX.Element;
1285
+
1286
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgendaView, type AgendaViewProps, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, BADGE_VARIANT_LABELS, Badge, BigCalendar, type BigCalendarProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, type ButtonProps, Calendar, CalendarContext, CalendarDayButton, CalendarHeader, CalendarHeaderCompact, type CalendarHeaderCompactProps, type CalendarHeaderProps, CalendarSettingsPanel, type CalendarSettingsPanelProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChangeBadgeVariantInput, ChangeVisibleHoursInput, ChangeWorkingHoursInput, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_VISIBLE_HOURS, DEFAULT_WORKING_HOURS, DateBadge, type DateBadgeProps, DayView, type DayViewProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DragContext, DragProvider, type DragProviderProps, DraggableEvent, type DraggableEventProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DroppableZone, type DroppableZoneProps, EVENT_COLORS, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventBadge, type EventBadgeProps, EventCalendarProvider, type EventCalendarProviderProps, EventDialog, type EventDialogProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, type ICalendarActions, type ICalendarCell, type ICalendarConfig, type ICalendarContext, type ICalendarHeaderProps, type ICalendarState, type IDayCellProps, type IDragContext, type IEvent, type IEventBadgeProps, type IEventDialogProps, type IEventPosition, type ITimeSlotProps, type IUser, type IViewProps, type IWorkingHours, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MonthView, type MonthViewProps, MoreEvents, type MoreEventsProps, NativeSelect, NativeSelectOptGroup, NativeSelectOption, type NavItem, NavMain, type NavProject, NavProjects, NavSecondary, NavUser, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PlayerCanvas, PlayerCanvasActionButton, PlayerCanvasControls, PlayerCanvasDivider, PlayerCanvasInfo, PlayerCanvasLabel, PlayerCanvasPlayButton, PlayerCanvasProgress, PlayerCanvasSkipButton, PlayerCanvasTitle, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, QuickAddEvent, type QuickAddEventProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchForm, SearchTrigger, type SearchTriggerProps, Section, SectionContent, SectionDescription, SectionFooter, SectionHeader, type SectionProps, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SiteHeader, Skeleton, Slider, Spinner, Switch, type TBadgeVariant, type TCalendarView, type TEventColor, type TVisibleHours, type TWorkingHours, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeSwitch, type ThemeSwitchProps, TimeIndicator, type TimeIndicatorProps, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolBarCanvas, ToolBarCanvasButton, ToolBarCanvasDivider, ToolBarCanvasGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseDroppableOptions, type UserAvatarItem, UserAvatarsDropdown, type UserAvatarsDropdownProps, VIEW_LABELS, WeekView, type WeekViewProps, YearView, type YearViewProps, badgeVariants, buttonGroupVariants, buttonVariants, calculateDropDates, calculateMonthEventPositions, cardVariants, createDefaultEvent, formatDateRange, formatTime, generateEventId, getCalendarCells, getCurrentEvents, getDayHours, getEventBlockStyle, getEventDuration, getEventDurationMinutes, getEventsCount, getEventsForDate, getEventsInRange, getHeaderLabel, getMonthCellEvents, getMonthDays, getTimeHeight, getTimePosition, getViewDateRange, getVisibleHours, getWeekDayNames, getWeekDays, getYearMonths, groupEvents, isMultiDayEvent, isWorkingHour, navigateDate, navigationMenuTriggerStyle, playerCanvasPlayButtonVariants, playerCanvasSkipButtonVariants, rangeText, sectionVariants, snapToInterval, sortEvents, splitEventsByDuration, toggleVariants, toolBarCanvasButtonVariants, useDrag, useDraggable, useDroppable, useEventCalendar, useEventsInRange, useFilteredEvents, useFormField, useIsMobile, useSearchShortcut, useSidebar };