@caspeco/casper-ui-library 8.0.1 → 8.0.3

package/README.md

@@ -21,7 +21,10 @@ All commands are run from the root of the project, from a terminal.
 | `npm run dev` | Build a local development version of the entire library, compiled into a single .js file for improved HMR. Automatically rebuilds when the file contents change. |
 | `npm run build` | Build the library as it will be shipped on npm. Does not automatically rebuild when files change, but you can still use this build output to verify your changes in the documentation website or in another project. |
 | `cd ../docs && npm run dev` | Starts the documentation website. Usually you want to run this alongside the library in dev mode, so open a new terminal for this. See [/docs](../docs) for more info. |
-| `npm run test` | Run tests. |
+| `npm run test` | Run unit tests. |
+| `npm run test:visual` | Run visual regression tests using Playwright in Docker. Automatically starts/stops Docker container. |
+| `npm run test:visual:ui` | Opens the HTML report viewer for visual test results. |
+| `npm run test:visual:update` | Update visual regression baseline screenshots. Run this after intentional UI changes. |
 | `npm run lint` | Run linting with [@caspeco/eslint-config](https://github.com/Caspeco/eslint-config). If you use the recommended [ESLint VSCode extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) you can see your eslint errors directly in your editor without having to run this. |
 | `npm run prettier:fix` | Reformat all files with [@caspeco/prettier-config](https://github.com/Caspeco/prettier-config). If you use the recommended [Prettier VSCode extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) you can have your files automatically formatted on file save. |
 
@@ -50,6 +53,27 @@ export default defineConfig({
 });
 ```
 
+### Visual Regression Tests
+
+Visual regression tests catch unintended UI changes by comparing screenshots of component variants to committed baselines in `__screenshots__/`. They run with Playwright in Docker to ensure consistent rendering across different development environments and CI.
+
+**Requirements**: Docker must be installed and running.
+
+**Running tests**:
+
+- `npm run test:visual` - Runs all visual tests
+- `npm run test:visual:ui` - Opens the HTML report viewer
+- `npm run test:visual:update` - Updates baseline screenshots after intentional UI changes
+
+> [!TIP]
+> CI fails but local passes?
+>
+> 1. Go to the `visual-tests` job in GitHub Actions
+> 2. Download and extract the HTML artifact under the `Upload visual test report` step
+> 3. Run `npx vite preview --outDir .` in the extracted directory to see diff report from CI
+
+You may need to tweak the [pixelmatch comparator options](https://vitest.dev/api/browser/assertions.html#pixelmatch-comparator-options) if you see false positives due to anti-aliasing or sub-pixel rendering differences. See existing tests for examples.
+
 ## Contributing
 
 1. Make sure your repository is up to date.

package/dist/components/accordion/accordion.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=accordion.visual.test.d.ts.map

package/dist/components/accordion/accordion.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/accordion/accordion.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/alert/alert.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=alert.visual.test.d.ts.map

package/dist/components/alert/alert.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/alert/alert.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/badge/badge.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=badge.visual.test.d.ts.map

package/dist/components/badge/badge.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/badge/badge.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/box/box.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=box.visual.test.d.ts.map

package/dist/components/box/box.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/box/box.visual.test.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=breadcrumbs.visual.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/breadcrumbs/breadcrumbs.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/button/button.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=button.visual.test.d.ts.map

package/dist/components/button/button.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/button/button.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/checkbox/checkbox.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=checkbox.visual.test.d.ts.map

package/dist/components/checkbox/checkbox.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/checkbox/checkbox.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/checkbox-group/checkbox-group.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=checkbox-group.visual.test.d.ts.map

package/dist/components/checkbox-group/checkbox-group.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/checkbox-group/checkbox-group.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/combobox/combobox.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=combobox.visual.test.d.ts.map

package/dist/components/combobox/combobox.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/date-picker/date-picker.composition.d.ts

@@ -1,5 +1,9 @@
-export declare const BasicDatepicker: () => import("react/jsx-runtime").JSX.Element;
+export declare const BasicDatepicker: ({ date }: {
+    date?: Date;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const BasicDateRangePicker: () => import("react/jsx-runtime").JSX.Element;
 export declare const BasicMinimizedDateRangePicker: () => import("react/jsx-runtime").JSX.Element;
-export declare const BasicWeekNumberDatePicker: () => import("react/jsx-runtime").JSX.Element;
+export declare const BasicWeekNumberDatePicker: ({ date }: {
+    date?: Date;
+}) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=date-picker.composition.d.ts.map

package/dist/components/date-picker/date-picker.composition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/date-picker/date-picker.composition.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,eAAe,+CA4C3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,+CAoBhC,CAAC;AAEF,eAAO,MAAM,6BAA6B,+CAoBzC,CAAC;AAEF,eAAO,MAAM,yBAAyB,+CA8CrC,CAAC"}
+{"version":3,"file":"date-picker.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/date-picker/date-picker.composition.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,eAAe,GAAI,UAAU;IAAE,IAAI,CAAC,EAAE,IAAI,CAAA;CAAE,4CAmDxD,CAAC;AAEF,eAAO,MAAM,oBAAoB,+CAqBhC,CAAC;AAEF,eAAO,MAAM,6BAA6B,+CAoBzC,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,UAAU;IAAE,IAAI,CAAC,EAAE,IAAI,CAAA;CAAE,4CA8ClE,CAAC"}

package/dist/components/date-picker/date-picker.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=date-picker.visual.test.d.ts.map

package/dist/components/date-picker/date-picker.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/date-picker/date-picker.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/divider/divider.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=divider.visual.test.d.ts.map

package/dist/components/divider/divider.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/divider/divider.visual.test.tsx"],"names":[],"mappings":""}

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

@@ -2,6 +2,5 @@ export declare const RightDrawer: () => import("react/jsx-runtime").JSX.Element;
 export declare const LeftDrawer: () => import("react/jsx-runtime").JSX.Element;
 export declare const TopDrawer: () => import("react/jsx-runtime").JSX.Element;
 export declare const BottomDrawer: () => import("react/jsx-runtime").JSX.Element;
-export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
 export declare const InlineDrawer: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=drawer.composition.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/drawer/drawer.composition.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,WAAW,+CAavB,CAAC;AACF,eAAO,MAAM,UAAU,+CAatB,CAAC;AACF,eAAO,MAAM,SAAS,+CAarB,CAAC;AACF,eAAO,MAAM,YAAY,+CAaxB,CAAC;AAGF,eAAO,MAAM,KAAK,+CAyBjB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAoBxB,CAAC"}
+{"version":3,"file":"drawer.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/drawer/drawer.composition.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW,+CAavB,CAAC;AACF,eAAO,MAAM,UAAU,+CAatB,CAAC;AACF,eAAO,MAAM,SAAS,+CAarB,CAAC;AACF,eAAO,MAAM,YAAY,+CAaxB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAoBxB,CAAC"}

package/dist/components/drawer/drawer.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=drawer.visual.test.d.ts.map

package/dist/components/drawer/drawer.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/drawer/drawer.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/flex/flex.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=flex.visual.test.d.ts.map

package/dist/components/flex/flex.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/flex/flex.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/form-control/form-control.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=form-control.visual.test.d.ts.map

package/dist/components/form-control/form-control.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/form-control/form-control.visual.test.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,3 @@
+export declare const SimpleColumns: () => import("react/jsx-runtime").JSX.Element;
+export declare const ResponsiveGrid: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=grid.composition.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/grid/grid.composition.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,+CAczB,CAAC;AAEF,eAAO,MAAM,cAAc,+CAoB1B,CAAC"}

package/dist/components/grid/grid.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=grid.visual.test.d.ts.map

package/dist/components/grid/grid.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/grid/grid.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/heading/heading.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=heading.visual.test.d.ts.map

package/dist/components/heading/heading.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/heading/heading.visual.test.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,3 @@
+export declare const SingleWord: () => import("react/jsx-runtime").JSX.Element;
+export declare const MultipleWords: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=highlight.composition.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/highlight/highlight.composition.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,+CAEtB,CAAC;AAEF,eAAO,MAAM,aAAa,+CAMzB,CAAC"}

package/dist/components/highlight/highlight.d.ts

@@ -1,4 +1,9 @@
 import { HighlightProps as ChakraHighlightProps } from '@chakra-ui/react';
 export type HighlightProps = Pick<ChakraHighlightProps, "query" | "children">;
+/**
+ * Highlight component to emphasize specific words or phrases within text.
+ *
+ * @see Docs https://caspeco.github.io/casper-ui-library/components/highlight/
+ */
 export declare function Highlight(props: HighlightProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=highlight.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../../../lib/components/highlight/highlight.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgC,KAAK,cAAc,IAAI,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE7G,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAE9E,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAS9C"}
+{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../../../lib/components/highlight/highlight.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgC,KAAK,cAAc,IAAI,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE7G,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAE9E;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAS9C"}

package/dist/components/highlight/highlight.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=highlight.visual.test.d.ts.map

package/dist/components/highlight/highlight.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/highlight/highlight.visual.test.tsx"],"names":[],"mappings":""}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"icon.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/icon/icon.composition.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,QAAQ,+CAqBpB,CAAC"}
+{"version":3,"file":"icon.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/icon/icon.composition.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,+CAAuE,CAAC"}

package/dist/components/icon/icon.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=icon.visual.test.d.ts.map

package/dist/components/icon/icon.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/icon/icon.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/icon-button/icon-button.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=icon-button.visual.test.d.ts.map

package/dist/components/icon-button/icon-button.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/icon-button/icon-button.visual.test.tsx"],"names":[],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"image.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/image/image.composition.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,+CAMtB,CAAC;AACF,eAAO,MAAM,iBAAiB,+CAO7B,CAAC"}
+{"version":3,"file":"image.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/image/image.composition.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU,+CAAqE,CAAC;AAC7F,eAAO,MAAM,iBAAiB,+CAE7B,CAAC"}

package/dist/components/image/image.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=image.visual.test.d.ts.map

package/dist/components/image/image.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/image/image.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/image-upload/image-upload.composition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image-upload.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/image-upload/image-upload.composition.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,+CAY7B,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CAYlC,CAAC;AAEF,eAAO,MAAM,wBAAwB,+CAWpC,CAAC"}
+{"version":3,"file":"image-upload.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/image-upload/image-upload.composition.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,+CAY7B,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CAYlC,CAAC;AAEF,eAAO,MAAM,wBAAwB,+CAWpC,CAAC"}

package/dist/components/image-upload/image-upload.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=image-upload.visual.test.d.ts.map

package/dist/components/image-upload/image-upload.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-upload.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/image-upload/image-upload.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/input/input.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=input.visual.test.d.ts.map

package/dist/components/input/input.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/input/input.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/link/link.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=link.visual.test.d.ts.map

package/dist/components/link/link.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/link/link.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/list/list.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=list.visual.test.d.ts.map

package/dist/components/list/list.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/list/list.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/menu/menu.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=menu.visual.test.d.ts.map

package/dist/components/menu/menu.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/menu/menu.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/message/message.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=message.visual.test.d.ts.map

package/dist/components/message/message.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/message/message.visual.test.tsx"],"names":[],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"modal.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/modal/modal.composition.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,WAAW,+CA+BvB,CAAC;AA+BF,eAAO,MAAM,SAAS,+CAarB,CAAC;AAEF,eAAO,MAAM,UAAU,+CAatB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAarB,CAAC;AACF,eAAO,MAAM,cAAc,+CAa1B,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAapB,CAAC;AAEF,eAAO,MAAM,cAAc,+CAiE1B,CAAC;AAEF,eAAO,MAAM,YAAY,+CAqExB,CAAC;AAEF,eAAO,MAAM,aAAa,+CAsEzB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAwExB,CAAC;AAEF,eAAO,MAAM,2BAA2B,+CAkDvC,CAAC"}
+{"version":3,"file":"modal.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/modal/modal.composition.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,WAAW,+CA+BvB,CAAC;AA8BF,eAAO,MAAM,SAAS,+CAarB,CAAC;AAEF,eAAO,MAAM,UAAU,+CAatB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAarB,CAAC;AACF,eAAO,MAAM,cAAc,+CAa1B,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAapB,CAAC;AAEF,eAAO,MAAM,cAAc,+CAiE1B,CAAC;AAEF,eAAO,MAAM,YAAY,+CAqExB,CAAC;AAEF,eAAO,MAAM,aAAa,+CAsEzB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAwExB,CAAC;AAEF,eAAO,MAAM,2BAA2B,+CAkDvC,CAAC"}

package/dist/components/modal/modal.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=modal.visual.test.d.ts.map

package/dist/components/modal/modal.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/modal/modal.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/navigation-list/navigation-list.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=navigation-list.visual.test.d.ts.map

package/dist/components/navigation-list/navigation-list.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-list.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/navigation-list/navigation-list.visual.test.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=paginator.visual.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paginator.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/paginator/paginator.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/quantity-button/quantity-button.composition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"quantity-button.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/quantity-button/quantity-button.composition.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,SAAS,+CAiBrB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAiBrB,CAAC;AAEF,eAAO,MAAM,cAAc,+CA8C1B,CAAC"}
+{"version":3,"file":"quantity-button.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/quantity-button/quantity-button.composition.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,SAAS,+CAiBrB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAiBrB,CAAC;AAEF,eAAO,MAAM,cAAc,+CAyC1B,CAAC"}

package/dist/components/quantity-button/quantity-button.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=quantity-button.visual.test.d.ts.map

package/dist/components/quantity-button/quantity-button.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quantity-button.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/quantity-button/quantity-button.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/radio/radio.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=radio.visual.test.d.ts.map

package/dist/components/radio/radio.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/radio/radio.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/radio-group/radio-group.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=radio-group.visual.test.d.ts.map

package/dist/components/radio-group/radio-group.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/radio-group/radio-group.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/segmented-control/segmented-control.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=segmented-control.visual.test.d.ts.map

package/dist/components/segmented-control/segmented-control.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/segmented-control/segmented-control.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/select/select.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=select.visual.test.d.ts.map

package/dist/components/select/select.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/select/select.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/skeleton/skeleton.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=skeleton.visual.test.d.ts.map

package/dist/components/skeleton/skeleton.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/skeleton/skeleton.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/stack/stack.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=stack.visual.test.d.ts.map

package/dist/components/stack/stack.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/stack/stack.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/stepper/stepper.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=stepper.visual.test.d.ts.map

package/dist/components/stepper/stepper.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/stepper/stepper.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/switch/switch.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=switch.visual.test.d.ts.map

package/dist/components/switch/switch.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/switch/switch.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/table/table.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=table.visual.test.d.ts.map

package/dist/components/table/table.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table.visual.test.tsx"],"names":[],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/tabs/tabs.composition.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,sBAAsB,+CAqBlC,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CAqBlC,CAAC;AAEF,eAAO,MAAM,WAAW,+CAqBvB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAuBpB,CAAC;AAEF,eAAO,MAAM,UAAU,+CAuDtB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAuBvB,CAAC"}
+{"version":3,"file":"tabs.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/tabs/tabs.composition.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,sBAAsB,+CAqBlC,CAAC;AAEF,eAAO,MAAM,sBAAsB,+CAqBlC,CAAC;AAEF,eAAO,MAAM,WAAW,+CAqBvB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAuBpB,CAAC;AAEF,eAAO,MAAM,UAAU,+CAiDtB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAuBvB,CAAC"}

package/dist/components/tabs/tabs.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tabs.visual.test.d.ts.map

package/dist/components/tabs/tabs.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/tabs/tabs.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/tag/tag.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tag.visual.test.d.ts.map

package/dist/components/tag/tag.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/tag/tag.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/text/text.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=text.visual.test.d.ts.map

package/dist/components/text/text.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/text/text.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/textarea/textarea.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=textarea.visual.test.d.ts.map

package/dist/components/textarea/textarea.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/textarea/textarea.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/toast/toast.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=toast.visual.test.d.ts.map

package/dist/components/toast/toast.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/toast/toast.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/toggle-button/toggle-button.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=toggle-button.visual.test.d.ts.map

package/dist/components/toggle-button/toggle-button.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/toggle-button/toggle-button.visual.test.tsx"],"names":[],"mappings":""}

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

@@ -1,2 +1,5 @@
-export declare const BasicTooltip: () => import("react/jsx-runtime").JSX.Element;
+export declare const PositionTop: () => import("react/jsx-runtime").JSX.Element;
+export declare const PositionRight: () => import("react/jsx-runtime").JSX.Element;
+export declare const PositionBottom: () => import("react/jsx-runtime").JSX.Element;
+export declare const PositionLeft: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=tooltip.composition.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/tooltip/tooltip.composition.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,+CAexB,CAAC"}
+{"version":3,"file":"tooltip.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/tooltip/tooltip.composition.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW,+CAMvB,CAAC;AAEF,eAAO,MAAM,aAAa,+CAMzB,CAAC;AAEF,eAAO,MAAM,cAAc,+CAM1B,CAAC;AAEF,eAAO,MAAM,YAAY,+CAMxB,CAAC"}

package/dist/components/tooltip/tooltip.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tooltip.visual.test.d.ts.map

package/dist/components/tooltip/tooltip.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/tooltip/tooltip.visual.test.tsx"],"names":[],"mappings":""}

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/dist/theme/theme-config/components/date-cell-theme.d.ts

@@ -6,6 +6,7 @@ export declare const dateCellConfig: {
         alignItems: string;
         flexDirection: string;
         padding: string;
+        minWidth: string;
         borderRadius: ThemeRadiusToken;
         fontSize: ThemeFontSizeToken;
         fontFamily: ThemeFontToken;

package/dist/theme/theme-config/components/date-cell-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-cell-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/date-cell-theme.ts"],"names":[],"mappings":"AACA,OAAO,EACN,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,MAAM,iBAAiB,CAAC;AAEzB,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+KzB,CAAC"}
+{"version":3,"file":"date-cell-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/date-cell-theme.ts"],"names":[],"mappings":"AACA,OAAO,EACN,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,MAAM,iBAAiB,CAAC;AAEzB,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgLzB,CAAC"}

package/dist/theme/theme-config/components/date-cell-theme.js

@@ -7,6 +7,7 @@ const i = c({
     alignItems: "center",
     flexDirection: "row",
     padding: "12px 8px",
+    minWidth: "32px",
     borderRadius: o.Small,
     fontSize: t.Medium,
     fontFamily: r.Body,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@caspeco/casper-ui-library",
-	"version": "8.0.1",
+	"version": "8.0.3",
 	"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",
+		"globals": "^17.1.0",
 		"jsdom": "^27.4.0",
+		"rimraf": "^6.1.2",
 		"tsc-alias": "^1.8.16",
 		"typescript": "~5.9.3",
 		"typescript-eslint": "^8.53.0",
 		"vite": "^7.3.1",
 		"vite-plugin-dts": "^4.5.4",
 		"vite-tsconfig-paths": "^6.0.4",
-		"vitest": "^4.0.17"
+		"vitest": "^4.0.18"
 	},
 	"peerDependencies": {
 		"@chakra-ui/react": "^2.8.2",