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