@caspeco/casper-ui-library 5.1.1 → 5.2.0

package/README.md

@@ -63,3 +63,4 @@ export default defineConfig({
 3. Make your changes.
 4. Bump the `version` field in `package.json` (following [Semantic versioning](https://semver.org/)) and run `npm install`.
 5. Open a [pull request](https://github.com/Caspeco/casper-ui-library/pulls) using the template and assign a reviewer.
+6. When you have gotten your PR approved, merge the PR. If you have a new version in package.json it will automatically publish your changes to npm. A new version of the documentation website will always be built.

package/dist/components/breadcrumbs/breadcrumb-item.d.ts

@@ -1,5 +1,5 @@
 import { BreadcrumbItemProps as ChakraBreadcrumbItemProps } from '@chakra-ui/react';
-type ChakraBreadcrumbItemProperties = Pick<ChakraBreadcrumbItemProps, "children" | "isCurrentPage" | "key" | "color">;
+type ChakraBreadcrumbItemProperties = Pick<ChakraBreadcrumbItemProps, "overflow" | "children" | "isCurrentPage" | "key" | "color">;
 export type BreadcrumbItemProps = ChakraBreadcrumbItemProperties;
 export declare function BreadcrumbItem({ children, ...props }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/breadcrumbs/breadcrumb-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.d.ts","sourceRoot":"","sources":["../../../lib/components/breadcrumbs/breadcrumb-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,mBAAmB,IAAI,yBAAyB,EACrD,MAAM,kBAAkB,CAAC;AAE1B,KAAK,8BAA8B,GAAG,IAAI,CACzC,yBAAyB,EACzB,UAAU,GAAG,eAAe,GAAG,KAAK,GAAG,OAAO,CAC9C,CAAC;AACF,MAAM,MAAM,mBAAmB,GAAG,8BAA8B,CAAC;AAEjE,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAEzE"}
+{"version":3,"file":"breadcrumb-item.d.ts","sourceRoot":"","sources":["../../../lib/components/breadcrumbs/breadcrumb-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,mBAAmB,IAAI,yBAAyB,EACrD,MAAM,kBAAkB,CAAC;AAE1B,KAAK,8BAA8B,GAAG,IAAI,CACzC,yBAAyB,EACzB,UAAU,GAAG,UAAU,GAAG,eAAe,GAAG,KAAK,GAAG,OAAO,CAC3D,CAAC;AACF,MAAM,MAAM,mBAAmB,GAAG,8BAA8B,CAAC;AAEjE,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAMzE"}

package/dist/components/breadcrumbs/breadcrumb-item.js

@@ -1,8 +1,8 @@
-import { jsx as e } from "react/jsx-runtime";
-import { BreadcrumbItem as t } from "@chakra-ui/react";
-function a({ children: r, ...m }) {
-  return /* @__PURE__ */ e(t, { ...m, children: r });
+import { jsx as m } from "react/jsx-runtime";
+import { BreadcrumbItem as o } from "@chakra-ui/react";
+function c({ children: r, ...e }) {
+  return /* @__PURE__ */ m(o, { whiteSpace: "nowrap", overflow: "hidden", ...e, children: r });
 }
 export {
-  a as BreadcrumbItem
+  c as BreadcrumbItem
 };

package/dist/components/breadcrumbs/breadcrumb-link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-link.d.ts","sourceRoot":"","sources":["../../../lib/components/breadcrumbs/breadcrumb-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,mBAAmB,IAAI,yBAAyB,EACrD,MAAM,kBAAkB,CAAC;AAE1B,KAAK,8BAA8B,GAAG,IAAI,CAAC,yBAAyB,EAAE,UAAU,GAAG,IAAI,GAAG,MAAM,CAAC,CAAC;AAClG,MAAM,MAAM,mBAAmB,GAAG,8BAA8B,GAAG;IAClE,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAEzE"}
+{"version":3,"file":"breadcrumb-link.d.ts","sourceRoot":"","sources":["../../../lib/components/breadcrumbs/breadcrumb-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,mBAAmB,IAAI,yBAAyB,EACrD,MAAM,kBAAkB,CAAC;AAE1B,KAAK,8BAA8B,GAAG,IAAI,CAAC,yBAAyB,EAAE,UAAU,GAAG,IAAI,GAAG,MAAM,CAAC,CAAC;AAClG,MAAM,MAAM,mBAAmB,GAAG,8BAA8B,GAAG;IAClE,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAMzE"}

package/dist/components/breadcrumbs/breadcrumb-link.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
-import { BreadcrumbLink as n } from "@chakra-ui/react";
-function t({ children: r, ...m }) {
-  return /* @__PURE__ */ i(n, { ...m, children: r });
+import { BreadcrumbLink as o } from "@chakra-ui/react";
+function t({ children: r, ...e }) {
+  return /* @__PURE__ */ i(o, { overflow: "hidden", textOverflow: "ellipsis", ...e, children: r });
 }
 export {
   t as BreadcrumbLink

package/dist/components/breadcrumbs/breadcrumbs.d.ts

@@ -1,11 +1,22 @@
+import { As } from '@chakra-ui/react';
 export type Breadcrumb = {
     title: string;
-    as?: any;
+    as?: As;
     to?: string;
     href?: string;
 };
 export type BreadcrumbsProps = {
+    /**
+     * The number of items to show before the ellipsis when collapsed.
+     * @default 1
+     */
+    itemsBeforeCollapse?: number;
+    /**
+     * The number of items to show after the ellipsis when collapsed.
+     * @default 2
+     */
+    itemsAfterCollapse?: number;
     breadCrumbs: Breadcrumb[];
 };
-export declare function Breadcrumbs({ breadCrumbs }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Breadcrumbs({ breadCrumbs, itemsBeforeCollapse, itemsAfterCollapse, }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=breadcrumbs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../lib/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAMF,MAAM,MAAM,gBAAgB,GAAG;IAC9B,WAAW,EAAE,UAAU,EAAE,CAAC;CAC1B,CAAC;AAgEF,wBAAgB,WAAW,CAAC,EAAE,WAAW,EAAE,EAAE,gBAAgB,2CAoC5D"}
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../lib/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,KAAK,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAI3E,MAAM,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,EAAE,CAAC;IACR,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAMF,MAAM,MAAM,gBAAgB,GAAG;IAC9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,EAAE,UAAU,EAAE,CAAC;CAC1B,CAAC;AAgEF,wBAAgB,WAAW,CAAC,EAC3B,WAAW,EACX,mBAAuB,EACvB,kBAAsB,GACtB,EAAE,gBAAgB,2CA6DlB"}

package/dist/components/breadcrumbs/breadcrumbs.js

@@ -1,55 +1,80 @@
-import { jsx as o, jsxs as h } from "react/jsx-runtime";
-import { Breadcrumb as p } from "@chakra-ui/react";
-import { BreadcrumbItem as u } from "./breadcrumb-item.js";
-import { BreadcrumbLink as f } from "./breadcrumb-link.js";
-import { Menu as d } from "../menu/menu.js";
-import { MenuButton as g } from "../menu/menu-button.js";
-import { MenuList as M } from "../menu/menu-list.js";
-import { MenuItem as s } from "../menu/menu-item.js";
-import { ThemeFontVariable as k, ThemeFontSizeVariable as S, ThemeColorVariable as c } from "../../theme/theme-types.js";
-function y({ key: n, isCurrentPage: i, breadCrumb: t }) {
-  const e = i ? c.OnBackground : c.OnBackgroundSubdued;
-  return /* @__PURE__ */ h(u, { isCurrentPage: i, color: e, children: [
-    t.as && t.to && !t.href && /* @__PURE__ */ o(f, { as: t.as, to: t.to, children: t.title }),
-    t.href && !t.as && !t.to && /* @__PURE__ */ o(f, { href: t.href, children: t.title })
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
+import { Breadcrumb as f } from "@chakra-ui/react";
+import { BreadcrumbItem as M } from "./breadcrumb-item.js";
+import { BreadcrumbLink as m } from "./breadcrumb-link.js";
+import { Menu as O } from "../menu/menu.js";
+import { MenuButton as w } from "../menu/menu-button.js";
+import { MenuList as z } from "../menu/menu-list.js";
+import { MenuItem as u } from "../menu/menu-item.js";
+import { ThemeFontVariable as a, ThemeFontSizeVariable as B, ThemeColorVariable as c } from "../../theme/theme-types.js";
+function g({ key: n, isCurrentPage: e, breadCrumb: t }) {
+  const i = e ? c.OnBackground : c.OnBackgroundSubdued;
+  return /* @__PURE__ */ d(M, { isCurrentPage: e, color: i, children: [
+    t.as && t.to && !t.href && /* @__PURE__ */ o(m, { as: t.as, to: t.to, children: t.title }),
+    t.href && !t.as && !t.to && /* @__PURE__ */ o(m, { href: t.href, children: t.title })
   ] }, n);
 }
-function I({ key: n, breadCrumbs: i }) {
-  return /* @__PURE__ */ o(u, { color: c.OnBackgroundSubdued, children: /* @__PURE__ */ h(d, { children: [
-    /* @__PURE__ */ o(g, { variant: "ghost", size: "sm", "aria-label": "Show collapsed items", children: "..." }),
-    /* @__PURE__ */ o(M, { children: i.map((t, e) => t.as && t.to ? /* @__PURE__ */ o(s, { as: t.as, to: t.to, children: t.title }, e) : t.href ? /* @__PURE__ */ o(s, { itemType: "link", href: t.href, children: t.title }, e) : /* @__PURE__ */ o(s, { isDisabled: !0, children: t.title }, e)) })
+function F({ key: n, breadCrumbs: e }) {
+  return /* @__PURE__ */ o(M, { overflow: "unset", color: c.OnBackgroundSubdued, children: /* @__PURE__ */ d(O, { children: [
+    /* @__PURE__ */ o(w, { variant: "ghost", size: "sm", "aria-label": "Show collapsed items", children: "..." }),
+    /* @__PURE__ */ o(z, { children: e.map((t, i) => t.as && t.to ? /* @__PURE__ */ o(u, { as: t.as, to: t.to, children: t.title }, i) : t.href ? /* @__PURE__ */ o(u, { itemType: "link", href: t.href, children: t.title }, i) : /* @__PURE__ */ o(u, { isDisabled: !0, children: t.title }, i)) })
   ] }) }, n);
 }
-function D({ breadCrumbs: n }) {
-  const i = n.length > 4, t = i ? n.slice(1, -2) : [], e = n.filter((r) => !t.includes(r)), m = i ? [
-    ...e.slice(0, 1),
+function H({
+  breadCrumbs: n,
+  itemsBeforeCollapse: e = 1,
+  itemsAfterCollapse: t = 2
+}) {
+  const i = e + t;
+  if (!(n.length > i)) {
+    const l = n;
+    return /* @__PURE__ */ o(
+      f,
+      {
+        color: c.OnBackground,
+        fontSize: B.Medium,
+        fontFamily: a.Body,
+        width: "100%",
+        children: l.map((r, s, h) => {
+          const I = s + 1 === h.length;
+          return g({
+            key: s.toString(),
+            isCurrentPage: I,
+            breadCrumb: r
+          });
+        })
+      }
+    );
+  }
+  const k = n.slice(0, e), p = t > 0 ? n.slice(-t) : [], S = n.slice(e, n.length - t), y = [
+    ...k,
     {
       title: "",
-      as: "",
       isMenuButton: !0
     },
-    ...e.slice(1)
-  ] : e;
+    ...p
+  ];
   return /* @__PURE__ */ o(
-    p,
+    f,
     {
       color: c.OnBackground,
-      fontSize: S.Medium,
-      fontFamily: k.Body,
-      children: m.map((r, l, a) => {
-        const B = l + 1 === a.length;
-        return r.isMenuButton ? I({
-          key: l.toString(),
-          breadCrumbs: t
-        }) : y({
-          key: l.toString(),
-          isCurrentPage: B,
-          breadCrumb: r
+      fontSize: B.Medium,
+      fontFamily: a.Body,
+      width: "100%",
+      children: y.map((l, r, s) => {
+        const h = r + 1 === s.length;
+        return l.isMenuButton ? F({
+          key: r.toString(),
+          breadCrumbs: S
+        }) : g({
+          key: r.toString(),
+          isCurrentPage: h,
+          breadCrumb: l
         });
       })
     }
   );
 }
 export {
-  D as Breadcrumbs
+  H as Breadcrumbs
 };

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

@@ -7,6 +7,7 @@ export declare const paginatorConfig: {
         display: string;
         justifyContent: string;
         alignItems: string;
+        fontVariant: string;
         padding: ThemeSpaceVariable;
         gap: ThemeSpaceVariable;
         div: {

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;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgB1B,CAAC"}
+{"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"}

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

@@ -1,22 +1,23 @@
-import { defineStyleConfig as o } from "@chakra-ui/react";
-import { ThemeFontSizeVariable as a, ThemeSpaceVariable as e, ThemeColorVariable as i, ThemeFontVariable as t } from "../../theme-types.js";
-const r = o({
+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: t.Body,
-    color: i.OnBackground,
+    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: a.Large
+        fontSize: o.Large
       }
     }
   }
 });
 export {
-  r as paginatorConfig
+  l as paginatorConfig
 };

package/package.json

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