@hyddenlabs/hydn-ui 0.3.0-alpha.99 → 0.3.1

package/dist/components/navigation/notification-dropdown/notification-dropdown.d.ts

@@ -0,0 +1,59 @@
+import { ButtonProps } from '../../forms/button/button';
+export type NotificationType = 'info' | 'success' | 'warning' | 'error';
+export type Notification = {
+    /** Unique identifier for the notification */
+    id: string;
+    /** Notification title/heading */
+    title: string;
+    /** Notification message/body */
+    message: string;
+    /** ISO timestamp string or Date object - component will parse and format */
+    timestamp: string | Date;
+    /** Read/unread status */
+    isRead: boolean;
+    /** Type determines icon color */
+    type: NotificationType;
+};
+export type NotificationDropdownProps = {
+    /** Array of notifications to display */
+    notifications: Notification[];
+    /** Callback when a notification is clicked */
+    onNotificationClick?: (notification: Notification) => void;
+    /** Callback when a notification is dismissed */
+    onNotificationDismiss?: (notificationId: string) => void;
+    /** Callback when "Mark all as read" is clicked */
+    onMarkAllAsRead?: () => void;
+    /** Callback when "Clear all" is clicked */
+    onClearAll?: () => void;
+    /** Custom empty state message */
+    emptyStateMessage?: string;
+    /** Custom header text - default "Notifications" */
+    headerText?: string;
+    /** Size variant */
+    size?: ButtonProps['size'];
+    /** Button variant for the trigger */
+    variant?: ButtonProps['variant'];
+    /** Button style for the trigger */
+    buttonStyle?: ButtonProps['style'];
+    /** Optional trigger icon (defaults to bell icon) */
+    triggerIcon?: string;
+    /** Badge display mode: 'full' (count + indicator), 'indicator' (dot only), 'none' (no badge) */
+    badgeMode?: 'full' | 'indicator' | 'none';
+    /** Alignment of the dropdown menu */
+    align?: 'start' | 'center' | 'end';
+    /** Maximum width for the dropdown menu */
+    maxWidth?: string;
+    /** Additional className for the trigger container */
+    className?: string;
+    /** Additional className for the dropdown menu */
+    menuClassName?: string;
+};
+/**
+ * NotificationDropdown component - specialized dropdown for notifications
+ */
+declare function NotificationDropdown({ notifications, onNotificationClick, onNotificationDismiss, onMarkAllAsRead, onClearAll, emptyStateMessage, headerText, size, variant, buttonStyle, triggerIcon, badgeMode, align, maxWidth, className, menuClassName }: Readonly<NotificationDropdownProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace NotificationDropdown {
+    var displayName: string;
+}
+export default NotificationDropdown;
+//# sourceMappingURL=notification-dropdown.d.ts.map

package/dist/components/navigation/notification-dropdown/notification-dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/notification-dropdown/notification-dropdown.tsx"],"names":[],"mappings":"AAEA,OAAe,EAAE,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGrE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAExE,MAAM,MAAM,YAAY,GAAG;IACzB,6CAA6C;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,4EAA4E;IAC5E,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,yBAAyB;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,iCAAiC;IACjC,IAAI,EAAE,gBAAgB,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,wCAAwC;IACxC,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,8CAA8C;IAC9C,mBAAmB,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3D,gDAAgD;IAChD,qBAAqB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,kDAAkD;IAClD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,iCAAiC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,qCAAqC;IACrC,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,mCAAmC;IACnC,WAAW,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACnC,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gGAAgG;IAChG,SAAS,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,MAAM,CAAC;IAC1C,qCAAqC;IACrC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAuCF;;GAEG;AACH,iBAAS,oBAAoB,CAAC,EAC5B,aAAa,EACb,mBAAmB,EACnB,qBAAqB,EACrB,eAAe,EACf,UAAU,EACV,iBAAsC,EACtC,UAA4B,EAC5B,IAAW,EACX,OAAmB,EACnB,WAAqB,EACrB,WAAoB,EACpB,SAAkB,EAClB,KAAa,EACb,QAAkB,EAClB,SAAc,EACd,aAAkB,EACnB,EAAE,QAAQ,CAAC,yBAAyB,CAAC,2CAkRrC;kBAnSQ,oBAAoB;;;AAuS7B,eAAe,oBAAoB,CAAC"}

package/dist/components/navigation/notification-dropdown/notification-dropdown.js

@@ -0,0 +1,456 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
+import Button from "../../forms/button/button.js";
+import { Icon } from "../../system/icon/icon.js";
+const notificationTypeIcons = {
+  info: "info-circle",
+  success: "circle-check",
+  warning: "alert-triangle",
+  error: "alert-circle"
+};
+const notificationTypeColors = {
+  info: "text-info",
+  success: "text-success",
+  warning: "text-warning",
+  error: "text-error"
+};
+function formatRelativeTime(timestamp) {
+  const date = typeof timestamp === "string" ? new Date(timestamp) : timestamp;
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSecs = Math.floor(diffMs / 1e3);
+  const diffMins = Math.floor(diffSecs / 60);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffSecs < 60) return "Just now";
+  if (diffMins < 60) return `${diffMins} min ago`;
+  if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? "s" : ""} ago`;
+  if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? "s" : ""} ago`;
+  return date.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+}
+function NotificationDropdown({
+  notifications,
+  onNotificationClick,
+  onNotificationDismiss,
+  onMarkAllAsRead,
+  onClearAll,
+  emptyStateMessage = "No notifications",
+  headerText = "Notifications",
+  size = "md",
+  variant = "neutral",
+  buttonStyle = "ghost",
+  triggerIcon = "bell",
+  badgeMode = "full",
+  align = "end",
+  maxWidth = "400px",
+  className = "",
+  menuClassName = ""
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const notificationRefs = useRef([]);
+  const [menuPosition, setMenuPosition] = useState(null);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const close = useCallback(() => setIsOpen(false), []);
+  const open = useCallback(() => setIsOpen(true), []);
+  const unreadCount = notifications.filter((n) => !n.isRead).length;
+  const hasUnread = unreadCount > 0;
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = (e) => {
+      const notificationItems = notificationRefs.current.filter(Boolean);
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        if (notificationItems.length === 0) return;
+        let nextIndex = activeIndex;
+        if (e.key === "ArrowDown") {
+          nextIndex = activeIndex < notificationItems.length - 1 ? activeIndex + 1 : 0;
+        } else {
+          nextIndex = activeIndex > 0 ? activeIndex - 1 : notificationItems.length - 1;
+        }
+        setActiveIndex(nextIndex);
+        notificationItems[nextIndex]?.focus();
+        return;
+      }
+      if (e.key === "Home") {
+        e.preventDefault();
+        if (notificationItems.length > 0) {
+          setActiveIndex(0);
+          notificationItems[0]?.focus();
+        }
+        return;
+      }
+      if (e.key === "End") {
+        e.preventDefault();
+        if (notificationItems.length > 0) {
+          const lastIndex = notificationItems.length - 1;
+          setActiveIndex(lastIndex);
+          notificationItems[lastIndex]?.focus();
+        }
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        close();
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [isOpen, close, activeIndex]);
+  useLayoutEffect(() => {
+    let raf;
+    if (isOpen && notifications.length > 0) {
+      const notificationItems = notificationRefs.current.filter(Boolean);
+      if (notificationItems.length > 0) {
+        raf = requestAnimationFrame(() => {
+          setActiveIndex(0);
+          notificationItems[0]?.focus();
+        });
+      }
+    } else if (!isOpen) {
+      raf = requestAnimationFrame(() => {
+        setActiveIndex(-1);
+      });
+    }
+    return () => {
+      if (raf) cancelAnimationFrame(raf);
+    };
+  }, [isOpen, notifications.length]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (event) => {
+      const isClickInTrigger = dropdownRef.current && dropdownRef.current.contains(event.target);
+      const isClickInMenu = menuRef.current && menuRef.current.contains(event.target);
+      if (!isClickInTrigger && !isClickInMenu) {
+        close();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen, close]);
+  useLayoutEffect(() => {
+    if (isOpen && triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      setMenuPosition({
+        top: rect.bottom,
+        left: rect.left,
+        width: rect.width
+      });
+    } else {
+      setMenuPosition(null);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleScrollOrResize = (event) => {
+      if (event && event.target && menuRef.current?.contains(event.target)) {
+        return;
+      }
+      close();
+    };
+    window.addEventListener("scroll", handleScrollOrResize, true);
+    window.addEventListener("resize", handleScrollOrResize);
+    return () => {
+      window.removeEventListener("scroll", handleScrollOrResize, true);
+      window.removeEventListener("resize", handleScrollOrResize);
+    };
+  }, [isOpen, close]);
+  const getAlignmentStyle = () => {
+    if (!menuPosition) return {};
+    const baseStyle = {
+      top: menuPosition.top + 4,
+      maxWidth: maxWidth || void 0
+    };
+    if (align === "start") {
+      baseStyle.left = menuPosition.left;
+    } else if (align === "end") {
+      baseStyle.right = window.innerWidth - (menuPosition.left + menuPosition.width);
+    } else {
+      baseStyle.left = menuPosition.left + menuPosition.width / 2;
+      baseStyle.transform = "translateX(-50%)";
+    }
+    return baseStyle;
+  };
+  const handleNotificationClick = (notification) => {
+    onNotificationClick?.(notification);
+    close();
+  };
+  const handleDismiss = (e, notificationId) => {
+    e.stopPropagation();
+    if (notifications.length === 1) {
+      close();
+    }
+    onNotificationDismiss?.(notificationId);
+  };
+  const handleMarkAllAsRead = () => {
+    onMarkAllAsRead?.();
+  };
+  const handleClearAll = () => {
+    onClearAll?.();
+    close();
+  };
+  const registerNotification = useCallback((el, index) => {
+    notificationRefs.current[index] = el;
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { ref: dropdownRef, className: `inline-block relative ${className}`, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref: triggerRef,
+        variant,
+        style: buttonStyle,
+        onClick: () => isOpen ? close() : open(),
+        "aria-expanded": isOpen,
+        "aria-haspopup": "true",
+        "aria-label": "Notifications",
+        size,
+        children: /* @__PURE__ */ jsxs("span", { className: "relative", children: [
+          /* @__PURE__ */ jsx(Icon, { name: triggerIcon, size, color: "currentColor" }),
+          (badgeMode === "indicator" || badgeMode === "full") && hasUnread && /* @__PURE__ */ jsx("span", { className: "absolute -top-0.5 -right-0.5 w-2 h-2 bg-info rounded-full" }),
+          badgeMode === "full" && unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1.5 -right-1.5 min-w-4.5 h-4.5 flex items-center justify-center bg-info text-info-foreground text-[10px] font-semibold rounded-full px-1", children: unreadCount > 99 ? "99+" : unreadCount })
+        ] })
+      }
+    ) }),
+    isOpen && menuPosition && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: menuRef,
+          className: `fixed bg-popover text-popover-foreground border border-border rounded-md shadow-lg z-50 w-96 max-h-128 overflow-hidden origin-top animate-scaleIn focus:outline-none flex flex-col ${menuClassName}`,
+          style: getAlignmentStyle(),
+          role: "menu",
+          "aria-label": headerText,
+          tabIndex: -1,
+          children: [
+            notifications.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border bg-muted/30", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold select-none", children: headerText }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                hasUnread && onMarkAllAsRead && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleMarkAllAsRead,
+                    className: "text-xs text-primary hover:text-primary-hover transition-colors cursor-pointer",
+                    children: "Mark all read"
+                  }
+                ),
+                onClearAll && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleClearAll,
+                    className: "text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
+                    children: "Clear all"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "overflow-y-auto flex-1 overflow-x-hidden [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-transparent hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-muted-foreground/30", children: notifications.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+              /* @__PURE__ */ jsx(Icon, { name: "bell-off", size: "xl", color: "currentColor", className: "text-muted-foreground mb-3" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyStateMessage })
+            ] }) : /* @__PURE__ */ jsx("div", { className: "grid divide-y divide-border", children: notifications.map((notification, index) => /* @__PURE__ */ jsx(
+              NotificationItem,
+              {
+                notification,
+                onClick: () => handleNotificationClick(notification),
+                onDismiss: (e) => handleDismiss(e, notification.id),
+                showDismissButton: !!onNotificationDismiss,
+                registerRef: (el) => registerNotification(el, index)
+              },
+              notification.id
+            )) }) })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+NotificationDropdown.displayName = "NotificationDropdown";
+function NotificationItem({
+  notification,
+  onClick,
+  onDismiss,
+  showDismissButton,
+  registerRef
+}) {
+  const typeIcon = notificationTypeIcons[notification.type];
+  const typeColor = notificationTypeColors[notification.type];
+  const [swipeX, setSwipeX] = useState(0);
+  const [isSwiping, setIsSwiping] = useState(false);
+  const [isDismissing, setIsDismissing] = useState(false);
+  const [isHorizontalSwipe, setIsHorizontalSwipe] = useState(false);
+  const startXRef = useRef(0);
+  const startYRef = useRef(0);
+  const currentXRef = useRef(0);
+  const initialSwipeXRef = useRef(0);
+  const itemRef = useRef(null);
+  const PARTIAL_OPEN_AMOUNT = -80;
+  const handleTouchStart = useCallback(
+    (e) => {
+      startXRef.current = e.touches[0].clientX;
+      startYRef.current = e.touches[0].clientY;
+      currentXRef.current = e.touches[0].clientX;
+      initialSwipeXRef.current = swipeX;
+      setIsSwiping(true);
+      setIsHorizontalSwipe(false);
+    },
+    [swipeX]
+  );
+  const handleTouchMove = useCallback(
+    (e) => {
+      if (!isSwiping) return;
+      const currentY = e.touches[0].clientY;
+      currentXRef.current = e.touches[0].clientX;
+      const diffX = Math.abs(currentXRef.current - startXRef.current);
+      const diffY = Math.abs(currentY - startYRef.current);
+      if (!isHorizontalSwipe && diffX > 5 && diffX > diffY) {
+        setIsHorizontalSwipe(true);
+      }
+      if (isHorizontalSwipe || diffX > diffY && diffX > 5) {
+        e.preventDefault();
+      }
+      const diff = currentXRef.current - startXRef.current;
+      const newPosition = initialSwipeXRef.current + diff;
+      if (newPosition <= 0) {
+        setSwipeX(newPosition);
+      }
+    },
+    [isSwiping, isHorizontalSwipe]
+  );
+  const handleTouchEnd = useCallback(
+    (e) => {
+      if (!isSwiping) return;
+      const itemWidth = itemRef.current?.offsetWidth || 0;
+      const swipeDistance = Math.abs(swipeX);
+      const dismissThreshold = itemWidth * 0.75;
+      const revealThreshold = itemWidth * 0.3;
+      if (swipeDistance >= dismissThreshold) {
+        setSwipeX(-itemWidth);
+        requestAnimationFrame(() => {
+          setIsDismissing(true);
+        });
+        setTimeout(() => {
+          onDismiss(e);
+        }, 300);
+      } else if (swipeDistance >= revealThreshold) {
+        setSwipeX(PARTIAL_OPEN_AMOUNT);
+      } else {
+        setSwipeX(0);
+      }
+      setIsSwiping(false);
+    },
+    [isSwiping, swipeX, onDismiss, PARTIAL_OPEN_AMOUNT]
+  );
+  const handleTrashClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      const itemWidth = itemRef.current?.offsetWidth || 0;
+      setSwipeX(-itemWidth);
+      requestAnimationFrame(() => {
+        setIsDismissing(true);
+      });
+      setTimeout(() => {
+        onDismiss(e);
+      }, 300);
+    },
+    [onDismiss]
+  );
+  const handleXButtonClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      requestAnimationFrame(() => {
+        setIsDismissing(true);
+      });
+      setTimeout(() => {
+        onDismiss(e);
+      }, 300);
+    },
+    [onDismiss]
+  );
+  const setRefs = useCallback(
+    (el) => {
+      itemRef.current = el;
+      registerRef(el);
+    },
+    [registerRef]
+  );
+  const isTouchDevice = typeof window !== "undefined" && (window.matchMedia("(pointer: coarse)").matches || "ontouchstart" in window);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative overflow-hidden transition-[max-height,opacity,margin] duration-300 ease-out",
+      style: {
+        maxHeight: isDismissing ? "0px" : "200px",
+        opacity: isDismissing ? 0 : 1,
+        marginTop: isDismissing ? "-1px" : "0px",
+        marginBottom: isDismissing ? "-1px" : "0px"
+      },
+      children: [
+        isTouchDevice && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-error flex items-center justify-end px-6", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleTrashClick,
+            className: "p-2 hover:bg-error-foreground/10 rounded transition-colors cursor-pointer",
+            "aria-label": "Delete notification",
+            children: /* @__PURE__ */ jsx(Icon, { name: "trash", size: "md", color: "currentColor", className: "text-error-foreground" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setRefs,
+            role: "button",
+            tabIndex: 0,
+            onClick,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick();
+              }
+            },
+            onTouchStart: handleTouchStart,
+            onTouchMove: handleTouchMove,
+            onTouchEnd: handleTouchEnd,
+            style: {
+              transform: `translateX(${swipeX}px)`,
+              transition: isSwiping ? "none" : "transform 0.2s ease-out",
+              touchAction: "pan-y"
+            },
+            className: `w-full text-left px-4 py-3 hover:bg-muted/50 relative group cursor-pointer ${!notification.isRead ? "bg-muted/20" : ""} bg-popover`,
+            children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "relative shrink-0 pt-0.5", children: [
+                /* @__PURE__ */ jsx(Icon, { name: typeIcon, size: "md", color: "currentColor", className: typeColor }),
+                !notification.isRead && /* @__PURE__ */ jsx("span", { className: "absolute -top-0.5 -right-0.5 w-2 h-2 bg-info rounded-full ring-2 ring-popover" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 pr-6", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between gap-2 mb-1", children: /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold text-foreground line-clamp-1", children: notification.title }) }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground/80 line-clamp-2 mb-1.5", children: notification.message }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: formatRelativeTime(notification.timestamp) })
+              ] }),
+              showDismissButton && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleXButtonClick,
+                  className: "absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-muted rounded cursor-pointer",
+                  "aria-label": "Dismiss notification",
+                  children: /* @__PURE__ */ jsx(Icon, { name: "x", size: "sm", color: "currentColor", className: "text-muted-foreground" })
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  NotificationDropdown as default
+};
+//# sourceMappingURL=notification-dropdown.js.map

package/dist/components/navigation/notification-dropdown/notification-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-dropdown.js","sources":["../../../../src/components/navigation/notification-dropdown/notification-dropdown.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react';\nimport { createPortal } from 'react-dom';\nimport Button, { type ButtonProps } from '../../forms/button/button';\nimport { Icon } from '@/components/system/icon';\n\nexport type NotificationType = 'info' | 'success' | 'warning' | 'error';\n\nexport type Notification = {\n  /** Unique identifier for the notification */\n  id: string;\n  /** Notification title/heading */\n  title: string;\n  /** Notification message/body */\n  message: string;\n  /** ISO timestamp string or Date object - component will parse and format */\n  timestamp: string | Date;\n  /** Read/unread status */\n  isRead: boolean;\n  /** Type determines icon color */\n  type: NotificationType;\n};\n\nexport type NotificationDropdownProps = {\n  /** Array of notifications to display */\n  notifications: Notification[];\n  /** Callback when a notification is clicked */\n  onNotificationClick?: (notification: Notification) => void;\n  /** Callback when a notification is dismissed */\n  onNotificationDismiss?: (notificationId: string) => void;\n  /** Callback when \"Mark all as read\" is clicked */\n  onMarkAllAsRead?: () => void;\n  /** Callback when \"Clear all\" is clicked */\n  onClearAll?: () => void;\n  /** Custom empty state message */\n  emptyStateMessage?: string;\n  /** Custom header text - default \"Notifications\" */\n  headerText?: string;\n  /** Size variant */\n  size?: ButtonProps['size'];\n  /** Button variant for the trigger */\n  variant?: ButtonProps['variant'];\n  /** Button style for the trigger */\n  buttonStyle?: ButtonProps['style'];\n  /** Optional trigger icon (defaults to bell icon) */\n  triggerIcon?: string;\n  /** Badge display mode: 'full' (count + indicator), 'indicator' (dot only), 'none' (no badge) */\n  badgeMode?: 'full' | 'indicator' | 'none';\n  /** Alignment of the dropdown menu */\n  align?: 'start' | 'center' | 'end';\n  /** Maximum width for the dropdown menu */\n  maxWidth?: string;\n  /** Additional className for the trigger container */\n  className?: string;\n  /** Additional className for the dropdown menu */\n  menuClassName?: string;\n};\n\n// Icon mapping for notification types\nconst notificationTypeIcons: Record<NotificationType, string> = {\n  info: 'info-circle',\n  success: 'circle-check',\n  warning: 'alert-triangle',\n  error: 'alert-circle'\n};\n\n// Color mapping for notification type icons\nconst notificationTypeColors: Record<NotificationType, string> = {\n  info: 'text-info',\n  success: 'text-success',\n  warning: 'text-warning',\n  error: 'text-error'\n};\n\n/**\n * Format timestamp to relative time (e.g., \"2 min ago\", \"3 hours ago\")\n */\nfunction formatRelativeTime(timestamp: string | Date): string {\n  const date = typeof timestamp === 'string' ? new Date(timestamp) : timestamp;\n  const now = new Date();\n  const diffMs = now.getTime() - date.getTime();\n  const diffSecs = Math.floor(diffMs / 1000);\n  const diffMins = Math.floor(diffSecs / 60);\n  const diffHours = Math.floor(diffMins / 60);\n  const diffDays = Math.floor(diffHours / 24);\n\n  if (diffSecs < 60) return 'Just now';\n  if (diffMins < 60) return `${diffMins} min ago`;\n  if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;\n  if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;\n\n  // For older notifications, show the date\n  return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });\n}\n\n/**\n * NotificationDropdown component - specialized dropdown for notifications\n */\nfunction NotificationDropdown({\n  notifications,\n  onNotificationClick,\n  onNotificationDismiss,\n  onMarkAllAsRead,\n  onClearAll,\n  emptyStateMessage = 'No notifications',\n  headerText = 'Notifications',\n  size = 'md',\n  variant = 'neutral',\n  buttonStyle = 'ghost',\n  triggerIcon = 'bell',\n  badgeMode = 'full',\n  align = 'end',\n  maxWidth = '400px',\n  className = '',\n  menuClassName = ''\n}: Readonly<NotificationDropdownProps>) {\n  const [isOpen, setIsOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const notificationRefs = useRef<Array<HTMLDivElement | null>>([]);\n  const [menuPosition, setMenuPosition] = useState<{ top: number; left: number; width: number } | null>(null);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n\n  const close = useCallback(() => setIsOpen(false), []);\n  const open = useCallback(() => setIsOpen(true), []);\n\n  const unreadCount = notifications.filter((n) => !n.isRead).length;\n  const hasUnread = unreadCount > 0;\n\n  // Handle keyboard\n  useEffect(() => {\n    if (!isOpen) return;\n    const handleKey = (e: KeyboardEvent) => {\n      const notificationItems = notificationRefs.current.filter(Boolean);\n\n      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n        e.preventDefault();\n        if (notificationItems.length === 0) return;\n\n        let nextIndex = activeIndex;\n        if (e.key === 'ArrowDown') {\n          nextIndex = activeIndex < notificationItems.length - 1 ? activeIndex + 1 : 0;\n        } else {\n          nextIndex = activeIndex > 0 ? activeIndex - 1 : notificationItems.length - 1;\n        }\n\n        setActiveIndex(nextIndex);\n        notificationItems[nextIndex]?.focus();\n        return;\n      }\n\n      if (e.key === 'Home') {\n        e.preventDefault();\n        if (notificationItems.length > 0) {\n          setActiveIndex(0);\n          notificationItems[0]?.focus();\n        }\n        return;\n      }\n\n      if (e.key === 'End') {\n        e.preventDefault();\n        if (notificationItems.length > 0) {\n          const lastIndex = notificationItems.length - 1;\n          setActiveIndex(lastIndex);\n          notificationItems[lastIndex]?.focus();\n        }\n        return;\n      }\n\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        close();\n        triggerRef.current?.focus();\n      }\n    };\n    document.addEventListener('keydown', handleKey);\n    return () => document.removeEventListener('keydown', handleKey);\n  }, [isOpen, close, activeIndex]);\n\n  useLayoutEffect(() => {\n    let raf: number | undefined;\n    if (isOpen && notifications.length > 0) {\n      const notificationItems = notificationRefs.current.filter(Boolean);\n      if (notificationItems.length > 0) {\n        raf = requestAnimationFrame(() => {\n          setActiveIndex(0);\n          notificationItems[0]?.focus();\n        });\n      }\n    } else if (!isOpen) {\n      raf = requestAnimationFrame(() => {\n        setActiveIndex(-1);\n      });\n    }\n    return () => {\n      if (raf) cancelAnimationFrame(raf);\n    };\n  }, [isOpen, notifications.length]);\n\n  // Outside click close\n  useEffect(() => {\n    if (!isOpen) return;\n    const handleClickOutside = (event: MouseEvent) => {\n      const isClickInTrigger = dropdownRef.current && dropdownRef.current.contains(event.target as Node);\n      const isClickInMenu = menuRef.current && menuRef.current.contains(event.target as Node);\n\n      if (!isClickInTrigger && !isClickInMenu) {\n        close();\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, close]);\n\n  useLayoutEffect(() => {\n    if (isOpen && triggerRef.current) {\n      const rect = triggerRef.current.getBoundingClientRect();\n      setMenuPosition({\n        top: rect.bottom,\n        left: rect.left,\n        width: rect.width\n      });\n    } else {\n      setMenuPosition(null);\n    }\n  }, [isOpen]);\n\n  // Close on scroll or resize\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleScrollOrResize = (event?: Event) => {\n      if (event && event.target && menuRef.current?.contains(event.target as Node)) {\n        return;\n      }\n      close();\n    };\n\n    window.addEventListener('scroll', handleScrollOrResize, true);\n    window.addEventListener('resize', handleScrollOrResize);\n\n    return () => {\n      window.removeEventListener('scroll', handleScrollOrResize, true);\n      window.removeEventListener('resize', handleScrollOrResize);\n    };\n  }, [isOpen, close]);\n\n  const getAlignmentStyle = (): React.CSSProperties => {\n    if (!menuPosition) return {};\n    const baseStyle: React.CSSProperties = {\n      top: menuPosition.top + 4,\n      maxWidth: maxWidth || undefined\n    };\n\n    if (align === 'start') {\n      baseStyle.left = menuPosition.left;\n    } else if (align === 'end') {\n      baseStyle.right = window.innerWidth - (menuPosition.left + menuPosition.width);\n    } else {\n      baseStyle.left = menuPosition.left + menuPosition.width / 2;\n      baseStyle.transform = 'translateX(-50%)';\n    }\n\n    return baseStyle;\n  };\n\n  const handleNotificationClick = (notification: Notification) => {\n    onNotificationClick?.(notification);\n    // Optionally close the dropdown after clicking a notification\n    close();\n  };\n\n  const handleDismiss = (e: React.MouseEvent, notificationId: string) => {\n    e.stopPropagation();\n\n    // If this is the last notification, close the dropdown after animation\n    if (notifications.length === 1) {\n      close();\n    }\n\n    onNotificationDismiss?.(notificationId);\n  };\n\n  const handleMarkAllAsRead = () => {\n    onMarkAllAsRead?.();\n  };\n\n  const handleClearAll = () => {\n    onClearAll?.();\n    close();\n  };\n\n  const registerNotification = useCallback((el: HTMLDivElement | null, index: number) => {\n    notificationRefs.current[index] = el;\n  }, []);\n\n  return (\n    <>\n      <div ref={dropdownRef} className={`inline-block relative ${className}`}>\n        <Button\n          ref={triggerRef}\n          variant={variant}\n          style={buttonStyle}\n          onClick={() => (isOpen ? close() : open())}\n          aria-expanded={isOpen}\n          aria-haspopup=\"true\"\n          aria-label=\"Notifications\"\n          size={size}\n        >\n          <span className=\"relative\">\n            <Icon name={triggerIcon} size={size} color=\"currentColor\" />\n            {(badgeMode === 'indicator' || badgeMode === 'full') && hasUnread && (\n              <span className=\"absolute -top-0.5 -right-0.5 w-2 h-2 bg-info rounded-full\" />\n            )}\n            {badgeMode === 'full' && unreadCount > 0 && (\n              <span className=\"absolute -top-1.5 -right-1.5 min-w-4.5 h-4.5 flex items-center justify-center bg-info text-info-foreground text-[10px] font-semibold rounded-full px-1\">\n                {unreadCount > 99 ? '99+' : unreadCount}\n              </span>\n            )}\n          </span>\n        </Button>\n      </div>\n      {isOpen &&\n        menuPosition &&\n        createPortal(\n          <div\n            ref={menuRef}\n            className={`fixed bg-popover text-popover-foreground border border-border rounded-md shadow-lg z-50 w-96 max-h-128 overflow-hidden origin-top animate-scaleIn focus:outline-none flex flex-col ${menuClassName}`}\n            style={getAlignmentStyle()}\n            role=\"menu\"\n            aria-label={headerText}\n            tabIndex={-1}\n          >\n            {/* Header with actions */}\n            {notifications.length > 0 && (\n              <div className=\"flex items-center justify-between px-4 py-3 border-b border-border bg-muted/30\">\n                <h3 className=\"text-sm font-semibold select-none\">{headerText}</h3>\n                <div className=\"flex items-center gap-2\">\n                  {hasUnread && onMarkAllAsRead && (\n                    <button\n                      type=\"button\"\n                      onClick={handleMarkAllAsRead}\n                      className=\"text-xs text-primary hover:text-primary-hover transition-colors cursor-pointer\"\n                    >\n                      Mark all read\n                    </button>\n                  )}\n                  {onClearAll && (\n                    <button\n                      type=\"button\"\n                      onClick={handleClearAll}\n                      className=\"text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer\"\n                    >\n                      Clear all\n                    </button>\n                  )}\n                </div>\n              </div>\n            )}\n\n            {/* Notifications list or empty state */}\n            <div className=\"overflow-y-auto flex-1 overflow-x-hidden [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-transparent hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-muted-foreground/30\">\n              {notifications.length === 0 ? (\n                <div className=\"flex flex-col items-center justify-center py-12 px-4 text-center\">\n                  <Icon name=\"bell-off\" size=\"xl\" color=\"currentColor\" className=\"text-muted-foreground mb-3\" />\n                  <p className=\"text-sm text-muted-foreground\">{emptyStateMessage}</p>\n                </div>\n              ) : (\n                <div className=\"grid divide-y divide-border\">\n                  {notifications.map((notification, index) => (\n                    <NotificationItem\n                      key={notification.id}\n                      notification={notification}\n                      onClick={() => handleNotificationClick(notification)}\n                      onDismiss={(e) => handleDismiss(e, notification.id)}\n                      showDismissButton={!!onNotificationDismiss}\n                      registerRef={(el) => registerNotification(el, index)}\n                    />\n                  ))}\n                </div>\n              )}\n            </div>\n          </div>,\n          document.body\n        )}\n    </>\n  );\n}\n\nNotificationDropdown.displayName = 'NotificationDropdown';\n\nexport default NotificationDropdown;\n\n// NotificationItem component\ntype NotificationItemProps = {\n  notification: Notification;\n  onClick: () => void;\n  onDismiss: (e: React.MouseEvent) => void;\n  showDismissButton: boolean;\n  registerRef: (el: HTMLDivElement | null) => void;\n};\n\nfunction NotificationItem({\n  notification,\n  onClick,\n  onDismiss,\n  showDismissButton,\n  registerRef\n}: Readonly<NotificationItemProps>) {\n  const typeIcon = notificationTypeIcons[notification.type];\n  const typeColor = notificationTypeColors[notification.type];\n  const [swipeX, setSwipeX] = useState(0);\n  const [isSwiping, setIsSwiping] = useState(false);\n  const [isDismissing, setIsDismissing] = useState(false);\n  const [isHorizontalSwipe, setIsHorizontalSwipe] = useState(false);\n  const startXRef = useRef(0);\n  const startYRef = useRef(0);\n  const currentXRef = useRef(0);\n  const initialSwipeXRef = useRef(0); // Track position when touch starts\n  const itemRef = useRef<HTMLDivElement | null>(null);\n  const PARTIAL_OPEN_AMOUNT = -80; // How far to slide to reveal delete button\n\n  const handleTouchStart = useCallback(\n    (e: React.TouchEvent) => {\n      startXRef.current = e.touches[0].clientX;\n      startYRef.current = e.touches[0].clientY;\n      currentXRef.current = e.touches[0].clientX;\n      initialSwipeXRef.current = swipeX; // Remember where we are\n      setIsSwiping(true);\n      setIsHorizontalSwipe(false);\n    },\n    [swipeX]\n  );\n\n  const handleTouchMove = useCallback(\n    (e: React.TouchEvent) => {\n      if (!isSwiping) return;\n\n      const currentY = e.touches[0].clientY;\n      currentXRef.current = e.touches[0].clientX;\n\n      const diffX = Math.abs(currentXRef.current - startXRef.current);\n      const diffY = Math.abs(currentY - startYRef.current);\n\n      // Detect horizontal swipe early and lock it in\n      if (!isHorizontalSwipe && diffX > 5 && diffX > diffY) {\n        setIsHorizontalSwipe(true);\n      }\n\n      // If this is a horizontal swipe, always prevent default\n      if (isHorizontalSwipe || (diffX > diffY && diffX > 5)) {\n        e.preventDefault();\n      }\n\n      const diff = currentXRef.current - startXRef.current;\n      const newPosition = initialSwipeXRef.current + diff;\n\n      // Only allow left swipe (negative values) and don't go past 0 (right)\n      if (newPosition <= 0) {\n        setSwipeX(newPosition);\n      }\n    },\n    [isSwiping, isHorizontalSwipe]\n  );\n\n  const handleTouchEnd = useCallback(\n    (e: React.TouchEvent) => {\n      if (!isSwiping) return;\n      const itemWidth = itemRef.current?.offsetWidth || 0;\n      const swipeDistance = Math.abs(swipeX);\n      const dismissThreshold = itemWidth * 0.75; // 75% for auto-dismiss\n      const revealThreshold = itemWidth * 0.3; // 30% to reveal delete button\n\n      if (swipeDistance >= dismissThreshold) {\n        // Large swipe: complete the swipe animation then dismiss\n        setSwipeX(-itemWidth);\n        // Delay state change to ensure transition triggers\n        requestAnimationFrame(() => {\n          setIsDismissing(true);\n        });\n        setTimeout(() => {\n          onDismiss(e as unknown as React.MouseEvent);\n        }, 300);\n      } else if (swipeDistance >= revealThreshold) {\n        // Medium swipe: snap to partial open state showing delete button\n        setSwipeX(PARTIAL_OPEN_AMOUNT);\n      } else {\n        // Small swipe: snap back closed\n        setSwipeX(0);\n      }\n      setIsSwiping(false);\n    },\n    [isSwiping, swipeX, onDismiss, PARTIAL_OPEN_AMOUNT]\n  );\n\n  const handleTrashClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      const itemWidth = itemRef.current?.offsetWidth || 0;\n      // Animate out then dismiss\n      setSwipeX(-itemWidth);\n      // Delay state change to ensure transition triggers\n      requestAnimationFrame(() => {\n        setIsDismissing(true);\n      });\n      setTimeout(() => {\n        onDismiss(e);\n      }, 300);\n    },\n    [onDismiss]\n  );\n\n  const handleXButtonClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      // Trigger collapse animation\n      requestAnimationFrame(() => {\n        setIsDismissing(true);\n      });\n      setTimeout(() => {\n        onDismiss(e);\n      }, 300);\n    },\n    [onDismiss]\n  );\n\n  const setRefs = useCallback(\n    (el: HTMLDivElement | null) => {\n      itemRef.current = el;\n      registerRef(el);\n    },\n    [registerRef]\n  );\n\n  // Detect if this is a touch device\n  const isTouchDevice =\n    typeof window !== 'undefined' && (window.matchMedia('(pointer: coarse)').matches || 'ontouchstart' in window);\n\n  return (\n    <div\n      className=\"relative overflow-hidden transition-[max-height,opacity,margin] duration-300 ease-out\"\n      style={{\n        maxHeight: isDismissing ? '0px' : '200px',\n        opacity: isDismissing ? 0 : 1,\n        marginTop: isDismissing ? '-1px' : '0px',\n        marginBottom: isDismissing ? '-1px' : '0px'\n      }}\n    >\n      {/* Red delete background - revealed on swipe (touch devices only) */}\n      {isTouchDevice && (\n        <div className=\"absolute inset-0 bg-error flex items-center justify-end px-6\">\n          <button\n            type=\"button\"\n            onClick={handleTrashClick}\n            className=\"p-2 hover:bg-error-foreground/10 rounded transition-colors cursor-pointer\"\n            aria-label=\"Delete notification\"\n          >\n            <Icon name=\"trash\" size=\"md\" color=\"currentColor\" className=\"text-error-foreground\" />\n          </button>\n        </div>\n      )}\n\n      {/* Notification content */}\n      <div\n        ref={setRefs}\n        role=\"button\"\n        tabIndex={0}\n        onClick={onClick}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            onClick();\n          }\n        }}\n        onTouchStart={handleTouchStart}\n        onTouchMove={handleTouchMove}\n        onTouchEnd={handleTouchEnd}\n        style={{\n          transform: `translateX(${swipeX}px)`,\n          transition: isSwiping ? 'none' : 'transform 0.2s ease-out',\n          touchAction: 'pan-y'\n        }}\n        className={`w-full text-left px-4 py-3 hover:bg-muted/50 relative group cursor-pointer ${\n          !notification.isRead ? 'bg-muted/20' : ''\n        } bg-popover`}\n      >\n        <div className=\"flex gap-3\">\n          {/* Icon with unread indicator */}\n          <div className=\"relative shrink-0 pt-0.5\">\n            <Icon name={typeIcon} size=\"md\" color=\"currentColor\" className={typeColor} />\n            {!notification.isRead && (\n              <span className=\"absolute -top-0.5 -right-0.5 w-2 h-2 bg-info rounded-full ring-2 ring-popover\" />\n            )}\n          </div>\n\n          {/* Content */}\n          <div className=\"flex-1 min-w-0 pr-6\">\n            <div className=\"flex items-start justify-between gap-2 mb-1\">\n              <h4 className=\"text-sm font-semibold text-foreground line-clamp-1\">{notification.title}</h4>\n            </div>\n            <p className=\"text-sm text-foreground/80 line-clamp-2 mb-1.5\">{notification.message}</p>\n            <span className=\"text-xs text-muted-foreground\">{formatRelativeTime(notification.timestamp)}</span>\n          </div>\n\n          {/* Dismiss button */}\n          {showDismissButton && (\n            <button\n              type=\"button\"\n              onClick={handleXButtonClick}\n              className=\"absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-muted rounded cursor-pointer\"\n              aria-label=\"Dismiss notification\"\n            >\n              <Icon name=\"x\" size=\"sm\" color=\"currentColor\" className=\"text-muted-foreground\" />\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/navigation/pagination/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './pagination';
+export type { PaginationProps } from './pagination';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation/pagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/navigation/pagination/pagination.d.ts

@@ -0,0 +1,21 @@
+export type PaginationProps = {
+    /** The currently active page number */
+    currentPage: number;
+    /** Total number of pages available */
+    totalPages: number;
+    /** Callback fired when a page is selected */
+    onPageChange: (page: number) => void;
+    /** Number of page buttons to show on each side of current page (defaults to 1) */
+    siblingCount?: number;
+    /** Additional CSS classes for the pagination container */
+    className?: string;
+};
+/**
+ * Pagination - Page controls with active state
+ */
+declare function Pagination({ currentPage, totalPages, onPageChange, siblingCount, className }: Readonly<PaginationProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Pagination {
+    var displayName: string;
+}
+export default Pagination;
+//# sourceMappingURL=pagination.d.ts.map

package/dist/components/navigation/pagination/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/pagination/pagination.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG;IAC5B,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,sCAAsC;IACtC,UAAU,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,iBAAS,UAAU,CAAC,EAClB,WAAW,EACX,UAAU,EACV,YAAY,EACZ,YAAgB,EAChB,SAAc,EACf,EAAE,QAAQ,CAAC,eAAe,CAAC,2CA8E3B;kBApFQ,UAAU;;;AAwFnB,eAAe,UAAU,CAAC"}