@pismo/marola 1.0.0-beta.25 → 1.0.0-beta.27

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

@@ -1,3 +1,5 @@
+import { UsePaginationProps } from './usePagination';
+
 export type PaginationParams = {
     /** Total number of items to paginate */
     totalItems: number;
@@ -53,9 +55,11 @@ export type PaginationProps = {
     language?: PaginationLanguages;
     /** Custom translation object to be used for texts. */
     t?: Partial<PaginationTranslations>;
+    /** usePagination hook props */
+    usePaginationProps?: UsePaginationProps;
 } & PaginationParams & PaginationCommonProps;
 export declare const paginationDefaultTranslations: {
     [key in PaginationLanguages]: PaginationTranslations;
 };
-export declare const Pagination: ({ perPageOptions, language, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Pagination: ({ perPageOptions, language, usePaginationProps, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Pagination/Pagination.js

@@ -2,8 +2,8 @@ import '../../assets/Pagination.css';
 import { jsxs as s, Fragment as p, jsx as t } from "react/jsx-runtime";
 import { c as _ } from "../../clsx-DB4S2d7J.js";
 import { Select as d } from "../Select/Select.js";
-import I from "./usePagination.js";
-const C = "_pagination_2n0nk_43", a = {
+import C from "./usePagination.js";
+const w = "_pagination_2n0nk_43", a = {
   "u-typography-h1": "_u-typography-h1_2n0nk_1",
   "u-typography-h2": "_u-typography-h2_2n0nk_8",
   "u-typography-h3": "_u-typography-h3_2n0nk_15",
@@ -11,7 +11,7 @@ const C = "_pagination_2n0nk_43", a = {
   "u-typography-h5": "_u-typography-h5_2n0nk_29",
   "u-typography-h6": "_u-typography-h6_2n0nk_36",
   "u-typography-base": "_u-typography-base_2n0nk_43",
-  pagination: C,
+  pagination: w,
   "per-page-container": "_per-page-container_2n0nk_43",
   "u-typography-base--xxl": "_u-typography-base--xxl_2n0nk_49",
   "u-typography-base--xl": "_u-typography-base--xl_2n0nk_53",
@@ -27,7 +27,7 @@ const C = "_pagination_2n0nk_43", a = {
   "page-number__btn": "_page-number__btn_2n0nk_115",
   "pages-navigator-container__previous-next-btn": "_pages-navigator-container__previous-next-btn_2n0nk_134",
   "page-number__btn--selected": "_page-number__btn--selected_2n0nk_159"
-}, w = {
+}, B = {
   pt: {
     showing: "Exibindo",
     of: "de",
@@ -44,15 +44,21 @@ const C = "_pagination_2n0nk_43", a = {
     next: "Next",
     perPage: "Items per page"
   }
-}, j = ({ perPageOptions: o = [5, 10, 25, 50, 100], language: y = "en", ...e }) => {
-  const l = Math.ceil(e.totalItems / e.perPage), b = e.currentPage <= 1, m = e.currentPage >= l, k = { ...w[y], ...e.t || {} }, i = (n) => k[n], { items: v } = I({
+}, $ = ({
+  perPageOptions: o = [5, 10, 25, 50, 100],
+  language: y = "en",
+  usePaginationProps: b = {},
+  ...e
+}) => {
+  const l = Math.ceil(e.totalItems / e.perPage), m = e.currentPage <= 1, k = e.currentPage >= l, v = { ...B[y], ...e.t || {} }, i = (n) => v[n], { items: x } = C({
     count: l,
+    page: e.currentPage,
     hideNextButton: !0,
     hidePrevButton: !0,
-    page: e.currentPage,
     siblingCount: 1,
-    boundaryCount: 2
-  }), c = e.perPage * (e.currentPage - 1) + 1, u = c + e.perPage - 1, x = u > e.totalItems ? u - e.totalItems : 0, P = u - x;
+    boundaryCount: 2,
+    ...b
+  }), c = e.perPage * (e.currentPage - 1) + 1, u = c + e.perPage - 1, P = u > e.totalItems ? u - e.totalItems : 0, N = u - P;
   return /* @__PURE__ */ s("div", { className: _(a.pagination, e.className), "data-testid": e["data-testid"], children: [
     /* @__PURE__ */ s(
       "div",
@@ -86,7 +92,7 @@ const C = "_pagination_2n0nk_43", a = {
             /* @__PURE__ */ s("span", { children: [
               c,
               " - ",
-              P
+              N
             ] }),
             " ",
             /* @__PURE__ */ s("span", { children: [
@@ -110,31 +116,31 @@ const C = "_pagination_2n0nk_43", a = {
             "button",
             {
               className: a["pages-navigator-container__previous-next-btn"],
-              disabled: b,
+              disabled: m,
               onClick: () => e.onPageChange(e.currentPage - 1),
               type: "button",
               children: i`previous`
             },
             "page__previous"
           ),
-          /* @__PURE__ */ t("ul", { children: v.map(({ page: n, type: r, selected: N, ...f }, h) => {
+          /* @__PURE__ */ t("ul", { children: x.map(({ page: n, type: r, selected: f, ...I }, h) => {
             let g = /* @__PURE__ */ t(p, {});
             return r === "start-ellipsis" || r === "end-ellipsis" ? g = /* @__PURE__ */ t("span", { className: a["page-item"], children: "..." }) : r === "page" ? g = /* @__PURE__ */ t(
               "button",
               {
-                className: _(a["page-number__btn"], N && a["page-number__btn--selected"]),
+                className: _(a["page-number__btn"], f && a["page-number__btn--selected"]),
                 onClick: () => e.onPageChange(n || 0),
                 type: "button",
                 children: n
               },
               `page__${h}`
-            ) : g = /* @__PURE__ */ t("button", { type: "button", ...f, children: r }), /* @__PURE__ */ t("li", { children: g }, h);
+            ) : g = /* @__PURE__ */ t("button", { type: "button", ...I, children: r }), /* @__PURE__ */ t("li", { children: g }, h);
           }) }),
           /* @__PURE__ */ t(
             "button",
             {
               className: a["pages-navigator-container__previous-next-btn"],
-              disabled: m,
+              disabled: k,
               onClick: () => e.onPageChange(e.currentPage + 1),
               type: "button",
               children: i`next`
@@ -147,6 +153,6 @@ const C = "_pagination_2n0nk_43", a = {
   ] });
 };
 export {
-  j as Pagination,
-  w as paginationDefaultTranslations
+  $ as Pagination,
+  B as paginationDefaultTranslations
 };

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

@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ perPageOptions, language, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ perPageOptions, language, usePaginationProps, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

package/dist/components/TextDisplay/TextDisplay.d.ts

@@ -2,8 +2,12 @@ import { VariantType } from '../Typography/Typography.tsx';
 import { default as React } from 'react';
 
 type OptionsProps = {
+    /** Text variant */
     variant?: VariantType;
+    /** Text color */
     color?: string;
+    /** Text weight */
+    bold?: boolean;
 };
 export interface TextDisplayProps {
     /** TextDisplay label */
@@ -12,8 +16,8 @@ export interface TextDisplayProps {
     value: React.ReactNode;
     /** Renders skeleton when true */
     isLoading?: boolean;
-    /** Sets the testId prefix for label, value and skeletons */
-    testId?: string;
+    /** Sets the data-testid prefix for label, value and skeletons */
+    'data-testid'?: string;
     /** Sets the label options */
     labelOptions?: OptionsProps;
     /** Sets the value options */
@@ -21,5 +25,5 @@ export interface TextDisplayProps {
     /** Sets the label and value onto the same line */
     inline?: boolean;
 }
-export declare const TextDisplay: ({ label, value, isLoading, testId, labelOptions, valueOptions, inline, }: TextDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextDisplay: ({ label, value, isLoading, "data-testid": dataTestId, labelOptions, valueOptions, inline, }: TextDisplayProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TextDisplay/TextDisplay.js

@@ -1,45 +1,45 @@
 import '../../assets/TextDisplay.css';
-import { jsxs as x, jsx as o } from "react/jsx-runtime";
-import { c as _ } from "../../clsx-DB4S2d7J.js";
-import { Skeleton as d } from "../Skeleton/Skeleton.js";
-import { Typography as m } from "../Typography/Typography.js";
-const f = "_container_ia8vu_1", n = {
-  container: f,
+import { jsxs as f, jsx as d } from "react/jsx-runtime";
+import { c as $ } from "../../clsx-DB4S2d7J.js";
+import { Skeleton as m } from "../Skeleton/Skeleton.js";
+import { Typography as y } from "../Typography/Typography.js";
+const g = "_container_ia8vu_1", e = {
+  container: g,
   "container--inline": "_container--inline_ia8vu_5"
-}, T = ({
-  label: i,
-  value: y,
-  isLoading: e = !1,
-  testId: c = "TextDisplay",
+}, i = ({
+  label: h,
+  value: x,
+  isLoading: o = !1,
+  "data-testid": t = "TextDisplay",
   labelOptions: r,
-  valueOptions: a,
-  inline: t
+  valueOptions: c,
+  inline: a
 }) => {
-  const h = r != null && r.color || t ? "var(--black-100)" : "var(--gray-90)";
-  return /* @__PURE__ */ x(
+  const _ = (r == null ? void 0 : r.color) || (a ? "var(--black-100)" : "var(--gray-90)");
+  return /* @__PURE__ */ f(
     "div",
     {
-      className: _([n.container, { [n["container--inline"]]: t }]),
-      "data-testid": `${c}-container`,
+      className: $([e.container, { [e["container--inline"]]: a }]),
+      "data-testid": `${t}-container`,
       children: [
-        /* @__PURE__ */ o(
-          m,
+        /* @__PURE__ */ d(
+          y,
           {
-            color: h,
+            color: _,
             variant: (r == null ? void 0 : r.variant) || "base",
-            "data-testid": `${c}-label`,
-            bold: t,
-            children: e ? /* @__PURE__ */ o(d, { style: { width: 70, marginBottom: 2 }, "data-testid": `${c}-skeletonLabel` }) : i
+            "data-testid": `${t}-label`,
+            bold: (r == null ? void 0 : r.bold) ?? a,
+            children: o ? /* @__PURE__ */ d(m, { style: { width: 70, marginBottom: 2 }, "data-testid": `${t}-skeletonLabel` }) : h
           }
         ),
-        /* @__PURE__ */ o(
-          m,
+        /* @__PURE__ */ d(
+          y,
           {
-            bold: !t,
-            color: (a == null ? void 0 : a.color) || "var(--gray-90)",
-            variant: a != null && a.variant || t ? "base" : "base-lg",
-            "data-testid": `${c}-value`,
-            children: e ? /* @__PURE__ */ o(d, { style: { width: 100 }, "data-testid": `${c}-skeletonValue` }) : y || "-"
+            bold: (c == null ? void 0 : c.bold) ?? !a,
+            color: (c == null ? void 0 : c.color) || "var(--gray-90)",
+            variant: (c == null ? void 0 : c.variant) || (a ? "base" : "base-lg"),
+            "data-testid": `${t}-value`,
+            children: o ? /* @__PURE__ */ d(m, { style: { width: 100 }, "data-testid": `${t}-skeletonValue` }) : x || "-"
           }
         )
       ]
@@ -47,5 +47,5 @@ const f = "_container_ia8vu_1", n = {
   );
 };
 export {
-  T as TextDisplay
+  i as TextDisplay
 };

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

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ label, value, isLoading, testId, labelOptions, valueOptions, inline, }: import('./TextDisplay').TextDisplayProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ label, value, isLoading, "data-testid": dataTestId, labelOptions, valueOptions, inline, }: import('./TextDisplay').TextDisplayProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
 };
 export default meta;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "1.0.0-beta.25",
+  "version": "1.0.0-beta.27",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",