laif-ds/dist/components/ui/stepper.js

Design System di Laif con componenti React basati su principi di Atomic Design

"use client";
import { jsx as c } from "react/jsx-runtime";
import { cn as d } from "../../lib/utils.js";
import { cva as g } from "../../node_modules/class-variance-authority/dist/index.js";
import * as p from "react";
import { createContext as T, useContext as P } from "react";
const E = T(
  void 0
), L = T(
  void 0
), R = g("w-full max-w-6xl", {
  variants: {
    orientation: {
      horizontal: "flex flex-row items-center",
      vertical: "flex flex-col items-start"
    }
  },
  defaultVariants: {
    orientation: "horizontal"
  }
}), O = g("group/step relative", {
  variants: {
    orientation: {
      horizontal: "flex flex-row items-center justify-center not-last:flex-1",
      vertical: "flex flex-col items-start justify-start"
    }
  },
  defaultVariants: {
    orientation: "horizontal"
  }
}), F = g(
  "focus-visible:ring-ring/50 focus-visible:border-d-ring inline-flex cursor-pointer items-center gap-3 rounded-full outline-none focus-visible:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-60",
  {
    variants: {
      size: {
        sm: "gap-2",
        default: "gap-3",
        lg: "gap-4"
      }
    },
    defaultVariants: {
      size: "default"
    }
  }
), K = g(
  "border-secondary bg-secondary text-bodyPrimary data-[state=active]:bg-d-primary data-[state=completed]:bg-d-primary data-[state=active]:text-bodyPrimary data-[state=completed]:text-onAccent relative flex shrink-0 items-center justify-center overflow-hidden rounded-full",
  {
    variants: {
      size: {
        sm: "size-5 text-xs",
        default: "size-6 text-xs",
        lg: "size-8 text-sm"
      }
    },
    defaultVariants: {
      size: "default"
    }
  }
), $ = g("bg-secondary m-0.5 rounded-full", {
  variants: {
    orientation: {
      horizontal: "h-0.5 flex-1",
      vertical: "h-12 w-0.5"
    }
  },
  defaultVariants: {
    orientation: "horizontal"
  }
}), H = g("text-sm leading-none font-medium", {
  variants: {
    size: {
      sm: "text-xs",
      default: "text-sm",
      lg: "text-base"
    }
  },
  defaultVariants: {
    size: "default"
  }
}), U = g("inline-flex", {
  variants: {
    orientation: {
      horizontal: "w-full flex-row",
      vertical: "flex-col"
    }
  },
  defaultVariants: {
    orientation: "horizontal"
  }
});
function x() {
  const t = P(E);
  if (!t) throw new Error("useStepper must be used within a Stepper");
  return t;
}
function I() {
  const t = P(L);
  if (!t) throw new Error("useStepItem must be used within a StepperItem");
  return t;
}
function M({
  defaultValue: t = 1,
  value: a,
  onValueChange: n,
  orientation: e = "horizontal",
  className: i,
  children: r,
  indicators: S = {},
  ...y
}) {
  const [f, b] = p.useState(t), [o, h] = p.useState(
    []
  ), z = p.useCallback(
    (s) => {
      h((l) => s && !l.includes(s) ? [...l, s] : !s && l.includes(s) ? l.filter((w) => w !== s) : l);
    },
    []
  ), N = p.useCallback(
    (s) => {
      a === void 0 && b(s), n?.(s);
    },
    [a, n]
  ), V = a ?? f, m = (s) => {
    o[s] && o[s].focus();
  }, A = (s) => m((s + 1) % o.length), v = (s) => m((s - 1 + o.length) % o.length), C = () => m(0), k = () => m(o.length - 1), D = p.useMemo(
    () => ({
      activeStep: V,
      setActiveStep: N,
      stepsCount: p.Children.toArray(r).filter(
        (s) => p.isValidElement(s) && s.type.displayName === "StepperItem"
      ).length,
      orientation: e,
      registerTrigger: z,
      focusNext: A,
      focusPrev: v,
      focusFirst: C,
      focusLast: k,
      triggerNodes: o,
      indicators: S
    }),
    [
      V,
      N,
      r,
      e,
      z,
      o
    ]
  );
  return /* @__PURE__ */ c(E.Provider, { value: D, children: /* @__PURE__ */ c(
    "div",
    {
      role: "tablist",
      "aria-orientation": e,
      "data-slot": "stepper",
      className: d(R({ orientation: e }), i),
      "data-orientation": e,
      ...y,
      children: r
    }
  ) });
}
function Q({
  step: t,
  completed: a = !1,
  disabled: n = !1,
  loading: e = !1,
  orientation: i,
  className: r,
  children: S,
  ...y
}) {
  const { activeStep: f, orientation: b } = x(), o = a || t < f ? "completed" : f === t ? "active" : "inactive", h = e && t === f;
  return /* @__PURE__ */ c(
    L.Provider,
    {
      value: { step: t, state: o, isDisabled: n, isLoading: h },
      children: /* @__PURE__ */ c(
        "div",
        {
          "data-slot": "stepper-item",
          className: d(
            O({
              orientation: i || b
            }),
            r
          ),
          "data-state": o,
          ...h ? { "data-loading": !0 } : {},
          ...y,
          children: S
        }
      )
    }
  );
}
function W({
  asChild: t = !1,
  size: a,
  className: n,
  children: e,
  tabIndex: i,
  ...r
}) {
  const { state: S, isLoading: y } = I(), f = x(), {
    setActiveStep: b,
    activeStep: o,
    registerTrigger: h,
    triggerNodes: z,
    focusNext: N,
    focusPrev: V,
    focusFirst: m,
    focusLast: A
  } = f, { step: v, isDisabled: C } = I(), k = o === v, D = `stepper-tab-${v}`, s = `stepper-panel-${v}`, l = p.useRef(null);
  p.useEffect(() => {
    l.current && h(l.current);
  }, [l.current]);
  const w = p.useMemo(
    () => z.findIndex((u) => u === l.current),
    [z, l.current]
  ), j = (u) => {
    switch (u.key) {
      case "ArrowRight":
      case "ArrowDown":
        u.preventDefault(), w !== -1 && N && N(w);
        break;
      case "ArrowLeft":
      case "ArrowUp":
        u.preventDefault(), w !== -1 && V && V(w);
        break;
      case "Home":
        u.preventDefault(), m && m();
        break;
      case "End":
        u.preventDefault(), A && A();
        break;
      case "Enter":
      case " ":
        u.preventDefault(), b(v);
        break;
    }
  };
  return t ? /* @__PURE__ */ c(
    "span",
    {
      "data-slot": "stepper-trigger",
      "data-state": S,
      className: n,
      children: e
    }
  ) : /* @__PURE__ */ c(
    "button",
    {
      ref: l,
      role: "tab",
      id: D,
      "aria-selected": k,
      "aria-controls": s,
      tabIndex: typeof i == "number" ? i : k ? 0 : -1,
      "data-slot": "stepper-trigger",
      "data-state": S,
      "data-loading": y,
      className: d(F({ size: a }), n),
      onClick: () => b(v),
      onKeyDown: j,
      disabled: C,
      ...r,
      children: e
    }
  );
}
function X({
  children: t,
  size: a,
  className: n
}) {
  const { state: e, isLoading: i } = I(), { indicators: r } = x();
  return /* @__PURE__ */ c(
    "div",
    {
      "data-slot": "stepper-indicator",
      "data-state": e,
      className: d(K({ size: a }), n),
      children: /* @__PURE__ */ c("div", { className: "absolute", children: r && (i && r.loading || e === "completed" && r.completed || e === "active" && r.active || e === "inactive" && r.inactive) ? i && r.loading || e === "completed" && r.completed || e === "active" && r.active || e === "inactive" && r.inactive : t })
    }
  );
}
function Y({
  orientation: t,
  className: a
}) {
  const { state: n } = I(), { orientation: e } = x();
  return /* @__PURE__ */ c(
    "div",
    {
      "data-slot": "stepper-separator",
      "data-state": n,
      className: d(
        $({
          orientation: t || e
        }),
        a
      )
    }
  );
}
function Z({
  children: t,
  size: a,
  className: n
}) {
  const { state: e } = I();
  return /* @__PURE__ */ c(
    "h3",
    {
      "data-slot": "stepper-title",
      "data-state": e,
      className: d(H({ size: a }), n),
      children: t
    }
  );
}
function _({
  children: t,
  orientation: a,
  className: n
}) {
  const { activeStep: e, orientation: i } = x();
  return /* @__PURE__ */ c(
    "nav",
    {
      "data-slot": "stepper-nav",
      "data-state": e,
      "data-orientation": a || i,
      className: d(
        U({
          orientation: a || i
        }),
        n
      ),
      children: t
    }
  );
}
function tt({ children: t, className: a }) {
  const { activeStep: n } = x();
  return /* @__PURE__ */ c(
    "div",
    {
      "data-slot": "stepper-panel",
      "data-state": n,
      className: d("w-full", a),
      children: t
    }
  );
}
function et({
  value: t,
  forceMount: a,
  children: n,
  className: e
}) {
  const { activeStep: i } = x(), r = t === i;
  return !a && !r ? null : /* @__PURE__ */ c(
    "div",
    {
      "data-slot": "stepper-content",
      "data-state": i,
      className: d("w-full", e, !r && a && "hidden"),
      hidden: !r && a,
      children: n
    }
  );
}
export {
  M as Stepper,
  et as StepperContent,
  X as StepperIndicator,
  Q as StepperItem,
  _ as StepperNav,
  tt as StepperPanel,
  Y as StepperSeparator,
  Z as StepperTitle,
  W as StepperTrigger,
  I as useStepItem,
  x as useStepper
};