@caspeco/casper-ui-library 8.2.2 → 8.3.0

package/dist/components/paginator/paginator.composition.d.ts

@@ -1,2 +1,3 @@
 export declare const BasicPaginator: () => import("react/jsx-runtime").JSX.Element;
+export declare const OutlinePaginator: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=paginator.composition.d.ts.map

package/dist/components/paginator/paginator.composition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paginator.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/paginator/paginator.composition.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,cAAc,+CAgB1B,CAAC"}
+{"version":3,"file":"paginator.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/paginator/paginator.composition.tsx"],"names":[],"mappings":"AA4BA,eAAO,MAAM,cAAc,+CAAqD,CAAC;AAEjF,eAAO,MAAM,gBAAgB,+CAAuD,CAAC"}

package/dist/components/paginator/paginator.d.ts

@@ -1,6 +1,8 @@
 import { ThemeStyleProps } from '../../theme/index.js';
+import { PaginatorVariant } from '../../theme/theme-config/components/paginator-theme.js';
 import { Locale } from './translations.js';
 export type PaginatorProps = ThemeStyleProps & {
+    variant?: PaginatorVariant;
     /** Which locale to use for translations */
     locale: Locale;
     /** The size of each page */
@@ -12,5 +14,5 @@ export type PaginatorProps = ThemeStyleProps & {
     /** Invoked when the page index changes */
     onPageChange?: (newPageIndex: number) => void;
 };
-export declare function Paginator({ locale, pageSize, itemCount, pageIndex: _pageIndex, onPageChange, ...rest }: PaginatorProps): import("react/jsx-runtime").JSX.Element;
+export declare function Paginator({ locale, pageSize, itemCount, pageIndex: _pageIndex, onPageChange, variant, ...rest }: PaginatorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=paginator.d.ts.map

package/dist/components/paginator/paginator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paginator.d.ts","sourceRoot":"","sources":["../../../lib/components/paginator/paginator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,OAAO,EAAE,KAAK,MAAM,EAAgB,MAAM,gBAAgB,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG;IAC9C,2CAA2C;IAC3C,MAAM,EAAE,MAAM,CAAC;IAEf,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,gCAAgC;IAChC,SAAS,EAAE,MAAM,CAAC;IAElB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACzB,MAAM,EACN,QAAa,EACb,SAAS,EACT,SAAS,EAAE,UAAU,EACrB,YAAY,EACZ,GAAG,IAAI,EACP,EAAE,cAAc,2CA6ChB"}
+{"version":3,"file":"paginator.d.ts","sourceRoot":"","sources":["../../../lib/components/paginator/paginator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iDAAiD,CAAC;AAExF,OAAO,EAAE,KAAK,MAAM,EAAgB,MAAM,gBAAgB,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG;IAC9C,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAE3B,2CAA2C;IAC3C,MAAM,EAAE,MAAM,CAAC;IAEf,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,gCAAgC;IAChC,SAAS,EAAE,MAAM,CAAC;IAElB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACzB,MAAM,EACN,QAAa,EACb,SAAS,EACT,SAAS,EAAE,UAAU,EACrB,YAAY,EACZ,OAAiB,EACjB,GAAG,IAAI,EACP,EAAE,cAAc,2CA6ChB"}

package/dist/components/paginator/paginator.js

@@ -1,28 +1,29 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { useControllableState as C, useStyleConfig as b, Box as s } from "@chakra-ui/react";
-import { translations as k } from "./translations.js";
+import { useControllableState as C, useStyleConfig as k, Box as s } from "@chakra-ui/react";
+import { translations as B } from "./translations.js";
 import { IconButton as c } from "../icon-button/icon-button.js";
 import { Icons as l } from "../icon/types.js";
-function N({
+function _({
   locale: g,
   pageSize: n = 10,
   itemCount: o,
   pageIndex: m,
   onPageChange: d,
-  ...P
+  variant: P = "ghost",
+  ...u
 }) {
   const [a, r] = C({
     value: m,
     defaultValue: 0,
     onChange: d
-  }), x = b("Paginator"), t = k[g], u = a > 0, f = n > 0 && a < Math.ceil(o / n) - 1, h = a * n + 1, p = Math.max(Math.min(n * (a + 1), o), 1), I = () => {
+  }), x = k("Paginator", { variant: P }), t = B[g], h = a > 0, f = n > 0 && a < Math.ceil(o / n) - 1, p = a * n + 1, I = Math.max(Math.min(n * (a + 1), o), 1), b = () => {
     r(a - 1);
   }, v = () => {
     r(a + 1);
   };
-  return /* @__PURE__ */ i(s, { __css: x, ...P, children: [
-    /* @__PURE__ */ e(s, { children: t.currentPage(h, p, o) }),
-    /* @__PURE__ */ i(s, { children: [
+  return /* @__PURE__ */ i(s, { __css: x, ...u, children: [
+    /* @__PURE__ */ e(s, { children: t.currentPage(p, I, o) }),
+    /* @__PURE__ */ i(s, { className: "paginator-buttons-container", children: [
       /* @__PURE__ */ e(
         c,
         {
@@ -30,8 +31,8 @@ function N({
           size: "md",
           variant: "ghost",
           "aria-label": t.previousPage,
-          onClick: I,
-          isDisabled: !u
+          onClick: b,
+          isDisabled: !h
         }
       ),
       /* @__PURE__ */ e(
@@ -49,5 +50,5 @@ function N({
   ] });
 }
 export {
-  N as Paginator
+  _ as Paginator
 };

package/dist/theme/theme-config/components/paginator-theme.d.ts

@@ -1,31 +1,17 @@
-import { ThemeColorVariable, ThemeFontSizeVariable, ThemeFontVariable, ThemeSpaceVariable } from '../../theme-types.js';
 export declare const paginatorConfig: {
-    baseStyle?: {
-        width: string;
-        fontFamily: ThemeFontVariable;
-        color: ThemeColorVariable;
-        display: string;
-        justifyContent: string;
-        alignItems: string;
-        fontVariant: string;
-        padding: ThemeSpaceVariable;
-        gap: ThemeSpaceVariable;
-        div: {
-            button: {
-                fontSize: ThemeFontSizeVariable;
-            };
-        };
-    } | undefined;
+    baseStyle?: (import('@chakra-ui/styled-system').CSSWithMultiValues & import('@chakra-ui/styled-system').RecursiveCSSSelector<import('@chakra-ui/styled-system').CSSWithMultiValues>) | undefined;
     sizes?: {
         [key: string]: import('@chakra-ui/styled-system').SystemStyleInterpolation;
     } | undefined;
     variants?: {
-        [key: string]: import('@chakra-ui/styled-system').SystemStyleInterpolation;
+        ghost: import('@chakra-ui/styled-system').CSSWithMultiValues | (import('@chakra-ui/styled-system').CSSWithMultiValues & import('@chakra-ui/styled-system').RecursiveCSSSelector<import('@chakra-ui/styled-system').CSSWithMultiValues>);
+        outline: import('@chakra-ui/styled-system').CSSWithMultiValues & import('@chakra-ui/styled-system').RecursiveCSSSelector<import('@chakra-ui/styled-system').CSSWithMultiValues>;
     } | undefined;
     defaultProps?: {
         size?: string | number | undefined;
-        variant?: string | number | undefined;
+        variant?: "outline" | "ghost" | undefined;
         colorScheme?: string | undefined;
     } | undefined;
 };
+export type PaginatorVariant = keyof Exclude<typeof paginatorConfig.variants, undefined>;
 //# sourceMappingURL=paginator-theme.d.ts.map

package/dist/theme/theme-config/components/paginator-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paginator-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/paginator-theme.ts"],"names":[],"mappings":"AACA,OAAO,EACN,kBAAkB,EAClB,qBAAqB,EACrB,iBAAiB,EACjB,kBAAkB,EAClB,MAAM,mBAAmB,CAAC;AAE3B,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiB1B,CAAC"}
+{"version":3,"file":"paginator-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/paginator-theme.ts"],"names":[],"mappings":"AA4CA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;CAM1B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,CAAC,OAAO,eAAe,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC"}

package/dist/theme/theme-config/components/paginator-theme.js

@@ -1,23 +1,39 @@
-import { defineStyleConfig as a } from "@chakra-ui/react";
-import { ThemeFontSizeVariable as o, ThemeSpaceVariable as e, ThemeColorVariable as t, ThemeFontVariable as i } from "../../theme-types.js";
-const l = a({
-  baseStyle: {
-    width: "100%",
-    fontFamily: i.Body,
-    color: t.OnBackground,
-    display: "flex",
-    justifyContent: "flex-end",
-    alignItems: "center",
-    fontVariant: "tabular-nums",
-    padding: e.Small,
-    gap: e.Medium,
-    div: {
-      button: {
-        fontSize: o.Large
-      }
+import { defineStyleConfig as t } from "@chakra-ui/react";
+import { ThemeSpaceVariable as a, ThemeColorVariable as o, ThemeFontSizeVariable as e, ThemeFontVariable as n } from "../../theme-types.js";
+const i = {
+  fontFamily: n.Body,
+  color: o.OnBackground,
+  fontVariant: "tabular-nums",
+  display: "flex",
+  alignItems: "center",
+  gap: a.Medium,
+  ".paginator-buttons-container": {
+    display: "inline-flex",
+    button: {
+      fontSize: e.Large
     }
   }
+}, r = {
+  width: "100%",
+  justifyContent: "flex-end",
+  padding: a.Small
+}, l = {
+  width: "fit-content",
+  padding: `${a.XSmall} ${a.Medium}`,
+  borderRadius: a.Small,
+  border: `1px solid ${o.OnSurfaceBorder}`,
+  backgroundColor: o.Surface,
+  boxShadow: `0 4px 12px 0 ${o.ShadowCard}`,
+  ".paginator-buttons-container": {
+    gap: a.Small
+  }
+}, s = t({
+  baseStyle: i,
+  variants: {
+    ghost: r,
+    outline: l
+  }
 });
 export {
-  l as paginatorConfig
+  s as paginatorConfig
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@caspeco/casper-ui-library",
-	"version": "8.2.2",
+	"version": "8.3.0",
 	"prettier": "@caspeco/prettier-config",
 	"type": "module",
 	"sideEffects": false,