@prokodo/ui 0.1.13 → 0.1.15

package/dist/types/components/RTE/RTE.d.ts

@@ -320,10 +320,10 @@ export declare const RTE: import("react").ComponentType<{
     inputContainerClassName?: string | undefined;
     inputClassName?: string | undefined;
     hideCounter?: boolean | undefined;
+    hideLegend?: boolean | undefined;
     minRows?: number | undefined;
     maxRows?: number | undefined;
     errorTranslations?: import("../input").InputErrorTranslations | undefined;
-    hideLegend?: boolean | undefined;
     onValidate?: import("../input").InputValidateEvent | undefined;
 } & {
     value?: string;

package/dist/types/components/RTE/RTE.lazy.d.ts

@@ -320,10 +320,10 @@ declare const _default: import("react").ComponentType<{
     inputContainerClassName?: string | undefined;
     inputClassName?: string | undefined;
     hideCounter?: boolean | undefined;
+    hideLegend?: boolean | undefined;
     minRows?: number | undefined;
     maxRows?: number | undefined;
     errorTranslations?: import("../input").InputErrorTranslations | undefined;
-    hideLegend?: boolean | undefined;
     onValidate?: import("../input").InputValidateEvent | undefined;
 } & {
     value?: string;

package/dist/types/components/avatar/Avatar.view.d.ts

@@ -1,3 +1,3 @@
 import type { AvatarProps } from "./Avatar.model";
 import type { JSX } from "react";
-export declare function AvatarView({ className, variant, size, image, redirect, ...rest }: AvatarProps): JSX.Element;
+export declare function AvatarView({ className, variant, size, image, redirect, iconOverride, ...rest }: AvatarProps): JSX.Element;

package/dist/types/components/carousel/Carousel.view.d.ts

@@ -1,3 +1,3 @@
 import { type JSX } from "react";
 import type { CarouselProps } from "./Carousel.model";
-export declare function CarouselView({ itemsToShow, className, classNameWrapper, classNameItem, classNameDots, classNameDot, enableControl, children, ...rest }: CarouselProps): JSX.Element;
+export declare function CarouselView({ itemsToShow, className, classNameWrapper, classNameItem, classNameDots, classNameDot, classNameDotActive: _classNameDotActive, classNameButtons: _classNameButtons, classNameControls: _classNameControls, enableControl, enableDots: _enableDots, autoplay: _autoplay, translateX: _translateX, itemStyle: _itemStyle, responsive: _responsive, nextButton: _nextButton, prevButton: _prevButton, children, ...rest }: CarouselProps): JSX.Element;

package/dist/types/components/checkbox/Checkbox.client.d.ts

@@ -0,0 +1,4 @@
+import type { CheckboxProps } from "./Checkbox.model";
+declare function CheckboxClient<T extends string = string>(props: CheckboxProps<T>): import("react").JSX.Element;
+declare const _default: typeof CheckboxClient;
+export default _default;

package/dist/types/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,18 @@
+export declare const Checkbox: import("react").ComponentType<Omit<import("react").HTMLAttributes<HTMLInputElement>, "title" | "onChange"> & {
+    name: string;
+    value: string;
+    title: import("react").ReactNode;
+    description?: import("react").ReactNode | null;
+    icon?: Omit<import("../icon").IconProps, "label"> | null;
+    iconLabel?: string | null;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    required?: boolean;
+    showRequiredMark?: boolean;
+    disabled?: boolean;
+    variant?: import("./Checkbox.model").CheckboxVariant;
+    onChange?: (event: import("react").ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    className?: string;
+} & {
+    priority?: boolean;
+}>;

package/dist/types/components/checkbox/Checkbox.lazy.d.ts

@@ -0,0 +1,19 @@
+declare const _default: import("react").ComponentType<Omit<import("react").HTMLAttributes<HTMLInputElement>, "title" | "onChange"> & {
+    name: string;
+    value: string;
+    title: import("react").ReactNode;
+    description?: import("react").ReactNode | null;
+    icon?: Omit<import("../icon").IconProps, "label"> | null;
+    iconLabel?: string | null;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    required?: boolean;
+    showRequiredMark?: boolean;
+    disabled?: boolean;
+    variant?: import("./Checkbox.model").CheckboxVariant;
+    onChange?: (event: import("react").ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    className?: string;
+} & {
+    priority?: boolean;
+}>;
+export default _default;

package/dist/types/components/checkbox/Checkbox.model.d.ts

@@ -0,0 +1,23 @@
+import type { IconProps } from "@/components/icon";
+import type { ChangeEvent, HTMLAttributes, ReactNode } from "react";
+export type CheckboxVariant = "plain" | "card";
+export type CheckboxProps<T extends string = string> = Omit<HTMLAttributes<HTMLInputElement>, "onChange" | "title"> & {
+    name: string;
+    value: T;
+    title: ReactNode;
+    description?: ReactNode | null;
+    icon?: Omit<IconProps, "label"> | null;
+    iconLabel?: string | null;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    required?: boolean;
+    showRequiredMark?: boolean;
+    disabled?: boolean;
+    variant?: CheckboxVariant;
+    onChange?: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    className?: string;
+};
+export type CheckboxViewProps<T extends string = string> = CheckboxProps<T> & {
+    isChecked: boolean;
+    onChangeInternal?: (event: ChangeEvent<HTMLInputElement>) => void;
+};

package/dist/types/components/checkbox/Checkbox.server.d.ts

@@ -0,0 +1,3 @@
+import type { CheckboxProps } from "./Checkbox.model";
+import type { JSX } from "react";
+export default function CheckboxServer<T extends string = string>(props: CheckboxProps<T>): JSX.Element;

package/dist/types/components/checkbox/Checkbox.view.d.ts

@@ -0,0 +1,3 @@
+import type { CheckboxViewProps } from "./Checkbox.model";
+import type { JSX } from "react";
+export declare function CheckboxView<T extends string = string>({ className, name, value, title, description, icon, iconLabel, required, showRequiredMark, disabled, variant, isChecked, onChangeInternal, }: CheckboxViewProps<T>): JSX.Element;

package/dist/types/components/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Checkbox";
+export type { CheckboxProps, CheckboxVariant } from "./Checkbox.model";

package/dist/types/components/checkbox-group/CheckboxGroup.client.d.ts

@@ -0,0 +1,4 @@
+import type { CheckboxGroupProps } from "./CheckboxGroup.model";
+declare function CheckboxGroupClient<T extends string>(props: CheckboxGroupProps<T>): import("react").JSX.Element;
+declare const _default: typeof CheckboxGroupClient;
+export default _default;

package/dist/types/components/checkbox-group/CheckboxGroup.d.ts

@@ -0,0 +1,4 @@
+import type { CheckboxGroupProps } from "./CheckboxGroup.model";
+export declare const CheckboxGroup: import("react").ComponentType<CheckboxGroupProps<string> & {
+    priority?: boolean;
+}>;

package/dist/types/components/checkbox-group/CheckboxGroup.lazy.d.ts

@@ -0,0 +1,5 @@
+import type { CheckboxGroupProps } from "./CheckboxGroup.model";
+declare const _default: import("react").ComponentType<CheckboxGroupProps<string> & {
+    priority?: boolean;
+}>;
+export default _default;

package/dist/types/components/checkbox-group/CheckboxGroup.model.d.ts

@@ -0,0 +1,38 @@
+import type { IconProps } from "@/components/icon";
+import type { HTMLAttributes } from "react";
+export type CheckboxGroupOption<T extends string> = {
+    value: T;
+    title: string;
+    description?: string | null;
+    icon?: Omit<IconProps, "label"> | null;
+    iconLabel?: string | null;
+    required?: boolean;
+    disabled?: boolean;
+};
+export type CheckboxGroupVariant = "plain" | "card";
+export type CheckboxGroupLayout = "stack" | "grid";
+export type CheckboxGroupTranslations = {
+    ariaLabel?: string;
+};
+export type CheckboxGroupProps<T extends string> = {
+    ariaLabel?: string;
+    legend?: string | null;
+    hideLegend?: boolean;
+    legendProps?: HTMLAttributes<HTMLLegendElement>;
+    name: string;
+    disabled?: boolean;
+    required?: boolean;
+    values?: T[];
+    defaultValues?: T[];
+    options: CheckboxGroupOption<T>[];
+    onChange?: (next: T[]) => void;
+    hiddenInputName?: string;
+    layout?: CheckboxGroupLayout;
+    variant?: CheckboxGroupVariant;
+    translations?: CheckboxGroupTranslations;
+};
+export type CheckboxGroupViewProps<T extends string> = CheckboxGroupProps<T> & {
+    selectedValues: T[];
+    isChecked: (value: T) => boolean;
+    onToggle?: (value: T) => void;
+};

package/dist/types/components/checkbox-group/CheckboxGroup.server.d.ts

@@ -0,0 +1,3 @@
+import type { CheckboxGroupProps } from "./CheckboxGroup.model";
+import type { JSX } from "react";
+export default function CheckboxGroupServer<T extends string>(props: CheckboxGroupProps<T>): JSX.Element | null;

package/dist/types/components/checkbox-group/CheckboxGroup.view.d.ts

@@ -0,0 +1,3 @@
+import type { CheckboxGroupViewProps } from "./CheckboxGroup.model";
+import type { JSX } from "react";
+export declare function CheckboxGroupView<T extends string>({ ariaLabel, legend, hideLegend, legendProps, name, disabled, required, options, selectedValues, hiddenInputName, layout, variant, translations: t, isChecked, onToggle, }: CheckboxGroupViewProps<T>): JSX.Element | null;

package/dist/types/components/checkbox-group/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./CheckboxGroup";
+export type { CheckboxGroupProps, CheckboxGroupOption, CheckboxGroupVariant, CheckboxGroupLayout, CheckboxGroupTranslations, } from "./CheckboxGroup.model";

package/dist/types/components/dialog/Dialog.model.d.ts

@@ -30,6 +30,7 @@ export type DialogViewProps = HTMLAttributes<HTMLDivElement> & {
     contentRef?: Ref<HTMLDivElement>;
     containerChildren?: ReactNode;
     classNameHeader?: string;
+    actionsClassName?: string;
     scroll?: "paper" | "body";
     fullScreen?: boolean;
     onClose?: () => void;

package/dist/types/components/dialog/Dialog.view.d.ts

@@ -1,3 +1,3 @@
 import type { DialogViewProps } from "./Dialog.model";
 import type { JSX } from "react";
-export declare function DialogView({ open, title, containerRef, hideTitle, renderHeader, hideCloseButton, translations, actions, contentProps, contentRef, containerChildren, className, classNameHeader, height, scroll, fullScreen, titleProps, children, onClose, onCloseKeyDown, wrapperProps, closeOnBackdropClick, closeButtonProps, closeButtonRef, ...rest }: DialogViewProps): JSX.Element;
+export declare function DialogView({ open, title, containerRef, hideTitle, renderHeader, hideCloseButton, translations, actions, contentProps, contentRef, containerChildren, className, classNameHeader, actionsClassName, height, scroll, fullScreen, titleProps, children, onClose, onCloseKeyDown, wrapperProps, closeOnBackdropClick, closeButtonProps, closeButtonRef, ...rest }: DialogViewProps): JSX.Element;

package/dist/types/components/dynamic-list/DynamicList.model.d.ts

@@ -14,7 +14,7 @@ export type DynamicListFieldSelect = Omit<SelectProps, "id"> & {
 export type DynamicListField = DynamicListFieldInput | DynamicListFieldSelect;
 export type DynamicListDefault = {
     id?: string;
-    name: string;
+    name?: string;
     className?: string;
     classNameList?: string;
     buttonAddProps?: ButtonProps;

package/dist/types/components/headline/Headline.model.d.ts

@@ -3,7 +3,7 @@ import type { Schema } from "@/types/schema";
 import type { Variants } from "@/types/variants";
 import type { HTMLAttributes } from "react";
 export type HeadlineTypeProps = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-export type HeadlineSizeProps = "xxl" | "xl" | "lg" | "md" | "sm" | "xs";
+export type HeadlineSizeProps = "xxl" | "xl" | "lg" | "md" | "sm" | "xs" | number;
 export type HeadlineVariant = Variants;
 export type HeadlineProps = HTMLAttributes<HTMLHeadElement> & {
     animated?: boolean;

package/dist/types/components/input/Input.view.d.ts

@@ -1,3 +1,3 @@
 import type { InputProps } from "./Input.model";
 import type { JSX } from "react";
-export declare function InputView({ inputRef, name, label, disabled, placeholder, isFocused, labelProps, value, helperText, errorText, required, fullWidth, multiline, maxLength, className, fieldClassName, inputContainerClassName, inputClassName, hideCounter, rows, minRows, maxRows, type, renderNode, ...rest }: InputProps): JSX.Element;
+export declare function InputView({ inputRef, name, label, disabled, placeholder, isFocused, labelProps, value, helperText, errorText, required, fullWidth, multiline, maxLength, className, fieldClassName, inputContainerClassName, inputClassName, hideCounter, rows, hideLegend: _hideLegend, minRows, maxRows, type, renderNode, ...rest }: InputProps): JSX.Element;

package/dist/types/index.d.ts

@@ -8,6 +8,8 @@ export { Button } from "./components/button";
 export { Calendly } from "./components/calendly";
 export { Card } from "./components/card";
 export { Carousel } from "./components/carousel";
+export { Checkbox } from "./components/checkbox";
+export { CheckboxGroup } from "./components/checkbox-group";
 export { Chip } from "./components/chip";
 export { DatePicker } from "./components/datePicker";
 export { Dialog } from "./components/dialog";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prokodo/ui",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "type": "module",
   "description": "UI components for production-grade Next.js + Headless CMS (Strapi, Contentful, Headless WordPress) websites by prokodo – built for Core Web Vitals & SEO.",
   "sideEffects": [
@@ -79,6 +79,16 @@
       "types": "./dist/types/components/carousel/index.d.ts"
     },
     "./carousel.css": "./dist/components/carousel/Carousel.css",
+    "./checkbox": {
+      "import": "./dist/components/checkbox/index.js",
+      "types": "./dist/types/components/checkbox/index.d.ts"
+    },
+    "./checkbox.css": "./dist/components/checkbox/Checkbox.css",
+    "./checkbox-group": {
+      "import": "./dist/components/checkbox-group/index.js",
+      "types": "./dist/types/components/checkbox-group/index.d.ts"
+    },
+    "./checkbox-group.css": "./dist/components/checkbox-group/CheckboxGroup.css",
     "./chip": {
       "import": "./dist/components/chip/index.js",
       "types": "./dist/types/components/chip/index.d.ts"
@@ -285,9 +295,14 @@
     "build": "vite build && pnpm build:types && node tools/duplicate-css-modules.mjs && node tools/update-exports.mjs",
     "build:types": "tsc --project tsconfig.build.json",
     "typecheck": "tsc --project tsconfig.typecheck.json",
-    "test": "NODE_ENV=test jest --coverage --verbose && pnpm format && pnpm lint && pnpm typecheck",
-    "test:watch": "NODE_ENV=test jest --watch",
-    "test:ci": "NODE_ENV=test jest --runInBand --ci",
+    "typecheck:cypress": "tsc --project tsconfig.cypress.json",
+    "test": "pnpm format && pnpm lint && pnpm typecheck && pnpm test:unit && pnpm test:e2e:ci",
+    "test:ci": "pnpm format && pnpm lint && pnpm typecheck && pnpm test:unit:ci && pnpm test:e2e:ci",
+    "test:unit": "NODE_ENV=test jest --coverage --verbose",
+    "test:unit:watch": "NODE_ENV=test jest --watch",
+    "test:unit:ci": "NODE_ENV=test jest --runInBand --ci --coverage",
+    "test:e2e": "cypress open --component",
+    "test:e2e:ci": "cypress run --component --headless",
     "fix": "pnpm format:fix && pnpm lint:fix",
     "lint": "eslint 'src/**/*.{ts,tsx}' --cache --cache-location .eslintcache",
     "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix --cache --cache-location .eslintcache",
@@ -302,7 +317,7 @@
   },
   "dependencies": {
     "@googlemaps/js-api-loader": "^2.0.2",
-    "@lottiefiles/dotlottie-react": "^0.17.8",
+    "@lottiefiles/dotlottie-react": "^0.18.2",
     "dayjs": "^1.11.19",
     "highlight.js": "^11.11.1",
     "markdown-it": "^14.1.0",
@@ -321,12 +336,14 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@changesets/cli": "^2.29.4",
+    "@chromatic-com/cypress": "^0.11.8",
     "@chromatic-com/storybook": "^3",
     "@csstools/css-color-parser": "^3.1.0",
     "@eslint/compat": "^1.2.0",
     "@hugeicons/core-free-icons": "^2.0.0",
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
+    "@storybook/addon-a11y": "8.2.9",
     "@storybook/addon-essentials": "8.2.9",
     "@storybook/addon-interactions": "8.2.9",
     "@storybook/addon-links": "8.2.9",
@@ -338,12 +355,14 @@
     "@storybook/test": "8.2.9",
     "@storybook/theming": "^8.6.14",
     "@svgr/webpack": "^8.1.0",
+    "@testing-library/cypress": "^10.1.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/google.maps": "^3.55.11",
     "@types/hast": "^3.0.4",
     "@types/jest": "^29.5.13",
+    "@types/jest-axe": "^3.5.9",
     "@types/node": "^22.15.21",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
@@ -352,7 +371,11 @@
     "@vitejs/plugin-react": "^4.5.0",
     "acorn": "^8.14.1",
     "acorn-walk": "^8.3.4",
+    "axe-core": "^4.11.1",
     "babel-jest": "^29.7.0",
+    "chromatic": "^15.2.0",
+    "cypress": "^15.10.0",
+    "cypress-axe": "^1.7.0",
     "esbuild": "^0.25.4",
     "eslint": "^9.10.0",
     "eslint-config-prettier": "^9.1.0",
@@ -373,6 +396,7 @@
     "husky": "^9.1.6",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
+    "jest-axe": "^10.0.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-css-modules": "^2.1.0",
     "jest-environment-jsdom": "^29.7.0",