@bodynarf/react.components 1.13.8 → 1.14.0

package/components/stepper/component/style.scss

@@ -0,0 +1,430 @@
+$stepper-marker-size: 2.5rem !default;
+$stepper-marker-size-small: 2rem !default;
+$stepper-marker-size-medium: 3rem !default;
+$stepper-marker-size-large: 3.5rem !default;
+
+$stepper-connector-thickness: 2px !default;
+$stepper-connector-color: $grey-lighter !default;
+$stepper-connector-completed-color: $primary !default;
+
+$stepper-marker-bg: $white !default;
+$stepper-marker-border: 2px solid $grey-lighter !default;
+$stepper-marker-color: $grey !default;
+
+$stepper-marker-completed-bg: $primary !default;
+$stepper-marker-completed-border: 2px solid $primary !default;
+$stepper-marker-completed-color: $white !default;
+
+$stepper-marker-current-bg: $white !default;
+$stepper-marker-current-border: 2px solid $primary !default;
+$stepper-marker-current-color: $primary !default;
+
+$stepper-title-color: $grey-dark !default;
+$stepper-title-completed-color: $grey-dark !default;
+$stepper-title-current-color: $grey-darker !default;
+$stepper-title-upcoming-color: $grey !default;
+
+$stepper-description-color: $grey !default;
+
+// Animation
+@keyframes stepper-connector-fill {
+    from {
+        width: 0;
+    }
+    to {
+        width: 100%;
+    }
+}
+
+.bbr-stepper {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    width: 100%;
+
+    // Vertical mode
+    &.is-vertical {
+        flex-direction: column;
+
+        .bbr-stepper-step {
+            flex-direction: row;
+            align-items: flex-start;
+            width: 100%;
+            padding-bottom: 1.5rem;
+
+            &:last-child {
+                padding-bottom: 0;
+            }
+        }
+
+        .bbr-stepper-content {
+            margin-top: 0;
+            margin-left: 1rem;
+            text-align: left;
+        }
+
+        .bbr-stepper-connector {
+            position: absolute;
+            left: calc($stepper-marker-size / 2 - $stepper-connector-thickness / 2);
+            top: $stepper-marker-size;
+            width: $stepper-connector-thickness;
+            height: calc(100% - $stepper-marker-size + 0.5rem);
+            right: auto;
+
+            &.has-arrow {
+                height: calc(100% - $stepper-marker-size);
+
+                &::after {
+                    right: auto;
+                    left: 50%;
+                    top: auto;
+                    bottom: -6px;
+                    transform: translateX(-50%);
+                    border-top: 6px solid $stepper-connector-color;
+                    border-bottom: none;
+                    border-left: 5px solid transparent;
+                    border-right: 5px solid transparent;
+                }
+
+                &.is-completed::after {
+                    border-top-color: $stepper-connector-completed-color;
+                    border-left-color: transparent;
+                }
+            }
+        }
+
+        &.is-small .bbr-stepper-connector {
+            left: calc($stepper-marker-size-small / 2 - $stepper-connector-thickness / 2);
+            top: $stepper-marker-size-small;
+            height: calc(100% - $stepper-marker-size-small + 0.5rem);
+        }
+
+        &.is-medium .bbr-stepper-connector {
+            left: calc($stepper-marker-size-medium / 2 - $stepper-connector-thickness / 2);
+            top: $stepper-marker-size-medium;
+            height: calc(100% - $stepper-marker-size-medium + 0.5rem);
+        }
+
+        &.is-large .bbr-stepper-connector {
+            left: calc($stepper-marker-size-large / 2 - $stepper-connector-thickness / 2);
+            top: $stepper-marker-size-large;
+            height: calc(100% - $stepper-marker-size-large + 0.5rem);
+        }
+    }
+
+    // Step item
+    .bbr-stepper-step {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1;
+        padding: 0 0.5rem;
+
+        &:first-child {
+            padding-left: 0;
+        }
+
+        &:last-child {
+            padding-right: 0;
+        }
+
+        // Clickable step
+        &.is-clickable {
+            cursor: pointer;
+
+            .bbr-stepper-marker {
+                transition: transform 0.2s ease, box-shadow 0.2s ease;
+            }
+
+            &:hover .bbr-stepper-marker {
+                transform: scale(1.1);
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+            }
+        }
+
+        // Completed step
+        &.is-completed {
+            .bbr-stepper-marker {
+                background: $stepper-marker-completed-bg;
+                border: $stepper-marker-completed-border;
+                color: $stepper-marker-completed-color;
+            }
+
+            .bbr-stepper-title {
+                color: $stepper-title-completed-color;
+                font-weight: 500;
+            }
+        }
+
+        // Current step
+        &.is-current {
+            .bbr-stepper-marker {
+                background: $stepper-marker-current-bg;
+                border: $stepper-marker-current-border;
+                color: $stepper-marker-current-color;
+                box-shadow: 0 0 0 4px rgba($primary, 0.2);
+            }
+
+            .bbr-stepper-title {
+                color: $stepper-title-current-color;
+                font-weight: 600;
+            }
+        }
+
+        // Upcoming step
+        &.is-upcoming {
+            .bbr-stepper-marker {
+                background: $stepper-marker-bg;
+                border: $stepper-marker-border;
+                color: $stepper-marker-color;
+            }
+
+            .bbr-stepper-title {
+                color: $stepper-title-upcoming-color;
+            }
+        }
+    }
+
+    // Marker (circle with number or icon)
+    .bbr-stepper-marker {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: $stepper-marker-size;
+        height: $stepper-marker-size;
+        border-radius: 50%;
+        font-weight: 600;
+        font-size: 1rem;
+        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+        z-index: 1;
+        flex-shrink: 0;
+    }
+
+    .bbr-stepper-number,
+    .bbr-stepper-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    // Content (title + description)
+    .bbr-stepper-content {
+        margin-top: 0.75rem;
+        text-align: center;
+    }
+
+    .bbr-stepper-title {
+        font-size: 0.875rem;
+        line-height: 1.25;
+        transition: color 0.2s ease;
+    }
+
+    .bbr-stepper-description {
+        margin-top: 0.25rem;
+        font-size: 0.75rem;
+        color: $stepper-description-color;
+        line-height: 1.25;
+    }
+
+    // Connector line
+    .bbr-stepper-connector {
+        position: absolute;
+        top: calc($stepper-marker-size / 2 - $stepper-connector-thickness / 2);
+        left: calc(50% + $stepper-marker-size / 2 + 0.25rem);
+        right: calc(-50% + $stepper-marker-size / 2 + 0.25rem);
+        height: $stepper-connector-thickness;
+        background: $stepper-connector-color;
+        z-index: 0;
+
+        &.is-completed {
+            background: $stepper-connector-completed-color;
+        }
+
+        &.is-hidden {
+            display: none;
+        }
+
+        // Arrow connector (line with arrowhead via ::before)
+        &.has-arrow::before {
+            content: "";
+            position: absolute;
+            right: -6px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 0;
+            height: 0;
+            border-top: 5px solid transparent;
+            border-bottom: 5px solid transparent;
+            border-left: 6px solid $stepper-connector-color;
+            z-index: 2;
+        }
+
+        &.has-arrow.is-completed::before {
+            border-left-color: $stepper-connector-completed-color;
+        }
+    }
+
+    // Vertical mode arrow
+    &.is-vertical .bbr-stepper-connector.has-arrow::before {
+        right: auto;
+        top: auto;
+        left: 50%;
+        bottom: -6px;
+        transform: translateX(-50%);
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-top: 6px solid $stepper-connector-color;
+        border-bottom: none;
+    }
+
+    &.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
+        border-top-color: $stepper-connector-completed-color;
+        border-left-color: transparent;
+    }
+
+    // Animated connectors
+    &.is-animated {
+        .bbr-stepper-connector.is-completed {
+            position: relative;
+            background: $stepper-connector-color;
+
+            &::after {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: 0;
+                height: 100%;
+                background: $stepper-connector-completed-color;
+                animation: stepper-connector-fill 0.5s ease forwards;
+            }
+        }
+
+        &.is-vertical .bbr-stepper-connector.is-completed::after {
+            width: 100%;
+            height: 0;
+            animation: none;
+
+            @keyframes stepper-connector-fill-vertical {
+                from {
+                    height: 0;
+                }
+                to {
+                    height: 100%;
+                }
+            }
+
+            animation: stepper-connector-fill-vertical 0.5s ease forwards;
+        }
+    }
+
+    // Size variations
+    &.is-small {
+        .bbr-stepper-marker {
+            width: $stepper-marker-size-small;
+            height: $stepper-marker-size-small;
+            font-size: 0.875rem;
+        }
+
+        .bbr-stepper-title {
+            font-size: 0.75rem;
+        }
+
+        .bbr-stepper-description {
+            font-size: 0.625rem;
+        }
+
+        .bbr-stepper-connector {
+            top: calc($stepper-marker-size-small / 2 - $stepper-connector-thickness / 2);
+            left: calc(50% + $stepper-marker-size-small / 2 + 0.25rem);
+            right: calc(-50% + $stepper-marker-size-small / 2 + 0.25rem);
+        }
+    }
+
+    &.is-medium {
+        .bbr-stepper-marker {
+            width: $stepper-marker-size-medium;
+            height: $stepper-marker-size-medium;
+            font-size: 1.25rem;
+        }
+
+        .bbr-stepper-title {
+            font-size: 1rem;
+        }
+
+        .bbr-stepper-description {
+            font-size: 0.875rem;
+        }
+
+        .bbr-stepper-connector {
+            top: calc($stepper-marker-size-medium / 2 - $stepper-connector-thickness / 2);
+            left: calc(50% + $stepper-marker-size-medium / 2 + 0.25rem);
+            right: calc(-50% + $stepper-marker-size-medium / 2 + 0.25rem);
+        }
+    }
+
+    &.is-large {
+        .bbr-stepper-marker {
+            width: $stepper-marker-size-large;
+            height: $stepper-marker-size-large;
+            font-size: 1.5rem;
+        }
+
+        .bbr-stepper-title {
+            font-size: 1.125rem;
+        }
+
+        .bbr-stepper-description {
+            font-size: 1rem;
+        }
+
+        .bbr-stepper-connector {
+            top: calc($stepper-marker-size-large / 2 - $stepper-connector-thickness / 2);
+            left: calc(50% + $stepper-marker-size-large / 2 + 0.25rem);
+            right: calc(-50% + $stepper-marker-size-large / 2 + 0.25rem);
+        }
+    }
+
+    // Color variations
+    @each $name, $pair in $colors {
+        $color: nth($pair, 1);
+        $color-invert: nth($pair, 2);
+
+        &.is-#{$name} {
+            .bbr-stepper-step.is-completed {
+                .bbr-stepper-marker {
+                    background: $color;
+                    border-color: $color;
+                    color: $color-invert;
+                }
+            }
+
+            .bbr-stepper-step.is-current {
+                .bbr-stepper-marker {
+                    border-color: $color;
+                    color: $color;
+                    box-shadow: 0 0 0 4px rgba($color, 0.2);
+                }
+            }
+
+            .bbr-stepper-connector.is-completed {
+                background: $color;
+            }
+
+            // Arrow color for horizontal
+            .bbr-stepper-connector.has-arrow.is-completed::before {
+                border-left-color: $color;
+            }
+
+            &.is-animated .bbr-stepper-connector.is-completed::after {
+                background: $color;
+            }
+
+            // Arrow color for vertical
+            &.is-vertical .bbr-stepper-connector.has-arrow.is-completed::before {
+                border-top-color: $color;
+                border-left-color: transparent;
+            }
+        }
+    }
+}

package/components/stepper/index.d.ts

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

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

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

package/components/stepper/index.js

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

package/components/stepper/types.d.ts

@@ -0,0 +1,65 @@
+import { BaseElementProps, ElementColor, ElementSize } from "../../types";
+/** Single step item */
+export interface StepItem {
+    /** Unique step identifier */
+    id: string;
+    /** Step title/label */
+    title: string;
+    /** Optional step description */
+    description?: string;
+    /** Optional icon class (e.g., "fa-check", "fa-user") */
+    icon?: string;
+    /** Is step clickable (can navigate to this step) */
+    clickable?: boolean;
+}
+/** Step status */
+export type StepStatus = "completed" | "current" | "upcoming";
+/** Stepper component props */
+export type StepperProps = BaseElementProps & {
+    /** Array of steps to display */
+    steps: Array<StepItem>;
+    /** Currently active step id */
+    currentStep: string;
+    /** Component size */
+    size?: ElementSize;
+    /** Component color for completed/active steps */
+    color?: ElementColor;
+    /**
+     * Display stepper vertically.
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * Show step numbers instead of icons.
+     * @default true
+     */
+    showNumbers?: boolean;
+    /**
+     * Allow clicking on completed steps to navigate back.
+     * @default false
+     */
+    clickable?: boolean;
+    /**
+     * Show connector lines between steps.
+     * @default true
+     */
+    showConnectors?: boolean;
+    /**
+     * Use animated connectors for completed steps.
+     * @default false
+     */
+    animated?: boolean;
+    /**
+     * Show arrow connectors (line with arrowhead) between steps.
+     * When enabled, replaces regular connectors with arrow-style connectors.
+     * @default false
+     */
+    showArrows?: boolean;
+    /**
+     * Handler when a step is clicked (only works with clickable=true).
+     * @param step The clicked step
+     * @param index Step index
+     */
+    onStepClick?: (step: StepItem, index: number) => void;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzE,uBAAuB;AACvB,MAAM,WAAW,QAAQ;IACrB,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IAEX,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IAEd,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,kBAAkB;AAClB,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;AAE9D,8BAA8B;AAC9B,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG;IAC1C,gCAAgC;IAChC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IAEvB,+BAA+B;IAC/B,WAAW,EAAE,MAAM,CAAC;IAEpB,qBAAqB;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzD,CAAC"}

package/components/stepper/types.js

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

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

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import "./style.scss";
+import { TimelineProps } from "../types";
+/** Timeline component for displaying chronological events */
+declare const Timeline: FC<TimelineProps>;
+export default Timeline;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/timeline/component/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAOpC,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAgB,aAAa,EAAE,MAAM,UAAU,CAAC;AAYvD,6DAA6D;AAC7D,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAsG/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/timeline/component/index.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { getClassName } from "@bodynarf/utils";
+import { ElementColor, ElementSize } from "../../../types";
+import { getElementColorClassName, getSizeClassName, mapDataAttributes } from "../../../utils";
+import "./style.scss";
+/** Get color class for timeline item */
+const getItemColorClass = (item, defaultColor) => {
+    const color = item.color ?? defaultColor;
+    return getElementColorClassName(color);
+};
+/** Timeline component for displaying chronological events */
+const Timeline = ({ items, size = ElementSize.Normal, color = ElementColor.Primary, leftAligned = true, showConnectors = true, animated = false, showTimestampsSeparate = false, hollow = false, className, title, data, }) => {
+    const containerClassName = useMemo(() => getClassName([
+        "bbr-timeline",
+        className,
+        getSizeClassName(size, ElementSize.Normal),
+        getElementColorClassName(color),
+        leftAligned ? "is-left-aligned" : "is-centered",
+        showConnectors ? "has-connectors" : "",
+        animated ? "is-animated" : "",
+        showTimestampsSeparate && !leftAligned ? "has-separate-timestamps" : "",
+        hollow ? "is-hollow" : "",
+    ]), [className, size, color, leftAligned, showConnectors, animated, showTimestampsSeparate, hollow]);
+    const dataAttributes = mapDataAttributes(data);
+    return (_jsx("div", { title: title, ...dataAttributes, className: containerClassName, children: items.map((item, index) => {
+            const itemColorClass = getItemColorClass(item, color);
+            const itemClassName = getClassName([
+                "bbr-timeline-item",
+                itemColorClass,
+                animated ? `is-animated-${index % 2 === 0 ? "left" : "right"}` : "",
+            ]);
+            return (_jsxs("div", { className: itemClassName, children: [showTimestampsSeparate === true && leftAligned === false && item.timestamp !== undefined && (_jsx("div", { className: "bbr-timeline-timestamp is-left", children: item.timestamp })), _jsx("div", { className: "bbr-timeline-marker", children: item.icon !== undefined ? (_jsx("span", { className: "bbr-timeline-icon", children: _jsx("i", { className: `fas ${item.icon}` }) })) : item.marker !== undefined ? (_jsx("span", { className: "bbr-timeline-marker-content", children: item.marker })) : null }), _jsxs("div", { className: "bbr-timeline-content", children: [item.timestamp !== undefined && showTimestampsSeparate === false && (_jsx("div", { className: "bbr-timeline-timestamp", children: item.timestamp })), _jsx("div", { className: "bbr-timeline-title", children: item.title }), item.content !== undefined && item.content !== "" && (_jsx("div", { className: "bbr-timeline-text", children: item.content }))] }), showTimestampsSeparate === true && leftAligned === false && item.timestamp !== undefined && (_jsx("div", { className: "bbr-timeline-timestamp is-right", children: item.timestamp })), showConnectors === true && index < items.length - 1 && (_jsx("div", { className: "bbr-timeline-connector" }))] }, item.id));
+        }) }));
+};
+export default Timeline;