@bodynarf/react.components 1.13.8 → 1.14.0

package/components/timeline/component/style.scss

@@ -0,0 +1,395 @@
+$timeline-marker-size: 1.5rem !default;
+$timeline-marker-size-small: 1.25rem !default;
+$timeline-marker-size-medium: 1.75rem !default;
+$timeline-marker-size-large: 2rem !default;
+
+$timeline-connector-width: 2px !default;
+$timeline-connector-color: $grey-lighter !default;
+
+$timeline-marker-bg: $primary !default;
+$timeline-marker-border: 2px solid $primary !default;
+$timeline-marker-color: $white !default;
+
+$timeline-marker-hollow-bg: $white !default;
+
+$timeline-content-bg: $white !default;
+$timeline-content-border: 1px solid $grey-lighter !default;
+$timeline-content-shadow: 0 2px 4px rgba($black, 0.05) !default;
+
+$timeline-title-color: $grey-darker !default;
+$timeline-text-color: $grey !default;
+$timeline-timestamp-color: $grey-light !default;
+
+$timeline-item-spacing: 2rem !default;
+
+// Animations
+@keyframes timeline-fade-in-left {
+    from {
+        opacity: 0;
+        transform: translateX(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes timeline-fade-in-right {
+    from {
+        opacity: 0;
+        transform: translateX(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.bbr-timeline {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    // Timeline item
+    .bbr-timeline-item {
+        position: relative;
+        display: flex;
+        align-items: flex-start;
+        padding-bottom: $timeline-item-spacing;
+
+        &:last-child {
+            padding-bottom: 0;
+
+            .bbr-timeline-connector {
+                display: none;
+            }
+        }
+    }
+
+    // Marker (circle with optional icon/content)
+    .bbr-timeline-marker {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: $timeline-marker-size;
+        height: $timeline-marker-size;
+        min-width: $timeline-marker-size;
+        border-radius: 50%;
+        background: $timeline-marker-bg;
+        border: $timeline-marker-border;
+        color: $timeline-marker-color;
+        font-size: 0.75rem;
+        font-weight: 600;
+        z-index: 1;
+        flex-shrink: 0;
+    }
+
+    .bbr-timeline-icon,
+    .bbr-timeline-marker-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.65rem;
+    }
+
+    // Content box
+    .bbr-timeline-content {
+        flex: 1;
+        background: $timeline-content-bg;
+        border: $timeline-content-border;
+        border-radius: 4px;
+        padding: 1rem;
+        margin-left: 1rem;
+        box-shadow: $timeline-content-shadow;
+    }
+
+    .bbr-timeline-title {
+        font-weight: 600;
+        font-size: 1rem;
+        color: $timeline-title-color;
+        line-height: 1.25;
+    }
+
+    .bbr-timeline-text {
+        margin-top: 0.5rem;
+        font-size: 0.875rem;
+        color: $timeline-text-color;
+        line-height: 1.5;
+    }
+
+    .bbr-timeline-timestamp {
+        font-size: 0.75rem;
+        color: $timeline-timestamp-color;
+        margin-bottom: 0.25rem;
+    }
+
+    // Connector line
+    .bbr-timeline-connector {
+        position: absolute;
+        left: calc($timeline-marker-size / 2 - $timeline-connector-width / 2);
+        top: $timeline-marker-size;
+        width: $timeline-connector-width;
+        height: calc(100% - $timeline-marker-size);
+        background: $timeline-connector-color;
+        z-index: 0;
+    }
+
+    // Left aligned mode (default)
+    &.is-left-aligned {
+        .bbr-timeline-item {
+            padding-left: 0;
+        }
+    }
+
+    // Centered mode (alternating left/right)
+    &.is-centered {
+        .bbr-timeline-item {
+            width: 50%;
+            margin-left: 50%;
+
+            &:nth-child(odd) {
+                margin-left: 0;
+                flex-direction: row-reverse;
+                text-align: right;
+
+                .bbr-timeline-content {
+                    margin-left: 0;
+                    margin-right: 1rem;
+                }
+
+                .bbr-timeline-connector {
+                    left: auto;
+                    right: calc($timeline-marker-size / 2 - $timeline-connector-width / 2);
+                }
+            }
+        }
+
+        .bbr-timeline-marker {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        .bbr-timeline-item:nth-child(odd) .bbr-timeline-marker {
+            left: auto;
+            right: 0;
+            transform: translateX(50%);
+        }
+
+        .bbr-timeline-item:nth-child(even) .bbr-timeline-marker {
+            left: 0;
+            transform: translateX(-50%);
+        }
+
+        .bbr-timeline-connector {
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        .bbr-timeline-item:nth-child(odd) .bbr-timeline-connector {
+            left: auto;
+            right: 0;
+            transform: translateX(50%);
+        }
+
+        .bbr-timeline-item:nth-child(even) .bbr-timeline-connector {
+            left: 0;
+            transform: translateX(-50%);
+        }
+
+        // Separate timestamps
+        &.has-separate-timestamps {
+            .bbr-timeline-timestamp {
+                position: absolute;
+                width: 100%;
+                margin-bottom: 0;
+
+                &.is-left {
+                    right: calc(50% + $timeline-marker-size / 2 + 1rem);
+                    left: auto;
+                    text-align: right;
+                }
+
+                &.is-right {
+                    left: calc(50% + $timeline-marker-size / 2 + 1rem);
+                    right: auto;
+                    text-align: left;
+                }
+            }
+
+            .bbr-timeline-item:nth-child(odd) {
+                .bbr-timeline-timestamp.is-left {
+                    display: none;
+                }
+            }
+
+            .bbr-timeline-item:nth-child(even) {
+                .bbr-timeline-timestamp.is-right {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    // Hollow markers
+    &.is-hollow {
+        .bbr-timeline-marker {
+            background: $timeline-marker-hollow-bg;
+        }
+
+        @each $name, $pair in $colors {
+            $color: nth($pair, 1);
+
+            .bbr-timeline-item.is-#{$name} .bbr-timeline-marker {
+                background: $timeline-marker-hollow-bg;
+                border-color: $color;
+                color: $color;
+            }
+        }
+    }
+
+    // Animation
+    &.is-animated {
+        .bbr-timeline-item {
+            opacity: 0;
+
+            &.is-animated-left {
+                animation: timeline-fade-in-left 0.5s ease forwards;
+            }
+
+            &.is-animated-right {
+                animation: timeline-fade-in-right 0.5s ease forwards;
+            }
+
+            @for $i from 1 through 20 {
+                &:nth-child(#{$i}) {
+                    animation-delay: #{($i - 1) * 0.15}s;
+                }
+            }
+        }
+    }
+
+    // Size variations
+    &.is-small {
+        .bbr-timeline-marker {
+            width: $timeline-marker-size-small;
+            height: $timeline-marker-size-small;
+            min-width: $timeline-marker-size-small;
+            font-size: 0.625rem;
+        }
+
+        .bbr-timeline-icon,
+        .bbr-timeline-marker-content {
+            font-size: 0.55rem;
+        }
+
+        .bbr-timeline-title {
+            font-size: 0.875rem;
+        }
+
+        .bbr-timeline-text {
+            font-size: 0.75rem;
+        }
+
+        .bbr-timeline-timestamp {
+            font-size: 0.625rem;
+        }
+
+        .bbr-timeline-content {
+            padding: 0.75rem;
+        }
+
+        .bbr-timeline-connector {
+            left: calc($timeline-marker-size-small / 2 - $timeline-connector-width / 2);
+            top: $timeline-marker-size-small;
+            height: calc(100% - $timeline-marker-size-small);
+        }
+    }
+
+    &.is-medium {
+        .bbr-timeline-marker {
+            width: $timeline-marker-size-medium;
+            height: $timeline-marker-size-medium;
+            min-width: $timeline-marker-size-medium;
+            font-size: 0.875rem;
+        }
+
+        .bbr-timeline-icon,
+        .bbr-timeline-marker-content {
+            font-size: 0.75rem;
+        }
+
+        .bbr-timeline-title {
+            font-size: 1.125rem;
+        }
+
+        .bbr-timeline-text {
+            font-size: 1rem;
+        }
+
+        .bbr-timeline-connector {
+            left: calc($timeline-marker-size-medium / 2 - $timeline-connector-width / 2);
+            top: $timeline-marker-size-medium;
+            height: calc(100% - $timeline-marker-size-medium);
+        }
+    }
+
+    &.is-large {
+        .bbr-timeline-marker {
+            width: $timeline-marker-size-large;
+            height: $timeline-marker-size-large;
+            min-width: $timeline-marker-size-large;
+            font-size: 1rem;
+        }
+
+        .bbr-timeline-icon,
+        .bbr-timeline-marker-content {
+            font-size: 0.875rem;
+        }
+
+        .bbr-timeline-title {
+            font-size: 1.25rem;
+        }
+
+        .bbr-timeline-text {
+            font-size: 1.125rem;
+        }
+
+        .bbr-timeline-content {
+            padding: 1.25rem;
+        }
+
+        .bbr-timeline-connector {
+            left: calc($timeline-marker-size-large / 2 - $timeline-connector-width / 2);
+            top: $timeline-marker-size-large;
+            height: calc(100% - $timeline-marker-size-large);
+        }
+    }
+
+    // Color variations
+    @each $name, $pair in $colors {
+        $color: nth($pair, 1);
+        $color-invert: nth($pair, 2);
+
+        &.is-#{$name} {
+            .bbr-timeline-marker {
+                background: $color;
+                border-color: $color;
+                color: $color-invert;
+            }
+
+            .bbr-timeline-connector {
+                background: rgba($color, 0.3);
+            }
+        }
+
+        .bbr-timeline-item.is-#{$name} {
+            .bbr-timeline-marker {
+                background: $color;
+                border-color: $color;
+                color: $color-invert;
+            }
+        }
+    }
+}

package/components/timeline/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./component";
+export * from "./types";
+//# sourceMappingURL=index.d.ts.map

package/components/timeline/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,cAAc,SAAS,CAAC"}

package/components/timeline/index.js

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";

package/components/timeline/types.d.ts

@@ -0,0 +1,55 @@
+import { BaseElementProps, ElementColor, ElementSize } from "../../types";
+/** Single timeline event item */
+export interface TimelineItem {
+    /** Unique event identifier */
+    id: string;
+    /** Event title/label */
+    title: string;
+    /** Optional event description or content */
+    content?: string;
+    /** Optional timestamp or date string */
+    timestamp?: string;
+    /** Optional icon class (e.g., "fa-check", "fa-user") */
+    icon?: string;
+    /** Optional color override for this specific item */
+    color?: ElementColor;
+    /** Optional custom marker content (text or icon) */
+    marker?: string;
+}
+/** Timeline component props */
+export type TimelineProps = BaseElementProps & {
+    /** Array of timeline events to display */
+    items: Array<TimelineItem>;
+    /** Component size */
+    size?: ElementSize;
+    /** Default color for timeline markers */
+    color?: ElementColor;
+    /**
+     * Display timeline on the left side (markers on left, content on right).
+     * When false, timeline is centered with alternating content.
+     * @default true
+     */
+    leftAligned?: boolean;
+    /**
+     * Show connector lines between events.
+     * @default true
+     */
+    showConnectors?: boolean;
+    /**
+     * Use animated appearance for items.
+     * @default false
+     */
+    animated?: boolean;
+    /**
+     * Show timestamps on separate side from content.
+     * Only works when leftAligned is false (centered mode).
+     * @default false
+     */
+    showTimestampsSeparate?: boolean;
+    /**
+     * Render markers as hollow (outlined) circles.
+     * @default false
+     */
+    hollow?: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

package/components/timeline/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzE,iCAAiC;AACjC,MAAM,WAAW,YAAY;IACzB,8BAA8B;IAC9B,EAAE,EAAE,MAAM,CAAC;IAEX,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IAEd,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,qDAAqD;IACrD,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,+BAA+B;AAC/B,MAAM,MAAM,aAAa,GAAG,gBAAgB,GAAG;IAC3C,0CAA0C;IAC1C,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAE3B,qBAAqB;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,yCAAyC;IACzC,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}

package/components/timeline/types.js

@@ -0,0 +1 @@
+export {};

package/components/tooltip/component/index.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { TooltipProps } from "..";
+import "./style.scss";
+declare const Tooltip: FC<TooltipProps>;
+export default Tooltip;
+//# sourceMappingURL=index.d.ts.map

package/components/tooltip/component/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAoD,MAAM,OAAO,CAAC;AAO7E,OAAO,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC;AAElC,OAAO,cAAc,CAAC;AAEtB,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAsJ7B,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/components/tooltip/component/index.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useMemo, useState } from "react";
+import { getClassName, isNotNullish, isNullish } from "@bodynarf/utils";
+import { useComponentOutsideClick, useEventListener } from "../../../hooks";
+import { mapDataAttributes } from "../../../utils";
+import "./style.scss";
+const Tooltip = ({ content, children, trigger = "hover", position = "top", disabled = false, isOpen, defaultOpen = false, closeOnOutsideClick = true, closeOnEsc = true, interactive = false, className, contentClassName, title, data, onOpenChange, }) => {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const generatedId = useId();
+    const id = useMemo(() => `tooltip-${generatedId}`.replace(/:/g, ""), [generatedId]);
+    const isControlled = isNotNullish(isOpen);
+    const open = (isControlled ? isOpen : internalOpen) ?? false;
+    const setOpen = useCallback((next) => {
+        if (!isControlled) {
+            setInternalOpen(next);
+        }
+        onOpenChange?.(next);
+    }, [isControlled, onOpenChange]);
+    const onMouseEnter = useCallback(() => {
+        if (disabled || trigger !== "hover") {
+            return;
+        }
+        setOpen(true);
+    }, [disabled, trigger, setOpen]);
+    const onMouseLeave = useCallback(() => {
+        if (disabled || trigger !== "hover") {
+            return;
+        }
+        setOpen(false);
+    }, [disabled, trigger, setOpen]);
+    const onFocus = useCallback(() => {
+        if (disabled || trigger !== "hover") {
+            return;
+        }
+        setOpen(true);
+    }, [disabled, trigger, setOpen]);
+    const onBlur = useCallback(() => {
+        if (disabled || trigger !== "hover") {
+            return;
+        }
+        setOpen(false);
+    }, [disabled, trigger, setOpen]);
+    const onClick = useCallback(() => {
+        if (disabled || trigger !== "click") {
+            return;
+        }
+        setOpen(!open);
+    }, [disabled, trigger, open, setOpen]);
+    useEffect(() => {
+        if (disabled && open) {
+            setOpen(false);
+        }
+    }, [disabled, open, setOpen]);
+    useComponentOutsideClick(`[data-tooltip-id="${id}"]`, open && trigger === "click" && closeOnOutsideClick, () => setOpen(false), trigger === "click");
+    useEventListener("keydown", (event) => {
+        if (!closeOnEsc || !open) {
+            return;
+        }
+        if (event.key === "Escape") {
+            setOpen(false);
+        }
+    }, document);
+    const rootClassName = getClassName([
+        "bbr-tooltip",
+        `bbr-tooltip--${position}`,
+        className,
+    ]);
+    const dataAttributes = mapDataAttributes(data);
+    const contentClassNames = getClassName([
+        "bbr-tooltip__content",
+        interactive ? "" : "bbr-tooltip__content--noninteractive",
+        "has-background-dark",
+        "has-text-white",
+        contentClassName,
+    ]);
+    return (_jsxs("span", { title: title, onBlur: onBlur, onClick: onClick, onFocus: onFocus, ...dataAttributes, "data-tooltip-id": id, className: rootClassName, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [children, open && !disabled && !isNullish(content)
+                ? (_jsx("span", { role: "tooltip", className: contentClassNames, children: content }))
+                : null] }));
+};
+export default Tooltip;

package/components/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./component";
+export * from "./types";
+//# sourceMappingURL=index.d.ts.map

package/components/tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC"}

package/components/tooltip/index.js

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";

package/components/tooltip/types.d.ts

@@ -0,0 +1,31 @@
+import { BaseElementProps } from "../../types";
+import type { ReactNode } from "react";
+export type TooltipPosition = "top" | "bottom" | "left" | "right";
+export type TooltipTrigger = "hover" | "click";
+export type TooltipProps = BaseElementProps & {
+    /** Tooltip / popover content */
+    content: ReactNode;
+    /** Trigger element */
+    children: ReactNode;
+    /** How tooltip is opened */
+    trigger?: TooltipTrigger;
+    /** Position relative to trigger */
+    position?: TooltipPosition;
+    /** Disable tooltip behavior entirely */
+    disabled?: boolean;
+    /** Controlled open state */
+    isOpen?: boolean;
+    /** Uncontrolled open initial state */
+    defaultOpen?: boolean;
+    /** Close on outside click (relevant for click trigger) */
+    closeOnOutsideClick?: boolean;
+    /** Close on Escape key */
+    closeOnEsc?: boolean;
+    /** Allow pointer interaction with content (popover-like) */
+    interactive?: boolean;
+    /** Additional class name for content container */
+    contentClassName?: string;
+    /** Notify when open state changes */
+    onOpenChange?: (isOpen: boolean) => void;
+};
+//# sourceMappingURL=types.d.ts.map

package/components/tooltip/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAElE,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG;IAC1C,gCAAgC;IAChC,OAAO,EAAE,SAAS,CAAC;IAEnB,sBAAsB;IACtB,QAAQ,EAAE,SAAS,CAAC;IAEpB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,eAAe,CAAC;IAE3B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,sCAAsC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,0DAA0D;IAC1D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,0BAA0B;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C,CAAC"}

package/components/tooltip/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.13.8",
+    "version": "1.14.0",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"

package/readme.md

@@ -30,12 +30,18 @@ Simple react components based on html elements.
  - **Multiline** - multiline text input
  - **Number** - number input with step
  - **Password** - single line password input (requires icon, see icon component description)
- - **Text** - single line text input;
+ - **RadioGroup** - group of radio buttons with vertical/horizontal layout and customizable styles
+ - **Slider** - range input component with optional value display and progress track
+ - **Switch** - toggle switch component with multiple style variants (rounded, outlined, thin)
+ - **Text** - single line text input
+ - **TimePicker** - time input component with hours, minutes and optional seconds
 
 #### Components
  - **Anchor** - simple anchor (link) component
  - **Button** - button that allows user to interact with system by clicking it _(assume everyone knows what is button)_
+ - **File** - file upload component with customizable placeholder, file type filtering and boxed style option
  - **Icon** - *see p.4 of installation*
+ - **Progress** - progress bar component with percentage display, indeterminate state and animation
  - **Tag** - small component stands for tag visualization
  - **BreadCrumbs** - speaks for it self
  - **Table** - table with sortable headers
@@ -44,6 +50,7 @@ Simple react components based on html elements.
 Complex components is set of components built via combining simple components or represent complex logical component
  - **Accordion** - Collapsible container that can hide some content inside
  - **Dropdown** - Custom dropdown component, based on html div elements & css (requires icon, see icon component description)
+ - **ModalWrapper** - Modal window component with customizable header, body and action buttons
  - **Multiselect** - Dropdown with option to select several records
  - **Paginator** - Pagination elements to navigate through paged list
 
@@ -61,12 +68,20 @@ Complex components is set of components built via combining simple components or
 		/>
 	```
  - **Search** - Search bar with optional button to perform search
+ - **Stepper** - Step indicator component for multi-step processes with vertical/horizontal layout
  - **Tabs** - Container for multi-content with option of switching displaying content without refreshing\scrolling page
+ - **Timeline** - Vertical timeline component for displaying chronological events
 
 ### Hooks
 
  - **useComponentOutsideClick** - Attach watcher for mouse clicks and emit event when click was outside of component
+ - **useDebounceHandler** - Create a cooldown event handler
+ - **useEventListener** - Attach an event listener to window/document/element with automatic cleanup
+ - **useInterval** - Execute a callback repeatedly with a fixed time delay
+ - **useLocalStorage** - Store state in localStorage and keep it in sync
+ - **useMount** - Handle component initial mount event
  - **usePagination** - Create a pagination config to easily manipulate with Paginator component
+ - **usePrevious** - Get the previous value of a state or prop
+ - **useTimeout** - Execute a callback after a specified delay
  - **useUnmount** - Handle component unmounting event. Useful as component cleanup fn
- - **useMount** - Handle component initial mount event
- - **useDebounceHandler** - Create a cooldown event handler
+ - **useUpdateEffect** - Like useEffect, but skips execution on the initial render