@pismo/marola 0.0.1-alpha.8 → 1.0.0-beta.0

package/dist/components/Pagination/Pagination.js

@@ -1,112 +1,129 @@
 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 i, Fragment as k } from "react/jsx-runtime";
+import { c as y } from "../../clsx-DB4S2d7J.js";
+import { Select as w } 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(l = {}) {
   const {
-    boundaryCount: a = 1,
-    componentName: _ = "usePagination",
+    boundaryCount: n = 1,
+    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,
+    disabled: c = !1,
+    hideNextButton: x = !1,
+    hidePrevButton: _ = !1,
+    onChange: p,
+    page: t,
+    showFirstButton: r = !1,
     showLastButton: f = !1,
-    siblingCount: u = 1
-  } = e, d = O(e, E), [r, k] = A({
-    controlled: o,
+    siblingCount: h = 1
+  } = l, d = A(l, R), [o, M] = $({
+    controlled: t,
     default: b,
-    name: _,
+    name: e,
     state: "page"
-  }), N = (n, l) => {
-    o || k(l), t && t(n, l);
-  }, v = (n, l) => {
-    const F = l - n + 1;
+  }), C = (a, g) => {
+    t || M(g), p && p(a, g);
+  }, v = (a, g) => {
+    const F = g - a + 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) => a + I);
+  }, S = v(1, Math.min(n, s)), j = v(Math.max(s - n + 1, n + 1), s), P = Math.max(
     Math.min(
       // Natural start
-      r - u,
+      o - h,
       // Lower boundary when page is high
-      s - a - u * 2 - 1
+      s - n - h * 2 - 1
     ),
     // Greater than startPages
-    a + 2
-  ), B = Math.min(
+    n + 2
+  ), N = Math.min(
     Math.max(
       // Natural end
-      r + u,
+      o + h,
       // Upper boundary when page is low
-      a + u * 2 + 2
+      n + h * 2 + 2
     ),
     // Less than endPages
-    P.length > 0 ? P[0] - 2 : s - 1
+    j.length > 0 ? j[0] - 2 : s - 1
   ), L = [
-    ...p ? ["first"] : [],
-    ...m ? [] : ["previous"],
-    ...j,
+    ...r ? ["first"] : [],
+    ..._ ? [] : ["previous"],
+    ...S,
     // Start ellipsis
     // eslint-disable-next-line no-nested-ternary
-    ...w > a + 2 ? ["start-ellipsis"] : a + 1 < s - a ? [a + 1] : [],
+    ...P > n + 2 ? ["start-ellipsis"] : n + 1 < s - n ? [n + 1] : [],
     // Sibling pages
-    ...v(w, B),
+    ...v(P, N),
     // End ellipsis
     // eslint-disable-next-line no-nested-ternary
-    ...B < s - a - 1 ? ["end-ellipsis"] : s - a > a ? [s - a] : [],
-    ...P,
-    ...c ? [] : ["next"],
+    ...N < s - n - 1 ? ["end-ellipsis"] : s - n > n ? [s - n] : [],
+    ...j,
+    ...x ? [] : ["next"],
     ...f ? ["last"] : []
-  ], y = (n) => {
-    switch (n) {
+  ], B = (a) => {
+    switch (a) {
       case "first":
         return 1;
       case "previous":
-        return r - 1;
+        return o - 1;
       case "next":
-        return r + 1;
+        return o + 1;
       case "last":
         return s;
       default:
         return null;
     }
-  }, D = L.map((n) => typeof n == "number" ? {
-    onClick: (l) => {
-      N(l, n);
+  }, D = L.map((a) => typeof a == "number" ? {
+    onClick: (g) => {
+      C(g, a);
     },
     type: "page",
-    page: n,
-    selected: n === r,
-    disabled: h,
-    "aria-current": n === r ? "true" : void 0
+    page: a,
+    selected: a === o,
+    disabled: c,
+    "aria-current": a === o ? "true" : void 0
   } : {
-    onClick: (l) => {
-      N(l, y(n));
+    onClick: (g) => {
+      C(g, B(a));
     },
-    type: n,
-    page: y(n),
+    type: a,
+    page: B(a),
     selected: !1,
-    disabled: h || n.indexOf("ellipsis") === -1 && (n === "next" || n === "last" ? r >= s : r <= 1)
+    disabled: c || a.indexOf("ellipsis") === -1 && (a === "next" || a === "last" ? o >= s : o <= 1)
   });
-  return S({
+  return E({
     items: D
   }, d);
 }
-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_19imj_43", u = {
+  "u-typography-h1": "_u-typography-h1_19imj_1",
+  "u-typography-h2": "_u-typography-h2_19imj_8",
+  "u-typography-h3": "_u-typography-h3_19imj_15",
+  "u-typography-h4": "_u-typography-h4_19imj_22",
+  "u-typography-h5": "_u-typography-h5_19imj_29",
+  "u-typography-h6": "_u-typography-h6_19imj_36",
+  "u-typography-base": "_u-typography-base_19imj_43",
+  pagination: W,
+  "per-page-container": "_per-page-container_19imj_43",
+  "u-typography-base--xxl": "_u-typography-base--xxl_19imj_48",
+  "u-typography-base--xl": "_u-typography-base--xl_19imj_52",
+  "u-typography-base--lg": "_u-typography-base--lg_19imj_56",
+  "u-typography-base--sm": "_u-typography-base--sm_19imj_60",
+  "u-typography-base--bold": "_u-typography-base--bold_19imj_64",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_19imj_67",
+  "u-typography-base--underlined": "_u-typography-base--underlined_19imj_70",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_19imj_73",
+  "per-page-container__select": "_per-page-container__select_19imj_90",
+  "pages-navigator-container": "_pages-navigator-container_19imj_97",
+  "page-item": "_page-item_19imj_114",
+  "page-number__btn": "_page-number__btn_19imj_114",
+  "pages-navigator-container__previous-next-btn": "_pages-navigator-container__previous-next-btn_19imj_133",
+  "page-number__btn--selected": "_page-number__btn--selected_19imj_158"
+}, q = {
   pt: {
     showing: "Exibindo",
     of: "de",
@@ -121,90 +138,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: l = [5, 10, 25, 50, 100], language: n = "en", ...e }) => {
+  const s = Math.ceil(e.totalItems / e.perPage), b = e.currentPage <= 1, c = e.currentPage >= s, x = e.t || q[n], _ = (t) => x[t], { items: p } = T({
+    count: s,
     hideNextButton: !0,
     hidePrevButton: !0,
     page: e.currentPage,
-    onChange: (t, o) => e.onPageChange(o),
     siblingCount: 1,
-    boundaryCount: 2
+    boundaryCount: 2,
+    onChange: (t, r) => e.onPageChange(r)
   });
-  return /* @__PURE__ */ x("div", { className: C(g.pagination, e.className), "data-testid": e["data-testid"], children: [
+  return /* @__PURE__ */ m("div", { className: y(u.pagination, e.className), "data-testid": e["data-testid"], children: [
     /* @__PURE__ */ i(
       "div",
       {
-        className: C(g["per-page-container"], e.classNamePerPage),
-        "data-testid": e["data-testid__per-page"],
-        children: a && /* @__PURE__ */ x(M, { children: [
-          c`showing`,
+        className: y(u["per-page-container"], e.classNamePerPage),
+        "data-testid": e["data-testid-per-page"],
+        children: l && /* @__PURE__ */ m(k, { children: [
+          /* @__PURE__ */ i("span", { children: _`showing` }),
           /* @__PURE__ */ i(
-            "select",
+            w,
             {
-              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";
+              className: u["per-page-container__select"],
+              value: String(e.perPage),
+              onChange: (t) => e.onRowsPerPageChange(Number(t)),
+              children: l == null ? void 0 : l.map((t) => {
+                const r = typeof t == "number";
                 return /* @__PURE__ */ i(
-                  "option",
+                  w.Option,
                   {
-                    value: o ? t : t.value,
-                    children: o ? t : t.label
+                    value: String(r ? t : t.value),
+                    children: r ? t : t.label
                   },
-                  `per-page__${o ? t : t.value}`
+                  `per-page__${r ? t : t.value}`
                 );
               })
             }
           ),
-          c`of`,
-          " ",
-          /* @__PURE__ */ i("strong", { children: e.totalItems }),
-          " ",
-          c`results`
+          /* @__PURE__ */ m("span", { children: [
+            _`of`,
+            " ",
+            /* @__PURE__ */ i("strong", { children: e.totalItems }),
+            " ",
+            _`results`
+          ] })
         ] })
       }
     ),
-    /* @__PURE__ */ x(
+    /* @__PURE__ */ m(
       "div",
       {
-        className: C(g["pages-navigator-container"], e.classNamePagesNav),
-        "data-testid": e["data-testid__per-page"],
+        className: y(u["pages-navigator-container"], e.classNamePagesNav),
+        "data-testid": e["data-testid-pages-nav"],
         children: [
           /* @__PURE__ */ i(
             "button",
             {
-              className: g["pages-navigator-container__previous-next-btn"],
-              disabled: s,
+              className: u["pages-navigator-container__previous-next-btn"],
+              disabled: b,
               onClick: () => e.onPageChange(e.currentPage - 1),
               type: "button",
-              children: c`previous`
+              children: _`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__ */ i("ul", { children: p.map(({ page: t, type: r, selected: f, ...h }, d) => {
+            let o = /* @__PURE__ */ i(k, {});
+            return r === "start-ellipsis" || r === "end-ellipsis" ? o = /* @__PURE__ */ i("span", { className: u["page-item"], children: "..." }) : r === "page" ? o = /* @__PURE__ */ i(
               "button",
               {
-                className: [g["page-number__btn"], p ? g["page-number__btn--selected"] : ""].join(" ").trim(),
+                className: y(u["page-number__btn"], f && u["page-number__btn--selected"]),
                 onClick: () => e.onPageChange(t || 0),
                 type: "button",
                 children: t
               },
-              `page__${u}`
-            ) : d = /* @__PURE__ */ i("button", { type: "button", ...f, children: o }), /* @__PURE__ */ i("li", { children: d }, u);
-          }),
+              `page__${d}`
+            ) : o = /* @__PURE__ */ i("button", { type: "button", ...h, children: r }), /* @__PURE__ */ i("li", { children: o }, d);
+          }) }),
           /* @__PURE__ */ i(
             "button",
             {
-              className: g["pages-navigator-container__previous-next-btn"],
-              disabled: b,
+              className: u["pages-navigator-container__previous-next-btn"],
+              disabled: c,
               onClick: () => e.onPageChange(e.currentPage + 1),
               type: "button",
-              children: c`next`
+              children: _`next`
             },
             "page__next"
           )
@@ -214,6 +232,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;

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+
+export type SelectOptionProps = {
+    disabled?: boolean;
+    value: string;
+    children: ReactNode;
+    icon?: ReactNode;
+    className?: string;
+    'data-testid'?: string;
+};
+export declare const SelectOption: (props: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
+export type SelectProps = {
+    children?: ReactNode;
+    disabled?: boolean;
+    placeholder?: string;
+    prefix?: string;
+    className?: string;
+    value?: string;
+    'data-testid'?: string;
+    onChange?: (value: string | null, event?: React.SyntheticEvent<Element, Event> | null) => void;
+};
+declare const Select: {
+    (props: SelectProps): import("react/jsx-runtime").JSX.Element;
+    Option: (props: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
+};
+export { Select };