@avenue-ticketing/ui 0.4.0 → 0.6.0

package/dist/react/table-pagination.js

@@ -0,0 +1,1153 @@
+import { ChevronLeft, MoreHorizontal, ChevronRight, X, Loader2, ChevronDown, Check } from 'lucide-react';
+import * as React2 from 'react';
+import { useCallback, useState, useRef, useMemo, useLayoutEffect, useEffect } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var sizeClass = {
+  xs: "h-8 min-h-8 gap-2 px-4 text-sm has-[>svg]:px-3 [&_svg:not([class*='size-'])]:size-3",
+  default: "h-10 min-h-10 gap-2 px-5 text-sm has-[>svg]:px-4 [&_svg:not([class*='size-'])]:size-4",
+  lg: "h-11 min-h-11 gap-2 px-6 text-base has-[>svg]:px-5 [&_svg:not([class*='size-'])]:size-5"
+};
+var iconOnlySizeClass = {
+  xs: "size-8 min-h-8 min-w-8 gap-0 p-0 [&_svg:not([class*='size-'])]:size-3",
+  default: "size-10 min-h-10 min-w-10 gap-0 p-0 [&_svg:not([class*='size-'])]:size-4",
+  lg: "size-11 min-h-11 min-w-11 gap-0 p-0 [&_svg:not([class*='size-'])]:size-5"
+};
+var roundedClass = {
+  full: "rounded-full",
+  lg: "rounded-lg",
+  md: "rounded-md"
+};
+var variantClass = {
+  primary: "bg-primary text-background border border-transparent hover:bg-primary/90 active:bg-primary/85",
+  secondary: "bg-background text-primary border border-primary/10 hover:bg-primary/5",
+  destructive: "bg-background text-red-500 border border-red-500/25 hover:bg-red-500/5",
+  success: "bg-background text-green-500 border border-green-500/25 hover:bg-green-500/5"
+};
+var Button = React2.forwardRef(
+  ({
+    className,
+    type = "button",
+    variant = "secondary",
+    rounded: roundedProp,
+    size = "default",
+    iconOnly = false,
+    disabled,
+    ...props
+  }, ref) => {
+    const rounded = roundedProp ?? (iconOnly ? "md" : "full");
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type,
+        disabled,
+        "data-slot": "button",
+        "data-icon-only": iconOnly ? "" : void 0,
+        className: cn(
+          "inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap outline-none scale-100 transition-[color,background-color,box-shadow,transform] duration-150 ease-out active:scale-[0.98] active:duration-100 active:ease-linear [&_svg]:pointer-events-none [&_svg]:shrink-0",
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+          "focus-visible:border-ring font-medium lg:tracking-wide focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+          iconOnly ? iconOnlySizeClass[size] : sizeClass[size],
+          roundedClass[rounded],
+          variantClass[variant],
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var PaginationInner = React2.forwardRef(
+  function Pagination({
+    meta,
+    onPageChange,
+    className,
+    maxVisibleButtons = 3,
+    disabled = false,
+    size = "default",
+    rounded = "full"
+  }, ref) {
+    const handlePageChange = React2.useCallback(
+      (page) => {
+        onPageChange?.(page);
+      },
+      [onPageChange]
+    );
+    const totalPages = React2.useMemo(() => {
+      const totalItems = Math.max(0, Number(meta.totalItems) || 0);
+      const itemsPerPage = Math.max(1, Number(meta.itemsPerPage) || 16);
+      if (meta.totalPages != null && Number.isFinite(meta.totalPages)) {
+        return Math.max(1, Math.floor(Number(meta.totalPages)));
+      }
+      return Math.max(1, Math.ceil(totalItems / itemsPerPage));
+    }, [meta.totalItems, meta.itemsPerPage, meta.totalPages]);
+    const currentPage = React2.useMemo(
+      () => Math.max(1, Number(meta.currentPage) || 1),
+      [meta.currentPage]
+    );
+    const { endPage, adjustedStart } = React2.useMemo(() => {
+      const sp = Math.max(1, currentPage - Math.floor(maxVisibleButtons / 2));
+      const ep = Math.min(totalPages, sp + maxVisibleButtons - 1);
+      const adj = ep - sp + 1 < maxVisibleButtons ? Math.max(1, ep - maxVisibleButtons + 1) : sp;
+      return { endPage: ep, adjustedStart: adj };
+    }, [currentPage, totalPages, maxVisibleButtons]);
+    const middlePageNumbers = React2.useMemo(
+      () => Array.from({ length: endPage - adjustedStart + 1 }, (_, i) => adjustedStart + i),
+      [endPage, adjustedStart]
+    );
+    const navButtonSize = React2.useMemo(
+      () => size === "xs" ? "default" : "lg",
+      [size]
+    );
+    const ellipsisClassName = React2.useMemo(
+      () => cn(
+        "inline-flex shrink-0 items-center justify-center",
+        navButtonSize === "lg" ? "size-11 min-h-11 min-w-11" : "size-10 min-h-10 min-w-10",
+        rounded === "full" ? "rounded-full" : rounded === "lg" ? "rounded-lg" : "rounded-md"
+      ),
+      [navButtonSize, rounded]
+    );
+    const gapIconClassName = React2.useMemo(
+      () => cn(
+        "mx-auto shrink-0 text-primary/45",
+        navButtonSize === "lg" ? "size-[18px]" : "size-4"
+      ),
+      [navButtonSize]
+    );
+    if (totalPages <= 1) return null;
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex w-full justify-center", className), children: /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        role: "navigation",
+        "aria-label": "Pagination",
+        className: "text-primary flex items-center justify-center gap-0.5 text-base font-medium tabular-nums tracking-tight",
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              rounded,
+              iconOnly: true,
+              size: navButtonSize,
+              className: "border-0 tracking-tight focus-visible:border-transparent focus-visible:ring-0",
+              disabled: disabled || currentPage <= 1,
+              onClick: () => handlePageChange(currentPage - 1),
+              "aria-label": "Previous page",
+              children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": true, className: "size-5 shrink-0 mr-0.5" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+            adjustedStart > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              currentPage === 1 ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "primary",
+                  rounded,
+                  iconOnly: true,
+                  size: navButtonSize,
+                  className: "tracking-tight",
+                  "aria-current": "page",
+                  tabIndex: -1,
+                  children: /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: 1 })
+                }
+              ) : /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  rounded,
+                  iconOnly: true,
+                  size: navButtonSize,
+                  className: "border-none tracking-tight",
+                  disabled,
+                  onClick: () => handlePageChange(1),
+                  "aria-label": "Go to page 1",
+                  children: /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: "1" })
+                }
+              ),
+              adjustedStart > 2 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: ellipsisClassName, children: /* @__PURE__ */ jsx(MoreHorizontal, { className: gapIconClassName, "aria-hidden": true }) })
+            ] }),
+            middlePageNumbers.map(
+              (page) => currentPage === page ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "primary",
+                  rounded,
+                  iconOnly: true,
+                  size: navButtonSize,
+                  className: "tracking-tight",
+                  "aria-current": "page",
+                  tabIndex: -1,
+                  children: /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: page })
+                },
+                page
+              ) : /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  rounded,
+                  iconOnly: true,
+                  size: navButtonSize,
+                  className: "border-none tracking-tight",
+                  disabled,
+                  onClick: () => handlePageChange(page),
+                  "aria-label": `Go to page ${page}`,
+                  children: /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: page })
+                },
+                page
+              )
+            ),
+            endPage < totalPages && /* @__PURE__ */ jsxs(Fragment, { children: [
+              endPage < totalPages - 1 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: ellipsisClassName, children: /* @__PURE__ */ jsx(MoreHorizontal, { className: gapIconClassName, "aria-hidden": true }) }),
+              currentPage === totalPages ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "primary",
+                  rounded,
+                  iconOnly: true,
+                  size: navButtonSize,
+                  className: "tracking-tight",
+                  "aria-current": "page",
+                  tabIndex: -1,
+                  children: /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: totalPages })
+                }
+              ) : /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  rounded,
+                  iconOnly: true,
+                  size: navButtonSize,
+                  className: "border-none tracking-tight",
+                  disabled,
+                  onClick: () => handlePageChange(totalPages),
+                  "aria-label": `Go to page ${totalPages}`,
+                  children: /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: totalPages })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              rounded,
+              iconOnly: true,
+              size: navButtonSize,
+              className: "border-0 tracking-tight focus-visible:border-transparent focus-visible:ring-0",
+              disabled: disabled || currentPage >= totalPages,
+              onClick: () => handlePageChange(currentPage + 1),
+              "aria-label": "Next page",
+              children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-5 shrink-0 ml-0.5" })
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+PaginationInner.displayName = "Pagination";
+var Pagination2 = React2.memo(PaginationInner);
+var PANEL_OPEN_EASING = "cubic-bezier(0,0.55,0.45,1)";
+var PANEL_CLOSE_EASING = "cubic-bezier(0.55,0,1,0.45)";
+var MOBILE_SHEET_MAX_PX = 1024;
+var MOBILE_SHEET_MS = 175;
+var MOBILE_SHEET_IN = "cubic-bezier(0.85, 0, 0.15, 1)";
+var MOBILE_SHEET_OUT = "cubic-bezier(0.85, 0, 1, 0.15)";
+var SLIDE_DEFAULT_PX = 120;
+var SHEET_MENU_TEXT = "max-[1024px]:text-base";
+var SHEET_MENU_SHORTCUT = "max-[1024px]:text-sm";
+var CONTENT_ORIGIN = {
+  bottom: "top center",
+  top: "bottom center",
+  left: "right center",
+  right: "left center"
+};
+var CONTENT_HIDDEN = {
+  bottom: "translateY(-4px) scale(0.97)",
+  top: "translateY(4px) scale(0.97)",
+  left: "translateX(4px) scale(0.97)",
+  right: "translateX(-4px) scale(0.97)"
+};
+function computeMenuPosition(trigger, menu, side, align, offset, pad) {
+  const tr = trigger.getBoundingClientRect();
+  const mr = menu.getBoundingClientRect();
+  const vh = window.innerHeight;
+  const vw = window.innerWidth;
+  const sx = window.scrollX;
+  const sy = window.scrollY;
+  let top = 0;
+  let left = 0;
+  let effectiveSide = side;
+  const place = (s) => {
+    switch (s) {
+      case "bottom":
+        top = tr.bottom + sy + offset;
+        if (align === "start") left = tr.left + sx;
+        else if (align === "end") left = tr.right + sx - mr.width;
+        else left = tr.left + sx + tr.width / 2 - mr.width / 2;
+        break;
+      case "top":
+        top = tr.top + sy - mr.height - offset;
+        if (align === "start") left = tr.left + sx;
+        else if (align === "end") left = tr.right + sx - mr.width;
+        else left = tr.left + sx + tr.width / 2 - mr.width / 2;
+        break;
+      case "right":
+        left = tr.right + sx + offset;
+        if (align === "start") top = tr.top + sy;
+        else if (align === "end") top = tr.bottom + sy - mr.height;
+        else top = tr.top + sy + tr.height / 2 - mr.height / 2;
+        break;
+      case "left":
+        left = tr.left + sx - mr.width - offset;
+        if (align === "start") top = tr.top + sy;
+        else if (align === "end") top = tr.bottom + sy - mr.height;
+        else top = tr.top + sy + tr.height / 2 - mr.height / 2;
+        break;
+    }
+  };
+  place(side);
+  if (side === "bottom" && top + mr.height > vh + sy - pad) {
+    const flip = tr.top + sy - mr.height - offset;
+    if (flip >= sy + pad) {
+      effectiveSide = "top";
+      top = flip;
+    }
+  } else if (side === "top" && top < sy + pad) {
+    const flip = tr.bottom + sy + offset;
+    if (flip + mr.height <= vh + sy - pad) {
+      effectiveSide = "bottom";
+      top = flip;
+    }
+  } else if (side === "right" && left + mr.width > vw + sx - pad) {
+    const flip = tr.left + sx - mr.width - offset;
+    if (flip >= sx + pad) {
+      effectiveSide = "left";
+      left = flip;
+    }
+  } else if (side === "left" && left < sx + pad) {
+    const flip = tr.right + sx + offset;
+    if (flip + mr.width <= vw + sx - pad) {
+      effectiveSide = "right";
+      left = flip;
+    }
+  }
+  left = Math.max(sx + pad, Math.min(left, vw + sx - mr.width - pad));
+  top = Math.max(sy + pad, Math.min(top, vh + sy - mr.height - pad));
+  return { top, left, side: effectiveSide };
+}
+function useNarrowSheetViewport(breakpoint = 1025) {
+  const [narrow, setNarrow] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    setNarrow(mq.matches);
+    const h = (e) => setNarrow(e.matches);
+    mq.addEventListener("change", h);
+    return () => mq.removeEventListener("change", h);
+  }, [breakpoint]);
+  return narrow;
+}
+function plainTextFromNode(node) {
+  if (node == null || node === false || node === true) return "";
+  if (typeof node === "string" || typeof node === "number")
+    return String(node);
+  if (Array.isArray(node)) return node.map(plainTextFromNode).join("");
+  if (React2.isValidElement(node)) {
+    return plainTextFromNode(
+      node.props.children
+    );
+  }
+  return "";
+}
+var ValueContext = React2.createContext(null);
+function useSelectValue() {
+  const c = React2.useContext(ValueContext);
+  if (!c) throw new Error("Select subcomponents must be used within <Select>");
+  return c;
+}
+var OpenContext = React2.createContext(null);
+function useSelectOpen() {
+  const c = React2.useContext(OpenContext);
+  if (!c)
+    throw new Error(
+      "Select.Trigger, SelectContent, and SelectItem need <Select> without native"
+    );
+  return c;
+}
+var Select = ({
+  children,
+  className,
+  value: valueProp,
+  defaultValue = "",
+  onValueChange,
+  native: nativeProp = false,
+  disabled = false,
+  name,
+  id: idAttr,
+  placeholder = "Select",
+  open: openProp,
+  onOpenChange
+}) => {
+  const isValueControlled = valueProp !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const value = isValueControlled ? valueProp : internalValue;
+  const [labels, setLabels] = useState({});
+  const [nativeMeta, setNativeMeta] = useState({});
+  const [nativeOrder, setNativeOrder] = useState([]);
+  const setValue = useCallback(
+    (v) => {
+      if (!isValueControlled) setInternalValue(v);
+      onValueChange?.(v);
+    },
+    [isValueControlled, onValueChange]
+  );
+  const setLabel = useCallback((v, n) => {
+    setLabels((p) => p[v] === n ? p : { ...p, [v]: n });
+  }, []);
+  const clearLabel = useCallback((v) => {
+    setLabels((p) => {
+      if (!(v in p)) return p;
+      const n = { ...p };
+      delete n[v];
+      return n;
+    });
+  }, []);
+  const labelsRef = useRef(labels);
+  labelsRef.current = labels;
+  const labelFor = useCallback(
+    (v) => labelsRef.current[v],
+    []
+  );
+  const registerNativeItem = useCallback(
+    (e) => {
+      setLabel(e.value, e.label);
+      setNativeMeta((p) => ({ ...p, [e.value]: { label: e.label, disabled: e.disabled } }));
+      setNativeOrder((o) => o.includes(e.value) ? o : [...o, e.value]);
+    },
+    [setLabel]
+  );
+  const unregisterNativeItem = useCallback(
+    (v) => {
+      setNativeMeta((p) => {
+        if (!(v in p)) return p;
+        const n = { ...p };
+        delete n[v];
+        return n;
+      });
+      setNativeOrder((o) => o.filter((x) => x !== v));
+      clearLabel(v);
+    },
+    [clearLabel]
+  );
+  const valueCtx = useMemo(
+    () => ({
+      native: nativeProp,
+      value,
+      setValue,
+      disabled,
+      setLabel,
+      clearLabel,
+      registerNativeItem,
+      unregisterNativeItem,
+      labelFor,
+      placeholder
+    }),
+    [
+      nativeProp,
+      value,
+      setValue,
+      disabled,
+      labels,
+      setLabel,
+      clearLabel,
+      registerNativeItem,
+      unregisterNativeItem,
+      labelFor,
+      placeholder
+    ]
+  );
+  if (nativeProp) {
+    return /* @__PURE__ */ jsxs(ValueContext.Provider, { value: valueCtx, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "group relative inline-block w-max min-w-0 max-w-full",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                id: idAttr,
+                name,
+                className: cn(
+                  "peer",
+                  "border-primary/10 bg-background text-primary w-full min-w-0 max-w-full cursor-pointer appearance-none border pr-9 pl-3 outline-none",
+                  "h-10 min-h-10 text-sm font-medium",
+                  "rounded-full transition-[color,background-color,box-shadow,transform] duration-150",
+                  "focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+                  "active:scale-[0.99]",
+                  "disabled:cursor-not-allowed disabled:opacity-50"
+                ),
+                value,
+                disabled,
+                onChange: (ev) => setValue(ev.target.value),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+                  nativeOrder.map((key) => {
+                    const m = nativeMeta[key];
+                    if (!m) return null;
+                    return /* @__PURE__ */ jsx("option", { value: key, disabled: m.disabled, children: plainTextFromNode(m.label) }, key);
+                  })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                "aria-hidden": true,
+                className: "text-primary/50 pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 peer-disabled:opacity-50"
+              }
+            )
+          ]
+        }
+      ),
+      children
+    ] });
+  }
+  return /* @__PURE__ */ jsx(ValueContext.Provider, { value: valueCtx, children: /* @__PURE__ */ jsx(SelectOpenBridge, { open: openProp, onOpenChange, children: /* @__PURE__ */ jsx("div", { className: cn("inline-block min-w-0 max-w-full", className), children }) }) });
+};
+function SelectOpenBridge({
+  children,
+  open: controlled,
+  onOpenChange
+}) {
+  const [inner, setInner] = useState(false);
+  const isControlled = controlled !== void 0;
+  const open = isControlled ? controlled : inner;
+  const setOpen = useCallback(
+    (o) => {
+      if (!isControlled) setInner(o);
+      onOpenChange?.(o);
+    },
+    [isControlled, onOpenChange]
+  );
+  const triggerRef = useRef(null);
+  const ctx = useMemo(
+    () => ({ open, setOpen, triggerRef }),
+    [open, setOpen]
+  );
+  return /* @__PURE__ */ jsx(OpenContext.Provider, { value: ctx, children });
+}
+var SheetClose = React2.forwardRef(({ className, type = "button", ...p }, ref) => /* @__PURE__ */ jsxs(
+  "button",
+  {
+    ref,
+    type,
+    className: cn(
+      "z-100 flex size-12 shrink-0 cursor-pointer items-center justify-center rounded-full transition-all hover:bg-secondary-background active:scale-[0.96]",
+      className
+    ),
+    ...p,
+    children: [
+      /* @__PURE__ */ jsx(X, { className: "size-5.5" }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+    ]
+  }
+));
+SheetClose.displayName = "SelectSheetClose";
+function resolveSheetOpts(o) {
+  return {
+    sheet: o?.sheet ?? true,
+    title: o?.title,
+    panelClass: o?.className,
+    bodyClass: o?.contentClassName
+  };
+}
+function MobileSheetPortal({
+  open,
+  isAnimating,
+  slideEntrance,
+  slideOffsetPx,
+  sheetTitle,
+  sheetPanelClassName,
+  contentClassName,
+  onRequestClose,
+  menuRef,
+  children,
+  className,
+  style,
+  ...rest
+}) {
+  const ease = open ? MOBILE_SHEET_IN : MOBILE_SHEET_OUT;
+  const hiddenY = slideEntrance ? `translateY(${slideOffsetPx}px)` : "translateY(100%)";
+  return createPortal(
+    /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-end justify-center p-0", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "fixed inset-0 bg-black/40 dark:bg-black/60",
+            isAnimating ? "opacity-100" : "opacity-0"
+          ),
+          style: {
+            transition: `opacity ${MOBILE_SHEET_MS}ms ${ease}`
+          },
+          onClick: onRequestClose
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...rest,
+          ref: menuRef,
+          className: cn(
+            "bg-background border-primary/10 relative z-10 flex w-full max-h-[min(90dvh,calc(100dvh-env(safe-area-inset-bottom,0px)))] flex-col overflow-hidden shadow-2xl outline-none",
+            "rounded-t-2xl rounded-b-none border-x-0 border-b-0 border-t",
+            sheetPanelClassName,
+            className
+          ),
+          style: {
+            transform: isAnimating ? "translateY(0)" : hiddenY,
+            opacity: isAnimating ? 1 : 0,
+            transition: `transform ${MOBILE_SHEET_MS}ms ${ease}, opacity ${MOBILE_SHEET_MS}ms ${ease}`,
+            ...style
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex w-full shrink-0 items-center py-2 pl-4 pr-2",
+                  sheetTitle ? "justify-between gap-3" : "justify-end"
+                ),
+                children: [
+                  sheetTitle ? /* @__PURE__ */ jsx("p", { className: "text-foreground min-w-0 flex-1 truncate text-base font-semibold", children: sheetTitle }) : null,
+                  /* @__PURE__ */ jsx(
+                    SheetClose,
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onRequestClose();
+                      }
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "min-h-0 flex-1 overflow-y-auto pb-[calc(5rem+env(safe-area-inset-bottom,0px))]",
+                  contentClassName
+                ),
+                children
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+function listFocusableItems(host) {
+  return Array.from(
+    host.querySelectorAll(
+      '[data-select-item="true"]:not([aria-disabled="true"])'
+    )
+  );
+}
+var SelectContent = ({
+  children,
+  side = "bottom",
+  align = "start",
+  offset = 10,
+  duration = 80,
+  viewportPadding = 8,
+  closeOnEscape = true,
+  minWidth = "trigger",
+  loop = true,
+  mobileOptions,
+  slideEntrance = true,
+  slideEntranceOffsetPx: slidePxProp,
+  className,
+  style,
+  ...rest
+}) => {
+  const narrow = useNarrowSheetViewport(MOBILE_SHEET_MAX_PX + 1);
+  const { open, setOpen, triggerRef } = useSelectOpen();
+  const [show, setShow] = useState(false);
+  const [anim, setAnim] = useState(false);
+  const [pos, setPos] = useState({ top: -9999, left: -9999, side });
+  const [triggerW, setTriggerW] = useState(0);
+  const menuRef = useRef(null);
+  const sheet = useMemo(() => resolveSheetOpts(mobileOptions), [mobileOptions]);
+  const slidePx = slidePxProp ?? SLIDE_DEFAULT_PX;
+  const closeMs = narrow && sheet.sheet ? MOBILE_SHEET_MS : duration;
+  const close = useCallback(() => setOpen(false), [setOpen]);
+  const [portalReady, setPortalReady] = useState(false);
+  useLayoutEffect(() => {
+    setPortalReady(true);
+  }, []);
+  useEffect(() => {
+    if (open) {
+      setShow(true);
+    } else {
+      setAnim(false);
+      const t = setTimeout(() => setShow(false), closeMs);
+      return () => clearTimeout(t);
+    }
+  }, [open, closeMs]);
+  useEffect(() => {
+    if (!show || !open) return;
+    let r2 = 0;
+    const r1 = requestAnimationFrame(() => {
+      r2 = requestAnimationFrame(() => setAnim(true));
+    });
+    return () => {
+      cancelAnimationFrame(r1);
+      if (r2) cancelAnimationFrame(r2);
+    };
+  }, [show, open]);
+  useLayoutEffect(() => {
+    if (!triggerRef.current || !menuRef.current) return;
+    if (!open && !show) return;
+    const run = () => {
+      if (!triggerRef.current || !menuRef.current) return;
+      setTriggerW(triggerRef.current.getBoundingClientRect().width);
+      setPos(
+        computeMenuPosition(
+          triggerRef.current,
+          menuRef.current,
+          side,
+          align,
+          offset,
+          viewportPadding
+        )
+      );
+    };
+    run();
+    window.addEventListener("resize", run);
+    window.addEventListener("scroll", run, true);
+    return () => {
+      window.removeEventListener("resize", run);
+      window.removeEventListener("scroll", run, true);
+    };
+  }, [open, show, side, align, offset, viewportPadding, triggerRef]);
+  useEffect(() => {
+    if (anim && menuRef.current) menuRef.current.focus();
+  }, [anim]);
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => {
+      const t = e.target;
+      if (menuRef.current?.contains(t) || triggerRef.current?.contains(t)) return;
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [open, setOpen, triggerRef]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      const m = menuRef.current;
+      if (!m) return;
+      const active = document.activeElement;
+      if (active && !m.contains(active) && !triggerRef.current?.contains(active))
+        return;
+      const items = listFocusableItems(m);
+      const i = items.indexOf(active);
+      switch (e.key) {
+        case "Escape":
+          if (closeOnEscape) {
+            e.preventDefault();
+            setOpen(false);
+            triggerRef.current?.focus();
+          }
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (!items.length) break;
+          if (i === -1 || i === items.length - 1 && loop) items[0]?.focus();
+          else if (i < items.length - 1) items[i + 1]?.focus();
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (!items.length) break;
+          if (i <= 0 && loop) items[items.length - 1]?.focus();
+          else if (i > 0) items[i - 1]?.focus();
+          break;
+        case "Home":
+          e.preventDefault();
+          items[0]?.focus();
+          break;
+        case "End":
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+          break;
+        case "Tab":
+          setOpen(false);
+          break;
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, closeOnEscape, loop, setOpen, triggerRef]);
+  const lockBodyScroll = (open || show) && narrow && sheet.sheet;
+  useEffect(() => {
+    if (!lockBodyScroll) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [lockBodyScroll]);
+  if (narrow && sheet.sheet) {
+    if (!open && !show) {
+      const registrationSlot = /* @__PURE__ */ jsx("div", { className: "sr-only pointer-events-none", "aria-hidden": true, children });
+      if (!portalReady) return registrationSlot;
+      return createPortal(registrationSlot, document.body);
+    }
+    return /* @__PURE__ */ jsx(
+      MobileSheetPortal,
+      {
+        ...rest,
+        open,
+        isAnimating: anim,
+        slideEntrance,
+        slideOffsetPx: slidePx,
+        sheetTitle: sheet.title,
+        sheetPanelClassName: sheet.panelClass,
+        contentClassName: sheet.bodyClass,
+        onRequestClose: close,
+        menuRef,
+        className,
+        style,
+        role: "listbox",
+        tabIndex: -1,
+        "aria-label": sheet.title,
+        children
+      }
+    );
+  }
+  const resolvedMin = minWidth === "trigger" ? triggerW > 0 ? triggerW : void 0 : minWidth;
+  const listbox = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref: menuRef,
+      role: "listbox",
+      tabIndex: -1,
+      "aria-hidden": !open,
+      className: cn(
+        "bg-background border-primary/10 absolute z-50 overflow-hidden rounded-xl border py-1.5 shadow-xl outline-none",
+        className
+      ),
+      style: {
+        position: "absolute",
+        top: pos.top,
+        left: pos.left,
+        ...typeof resolvedMin === "number" ? { minWidth: resolvedMin } : {},
+        transformOrigin: CONTENT_ORIGIN[pos.side],
+        transform: anim ? "none" : CONTENT_HIDDEN[pos.side],
+        opacity: anim ? 1 : 0,
+        pointerEvents: !open ? "none" : "auto",
+        transitionProperty: "opacity, transform",
+        transitionDuration: `${duration}ms`,
+        transitionTimingFunction: anim ? PANEL_OPEN_EASING : PANEL_CLOSE_EASING,
+        ...style
+      },
+      children
+    }
+  );
+  if (!portalReady) {
+    return listbox;
+  }
+  return createPortal(listbox, document.body);
+};
+function mergeRef(store, node, fromChild) {
+  store.current = node;
+  if (typeof fromChild === "function") fromChild(node);
+  else if (fromChild && typeof fromChild === "object")
+    fromChild.current = node;
+}
+var SelectTrigger = React2.forwardRef(
+  function SelectTrigger2({ children, asChild, className, onClick, disabled, ...buttonProps }, ref) {
+    const { open, setOpen, triggerRef } = useSelectOpen();
+    const triggerVariant = buttonProps.variant ?? "secondary";
+    const onPress = useCallback(
+      (e) => {
+        onClick?.(
+          e
+        );
+        e.stopPropagation();
+        if (disabled) return;
+        setOpen(!open);
+      },
+      [onClick, disabled, open, setOpen]
+    );
+    const setBtnRef = useCallback(
+      (el) => {
+        mergeRef(triggerRef, el, null);
+        if (typeof ref === "function") ref(el);
+        else if (ref) ref.current = el;
+      },
+      [ref, triggerRef]
+    );
+    if (asChild && React2.isValidElement(children)) {
+      const ch = children;
+      const childRef = ch.ref;
+      return React2.cloneElement(ch, {
+        ref: (n) => mergeRef(triggerRef, n, childRef),
+        className: cn("group w-fit max-w-full min-w-0 justify-start gap-2", ch.props.className),
+        onClick: (e) => {
+          ch.props.onClick?.(e);
+          onPress(e);
+        },
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "data-state": open ? "open" : "closed",
+        "data-variant": triggerVariant,
+        ...disabled !== void 0 ? { "aria-disabled": disabled } : {}
+      });
+    }
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref: setBtnRef,
+        type: "button",
+        ...buttonProps,
+        disabled,
+        className: cn("group w-fit max-w-full min-w-0 justify-start gap-2", className),
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "data-state": open ? "open" : "closed",
+        "data-variant": triggerVariant,
+        onClick: onPress,
+        children
+      }
+    );
+  }
+);
+SelectTrigger.displayName = "SelectTrigger";
+var SelectChevron = ({
+  className,
+  ...props
+}) => {
+  const { open } = useSelectOpen();
+  return /* @__PURE__ */ jsx(
+    ChevronDown,
+    {
+      "aria-hidden": true,
+      className: cn("size-4 shrink-0", open && "rotate-180", className),
+      ...props
+    }
+  );
+};
+var SelectValue = ({ placeholder, className }) => {
+  const c = useSelectValue();
+  if (c.native) return null;
+  const ph = placeholder ?? c.placeholder;
+  const text = c.value ? c.labelFor(c.value) : void 0;
+  const isEmpty = !c.value;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "select-value",
+      className: cn(
+        "min-w-0 flex-1 truncate text-left",
+        isEmpty && cn(
+          "group-data-[variant=primary]:!text-background/50",
+          "group-data-[variant=secondary]:!text-primary/50",
+          "group-data-[variant=destructive]:!text-red-500/50",
+          "group-data-[variant=success]:!text-green-500/50"
+        ),
+        className
+      ),
+      children: text != null ? text : ph
+    }
+  );
+};
+var SelectItemRow = ({
+  value: v,
+  children,
+  disabled,
+  shortcut,
+  className,
+  onClick: userClick,
+  ...divProps
+}) => {
+  const c = useSelectValue();
+  const { setOpen } = useSelectOpen();
+  const selected = c.value === v;
+  const click = (e) => {
+    if (disabled) return;
+    c.setValue(v);
+    userClick?.(e);
+    setOpen(false);
+  };
+  const keyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      click(e);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...divProps,
+      "data-select-item": "true",
+      role: "option",
+      "aria-selected": selected,
+      tabIndex: disabled ? void 0 : -1,
+      "aria-disabled": disabled,
+      onClick: click,
+      onKeyDown: keyDown,
+      className: cn(
+        "relative mx-1.5 flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors duration-0 outline-none select-none",
+        SHEET_MENU_TEXT,
+        !disabled && "text-foreground hover:bg-primary/8 focus-visible:bg-primary/8 dark:hover:bg-primary/4 dark:focus-visible:bg-primary/4",
+        disabled && "lg:cursor-not-allowed text-foreground/45 dark:text-foreground/50",
+        !disabled && "cursor-pointer",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children }),
+        shortcut ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "shrink-0 text-xs tracking-widest opacity-40",
+              SHEET_MENU_SHORTCUT
+            ),
+            children: shortcut
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", "aria-hidden": true, children: selected ? /* @__PURE__ */ jsx(Check, { className: "size-3.5", strokeWidth: 2.5 }) : null })
+      ]
+    }
+  );
+};
+var SelectItem = ({
+  value: v,
+  children,
+  disabled,
+  ...rest
+}) => {
+  const {
+    native,
+    setLabel,
+    clearLabel,
+    registerNativeItem,
+    unregisterNativeItem
+  } = useSelectValue();
+  useLayoutEffect(() => {
+    setLabel(v, children);
+    if (native) registerNativeItem({ value: v, label: children, disabled });
+    return () => {
+      clearLabel(v);
+      if (native) unregisterNativeItem(v);
+    };
+  }, [
+    v,
+    children,
+    disabled,
+    native,
+    setLabel,
+    clearLabel,
+    registerNativeItem,
+    unregisterNativeItem
+  ]);
+  if (native) return null;
+  return /* @__PURE__ */ jsx(SelectItemRow, { value: v, disabled, ...rest, children });
+};
+SelectItem.displayName = "SelectItem";
+function TablePagination({
+  currentPage = 1,
+  totalPages = 1,
+  paginationItemsToDisplay = 10,
+  currentItems,
+  totalItems,
+  onPageChange,
+  onLimitChange,
+  className
+}) {
+  const itemsPerPage = Math.max(1, paginationItemsToDisplay);
+  const paginationMeta = React2.useMemo(
+    () => ({
+      currentPage,
+      totalItems: totalItems ?? Math.max(0, totalPages * itemsPerPage),
+      itemsPerPage,
+      totalPages
+    }),
+    [currentPage, totalItems, totalPages, itemsPerPage]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex max-sm:flex-col items-center justify-between gap-3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "text-primary/60 flex-1 text-sm whitespace-nowrap",
+            "aria-live": "polite",
+            children: /* @__PURE__ */ jsxs("span", { className: "ml-2", children: [
+              "Showing",
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "text-primary", children: currentItems ?? paginationItemsToDisplay }),
+              " ",
+              "out of",
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "text-primary", children: totalItems ?? /* @__PURE__ */ jsx(Loader2, { className: "mb-[3px] inline h-4 w-4 animate-spin" }) }),
+              " ",
+              "results"
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "grow", children: /* @__PURE__ */ jsx(Pagination2, { meta: paginationMeta, onPageChange }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-1 justify-end", children: /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: paginationItemsToDisplay.toString(),
+            onValueChange: (value) => {
+              onLimitChange(parseInt(value, 10));
+            },
+            children: [
+              /* @__PURE__ */ jsxs(SelectTrigger, { className: "w-fit rounded-full whitespace-nowrap", children: [
+                /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select number of results" }),
+                /* @__PURE__ */ jsx(SelectChevron, { className: "opacity-60" })
+              ] }),
+              /* @__PURE__ */ jsx(SelectContent, { children: [10, 25, 50, 100].map((pageSize) => /* @__PURE__ */ jsxs(SelectItem, { value: pageSize.toString(), children: [
+                pageSize,
+                " / page"
+              ] }, pageSize)) })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+var table_pagination_default = TablePagination;
+
+export { TablePagination, table_pagination_default as default };
+//# sourceMappingURL=table-pagination.js.map
+//# sourceMappingURL=table-pagination.js.map