@hectorbliss/denik-calendar 0.0.2 → 0.0.4

package/dist/index.cjs

@@ -217,21 +217,40 @@ var cn = (...classes) => classes.filter(Boolean).join(" ");
 var DefaultTrashIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", className: "w-4 h-4", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }) });
 var DefaultEditIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", className: "w-4 h-4", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" }) });
 var DefaultCloseIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", className: "w-4 h-4", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) });
-var DayHeader = ({ date, locale }) => /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "grid place-items-center", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "capitalize", children: date.toLocaleDateString(locale, { weekday: "short" }) }),
-  /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: cn(
-        isToday(date) && "bg-blue-500 rounded-full p-1 text-white"
-      ),
-      children: date.getDate()
-    }
-  )
-] });
+var DayHeader = ({
+  date,
+  locale,
+  index,
+  resource,
+  renderColumnHeader
+}) => {
+  const isToday2 = isToday(date);
+  if (renderColumnHeader) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid place-items-center", children: renderColumnHeader({ date, index, isToday: isToday2, locale, resource }) });
+  }
+  if (resource) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid place-items-center gap-1", children: [
+      resource.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 flex items-center justify-center", children: resource.icon }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: resource.name })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "grid place-items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "capitalize", children: date.toLocaleDateString(locale, { weekday: "short" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn(
+          isToday2 && "bg-blue-500 rounded-full p-1 text-white"
+        ),
+        children: date.getDate()
+      }
+    )
+  ] });
+};
 function Calendar({
   date = /* @__PURE__ */ new Date(),
   events = [],
+  resources,
   onEventClick,
   onNewEvent,
   onEventMove,
@@ -239,10 +258,12 @@ function Calendar({
   onRemoveBlock,
   config = {}
 }) {
-  const { locale = "es-MX", icons = {} } = config;
+  const { locale = "es-MX", icons = {}, renderColumnHeader } = config;
   const week = completeWeek(date);
   const [activeId, setActiveId] = react.useState(null);
   const { canMove } = useCalendarEvents(events);
+  const isResourceMode = !!resources && resources.length > 0;
+  const columnCount = isResourceMode ? resources.length : 7;
   const sensors = core.useSensors(
     core.useSensor(core.PointerSensor, {
       activationConstraint: { distance: 8 }
@@ -257,10 +278,10 @@ function Calendar({
     setActiveId(null);
     if (!over) return;
     const eventId = active.id.toString().replace("event-", "");
-    const [, dayIndexStr, hourStr] = over.id.toString().split("-");
-    const dayIndex = parseInt(dayIndexStr);
+    const [, colIndexStr, hourStr] = over.id.toString().split("-");
+    const colIndex = parseInt(colIndexStr);
     const hour = parseInt(hourStr);
-    const targetDay = week[dayIndex];
+    const targetDay = isResourceMode ? date : week[colIndex];
     const newStart = new Date(targetDay);
     newStart.setHours(hour, 0, 0, 0);
     const movedEvent = events.find((e) => e.id === eventId);
@@ -279,6 +300,24 @@ function Calendar({
     setActiveId(null);
   };
   const activeEvent = activeId ? events.find((e) => `event-${e.id}` === activeId) : null;
+  const getColumnEvents = (colIndex) => {
+    if (isResourceMode) {
+      const resourceId = resources[colIndex].id;
+      return events.filter((event) => {
+        const eventDate = new Date(event.start);
+        return event.resourceId === resourceId && areSameDates(eventDate, date);
+      });
+    }
+    const dayOfWeek = week[colIndex];
+    return events.filter((event) => {
+      const eventDate = new Date(event.start);
+      return eventDate.getDate() === dayOfWeek.getDate() && eventDate.getMonth() === dayOfWeek.getMonth();
+    });
+  };
+  const gridStyle = {
+    display: "grid",
+    gridTemplateColumns: `auto repeat(${columnCount}, minmax(120px, 1fr))`
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     core.DndContext,
     {
@@ -288,32 +327,66 @@ function Calendar({
       onDragEnd: handleDragEnd,
       onDragCancel: handleDragCancel,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "w-full bg-white shadow rounded-xl", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "grid grid-cols-8 place-items-center py-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: Intl.DateTimeFormat().resolvedOptions().timeZone }) }),
-            week.map((day) => /* @__PURE__ */ jsxRuntime.jsx(DayHeader, { date: day, locale }, day.toISOString()))
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "grid grid-cols-8 max-h-[80vh] overflow-y-auto", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TimeColumn, {}),
-            week.map((dayOfWeek, dayIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-              Column,
-              {
-                dayIndex,
-                dayOfWeek,
-                events: events.filter((event) => {
-                  const eventDate = new Date(event.start);
-                  return eventDate.getDate() === dayOfWeek.getDate() && eventDate.getMonth() === dayOfWeek.getMonth();
-                }),
-                onNewEvent,
-                onAddBlock,
-                onRemoveBlock,
-                onEventClick,
-                locale,
-                icons
-              },
-              dayOfWeek.toISOString()
-            ))
-          ] })
+        /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "w-full bg-white shadow rounded-xl overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "section",
+            {
+              style: gridStyle,
+              className: "place-items-center py-4 border-b",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: Intl.DateTimeFormat().resolvedOptions().timeZone }) }),
+                isResourceMode ? resources.map((resource, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  DayHeader,
+                  {
+                    date,
+                    locale,
+                    index,
+                    resource,
+                    renderColumnHeader
+                  },
+                  resource.id
+                )) : week.map((day, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  DayHeader,
+                  {
+                    date: day,
+                    locale,
+                    index,
+                    renderColumnHeader
+                  },
+                  day.toISOString()
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "section",
+            {
+              style: gridStyle,
+              className: cn(
+                "max-h-[80vh] overflow-y-auto",
+                isResourceMode && "overflow-x-auto"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TimeColumn, {}),
+                Array.from({ length: columnCount }, (_, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+                  Column,
+                  {
+                    dayIndex: colIndex,
+                    dayOfWeek: isResourceMode ? date : week[colIndex],
+                    events: getColumnEvents(colIndex),
+                    onNewEvent,
+                    onAddBlock,
+                    onRemoveBlock,
+                    onEventClick,
+                    locale,
+                    icons,
+                    resourceId: isResourceMode ? resources[colIndex].id : void 0
+                  },
+                  isResourceMode ? resources[colIndex].id : week[colIndex].toISOString()
+                ))
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { children: activeEvent ? /* @__PURE__ */ jsxRuntime.jsx(EventOverlay, { event: activeEvent }) : null })
       ]
@@ -411,6 +484,42 @@ var EmptyButton = ({
     }
   );
 };
+var calculateOverlapPositions = (events) => {
+  if (events.length === 0) return [];
+  const sorted = [...events].sort(
+    (a, b) => new Date(a.start).getTime() - new Date(b.start).getTime()
+  );
+  const positions = /* @__PURE__ */ new Map();
+  const groups = [];
+  let currentGroup = [];
+  let groupEnd = 0;
+  for (const event of sorted) {
+    const eventStart = new Date(event.start);
+    const startHour = eventStart.getHours() + eventStart.getMinutes() / 60;
+    const endHour = startHour + event.duration / 60;
+    if (currentGroup.length === 0 || startHour < groupEnd) {
+      currentGroup.push(event);
+      groupEnd = Math.max(groupEnd, endHour);
+    } else {
+      groups.push(currentGroup);
+      currentGroup = [event];
+      groupEnd = endHour;
+    }
+  }
+  if (currentGroup.length > 0) {
+    groups.push(currentGroup);
+  }
+  for (const group of groups) {
+    const totalColumns = group.length;
+    group.forEach((event, index) => {
+      positions.set(event.id, { column: index, totalColumns });
+    });
+  }
+  return sorted.map((event) => ({
+    event,
+    ...positions.get(event.id)
+  }));
+};
 var Column = ({
   onEventClick,
   events = [],
@@ -420,9 +529,11 @@ var Column = ({
   onRemoveBlock,
   dayIndex,
   locale,
-  icons
+  icons,
+  resourceId
 }) => {
   const columnRef = react.useRef(null);
+  const eventsWithPositions = calculateOverlapPositions(events);
   react.useEffect(() => {
     if (!columnRef.current) return;
     const today = /* @__PURE__ */ new Date();
@@ -436,21 +547,24 @@ var Column = ({
       }, 100);
     }
   }, [dayOfWeek]);
-  const findEvent = (hours) => {
-    const eventStartsHere = events.find(
-      (event) => new Date(event.start).getHours() === hours
+  const findEventsAtHour = (hours) => {
+    const eventsStartingHere = eventsWithPositions.filter(
+      ({ event }) => new Date(event.start).getHours() === hours
     );
-    if (eventStartsHere) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
+    if (eventsStartingHere.length > 0) {
+      return eventsStartingHere.map(({ event, column, totalColumns }) => /* @__PURE__ */ jsxRuntime.jsx(
         DraggableEvent,
         {
-          onClick: () => onEventClick?.(eventStartsHere),
-          event: eventStartsHere,
+          onClick: () => onEventClick?.(event),
+          event,
           onRemoveBlock,
           locale,
-          icons
-        }
-      );
+          icons,
+          overlapColumn: column,
+          overlapTotal: totalColumns
+        },
+        event.id
+      ));
     }
     const eventSpansHere = events.find((event) => {
       const eventStart = new Date(event.start);
@@ -476,7 +590,7 @@ var Column = ({
       date: dayOfWeek,
       className: "relative",
       dayIndex,
-      children: findEvent(hours)
+      children: findEventsAtHour(hours)
     },
     hours
   )) });
@@ -487,16 +601,22 @@ var DraggableEvent = ({
   onClick,
   onRemoveBlock,
   locale,
-  icons
+  icons,
+  overlapColumn = 0,
+  overlapTotal = 1
 }) => {
   const [showOptions, setShowOptions] = react.useState(false);
   const { attributes, listeners, setNodeRef, transform, isDragging } = core.useDraggable({
     id: `event-${event.id}`,
     disabled: event.type === "BLOCK"
   });
+  const widthPercent = event.type === "BLOCK" ? 100 : 90 / overlapTotal;
+  const leftPercent = event.type === "BLOCK" ? 0 : overlapColumn * (90 / overlapTotal);
   const style = {
     height: event.duration / 60 * 64,
-    transform: transform ? utilities.CSS.Translate.toString(transform) : void 0
+    transform: transform ? utilities.CSS.Translate.toString(transform) : void 0,
+    width: `${widthPercent}%`,
+    left: `${leftPercent}%`
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -509,7 +629,7 @@ var DraggableEvent = ({
         ...attributes,
         className: cn(
           "border grid gap-y-1 overflow-hidden place-content-start",
-          "text-xs text-left pl-1 absolute top-0 left-0 bg-blue-500 text-white rounded-md z-10 w-[90%]",
+          "text-xs text-left pl-1 absolute top-0 bg-blue-500 text-white rounded-md z-10",
           event.type === "BLOCK" && "bg-gray-300 h-full w-full text-center cursor-not-allowed relative p-0",
           event.type !== "BLOCK" && "cursor-grab",
           isDragging && event.type !== "BLOCK" && "cursor-grabbing opacity-50"
@@ -607,8 +727,136 @@ var Options = ({
     }
   );
 };
+var DefaultPrevIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", className: "w-5 h-5", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) });
+var DefaultNextIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", className: "w-5 h-5", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) });
+function CalendarControls({
+  controls,
+  todayLabel = "HOY",
+  weekLabel = "SEMANA",
+  dayLabel = "D\xCDA",
+  showViewToggle = true,
+  prevIcon,
+  nextIcon,
+  actions,
+  className = ""
+}) {
+  const { label, goToToday, goToPrev, goToNext, view, toggleView, isToday: isToday2 } = controls;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `flex items-center justify-between gap-4 py-3 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: goToToday,
+              disabled: isToday2,
+              className: `px-4 py-2 text-sm font-medium rounded-full border transition-colors ${isToday2 ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-blue-500 text-white hover:bg-blue-600"}`,
+              children: todayLabel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: goToPrev,
+              className: "p-2 rounded-full hover:bg-gray-100 transition-colors",
+              "aria-label": "Previous",
+              children: prevIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultPrevIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: goToNext,
+              className: "p-2 rounded-full hover:bg-gray-100 transition-colors",
+              "aria-label": "Next",
+              children: nextIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultNextIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-medium capitalize ml-2", children: label })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          showViewToggle && /* @__PURE__ */ jsxRuntime.jsxs(
+            "select",
+            {
+              value: view,
+              onChange: toggleView,
+              className: "px-4 py-2 text-sm font-medium border rounded-lg bg-white hover:bg-gray-50 cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "week", children: weekLabel }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "day", children: dayLabel })
+              ]
+            }
+          ),
+          actions
+        ] })
+      ]
+    }
+  );
+}
+function useCalendarControls(options = {}) {
+  const {
+    initialDate = /* @__PURE__ */ new Date(),
+    initialView = "week",
+    locale = "es-MX"
+  } = options;
+  const [date, setDate] = react.useState(initialDate);
+  const [view, setView] = react.useState(initialView);
+  const week = react.useMemo(() => completeWeek(date), [date]);
+  const goToToday = react.useCallback(() => {
+    setDate(/* @__PURE__ */ new Date());
+  }, []);
+  const goToPrev = react.useCallback(() => {
+    setDate((d) => addDaysToDate(d, view === "week" ? -7 : -1));
+  }, [view]);
+  const goToNext = react.useCallback(() => {
+    setDate((d) => addDaysToDate(d, view === "week" ? 7 : 1));
+  }, [view]);
+  const toggleView = react.useCallback(() => {
+    setView((v) => v === "week" ? "day" : "week");
+  }, []);
+  const isToday2 = react.useMemo(() => {
+    const today = /* @__PURE__ */ new Date();
+    return date.getDate() === today.getDate() && date.getMonth() === today.getMonth() && date.getFullYear() === today.getFullYear();
+  }, [date]);
+  const label = react.useMemo(() => {
+    if (view === "week") {
+      const monthName = week[0].toLocaleDateString(locale, { month: "long" });
+      const year = week[0].getFullYear();
+      const endMonth = week[6].getMonth();
+      if (week[0].getMonth() !== endMonth) {
+        const endMonthName = week[6].toLocaleDateString(locale, {
+          month: "short"
+        });
+        return `${week[0].getDate()} ${week[0].toLocaleDateString(locale, { month: "short" })} - ${week[6].getDate()} ${endMonthName} ${year}`;
+      }
+      return `${week[0].getDate()} - ${week[6].getDate()} ${monthName} ${year}`;
+    }
+    return date.toLocaleDateString(locale, {
+      weekday: "long",
+      day: "numeric",
+      month: "long",
+      year: "numeric"
+    });
+  }, [view, week, date, locale]);
+  return {
+    date,
+    view,
+    week,
+    label,
+    goToToday,
+    goToPrev,
+    goToNext,
+    toggleView,
+    setDate,
+    setView,
+    isToday: isToday2
+  };
+}
 
 exports.Calendar = Calendar;
+exports.CalendarControls = CalendarControls;
 exports.SimpleBigWeekView = Calendar;
 exports.addDaysToDate = addDaysToDate;
 exports.addMinutesToDate = addMinutesToDate;
@@ -622,6 +870,7 @@ exports.generateHours = generateHours;
 exports.getDaysInMonth = getDaysInMonth;
 exports.getMonday = getMonday;
 exports.isToday = isToday;
+exports.useCalendarControls = useCalendarControls;
 exports.useCalendarEvents = useCalendarEvents;
 exports.useClickOutside = useClickOutside;
 exports.useEventOverlap = useEventOverlap;

package/dist/index.d.cts

@@ -1,6 +1,34 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, RefObject } from 'react';
 
+/**
+ * Resource definition for day/resource view mode
+ * Use this to represent courts, rooms, employees, etc.
+ */
+interface Resource {
+    /** Unique identifier for the resource */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Optional icon/avatar */
+    icon?: ReactNode;
+}
+/**
+ * Props passed to custom column header renderer
+ * Use this to build custom headers for resources (courts, rooms, employees, etc.)
+ */
+interface ColumnHeaderProps {
+    /** The date for this column */
+    date: Date;
+    /** Column index */
+    index: number;
+    /** Whether this column represents today */
+    isToday: boolean;
+    /** The configured locale */
+    locale: string;
+    /** Resource data (only in resource mode) */
+    resource?: Resource;
+}
 /**
  * Generic calendar event - decoupled from any ORM
  */
@@ -13,6 +41,8 @@ interface CalendarEvent {
     service?: {
         name: string;
     } | null;
+    /** Resource ID for day/resource view (court, room, etc.) */
+    resourceId?: string;
 }
 /**
  * Calendar configuration options
@@ -30,6 +60,23 @@ interface CalendarConfig {
         edit?: ReactNode;
         close?: ReactNode;
     };
+    /**
+     * Custom renderer for column headers.
+     * Use this to display resources (courts, rooms, employees) instead of weekdays.
+     *
+     * @example
+     * // Padel courts
+     * renderColumnHeader: ({ index }) => <span>Court {index + 1}</span>
+     *
+     * @example
+     * // With custom styling
+     * renderColumnHeader: ({ date, isToday }) => (
+     *   <div className={isToday ? "font-bold" : ""}>
+     *     {date.toLocaleDateString("en", { weekday: "short" })}
+     *   </div>
+     * )
+     */
+    renderColumnHeader?: (props: ColumnHeaderProps) => ReactNode;
 }
 /**
  * Calendar component props
@@ -39,6 +86,18 @@ interface CalendarProps {
     date?: Date;
     /** Array of events to display */
     events?: CalendarEvent[];
+    /**
+     * Resources for day/resource view mode.
+     * When provided, columns represent resources instead of weekdays.
+     * Events are filtered by date and grouped by resourceId.
+     *
+     * @example
+     * resources={[
+     *   { id: "court-1", name: "Cancha 1", icon: <PadelIcon /> },
+     *   { id: "court-2", name: "Cancha 2", icon: <PadelIcon /> },
+     * ]}
+     */
+    resources?: Resource[];
     /** Callback when an event is clicked */
     onEventClick?: (event: CalendarEvent) => void;
     /** Callback when an event is moved via drag & drop */
@@ -53,7 +112,92 @@ interface CalendarProps {
     config?: CalendarConfig;
 }
 
-declare function Calendar({ date, events, onEventClick, onNewEvent, onEventMove, onAddBlock, onRemoveBlock, config, }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare function Calendar({ date, events, resources, onEventClick, onNewEvent, onEventMove, onAddBlock, onRemoveBlock, config, }: CalendarProps): react_jsx_runtime.JSX.Element;
+
+type CalendarView = "week" | "day";
+interface UseCalendarControlsOptions {
+    /** Initial date (default: today) */
+    initialDate?: Date;
+    /** Initial view mode (default: "week") */
+    initialView?: CalendarView;
+    /** Locale for date formatting (default: "es-MX") */
+    locale?: string;
+}
+interface CalendarControls$1 {
+    /** Current date */
+    date: Date;
+    /** Current view mode */
+    view: CalendarView;
+    /** Week days array (Mon-Sun) */
+    week: Date[];
+    /** Formatted label for current date/week */
+    label: string;
+    /** Navigate to today */
+    goToToday: () => void;
+    /** Navigate to previous period (week or day) */
+    goToPrev: () => void;
+    /** Navigate to next period (week or day) */
+    goToNext: () => void;
+    /** Toggle between week and day view */
+    toggleView: () => void;
+    /** Set specific date */
+    setDate: (date: Date) => void;
+    /** Set specific view */
+    setView: (view: CalendarView) => void;
+    /** Check if current date is today */
+    isToday: boolean;
+}
+/**
+ * Hook for calendar navigation controls
+ *
+ * @example
+ * const controls = useCalendarControls();
+ *
+ * <button onClick={controls.goToToday}>HOY</button>
+ * <button onClick={controls.goToPrev}>←</button>
+ * <button onClick={controls.goToNext}>→</button>
+ * <span>{controls.label}</span>
+ *
+ * <Calendar
+ *   date={controls.date}
+ *   resources={controls.view === "day" ? courts : undefined}
+ * />
+ */
+declare function useCalendarControls(options?: UseCalendarControlsOptions): CalendarControls$1;
+
+interface CalendarControlsProps {
+    /** Controls from useCalendarControls hook */
+    controls: CalendarControls$1;
+    /** Custom "Today" button label */
+    todayLabel?: string;
+    /** Custom "Week" label */
+    weekLabel?: string;
+    /** Custom "Day" label */
+    dayLabel?: string;
+    /** Show view toggle (default: true) */
+    showViewToggle?: boolean;
+    /** Custom prev icon */
+    prevIcon?: ReactNode;
+    /** Custom next icon */
+    nextIcon?: ReactNode;
+    /** Additional action buttons (export, add, etc.) */
+    actions?: ReactNode;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Pre-built calendar controls component
+ *
+ * @example
+ * const controls = useCalendarControls();
+ *
+ * <CalendarControls
+ *   controls={controls}
+ *   actions={<button>Add Event</button>}
+ * />
+ * <Calendar date={controls.date} />
+ */
+declare function CalendarControls({ controls, todayLabel, weekLabel, dayLabel, showViewToggle, prevIcon, nextIcon, actions, className, }: CalendarControlsProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Hook for managing calendar events - overlap detection, filtering, and availability
@@ -128,4 +272,4 @@ declare function useClickOutside<T extends HTMLElement>({ isActive, onOutsideCli
  */
 declare function formatDate(date: Date, locale?: string): string;
 
-export { Calendar, type CalendarConfig, type CalendarEvent, type CalendarProps, Calendar as SimpleBigWeekView, addDaysToDate, addMinutesToDate, areSameDates, completeWeek, formatDate, fromDateToTimeString, fromMinsToLocaleTimeString, fromMinsToTimeString, generateHours, getDaysInMonth, getMonday, isToday, useCalendarEvents, useClickOutside, useEventOverlap };
+export { Calendar, type CalendarConfig, CalendarControls, type CalendarControlsProps, type CalendarControls$1 as CalendarControlsState, type CalendarEvent, type CalendarProps, type CalendarView, type ColumnHeaderProps, type Resource, Calendar as SimpleBigWeekView, type UseCalendarControlsOptions, addDaysToDate, addMinutesToDate, areSameDates, completeWeek, formatDate, fromDateToTimeString, fromMinsToLocaleTimeString, fromMinsToTimeString, generateHours, getDaysInMonth, getMonday, isToday, useCalendarControls, useCalendarEvents, useClickOutside, useEventOverlap };