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 React, { forwardRef } from "react";
import { ChevronDownIcon } from "@navikt/aksel-icons";
import { Button } from "../../button/index.js";
import { Collapsible } from "../../collapsible/index.js";
import { HStack } from "../../primitives/stack/index.js";
import { ProgressBar } from "../../progress-bar/index.js";
import { Stepper } from "../../stepper/index.js";
import { BodyShort } from "../../typography/index.js";
import { useI18n } from "../../utils/i18n/i18n.hooks.js";
/**
 * Component for visualizing progression in a form with multiple steps.
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/formprogress)
 * @see 🏷️ {@link FormProgressProps}
 *
 * @example
 * <FormProgress activeStep={2} totalSteps={3}>
 *   <FormProgress.Step completed href="#">Children</FormProgress.Step>
 *   <FormProgress.Step href="#">Personal information</FormProgress.Step>
 *   <FormProgress.Step interactive={false}>Summary</FormProgress.Step>
 * </FormProgress>
 */
export const FormProgress = forwardRef((_a, ref) => {
    var { totalSteps, activeStep, open, onOpenChange, children, onStepChange, interactiveSteps, translations } = _a, rest = __rest(_a, ["totalSteps", "activeStep", "open", "onOpenChange", "children", "onStepChange", "interactiveSteps", "translations"]);
    const translate = useI18n("FormProgress", translations);
    return (React.createElement("div", Object.assign({ ref: ref }, rest),
        React.createElement(ProgressBar, { "aria-hidden": true, value: activeStep, valueMax: totalSteps, className: "aksel-form-progress__bar" }),
        React.createElement(Collapsible, { lazy: true, open: open, onOpenChange: onOpenChange },
            React.createElement(HStack, { justify: "space-between", align: "center" },
                React.createElement(BodyShort, { as: "span" }, translate("step", { activeStep, totalSteps })),
                React.createElement(Collapsible.Trigger, { asChild: true, "aria-expanded": undefined },
                    React.createElement(Button, { variant: "tertiary", size: "small", className: "aksel-form-progress__button", icon: React.createElement(ChevronDownIcon, { "aria-hidden": true }) },
                        React.createElement("span", { className: "aksel-form-progress__btn-txt-hide" }, translate("hideAllSteps")),
                        React.createElement("span", { className: "aksel-form-progress__btn-txt-show" }, translate("showAllSteps"))))),
            React.createElement(Collapsible.Content, { className: "aksel-form-progress__collapsible" },
                React.createElement("div", { className: "aksel-form-progress__collapsible-content" },
                    React.createElement("div", { className: "aksel-form-progress__stepper" },
                        React.createElement(Stepper, { activeStep: activeStep, onStepChange: onStepChange, interactive: interactiveSteps }, children)))))));
});
FormProgress.Step = Stepper.Step;
export const FormProgressStep = Stepper.Step;
export default FormProgress;
//# sourceMappingURL=FormProgress.js.map