@codeworker.br/govbr-tw-react/dist/components/Step/index.js

Biblioteca de componentes React usando Tailwind CSS que implementa o Padrão Digital de Governo.

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Children, cloneElement, forwardRef, isValidElement, useContext, useMemo, createContext, } from "react";
import BASE_CLASSNAMES from "../../config/baseClassNames";
import { cn } from "../../libs/utils";
import { stepConnectorVariants, stepContentVariants, stepIndicatorVariants, stepIndicatorWrapperVariants, stepItemVariants, stepLabelVariants, stepVariants, stepDescriptionVariants, } from "./variants";
const StepContext = createContext(null);
const useStepContext = () => {
    const context = useContext(StepContext);
    if (!context) {
        throw new Error("Step.Item must be used within Step.");
    }
    return context;
};
const LABEL_COLORS = {
    default: {
        active: "text-govbr-blue-warm-vivid-70",
        upcoming: "text-govbr-gray-60",
    },
    success: {
        active: "text-govbr-green-cool-vivid-50",
        upcoming: "text-govbr-gray-60",
    },
    danger: {
        active: "text-govbr-red-vivid-50",
        upcoming: "text-govbr-gray-60",
    },
    warning: {
        active: "text-govbr-yellow-vivid-20",
        upcoming: "text-govbr-gray-60",
    },
    featured: {
        active: "text-govbr-blue-warm-vivid-80",
        upcoming: "text-govbr-gray-60",
    },
    dark: {
        active: "text-govbr-pure-0",
        upcoming: "text-govbr-blue-warm-30",
    },
};
const getLabelColorClass = (variant, status) => {
    const palette = LABEL_COLORS[variant !== null && variant !== void 0 ? variant : "default"];
    return status === "upcoming" ? palette.upcoming : palette.active;
};
const Step = forwardRef((_a, ref) => {
    var { children, className, orientation = "horizontal", variant = "default" } = _a, props = __rest(_a, ["children", "className", "orientation", "variant"]);
    const items = useMemo(() => Children.toArray(children).filter((child) => isValidElement(child)), [children]);
    const statuses = useMemo(() => items.map((item) => {
        const status = item.props.status;
        return status !== null && status !== void 0 ? status : "upcoming";
    }), [items]);
    return (_jsx(StepContext.Provider, { value: { orientation, variant }, children: _jsx("ol", Object.assign({ ref: ref, className: cn(stepVariants({ orientation }), className, BASE_CLASSNAMES.step.root), "data-orientation": orientation }, props, { children: items.map((child, index) => cloneElement(child, {
                __stepIndex: index,
                __isLast: index === items.length - 1,
                __isFirst: index === 0,
                __previousStatus: index > 0 ? statuses[index - 1] : undefined,
            })) })) }));
});
Step.displayName = "Step";
const StepItem = (_a) => {
    var _b;
    var { className, icon, label, description, children, status = "upcoming", step, variant, __stepIndex = 0, __isLast = false, __isFirst = false, __previousStatus } = _a, props = __rest(_a, ["className", "icon", "label", "description", "children", "status", "step", "variant", "__stepIndex", "__isLast", "__isFirst", "__previousStatus"]);
    const context = useStepContext();
    const orientation = context.orientation;
    const resolvedVariant = (_b = variant !== null && variant !== void 0 ? variant : context.variant) !== null && _b !== void 0 ? _b : "default";
    const displayLabel = label !== null && label !== void 0 ? label : children;
    const indicatorContent = icon !== null && icon !== void 0 ? icon : (typeof step === "number" ? step : __stepIndex + 1);
    const isHorizontal = orientation === "horizontal";
    const connectorStatus = status === "complete" ? "complete" : status === "current" ? "current" : "upcoming";
    const horizontalIndicator = (_jsxs("div", { className: cn(stepIndicatorWrapperVariants({ orientation })), children: [!__isFirst && (_jsx("span", { "aria-hidden": true, className: cn("absolute left-0 right-1/2 top-1/2 h-0.5 -translate-y-1/2 pointer-events-none", stepConnectorVariants({
                    orientation,
                    variant: resolvedVariant,
                    status: __previousStatus !== null && __previousStatus !== void 0 ? __previousStatus : "complete",
                }), BASE_CLASSNAMES.step.connectorHorizontal) })), !__isLast && (_jsx("span", { "aria-hidden": true, className: cn("absolute left-1/2 right-0 top-1/2 h-0.5 -translate-y-1/2 pointer-events-none", stepConnectorVariants({
                    orientation,
                    variant: resolvedVariant,
                    status: connectorStatus,
                }), BASE_CLASSNAMES.step.connectorHorizontal) })), _jsx("span", { className: cn("relative z-10", stepIndicatorVariants({
                    variant: resolvedVariant,
                    status,
                }), BASE_CLASSNAMES.step.indicator), children: indicatorContent })] }));
    const verticalIndicator = (_jsxs("div", { className: cn(stepIndicatorWrapperVariants({ orientation })), children: [!__isFirst && (_jsx("span", { "aria-hidden": true, className: cn("absolute left-1/2 top-0 bottom-1/2 w-0.5 -translate-x-1/2 pointer-events-none", stepConnectorVariants({
                    orientation,
                    variant: resolvedVariant,
                    status: __previousStatus !== null && __previousStatus !== void 0 ? __previousStatus : "complete",
                }), BASE_CLASSNAMES.step.connectorVertical) })), !__isLast && (_jsx("span", { "aria-hidden": true, className: cn("absolute left-1/2 top-1/2 bottom-0 w-0.5 -translate-x-1/2 pointer-events-none", stepConnectorVariants({
                    orientation,
                    variant: resolvedVariant,
                    status: connectorStatus,
                }), BASE_CLASSNAMES.step.connectorVertical) })), _jsx("span", { className: cn("relative z-10", stepIndicatorVariants({
                    variant: resolvedVariant,
                    status,
                }), BASE_CLASSNAMES.step.indicator), children: indicatorContent })] }));
    return (_jsxs("li", Object.assign({ className: cn(stepItemVariants({ orientation }), className, BASE_CLASSNAMES.step.item), "data-status": status }, props, { children: [isHorizontal ? horizontalIndicator : verticalIndicator, _jsxs("div", { className: cn(stepContentVariants({ orientation }), BASE_CLASSNAMES.step.content), children: [displayLabel ? (_jsx("span", { className: cn(stepLabelVariants({ orientation }), getLabelColorClass(resolvedVariant, status), BASE_CLASSNAMES.step.label), children: displayLabel })) : null, description ? (_jsx("span", { className: cn(stepDescriptionVariants({ orientation }), BASE_CLASSNAMES.step.description), children: description })) : null] })] })));
};
StepItem.displayName = "Step.Item";
const StepNamespace = Object.assign(Step, {
    Item: StepItem,
});
export { StepNamespace as Step };