@pismo/marola 0.0.1-alpha.16 → 0.0.1-alpha.18

package/dist/components/PageHeader/PageHeader.js

@@ -1,25 +1,25 @@
 import '../../assets/PageHeader.css';
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { c as r } from "../../clsx-DB4S2d7J.js";
+import { c as n } from "../../clsx-DB4S2d7J.js";
 import * as _ from "react";
-const z = (n) => /* @__PURE__ */ _.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", "data-waves-icon": "fa/solid/arrow-left", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
+const w = (c) => /* @__PURE__ */ _.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", "data-waves-icon": "fa/solid/arrow-left", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
   fill: "currentcolor",
   color: "currentcolor",
   width: "1em",
   height: "1em"
-}, ...n }, /* @__PURE__ */ _.createElement("path", { d: "M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z" })), b = "_title_157kz_45", k = "_subtitle_157kz_46", e = {
-  "page-header": "_page-header_157kz_1",
-  "page-header__top-content": "_page-header__top-content_157kz_9",
-  "page-header__main-content": "_page-header__main-content_157kz_12",
-  "page-header__bottom-content": "_page-header__bottom-content_157kz_12",
-  "page-header__main-left-content": "_page-header__main-left-content_157kz_39",
+}, ...c }, /* @__PURE__ */ _.createElement("path", { d: "M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z" })), b = "_title_fxc86_47", N = "_subtitle_fxc86_48", e = {
+  "page-header": "_page-header_fxc86_1",
+  "page-header__top-content": "_page-header__top-content_fxc86_10",
+  "page-header__main-content": "_page-header__main-content_fxc86_13",
+  "page-header__bottom-content": "_page-header__bottom-content_fxc86_13",
+  "page-header__main-left-content": "_page-header__main-left-content_fxc86_41",
   title: b,
-  subtitle: k,
-  "page-header__main-right-content": "_page-header__main-right-content_157kz_63"
-}, C = ({
-  title: n,
+  subtitle: N,
+  "page-header__main-right-content": "_page-header__main-right-content_fxc86_65"
+}, H = ({
+  title: c,
   subtitle: d,
-  backLinkText: c,
+  backLinkText: r,
   onBackLinkClick: s,
   rightChildren: i,
   bottomChildren: o,
@@ -29,23 +29,23 @@ const z = (n) => /* @__PURE__ */ _.createElement("svg", { xmlns: "http://www.w3.
   classNameSubtitle: p,
   "data-testid-wrapper": g,
   "data-testid-backLink": f,
-  "data-testid-title": u,
-  "data-testid-subtitle": v,
-  ...w
-}) => /* @__PURE__ */ a("div", { className: r([e["page-header"], l]), "data-testid": g, ...w, children: [
-  c && /* @__PURE__ */ t("div", { className: e["page-header__top-content"], children: /* @__PURE__ */ a("button", { type: "button", onClick: s, className: h, "data-testid": f, children: [
-    /* @__PURE__ */ t(z, { fontSize: 16 }),
-    c
+  "data-testid-title": x,
+  "data-testid-subtitle": u,
+  ...v
+}) => /* @__PURE__ */ a("div", { className: n([e["page-header"], l]), "data-testid": g, ...v, children: [
+  r && /* @__PURE__ */ t("div", { className: e["page-header__top-content"], children: /* @__PURE__ */ a("button", { type: "button", onClick: s, className: h, "data-testid": f, children: [
+    /* @__PURE__ */ t(w, { fontSize: 16 }),
+    r
   ] }) }),
   /* @__PURE__ */ a("div", { className: e["page-header__main-content"], children: [
     /* @__PURE__ */ a("div", { className: e["page-header__main-left-content"], children: [
-      /* @__PURE__ */ t("h1", { className: r(e.title, m), "data-testid": u, children: n }),
-      /* @__PURE__ */ t("h2", { className: r(e.subtitle, p), "data-testid": v, children: d })
+      /* @__PURE__ */ t("h1", { className: n(e.title, m), "data-testid": x, children: c }),
+      /* @__PURE__ */ t("h2", { className: n(e.subtitle, p), "data-testid": u, children: d })
     ] }),
     i && /* @__PURE__ */ t("div", { className: e["page-header__main-right-content"], children: i })
   ] }),
   o && /* @__PURE__ */ t("div", { className: e["page-header__bottom-content"], children: o })
 ] });
 export {
-  C as PageHeader
+  H as PageHeader
 };

package/dist/components/Pagination/Pagination.d.ts

@@ -1,36 +1,55 @@
 export type PaginationParams = {
+    /** Total number of items to paginate */
     totalItems: number;
+    /** Number of items to show per page */
     perPage: number;
+    /** Current page */
     currentPage: number;
 };
 export type PaginationTranslations = {
+    /** Translation text for `showing` */
     showing: string;
+    /** Translation text for `of` */
     of: string;
+    /** Translation text for `result` */
     results: string;
+    /** Translation text for `previous` */
     previous: string;
+    /** Translation text for `next` */
     next: string;
 };
 type PaginationLanguages = 'pt' | 'en';
 type PaginationCommonProps = {
+    /** CSS classes to be applied on the container element */
     className?: string;
-    'data-testid'?: string;
+    /** CSS classes to be applied on the per page element */
     classNamePerPage?: string;
-    'data-testid__per-page'?: string;
+    /** CSS classes to be applied on the pages navigation element */
     classNamePagesNav?: string;
-    'data-testid__pages-nav'?: string;
+    /** Id to be applied as `data-testid` on the container element */
+    'data-testid'?: string;
+    /** Id to be applied as `data-testid` on per page element */
+    'data-testid-per-page'?: string;
+    /** Id to be applied as `data-testid` on the pages navigation element */
+    'data-testid-pages-nav'?: string;
 };
 export type PaginationProps = {
+    /** Array of options to be rendered as per page options. */
     perPageOptions?: (number | {
         value: number;
         label: string;
     })[] | undefined;
+    /** Callback called when page changes. */
     onPageChange: (page: number) => void;
-    onRowsPerPageChange: (perPage: number | string) => void;
+    /** Callback called when items per page changes. */
+    onRowsPerPageChange: (perPage: number) => void;
+    /** Language to be used for texts. */
     language?: PaginationLanguages;
+    /** Custom translation object to be used for texts. */
     t?: PaginationTranslations;
 } & PaginationParams & PaginationCommonProps;
 export declare const paginationDefaultTranslations: {
     [key in PaginationLanguages]: PaginationTranslations;
 };
-export declare const Pagination: (props: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Pagination: ({ perPageOptions, language, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Pagination/Pagination.js

@@ -1,112 +1,114 @@
 import '../../assets/Pagination.css';
-import { jsxs as x, jsx as i, Fragment as M } from "react/jsx-runtime";
-import { c as C } from "../../clsx-DB4S2d7J.js";
-import { _ as O, a as S } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
-import { u as A } from "../../useControlled-CCMYYdCM.js";
-const E = ["boundaryCount", "componentName", "count", "defaultPage", "disabled", "hideNextButton", "hidePrevButton", "onChange", "page", "showFirstButton", "showLastButton", "siblingCount"];
-function $(e = {}) {
+import { jsxs as m, jsx as o, Fragment as M } from "react/jsx-runtime";
+import { c as p } from "../../clsx-DB4S2d7J.js";
+import { Select as k } from "../Select/Select.js";
+import { _ as A, b as E } from "../../index-CH45lKw7.js";
+import { u as $ } from "../../useControlled-CCMYYdCM.js";
+const R = ["boundaryCount", "componentName", "count", "defaultPage", "disabled", "hideNextButton", "hidePrevButton", "onChange", "page", "showFirstButton", "showLastButton", "siblingCount"];
+function T(g = {}) {
   const {
     boundaryCount: a = 1,
-    componentName: _ = "usePagination",
+    componentName: e = "usePagination",
     count: s = 1,
-    defaultPage: b = 1,
-    disabled: h = !1,
-    hideNextButton: c = !1,
-    hidePrevButton: m = !1,
-    onChange: t,
-    page: o,
-    showFirstButton: p = !1,
-    showLastButton: f = !1,
-    siblingCount: u = 1
-  } = e, d = O(e, E), [r, k] = A({
-    controlled: o,
-    default: b,
-    name: _,
+    defaultPage: v = 1,
+    disabled: _ = !1,
+    hideNextButton: f = !1,
+    hidePrevButton: u = !1,
+    onChange: h,
+    page: n,
+    showFirstButton: r = !1,
+    showLastButton: x = !1,
+    siblingCount: d = 1
+  } = g, b = A(g, R), [i, S] = $({
+    controlled: n,
+    default: v,
+    name: e,
     state: "page"
-  }), N = (n, l) => {
-    o || k(l), t && t(n, l);
-  }, v = (n, l) => {
-    const F = l - n + 1;
+  }), N = (t, c) => {
+    n || S(c), h && h(t, c);
+  }, C = (t, c) => {
+    const F = c - t + 1;
     return Array.from({
       length: F
-    }, (W, I) => n + I);
-  }, j = v(1, Math.min(a, s)), P = v(Math.max(s - a + 1, a + 1), s), w = Math.max(
+    }, (z, I) => t + I);
+  }, L = C(1, Math.min(a, s)), P = C(Math.max(s - a + 1, a + 1), s), y = Math.max(
     Math.min(
       // Natural start
-      r - u,
+      i - d,
       // Lower boundary when page is high
-      s - a - u * 2 - 1
+      s - a - d * 2 - 1
     ),
     // Greater than startPages
     a + 2
   ), B = Math.min(
     Math.max(
       // Natural end
-      r + u,
+      i + d,
       // Upper boundary when page is low
-      a + u * 2 + 2
+      a + d * 2 + 2
     ),
     // Less than endPages
     P.length > 0 ? P[0] - 2 : s - 1
-  ), L = [
-    ...p ? ["first"] : [],
-    ...m ? [] : ["previous"],
-    ...j,
+  ), j = [
+    ...r ? ["first"] : [],
+    ...u ? [] : ["previous"],
+    ...L,
     // Start ellipsis
     // eslint-disable-next-line no-nested-ternary
-    ...w > a + 2 ? ["start-ellipsis"] : a + 1 < s - a ? [a + 1] : [],
+    ...y > a + 2 ? ["start-ellipsis"] : a + 1 < s - a ? [a + 1] : [],
     // Sibling pages
-    ...v(w, B),
+    ...C(y, B),
     // End ellipsis
     // eslint-disable-next-line no-nested-ternary
     ...B < s - a - 1 ? ["end-ellipsis"] : s - a > a ? [s - a] : [],
     ...P,
-    ...c ? [] : ["next"],
-    ...f ? ["last"] : []
-  ], y = (n) => {
-    switch (n) {
+    ...f ? [] : ["next"],
+    ...x ? ["last"] : []
+  ], w = (t) => {
+    switch (t) {
       case "first":
         return 1;
       case "previous":
-        return r - 1;
+        return i - 1;
       case "next":
-        return r + 1;
+        return i + 1;
       case "last":
         return s;
       default:
         return null;
     }
-  }, D = L.map((n) => typeof n == "number" ? {
-    onClick: (l) => {
-      N(l, n);
+  }, D = j.map((t) => typeof t == "number" ? {
+    onClick: (c) => {
+      N(c, t);
     },
     type: "page",
-    page: n,
-    selected: n === r,
-    disabled: h,
-    "aria-current": n === r ? "true" : void 0
+    page: t,
+    selected: t === i,
+    disabled: _,
+    "aria-current": t === i ? "true" : void 0
   } : {
-    onClick: (l) => {
-      N(l, y(n));
+    onClick: (c) => {
+      N(c, w(t));
     },
-    type: n,
-    page: y(n),
+    type: t,
+    page: w(t),
     selected: !1,
-    disabled: h || n.indexOf("ellipsis") === -1 && (n === "next" || n === "last" ? r >= s : r <= 1)
+    disabled: _ || t.indexOf("ellipsis") === -1 && (t === "next" || t === "last" ? i >= s : i <= 1)
   });
-  return S({
+  return E({
     items: D
-  }, d);
+  }, b);
 }
-const R = "_pagination_9gf1w_1", g = {
-  pagination: R,
-  "per-page-container": "_per-page-container_9gf1w_8",
-  "pages-navigator-container": "_pages-navigator-container_9gf1w_20",
-  "pages-navigator-container__label": "_pages-navigator-container__label_9gf1w_31",
-  "page-number__btn": "_page-number__btn_9gf1w_31",
-  "pages-navigator-container__previous-next-btn": "_pages-navigator-container__previous-next-btn_9gf1w_44",
-  "page-number__btn--selected": "_page-number__btn--selected_9gf1w_69"
-}, T = {
+const W = "_pagination_n3y7g_1", l = {
+  pagination: W,
+  "per-page-container": "_per-page-container_n3y7g_8",
+  "per-page-container__select": "_per-page-container__select_n3y7g_17",
+  "pages-navigator-container": "_pages-navigator-container_n3y7g_22",
+  "pages-navigator-container__label": "_pages-navigator-container__label_n3y7g_37",
+  "page-number__btn": "_page-number__btn_n3y7g_37",
+  "pages-navigator-container__previous-next-btn": "_pages-navigator-container__previous-next-btn_n3y7g_50",
+  "page-number__btn--selected": "_page-number__btn--selected_n3y7g_75"
+}, q = {
   pt: {
     showing: "Exibindo",
     of: "de",
@@ -121,90 +123,91 @@ const R = "_pagination_9gf1w_1", g = {
     previous: "Previous",
     next: "Next"
   }
-}, J = (e) => {
-  const a = e.perPageOptions || [5, 10, 25, 50, 100], _ = Math.ceil(e.totalItems / e.perPage), s = e.currentPage <= 1, b = e.currentPage >= _, h = e.t || T[e.language || "en"], c = (t) => h[t], { items: m } = $({
-    count: _,
+}, U = ({ perPageOptions: g = [5, 10, 25, 50, 100], language: a = "en", ...e }) => {
+  const s = Math.ceil(e.totalItems / e.perPage), v = e.currentPage <= 1, _ = e.currentPage >= s, f = e.t || q[a], u = (n) => f[n], { items: h } = T({
+    count: s,
     hideNextButton: !0,
     hidePrevButton: !0,
     page: e.currentPage,
-    onChange: (t, o) => e.onPageChange(o),
     siblingCount: 1,
-    boundaryCount: 2
+    boundaryCount: 2,
+    onChange: (n, r) => e.onPageChange(r)
   });
-  return /* @__PURE__ */ x("div", { className: C(g.pagination, e.className), "data-testid": e["data-testid"], children: [
-    /* @__PURE__ */ i(
+  return /* @__PURE__ */ m("div", { className: p(l.pagination, e.className), "data-testid": e["data-testid"], children: [
+    /* @__PURE__ */ o(
       "div",
       {
-        className: C(g["per-page-container"], e.classNamePerPage),
-        "data-testid": e["data-testid__per-page"],
-        children: a && /* @__PURE__ */ x(M, { children: [
-          c`showing`,
-          /* @__PURE__ */ i(
-            "select",
+        className: p(l["per-page-container"], e.classNamePerPage),
+        "data-testid": e["data-testid-per-page"],
+        children: g && /* @__PURE__ */ m(M, { children: [
+          /* @__PURE__ */ o("span", { children: u`showing` }),
+          /* @__PURE__ */ o(
+            k,
             {
-              value: e.perPage,
-              name: "per-page-select",
-              id: "per-page-select",
-              onChange: (t) => e.onRowsPerPageChange(t.target.value),
-              children: a.map((t) => {
-                const o = typeof t == "number";
-                return /* @__PURE__ */ i(
-                  "option",
+              className: l["per-page-container__select"],
+              value: String(e.perPage),
+              onChange: (n) => e.onRowsPerPageChange(Number(n)),
+              children: g == null ? void 0 : g.map((n) => {
+                const r = typeof n == "number";
+                return /* @__PURE__ */ o(
+                  k.Option,
                   {
-                    value: o ? t : t.value,
-                    children: o ? t : t.label
+                    value: String(r ? n : n.value),
+                    children: r ? n : n.label
                   },
-                  `per-page__${o ? t : t.value}`
+                  `per-page__${r ? n : n.value}`
                 );
               })
             }
           ),
-          c`of`,
-          " ",
-          /* @__PURE__ */ i("strong", { children: e.totalItems }),
-          " ",
-          c`results`
+          /* @__PURE__ */ m("span", { children: [
+            u`of`,
+            " ",
+            /* @__PURE__ */ o("strong", { children: e.totalItems }),
+            " ",
+            u`results`
+          ] })
         ] })
       }
     ),
-    /* @__PURE__ */ x(
+    /* @__PURE__ */ m(
       "div",
       {
-        className: C(g["pages-navigator-container"], e.classNamePagesNav),
-        "data-testid": e["data-testid__per-page"],
+        className: p(l["pages-navigator-container"], e.classNamePagesNav),
+        "data-testid": e["data-testid-pages-nav"],
         children: [
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ o(
             "button",
             {
-              className: g["pages-navigator-container__previous-next-btn"],
-              disabled: s,
+              className: l["pages-navigator-container__previous-next-btn"],
+              disabled: v,
               onClick: () => e.onPageChange(e.currentPage - 1),
               type: "button",
-              children: c`previous`
+              children: u`previous`
             },
             "page__previous"
           ),
-          m.map(({ page: t, type: o, selected: p, ...f }, u) => {
-            let d = /* @__PURE__ */ i(M, {});
-            return o === "start-ellipsis" || o === "end-ellipsis" ? d = /* @__PURE__ */ i("span", { className: g["pages-navigator-container__label"], children: "..." }) : o === "page" ? d = /* @__PURE__ */ i(
+          /* @__PURE__ */ o("ul", { children: h.map(({ page: n, type: r, selected: x, ...d }, b) => {
+            let i = /* @__PURE__ */ o(M, {});
+            return r === "start-ellipsis" || r === "end-ellipsis" ? i = /* @__PURE__ */ o("span", { className: l["pages-navigator-container__label"], children: "..." }) : r === "page" ? i = /* @__PURE__ */ o(
               "button",
               {
-                className: [g["page-number__btn"], p ? g["page-number__btn--selected"] : ""].join(" ").trim(),
-                onClick: () => e.onPageChange(t || 0),
+                className: p(l["page-number__btn"], x && l["page-number__btn--selected"]),
+                onClick: () => e.onPageChange(n || 0),
                 type: "button",
-                children: t
+                children: n
               },
-              `page__${u}`
-            ) : d = /* @__PURE__ */ i("button", { type: "button", ...f, children: o }), /* @__PURE__ */ i("li", { children: d }, u);
-          }),
-          /* @__PURE__ */ i(
+              `page__${b}`
+            ) : i = /* @__PURE__ */ o("button", { type: "button", ...d, children: r }), /* @__PURE__ */ o("li", { children: i }, b);
+          }) }),
+          /* @__PURE__ */ o(
             "button",
             {
-              className: g["pages-navigator-container__previous-next-btn"],
-              disabled: b,
+              className: l["pages-navigator-container__previous-next-btn"],
+              disabled: _,
               onClick: () => e.onPageChange(e.currentPage + 1),
               type: "button",
-              children: c`next`
+              children: u`next`
             },
             "page__next"
           )
@@ -214,6 +217,6 @@ const R = "_pagination_9gf1w_1", g = {
   ] });
 };
 export {
-  J as Pagination,
-  T as paginationDefaultTranslations
+  U as Pagination,
+  q as paginationDefaultTranslations
 };

package/dist/components/Pagination/Pagination.stories.d.ts

@@ -0,0 +1,17 @@
+import { PaginationProps } from '../../main';
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: ({ perPageOptions, language, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const WithCustomPerPageOptions: Story;
+export declare const WithLanguage: Story;
+export declare const WithCustomTexts: Story;