@classytic/fluid 0.2.1 → 0.3.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Classytic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,6 +1,7 @@
 # @classytic/fluid
 
-Reusable UI components built on shadcn/ui and Base UI for Next.js projects.
+Reusable UI component library built on shadcn/ui and Base UI for Next.js projects.
+Wraps your project's shadcn components (`@/components/ui/*`) with higher-level patterns.
 
 ## Install
 
@@ -8,100 +9,186 @@ Reusable UI components built on shadcn/ui and Base UI for Next.js projects.
 npm install @classytic/fluid
 ```
 
+## Entry Points
+
+| Entry | Purpose | `"use client"` | Requires |
+|-------|---------|:-:|----------|
+| `@classytic/fluid` | RSC-compatible: utils, layout, display, states, skeletons (no `"use client"`) | No | react |
+| `@classytic/fluid/client/hooks` | Hooks + storage utilities | Yes | react, next |
+| `@classytic/fluid/client/core` | Interactive components (dialogs, cards, pills, tabs, animations...) | Yes | react, next |
+| `@classytic/fluid/client/table` | DataTable + DataTableToolbar | Yes | @tanstack/react-table |
+| `@classytic/fluid/client/theme` | ModeToggle | Yes | next-themes |
+| `@classytic/fluid/client/error` | ErrorBoundary, AsyncBoundary | Yes | react-error-boundary |
+| `@classytic/fluid/client/calendar` | EventCalendar | Yes | date-fns |
+| `@classytic/fluid/forms` | Form components with react-hook-form integration | Yes | react-hook-form |
+| `@classytic/fluid/dashboard` | Dashboard layout, sidebar presets, headers, nav utils | Yes | next |
+| `@classytic/fluid/compact` | Compact form variants (floating labels) | Yes | react |
+| `@classytic/fluid/search` | Composable search system | Yes | react, next |
+| `@classytic/fluid/command` | Command palette, keyboard shortcuts | Yes | react |
+| `@classytic/fluid/layouts` | NavigationBar, DrawerWrapper, ContextMenu, HoverCard | Yes | react, next |
+
+> **Note:** All entries resolve `@/components/ui/*` from your project's shadcn setup at build time.
+> The root entry omits `"use client"` so it can be imported in Server Components, but it still
+> requires your shadcn components to be available for resolution.
+
 ## Usage
 
 ```tsx
-// Main components
+// RSC-compatible — layout, display, states
+import { Section, Container, EmptyState, LoadingState, cn } from "@classytic/fluid";
+
+// Client sub-entries — import from specific sub-entry for tree-shaking
+import { useIsMobile, useDebounce, useLocalStorage } from "@classytic/fluid/client/hooks";
+import { DialogWrapper, CardWrapper, TabsWrapper } from "@classytic/fluid/client/core";
+import { DataTable } from "@classytic/fluid/client/table";       // needs @tanstack/react-table
+import { ModeToggle } from "@classytic/fluid/client/theme";       // needs next-themes
+import { ErrorBoundary, AsyncBoundary } from "@classytic/fluid/client/error"; // needs react-error-boundary
+import { EventCalendar } from "@classytic/fluid/client/calendar"; // needs date-fns
+
+// Form components — react-hook-form integration
 import {
-  DialogWrapper,
-  FormInput,
-  DataTable,
-  EmptyState,
-} from "@classytic/fluid";
+  FormInput, FormTextarea, SelectInput, ComboboxInput,
+  DateInput, TagInput, SlugField,
+} from "@classytic/fluid/forms";
 
-// Dashboard components (sidebar, header, project switcher)
+// Dashboard — layout, sidebar, headers
 import {
-  PageHeader,
-  InsetSidebar,
-  SidebarNav,
+  DashboardPageLayout, PageHeader, InsetSidebar,
+  SidebarNav, ProjectSwitcher,
 } from "@classytic/fluid/dashboard";
 
-// Layout utilities
-import { Section, Container } from "@classytic/fluid/layout";
-
-// Compact form components (floating labels)
-import { CompactInput, CompactSelect, Field } from "@classytic/fluid/compact";
+// Compact form variants (floating labels)
+import { CompactInput, CompactSelect } from "@classytic/fluid/compact";
 
-// Composable search system
+// Search system
 import { Search, SearchProvider, useSearch } from "@classytic/fluid/search";
+
+// Command palette + keyboard shortcuts
+import { CommandSearch, useKeyboardShortcut } from "@classytic/fluid/command";
 ```
 
 ## Components
 
-| Category           | Components                                                                                                                                                                                                 |
-| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Dialogs/Sheets** | DialogWrapper, FormDialog, SheetWrapper, FormSheet, ConfirmDialog, ConfirmSheet, DeleteConfirmDialog                                                                                                       |
-| **Forms**          | FormInput, FormTextarea, SelectInput, CheckboxInput, RadioInput, SwitchInput, DateInput, DateRangeInput, TagInput, TagChoiceInput, ComboboxInput, SlugField, PhoneInput, FormErrorSummary, DateRangeFilter |
-| **Compact Forms**  | CompactInput, CompactTextarea, CompactSelect, CompactNumberInput, CompactTagChoice, CompactSlugField, Field                                                                                                |
-| **Tables**         | DataTable, TableWrapper, SimpleTable                                                                                                                                                                       |
-| **Layout**         | CardWrapper, DataCard, StatsCard, CollapsibleWrapper, CollapsibleCard, ResponsiveSplitLayout, TabsWrapper, DynamicTabs, Section, Container                                                                 |
-| **Display**        | Pill (+ PillAvatar, PillStatus, PillDelta, PillIcon), InfoRow, CopyButton, CopyText, CopyCodeBlock, Thumbnail, DisplayHeading                                                                              |
-| **Feedback**       | EmptyState (+ NoResults, NoData, NotFound presets), LoadingState, LoadingOverlay, ErrorState, StatusBanner                                                                                                 |
-| **Navigation**     | ApiPagination, CustomPagination                                                                                                                                                                            |
-| **Search**         | Search.Root, Search.Input, Search.TypeInput, Search.Filters, Search.Actions, Search.Container, SearchProvider                                                                                              |
-| **Dashboard**      | PageHeader, HeaderSection, InsetSidebar, DualSidebar, ProjectSwitcher, SidebarNav, SidebarBrand, SidebarUserMenu                                                                                           |
-| **Other**          | ModeToggle, TooltipWrapper, ButtonTooltip, IconTooltip, DropdownWrapper, ActionDropdown, SelectDropdown, CheckboxDropdown, RadioDropdown, AccordionSection, FaqAccordion, EventCalendar                    |
+### `@classytic/fluid` (RSC-compatible)
 
-## Hooks
+| Category | Components |
+|----------|-----------|
+| **Layout** | Section, Container |
+| **Display** | DisplayHeading, SocialIcons (Facebook, Google, TwitterX, Instagram, WhatsApp) |
+| **States** | EmptyState, EmptyStateNoResults, EmptyStateNoData, EmptyStateNotFound |
+| **Loading** | LoadingState, LoadingOverlay |
+| **Skeletons** | SkeletonTable, SkeletonList, SkeletonCard, SkeletonGrid |
+| **Utilities** | cn, buildFilterParams, buildSearchParams, getApiParams |
 
-| Hook                   | Description                                |
-| ---------------------- | ------------------------------------------ |
-| `useDebounce`          | Debounce a value (e.g., search input)      |
-| `useDebouncedCallback` | Debounce a function callback               |
-| `useCopyToClipboard`   | Copy text to clipboard with feedback state |
-| `useBaseSearch`        | Full search state management with filters  |
-| `useIsMobile`          | Responsive breakpoint detection            |
-| `useMediaQuery`        | Generic media query hook                   |
-| `useScrollDetection`   | Detect scroll position/direction           |
+### `@classytic/fluid/client/core`
 
-## Exports
+| Category | Components |
+|----------|-----------|
+| **Dialogs/Sheets** | DialogWrapper, FormDialog, SheetWrapper, FormSheet, ConfirmDialog, ConfirmSheet, DeleteConfirmDialog, InfoAlert |
+| **Tables** | TableWrapper, SimpleTable |
+| **Layout** | CardWrapper, DataCard, LoadingCard, StatsCard, DraggableCard, CollapsibleWrapper, CollapsibleCard, CollapsibleSection, ResponsiveSplitLayout, TabsWrapper, DynamicTabs, AccordionSection, FaqAccordion |
+| **Display** | Pill (+ Avatar, Button, Status, Indicator, Delta, Icon, AvatarGroup), InfoRow, CopyButton, CopyText, CopyCodeBlock, Thumbnail, DetailView, DetailItem |
+| **Feedback** | ErrorState, ErrorStateInline, StatusBanner, Stepper, Timeline |
+| **Navigation** | ApiPagination, CustomPagination, PaginationInfo |
+| **Dropdowns** | DropdownWrapper, ActionDropdown, SelectDropdown, CheckboxDropdown, RadioDropdown |
+| **Animations** | FadeIn, FadeInUp, SlideIn, ScaleIn, StaggerChildren, AnimatedText, AnimatedCounter |
+| **Other** | TooltipWrapper, ButtonTooltip, IconTooltip, InfoTooltip, ActionTooltip, PhoneInput, ClientSubmitButton, FeatureItem, FeatureList |
 
-```tsx
-// Main — all components, hooks, and utilities
-import { ... } from "@classytic/fluid";
+### `@classytic/fluid/client/table`
+
+DataTable, DataTableToolbar
+
+### `@classytic/fluid/client/theme`
+
+ModeToggle
+
+### `@classytic/fluid/client/error`
+
+ErrorBoundary, FeatureErrorBoundary, AsyncBoundary, FullPageErrorFallback, InlineErrorFallback
+
+### `@classytic/fluid/client/calendar`
+
+EventCalendar, CalendarWithDetail, CalendarDayDetail
+
+### `@classytic/fluid/forms`
+
+| Category | Components |
+|----------|-----------|
+| **Text** | FormInput, FormTextarea, PasswordInput, NumberInput |
+| **Selection** | SelectInput, ComboboxInput, MultiSelect, AsyncCombobox, AsyncMultiSelect |
+| **Toggle** | CheckboxInput, RadioInput, SwitchInput |
+| **Date/Time** | DateInput, DateRangeInput, DateTimeInput, DateRangeFilter |
+| **Tags** | TagInput, TagChoiceInput |
+| **Special** | SlugField, OTPInput, FileUploadInput, PhoneInput (in client/core) |
+| **Layout** | FormSection, FormGrid, FormFieldArray, FormFieldArrayItem |
+| **Feedback** | FormErrorSummary |
 
-// Dashboard — sidebar layouts, headers, navigation
-import { ... } from "@classytic/fluid/dashboard";
+### `@classytic/fluid/layouts`
 
-// Layout — Section, Container
-import { ... } from "@classytic/fluid/layout";
+DrawerWrapper, FormDrawer, ConfirmDrawer, NavigationBar, ContextMenuWrapper, HoverCardWrapper, UserHoverCard
 
-// Compact — space-efficient form fields
-import { ... } from "@classytic/fluid/compact";
+### `@classytic/fluid/dashboard`
 
-// Search — composable search UI
-import { ... } from "@classytic/fluid/search";
+DashboardPageLayout, PageHeader, HeaderSection, DashboardContent, DashboardHeader, InsetSidebar, DualSidebar, FloatingSidebar, MiniSidebar, TopbarRail, SidebarBrand, SidebarNav, SidebarUserMenu, ProjectSwitcher
+
+### `@classytic/fluid/compact`
+
+CompactInput, CompactTextarea, CompactSelect, CompactNumberInput, CompactTagChoice, CompactSlugField
+
+### `@classytic/fluid/command`
+
+CommandSearch (+ Input, List, Group, Item, Empty, Separator), useCommandSearch, useKeyboardShortcut
+
+## Hooks
+
+| Hook | Entry | Description |
+|------|-------|-------------|
+| `useIsMobile` | client/hooks | Responsive breakpoint detection |
+| `useMediaQuery` | client/hooks | Generic media query hook |
+| `useDebounce` | client/hooks | Debounce a value |
+| `useDebouncedCallback` | client/hooks | Debounce a function callback |
+| `useCopyToClipboard` | client/hooks | Copy text with feedback state |
+| `useBaseSearch` | client/hooks | Full search state with URL sync |
+| `useScrollDetection` | client/hooks | Detect scroll position/direction |
+| `useLocalStorage` | client/hooks | Typed localStorage hook |
+| `useKeyboardShortcut` | client/hooks | Register keyboard shortcuts |
+| `useInView` | client/core | Intersection observer hook |
+| `useCommandSearch` | command | Programmatic command palette control |
+| `useSearch` | search | Search context consumer |
+
+## Styles
+
+Import the stylesheet in your root layout. This includes both the Tailwind `@source` directive (so Tailwind scans fluid's dist for class names) and animation keyframes:
+
+```tsx
+import "@classytic/fluid/styles.css";
 ```
 
 ## Requirements
 
-- React 18+ (Next.js optional — required for dashboard/routing components)
+- React 19+ and Next.js 15+
 - shadcn/ui components at `@/components/ui/*`
 - Tailwind CSS configured in your project
 
+### Optional peer dependencies
+
+| Package | Required by |
+|---------|------------|
+| `next-themes` | ModeToggle component |
+| `react-hook-form` | `@classytic/fluid/forms` entry |
+| `react-error-boundary` | ErrorBoundary, AsyncBoundary |
+| `@tanstack/react-table` | DataTable component |
+| `date-fns` | DateInput, DateRangeInput, EventCalendar |
+
 ## Dev
 
 ```bash
-npm run build   # Build package
-npm run dev     # Watch mode
-npm run clean   # Remove dist
+npm run build      # Build with tsdown
+npm run dev        # Watch mode
+npm run typecheck  # Type check
+npm run clean      # Remove dist
 ```
 
 ## License
 
-**UNLICENSED**
-
-Copyright © 2026 Classytic. All rights reserved.
-
-This software is the confidential and proprietary information of Classytic.
-Unauthorized copying of this software, via any medium is strictly prohibited.
+MIT — see [LICENSE](./LICENSE) for details.

package/dist/api-pagination-CJ0vR_w6.d.mts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/api-pagination.d.ts
+interface ApiPaginationData {
+  total: number;
+  pages: number;
+  page: number;
+  limit: number;
+  hasNext: boolean;
+  hasPrev: boolean;
+}
+interface ApiPaginationProps extends Partial<ApiPaginationData> {
+  onPageChange?: (page: number) => void;
+  className?: string;
+  showInfo?: boolean;
+  infoPosition?: "left" | "right";
+}
+/**
+ * ApiPagination - A reusable pagination component for API-driven data
+ */
+declare function ApiPagination({
+  total,
+  limit,
+  pages,
+  page,
+  hasNext,
+  hasPrev,
+  onPageChange,
+  className,
+  showInfo,
+  infoPosition
+}: ApiPaginationProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ApiPaginationData as n, ApiPaginationProps as r, ApiPagination as t };

package/dist/api-pagination-DBTE0yk4.mjs

@@ -0,0 +1,190 @@
+import { t as cn } from "./utils-DQ5SCVoW.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
+
+//#region src/components/custom-pagination.tsx
+function CustomPagination({ page, onPageChange, pages, hasPrev, hasNext }) {
+	const [isMobile, setIsMobile] = useState(false);
+	const currentPageNum = Number(page);
+	useEffect(() => {
+		const checkMobile = () => {
+			setIsMobile(window.innerWidth < 640);
+		};
+		checkMobile();
+		window.addEventListener("resize", checkMobile);
+		return () => window.removeEventListener("resize", checkMobile);
+	}, []);
+	if (pages <= 1) return null;
+	const getPageNumbers = () => {
+		const delta = isMobile ? 1 : 2;
+		const range = [];
+		const rangeWithDots = [];
+		for (let i = Math.max(2, currentPageNum - delta); i <= Math.min(pages - 1, currentPageNum + delta); i++) range.push(i);
+		if (currentPageNum - delta > 2) rangeWithDots.push(1, "...");
+		else rangeWithDots.push(1);
+		rangeWithDots.push(...range);
+		if (currentPageNum + delta < pages - 1) rangeWithDots.push("...", pages);
+		else if (pages > 1) {
+			if (!range.includes(pages)) rangeWithDots.push(pages);
+		}
+		return [...new Set(rangeWithDots)];
+	};
+	if (isMobile && pages > 5) return /* @__PURE__ */ jsx(Pagination, {
+		className: "mx-0 w-auto",
+		children: /* @__PURE__ */ jsxs(PaginationContent, {
+			className: "gap-1",
+			children: [
+				/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationPrevious, {
+					onClick: () => hasPrev ? onPageChange(currentPageNum - 1) : void 0,
+					className: cn("cursor-pointer transition-colors h-8 px-2 text-xs", !hasPrev && "pointer-events-none opacity-50 cursor-not-allowed", hasPrev && "hover:bg-accent hover:text-accent-foreground"),
+					"aria-disabled": !hasPrev
+				}) }),
+				/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsxs("div", {
+					className: "flex h-8 items-center justify-center px-3 text-xs font-medium bg-primary text-primary-foreground rounded-md",
+					children: [
+						currentPageNum,
+						" / ",
+						pages
+					]
+				}) }),
+				/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationNext, {
+					onClick: () => hasNext ? onPageChange(currentPageNum + 1) : void 0,
+					className: cn("cursor-pointer transition-colors h-8 px-2 text-xs", !hasNext && "pointer-events-none opacity-50 cursor-not-allowed", hasNext && "hover:bg-accent hover:text-accent-foreground"),
+					"aria-disabled": !hasNext
+				}) })
+			]
+		})
+	});
+	return /* @__PURE__ */ jsx(Pagination, {
+		className: "mx-0 w-auto",
+		children: /* @__PURE__ */ jsxs(PaginationContent, {
+			className: "gap-1 flex-wrap",
+			children: [
+				/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationPrevious, {
+					onClick: () => hasPrev ? onPageChange(currentPageNum - 1) : void 0,
+					className: cn("cursor-pointer transition-colors", isMobile ? "h-8 px-2 text-xs" : "h-9 px-3 text-sm", !hasPrev && "pointer-events-none opacity-50 cursor-not-allowed", hasPrev && "hover:bg-accent hover:text-accent-foreground"),
+					"aria-disabled": !hasPrev
+				}) }),
+				getPageNumbers().map((pageNum, index) => /* @__PURE__ */ jsx(PaginationItem, { children: pageNum === "..." ? /* @__PURE__ */ jsx("span", {
+					className: cn("flex items-center justify-center text-muted-foreground", isMobile ? "h-8 w-8 text-xs" : "h-9 w-9 text-sm"),
+					children: "..."
+				}) : /* @__PURE__ */ jsx(PaginationLink, {
+					className: cn("cursor-pointer transition-colors", isMobile ? "h-8 w-8 text-xs p-0" : "h-9 w-9 text-sm p-0", "hover:bg-accent hover:text-accent-foreground", Number(currentPageNum) === Number(pageNum) && "bg-primary text-primary-foreground hover:bg-primary/90"),
+					onClick: () => typeof pageNum === "number" ? onPageChange(pageNum) : void 0,
+					isActive: Number(currentPageNum) === Number(pageNum),
+					"aria-label": `Go to page ${pageNum}`,
+					"aria-current": Number(currentPageNum) === Number(pageNum) ? "page" : void 0,
+					children: pageNum
+				}) }, `pagination-page-${pageNum}-${index}`)),
+				/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationNext, {
+					onClick: () => hasNext ? onPageChange(currentPageNum + 1) : void 0,
+					className: cn("cursor-pointer transition-colors", isMobile ? "h-8 px-2 text-xs" : "h-9 px-3 text-sm", !hasNext && "pointer-events-none opacity-50 cursor-not-allowed", hasNext && "hover:bg-accent hover:text-accent-foreground"),
+					"aria-disabled": !hasNext
+				}) })
+			]
+		})
+	});
+}
+function PaginationInfo({ page, total, limit = 10 }) {
+	const [isMobile, setIsMobile] = useState(false);
+	useEffect(() => {
+		const checkMobile = () => {
+			setIsMobile(window.innerWidth < 640);
+		};
+		checkMobile();
+		window.addEventListener("resize", checkMobile);
+		return () => window.removeEventListener("resize", checkMobile);
+	}, []);
+	if (total === 0) return /* @__PURE__ */ jsx("div", {
+		className: "flex-1 text-sm text-muted-foreground",
+		children: /* @__PURE__ */ jsx("p", { children: "No entries found" })
+	});
+	const startEntry = (page - 1) * limit + 1;
+	const endEntry = Math.min(page * limit, total);
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex-1 text-sm text-muted-foreground",
+		children: /* @__PURE__ */ jsx("p", {
+			className: cn("whitespace-nowrap", isMobile && "text-xs"),
+			children: isMobile ? /* @__PURE__ */ jsxs("span", { children: [
+				startEntry.toLocaleString(),
+				"-",
+				endEntry.toLocaleString(),
+				" of",
+				" ",
+				total.toLocaleString()
+			] }) : /* @__PURE__ */ jsxs("span", { children: [
+				"Showing",
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-foreground",
+					children: startEntry.toLocaleString()
+				}),
+				" ",
+				"to",
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-foreground",
+					children: endEntry.toLocaleString()
+				}),
+				" ",
+				"of",
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-foreground",
+					children: total.toLocaleString()
+				}),
+				" ",
+				total === 1 ? "result" : "results"
+			] })
+		})
+	});
+}
+
+//#endregion
+//#region src/components/api-pagination.tsx
+/**
+* ApiPagination - A reusable pagination component for API-driven data
+*/
+function ApiPagination({ total = 0, limit = 10, pages = 1, page = 1, hasNext = false, hasPrev = false, onPageChange = () => {}, className, showInfo = true, infoPosition = "left" }) {
+	const infoComponent = showInfo && /* @__PURE__ */ jsx("div", {
+		className: "shrink-0",
+		children: /* @__PURE__ */ jsx(PaginationInfo, {
+			total,
+			page,
+			limit
+		})
+	});
+	const paginationComponent = /* @__PURE__ */ jsx("div", {
+		className: "flex justify-center sm:justify-end",
+		children: /* @__PURE__ */ jsx(CustomPagination, {
+			page,
+			pages,
+			hasPrev,
+			hasNext,
+			onPageChange
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("shrink-0 bg-muted/30 rounded-lg border border-border p-3 mb-2", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4",
+			children: infoPosition === "left" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				className: "order-2 sm:order-1",
+				children: infoComponent
+			}), /* @__PURE__ */ jsx("div", {
+				className: "order-1 sm:order-2",
+				children: paginationComponent
+			})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				className: "order-1 sm:order-1",
+				children: paginationComponent
+			}), /* @__PURE__ */ jsx("div", {
+				className: "order-2 sm:order-2",
+				children: infoComponent
+			})] })
+		})
+	});
+}
+
+//#endregion
+export { CustomPagination as n, PaginationInfo as r, ApiPagination as t };

package/dist/chunk-DQk6qfdC.mjs

@@ -0,0 +1,18 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (!no_symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+
+//#endregion
+export { __exportAll as t };

package/dist/client/calendar.d.mts

@@ -0,0 +1,105 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region src/components/event-calendar.d.ts
+interface CalendarEvent {
+  id: string;
+  date: Date | string;
+  [key: string]: any;
+}
+interface EventCalendarProps<T extends CalendarEvent> {
+  /** Events to display on the calendar */
+  events?: T[];
+  /** Currently selected date */
+  selectedDate?: Date | null;
+  /** Callback when a date is selected */
+  onDateSelect?: (date: Date, events: T[]) => void;
+  /** Callback when month changes */
+  onMonthChange?: (date: Date) => void;
+  /** Initial month to display */
+  initialMonth?: Date;
+  /** Custom render for day cell content */
+  renderDayContent?: (date: Date, events: T[], isSelected: boolean) => ReactNode;
+  /** Custom render for event indicators */
+  renderEventIndicators?: (events: T[]) => ReactNode;
+  /** Get events for a specific date (custom filtering) */
+  getEventsForDate?: (date: Date, events: T[]) => T[];
+  /** Additional class names */
+  className?: string;
+  /** Header content (left side) */
+  headerLeft?: ReactNode;
+  /** Header content (right side, before navigation) */
+  headerRight?: ReactNode;
+  /** Minimum cell height */
+  minCellHeight?: string;
+  /** Show week numbers */
+  showWeekNumbers?: boolean;
+  /** Loading state */
+  isLoading?: boolean;
+}
+/**
+ * EventCalendar - A reusable calendar component for displaying events
+ *
+ * Can be used for attendance tracking, scheduling, etc.
+ */
+declare function EventCalendar<T extends CalendarEvent>({
+  events,
+  selectedDate: controlledSelectedDate,
+  onDateSelect,
+  onMonthChange,
+  initialMonth,
+  renderDayContent,
+  renderEventIndicators,
+  getEventsForDate,
+  className,
+  headerLeft,
+  headerRight,
+  minCellHeight,
+  showWeekNumbers,
+  isLoading
+}: EventCalendarProps<T>): react_jsx_runtime0.JSX.Element;
+/**
+ * CalendarDayDetail - Side panel component for showing selected day details
+ */
+interface CalendarDayDetailProps {
+  date: Date | null;
+  title?: string;
+  emptyMessage?: string;
+  children?: ReactNode;
+  className?: string;
+}
+declare function CalendarDayDetail({
+  date,
+  title,
+  emptyMessage,
+  children,
+  className
+}: CalendarDayDetailProps): react_jsx_runtime0.JSX.Element;
+/**
+ * CalendarWithDetail - Calendar with integrated detail panel
+ */
+interface CalendarWithDetailProps<T extends CalendarEvent> extends Omit<EventCalendarProps<T>, "onDateSelect"> {
+  /** Render detail panel content */
+  renderDetail?: (date: Date, events: T[]) => ReactNode;
+  /** Detail panel title when no date selected */
+  detailTitle?: string;
+  /** Detail panel empty message */
+  detailEmptyMessage?: string;
+  /** Layout direction */
+  layout?: "horizontal" | "vertical";
+  /** Detail panel position */
+  detailPosition?: "left" | "right" | "top" | "bottom";
+  /** Callback when date is selected */
+  onDateSelect?: (date: Date, events: T[]) => void;
+}
+declare function CalendarWithDetail<T extends CalendarEvent>({
+  renderDetail,
+  detailTitle,
+  detailEmptyMessage,
+  layout,
+  detailPosition,
+  onDateSelect,
+  ...calendarProps
+}: CalendarWithDetailProps<T>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CalendarDayDetail, type CalendarDayDetailProps, type CalendarEvent, CalendarWithDetail, type CalendarWithDetailProps, EventCalendar, type EventCalendarProps };