chop-logic-components 4.0.3 → 4.1.1

package/dist/index.es.js

@@ -12,44 +12,45 @@ import u from "./components/atoms/editable-text/EditableText2.js";
 import d from "./components/atoms/error-message/ErrorMessage2.js";
 import f from "./components/atoms/header/Header2.js";
 import p from "./components/atoms/icon/Icon2.js";
-import { withFigureCaption as m } from "./components/hocs/with-figure-caption/with-figure-caption.js";
-import h from "./components/atoms/image/Image2.js";
-import g from "./components/atoms/input/Input2.js";
-import _ from "./components/atoms/label/Label2.js";
-import v from "./components/atoms/link/Link2.js";
-import y from "./components/atoms/portal/Portal.js";
-import { useAutoClose as b } from "./hooks/use-auto-close/use-auto-close.js";
-import { useClickOutside as x } from "./hooks/use-click-outside/use-click-outside.js";
-import { useContainerDimensions as S } from "./hooks/use-container-dimensions/use-container-dimensions.js";
-import { useDebounce as C } from "./hooks/use-debounce/use-debounce.js";
-import { useElementIds as w } from "./hooks/use-element-ids/use-element-ids.js";
-import { useIsHovered as T } from "./hooks/use-is-hovered/use-is-hovered.js";
-import { useIsMounted as E } from "./hooks/use-is-mounted/use-is-mounted.js";
-import { useIsOverflow as D } from "./hooks/use-is-overflow/use-is-overflow.js";
-import { useKeyPress as O } from "./hooks/use-key-press/use-key-press.js";
-import { useModalFocusTrap as k } from "./hooks/use-modal-focus-trap/use-modal-focus-trap.js";
-import { useRemainingTimer as A } from "./hooks/use-remaining-timer/use-remaining-timer.js";
-import { FormContext as j } from "./components/contexts/form/FormContext.js";
-import { CL_DARK_THEME_CLASS as M, CL_LIGHT_THEME_CLASS as N, ThemeContext as P } from "./components/contexts/theme/ThemeContext.js";
-import { ThemeProvider as F } from "./components/contexts/theme/ThemeProvider.js";
-import { useResetFormInput as I } from "./hooks/use-reset-form-input/use-reset-form-input.js";
-import { useTheme as L } from "./hooks/use-theme/use-theme.js";
-import { useTooltipPosition as R } from "./hooks/use-tooltip-position/use-tooltip-position.js";
-import { useWindowDimensions as z } from "./hooks/use-window-dimensions/use-window-dimensions.js";
-import B from "./components/atoms/tooltip/Tooltip2.js";
-import V from "./components/molecules/accordion/Accordion2.js";
-import H from "./components/molecules/alert/Alert2.js";
-import U from "./components/molecules/breadcrumbs/Breadcrumbs2.js";
-import W from "./components/molecules/checkbox/Checkbox2.js";
-import G from "./components/molecules/multi-select/MultiSelect.js";
-import K from "./components/molecules/numeric-input/NumericInput2.js";
-import q from "./components/molecules/search/Search2.js";
-import J from "./components/molecules/select/Select2.js";
-import Y from "./components/molecules/switch/Switch2.js";
-import X from "./components/molecules/text-input/TextInput2.js";
-import Z from "./components/organisms/dialog/Dialog2.js";
-import Q from "./components/organisms/form/Form2.js";
-import $ from "./components/organisms/grid/Grid2.js";
-import ee from "./components/organisms/menu/Menu2.js";
-import te from "./components/organisms/tabs/Tabs2.js";
-export { V as Accordion, H as Alert, t as AlertMode, U as Breadcrumbs, l as Button, n as ButtonView, M as CL_DARK_THEME_CLASS, N as CL_LIGHT_THEME_CLASS, W as Checkbox, Z as Dialog, u as EditableText, r as ElementSize, d as ErrorMessage, Q as Form, j as FormContext, $ as Grid, f as Header, p as Icon, i as IconName, h as Image, g as Input, _ as Label, v as Link, a as LoaderView, ee as Menu, G as MultiSelect, K as NumericInput, o as OrientationMode, y as Portal, q as Search, J as Select, s as SemanticColor, Y as Switch, te as Tabs, X as TextInput, P as ThemeContext, F as ThemeProvider, B as Tooltip, c as TooltipContainer, b as useAutoClose, x as useClickOutside, S as useContainerDimensions, C as useDebounce, w as useElementIds, T as useIsHovered, E as useIsMounted, D as useIsOverflow, O as useKeyPress, k as useModalFocusTrap, A as useRemainingTimer, I as useResetFormInput, L as useTheme, R as useTooltipPosition, z as useWindowDimensions, m as withFigureCaption, e as withTooltip };
+import { withErrorBoundary as m } from "./components/hocs/with-error-boundary/with-error-boundary.js";
+import { withFigureCaption as h } from "./components/hocs/with-figure-caption/with-figure-caption.js";
+import g from "./components/atoms/image/Image2.js";
+import _ from "./components/atoms/input/Input2.js";
+import v from "./components/atoms/label/Label2.js";
+import y from "./components/atoms/link/Link2.js";
+import b from "./components/atoms/portal/Portal.js";
+import { useAutoClose as x } from "./hooks/use-auto-close/use-auto-close.js";
+import { useClickOutside as S } from "./hooks/use-click-outside/use-click-outside.js";
+import { useContainerDimensions as C } from "./hooks/use-container-dimensions/use-container-dimensions.js";
+import { useDebounce as w } from "./hooks/use-debounce/use-debounce.js";
+import { useElementIds as T } from "./hooks/use-element-ids/use-element-ids.js";
+import { useIsHovered as E } from "./hooks/use-is-hovered/use-is-hovered.js";
+import { useIsMounted as D } from "./hooks/use-is-mounted/use-is-mounted.js";
+import { useIsOverflow as O } from "./hooks/use-is-overflow/use-is-overflow.js";
+import { useKeyPress as k } from "./hooks/use-key-press/use-key-press.js";
+import { useModalFocusTrap as A } from "./hooks/use-modal-focus-trap/use-modal-focus-trap.js";
+import { useRemainingTimer as j } from "./hooks/use-remaining-timer/use-remaining-timer.js";
+import { FormContext as M } from "./components/contexts/form/FormContext.js";
+import { CL_DARK_THEME_CLASS as N, CL_LIGHT_THEME_CLASS as P, ThemeContext as F } from "./components/contexts/theme/ThemeContext.js";
+import { ThemeProvider as I } from "./components/contexts/theme/ThemeProvider.js";
+import { useResetFormInput as L } from "./hooks/use-reset-form-input/use-reset-form-input.js";
+import { useTheme as R } from "./hooks/use-theme/use-theme.js";
+import { useTooltipPosition as z } from "./hooks/use-tooltip-position/use-tooltip-position.js";
+import { useWindowDimensions as B } from "./hooks/use-window-dimensions/use-window-dimensions.js";
+import V from "./components/atoms/tooltip/Tooltip2.js";
+import H from "./components/molecules/accordion/Accordion2.js";
+import U from "./components/molecules/alert/Alert2.js";
+import W from "./components/molecules/breadcrumbs/Breadcrumbs2.js";
+import G from "./components/molecules/checkbox/Checkbox2.js";
+import K from "./components/molecules/multi-select/MultiSelect.js";
+import q from "./components/molecules/numeric-input/NumericInput2.js";
+import J from "./components/molecules/search/Search2.js";
+import Y from "./components/molecules/select/Select2.js";
+import X from "./components/molecules/switch/Switch2.js";
+import Z from "./components/molecules/text-input/TextInput2.js";
+import Q from "./components/organisms/dialog/Dialog2.js";
+import $ from "./components/organisms/form/Form2.js";
+import ee from "./components/organisms/grid/Grid2.js";
+import te from "./components/organisms/menu/Menu2.js";
+import ne from "./components/organisms/tabs/Tabs2.js";
+export { H as Accordion, U as Alert, t as AlertMode, W as Breadcrumbs, l as Button, n as ButtonView, N as CL_DARK_THEME_CLASS, P as CL_LIGHT_THEME_CLASS, G as Checkbox, Q as Dialog, u as EditableText, r as ElementSize, d as ErrorMessage, $ as Form, M as FormContext, ee as Grid, f as Header, p as Icon, i as IconName, g as Image, _ as Input, v as Label, y as Link, a as LoaderView, te as Menu, K as MultiSelect, q as NumericInput, o as OrientationMode, b as Portal, J as Search, Y as Select, s as SemanticColor, X as Switch, ne as Tabs, Z as TextInput, F as ThemeContext, I as ThemeProvider, V as Tooltip, c as TooltipContainer, x as useAutoClose, S as useClickOutside, C as useContainerDimensions, w as useDebounce, T as useElementIds, E as useIsHovered, D as useIsMounted, O as useIsOverflow, k as useKeyPress, A as useModalFocusTrap, j as useRemainingTimer, L as useResetFormInput, R as useTheme, z as useTooltipPosition, B as useWindowDimensions, m as withErrorBoundary, h as withFigureCaption, e as withTooltip };

package/dist/main.d.ts

@@ -0,0 +1,8 @@
+export * from './components/atoms';
+export * from './components/contexts';
+export * from './components/hocs';
+export * from './components/molecules';
+export * from './components/organisms';
+export * from './enums';
+export * from './hooks';
+export * from './types';

package/dist/styles/main.css

@@ -1 +1 @@
-:root{--cl-core-font:Arial, Helvetica, sans-serif;--cl-monospace-font:"Courier New", Courier, monospace;--cl-fancy-font:Georgia, "Times New Roman", Times, serif;--cl-xs-gap:2px;--cl-s-gap:4px;--cl-m-gap:8px;--cl-l-gap:16px;--cl-xl-gap:32px;--cl-xxl-gap:64px;--cl-icon-size:20px;--cl-thumb-size:24px;--cl-border-radius:4px;--cl-z-index-base:1;--cl-z-index-menu:5;--cl-z-index-popup:10;--cl-z-index-modal:20;--cl-typography-h1-mobile:2.25rem;--cl-typography-h1-tablet:2.5rem;--cl-typography-h1-desktop:3rem;--cl-typography-h2-mobile:2rem;--cl-typography-h2-tablet:2.25rem;--cl-typography-h2-desktop:2.5rem;--cl-typography-h3-mobile:1.75rem;--cl-typography-h3-tablet:2rem;--cl-typography-h3-desktop:2.25rem;--cl-typography-h4-mobile:1.5rem;--cl-typography-h4-tablet:1.75rem;--cl-typography-h4-desktop:2rem;--cl-typography-h5-mobile:1.25rem;--cl-typography-h5-tablet:1.5rem;--cl-typography-h5-desktop:1.75rem;--cl-typography-h6-mobile:1rem;--cl-typography-h6-tablet:1.125rem;--cl-typography-h6-desktop:1.25rem;--cl-typography-base-mobile:1rem;--cl-typography-base-tablet:1.125rem;--cl-typography-base-desktop:1.25rem;--cl-typography-small-mobile:.875rem;--cl-typography-small-tablet:1rem;--cl-typography-small-desktop:1.125rem;--cl-breakpoint-sm:640px;--cl-breakpoint-md:768px;--cl-breakpoint-lg:1024px;--cl-breakpoint-xl:1280px;--cl-breakpoint-xxl:1536px;--cl-base-font-color:#000;--cl-base-background-color:#fff;--cl-accent-a0:#8d1c12;--cl-accent-a10:#7d1c11;--cl-accent-a20:#6d1b10;--cl-accent-a30:#5e190f;--cl-surface-a0:#fff;--cl-surface-a10:#f0f0f0;--cl-surface-a20:#e1e1e1;--cl-surface-a30:#d3d3d3;--cl-surface-tonal-a0:#f7e8e4;--cl-surface-tonal-a10:#e9dcd8;--cl-surface-tonal-a20:#dbd0cd;--cl-surface-tonal-a30:#cec4c2;--cl-success-a0:#1b7f5c;--cl-success-a10:#28be8a;--cl-success-a20:#58dbad;--cl-warning-a0:#b8871f;--cl-warning-a10:#dfae44;--cl-warning-a20:#ebca85;--cl-danger-a0:#b13535;--cl-danger-a10:#d06262;--cl-danger-a20:#e29d9d;--cl-info-a0:#1e56a3;--cl-info-a10:#347ada;--cl-info-a20:#74a4e6;--cl-accent-gradient:linear-gradient(135deg, #8d1c12 0%, #7d1c11 50%, #6d1b10 100%);--cl-box-shadow:#0003 2.4px 2.4px 3.2px;--cl-box-shadow-extended:#0003 4.8px 4.8px 6.4px;--cl-text-shadow:2.4px 2.4px 3.2px #00000026;--cl-drop-shadow:drop-shadow(2.4px 2.4px 3.2px #00000026);--cl-accent-border:1px solid #8d1c12;--cl-danger-border:1px solid #d94a4a;--cl-success-border:1px solid #28be8a;--cl-warning-border:1px solid #dfae44;--cl-info-border:1px solid #347ada;--cl-light-border:1px solid #c0b8b6;--cl-outline-border:1px solid #000}.cl-components-dark-theme{--cl-base-background-color:#000;--cl-base-font-color:#fff;--cl-accent-a0:#eb5cbe;--cl-accent-a10:#ef71c5;--cl-accent-a20:#f385cc;--cl-accent-a30:#f697d4;--cl-surface-a0:#121212;--cl-surface-a10:#282828;--cl-surface-a20:#3f3f3f;--cl-surface-a30:#575757;--cl-surface-tonal-a0:#251a21;--cl-surface-tonal-a10:#3a2f36;--cl-surface-tonal-a20:#4f464c;--cl-surface-tonal-a30:#665d63;--cl-success-a0:#9ae8ce;--cl-success-a10:#47d5a6;--cl-success-a20:#22946e;--cl-warning-a0:#a87a2a;--cl-warning-a10:#d7ac61;--cl-warning-a20:#ecd7b2;--cl-danger-a0:#eb9e9e;--cl-danger-a10:#d94a4a;--cl-danger-a20:#9c2121;--cl-info-a0:#92b2e5;--cl-info-a10:#4077d1;--cl-info-a20:#21498a;--cl-accent-gradient:linear-gradient(135deg, #eb5cbe 0%, #ef71c5 50%, #f385cc 100%);--cl-box-shadow:#ffffff4d 2.4px 2.4px 3.2px;--cl-box-shadow-extended:#ffffff4d 4px 4px 5px;--cl-text-shadow:2.4px 2.4px 3.2px #ffffff80;--cl-drop-shadow:drop-shadow(2.4px 2.4px 3.2px #ffffff4d);--cl-accent-border:1px solid #eb5cbe;--cl-danger-border:1px solid #d94a4a;--cl-success-border:1px solid #47d5a6;--cl-warning-border:1px solid #d7ac61;--cl-info-border:1px solid #4077d1;--cl-light-border:1px solid #665d63;--cl-outline-border:1px solid #fff}@keyframes cl-fade-in{0%{opacity:0}to{opacity:1}}@keyframes cl-fade-out{0%{opacity:1}to{opacity:0}}.cl-fade-in{animation:.4s cl-fade-in}.cl-fade-out{animation:.4s cl-fade-out}
+:root{--cl-core-font:Arial, Helvetica, sans-serif;--cl-monospace-font:"Courier New", Courier, monospace;--cl-fancy-font:Georgia, "Times New Roman", Times, serif;--cl-xs-gap:2px;--cl-s-gap:4px;--cl-m-gap:8px;--cl-l-gap:16px;--cl-xl-gap:32px;--cl-xxl-gap:64px;--cl-icon-size:20px;--cl-thumb-size:24px;--cl-border-radius:4px;--cl-z-index-base:1;--cl-z-index-menu:5;--cl-z-index-popup:10;--cl-z-index-modal:20;--cl-typography-h1-mobile:2.25rem;--cl-typography-h1-tablet:2.5rem;--cl-typography-h1-desktop:3rem;--cl-typography-h2-mobile:2rem;--cl-typography-h2-tablet:2.25rem;--cl-typography-h2-desktop:2.5rem;--cl-typography-h3-mobile:1.75rem;--cl-typography-h3-tablet:2rem;--cl-typography-h3-desktop:2.25rem;--cl-typography-h4-mobile:1.5rem;--cl-typography-h4-tablet:1.75rem;--cl-typography-h4-desktop:2rem;--cl-typography-h5-mobile:1.25rem;--cl-typography-h5-tablet:1.5rem;--cl-typography-h5-desktop:1.75rem;--cl-typography-h6-mobile:1rem;--cl-typography-h6-tablet:1.125rem;--cl-typography-h6-desktop:1.25rem;--cl-typography-base-mobile:1rem;--cl-typography-base-tablet:1.125rem;--cl-typography-base-desktop:1.25rem;--cl-typography-small-mobile:.875rem;--cl-typography-small-tablet:1rem;--cl-typography-small-desktop:1.125rem;--cl-breakpoint-sm:640px;--cl-breakpoint-md:768px;--cl-breakpoint-lg:1024px;--cl-breakpoint-xl:1280px;--cl-breakpoint-xxl:1536px;--cl-base-font-color:#000;--cl-base-background-color:#fff;--cl-accent-a0:#8d1c12;--cl-accent-a10:#7d1c11;--cl-accent-a20:#6d1b10;--cl-accent-a30:#5e190f;--cl-surface-a0:#fff;--cl-surface-a10:#f0f0f0;--cl-surface-a20:#e1e1e1;--cl-surface-a30:#d3d3d3;--cl-surface-tonal-a0:#f7e8e4;--cl-surface-tonal-a10:#e9dcd8;--cl-surface-tonal-a20:#dbd0cd;--cl-surface-tonal-a30:#cec4c2;--cl-success-a0:#1b7f5c;--cl-success-a10:#28be8a;--cl-success-a20:#58dbad;--cl-warning-a0:#b8871f;--cl-warning-a10:#dfae44;--cl-warning-a20:#ebca85;--cl-danger-a0:#b13535;--cl-danger-a10:#d06262;--cl-danger-a20:#e29d9d;--cl-info-a0:#1e56a3;--cl-info-a10:#347ada;--cl-info-a20:#74a4e6;--cl-accent-gradient:linear-gradient(135deg, #8d1c12 0%, #7d1c11 50%, #6d1b10 100%);--cl-box-shadow:#0003 2.4px 2.4px 3.2px;--cl-box-shadow-extended:#0003 4.8px 4.8px 6.4px;--cl-text-shadow:2.4px 2.4px 3.2px #00000026;--cl-drop-shadow:drop-shadow(2.4px 2.4px 3.2px #00000026);--cl-shadow-background:#0000004d;--cl-accent-border:1px solid #8d1c12;--cl-danger-border:1px solid #d06262;--cl-success-border:1px solid #28be8a;--cl-warning-border:1px solid #dfae44;--cl-info-border:1px solid #347ada;--cl-light-border:1px solid #c0b8b6;--cl-outline-border:1px solid #000}.cl-components-dark-theme{--cl-base-background-color:#000;--cl-base-font-color:#fff;--cl-accent-a0:#eb5cbe;--cl-accent-a10:#ef71c5;--cl-accent-a20:#f385cc;--cl-accent-a30:#f697d4;--cl-surface-a0:#121212;--cl-surface-a10:#282828;--cl-surface-a20:#3f3f3f;--cl-surface-a30:#575757;--cl-surface-tonal-a0:#251a21;--cl-surface-tonal-a10:#3a2f36;--cl-surface-tonal-a20:#4f464c;--cl-surface-tonal-a30:#665d63;--cl-success-a0:#9ae8ce;--cl-success-a10:#47d5a6;--cl-success-a20:#22946e;--cl-warning-a0:#a87a2a;--cl-warning-a10:#d7ac61;--cl-warning-a20:#ecd7b2;--cl-danger-a0:#eb9e9e;--cl-danger-a10:#d94a4a;--cl-danger-a20:#9c2121;--cl-info-a0:#92b2e5;--cl-info-a10:#4077d1;--cl-info-a20:#21498a;--cl-accent-gradient:linear-gradient(135deg, #eb5cbe 0%, #ef71c5 50%, #f385cc 100%);--cl-box-shadow:#ffffff4d 2.4px 2.4px 3.2px;--cl-box-shadow-extended:#ffffff4d 4px 4px 5px;--cl-text-shadow:2.4px 2.4px 3.2px #ffffff80;--cl-drop-shadow:drop-shadow(2.4px 2.4px 3.2px #ffffff4d);--cl-shadow-background:#ffffff4d;--cl-accent-border:1px solid #eb5cbe;--cl-danger-border:1px solid #d94a4a;--cl-success-border:1px solid #47d5a6;--cl-warning-border:1px solid #d7ac61;--cl-info-border:1px solid #4077d1;--cl-light-border:1px solid #665d63;--cl-outline-border:1px solid #fff}@keyframes cl-fade-in{0%{opacity:0}to{opacity:1}}@keyframes cl-fade-out{0%{opacity:1}to{opacity:0}}.cl-fade-in{animation:.4s cl-fade-in}.cl-fade-out{animation:.4s cl-fade-out}

package/dist/types/_common.d.ts

@@ -0,0 +1,35 @@
+import { CSSProperties } from 'react';
+export interface ChopLogicComponentProps {
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    tabIndex?: number;
+    title?: string;
+}
+export interface ChopLogicInputProps extends ChopLogicComponentProps {
+    label: string;
+    name: string;
+    disabled?: boolean;
+    required?: boolean;
+    stateless?: boolean;
+    value?: string | number | readonly string[];
+}
+export type SelectValue = {
+    id: string;
+    label: string;
+} & {
+    [key in string]: unknown;
+};
+export type MultiSelectValue = SelectValue & {
+    selected: boolean;
+};
+export type NumericInputValidator = (input?: number) => boolean;
+export type TextInputValidator = (input: string) => boolean;
+export type ChopLogicRegExpWithFlags = {
+    regexp: string;
+    flags?: string;
+};
+export type Dimensions = {
+    width: number;
+    height: number;
+};

package/dist/types/accordion.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { ChopLogicComponentProps } from './_common';
+export type AccordionItemProps = PropsWithChildren & {
+    summary: string;
+};
+export interface AccordionProps extends ChopLogicComponentProps {
+    items: AccordionItemProps[];
+}

package/dist/types/alert.d.ts

@@ -0,0 +1,11 @@
+import { AlertMode, IconName } from '../enums';
+import { ChopLogicComponentProps } from './_common';
+export interface AlertProps extends ChopLogicComponentProps {
+    isOpened: boolean;
+    onClose: () => void;
+    message: string;
+    mode?: AlertMode;
+    icon?: IconName;
+    autoClose?: boolean;
+    autoCloseDelay?: number;
+}

package/dist/types/breadcrumbs.d.ts

@@ -0,0 +1,10 @@
+import { IconName } from '../enums';
+import { ChopLogicComponentProps } from './_common';
+export interface Breadcrumb {
+    label: string;
+    icon?: IconName;
+    link?: string;
+}
+export interface BreadcrumbsProps extends ChopLogicComponentProps {
+    items: Breadcrumb[];
+}

package/dist/types/button.d.ts

@@ -0,0 +1,11 @@
+import { ButtonView, ElementSize, IconName } from '../enums';
+import { ButtonHTMLAttributes } from 'react';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    view?: ButtonView;
+    icon?: IconName;
+    text?: string;
+    extended?: boolean;
+    tooltip?: string;
+    label?: string;
+    iconSize?: ElementSize;
+}

package/dist/types/checkbox.d.ts

@@ -0,0 +1,9 @@
+import { ChangeEventHandler } from 'react';
+import { ChopLogicInputProps } from './_common';
+export interface CheckboxProps extends ChopLogicInputProps {
+    noLabel?: boolean;
+    iconPosition?: 'left' | 'right';
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    defaultChecked?: boolean;
+    checked?: boolean;
+}

package/dist/types/dialog.d.ts

@@ -0,0 +1,9 @@
+import { IconName } from '../enums';
+import { PropsWithChildren } from 'react';
+import { ChopLogicComponentProps } from './_common';
+export interface DialogProps extends ChopLogicComponentProps, PropsWithChildren {
+    isOpened: boolean;
+    onClose: () => void;
+    title: string;
+    icon?: IconName;
+}

package/dist/types/editable-text.d.ts

@@ -0,0 +1,12 @@
+import { MouseEvent } from 'react';
+import { ChopLogicComponentProps } from './_common';
+export interface EditableTextProps extends ChopLogicComponentProps {
+    value: string;
+    autoSelectTextOnEditMode?: boolean;
+    isEditMode?: boolean;
+    multiline?: boolean;
+    onChange?: (value: string) => void;
+    onClick?: (event: MouseEvent) => void;
+    placeholder?: string;
+    readOnly?: boolean;
+}

package/dist/types/form.d.ts

@@ -0,0 +1,18 @@
+import { FormEventHandler, PropsWithChildren } from 'react';
+import { ChopLogicComponentProps } from './_common';
+export type FormValues = {
+    [key: string]: unknown;
+};
+export type FormValidationState = [string, boolean][];
+export interface FormInputParams {
+    name: string;
+    value: unknown;
+    valid?: boolean;
+}
+export interface FormProps extends PropsWithChildren, ChopLogicComponentProps {
+    initialValues?: FormValues;
+    hasReset?: boolean;
+    onClickSubmit?: (data: FormValues) => void;
+    onReset?: FormEventHandler<HTMLFormElement>;
+    onSubmit?: FormEventHandler<HTMLFormElement>;
+}

package/dist/types/grid.d.ts

@@ -0,0 +1,27 @@
+import { ReactElement } from 'react';
+import { ChopLogicComponentProps } from './_common';
+export interface GridProps extends ChopLogicComponentProps {
+    columns: GridColumn[];
+    data: GridItem[];
+    caption?: string;
+    selectable?: boolean;
+    renderDataItem?: RenderDataItemCallback;
+    onSelect?: (ids: string[]) => void;
+}
+export type GridColumn = {
+    field: string;
+    title?: string;
+    component?: ReactElement;
+    highlighted?: boolean;
+    className?: string;
+};
+export type GridItem = {
+    id: string;
+    disabled?: boolean;
+    [key: string]: unknown;
+};
+export type RenderDataItemCallback = (item: GridItem, field: string) => ReactElement;
+export type GridRowValue = {
+    field: string;
+    value: string | ReactElement;
+};

package/dist/types/header.d.ts

@@ -0,0 +1,9 @@
+import { IconName } from '../enums';
+import { HTMLAttributes, ReactNode } from 'react';
+type HeaderLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export interface HeaderProps extends HTMLAttributes<HTMLHeadingElement> {
+    children: ReactNode;
+    as?: HeaderLevel;
+    icon?: IconName;
+}
+export {};

package/dist/types/image.d.ts

@@ -0,0 +1,21 @@
+export interface ImageSource {
+    src: string;
+    descriptor?: string;
+    media?: string;
+    type?: string;
+}
+export interface ImageProps {
+    src: string;
+    alt: string;
+    sources?: ImageSource[];
+    sizes?: string;
+    caption?: string;
+    width?: number | string;
+    height?: number | string;
+    aspectRatio?: string;
+    loading?: 'lazy' | 'eager';
+    decoding?: 'sync' | 'async' | 'auto';
+    className?: string;
+    decorative?: boolean;
+    onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,23 @@
+export type { ChopLogicComponentProps, ChopLogicInputProps, ChopLogicRegExpWithFlags, Dimensions, MultiSelectValue, NumericInputValidator, SelectValue, TextInputValidator, } from './_common';
+export type { AccordionItemProps, AccordionProps } from './accordion';
+export type { AlertProps } from './alert';
+export type { Breadcrumb, BreadcrumbsProps } from './breadcrumbs';
+export type { ButtonProps } from './button';
+export type { CheckboxProps } from './checkbox';
+export type { DialogProps } from './dialog';
+export type { EditableTextProps } from './editable-text';
+export type { FormInputParams, FormProps, FormValidationState, FormValues } from './form';
+export type { GridColumn, GridItem, GridProps, GridRowValue, RenderDataItemCallback } from './grid';
+export type { HeaderProps } from './header';
+export type { ImageProps, ImageSource } from './image';
+export type { LinkProps } from './link';
+export type { LoaderProps } from './loader';
+export type { MenuItem, MenuProps } from './menu';
+export type { MultiSelectProps } from './multi-select';
+export type { NumericInputProps } from './numeric';
+export type { SearchProps } from './search';
+export type { SelectProps } from './select';
+export type { SwitchProps } from './switch';
+export type { ChopLogicTabItem, TabsProps } from './tabs';
+export type { TextInputProps } from './text';
+export type { TooltipProps } from './tooltip';

package/dist/types/link.d.ts

@@ -0,0 +1,9 @@
+import { IconName } from '../enums';
+import { AnchorHTMLAttributes, PropsWithChildren } from 'react';
+export interface LinkProps extends PropsWithChildren, AnchorHTMLAttributes<HTMLAnchorElement> {
+    href: string;
+    icon?: IconName;
+    iconPosition?: 'left' | 'right';
+    external?: boolean;
+    disabled?: boolean;
+}

package/dist/types/loader.d.ts

@@ -0,0 +1,6 @@
+import { LoaderView } from '../enums';
+import { HTMLAttributes } from 'react';
+import { ChopLogicComponentProps } from './_common';
+export interface LoaderProps extends ChopLogicComponentProps, HTMLAttributes<HTMLSpanElement> {
+    view?: LoaderView;
+}

package/dist/types/menu.d.ts

@@ -0,0 +1,17 @@
+import { IconName, OrientationMode } from '../enums';
+import { ChopLogicComponentProps } from './_common';
+export interface MenuProps extends ChopLogicComponentProps {
+    items: MenuItem[];
+    mode?: OrientationMode;
+    openedOn?: 'hover' | 'click';
+}
+export interface MenuItem {
+    label: string;
+    id: string;
+    nestedItems?: MenuItem[];
+    icon?: IconName;
+    link?: string;
+    onClick?: () => void;
+    onHover?: () => void;
+    onFocus?: () => void;
+}

package/dist/types/multi-select.d.ts

@@ -0,0 +1,7 @@
+import { ChopLogicInputProps, SelectValue } from './_common';
+export interface MultiSelectProps extends ChopLogicInputProps {
+    options: SelectValue[];
+    onChange?: (values?: SelectValue[]) => void;
+    defaultValue?: string | number | readonly string[];
+    placeholder?: string;
+}

package/dist/types/numeric.d.ts

@@ -0,0 +1,19 @@
+import { ChangeEventHandler, FocusEventHandler } from 'react';
+import { ChopLogicInputProps, NumericInputValidator } from './_common';
+export interface NumericInputProps extends ChopLogicInputProps {
+    errorMessage?: string;
+    validator?: NumericInputValidator;
+    hasSpinButtons?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    readOnly?: boolean;
+    defaultValue?: number;
+    stateless?: boolean;
+    value?: number;
+    onIncrement?: () => void;
+    onDecrement?: () => void;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+}

package/dist/types/search.d.ts

@@ -0,0 +1,16 @@
+import { FocusEventHandler, HTMLInputAutoCompleteAttribute } from 'react';
+import { ChopLogicInputProps } from './_common';
+export interface SearchProps extends ChopLogicInputProps {
+    maxLength?: number;
+    minLength?: number;
+    placeholder?: string;
+    autoComplete?: HTMLInputAutoCompleteAttribute;
+    clearable?: boolean;
+    spellCheck?: boolean;
+    searchMode?: 'automatic' | 'manual';
+    onSearch?: (searchTerm: string) => void;
+    onClear?: () => void;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    debounceDelay?: number;
+}

package/dist/types/select.d.ts

@@ -0,0 +1,7 @@
+import { ChopLogicInputProps, SelectValue } from './_common';
+export interface SelectProps extends ChopLogicInputProps {
+    options: SelectValue[];
+    onChange?: (value?: SelectValue) => void;
+    placeholder?: string;
+    defaultValue?: string | number | readonly string[];
+}

package/dist/types/switch.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+export interface SwitchProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    value?: string;
+    hasIndicator?: boolean;
+    label: string;
+    name: string;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+}

package/dist/types/tabs.d.ts

@@ -0,0 +1,23 @@
+import { OrientationMode } from '../enums';
+import { ReactElement } from 'react';
+import { ChopLogicComponentProps } from './_common';
+export interface TabsProps extends ChopLogicComponentProps {
+    tabs: ChopLogicTabItem[];
+    defaultTabId?: string;
+    mode?: OrientationMode;
+    stretched?: boolean;
+    editable?: boolean;
+    extendable?: boolean;
+    extendedTabLabel?: string;
+    extendedTabContent?: ReactElement;
+    onTabTitleChange?: (tabId: string, newTitle: string) => void;
+    onTabAdd?: () => void;
+    onTabSelect?: (id: string) => void;
+    onTabDelete?: (id: string) => void;
+}
+export interface ChopLogicTabItem {
+    content: ReactElement;
+    title: string;
+    id: string;
+    disabled?: boolean;
+}

package/dist/types/text.d.ts

@@ -0,0 +1,17 @@
+import { ChangeEventHandler, FocusEventHandler, HTMLInputAutoCompleteAttribute } from 'react';
+import { ChopLogicInputProps, ChopLogicRegExpWithFlags, TextInputValidator } from './_common';
+export interface TextInputProps extends ChopLogicInputProps {
+    errorMessage?: string;
+    clearable?: boolean;
+    readOnly?: boolean;
+    type?: 'text' | 'email' | 'password';
+    validator?: ChopLogicRegExpWithFlags | TextInputValidator;
+    maxLength?: number;
+    placeholder?: string;
+    defaultValue?: string;
+    autoComplete?: HTMLInputAutoCompleteAttribute;
+    onClear?: () => void;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+}

package/dist/types/tooltip.d.ts

@@ -0,0 +1,11 @@
+import { SemanticColor, TooltipContainer } from '../enums';
+import { PropsWithChildren, ReactElement } from 'react';
+import { ChopLogicComponentProps } from './_common';
+export interface TooltipProps extends PropsWithChildren, ChopLogicComponentProps {
+    tooltipContent: string | ReactElement;
+    containerTag?: TooltipContainer;
+    visibleOn?: 'hover' | 'click' | 'focus' | 'contextmenu';
+    autoClose?: boolean;
+    autoCloseDelay?: number;
+    color?: SemanticColor;
+}

package/dist/utils/get-class-name.d.ts

@@ -0,0 +1,5 @@
+type ClassNameInput = string | {
+    [key in string]: boolean;
+} | undefined | null;
+export declare function getClassName(input: ClassNameInput[]): string;
+export {};

package/dist/utils/handle-dropdown-list-key-press.d.ts

@@ -0,0 +1,7 @@
+import { SelectValue } from '../types';
+import { KeyboardEvent } from 'react';
+export declare function handleDropdownListKeyPress({ e, options, onClose, }: {
+    e: KeyboardEvent<HTMLUListElement>;
+    options: SelectValue[];
+    onClose: () => void;
+}): void;

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { getClassName } from './get-class-name';
+export { handleDropdownListKeyPress } from './handle-dropdown-list-key-press';
+export { moveFocusOnElementById } from './move-focus-on-element-by-id';

package/dist/utils/move-focus-on-element-by-id.d.ts

@@ -0,0 +1 @@
+export declare function moveFocusOnElementById(id: string): void;

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "git+https://github.com/ChopLogic/chop-logic-components.git"
   },
-  "version": "4.0.3",
+  "version": "4.1.1",
   "description": "Reusable React components and hooks for the Chop Logic project",
   "type": "module",
   "module": "dist/index.es.js",
@@ -85,6 +85,7 @@
     "typecheck": "tsc --pretty --noEmit",
     "test": "vitest",
     "test:ci": "vitest run --passWithNoTests",
+    "test:integration": "npm run build:storybook && start-server-and-test 'http-server storybook-static -p 6006 -s' http://127.0.0.1:6006 test-storybook",
     "test:mutation": "stryker run",
     "coverage": "vitest run --coverage",
     "release:version": "node scripts/release-version.js"
@@ -116,31 +117,34 @@
   },
   "homepage": "https://choplogic.github.io/chop-logic-components",
   "devDependencies": {
-    "@biomejs/biome": "^2.4.7",
-    "@commitlint/cli": "^20.4.4",
-    "@commitlint/config-conventional": "^20.4.4",
-    "@storybook/addon-a11y": "^10.2.19",
-    "@storybook/addon-docs": "^10.2.19",
-    "@storybook/react-vite": "^10.2.19",
-    "@stryker-mutator/core": "^9.6.0",
-    "@stryker-mutator/vitest-runner": "^9.6.0",
+    "@biomejs/biome": "^2.4.13",
+    "@commitlint/cli": "^20.5.3",
+    "@commitlint/config-conventional": "^20.5.3",
+    "@storybook/addon-a11y": "^10.3.6",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/react-vite": "^10.3.6",
+    "@storybook/test-runner": "^0.24.3",
+    "@stryker-mutator/core": "^9.6.1",
+    "@stryker-mutator/vitest-runner": "^9.6.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/node": "^25.5.0",
+    "@types/node": "^25.6.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitest/coverage-v8": "^4.1.0",
+    "@vitest/coverage-v8": "^4.1.5",
+    "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "husky-init": "^8.0.0",
-    "jsdom": "^28.1.0",
-    "prettier": "^3.8.1",
+    "jsdom": "^29.1.1",
+    "prettier": "^3.8.3",
     "remark-gfm": "^4.0.1",
-    "storybook": "^10.2.19",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.0",
-    "vite-plugin-dts": "^4.5.4",
+    "start-server-and-test": "^3.0.2",
+    "storybook": "^10.3.6",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.10",
+    "vite-plugin-dts": "^5.0.0",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "vitest": "^4.1.0"
+    "vitest": "^4.1.5"
   },
   "overrides": {
     "storybook": "$storybook"