@caspeco/casper-ui-library 8.0.2 → 8.1.0

package/dist/node_modules/@floating-ui/core/dist/floating-ui.core.js

@@ -1,21 +1,21 @@
-import { evaluate as Y, getSide as L, getSideAxis as E, getOppositePlacement as q, getExpandedPlacements as z, getOppositeAxisPlacements as G, getAlignmentSides as H, getAlignmentAxis as J, getAlignment as K, getPaddingObject as N, rectToClientRect as M, getAxisLength as Q } from "../../utils/dist/floating-ui.utils.js";
-function X(r, l, u) {
+import { evaluate as Y, getSide as F, getSideAxis as S, getOppositePlacement as z, getExpandedPlacements as G, getOppositeAxisPlacements as H, getAlignmentSides as J, getAlignmentAxis as K, getAlignment as N, getPaddingObject as Q, rectToClientRect as M, getAxisLength as U } from "../../utils/dist/floating-ui.utils.js";
+function X(c, l, u) {
   let {
     reference: e,
     floating: a
-  } = r;
-  const t = E(l), o = J(l), n = Q(o), p = L(l), d = t === "y", f = e.x + e.width / 2 - a.width / 2, s = e.y + e.height / 2 - a.height / 2, m = e[n] / 2 - a[n] / 2;
+  } = c;
+  const t = S(l), o = K(l), n = U(o), m = F(l), d = t === "y", r = e.x + e.width / 2 - a.width / 2, s = e.y + e.height / 2 - a.height / 2, f = e[n] / 2 - a[n] / 2;
   let i;
-  switch (p) {
+  switch (m) {
     case "top":
       i = {
-        x: f,
+        x: r,
         y: e.y - a.height
       };
       break;
     case "bottom":
       i = {
-        x: f,
+        x: r,
         y: e.y + e.height
       };
       break;
@@ -37,126 +37,129 @@ function X(r, l, u) {
         y: e.y
       };
   }
-  switch (K(l)) {
+  switch (N(l)) {
     case "start":
-      i[o] -= m * (u && d ? -1 : 1);
+      i[o] -= f * (u && d ? -1 : 1);
       break;
     case "end":
-      i[o] += m * (u && d ? -1 : 1);
+      i[o] += f * (u && d ? -1 : 1);
       break;
   }
   return i;
 }
-const Z = async (r, l, u) => {
+async function W(c, l) {
+  var u;
+  l === void 0 && (l = {});
+  const {
+    x: e,
+    y: a,
+    platform: t,
+    rects: o,
+    elements: n,
+    strategy: m
+  } = c, {
+    boundary: d = "clippingAncestors",
+    rootBoundary: r = "viewport",
+    elementContext: s = "floating",
+    altBoundary: f = !1,
+    padding: i = 0
+  } = Y(l, c), w = Q(i), p = n[f ? s === "floating" ? "reference" : "floating" : s], h = M(await t.getClippingRect({
+    element: (u = await (t.isElement == null ? void 0 : t.isElement(p))) == null || u ? p : p.contextElement || await (t.getDocumentElement == null ? void 0 : t.getDocumentElement(n.floating)),
+    boundary: d,
+    rootBoundary: r,
+    strategy: m
+  })), b = s === "floating" ? {
+    x: e,
+    y: a,
+    width: o.floating.width,
+    height: o.floating.height
+  } : o.reference, A = await (t.getOffsetParent == null ? void 0 : t.getOffsetParent(n.floating)), x = await (t.isElement == null ? void 0 : t.isElement(A)) ? await (t.getScale == null ? void 0 : t.getScale(A)) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  }, y = M(t.convertOffsetParentRelativeRectToViewportRelativeRect ? await t.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements: n,
+    rect: b,
+    offsetParent: A,
+    strategy: m
+  }) : b);
+  return {
+    top: (h.top - y.top + w.top) / x.y,
+    bottom: (y.bottom - h.bottom + w.bottom) / x.y,
+    left: (h.left - y.left + w.left) / x.x,
+    right: (y.right - h.right + w.right) / x.x
+  };
+}
+const $ = async (c, l, u) => {
   const {
     placement: e = "bottom",
     strategy: a = "absolute",
     middleware: t = [],
     platform: o
-  } = u, n = t.filter(Boolean), p = await (o.isRTL == null ? void 0 : o.isRTL(l));
+  } = u, n = t.filter(Boolean), m = await (o.isRTL == null ? void 0 : o.isRTL(l));
   let d = await o.getElementRects({
-    reference: r,
+    reference: c,
     floating: l,
     strategy: a
   }), {
-    x: f,
+    x: r,
     y: s
-  } = X(d, e, p), m = e, i = {}, w = 0;
-  for (let h = 0; h < n.length; h++) {
+  } = X(d, e, m), f = e, i = {}, w = 0;
+  for (let p = 0; p < n.length; p++) {
+    var O;
     const {
-      name: y,
+      name: h,
       fn: b
-    } = n[h], {
-      x,
-      y: A,
-      data: v,
-      reset: c
+    } = n[p], {
+      x: A,
+      y: x,
+      data: y,
+      reset: v
     } = await b({
-      x: f,
+      x: r,
       y: s,
       initialPlacement: e,
-      placement: m,
+      placement: f,
       strategy: a,
       middlewareData: i,
       rects: d,
-      platform: o,
+      platform: {
+        ...o,
+        detectOverflow: (O = o.detectOverflow) != null ? O : W
+      },
       elements: {
-        reference: r,
+        reference: c,
         floating: l
       }
     });
-    f = x ?? f, s = A ?? s, i = {
+    r = A ?? r, s = x ?? s, i = {
       ...i,
-      [y]: {
-        ...i[y],
-        ...v
+      [h]: {
+        ...i[h],
+        ...y
       }
-    }, c && w <= 50 && (w++, typeof c == "object" && (c.placement && (m = c.placement), c.rects && (d = c.rects === !0 ? await o.getElementRects({
-      reference: r,
+    }, v && w <= 50 && (w++, typeof v == "object" && (v.placement && (f = v.placement), v.rects && (d = v.rects === !0 ? await o.getElementRects({
+      reference: c,
       floating: l,
       strategy: a
-    }) : c.rects), {
-      x: f,
+    }) : v.rects), {
+      x: r,
       y: s
-    } = X(d, m, p)), h = -1);
+    } = X(d, f, m)), p = -1);
   }
   return {
-    x: f,
+    x: r,
     y: s,
-    placement: m,
+    placement: f,
     strategy: a,
     middlewareData: i
   };
-};
-async function U(r, l) {
-  var u;
-  l === void 0 && (l = {});
-  const {
-    x: e,
-    y: a,
-    platform: t,
-    rects: o,
-    elements: n,
-    strategy: p
-  } = r, {
-    boundary: d = "clippingAncestors",
-    rootBoundary: f = "viewport",
-    elementContext: s = "floating",
-    altBoundary: m = !1,
-    padding: i = 0
-  } = Y(l, r), w = N(i), y = n[m ? s === "floating" ? "reference" : "floating" : s], b = M(await t.getClippingRect({
-    element: (u = await (t.isElement == null ? void 0 : t.isElement(y))) == null || u ? y : y.contextElement || await (t.getDocumentElement == null ? void 0 : t.getDocumentElement(n.floating)),
-    boundary: d,
-    rootBoundary: f,
-    strategy: p
-  })), x = s === "floating" ? {
-    x: e,
-    y: a,
-    width: o.floating.width,
-    height: o.floating.height
-  } : o.reference, A = await (t.getOffsetParent == null ? void 0 : t.getOffsetParent(n.floating)), v = await (t.isElement == null ? void 0 : t.isElement(A)) ? await (t.getScale == null ? void 0 : t.getScale(A)) || {
-    x: 1,
-    y: 1
-  } : {
-    x: 1,
-    y: 1
-  }, c = M(t.convertOffsetParentRelativeRectToViewportRelativeRect ? await t.convertOffsetParentRelativeRectToViewportRelativeRect({
-    elements: n,
-    rect: x,
-    offsetParent: A,
-    strategy: p
-  }) : x);
-  return {
-    top: (b.top - c.top + w.top) / v.y,
-    bottom: (c.bottom - b.bottom + w.bottom) / v.y,
-    left: (b.left - c.left + w.left) / v.x,
-    right: (c.right - b.right + w.right) / v.x
-  };
-}
-const _ = function(r) {
-  return r === void 0 && (r = {}), {
+}, _ = function(c) {
+  return c === void 0 && (c = {}), {
     name: "flip",
-    options: r,
+    options: c,
     async fn(l) {
       var u, e;
       const {
@@ -164,70 +167,70 @@ const _ = function(r) {
         middlewareData: t,
         rects: o,
         initialPlacement: n,
-        platform: p,
+        platform: m,
         elements: d
       } = l, {
-        mainAxis: f = !0,
+        mainAxis: r = !0,
         crossAxis: s = !0,
-        fallbackPlacements: m,
+        fallbackPlacements: f,
         fallbackStrategy: i = "bestFit",
         fallbackAxisSideDirection: w = "none",
-        flipAlignment: h = !0,
-        ...y
-      } = Y(r, l);
+        flipAlignment: O = !0,
+        ...p
+      } = Y(c, l);
       if ((u = t.arrow) != null && u.alignmentOffset)
         return {};
-      const b = L(a), x = E(n), A = L(n) === n, v = await (p.isRTL == null ? void 0 : p.isRTL(d.floating)), c = m || (A || !h ? [q(n)] : z(n)), F = w !== "none";
-      !m && F && c.push(...G(n, h, w, v));
-      const I = [n, ...c], T = await U(l, y), S = [];
-      let O = ((e = t.flip) == null ? void 0 : e.overflows) || [];
-      if (f && S.push(T[b]), s) {
-        const R = H(a, o, v);
-        S.push(T[R[0]], T[R[1]]);
+      const h = F(a), b = S(n), A = F(n) === n, x = await (m.isRTL == null ? void 0 : m.isRTL(d.floating)), y = f || (A || !O ? [z(n)] : G(n)), v = w !== "none";
+      !f && v && y.push(...H(n, O, w, x));
+      const I = [n, ...y], D = await m.detectOverflow(l, p), T = [];
+      let C = ((e = t.flip) == null ? void 0 : e.overflows) || [];
+      if (r && T.push(D[h]), s) {
+        const R = J(a, o, x);
+        T.push(D[R[0]], D[R[1]]);
       }
-      if (O = [...O, {
+      if (C = [...C, {
         placement: a,
-        overflows: S
-      }], !S.every((R) => R <= 0)) {
+        overflows: T
+      }], !T.every((R) => R <= 0)) {
         var B, j;
-        const R = (((B = t.flip) == null ? void 0 : B.index) || 0) + 1, D = I[R];
-        if (D && (!(s === "alignment" ? x !== E(D) : !1) || // We leave the current main axis only if every placement on that axis
+        const R = (((B = t.flip) == null ? void 0 : B.index) || 0) + 1, L = I[R];
+        if (L && (!(s === "alignment" ? b !== S(L) : !1) || // We leave the current main axis only if every placement on that axis
         // overflows the main axis.
-        O.every((g) => E(g.placement) === x ? g.overflows[0] > 0 : !0)))
+        C.every((g) => S(g.placement) === b ? g.overflows[0] > 0 : !0)))
           return {
             data: {
               index: R,
-              overflows: O
+              overflows: C
             },
             reset: {
-              placement: D
+              placement: L
             }
           };
-        let C = (j = O.filter((k) => k.overflows[0] <= 0).sort((k, g) => k.overflows[1] - g.overflows[1])[0]) == null ? void 0 : j.placement;
-        if (!C)
+        let E = (j = C.filter((k) => k.overflows[0] <= 0).sort((k, g) => k.overflows[1] - g.overflows[1])[0]) == null ? void 0 : j.placement;
+        if (!E)
           switch (i) {
             case "bestFit": {
               var V;
-              const k = (V = O.filter((g) => {
-                if (F) {
-                  const P = E(g.placement);
-                  return P === x || // Create a bias to the `y` side axis due to horizontal
+              const k = (V = C.filter((g) => {
+                if (v) {
+                  const P = S(g.placement);
+                  return P === b || // Create a bias to the `y` side axis due to horizontal
                   // reading directions favoring greater width.
                   P === "y";
                 }
                 return !0;
-              }).map((g) => [g.placement, g.overflows.filter((P) => P > 0).reduce((P, $) => P + $, 0)]).sort((g, P) => g[1] - P[1])[0]) == null ? void 0 : V[0];
-              k && (C = k);
+              }).map((g) => [g.placement, g.overflows.filter((P) => P > 0).reduce((P, q) => P + q, 0)]).sort((g, P) => g[1] - P[1])[0]) == null ? void 0 : V[0];
+              k && (E = k);
               break;
             }
             case "initialPlacement":
-              C = n;
+              E = n;
               break;
           }
-        if (a !== C)
+        if (a !== E)
           return {
             reset: {
-              placement: C
+              placement: E
             }
           };
       }
@@ -236,8 +239,8 @@ const _ = function(r) {
   };
 };
 export {
-  Z as computePosition,
-  U as detectOverflow,
+  $ as computePosition,
+  W as detectOverflow,
   _ as flip,
   M as rectToClientRect
 };

package/dist/test-utils/create-visual-tests.d.ts

@@ -0,0 +1,21 @@
+import { ScreenshotMatcherOptions } from '@vitest/browser/context';
+import { ComponentType } from 'react';
+import { VisualTestRenderOptions } from './render-for-visual-test.js';
+type VisualTestOptions = (VisualTestRenderOptions & ScreenshotMatcherOptions<"pixelmatch">) | undefined;
+/**
+ * Creates visual tests for all compositions of a component.
+ * @param componentName The name of the component.
+ * @param compositions A record of composition names to React components.
+ * @example
+ * import * as Compositions from "./button.composition";
+ * createVisualTests("Button", Compositions);
+ */
+export declare function createVisualTests(componentName: string, compositions: Record<string, ComponentType>, options?: VisualTestOptions): void;
+/**
+ * Creates a visual test that renders the given component and compares it to a screenshot.
+ * @param Component The React component to render.
+ * @param options Options for the visual test (e.g., width, height).
+ */
+export declare function createVisualTest(Component: ComponentType, options?: VisualTestOptions): void;
+export {};
+//# sourceMappingURL=create-visual-tests.d.ts.map

package/dist/test-utils/create-visual-tests.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-visual-tests.d.ts","sourceRoot":"","sources":["../../lib/test-utils/create-visual-tests.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAGN,KAAK,uBAAuB,EAC5B,MAAM,0BAA0B,CAAC;AAElC,KAAK,iBAAiB,GAAG,CAAC,uBAAuB,GAAG,wBAAwB,CAAC,YAAY,CAAC,CAAC,GAAG,SAAS,CAAC;AAExG;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAChC,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,EAC3C,OAAO,CAAC,EAAE,iBAAiB,QAc3B;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE,iBAAiB,QAUrF"}

package/dist/test-utils/render-for-visual-test.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, ReactElement } from 'react';
+export declare const VISUAL_TEST_CONTAINER_ID = "visual-root";
+export type VisualTestRenderOptions = {
+    width?: CSSProperties["width"];
+    height?: CSSProperties["height"];
+};
+export declare function renderForVisualTest(ui: ReactElement, options?: VisualTestRenderOptions): import('@testing-library/react').RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+//# sourceMappingURL=render-for-visual-test.d.ts.map

package/dist/test-utils/render-for-visual-test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-for-visual-test.d.ts","sourceRoot":"","sources":["../../lib/test-utils/render-for-visual-test.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,eAAO,MAAM,wBAAwB,gBAAgB,CAAC;AAEtD,MAAM,MAAM,uBAAuB,GAAG;IACrC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;CACjC,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,YAAY,EAAE,OAAO,CAAC,EAAE,uBAAuB,gIAiBtF"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@caspeco/casper-ui-library",
-	"version": "8.0.2",
+	"version": "8.1.0",
 	"prettier": "@caspeco/prettier-config",
 	"type": "module",
 	"sideEffects": false,
@@ -20,6 +20,11 @@
 		"build": "vite build --mode prod",
 		"tsc": "tsc --project tsconfig.app.json",
 		"test": "vitest run",
+		"test:visual:server:start": "docker compose -f docker-compose.visual.yml up -d --wait playwright-server",
+		"test:visual:server:stop": "docker compose -f docker-compose.visual.yml down",
+		"test:visual": "node ./scripts/run-visual-tests.js",
+		"test:visual:ui": "vite preview --outDir html",
+		"test:visual:update": "rimraf __screenshots__ && npm run test:visual:server:start && (vitest --config vitest.visual.config.ts --run --update || true) && npm run test:visual:server:stop",
 		"prettier": "prettier --check .",
 		"prettier:fix": "prettier --write .",
 		"check:types": "attw --pack . --ignore-rules=cjs-resolves-to-esm",
@@ -32,25 +37,28 @@
 		"@caspeco/prettier-config": "^1.0.7",
 		"@eslint/js": "^9.39.2",
 		"@testing-library/jest-dom": "^6.9.1",
-		"@testing-library/react": "^16.3.1",
+		"@testing-library/react": "^16.3.2",
 		"@testing-library/user-event": "^14.6.1",
 		"@types/jest": "^30.0.0",
 		"@types/node": "^24.10.9",
 		"@types/react": "^18.3.12",
 		"@types/react-dom": "^18.3.1",
 		"@vitejs/plugin-react-swc": "^4.2.2",
+		"@vitest/browser-playwright": "^4.0.18",
+		"@vitest/ui": "^4.0.18",
 		"eslint": "^9.39.2",
 		"eslint-plugin-react-hooks": "^7.0.1",
-		"eslint-plugin-react-refresh": "^0.4.26",
-		"globals": "^17.0.0",
+		"eslint-plugin-react-refresh": "^0.5.0",
+		"globals": "^17.3.0",
 		"jsdom": "^27.4.0",
+		"rimraf": "^6.1.2",
 		"tsc-alias": "^1.8.16",
 		"typescript": "~5.9.3",
-		"typescript-eslint": "^8.53.0",
+		"typescript-eslint": "^8.54.0",
 		"vite": "^7.3.1",
 		"vite-plugin-dts": "^4.5.4",
-		"vite-tsconfig-paths": "^6.0.4",
-		"vitest": "^4.0.17"
+		"vite-tsconfig-paths": "^6.0.5",
+		"vitest": "^4.0.18"
 	},
 	"peerDependencies": {
 		"@chakra-ui/react": "^2.8.2",
@@ -60,7 +68,7 @@
 	},
 	"dependencies": {
 		"@chakra-ui/anatomy": "^2.3.4",
-		"@floating-ui/dom": "^1.7.4",
+		"@floating-ui/dom": "^1.7.5",
 		"@tanstack/react-table": "^8.21.3",
 		"@tanstack/react-virtual": "^3.13.18",
 		"csstype": "^3.2.3",