dgz-ui-shared/dist/MyLimitSelect-D5ZWDY-s.js

Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript, dgz-ui library

import { j as e } from "./jsx-runtime-DS1N_tNq.js";
import { a as m } from "./index-BL59b1Bz-C9bJE_xn.js";
import * as f from "react";
import { useCallback as R, useMemo as $ } from "react";
import { g as k } from "./button-CdZDBhmr-BT_j3ig5.js";
import { e as z } from "./chevron-right-HWBijj-I-DsFUufdU.js";
import { k as M } from "./createLucideIcon-B950nf2d-9wLYOF5y.js";
import { m as n } from "./utils-B6fNqzRf-B1_jG1K7.js";
import { Z as p, j as h, Q as j, U as A, J as I, e as L } from "./input-mask-DBLFIvhN-BBxoZxnd.js";
import { u as N } from "./useTranslation-dH-uwymc.js";
/**
 * @license lucide-react v0.511.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
const T = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]], C = M("chevron-left", T), v = ({ className: s, ...a }) => /* @__PURE__ */ m.jsx(
  "nav",
  {
    role: "navigation",
    "aria-label": "pagination",
    className: n("flex w-full justify-center", s),
    ...a
  }
);
v.displayName = "Pagination";
const u = f.forwardRef(({ className: s, ...a }, l) => /* @__PURE__ */ m.jsx(
  "ul",
  {
    ref: l,
    className: n("flex flex-row items-center gap-1", s),
    ...a
  }
));
u.displayName = "PaginationContent";
const r = f.forwardRef(({ className: s, ...a }, l) => /* @__PURE__ */ m.jsx("li", { ref: l, className: n("", s), ...a }));
r.displayName = "PaginationItem";
const x = ({
  className: s,
  isActive: a,
  size: l = "icon",
  ...c
}) => /* @__PURE__ */ m.jsx(
  "a",
  {
    "aria-current": a ? "page" : void 0,
    className: n(
      k({
        variant: a ? "tertiary" : "ghost",
        size: l
      }),
      "cursor-pointer",
      s
    ),
    ...c
  }
);
x.displayName = "PaginationLink";
const b = ({
  className: s,
  ...a
}) => /* @__PURE__ */ m.jsx(
  x,
  {
    "aria-label": "Go to previous page",
    size: "default",
    className: n("gap-1 px-2.5", s),
    ...a,
    children: /* @__PURE__ */ m.jsx(C, { className: "h-4 w-4" })
  }
);
b.displayName = "PaginationPrevious";
const w = ({
  className: s,
  ...a
}) => /* @__PURE__ */ m.jsx(
  x,
  {
    "aria-label": "Go to next page",
    size: "default",
    className: n("gap-1 px-2.5", s),
    ...a,
    children: /* @__PURE__ */ m.jsx(z, { className: "h-4 w-4" })
  }
);
w.displayName = "PaginationNext";
const Z = ({
  currentPage: s = 1,
  totalPages: a = 0,
  onPageChange: l
}) => {
  const { t: c } = N(), t = R(() => {
    const i = [];
    i.push(1), s - 1 > 2 && i.push("...");
    for (let d = Math.max(2, s - 1); d <= Math.min(a - 1, s + 1); d++)
      i.push(d);
    return s + 1 < a - 1 && i.push("..."), a > 1 && i.push(a), i;
  }, [s, a]), y = $(() => {
    const i = [];
    for (let o = 0; o < a; o++)
      i.push({
        value: `${o + 1}`,
        label: `${o + 1}`
      });
    return i;
  }, [a]);
  return /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-center justify-end gap-3 lg:flex-row", children: [
    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-3 text-sm", children: [
      /* @__PURE__ */ e.jsxs("div", { className: "min-w-20 font-semibold", children: [
        c("Go to page"),
        ":"
      ] }),
      /* @__PURE__ */ e.jsxs(
        p,
        {
          onValueChange: (i) => l(parseInt(i)),
          value: `${s}`,
          children: [
            /* @__PURE__ */ e.jsx(h, { className: "h-8.5 w-16", children: /* @__PURE__ */ e.jsx(j, {}) }),
            /* @__PURE__ */ e.jsx(A, { options: y })
          ]
        }
      )
    ] }),
    /* @__PURE__ */ e.jsx(v, { className: "justify-end", children: /* @__PURE__ */ e.jsxs(u, { children: [
      /* @__PURE__ */ e.jsx(r, { children: /* @__PURE__ */ e.jsx(
        b,
        {
          isActive: s > 1,
          size: "sm",
          className: n(s > 1 ? "disabled" : "shadow"),
          onClick: () => {
            s > 1 && l(s - 1);
          }
        }
      ) }),
      t().map((i, o) => /* @__PURE__ */ e.jsx(
        r,
        {
          onClick: () => {
            typeof i == "number" && l(i);
          },
          children: /* @__PURE__ */ e.jsx(
            x,
            {
              size: "sm",
              className: n(
                "w-9 px-0 text-center",
                i === s && "shadow"
              ),
              isActive: i === s,
              children: i
            }
          )
        },
        o
      )),
      /* @__PURE__ */ e.jsx(r, { children: /* @__PURE__ */ e.jsx(
        w,
        {
          size: "sm",
          onClick: () => {
            s < a && l(s + 1);
          },
          className: n(s < a ? "disabled" : "shadow"),
          isActive: s < a
        }
      ) })
    ] }) })
  ] });
}, U = 50, g = [
  {
    value: 10,
    label: "10"
  },
  {
    value: 20,
    label: "20"
  },
  {
    value: 50,
    label: "50"
  },
  {
    value: 100,
    label: "100"
  }
], _ = ({
  defaultValue: s = U,
  options: a = g,
  onLimitChange: l
}) => {
  const { t: c } = N();
  return /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-3", children: [
    /* @__PURE__ */ e.jsxs("span", { className: "font-semibold", children: [
      c("Rows per page"),
      ":"
    ] }),
    /* @__PURE__ */ e.jsxs(p, { onValueChange: l, value: `${s}`, children: [
      /* @__PURE__ */ e.jsx(h, { className: "h-8.5 w-17", children: /* @__PURE__ */ e.jsx(j, {}) }),
      /* @__PURE__ */ e.jsx(I, { children: a == null ? void 0 : a.map((t) => /* @__PURE__ */ e.jsx(L, { value: `${t.value}`, children: t.label }, t.value)) })
    ] })
  ] });
};
export {
  U as D,
  Z as M,
  _ as a
};